localhots
/
oldhaven
1
0
Fork 0
Code Releases Activity

Marks currently playin track in tracklist

This commit is contained in:
magnolia-fan 2011-06-29 03:30:27 +04:00
parent 75f8d826a6
commit 86863e4323
7 changed files with 142 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/coffeescripts/pages.coffee
View File

@ -6,7 +6,7 @@ class Pages
<div class="pic"> <div class="pic">
<img src="' +data.artist.pic+ '" alt="' +data.artist.name+ '" width="250" /> <img src="' +data.artist.pic+ '" alt="' +data.artist.name+ '" width="250" />
</div> </div>
<h1 class="name">' +data.artist.name+ '</h1> <h1 class="name" data-id="'+data.artist.id+'">' +data.artist.name+ '</h1>
<div class="info"> <div class="info">
' +data.artist.desc+ ' ' +data.artist.desc+ '
</div> </div>
@ -17,7 +17,7 @@ class Pages
if album.year? if album.year?
album_info = $ ' album_info = $ '
<div class="album"> <div class="album">
<h2 class="name">' +album.name+ ' (' +album.year+ ')</h2> <h2 class="name" data-id="'+album.id+'">' +album.name+ ' (' +album.year+ ')</h2>
<div class="pic"> <div class="pic">
<img src="' +(if album.pic then album.pic else '/images/kitteh.png')+ '" alt="' +album.name+ ' by ' +data.artist.name+ '" width="250" height="250"/> <img src="' +(if album.pic then album.pic else '/images/kitteh.png')+ '" alt="' +album.name+ ' by ' +data.artist.name+ '" width="250" height="250"/>
<div class="add-album-button-container"> <div class="add-album-button-container">
@ -30,7 +30,7 @@ class Pages
$.each album.tracks.album, (i, track) -> $.each album.tracks.album, (i, track) ->
track_info = $ ' track_info = $ '
<li> <li data-id="'+track.id+'">
<div class="add-track button gray">+</div> <div class="add-track button gray">+</div>
<div class="track-container"> <div class="track-container">
<div class="fade"></div> <div class="fade"></div>

59
app/coffeescripts/player.coffee
View File

