/* ═══════════════════════════════════════════════════════════════════════ Тема «Ночь» — тёмная версия панели, согласованная со светлой. Слой поверх styles.css, подключается ПОСЛЕ него и только в своей оболочке index-night.html. Рабочие index.html и styles.css этот файл не видят. Палитры здесь нет, и это решение, а не пропуск: тёмные цвета берутся штатные — фиолетовый блок :root[data-theme="dark"] основы. Он уже пара лавандовой светлой: тот же акцент семейства, та же латунь, те же свечения. Слой добавляет плотность рабочих поверхностей и точечные исправления по итогам ревью. ═══════════════════════════════════════════════════════════════════════ */ /* Шрифты, заголовки и кегли подписей переехали в styles.css: владелец отдал Onest и Golos обеим темам, и правила стали общими. Здесь остаётся только ночное. */ /* ── Подложка ───────────────────────────────────────────────────────── Фон чуть глубже штатного #07060D, но не чёрный: чистый чёрный с белым текстом даёт предельный контраст, от которого буквы светятся по краям. Свечения фона (аврора) притушены против штатных вдвое-втрое — по просьбе владельца: на глубоком фоне пятна в полной силе читались яркими кляксами, малиновое особенно. Сами цвета те же, что в светлой, — гаснет только их сила. Совсем убирать нельзя — на этих пятнах держится стекло. */ :root[data-theme="dark"] { --bg: #060510; --aurora-1: rgba(109, 59, 255, .20); --aurora-2: rgba(194, 31, 78, .10); --aurora-3: rgba(240, 168, 30, .07); --aurora-4: rgba(46, 96, 220, .13); } /* ── Ревью, п. 1: звёзды не под рабочими поверхностями ──────────────── В «Шефе» сквозь календарь просвечивало 67 звёзд: у сетки прозрачный фон, и точки света читались грязью в клетках. Правило простое: небо живёт на полях страницы — фон, зазоры между карточками, — а рабочие поверхности от него закрыты. Поверхности уплотнены с .66 до ~.94: стекло сохраняет кромку, перепад заливки и размытие по краям свечений, но содержимое больше не смешивается с тем, что под ним. Это заявленная жертва дизайном тёмной ради чистоты рабочего поля. */ :root[data-theme="dark"] { --surface: rgba(24, 21, 38, .94); --surface-2: rgba(38, 33, 58, .9); } /* Календарь собран из прозрачных клеток — ему нужна собственная подложка целиком, вместе с колонкой часов. Чуть светлее --bg, чтобы поле расписания читалось поверхностью, а не дырой в небо. */ :root[data-theme="dark"] .cal { background: #100D1C; } /* ── Ревью, п. 3: диаграммы глушили экран ───────────────────────────── Десять сплошных акцентных столбцов во всю ширину — самое яркое пятно панели, ярче кнопок. Акцент работает, пока его мало: столбцы притушены до .38, полный цвет остаётся последнему — свежая работа и есть то, на что тут смотрят. Наведённый столбец тоже загорается: к нему привязана подсказка, и яркость здесь — ответ на действие. */ /* ── Ревью, п. 4: лента агента — пять одинаковых кнопок подряд ─────── Кнопка есть у каждой записи, и одинаковые кнопки столбиком — шум. Кнопка показывается той записи, над которой курсор или фокус; на устройствах без наведения остаётся как была — скрытая кнопка на тач-экране означала бы отрезанное действие. */ @media (hover: hover) { :root[data-theme="dark"] .fevent__act { opacity: 0; transition: opacity .14s; } :root[data-theme="dark"] .fevent:hover .fevent__act, :root[data-theme="dark"] .fevent:focus-within .fevent__act { opacity: 1; } } /* ── Ревью, п. 5: бейдж Premium стал невидимкой ─────────────────────── На тёмном стекле он не отличался от служебного чипа. Смысл бейджа — «это платная возможность», и он обязан отличаться: латунь, как у денег и тарифов во всей панели. Обводка, а не заливка: залитый целиком он спорил бы с настоящими кнопками. */ :root[data-theme="dark"] .lock { color: var(--brass); background: var(--brass-soft); border: 1px solid rgba(245, 192, 68, .3); } /* ── Ревью, п. 6: фокус был браузерным дефолтом ─────────────────────── Серо-белёсое системное кольцо от color-scheme: dark выглядит швом. Кольцо акцентом — как на лендинге; offset отделяет его от кромки стекла, иначе на карточках оно сливается с рамкой. */ :root[data-theme="dark"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Ревью, п. 7: карточки сценариев тонули в сером ─────────────────── Три уровня серого мелким кеглем сливались в одну массу. Основной текст поднят на ступень, примеры остаются третичными, но получают линию слева — структура видна до чтения. */ :root[data-theme="dark"] .rule__flow { color: var(--text-2); } :root[data-theme="dark"] .rule__sample { border-left: 2px solid var(--line-2); padding-left: 10px; } /* ── Ревью, п. 9: прокрутка уводила навигацию с экрана ──────────────── У .views стоит overflow: auto, но во флекс-колонке без min-height: 0 она не обрезает содержимое — растёт наружу вся страница, и рельс с поиском уезжают вверх. Одна строка возвращает прокрутку внутрь области содержимого; правится здесь, а не в основе, потому что основу договорились не трогать. */ :root[data-theme="dark"] .views { min-height: 0; } /* Того же требует и .canvas: это грид-ячейка, а у грид-элементов min-height по умолчанию тоже auto — цепочка перелива из двух звеньев, и рвать её надо в обоих. */ :root[data-theme="dark"] .canvas { min-height: 0; } /* Ревью, п. 10 — перенос кнопок шапки карточки ученика — переехал в styles.css: владелец открыл базу для правок, и починка нужна обеим темам, а не одной ночной. */ /* ── Ревью, п. 11: «Оплаты» без данных — просто пустота ─────────────── Подстраховка на пустой ответ: если тело раздела пришло пустым, человек видит объяснение, а не заголовок над провалом. При данных :empty не срабатывает и правило не существует. */ :root[data-theme="dark"] #moneyBody:empty::before { content: "Оплат за этот месяц пока нет. Чеки и занятые часы появятся здесь сами."; display: block; padding: 26px 0; color: var(--text-3); font-size: 13px; } /* Звёздного неба больше нет (владелец, 28.09.2026): слой .tc-sky не собирается и не стилизуется. Фон и свечения остались. */ }