Horizontal42/summarum
1
0
Fork 0
mirror of https://github.com/Horizontal42/summarum.git synced 2026-11-11 01:02:01 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

design: keyboard focus ring on form fields

Browse source 
Doc title, search input, and settings inputs/selects either zeroed
out the default outline or never set one — Tab-only navigation had
no visible indicator of what's focused. :focus-visible keeps mouse
clicks silent and only rings for keyboard focus.
This commit is contained in:
Horizontal42 2026-07-03 12:34:27 +03:00
parent ec8b2f6448
commit 4302f7025c
1 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/ui/app.css
View file

@ -59,6 +59,16 @@ button, .doc-item, .search-item, #rates-info, #total-line {
::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); } ::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
/* keyboard-only focus ring (mouse clicks don't trigger :focus-visible) on the
form fields that otherwise zero out — or never set — a visible outline */
#doc-title:focus-visible,
#search-input:focus-visible,
#settings-panel input:focus-visible,
#settings-panel select:focus-visible,
.path-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
html, body { margin: 0; height: 100%; } html, body { margin: 0; height: 100%; }
body { body {
font-family: var(--font); font-family: var(--font);