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
|
|
|
|
|
padding 1rem
|
|
|
|
|
|
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
|
|
|
border-radius 3px
|
|
|
|
|
overflow hidden
|
|
|
|
|
box-shadow shadow-light
|
2018-03-12 18:02:23 +00:00
|
|
|
min-height 200px
|
2017-06-27 11:46:29 +00:00
|
|
|
|
|
|
|
|
iframe
|
|
|
|
|
width 100%
|
|
|
|
|
|
2018-03-11 12:03:13 +00:00
|
|
|
.soundtrack-image
|
|
|
|
|
object-fit cover
|
|
|
|
|
width 100%
|
|
|
|
|
height 200px
|
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-03-11 14:43:17 +00:00
|
|
|
.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
|
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%)
|
|
|
|
|
|
|
|
|
|
.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
|
2018-03-11 16:20:52 +00:00
|
|
|
filter brightness(0) !important
|
2018-03-11 14:43:17 +00:00
|
|
|
|
|
|
|
|
:hover
|
|
|
|
|
.soundtrack-play-button
|
|
|
|
|
color button-hover-color
|
|
|
|
|
background button-hover-background
|
|
|
|
|
|
2018-03-11 16:20:52 +00:00
|
|
|
.soundtrack-image
|
|
|
|
|
filter brightness(50%)
|
|
|
|
|
|
2018-03-11 14:43:17 +00:00
|
|
|
.soundtrack-footer
|
2017-11-03 08:34:21 +00:00
|
|
|
text-align center
|
2017-06-27 12:04:25 +00:00
|
|
|
margin-bottom 1rem
|
2017-11-03 08:34:21 +00:00
|
|
|
margin-top 0.4rem
|
2017-06-27 12:01:32 +00:00
|
|
|
font-size 0.9em
|
|
|
|
|
|
|
|
|
|
span
|
|
|
|
|
opacity 0.65
|
|
|
|
|
|
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-03-11 14:43:17 +00:00
|
|
|
.soundtrack-anime-image
|
2017-11-08 17:20:53 +00:00
|
|
|
width 142px
|
2017-11-18 23:42:22 +00:00
|
|
|
height 200px
|
