ui: global hover state on all text inputs + textareas + selects

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) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 10:57:16 +02:00
parent e4db7abc87
commit 49b5e838a8

View File

@ -715,6 +715,21 @@ select:focus {
box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.18); 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 CUSTOM CHECKBOX modern Twitch-purple
============================================ ============================================