From abd342dc90be7bd57e215f5a09c745d953b0bd57 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordaneldredge@gmail.com>
Date: Sat, 11 Apr 2015 16:01:23 -0700
Subject: [PATCH] Namespace css rules

---
 css/context-menu.css |  25 +++--
 css/main.css         | 219 +++++++++++++++++++++----------------------
 css/winamp.css       |  21 +++--
 index.html           |   2 +-
 js/main.js           |   2 +-
 js/skin.js           |   2 +-
 6 files changed, 134 insertions(+), 137 deletions(-)

diff --git a/css/context-menu.css b/css/context-menu.css
index 3f92c896..27cf2c6e 100644
--- a/css/context-menu.css
+++ b/css/context-menu.css
@@ -1,6 +1,5 @@
-#context-menu,
-#context-menu ul
-{
+#winamp2-js #context-menu,
+#winamp2-js #context-menu ul {
     display: none;
     z-index: 50; /* Gross */
     background-color: #FFFFFF;
@@ -13,7 +12,7 @@
     box-shadow: 2px 2px 4px rgba(0,0,0,.5);
 }
 
-#context-menu li {
+#winamp2-js #context-menu li {
     position: relative;
     font-family: 'Tahoma';
     font-size: 11px;
@@ -23,31 +22,31 @@
     padding: 1px 18px 3px 18px;
     display: block;
 }
-#context-menu li.parent:after {
+#winamp2-js #context-menu li.parent:after {
     text-align: right;
     /* content: '\25b8'; */
 }
-#context-menu li a {
+#winamp2-js #context-menu li a {
     text-decoration: none;
     color: black;
     cursor: default;
 }
 
-#context-menu li:hover,
-#context-menu li:hover a {
+#winamp2-js #context-menu li:hover,
+#winamp2-js #context-menu li:hover a {
     background-color: #224EB7;
     color: #FFFFFF;
 }
 
-#context-menu li.hr {
+#winamp2-js #context-menu li.hr {
     padding: 2px 0;
 }
 
-#context-menu li.hr:hover {
+#winamp2-js #context-menu li.hr:hover {
     background-color: #FFFFFF;
 }
 
-#context-menu li.hr hr {
+#winamp2-js #context-menu li.hr hr {
     border: none;
     height: 1px;
     background-color: #A7A394;
@@ -55,11 +54,11 @@
     padding: 0;
 }
 
-#context-menu ul {
+#winamp2-js #context-menu ul {
     left: 100%;
     margin-left: -3px;
 }
 
-#context-menu li:hover ul {
+#winamp2-js #context-menu li:hover ul {
     display: block;
 }
diff --git a/css/main.css b/css/main.css
index 55b640a3..27bcd18e 100755
--- a/css/main.css
+++ b/css/main.css
@@ -1,10 +1,5 @@
 /* Styles */
-#main-window-parent {
-    height: 116px;
-    width: 275px;
-}
-
-#main-window {
+#winamp2-js #main-window {
     position: absolute;
     height: 116px;
     width: 275px;
@@ -17,31 +12,31 @@
     -ms-interpolation-mode: nearest-neighbor;   /* IE (non-standard property) */
 }
 
-#main-window.doubled {
+#winamp2-js #main-window.doubled {
     -moz-transform: scale(2);
     -moz-transform-origin: top left;
     -webkit-transform: scale(2);
     -webkit-transform-origin: top left;
 }
 
-#main-window.doubled #context-menu {
+#winamp2-js #main-window.doubled #context-menu {
     -moz-transform: scale(.5);
     -moz-transform-origin: top left;
     -webkit-transform: scale(.5);
     -webkit-transform-origin: top left;
 }
 
-#main-window.loading {
+#winamp2-js #main-window.loading {
     background-image: none;
     background-color: #FFFFFF;
     border: 2px solid #dddddd;
 }
 /* Hide everything whil we are loading */
-#main-window.loading * {
+#winamp2-js #main-window.loading * {
     display: none;
 }
 
-#loading {
+#winamp2-js #loading {
     display: none;
     text-align: center;
     font-size: 20px;
@@ -52,13 +47,13 @@
 }
 
 /* Only show loading div while we are loading */
-#main-window.loading #loading {
+#winamp2-js #main-window.loading #loading {
     display: block;
 }
 
-#main-window.closed { display: none; }
+#winamp2-js #main-window.closed { display: none; }
 
-#title-bar {
+#winamp2-js #title-bar {
     position: absolute;
     top: 0;
     left: 0;
