/* ═══════════════════════════════════════════════════════════════════════ Палитра личного кабинета ученика — my.ai-vibe-fin.ru Единственный источник цвета для `my_vitrina.html` и `my_login.html`. Раньше он был скопирован в обе страницы, и копии успели разойтись с платформой курса. Теперь цвет живёт здесь, страницы только ссылаются. Правило: НЕ вписывать цвет в страницу. Нужен новый оттенок — добавить сюда с понятным именем и коротким пояснением, где применяется. ⚠️ Значения поверхностей, текста и акцента совпадают с палитрой платформы курса (`css/tokens.css` в репозитории «Сервис путевые листы»). Кабинет и курс — один продукт для ученика, и выглядеть они должны одинаково. План и разбор — `docs/планы/КАБИНЕТ-СВЕТЛАЯ-ТЕМА-ПЛАН.md`. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Поверхности: от самой дальней к самой ближней ─────────────────── */ --bg: #0B1C24; /* фон страницы */ --panel: #0F2430; /* карточка */ --panel-2: #102833; /* наведение, вложенный блок */ --border: #1C3A46; /* рамки и разделители */ /* ── Текст ─────────────────────────────────────────────────────────── */ --text: #E3ECF7; /* основной */ --muted: #9AA6B6; /* подписи, второстепенное */ /* ── Акцент бренда ─────────────────────────────────────────────────── */ --neon: #19F05A; /* главное действие, своё место, рост */ --neon-rgb: 25, 240, 90; /* для полупрозрачных: rgba(var(--neon-rgb), .12) */ --on-neon: #0B1C24; /* текст поверх зелёного */ /* ── Второй уровень текста и линий ─────────────────────────────────── */ --muted-2: #5C6B7A; /* самое тихое: подсказки, «без изменений» */ --text-2: #C7D4E3; /* второй уровень текста: пояснение во всплывашке */ --border-2: #2A5364; /* акцентная граница: пунктир, рамка окна */ --ok-text: #9FDBB1; /* текст на зелёной плашке «получилось» */ --done: #69B97E; /* пройденный шаг в списках */ --green-deep:#10301F; /* тёмно-зелёная подложка заметки в магазине */ --green-edge:#1E4A2E; /* её граница */ /* ── Состояния и свои роли кабинета ──────────────────────────────────── `--down` — не «ошибка», а падение в рейтинге: у него своя интонация, поэтому он отличается от красного платформы и остаётся своим именем. */ --warn: #FFBD2E; /* предупреждение */ --warn-rgb: 255, 189, 46; --down: #FF7A7A; /* падение в рейтинге */ --down-rgb: 255, 122, 122; --heart: #FF8FA8; /* пилюли реакций на сдачи */ --heart-rgb: 255, 143, 168; --frost: #8FD7FF; /* «заморожено»: пауза в потоке */ --frost-rgb: 90, 180, 255; /* ── Магазин ─────────────────────────────────────────────────────────── Кошелёк — тёмный островок в обеих темах (см. `.on-dark` ниже), поэтому дальний угол его градиента пары не имеет: там и в светлой теме темно. Кнопка «Смотреть» и строка защиты живут на обычной карточке — у них пары есть, и в светлой теме они меняются. */ --wallet-tail: #123047; /* дальний угол градиента кошелька */ --watch-bg: #173B4E; /* кнопка «Смотреть» у купленного товара */ --watch-fg: #9FE8FF; /* её текст */ --shield: #6FA98A; /* «покупки не двигают место в рейтинге» */ /* ── Основы для полупрозрачных подложек ──────────────────────────────── Прозрачность задаётся на месте: rgba(var(--tint-rgb), .05). Нужны потому, что сама переменная цвета в rgba() не подставляется. */ --bg-rgb: 11, 28, 36; /* подложка полупрозрачных плашек */ --veil-rgb: 4, 10, 14; /* затемнение под всплывающим окном */ --tint-rgb: 255, 255, 255; /* подсветка «чуть светлее подложки» */ --shadow-rgb: 0, 0, 0; /* тень */ --shadow-k: 1; /* её густота: в светлой теме слабее */ /* ── Свечение ────────────────────────────────────────────────────────── Неоновый блик — приём тёмной темы. В светлой его место занимает мягкая тень подъёма: ореол на белом выглядит грязным пятном. Держим двумя именами, чтобы менять «дорогое» ощущение в одном месте. */ --glow: 0 0 22px rgba(var(--neon-rgb), .45); --glow-soft: 0 0 14px rgba(var(--neon-rgb), .22); /* ── Геометрия ───────────────────────────────────────────────────────── Тоже именами, а не числами в правилах. Светлое оформление кабинета — просторнее тёмного (вариант А, «воздух»), и без этих имён каждую будущую правку вида пришлось бы делать дважды: отдельно для тёмной, отдельно для светлой. Так правило пишется один раз и читает имя. */ --card-pad: 18px 20px; /* поля карточки */ --card-r: 16px; /* её скругление */ --card-edge: 1px solid var(--border); /* её рамка */ --card-shadow: none; /* её тень */ --card-gap: 14px; /* промежуток между карточками */ --hero-pad: 26px 20px 22px; /* поля карточки «моё место» */ --hero-num: 74px; /* размер числа места */ --row-pad: 8px 10px; /* высота строки рейтинга */ } /* ═══════════════════════════════════════════════════════════════════════ СВЕТЛОЕ ОФОРМЛЕНИЕ — вариант А, «тёмный герой в просторной вёрстке» Включается признаком data-theme="light" на . Ставит его `/ui/theme.js` до первой отрисовки. По умолчанию — тёмное, то есть у тех, кто ничего не выбирал, ничего не меняется. Значения подобраны расчётом контраста, не на глаз: каждое проверено на белом, на панели и на своей 10%-подложке, порог 4,5. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* Подложка уходит из нейтрально-серого в сторону бренда: белая карточка на светло-сером отличалась от фона на 2%, и глубина схлопывалась. */ --bg: #EBF1EE; --panel: #FFFFFF; --panel-2: #F2F7F4; --border: #DCE6E0; --text: #0E1F27; --muted: #54677A; /* Неон на белом даёт контраст 1,5 и не читается — берём тёмно-зелёный. */ --neon: #106B2C; --neon-rgb: 16, 107, 44; --on-neon: #FFFFFF; --muted-2: #5F6D77; --text-2: #2C3B47; --border-2: #B4C6CE; --ok-text: #106B2C; --done: #397A4A; --green-deep:#EAF4EC; --green-edge:#CFE3D5; --warn: #8A5A12; --warn-rgb: 138, 90, 18; --down: #D60000; --down-rgb: 214, 0, 0; --heart: #D60030; --heart-rgb: 214, 0, 48; --frost: #10618F; --frost-rgb: 16, 97, 143; /* Магазин. «Смотреть» — та же голубая семья, что «заморожено»: на белой карточке получается светло-голубая пилюля, а не тёмная клякса среди зелёных кнопок. Строка защиты уходит на зелёный текстовый: светло- зелёный #6FA98A давал на белом контраст 2,7 при норме 4,5. `--wallet-tail` пары не имеет — кошелёк остаётся тёмным островком. */ --watch-bg: rgba(var(--frost-rgb), .12); --watch-fg: var(--frost); --shield: var(--ok-text); --bg-rgb: 241, 245, 246; /* Затемнение под окном и в светлой теме остаётся тёмным: иначе окно сливается со страницей и перестаёт читаться как отдельный слой. */ --veil-rgb: 4, 10, 14; --tint-rgb: 14, 31, 39; /* тот же приём читается наоборот: «чуть темнее» */ --shadow-rgb: 14, 31, 39; --shadow-k: 0.28; --glow: 0 8px 22px rgba(var(--shadow-rgb), .14), 0 2px 6px rgba(var(--shadow-rgb), .06); --glow-soft: 0 4px 14px rgba(var(--shadow-rgb), .10); /* ⚠️ Размеры НЕ меняем: они те же, что в тёмной теме. 10.09 в первой версии светлая была просторнее — поля крупнее, число места 104 вместо 74. При переключении страница подпрыгивала: становилась на 15% выше, и это читалось как «масштаб приблизили». Правка Алекса: переключаться должен только цвет, вёрстка обязана остаться на месте. Имена оставлены — они и дальше держат размеры в одном месте; просто сейчас у обеих тем одно значение. */ --card-shadow: 0 1px 3px rgba(var(--shadow-rgb), .05), 0 14px 40px rgba(var(--shadow-rgb), .05); } /* ═══════════════════════════════════════════════════════════════════════ ОСТРОВОК ТЁМНОГО Блок, нарисованный тёмным по замыслу и остающийся тёмным в обеих темах: карточка «твоё место в потоке». Палитра внутри него тоже обязана остаться тёмной — иначе тёмный текст ляжет на тёмный фон. ⚠️ Класс ставится на сам тёмный элемент, НЕ на строку вокруг него: иначе соседняя карточка возьмёт тёмную палитру и побледнеет на светлом фоне. ⚠️ Здесь только переменные, без `color`: элемент задаёт свой цвет текста сам, а правило отсюда специфичнее и перебило бы его. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] .on-dark { --bg: #0B1C24; --panel: #0F2430; --panel-2: #102833; --border: #1C3A46; --text: #E3ECF7; --muted: #9AA6B6; --neon: #19F05A; --neon-rgb: 25, 240, 90; --on-neon: #0B1C24; --muted-2: #5C6B7A; /* самое тихое: подсказки, «без изменений» */ --text-2: #C7D4E3; /* второй уровень текста: пояснение во всплывашке */ --border-2: #2A5364; /* акцентная граница: пунктир, рамка окна */ --ok-text: #9FDBB1; /* текст на зелёной плашке «получилось» */ --done: #69B97E; /* пройденный шаг в списках */ --green-deep:#10301F; /* тёмно-зелёная подложка заметки в магазине */ --green-edge:#1E4A2E; /* её граница */ --warn: #FFBD2E; --warn-rgb: 255, 189, 46; --down: #FF7A7A; --down-rgb: 255, 122, 122; --heart: #FF8FA8; --heart-rgb: 255, 143, 168; --frost: #8FD7FF; --frost-rgb: 90, 180, 255; --watch-bg: #173B4E; /* магазин: кнопка «Смотреть» */ --watch-fg: #9FE8FF; --shield: #6FA98A; /* строка «покупки не двигают место» */ --bg-rgb: 11, 28, 36; --tint-rgb: 255, 255, 255; --shadow-rgb: 0, 0, 0; --shadow-k: 1; --glow: 0 0 22px rgba(var(--neon-rgb), .45); --glow-soft: 0 0 14px rgba(var(--neon-rgb), .22); }