[OCaml] High Intensity Training Online
feat theme the keyboard-focus halo
Change the focus halo from bright blue to the oxblood-dark theme colour and reduce the outline from 3px to 2px. The halo now follows the UI theme and is less obtrusive while remaining a visible focus indicator.
Changed files
ENHANCEMENTS.org
@@ -50,7 +50,7 @@
50
50
Do not show a boulder top fieldset border on the exercise logging fieldset card.
51
51
** DONE Increase bottom-navigation button text size
52
52
Increase the bottom-navigation button text font size to better support WCAG-aligned readability.
53
Removed:
** TODO Harmonize keyboard-focus halo styling
53
Added:
** DONE Harmonize keyboard-focus halo styling
54
54
Change the WCAG keyboard-navigation focus halo color so it follows the general UI theme and is less visually obtrusive.
55
55
** TODO Animate page transitions
56
56
Animate page transitions between Home, Current Workout, and Logbook.
lib/web/assets/hito.css
@@ -14,7 +14,7 @@
14
14
--brass-wash: #f4e7c5;
15
15
--evergreen: #1f5b45;
16
16
--evergreen-wash: #dcebe2;
17
Removed:
--focus: #005fcc;
17
Added:
--focus: #65130f;
18
18
--error: #8c201b;
19
19
--font-size-small: 0.875rem;
20
20
--font-size-base: 1rem;
@@ -61,8 +61,8 @@
61
61
input:focus-visible,
62
62
select:focus-visible,
63
63
summary:focus-visible {
64
Removed:
outline: 3px solid var(--focus);
65
Removed:
outline-offset: 3px;
64
Added:
outline: 2px solid var(--focus);
65
Added:
outline-offset: 2px;
66
66
}
67
67
68
68
.app-shell {
@@ -508,8 +508,8 @@
508
508
.skip-link:focus { transform: translateY(0); }
509
509
510
510
main:focus {
511
Removed:
outline: 3px solid var(--focus);
512
Removed:
outline-offset: 0.35rem;
511
Added:
outline: 2px solid var(--focus);
512
Added:
outline-offset: 0.3rem;
513
513
}
514
514
515
515
/* Mobile-first navigation with a single desktop breakpoint at 42.0625rem.