yhl452493373/timeline
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
yhl452493373
2021-12-16 13:25:29 +08:00
parent 19b47efbcd
commit 6ac39922ea
10 changed files with 979 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
styl/timeline.styl Normal file
View File

@@ -0,0 +1,146 @@
.timeline
height 50px
position relative
.time-tips
width 130px
font-size 12px
position absolute
background-color rgba(128, 128, 128, 0.5)
color #fff
height 16px
top -30px
padding 2px 0
text-align center
border-radius 2px
left -45px
transition-property all
transition-duration 0.1s
transition-timing-function linear
.time-tips-time
font-family VeraSansMono
font-size 12px
.time-tips-arrow
position absolute
bottom -6px
left 50%
margin-left -6px
width 0
height 0
border-right 6px solid transparent
border-left 6px solid transparent
border-top 6px solid rgba(128, 128, 128, 0.5)
.timeline-button
position absolute
right 0
width 24px
height 24px
border-radius 50%
background-color #84cdc9
.timeline-play
width 0
height 0
margin 7px 7px 7px 8px
display inline-block
border-style solid
border-width 5px 0 5px 10px
border-color transparent transparent transparent #299387
.timeline-pause
display inline-block
width 10px
height 10px
margin 7px
border-style double
border-width 0 0 0 10px
border-color #299387
.timeline-content
position absolute
left 0
right 30px
height 100%
.timeline-line
height 25px
position absolute
display flex
align-items center
justify-content space-between
left 10px
right 10px
top 0
z-index 10
&:after
content ''
background-color rgba(128, 128, 128, 0.5)
position absolute
top 0
height 5px
width 100%
.timeline-line-limit,
.timeline-line-passed
position absolute
top 0
width 0
height 5px
background-color rgba(65, 248, 255, 1.000)
pointer-events none
transition-property all
transition-duration 0.1s
transition-timing-function linear
z-index 12
.timeline-line-limit
background-color #7da8cc
z-index 11
.timeline-label
color #fff
display flex
align-items center
position absolute
left 0
right 0
top 25px
justify-content space-between
span
font-family "VeraSansMono"
text-align center
font-size 12px
display block
flex 0 0 20px
position relative
cursor default
&:after
z-index 9
content ''
position absolute
height 10px
top -20px
background-color rgba(255, 255, 255, 0.5)
width 1px
left 50%
margin-left -1px
transition-duration 0.1s
transition-property all
transition-timing-function linear
&:first-child:after
height 15px
margin-left 0
&:last-child:after
height 15px
&.time-passed:after
background-color rgba(65, 248, 255, 1.000)