From 336208826893d1e8bd5733113705d4acb4146fcd Mon Sep 17 00:00:00 2001 From: Jonathan Miller Date: Tue, 14 Apr 2026 21:18:43 -0500 Subject: [PATCH] Style a11y button: blue bg, white icon, theme-aware shade MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/media/css/template.css | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/media/css/template.css b/src/media/css/template.css index 1365d55..5c05495 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -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 */