/* =========================================================================== * ui_theme.css — тёмная тема ИНТЕРФЕЙСА (панели, редактор, окна, кнопки). * Не трогает сетку блоков — она и так управляется темой (--th-*). * Включается классом ui-dark на (переключатель — ui_theme.js). * Цвета настраиваются на странице «Тема оформления» (группа «Тёмная тема * интерфейса») и приходят переменными --ui-* (index.php / student.php). * ======================================================================== */ html.ui-dark { color-scheme: dark; --ui-bg: var(--ui-dark-bg, #12162b); /* основной фон страницы */ --ui-bg2: var(--ui-dark-bg2, #1b2040); /* фон панелей, карточек, окон */ --ui-text: var(--ui-dark-text, #e8eaf6); /* основной текст */ --ui-muted: var(--ui-dark-muted, #9aa3c7); /* второстепенный текст */ --ui-border: var(--ui-dark-border, #2c3157); /* границы и разделители */ } /* ── Страница ── ВАЖНО: у ученика градиент темы лежит на , поэтому html не красим вовсе. Красим только body страниц редактора/служебных (без класса student-page). */ html.ui-dark body:not(.student-page) { background: var(--ui-bg) !important; color: var(--ui-text); } /* ── Крупные поверхности: боковая панель, верхняя панель, карточки, виджеты ── */ html.ui-dark .side-panel, html.ui-dark .top-bar, html.ui-dark .card, html.ui-dark #imgResizer, html.ui-dark #colorSettingsPanel, html.ui-dark #gamePicker > div, html.ui-dark .read-time-stats { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .side-panel.open { border-left-color: var(--ui-border) !important; } /* ── Заголовки, подписи, приглушённый текст ── */ html.ui-dark h1, html.ui-dark h2, html.ui-dark h3, html.ui-dark h4, html.ui-dark .panel-title, html.ui-dark .top-bar-name, html.ui-dark .sub, html.ui-dark .panel-connections-title, html.ui-dark .top-bar-role, html.ui-dark .autosave-toggle, html.ui-dark .read-time-stats .rts-row { color: var(--ui-muted) !important; } html.ui-dark .read-time-stats .rts-title, html.ui-dark .read-time-stats .rts-val { color: var(--ui-text) !important; } html.ui-dark .top-bar-role { background: rgba(129,140,248,.15) !important; } html.ui-dark .top-bar-sep, html.ui-dark .panel-connections { border-color: var(--ui-border) !important; background: transparent; } /* ── Редактор текста: тулбар, область, содержимое ── */ html.ui-dark .editor-toolbar { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; } html.ui-dark .tb-btn { color: var(--ui-muted) !important; } html.ui-dark .tb-btn:hover { background: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .tb-btn.active { background: #4f6ef7 !important; color: #fff !important; } html.ui-dark .editor-area { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; } html.ui-dark .editor-content, html.ui-dark [contenteditable] { color: var(--ui-text) !important; caret-color: #8ea2ff; } /* ── Поля ввода, текстовые области, селекты ── .level-title — это input названия уровня прямо на холсте: у него фон должен оставаться прозрачным, иначе появляется «плашка» под текстом. */ html.ui-dark input[type=text]:not(.level-title), html.ui-dark input[type=number], html.ui-dark input[type=search], html.ui-dark textarea, html.ui-dark select, html.ui-dark .panel-desc, html.ui-dark .row .hex { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .level-title, html.ui-dark .level-title:focus { background: transparent !important; } html.ui-dark .panel-title:focus { background: var(--ui-bg) !important; } html.ui-dark ::placeholder { color: var(--ui-muted); opacity: .7; } /* ── Кнопки-«призраки» и служебные кнопки ── */ html.ui-dark .save-bar-btn:not(.dirty):not(.saved), html.ui-dark .panel-close { background: transparent !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; } html.ui-dark .btn.ghost:hover, html.ui-dark .panel-close:hover { background: var(--ui-border) !important; color: var(--ui-text) !important; } /* ── Панель масштаба (zoom-bar) в левом нижнем углу холста ── */ html.ui-dark .zoom-bar { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; } html.ui-dark .zoom-btn { color: var(--ui-muted) !important; } html.ui-dark .zoom-btn:hover { background: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .zoom-btn.active { background: #4f6ef7 !important; color: #fff !important; } html.ui-dark .zoom-label { color: var(--ui-muted) !important; } html.ui-dark .zoom-sep { background: var(--ui-border) !important; } /* ── Панель «Редактировать диалог» (конструктор диалогов) ── */ html.ui-dark .dialogue-bar { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; } html.ui-dark .dlg-bar-label { color: #8ea2ff !important; } html.ui-dark .dlg-btn { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; color: #8ea2ff !important; } html.ui-dark .dlg-btn:hover:not(:disabled) { background: #4f6ef7 !important; color: #fff !important; border-color: #4f6ef7 !important; } html.ui-dark .dlg-btn.dlg-play { color: #34d399 !important; } html.ui-dark .dlg-btn.dlg-play:hover:not(:disabled) { background: #10b981 !important; color: #fff !important; border-color: #10b981 !important; } html.ui-dark .dlg-btn.dlg-del { color: #fb7185 !important; } html.ui-dark .dlg-btn.dlg-del:hover:not(:disabled) { background: #f43f5e !important; color: #fff !important; border-color: #f43f5e !important; } /* ── Панель комментариев ── */ html.ui-dark #commentsPane { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; } html.ui-dark .cp-title { color: var(--ui-text) !important; border-bottom-color: var(--ui-border) !important; } html.ui-dark .cp-text { color: var(--ui-text) !important; } html.ui-dark .cp-author { color: var(--ui-text) !important; } html.ui-dark .cp-author.editor { color: #8ea2ff !important; } html.ui-dark .cp-head, html.ui-dark .cp-empty, html.ui-dark .cp-acts button { color: var(--ui-muted) !important; } html.ui-dark .cp-acts button:hover { color: #8ea2ff !important; } html.ui-dark .cp-item.reply { border-left-color: var(--ui-border) !important; } html.ui-dark .cp-form { border-top-color: var(--ui-border) !important; } html.ui-dark .cp-form textarea { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } /* ── Кнопка «Сохранить PDF» в шапке панели ── */ html.ui-dark .pdf-export-btn { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; color: #fb7185 !important; } html.ui-dark .pdf-export-btn:hover { background: rgba(244,63,94,.18) !important; } /* и соседняя кнопка «показать ученику» — чтобы не выбивалась */ html.ui-dark .livehl-btn { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; color: #38bdf8 !important; } html.ui-dark .livehl-btn:hover { background: rgba(56,189,248,.18) !important; } /* ── Универсальная страховка для мелких всплывашек с инлайновыми стилями. Не применяется к холсту (.canvas-wrap) и сетке блоков — там своя тема. */ html.ui-dark .side-panel [style*="background:white"], html.ui-dark .side-panel [style*="background: white"], html.ui-dark .side-panel [style*="background:#fff"], html.ui-dark .side-panel [style*="background:#f8fafc"], html.ui-dark .side-panel [style*="background:#f0f5ff"], html.ui-dark .side-panel [style*="background:#eef2ff"] { background: var(--ui-bg2) !important; color: var(--ui-text); } html.ui-dark .side-panel [style*="color:#0f172a"], html.ui-dark .side-panel [style*="color:#1e293b"], html.ui-dark .side-panel [style*="color:#334155"], html.ui-dark .side-panel [style*="color:#475569"] { color: var(--ui-text) !important; } /* ── Ученик: полноэкранные окна «Текст»/«Практика» (в светлой теме белые) ── */ html.ui-dark .fs:not(.fs-dark), html.ui-dark .fs-body, html.ui-dark .fs-scroll { background: var(--ui-bg) !important; color: var(--ui-text) !important; } html.ui-dark .fs-body a { color: #8ea2ff; } html.ui-dark .fs-body table, html.ui-dark .fs-body td, html.ui-dark .fs-body th { border-color: var(--ui-border) !important; } /* ── Ученик: блок комментариев под текстом блока ── */ html.ui-dark .cm-wrap { background: var(--ui-bg2) !important; border-top-color: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .cm-title, html.ui-dark .cm-author, html.ui-dark .cm-text { color: var(--ui-text) !important; } html.ui-dark .cm-author.editor { color: #8ea2ff !important; } html.ui-dark .cm-head, html.ui-dark .cm-toname, html.ui-dark .cm-acts button { color: var(--ui-muted) !important; } html.ui-dark .cm-acts button.liked { color: #fb7185 !important; } html.ui-dark .cm-item.reply { border-left-color: var(--ui-border) !important; } html.ui-dark .cm-form textarea { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .cm-reply-to { background: rgba(129,140,248,.18) !important; color: #8ea2ff !important; } /* ── Строка «Тёмная/Светлая тема» в панели уведомлений у ученика ── */ .ui-theme-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 11px 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: inherit; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-align: left; } .ui-theme-row:active { transform: scale(.98); } .ui-theme-row span:first-child { font-size: 17px; } html.ui-dark .ui-theme-row { background: rgba(255,255,255,.06); border-color: var(--ui-border); } /* Плавающая запасная кнопка темы удалена: переключатель есть только на главном экране редактора (.zoom-bar) и у ученика (#notifSheet). */ /* ═══════════════════════════════════════════════════════════════════════════ СЛУЖЕБНЫЕ СТРАНИЦЫ РЕДАКТОРА (users, files, games, titles, colors, progression) + login. У всех похожая разметка: светлый фон, белые .card, поля .inp, кнопки. Здесь — их тёмные варианты. Фон body и .card уже покрыты правилами выше. ═══════════════════════════════════════════════════════════════════════ */ /* Ссылки-«назад» и ссылки в шапках */ html.ui-dark a.back, html.ui-dark .back-link { color: #8ea2ff !important; } html.ui-dark .top-link { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; } html.ui-dark .top-link:hover { color: var(--ui-text) !important; } /* Заголовки карточек, подсказки, приглушённые подписи */ html.ui-dark .card-title, html.ui-dark .sec-title { color: var(--ui-text) !important; } html.ui-dark .hint, html.ui-dark .hintbox, html.ui-dark .empty, html.ui-dark .sc-sub, html.ui-dark .fi-size, html.ui-dark .gi-date, html.ui-dark .lv-num { color: var(--ui-muted) !important; } html.ui-dark .hintbox { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; } /* Поля ввода .inp (users/games) и селекты быстрого выбора */ html.ui-dark .inp, html.ui-dark .quick-node-sel, html.ui-dark .notes-ta { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } /* Строки-элементы списков: файлы, игры, уровни прокачки, титулы */ html.ui-dark .file-item, html.ui-dark .game-item, html.ui-dark .lv-row, html.ui-dark .title-row, html.ui-dark .add-row, html.ui-dark .upload-row, html.ui-dark .totalbar { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .file-item .fi-name, html.ui-dark .game-item .gi-title { color: var(--ui-text) !important; } html.ui-dark .frame-btn { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; } /* Карточки учеников (users.php): шапка, раскрывающееся тело, таблица блоков */ html.ui-dark .sc { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; } html.ui-dark .sc-head:hover { background: rgba(129,140,248,.08) !important; } html.ui-dark .sc-name { color: var(--ui-text) !important; } html.ui-dark .sc-body { background: var(--ui-bg) !important; border-top-color: var(--ui-border) !important; } html.ui-dark .nt th { color: var(--ui-muted) !important; } html.ui-dark .nt td, html.ui-dark .nt th { border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .ctrl-row label { color: var(--ui-muted) !important; } /* Модальные окна (files.php: сжатие картинок; progression.php: рамка) */ html.ui-dark .modal-box, html.ui-dark .frame-tune-box { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } html.ui-dark .cmp-cell { background: var(--ui-bg) !important; border-color: var(--ui-border) !important; } html.ui-dark .cmp-cell .lbl { color: var(--ui-muted) !important; } /* Страница цветов: группы настроек */ html.ui-dark .grp h3 { color: var(--ui-muted) !important; } html.ui-dark .row label { color: var(--ui-text) !important; } html.ui-dark .row input[type=color] { border-color: var(--ui-border) !important; } html.ui-dark .theme-tabs { border-color: var(--ui-border) !important; } html.ui-dark .theme-tab { color: var(--ui-muted) !important; } html.ui-dark .theme-tab.active { background: var(--ui-border) !important; color: var(--ui-text) !important; } /* Страница входа */ html.ui-dark .logo { color: var(--ui-text) !important; } html.ui-dark label { color: inherit; } /* ═══ Точечные исправления тёмной темы (по итогам обкатки) ═══ */ /* users.php: шапки карточек учеников были белыми и темнели только при наведении */ html.ui-dark .sc-head { background: var(--ui-bg2) !important; } /* users.php: строка «изучается сейчас» (top-row) светилась светло-жёлтым */ html.ui-dark .nt tr.top-row td { background: rgba(245,158,11,.10) !important; } /* users.php: дорожки мини-шкал опыта и шкалы титула были светло-серыми */ html.ui-dark .xp-bar-wrap, html.ui-dark .title-bar { background: rgba(255,255,255,.14) !important; } /* users.php: бейджи уровня/звёзд/статусов — полупрозрачные вместо пастельных */ html.ui-dark .badge.lv { background: rgba(79,110,247,.18) !important; color: #8ea2ff !important; } html.ui-dark .badge.stars { background: rgba(217,119,6,.16) !important; color: #fbbf24 !important; } html.ui-dark .badge.learn { background: rgba(234,88,12,.16) !important; color: #fb923c !important; } /* бейджи статусов .st-* удалены вместе со статусом «изучен» (июль 2026) */ /* Кнопка выбора файла (games.php «Выберите файл» и другие input[type=file]) */ html.ui-dark input[type=file] { color: var(--ui-muted); } html.ui-dark input[type=file]::file-selector-button, html.ui-dark input[type=file]::-webkit-file-upload-button { background: var(--ui-bg) ; border: 1px solid var(--ui-border); color: var(--ui-text); border-radius: 8px; padding: 6px 12px; cursor: pointer; } /* Красные кнопки удаления (games.php, files.php, progression.php) — в светлой теме у них бледно-розовый фон */ html.ui-dark .btn.danger, html.ui-dark .del-btn, html.ui-dark .games-remove-btn { background: rgba(244,63,94,.14) !important; color: #fb7185 !important; } html.ui-dark .btn.danger:hover, html.ui-dark .del-btn:hover, html.ui-dark .games-remove-btn:hover { background: rgba(244,63,94,.24) !important; } /* files.php: заглушки-иконки файлов и игр (серый квадрат за 🎮) */ html.ui-dark .file-item .thumb { background: var(--ui-bg) !important; color: var(--ui-muted) !important; } /* colors.php: подложка переключателя «Светлая/Тёмная» была белой */ html.ui-dark .theme-tabs { background: var(--ui-bg2) !important; } html.ui-dark .theme-tab.active { background: rgba(79,110,247,.20) !important; color: #8ea2ff !important; } /* progression.php: окно настройки рамки (масштаб/положение) и его крестик */ html.ui-dark .frame-tune-box h3 { color: var(--ui-text) !important; } html.ui-dark .ft-close { background: var(--ui-bg) !important; color: var(--ui-muted) !important; } html.ui-dark .ft-close:hover { background: var(--ui-border) !important; color: var(--ui-text) !important; } /* Помидор: плашка «Фокус/Перерыв» была пастельной */ /* Инлайновые светлые плашки в карточках служебных страниц (например, «Этот текст можно целиком скопировать…» в games.php) */ html.ui-dark .card [style*="background:#f0f5ff"], html.ui-dark .card [style*="background:#eef2ff"], html.ui-dark .card [style*="background:#f8fafc"], html.ui-dark .card [style*="background:#f1f5f9"] { background: var(--ui-bg) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } html.ui-dark .card [style*="color:#334155"], html.ui-dark .card [style*="color:#0f172a"], html.ui-dark .card [style*="color:#1e293b"], html.ui-dark .frame-tune-box [style*="color:#334155"], html.ui-dark .frame-tune-box [style*="color:#64748b"] { color: var(--ui-text) !important; } /* titles.php: кнопка «К приложению» и блок «Пример: Ур. 0–2…» были белыми */ html.ui-dark .back-link { background: var(--ui-bg2) !important; border-color: var(--ui-border) !important; } html.ui-dark .back-link:hover { background: var(--ui-border) !important; } html.ui-dark .example-preview { background: rgba(79,110,247,.12) !important; color: var(--ui-muted) !important; }