182 lines
3.2 KiB
Plaintext

const audio-player-volume-background = rgba(0, 0, 0, 0.03)
#audio-player
vertical
default-transition
justify-content center
position relative
margin-bottom 0.8rem
flex-shrink 0
#audio-player-anime-info
display flex
justify-content center
align-items center
width 100%
margin-top 0.8rem
#audio-player-anime-link
width anime-image-medium-width
height anime-image-medium-width
overflow-y hidden
border-radius ui-element-border-radius
opacity 0.75
transform opacity transition-speed ease
:hover
opacity 1 !important
#audio-player-anime-image
width 100%
transform translateY(0)
will-change transform
animation bounce-up-down 45s linear infinite
// 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%
transform translateY(-30%) rotate(0.002deg)
#audio-player-track-title
width 100%
color text-color
font-size 0.7rem
line-height 1.7em
opacity 0.8
text-align center
padding 0.8rem
animation rotate-x-once 5s ease infinite alternate
animation rotate-x-once
0%
transform rotateX(0)
90%
transform rotateX(0)
100%
transform rotateX(90deg)
#audio-player-controls
horizontal
justify-content center
align-items center
justify-content space-evenly
.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
border-radius 50%
width 100%
height 100%
:hover
color button-hover-color
background button-hover-background
&.fade-out
pointer-events none
svg-icon
[name="play"]
transform translateX(3px)
#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
//
mixin volume-slider-thumb
appearance none
width 18px
height 18px
transform scale(0.5)
border none
border-radius 50%
background text-color
cursor pointer
opacity 0.25
box-shadow shadow-medium
default-transition
mixin volume-slider-hover-thumb
background link-hover-color
opacity 1
transform scale(1)
#audio-player-volume
appearance none
-webkit-appearance none
width 100%
height 6px
background audio-player-volume-background
outline none !important
border none !important
box-shadow none !important
border-radius 0
padding 0
margin 0
margin-top 1rem
::-moz-range-track
background transparent
::-moz-focus-outer
border 0
::-webkit-slider-thumb
volume-slider-thumb
-webkit-appearance none
::-moz-range-thumb
volume-slider-thumb
-moz-appearance none
:active
transform none
:hover
cursor pointer
background rgba(0, 0, 0, 0.06)
// Chrome parsing bug forces us to make the following 2 thumb definitions have different statements.
// That is why we're adding the appearance statements here, even though they are not really needed.
::-webkit-slider-thumb
volume-slider-hover-thumb
-webkit-appearance none
::-moz-range-thumb
volume-slider-hover-thumb
-moz-appearance none