/* ========================================================================== LUMO / base — токены, сброс, типографика, браузерные поверхности. -------------------------------------------------------------------------- Первый файл новой системы стилей админки. Он заменяет связку ui-tokens/ui-base/ui-theme/ui-layout/ui-components/ui-overrides/ui-unified/ ui-workspace, где к августу 2026 накопилось 1404 `!important`: слои перекрывали друг друга, и каждое новое правило приходилось усиливать. Здесь `!important` не используется вообще — если правило не применилось, значит его место в каскаде выбрано неверно, и чинить надо это. Порядок подключения (см. _assets_admin_v2.html): base.css → ui.css → shell.css → pages/<страница>.css Тема приходит из theme-bootstrap.js атрибутом data-theme на ещё до первого кадра, поэтому переключение не моргает. Значения — только светлая и тёмная; «авто» разрешается в одну из них скриптом. Алиасы --crm-*: часть старых файлов (ui-modal.css) ещё живёт на мигрирующих страницах. Пока это так, старые имена остаются синонимами новых — иначе модалки поедут по цвету. Когда последняя страница уйдёт со старого CSS, блок алиасов удаляется целиком. ========================================================================== */ :root{ /* --- шрифт и метрика --- */ --lm-font: 'Golos Text', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --lm-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --lm-text-xs: 11.5px; --lm-text-sm: 12.5px; --lm-text-md: 13.5px; --lm-text-lg: 15px; --lm-text-xl: 18px; --lm-text-2xl: 22px; --lm-radius-xs: 6px; --lm-radius-sm: 8px; --lm-radius-md: 11px; --lm-radius-lg: 14px; --lm-radius-pill: 999px; /* --- каркас --- Шапка состоит из двух строк: лента групп и постоянная строка разделов активной группы. --lm-bar-h — их общая высота: на неё завязаны отступ страницы, положение рейки и все липкие заголовки таблиц. */ --lm-bar-row: 48px; --lm-subbar-h: 40px; --lm-bar-h: 88px; --lm-rail-w: 78px; --lm-page-max: 1660px; /* --- цвета шасси: тёмные в обеих темах, это рама интерфейса --- */ --lm-chassis: #0e1830; --lm-chassis-2: #16223c; --lm-chassis-3: #1e2c4b; --lm-chassis-line: #26355a; --lm-chassis-text: #eaf0ff; --lm-chassis-muted: #93a4c4; --lm-chassis-dim: #6d7fa3; /* Значок-счётчик на тёмном шасси: собственный красный, потому что акцент темы может сливаться с фоном ленты (в тёплой теме шасси бордовое). */ --lm-chassis-badge: #dc2626; --lm-chassis-ok: #4ade80; --lm-chassis-warn: #fbbf24; /* --- акцент и семантика --- */ --lm-accent: #2f6cf6; --lm-accent-hover: #2457cc; --lm-accent-soft: #dbe7ff; --lm-accent-text: #ffffff; --lm-ok: #15803d; --lm-ok-soft: #dcfce7; --lm-warn: #b45309; --lm-warn-soft: #fef3c7; --lm-danger: #c81e1e; --lm-danger-soft: #fee2e2; --lm-info: #1d4ed8; --lm-info-soft: #dbeafe; /* --- рабочие поверхности (светлая тема) --- */ --lm-bg: #eef3fb; --lm-surface: #ffffff; --lm-surface-2: #f7faff; --lm-surface-3: #eef3fb; --lm-border: #d5dfec; --lm-border-soft: #e4ebf6; --lm-text: #182235; --lm-muted: #5d6d87; --lm-muted-2: #7e8ea6; --lm-shadow-pop: 0 8px 18px rgba(0, 0, 0, .13), 0 2px 5px rgba(0, 0, 0, .07); --lm-shadow-panel: 0 12px 22px rgba(0, 0, 0, .16), 0 3px 8px rgba(0, 0, 0, .10); --lm-shadow-btn: 0 1px 3px rgba(0, 0, 0, .14); --lm-ease: cubic-bezier(.22, 1, .36, 1); --lm-dur-fast: .14s; --lm-dur: .19s; } /* ---------- Тёплая тема ---------- Вторая тема продукта вместо тёмной: песочно-жёлтый фон, кремовые рабочие поверхности, бордовое шасси и красный акцент. Цвета заданы владельцем (#f5e78d и #b10821), остальное выведено из них так, чтобы текст держал контраст: тёмно-коричневый по жёлтому даёт 12:1, белый по красному — 7:1. Значение атрибута осталось `dark`: его пишут общие theme.js и theme-bootstrap.js, которыми пользуются ещё и оба PWA-кабинета. Менять контракт ради названия — трогать чужие экраны, поэтому тема живёт под прежним ключом, а в переключателе называется «Тёплая». */ html[data-theme="dark"]{ --lm-bg: #f5e78d; --lm-surface: #fffdf2; --lm-surface-2: #fdf6d8; --lm-surface-3: #f7ecb8; --lm-border: #dcc879; --lm-border-soft: #ead99b; --lm-text: #2a1b0c; --lm-muted: #6b5326; --lm-muted-2: #8a7038; --lm-chassis: #4a0d16; --lm-chassis-2: #5c1420; --lm-chassis-3: #6d1f2b; --lm-chassis-line: #7a2b36; --lm-chassis-text: #fdf3d6; --lm-chassis-muted: #dcb2a8; --lm-chassis-dim: #b98d84; --lm-chassis-badge: #ef4358; --lm-chassis-ok: #7ddba0; --lm-chassis-warn: #f2c14e; --lm-accent: #b10821; --lm-accent-hover: #8f0619; --lm-accent-soft: #f7dcd6; --lm-accent-text: #fffdf2; --lm-ok: #1b6b3a; --lm-ok-soft: #dcefdd; --lm-warn: #8a5a08; --lm-warn-soft: #f7e6b8; --lm-danger: #7a0a17; --lm-danger-soft: #f6d9d5; --lm-info: #2f4f9e; --lm-info-soft: #dfe5f7; --lm-shadow-pop: 0 8px 18px rgba(74, 13, 22, .16), 0 2px 5px rgba(74, 13, 22, .10); --lm-shadow-panel: 0 12px 22px rgba(74, 13, 22, .20), 0 3px 8px rgba(74, 13, 22, .12); --lm-shadow-btn: 0 1px 3px rgba(74, 13, 22, .18); } /* Мост для файлов, ещё живущих на старых именах (ui-modal.css). Удалить вместе с последним старым CSS. */ :root{ --crm-accent: var(--lm-accent); --crm-accent-2: var(--lm-info); --crm-bg: var(--lm-bg); --crm-surface: var(--lm-surface); --crm-surface-2: var(--lm-surface-2); --crm-border: var(--lm-border); --crm-text: var(--lm-text); --crm-muted: var(--lm-muted); --crm-muted-2: var(--lm-muted-2); --crm-danger: var(--lm-danger); --crm-success: var(--lm-ok); --crm-warning: var(--lm-warn); --crm-radius-sm: var(--lm-radius-md); --crm-radius-md: var(--lm-radius-lg); --crm-shadow-md: var(--lm-shadow-panel); --crm-shadow-lg: var(--lm-shadow-panel); --crm-font: var(--lm-font); } /* ---------- сброс ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } html, body{ height: 100%; } body.lm{ margin: 0; font-family: var(--lm-font); font-size: var(--lm-text-md); line-height: 1.45; color: var(--lm-text); background: var(--lm-bg); -webkit-font-smoothing: antialiased; padding-top: var(--lm-bar-h); padding-left: var(--lm-rail-w); } /* Теговые сбросы завёрнуты в :where() — нулевая специфичность. Иначе `.lm button` (0,1,1) перебивал бы `.lm-btn` (0,1,0), и каждая кнопка компонента требовала бы усиления селектора: ровно так старая система и доехала до 1404 `!important`. */ :where(.lm) :where(h1, h2, h3, h4){ margin: 0; font-weight: 660; letter-spacing: -.012em; line-height: 1.25; } :where(.lm) :where(h1){ font-size: var(--lm-text-2xl); } :where(.lm) :where(h2){ font-size: var(--lm-text-xl); } :where(.lm) :where(h3){ font-size: var(--lm-text-lg); } :where(.lm) :where(p){ margin: 0; } :where(.lm) :where(a){ color: inherit; text-decoration: none; } :where(.lm) :where(button){ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :where(.lm) :where(input, select, textarea){ font: inherit; color: inherit; } :where(.lm) :where(svg){ display: block; } :where(.lm) :where(img){ max-width: 100%; } :where(.lm) :where(table){ border-collapse: collapse; } /* Цифры в таблицах и счётчиках не должны прыгать по ширине. */ .lm .num, .lm td, .lm .lm-count{ font-variant-numeric: tabular-nums; } /* ---------- браузерные поверхности ---------- */ .lm ::selection{ background: color-mix(in srgb, var(--lm-accent) 26%, transparent); color: var(--lm-text); } .lm :focus-visible{ outline: 2px solid var(--lm-accent); outline-offset: 2px; border-radius: var(--lm-radius-xs); } .lm :focus:not(:focus-visible){ outline: none; } .lm-scroll{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--lm-muted) 40%, transparent) transparent; } .lm-scroll::-webkit-scrollbar{ width: 9px; height: 9px; } .lm-scroll::-webkit-scrollbar-track{ background: transparent; } .lm-scroll::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--lm-muted) 34%, transparent); border: 2px solid transparent; background-clip: padding-box; border-radius: var(--lm-radius-pill); } .lm-scroll::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--lm-muted) 58%, transparent); background-clip: padding-box; } .lm-scroll::-webkit-scrollbar-button{ display: none; width: 0; height: 0; } /* ---------- утилиты ---------- */ .lm-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } [hidden]{ display: none !important; } /* единственное исключение: атрибут hidden обязан побеждать display компонента */ @media (prefers-reduced-motion: reduce){ .lm *, .lm *::before, .lm *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }