diff --git a/public/javascripts/beathaven/player.js b/public/javascripts/beathaven/player.js index bd90999..0bdcf38 100644 --- a/public/javascripts/beathaven/player.js +++ b/public/javascripts/beathaven/player.js @@ -10,6 +10,7 @@ var Player = { $('.playlist-tracks').append('\
  • \
    \ +
    \ '+ artist +' — '+ track +'\ '+ length +'\
    \ diff --git a/public/stylesheets/player.css b/public/stylesheets/player.css index 784c4af..5acc48f 100644 --- a/public/stylesheets/player.css +++ b/public/stylesheets/player.css @@ -54,11 +54,33 @@ } .playlist-tracks li { display: block; + height: 26px; } .playlist-tracks li .item { - padding: 5px 6px; + position: relative; overflow: hidden; + height: 26px; } + .playlist-tracks li .item .title { + position: absolute; + top: 0; + left: 5px; + z-index: 10; + width: 330px; + height: 26px; + line-height: 26px; + display: block; + float: left; + overflow: hidden; + } + .playlist-tracks li .item .duration { + position: absolute; + top: 0; + right: 5px; + z-index: 30; + height: 26px; + line-height: 26px; + } .playlist-tracks li .item:hover { background-color: #D0E0F0; cursor: default; @@ -74,4 +96,51 @@ .playlist-tracks li .item .duration { display: block; float: right; - } \ No newline at end of file + } + +/* Gradients */ +.playlist-tracks li .item .fade { + position: absolute; + top: 0; + right: 0; + z-index: 20; + width: 100px; + height: 26px; + background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 42%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(255,255,255,0.6)), color-stop(50%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ + background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 42%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* W3C */ +} + +.playlist-tracks li:nth-child(even) .item .fade { + background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(249,249,249,0.6) 42%, rgba(248,248,248,1) 50%, rgba(240,240,240,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(249,249,249,0.6)), color-stop(50%,rgba(248,248,248,1)), color-stop(100%,rgba(240,240,240,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#f0f0f0',GradientType=1 ); /* IE6-9 */ + background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(249,249,249,0.6) 42%,rgba(248,248,248,1) 50%,rgba(240,240,240,1) 100%); /* W3C */ +} + +.playlist-tracks li.now .item .fade { + background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(242,246,249,0.6) 42%, rgba(240,244,248,1) 50%, rgba(224,234,240,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(242,246,249,0.6)), color-stop(50%,rgba(240,244,248,1)), color-stop(100%,rgba(224,234,240,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#e0eaf0',GradientType=1 ); /* IE6-9 */ + background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(242,246,249,0.6) 42%,rgba(240,244,248,1) 50%,rgba(224,234,240,1) 100%); /* W3C */ +} + +.playlist-tracks li .item:hover .fade { + background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(235,242,249,0.6) 42%, rgba(231,240,248,1) 50%, rgba(208,224,240,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(235,242,249,0.6)), color-stop(50%,rgba(231,240,248,1)), color-stop(100%,rgba(208,224,240,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d0e0f0',GradientType=1 ); /* IE6-9 */ + background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(235,242,249,0.6) 42%,rgba(231,240,248,1) 50%,rgba(208,224,240,1) 100%); /* W3C */ +} \ No newline at end of file