css/playscreen.css
changeset 19 685c406c7d8c
parent 18 cd85b780f4a5
child 20 8b0a464fb5ac
--- a/css/playscreen.css	Wed Apr 10 15:39:28 2013 +0200
+++ b/css/playscreen.css	Tue Apr 16 18:26:43 2013 +0200
@@ -24,7 +24,7 @@
 }
 
 .button {
-    float: left; width: 18px; margin: 5px 4px;
+    float: left; width: 18px; margin: 6px 4px;
     height: 18px; background: url(../img/sprites.png);
 }
 
@@ -44,6 +44,14 @@
 	background-position: -54px 0;
 }
 
+.lock-button {
+	width: 36px; background-position: -36px -54px;
+}
+
+.lock-button.locked {
+	background-position: -36px -36px;
+}
+
 .duration, .time-separator, .current-time {
     float: left; height: 30px;
     font-size: 20px; line-height: 30px;
@@ -53,7 +61,7 @@
 	width: 6px; text-align: center;
 }
 .duration, .current-time {
-	width: 140px; margin: 0 8px;
+	width: 120px; margin: 0 8px;
 }
 .current-time {
 	text-align: right; color: #CCCCCC;
@@ -81,7 +89,7 @@
 }
 
 .play-bottom {
-    position: absolute; left: 8px; top: 86px; bottom: 8px; right: 8px; overflow: hidden;
+    position: absolute; left: 8px; top: 96px; bottom: 8px; right: 8px; overflow: hidden;
 }
 
 .home-button {
@@ -93,28 +101,48 @@
 }
 
 .topics-block {
-    float: left; clear: both; width: 10000px; padding-left: 8px; height: 40px; left: 0;
+    float: left; clear: both; width: 10000px; height: 50px; left: 20px;
+}
+
+.topics-list {
+	float: left;
 }
 
 .topic {
-    float: left; padding: 6px; cursor: pointer; background: #333333;
+    float: left; padding: 2px; cursor: pointer; background: #333333;
 }
 
 .topic-words li {
-    display: inline-block; color: #fff; padding: 0 4px;
+    display: inline-block; color: #fff; padding: 2px 4px;
     font-size: 14px; line-height: 16px;
 }
 
 .left-arrow, .right-arrow {
-	position: absolute; top: 0; width: 9px; height: 20px; width: 9px; background: url(../img/arrows.png); margin: 5px; cursor: pointer;
+	position: absolute; top: 0; width: 9px; height: 20px; padding: 13px 8px; cursor: pointer;
 }
 
 .left-arrow {
-	left: 0;
+	left: 0; background: -moz-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0));
 }
 
 .right-arrow {
-	right: 0; background-position: -9px 0;
+	right: 0; background: -moz-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,0));
+}
+
+.inside-arrow {
+	width: 9px; height: 20px; background: url(../img/sprites.png);
+}
+
+div:hover>.inside-arrow {
+	opacity: .5;
+}
+
+.left-arrow .inside-arrow {
+	background-position: 0 -54px;
+}
+
+.right-arrow .inside-arrow {
+	background-position: -9px -54px;
 }
 
 .highlight {