@import 'https://fonts.googleapis.com/css?family=Open+Sans'
$color: (main: #463239, accent: #ffba49, light: #c6ad94)
=bdrs($bdrs)
border-radius: $bdrs
=size($w, $h)
width: $w
height: $h
*
outline: none
user-select: none
body, html
margin: 0
background: #ddd
body
font-family: 'Open Sans', 'Microsoft JhengHei', Arial, sans-serif
.music-box
position: absolute
top: 50%
left: 50%
transform: translate(-50%,-50%)
padding: 15px
+size(364px, initial)
background-color: map-get($color, main)
box-shadow: 0 0 15px #535353
+bdrs(3px)
overflow: hidden
.album
position: relative
.photo
background: url('https://images.unsplash.com/photo-1533475184589-ad2b25374b56?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80') no-repeat 100% 100%
background-size: cover
+size(100%, 300px)
.infos
background-color: rgba(map-get($color, main), .3)
+size(100%, 60px)
position: absolute
bottom: 0
.song
padding: 10px
color: map-get($color, light)
letter-spacing: .5px
span, small
display: block
.dashboard
margin-top: 15px
.list
position: relative
transition-duration: .3s
background-color: #eee
right: 0
.list-btn
z-index: 2
background-color: map-get($color, accent)
+size(44px, 44px)
position: absolute
right: 5px
top: -44px
cursor: pointer
transition-duration: .3s
transition-delay: .9s
span
top: 50%
left: 50%
transform: translate(-50%, -50%)
display: block
+size(28px, 1px)
background-color: map-get($color, main)
position: relative
transition: width .3s .3s, background-color .3s .6s
transition-timing-function: linear
&::before, &::after
background-color: map-get($color, main)
content: ""
+size(28px, 1px)
position: absolute
left: 0
top: 0
transition-timing-function: linear
transition: width .3s .3s, margin .3s .6s, transform .3s .3s
&::before
margin-top: 6px
&::after
margin-top: -6px
&.active
.list-btn
top: -322px
transition: top .3s .6s
span
background-color: transparent
width: 34px
transition: width .3s, background-color .3s
&::before, &::after
margin: 0
width: 34px
transition: width .3s, margin .3s, transform .3s .3s
&::before
transform: rotate(225deg)
&::after
transform: rotate(315deg)
.player
.time
color: map-get($color, light)
.time-rail
height: 1px
position: relative
padding: 15px 0
overflow: hidden
.thumb, .track
position: absolute
top: 50%
transform: translateY(-50%)
cursor: pointer
.thumb
+size(10px, 10px)
+bdrs(50%)
background-color: map-get($color, accent)
z-index: 1
left: 30%
transition: .3s
&:hover
transform: translateY(-50%) scale(1.2)
&::before
content: ''
+size(500px, 1px)
background-color: map-get($color, accent)
position: absolute
top: 50%
transform: translateY(-50%)
right: 0
.track
top: 50%
+size(100%, 1px)
background-color: map-get($color, light)
input[type="range"]
width: 100%
-webkit-appearance: none
overflow: hidden
background: none
&::-webkit-slider-thumb
-webkit-appearance: none
position: relative
+size(10px, 10px)
+bdrs(50%)
background-color: map-get($color, accent)
.action-button
text-align: center
a
cursor: pointer
display: inline-block
+size(44px, 44px)
margin: 3px
line-height: 44px
color: map-get($color, light)
transition-duration: .3s
&:hover
color: map-get($color, accent)
&.play-pause
border-color: map-get($color, accent)
&.play-pause
+bdrs(50%)
border: 1px solid map-get($color, light)
font-size: 1.5em
+size(54px, 54px)
line-height: 54px
&.active
border-color: map-get($color, accent)
i::before
content: "\f04b"
margin-left: 5px
&.active
color: map-get($color, accent)
.lists
z-index: 1
position: absolute
+size(100%, 100%)
top: 0
left: 0
background-color: map-get($color, main)
transform: translateX(-100%)
transition: .3s 0s
&.active
transform: translateX(0)
transition: .3s .9s
.label
font-size: 2em
padding: 8px 15px
height: 60px
box-sizing: border-box
color: map-get($color, accent)
ul
padding-left: 0
margin: 0
list-style-type: none
+size(100%, calc(100% - 60px))
position: absolute
overflow-y: auto
background-color: map-get($color, light)
&::-webkit-scrollbar
width: 6px
background-color: transparent
&::-webkit-scrollbar-track
background-color: map-get($color, main)
&::-webkit-scrollbar-thumb
background-color: map-get($color, accent)
+bdrs(3px)
li
cursor: pointer
padding: 5px 15px
transition-duration: .3s
span, em
display: inline-block
span
small
display: block
em
float: right
top: 0
font-style: normal
font-size: 12px
margin-top: 12px
&:nth-of-type(odd)
background-color: rgba(map-get($color, main), .1)
&:hover
background-color: rgba(map-get($color, main), .3)
View Compiled