From 73890f39b950bb18c48b1e92f1d08d78785f89de Mon Sep 17 00:00:00 2001
From: Matthieu Lalonde <matth_web_git@lalonde.me>
Date: Fri, 9 Nov 2012 13:00:35 -0500
Subject: [PATCH] More CSS and selectors cleanup

---
 resources/css/app.css                  | 25 ++++++------
 resources/css/player.css               | 53 +++++++++++---------------
 resources/templates/player/layout.html | 14 +++----
 3 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 3c6beeb..24e4bc8 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -433,23 +433,12 @@ div.overlay > div {
 	z-index: 1001;
 }
 
-
-div#screen,
-div#screen canvas#processcanvas {
-	width : 512px;
-	height : 512px;
-	top: 0;
-	margin: 0 auto;
-	position : absolute;
-	z-index : 2000;
-}
-
 .icon-loading {
 	display: inline-block;
 	width: 14px;
 	height: 14px;
 	margin-top: 1px;
-	*margin-right: .3em;
+	margin-right: .3em;
 	line-height: 14px;
 	vertical-align: text-top;
 	background-repeat: no-repeat;
@@ -493,6 +482,8 @@ div#screen canvas#processcanvas {
 .btn-primary {
 	-webkit-animation: pulse-btn 2s infinite alternate;
 	-moz-animation: pulse-btn 2s infinite alternate;
+	-ms-animation: pulse-btn 2s infinite alternate;
+	animation: pulse-btn 2s infinite alternate;
 }
 
 .btn-primary:hover,
@@ -500,7 +491,9 @@ div#screen canvas#processcanvas {
 .btn-primary:active,
 .btn-primary.active {
 	-webkit-animation: none;
+	-ms-animation: none;
 	-moz-animation: none;
+	animation: none;
 	opacity: 1;
 }
 
@@ -512,6 +505,8 @@ div.drag-table-item table tr.selected td {
 .droppable-hover {
 	-webkit-animation: pulse 1s infinite alternate;
 	-moz-animation: pulse 1s infinite alternate;
+	-ms-animation: pulse 1s infinite alternate;
+	animation: pulse 1s infinite alternate;
 	opacity: 0;
 	color: #FFF;
 	background-color: #4966B1;/* Old browsers */
@@ -522,4 +517,8 @@ div.drag-table-item table tr.selected td {
 	background: -ms-linear-gradient(top, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* IE10+ */
 	background: linear-gradient(to bottom, #6086e5 0%,#6086e5 39%,#4966b1 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6086e5', endColorstr='#4966b1',GradientType=0 ); /* IE6-9 */
-}
\ No newline at end of file
+}
+
+table tbody tr.itemplaying.itempaused td:first-child span {
+	background-image: url('../img/playicon.png');
+}
diff --git a/resources/css/player.css b/resources/css/player.css
index c93b419..07b6190 100644
--- a/resources/css/player.css
+++ b/resources/css/player.css
@@ -1,7 +1,7 @@
 
 body > div.ui-layout-north > div:last-child {
 	margin: 6px auto 0 auto;
-	background: transparent url('../img/player_background.png') repeat-x;
+	background: url('../img/player_background.png') repeat-x left bottom;
 	height: 40px;
 	width: 450px;
 	border: 1px solid #6B6D5E;
@@ -86,7 +86,7 @@ body > .ui-layout-north > div:first-child {
 	margin-left: 25px;
 }
 
-body > .ui-layout-north > div:first-child #buttonPlay {
+body > .ui-layout-north > div:first-child .buttonPlay {
 	float: left;
 	clear: none;
 	display: block;
@@ -96,17 +96,17 @@ body > .ui-layout-north > div:first-child #buttonPlay {
 	margin-right: 4px;
 	background: transparent url('../img/button_play.png') no-repeat left top;
 }
-body > .ui-layout-north > div:first-child #buttonPlay.playing {
+body > .ui-layout-north > div:first-child .buttonPlay.playing {
 	background-image: url('../img/button_pause.png');
 }
 
-body > .ui-layout-north > div:first-child #buttonPlay.stopped {
+body > .ui-layout-north > div:first-child .buttonPlay.stopped {
 	background-image: url('../img/button_stop.png');
 }
 
-body > .ui-layout-north > div:first-child #buttonVolume,
-body > .ui-layout-north > div:first-child #buttonPrev,
-body > .ui-layout-north > div:first-child #buttonNext {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input,
+body > .ui-layout-north > div:first-child .buttonPrev,
+body > .ui-layout-north > div:first-child .buttonNext {
 	float: left;
 	clear: none;
 	display: block;
@@ -115,20 +115,18 @@ body > .ui-layout-north > div:first-child #buttonNext {
 	margin-top: 3px;
 }
 
-body > .ui-layout-north > div:first-child #buttonPrev {
+body > .ui-layout-north > div:first-child .buttonPrev {
 	background: url('../img/button_prev.png') no-repeat left top;
 }
 
-body > .ui-layout-north > div:first-child #buttonNext {
+body > .ui-layout-north > div:first-child .buttonNext {
 	background: url('../img/button_next.png') no-repeat left top;
 }
 
-body > .ui-layout-north > div:first-child #buttonNext:active,
-body > .ui-layout-north > div:first-child #buttonPrev:active,
-body > .ui-layout-north > div:first-child #buttonPlay:active,
-body > .ui-layout-north > div:first-child #buttonNext.disabled:active,
-body > .ui-layout-north > div:first-child #buttonPrev.disabled:active,
-body > .ui-layout-north > div:first-child #buttonPlay.disabled:active {
+body > .ui-layout-north > div:first-child .buttonNext:active,
+body > .ui-layout-north > div:first-child .buttonPrev:active,
+body > .ui-layout-north > div:first-child .buttonPlay:active,
+body > .ui-layout-north > div:first-child .disabled:active {
 	background-position: left bottom;
 }
 
@@ -164,19 +162,19 @@ progress#daaprPlayerProgress span {
 	padding: 0;
 }
 */
-#volumeWrapper {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper {
 	float: left;
 	clear: none;
 	margin-left: 25px;
 	margin-top: 16px;
 }
 
-#volumeWrapper input#buttonVolume {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input {
 	float: left;
 	clear: none;
-	vertical-align: bottom;
 	-moz-border-radius: 6px;
 	-webkit-border-radius: 6px;
+	border-radius: 6px;
 	/*background: url('../img/volume_bg.png') repeat-x;*/
 	display: block;
 	height: 6px;
@@ -190,13 +188,14 @@ progress#daaprPlayerProgress span {
 	margin-top: 2px;
 }
 
-#volumeWrapper input#buttonVolume, 
-#volumeWrapper input#buttonVolume span {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input/*,
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span*/ {
 	-moz-border-radius: 6px;
 	-webkit-border-radius: 6px;
+	border-radius: 6px;
 }
 /*
-#volumeWrapper progress#buttonVolume span {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span {
 	background: url('../img/volume_fg.png') repeat-x;
 	display: block;
 	height: 6px;
@@ -205,13 +204,12 @@ progress#daaprPlayerProgress span {
 	padding: 0;
 }
 
-#volumeWrapper progress#buttonVolume span a {
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper input span a {
 	display: none;
 }
 */
 
-#volumeWrapper a#buttonVolDown {
-	vertical-align: top;
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper a:first-child {
 	display:block;
 	float: left;
 	clear: left;
@@ -221,8 +219,7 @@ progress#daaprPlayerProgress span {
 }
 
 
-#volumeWrapper a#buttonVolUp {
-	vertical-align: top;
+body > .ui-layout-north > div:first-child > .playerVolumeWrapper a:last-child {
 	display:block;
 	float: left;
 	clear: right;
@@ -241,7 +238,3 @@ table tbody tr.itemplaying td:first-child span {
 	height: 12px;
 	line-height: 14px;
 }
-
-table tbody tr.itemplaying.itempaused td:first-child span {
-	background-image: url('../img/playicon.png');
-}
diff --git a/resources/templates/player/layout.html b/resources/templates/player/layout.html
index ffcbc11..0a5431f 100644
--- a/resources/templates/player/layout.html
+++ b/resources/templates/player/layout.html
@@ -1,11 +1,11 @@
 <div>
-	<a id="buttonPrev" class="disabled"></a>
-	<a id="buttonPlay" class="disabled"></a>
-	<a id="buttonNext" class="disabled"></a>
-	<div id="volumeWrapper">
-		<a id="buttonVolDown" class="disabled"></a>
-		<input type="range" id="buttonVolume" minx="0" max="1" step="0.05" value="0" disabled />
-		<a id="buttonVolUp" class="disabled"></a>
+	<a class="buttonPrev disabled"></a>
+	<a class="buttonPlay disabled"></a>
+	<a class="buttonNext disabled"></a>
+	<div class="playerVolumeWrapper">
+		<a class="disabled"></a>
+		<input type="range" minx="0" max="1" step="0.05" value="0" disabled />
+		<a class="disabled"></a>
 	</div>
 	<div class="clearfix"></div>
 </div>