/* ===================================================================== OnAdd — темы Направление: тёплый пепел и угли. Мы ушли от холодного «приборного» серо-синего — он читался как техника, а не как студия с чертёнком на гербе. Разница на уровне тона: все нейтральные цвета уведены в красный, а не в синий. Чёрный здесь не #0E0F12 (синеватый), а #0B0708 — как остывший уголь. Белый тёплый. За счёт этого малиновый перестаёт выглядеть чужой наклейкой на сером корпусе и становится продолжением фона. Второй цвет — --ember, оранжевый жар. Он не самостоятельный акцент, а только край градиента у малинового: короткие росчерки, подсветка при наведении. Без него красный на чёрном выглядит плоско. Переключатели на : data-theme="dark" dark (по умолчанию) | light data-accent="crimson" crimson | ember | violet | magenta | ash data-contrast="high" не задано | high ===================================================================== */ /* --------------------------------------------------------------- РОЛИ ЦВЕТА --accent фирменный. Меняется схемой. --ember жар. Пара к акценту, только для градиентов и подсветки. --ok зелёный, «работает» --warn янтарный, «внимание» --bad красный, «ошибка» --rec красный, лампа записи Сигнальные цвета не зависят от схемы: зелёный всегда значит одно и то же, иначе индикаторы теряют смысл. --------------------------------------------------------------- */ /* ============ 1. ТЁМНАЯ — ПО УМОЛЧАНИЮ ============ */ :root { --bg: #0B0708; /* остывший уголь, не синий чёрный */ --bg-grain: rgba(255, 190, 160, .018); --panel: #141011; --panel-2: #1C1617; --panel-3: #251D1E; --edge: rgba(255, 235, 230, .10); --edge-hi: rgba(255, 220, 200, .05); --ink-1: #F2E9E6; /* тёплый белый */ --ink-2: #A89A97; --ink-3: #776B69; --ok: #5BD98A; --warn: #F0B429; --bad: #FF4D5E; --rec: #DC143C; --dead: #4A3E3F; --signal: var(--ok); --led-glow: 0 0 14px currentColor; /* Тени тёплые: холодная тень на тёплом фоне выглядит грязью */ --shadow-1: 0 1px 2px rgba(20, 4, 6, .55), 0 4px 18px rgba(20, 4, 6, .45); --shadow-2: 0 2px 10px rgba(20, 4, 6, .65), 0 28px 70px rgba(20, 4, 6, .6); color-scheme: dark; } /* ============ 2. СВЕТЛАЯ ============ Не белая бумага, а тёплый пепел — чтобы малиновый не резал глаз. */ [data-theme="light"] { --bg: #F2EDEB; --bg-grain: rgba(60, 20, 15, .02); --panel: #FFFFFF; --panel-2: #F7F2F0; --panel-3: #EBE3E0; --edge: rgba(45, 20, 18, .12); --edge-hi: rgba(255, 255, 255, .9); --ink-1: #1A1213; --ink-2: #6B5B58; --ink-3: #9A8A87; --ok: #14803D; --warn: #8A5A00; --bad: #C31432; --rec: #C8102E; --dead: #BDAFAC; --signal: var(--ok); --led-glow: 0 0 0 rgba(0,0,0,0); --shadow-1: 0 1px 2px rgba(60, 20, 15, .06), 0 4px 14px rgba(60, 20, 15, .05); --shadow-2: 0 2px 6px rgba(60, 20, 15, .09), 0 18px 44px rgba(60, 20, 15, .10); color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #F2EDEB; --bg-grain: rgba(60,20,15,.02); --panel: #FFFFFF; --panel-2: #F7F2F0; --panel-3: #EBE3E0; --edge: rgba(45,20,18,.12); --edge-hi: rgba(255,255,255,.9); --ink-1: #1A1213; --ink-2: #6B5B58; --ink-3: #9A8A87; --ok: #14803D; --warn: #8A5A00; --bad: #C31432; --rec: #C8102E; --dead: #BDAFAC; --signal: var(--ok); --led-glow: 0 0 0 rgba(0,0,0,0); color-scheme: light; } } /* ============ 3. СХЕМЫ ============ Зелёного и жёлтого варианта нет намеренно — они спорили бы со смыслом индикаторов. */ /* Малиновый — фирменный */ :root, [data-accent="crimson"] { --accent: #DC143C; --accent-dim: #96102C; --ember: #FF6B35; --accent-soft: rgba(220, 20, 60, .13); } [data-theme="light"][data-accent="crimson"], [data-theme="light"]:not([data-accent]) { --accent: #C8102E; --accent-dim: #9E0C24; --ember: #E0521F; --accent-soft: rgba(200, 16, 46, .09); } /* Угли — жар выходит вперёд, малиновый уходит в тень */ [data-accent="ember"] { --accent: #FF6B35; --accent-dim: #C24418; --ember: #FFA23A; --accent-soft: rgba(255, 107, 53, .14); } [data-theme="light"][data-accent="ember"] { --accent: #C24418; --accent-dim: #8E3010; --ember: #E07A20; --accent-soft: rgba(194, 68, 24, .10); } /* Аметист — холоднее, но всё ещё ночной */ [data-accent="violet"] { --accent: #8B5CF6; --accent-dim: #5B32C0; --ember: #C46BF0; --accent-soft: rgba(139, 92, 246, .14); } [data-theme="light"][data-accent="violet"] { --accent: #6D34D6; --accent-dim: #4C1D95; --ember: #9B4FD0; --accent-soft: rgba(109, 52, 214, .10); } /* Пурпур */ [data-accent="magenta"] { --accent: #D6409F; --accent-dim: #96246C; --ember: #FF6BAE; --accent-soft: rgba(214, 64, 159, .14); } [data-theme="light"][data-accent="magenta"] { --accent: #B01F7E; --accent-dim: #7C1458; --ember: #D14A94; --accent-soft: rgba(176, 31, 126, .10); } /* Пепел — акцента почти нет. Красный остаётся только за записью и ошибками. Для тех, кому много цвета мешает. */ [data-accent="ash"] { --accent: #9A8A87; --accent-dim: #6B5B58; --ember: #B5A29E; --accent-soft: rgba(154, 138, 135, .14); } [data-theme="light"][data-accent="ash"] { --accent: #5C4A47; --accent-dim: #3E302E; --ember: #7A6560; --accent-soft: rgba(92, 74, 71, .10); } /* Совместимость со старыми именами */ :root, [data-accent] { --record: var(--accent); --record-dim: var(--accent-dim); --primary: var(--accent); --primary-dark: var(--accent-dim); } .led--rec { color: var(--rec) !important; } /* ============ 4. ЖАР ============ Единственный «характерный» приём во всём оформлении: тёплое свечение снизу у главного блока и при наведении на карточки. Больше нигде — иначе перестанет читаться. */ .player-shell { box-shadow: var(--shadow-2), 0 0 60px -30px var(--accent); } .btn--rec { background: linear-gradient(180deg, var(--accent), var(--accent-dim)); } .btn--rec:hover { background: linear-gradient(180deg, var(--ember), var(--accent)); } .episode-card:hover, .clip-card:hover, .shelf__item:hover .shelf__art { box-shadow: 0 0 24px -14px var(--ember); } /* ============ 5. ВЫСОКАЯ КОНТРАСТНОСТЬ ============ */ [data-contrast="high"] { --bg: #000000; --panel: #0A0708; --panel-2: #141011; --panel-3: #1F1819; --edge: #7A6E6C; --edge-hi: transparent; --ink-1: #FFFFFF; --ink-2: #E0D6D4; --ink-3: #B8ACAA; --ok: #3BF57E; --warn: #FFC53D; --bad: #FF7A88; --rec: #FF2D55; --dead: #7A6E6C; --accent: #FF3355; --accent-dim: #C4102F; --ember: #FF8A4C; --accent-soft: rgba(255, 51, 85, .22); --led-glow: 0 0 0 rgba(0,0,0,0); --shadow-1: 0 0 0 1px var(--edge); --shadow-2: 0 0 0 2px var(--edge); } [data-contrast="high"][data-theme="light"] { --bg: #FFFFFF; --panel: #FFFFFF; --panel-2: #F0EDEC; --panel-3: #E0DAD8; --edge: #332826; --ink-1: #000000; --ink-2: #241B19; --ink-3: #473936; --ok: #006B2D; --warn: #6B4000; --bad: #A80020; --rec: #A80020; --accent: #A80020; --accent-dim: #780017; --ember: #8A3000; --accent-soft: rgba(168, 0, 32, .14); } /* Убираем всё, что снижает читаемость */ [data-contrast="high"] body { background-image: none; } [data-contrast="high"] .panel::before { display: none; } [data-contrast="high"] .player-shell, [data-contrast="high"] .episode-card:hover, [data-contrast="high"] .clip-card:hover, [data-contrast="high"] .shelf__item:hover .shelf__art { box-shadow: 0 0 0 2px var(--edge); } [data-contrast="high"] .btn--rec { background: var(--accent); } [data-contrast="high"] #navbar, [data-contrast="high"] .topbar, [data-contrast="high"] .server-modal-overlay, [data-contrast="high"] .modal-overlay, [data-contrast="high"] .viewer-overlay, [data-contrast="high"] #navbarOverlay, [data-contrast="high"] .drawer-scrim { backdrop-filter: none; } [data-contrast="high"] #navbar, [data-contrast="high"] .topbar { background: var(--bg); } [data-contrast="high"] .server-modal-overlay, [data-contrast="high"] .modal-overlay, [data-contrast="high"] #navbarOverlay, [data-contrast="high"] .drawer-scrim { background: rgba(0,0,0,.9); } [data-contrast="high"] .panel, [data-contrast="high"] .node, [data-contrast="high"] .btn, [data-contrast="high"] .episode-card, [data-contrast="high"] .clip-card, [data-contrast="high"] .srv-item, [data-contrast="high"] .toast, [data-contrast="high"] .kpi, [data-contrast="high"] input, [data-contrast="high"] select, [data-contrast="high"] textarea { border-width: 2px; border-color: var(--edge); } [data-contrast="high"] .led-meter__seg { opacity: .55; border: 1px solid var(--edge); } [data-contrast="high"] .led-meter__seg.is-lit { opacity: 1; } [data-contrast="high"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } [data-contrast="high"] main a:not(.btn):not(.clip-btn):not(.navbar-tab):not(.navbar-tab-open):not(.shelf__item):not(.member) { text-decoration: underline; text-underline-offset: 2px; } [data-contrast="high"] .hint, [data-contrast="high"] .clip-date, [data-contrast="high"] .node__desc, [data-contrast="high"] .srv-desc { color: var(--ink-2); } @media (prefers-contrast: more) { :root:not([data-contrast]) { --edge: #7A6E6C; --ink-2: #CFC4C2; --ink-3: #A29694; --led-glow: 0 0 0 rgba(0,0,0,0); } :root:not([data-contrast]) .panel { border-width: 2px; } } /* ============ 6. ПЕРЕКЛЮЧАТЕЛЬ ============ */ .theme-switch { display: flex; flex-direction: column; gap: 18px; } .swatches { display: flex; gap: 9px; flex-wrap: wrap; } .swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--edge); background: var(--sw); cursor: pointer; position: relative; transition: transform .16s var(--ease), border-color .16s var(--ease); } .swatch:hover { transform: scale(1.1); } .swatch[aria-checked="true"] { border-color: var(--ink-1); } .swatch[aria-checked="true"]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #fff; mix-blend-mode: difference; } .swatch--crimson { --sw: #DC143C; } .swatch--ember { --sw: #FF6B35; } .swatch--violet { --sw: #8B5CF6; } .swatch--magenta { --sw: #D6409F; } .swatch--ash { --sw: #9A8A87; } .seg-toggle { display: inline-flex; padding: 3px; background: var(--panel-2); border: 1px solid var(--edge); border-radius: var(--r-unit); } .seg-toggle button { padding: 7px 14px; background: none; border: none; border-radius: calc(var(--r-unit) - 3px); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; } .seg-toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }