.timeline-loading { width: 900px; } .timeline-container { box-sizing: border-box; z-index: 1; margin-left: 757px; position: fixed; -webkit-transform: translate3d(0,0,0); &.timeline-docked { position: absolute; } .topic-timeline { margin-left: 3em; width: 200px; .timeline-controls { margin-bottom: 2em; button { margin-right: 0.5em; } } .start-date { @include unselectable; color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } .timeline-scrollarea { margin-top: 0.5em; margin-left: 0.5em; border-left: 1px solid; border-color: dark-light-choose(scale-color($tertiary, $lightness: 80%), scale-color($tertiary, $lightness: 20%)); position: relative; -webkit-transform: translate3d(0,0,0); } .timeline-padding { transition: height 0.15s ease-out; cursor: pointer; .widget-dragging & { transition: none; } } .timeline-handle { @include border-radius-all(0.8em); width: 0.35em; background-color: $tertiary; height: 100%; float: left; } .timeline-scroller-content { padding-left: 1em; } .timeline-ago { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); } .timeline-scroller { @include unselectable; margin-left: -0.18em; cursor: ns-resize; display: flex; align-items: center; } .timeline-replies { font-weight: bold; } .timeline-last-read { position: absolute; margin-left: -0.18em; i.progress { font-size: 0.5em; color: $tertiary; margin-right: 1em; } } .now-date { @include unselectable; display: inline-block; color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); margin-top: 0.5em; i { margin-left: 0.15em; } } } }