@@ -67,10 +62,10 @@
     cursor:url('../cursors/TITLEBAR.PNG?inline'), auto;
 }
 
-#option,
-#minimize,
-#shade,
-#close {
+#winamp2-js #option,
+#winamp2-js #minimize,
+#winamp2-js #shade,
+#winamp2-js #close {
     position: absolute;
     height: 9px;
     width: 9px;
@@ -78,31 +73,30 @@
     cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
 }
 
-#title-bar #option {
+#winamp2-js #title-bar #option {
     left: 6px;
 }
-#title-bar #option #context-menu {
+#winamp2-js #title-bar #option #context-menu {
     display: none;
     top: 12px;
     left: 0px;
 }
-#title-bar #option:active #context-menu,
-#title-bar #option.selected #context-menu
-{
+#winamp2-js #title-bar #option:active #context-menu,
+#winamp2-js #title-bar #option.selected #context-menu {
     display: block;
 }
 
-#title-bar #minimize {
+#winamp2-js #title-bar #minimize {
     left: 244px;
 }
-#title-bar #shade {
+#winamp2-js #title-bar #shade {
     left: 254px;
 }
-#title-bar #close {
+#winamp2-js #title-bar #close {
     left: 264px;
     cursor:url('../cursors/CLOSE.PNG?inline'), auto;
 }
-#clutter-bar {
+#winamp2-js #clutter-bar {
     position: absolute;
     top: 22px;
     left: 10px;
@@ -110,32 +104,32 @@
     width: 8px;
 }
 
-#clutter-bar div {
+#winamp2-js #clutter-bar div {
     position: absolute;
     height: 7px;
     width: 8px;
     left: 0px;
 }
 
-#clutter-bar #button-o {
+#winamp2-js #clutter-bar #button-o {
     top: 3px;
     height: 8px;
 }
-#clutter-bar #button-a {
+#winamp2-js #clutter-bar #button-a {
     top: 11px;
 }
-#clutter-bar #button-i {
+#winamp2-js #clutter-bar #button-i {
     top: 18px;
 }
-#clutter-bar #button-d {
+#winamp2-js #clutter-bar #button-d {
     top: 25px;
     height: 8px;
 }
-#clutter-bar #button-v {
+#winamp2-js #clutter-bar #button-v {
     top: 33px;
 }
 
-#play-pause {
+#winamp2-js #play-pause {
     position: absolute;
     top: 28px;
     left: 26px;
@@ -144,14 +138,14 @@
     background-repeat: no-repeat;
 }
 
-.play #work-indicator {
+#winamp2-js .play #work-indicator {
     position: absolute;
     top: 28px;
     left: 24px;
     height: 9px;
     width: 3px;
 }
-.status #time {
+#winamp2-js .status #time {
     position: absolute;
     left: 39px;
     top: 26px;
@@ -160,13 +154,13 @@
     width: 59px;
 }
 
-.stop .status #time { display:none; }
-.pause .status #time {
+#winamp2-js .stop .status #time { display:none; }
+#winamp2-js .pause .status #time {
     animation: blink 2s step-start 1s infinite;
     -webkit-animation: blink 2s step-start 1s infinite;
 }
 
-.status #time #minus-sign {
+#winamp2-js .status #time #minus-sign {
     position: absolute;
     top: 6px;
     left: -1px;
@@ -175,35 +169,35 @@
 }
 
 /* Alternate format for minus sign, when skin supports it */
-.status #time.ex #minus-sign {
+#winamp2-js .status #time.ex #minus-sign {
     top: 0px;
     left: -1px;
     width: 9px;
     height: 13px;
 }
 
-.status #time #minute-first-digit {
+#winamp2-js .status #time #minute-first-digit {
     position: absolute;
     pointer-events: none;
     left: 9px;
     height: 13px;
     width: 9px;
 }
-.status #time #minute-second-digit {
+#winamp2-js .status #time #minute-second-digit {
     position: absolute;
     pointer-events: none;
     left: 21px;
     height: 13px;
     width: 9px;
 }
-.status #time #second-first-digit {
+#winamp2-js .status #time #second-first-digit {
     position: absolute;
     pointer-events: none;
     left: 39px;
     height: 13px;
     width: 9px;
 }
-.status #time #second-second-digit {
+#winamp2-js .status #time #second-second-digit {
     position: absolute;
     pointer-events: none;
     left: 51px;
