171 lines
2.9 KiB
Plaintext
Raw Normal View History

const audio-player-volume-background = rgba(0, 0, 0, 0.03)
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
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%
margin-top 0.8rem
2018-03-11 21:42:58 +00:00
#audio-player-anime-link
2018-03-22 19:15:21 +00:00
width anime-image-medium-width
height anime-image-medium-width
overflow-y hidden
2018-03-27 19:08:26 +00:00
border-radius ui-element-border-radius
opacity 0.75
2018-03-12 19:21:22 +00:00
transform opacity transition-speed ease
2018-03-11 21:42:58 +00:00
:hover
2018-03-12 19:21:22 +00:00
opacity 1 !important
2018-03-11 21:42:58 +00:00
#audio-player-anime-image
width 100%
2018-04-10 12:10:20 +00:00
transform translateY(0)
will-change transform
animation bounce-up-down 45s linear infinite
2018-03-21 01:07:38 +00:00
// The element-found class doesn't set opacity,
// because we're overwriting the animation.
// That's why we have to manually add it here.
&.element-found
opacity 1
animation bounce-up-down
50%
2018-04-10 12:10:20 +00:00
transform translateY(-30%) rotate(0.002deg)
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)
2018-03-24 23:03:36 +00:00
border none
2018-03-11 17:17:35 +00:00
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 audio-player-volume-background
2018-03-11 17:17:35 +00:00
outline none !important
border none !important
2018-03-24 23:03:36 +00:00
box-shadow none !important
2018-03-11 17:17:35 +00:00
border-radius 0
padding 0
margin 0
margin-top 1rem
::-moz-range-track
background transparent
::-moz-focus-outer
border 0
2018-03-11 17:17:35 +00:00
::-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