/* UniBuilder accessibility — ГОСТ Р 52872 «версия для слабовидящих». * * АРХИТЕКТУРА = ГИБРИД: * - blanket !important под html.ub-a11y-scheme-* = НЕСУЩИЙ механизм (форс fg/bg/border/ * link site-wide, нейтрализация градиентов/теней) — перекрывает 145 хардкод-hex шаблонов. * - ребайнд токенов (:root vars) = ВТОРИЧНЫЙ бонус для токенизированных зон. * Классы на ставит js/accessibility.js. Триггер = .ub-a11y-btn (эмиссия HTMLGenerator). * * Контраст schemes (формула ГОСТ (L1+.05)/(L2+.05)), все ≥7:1: * bw text/bg 21.0 link/bg 11.2 | wb text/bg 21.0 link/bg 19.6 * blue text/bg 11.1 link/bg 8.8 | beige text/bg 10.3 link/bg 8.4 * * Панель стилизована через #ub-accessibility-panel (id-специфичность 1,0,x) → переживает * blanket-схему (0,1,x) без !important-войн; панель не ломается ни в одной схеме. */ /* ============================ ТРИГГЕР (.ub-a11y-btn) ============================ */ .ub-a11y-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; vertical-align: middle; transition: background .15s ease; } .ub-a11y-btn:hover { background: rgba(0,0,0,.08); } .ub-a11y-btn .ub-a11y-icon { width: 28px; height: 18px; } /* ============================ ПАНЕЛЬ (id-специфичность) ======================== */ #ub-accessibility-panel.ub-a11y-panel { position: fixed; top: 0; right: 0; z-index: 2147483000; width: 320px; max-width: 92vw; height: 100vh; overflow-y: auto; background: #1b1b1b !important; color: #fff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; line-height: 1.4 !important; letter-spacing: normal !important; box-shadow: -4px 0 24px rgba(0,0,0,.45); transform: translateX(100%); transition: transform .25s ease; } #ub-accessibility-panel.ub-a11y-panel.open { transform: translateX(0); } #ub-accessibility-panel * { letter-spacing: normal !important; box-shadow: none !important; } #ub-accessibility-panel .ub-a11y-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: #000 !important; border-bottom: 1px solid #444; } #ub-accessibility-panel .ub-a11y-panel-title { font-size: 17px !important; font-weight: 700; color: #fff !important; } #ub-accessibility-panel .ub-a11y-close { width: 32px; height: 32px; border: 1px solid #666; border-radius: 6px; background: transparent !important; color: #fff !important; font-size: 22px; line-height: 1; cursor: pointer; } #ub-accessibility-panel .ub-a11y-close:hover { background: #333 !important; } #ub-accessibility-panel .ub-a11y-panel-content { padding: 14px 18px 28px; } #ub-accessibility-panel .ub-a11y-section { margin-bottom: 18px; } #ub-accessibility-panel .ub-a11y-label { font-size: 13px !important; color: #bdbdbd !important; margin-bottom: 8px; } #ub-accessibility-panel .ub-a11y-buttons { display: flex; flex-wrap: wrap; gap: 8px; } #ub-accessibility-panel .ub-a11y-buttons button { min-width: 48px; min-height: 44px; padding: 6px 12px; border: 2px solid #555 !important; border-radius: 8px; background: #2a2a2a !important; color: #fff !important; font-size: 16px !important; font-family: inherit !important; cursor: pointer; transition: border-color .12s, background .12s; } #ub-accessibility-panel .ub-a11y-buttons button:hover { background: #3a3a3a !important; border-color: #888 !important; } #ub-accessibility-panel .ub-a11y-buttons button.active { border-color: #FFD400 !important; background: #000 !important; color: #FFD400 !important; } /* превью цвет-схем на кнопках-свотчах */ #ub-accessibility-panel .ub-a11y-sw { font-weight: 700; } #ub-accessibility-panel .ub-a11y-sw-default { background: linear-gradient(135deg,var(--p,#7C3AED),var(--a,#EC4899)) !important; color: #fff !important; border-color: var(--p,#7C3AED) !important; } /* [z1a A10] свотч следует теме */ #ub-accessibility-panel .ub-a11y-sw-bw { background: #fff !important; color: #000 !important; border-color: #000 !important; } #ub-accessibility-panel .ub-a11y-sw-wb { background: #000 !important; color: #fff !important; border-color: #fff !important; } #ub-accessibility-panel .ub-a11y-sw-blue { background: #C5E2FF !important; color: #00284D !important; border-color: #00284D !important; } #ub-accessibility-panel .ub-a11y-sw-beige { background: #F7F3D6 !important; color: #4A3600 !important; border-color: #4A3600 !important; } #ub-accessibility-panel .ub-a11y-sw.active { outline: 3px solid #FFD400; outline-offset: 1px; } #ub-accessibility-panel .ub-a11y-reset .ub-a11y-buttons { flex-direction: column; } #ub-accessibility-panel .ub-a11y-reset button { width: 100%; } #ub-accessibility-panel .ub-a11y-normal-btn { background: #0a5d28 !important; border-color: #0a5d28 !important; } /* ============================ КОНТРОЛЫ (на ) ============================ */ /* Размер шрифта — :root font-size (масштабирует rem/em-текст; px-хардкод см. долг 9f). */ html.ub-a11y-font-small { font-size: 100%; } html.ub-a11y-font-medium { font-size: 125%; } html.ub-a11y-font-large { font-size: 150%; } /* Межбуквенный */ html.ub-a11y-spacing-medium body * { letter-spacing: 0.05em !important; } html.ub-a11y-spacing-large body * { letter-spacing: 0.10em !important; } /* Межстрочный */ html.ub-a11y-line-medium body * { line-height: 1.8 !important; } html.ub-a11y-line-large body * { line-height: 2.1 !important; } /* Семейство шрифта */ html.ub-a11y-font-serif body * { font-family: Georgia, 'Times New Roman', serif !important; } html.ub-a11y-font-sans-serif body * { font-family: Arial, Helvetica, sans-serif !important; } /* Скрыть изображения (контент; UI/SVG-иконки панели не трогаем — у панели нет ) */ html.ub-a11y-hide-images img, html.ub-a11y-hide-images picture, html.ub-a11y-hide-images video { display: none !important; } html.ub-a11y-hide-images [style*="background-image"] { background-image: none !important; } /* Контролы НЕ должны искажать саму панель (id-специфичность уже защищает, дублируем явно) */ #ub-accessibility-panel.ub-a11y-panel, #ub-accessibility-panel.ub-a11y-panel * { line-height: 1.4 !important; font-family: Arial, Helvetica, sans-serif !important; } /* ====================== СХЕМЫ: РЕБАЙНД ТОКЕНОВ (вторичный) ===================== */ /* Флипает токенизированные зоны (--p/--a/--n*/--bg/градиенты/тёмные); blanket добивает остальное. */ html.ub-a11y-scheme-bw { --p:#000;--ph:#000;--pl:#fff;--p50:#fff;--a:#000;--ah:#000;--al:#fff;--bg:#fff; --n50:#fff;--n100:#fff;--n200:#000;--n300:#000;--n400:#000;--n500:#000;--n600:#000;--n700:#000;--n800:#000;--n900:#000; --ok:#000;--wrn:#000;--err:#000;--inf:#000; --gp:#000;--gd:#fff;--gh:#fff;--dk:#fff;--dc:#fff;--ds:#fff; } html.ub-a11y-scheme-wb { --p:#fff;--ph:#fff;--pl:#000;--p50:#000;--a:#FFFF00;--ah:#FFFF00;--al:#000;--bg:#000; --n50:#000;--n100:#000;--n200:#fff;--n300:#fff;--n400:#fff;--n500:#fff;--n600:#fff;--n700:#fff;--n800:#fff;--n900:#fff; --ok:#fff;--wrn:#fff;--err:#fff;--inf:#fff; --gp:#fff;--gd:#000;--gh:#000;--dk:#000;--dc:#000;--ds:#000; } html.ub-a11y-scheme-blue { --p:#00284D;--ph:#00284D;--pl:#C5E2FF;--p50:#C5E2FF;--a:#003380;--ah:#003380;--al:#C5E2FF;--bg:#C5E2FF; --n50:#C5E2FF;--n100:#C5E2FF;--n200:#00284D;--n300:#00284D;--n400:#00284D;--n500:#00284D;--n600:#00284D;--n700:#00284D;--n800:#00284D;--n900:#00284D; --ok:#00284D;--wrn:#00284D;--err:#00284D;--inf:#00284D; --gp:#00284D;--gd:#C5E2FF;--gh:#C5E2FF;--dk:#C5E2FF;--dc:#C5E2FF;--ds:#C5E2FF; } html.ub-a11y-scheme-beige { --p:#4A3600;--ph:#4A3600;--pl:#F7F3D6;--p50:#F7F3D6;--a:#6B3A00;--ah:#6B3A00;--al:#F7F3D6;--bg:#F7F3D6; --n50:#F7F3D6;--n100:#F7F3D6;--n200:#4A3600;--n300:#4A3600;--n400:#4A3600;--n500:#4A3600;--n600:#4A3600;--n700:#4A3600;--n800:#4A3600;--n900:#4A3600; --ok:#4A3600;--wrn:#4A3600;--err:#4A3600;--inf:#4A3600; --gp:#4A3600;--gd:#F7F3D6;--gh:#F7F3D6;--dk:#F7F3D6;--dc:#F7F3D6;--ds:#F7F3D6; } /* ====================== СХЕМЫ: BLANKET !important (несущий) ==================== */ /* Сел.-веса: html.scheme * = (0,1,1); html.scheme button|a = (0,1,2); #panel… = (1,0,x) ВЫШЕ → панель цела. */ /* --- bw: Чёрным по белому --- */ html.ub-a11y-scheme-bw, html.ub-a11y-scheme-bw body, html.ub-a11y-scheme-bw *:not(svg):not(path) { background-color: #FFFFFF !important; color: #000000 !important; border-color: #000000 !important; -webkit-text-fill-color: #000000 !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; } html.ub-a11y-scheme-bw a { color: #0000CC !important; -webkit-text-fill-color: #0000CC !important; text-decoration: underline !important; } html.ub-a11y-scheme-bw button:not(.ub-a11y-sw), html.ub-a11y-scheme-bw .btn, html.ub-a11y-scheme-bw [role="button"], html.ub-a11y-scheme-bw input[type="submit"] { background-color: #000000 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; border: 2px solid #000000 !important; } html.ub-a11y-scheme-bw svg { fill: currentColor !important; stroke: currentColor !important; color: #000 !important; } html.ub-a11y-scheme-bw img { filter: grayscale(100%) contrast(1.1) !important; } /* --- wb: Белым по чёрному --- */ html.ub-a11y-scheme-wb, html.ub-a11y-scheme-wb body, html.ub-a11y-scheme-wb *:not(svg):not(path) { background-color: #000000 !important; color: #FFFFFF !important; border-color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; } html.ub-a11y-scheme-wb a { color: #FFFF00 !important; -webkit-text-fill-color: #FFFF00 !important; text-decoration: underline !important; } html.ub-a11y-scheme-wb button:not(.ub-a11y-sw), html.ub-a11y-scheme-wb .btn, html.ub-a11y-scheme-wb [role="button"], html.ub-a11y-scheme-wb input[type="submit"] { background-color: #FFFFFF !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; border: 2px solid #FFFFFF !important; } html.ub-a11y-scheme-wb svg { fill: currentColor !important; stroke: currentColor !important; color: #fff !important; } html.ub-a11y-scheme-wb img { filter: grayscale(100%) brightness(.85) !important; } /* --- blue: Тёмно-синим по голубому --- */ html.ub-a11y-scheme-blue, html.ub-a11y-scheme-blue body, html.ub-a11y-scheme-blue *:not(svg):not(path) { background-color: #C5E2FF !important; color: #00284D !important; border-color: #00284D !important; -webkit-text-fill-color: #00284D !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; } html.ub-a11y-scheme-blue a { color: #003380 !important; -webkit-text-fill-color: #003380 !important; text-decoration: underline !important; } html.ub-a11y-scheme-blue button:not(.ub-a11y-sw), html.ub-a11y-scheme-blue .btn, html.ub-a11y-scheme-blue [role="button"], html.ub-a11y-scheme-blue input[type="submit"] { background-color: #00284D !important; color: #C5E2FF !important; -webkit-text-fill-color: #C5E2FF !important; border: 2px solid #00284D !important; } html.ub-a11y-scheme-blue svg { fill: currentColor !important; stroke: currentColor !important; color: #00284D !important; } html.ub-a11y-scheme-blue img { filter: grayscale(60%) !important; } /* --- beige: Коричневым по бежевому --- */ html.ub-a11y-scheme-beige, html.ub-a11y-scheme-beige body, html.ub-a11y-scheme-beige *:not(svg):not(path) { background-color: #F7F3D6 !important; color: #4A3600 !important; border-color: #4A3600 !important; -webkit-text-fill-color: #4A3600 !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; background-image: none !important; box-shadow: none !important; text-shadow: none !important; } html.ub-a11y-scheme-beige a { color: #6B3A00 !important; -webkit-text-fill-color: #6B3A00 !important; text-decoration: underline !important; } html.ub-a11y-scheme-beige button:not(.ub-a11y-sw), html.ub-a11y-scheme-beige .btn, html.ub-a11y-scheme-beige [role="button"], html.ub-a11y-scheme-beige input[type="submit"] { background-color: #4A3600 !important; color: #F7F3D6 !important; -webkit-text-fill-color: #F7F3D6 !important; border: 2px solid #4A3600 !important; } html.ub-a11y-scheme-beige svg { fill: currentColor !important; stroke: currentColor !important; color: #4A3600 !important; } html.ub-a11y-scheme-beige img { filter: grayscale(60%) sepia(.2) !important; } /* Панель ВСЕГДА вне blanket-схемы (id-вес выше) — но дублируем фон явно на случай агрессивных тем. */ html[class*="ub-a11y-scheme-"] #ub-accessibility-panel.ub-a11y-panel { background: #1b1b1b !important; color: #fff !important; } html[class*="ub-a11y-scheme-"] #ub-accessibility-panel .ub-a11y-buttons button { color: #fff !important; } html[class*="ub-a11y-scheme-"] #ub-accessibility-panel .ub-a11y-buttons button.active { color: #FFD400 !important; }