diff -r cd85b780f4a5 -r 685c406c7d8c css/playscreen.css --- 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 {