diff --git a/skin.js b/skin.js index 97c49d96..b7a6f114 100644 --- a/skin.js +++ b/skin.js @@ -16,6 +16,8 @@ SkinManager = { "#title-bar #shade": "TITLEBAR.BMP", "#title-bar #close": "TITLEBAR.BMP", ".status #clutter-bar": "TITLEBAR.BMP", + ".status #clutter-bar div:active": "TITLEBAR.BMP", + ".status #clutter-bar div.selected": "TITLEBAR.BMP", ".status #play-pause": "PLAYPAUS.BMP", ".play .status #work-indicator": "PLAYPAUS.BMP", ".status #time #minus-sign": "NUMBERS.BMP", diff --git a/winamp.css b/winamp.css index ea766317..e21dacaa 100755 --- a/winamp.css +++ b/winamp.css @@ -139,10 +139,6 @@ body { background-position: -312px 0; } -.doubled .status #clutter-bar { - background-position: -328px -44px; -} - #clutter-bar div { position: absolute; height: 7px; @@ -162,11 +158,16 @@ body { } #clutter-bar #button-d { top: 25px; - } -#clutter-bar #button-v { - top: 32px; +} +/* Other buttons could follow this model */ +#clutter-bar #button-d:active, +#clutter-bar #button-d.selected { + background-position: -328px -69px; height: 8px; } +#clutter-bar #button-v { + top: 33px; +} .status #play-pause { position: absolute; diff --git a/winamp.js b/winamp.js index b716d3bf..b620dd1b 100755 --- a/winamp.js +++ b/winamp.js @@ -104,6 +104,7 @@ function Winamp () { } this.nodes.buttonD.onclick = function() { + this.classList.toggle('selected'); self.nodes.winamp.classList.toggle('doubled'); }