@ -46,21 +46,22 @@ class Player
self.setTrack next self.setTrack next
false false
addTrack: (artist, album, track, length, autoplay) -> addTracks: (tracks, autoplay) ->
if not autoplay? if not autoplay?
autoplay = false autoplay = false
initial_count = $('.playlist-tracks li').length initial_count = $('.playlist-tracks li').length
for item in tracks
$('.playlist-tracks').append ' $('.playlist-tracks').append '
<li id="i' +Math.round(Math.random() * 999999)+ '" data-id="" data-artist="' +artist.trim()+ '" data-album="' +album.trim()+ '" data-track="' +track.trim()+ '" data-length="' +length+ '"> <li id="i' +Math.round(Math.random() * 999999)+ '" data-id="'+item.id+'" data-artist="'+item.artist.trim()+'" data-album="'+item.album.trim()+'" data-track="'+item.name.trim()+'" data-length="'+item.length+'">
<div class="item"> <div class="item">
<div class="fade"></div> <div class="fade"></div>
<div class="dragbox"></div> <div class="dragbox"></div>
<span class="title"> <span class="title">
<span class="data artist" title="Open ' +artist.htmlsafe()+ '\'s page">' +artist+ '</span> <span class="data artist" title="Open ' +item.artist.htmlsafe()+ '\'s page">' +item.artist+ '</span>
&mdash; &mdash;
<span class="playtrack" title="Play ' +track.htmlsafe()+ ' by ' +artist.htmlsafe()+ '">' +track+ '</span> <span class="playtrack" title="Play ' +item.name.htmlsafe()+ ' by ' +item.artist.htmlsafe()+ '">' +item.name+ '</span>
</span> </span>
<span class="duration">' +length+ '</span> <span class="duration">' +item.length+ '</span>
<div class="remove">remove</div> <div class="remove">remove</div>
</div> </div>
</li>' </li>'
@ -72,19 +73,29 @@ class Player
_player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1]) _player.setTrack($('.playlist-tracks li').last().attr('id').split('i')[1])
else if initial_count == 0 and not _player.hasTrack() else if initial_count == 0 and not _player.hasTrack()
_player.setTrack($('.playlist-tracks li').first().attr('id').split('i')[1]) _player.setTrack($('.playlist-tracks li').first().attr('id').split('i')[1])
false
getDataFromLi: (obj) ->
id = $(obj).attr 'data-id'
track_name = $(obj).find('.trackname').html()
length = $(obj).find('.length').html()
id: id, name: track_name, length: length
setTrack: (id) -> setTrack: (id) ->
$obj = $('#i' +id) $obj = $('#i' +id)
query = $obj.attr('data-artist')+ ' &mdash; ' +$obj.attr('data-track') query = $obj.attr('data-artist')+ ' &mdash; ' +$obj.attr('data-track')
$('.player .now-playing').html query+ '<div class="fade"></div>' $('.player .loaded, .player .played').width 0
$('.player .now-playing').html query+'<div class="fade"></div>'
$('.playlist-tracks li').removeClass 'now' $('.playlist-tracks li').removeClass 'now'
$obj.addClass 'now' $obj.addClass 'now'
$('.player .loaded, .player .played').width 0 $('.tracklist li').removeClass 'now'
$('.tracklist li[data-id="'+$obj.attr('data-id')+'"]').addClass 'now'
_vkontakte.loadTracksData $obj.attr('data-artist'), $obj.attr('data-track'), $obj.attr('data-length'), (url)-> _vkontakte.loadTracksData $obj.attr('data-artist'), $obj.attr('data-track'), $obj.attr('data-length'), (url) ->
_player.playSource url _player.playSource url
this.updateNowListening $obj.attr('data-artist'), $obj.attr('data-album'), $obj.attr('data-track') this.updateNowListening $obj.attr('data-artist'), $obj.attr('data-album'), $obj.attr('data-track')
false
hasTrack: -> hasTrack: ->
if $('#jplayer audio').length > 0 if $('#jplayer audio').length > 0
@ -95,9 +106,10 @@ class Player
false false
playSource: (url) -> playSource: (url) ->
@scrobbled = false
$('#jplayer').jPlayer 'setMedia', mp3: url $('#jplayer').jPlayer 'setMedia', mp3: url
$('#jplayer').jPlayer 'play' $('#jplayer').jPlayer 'play'
@scrobbled = false false
nextTrack: (manual) -> nextTrack: (manual) ->
manual = manual? manual = manual?
@ -146,10 +158,12 @@ class Player
updateNowListening: (artist, album, track) -> updateNowListening: (artist, album, track) ->
if _session.getUser().lastfm_username if _session.getUser().lastfm_username
_session.query '/lastfm/listening?r=' +Math.random(), artist: artist, album: album, track: track _session.query '/lastfm/listening?r=' +Math.random(), artist: artist, album: album, track: track
false
scrobble: (artist, album, track) -> scrobble: (artist, album, track) ->
if _session.getUser().lastfm_username if _session.getUser().lastfm_username
_session.query '/lastfm/scrobble?r=' +Math.random(), artist: artist, album: album, track: track _session.query '/lastfm/scrobble?r=' +Math.random(), artist: artist, album: album, track: track
false
# Player Controls # Player Controls
@ -214,18 +228,20 @@ $('.playlist-tracks li .title .playtrack').live 'click', ->
$('.add-album').live 'click', -> $('.add-album').live 'click', ->
artist = $('.artist-info .name').html() artist = $('.artist-info .name').html()
album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, '' album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
tracks = []
for item in $(this).parent().parent().parent().find('.tracklist li') for item in $(this).parent().parent().parent().find('.tracklist li')
track_name = $(item).find('.trackname').html() track = _player.getDataFromLi item
length = $(item).find('.length').html() track['artist'] = artist
_player.addTrack artist, album, track_name, length track['album'] = album
tracks.push track
_player.addTracks tracks
false false
$('.add-track').live 'click', -> $('.add-track').live 'click', ->
artist = $('.artist-info .name').html() track = _player.getDataFromLi $(this).parent()
album = $(this).parent().parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, '' track['artist'] = $('.artist-info .name').html()
track_name = $(this).parent().find('.trackname').html() track['album'] = $(this).parent().parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
length = $(this).parent().find('.length').html() _player.addTracks [track]
_player.addTrack artist, album, track_name, length
false false
$('.tracklist li').live 'mouseover mouseout', (e) -> $('.tracklist li').live 'mouseover mouseout', (e) ->
@ -236,9 +252,8 @@ $('.tracklist li').live 'mouseover mouseout', (e) ->
false false
$('.tracklist li').live 'click', (e) -> $('.tracklist li').live 'click', (e) ->
artist = $('.artist-info .name').html() track = _player.getDataFromLi this
album = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, '' track['artist'] = $('.artist-info .name').html()
track_name = $(this).find('.trackname').html() track['album'] = $(this).parent().parent().parent().find('h2.name').text().replace /\s\([\d]{4}\)$/, ''
length = $(this).find('.length').html() _player.addTracks [track], true
_player.addTrack artist, album, track_name, length, true
false false

