/* ============================================================================ ДИЗАЙН «СЕТЕВЫЕ РЕШЕНИЯ 2.0» - КОМПОНЕНТЫ, этап 1 переноса (design-handoff/design/components.css, см. design/DESIGN.md). НАМЕРЕННО В КОНЦЕ ФАЙЛА, а не сразу после токенов, как буквально написано в DESIGN.md §6. У двух правил здесь одноимённые селекторы с уже существующими выше (`body`, `.dtable`, `.tabs`), и §6 отдельно требует: «Существующие .dtable и .tabs заменить новыми правилами (имена совпадают)». В CSS при равной специфичности побеждает тот, что идёт ПОЗЖЕ по файлу - положить этот блок в начало значило бы, что старые .dtable/.tabs (они дальше по файлу) тут же отбили бы новые правила, и ничего не заменилось бы на деле. Здесь, в конце, замена происходит ровно так, как описано в задании. Остальные классы отсюда (.btn, .card, .tabs__tab, .navshell и т.д.) новые и ни с чем не сталкиваются - они просто не используются разметкой до следующих этапов переноса (DESIGN.md §6: каркас/меню - этап 2, окна инструмента - этап 4). До тех пор это неактивный код, который ничего не меняет на экране, кроме того, что перечислено явно в diff-сводке этапа 1. ============================================================================ */ /* ---------- База ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh); -webkit-font-smoothing: antialiased; } a { color: var(--accent-text); } a:hover { color: var(--text); } h1, h2, h3 { margin: 0; letter-spacing: -.01em; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [hidden] { display: none !important; } .mono { font-family: var(--font-mono); } .muted { color: var(--muted); } .faint { color: var(--faint); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 14px; height: 14px; } /* ========================================================================= КАРКАС: боковое меню + основная область На узком экране меню уезжает наверх (flex-wrap), без JS. ========================================================================= */ .app { display: flex; flex-wrap: wrap; min-height: 100vh; } .sidebar { flex: 1 1 var(--w-sidebar); max-width: 100%; background: var(--surface); border-right: 1px solid var(--line); padding: var(--sp-5) 14px; display: flex; flex-direction: column; gap: 18px; } .project-switch { position: relative; } .project-switch select { width: 100%; height: 44px; appearance: none; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 600; padding: 0 36px 0 12px; } .project-switch .icon { position: absolute; right: 12px; top: 13px; pointer-events: none; color: var(--muted); } .nav { display: flex; flex-direction: column; gap: 2px; } .nav__head { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 0 10px; margin-bottom: var(--sp-1); } .nav__item { display: flex; align-items: center; gap: 10px; min-height: var(--h-nav); padding: 0 10px; border-radius: var(--r-md); color: var(--muted); text-decoration: none; font-weight: 500; border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%; } .nav__item:hover { background: var(--surface-2); color: var(--text); } .nav__item.is-active { background: var(--accent-soft); color: var(--text); font-weight: 600; } .nav__item.is-soon { color: var(--faint); } .nav__item .badge { margin-left: auto; } .nav__item .count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); } .sidebar__footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--sp-3); } /* height: 100vh, а не только flex-растяжение от .app - тем же способом, что .navshell ниже задаёт себе height: 100vh напрямую, а не ждёт stretch от родителя. .app держит min-height: 100vh (пол, а не потолок - на мобильной ширине .navshell сам становится height: auto и уезжает наверх, и тогда .app должен расти вместе с контентом). Но min-height на родителе не даёт потомкам ЧЁТКОЙ высоты для stretch по flex-кросс-оси: при одном только flex: 1 у #home/#tool-screen внутри них высота считалась от контента (1724px при настройке в 903px высоты окна), overflow-y: auto не включался вообще (нечему быть overflow) - форма ничем не прокручивалась и .runbar пряталась в выросшем контенте. Чёткая height: 100vh здесь чинит всю цепочку сразу; исключение для мобильной ширины - в её медиа-запросе ниже, рядом с .navshell. */ .main { height: 100vh; flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; } /* Верхняя полоса: поиск + глобальные статусы + главное действие. .app-topbar - новая, постоянная шапка каркаса; .topbar здесь не трогаем отдельным селектором намеренно - это имя уже занято собственной шапкой #workspace (строка 711 выше, логотип/проект прогона/назад), и даём им общий набор свойств, а не разводим на два почти одинаковых блока. */ .app-topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: 14px var(--sp-8); background: var(--surface); border-bottom: 1px solid var(--line); } .topbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; } /* Проект в шапке (DESIGN.md §2) - компактно, в строку, не колонкой, как в форме настройки: это указатель "для кого сейчас работаем", а не поле формы. Форма "+ новый проект" всплывает снизу, а не раздвигает шапку - иначе открытие/закрытие сдвигало бы поиск и флайаут вправо и влево. */ .topbar-project { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .topbar-project .field.compact { flex-direction: row; align-items: center; gap: 8px; min-width: 0; } .topbar-project .field.compact .label { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; } .topbar-project select#project { min-width: 170px; max-width: 220px; } .topbar-project > .hint { font-size: var(--fs-sm); white-space: nowrap; } .topbar-project > .hint.missing { color: var(--warn); } .search-trigger { flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 10px; height: var(--h-control); padding: 0 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); color: var(--faint); cursor: pointer; text-align: left; } .search-trigger span { flex: 1; } kbd { font-family: var(--font-mono); font-size: var(--fs-xs); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--muted); background: var(--surface-2); } /* Шапка страницы инструмента */ .page-head { background: var(--surface); border-bottom: 1px solid var(--line); } .page-head__row { padding: 18px var(--sp-8) var(--sp-4); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); } .page-head__row:has(+ .tabs) { padding-bottom: 0; } .page-head h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; margin: var(--sp-1) 0 2px; } .page-head__sub { margin: 0; color: var(--muted); } .page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .page-head .tabs { padding: var(--sp-2) var(--sp-8) 0; border-bottom: 0; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-md); color: var(--faint); } .breadcrumbs a { color: var(--muted); text-decoration: none; } /* Контейнер контента и раскладка «основное + правая колонка» */ .page { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: var(--sp-7) var(--sp-8) 48px; display: flex; flex-direction: column; gap: var(--sp-6); } .split { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; } .split__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); } .split__rail { flex: 1 1 var(--w-rail); min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); } @media (min-width: 1100px) { .split__rail--sticky { position: sticky; top: var(--sp-6); } } /* ========================================================================= БАЗОВЫЕ КОМПОНЕНТЫ ========================================================================= */ /* Карточка - по настоящему эталону (setevie-design/new/setevie-design/ components.css:118, дословно, только var(--r-xl) вместо литерала 12px - это тот же токен). Раньше была своя пара .card--pad/.card__head - убрана целиком, разметка переведена на .sect/.sh (components-v3.css, уже взяты из кита) - два похожих способа оформить карточку только путали. */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; } /* .section/.section__head/.section__title - мертвы, живая разметка карточек настроек использует .sect/.sh из components-v3.css (дословно по эталону). */ /* Кнопки */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 36px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color var(--ease), filter var(--ease); } .btn:hover { border-color: var(--text); color: var(--text); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--primary:hover { border-color: var(--accent); filter: brightness(.95); } .btn--ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn--ghost:hover { border-color: transparent; background: var(--surface-2); } .btn--lg { min-height: var(--h-btn-lg); font-size: 15px; } .btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; } .btn--block { width: 100%; } .btn.is-loading { pointer-events: none; opacity: .8; } .btn.is-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Бейджи (статусы) */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--faint); } .badge--ok { background: var(--ok-soft); color: var(--ok); } .badge--warn { background: var(--warn-soft); color: var(--warn); } .badge--bad { background: var(--bad-soft); color: var(--bad); } .badge--info { background: var(--info-soft); color: var(--info); } .badge--accent { background: var(--accent-soft); color: var(--accent-text); } /* Точка статуса (история запусков) */ .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-2); } .dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); } .dot--bad { background: var(--bad); } .dot--run { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .35; } } /* Чипы: фильтры (одиночный выбор) и мультивыбор. Было: база здесь, состояния (hover/.on/счётчик) - в style.css, два файла на один компонент. Сведено в одно место, визуально ничего не изменилось - .chip.on остаётся тем способом показать «выбрано», которым реально пользуется разметка (n-граммы, кластеризация и другие фильтры). */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-weight: 500; cursor: pointer; transition: all .12s; } .chip:hover { border-color: var(--accent); color: var(--text); } .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 500; } /* Сколько строк прячет фильтр - прямо на чипе */ .chip[data-count]:not([data-count=""])::after { content: attr(data-count); margin-left: 5px; opacity: .65; font-weight: 400; font-variant-numeric: tabular-nums; } /* Переключатель (замена чекбокса-настройки) */ .switch { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px; border: 0; background: transparent; cursor: pointer; text-align: left; } .switch__track { width: 34px; height: 20px; border-radius: var(--r-full); background: var(--line-2); position: relative; flex: none; transition: background var(--ease); } .switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left var(--ease); } .switch[aria-checked="true"] .switch__track { background: var(--accent); } .switch[aria-checked="true"] .switch__track::after { left: 16px; } .switches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 2px var(--sp-4); } .switches--divided { border-top: 1px solid var(--line); padding-top: var(--sp-3); } /* .switch--chip - та же кнопка-переключатель (role="switch"/aria-checked, общий обработчик клика), только в виде плашки (эталон - холст в Claude: «Источники трафика»), не бегунка. Второй механизм многовыбора не заводится - меняется исключительно внешний вид. */ .switch--chip { display: inline-flex; min-height: 32px; padding: 0 13px; border-radius: var(--r-full); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-weight: 500; } .switch--chip .switch__track { display: none; } .switch--chip[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* Поля формы */ .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--sp-4); } .field { display: flex; flex-direction: column; min-width: 0; } .field__label { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-md); font-weight: 600; margin-bottom: 6px; } .field__value { font-family: var(--font-mono); color: var(--accent-text); } .field__hint { font-size: var(--fs-sm); color: var(--faint); margin-top: 6px; } .input, .select, .textarea { width: 100%; height: var(--h-control); padding: 0 12px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); } .select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; } .textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; } .input--mono { font-family: var(--font-mono); } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .range { width: 100%; height: var(--h-control); margin: 0; accent-color: var(--accent); } input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; } /* Поле-поиск внутри рамки (фильтр кампаний, поиск по полям) */ .search { display: flex; align-items: center; gap: var(--sp-2); height: 40px; padding: 0 8px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); } .search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; } .search .icon { color: var(--faint); } /* Список с выбором (кампании): рамка + поиск + тело */ .picker { border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; } .picker .search { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; height: var(--h-control); } .picker__body { max-height: 240px; overflow: auto; } /* Уведомления внутри страницы */ .alert { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); padding: 14px var(--sp-4); border-radius: var(--r-xl); background: var(--surface-2); } .alert > .icon { margin-top: 1px; } .alert__body { flex: 1 1 260px; } .alert__body strong { display: block; } .alert--warn { background: var(--warn-soft); } .alert--warn > .icon { color: var(--warn); } .alert--ok { background: var(--ok-soft); color: var(--ok); } .alert--bad { background: var(--bad-soft); } .alert--bad > .icon { color: var(--bad); } .alert--info { background: var(--info-soft); } .alert--info > .icon { color: var(--info); } .alert--compact { padding: 10px 12px; align-items: center; font-size: var(--fs-md); font-weight: 500; } /* Всплывающие уведомления (core.js → toast) */ .toasts { position: fixed; right: var(--sp-6); bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 100; } .toast { min-width: 260px; max-width: 380px; padding: 12px 14px; border-radius: var(--r-xl); background: var(--text); color: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.18); display: flex; gap: 10px; align-items: flex-start; } .toast--bad { background: var(--bad); color: #fff; } /* Вкладки (совместимо с существующим .tabs) */ /* Таблица данных (совместимо с существующим .dtable) */ .dtable-wrap { overflow-x: auto; } .dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .dtable th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-align: left; padding: 10px var(--sp-4); white-space: nowrap; border-bottom: 1px solid var(--line); } .dtable td { padding: 0 var(--sp-4); height: 46px; border-top: 1px solid var(--line); vertical-align: middle; } .dtable tr:first-child td { border-top: 0; } .dtable tbody tr:hover td { background: var(--surface-2); } .dtable tr.is-selected td { background: var(--accent-soft); } .dtable .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .dtable .col-check { width: 40px; } .dtable th[aria-sort] { cursor: pointer; } .dtable th[aria-sort="ascending"]::after { content: " ↑"; } .dtable th[aria-sort="descending"]::after { content: " ↓"; } /* Отчёт клиенту (tool-report.js, reportTable()): несколько сводных .dtable подряд в одной прокрутке, не одна большая таблица - у отчёта нет тысяч строк, которые оправдывали бы виртуализацию .scroller (он не входит в «шесть» из web/README.md). sticky-шапка .dtable рассчитана на ОДНУ таблицу на весь экран - у нескольких подряд она наезжала бы одна на другую при прокрутке мимо границы между блоками. */ .report-block { padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--line); } .report-block:last-child { border-bottom: 0; } .report-block h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); } .report-block .dtable th { position: static; } /* Панель над таблицей: заголовок + массовые действия */ .table-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 18px 18px 14px; } .table-bar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* .toolbar - своя версия (панель фильтров) уже есть в style.css, с разбором почему именно такой padding/border; эта только перетирала часть свойств, не используясь отдельно. */ /* Шкала значения (WasteScore и т.п.) */ .bar { display: flex; align-items: center; gap: 10px; min-width: 140px; } .bar__track { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .bar__fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); } .bar__value { font-family: var(--font-mono); font-size: var(--fs-sm); width: 34px; } /* Бейдж типа данных CRM: data-type="string|integer|..." */ .type-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; background: var(--surface-2); color: var(--muted); } .type-badge[data-type="integer"], .type-badge[data-type="double"] { background: var(--info-soft); color: var(--info); } .type-badge[data-type^="crm_"] { background: var(--accent-soft); color: var(--accent-text); } .type-badge[data-type="date"], .type-badge[data-type="datetime"] { background: var(--ok-soft); color: var(--ok); } .type-badge[data-type="char"], .type-badge[data-type="boolean"] { background: var(--vio-soft); color: var(--vio); } .type-badge[data-type="user"] { background: var(--warn-soft); color: var(--warn); } /* Сводка запуска (правая колонка инструмента) */ .run-summary { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-md); } .run-summary li { display: flex; justify-content: space-between; gap: var(--sp-3); } .run-summary li > span:first-child { color: var(--muted); } .run-summary li > strong { text-align: right; } .run-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-3); } /* Прогресс выполнения */ .progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .progress__fill { height: 100%; background: var(--accent); transition: width .3s ease; } .progress--indeterminate .progress__fill { width: 30%; animation: indet 1.2s ease-in-out infinite; } @keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* Строки списка (история запусков, прошлые результаты) */ .list-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 18px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; } a.list-item:hover { background: var(--surface-2); color: var(--text); } .list-item .dot { margin-top: 7px; } .list-item__body { flex: 1; min-width: 0; } .list-item__title { display: block; font-weight: 600; } .list-item__sub { display: block; font-size: var(--fs-md); color: var(--muted); } .list-item__meta { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); text-align: right; white-space: pre-line; } /* Иконка-плитка (цвет по направлению) */ .tile { width: 36px; height: 36px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; flex: none; } .tile--ctx { background: var(--accent-soft); color: var(--accent-text); } .tile--seo { background: var(--info-soft); color: var(--info); } .tile--an { background: var(--ok-soft); color: var(--ok); } .tile--neutral { background: var(--surface-2); color: var(--muted); } /* Шкала периодов (SEO) */ .periods { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .period { flex: 1 1 260px; border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .period--current { border-color: var(--accent); } .period__head { display: flex; justify-content: space-between; align-items: center; } .period__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .timeline { display: flex; flex-direction: column; gap: 6px; } .timeline__track { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); } .timeline__seg { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--line-2); } .timeline__seg--current { background: var(--accent); } .timeline__labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--faint); } /* Пустое состояние / место под картинку */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px var(--sp-4); text-align: center; color: var(--faint); } .empty strong { color: var(--text); } .placeholder { border: 1.5px dashed var(--line-2); border-radius: var(--r-2xl); } /* Определения (карточка проекта) */ .deflist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-md); } .deflist dt { color: var(--muted); } .deflist dd { margin: 0; } /* ========================================================================= Мобильная ширина ========================================================================= */ @media (max-width: 720px) { .app-topbar, .page-head__row, .page-head .tabs { padding-left: var(--sp-4); padding-right: var(--sp-4); } .page { padding: var(--sp-5) var(--sp-4) 40px; } .sidebar { border-right: 0; border-bottom: 1px solid var(--line); } .toasts { left: var(--sp-4); right: var(--sp-4); } } /* ========================================================================= РЕЛЬС - перенесён на каркас v2 (components-v3.css: .rail/.rb/.rb__bottom, setevie-design/new/setevie-design, октябрь 2026). Старые .navshell/ .rail__btn/.flyout (сворачивающаяся панель раздела, localStorage('nav')) отсюда убраны целиком вместе с разметкой в index.html - рельс теперь всегда 60px, список инструментов раздела живёт в .toolnav, не во втором развороте поверх рельса. ========================================================================= */ /* Верхняя полоса страницы при меню A: проект + статус + поиск */ .topbar__project { height: 40px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 600; padding: 0 12px; } /* ========================================================================= ОКНА ИНСТРУМЕНТА: Настройка → Прогон → Результаты
содержит три
Переключатель — .stages (это навигация, не вкладки внутри формы) ========================================================================= */ .stages { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-xl); background: var(--surface-2); border: 1px solid var(--line); } .stages__item { display: flex; align-items: center; gap: var(--sp-2); min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; text-decoration: none; } .stages__item .num { font-family: var(--font-mono); font-size: var(--fs-sm); } .stages__item[aria-current="page"] { background: var(--surface); box-shadow: var(--shadow); color: var(--text); } .stages__item[aria-current="page"] .num { color: var(--accent-text); } .stages__item:disabled { opacity: .45; cursor: default; } .stages__item.is-running .num { display: none; } .stages__item.is-running::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; } /* .steps/.step/.step__num/.step__body (шаги с кружками-нумерацией) убраны - все 9 инструментов переведены на .card.sect/.sh (эталон), классы нигде в разметке больше не встречаются. */ .more { border-top: 1px dashed var(--line-2); padding-top: var(--sp-3); } .more > summary { cursor: pointer; font-weight: 600; color: var(--accent-text); } .more[open] > summary { margin-bottom: var(--sp-4); } /* Нижняя панель запуска — всегда видна на экране настройки */ /* .runbar/.runbar__inner/.runbar__summary и .result-meta/.result-meta__params убраны - разметка их больше не использует (кнопки запуска переехали в .top/.launch-card, шапка результата переведена на .top/.meta). */ /* Этапы прогона */ .run-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: var(--sp-3); } .run-step { display: flex; gap: 10px; align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-xl); background: var(--surface-2); } .run-step__mark { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; background: var(--line-2); color: var(--muted); } .run-step[data-state="done"] .run-step__mark { background: var(--ok); color: #fff; } .run-step[data-state="run"] { background: var(--accent-soft); } .run-step[data-state="run"] .run-step__mark { background: var(--accent); color: var(--accent-ink); } .run-step[data-state="error"] { background: var(--bad-soft); } .run-step[data-state="error"] .run-step__mark { background: var(--bad); color: #fff; } .run-step strong { display: block; font-size: 13.5px; } .run-step span { font-size: var(--fs-sm); color: var(--muted); } .log { margin: 0; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.7; color: var(--muted); white-space: pre-wrap; max-height: 320px; overflow: auto; } /* KPI-плитки «текущий против базы». Селекторы с .card (а не голые .kpis/.kpi) - намеренно: components-v3.css позже в каскаде готовит СВОЙ .kpis/.kpi под будущую плитку «было/стало» (ещё не подключена ни к одной разметке, см. PROGRESS.md), и без .card голые правила здесь бы ей проигрывали - живая SEO-плитка превращалась в грид вместо строки. Реальная разметка везде несёт оба класса (class="kpis card"), так что это не теряет охват. */ /* .kpis.card (SEO - единственный, у кого сейчас есть сравнение периодов) - у .kpi уже свой padding по бокам, card добавляет только отступ сверху/ снизу и overflow:hidden, чтобы первая/последняя плитка не торчали углами за скруглённую рамку. flex: none - без него это единственный ряд в .left без явного flex-shrink, и flexbox жал именно его первым, когда раскрытые графики требовали места: плитки визитов/покупок/выручки схлопывались в ноль, а не .scroller (пойман вживую в браузере: .toolbar/.table-hint уже были flex: none, .kpis.card - нет, и вся теснота доставалась ему одному). */ .kpis.card { display: flex; flex-wrap: wrap; flex: none; padding: 4px 0; overflow: hidden; } .card .kpi { flex: 1 1 200px; min-width: 0; padding: var(--sp-4) 18px; display: flex; flex-direction: column; gap: var(--sp-1); } .card .kpi + .kpi { border-left: 1px solid var(--line); } /* Подписи/значение/дельта внутри плитки - .kpi__l/__v/__d, дословно по эталону (components-v3.css), только коробка выше остаётся своей (строка, а не сетка - см. комментарий у .kpis.card). */ /* Разделы отчёта (SEO: Метрика/Вордстат/Топвизор) больше не отдельная колонка `.rnav`/`.rnav-shell` - пишутся прямо в #toolnav-groups теми же .grp/.grp__t/.ti, что обычный список инструментов раздела (core.js: renderToolnav, tool-seo.js). Слияние убрало и саму нужду в отдельном сворачивании этой колонки - .ti/.grp уже есть в components-v3.css, второго словаря классов не заводил. Таблица: строки-разделители периодов и итог */ .dtable tr.dtable__sep td { height: 30px; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .dtable tr.dtable__total td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--line-2); } /* График: база серым, текущий оранжевым */ .chart { width: 100%; height: 240px; display: block; } .chart__base { fill: none; stroke: var(--faint); stroke-width: 3; } .chart__cur { fill: none; stroke: var(--accent); stroke-width: 3; } .chart__band { fill: var(--accent-soft); opacity: .55; } /* Панель разбора моделью (.fab/.scrim/.dlg/.sel) - целиком в components-v3.css, дословно по эталону; своих .ai-fab/.ai-dialog у неё больше нет, markup() в agent-panel.js собирает её из тех же классов, что и остальное приложение. */ /* .radio-card/.radio-card__item - целиком в components-v2.css (контейнер + пункты, роль в Админке); модель панели разбора теперь выбирают