body .schedule { &.scroll-container { overflow: hidden; overflow-x: scroll; } .scroll-element { position: relative; } .room { overflow: hidden; position: relative; height: 100px; } .now { position: absolute; left: 0; width: 150px; height: 100%; background-color: @schedule-now-bg; font-size: 14px; pointer-events: none; z-index: 5; span { display: block; position: absolute; right: -28px; color: @schedule-now; } } .block { overflow: hidden; position: absolute; top: 0; height: 100px; /* and now for small screens: */ @media (max-width: @screen-xs-max) { /*height: 75px; disabled, at it did not work as expected --Andi */ } a:hover { text-decoration: none; } .inner { display: block; padding: 10px; height: 100%; } border: 1px solid @schedule-border; h3 { margin: 0; padding: 0; font-size: 18px; /* and now for small screens: */ @media (max-width: @screen-xs-max) { font-size: 16px; } } h4 { margin: 3px 0; color: @schedule-room; font-size: 14px; @media (max-width: @screen-xs-max) { font-size: 15px; } } h5 { @media (max-width: @screen-xs-max) { margin: 0; } color: @schedule-author; } &.event h3 { overflow: hidden; } &.gap { background-image: url("@{img}/stripes/gap.png"); background-color: @schedule-gap-bg; color: @schedule-gap; text-shadow: 0 0 3px @schedule-gap; } &.daychange { background-image: url("@{img}/stripes/gap.png"); background-color: @schedule-daychange-bg; color: @schedule-daychange; text-shadow: 0 0 3px @schedule-daychange; } &.pause, &.optout { color: @schedule-pause; background-color: @schedule-pause-bg; background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 100px; /* and now for small screens: */ @media (max-width: @screen-xs-max) { background-size: 72px; } } } .room.highlight .block { background-color: @schedule-selected-room; } }