css/playscreen.css
changeset 18 cd85b780f4a5
parent 17 8ee8c9ea2a9f
child 19 685c406c7d8c
--- a/css/playscreen.css	Thu Apr 04 17:44:59 2013 +0200
+++ b/css/playscreen.css	Wed Apr 10 15:39:28 2013 +0200
@@ -23,9 +23,25 @@
     width: 402px; height: 30px;
 }
 
-.play-button, .next-button {
-    float: left; width: 30px; margin: 5px; font-size: 18px;
-    line-height: 20px; height: 20px; cursor: pointer;
+.button {
+    float: left; width: 18px; margin: 5px 4px;
+    height: 18px; background: url(../img/sprites.png);
+}
+
+.button:hover {
+	opacity: .5;
+}
+
+.play-button.playing {
+	background-position: -18px 0;
+}
+
+.next-button {
+	background-position: -36px 0;
+}
+
+.prev-button {
+	background-position: -54px 0;
 }
 
 .duration, .time-separator, .current-time {
@@ -34,7 +50,7 @@
 }
 
 .time-separator {
-	width: 10px; text-align: center;
+	width: 6px; text-align: center;
 }
 .duration, .current-time {
 	width: 140px; margin: 0 8px;
@@ -49,7 +65,7 @@
 
 .keyword-search {
     line-height: 20px; padding: 0 5px; margin-top: 4px; border: 1px solid #000000; width: 300px; font-size: 18px;
-    background: #666666;
+    background: #666666; float: left;
 }
 
 .keyword-search a {
@@ -68,6 +84,10 @@
     position: absolute; left: 8px; top: 86px; bottom: 8px; right: 8px; overflow: hidden;
 }
 
+.home-button {
+	background-position: -36px -18px;
+}
+
 .play-svg {
     position: absolute; left: 0; top: 0; width: 100%; height: 100%;
 }