From f54f29a4b4adf3f90c5b49a136e34986c0434312 Mon Sep 17 00:00:00 2001 From: magnolia-fan Date: Sun, 26 Jun 2011 11:56:07 +0400 Subject: [PATCH] Css fade outs --- public/css/albums.css | 47 ++++++++++++++++++++++++++++++++--- public/css/player.css | 17 +++++++++++++ public/js/beathaven/pages.js | 1 + public/js/beathaven/player.js | 4 +-- 4 files changed, 63 insertions(+), 6 deletions(-) diff --git a/public/css/albums.css b/public/css/albums.css index 7396b02..df831c2 100644 --- a/public/css/albums.css +++ b/public/css/albums.css @@ -63,6 +63,8 @@ } .album .tracklist ul li { display: block; + height: 26px; + position: relative; padding-left: 25px; } .add-track { @@ -83,17 +85,54 @@ border-top: none; } .album .tracklist ul li .trackname { - float: left; + position: absolute; + left: 40px; + top: 6px; + width: 90%; + height: 16px; + overflow: hidden; + z-index: 10; } .album .tracklist ul li .index { + position: absolute; + left: 22px; + top: 9px; display: block; - float: left; width: 15px; text-align: right; - margin: 3px 5px 0 0; font-size: 10px; color: #555; } .album .tracklist ul li .length { - float: right; + position: absolute; + right: 0px; + top: 6px; + height: 16px; + z-index: 30; + } + .album .tracklist ul li .fade { + position: absolute; + right: 0px; + top: 6px; + width: 80px; + height: 16px; + z-index: 20; + } + .album .tracklist ul li .fade { + background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, 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(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,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,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,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,1) 50%,rgba(255,255,255,1) 100%); /* W3C */ + } + .album .tracklist ul li:hover .fade { + background: -moz-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 50%, rgba(250,250,250,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(250,250,250,0)), color-stop(50%,rgba(250,250,250,1)), color-stop(100%,rgba(250,250,250,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 50%,rgba(250,250,250,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 50%,rgba(250,250,250,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 50%,rgba(250,250,250,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fafafa', endColorstr='#fafafa',GradientType=1 ); /* IE6-9 */ + background: linear-gradient(left, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 50%,rgba(250,250,250,1) 100%); /* W3C */ } \ No newline at end of file diff --git a/public/css/player.css b/public/css/player.css index ffdb62a..346664a 100644 --- a/public/css/player.css +++ b/public/css/player.css @@ -1,9 +1,26 @@ #player .now-playing { + position: relative; height: 30px; color: #FFF; text-align: center; line-height: 30px; + overflow: hidden; } + #player .now-playing .fade { + position: absolute; + top: 0px; + right: 0px; + width: 80px; + height: 30px; + z-index: 10; + background: -moz-linear-gradient(left, rgba(34,34,34,0) 0%, rgba(34,34,34,1) 50%, rgba(34,34,34,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(34,34,34,0)), color-stop(50%,rgba(34,34,34,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 50%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 50%,rgba(34,34,34,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(left, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 50%,rgba(34,34,34,1) 100%); /* IE10+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00222222', endColorstr='#222222',GradientType=1 ); /* IE6-9 */ + background: linear-gradient(left, rgba(34,34,34,0) 0%,rgba(34,34,34,1) 50%,rgba(34,34,34,1) 100%); /* W3C */ + } #player .progress { width: 330px; height: 5px; diff --git a/public/js/beathaven/pages.js b/public/js/beathaven/pages.js index 8b8477a..205c1b1 100644 --- a/public/js/beathaven/pages.js +++ b/public/js/beathaven/pages.js @@ -38,6 +38,7 @@ var Pages = {
  • \
    +
    \
    \ +
    \ '+ (i+1) +'\
    '+ track.name +'
    \
    '+ track.duration +'
    \ diff --git a/public/js/beathaven/player.js b/public/js/beathaven/player.js index 303cff0..4ff969f 100644 --- a/public/js/beathaven/player.js +++ b/public/js/beathaven/player.js @@ -68,9 +68,9 @@ var Player = { setTrack: function(id) { var $obj = $('#i'+ id); - var query = $obj.attr('data-artist') +'—'+ $obj.attr('data-track'); + var query = $obj.attr('data-artist') +' — '+ $obj.attr('data-track'); - $('#player .now-playing').html(query); + $('#player .now-playing').html(query +'
    '); $('.playlist-tracks li').removeClass('now'); $obj.addClass('now'); $('#player .loaded, #player .played').width(0);