diff -r 8ee8c9ea2a9f -r cd85b780f4a5 css/playscreen.css --- 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%; }