/* ⚠ ФАЙЛ ПЛАТФОРМЫ sl-portal-platform — правится там (../sl-portal-platform/portal/), в инстансе его перезапишет sync. */
/* tokens.css — единственный источник дизайн-токенов (палитра, радиусы, тени) для всех страниц, включая вход и 2FA.
* Подключается ПЕРВЫМ стилем в : блокирующий применяется до первой отрисовки, а файл кэшируется
* (раньше токены ехали инлайном, ~26 КБ в каждом HTML-ответе).
* Темная тема — :root. Светлая — один и тот же блок дважды: явный выбор (data-theme="light") и системная
* светлая при data-theme="auto". Блоки должны совпадать — это проверяет tests/test_frontend.py.
* Шкала текста (--fs-*) от темы не зависит — отдельный блок ниже темной темы.
*/
:root{
--bg:#0a0c11; --surface:#14171f; --surface2:#191d27; --elev:#1d222e;
--border:#252b38; --border2:#2f3645; --border3:#3a4356;
--text:#eef1f7; --muted:#9aa3b6; --faint:#7f89a0;
--accent:#6d8bff; --accent2:#9a6bff;
--ok:#34d399; --ok-bg:#0f2a20; --ok-bd:#1c5440;
--warn:#fbbf24; --warn-bg:#2a2310; --warn-bd:#4a3a16;
--danger:#fb7185; --danger-bg:#2a1620; --danger-bd:#5a2535;
--r:14px; --r-sm:10px;
--shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -14px rgba(0,0,0,.6);
/* ── Производные поверхности и «поверх заливки» ──
Их приходилось писать хардкодом (#0c0f15 в 23 местах, color:#fff в 47). Для светлой темы
каждый из них меняется НЕ инверсией, а по своему правилу — поэтому имя по смыслу, не по цвету. */
--sunken:#0c0f15; /* утопленная поверхность ВНУТРИ карточки: чекбокс-карточки, .seg, списки.
В темной теме темнее карточки; в светлой — наоборот, чуть темнее белого. */
--on-accent:#fff; /* текст/иконка поверх насыщенной заливки (accent-градиент, severity-пилюля) */
--knob:#fff; /* бегунок переключателя поверх заливки */
--accent-tint:color-mix(in srgb,var(--accent) 14%,transparent); /* фон выбранной карточки */
--accent-tint-2:color-mix(in srgb,var(--accent) 10%,transparent); /* то же, слабее (hover) */
--pill:rgba(255,255,255,.09); /* счетчик внутри чипа — подложка на невыбранном */
--pill-on:rgba(255,255,255,.22); /* …и на выбранном (поверх акцента) */
/* ── Data-viz палитра ── */
/* 1. Severity-ramp — CVE (C/H/M/L), проблемы Zabbix, EOL. Монотонный, cb-safe (нет «зеленого внутри severity»).
Маппинг Zabbix: Авария→crit, Высокая→high, Средняя→med, Предупреждение→low, Инфо→info.
Тройка на уровень: fg (текст/линия) / bg (подложка пилюли) / bd (рамка). */
--sev-crit:#f43f5e; --sev-crit-bg:#2a1620; --sev-crit-bd:#5a2535; /* Авария / Critical */
--sev-high:#fb923c; --sev-high-bg:#2a1c10; --sev-high-bd:#55391a; /* Высокая / High */
--sev-med :#fbbf24; --sev-med-bg :#2a2310; --sev-med-bd :#4a3a16; /* Средняя / Medium (=warn) */
--sev-low :#60a5fa; --sev-low-bg :#14203a; --sev-low-bd :#26406e; /* Предупреждение / Low */
--sev-info:#8b93a7; --sev-info-bg:#1b1f28; --sev-info-bd:#2f3645; /* Инфо / None */
/* 2. Sequential-ramp — хитмапы good→bad (свежесть бэкапа, аптайм, покрытие). heat-1=хорошо … heat-5=плохо. */
--heat-1:#34d399; --heat-2:#a3e635; --heat-3:#fbbf24; --heat-4:#fb923c; --heat-5:#f43f5e;
/* 3. Категориальная палитра графиков (мультисерии; порядок максимизирует различие, colorblind-safe:
worst adjacent ΔE 37.8 deutan, все ≥3:1 на темной поверхности). Конвенция: трафик вход=cat-1, выход=cat-2.
cat-8 — нейтрально-серый слот («Прочее»). Бренд-акцент (--accent/--accent2) НЕ использовать для данных. */
--cat-1:#6d8bff; --cat-2:#fb923c; --cat-3:#2dd4bf; --cat-4:#c084fc;
--cat-5:#fbbf24; --cat-6:#f472b6; --cat-7:#4ade80; --cat-8:#94a3b8;
/* слоты 9–12 — только для круговой диаграммы платформ (там до 12 секторов) */
--cat-9:#38bdf8; --cat-10:#a78bfa; --cat-11:#facc15; --cat-12:#22d3ee;
--accent-ink:var(--accent); /* цвет ссылок/иконок: в темной = акцент, в светлой затемняется */
/* ── «Выбрано / активно» — ОТДЕЛЬНАЯ тройка токенов, а не градиент по месту ──
В темной теме это по-прежнему акцентный градиент. В светлой сплошная заливка тем же
градиентом дает стену фиолетового (ее было 31 штука на страницу), поэтому там —
мягкая подложка + темный акцентный текст. Тройку менять ТОЛЬКО здесь. */
--fill-sel:linear-gradient(135deg,var(--accent),var(--accent2));
--on-sel:#fff;
--bd-sel:transparent;
/* «в норме» на полосах состояния: в темной — зеленый, в светлой нейтральный
(зеленая полоса при 19 здоровых сервисах ничего не сообщает, только шумит) */
--bar-ok:var(--ok);
--header-bg:rgba(10,12,17,.72); /* липкая шапка поверх контента (полупрозрачная + blur) */
--overlay:rgba(255,255,255,.07); /* счетчик/подложка «поверх поверхности» */
--overlay-on:rgba(255,255,255,.2); /* то же поверх акцентной заливки */
--btn-hover:#222838; /* фон вторичной кнопки под курсором */
--code-ink:#cdd5e6; /* текст в — мягче основного, но не faint */
--placeholder:#5d6678;
/* Иконки на НЕЙТРАЛЬНОЙ плитке (--elev + бордер): в светлой теме такая плитка белая, поэтому
пастель на ней выцветает — значения разведены по темам. --ico = смысловой нейтрал; остальные
различают сценарии на одном экране (семья/машина времени/поддержка). */
--ico:#cfd7ea; --ico-fam:#c4a6ff; --ico-tm:#7fd7c4; --ico-sup:#c9a15e;
/* Насыщенная зеленая ЗАЛИВКА (тумблер «включено», сплошные бейджи) — НЕ путать с --ok:
--ok это ЦВЕТ ТЕКСТА/иконки на обычном фоне, он слишком светлый под белый бегунок
(в темной теме белое на --ok = 1.9:1). Здесь значение подобрано так, чтобы белый
бегунок держал ≥3:1 (порог для не-текстовых элементов) в обеих темах. */
--ok-solid:#0f9b6f;
--pop-shadow:0 18px 44px -14px rgba(0,0,0,.75); /* меню/поповеры */
--pop-shadow-lg:0 26px 64px -18px rgba(0,0,0,.8);
--tip-shadow:0 12px 30px -10px rgba(0,0,0,.7);
--auth-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -24px rgba(0,0,0,.8); /* карточка входа */
--skel-sheen:rgba(255,255,255,.05);
--badge-ink:#0b0e14; /* текст на ярком бейдже-заливке */
--chip-ink:#9fb4ff; --chip-bg:#161c33; --chip-bd:#2c3658; /* .tag */
--ticket-ink:var(--accent2); /* ссылка на задачу Jira (.tk); в светлой затемняется */
/* ── Свечения и оверлеи: те же значения в обеих темах (раньше — rgba по месту в base.css и на экранах входа) ── */
--accent-ring:rgba(109,139,255,.18); /* кольцо фокуса поля */
--accent-glow:rgba(109,139,255,.8); /* тень под аватаром и логотипом входа */
--accent-glow-lo:rgba(109,139,255,.7); /* тень под логотипом шапки */
--accent-glow-hi:rgba(109,139,255,.9); /* тень под главной кнопкой */
--accent2-glow:rgba(154,107,255,.07); /* второе свечение фона (только темная тема) */
--backdrop:rgba(4,6,10,.62); /* затемнение под модальной палитрой */
--warn-fill:linear-gradient(135deg,#d99a12,#b06a12); /* насыщенная заливка «внимание»: белый текст поверх */
--auth-glow:rgba(154,107,255,.12); /* второе свечение фона экранов входа (только темная тема) */
--qr-bg:#fff; /* подложка QR-кода 2FA: всегда белая — ее сканирует телефон, тема ни при чем */
}
/* Светлая тема. Явный выбор юзера — data-theme на (ставит сервер, поэтому нет мигания
на первом кадре). Без выбора (theme=auto) уважаем систему. */
/* Шкала текста — одна на портал (DESIGN §4): body — основной текст, sm — подписи и вторичное, xs — метки и
заголовки колонок, md — заголовок блока и пустого состояния, h1 — заголовок страницы. Новый CSS — только эти
размеры; у body размер задан всегда, поэтому текст без своего правила не вырастет до 16px браузера. */
:root{--fs-xs:11px;--fs-sm:12px;--fs-body:13.5px;--fs-md:15px;--fs-h1:22px}
:root[data-theme="light"]{
/* ── СВЕТЛАЯ ТЕМА. Палитра из дизайн-макета (2026-07-25, 3-я редакция). ───────────────────
Структура страниц НЕ менялась — взята только палитра и три решения из макета:
• нейтрали уведены в ИНДИГО (акцент портала), а не чистый серый: фон, линии и текст из
одного семейства, поэтому страница выглядит собранной, а не «белой по умолчанию»;
• семантика (авария/внимание/норма) отделена от акцента: акцент = «портал», семантика =
«состояние», пересекаться не должны;
• «норма» не красится зеленым (--bar-ok): зеленая полоса при 19 здоровых сервисах ничего
не сообщает и только добавляет шум. Цвет появляется там, где нужно действие.
⚠ Отступление от макета: `--faint` там был #8b92a6 (≈3.2:1 к белому) — годится для
декоративных подписей, но в портале этот токен несет настоящий текст, поэтому затемнен
на ступень с сохранением тона. Требование ≥4.5:1 для текста.
Приемы ТЕМНОЙ темы здесь не применяются (свечение на body, градиент на «выбрано», тень как
разделитель): на белом они дают муть и шум. */
/* 1. Поверхности. Фон холодный нейтральный с уклоном в индиго и заметно темнее карточки —
иначе белые карточки растворяются и разделять их приходится тенью. */
--bg:#f3f4f8; --surface:#ffffff; --surface2:#eceef5; --elev:#ffffff;
--border:#e2e4ee; --border2:#ccd1e0; --border3:#a6adc2;
--sunken:#f7f8fb; /* утопленное ВНУТРИ белой карточки — светлее фона страницы */
/* 2. Текст: три явно различимых ступени. ⚠ Проверять на ТРЕХ фонах, а не только на белом:
большая часть «тихого» текста (свежесть данных, подписи групп меню, подсказки форм, шапка)
лежит на --bg и --surface2, а не на карточке. Прежний --faint #6b7288 давал 4.79 к белому,
но 4.35 к --bg и 4.13 к --surface2 — то есть не проходил там, где его и видно чаще всего.
Текущий #656b80: bg 4.82 · surface 5.29 · surface2 4.57. */
--text:#171a2b; --muted:#565d75; --faint:#656b80;
/* 3. Акцент: заливка яркая (белый текст на ней читается), текст/ссылки — затемненный вариант. */
--accent:#4a59d8; --accent2:#8250e0; --accent-ink:#3643b4;
--on-accent:#fff; --knob:#fff;
--pill:rgba(23,26,43,.06); --pill-on:rgba(255,255,255,.28);
/* 4. «Выбрано / активно» — мягкая подложка вместо сплошного градиента. */
--fill-sel:color-mix(in srgb, var(--accent) 13%, #fff);
--on-sel:#2f3aa0;
--bd-sel:color-mix(in srgb, var(--accent) 32%, #fff);
/* 5. Статусы: подобранные светлые тона, НЕ осветленные темные. */
--ok:#14713f; --ok-bg:#ecf7f0; --ok-bd:#b7e0c6;
--warn:#a85a08; --warn-bg:#fdf5e8; --warn-bd:#f4d9a8;
--danger:#bd2a2a; --danger-bg:#fdf0ef; --danger-bd:#f6c9c5;
/* «В норме» на полосах и точках состояния — НЕЙТРАЛЬНЫЙ, а не зеленый (решение из макета).
В темной теме этот токен равен --ok: там зеленый работает как надо. */
--bar-ok:#cbd0dd;
/* 6. Тени: почти плоско. Глубину несет граница. */
--shadow:0 1px 2px rgba(23,26,43,.05);
/* 7. Severity — тот же монотонный порядок, значения под белый фон.
high и med разведены по ТОНУ и светлоте: иначе на полосе уязвимостей сливаются. */
--sev-crit:#bd2a2a; --sev-crit-bg:#fdf0ef; --sev-crit-bd:#f6c9c5;
--sev-high:#c2560d; --sev-high-bg:#fdf3ec; --sev-high-bd:#f5d3b4;
--sev-med :#9a5a08; --sev-med-bg :#fdf5e8; --sev-med-bd :#f4d9a8;
--sev-low :#2a52c4; --sev-low-bg :#eef1fd; --sev-low-bd :#c8d3f7;
--sev-info:#565d75; --sev-info-bg:#f1f2f7; --sev-info-bd:#e2e4ee;
/* Heat good→bad: насыщенные, а не пастельные. Порядок и семантика те же. */
--heat-1:#14713f; --heat-2:#4d7520; --heat-3:#a85a08; --heat-4:#c2560d; --heat-5:#bd2a2a;
/* Категориальная: на белом желтый и салатовый проваливаются, поэтому темные версии тех же
тонов. Порядок слотов сохранен (cat-1 = вход, cat-2 = выход, cat-8 = «Прочее»);
9–12 — только для круговой диаграммы. */
--cat-1:#3643b4; --cat-2:#c2560d; --cat-3:#0f6d63; --cat-4:#6b3ce0;
--cat-5:#9a5a08; --cat-6:#b41766; --cat-7:#14713f; --cat-8:#6b7288;
--cat-9:#0a6294; --cat-10:#5325d0; --cat-11:#9c1040; --cat-12:#3d5c1c;
/* Шапка/поповеры/подложки: на светлом темная полупрозрачность дает грязь. */
--header-bg:rgba(255,255,255,.86);
--overlay:rgba(23,26,43,.05);
/* «поверх выбранного»: в темной теме выбранное — насыщенная заливка, и белая подложка на ней
читается. В светлой выбранное — мягкий тинт, и белым по светлому счетчик пропадал совсем
(пункт «Обзор 365» в боковом меню). Поэтому здесь подложка темная, из семейства акцента. */
--overlay-on:rgba(47,58,160,.13);
--btn-hover:#eceef5;
--code-ink:#3a4056; --placeholder:#9aa1b4;
/* Иконки на нейтральной плитке — затемненные версии темнотемных пастелей (на белой плитке
пастель не читается). Хюи сохранены, чтобы сценарии по-прежнему различались взглядом. */
--ico:#4a5169; --ico-fam:#6d3fc0; --ico-tm:#0f6b59; --ico-sup:#8a5a12;
--ok-solid:#14713f; /* белый бегунок на нем = 6.06:1 */
/* Тени оверлеев — единственное место, где тень в светлой теме работает на смысл. */
--pop-shadow:0 8px 24px -8px rgba(23,26,43,.16), 0 2px 6px -2px rgba(23,26,43,.08);
--pop-shadow-lg:0 16px 40px -12px rgba(23,26,43,.2), 0 3px 8px -3px rgba(23,26,43,.08);
--tip-shadow:0 6px 18px -6px rgba(23,26,43,.18);
--auth-shadow:0 8px 28px -12px rgba(23,26,43,.2);
--skel-sheen:rgba(23,26,43,.04);
--badge-ink:#ffffff;
--chip-ink:#3643b4; --chip-bg:#eef0fd; --chip-bd:#d5dafb;
/* Ссылка на задачу Jira (.tk). Самая частая мелкая надпись в таблицах — на одном экране
«Инвентаря» ее 66 штук. Акцент-2 (#8250e0) давал на --surface2 только 4.34; здесь тот же
фиолетовый, но затемненный: 5.81. В темной теме токен равен --accent2. */
--ticket-ink:#7433cf;
}
@media (prefers-color-scheme: light){
:root[data-theme="auto"]{
/* ── СВЕТЛАЯ ТЕМА. Палитра из дизайн-макета (2026-07-25, 3-я редакция). ───────────────────
Структура страниц НЕ менялась — взята только палитра и три решения из макета:
• нейтрали уведены в ИНДИГО (акцент портала), а не чистый серый: фон, линии и текст из
одного семейства, поэтому страница выглядит собранной, а не «белой по умолчанию»;
• семантика (авария/внимание/норма) отделена от акцента: акцент = «портал», семантика =
«состояние», пересекаться не должны;
• «норма» не красится зеленым (--bar-ok): зеленая полоса при 19 здоровых сервисах ничего
не сообщает и только добавляет шум. Цвет появляется там, где нужно действие.
⚠ Отступление от макета: `--faint` там был #8b92a6 (≈3.2:1 к белому) — годится для
декоративных подписей, но в портале этот токен несет настоящий текст, поэтому затемнен
на ступень с сохранением тона. Требование ≥4.5:1 для текста.
Приемы ТЕМНОЙ темы здесь не применяются (свечение на body, градиент на «выбрано», тень как
разделитель): на белом они дают муть и шум. */
/* 1. Поверхности. Фон холодный нейтральный с уклоном в индиго и заметно темнее карточки —
иначе белые карточки растворяются и разделять их приходится тенью. */
--bg:#f3f4f8; --surface:#ffffff; --surface2:#eceef5; --elev:#ffffff;
--border:#e2e4ee; --border2:#ccd1e0; --border3:#a6adc2;
--sunken:#f7f8fb; /* утопленное ВНУТРИ белой карточки — светлее фона страницы */
/* 2. Текст: три явно различимых ступени. ⚠ Проверять на ТРЕХ фонах, а не только на белом:
большая часть «тихого» текста (свежесть данных, подписи групп меню, подсказки форм, шапка)
лежит на --bg и --surface2, а не на карточке. Прежний --faint #6b7288 давал 4.79 к белому,
но 4.35 к --bg и 4.13 к --surface2 — то есть не проходил там, где его и видно чаще всего.
Текущий #656b80: bg 4.82 · surface 5.29 · surface2 4.57. */
--text:#171a2b; --muted:#565d75; --faint:#656b80;
/* 3. Акцент: заливка яркая (белый текст на ней читается), текст/ссылки — затемненный вариант. */
--accent:#4a59d8; --accent2:#8250e0; --accent-ink:#3643b4;
--on-accent:#fff; --knob:#fff;
--pill:rgba(23,26,43,.06); --pill-on:rgba(255,255,255,.28);
/* 4. «Выбрано / активно» — мягкая подложка вместо сплошного градиента. */
--fill-sel:color-mix(in srgb, var(--accent) 13%, #fff);
--on-sel:#2f3aa0;
--bd-sel:color-mix(in srgb, var(--accent) 32%, #fff);
/* 5. Статусы: подобранные светлые тона, НЕ осветленные темные. */
--ok:#14713f; --ok-bg:#ecf7f0; --ok-bd:#b7e0c6;
--warn:#a85a08; --warn-bg:#fdf5e8; --warn-bd:#f4d9a8;
--danger:#bd2a2a; --danger-bg:#fdf0ef; --danger-bd:#f6c9c5;
/* «В норме» на полосах и точках состояния — НЕЙТРАЛЬНЫЙ, а не зеленый (решение из макета).
В темной теме этот токен равен --ok: там зеленый работает как надо. */
--bar-ok:#cbd0dd;
/* 6. Тени: почти плоско. Глубину несет граница. */
--shadow:0 1px 2px rgba(23,26,43,.05);
/* 7. Severity — тот же монотонный порядок, значения под белый фон.
high и med разведены по ТОНУ и светлоте: иначе на полосе уязвимостей сливаются. */
--sev-crit:#bd2a2a; --sev-crit-bg:#fdf0ef; --sev-crit-bd:#f6c9c5;
--sev-high:#c2560d; --sev-high-bg:#fdf3ec; --sev-high-bd:#f5d3b4;
--sev-med :#9a5a08; --sev-med-bg :#fdf5e8; --sev-med-bd :#f4d9a8;
--sev-low :#2a52c4; --sev-low-bg :#eef1fd; --sev-low-bd :#c8d3f7;
--sev-info:#565d75; --sev-info-bg:#f1f2f7; --sev-info-bd:#e2e4ee;
/* Heat good→bad: насыщенные, а не пастельные. Порядок и семантика те же. */
--heat-1:#14713f; --heat-2:#4d7520; --heat-3:#a85a08; --heat-4:#c2560d; --heat-5:#bd2a2a;
/* Категориальная: на белом желтый и салатовый проваливаются, поэтому темные версии тех же
тонов. Порядок слотов сохранен (cat-1 = вход, cat-2 = выход, cat-8 = «Прочее»);
9–12 — только для круговой диаграммы. */
--cat-1:#3643b4; --cat-2:#c2560d; --cat-3:#0f6d63; --cat-4:#6b3ce0;
--cat-5:#9a5a08; --cat-6:#b41766; --cat-7:#14713f; --cat-8:#6b7288;
--cat-9:#0a6294; --cat-10:#5325d0; --cat-11:#9c1040; --cat-12:#3d5c1c;
/* Шапка/поповеры/подложки: на светлом темная полупрозрачность дает грязь. */
--header-bg:rgba(255,255,255,.86);
--overlay:rgba(23,26,43,.05);
/* «поверх выбранного»: в темной теме выбранное — насыщенная заливка, и белая подложка на ней
читается. В светлой выбранное — мягкий тинт, и белым по светлому счетчик пропадал совсем
(пункт «Обзор 365» в боковом меню). Поэтому здесь подложка темная, из семейства акцента. */
--overlay-on:rgba(47,58,160,.13);
--btn-hover:#eceef5;
--code-ink:#3a4056; --placeholder:#9aa1b4;
/* Иконки на нейтральной плитке — затемненные версии темнотемных пастелей (на белой плитке
пастель не читается). Хюи сохранены, чтобы сценарии по-прежнему различались взглядом. */
--ico:#4a5169; --ico-fam:#6d3fc0; --ico-tm:#0f6b59; --ico-sup:#8a5a12;
--ok-solid:#14713f; /* белый бегунок на нем = 6.06:1 */
/* Тени оверлеев — единственное место, где тень в светлой теме работает на смысл. */
--pop-shadow:0 8px 24px -8px rgba(23,26,43,.16), 0 2px 6px -2px rgba(23,26,43,.08);
--pop-shadow-lg:0 16px 40px -12px rgba(23,26,43,.2), 0 3px 8px -3px rgba(23,26,43,.08);
--tip-shadow:0 6px 18px -6px rgba(23,26,43,.18);
--auth-shadow:0 8px 28px -12px rgba(23,26,43,.2);
--skel-sheen:rgba(23,26,43,.04);
--badge-ink:#ffffff;
--chip-ink:#3643b4; --chip-bg:#eef0fd; --chip-bd:#d5dafb;
/* Ссылка на задачу Jira (.tk). Самая частая мелкая надпись в таблицах — на одном экране
«Инвентаря» ее 66 штук. Акцент-2 (#8250e0) давал на --surface2 только 4.34; здесь тот же
фиолетовый, но затемненный: 5.81. В темной теме токен равен --accent2. */
--ticket-ink:#7433cf;
}
}