--- 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 {