126 lines
2.2 KiB
Plaintext
Raw Normal View History

2018-04-19 13:04:25 +00:00
const soundtrack-margin = 1rem
2018-03-11 14:43:17 +00:00
.soundtracks
2017-06-27 16:53:31 +00:00
horizontal-wrap
justify-content space-around
2017-06-27 11:46:29 +00:00
2018-03-11 14:43:17 +00:00
.soundtrack
2017-06-27 16:43:13 +00:00
vertical
2017-06-27 16:53:31 +00:00
flex 1
flex-basis 500px
2018-04-19 13:04:25 +00:00
margin soundtrack-margin 0
2018-04-20 09:47:24 +00:00
// 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
2018-04-19 13:04:25 +00:00
> 500px
.soundtrack
margin soundtrack-margin
2018-04-20 08:55:58 +00:00
margin-bottom media-bottom-margin
2017-06-27 16:53:31 +00:00
2018-03-11 14:43:17 +00:00
.soundtrack-content
2017-06-27 11:46:29 +00:00
horizontal
2017-11-07 07:43:54 +00:00
box-shadow shadow-light
2018-03-12 18:02:23 +00:00
min-height 200px
2018-04-19 13:33:37 +00:00
border-radius ui-element-border-radius
2018-04-19 13:04:25 +00:00
overflow hidden
2017-06-27 11:46:29 +00:00
iframe
width 100%
2018-12-07 00:54:17 +00:00
.media-image
2018-03-11 12:03:13 +00:00
object-fit cover
width 100%
2018-03-14 22:12:43 +00:00
height 100%
2018-04-18 13:07:46 +00:00
border-radius ui-element-border-radius
2018-03-11 14:43:17 +00:00
filter brightness(100%)
2018-03-11 16:20:52 +00:00
transition filter transition-speed ease
2018-03-11 12:03:13 +00:00
2018-12-07 00:54:17 +00:00
.media-play-button
2018-03-11 14:43:17 +00:00
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
2018-03-11 16:20:52 +00:00
box-shadow outline-shadow-medium
2018-03-11 14:43:17 +00:00
.icon-play
transform translateX(27%)
2018-12-07 00:54:17 +00:00
.media-visualizer
2018-03-11 14:43:17 +00:00
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-footer
2018-04-15 08:36:51 +00:00
media-footer
2017-06-27 12:01:32 +00:00
2018-03-11 14:43:17 +00:00
.soundtrack-anime-link
2017-06-27 16:53:31 +00:00
display none
> 800px
2018-03-11 14:43:17 +00:00
.soundtrack-anime-link
2017-06-27 16:53:31 +00:00
display block
2017-06-27 11:46:29 +00:00
2018-04-18 13:07:46 +00:00
.soundtrack-anime-image
border-bottom-right-radius 0
border-top-right-radius 0
2018-12-07 00:54:17 +00:00
.media-image
2018-04-18 13:07:46 +00:00
border-bottom-left-radius 0
border-top-left-radius 0
2018-03-11 14:43:17 +00:00
.soundtrack-anime-image
2018-03-22 19:15:21 +00:00
width anime-image-medium-width
height anime-image-medium-height
2018-04-18 13:07:46 +00:00
border-radius ui-element-border-radius
object-fit cover