diff options
Diffstat (limited to 'FrontEnd/src/views/timeline-common/timeline-common.sass')
-rw-r--r-- | FrontEnd/src/views/timeline-common/timeline-common.sass | 259 |
1 files changed, 259 insertions, 0 deletions
diff --git a/FrontEnd/src/views/timeline-common/timeline-common.sass b/FrontEnd/src/views/timeline-common/timeline-common.sass new file mode 100644 index 00000000..4400fead --- /dev/null +++ b/FrontEnd/src/views/timeline-common/timeline-common.sass @@ -0,0 +1,259 @@ +@use 'sass:color' + +.timeline + z-index: 0 + position: relative + width: 100% + overflow-wrap: break-word + animation: 1s timeline-enter + +$timeline-line-width: 7px +$timeline-line-node-radius: 18px +$timeline-line-color: var(--tl-primary-color) +$timeline-line-color-current: var(--tl-primary-enhance-color) + +@keyframes timeline-line-node-noncurrent + to + box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color) + +@keyframes timeline-line-node-current + to + box-shadow: 0 0 20px 3px var(--tl-primary-enhance-lighter-color) + +@keyframes timeline-line-node-loading + to + box-shadow: 0 0 20px 3px var(--tl-primary-lighter-color) + +@keyframes timeline-line-node-loading-edge + from + transform: rotate(0turn) + to + transform: rotate(1turn) + +@keyframes timeline-enter + from + transform: translate(0, -100vh) + +@keyframes timeline-top-loading-enter + from + transform: translate(0, -100%) + +@keyframes timeline-post-enter + from + transform: translate(0, -100%) + opacity: 0 + + to + opacity: 1 + +.timeline-top-loading-enter + animation: 1s timeline-top-loading-enter + +.timeline-line + display: flex + flex-direction: column + align-items: center + width: 30px + + position: absolute + z-index: 1 + left: 2em + top: 0 + bottom: 0 + + transition: left 0.5s + + @include media-breakpoint-down(sm) + left: 1em + + .segment + width: $timeline-line-width + background: $timeline-line-color + + &.start + height: 1.8em + flex: 0 0 auto + + &.end + flex: 1 1 auto + + &.current-end + height: 2em + flex: 0 0 auto + background: linear-gradient($timeline-line-color-current, white) + + .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 + background: $timeline-line-color + left: -1px + top: -1px + border-radius: 50% + box-sizing: border-box + z-index: 1 + animation: 1s infinite alternate + animation-name: timeline-line-node-noncurrent + + .node-loading-edge + color: $timeline-line-color + width: $timeline-line-node-radius + 20 + height: $timeline-line-node-radius + 20 + position: absolute + left: -10px + top: -10px + box-sizing: border-box + z-index: 2 + animation: 1.5s linear infinite timeline-line-node-loading-edge + + &.current + .segment + &.start + background: linear-gradient($timeline-line-color, $timeline-line-color-current) + &.end + background: $timeline-line-color-current + .node + background: $timeline-line-color-current + animation-name: timeline-line-node-current + + &.loading + .node + background: $timeline-line-color + animation-name: timeline-line-node-loading + +.timeline-item.current + padding-bottom: 2.5em + +.timeline-top + position: relative + text-align: right + +.timeline-item + position: relative + padding: 0.5em + +.timeline-item-card + @extend .cru-card + position: relative + padding: 0.3em 0.5em 1em 4em + transition: background 0.5s, padding-left 0.5s + animation: 0.6s forwards + opacity: 0 + + @include media-breakpoint-down(sm) + padding-left: 3em + +.timeline-item-header + display: flex + align-items: center + @extend .my-2 + +.timeline-avatar + border-radius: 50% + width: 2em + height: 2em + +.timeline-item-delete-button + position: absolute + right: 0 + bottom: 0 + +.timeline-content + white-space: pre-line + +.timeline-content-image + max-width: 80% + max-height: 200px + +.timeline-date-item + position: relative + padding: 0.3em 0 0.3em 4em + +.timeline-date-item-badge + display: inline-block + padding: 0.1em 0.4em + border-radius: 0.4em + background: #7c7c7c + color: white + font-size: 0.8em + +.timeline-post-edit-image + max-width: 100px + max-height: 100px + +.mask + background: change-color($color: white, $alpha: 0.8) + z-index: 100 + +.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 + top: 56px + right: 0 + margin: 0.5em + +.timeline-markdown-post-edit-page + overflow: scroll + max-height: 300px + +.timeline-markdown-post-edit-image-container + position: relative + text-align: center + margin-bottom: 1em + +.timeline-markdown-post-edit-image + max-width: 100% + max-height: 200px + +.timeline-markdown-post-edit-image-delete-button + position: absolute + right: 10px + top: 2px + +.connection-status-badge + font-size: 0.8em + border-radius: 5px + padding: 0.1em 1em + background-color: rgb(234 242 255) + + &::before + width: 10px + height: 10px + border-radius: 50% + display: inline-block + content: '' + margin-right: 0.6em + + &.success + color: #006100 + &::before + background-color: #006100 + + &.warning + color: #e4a700 + &::before + background-color: #e4a700 + + &.danger + color: #fd1616 + &::before + background-color: #fd1616 |