/* ============================================================ themes.css — переключение тем и шрифтов через классы/атрибуты Темы — через атрибут data-theme на или : (дефолт, можно опустить) Шрифт тела — через класс font-* на : (дефолт) В тёмных темах все рабочие цвета подняты по светлоте на ~30-40 единиц (hex взят из канонического Reader prototype). ============================================================ */ /* ===== LINEN (дефолт) ===== Linen — это и есть дефолтные значения tokens.css :root. Отдельный блок [data-theme="linen"] / .theme-linen УДАЛЁН 2026-05-15: он побайтово дублировал tokens.css. При переключении mist/sumi → linen правила .theme-mist/.theme-sumi просто перестают матчиться, и значения берутся из :root (= linen). Если когда-то linen перестанет быть дефолтом — вернуть явный блок. Sepia убрана 2026-05-09 — спека определяет 3 темы: linen / mist / sumi. */ /* ===== MIST (тёмная холодная, синие тона) ===== */ [data-theme="mist"], .theme-mist { /* Canonical hex (themes-v3.jsx mistDark + palettes.jsx) */ --bg: #161a22; --surface: #1e232d; --surface-2: #2a303c; --surface-3: #36404c; /* legacy depth */ --border: #3c4452; --border-soft: #252b36; --ink: #e1e5ec; --ink-soft: #a8b0bc; --ink-muted: #727885; --ink-faint: #525762; --translation: #9bc0ac; /* canonical: cool green (НЕ #c8a878 warm tan) */ --hl: #2f3743; --hl-strong: #4a5566; --pos-noun: #9aa8e0; --pos-verb: #e08a72; --pos-adj: #7ac398; --pos-adv: #e0c070; --pos-prep: #a8a098; --pos-pron: #c098d8; --pos-det: #7a7a78; --pos-conj: #88a8d0; --pos-aux: #d88a98; --tense-past-perfect: #b88ad0; --tense-past: #e08a72; --tense-past-cont: #e8a878; --tense-present: #7ac398; --tense-present-cont: #98d4a8; --tense-present-perfect: #78b8d0; --tense-future: #9898e0; --tense-cond: #b890c8; --role-subject: #78b8d8; --role-verb: #e08a72; --role-object: #7ac398; --role-modifier: #e0c070; --role-clause: #b890c8; /* === Multilang palette overrides (mist theme) — 2026-05-15 === */ /* POS extensions (CJK/Hindi частица/классификатор/числительное) */ --pos-part: #c8a878; --pos-class: #88c8b0; --pos-num: #d4b878; /* Tense extensions (Romance subjunctive + imparfait) */ --tense-subj: #d490b0; --tense-impf: #c08888; /* Gender (fr/es/hi/he/ar) */ --gender-m: #88b0d8; --gender-f: #d490b0; --gender-n: #a8b890; /* CJK tones */ --tone-1: #e8a878; --tone-2: #7ac398; --tone-3: #9898e0; --tone-4: #e08a72; --tone-5: #a8a098; /* CJK HSK gradient */ --hsk-1: #7ac398; --hsk-2: #98d4a8; --hsk-3: #e0c070; --hsk-4: #e8a878; --hsk-5: #e08a72; --hsk-6: #b88ad0; /* Russian/Slavic cases */ --case-nom: #78b8d8; --case-gen: #e08a72; --case-dat: #7ac398; --case-acc: #e0c070; --case-ins: #b88ad0; --case-loc: #9898e0; --case-voc: #d490b0; /* Russian aspect */ --aspect-perf: #e08a72; --aspect-impf: #7ac398; /* Семантические акценты (canonical: --accent green, не terracotta) */ --accent: #9bc0ac; /* canonical accent = translation green */ --accent-soft: #88a89a; /* darker green variant */ --good: #9bc0ac; /* canonical learned */ --warn: #d4a878; /* canonical note */ --bad: #e08a72; /* legacy terracotta для error */ /* Dark-theme shadow override — popover / dropdowns на тёмном bg требуют bolder shadow для контрастности (0.5 vs 0.08 default). */ --shadow-pop-dark: 0 6px 16px rgba(0, 0, 0, 0.5); /* Bookmarks palette — осветлённые для тёмной mist (~+30 light) */ --bm-1: #d8a594; /* lighter rust */ --bm-2: #d4b078; /* lighter ochre */ --bm-3: #b0c088; /* lighter olive */ --bm-4: #88a8d0; /* lighter steel */ --bm-5: #b890d0; /* lighter aubergine */ } /* ===== SUMI (тёмная тёплая, тушь на пергаменте) ===== */ [data-theme="sumi"], .theme-sumi { /* Canonical hex (themes-v3.jsx sumiDark + palettes.jsx) */ --bg: #0f1114; --surface: #171a1f; --surface-2: #21252c; --surface-3: #2b3038; /* legacy depth */ --border: #363b45; --border-soft: #1c1f24; --ink: #e8e4d9; --ink-soft: #b0aca1; --ink-muted: #7a766c; --ink-faint: #4f4c44; --translation: #a8c088; /* canonical: cool green (НЕ #bfb090 warm) */ --hl: #21252c; --hl-strong: #3a3d44; --pos-noun: #98a8d0; --pos-verb: #d49080; --pos-adj: #98c098; --pos-adv: #d4b878; --pos-prep: #a09a90; --pos-pron: #b898c8; --pos-det: #807a72; --pos-conj: #88a0b8; --pos-aux: #c08898; --tense-past-perfect: #a890c0; --tense-past: #d49080; --tense-past-cont: #d8a888; --tense-present: #98c098; --tense-present-cont: #a8c898; --tense-present-perfect: #88b0c0; --tense-future: #9898c8; --tense-cond: #b090c0; --role-subject: #88a8c8; --role-verb: #d49080; --role-object: #98c098; --role-modifier: #d4b878; --role-clause: #b898c8; /* === Multilang palette overrides (sumi theme) — 2026-05-15 === */ --pos-part: #d4b078; --pos-class: #98c8a8; --pos-num: #d4b878; --tense-subj: #c898b0; --tense-impf: #c89088; --gender-m: #98b8d8; --gender-f: #c898b0; --gender-n: #b0b890; --tone-1: #d4a888; --tone-2: #98c098; --tone-3: #9890d0; --tone-4: #d49080; --tone-5: #a09a90; --hsk-1: #98c098; --hsk-2: #b0d4a8; --hsk-3: #d4c078; --hsk-4: #d4a888; --hsk-5: #d49080; --hsk-6: #b898c8; --case-nom: #98b8d8; --case-gen: #d49080; --case-dat: #98c098; --case-acc: #d4c078; --case-ins: #b898c8; --case-loc: #9890d0; --case-voc: #c898b0; --aspect-perf: #d49080; --aspect-impf: #98c098; /* Семантические акценты (canonical: --accent green, не terracotta) */ --accent: #a8c088; /* canonical accent = translation green */ --accent-soft: #98b078; /* darker green variant */ --good: #a8c088; /* canonical learned */ --warn: #e0b868; /* canonical note */ --bad: #d49080; /* legacy terracotta для error */ /* Dark-theme shadow override (same as mist) */ --shadow-pop-dark: 0 6px 16px rgba(0, 0, 0, 0.5); /* Bookmarks palette — тёплая sumi версия (warmer hue lift) */ --bm-1: #d4a094; /* lighter rust, slightly warmer */ --bm-2: #d4a868; /* lighter ochre */ --bm-3: #a8b878; /* lighter olive */ --bm-4: #80a0c0; /* lighter steel */ --bm-5: #b890c0; /* lighter aubergine */ } /* ============================================================ Шрифты тела — переопределяют --font-body ============================================================ */ .font-lora { --font-body: 'Lora', Georgia, serif; } .font-source { --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; } .font-inter { --font-body: 'Inter', system-ui, sans-serif; } .font-atkinson { --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif; } /* Lexend — увеличенный трекинг, размер слова чуть меньше для баланса */ .font-lexend { --font-body: 'Lexend', system-ui, sans-serif; --fz-word: 20px; letter-spacing: 0.01em; } .font-andika { --font-body: 'Andika', system-ui, sans-serif; } /* OpenDyslexic — глифы шире, тело автоматически уменьшается до 19px */ .font-dyslexic { --font-body: 'OpenDyslexic', 'Andika', system-ui, sans-serif; --fz-word: 19px; } /* ============================================================ Глиф cursor-trail / закладок — атрибут [data-glyph] на Дефолт (heart ♥) — в tokens.css :root. Здесь — переключение на star. ============================================================ */ [data-glyph="star"] { --glyph-char: "\2726"; } /* ✦ */ /* ============================================================ Theme + font switcher pills (settings panel + auth-страницы). Каноническое место — ЗДЕСЬ (themes.css грузится всеми страницами). Копии из base.css и style.css удалены 2026-05-15. Активное состояние — класс .active (его выставляет reader.js / app.js). ============================================================ */ .theme-switch, .font-switch { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); font-family: var(--font-ui); } .theme-switch button, .font-switch button { border: 0; background: transparent; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-muted); cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s; } .theme-switch button:hover, .font-switch button:hover { color: var(--ink); background: var(--surface-3); } /* Активное состояние — единый селектор для всех страниц: .active выставляет reader.js / app.js (reader/index/word/mywords), .is-active / [aria-pressed] — login.html / signup.html. */ .theme-switch button.active, .theme-switch button.is-active, .theme-switch button[aria-pressed="true"], .font-switch button.active, .font-switch button.is-active, .font-switch button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); } .theme-switch button:focus-visible, .font-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Каждая font-switch кнопка показана своим шрифтом — preview перед выбором. */ .font-switch button[data-font="font-lora"] { font-family: 'Lora', Georgia, serif; } .font-switch button[data-font="font-source"] { font-family: 'Source Serif 4', Georgia, serif; } .font-switch button[data-font="font-inter"] { font-family: 'Inter', system-ui, sans-serif; } .font-switch button[data-font="font-atkinson"] { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; } .font-switch button[data-font="font-lexend"] { font-family: 'Lexend', system-ui, sans-serif; letter-spacing: 0.02em; } .font-switch button[data-font="font-andika"] { font-family: 'Andika', system-ui, sans-serif; } .font-switch button[data-font="font-dyslexic"] { font-family: 'OpenDyslexic', 'Andika', system-ui, sans-serif; }