/* ========================================================================== Accessibility Toolbar - page-wide override rules ========================================================================== These rules use high-specificity selectors plus !important so they win against arbitrary theme CSS on sites this module was never built for. KNOWN LIMITATION: browsers give inline style="" attributes written directly into page content (e.g. pasted from Word into a WYSIWYG editor) higher priority than !important stylesheet rules. There is no clean CSS fix for this - it's documented in README.md rather than "solved" here. ========================================================================== */ @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Italic.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-BoldItalic.woff2') format('woff2'); font-weight: bold; font-style: italic; font-display: swap; } html.a11y-font body, html.a11y-font body * { font-family: 'OpenDyslexic', sans-serif !important; } html.a11y-spacing body, html.a11y-spacing body * { line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } /* Contrast palette values come from CSS custom properties set inline by mod_a11ytoolbar.php, per module instance/site configuration. Fallback values below only apply if that inline style somehow fails to load. */ html.a11y-contrast body, html.a11y-contrast body *:not(.a11y-toolbar):not(.a11y-toolbar *):not(.a11y-reading-guide-mask) { background-color: var(--a11y-contrast-bg, #000000) !important; color: var(--a11y-contrast-text, #ffffff) !important; border-color: var(--a11y-contrast-border, #ffffff) !important; } html.a11y-contrast body a:not(.a11y-toolbar *), html.a11y-contrast body a:not(.a11y-toolbar *) * { color: var(--a11y-contrast-link, #ffff00) !important; } /* Leave media alone - recoloring/inverting images, video, and icons usually makes things harder to read, not easier. */ html.a11y-contrast body img, html.a11y-contrast body video, html.a11y-contrast body svg, html.a11y-contrast body picture, html.a11y-contrast body iframe { background-color: transparent !important; filter: none !important; } /* Reading overlay: a single warm tint, distinct from High Contrast's stark recolor. JS enforces these two as mutually exclusive since combining them is visually contradictory (see a11ytoolbar.js). */ html.a11y-overlay body, html.a11y-overlay body *:not(.a11y-toolbar):not(.a11y-toolbar *):not(.a11y-reading-guide-mask) { background-color: var(--a11y-overlay-bg, #fdf6e3) !important; } html.a11y-overlay body img, html.a11y-overlay body video, html.a11y-overlay body svg, html.a11y-overlay body picture, html.a11y-overlay body iframe { background-color: transparent !important; } /* Grayscale mode. IMPORTANT: this deliberately filters each element under body individually (`body *`), rather than applying `filter` to `body` or `html` directly. CSS filter creates a new containing block for any position:fixed descendant of the filtered element - which is exactly the bug the floating toolbar had before it was relocated to be a direct child of (see a11ytoolbar.js). Filtering body/html directly here would risk reintroducing that bug, or breaking any of the HOST SITE's own fixed-position elements (sticky headers, cookie banners, chat widgets) if their containing block shifted unexpectedly. Filtering individual elements instead avoids touching body/html's own containing-block status. The residual risk - a site element that is ITSELF both grayscale-matched AND has its own nested fixed-position children - is far narrower and is called out in README.md rather than silently assumed away. */ html.a11y-grayscale body *:not(.a11y-toolbar):not(.a11y-toolbar *) { filter: grayscale(100%) !important; } /* Reading guide: two fixed masks (created/positioned by JS) that follow the pointer, leaving a highlighted band around it. Static appearance only lives here; a11ytoolbar.js owns their position/size on move. */ .a11y-reading-guide-mask { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 999998; display: none; } .a11y-reading-guide-mask--top { top: 0; } .a11y-reading-guide-mask--bottom { bottom: 0; } /* ========================================================================== Widget UI ========================================================================== */ .a11y-toolbar { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.4; box-sizing: border-box; } .a11y-toolbar *, .a11y-toolbar *::before, .a11y-toolbar *::after { box-sizing: inherit; } .a11y-toolbar--floating { position: fixed; z-index: 999999; } .a11y-toolbar--bottom-right { right: 1rem; bottom: 1rem; } .a11y-toolbar--bottom-left { left: 1rem; bottom: 1rem; } .a11y-toolbar--top-right { right: 1rem; top: 1rem; } .a11y-toolbar--top-left { left: 1rem; top: 1rem; } .a11y-toolbar__launcher { width: 44px; height: 44px; border-radius: 50%; border: none; background: #1a1a2e; color: #fff; font-weight: bold; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .a11y-toolbar__launcher:focus-visible, .a11y-toolbar__toggle:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; } .a11y-toolbar__sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .a11y-toolbar__panel { margin-top: 0.5rem; padding: 1rem; background: #ffffff; color: #1a1a1a; border: 1px solid #cccccc; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); min-width: 220px; } .a11y-toolbar--inline .a11y-toolbar__panel { position: static; box-shadow: none; margin-top: 0; } .a11y-toolbar__heading { font-size: 14px; font-weight: bold; margin: 0 0 0.5rem; } .a11y-toolbar__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; border: 1px solid #cccccc; border-radius: 4px; background: #f5f5f5; color: #1a1a1a; cursor: pointer; text-align: left; } .a11y-toolbar__toggle:last-of-type { margin-bottom: 0; } .a11y-toolbar__toggle[aria-pressed="true"] { background: #1a1a2e; color: #ffffff; border-color: #1a1a2e; } .a11y-toolbar__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }