/* ───────────────────────────────────────────────────────────────────────────── Две темы админки. :root — «Классическая». То, как админка выглядела всегда: мягкий тёмно-фиолетовый фон, сиреневый акцент, скруглённые панели, гротеск. html[data-theme=terminal] — «Терминал». Язык сцены «Персонаж» из Claude Design: почти чёрный фон, панели обводятся волосяной линией вместо заливки, скругления почти нет, служебное моноширинным с разрядкой, один фиолетовый акцент. ПОЧЕМУ ЧЕРЕЗ АТРИБУТ, А НЕ ЧЕРЕЗ ВТОРОЙ ФАЙЛ. Селектор html[data-theme=…] специфичнее, чем :root, поэтому он перебивает собственные :root страниц (style.css, tasks.html) независимо от порядка подключения. Значит ни одну страницу не пришлось переписывать ради переключателя — достаточно, чтобы её цвета шли через токены. Тему ставит theme.js до первой отрисовки — иначе на каждой загрузке мигал бы светлый кадр чужой темы. ───────────────────────────────────────────────────────────────────────── */ /* ── Моноширинный своим файлом, а не из Google Fonts ──────────────────────── Раньше «Персонаж», настройки и страница экрана тянули JetBrains Mono ссылкой на fonts.googleapis.com. Внешняя таблица стилей в задерживает первую отрисовку: страница не рисуется, пока шрифт не отдадут или не оборвётся попытка. Это и была та самая секунда — на других экранах ссылки нет, и они открывались сразу. В приложении хуже вдвойне: без сети ждать нечего, а APK обязан работать офлайн. Файл лежит рядом (переменный, один на все начертания, латиница и кириллица раздельно) и подключается отсюда, из общей таблицы: браузер скачивает шрифт только когда он кому-то понадобился, поэтому страницам без моноширинного это не стоит ни запроса. */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fonts/jetbrains-mono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Поверхности */ --bg: #1e1e2e; --sidebar: #181825; --panel: #1a1d27; --panel2: #12141c; --surface: #313244; --surface2: #45475a; /* Приподнятая поверхность, наведение и выбор — светлее фона. Раньше здесь стояли #0f1011 / #16171a / #1a1c22 — почти чёрные значения, приехавшие вместе с разделом «Задачи», когда тот был отдельной страницей со своей палитрой «как в Linear». На фоне #1e1e2e они читались не как приподнятая поверхность, а как дыра в ней: карточки доски и строки под курсором проваливались. В теме «Терминал» те же три токена всегда были светлее фона — здесь просто восстановлен тот же смысл. */ --bg-raised: #262639; --bg-hover: #24243a; --bg-sel: #2d2d45; /* Линии */ --border: #313244; --line: #2d3148; --line2: #232838; /* Текст */ --text: #cdd6f4; --subtext: #a6adc8; --sub: #94a3b8; --muted: #6c7086; --dim: #64748b; --faint: #475569; /* Акцент */ --accent: #cba6f7; --accent2: #a5b4fc; --acc: #6366f1; --accd: #a5b4fc; /* Смысловые */ --green: #a6e3a1; --ok: #34d399; --yellow: #f9e2af; --warn: #facc15; --orange: #f2994a; --red: #f38ba8; --bad: #f87171; --radius: 8px; --radius-sm: 6px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Насколько «служебно» выглядят подписи разделов. В классике — гротеск. */ --label-font: var(--sans); --label-spacing: 0.05em; /* Прибавка к каждому кеглю. На десктопе ноль, на телефоне — см. конец файла. */ --fs-bump: 0px; /* Зум текста разговора. Ставит его theme.js по памяти браузера, настройка — в /settings.html. Единица здесь и есть «по умолчанию»: 14.5px абзаца ленты, ровно как было до появления ползунка. */ --chat-zoom: 1; --chat-fs: calc((14.5px + var(--fs-bump)) * var(--chat-zoom)); } html[data-theme="terminal"] { --bg: #07080a; --sidebar: #0a0b0f; --panel: #0e1016; --panel2: #14161d; --surface: #1b1e26; --surface2: #22252e; --bg-raised: #0e1016; --bg-hover: #14161d; --bg-sel: #1b1e26; --border: #1b1e26; --line: rgba(178,120,255,.16); --line2: rgba(255,255,255,.07); --text: #e8ecf4; --subtext: #8b93a5; --sub: rgba(255,255,255,.55); --muted: #545b6b; --dim: rgba(255,255,255,.3); --faint: #3d4350; --accent: #b278ff; --accent2: #c9a3ff; --acc: #b278ff; --accd: rgba(178,120,255,.8); --green: #7ee2b8; --ok: #7ee2b8; --yellow: #f2d06b; --warn: #f2d06b; --orange: #f2a86b; --red: #f08a8a; --bad: #f08a8a; --radius: 3px; --radius-sm: 3px; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif; --label-font: var(--mono); --label-spacing: 0.14em; } /* ── Что тема меняет помимо цвета ─────────────────────────────────────────── */ html[data-theme="terminal"] body { font-family: var(--sans); -webkit-font-smoothing: antialiased; } /* Скруглений в терминале почти нет — но окружности (50%) остаются окружностями */ html[data-theme="terminal"] :where(button, input, textarea, select, .card, .panel, .btn, .tile, .modal, .chat-item, .logout-btn, .icon-btn, .roll-h, .roll-b) { border-radius: var(--radius-sm); } /* Полоса прокрутки линией, а не плашкой */ html[data-theme="terminal"] * { scrollbar-width: thin; scrollbar-color: #22252e transparent; } html[data-theme="terminal"] *::-webkit-scrollbar { width: 9px; height: 9px; } html[data-theme="terminal"] *::-webkit-scrollbar-track { background: transparent; } html[data-theme="terminal"] *::-webkit-scrollbar-thumb { background: #22252e; border-radius: 0; } html[data-theme="terminal"] ::selection { background: rgba(178,120,255,.28); color: #fff; } /* Цветные эмодзи в монохромной среде тянут на себя всё внимание */ html[data-theme="terminal"] .tile .ic { filter: grayscale(1) brightness(1.7) contrast(.8); opacity: .72; } html[data-theme="terminal"] .tile.done .ic { filter: grayscale(1) brightness(2); opacity: 1; } /* ── Кегль на телефоне ──────────────────────────────────────────────────────── Вёрстка админки писалась под монитор: размеры от 9.5px до 23px проставлены в пикселях поштучно, и на экране в ладони нижняя половина этой шкалы читается с усилием. Поэтому каждый font-size записан как calc(N + var(--fs-bump)), а сама прибавка живёт здесь одним числом. Меняешь его — двигается вся типографика разом, сохраняя относительные пропорции: подпись остаётся мельче заголовка ровно настолько же, насколько была. 640px — та же граница, на которой style.css уводит сайдбар в оверлей, то есть «телефон» понимается везде одинаково. Прибавка, а не множитель: 1.5px одинаково ощутимы и для 10px подписи, и для 15px текста, тогда как коэффициент раздул бы заголовки сильнее, чем нужно, и почти не помог бы мелочи — а страдает именно мелочь. */ @media (max-width: 640px) { :root { --fs-bump: 1.5px; } }