/** * ThunderSpace — Accessibility Widget * Part 1: Widget UI styles * Part 2: Accessibility effect classes (applied to ) */ /* ========================================================================= PART 1 — WIDGET UI ========================================================================= */ /* ── Container ─────────────────────────────────────────────────────────── */ #ts-a11y-widget { position: fixed; z-index: 9999999; bottom: 24px; right: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.4; color: #111; } #ts-a11y-widget[data-pos="bottom_left"] { right: auto; left: 24px; } /* ── Center positions ─────────────────────────────────────────────────── */ #ts-a11y-widget[data-pos="center_right"] { right: 0; bottom: auto; top: 50%; transform: translateY(-50%); } #ts-a11y-widget[data-pos="center_left"] { left: 0; right: auto; bottom: auto; top: 50%; transform: translateY(-50%); } /* ── Toggle button ─────────────────────────────────────────────────────── */ #ts-a11y-btn { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--ts-a11y-accent, #2563eb); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform .15s, box-shadow .15s; outline-offset: 3px; position: relative; z-index: 2; } /* Tab shape for center positions */ #ts-a11y-widget[data-pos="center_right"] #ts-a11y-btn { border-radius: 10px 0 0 10px; } #ts-a11y-widget[data-pos="center_left"] #ts-a11y-btn { border-radius: 0 10px 10px 0; } #ts-a11y-btn:hover, #ts-a11y-btn:focus-visible { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,.32); } #ts-a11y-btn:focus-visible { outline: 3px solid var(--ts-a11y-accent, #2563eb); outline-offset: 4px; } /* ── Panel ─────────────────────────────────────────────────────────────── */ #ts-a11y-panel { position: absolute; bottom: calc(100% + 12px); right: 0; width: 300px; max-height: 85vh; background: #fff; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } #ts-a11y-widget[data-pos="bottom_left"] #ts-a11y-panel { right: auto; left: 0; } /* Center-right: panel opens to the left, centered at wrapper's visual midpoint. top:0 (not top:50%) because the wrapper itself already has transform:translateY(-50%), so the panel's absolute top:0 aligns with the wrapper's layout origin = visual center. */ #ts-a11y-widget[data-pos="center_right"] #ts-a11y-panel { right: calc(100% + 8px); bottom: auto; top: 0; transform: translateY(-50%) translateX(14px) scale(0.97); opacity: 0; } #ts-a11y-widget[data-pos="center_right"] #ts-a11y-panel.ts-open { transform: translateY(-50%) translateX(0) scale(1); opacity: 1; } /* Center-left: panel opens to the right */ #ts-a11y-widget[data-pos="center_left"] #ts-a11y-panel { left: calc(100% + 8px); right: auto; bottom: auto; top: 0; transform: translateY(-50%) translateX(-14px) scale(0.97); opacity: 0; } #ts-a11y-widget[data-pos="center_left"] #ts-a11y-panel.ts-open { transform: translateY(-50%) translateX(0) scale(1); opacity: 1; } #ts-a11y-panel.ts-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* ── Panel header ──────────────────────────────────────────────────────── */ .ts-a11y-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid #eee; background: #fff; flex-shrink: 0; } .ts-a11y-title { font-weight: 600; font-size: 14px; color: #111; } .ts-a11y-close-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: #555; cursor: pointer; padding: 0; } .ts-a11y-close-btn:hover { background: #f3f4f6; color: #111; } .ts-a11y-close-btn:focus-visible { outline: 2px solid var(--ts-a11y-accent, #2563eb); outline-offset: 2px; } /* ── Panel body (scrollable) ───────────────────────────────────────────── */ .ts-a11y-body { overflow-y: auto; padding: 8px 0 4px; flex: 1 1 auto; } .ts-a11y-section { padding: 10px 16px; border-bottom: 1px solid #f3f4f6; } .ts-a11y-section:last-child { border-bottom: none; } .ts-a11y-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #888; margin-bottom: 10px; } /* ── Text scale row ────────────────────────────────────────────────────── */ .ts-a11y-scale-row { display: flex; align-items: center; gap: 10px; } .ts-a11y-scale-btn { flex: 0 0 auto; width: 44px; height: 36px; border: 1.5px solid #ddd; border-radius: 8px; background: #f9fafb; color: #333; cursor: pointer; font-weight: 700; font-size: 13px; transition: background .12s, border-color .12s; } .ts-a11y-scale-btn:hover { background: #f3f4f6; border-color: #bbb; } .ts-a11y-scale-btn:focus-visible { outline: 2px solid var(--ts-a11y-accent, #2563eb); outline-offset: 2px; } .ts-a11y-scale-val { flex: 1 1 auto; text-align: center; font-weight: 600; font-size: 15px; color: #111; display: block; } /* ── Button groups (contrast / font / cursor) ──────────────────────────── */ .ts-a11y-btn-group { display: flex; flex-wrap: wrap; gap: 6px; } .ts-a11y-contrast-btn, .ts-a11y-font-btn, .ts-a11y-cursor-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 8px; border: 1.5px solid #ddd; border-radius: 8px; background: #f9fafb; color: #333; cursor: pointer; font-size: 11px; font-weight: 500; transition: background .12s, border-color .12s; min-width: 52px; } .ts-a11y-contrast-btn:hover, .ts-a11y-font-btn:hover, .ts-a11y-cursor-btn:hover { background: #f3f4f6; border-color: #bbb; } .ts-a11y-contrast-btn.ts-active, .ts-a11y-font-btn.ts-active, .ts-a11y-cursor-btn.ts-active { background: var(--ts-a11y-accent, #2563eb); border-color: var(--ts-a11y-accent, #2563eb); color: #fff; } .ts-a11y-contrast-btn:focus-visible, .ts-a11y-font-btn:focus-visible, .ts-a11y-cursor-btn:focus-visible { outline: 2px solid var(--ts-a11y-accent, #2563eb); outline-offset: 2px; } /* Contrast group: grid 3 colonne → riga 1: 3 bottoni, riga 2: 2 bottoni, tutti di ugual larghezza */ .ts-a11y-contrast-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ts-a11y-contrast-btn { min-width: 0; padding: 7px 5px; } .ts-a11y-btn-lbl { font-size: 10px; white-space: normal; text-align: center; line-height: 1.25; /* Riserva spazio per 2 righe: tutti i bottoni restano alla stessa altezza */ min-height: 2.5em; display: flex; align-items: center; justify-content: center; } /* Contrast colour swatches */ .ts-a11y-swatch { display: block; width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; } .ts-a11y-sw-normal { background: linear-gradient(135deg, #fff 50%, #333 50%); } .ts-a11y-sw-bw { background: #fff; border: 1.5px solid #000; } .ts-a11y-sw-yb { background: #000; border: 1.5px solid #ff0; } .ts-a11y-sw-gray { background: #888; } .ts-a11y-sw-invert { background: linear-gradient(135deg, #1a3c6e 50%, #fff 50%); } /* Font group: a bit wider */ .ts-a11y-font-group { flex-wrap: nowrap; } .ts-a11y-font-btn { flex: 1 1 0; flex-direction: row; gap: 4px; font-size: 12px; min-width: 0; } /* Font samples in buttons reflect the font style */ .ts-a11y-font-sample-readable { font-family: Arial, Verdana, 'Helvetica Neue', sans-serif !important; } .ts-a11y-font-sample-dyslexic { font-family: OpenDyslexic, Verdana, Arial, sans-serif !important; } /* Cursor buttons: column layout with SVG icon */ .ts-a11y-cursor-btn { flex-direction: column !important; gap: 4px !important; min-width: 68px; padding: 8px 6px; } .ts-a11y-cursor-btn svg { display: block; margin: 0 auto; flex-shrink: 0; } /* Keep SVG fills readable on active (blue) state */ .ts-a11y-cursor-btn.ts-active svg path[fill="currentColor"] { fill: #fff; } .ts-a11y-cursor-btn span { font-size: 11px; white-space: nowrap; } /* ── Toggle switches ───────────────────────────────────────────────────── */ .ts-a11y-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; gap: 12px; } .ts-a11y-toggle-label { font-size: 13px; color: #222; flex: 1 1 auto; } .ts-a11y-toggle { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 12px; border: none; background: #ccc; cursor: pointer; padding: 0; position: relative; transition: background .2s; } .ts-a11y-toggle.ts-active { background: var(--ts-a11y-accent, #2563eb); } .ts-a11y-toggle:focus-visible { outline: 2px solid var(--ts-a11y-accent, #2563eb); outline-offset: 3px; } .ts-a11y-toggle-track { display: block; width: 100%; height: 100%; border-radius: 12px; } .ts-a11y-toggle-thumb { display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); position: absolute; top: 3px; left: 3px; transition: transform .2s; } .ts-a11y-toggle.ts-active .ts-a11y-toggle-thumb { transform: translateX(18px); } /* ── Footer ────────────────────────────────────────────────────────────── */ .ts-a11y-footer { padding: 10px 16px 14px; border-top: 1px solid #eee; background: #fff; flex-shrink: 0; } .ts-a11y-reset-btn { width: 100%; padding: 8px; border: 1.5px solid #ddd; border-radius: 8px; background: #f9fafb; color: #555; cursor: pointer; font-size: 12px; font-weight: 500; transition: background .12s, border-color .12s; } .ts-a11y-reset-btn:hover { background: #f3f4f6; border-color: #bbb; color: #111; } .ts-a11y-reset-btn:focus-visible { outline: 2px solid var(--ts-a11y-accent, #2563eb); outline-offset: 2px; } /* ── Reading guide ─────────────────────────────────────────────────────── */ #ts-a11y-guide { position: fixed; left: 0; right: 0; height: 2.5em; transform: translateY(-50%); background: rgba(255, 220, 50, .15); border-top: 2px solid rgba(220, 180, 0, .4); border-bottom: 2px solid rgba(220, 180, 0, .4); pointer-events: none; z-index: 9999998; display: none; } /* ========================================================================= PART 2 — ACCESSIBILITY EFFECT CLASSES (applied to ) ========================================================================= */ /* ── Text scaling ──────────────────────────────────────────────────────── */ /* Works for themes/modules that use rem units. The Typography module's rem-based font sizes scale correctly. */ .ts-a11y-text-1 { font-size: 110% !important; } .ts-a11y-text-2 { font-size: 125% !important; } .ts-a11y-text-3 { font-size: 150% !important; } .ts-a11y-text-4 { font-size: 175% !important; } .ts-a11y-text-5 { font-size: 200% !important; } /* ── High contrast — Black / White ────────────────────────────────────── */ .ts-a11y-contrast-bw body, .ts-a11y-contrast-bw body * { color: #1a1a1a !important; background-color: #ffffff !important; background-image: none !important; border-color: #555555 !important; box-shadow: none !important; text-shadow: none !important; } .ts-a11y-contrast-bw body a, .ts-a11y-contrast-bw body a * { color: #0000cc !important; } .ts-a11y-contrast-bw body a:visited, .ts-a11y-contrast-bw body a:visited * { color: #551a8b !important; } /* Keep images / media unaffected */ .ts-a11y-contrast-bw body img, .ts-a11y-contrast-bw body video, .ts-a11y-contrast-bw body canvas, .ts-a11y-contrast-bw body svg { background-color: transparent !important; } /* Widget in BW mode */ .ts-a11y-contrast-bw body #ts-a11y-btn { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; } .ts-a11y-contrast-bw body #ts-a11y-panel { background-color: #fff !important; color: #1a1a1a !important; border: 2px solid #000 !important; box-shadow: 0 4px 20px rgba(0,0,0,.4) !important; } .ts-a11y-contrast-bw body #ts-a11y-panel .ts-active { background-color: #1a1a1a !important; color: #fff !important; border-color: #1a1a1a !important; } .ts-a11y-contrast-bw body #ts-a11y-panel .ts-a11y-toggle.ts-active { background-color: #000 !important; } /* ── High contrast — Yellow / Black ──────────────────────────────────── */ .ts-a11y-contrast-yb body, .ts-a11y-contrast-yb body * { color: #ffff00 !important; background-color: #000000 !important; background-image: none !important; border-color: #ffff00 !important; box-shadow: none !important; text-shadow: none !important; } .ts-a11y-contrast-yb body a, .ts-a11y-contrast-yb body a * { color: #ffee00 !important; text-decoration: underline !important; } .ts-a11y-contrast-yb body img, .ts-a11y-contrast-yb body video { background-color: transparent !important; } /* Widget in YB mode */ .ts-a11y-contrast-yb body #ts-a11y-btn { background-color: #ffff00 !important; color: #000 !important; border: 2px solid #000 !important; } .ts-a11y-contrast-yb body #ts-a11y-panel { background-color: #000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; box-shadow: 0 4px 20px rgba(255,255,0,.2) !important; } .ts-a11y-contrast-yb body #ts-a11y-panel .ts-a11y-section-label { color: #cccc00 !important; } .ts-a11y-contrast-yb body #ts-a11y-panel .ts-a11y-toggle { background: #444 !important; } .ts-a11y-contrast-yb body #ts-a11y-panel .ts-active, .ts-a11y-contrast-yb body #ts-a11y-panel .ts-a11y-toggle.ts-active { background-color: #ffff00 !important; color: #000 !important; border-color: #000 !important; } .ts-a11y-contrast-yb body #ts-a11y-panel .ts-a11y-toggle.ts-active .ts-a11y-toggle-thumb { background-color: #000 !important; } /* ── Filter overlay (grayscale / invert) ──────────────────────────────── Uses a separate element with backdrop-filter so that position:fixed widgets (like #ts-a11y-widget itself) are NOT inside the filtered ancestor and retain correct viewport-relative positioning. backdrop-filter applies the visual effect to everything rendered BEHIND the overlay; the widget sits ABOVE it (z-index 9999999). */ #ts-a11y-filter-overlay { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 9999997; } .ts-a11y-contrast-gray #ts-a11y-filter-overlay { display: block; -webkit-backdrop-filter: grayscale(100%); backdrop-filter: grayscale(100%); } .ts-a11y-contrast-invert #ts-a11y-filter-overlay { display: block; -webkit-backdrop-filter: invert(100%) hue-rotate(180deg); backdrop-filter: invert(100%) hue-rotate(180deg); } /* ── Font — High readability (Arial/Verdana stack) ─────────────────────── */ /* Overrides CSS custom properties set by the Branding > Typography module by applying !important on the resolved font-family at element level. */ .ts-a11y-font-readable body, .ts-a11y-font-readable body * { font-family: Arial, Verdana, 'Helvetica Neue', sans-serif !important; } /* ── Font — Dyslexia-friendly ──────────────────────────────────────────── */ /* OpenDyslexic can be added via Branding > Font > Local Fonts. Falls back to Verdana which shares similar spacing characteristics. */ .ts-a11y-font-dyslexic body, .ts-a11y-font-dyslexic body * { font-family: OpenDyslexic, Verdana, Arial, sans-serif !important; } /* ── Text spacing ──────────────────────────────────────────────────────── */ .ts-a11y-spacing body *:not(#ts-a11y-widget):not(#ts-a11y-widget *) { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; line-height: 1.8 !important; } /* ── Link highlighting ─────────────────────────────────────────────────── */ .ts-a11y-highlight-links body a:not(#ts-a11y-widget *) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; outline: 2px solid currentColor !important; outline-offset: 2px !important; border-radius: 2px !important; } /* ── Enlarged cursor — White ───────────────────────────────────────────── */ /* 36×36 arrow, hotspot at pointer tip (4,3) */ .ts-a11y-cursor-white, .ts-a11y-cursor-white * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M4 3 L4 27 L10 21 L14 30 L17 28.5 L13 19.5 L21 19.5 Z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, default !important; } /* ── Enlarged cursor — Black ───────────────────────────────────────────── */ .ts-a11y-cursor-black, .ts-a11y-cursor-black * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M4 3 L4 27 L10 21 L14 30 L17 28.5 L13 19.5 L21 19.5 Z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, default !important; } /* ── Disable animations ────────────────────────────────────────────────── */ .ts-a11y-no-animations *, .ts-a11y-no-animations *::before, .ts-a11y-no-animations *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Preserve essential widget transitions */ .ts-a11y-no-animations #ts-a11y-panel { transition: opacity .18s ease, transform .18s ease !important; }