From 32ab0d0d1a48887a26e795dcd79c5af15e779978 Mon Sep 17 00:00:00 2001
From: The Stranjer <791672+TheStranjer@users.noreply.github.com>
Date: Wed, 21 Jul 2021 19:49:24 -0600
Subject: [PATCH] Turn 'status' CSS class into 'webamp-status' (#1116)

---
 packages/webamp/css/main-window.css            | 18 +++++++++---------
 .../webamp/js/components/MainWindow/index.tsx  |  2 +-
 packages/webamp/js/components/Skin.tsx         |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/webamp/css/main-window.css b/packages/webamp/css/main-window.css
index 2db62d0f..a3f5fe7d 100755
--- a/packages/webamp/css/main-window.css
+++ b/packages/webamp/css/main-window.css
@@ -96,7 +96,7 @@
   height: 9px;
   width: 3px;
 }
-#webamp .status #time {
+#webamp .webamp-status #time {
   position: absolute;
   left: 39px;
   top: 26px;
@@ -105,15 +105,15 @@
   width: 59px;
 }
 
-#webamp .stop .status #time {
+#webamp .stop .webamp-status #time {
   display: none;
 }
-#webamp .pause .status #time {
+#webamp .pause .webamp-status #time {
   animation: blink 2s step-start 1s infinite;
   -webkit-animation: blink 2s step-start 1s infinite;
 }
 
-#webamp .status #time #minus-sign {
+#webamp .webamp-status #time #minus-sign {
   /* Note that this get's augmented by the skin CSS if NUM_EX.BMP is present */
   position: absolute;
   top: 6px;
@@ -122,28 +122,28 @@
   height: 1px;
 }
 
-#webamp .status #time #minute-first-digit {
+#webamp .webamp-status #time #minute-first-digit {
   position: absolute;
   pointer-events: none;
   left: 9px;
   height: 13px;
   width: 9px;
 }
-#webamp .status #time #minute-second-digit {
+#webamp .webamp-status #time #minute-second-digit {
   position: absolute;
   pointer-events: none;
   left: 21px;
   height: 13px;
   width: 9px;
 }
-#webamp .status #time #second-first-digit {
+#webamp .webamp-status #time #second-first-digit {
   position: absolute;
   pointer-events: none;
   left: 39px;
   height: 13px;
   width: 9px;
 }
-#webamp .status #time #second-second-digit {
+#webamp .webamp-status #time #second-second-digit {
   position: absolute;
   pointer-events: none;
   left: 51px;
@@ -418,7 +418,7 @@
 #webamp .shade #volume,
 #webamp .shade #balance,
 #webamp .shade .shuffle-repeat,
-#webamp .shade .status {
+#webamp .shade .webamp-status {
   display: none;
 }
 #webamp .shade #title-bar {
diff --git a/packages/webamp/js/components/MainWindow/index.tsx b/packages/webamp/js/components/MainWindow/index.tsx
index c93bf884..0f10f3ef 100644
--- a/packages/webamp/js/components/MainWindow/index.tsx
+++ b/packages/webamp/js/components/MainWindow/index.tsx
@@ -98,7 +98,7 @@ const MainWindow = React.memo(({ analyser, filePickers }: Props) => {
           <Shade />
           <Close />
         </div>
-        <div className="status">
+        <div className="webamp-status">
           <ClutterBar />
           {!working && <div id="play-pause" />}
           <div
diff --git a/packages/webamp/js/components/Skin.tsx b/packages/webamp/js/components/Skin.tsx
index 1723fb4b..1a004843 100644
--- a/packages/webamp/js/components/Skin.tsx
+++ b/packages/webamp/js/components/Skin.tsx
@@ -110,7 +110,7 @@ const getCssRules = createSelector(
       // This alternate number file requires that the minus sign be
       // formatted differently.
       cssRules.push(
-        `${CSS_PREFIX} .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }`
+        `${CSS_PREFIX} .webamp-status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }`
       );
     }