6
app/controllers/artist_controller.rb
View File

@ -42,16 +42,16 @@ class ArtistController < ApplicationController
return return
end end
end end
data['artist'] = {name: artist.name, desc: ActionController::Base.helpers.strip_tags(artist.desc), pic: artist.pic_url} data['artist'] = {id: artist.id, name: artist.name, desc: ActionController::Base.helpers.strip_tags(artist.desc), pic: artist.pic_url}
data['albums'] = [] data['albums'] = []
albums = artist.albums albums = artist.albums
albums.each do |album| albums.each do |album|
if @@default_album_types.include? album.album_type if @@default_album_types.include? album.album_type
tmp_album = {name: album.name, year: album.year, pic: album.pic_url} tmp_album = {id: album.id, name: album.name, year: album.year, pic: album.pic_url}
album_tracks = [] album_tracks = []
bonus_tracks = [] bonus_tracks = []
album.tracks.each do |track| album.tracks.each do |track|
tmp_track = {name: track.name, live: track.live, acoustic: track.acoustic} tmp_track = {id: track.id, name: track.name, live: track.live, acoustic: track.acoustic}
if track.length if track.length
time = (track.length / 1000).round time = (track.length / 1000).round
time_m = (time / 60).floor time_m = (time / 60).floor

6
public/javascripts/coffee/pages.js
View File

