aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/timeline-common/timeline-common.sass
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views/timeline-common/timeline-common.sass')
-rw-r--r--FrontEnd/src/views/timeline-common/timeline-common.sass259
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