/* ============================================================ FoxChat — тема оформления. Отдельным файлом, потому что его грузят и кабинет, и источник уведомлений в OBS: alerts.css общий для обоих, и токены должны быть под рукой у каждой страницы, которая его подключает. ============================================================ */ /* ------------------------------------------------------------------ Тема. Светлая — значения по умолчанию, тёмная «аврора» — под [data-theme="dark"] ниже. Тема стоит на атрибутом и выбирается инлайновым скриптом до первой отрисовки: если ждать /api/me, страница успевает мигнуть чужим фоном. По той же причине выбор лежит в localStorage, а не в базе — это настройка устройства, а не аккаунта, и на лендинге она нужна раньше, чем мы вообще знаем, кто пришёл. ------------------------------------------------------------------ */ :root { color-scheme: light; /* Подложка для полупрозрачных плёнок: хайрлайны, наведение, стеклянные карточки. В тёмной теме они белые, в светлой — чернильные, поэтому цвет вынесен в триплет и подставляется как rgb(var(--veil) / .06). Без этого каждая такая плёнка на белом фоне становится невидимой. */ --veil: 24 18 43; --well-1: rgb(24 18 43 / .028); --well-2: rgb(24 18 43 / .045); --well-3: rgb(24 18 43 / .07); --shadow-k: .34; /* Тот же приём для теней: на белом чистый чёрный выглядит грязью. */ --shade: 26 21 48; /* Дальше — цвета, которые от темы не зависят: под ними не фон страницы, а что-то своё. Текст на фирменной заливке всегда лежит на акценте... */ --on-accent: #ffffff; /* ...а кадр сцены OBS в превью виджет рисует своим цветом, и он почти всегда светлый — на белой подложке такой виджет пропадает целиком. */ --scene: #16131f; --scene-checker: rgb(255 255 255 / .045); --scene-hair: rgb(255 255 255 / .1); /* surfaces */ --bg: #f4f2fa; --bg-subtle: #ebe8f4; --surface: #ffffff; --surface-2: #faf9fe; --surface-3: #f2effa; --surface-hover: #f0ebfd; --line: #e3dff0; --line-strong: #c9c2dd; --line-soft: rgb(var(--veil) / .09); /* text */ --text: #17132a; --text-2: #544c6d; --text-3: #6b6383; --muted: #544c6d; /* legacy alias */ --faint: #6b6383; /* legacy alias */ /* brand — на белом прежние оттенки не добирают контраста, поэтому базовые тона взяты на ступень глубже */ --primary: #7339e0; --primary-hover: #5f27c9; --primary-active: #4d1ba8; --accent: #7339e0; /* legacy alias, required by settings.css / alerts.css */ --cyan: #0d9488; --purple: #7339e0; /* status */ --success: #0f9d6e; --warning: #b0730c; --danger: #d63a63; --info: #2563eb; --green: #0f9d6e; /* legacy alias */ --amber: #b0730c; /* legacy alias */ --blue: #2563eb; /* legacy alias */ --pink: #d63a63; /* legacy alias */ /* Читаемый вариант акцента поверх тонированной подложки. В тёмной теме подложка тёмная и вариант светлее базового; в светлой подложка бледная и он, наоборот, темнее. Имя означает роль, а не светлоту, — иначе токен пришлось бы заводить дважды. */ --primary-soft: #5b21b6; --primary-softer: #45109c; --cyan-soft: #0f766e; --success-soft: #047857; --warning-soft: #8a5a06; --danger-soft: #a81845; --info-soft: #1d4ed8; --grad: linear-gradient(135deg, #7339e0, #4f6fe8 55%, #0d9488); --grad-soft: linear-gradient(135deg, #7339e01f, #0d948814); --ring: 0 0 0 3px #7339e045; /* geometry */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-1: 0 1px 2px rgb(var(--shade) / .07), 0 10px 30px rgb(var(--shade) / .07); --shadow-2: 0 24px 70px rgb(var(--shade) / .13); /* motion */ --dur-1: .15s; --dur-2: .22s; --ease: cubic-bezier(.2, .7, .3, 1); /* layout */ --maxw: 1160px; --panel-maxw: 1360px; /* Единая колонка контента кабинета: одна на все разделы. */ --page-col: 1440px; --header-h: 56px; } /* Тёмная «аврора» — то, чем проект был до появления второй темы. */ :root[data-theme="dark"] { color-scheme: dark; --veil: 255 255 255; --well-1: rgb(0 0 0 / .2); --well-2: rgb(0 0 0 / .3); --well-3: rgb(0 0 0 / .45); --shadow-k: 1; --shade: 0 0 0; --bg: #09080f; --bg-subtle: #0d0c14; --surface: #131118; --surface-2: #18151f; --surface-3: #1e1a28; --surface-hover: #1b1824; --line: #272334; --line-strong: #3a3450; --line-soft: rgb(var(--veil) / .06); --text: #f3f1f9; --text-2: #b6b0c4; --text-3: #8b8499; --muted: #b6b0c4; --faint: #8b8499; --primary: #8b5cf6; --primary-hover: #9d75ff; --primary-active: #7c4fe0; --accent: #8b5cf6; --cyan: #2dd4c8; --purple: #8b5cf6; --success: #3ecf9a; --warning: #f0b153; --danger: #f2688c; --info: #5aa7ff; --green: #3ecf9a; --amber: #f0b153; --blue: #5aa7ff; --pink: #f2688c; --primary-soft: #c9b4ff; --primary-softer: #dccfff; --cyan-soft: #7fe7dc; --success-soft: #8ce8c6; --warning-soft: #f0c98a; --danger-soft: #f5a3b6; --info-soft: #8fc7ff; --grad: linear-gradient(135deg, #8b5cf6, #6e8bff 55%, #2dd4c8); --grad-soft: linear-gradient(135deg, #8b5cf62b, #2dd4c81f); --ring: 0 0 0 3px #8b5cf655; --shadow-1: 0 1px 2px #00000052, 0 10px 30px #00000038; --shadow-2: 0 24px 70px #00000075; } /* Системная тема: без явного выбора страница следует за устройством. Набор ниже сгенерирован из :root[data-theme="dark"] выше (replay.sh) — руками не править. Явный data-theme="light" сильнее системной тьмы. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --veil: 255 255 255; --well-1: rgb(0 0 0 / .2); --well-2: rgb(0 0 0 / .3); --well-3: rgb(0 0 0 / .45); --shadow-k: 1; --shade: 0 0 0; --bg: #09080f; --bg-subtle: #0d0c14; --surface: #131118; --surface-2: #18151f; --surface-3: #1e1a28; --surface-hover: #1b1824; --line: #272334; --line-strong: #3a3450; --line-soft: rgb(var(--veil) / .06); --text: #f3f1f9; --text-2: #b6b0c4; --text-3: #8b8499; --muted: #b6b0c4; --faint: #8b8499; --primary: #8b5cf6; --primary-hover: #9d75ff; --primary-active: #7c4fe0; --accent: #8b5cf6; --cyan: #2dd4c8; --purple: #8b5cf6; --success: #3ecf9a; --warning: #f0b153; --danger: #f2688c; --info: #5aa7ff; --green: #3ecf9a; --amber: #f0b153; --blue: #5aa7ff; --pink: #f2688c; --primary-soft: #c9b4ff; --primary-softer: #dccfff; --cyan-soft: #7fe7dc; --success-soft: #8ce8c6; --warning-soft: #f0c98a; --danger-soft: #f5a3b6; --info-soft: #8fc7ff; --grad: linear-gradient(135deg, #8b5cf6, #6e8bff 55%, #2dd4c8); --grad-soft: linear-gradient(135deg, #8b5cf62b, #2dd4c81f); --ring: 0 0 0 3px #8b5cf655; --shadow-1: 0 1px 2px #00000052, 0 10px 30px #00000038; --shadow-2: 0 24px 70px #00000075; } }