/* INTER — СВОЙ, ИЗ РЕПОЗИТОРИЯ. Ни Google Fonts, ни какого-либо CDN. ЗАЧЕМ ЭТО ЗАПИСАНО. До 04.09.2026 панель ОБЪЯВЛЯЛА Inter и рисовалась системным шрифтом: `@font-face` не было ни одного, в системе шрифт не установлен, в репозитории не лежал. Измерено в браузере — ширина строки в «Inter» совпадала с шириной в НЕСУЩЕСТВУЮЩЕМ шрифте до сотых. Заметить это глазами нельзя: подмена молчаливая, а Segoe UI похож. Значит и вся типографика настраивалась под шрифт, которого не было. ПОЧЕМУ ТОЛЬКО СВОЙ. Панель отдаёт `default-src 'self'`, и шрифт с чужого хоста был бы заблокирован — снова молча, снова подменой на системный. То есть внешний источник здесь не «нежелателен», а неработоспособен. ОДНО ПЕРЕМЕННОЕ НАЧЕРТАНИЕ, а не файл на каждый вес: 352 КБ на все веса от 400 до 700 против пяти отдельных файлов, каждый из которых пришлось бы качать отдельно. Решение владельца 04.09.2026. `swap` — текст показывается сразу системным и перерисовывается, когда шрифт придёт. Панель операторская: читать надо немедленно, а не после загрузки. Лицензия рядом: `fonts/OFL.txt`, SIL Open Font License 1.1. */ @font-face { font-family: Inter; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/InterVariable.woff2") format("woff2-variations"); } /* Один набор основ для всей панели: цвета, размеры, скругления, тени, шрифт. До него панель и логгер выглядели как две разные программы: у панели была своя светлая палитра с тёмной темой, у логгера — своя тёмная. Переход между разделами читался как переход между приложениями. Тема одна, тёмная. Панелью пользуется один человек, за одним столом, и поддерживать две темы значит проверять каждый экран дважды. Захотим светлую — она добавляется здесь и нигде больше. ЗНАЧЕНИЯ ПРИВЕДЕНЫ К РУКОВОДСТВУ ПО СТИЛЮ (19.08.2026, решение владельца: весь интерфейс — панель, логгер и всё будущее — строго по нему). Разбор расхождений и порядок работ — docs/СТИЛЬ.md. Устройство менять не пришлось: руководство требует ровно того же — один набор токенов на всё, произвольных цветов в разметке нет. Разошлись мы в числах, и правятся они здесь. */ :root { color-scheme: dark; /* ЗНАЧЕНИЯ ЦВЕТА И РАДИУСА ВЗЯТЫ ИЗ ПРИСЛАННОГО КОНЦЕПТА (04.09.2026), а не подобраны заново. Развилка, оставленная документом по стилю 19.08.2026 — «следовать прежнему руководству» или «завести новую линию», — решена владельцем: он прислал концепт как визуальное направление. ЧЕСТНО О ВЕСЕ: разница с прежней палитрой 2-6 пунктов на цвет. Концепт чуть синее в тёмных и мягче в состояниях. Заметным экран делает НЕ это, а устройство: шапка страницы, полоса показателей, раскладка обзора. Тона сведены потому, что несогласованность дороже правки. */ /* ------------------------------------------------------------------ Поверхности, от самой дальней к самой близкой. ------------------------------------------------------------------ */ --bg: #080c12; --sidebar: #0b1018; --surface: #0f1621; --surface-2: #141d2a; --surface-3: #182333; /* Выбранная строка таблицы. Заведена по руководству: до неё выбор показывался на каждой таблице по-своему, а руководство прямо запрещает разные стили таблиц на разных страницах. Цвет синеватый нарочно — он родня акценту, и вместе с левой линией акцента читается как «вот эта строка», а не как «здесь мышь». Наведение (--surface-3) серое и потому не спорит с выбором. */ --surface-selected: #17263a; /* ------------------------------------------------------------------ Границы: обычная, почти невидимая и подчёркнутая. ------------------------------------------------------------------ */ --line: #253142; --line-soft: #1a2533; /* Сильная граница — для активного и подчёркнутого: поле в фокусе, выбранная вкладка, край, который должен читаться. Раньше такие места брали --line и терялись. */ --line-strong: #344052; /* ------------------------------------------------------------------ Текст трёх степеней важности. Вторичный и метаданные СВЕТЛЕЕ, чем были. Это не косметика: у нас плотные таблицы и много метаданных, а прежние #8d9aab и #647286 на тринадцатом кегле читались тяжело. ------------------------------------------------------------------ */ --text: #eef4fb; --muted: #94a3b7; --subtle: #6e7d91; /* ------------------------------------------------------------------ Акцент. Наведение теперь СВЕТЛЕЕ основного, а не темнее. Прежний --accent-strong вёл в тёмную сторону, и ссылка под курсором гасла вместо того, чтобы оживать. Имя оставлено прежним: его читают правила панели и логгера, и переименование стоило бы прохода по обоим. ------------------------------------------------------------------ */ --accent: #5b8def; --accent-strong: #79a5ff; /* ------------------------------------------------------------------ Состояния. Красный только для настоящей беды: если им отмечать всё подряд, оператор перестаёт его замечать. Цвет никогда не единственный носитель смысла — рядом значок или слово. ------------------------------------------------------------------ */ --good: #4fca94; --warn: #efb25f; --danger: #ef6b72; --unknown: #a78bfa; /* Приглушённые подложки состояний. Руководство запрещает сплошную заливку цветом состояния: опасное действие получает границу и значок, а не красный экран. Эти три — подложки под такие сообщения, они едва темнее поверхности и лишь подкрашены. */ --good-soft: #10201b; --warn-soft: #1d1a15; --danger-soft: #1d1517; --danger-line: #813942; --danger-text: #ffc4c8; /* ------------------------------------------------------------------ Служебные роли, у которых раньше цвет стоял прямо в правилах. ------------------------------------------------------------------ */ /* Поле ввода: темнее поверхности, чтобы читалось как углубление. */ --field: #0d131c; /* Текст ПОВЕРХ заливки акцентом. Акцент светлый, поэтому текст на нём тёмный — белый по светло-голубому не читается. Раньше здесь стоял #fff при тёмном акценте; акцент посветлел, и цвет текста обязан был поменяться вместе с ним. */ --on-accent: #08121d; /* Кольцо фокуса: собственная роль, а не тень карточки (руководство §8). */ --focus-ring: rgba(88, 166, 255, .28); /* Затемнение под диалогом. */ --overlay: rgba(4, 8, 14, .62); /* Наведение в боковой панели: она темнее страницы, и хватает малого. */ --sidebar-hover: #131820; /* ------------------------------------------------------------------ Шкала отступов. Одна на всю панель. Заведена потому, что до неё отступы назначались по месту, и соседние экраны расходились на два-три пиксела — по отдельности незаметно, а вместе читается как небрежность. ------------------------------------------------------------------ */ --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 20px; --gap-6: 24px; --gap-8: 32px; /* Где какой шаг применять — правило руководства, вынесено в имена. */ --pad-control: var(--gap-3); /* внутри компактного элемента: 8-12 */ --pad-card: var(--gap-5); /* внутри карточки: 16-20 */ --pad-section: var(--gap-6); /* между секциями страницы: 20-24 */ --pad-page: var(--gap-6); /* внешний отступ страницы: 20-24 */ /* ------------------------------------------------------------------ Скругления. Совпали с руководством ещё до правки. ------------------------------------------------------------------ */ --radius: 10px; /* карточка, контейнер таблицы — по концепту 10 */ --radius-small: 8px; /* поле, кнопка, значок — по концепту 8 */ --radius-panel: 12px; /* диалог и выдвижная панель — по концепту 12 */ /* Тени. Обычная карточка их не носит вовсе — только границу; иначе плотный экран превращается в набор парящих плиток. Тень остаётся признаком того, что элемент действительно ПОВЕРХ страницы. */ --shadow: 0 18px 45px rgba(0, 0, 0, .24); --shadow-soft: 0 8px 20px rgba(0, 0, 0, .18); /* ------------------------------------------------------------------ Типографика. Моноширинный — только там, где важно посимвольное сравнение: идентификаторы, координаты, метки времени, номера корреляции, строки лога, сырые данные. Для обычного текста он читается хуже. ------------------------------------------------------------------ */ --font: Inter, "Segoe UI", system-ui, sans-serif; --font-mono: Consolas, "SF Mono", Menlo, monospace; --size-title: 21px; /* заголовок страницы, 600 */ --size-section: 15px; /* заголовок раздела, 600 */ --size-value: 24px; /* крупное число в карточке, 600 */ --size-body: 14px; /* обычный текст */ --size-table: 13px; /* тело таблицы */ --size-meta: 12px; /* метаданные */ --size-badge: 11px; /* короткая метка состояния */ --weight-strong: 600; --weight-medium: 500; /* ------------------------------------------------------------------ Размеры элементов управления. Одинаковые во всей панели: соседние формы с разной высотой полей — отдельный пункт в списке запрещённого. ------------------------------------------------------------------ */ --control-h: 35px; /* поле, выпадающий список, обычная кнопка */ --control-h-compact: 29px; /* тулбар, фильтры, действия в строке */ --control-h-large: 40px; /* только вход и пустые состояния */ --row-h: 40px; /* строка таблицы обычной плотности */ --row-h-compact: 35px; /* строка плотной таблицы */ --row-h-head: 36px; /* шапка таблицы */ --row-h-log: 26px; /* строка лога */ font-family: var(--font); } /* Прежнее имя поверхности. Остался ровно один потребитель — Investigations/Ui/app.css, правило .behavior-card.high. Пока он не переписан на var(--surface), удалять псевдоним нельзя: без него у карточки высокого риска в логгере отвалится не буква в имени, а весь фон. */ :root { --panel: var(--surface); }