From 227c4bdf82e1159bd0a64dff29bd23964800ff09 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 01:31:29 +0200
Subject: [PATCH] feat: range slider repaint + number input spinner cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two leftover form-control oddities from the audit.

Range sliders (used in the clip-cutter modal and any future
slider-group settings) had a stale orange thumb colour (#E5A00D) from
when the app was a different shade of Twitch. Reskinned to the
current purple family: track gets a subtle purple-to-dark gradient
that visually echoes the queue progress bar, thumb is a 16px purple
circle with a 2px white border and a soft shadow, hover scales the
thumb 1.15x and turns the shadow into a purple halo for the "I can
grab this" affordance. Focus-visible adds the same 3px purple ring
the rest of the form controls use, so keyboard tabbing through a
modal lands on a clearly-focused slider. Mirrored ::-moz-range-thumb
+ ::-webkit-slider-thumb so Firefox and Chromium-Electron look
identical.

Number inputs got the OS spinner stack hidden globally
(::-webkit-inner-spin-button / outer + -moz-appearance: textfield).
The default Webkit spinners are a tiny gray arrow pair that always
reads as "unfinished" and clutter the look. Users still get keyboard
arrow keys + wheel scroll. If a custom spinner pattern is needed
later it can come back as a chrome around the input — for now the
inputs read clean as text fields.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/styles.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 5 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index c5f9dac..39395c3 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2179,28 +2179,86 @@ body.theme-light .modal {
     font-size: 13px;
 }
 
+/* ============================================
+   RANGE SLIDER — Twitch-purple track + thumb
+   ============================================
+   Track gets a subtle purple-tint behind a darker base so the slider
+   reads as part of the same family as the queue progress bar. Thumb
+   is a 16px purple circle with a hover halo. */
 .slider-group input[type="range"],
 .modal input[type="range"] {
     width: 100%;
     height: 6px;
     -webkit-appearance: none;
-    background: #1a1a1a;
-    border-radius: 3px;
+    appearance: none;
+    background: linear-gradient(90deg, rgba(145, 70, 255, 0.18) 0%, rgba(20, 20, 24, 0.95) 100%);
+    border-radius: 999px;
     outline: none;
+    cursor: pointer;
+    transition: box-shadow 0.18s;
+}
+
+.slider-group input[type="range"]:focus-visible,
+.modal input[type="range"]:focus-visible {
+    box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.22);
 }
 
 .slider-group input[type="range"]::-webkit-slider-thumb,
 .modal input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
+    appearance: none;
     width: 16px;
     height: 16px;
-    background: #E5A00D;
+    background: var(--accent);
+    border: 2px solid #fff;
     border-radius: 50%;
     cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+    transition: transform 0.15s, box-shadow 0.15s;
 }
 
-.modal input[type="range"]::-webkit-slider-thumb:hover {
-    background: #ffb825;
+.slider-group input[type="range"]::-moz-range-thumb,
+.modal input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: var(--accent);
+    border: 2px solid #fff;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+    transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.slider-group input[type="range"]:hover::-webkit-slider-thumb,
+.modal input[type="range"]:hover::-webkit-slider-thumb {
+    background: var(--accent-hover);
+    transform: scale(1.15);
+    box-shadow: 0 3px 12px rgba(145, 70, 255, 0.55);
+}
+
+.slider-group input[type="range"]:hover::-moz-range-thumb,
+.modal input[type="range"]:hover::-moz-range-thumb {
+    background: var(--accent-hover);
+    transform: scale(1.15);
+    box-shadow: 0 3px 12px rgba(145, 70, 255, 0.55);
+}
+
+/* ============================================
+   NUMBER INPUT — hide OS spinners, rely on keyboard / scroll
+   ============================================
+   The default Webkit spinners are a tiny gray arrow stack that always
+   reads as "unfinished input field" no matter the theme. Hidden across
+   all number inputs; users type or use arrow keys. Spinner-on-hover
+   pattern could come back as a custom thing later if needed. */
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
 }
 
 .clip-time-display {