/* Дизайн-токены. Все значения взяты/§11 и `AI Popup.dc.html` как есть. Ничего не «улучшено» и не округлено: попап должен совпадать с референсом попиксельно. Тема выбирается атрибутом на : data-theme="dark" | "light" | "neon" | "synthwave" | "system". "system" отдаёт решение prefers-color-scheme (нужно на мобильных и в вебе); на десктопе тему проставляет Rust по системной настройке, чтобы не было мигания при первом кадре. */ :root { /* Геометрия — одинакова в обеих темах */ --pop-radius: 10px; --menu-radius: 9px; --pop-pad: 14px; --pop-width: 400px; --pop-width-expanded: 480px; --pop-body-max-height: 340px; --pop-gap: 12px; /* зазор окно ↔ выделение */ --screen-inset: 12px; /* отступ от краёв экрана */ --menu-width: 214px; /* Типографика */ --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-term: "Instrument Serif", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --size-ui: 14px; --line-ui: 1.4; --size-term: 19px; --line-term: 1.15; --size-secondary: 13px; --size-example: 13.5px; --size-label: 10px; --ls-label: 0.12em; /* Начертание заголовков: тёплые темы набирают их курсивной антиквой как есть, неоновые — прописными и жирным. Значения по умолчанию — для тёплых. */ --term-transform: none; --term-weight: 400; /* Анимации */ --pop-in: 0.13s; --menu-in: 0.12s; --spin: 0.7s; --skeleton-cycle: 1.2s; } /* ── Тёмная тема (по умолчанию) ─────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: rgba(27, 24, 21, 0.87); --bg-solid: #1b1815; /* фолбэк, когда backdrop-filter недоступен */ --backdrop: blur(22px) saturate(150%); --border: rgba(255, 240, 220, 0.1); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 44px -10px rgba(28, 20, 10, 0.6); --divider: rgba(255, 240, 220, 0.1); --text: #f2ece1; --text-body: #e8e8ec; --text-muted: #a3a3ab; --accent: oklch(0.86 0.09 68); --accent-dim: oklch(0.7 0.11 62); /* маркеры, точка раскрытия, hover-рамка */ --label: oklch(0.72 0.1 62); --error: #e2705f; --error-text: #f0b0a8; --btn-border: rgba(255, 240, 220, 0.16); --btn-bg: rgba(255, 240, 220, 0.05); --btn-color: #cdc5b8; --btn-hover-bg: rgba(255, 240, 220, 0.1); --btn-hover-border: oklch(0.7 0.11 62); --btn-hover-color: oklch(0.86 0.09 68); --skeleton: rgba(255, 255, 255, 0.14); --spin-track: rgba(255, 255, 255, 0.22); --spin-head: #d9d9df; --scroll-thumb: rgba(255, 255, 255, 0.22); --simple: #e8e2d8; --example: #cdc5b8; --thread-q: oklch(0.82 0.09 68); --thread-a: #d8d2c7; --pending: #9c9488; --pending-spin-head: #d9d2c6; --input-border: rgba(255, 240, 220, 0.14); --input-bg: rgba(255, 240, 220, 0.045); --input-color: #f2ece1; --send-color: #ded5c6; /* Кнопка главного действия — заливка акцентом, текст по ней тёмный. */ --btn-primary-bg: oklch(0.62 0.13 52); --btn-primary-fg: #1b1613; --btn-primary-hover: oklch(0.68 0.13 52); } /* ── Светлая тема ───────────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; --bg: rgba(253, 251, 246, 0.9); --bg-solid: #fdfbf6; --border: rgba(60, 45, 25, 0.09); --shadow: 0 1px 2px rgba(40, 30, 15, 0.1), 0 16px 44px -12px rgba(40, 30, 15, 0.32); --divider: rgba(60, 45, 25, 0.1); --text: #221f1b; --text-body: #2c2a27; --text-muted: #6f6a63; --accent: oklch(0.48 0.11 48); --accent-dim: oklch(0.62 0.11 52); --label: oklch(0.55 0.11 52); --error: #c2503c; --error-text: #a3402f; --btn-border: rgba(60, 45, 25, 0.14); --btn-bg: rgba(60, 45, 25, 0.035); --btn-color: #6b6355; --btn-hover-bg: rgba(60, 45, 25, 0.07); --btn-hover-border: oklch(0.68 0.1 52); --btn-hover-color: oklch(0.45 0.11 48); --skeleton: rgba(20, 18, 15, 0.09); --spin-track: rgba(0, 0, 0, 0.14); --spin-head: #4a4741; --scroll-thumb: rgba(20, 18, 15, 0.2); --simple: #302c25; --example: #5c5548; --thread-q: oklch(0.48 0.11 48); --thread-a: #3a352d; --pending: #776f61; --pending-spin-head: #4a4741; --input-border: rgba(60, 45, 25, 0.14); --input-bg: rgba(60, 45, 25, 0.03); --input-color: #221f1b; --send-color: #4a4438; --btn-primary-bg: oklch(0.55 0.12 50); --btn-primary-fg: #fdfbf6; --btn-primary-hover: oklch(0.48 0.11 48); } /* data-theme="system": те же светлые значения, но по системной настройке. Дублирование неизбежно — CSS не умеет «наследовать» блок переменных. */ @media (prefers-color-scheme: light) { :root[data-theme="system"] { color-scheme: light; --bg: rgba(253, 251, 246, 0.9); --bg-solid: #fdfbf6; --border: rgba(60, 45, 25, 0.09); --shadow: 0 1px 2px rgba(40, 30, 15, 0.1), 0 16px 44px -12px rgba(40, 30, 15, 0.32); --divider: rgba(60, 45, 25, 0.1); --text: #221f1b; --text-body: #2c2a27; --text-muted: #6f6a63; --accent: oklch(0.48 0.11 48); --accent-dim: oklch(0.62 0.11 52); --label: oklch(0.55 0.11 52); --error: #c2503c; --error-text: #a3402f; --btn-border: rgba(60, 45, 25, 0.14); --btn-bg: rgba(60, 45, 25, 0.035); --btn-color: #6b6355; --btn-hover-bg: rgba(60, 45, 25, 0.07); --btn-hover-border: oklch(0.68 0.1 52); --btn-hover-color: oklch(0.45 0.11 48); --skeleton: rgba(20, 18, 15, 0.09); --spin-track: rgba(0, 0, 0, 0.14); --spin-head: #4a4741; --scroll-thumb: rgba(20, 18, 15, 0.2); --simple: #302c25; --example: #5c5548; --thread-q: oklch(0.48 0.11 48); --thread-a: #3a352d; --pending: #776f61; --pending-spin-head: #4a4741; --input-border: rgba(60, 45, 25, 0.14); --input-bg: rgba(60, 45, 25, 0.03); --input-color: #221f1b; --send-color: #4a4438; --btn-primary-bg: oklch(0.55 0.12 50); --btn-primary-fg: #fdfbf6; --btn-primary-hover: oklch(0.48 0.11 48); } } /* ── Неон ─────────────────────────────────────────────────────────────────── Тёмная тема другой природы: не «фон + мягкая тень», а свечение по контуру. Отсюда острые углы вместо скруглений, отсутствие размытия под окном (за неоновой рамкой размывать нечего) и другая пара шрифтов. Rajdhani без кириллицы — за ним в стопке идёт Exo 2 того же склада, браузер сам берёт из него недостающие буквы. Порядок важен: поменяй местами — и латиница поедет в Exo 2, а весь смысл Rajdhani пропадёт. */ :root[data-theme="neon"] { color-scheme: dark; --pop-radius: 2px; --menu-radius: 2px; --font-ui: "JetBrains Mono", ui-monospace, monospace; --font-term: "Rajdhani", "Exo 2", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Заголовки в неоне набираются прописными — так задумано в макете. */ --term-transform: uppercase; --term-weight: 700; --bg: linear-gradient(165deg, #0b0f16 0%, #060809 60%, #0a0710 100%); --bg-solid: #070a0f; --backdrop: none; --border: rgba(0, 240, 255, 0.4); --shadow: 0 0 12px rgba(0, 240, 255, 0.35), 0 0 60px -10px oklch(0.7 0.22 330 / 0.4); --divider: rgba(0, 240, 255, 0.16); --text: #d8f7fa; --text-body: #c5eef3; --text-muted: #6f9aa3; --accent: oklch(0.85 0.16 195); --accent-dim: oklch(0.7 0.18 330); --label: oklch(0.7 0.18 330); --error: oklch(0.72 0.2 20); --error-text: oklch(0.78 0.16 20); --btn-border: rgba(0, 240, 255, 0.35); --btn-bg: rgba(0, 240, 255, 0.06); --btn-color: #9fdde6; --btn-hover-bg: rgba(0, 240, 255, 0.12); --btn-hover-border: oklch(0.85 0.16 195); --btn-hover-color: oklch(0.9 0.14 195); --skeleton: rgba(0, 240, 255, 0.14); --spin-track: rgba(0, 240, 255, 0.2); --spin-head: oklch(0.85 0.16 195); --scroll-thumb: rgba(0, 240, 255, 0.25); --simple: #cfeff4; --example: #a8d6de; --thread-q: oklch(0.85 0.16 195); --thread-a: #bfe6ec; --pending: #6f9aa3; --pending-spin-head: oklch(0.85 0.16 195); --input-border: rgba(0, 240, 255, 0.28); --input-bg: rgba(0, 240, 255, 0.05); --input-color: #d8f7fa; --send-color: oklch(0.85 0.16 195); --btn-primary-bg: oklch(0.85 0.16 195); --btn-primary-fg: #04181c; --btn-primary-hover: oklch(0.9 0.14 195); } /* ── Синтвейв ─────────────────────────────────────────────────────────────── Тот же строй, что у неона, но розово-оранжевый: закат вместо терминала. */ :root[data-theme="synthwave"] { color-scheme: dark; --pop-radius: 2px; --menu-radius: 2px; --font-ui: "JetBrains Mono", ui-monospace, monospace; --font-term: "Rajdhani", "Exo 2", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --term-transform: uppercase; --term-weight: 700; --bg: linear-gradient(165deg, #1a0a24 0%, #12081c 55%, #200a1a 100%); --bg-solid: #150a1e; --backdrop: none; --border: rgba(255, 70, 180, 0.4); --shadow: 0 0 16px rgba(255, 70, 180, 0.3), 0 0 70px -10px oklch(0.75 0.18 55 / 0.35); --divider: rgba(255, 70, 180, 0.16); --text: #fbe9f6; --text-body: #f2ddec; --text-muted: #a8809e; --accent: oklch(0.72 0.24 350); --accent-dim: oklch(0.75 0.18 55); --label: oklch(0.75 0.18 55); --error: oklch(0.72 0.2 20); --error-text: oklch(0.78 0.16 20); --btn-border: rgba(255, 70, 180, 0.35); --btn-bg: rgba(255, 70, 180, 0.07); --btn-color: #e5b6d6; --btn-hover-bg: rgba(255, 70, 180, 0.14); --btn-hover-border: oklch(0.72 0.24 350); --btn-hover-color: oklch(0.8 0.2 350); --skeleton: rgba(255, 70, 180, 0.16); --spin-track: rgba(255, 70, 180, 0.22); --spin-head: oklch(0.72 0.24 350); --scroll-thumb: rgba(255, 70, 180, 0.28); --simple: #f6e2f0; --example: #d9b3cd; --thread-q: oklch(0.72 0.24 350); --thread-a: #eed7e7; --pending: #a8809e; --pending-spin-head: oklch(0.72 0.24 350); --input-border: rgba(255, 70, 180, 0.3); --input-bg: rgba(255, 70, 180, 0.06); --input-color: #fbe9f6; --send-color: oklch(0.75 0.18 55); --btn-primary-bg: oklch(0.72 0.24 350); --btn-primary-fg: #1d0716; --btn-primary-hover: oklch(0.8 0.2 350); } /* Мини-меню на мобильных в референсе есть только в тёмном варианте — так и оставлено: системные меню выделения текста и на светлой теме обычно тёмные. */ :root { --menu-bg: rgba(27, 24, 21, 0.92); --menu-backdrop: blur(18px) saturate(150%); --menu-border: rgba(255, 240, 220, 0.1); --menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -8px rgba(28, 20, 10, 0.55); --menu-divider: rgba(255, 240, 220, 0.12); --menu-text: #e8e2d8; --menu-accent: oklch(0.86 0.09 68); --menu-hover: rgba(255, 240, 220, 0.09); } /* ── NOAH ───────────────────────────────────────────────────────────────────── Тема сайта noahlab.ru: белая плита на синем, тёмно-синий текст, золотые кнопки, прямые углы и жёсткая тень. Заголовки — прописными и жирным, как на сайте; шрифты — вшитые в программу, без загрузки из сети. */ :root[data-theme="noah"] { color-scheme: light; --pop-radius: 0px; --menu-radius: 0px; --btn-radius: 0px; --term-style: normal; --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-term: "Exo 2", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --term-transform: uppercase; --term-weight: 700; --bg: #ffffff; --bg-solid: #ffffff; --backdrop: none; --border: #171b26; --shadow: 6px 6px 0 #14306b; --divider: #dddcd6; --text: #171b26; --text-body: #2a3040; --text-muted: #5d677e; --accent: #2b5bc4; --accent-dim: #2f6bd4; --label: #2b5bc4; --error: #d4564a; --error-text: #b23f34; --btn-border: #171b26; --btn-bg: #ffffff; --btn-color: #171b26; --btn-hover-bg: #f0efea; --btn-hover-border: #2b5bc4; --btn-hover-color: #2b5bc4; --skeleton: #ecebe5; --spin-track: #dddcd6; --spin-head: #2b5bc4; --scroll-thumb: #c9c8c1; --simple: #171b26; --example: #555f78; --thread-q: #2b5bc4; --thread-a: #2a3040; --pending: #5d677e; --pending-spin-head: #2b5bc4; --input-border: #c9c8c1; --input-bg: #fbfaf7; --input-color: #171b26; --send-color: #2b5bc4; --btn-primary-bg: #f2c14e; --btn-primary-fg: #171b26; --btn-primary-hover: #f5cd68; } /* Прямые углы в теме NOAH — у кнопок, полей и карточек во всех окнах, как на сайте. Круглое по смыслу (точки, переключатели, индикатор голоса) не трогаем. */ :root[data-theme="noah"] :is(button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .button, .card, .today, .question, .concept, .flash, .recall, .focus-card, .focus-mode, .chip, .step, .grade, .map-holder, .verdict, .mod, .task, .pop, .menu) { border-radius: 0; } /* ── Телефон ────────────────────────────────────────────────────────────────── Android рисует приложение от края до края: строка состояния и жестовая панель лежат поверх страницы. Отступы от них приходят из плагина (bridge.js), полоса под часами закрашивается фоном страницы — иначе под ней просвечивает прокручиваемое содержимое. Общее для всех страниц: модули открываются в том же окне. */ html.is-phone body { box-sizing: border-box; padding-top: var(--inset-top, 0px); padding-bottom: var(--inset-bottom, 0px); padding-left: var(--inset-left, 0px); padding-right: var(--inset-right, 0px); } html.is-phone body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: var(--inset-top, 0px); background: var(--bg-solid); z-index: 100; pointer-events: none; } /* Кнопки и вкладки на телефоне — не текст: долгое касание выделяло подпись и вызывало системное меню «Копировать / Объяснить». */ html.is-phone :is(button, [role="tab"], label) { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Свернуть окно на телефоне нечего: страница модуля — часть единственного окна. */ html.is-phone [data-el="minimize"] { display: none !important; }