@@ -211,7 +205,7 @@
     width: 9px;
 }
 
-#visualizer {
+#winamp2-js #visualizer {
     position: absolute;
     width: 76px;
     height: 16px;
@@ -219,12 +213,12 @@
     left: 24px;
 }
 
-.stop #visualizer {
+#winamp2-js .stop #visualizer {
     display: none;
 }
 
 
-.text {
+#winamp2-js .text {
     position: absolute;
     left: 112px;
     top: 27px;
@@ -234,11 +228,11 @@
     display: none;
 }
 
-#song-title {
+#winamp2-js #song-title {
     display: block;
 }
 
-.media-info #kbps {
+#winamp2-js .media-info #kbps {
     position: absolute;
     left: 111px;
     top: 43px;
@@ -247,9 +241,9 @@
     overflow: hidden;
 }
 
-.stop .media-info #kbps { display: none; }
+#winamp2-js .stop .media-info #kbps { display: none; }
 
-.media-info #khz {
+#winamp2-js .media-info #khz {
     position: absolute;
     left: 156px;
     top: 43px;
@@ -258,9 +252,9 @@
     overflow: hidden;
 }
 
-.stop .media-info #khz { display: none; }
+#winamp2-js .stop .media-info #khz { display: none; }
 
-.media-info .mono-stereo {
+#winamp2-js .media-info .mono-stereo {
     position: absolute;
     left: 212px;
     top: 41px;
@@ -268,17 +262,17 @@
     height: 12px;
 }
 
-.media-info .mono-stereo div {
+#winamp2-js .media-info .mono-stereo div {
     position: absolute;
     height: 12px;
     width: 29px;
 }
 
-.media-info .mono-stereo #stereo {
+#winamp2-js .media-info .mono-stereo #stereo {
     left: 27px;
 }
 
-#volume {
+#winamp2-js #volume {
     position: absolute;
     left: 107px;
     top: 57px;
@@ -287,21 +281,21 @@
     background-position: 0 0;
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
 }
-#volume::-webkit-slider-thumb {
+#winamp2-js #volume::-webkit-slider-thumb {
     display: block;
     margin-top: 1px;
     height: 11px;
     width: 14px;
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
 }
-#volume::-moz-range-thumb {
+#winamp2-js #volume::-moz-range-thumb {
     margin-top: 1px;
     height: 11px;
     width: 14px;
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
 }
 
-#balance {
+#winamp2-js #balance {
     position: absolute;
     left: 177px;
     top: 57px;
@@ -311,20 +305,20 @@
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
 }
 
-#balance::-webkit-slider-thumb {
+#winamp2-js #balance::-webkit-slider-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
 }
-#balance::-moz-range-thumb {
+#winamp2-js #balance::-moz-range-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
 }
 
-.windows {
+#winamp2-js .windows {
     position: absolute;
     left: 219px;
     top: 58px;
@@ -332,21 +326,21 @@
     height: 12px;
 }
 
-.windows div {
+#winamp2-js .windows div {
     position: absolute;
     width: 23px;
     height: 12px;
 }
 
-.windows #equalizer-button {
+#winamp2-js .windows #equalizer-button {
     left: 0;
 }
 
-.windows #playlist-button {
+#winamp2-js .windows #playlist-button {
     left: 23px;
 }
 
-#position {
+#winamp2-js #position {
     position: absolute;
     left: 16px;
     top: 72px;
@@ -355,7 +349,7 @@
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
 }
 
-#position::-webkit-slider-thumb {
+#winamp2-js #position::-webkit-slider-thumb {
     height: 10px;
     width: 29px;
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
@@ -367,45 +361,45 @@
     position: relative;
 }
 
-#position::-moz-range-thumb {
+#winamp2-js #position::-moz-range-thumb {
     height: 10px;
     width: 29px;
     cursor:url('../cursors/POSBAR.PNG?inline'), auto;
 }
 
 /* For some reason, we can't use display: none here */
-.stop #position::-webkit-slider-thumb { visibility: hidden; }
-.stop #position::-moz-range-thumb { visibility: hidden; }
+#winamp2-js .stop #position::-webkit-slider-thumb { visibility: hidden; }
+#winamp2-js .stop #position::-moz-range-thumb { visibility: hidden; }
 
-.actions div {
+#winamp2-js .actions div {
     height: 18px;
     width: 23px;
     position: absolute;
 }
 
-.actions #previous {
+#winamp2-js .actions #previous {
     top: 88px;
     left: 16px;
 }
