Make input 3px shorter

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;

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 => ({

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"

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"],