2018-03-11 03:45:01 +00:00
|
|
|
#audio-player
|
2018-03-11 17:17:35 +00:00
|
|
|
vertical
|
2018-03-11 03:45:01 +00:00
|
|
|
default-transition
|
2018-03-11 21:42:58 +00:00
|
|
|
justify-content center
|
2018-03-11 17:17:35 +00:00
|
|
|
position relative
|
2018-03-11 23:59:23 +00:00
|
|
|
margin-bottom 0.8rem
|
2018-03-11 22:12:21 +00:00
|
|
|
flex-shrink 0
|
2018-03-11 21:42:58 +00:00
|
|
|
|
|
|
|
|
#audio-player-anime-info
|
|
|
|
|
display flex
|
|
|
|
|
justify-content center
|
|
|
|
|
align-items center
|
|
|
|
|
width 100%
|
2018-03-11 23:59:23 +00:00
|
|
|
margin-top 0.8rem
|
2018-03-11 21:42:58 +00:00
|
|
|
|
2018-03-11 23:23:01 +00:00
|
|
|
#audio-player-anime-link
|
|
|
|
|
width 142px
|
|
|
|
|
height 142px
|
|
|
|
|
overflow-y hidden
|
2018-03-11 21:42:58 +00:00
|
|
|
border-radius 3px
|
2018-03-11 23:23:01 +00:00
|
|
|
opacity 0.75
|
2018-03-11 21:42:58 +00:00
|
|
|
|
|
|
|
|
:hover
|
2018-03-11 23:23:01 +00:00
|
|
|
opacity 1
|
2018-03-11 21:42:58 +00:00
|
|
|
|
2018-03-11 23:23:01 +00:00
|
|
|
#audio-player-anime-image
|
|
|
|
|
width 100%
|
|
|
|
|
transform translateY(0%)
|
|
|
|
|
animation bounce-up-down 45s linear infinite
|
|
|
|
|
|
|
|
|
|
animation bounce-up-down
|
|
|
|
|
50%
|
|
|
|
|
transform translateY(-30%)
|
2018-03-11 03:45:01 +00:00
|
|
|
|
2018-03-11 20:59:48 +00:00
|
|
|
#audio-player-track-title
|
2018-03-11 21:42:58 +00:00
|
|
|
width 100%
|
2018-03-11 20:59:48 +00:00
|
|
|
color text-color
|
|
|
|
|
font-size 0.7rem
|
2018-03-11 21:01:50 +00:00
|
|
|
line-height 1.7em
|
2018-03-11 20:59:48 +00:00
|
|
|
opacity 0.8
|
|
|
|
|
text-align center
|
|
|
|
|
padding 0.8rem
|
2018-03-11 21:42:58 +00:00
|
|
|
animation rotate-x-once 5s ease infinite alternate
|
2018-03-11 20:59:48 +00:00
|
|
|
|
2018-03-11 21:42:58 +00:00
|
|
|
animation rotate-x-once
|
2018-03-11 20:59:48 +00:00
|
|
|
0%
|
|
|
|
|
transform rotateX(0)
|
|
|
|
|
90%
|
|
|
|
|
transform rotateX(0)
|
|
|
|
|
100%
|
|
|
|
|
transform rotateX(90deg)
|
|
|
|
|
|
2018-03-11 20:28:07 +00:00
|
|
|
#audio-player-controls
|
|
|
|
|
horizontal
|
|
|
|
|
justify-content center
|
|
|
|
|
align-items center
|
|
|
|
|
justify-content space-evenly
|
|
|
|
|
|
2018-03-11 03:45:01 +00:00
|
|
|
.audio-player-play-pause-container
|
|
|
|
|
position relative
|
|
|
|
|
width 48px
|
|
|
|
|
height 48px
|
|
|
|
|
|
|
|
|
|
#audio-player-play,
|
|
|
|
|
#audio-player-pause
|
|
|
|
|
position absolute
|
|
|
|
|
left 0
|
|
|
|
|
top 0
|
|
|
|
|
display flex
|
|
|
|
|
justify-content center
|
|
|
|
|
align-items center
|
|
|
|
|
font-size 1.5rem
|
2018-03-11 20:28:07 +00:00
|
|
|
|
2018-03-11 03:45:01 +00:00
|
|
|
border-radius 50%
|
|
|
|
|
width 100%
|
|
|
|
|
height 100%
|
|
|
|
|
|
|
|
|
|
:hover
|
|
|
|
|
color button-hover-color
|
|
|
|
|
background button-hover-background
|
|
|
|
|
|
|
|
|
|
&.fade-out
|
|
|
|
|
pointer-events none
|
|
|
|
|
|
|
|
|
|
.icon-play
|
2018-03-11 17:17:35 +00:00
|
|
|
transform translateX(3px)
|
|
|
|
|
|
2018-03-11 20:28:07 +00:00
|
|
|
#audio-player-play,
|
|
|
|
|
#audio-player-pause,
|
|
|
|
|
.audio-player-side-button
|
|
|
|
|
color text-color
|
|
|
|
|
background rgba(0, 0, 0, 0.03)
|
|
|
|
|
border none
|
|
|
|
|
|
|
|
|
|
.audio-player-side-button
|
|
|
|
|
width 32px
|
|
|
|
|
height 32px
|
|
|
|
|
display flex
|
|
|
|
|
justify-content center
|
|
|
|
|
align-items center
|
|
|
|
|
|
|
|
|
|
#audio-player-prev
|
|
|
|
|
//
|
|
|
|
|
|
|
|
|
|
#audio-player-next
|
|
|
|
|
//
|
|
|
|
|
|
2018-03-11 17:17:35 +00:00
|
|
|
mixin volume-slider-thumb
|
|
|
|
|
appearance none
|
|
|
|
|
width 18px
|
|
|
|
|
height 18px
|
|
|
|
|
transform scale(0.5)
|
|
|
|
|
border-radius 50%
|
|
|
|
|
background text-color
|
|
|
|
|
cursor pointer
|
|
|
|
|
opacity 0.25
|
|
|
|
|
box-shadow shadow-medium
|
|
|
|
|
default-transition
|
|
|
|
|
|
2018-03-11 22:20:38 +00:00
|
|
|
mixin volume-slider-hover-thumb
|
|
|
|
|
background link-hover-color
|
|
|
|
|
opacity 1
|
|
|
|
|
transform scale(1)
|
|
|
|
|
|
2018-03-11 17:17:35 +00:00
|
|
|
#audio-player-volume
|
|
|
|
|
appearance none
|
|
|
|
|
-webkit-appearance none
|
|
|
|
|
width 100%
|
|
|
|
|
height 6px
|
|
|
|
|
background rgba(0, 0, 0, 0.03)
|
|
|
|
|
outline none !important
|
|
|
|
|
border none !important
|
|
|
|
|
border-radius 0
|
|
|
|
|
padding 0
|
|
|
|
|
margin 0
|
|
|
|
|
margin-top 1rem
|
|
|
|
|
|
|
|
|
|
::-webkit-slider-thumb
|
|
|
|
|
volume-slider-thumb
|
|
|
|
|
-webkit-appearance none
|
|
|
|
|
|
|
|
|
|
::-moz-range-thumb
|
|
|
|
|
volume-slider-thumb
|
|
|
|
|
|
|
|
|
|
:active
|
|
|
|
|
transform none
|
|
|
|
|
|
|
|
|
|
:hover
|
|
|
|
|
background rgba(0, 0, 0, 0.06)
|
|
|
|
|
|
|
|
|
|
::-webkit-slider-thumb
|
2018-03-11 22:20:38 +00:00
|
|
|
volume-slider-hover-thumb
|
|
|
|
|
|
2018-03-11 22:24:27 +00:00
|
|
|
#audio-player-volume:hover ::-moz-range-thumb
|
|
|
|
|
volume-slider-thumb
|
