153 lines
2.6 KiB
Plaintext
153 lines
2.6 KiB
Plaintext
const soundtrack-margin = 1rem
|
|
|
|
.soundtracks
|
|
horizontal-wrap
|
|
justify-content space-around
|
|
|
|
.soundtrack
|
|
vertical
|
|
flex 1
|
|
flex-basis 500px
|
|
margin soundtrack-margin 0
|
|
|
|
// If text-shadow is enabled, the whole container will repaint.
|
|
// We need to disable text-shadow to reduce re-painting.
|
|
a
|
|
:hover
|
|
text-shadow none
|
|
|
|
> 500px
|
|
.soundtrack
|
|
margin soundtrack-margin
|
|
margin-bottom media-bottom-margin
|
|
|
|
.soundtrack-content
|
|
horizontal
|
|
box-shadow shadow-light
|
|
min-height 200px
|
|
border-radius ui-element-border-radius
|
|
overflow hidden
|
|
|
|
iframe
|
|
width 100%
|
|
|
|
.soundtrack-image
|
|
object-fit cover
|
|
width 100%
|
|
height 100%
|
|
border-radius ui-element-border-radius
|
|
filter brightness(100%)
|
|
transition filter transition-speed ease
|
|
|
|
.soundtrack-play-button
|
|
position absolute
|
|
top 50%
|
|
left 50%
|
|
transform translate(-50%, -50%)
|
|
border-radius 50%
|
|
width 92px
|
|
height 92px
|
|
font-size 3rem
|
|
color rgba(0, 0, 0, 0.15)
|
|
background rgba(255, 255, 255, 0.9)
|
|
pointer-events none
|
|
box-shadow outline-shadow-medium
|
|
|
|
.icon-play
|
|
transform translateX(27%)
|
|
|
|
.soundtrack-visualizer
|
|
horizontal
|
|
justify-content center
|
|
align-items center
|
|
pointer-events none
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
height 100%
|
|
opacity 0
|
|
transition opacity 250ms ease
|
|
|
|
.visualizer-box
|
|
width 3px
|
|
height 15px
|
|
margin 0.2rem
|
|
border-radius 1px
|
|
transition all 250ms linear
|
|
animation scale-vertically 300ms infinite ease, change-color 1s infinite ease
|
|
animation-direction alternate
|
|
|
|
.visualizer-box-1
|
|
animation-delay 0
|
|
|
|
.visualizer-box-2
|
|
animation-delay 100ms
|
|
|
|
.visualizer-box-3
|
|
animation-delay 200ms
|
|
|
|
animation scale-vertically
|
|
0%
|
|
transform scaleY(0.3)
|
|
opacity 0.8
|
|
100%
|
|
transform scaleY(1)
|
|
opacity 1
|
|
|
|
animation change-color
|
|
0%
|
|
background-color hsl(45, 100%, 68%)
|
|
100%
|
|
background-color hsl(235, 100%, 68%)
|
|
|
|
.soundtrack-play-area
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
width 100%
|
|
height 100%
|
|
cursor pointer
|
|
transition opacity 250ms ease
|
|
|
|
&.playing
|
|
.soundtrack-play-button
|
|
opacity 0
|
|
|
|
.soundtrack-visualizer
|
|
opacity 1
|
|
|
|
.soundtrack-image
|
|
filter brightness(0) !important
|
|
|
|
:hover
|
|
.soundtrack-play-button
|
|
color button-hover-color
|
|
background button-hover-background
|
|
|
|
.soundtrack-image
|
|
filter brightness(50%)
|
|
|
|
.soundtrack-footer
|
|
media-footer
|
|
|
|
.soundtrack-anime-link
|
|
display none
|
|
|
|
> 800px
|
|
.soundtrack-anime-link
|
|
display block
|
|
|
|
.soundtrack-anime-image
|
|
border-bottom-right-radius 0
|
|
border-top-right-radius 0
|
|
|
|
.soundtrack-image
|
|
border-bottom-left-radius 0
|
|
border-top-left-radius 0
|
|
|
|
.soundtrack-anime-image
|
|
width anime-image-medium-width
|
|
height anime-image-medium-height
|
|
border-radius ui-element-border-radius
|
|
object-fit cover |