diff --git a/src/media/css/template.css b/src/media/css/template.css index 5b82fc3..1669c78 100644 --- a/src/media/css/template.css +++ b/src/media/css/template.css @@ -17214,25 +17214,24 @@ button#mokoThemeSwitch { width: 28px; height: 28px; border-radius: 50%; - border: 1.5px solid currentColor; + border: 1.5px solid rgba(255,255,255,.6); background: transparent; - color: inherit; + 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); + background: rgba(255,255,255,.2); + border-color: #fff; } .a11y-toggle-inline.active { - opacity: 1; - background: rgba(255,255,255,.25); + background: rgba(255,255,255,.3); + border-color: #fff; } /* Floating a11y panel when inline */ diff --git a/src/media/js/template.js b/src/media/js/template.js index f1fb442..47f1aaf 100644 --- a/src/media/js/template.js +++ b/src/media/js/template.js @@ -292,7 +292,17 @@ toggle.className = "a11y-toggle"; toggle.setAttribute("aria-label", "Accessibility options"); toggle.setAttribute("aria-expanded", "false"); - toggle.appendChild(faIcon("fa-solid fa-universal-access")); + var icon = faIcon("fa-solid fa-universal-access"); + // Unicode fallback if FA7 glyph doesn't render + setTimeout(function () { + var cs = win.getComputedStyle(icon, "::before"); + if (!cs.content || cs.content === "none" || cs.content === '""' || cs.content === '"" / ""') { + icon.className = ""; + icon.textContent = "\u267F"; + icon.style.fontSize = "1.1rem"; + } + }, 500); + toggle.appendChild(icon); // Panel var panel = doc.createElement("div");