/* ========================================================================== Дизайн-система design-kit. Один файл на весь интерфейс. Правила: - Цвета и тени — только из токенов ниже. Ни hex, ни rgb в стилях видов, в разметке и в JS: иначе тёмная тема рисует белые поля с невидимым текстом. - Радиусы — токены --r-lg / --r / --r-sm; у мелких элементов (плашка, чип, тег, значок, клавиша) — свои фиксированные, их список — DESIGN.md, раздел 2.5. - Перекраска под проект — только блок «Бренд»: он задаёт акцент сразу для обеих тем. - Тёмная тема записана дважды (системная и ручная через data-theme) — блоки держать одинаковыми. Обе — только для экрана: на печать всегда идёт светлая. - style="" в разметке запрещён (CSP style-src 'self'): только классы. Ширины полос ставит JS через CSSOM (data-pct / data-grow + applyBars). - Стили вида — отдельным файлом css/<вид>.css, с префиксом вида, на тех же токенах. - Состояния — классами is-* / active / open и aria-атрибутами; JS их только переключает. Справочник классов и разметки — DESIGN.md, живые примеры — showcase.html. ========================================================================== */ :root { /* ---- Бренд: перекраска под проект — только здесь, сразу для обеих тем ---- Светлая тема */ --brand: #2563eb; /* акцент: кнопки, ссылки, активный пункт */ --brand-hover: #1d4ed8; /* акцент при наведении */ --brand-fg: #ffffff; /* текст на акценте — контраст от 4.5:1 */ --brand-soft: #eaf1ff; /* фон выбранного и активного */ --brand-focus: rgba(37, 99, 235, .35); /* мягкое кольцо полей; обводка фокуса — сам акцент */ /* Тёмная тема */ --brand-dark: #6b9bff; --brand-dark-hover: #8db2ff; --brand-dark-fg: #0b1020; --brand-dark-soft: rgba(107, 155, 255, .14); --brand-dark-focus: rgba(107, 155, 255, .45); /* ---- конец блока «Бренд» ---- */ color-scheme: light; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* Поверхности и текст */ --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #f1f3f6; --hover: #f2f5fb; --border: #e4e7ec; --border-strong: #cfd5de; --text: #111827; --text-2: #374151; --muted: #5b6474; --dim: #656e7d; /* светлее не делать: ниже 4.5:1 на --surface-3 */ /* Акцент — из бренда. В видах — только --accent* и --focus, не --brand* */ --accent: var(--brand); --accent-hover: var(--brand-hover); --accent-fg: var(--brand-fg); --accent-soft: var(--brand-soft); --focus: var(--brand-focus); /* Тона статусов: основной цвет, фон плашки, текст на плашке. Основной цвет — от 3:1 к поверхностям и к фону своего тона (графика: точки, полосы, значки) */ --ok: #15803d; --ok-bg: #e7f7ec; --ok-fg: #166534; --info: #0e7cc4; --info-bg: #e5f3fc; --info-fg: #0b5a8e; --danger: #dc2626; --danger-bg: #fdecec; --danger-fg: #a11b1b; --warn: #c26a06; --warn-bg: #fdf3e3; --warn-fg: #92400e; --yellow: #a08408; --yellow-bg: #fbf6dc; --yellow-fg: #7a5d06; --violet: #7c3aed; --violet-bg: #f1eafe; --violet-fg: #5b21b6; --neutral: #788191; --neutral-bg: #eef0f3; --neutral-fg: #4b5563; /* Текст на сплошной красной кнопке (в тёмной теме — тёмный: белый на светло-красном давал 2.8:1) */ --danger-solid-fg: #ffffff; /* Сплошная красная кнопка при наведении: светлая тема темнеет, тёмная светлеет — контраст текста только растёт */ --danger-hover: #b91c1c; /* Инверсная панель действий над выбором */ --inverse-bg: #111827; --inverse-fg: #f5f6f8; --inverse-border: rgba(255, 255, 255, .22); --inverse-hover: rgba(255, 255, 255, .12); /* Затемнение под окнами, карточкой и мобильным меню */ --backdrop: rgba(8, 12, 20, .42); /* Ручка и трек выключенного переключателя: трек — от 3:1 к поверхности, ручка — к треку */ --knob: #ffffff; --track-off: #788191; /* Маска затухания края таблицы: важна только прозрачность, от темы не зависит */ --mask: #000000; --mask-fade: rgba(0, 0, 0, .25); --shadow-1: 0 1px 2px rgba(16, 24, 40, .05); --shadow-2: 0 4px 12px rgba(16, 24, 40, .08); --shadow-3: 0 16px 40px rgba(16, 24, 40, .16); --r-lg: 12px; --r: 9px; --r-sm: 6px; /* Каркас */ --topbar-h: 52px; --sidebar-w: 236px; --gutter: 24px; /* Плотность таблиц */ --row-py: 8px; --row-px: 12px; --table-fz: 13px; } /* Тёмная тема: системная по умолчанию, ручной выбор — data-theme на (boot.js). Два блока ниже держать в синхроне: правка в одном — та же правка в другом. Только screen: браузер не печатает фоны, и светлый текст тёмной темы пропал бы на белой бумаге. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0c0f15; --surface: #131823; --surface-2: #181e2b; --surface-3: #1d2433; --hover: #1c2433; --border: #252d3d; --border-strong: #34405a; --text: #e7eaf0; --text-2: #cbd2dd; --muted: #a2abba; --dim: #8b95a6; --accent: var(--brand-dark); --accent-hover: var(--brand-dark-hover); --accent-fg: var(--brand-dark-fg); --accent-soft: var(--brand-dark-soft); --focus: var(--brand-dark-focus); --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --ok-fg: #86efac; --info: #38bdf8; --info-bg: rgba(56, 189, 248, .13); --info-fg: #7dd3fc; --danger: #f87171; --danger-bg: rgba(248, 113, 113, .14); --danger-fg: #fca5a5; --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13); --warn-fg: #fcd34d; --yellow: #facc15; --yellow-bg: rgba(250, 204, 21, .12); --yellow-fg: #fde68a; --violet: #a78bfa; --violet-bg: rgba(167, 139, 250, .14); --violet-fg: #c4b5fd; --neutral: #7f899a; --neutral-bg: rgba(255, 255, 255, .06); --neutral-fg: #b4bcc8; --danger-solid-fg: #1c0707; --danger-hover: #fca5a5; --inverse-bg: #e7eaf0; --inverse-fg: #0c0f15; --inverse-border: rgba(0, 0, 0, .22); --inverse-hover: rgba(0, 0, 0, .08); --backdrop: rgba(0, 0, 0, .6); --knob: #e7eaf0; --track-off: #34405a; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 4px 14px rgba(0, 0, 0, .45); --shadow-3: 0 18px 48px rgba(0, 0, 0, .6); } } @media screen { :root[data-theme="dark"] { color-scheme: dark; --bg: #0c0f15; --surface: #131823; --surface-2: #181e2b; --surface-3: #1d2433; --hover: #1c2433; --border: #252d3d; --border-strong: #34405a; --text: #e7eaf0; --text-2: #cbd2dd; --muted: #a2abba; --dim: #8b95a6; --accent: var(--brand-dark); --accent-hover: var(--brand-dark-hover); --accent-fg: var(--brand-dark-fg); --accent-soft: var(--brand-dark-soft); --focus: var(--brand-dark-focus); --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .13); --ok-fg: #86efac; --info: #38bdf8; --info-bg: rgba(56, 189, 248, .13); --info-fg: #7dd3fc; --danger: #f87171; --danger-bg: rgba(248, 113, 113, .14); --danger-fg: #fca5a5; --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .13); --warn-fg: #fcd34d; --yellow: #facc15; --yellow-bg: rgba(250, 204, 21, .12); --yellow-fg: #fde68a; --violet: #a78bfa; --violet-bg: rgba(167, 139, 250, .14); --violet-fg: #c4b5fd; --neutral: #7f899a; --neutral-bg: rgba(255, 255, 255, .06); --neutral-fg: #b4bcc8; --danger-solid-fg: #1c0707; --danger-hover: #fca5a5; --inverse-bg: #e7eaf0; --inverse-fg: #0c0f15; --inverse-border: rgba(0, 0, 0, .22); --inverse-hover: rgba(0, 0, 0, .08); --backdrop: rgba(0, 0, 0, .6); --knob: #e7eaf0; --track-off: #34405a; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 4px 14px rgba(0, 0, 0, .45); --shadow-3: 0 18px 48px rgba(0, 0, 0, .6); } } /* Компактная плотность таблиц: data-density="compact" на (boot.js) */ :root[data-density="compact"] { --row-py: 4px; --row-px: 10px; --table-fz: 12.5px; } /* -------------------------------------------------------------------------- Тона. Любой элемент с классом tone-* получает --c / --c-bg / --c-fg, а компоненты (badge, dot, chip, callout, stat, progress, log-line…) рисуют себя через них. Тон наследуется вниз: у плашки внутри тонированной строки задавайте свой tone-*. -------------------------------------------------------------------------- */ .tone-ok { --c: var(--ok); --c-bg: var(--ok-bg); --c-fg: var(--ok-fg); } .tone-info { --c: var(--info); --c-bg: var(--info-bg); --c-fg: var(--info-fg); } .tone-danger { --c: var(--danger); --c-bg: var(--danger-bg); --c-fg: var(--danger-fg); } .tone-warn { --c: var(--warn); --c-bg: var(--warn-bg); --c-fg: var(--warn-fg); } .tone-yellow { --c: var(--yellow); --c-bg: var(--yellow-bg); --c-fg: var(--yellow-fg); } .tone-violet { --c: var(--violet); --c-bg: var(--violet-bg); --c-fg: var(--violet-fg); } .tone-neutral { --c: var(--neutral); --c-bg: var(--neutral-bg); --c-fg: var(--neutral-fg); } .tone-accent { --c: var(--accent); --c-bg: var(--accent-soft); --c-fg: var(--accent); } /* ------------------------------ База ------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, p { margin: 0; } h1 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; } h2 { font-size: 16px; font-weight: 620; } h3 { font-size: 14px; font-weight: 620; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Ссылка в тексте подчёркнута: одного цвета мало (WCAG 1.4.1, у «Графита» акцент = цвет текста). Ссылки-компоненты с классом (nav-item, btn, tab…) — без подчёркивания */ a:not([class]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } code, .mono { font-family: var(--mono); font-size: .92em; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } /* Обводка фокуса — сплошным акцентом (от 3:1 к фону); мягкий --focus — только кольцо полей */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent-soft); } /* Спрайт иконок: не display:none — так надёжно рисует символы во всех браузерах */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; } .icon-sm { width: 14px; height: 14px; } .icon-lg { width: 20px; height: 20px; } /* top/left обязательны: иначе скрытая подпись внутри прокручиваемой таблицы растягивает страницу */ .sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Временное поле для копирования в буфер без Clipboard API */ .sr-copy { position: fixed; top: -1000px; left: 0; opacity: 0; } /* ------------------------------ Раскладка -------------------------------- */ .row { display: flex; align-items: center; gap: 8px; } .row-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 8px; } .grow { flex: 1 1 auto; min-width: 0; } .spacer { flex: 1 1 auto; } .stack-sm > * + * { margin-top: 6px; } .stack > * + * { margin-top: 12px; } .stack-lg > * + * { margin-top: 20px; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; } @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------ Каркас ----------------------------------- */ .app { min-height: 100vh; display: grid; grid-template-rows: var(--topbar-h) 1fr; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-areas: "top top" "side main"; } .topbar { grid-area: top; position: sticky; top: 0; z-index: 40; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; color: var(--text); white-space: nowrap; } .brand:hover { text-decoration: none; } .brand-mark { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-fg); flex: none; } .brand-mark .icon { width: 17px; height: 17px; } .topbar .menu-toggle { display: none; } .topbar-search { flex: 0 1 340px; min-width: 120px; margin-left: 6px; } .topbar-search .input { height: 32px; background: var(--surface-2); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; } /* Кнопка-значок поиска вместо поля — только на телефоне, где поле скрыто */ .topbar .topbar-search-btn { display: none; } /* Слот, который JS перерисовывает точечно, не даёт своей коробки */ .topbar-slot { display: contents; } /* Индикатор фоновой работы в шапке: */ .status-pill { min-width: 0; max-width: 320px; overflow: hidden; } .status-pill .pill-text { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .topbar { gap: 6px; padding: 0 8px; } .topbar-search { display: none; } .topbar .topbar-search-btn { display: inline-flex; } .status-pill { max-width: 140px; } .status-pill .pill-extra { display: none; } } .sidebar { grid-area: side; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 12px 10px 16px; border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; font-size: 13.5px; text-decoration: none; border: 0; background: none; width: 100%; text-align: left; } .nav-item:hover { background: var(--hover); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--accent-soft); color: var(--accent); } .nav-item .icon { color: var(--dim); } .nav-item.active .icon { color: var(--accent); } .nav-item .count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-3); border-radius: 10px; padding: 1px 7px; font-variant-numeric: tabular-nums; } .nav-item .count[class*="tone-"] { background: var(--c-bg); color: var(--c-fg); } .nav-item.active .count:not([class*="tone-"]) { background: var(--surface); } .nav-section { margin: 16px 10px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); display: flex; align-items: center; } .nav-section a { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; } /* Элемент списка в сайдбаре (недавнее, избранное): заголовок, мета, полоса */ .side-item { display: block; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-2); font-size: 12.5px; text-decoration: none; } .side-item:hover { background: var(--hover); text-decoration: none; } .side-item.active { background: var(--surface-3); color: var(--text); } .si-top { display: flex; align-items: center; gap: 6px; } .si-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .si-meta { display: flex; gap: 6px; margin-top: 2px; color: var(--dim); font-size: 11px; } .side-item .progress, .side-item .minibar { margin-top: 5px; } .sidebar-foot { margin-top: auto; padding: 14px 2px 0; font-size: 11px; color: var(--dim); display: flex; flex-direction: column; gap: 10px; } .sidebar-meta { padding: 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Сводка в сайдбаре: плитки по две в ряд, .wide — во всю ширину */ .stats-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .sstat { display: block; min-width: 0; padding: 7px 9px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); text-decoration: none; } a.sstat:hover { border-color: var(--c, var(--accent)); text-decoration: none; } .sstat.wide { grid-column: 1 / -1; } .sstat-label { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sstat-label .icon { width: 12px; height: 12px; } .sstat-value { font-size: 14px; font-weight: 650; color: var(--c-fg, var(--text)); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sstat-sub { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sstat-sub.sstat-sub-wrap { white-space: normal; overflow-wrap: anywhere; } .sstat.skeleton { min-height: 46px; border: 0; } .main { grid-area: main; min-width: 0; padding: 20px var(--gutter) 72px; } .main:focus { outline: none; } .page { max-width: 1480px; margin: 0 auto; } .page-narrow { max-width: 980px; margin: 0 auto; } .page-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .page-header .titles { min-width: 0; flex: 1 1 320px; } .page-header .subtitle { color: var(--muted); font-size: 13px; margin-top: 3px; } .page-header .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .crumbs { font-size: 12px; color: var(--dim); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .crumbs a { color: var(--dim); } /* Мобильный режим: сайдбар выезжает слева по .app.nav-open, поля страницы 16px, горизонтальной прокрутки нет */ @media (max-width: 900px) { :root { --gutter: 16px; } .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; } .topbar .menu-toggle { display: inline-flex; } .sidebar { position: fixed; left: 0; top: var(--topbar-h); bottom: 0; width: min(290px, 86vw); height: auto; z-index: 60; transform: translateX(-100%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s; box-shadow: var(--shadow-3); } .app.nav-open .sidebar { transform: none; visibility: visible; transition: transform .18s ease; } /* Затемнение под открытым меню; тап по нему закрывает меню (обработчик на .app) */ .app.nav-open::after { content: ""; position: fixed; inset: var(--topbar-h) 0 0 0; background: var(--backdrop); z-index: 55; cursor: pointer; } .main { padding: 14px var(--gutter) 72px; overflow-x: clip; } } @media (max-width: 480px) { .brand .brand-text { display: none; } } /* ------------------------------ Загрузка и экран ошибки ------------------ */ .sk-title { height: 28px; width: 240px; max-width: 70%; } .sk-block { height: 180px; margin-top: 18px; } .sk-lines { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; } .sk-line { height: 13px; } .sk-w1 { width: 92%; } .sk-w2 { width: 76%; } .sk-w3 { width: 84%; } .sk-w4 { width: 61%; } .boot-note { margin-top: 14px; color: var(--dim); font-size: 13px; } .screen-msg { max-width: 600px; margin: 6vh auto 0; } .screen-msg h2 { margin-bottom: 8px; } .screen-msg .btn { margin-top: 14px; } .noscript { padding: 24px; } /* Плашка поверх страницы под шапкой (сессия истекла, нет связи): */ .input-group { display: flex; min-width: 0; } .input-group > .input, .input-group > .select { border-radius: var(--r-sm) 0 0 var(--r-sm); flex: 1 1 auto; } .input-group > .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-left: -1px; } /* Кнопка внутри поля справа (показать пароль, очистить): */ .input-action { position: relative; display: block; min-width: 0; } .input-action > .input { padding-right: 40px; } .input-action > .btn { position: absolute; right: 3px; top: 3px; } .input-action > .btn[aria-pressed="true"] { background: transparent; color: var(--accent); } .check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; } .check input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; flex: none; } .cb { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; vertical-align: middle; } /* Подтверждение вводом имени в окне (confirmDialog с requireText) */ .confirm-type { margin-top: 14px; } /* Группа полей в рамке с подписью; -plain — без рамки (группа радиокнопок) */ .fieldset { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px 14px; margin: 0; min-width: 0; } .fieldset > legend { padding: 0 6px; margin-left: -6px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); } .fieldset-plain { border: 0; padding: 0; margin: 0; min-width: 0; } .fieldset-plain > legend { padding: 0; margin-bottom: 6px; font-size: 12.5px; font-weight: 550; color: var(--text-2); } /* Переключатель: */ .switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--text-2); user-select: none; position: relative; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* Состояние видно и без цвета: трек выключенного — --track-off (от 3:1), ручка включённого — --accent-fg */ .switch .track { width: 32px; height: 18px; border-radius: 10px; background: var(--track-off); position: relative; transition: background .15s; flex: none; } .switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-1); transition: transform .15s; } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::after { transform: translateX(14px); background: var(--accent-fg); } .switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; } .switch input:disabled + .track { opacity: .5; } /* Сегменты: кнопки с aria-pressed или радиокнопки . Высота — как у кнопок рядом: 34 (рамка 1 + отступ 3 + сегмент 26), -sm — 28 */ .segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r); flex-wrap: wrap; } .segmented button, .segmented label { border: 0; background: transparent; border-radius: var(--r-sm); height: 26px; padding: 0 12px; font-size: 13px; font-weight: 550; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; position: relative; } .segmented button:hover, .segmented label:hover { color: var(--text); } .segmented .active, .segmented button[aria-pressed="true"], .segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } .segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; } .segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; } .segmented label > span { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; border-radius: var(--r-sm); margin: 0 -12px; } .segmented-sm button, .segmented-sm label { height: 20px; padding: 0 9px; font-size: 12.5px; } .segmented-sm label > span { height: 20px; padding: 0 9px; margin: 0 -9px; } /* Выбор режима крупными карточками:
*/ .option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .option-card { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; } .option-card:hover { border-color: var(--accent); } .option-card input { position: absolute; opacity: 0; } .option-card .oc-icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); flex: none; } .option-card .oc-text { display: flex; flex-direction: column; min-width: 0; } .option-card .oc-title { display: block; font-weight: 600; font-size: 13.5px; } .option-card .oc-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } .option-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); background: var(--accent-soft); } .option-card:has(input:checked) .oc-icon { background: var(--accent); color: var(--accent-fg); } .option-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .option-card:has(input:disabled) { opacity: .55; cursor: not-allowed; } /* ------------------------------ Плашки ----------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--c-bg, var(--neutral-bg)); color: var(--c-fg, var(--neutral-fg)); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } button.badge { border: 0; cursor: pointer; font-family: inherit; } button.badge:hover, a.badge:hover { box-shadow: inset 0 0 0 1px var(--c, var(--border-strong)); text-decoration: none; } .badge-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--muted); } .badge-sq { border-radius: 5px; padding: 1px 6px; font-size: 10.5px; letter-spacing: .02em; } .badge .icon { width: 12px; height: 12px; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--neutral)); flex: none; } .dot-pulse { animation: pulse 1.4s ease-in-out infinite; } .tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 5px; background: var(--surface-3); color: var(--text-2); font-family: var(--mono); font-size: 11.5px; margin: 1px 2px 1px 0; } .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface-2); font-family: var(--mono); font-size: 10.5px; color: var(--muted); } /* ------------------------------ Таблица ---------------------------------- */ /* position: relative — абсолютно позиционированное внутри обрезается прокруткой таблицы, а не удлиняет страницу */ .table-wrap { position: relative; overflow: auto; border-top: 1px solid var(--border); max-width: 100%; } /* Таблица шире окна: край, за которым есть колонки, затухает (JS ставит fade-left / fade-right по прокрутке). Маска, а не фон: строки с заливкой её не перекрывают. */ .table-wrap.fade-right { -webkit-mask-image: linear-gradient(to right, var(--mask) calc(100% - 36px), var(--mask-fade)); mask-image: linear-gradient(to right, var(--mask) calc(100% - 36px), var(--mask-fade)); } .table-wrap.fade-left { -webkit-mask-image: linear-gradient(to left, var(--mask) calc(100% - 36px), var(--mask-fade)); mask-image: linear-gradient(to left, var(--mask) calc(100% - 36px), var(--mask-fade)); } .table-wrap.fade-left.fade-right { -webkit-mask-image: linear-gradient(to right, var(--mask-fade), var(--mask) 36px, var(--mask) calc(100% - 36px), var(--mask-fade)); mask-image: linear-gradient(to right, var(--mask-fade), var(--mask) 36px, var(--mask) calc(100% - 36px), var(--mask-fade)); } .table-wrap.sticky { max-height: calc(100vh - 230px); } .card > .table-wrap:first-child { border-top: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--table-fz); } .table th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: left; white-space: nowrap; padding: 8px var(--row-px); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); border-bottom: 1px solid var(--border); } .table td { padding: var(--row-py) var(--row-px); border-bottom: 1px solid var(--border); vertical-align: middle; } /* scroll-margin: строка при j/k не прячется под липкой шапкой таблицы */ .table tbody tr { transition: background .08s; scroll-margin-top: 40px; } .table tbody tr:hover > td { background: var(--hover); } .table tbody tr.is-selected > td { background: var(--accent-soft); } .table tbody tr.is-focused > td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); } .table tbody tr.is-muted > td { color: var(--muted); } .table tbody tr.clickable { cursor: pointer; } /* Строка, требующая внимания: полоса слева и фон по тону (без tone-* — warn) */ .table tbody tr.is-attn > td { background: var(--c-bg, var(--warn-bg)); } .table tbody tr.is-attn > td:first-child { box-shadow: inset 3px 0 0 var(--c, var(--warn)); } .table tbody tr.is-attn.is-focused > td:first-child { box-shadow: inset 3px 0 0 var(--c, var(--warn)), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); } .table tbody tr.is-attn:hover > td { background: var(--hover); } /* Выбранная строка «внимания»: фон выбора важнее фона тона, полоса тона слева остаётся */ .table tbody tr.is-attn.is-selected > td { background: var(--accent-soft); } .table .col-check { width: 36px; padding-right: 0; } .table .col-actions { width: 1%; white-space: nowrap; text-align: right; } .table .t-right { text-align: right; } .table .t-center { text-align: center; } .table tr:last-child td { border-bottom: 0; } .table-plain th { position: static; background: transparent; } .table-plain td, .table-plain th { padding: 6px 8px; } /* Сортировка: */ .th-sort { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .th-sort:hover { color: var(--text); } .th-sort .icon { width: 12px; height: 12px; opacity: .55; } th[aria-sort="ascending"] .th-sort, th[aria-sort="descending"] .th-sort { color: var(--text); } th[aria-sort="ascending"] .th-sort .icon, th[aria-sort="descending"] .th-sort .icon { opacity: 1; color: var(--accent); } /* Карточки вместо таблицы на телефоне: , у td — data-label. Значение из нескольких строк (плашка + пояснение) — в общей обёртке: */ @media (max-width: 640px) { /* Своя вертикальная прокрутка на телефоне ловит палец — листается страница */ .table-wrap.sticky { max-height: none; } .table-stack thead { display: none; } .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; } .table-stack tr { border-bottom: 1px solid var(--border); padding: 8px 0; } .table-stack tr:last-child { border-bottom: 0; } .table-stack td { border: 0; padding: 3px var(--row-px); display: flex; gap: 12px; justify-content: space-between; align-items: baseline; text-align: right; min-width: 0; } .table-stack td::before { content: attr(data-label); color: var(--dim); font-size: 11.5px; text-align: left; flex: none; } .table-stack td:not([data-label])::before, .table-stack td[data-label=""]::before { content: none; } .table-stack td.cell-main { justify-content: flex-start; text-align: left; font-weight: 600; flex-wrap: wrap; row-gap: 2px; } /* Вторая строка главной ячейки — под ключом, обычным начертанием */ .table-stack td.cell-main > .note { flex-basis: 100%; font-weight: 400; margin-top: 0; } .table-stack td.col-check, .table-stack td.col-actions { width: auto; } /* Флажок — в левом верхнем углу карточки, а не отдельной строкой */ .table-stack tbody tr:has(> td.col-check) { position: relative; padding-left: 36px; } .table-stack tbody td.col-check { position: absolute; left: 12px; top: 12px; padding: 0; } /* Состояния строки — на всю карточку, а не полосами по каждой ячейке */ .table-stack tbody tr > td { background: transparent !important; box-shadow: none !important; } .table-stack tbody tr:hover { background: var(--hover); } .table-stack tbody tr.is-selected { background: var(--accent-soft); } .table-stack tbody tr.is-attn { background: var(--c-bg, var(--warn-bg)); box-shadow: inset 3px 0 0 var(--c, var(--warn)); } .table-stack tbody tr.is-attn.is-selected { background: var(--accent-soft); } .table-stack tbody tr.is-focused { box-shadow: inset 3px 0 0 var(--accent); } } /* ------------------------------ Прогресс --------------------------------- */ /*
*/ .progress { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; } .progress > span { display: block; height: 100%; width: 0; background: var(--c, var(--accent)); border-radius: 4px; transition: width .35s ease; } .progress-thin { height: 3px; } .progress.indeterminate > span { width: 30% !important; animation: indet 1.2s ease-in-out infinite; } /* Полосы распределения:
…
, flex-grow ставит applyBars(). catbar — крупная с интерактивными сегментами, minibar — в строках списков */ .segbar, .catbar, .minibar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--surface-3); gap: 2px; } .catbar { height: 10px; border-radius: 6px; } .minibar { height: 4px; border-radius: 3px; gap: 1px; } .segbar > span, .catbar > span, .minibar > span { display: block; height: 100%; background: var(--c, var(--neutral)); min-width: 3px; flex: 0 1 0; transition: flex-grow .3s ease; } .minibar > span { min-width: 2px; } .catbar > span:hover { filter: brightness(1.1); } /* Этапы с прогрессом:
…
…
…
*/ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .step { padding: 9px 11px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); } .step .step-name { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); display: flex; align-items: center; gap: 6px; } .step .step-meta { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; justify-content: space-between; gap: 6px; } .step .progress { margin-top: 7px; height: 4px; } .step.is-active { border-color: var(--accent); background: var(--accent-soft); } .step.is-active .step-name { color: var(--accent); } .step.is-done .progress > span { background: var(--ok); width: 100% !important; } .step.is-done .step-name { color: var(--ok-fg); } /* Шаги мастера:
    2. … (кнопка — если на шаг можно вернуться) */ .wizard { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; padding: 0; list-style: none; } .wstep { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 550; font-size: 13px; } .wstep + .wstep::before { content: ""; width: 32px; height: 1px; background: var(--border-strong); margin-right: 2px; } .wstep-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-strong); font-size: 12px; font-weight: 650; background: var(--surface); flex: none; } .wstep-n .icon { width: 13px; height: 13px; } .wstep.is-active { color: var(--text); } .wstep.is-active .wstep-n { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); } .wstep.is-done .wstep-n { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-fg); } .wstep-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 6px; margin: -4px -6px; border-radius: var(--r-sm); color: inherit; font: inherit; font-weight: inherit; cursor: pointer; } .wstep-btn:hover:not(:disabled) { background: var(--hover); } .wstep-btn:disabled { cursor: default; } @media (max-width: 640px) { .wstep + .wstep::before { width: 12px; } /* На телефоне подпись только у текущего шага */ .wizard .wstep:not(.is-active) .wstep-label { display: none; } } /* ------------------------------ Фильтры-чипы ----------------------------- */ /*
    */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 550; white-space: nowrap; text-decoration: none; transition: border-color .12s, background .12s; } .chip:hover { border-color: var(--c, var(--accent)); text-decoration: none; } .chip .chip-count { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 650; } .chip .chip-pct { color: var(--dim); font-size: 11px; font-weight: 500; } .chip .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; } .chip.active, .chip[aria-pressed="true"] { background: var(--c-bg, var(--accent-soft)); border-color: var(--c, var(--accent)); color: var(--c-fg, var(--accent)); } .chip.active .chip-count, .chip[aria-pressed="true"] .chip-count { color: inherit; } /* Пустой чип (0 строк): пунктир и --muted, без прозрачности — она роняла текст ниже AA */ .chip.is-zero { color: var(--muted); border-style: dashed; } .chip.is-zero .chip-count { color: var(--muted); } /* Кнопки внутри чипа: действие и «снять фильтр» */ .chip .chip-act, .chip .chip-x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -4px; border-radius: 5px; color: var(--dim); border: 0; background: transparent; padding: 0; } .chip .chip-act:hover, .chip .chip-x:hover { background: var(--surface-3); color: var(--text); } .chip.active .chip-x, .chip[aria-pressed="true"] .chip-x { color: inherit; } .chip-sub { height: 26px; font-size: 12px; } /* Активные фильтры под тулбаром: подпись, снимаемые чипы, «Сбросить» */ .filterbar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 0 16px 10px; } .filterbar-label { font-size: 12px; color: var(--dim); } .filterbar .chip { max-width: 100%; } /* Ряд чипов сжимается до ширины карточки: иначе длинный чип (с крестиком) уходит за край телефона */ .filterbar > .chips { min-width: 0; max-width: 100%; } @media (max-width: 640px) { .filterbar { padding: 0 12px 10px; } } /* ------------------------------ Плитки-итоги ----------------------------- */ /*
    Внутри button — только span (div в кнопке — невалидный HTML) */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: var(--shadow-1); min-width: 0; color: inherit; text-decoration: none; display: block; text-align: left; } .stat .stat-label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .stat .stat-label .icon { color: var(--c, var(--dim)); } .stat .stat-value { display: block; font-size: 24px; font-weight: 680; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--c-fg, var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat .stat-sub { display: block; font-size: 11.5px; color: var(--dim); margin-top: 1px; } .stat.clickable, a.stat, button.stat { cursor: pointer; transition: border-color .12s, box-shadow .12s; font: inherit; } button.stat { width: 100%; } .stat.clickable:hover, a.stat:hover, button.stat:hover { border-color: var(--c, var(--accent)); box-shadow: var(--shadow-2); text-decoration: none; } /* Плитка-фильтр включена */ .stat.is-active, .stat[aria-pressed="true"] { border-color: var(--c, var(--accent)); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); } /* ------------------------------ Тулбар ----------------------------------- */ /* Строка поиска и фильтров над таблицей:
    ………
    */ .toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; flex-wrap: wrap; } .toolbar .search { width: 260px; max-width: 100%; } /* Выпадающий список в тулбаре — по содержимому, а не во всю строку */ .toolbar .select { width: auto; max-width: 240px; } .toolbar-note { font-size: 12px; color: var(--dim); } @media (max-width: 640px) { .toolbar { padding: 10px 12px; } .toolbar .search { width: 100%; } .toolbar .select { flex: 1 1 140px; max-width: none; } } /* ------------------------------ Вкладки ---------------------------------- */ /* Ссылки (a.tab с aria-current="page") или кнопки (button.tab с aria-pressed) */ /* Линия под вкладками — тенью внутри ряда, а не рамкой: подчёркивание текущей целиком внутри прокручиваемого ряда, лишней вертикальной прокрутки нет */ .tabs { display: flex; gap: 2px; box-shadow: inset 0 -1px 0 var(--border); overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; } .tabs::-webkit-scrollbar { display: none; } .tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-weight: 550; font-size: 13.5px; white-space: nowrap; text-decoration: none; } .tab:hover { color: var(--text); text-decoration: none; } /* Ряд прокручивается и обрезает всё за краем — обводка фокуса внутрь */ .tab:focus-visible { outline-offset: -2px; } .tab.active, .tab[aria-current="page"], .tab[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); } .tab .count { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-3); border-radius: 10px; padding: 0 6px; font-variant-numeric: tabular-nums; } /* ------------------------------ Пагинация -------------------------------- */ .pager { display: flex; align-items: center; gap: 4px; padding: 10px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; } .pager .page-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; } .pager .page-btn:hover { background: var(--hover); } .pager .page-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; } .pager .page-btn:disabled { opacity: .4; pointer-events: none; } .pager .page-gap { min-width: 20px; text-align: center; color: var(--dim); user-select: none; } .pager .pager-info { margin-left: auto; font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .pager { padding: 10px 12px; } } /* ------------------------------ Панель действий над выбором ------------- */ /*
    Выбрано: 3 из 420…
    Показать: .visible и inert = false; скрыть — наоборот. У кнопки со значком подпись — в .ab-label (на телефоне скрыта, имя кнопки — из aria-label) */ .actionbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(20px); z-index: 45; opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: var(--r-lg); background: var(--inverse-bg); color: var(--inverse-fg); box-shadow: var(--shadow-3); transition: opacity .15s, transform .15s; /* Без явной ширины блок с left:50% сжимается до половины экрана и переносится в две строки */ width: max-content; max-width: calc(100vw - 24px); flex-wrap: wrap; } .actionbar.visible { opacity: 1; transform: translateX(-50%); pointer-events: auto; } .actionbar .ab-count { font-weight: 650; font-size: 13px; margin-right: 6px; white-space: nowrap; } /* Пояснение в панели: прозрачность от её собственного цвета текста, а не .dim */ .actionbar .ab-note { font-size: 12px; font-weight: 500; opacity: .75; } .actionbar .btn { background: transparent; color: var(--inverse-fg); border-color: var(--inverse-border); height: 30px; font-size: 12.5px; } .actionbar .btn:hover { background: var(--inverse-hover); } .actionbar .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .actionbar .btn-danger-solid { background: var(--danger); color: var(--danger-solid-fg); border-color: var(--danger); } .actionbar .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .actionbar .btn-danger-solid:hover { background: var(--danger-hover); border-color: var(--danger-hover); } /* На инверсной панели акцентная обводка сливается с фоном — обводка цветом её текста */ .actionbar :focus-visible { outline-color: var(--inverse-fg); } /* Пока панель видна, низ страницы (пагинация) не уходит под неё */ body:has(.actionbar.visible) .main { padding-bottom: 120px; } @media (max-width: 640px) { .actionbar { bottom: 10px; padding: 8px 10px; gap: 6px; } /* У кнопок со значком — только значок: иначе 3–4 действия встают в два-три ряда */ .actionbar .btn:has(.icon) .ab-label { display: none; } .actionbar .btn:has(.icon) { padding: 0 9px; } } /* ------------------------------ Боковая карточка (drawer) ---------------- */ /* Строит ui.js drawer(): .drawer-layer > .drawer-backdrop + aside.drawer; .open — после первого расчёта стилей (void el.offsetWidth), иначе transition не сработает и выезда не будет */ .drawer-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 70; opacity: 0; transition: opacity .16s; } .drawer-backdrop.open { opacity: 1; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); z-index: 71; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-3); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease; outline: none; } .drawer.open { transform: none; } .drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 8px; } .drawer-head .drawer-title { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; margin-right: auto; min-width: 0; } .drawer-head-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 28px; } .drawer-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .drawer-section + .drawer-section { margin-top: 20px; } @media (max-width: 640px) { .drawer-head, .drawer-foot { padding-left: 16px; padding-right: 16px; } .drawer-body { padding: 14px 16px 24px; } } /* ------------------------------ Модальное окно --------------------------- */ /* Строит ui.js modal(): .modal-backdrop > .modal(.modal-sm|-lg|-xl) > .modal-head(h2 + .modal-x) + .modal-body + .modal-foot */ .modal-backdrop { position: fixed; inset: 0; z-index: 90; background: var(--backdrop); display: grid; place-items: center; padding: 20px; animation: fade .14s ease; } .modal { width: min(480px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-3); animation: pop .16s ease; max-height: calc(100vh - 40px); display: flex; flex-direction: column; outline: none; min-width: 0; } .modal-sm { width: min(400px, 100%); } .modal-lg { width: min(720px, 100%); } .modal-xl { width: min(960px, 100%); } .modal-head { padding: 16px 18px 6px; display: flex; align-items: flex-start; gap: 10px; } .modal-head h2 { margin-right: auto; min-width: 0; overflow-wrap: anywhere; } .modal-head .modal-x { margin: -4px -6px 0 0; } .modal-body { padding: 8px 18px 16px; color: var(--text-2); font-size: 13.5px; overflow-y: auto; min-height: 0; } .modal-body p + p { margin-top: 8px; } /* Перечень того, что затронет действие, — над текстом подтверждения */ .modal-list { margin: 0 0 10px; padding-left: 18px; max-height: 240px; overflow-y: auto; } .modal-list li + li { margin-top: 2px; } .modal-foot { padding: 12px 18px 16px; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } /* Окно заблокировано на время запроса: закрыть нельзя, кнопки приглушены */ .modal.is-locked .modal-foot .btn:not(.is-busy) { opacity: .6; } /* Форма в окне (ui.js prompt, formDialog):
    — метка для JS (Enter в поле, сброс ошибки); кнопки — в .modal-foot, вне формы */ .form-dialog { min-width: 0; } @media (max-width: 640px) { .modal-backdrop { padding: 10px; } } /* ------------------------------ Уведомления ------------------------------ */ /* Строит ui.js toast(): #toasts.toasts > .toast.tone-* > иконка + .toast-msg + .toast-btn? + .toast-close */ .toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; } .toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 11px 10px 11px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--c, var(--accent)); box-shadow: var(--shadow-3); font-size: 13px; color: var(--text); animation: toastin .18s ease; } .toast > .icon { color: var(--c, var(--accent)); margin-top: 1px; } .toast .toast-msg { flex: 1 1 auto; min-width: 0; word-break: break-word; user-select: text; } .toast .toast-msg a { color: var(--accent); } .toast .toast-close { border: 0; background: none; color: var(--dim); padding: 0 2px; line-height: 1; flex: none; } .toast .toast-close:hover { color: var(--text); } .toast .toast-close.done { color: var(--ok); } .toast .toast-btn { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 12.5px; padding: 0 2px; white-space: nowrap; flex: none; } .toast .toast-btn:hover { text-decoration: underline; } .toast.leaving { animation: toastout .16s ease forwards; } /* Свёрнутые закреплённые уведомления: «Ещё N важных — показать» */ .toast.toast-more { align-items: center; padding-top: 8px; padding-bottom: 8px; } /* Стопку JS поднимает над панелью действий и кнопками окна; нет места — ставит наверх */ .toasts.toasts-top { bottom: auto; } @media (max-width: 640px) { .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; } } /* ------------------------------ Выпадающее меню -------------------------- */ /* Строит ui.js attachMenu(): .menu-wrap > кнопка + .menu(.open, .menu-left) > .menu-item / .menu-sep / .menu-label / .menu-note. Меню пользователя — то же меню: .menu-note с именем и ролью, ниже «Выйти» (.menu-item.danger). Кнопка внутри прокрутки (таблица, окно, карточка) — JS выносит меню в : .menu-fixed + top/left от кнопки, у низа экрана раскрывается вверх (иначе прокрутка его обрезает) */ .menu-wrap { position: relative; display: inline-block; } .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; max-width: calc(100vw - 24px); padding: 5px; max-height: min(70vh, 520px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-3); display: none; } .menu.open { display: block; animation: pop .12s ease; } .menu.menu-left { left: 0; right: auto; } .menu.menu-fixed { position: fixed; right: auto; z-index: 96; } .menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; background: none; border-radius: var(--r-sm); font-size: 13px; color: var(--text-2); text-align: left; text-decoration: none; } .menu-item:hover { background: var(--hover); color: var(--text); text-decoration: none; } /* Пункт под фокусом клавиатуры (↑↓) — фон и обводка: одного фона --hover мало */ .menu-item:focus-visible { background: var(--hover); color: var(--text); text-decoration: none; outline: 2px solid var(--accent); outline-offset: -2px; } .menu-item:disabled { opacity: .5; cursor: default; } .menu-item .icon { color: var(--dim); } .menu-item.danger { color: var(--danger-fg); } .menu-item.danger .icon { color: var(--danger); } .menu-item.current { color: var(--accent); font-weight: 600; } .menu-item.current .icon { color: var(--accent); } .menu-sep { height: 1px; background: var(--border); margin: 5px 2px; } .menu-label { padding: 6px 9px 4px; font-size: 11px; font-weight: 650; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; } .menu-note { display: flex; align-items: center; gap: 9px; padding: 6px 9px; font-size: 12.5px; color: var(--muted); } .menu-note .icon { color: var(--dim); } /* ------------------------------ Пустые состояния, скелеты --------------- */ /*
    иконка

    …

    …

    кнопки
    */ .empty { padding: 48px 20px; text-align: center; color: var(--muted); } .empty .empty-icon { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--c-bg, var(--surface-3)); color: var(--c, var(--dim)); } .empty .empty-icon .icon { width: 22px; height: 22px; } .empty h3 { color: var(--text); margin-bottom: 4px; font-size: 15px; } .empty p { font-size: 13px; max-width: 520px; margin: 0 auto; overflow-wrap: anywhere; } .empty .btn { margin-top: 14px; } .empty .empty-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .empty-sm { padding: 24px 16px; } .skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--hover) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--r-sm); min-height: 12px; } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin .7s linear infinite; display: inline-block; vertical-align: -3px; flex: none; } /* Содержимое обновляется: старое приглушено (с задержкой — быстрый ответ не мигает) */ .is-loading { opacity: .55; transition: opacity .15s ease .12s; } /* ------------------------------ Описания (ключ-значение) ----------------- */ /*
    Ключ
    Значение
    …
    . Колонка ключей — до 170px, но не шире 40% (узкая карточка) */ .kv { display: grid; grid-template-columns: min(170px, 40%) minmax(0, 1fr); gap: 7px 14px; font-size: 13px; margin: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--text); word-break: break-word; min-width: 0; } .kv dd.mono { font-family: var(--mono); font-size: 12.5px; } .kv-tight { gap: 4px 12px; font-size: 12.5px; } /* Построчно в рамке:
    иконка Ключ
    …
    …
    */ .kv-rows { margin: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .kv-row { display: grid; grid-template-columns: min(170px, 40%) minmax(0, 1fr); gap: 12px; padding: 8px 12px; font-size: 13px; } .kv-row + .kv-row { border-top: 1px solid var(--border); } .kv-row dt { display: flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 550; } .kv-row dt .icon { color: var(--dim); } .kv-row dd { margin: 0; color: var(--text); word-break: break-word; min-width: 0; } @media (max-width: 640px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .kv dd { margin-bottom: 8px; } .kv-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* ------------------------------ Списки ----------------------------------- */ /* Значок в квадрате (шапка карточки, строка списка); тон — через tone-* */ .icon-box { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--c-bg, var(--surface-3)); color: var(--c, var(--muted)); } .icon-box-lg { width: 36px; height: 36px; border-radius: 10px; } /* Строки «значок — текст — действия»:
    • …
      …
      …
      …
    . Внутри карточки — без своей рамки. */ .list-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r); } .card > .list-rows { border: 0; border-radius: 0; } .list-row { display: flex; align-items: center; gap: 10px 12px; padding: 10px 14px; flex-wrap: wrap; min-width: 0; } .list-row + .list-row { border-top: 1px solid var(--border); } .lr-main { flex: 1 1 180px; min-width: 0; } .lr-title { font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .lr-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; } .lr-actions { display: flex; align-items: center; gap: 6px; flex: none; } @media (max-width: 640px) { .list-row { padding: 10px 12px; } } /* ------------------------------ Строки настроек -------------------------- */ /* Подпись с пояснением слева, элемент управления справа (на узком экране — под ней):
    …
    элемент
    */ .setting-row { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; } .setting-row + .setting-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .setting-text { flex: 1 1 240px; min-width: 0; } .setting-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); } .setting-hint { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 2px; } @media (max-width: 640px) { .setting-row > .segmented { width: 100%; } /* Поля сегментов уже: три варианта со значками помещаются в один ряд от 360px */ .setting-row > .segmented button, .setting-row > .segmented label { flex: 1 1 auto; justify-content: center; padding-left: 6px; padding-right: 6px; gap: 5px; } .setting-row > .segmented label > span { flex: 1 1 auto; justify-content: center; gap: 5px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; } } /* ------------------------------ Раскрывающиеся блоки --------------------- */ /* Стрелка раскрытия: иконка chevron-down с классом .chev — поворачивается у закрытого */ .chev { color: var(--dim); transition: transform .15s ease; } .collapse-btn[aria-expanded="false"] .chev, .fold:not([open]) > summary .chev { transform: rotate(-90deg); } /* «Подробнее» ссылкой:
    Подробнее…
    */ .details > summary { cursor: pointer; width: fit-content; font-size: 12.5px; color: var(--accent); user-select: none; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .details[open] > summary { margin-bottom: 6px; } /* Секция-аккордеон в рамке:
    иконка Название краткий итогиконка.chev
    …
    */ .folds { display: flex; flex-direction: column; gap: 8px; } .fold { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } .fold > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; list-style: none; cursor: pointer; user-select: none; border-radius: var(--r); } .fold > summary::-webkit-details-marker { display: none; } .fold > summary::marker { content: ""; } .fold > summary:hover { background: var(--hover); } .fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .fold[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--r) var(--r) 0 0; } .fold-title { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; } .fold-title .icon { color: var(--dim); } .fold-sum { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--muted); } .fold-body { padding: 12px; } /* Кнопка-раскрывашка в заголовке карточки (заголовок оборачивает кнопку, не наоборот):

    */ .collapse-btn { display: inline-flex; align-items: center; gap: 8px; padding: 3px 6px; margin: -3px -6px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; } .collapse-btn:hover { background: var(--hover); } /* ------------------------------ Лента событий ---------------------------- */ /* По дням, заголовок дня липкий:

    Сегодня

    • …
      …
    */ .feed { overflow-y: auto; max-height: 520px; overscroll-behavior: contain; } .feed-day { position: sticky; top: 0; z-index: 1; margin: 0; padding: 6px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); } .feed-list { list-style: none; margin: 0; padding: 0; } .feed-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 3px 10px; align-items: baseline; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: 13px; } .feed-group:last-child .feed-item:last-child { border-bottom: 0; } .feed-time { grid-row: span 2; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; } .feed-item > :not(.feed-time) { grid-column: 2; min-width: 0; } /* На телефоне вложенная прокрутка ловит палец — листается страница, день липнет под шапкой */ @media (max-width: 640px) { .feed { max-height: none; overflow: visible; } .feed-day { top: var(--topbar-h); } } /* ------------------------------ Лог и сырой текст ------------------------ */ /*
    12:01:02…
    */ .logbox { font-family: var(--mono); font-size: 12px; line-height: 1.55; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; max-height: 360px; overflow: auto; } .logbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .log-line { display: flex; gap: 8px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; } .log-line[class*="tone-"] { color: var(--c-fg); } .log-line .log-ts { color: var(--dim); flex: none; } .codeblock { font-family: var(--mono); font-size: 12px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; margin: 0; color: var(--text-2); } /* ------------------------------ Ячейки и мелочи -------------------------- */ /* Ключ строки моноширинным (хост, идентификатор, артикул); -btn — кнопка, открывает карточку */ .ident { font-family: var(--mono); font-size: 12.8px; font-weight: 550; color: var(--text); overflow-wrap: anywhere; } .ident-btn { border: 0; background: none; padding: 0; text-align: left; font-family: var(--mono); font-size: 12.8px; font-weight: 550; color: var(--text); cursor: pointer; overflow-wrap: anywhere; } .ident-btn:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* Кнопка «копировать» у значения: видна при наведении на строку, .always — всегда, .done — скопировано */ .copy-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; border: 0; border-radius: 5px; background: transparent; color: var(--dim); opacity: 0; transition: opacity .1s; vertical-align: middle; padding: 0; } tr:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.always { opacity: 1; } .copy-btn:hover { background: var(--surface-3); color: var(--text); } .copy-btn.done { opacity: 1; color: var(--ok); } @media (hover: none) { .copy-btn { opacity: 1; } } /* Вторая строка под главным значением ячейки */ .note { font-size: 11.5px; color: var(--dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Таблица горячих клавиш:
*/ .hk-keys { width: 150px; white-space: nowrap; } .hk-keys .kbd { min-width: 22px; } .hk-sep { color: var(--dim); font-size: 12px; margin: 0 5px; } /* Цель перехода по якорю коротко подсвечивается: JS ставит .is-target и снимает через 2 с */ .is-target { animation: flash 1.8s ease-out; } /* ------------------------------ Утилиты ---------------------------------- */ /* Идут после компонентов: перекрывают их одноклассовые правила (callout.small, note.tone-text) */ .muted { color: var(--muted); } .dim { color: var(--dim); } .small { font-size: 12px; } .tiny { font-size: 11px; } .strong { font-weight: 650; } .nowrap { white-space: nowrap; } .num { font-variant-numeric: tabular-nums; } .t-right { text-align: right; } .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .break { word-break: break-word; overflow-wrap: anywhere; } .clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* Цвет текста по тону без плашки: …; tone-strong — основным цветом тона */ .tone-text { color: var(--c-fg, inherit); } .tone-strong { color: var(--c, inherit); } /* Устаревшие данные: курсив и --muted, без прозрачности (она роняла контраст ниже AA) */ .is-stale { color: var(--muted); font-style: italic; } .mt-0 { margin-top: 0 !important; } .mt-sm { margin-top: 8px; } .mt { margin-top: 16px; } .mb { margin-bottom: 16px; } /* Видимость по роли: body.is-viewer скрывает .admin-only (права всё равно проверяет сервер) */ body.is-viewer .admin-only { display: none !important; } body:not(.is-viewer) .viewer-only { display: none !important; } /* ------------------------------ Анимации --------------------------------- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes toastout { to { opacity: 0; transform: translateX(16px); } } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } } @keyframes flash { 0%, 35% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); } } /* Меньше движения: анимации и переходы мгновенные, но индикаторы не врут — бегущая полоса становится ровной приглушённой (а не «30% готово»), спиннеры крутятся медленно, цель якоря подсвечивается без вспышки (класс JS снимает через 2 с) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .progress.indeterminate > span { width: 100% !important; animation: none !important; opacity: .45; } .spinner, .btn.is-busy::after { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } .is-target { animation: none !important; box-shadow: 0 0 0 3px var(--focus); } } /* ------------------------------ Видимость по ширине ---------------------- */ @media (max-width: 640px) { .hide-sm { display: none !important; } } @media (min-width: 641px) { .show-sm { display: none !important; } } /* ------------------------------ Сенсорный экран -------------------------- */ /* Палец — не курсор: цели нажатия от 32px (мелкие) до 40px (основные контролы) */ @media (pointer: coarse) { .btn, .input, .select { height: 40px; } .btn-icon { width: 40px; } .btn-sm, .input-sm, .select-sm, .actionbar .btn { height: 36px; } .btn-icon.btn-sm { width: 36px; } .pager .page-btn { min-width: 40px; height: 40px; } .chip { height: 36px; } .chip-sub { height: 32px; } .menu-item { min-height: 40px; } .toast .toast-close, .toast .toast-btn { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; } .copy-btn, .chip .chip-x, .chip .chip-act { width: 32px; height: 32px; } .cb, .check input { width: 20px; height: 20px; } } /* ------------------------------ Высокий контраст ------------------------- */ /* Режим высокой контрастности Windows заменяет фоны и тени — состояния, нарисованные ими, дублируются системными цветами (это не hex: правило «цвета только в токенах» не нарушено) */ @media (forced-colors: active) { .switch .track, .switch .track::after { forced-color-adjust: none; } .switch .track { background: Canvas; outline: 1px solid CanvasText; } .switch .track::after { background: CanvasText; box-shadow: none; } .switch input:checked + .track { background: Highlight; outline-color: Highlight; } .switch input:checked + .track::after { background: HighlightText; } .segmented .active, .segmented button[aria-pressed="true"], .segmented input:checked + span, .nav-item.active, .pager .page-btn.active, .chip.active, .chip[aria-pressed="true"], .tab.active, .tab[aria-current="page"], .tab[aria-pressed="true"], .btn[aria-pressed="true"], .stat.is-active, .stat[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; } .progress > span, .segbar > span, .catbar > span, .minibar > span, .dot { forced-color-adjust: none; background: Highlight; } } /* ------------------------------ Печать ----------------------------------- */ /* Цвета на печати — светлые всегда (тёмные блоки токенов только для screen) */ @media print { .topbar, .sidebar, .actionbar, .toasts, .banner, .page-header .actions, .drawer-layer, .modal-backdrop { display: none !important; } .toolbar, .pager, .filterbar, .cell-actions, .copy-btn { display: none !important; } .app { display: block; } .main { padding: 0; } .card, .stat { box-shadow: none; } /* Прокручиваемое печатается целиком, без затухания краёв */ .table-wrap, .feed, .logbox, .codeblock, .modal-list { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; } }
…
…
gзатемh