-.actions #play {
+#winamp2-js .actions #play {
     top: 88px;
     left: 39px;
 }
-.actions #pause {
+#winamp2-js .actions #pause {
     top: 88px;
     left: 62px;
 }
-.actions #stop {
+#winamp2-js .actions #stop {
     top: 88px;
     left: 85px;
 }
-.actions #next {
+#winamp2-js .actions #next {
     top: 88px;
     left: 108px;
     width: 22px;
 }
 
-#eject {
+#winamp2-js #eject {
     position: absolute;
     top: 89px;
     left: 136px;
@@ -413,28 +407,28 @@
     width: 22px;
 }
 
-.shuffle-repeat {
+#winamp2-js .shuffle-repeat {
     position: absolute;
     top: 89px;
     left: 163px;
     width: 74px;
 }
 
-.shuffle-repeat div {
+#winamp2-js .shuffle-repeat div {
     position: absolute;
     height: 15px;
 }
 
-.shuffle-repeat #shuffle {
+#winamp2-js .shuffle-repeat #shuffle {
     width: 47px;
 }
 
-.shuffle-repeat #repeat {
+#winamp2-js .shuffle-repeat #repeat {
     left: 46px;
     width: 28px;
 }
 
-#about {
+#winamp2-js #about {
     position: absolute;
     top: 91px;
     left: 253px;
@@ -442,7 +436,7 @@
     width: 13px;
 }
 
-.digit {
+#winamp2-js .digit {
     position: absolute;
     display: inline-block;
     width: 9px;
@@ -452,67 +446,66 @@
 }
 
 /* Shade View */
-#main-window.shade {
+#winamp2-js #main-window.shade {
     height: 14px;
 }
 
-#shade-time {
+#winamp2-js #shade-time {
     cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
 }
 
 
-.shade .media-info,
-.shade .windows,
-.shade #volume,
-.shade #balance,
-.shade .shuffle-repeat,
-.shade .status
-{
+#winamp2-js .shade .media-info,
+#winamp2-js .shade .windows,
+#winamp2-js .shade #volume,
+#winamp2-js .shade #balance,
+#winamp2-js .shade .shuffle-repeat,
+#winamp2-js .shade .status {
     display: none;
 }
-.shade #title-bar {
+#winamp2-js .shade #title-bar {
     cursor:url('../cursors/MAINMENU.PNG?inline'), auto;
 }
 
-.shade .actions div {
+#winamp2-js .shade .actions div {
     position: absolute;
 }
-.shade .actions #previous {
+#winamp2-js .shade .actions #previous {
     background: none;
     height: 10px;
     width: 7px;
     top: 2px;
     left: 169px;
 }
-.shade .actions #play {
+#winamp2-js .shade .actions #play {
     background: none;
     height: 10px;
     width: 10px;
     top: 2px;
     left: 176px;
 }
-.shade .actions #pause {
+#winamp2-js .shade .actions #pause {
     background: none;
     height: 10px;
     width: 9px;
     top: 2px;
     left: 186px;
 }
-.shade .actions #stop {
+#winamp2-js .shade .actions #stop {
     background: none;
     height: 10px;
     width: 9px;
     top: 2px;
     left: 195px;
 }
-.shade .actions #next {
+#winamp2-js .shade .actions #next {
     background: none;
     height: 10px;
     width: 10px;
     top: 2px;
     left: 204px;
 }
-.shade #eject {
+#winamp2-js .shade #eject {
     height: 10px;
     width: 10px;
     top: 2px;
@@ -520,7 +513,7 @@
     background: none;
 }
 
-.shade #position {
+#winamp2-js .shade #position {
     position: absolute;
     left: 226px;
     top: 4px;
@@ -528,25 +521,25 @@
     height: 7px;
 }
 
-.shade #position::-webkit-slider-thumb {
+#winamp2-js .shade #position::-webkit-slider-thumb {
     height: 7px;
     width: 3px;
     /* This make it appear. Not sure why */
     background: none;
 }
 
-.shade #position::-moz-range-thumb {
+#winamp2-js .shade #position::-moz-range-thumb {
     height: 7px;
     width: 3px;
     /* This make it appear. Not sure why */
     background: none;
 }
 
-#shade-time {
+#winamp2-js #shade-time {
     display: none;
 }
 
-.shade #shade-time {
+#winamp2-js .shade #shade-time {
     display: block;
     position: absolute;
     top: 4px;