@ -8,7 +8,7 @@ Pages = (function() {
<div class="pic">\ <div class="pic">\
<img src="' + data.artist.pic + '" alt="' + data.artist.name + '" width="250" />\ <img src="' + data.artist.pic + '" alt="' + data.artist.name + '" width="250" />\
</div>\ </div>\
<h1 class="name">' + data.artist.name + '</h1>\ <h1 class="name" data-id="' + data.artist.id + '">' + data.artist.name + '</h1>\
<div class="info">\ <div class="info">\
' + data.artist.desc + '\ ' + data.artist.desc + '\
</div>\ </div>\
@ -19,7 +19,7 @@ Pages = (function() {
if (album.year != null) { if (album.year != null) {
album_info = $('\ album_info = $('\
<div class="album">\ <div class="album">\
<h2 class="name">' + album.name + ' (' + album.year + ')</h2>\ <h2 class="name" data-id="' + album.id + '">' + album.name + ' (' + album.year + ')</h2>\
<div class="pic">\ <div class="pic">\
<img src="' + (album.pic ? album.pic : '/images/kitteh.png') + '" alt="' + album.name + ' by ' + data.artist.name + '" width="250" height="250"/>\ <img src="' + (album.pic ? album.pic : '/images/kitteh.png') + '" alt="' + album.name + ' by ' + data.artist.name + '" width="250" height="250"/>\
<div class="add-album-button-container">\ <div class="add-album-button-container">\
@ -32,7 +32,7 @@ Pages = (function() {
$.each(album.tracks.album, function(i, track) { $.each(album.tracks.album, function(i, track) {
var track_info; var track_info;
track_info = $('\ track_info = $('\
<li>\ <li data-id="' + track.id + '">\
<div class="add-track button gray">+</div>\ <div class="add-track button gray">+</div>\
<div class="track-container">\ <div class="track-container">\
<div class="fade"></div>\ <div class="fade"></div>\

63
public/javascripts/coffee/player.js
View File

@ -52,26 +52,29 @@ Player = (function() {
}); });
return false; return false;
}; };
Player.prototype.addTrack = function(artist, album, track, length, autoplay) { Player.prototype.addTracks = function(tracks, autoplay) {
var initial_count; var initial_count, item, _i, _len;
if (!(autoplay != null)) { if (!(autoplay != null)) {
autoplay = false; autoplay = false;
} }
initial_count = $('.playlist-tracks li').length; initial_count = $('.playlist-tracks li').length;
for (_i = 0, _len = tracks.length; _i < _len; _i++) {
item = tracks[_i];
$('.playlist-tracks').append('\ $('.playlist-tracks').append('\
<li id="i' + Math.round(Math.random() * 999999) + '" data-id="" data-artist="' + artist.trim() + '" data-album="' + album.trim() + '" data-track="' + track.trim() + '" data-length="' + length + '">\ <li id="i' + Math.round(Math.random() * 999999) + '" data-id="' + item.id + '" data-artist="' + item.artist.trim() + '" data-album="' + item.album.trim() + '" data-track="' + item.name.trim() + '" data-length="' + item.length + '">\
<div class="item">\ <div class="item">\
<div class="fade"></div>\ <div class="fade"></div>\
<div class="dragbox"></div>\ <div class="dragbox"></div>\
<span class="title">\ <span class="title">\
<span class="data artist" title="Open ' + artist.htmlsafe() + '\'s page">' + artist + '</span>\ <span class="data artist" title="Open ' + item.artist.htmlsafe() + '\'s page">' + item.artist + '</span>\
&mdash;\ &mdash;\
<span class="playtrack" title="Play ' + track.htmlsafe() + ' by ' + artist.htmlsafe() + '">' + track + '</span>\ <span class="playtrack" title="Play ' + item.name.htmlsafe() + ' by ' + item.artist.htmlsafe() + '">' + item.name + '</span>\
</span>\ </span>\
<span class="duration">' + length + '</span>\ <span class="duration">' + item.length + '</span>\
<div class="remove">remove</div>\ <div class="remove">remove</div>\
</div>\ </div>\
</li>'); </li>');
}
$('.playlist').html($('.playlist-tracks')).scrollbar; $('.playlist').html($('.playlist-tracks')).scrollbar;
$('.playlist-tracks').sortable({ $('.playlist-tracks').sortable({
axis: 'y', axis: 'y',
@ -83,14 +86,27 @@ Player = (function() {
return _player.setTrack($('.playlist-tracks li').first().attr('id').split('i')[1]); return _player.setTrack($('.playlist-tracks li').first().attr('id').split('i')[1]);
} }
}; };
Player.prototype.getDataFromLi = function(obj) {
var id, length, track_name;
id = $(obj).attr('data-id');
track_name = $(obj).find('.trackname').html();
length = $(obj).find('.length').html();
return {
id: id,
name: track_name,
length: length
};
};
Player.prototype.setTrack = function(id) { Player.prototype.setTrack = function(id) {
var $obj, query; var $obj, query;
$obj = $('#i' + id); $obj = $('#i' + id);
query = $obj.attr('data-artist') + ' &mdash; ' + $obj.attr('data-track'); query = $obj.attr('data-artist') + ' &mdash; ' + $obj.attr('data-track');
$('.player .loaded, .player .played').width(0);
$('.player .now-playing').html(query + '<div class="fade"></div>'); $('.player .now-playing').html(query + '<div class="fade"></div>');
$('.playlist-tracks li').removeClass('now'); $('.playlist-tracks li').removeClass('now');
$obj.addClass('now'); $obj.addClass('now');
$('.player .loaded, .player .played').width(0); $('.tracklist li').removeClass('now');
$('.tracklist li[data-id="' + $obj.attr('data-id') + '"]').addClass('now');
_vkontakte.loadTracksData($obj.attr('data-artist'), $obj.attr('data-track'), $obj.attr('data-length'), function(url) { _vkontakte.loadTracksData($obj.attr('data-artist'), $obj.attr('data-track'), $obj.attr('data-length'), function(url) {
return _player.playSource(url); return _player.playSource(url);
}); });
@ -244,25 +260,27 @@ $('.playlist-tracks li .title .playtrack').live('click', function() {
return false; return false;
}); });
$('.add-album').live('click', function() { $('.add-album').live('click', function() {
var album, artist, item, length, track_name, _i, _len, _ref; var album, artist, item, track, tracks, _i, _len, _ref;
artist = $('.artist-info .name').html(); artist = $('.artist-info .name').html();
album = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, ''); album = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');
tracks = [];
_ref = $(this).parent().parent().parent().find('.tracklist li'); _ref = $(this).parent().parent().parent().find('.tracklist li');
for (_i = 0, _len = _ref.length; _i < _len; _i++) { for (_i = 0, _len = _ref.length; _i < _len; _i++) {
item = _ref[_i]; item = _ref[_i];
track_name = $(item).find('.trackname').html(); track = _player.getDataFromLi(item);
length = $(item).find('.length').html(); track['artist'] = artist;
_player.addTrack(artist, album, track_name, length); track['album'] = album;
tracks.push(track);
} }
_player.addTracks(tracks);
return false; return false;
}); });
$('.add-track').live('click', function() { $('.add-track').live('click', function() {
var album, artist, length, track_name; var track;
artist = $('.artist-info .name').html(); track = _player.getDataFromLi($(this).parent());
album = $(this).parent().parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, ''); track['artist'] = $('.artist-info .name').html();
track_name = $(this).parent().find('.trackname').html(); track['album'] = $(this).parent().parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');
length = $(this).parent().find('.length').html(); _player.addTracks([track]);
_player.addTrack(artist, album, track_name, length);
return false; return false;
}); });
$('.tracklist li').live('mouseover mouseout', function(e) { $('.tracklist li').live('mouseover mouseout', function(e) {
@ -274,11 +292,10 @@ $('.tracklist li').live('mouseover mouseout', function(e) {
return false; return false;
}); });
$('.tracklist li').live('click', function(e) { $('.tracklist li').live('click', function(e) {
var album, artist, length, track_name; var track;
artist = $('.artist-info .name').html(); track = _player.getDataFromLi(this);
album = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, ''); track['artist'] = $('.artist-info .name').html();
track_name = $(this).find('.trackname').html(); track['album'] = $(this).parent().parent().parent().find('h2.name').text().replace(/\s\([\d]{4}\)$/, '');
length = $(this).find('.length').html(); _player.addTracks([track], true);
_player.addTrack(artist, album, track_name, length, true);
return false; return false;
}); });

17
public/stylesheets/_sass/albums.scss
View File

@ -44,7 +44,7 @@
img { img {
width: 248px; width: 248px;
height: 248px; height: 248px;
border: #DDD 1px solid; border: #d0d0d0 1px solid;
} }
.add-album-button-container { .add-album-button-container {
@ -70,10 +70,10 @@
padding-left: 25px; padding-left: 25px;
&:hover { &:hover {
background-color: #FAFAFA;
cursor: pointer; cursor: pointer;
.track-container { .track-container {
background-color: #fafafa;
.fade { .fade {
@include alpha_gradient(250, 250, 250, "fafafa"); @include alpha_gradient(250, 250, 250, "fafafa");
} }
@ -84,6 +84,15 @@
border-top: none; border-top: none;
} }
&.now {
.track-container {
background-color: #e0f0fa;
.fade {
@include alpha_gradient(224, 240, 250, "e0f0fa");
}
}
}
.add-track { .add-track {
display: none; display: none;
float: left; float: left;
@ -94,7 +103,7 @@
.track-container { .track-container {
height: 20px; height: 20px;
padding: 5px 0 0 0; padding: 5px 0 0 0;
border-top: #EEE 1px solid; border-top: #e0e0e0 1px solid;
> * { > * {
position: absolute; position: absolute;
@ -116,7 +125,7 @@
width: 15px; width: 15px;
text-align: right; text-align: right;
font-size: 10px; font-size: 10px;
color: #555; color: #505050;
} }
.trackname { .trackname {

19
public/stylesheets/albums.css
View File

@ -28,7 +28,7 @@
.albums .album .pic img { .albums .album .pic img {
width: 248px; width: 248px;
height: 248px; height: 248px;
border: #DDD 1px solid; } border: #d0d0d0 1px solid; }
.albums .album .pic .add-album-button-container { .albums .album .pic .add-album-button-container {
position: relative; position: relative;
margin: 10px -25px 0 0; margin: 10px -25px 0 0;
@ -44,8 +44,9 @@
position: relative; position: relative;
padding-left: 25px; } padding-left: 25px; }
.albums .album .tracklist ul li:hover { .albums .album .tracklist ul li:hover {
background-color: #FAFAFA;
cursor: pointer; } cursor: pointer; }
.albums .album .tracklist ul li:hover .track-container {
background-color: #fafafa; }
.albums .album .tracklist ul li:hover .track-container .fade { .albums .album .tracklist ul li:hover .track-container .fade {
background: -moz-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); background: -moz-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 250, 250, 0)), color-stop(50%, #fafafa), color-stop(100%, #fafafa)); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 250, 250, 0)), color-stop(50%, #fafafa), color-stop(100%, #fafafa));
@ -56,6 +57,16 @@
background: linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); } background: linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); }
.albums .album .tracklist ul li:first-child { .albums .album .tracklist ul li:first-child {
border-top: none; } border-top: none; }
.albums .album .tracklist ul li.now .track-container {
background-color: #e0f0fa; }
.albums .album .tracklist ul li.now .track-container .fade {
background: -moz-linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224, 240, 250, 0)), color-stop(50%, #e0f0fa), color-stop(100%, #e0f0fa));
background: -webkit-linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%);
background: -o-linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%);
background: -ms-linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00e0f0fa', endColorstr='#e0f0fa', GradientType=1);
background: linear-gradient(left, rgba(224, 240, 250, 0) 0%, #e0f0fa 50%, #e0f0fa 100%); }
.albums .album .tracklist ul li .add-track { .albums .album .tracklist ul li .add-track {
display: none; display: none;
float: left; float: left;
@ -64,7 +75,7 @@
.albums .album .tracklist ul li .track-container { .albums .album .tracklist ul li .track-container {
height: 20px; height: 20px;
padding: 5px 0 0 0; padding: 5px 0 0 0;
border-top: #EEE 1px solid; } border-top: #e0e0e0 1px solid; }
.albums .album .tracklist ul li .track-container > * { .albums .album .tracklist ul li .track-container > * {
position: absolute; } position: absolute; }
.albums .album .tracklist ul li .track-container .fade { .albums .album .tracklist ul li .track-container .fade {
@ -87,7 +98,7 @@
width: 15px; width: 15px;
text-align: right; text-align: right;
font-size: 10px; font-size: 10px;
color: #555; } color: #505050; }
.albums .album .tracklist ul li .track-container .trackname { .albums .album .tracklist ul li .track-container .trackname {
left: 40px; left: 40px;
top: 6px; top: 6px;