localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Marks currently playin track in tracklist

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
public/stylesheets/_sass/albums.scss
+13 -4
View File
@@ -44,7 +44,7 @@
img {
width: 248px;
height: 248px;
border: #DDD 1px solid;
border: #d0d0d0 1px solid;
}
.add-album-button-container {
@@ -70,10 +70,10 @@
padding-left: 25px;
&:hover {
background-color: #FAFAFA;
cursor: pointer;
.track-container {
background-color: #fafafa;
.fade {
@include alpha_gradient(250, 250, 250, "fafafa");
}
@@ -84,6 +84,15 @@
border-top: none;
}
&.now {
.track-container {
background-color: #e0f0fa;
.fade {
@include alpha_gradient(224, 240, 250, "e0f0fa");
}
}
}
.add-track {
display: none;
float: left;
@@ -94,7 +103,7 @@
.track-container {
height: 20px;
padding: 5px 0 0 0;
border-top: #EEE 1px solid;
border-top: #e0e0e0 1px solid;
> * {
position: absolute;
@@ -116,7 +125,7 @@
width: 15px;
text-align: right;
font-size: 10px;
color: #555;
color: #505050;
}
.trackname {
public/stylesheets/albums.css
+23 -12
View File
@@ -28,7 +28,7 @@
.albums .album .pic img {
width: 248px;
height: 248px;
border: #DDD 1px solid; }
border: #d0d0d0 1px solid; }
.albums .album .pic .add-album-button-container {
position: relative;
margin: 10px -25px 0 0;
@@ -44,18 +44,29 @@
position: relative;
padding-left: 25px; }
.albums .album .tracklist ul li:hover {
background-color: #FAFAFA;
cursor: pointer; }
.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: -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-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -o-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -ms-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00fafafa', endColorstr='#fafafa', GradientType=1);
background: linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); }
.albums .album .tracklist ul li:hover .track-container {
background-color: #fafafa; }
.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: -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-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -o-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
background: -ms-linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00fafafa', endColorstr='#fafafa', GradientType=1);
background: linear-gradient(left, rgba(250, 250, 250, 0) 0%, #fafafa 50%, #fafafa 100%); }
.albums .album .tracklist ul li:first-child {
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 {
display: none;
float: left;
@@ -64,7 +75,7 @@
.albums .album .tracklist ul li .track-container {
height: 20px;
padding: 5px 0 0 0;
border-top: #EEE 1px solid; }
border-top: #e0e0e0 1px solid; }
.albums .album .tracklist ul li .track-container > * {
position: absolute; }
.albums .album .tracklist ul li .track-container .fade {
@@ -87,7 +98,7 @@
width: 15px;
text-align: right;
font-size: 10px;
color: #555; }
color: #505050; }
.albums .album .tracklist ul li .track-container .trackname {
left: 40px;
top: 6px;