@@ -555,30 +548,30 @@
     width: 25px;
 }
 
-.stop.shade #shade-time { display:none; }
-.pause.shade #shade-time {
+#winamp2-js .stop.shade #shade-time { display:none; }
+#winamp2-js .pause.shade #shade-time {
     animation: blink 2s step-start 1s infinite;
     -webkit-animation: blink 2s step-start 1s infinite;
 }
 
-.shade #shade-time .character {
+#winamp2-js .shade #shade-time .character {
     position: absolute;
     top: 0;
 }
-.shade #shade-minus-sign {
+#winamp2-js .shade #shade-minus-sign {
     left: 0px;
 }
-.shade #shade-minute-first-digit {
+#winamp2-js .shade #shade-minute-first-digit {
     left: 6px;
 }
 
-.shade #shade-minute-second-digit {
+#winamp2-js .shade #shade-minute-second-digit {
     left: 11px;
 }
-.shade #shade-second-first-digit {
+#winamp2-js .shade #shade-second-first-digit {
     left: 20px;
 }
 
-.shade #shade-second-second-digit {
+#winamp2-js .shade #shade-second-second-digit {
     left: 25px;
 }
diff --git a/css/winamp.css b/css/winamp.css
index 8fc0532d..9e715c8b 100644
--- a/css/winamp.css
+++ b/css/winamp.css
@@ -2,16 +2,21 @@
 @import url("context-menu.css");
 
 /* Rules used by all windows */
+#winamp2-js {
+    height: 116px;
+    width: 275px;
+}
+
 
 /* Range input css reset */
-input[type=range]{ -webkit-appearance: none; margin: 0; padding: 0; background: none; }
-input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; border-radius: 0; background: none; }
-input[type=range]::-moz-range-thumb { border: none; border-radius: 0; background: none; }
-input[type=range]::-moz-range-track { border: none; background: none; }
-input[type=range]:focus { outline: none; }
-input[type=range]::-moz-focus-outer { border: 0; }
+#winamp2-js input[type=range]{ -webkit-appearance: none; margin: 0; padding: 0; background: none; border: none; }
+#winamp2-js input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; border-radius: 0; background: none; }
+#winamp2-js input[type=range]::-moz-range-thumb { border: none; border-radius: 0; background: none; }
+#winamp2-js input[type=range]::-moz-range-track { border: none; background: none; }
+#winamp2-js input[type=range]:focus { outline: none; }
+#winamp2-js input[type=range]::-moz-focus-outer { border: 0; }
 
-a:focus { outline: none; }
+#winamp2-js a:focus { outline: none; }
 
 /* Animation */
 @keyframes blink {
@@ -25,7 +30,7 @@ a:focus { outline: none; }
     100% { opacity: 1.0; }
 }
 
-.character {
+#winamp2-js .character {
     display: block;
     float: left; /* Safari does not do inline-block well */
     width: 5px;
diff --git a/index.html b/index.html
index 5d034688..c5bcd62a 100755
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
     </head>
     <body>
         <script data-main='js/main' src="js/require.js"></script>
-        <div id='main-window-parent'></div>
+        <div id='winamp2-js'></div>
         <div id='browser-compatibility'>
             <p>Your browser does not support the features we need</p>
             <p>Try using the most recent version of Chrome, Firefox or Safari</p>
diff --git a/js/main.js b/js/main.js
index 424b61a1..d4169232 100644
--- a/js/main.js
+++ b/js/main.js
@@ -16,7 +16,7 @@ require([
     if(Browser.isCompatible()) {
         var mainWindowElement = document.createElement('div');
         mainWindowElement.innerHTML = mainWindowHtml;
-        document.getElementById('main-window-parent').appendChild(mainWindowElement);
+        document.getElementById('winamp2-js').appendChild(mainWindowElement);
 
         var winamp = Winamp.init({
             'volume': 50,
diff --git a/js/skin.js b/js/skin.js
index 47ea4d8d..50f5004d 100644
--- a/js/skin.js
+++ b/js/skin.js
@@ -108,7 +108,7 @@ return {
                     context.drawImage(skinImage, -sprite.x, -sprite.y);
                     var value = "background-image: url(" + canvas.toDataURL() + ")";
                     sprite.selectors.forEach(function(selector) {
-                        cssRules += selector + "{" + value + "}\n";
+                        cssRules += "#winamp2-js " + selector + "{" + value + "}\n";
                     });
                 });
                 resolve(cssRules);