@use 'sass:color' .timeline z-index: 0 position: relative &-item display: flex $timeline-line-width: 7px $timeline-line-node-radius: 18px $timeline-line-color: $primary $timeline-line-color-current: #36c2e6 @keyframes timeline-line-node-noncurrent from background: $timeline-line-color to background: color.adjust($timeline-line-color, $lightness: +10%) box-shadow: 0 0 20px 3px color.adjust($timeline-line-color, $lightness: +10%, $alpha: -0.1) @keyframes timeline-line-node-current from background: $timeline-line-color-current to background: color.adjust($timeline-line-color-current, $lightness: +10%) box-shadow: 0 0 20px 3px color.adjust($timeline-line-color-current, $lightness: +10%, $alpha: -0.1) .timeline-line &-area-container display: flex justify-content: flex-end padding-right: 5px flex: 0 0 auto width: 60px &-area display: flex flex-direction: column align-items: center width: 30px &-segment width: $timeline-line-width background: $timeline-line-color &.start height: 14px flex: 0 0 auto &.end flex: 1 1 auto &.current-end height: 20px flex: 0 0 auto background: linear-gradient($timeline-line-color-current, transparent) &-node-container flex: 0 0 auto position: relative width: $timeline-line-node-radius height: $timeline-line-node-radius &-node width: $timeline-line-node-radius + 2 height: $timeline-line-node-radius + 2 position: absolute left: -1px top: -1px border-radius: 50% box-sizing: border-box z-index: 1 animation: 1s infinite alternate animation-name: timeline-line-node-noncurrent .timeline-top display: flex justify-content: space-between .timeline-line-segment flex: 1 1 auto .current .timeline-line &-segment &.start background: linear-gradient($timeline-line-color, $timeline-line-color-current) &.end background: $timeline-line-color-current &-node animation-name: timeline-line-node-current .timeline-content-area padding: 10px 0 flex-grow: 1 .timeline-item-delete-button position: absolute right: 0 bottom: 0 .timeline-content white-space: pre-line .timeline-content-image max-width: 60% max-height: 200px .timeline-post-edit-image max-width: 100px max-height: 100px .mask background: change-color($color: white, $alpha: 0.8) z-index: 100 .timeline-page-top-space transition: height 0.5s .timeline-sync-state-badge font-size: 0.8em padding: 3px 8px border-radius: 5px background: #e8fbff .timeline-sync-state-badge-pin display: inline-block width: 0.4em height: 0.4em border-radius: 50% vertical-align: middle margin-right: 0.6em .timeline-template-card position: fixed z-index: 1 top: 56px right: 0 margin: 0.5em