Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

ui: .filter-input hover state — soft accent border on mouseover

Browse Source 
Continuing the hover-state pass from 4.6.140 (.select-compact). The .filter-input class (used by the VOD filter, sidebar streamer-list filter, and archive search input) had no :hover state — text inputs in the app gave no mouseover affordance, only a focus ring after click.

Added a :hover:not(:focus):not(:disabled) rule that softens the border to the same purple-accent half-tone used by .select-compact's hover. The :not(:focus) guard prevents the hover from competing with the global input:focus ring (which sets a darker accent + halo); the :not(:disabled) keeps it consistent with the .select-compact pattern.

The existing transition rule on all text inputs (line 661) covers the animation — no additional change needed there.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 10:52:13 +02:00
parent 2851d5b8d6
commit 9de2df527a
1 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/styles.css
View File

@ -472,6 +472,10 @@ body {
font-size: 13px; font-size: 13px;
} }
.filter-input:hover:not(:focus):not(:disabled) {
border-color: rgba(145, 70, 255, 0.45);
}
.filter-input.compact { .filter-input.compact {
width: calc(100% - 16px); width: calc(100% - 16px);
margin: 0 8px 8px; margin: 0 8px 8px;