/* ===================================================================== theme.css — переключатель тем Скритика (Классика / Кофейная / Тёмная) --------------------------------------------------------------------- Архитектура: один файл управляет всеми темами через CSS-переменные на :root[data-theme="..."]. Bootstrap 5.3 интегрируется через переопределение его --bs-* переменных и data-bs-theme="light|dark" на (ставится theme.js синхронно с data-theme). Источник палитры — login.ejs (кофейная тема): пергамент #f5efe0, золото #d8b878/#b8924a, эспрессо #1a1610/#14120e. ===================================================================== */ /* ====== CLASSIC (светлая, Bootstrap-подобная) ====== */ :root[data-theme="classic"] { --chrome-bg: #ffffff; --chrome-fg: #1a1a1a; --panel-bg: #f8f9fa; --panel-bg-solid: #ffffff; --panel-border: #e9ecef; --muted-fg: #6c757d; --accent: #0d6efd; --accent-2: #0a58ca; --on-accent: #ffffff; --reader-page-bg: #ffffff; --reader-page-fg: #1a1a1a; --reader-desk-bg: #e8eaed; --reader-fs-bar-bg: #2c2c2c; --reader-fs-bar-fg: #ffffff; --track-ins-bg: #bbf7d0; --track-ins-fg: #14532d; --track-del-bg: #fecaca; --track-del-fg: #7f1d1d; --track-replace-bg: #fde68a; --books-overlay-opacity: .30; /* Bootstrap integration — classic = дефолтный Bootstrap light */ --bs-body-bg: #ffffff; --bs-body-color: #1a1a1a; --bs-border-color: #dee2e6; --bs-secondary-color: #6c757d; --bs-tertiary-bg: #f8f9fa; --bs-primary: #0d6efd; --bs-primary-rgb: 13,110,253; --bs-emphasis-color: #000000; --bs-link-color: #0d6efd; --bs-link-hover-color: #0a58ca; } /* ====== COFFEE (пергамент + золото, дефолт; из login.ejs) ====== */ :root[data-theme="coffee"] { --chrome-bg: #1a1610; /* тёплый эспрессо (фон сайта) */ --chrome-fg: #f5efe0; /* пергамент (основной текст) */ --panel-bg: rgba(40,32,22,.6); /* стекло для полупрозрачных панелей */ --panel-bg-solid: #2a2218; /* непрозрачный вариант */ --panel-border: rgba(216,184,120,.28); /* золото 28% */ --muted-fg: rgba(245,239,224,.7); --accent: #d8b878; /* золото (login) */ --accent-2: #b8924a; --on-accent: #1a1408; /* тёмный текст на золоте */ --reader-page-bg: #f4ecd6; /* пергаментная страница */ --reader-page-fg: #3a2e1a; /* тёмный сепия */ --reader-desk-bg: #15110a; --reader-fs-bar-bg: #0f0c07; --reader-fs-bar-fg: #faf3e2; --track-ins-bg: #cdebcf; --track-ins-fg: #1e3a1e; --track-del-bg: #f0c8c8; --track-del-fg: #5a1414; --track-replace-bg: #f6dca0; --books-overlay-opacity: .22; /* Bootstrap integration — coffee остаётся "light" по data-bs-theme, но surfaces перекрашены под тёплую палитру */ --bs-body-bg: #1a1610; --bs-body-color: #f5efe0; --bs-border-color: rgba(216,184,120,.28); --bs-secondary-color: rgba(245,239,224,.7); --bs-tertiary-bg: #221b12; --bs-primary: #d8b878; --bs-primary-rgb: 216,184,120; --bs-emphasis-color: #faf3e2; --bs-link-color: #d8b878; --bs-link-hover-color: #b8924a; --bs-form-control-bg: rgba(15,13,9,.55); --bs-form-control-color: #faf3e2; --bs-form-control-border-color: rgba(216,184,120,.25); } /* ====== DARK (классический тёмный режим) ====== */ :root[data-theme="dark"] { --chrome-bg: #141420; --chrome-fg: #e8e8ec; --panel-bg: #1e1e2a; --panel-bg-solid: #1e1e2a; --panel-border: #2e2e3e; --muted-fg: #8a8a9a; --accent: #7c9eff; --accent-2: #5a7ce0; --on-accent: #0c0c14; --reader-page-bg: #1c1c28; --reader-page-fg: #d8d8e0; --reader-desk-bg: #0c0c14; --reader-fs-bar-bg: #0c0c14; --reader-fs-bar-fg: #e8e8ec; --track-ins-bg: #1e3a2e; --track-ins-fg: #9ad8a8; --track-del-bg: #3a1e1e; --track-del-fg: #e8a0a0; --track-replace-bg: #3a3210; --books-overlay-opacity: .18; --bs-body-bg: #141420; --bs-body-color: #e8e8ec; --bs-border-color: #2e2e3e; --bs-secondary-color: #8a8a9a; --bs-tertiary-bg: #1e1e2a; --bs-primary: #7c9eff; --bs-primary-rgb: 124,158,255; --bs-emphasis-color: #ffffff; --bs-link-color: #7c9eff; --bs-link-hover-color: #5a7ce0; --bs-form-control-bg: #1e1e2a; --bs-form-control-color: #e8e8ec; --bs-form-control-border-color: #2e2e3e; } /* ===================================================================== Базовые правила (применяются ко всем темам через переменные) ===================================================================== */ html { color-scheme: light dark; } body { background: var(--chrome-bg); color: var(--chrome-fg); transition: background-color .2s ease, color .2s ease; } /* ---- Form controls (Bootstrap переопределяем только когда заданы) ---- */ :root[data-theme="coffee"] .form-control, :root[data-theme="coffee"] .form-select, :root[data-theme="coffee"] .form-control:disabled, :root[data-theme="coffee"] .form-control::placeholder, :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select, :root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control::placeholder { background-color: var(--bs-form-control-bg); color: var(--bs-form-control-color); border-color: var(--bs-form-control-border-color); } :root[data-theme="coffee"] .form-control:focus, :root[data-theme="dark"] .form-control:focus { background-color: var(--bs-form-control-bg); color: var(--bs-form-control-color); border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22); } /* ---- Навбар: был захардкожен navbar-dark bg-dark → делаем тему-зависимым ---- */ .navbar-theme { background: var(--chrome-bg); border-bottom: 1px solid var(--panel-border); } .navbar-theme .navbar-brand, .navbar-theme .nav-link, .navbar-theme .navbar-text { color: var(--chrome-fg); } .navbar-theme .nav-link:hover { color: var(--accent); } .navbar-theme .navbar-toggler { border-color: var(--panel-border); } .navbar-theme .navbar-toggler-icon { filter: var(--navbar-icon-filter, none); } :root[data-theme="classic"] { --navbar-icon-filter: invert(.3); } :root[data-theme="coffee"] { --navbar-icon-filter: invert(.95) sepia(.2); } :root[data-theme="dark"] { --navbar-icon-filter: invert(1); } /* ---- Кнопки btn-dark → используем accent для всех тем ---- */ /* (btn-dark в Bootstrap = всегда чёрный. Перекрашиваем под accent, чтобы был единый primary во всех темах. Семантические btn-success/danger/etc. НЕ трогаем — они остаются осмысленными.) */ :root[data-theme="coffee"] .btn-dark, :root[data-theme="dark"] .btn-dark { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); } :root[data-theme="coffee"] .btn-dark:hover, :root[data-theme="dark"] .btn-dark:hover { background-color: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); } :root[data-theme="coffee"] .btn-outline-dark, :root[data-theme="dark"] .btn-outline-dark { color: var(--accent); border-color: var(--accent); } :root[data-theme="coffee"] .btn-outline-dark:hover, :root[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--accent); color: var(--on-accent); } /* ---- Cards / panels ---- */ :root[data-theme="coffee"] .card, :root[data-theme="dark"] .card { background-color: var(--panel-bg-solid); border-color: var(--panel-border); color: var(--chrome-fg); } :root[data-theme="coffee"] .card-header, :root[data-theme="coffee"] .card-footer, :root[data-theme="coffee"] .list-group-item, :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-footer, :root[data-theme="dark"] .list-group-item { background-color: var(--panel-bg-solid); border-color: var(--panel-border); color: var(--chrome-fg); } :root[data-theme="coffee"] .table, :root[data-theme="dark"] .table { --bs-table-color: var(--chrome-fg); } :root[data-theme="coffee"] .table > :not(caption) > * > *, :root[data-theme="dark"] .table > :not(caption) > * > * { color: var(--chrome-fg); background-color: transparent; border-color: var(--panel-border); } /* ===================================================================== Dropdown переключателя тем (в навбаре и на login) ===================================================================== */ .theme-dropdown .dropdown-menu { min-width: 11rem; } .theme-dropdown .dropdown-item .check { margin-left: auto; opacity: 0; color: var(--accent); } .theme-dropdown .dropdown-item.active .check { opacity: 1; } .theme-dropdown .dropdown-item:hover { color: var(--accent); } .theme-icon { display: inline-block; width: 1em; text-align: center; margin-right: .35rem; font-size: 1.05em; } /* ===================================================================== Общие правила для .draft-collapse (вынесены из дублей в book_detail/scene_view) ===================================================================== */ .draft-collapse { border: 1px solid var(--panel-border); border-radius: .375rem; overflow: hidden; } .draft-collapse-header { display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; background: var(--panel-bg); cursor: pointer; user-select: none; } .draft-toggle { display: inline-block; width: 1em; color: var(--muted-fg); transition: transform .15s; } .draft-collapse.collapsed .draft-toggle { transform: rotate(-90deg); } .draft-collapse-body { padding: .5rem .6rem; transition: max-height .2s ease, opacity .15s, padding .15s; max-height: 9999px; overflow: hidden; } .draft-collapse.collapsed .draft-collapse-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } /* ---- Группа AI-контекста (внешний сворачиваемый контейнер с вложенными подсворачивающимися блоками). Внешний блок без border (он как «обёртка»), внутренние сохраняют обычный вид. ---- */ .draft-collapse.ai-context-group { border: 1px solid var(--panel-border); background: var(--panel-bg); } .draft-collapse.ai-context-group > .draft-collapse-header { font-weight: 600; } .draft-collapse.ai-context-group > .draft-collapse-body { padding: .75rem; display: flex; flex-direction: column; gap: .25rem; } .draft-collapse.ai-context-group > .draft-collapse-body > .draft-collapse { margin-bottom: 0; } /* Внешний "групповой" блок в развёрнутом виде должен дать место всем вложенным блокам, поэтому его max-height выше. */ .draft-collapse.ai-context-group > .draft-collapse-body { max-height: none; } .draft-collapse.ai-context-group.collapsed > .draft-collapse-body { max-height: 0; } /* ===================================================================== Track-changes палитра (ins/del/replace) — единый источник истины. !important нужен в book_detail чтобы перебивать inline-стили Google Docs. ===================================================================== */ .doc-page-content ins, #cleanEditor ins, .sg-new { background: var(--track-ins-bg) !important; color: var(--track-ins-fg) !important; text-decoration: none; border-radius: 2px; padding: 0 1px; } .doc-page-content del, #cleanEditor del, .sg-old { background: var(--track-del-bg) !important; color: var(--track-del-fg) !important; text-decoration: line-through; border-radius: 2px; padding: 0 1px; } .doc-page-content .sg-replace, #cleanEditor .sg-replace { background: var(--track-replace-bg) !important; border-radius: 3px; padding: 0 2px; } .doc-page-content .sg-replace del, .doc-page-content .sg-replace ins, #cleanEditor .sg-replace del, #cleanEditor .sg-replace ins { background: transparent !important; } /* Подсветка выбранной сцены/предложения (замена JS-хардкода #0d6efd) */ .sg-highlight { outline: 3px solid var(--accent) !important; outline-offset: 2px; } /* ===================================================================== Страница чтения книги + редактор сцены — reader surface ===================================================================== */ .reader-canvas, .reader-fs { background: var(--reader-desk-bg); } .doc-page { background: var(--reader-page-bg); box-shadow: 0 1px 4px rgba(0,0,0,.18), 0 0 1px rgba(0,0,0,.08); } .doc-page-content { color: var(--reader-page-fg); } .reader-fs-bar { background: var(--reader-fs-bar-bg); color: var(--reader-fs-bar-fg); } /* Редактор cleanEditor (scene_view) — reader surface. ВАЖНО: сам #cleanEditor должен иметь непрозрачный фон (--reader-page-bg), а descendant'ам делаем transparent, чтобы "бумага" читалки просвечивала. Если поставить transparent на сам #cleanEditor, под ним покажется --chrome-bg (тёмный эспрессо в coffee) → текст сепия на тёмном = чёрное на чёрном. */ #cleanEditor { background: var(--reader-page-bg) !important; color: var(--reader-page-fg); } #cleanEditor:focus { outline: none; } /* Google Docs генерит в чистовике — без этого правила они останутся чёрными в тёмной теме. :not(ins):not(del):not(.sg-replace) исключает track-changes, чтобы их семантические цвета (выше в файле) сохранялись. Только descendant'ы — сам #cleanEditor не трогаем (его фон = --reader-page-bg). */ #cleanEditor *:not(ins):not(del):not(.sg-replace) { color: var(--reader-page-fg) !important; background-color: transparent !important; } /* Очистка браузерных дефолтных margin/padding у

и других блоков внутри #cleanEditor. Без этого

получает margin-bottom:16px от браузерного user-agent-стиля, который раздвигает абзацы. Это же правило есть в .doc-page-content (читалка) — здесь добавляем для редактора. */ #cleanEditor p, #cleanEditor h1, #cleanEditor h2, #cleanEditor h3, #cleanEditor h4, #cleanEditor h5, #cleanEditor h6, #cleanEditor div, #cleanEditor blockquote { margin: 0 !important; padding: 0 !important; } /* Отступ между абзацами задаём сами (как в читалке), а не браузерным дефолтом. */ #cleanEditor > * + * { margin-top: .85em !important; } #cleanEditor > p:first-child { margin-top: 0 !important; } /* Внутри .sg-replace дочерние ins/del не должны получать цвет трека — они просто зачёркнутый/подчёркнутый текст в рамках замены. */ #cleanEditor .sg-replace, #cleanEditor .sg-replace * { color: var(--reader-page-fg) !important; background-color: transparent !important; } /* Черновики (drafts) и AI-вывод — та же «страница», что у чистовика, чтобы визуально совпадать с #cleanEditor во всех темах. */ #draftText, #draftText2, #aiOutput { background: var(--reader-page-bg) !important; color: var(--reader-page-fg) !important; border-color: var(--panel-border) !important; } #draftText:focus, #draftText2:focus, #aiOutput:focus { background: var(--reader-page-bg) !important; color: var(--reader-page-fg) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22) !important; } #draftText::placeholder, #draftText2::placeholder { color: var(--muted-fg) !important; } /* ---- Sticky bars / sidebars (scene_view) ---- */ .scene-sticky-bar { position: sticky; top: 0; z-index: 20; background: var(--panel-bg-solid); padding: .5rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--panel-border); } #aiPromptFull { background: var(--panel-bg); color: var(--muted-fg); } #aiReasoning { background: var(--panel-bg); } .sg-item { border-bottom: 1px solid var(--panel-border); } .sg-item:hover { background: var(--panel-bg); } .sg-arrow { color: var(--muted-fg); } #editModeBtn.active { background: var(--track-replace-bg); border-color: var(--accent-2); color: var(--track-del-fg); } #cleanEditor { padding-left: 72px; } @media (max-width: 992px) { #cleanEditor { padding-left: 12px; } } /* ===================================================================== Список книг (books.ejs) — overlay с library-bg.jpg ===================================================================== */ body.books-list::before { opacity: var(--books-overlay-opacity); }