2018-04-20 11:47:24 +02:00

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