146 lines
2.8 KiB
Stylus
146 lines
2.8 KiB
Stylus
.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) |