/* ============================================================= DWR Accessibility Overrides Applied via body class — ทำงานกับ hardcoded colors ผ่าน CSS filter ============================================================= */ /* ── Font Size ── */ /* จัดการด้วย JS universal scaler ใน dwr-a11y.js (คูณ computed font-size ทุก element → ครอบ px/rem/clamp/inline ทั้ง frontend) — ไม่ใช้ CSS class scale แล้ว */ /* ── Highlight Headings ── */ body.a11y-highlight-headings h1, body.a11y-highlight-headings h2, body.a11y-highlight-headings h3, body.a11y-highlight-headings h4, body.a11y-highlight-headings h5, body.a11y-highlight-headings h6 { text-decoration: underline !important; text-decoration-color: #2271b1 !important; text-underline-offset: 4px !important; } /* ── Highlight Links ── */ body.a11y-highlight-links a { outline: 2px solid #2271b1 !important; outline-offset: 2px !important; background: #f0f6fc !important; border-radius: 2px !important; } /* ── Dyslexia Font ── */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/fonts/OpenDyslexic-Regular.otf') format('opentype'); font-weight: normal; font-display: swap; } body.a11y-dyslexia, body.a11y-dyslexia * { font-family: 'OpenDyslexic', Arial, sans-serif !important; } /* ── Letter Spacing ── */ body.a11y-letter-spacing, body.a11y-letter-spacing * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } /* ── Line Height ── */ body.a11y-line-height, body.a11y-line-height * { line-height: 1.8 !important; } /* ── Bold Text ── */ body.a11y-bold-text, body.a11y-bold-text p, body.a11y-bold-text li, body.a11y-bold-text span, body.a11y-bold-text td, body.a11y-bold-text div { font-weight: 700 !important; } /* ──────────────────────────────────────────────────────────── Color Themes — CSS filter on element ใช้ filter เพื่อให้ทำงานกับ hardcoded colors ได้ทันที ยกเว้นรูปภาพโดยการ invert กลับสำหรับ dark mode ──────────────────────────────────────────────────────────── */ /* ── Dark Mode ── */ html.a11y-dark { filter: invert(100%) hue-rotate(180deg) !important; } /* รูปภาพและ video — invert กลับให้เป็นปกติ */ html.a11y-dark img, html.a11y-dark video, html.a11y-dark iframe, html.a11y-dark canvas, html.a11y-dark [style*="background-image"] { filter: invert(100%) hue-rotate(180deg) !important; } /* ── Yellow / High Readability Mode ── */ html.a11y-yellow { filter: sepia(40%) saturate(4) hue-rotate(15deg) brightness(1.15) !important; } html.a11y-yellow img, html.a11y-yellow video, html.a11y-yellow iframe { filter: sepia(0) saturate(1) hue-rotate(0deg) brightness(1) !important; } /* ── Light Mode (High brightness) ── */ html.a11y-light { filter: brightness(1.25) contrast(1.1) !important; } /* ── High Contrast ── */ html.a11y-contrast { filter: contrast(2) !important; } /* ── High Saturation ── */ html.a11y-saturate-high { filter: saturate(2) !important; } /* ── Low Saturation ── */ html.a11y-saturate-low { filter: saturate(0.4) !important; } /* ── Grayscale ── */ html.a11y-grayscale { filter: grayscale(100%) !important; } /* ── Pause Animations ── */ body.a11y-no-anim *, body.a11y-no-anim *::before, body.a11y-no-anim *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ── Large Cursor ── */ body.a11y-large-cursor, body.a11y-large-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M8 4 L8 32 L16 24 L22 36 L26 34 L20 22 L30 22 Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 8 4, auto !important; } /* ── TTS highlight ── */ .dwr-a11y-tts-word { background: rgba(34, 113, 177, .25) !important; border-radius: 2px; }