156 lines
2.4 KiB
Plaintext

#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 142px
height 142px
overflow-y hidden
border-radius 3px
opacity 0.75
:hover
opacity 1
#audio-player-anime-image
width 100%
transform translateY(0%)
animation bounce-up-down 45s linear infinite
animation bounce-up-down
50%
transform translateY(-30%)
#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
.icon-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-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 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
volume-slider-hover-thumb
#audio-player-volume:hover ::-moz-range-thumb
volume-slider-thumb