Notes

HTML kodları;


header
.center-box
h1 Music player
nav#dropit2.menu
ul
li Select a Local File
li Add a URL
li Clear Playlist
nav#dropit.menu
ul
li#repeat-count
input#number(name = "number", type = "text", value = "1")
li#swap-next Swap with the Next Track
li#swap-last Swap with the Last Track
li#stop-remove Stop & Remove
main
.center-box
nav.player
.now-playing.disabled
.add
each item in [1, 2, 3]
.bar
.head
.button.small.last
.button.play
.button.small.next
.content.clear
time.time-count(datetime="00:00") 00:00
.progress
time.time-duration(datetime="00:00") 00:00
.foot.clear
.button.smaller.stop
.square
.button.smaller.volume
#vol.button.smaller.mute
#dec.button.smaller.decrease
.icon
#prog.progress
#runn.running
#inc.button.smaller.increase
.button.smaller.repeat
.button.smaller.random
#more.button.smaller.more
each item in [1, 2, 3]
.dot
.play-list.clear
footer
.center-box
p Developed by
a(href = "http://www.facebook.com/gabriel.trevisan", target = '_blank', title = "My Facebook") Gabriel Troian Trevisan



------------------------------------------------------------------------



CSS kodları;

@import url(http://fonts.googleapis.com/css?family=Lato:300)
prefix(prefixes, prop, val)
for item in prefixes
-{item}-{prop} val
{prop} val
webkit = 'webkit'
moz = 'moz'
ms = 'ms'
o = 'o'
bradius-large(dir = null)
if dir == null
value = 10% 50%
else
value = 50% 10%
prefix(webkit moz ms o, 'border-top-right-radius', value)
prefix(webkit moz ms o, 'border-bottom-right-radius', value)
prefix(webkit moz ms o, 'border-top-left-radius', value)
prefix(webkit moz ms o, 'border-bottom-left-radius', value)
body
margin 0
padding 0
*
font 1em Lato, sans-serif
header, main, footer
padding 20px 30px
width 100%
min-width (485 + 60)px
prefix(webkit moz, 'box-sizing', border-box)
.center-box
width 100%
margin 0 auto
text-align center
header
background rgba(223,255,125,1)
background -moz-linear-gradient(left, rgba(223,255,125,1) 0%, rgba(120,246,255,1) 100%)
background -webkit-gradient(left top, right top, color-stop(0%, rgba(223,255,125,1)), color-stop(100%, rgba(120,246,255,1)))
background -webkit-linear-gradient(left, rgba(223,255,125,1) 0%, rgba(120,246,255,1) 100%)
background -o-linear-gradient(left, rgba(223,255,125,1) 0%, rgba(120,246,255,1) 100%)
background -ms-linear-gradient(left, rgba(223,255,125,1) 0%, rgba(120,246,255,1) 100%)
background linear-gradient(to right, rgba(223,255,125,1) 0%, rgba(120,246,255,1) 100%)
h1
font-size 1.6em
.dot
width 5px
height 5px
margin 0 auto 5px auto
background-color #999
prefix(webkit moz ms o, 'border-radius', 50%)
.bar
width 24px
height 4px
margin 0 auto
background-color #999
margin-bottom 4px
bradius-large()
.menu
display none
position absolute
top 0
left 0
z-index 1000
background-color #fff
min-width 220px
height auto
prefix(webkit moz ms o, 'border-radius', 10px)
prefix(webkit moz, 'box-shadow', 4px 4px 0 rgba(0, 0, 0, .05))
overflow hidden
border 1px solid #EEE
cursor pointer
ul
margin 0
padding 0
list-style-type none
li
padding 10px 20px
font-size 1em
color #444
text-align left
&:hover
prefix(webkit moz o, 'transition', all .3s ease-in-out)
background-color #78F6FF
input
width 20px
prefix(webkit moz ms o, 'border-radius', 2px)
margin 0 5px
padding 2px 4px
border 1px solid #EEE
.player
.now-playing
width 100%
height 80px
.add
width 50px
height 50px
background-color rgba(0, 0, 0, .05)
prefix(webkit moz ms o, 'border-radius', 50%)
prefix(webkit moz, 'box-sizing', border-box)
float right
margin 15px calc(50% - 243px) -50px 0
pointer-events all !important
opacity 1 !important
cursor pointer
padding-top 15px
&:hover
prefix(webkit moz o, 'transition', all .3s ease-in-out !important)
background-color #78F6FF
.bar
prefix(webkit moz o, 'transition', all .3s ease-in-out)
background-color #333
&.disabled
pointer-events none
opacity .5
.head
width (2 * 70 + 60)px
height 80px
margin 0 auto
.content
width 400px
height 20px
margin 5px auto 0 auto
*
float left
background-color #999
time
display block
color #fff
font-size .8em
bradius-large()
width 60px
height 20px
line-height 20px
.progress
width 280px
height 6px
margin 7px -5px 0 -5px
.foot
width 485px
height 80px
margin 0 auto
.button
prefix(webkit moz o, 'transition', all .3s ease-in-out)
height 80px
width 80px
float left
background-color #EEE
prefix(webkit moz ms o, 'border-radius', 50%)
position relative
z-index 1
cursor pointer
overflow hidden
&:hover, &.smaller:hover
prefix(webkit moz o, 'transition', all .3s ease-in-out !important)
background-color #78F6FF
&.active
prefix(webkit moz o, 'transition', all .3s ease-in-out !important)
background-color #78F6FF !important
&.small
width 60px
height 60px
margin 10px 0 0 10px
&.next
width 70px
margin-left -20px
prefix(webkit moz, 'border-radius', 45%)
prefix(webkit moz, 'border-top-left-radius', 0)
prefix(webkit moz, 'border-bottom-left-radius', 0)
z-index 2
background-color #78F6FF
&:before
content ''
display block
height 80px
width 80px
float left
background-color rgba(0, 0, 0, .05)
prefix(webkit moz ms o, 'border-radius', 50%)
margin-left -55px
margin-top -10px
&:hover
background-color darken(#78F6FF, 30)
&.last
width 70px
margin-right 0
prefix(webkit moz, 'border-radius', 45%)
prefix(webkit moz, 'border-top-right-radius', 0)
prefix(webkit moz, 'border-bottom-right-radius', 0)
z-index 2
background-color #78F6FF
&:after
content ''
display block
height 80px
width 80px
float right
background-color rgba(0, 0, 0, .05)
prefix(webkit moz ms o, 'border-radius', 50%)
margin-right -55px
margin-top -10px
&:hover
background-color darken(#78F6FF, 30)
&.play
margin-right 0
margin-left -20px
z-index 10
background-color rgb(223, 255, 125)
background-image url(http://imageshack.com/a/img910/5753/SRlSfC.png)
background-position left top
background-repeat no-repeat
background-size cover
&:hover
background-color darken(rgb(223, 255, 125), 20)
&.smaller
width 50px
height 50px
margin-top 15px
margin-left 5px
background-color rgba(0, 0, 0, .02)
&.stop
.square
width 20px
height 20px
background-color #999
margin 0 auto
margin-top 15px
&.volume
background-color #fff
width 260px
bradius-large()
&:hover
background-color #78F6FF
.button.smaller
background-color transparent
.mute
margin-right 5px
background-image url(http://imageshack.com/a/img540/9520/g9yrWK.png)
background-position top left
background-repeat no-repeat
background-size cover
prefix(webkit moz o, 'transition', all .3s ease-in-out)
&.zero
prefix(webkit moz o, 'transition', all .3s ease-in-out)
background-position bottom left
&.half
prefix(webkit moz o, 'transition', all .3s ease-in-out)
background-position center left
.decrease
.icon
width 20px
height 5px
margin 0 auto
background-color #999
margin-top 22px
bradius-large()
.increase
&:before
z-index 1
bradius-large()
&:before, &:after
content ''
display block
width 20px
height 5px
margin 0 auto
margin-top 22px
background-color #999
position relative
&:after
width 5px
height 20px
margin-top -12px
z-index 2
bradius-large(1)
.progress
width 100px
height 20px
margin 15px 5px 0 5px
background-color #999
float left
overflow hidden
bradius-large()
&:hover
.running
prefix(webkit moz o, 'transition', all .3s ease-in-out)
background-color rgb(223, 255, 125)
.running
width 100px
height 20px
float left
background-color rgba(0, 0, 0, .5)
bradius-large()
.button.smaller
margin 0
&:hover
background-color rgb(223, 255, 125)
&.more
prefix(webkit moz, 'box-sizing', border-box)
padding-top 12px
overflow visible
.menu ul li input#repeat-count
&:before
content 'Repeat'
&:after
content 'times'

footer
font-size .8em
color #666
a
text-decoration none
color #0cf
&:hover
prefix(webkit moz, 'transition', all .3s ease-in-out)
text-decoration underline
.clear
clear both !important