/* Tiger A11y — self-hosted accessibility widget. RTL, dependency-free. The widget root (#ta11y-root) is appended as a direct child of , OUTSIDE , so every effect rule below (scoped to `body`) never touches the widget itself. */ /* ---------- launcher button ---------- */ #ta11y-root{ all: initial; } #ta11y-launcher{ position: fixed; left: 0; right: auto; top: 160px; z-index: 2147483600; width: 52px; height: 52px; border: none; border-top-right-radius: 10px; border-bottom-right-radius: 10px; background: var(--ta11y-accent, #f26a1b); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.3); padding: 0; font-family: Arimo, Arial, sans-serif; transition: filter .15s; } #ta11y-launcher:hover{ filter: brightness(.9); } /* right-side variant (set via the "ta11y-right" class on #ta11y-root) */ #ta11y-root.ta11y-right #ta11y-launcher{ left: auto; right: 0; border-radius: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } #ta11y-launcher:focus-visible{ outline: 3px solid #1a73e8; outline-offset: 2px; } #ta11y-launcher svg{ width: 30px; height: 30px; fill: currentColor; } /* ---------- panel ---------- */ #ta11y-panel{ position: fixed; left: 0; right: auto; top: 0; bottom: 0; width: 450px; max-width: 90vw; background: #fff; color: #1c2330; z-index: 2147483601; direction: rtl; font-family: Arimo, Arial, sans-serif; font-size: 15px; line-height: 1.4; box-shadow: 0 0 28px rgba(0,0,0,.35); transform: translateX(-105%); transition: transform .22s ease; display: flex; flex-direction: column; overflow: hidden; } #ta11y-root.ta11y-open #ta11y-panel{ transform: translateX(0); } #ta11y-root.ta11y-right #ta11y-panel{ left: auto; right: 0; transform: translateX(105%); } #ta11y-root.ta11y-right.ta11y-open #ta11y-panel{ transform: translateX(0); } #ta11y-panel *{ box-sizing: border-box; font-family: inherit; } #ta11y-head{ display: flex; align-items: center; justify-content: space-between; background: var(--ta11y-accent, #f26a1b); color: #fff; padding: 12px 14px; flex: 0 0 auto; } /* explicit color so the host theme's global h2 rules can't hide the title */ #ta11y-head h2{ margin: 0; font-size: 18px; font-weight: 700; color: #fff; } #ta11y-close{ background: transparent; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; width: 34px; height: 34px; border-radius: 6px; } #ta11y-close:hover{ background: rgba(255,255,255,.15); } #ta11y-close:focus-visible{ outline: 2px solid #fff; outline-offset: 1px; } #ta11y-body{ overflow-y: auto; padding: 10px 12px 16px; flex: 1 1 auto; } .ta11y-group{ margin-top: 14px; } .ta11y-group:first-child{ margin-top: 4px; } .ta11y-group > h3{ margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #6b7280; text-transform: none; border-bottom: 1px solid #eceef2; padding-bottom: 4px; } .ta11y-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ta11y-btn{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1.5px solid #d7dbe2; border-radius: 9px; background: #f7f8fa; color: #1c2330; cursor: pointer; text-align: center; font-size: 13px; min-height: 64px; justify-content: center; transition: .12s; } .ta11y-btn:hover{ border-color: #f26a1b; background: #fff; } .ta11y-btn:focus-visible{ outline: 3px solid #1a73e8; outline-offset: 1px; } .ta11y-btn svg{ width: 22px; height: 22px; fill: currentColor; } .ta11y-btn[aria-pressed="true"]{ background: #1c2330; color: #fff; border-color: #1c2330; } /* stepper rows */ .ta11y-stepper{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; } .ta11y-stepper > .ta11y-lbl{ font-size: 13px; } .ta11y-stepper .ta11y-ctrls{ display: flex; gap: 6px; justify-content: flex-start; } .ta11y-step{ width: 34px; height: 34px; border: 1.5px solid #d7dbe2; border-radius: 8px; background: #f7f8fa; cursor: pointer; font-size: 18px; line-height: 1; color: #1c2330; } .ta11y-step:hover{ border-color: #f26a1b; } .ta11y-step:focus-visible{ outline: 3px solid #1a73e8; } .ta11y-val{ min-width: 46px; text-align: center; font-size: 12px; color: #6b7280; } #ta11y-reset{ width: 100%; margin-top: 16px; padding: 11px; border: none; border-radius: 9px; background: #c0392b; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; } #ta11y-reset:hover{ background: #a5301f; } #ta11y-reset:focus-visible{ outline: 3px solid #1a73e8; outline-offset: 2px; } #ta11y-foot{ flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid #eceef2; font-size: 12px; color: #6b7280; text-align: center; background: #fafbfc; } #ta11y-foot a{ color: #1a73e8; } .ta11y-ver{ margin-top: 5px; font-size: 11px; color: #9aa0aa; } /* reading guide bar (positioned by JS) */ #ta11y-guide{ position: fixed; inset-inline: 0; height: 26px; background: rgba(255, 235, 59, .35); border-top: 2px solid #f26a1b; border-bottom: 2px solid #f26a1b; z-index: 2147483590; pointer-events: none; display: none; } #ta11y-root.ta11y-guide-on #ta11y-guide{ display: block; } /* ===================================================================== EFFECT RULES — scoped under , which now CONTAINS the widget, so the effects also apply to the panel itself (matching Vee). Visual filters are applied at the level (below) to keep fixed positioning intact. ===================================================================== */ /* visual filters: JS composes the combined string into --ta11y-filter and adds .ta11y-fx on . Applied to the whole document (incl. the widget). */ html.ta11y-fx{ filter: var(--ta11y-filter, none); } /* high contrast (forced dark theme) */ html.ta11y-contrast body, html.ta11y-contrast body *{ background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; } html.ta11y-contrast body a, html.ta11y-contrast body a *{ color: #ffea00 !important; } html.ta11y-contrast body img{ filter: none !important; } /* highlight links */ html.ta11y-links body a{ text-decoration: underline !important; outline: 2px solid #ff7a00 !important; outline-offset: 1px; background: #fff7e6 !important; color: #8a4b00 !important; font-weight: 700 !important; } /* highlight headings */ html.ta11y-headings body :is(h1,h2,h3,h4,h5,h6){ outline: 2px dashed #1a73e8 !important; outline-offset: 2px; background: #eef4ff !important; } /* readable font */ html.ta11y-readable body, html.ta11y-readable body *{ font-family: Arimo, Arial, "Helvetica Neue", sans-serif !important; letter-spacing: .2px; line-height: 1.7 !important; } /* hide images */ html.ta11y-noimg body :is(img,picture,svg:not(#ta11y-root svg),video){ visibility: hidden !important; } html.ta11y-noimg body *{ background-image: none !important; } /* stop animations */ html.ta11y-noanim body *, html.ta11y-noanim body *::before, html.ta11y-noanim body *::after{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* screen-reader simplified layout: strip decoration, force readable colors */ html.ta11y-srmode body *{ background-image: none !important; box-shadow: none !important; text-shadow: none !important; } html.ta11y-srmode body :is(a,button):focus{ outline: 3px solid #1a73e8 !important; } /* text scale & spacing: JS sets the CSS variables; spacing applies broadly, font scale is applied inline by JS per element (px-safe). */ html.ta11y-spacing body *{ letter-spacing: var(--ta11y-letter, 0) !important; word-spacing: var(--ta11y-word, 0) !important; } /* big cursors (data-URI SVGs) */ html.ta11y-cursor-dark body, html.ta11y-cursor-dark body *{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8-6 1 3 7-3 1-3-7-5 4z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important; } html.ta11y-cursor-light body, html.ta11y-cursor-light body *{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8-6 1 3 7-3 1-3-7-5 4z' fill='%23fff' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important; } /* TTS read-mode hint */ html.ta11y-tts body *{ cursor: help; } .ta11y-tts-reading{ outline: 3px solid #f26a1b !important; background: #fff7e6 !important; } /* responsive */ @media (max-width: 480px){ #ta11y-panel{ width: 300px; } }