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
|
2018-03-12 20:02:48 +00:00
|
|
|
object-fit cover
|
