135 lines
2.1 KiB
Plaintext
Raw Normal View History

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