From 49b5e838a863dd2db24b95ce6ca95a4e5e3d7475 Mon Sep 17 00:00:00 2001 From: xRangerDE Date: Mon, 11 May 2026 10:57:16 +0200 Subject: [PATCH] ui: global hover state on all text inputs + textareas + selects MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Following the .select-compact (4.6.140) and .filter-input (4.6.141) hover passes, the global text-input rule block now gets a matching mouseover affordance for every input type the app uses: - input[type="text" / "search" / "number" / "password" / "email"] - textarea - select A single :hover:not(:focus):not(:disabled) rule sets a soft purple-accent border (the same rgba(145,70,255,0.45) used by the per-class hovers). The :not(:focus) guard keeps the existing focus ring (the next rule above) from being downgraded when the user hovers a focused input; :not(:disabled) leaves read-only / disabled inputs inert. Every text-shaped form control in the app — clip URL, Twitch client-id/secret, discord webhook, filename templates, all Settings number fields — now has a consistent hover affordance. The .select-compact and .filter-input rules from the previous two iterations are now redundant for the hover (the global rule covers them) but kept for the explicit declaration since they may diverge later. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/styles.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/styles.css b/src/styles.css index bd92a92..8d3b838 100644 --- a/src/styles.css +++ b/src/styles.css @@ -715,6 +715,21 @@ select:focus { box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.18); } +/* Soft mouseover affordance — every text/search/number/etc. input + textarea + + select picks up a half-tone accent border on hover, matching the + .select-compact + .filter-input hover pattern. :not(:focus) keeps the + focus ring (above) from competing, :not(:disabled) leaves disabled + inputs inert. */ +input[type="text"]:hover:not(:focus):not(:disabled), +input[type="search"]:hover:not(:focus):not(:disabled), +input[type="number"]:hover:not(:focus):not(:disabled), +input[type="password"]:hover:not(:focus):not(:disabled), +input[type="email"]:hover:not(:focus):not(:disabled), +textarea:hover:not(:focus):not(:disabled), +select:hover:not(:focus):not(:disabled) { + border-color: rgba(145, 70, 255, 0.45); +} + /* ============================================ CUSTOM CHECKBOX — modern Twitch-purple ============================================