From 48ab2826aa0c29d95e7431f38542863da286be34 Mon Sep 17 00:00:00 2001
From: magnolia-fan <magnolia_fan@me.com>
Date: Thu, 16 Jun 2011 07:27:07 +0400
Subject: [PATCH] CSS gradients for playlist

---
 public/javascripts/beathaven/player.js |  1 +
 public/stylesheets/player.css          | 73 +++++++++++++++++++++++++-
 2 files changed, 72 insertions(+), 2 deletions(-)

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('\
 		<li id="i'+ Math.round(Math.random() * 999999) +'">\
 			<div class="item">\
+				<div class="fade"></div>\
 				<span class="title">'+ artist +' &mdash; '+ track +'</span>\
 				<span class="duration">'+ length +'</span>\
 			</div>\
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