Style a11y button: blue bg, white icon, theme-aware shade
Some checks failed
Repo Health / Access control (push) Failing after 1s
Repo Health / Release configuration (push) Has been skipped
Repo Health / Scripts governance (push) Has been skipped
Repo Health / Repository health (push) Has been skipped

Light mode uses darker blue (#1565c0), dark mode uses lighter blue
(#42a5f5). No hover effect — only active ring when panel is open.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Miller
2026-04-14 21:18:43 -05:00
parent d97ed3bded
commit 3362088268

View File

@@ -17207,6 +17207,15 @@ button#mokoThemeSwitch {
}
/* Inline a11y toggle inside theme FAB */
/* Light mode: darker blue */
:root[data-bs-theme="light"] .a11y-toggle-inline {
--a11y-btn-bg: #1565c0;
}
/* Dark mode: lighter blue */
:root[data-bs-theme="dark"] .a11y-toggle-inline {
--a11y-btn-bg: #42a5f5;
}
.a11y-toggle-inline {
display: flex;
align-items: center;
@@ -17214,25 +17223,16 @@ button#mokoThemeSwitch {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid currentColor;
background: transparent;
color: inherit;
border: none;
background: var(--a11y-btn-bg, #1976d2);
color: #fff;
font-size: 1rem;
cursor: pointer;
padding: 0;
transition: background .2s, color .2s;
opacity: .8;
}
.a11y-toggle-inline:hover,
.a11y-toggle-inline:focus-visible {
opacity: 1;
background: rgba(255,255,255,.15);
}
.a11y-toggle-inline.active {
opacity: 1;
background: rgba(255,255,255,.25);
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--a11y-btn-bg, #1976d2);
}
/* Floating a11y panel when inline */