/* ========================================================================== ПАЛИТРА САЙТА — ОБЩАЯ ОСНОВА Подключается ПЕРВЫМ, раньше всех остальных стилей, и на КАЖДОЙ странице, у которой свой : index.html, privacy.html, terms.html. Здесь только объявления переменных, ни одного правила оформления. Из-за этого файл крошечный, и документам не приходится тянуть ради двух цветов весь styles.css на девять тысяч строк. Забудете подключить — токены окажутся неопределёнными, и цвета на странице просто не применятся: текст и фон уйдут в значения браузера по умолчанию. Страница не «станет светлой», она станет никакой. ========================================================================== */ /* ========================================================================== ТОКЕНЫ ТЕМЫ Все цвета интерфейса берутся ОТСЮДА, а не пишутся числом в правилах. Одна светлая палитра и одна тёмная; правила о теме ничего не знают. ТРИ СОСТОЯНИЯ ТЕМЫ, и все три обязаны работать: 1. Игрок ничего не выбирал → на ничего не стоит, и тему решает системная настройка телефона (@media prefers-color-scheme ниже). 2. Выбрал тёмную → . 3. Выбрал светлую → — и системная тёмная его выбор НЕ перебивает. Отсюда странный на вид селектор :root:not([data-theme="light"]) у медиазапроса: без :not игрок, выбравший светлую тему на телефоне с тёмной системной, получал бы тёмную обратно. ПРАВИЛО: светлая палитра объявляется на голом :root. Не прячьте цвет внутрь медиазапроса или [data-theme] — токен без значения по умолчанию даст пустоту там, где ни одно из условий не сработало. Класс на ставит встроенный скрипт в (index.html) ДО отрисовки — иначе на секунду мелькала бы светлая тема. ========================================================================== */ :root { /* Поверхности: от самой дальней к самой ближней */ --bg: #f4f8fd; /* фон страницы */ --surface: #ffffff; /* карточка, панель, модалка */ --surface-2: #f8fafc; /* подложка внутри карточки */ --surface-3: #f1f5f9; /* ещё глубже: строки таблиц, поля */ --surface-accent:#eff6ff; /* подсветка акцентом */ /* Линии */ --border: #e2e8f0; --border-soft: #f1f5f9; --border-strong: #cbd5e1; /* Текст: от самого важного к самому тихому */ --text: #0f172a; --text-2: #334155; --text-dim: #64748b; --text-faint: #94a3b8; /* Акцент */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #eff6ff; /* Смысловые: у каждого семейства свой текст, подложка и рамка. */ --ok: #059669; --ok-soft: #dcfce7; --ok-border: #bbf7d0; --ok-strong: #166534; --danger: #dc2626; --danger-soft: #fef2f2; --danger-border: #fecaca; --warn: #d97706; --warn-soft: #fffbeb; --warn-border: #fde68a; --warn-strong: #92400e; --accent-border: #bfdbfe; --violet: #7c3aed; --violet-soft: #f5f3ff; /* ПОДЛОЖКА ВЫДЕЛЕННОЙ ПАНЕЛИ — шапка окна бонуса, карточка вращений и прочие блоки, которые должны отделяться от общей поверхности, но не становиться кнопкой. Заведена отдельным токеном, потому что раньше такие блоки заливались градиентом из surface-accent в violet-soft. На светлой теме это давало мягкий переход, а на тёмной оба конца оказывались почти одинаково тёмными — панель сливалась с окном, и «Доступно вращений» выглядело чёрным прямоугольником. */ --panel: #eef4ff; --panel-2: #f5f3ff; /* БЛИК СКЕЛЕТОНА — полоса, которая едет по заглушкам, пока раздел грузится. Токеном, а не числом в правиле: подложка заглушки зависит от темы, а блик обязан быть НА НЕЙ виден и не более того. Прежний rgba белого с прозрачностью 0.85 подбирался на светлой теме, где он ложится на светлый блок и читается лёгким проблеском. На тёмной та же полоса превращала заглушки в белые прямоугольники — ярче всего на странице. */ --skel-shine: rgba(255, 255, 255, .85); /* Сколько времени занимает переключение темы. Переход навешивается только на фон и цвет текста: анимировать всё подряд — значит получить заметную волну перерисовки на слабых телефонах. */ --theme-switch: .18s ease; } /* Тёмная палитра. Держится в ОДНОМ месте, а повторяется дважды: для системной настройки и для ручного выбора. Правьте оба списка вместе — разъедутся, и тема станет разной в зависимости от того, как её включили. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d1219; --surface: #151b25; --surface-2: #1b222e; --surface-3: #212936; --surface-accent:#16233d; --border: #2a3240; --border-soft: #222936; --border-strong: #3a4455; --text: #e9edf4; --text-2: #c2cbd9; --text-dim: #94a1b5; --text-faint: #6d7a8e; --accent: #4d8dff; --accent-hover: #6ba0ff; --accent-soft: #16233d; /* Смысловые: у каждого семейства свой текст, подложка и рамка. */ --ok: #34d399; --ok-soft: #12291f; --ok-border: #1d4d38; --ok-strong: #6ee7b7; --danger: #f87171; --danger-soft: #2a1618; --danger-border: #4d2124; --warn: #fbbf24; --warn-soft: #2a2212; --warn-border: #4a3a16; --warn-strong: #fcd34d; --accent-border: #2c4a7a; --violet: #a78bfa; --violet-soft: #221a3a; /* На тёмной панель СВЕТЛЕЕ поверхности, а не темнее: выделение работает подъёмом, тени на тёмном не видно. */ --panel: #1e2a3f; --panel-2: #262040; /* На тёмной блик — лёгкий подъём, а не белизна. */ --skel-shine: rgba(255, 255, 255, .07); } } :root[data-theme="dark"] { --bg: #0d1219; --surface: #151b25; --surface-2: #1b222e; --surface-3: #212936; --surface-accent:#16233d; --border: #2a3240; --border-soft: #222936; --border-strong: #3a4455; --text: #e9edf4; --text-2: #c2cbd9; --text-dim: #94a1b5; --text-faint: #6d7a8e; --accent: #4d8dff; --accent-hover: #6ba0ff; --accent-soft: #16233d; /* Смысловые: у каждого семейства свой текст, подложка и рамка. */ --ok: #34d399; --ok-soft: #12291f; --ok-border: #1d4d38; --ok-strong: #6ee7b7; --danger: #f87171; --danger-soft: #2a1618; --danger-border: #4d2124; --warn: #fbbf24; --warn-soft: #2a2212; --warn-border: #4a3a16; --warn-strong: #fcd34d; --accent-border: #2c4a7a; --violet: #a78bfa; --violet-soft: #221a3a; --panel: #1e2a3f; --panel-2: #262040; --skel-shine: rgba(255, 255, 255, .07); } /* Подсказка браузеру: красить системные элементы (полосы прокрутки, поля ввода, автозаполнение) под текущую тему. Без неё в тёмной теме выпадающие списки и скроллбар остаются белыми. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* ========================================================================== ШКАЛЫ: ТИПОГРАФИКА, ОТСТУПЫ, РАДИУСЫ, ТЕНИ ЗАЧЕМ ЭТО ПОЯВИЛОСЬ. Цвет в проекте давно живёт токенами, а всё остальное подбиралось на глаз под каждый блок. К моменту, когда это заметили, в стилях накопилось: 42 разных размера шрифта — включая 10.5, 11.5, 12.5 и 13.5px 27 разных радиусов — от 2px до 999px, почти подряд 183 разных тени Половинчатые кегли — верный признак подгонки: никто не выбирает 12.5px осознанно, его получают, когда «13 великовато, а 12 мелко». По отдельности каждое такое решение незаметно, а вместе они и дают ощущение интерфейса, собранного из разных мест. КАК ЭТИМ ПОЛЬЗОВАТЬСЯ. Массовую замену НЕ ДЕЛАЕМ: править двадцать тысяч строк ради выравнивания — это гарантированные поломки в местах, которые никто не откроет до жалобы. Правило простое: трогаете правило — переводите его на токен. Новый код пишете сразу на токенах. ШКАЛЫ ОДНИ НА ОБЕ ТЕМЫ и стоят на голом :root: размер шрифта и радиус от светлой или тёмной палитры не зависят. Исключение — тени: в тёмной теме они переопределены ниже, там про это сказано отдельно. ========================================================================== */ :root { /* --- ТИПОГРАФИКА --------------------------------------------------- Семь ступеней. Шаг растёт к крупным размерам: разницу между 11 и 12 глаз почти не ловит, а между 28 и 32 — сразу. Ниже 11px не опускаемся: это предел читаемости на телефоне, и существующие 10 и 10.5 при переводе округляем ВВЕРХ, к --fs-xs. */ --fs-xs: 11px; /* подписи под значками, мелкие пометки */ --fs-sm: 12px; /* вторичный текст, метки полей */ --fs-base: 14px; /* основной текст интерфейса */ --fs-md: 16px; /* заметный текст, крупные кнопки */ --fs-lg: 20px; /* заголовок карточки */ --fs-xl: 26px; /* заголовок раздела */ --fs-2xl: 34px; /* заголовок страницы, крупные суммы */ /* Межстрочный. Плотный — для заголовков, обычный — для текста. */ --lh-tight: 1.2; --lh-base: 1.5; /* --- ОТСТУПЫ ------------------------------------------------------- Шаг 4px. Всё, что между ступенями (5, 7, 9, 13, 18), при правке округляем к ближайшей — расхождение в пиксель никто не заметит, а ритм страницы держится именно этими совпадениями. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* --- РАДИУСЫ ------------------------------------------------------- Четыре ступени вместо двадцати семи. Соответствие простое: чем крупнее элемент, тем больше скругление, иначе углы выглядят по-разному при одинаковом радиусе. */ --radius-sm: 8px; /* поле ввода, мелкая плашка */ --radius-md: 12px; /* кнопка, строка списка */ --radius-lg: 16px; /* карточка, панель */ --radius-xl: 24px; /* модальное окно, крупный блок*/ --radius-pill: 999px; /* таблетка: счётчики, бейджи */ /* --- ТЕНИ ---------------------------------------------------------- Три уровня высоты — ровно столько состояний у плоского интерфейса: лежит, приподнято, оторвано от страницы. Тень задаётся токеном, а не числом, ещё и потому, что на тёмной теме чёрная тень не видна вовсе: там высоту показывает не затемнение, а подсветка сверху. Переопределение — в блоке ниже. */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.06); --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.08); /* Свечение акцентом — для главной кнопки экрана. Единственная тень, которая имеет право быть цветной: она подчёркивает действие, а не высоту. */ --shadow-accent: 0 6px 20px rgba(37, 99, 235, 0.28); } /* ТЕНИ В ТЁМНОЙ ТЕМЕ. * * Чёрная тень на тёмном фоне невидима: карточка на #1e2a3f с тенью * rgba(15,23,42,.08) выглядит ровно так же, как без неё. Поэтому здесь * тень делается ПЛОТНЕЕ (фон и так тёмный, ей есть куда темнеть), а * отделяет элемент от подложки светлая линия сверху — тот же приём, что * в интерфейсах macOS и Material. * * Оба состояния темы, как и у цвета: системная тёмная и выбранная руками. */ :root[data-theme="dark"] { --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-accent: 0 6px 20px rgba(37, 99, 235, 0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-2: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-accent: 0 6px 20px rgba(37, 99, 235, 0.45); } }