Style a11y button: blue bg, white icon, theme-aware shade
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:
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user