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:
parent
e4db7abc87
commit
49b5e838a8
@ -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
|
||||||
============================================
|
============================================
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user