/* ═══════════════════════════════════════════════════════════════════ NewsHelper — общие токены оформления Тёмная тема — основная, она в :root. Светлая включается атрибутом [data-theme="light"] на . Панель и публичные страницы подключают этот файл первым, поэтому цвета живут в одном месте. Правило при добавлении стилей: никаких цветов мимо токенов. Написанный напрямую rgba(255,255,255,.5) в тёмной теме станет белым пятном. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Не зависит от темы ─────────────────────────────────────── */ --glass-blur: blur(22px) saturate(140%); --dur-fast: 130ms; --dur: 210ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --rail: 68px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-heading: 'Plus Jakarta Sans', var(--font-sans); --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ── Тёмная тема: фиолетово-розовая ─────────────────────────── */ --base-top: #150f22; --base-mid: #0f0a19; --base-bot: #0a0712; --page-bg: #0f0a19; /* Сияние за стеклом. Без него прозрачные панели не читаются как стекло: сквозь них должно быть видно что-то цветное. */ --glow-1: rgba(168, 85, 247, 0.34); --glow-2: rgba(236, 72, 153, 0.24); --glow-3: rgba(129, 90, 240, 0.20); --bar-bg: rgba(17, 12, 28, 0.72); --accent-rgb: 168, 85, 247; --accent-deep-rgb: 147, 51, 234; --shadow-rgb: 0, 0, 0; --neutral-rgb: 198, 186, 230; --accent-300: #e9d5ff; --accent-400: #c084fc; --accent-500: #a855f7; --accent-600: #9333ea; --accent-ink: #d8b4fe; /* ── Ступени стекла ───────────────────────────────────────────── Четыре уровня вместо россыпи rgba по файлам. По тёмному фону белое работает иначе: те же 0.5, что в светлой теме, дали бы молочное пятно, поэтому альфа втрое ниже. */ --surf-1: rgba(255, 255, 255, 0.035); --surf-2: rgba(255, 255, 255, 0.055); --surf-3: rgba(255, 255, 255, 0.085); --surf-4: rgba(255, 255, 255, 0.12); --glass: rgba(255, 255, 255, 0.05); --glass-strong: rgba(255, 255, 255, 0.08); --glass-sunken: rgba(0, 0, 0, 0.22); --glass-line: rgba(255, 255, 255, 0.10); /* Светлая кромка сверху — то, что делает стекло стеклом */ --spec: inset 0 1px 0 rgba(255, 255, 255, 0.07); --line: rgba(var(--neutral-rgb), 0.12); --line-strong: rgba(var(--neutral-rgb), 0.20); --line-accent: rgba(var(--accent-rgb), 0.42); --ink: #ece8f7; --ink-2: #a79fc4; --ink-3: #746b93; --ok: #4ade80; --warn: #fbbf24; --err: #fb7185; --info: #60a5fa; --violet: #c084fc; --ok-bg: rgba(74, 222, 128, 0.13); --warn-bg: rgba(251, 191, 36, 0.13); --err-bg: rgba(251, 113, 133, 0.13); --info-bg: rgba(96, 165, 250, 0.13); --violet-bg: rgba(192, 132, 252, 0.13); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-3: 0 12px 34px rgba(0, 0, 0, 0.50); --shadow-4: 0 26px 64px rgba(0, 0, 0, 0.60); /* Тройки статусов: из них собираются заливки и рамки плашек. Раньше оттенки были вписаны в admin.css числами от светлой темы, и на тёмном фоне бордовое с зелёным превращались в грязь. */ --ok-rgb: 74, 222, 128; --warn-rgb: 251, 191, 36; --err-rgb: 251, 113, 133; --info-rgb: 96, 165, 250; --violet-rgb: 192, 132, 252; /* Затемнение под модальными окнами. В тёмной теме — именно чёрное: тёплая подложка вместе с blur высветляла всю страницу за окном. */ --ov-bg: rgba(0, 0, 0, 0.55); /* Всплывающие подписи рельса */ --tip-bg: rgba(38, 28, 56, 0.94); --tip-ink: #f4f0ff; /* Автозаполнение Chrome: он закрашивает поле своим цветом, перебить можно только внутренней тенью на всю площадь */ --autofill-bg: #1a1428; /* Ранги подписки */ --rank-bronze: #d99a5e; --rank-bronze-rgb: 217, 154, 94; --rank-silver: #b9bfcc; --rank-silver-rgb: 185, 191, 204; --rank-gold: #e5b33c; --rank-gold-rgb: 229, 179, 60; --rank-plat: #67e8f9; --rank-plat-rgb: 103, 232, 249; /* Браузеру: тему выбирает сайт, подстраивать нас не нужно */ color-scheme: only dark; } /* ═══════════════════════════════════════════════════════════════════ Светлая тема — тёплая кремовая Переопределяются только цвета. Размеры, шрифты и тайминги общие: тема не должна двигать вёрстку, иначе переключение дёргает страницу. ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --base-top: #f8eee1; --base-mid: #f0e4d5; --base-bot: #e9d9c6; --page-bg: #f0e4d5; --glow-1: rgba(247, 138, 48, 0.34); --glow-2: rgba(233, 122, 74, 0.24); --glow-3: rgba(255, 186, 122, 0.16); --bar-bg: rgba(248, 238, 226, 0.62); --accent-rgb: 249, 115, 22; --accent-deep-rgb: 234, 88, 12; --shadow-rgb: 74, 52, 32; --neutral-rgb: 120, 95, 70; --accent-300: #fdba74; --accent-400: #fb923c; --accent-500: #f97316; --accent-600: #ea580c; /* Для текста: у #f97316 контраст к белому всего 3.0:1 */ --accent-ink: #c2410c; --surf-1: rgba(255, 255, 255, 0.42); --surf-2: rgba(255, 255, 255, 0.55); --surf-3: rgba(255, 255, 255, 0.74); --surf-4: rgba(255, 255, 255, 0.88); --glass: rgba(255, 255, 255, 0.50); --glass-strong: rgba(255, 255, 255, 0.64); --glass-sunken: rgba(255, 255, 255, 0.38); --glass-line: rgba(255, 255, 255, 0.72); --spec: inset 0 1px 0 rgba(255, 255, 255, 0.95); --line: rgba(var(--neutral-rgb), 0.13); --line-strong: rgba(var(--neutral-rgb), 0.22); --ink: #241a12; --ink-2: #6b5c4e; --ink-3: #9a8c7e; /* Статусы затемнены: светлые оттенки на светлом фоне не читаются */ --ok: #15803d; --warn: #b45309; --err: #be123c; --info: #0369a1; --violet: #6d28d9; --ok-bg: rgba(21, 128, 61, 0.11); --warn-bg: rgba(180, 83, 9, 0.11); --err-bg: rgba(190, 18, 60, 0.10); --info-bg: rgba(3, 105, 161, 0.10); --violet-bg: rgba(109, 40, 217, 0.10); --shadow-1: 0 1px 2px rgba(var(--shadow-rgb), 0.06); --shadow-2: 0 4px 16px rgba(var(--shadow-rgb), 0.08); --shadow-3: 0 12px 34px rgba(var(--shadow-rgb), 0.11); --shadow-4: 0 26px 64px rgba(var(--shadow-rgb), 0.16); --ok-rgb: 21, 128, 61; --warn-rgb: 180, 83, 9; --err-rgb: 190, 18, 60; --info-rgb: 3, 105, 161; --violet-rgb: 109, 40, 217; --ov-bg: rgba(60, 42, 26, 0.30); --tip-bg: rgba(36, 26, 18, 0.94); --tip-ink: #fff; --autofill-bg: #fff; --rank-bronze: #9a521e; --rank-bronze-rgb: 154, 82, 30; --rank-silver: #5c626e; --rank-silver-rgb: 100, 106, 118; --rank-gold: #a5700a; --rank-gold-rgb: 180, 120, 9; --rank-plat: #0e7490; --rank-plat-rgb: 14, 116, 144; color-scheme: only light; } /* ═══════════════════════════════════════════════════════════════════ Совместимость Эти имена admin.js подставляет в inline-стили таблиц. Переименование потребовало бы правки полусотни мест в JS ради нуля пользы. ═══════════════════════════════════════════════════════════════════ */ :root { --bg-dark: var(--page-bg); --bg-panel: var(--glass); --bg-card: var(--glass-strong); --bg-hover: var(--surf-2); --border: var(--line); --border-hover: var(--line-strong); --border-accent: var(--line-accent); --accent: var(--accent-500); --accent-bg: rgba(var(--accent-rgb), 0.12); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); --status-green: var(--ok); --status-green-bg: var(--ok-bg); --status-red: var(--err); --status-red-bg: var(--err-bg); --status-yellow: var(--warn); --status-yellow-bg: var(--warn-bg); --status-blue: var(--info); --status-blue-bg: var(--info-bg); --status-purple: var(--violet); --status-purple-bg: var(--violet-bg); /* Прежние имена акцента: на них завязаны admin.css и site.css */ --orange-300: var(--accent-300); --orange-400: var(--accent-400); --orange-500: var(--accent-500); --orange-600: var(--accent-600); --orange-ink: var(--accent-ink); --sidebar-width: var(--rail); }