From 38bb8dc228b8fb5ccaebfcffc53798edc490f570 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Thu, 1 Feb 2018 20:33:58 -0800
Subject: [PATCH] Make input 3px shorter

---
 css/main-window.css                           | 13 +++++++--
 js/components/MainWindow/MainVolume.js        |  6 +++-
 .../__snapshots__/index.test.js.snap          | 29 +++++++++++--------
 js/skinSelectors.js                           |  8 ++---
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/css/main-window.css b/css/main-window.css
index ee93a388..41bfc9b8 100755
--- a/css/main-window.css
+++ b/css/main-window.css
@@ -234,12 +234,21 @@
     width: 68px;
     background-position: 0 0;
 }
-#winamp2-js #volume::-webkit-slider-thumb {
+
+#winamp2-js #volume input {
+    height: 13px;
+    /* The input itself, is actually 3px shorter than the background
+     * https://twitter.com/LuigiHann/status/959275940688867328
+     */
+    width: 65px;
+    display: block;
+}
+#winamp2-js #volume input::-webkit-slider-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
 }
-#winamp2-js #volume::-moz-range-thumb {
+#winamp2-js #volume input::-moz-range-thumb {
     top: 1px;
     height: 11px;
     width: 14px;
diff --git a/js/components/MainWindow/MainVolume.js b/js/components/MainWindow/MainVolume.js
index 1362859c..8833fc45 100644
--- a/js/components/MainWindow/MainVolume.js
+++ b/js/components/MainWindow/MainVolume.js
@@ -12,7 +12,11 @@ const MainVolume = props => {
   const style = {
     backgroundPosition: `0 -${offset}px`
   };
-  return <Volume style={style} id="volume" />;
+  return (
+    <div id="volume" style={style}>
+      <Volume />
+    </div>
+  );
 };
 
 const mapStateToProps = state => ({
diff --git a/js/components/MainWindow/__snapshots__/index.test.js.snap b/js/components/MainWindow/__snapshots__/index.test.js.snap
index 4d98d80a..e5bf638d 100644
--- a/js/components/MainWindow/__snapshots__/index.test.js.snap
+++ b/js/components/MainWindow/__snapshots__/index.test.js.snap
@@ -245,24 +245,29 @@ exports[`MainWindow renders to snapshot 1`] = `
       />
     </div>
   </div>
-  <input
-    className={undefined}
+  <div
     id="volume"
-    max="100"
-    min="0"
-    onChange={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    step="1"
     style={
       Object {
         "backgroundPosition": "0 -315px",
       }
     }
-    title="Volume Bar"
-    type="range"
-    value={78}
-  />
+  >
+    <input
+      className={undefined}
+      id={undefined}
+      max="100"
+      min="0"
+      onChange={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      step="1"
+      style={undefined}
+      title="Volume Bar"
+      type="range"
+      value={78}
+    />
+  </div>
   <input
     className={undefined}
     id="balance"
diff --git a/js/skinSelectors.js b/js/skinSelectors.js
index a2e4eb96..866a7aac 100644
--- a/js/skinSelectors.js
+++ b/js/skinSelectors.js
@@ -276,12 +276,12 @@ export const imageSelectors = {
   ],
   MAIN_VOLUME_BACKGROUND: ["#volume"],
   MAIN_VOLUME_THUMB: [
-    "#volume::-webkit-slider-thumb",
-    "#volume::-moz-range-thumb"
+    "#volume input::-webkit-slider-thumb",
+    "#volume input::-moz-range-thumb"
   ],
   MAIN_VOLUME_THUMB_SELECTED: [
-    "#volume::-webkit-slider-thumb:active",
-    "#volume::-moz-range-thumb:active"
+    "#volume input::-webkit-slider-thumb:active",
+    "#volume input::-moz-range-thumb:active"
   ],
   GEN_TOP_CENTER_FILL: [".gen-window .gen-top"],
   GEN_TOP_LEFT: [".gen-window .gen-top-left"],