/* ============================================================ АДМИНКА — ОДИН ФАЙЛ СТИЛЕЙ. ЗАЧЕМ ВЫНЕСЕН ИЗ base.html (13.0). Внутри страницы стили ехали заново на КАЖДЫЙ клик — браузеру нечего было запомнить. Отдельный файл браузер забирает один раз. ЦВЕТА ЗДЕСЬ НЕТ ВООБЩЕ (13.1.2). Раньше в этом файле лежал полный набор значений «по умолчанию», а тот же набор — в `themes.py`. Два места, описывающих одну палитру, расходятся: поправишь синий в теме, забудешь здесь — и одно место на экране останется прежним, а заметит это владелец. Теперь цвет приезжает ТОЛЬКО из темы (`/theme.css`, подключается в `base.html` всегда, в том числе на странице входа). Здесь — размеры, шкала и правила. Любой шестнадцатеричный код, написанный ниже мимо `var(--...)`, ломает тему молча. Проверяется тестом. ============================================================ */ :root { /* --- ШКАЛА КЕГЛЕЙ. Семь ступеней, и всё живёт в них -------- Не «поставил 13, потому что 14 великовато». Размер, не попавший в шкалу, — ошибка, а не исключение; проверяется тестом. БАЗА 15px, А НЕ 14, КАК В ПРОТОТИПЕ. Инструмент смотрят с рабочего расстояния и по восемь часов: мельче — усталость к обеду. Прототип рисовался как картинка, а не как рабочее место. */ --fs-1: 11px; /* служебный капслок: ярлык плитки, группа меню */ --fs-2: 12px; /* счётчики, даты, подписи в плотных местах */ --fs-3: 13px; /* вторая строка: клиент · заказ, пояснения */ --fs-4: 15px; /* ОСНОВНОЙ ТЕКСТ */ --fs-5: 17px; /* заголовок панели */ --fs-6: 21px; /* заголовок страницы */ --fs-7: 26px; /* число на плитке */ /* --- ШАГ ОТСТУПОВ. Один на всю систему, все кратны четырём --- Отступ в 14 пикселей рядом с отступом в 16 глаз читает как «сделано наспех», не умея назвать причину. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --sidebar-w: 208px; --font: var(--fs-4)/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } body { margin: 0; font: var(--font); background: var(--bg); color: var(--text); } /* Движение в инструменте читается как задержка, а не как плавность. Единственное исключение — отклик на то, что человек трогает руками, и он ниже 120 мс. Уважение к настройке системы не обсуждается. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================================ ОБОЛОЧКА: боковое меню слева, содержимое справа. ============================================================ */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .side { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) var(--s3); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .side .brand { font-weight: 700; padding: var(--s1) var(--s2) var(--s4); display: flex; align-items: center; gap: var(--s2); } .side .brand img { max-height: 24px; max-width: 120px; } /* ЗАГОЛОВОК ГРУППЫ — ТРЕТЬЯ СТУПЕНЬ ТЕКСТА. Он не сообщение, а метка раздела списка: читают то, что под ним. Капслок здесь законен — ярлык короткий и его опознают, а не читают. */ .side .grp { font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-soft); padding: var(--s4) var(--s2) var(--s1); } .side a { display: flex; align-items: center; gap: var(--s2); min-height: 36px; padding: var(--s2); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; } .side a:hover { background: var(--row-hover); } /* АКТИВНЫЙ ПУНКТ ЗАЛИТ АКЦЕНТОМ, а не подкрашен им (13.0). Первая сборка красила его акцентным текстом на слабой заливке — и это оказалось невыполнимо в тёмной теме: там `accent-soft` приглушённый тёмный, `accent` средний тон того же цвета, между ними чуть больше двойки, и никакой подбор палитры это не спасает. Заливка опирается на пару `accent` / `on-accent`, которая обязана проходить 4.5 : 1 в любой теме и проверяется тестом. */ .side a.on { background: var(--accent); color: var(--on-accent); font-weight: 600; } .side a.on .ic { stroke: var(--on-accent); } .side a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Иконка без своего цвета: красится тем же, что и текст рядом. Поэтому тема заведения перекрашивает иконки сама, и подбирать им цвета отдельно не придётся ни разу. */ .ic { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ------------------------------------------------------------ СВЁРНУТОЕ МЕНЮ: иконка и ПОДПИСЬ ПОД НЕЙ. Голые иконки хорошо живут, пока их шесть. Десять превращаются в ребус: человек наводит курсор, чтобы прочитать то, что мог бы просто прочитать. ------------------------------------------------------------ */ html.side-thin .shell { grid-template-columns: 84px minmax(0, 1fr); } html.side-thin .side { padding: var(--s4) var(--s2); } html.side-thin .side a { flex-direction: column; gap: var(--s1); padding: var(--s2) var(--s1); text-align: center; } html.side-thin .side a span { font-size: var(--fs-1); line-height: 1.2; white-space: normal; max-width: 100%; } html.side-thin .side .grp, html.side-thin .side .who { display: none; } html.side-thin .side .brand span, html.side-thin .collapse { font-size: var(--fs-1); } /* Подвал панели: администрирование (раз в месяц), имя человека и выход. Прижат к низу и отчёркнут. Выход живёт ЗДЕСЬ, а не внутри группы «Управление», — иначе он исчезает у того, кому эта группа не видна. */ .side .side-foot { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border); } .side .who { padding: var(--s3) var(--s2); color: var(--muted); font-size: var(--fs-3); } .side form { margin: 0; } /* СВЕРНУТЬ. Меню уезжает целиком, содержимое разъезжается на всю ширину — это то, ради чего владелец кнопку и просил: на отчёте о прибыли лишние двести пикселей видны сразу. */ .collapse { background: transparent; color: var(--muted); border: 0; padding: var(--s2); cursor: pointer; font: inherit; text-align: left; width: 100%; border-radius: var(--radius-sm); } .collapse:hover { background: var(--row-hover); color: var(--text); } /* СЧЁТЧИКИ ОЧЕРЕДЕЙ В МЕНЮ (14.9). Общий элемент меню, а не часть экрана «Вопросы»: до 17.1 лежал в хвосте файла среди бесхозных правил, а его комментарий висел последней строкой файла, оторванный от него. Перенесён сюда без изменений — сверено разбором tinycss2. */ .side .nav-entry { display: flex; align-items: center; position: relative; } .side .nav-entry > a:first-child { flex: 1; min-width: 0; } .side .nav-count, .side .nav-badge { font-size: var(--fs-2); font-weight: 700; border-radius: 999px; background: var(--row-hover); color: var(--accent); padding: 4px 8px; min-width: 24px; text-align: center; } /* СЧЁТЧИК-ССЫЛКА («Заказы без автора») — ТА ЖЕ ПЛАШКА, ЧТО У «ВОПРОСОВ» (17.6, владелец). Он ``, и на него ложились правила пункта меню: рост 36px, отступы и `display: flex` — плашка вылезала из обводки и стояла выше соседней. Здесь эти правила сняты. */ .side .nav-count { flex: 0 0 auto; display: inline-block; min-height: 0; margin-left: 4px; line-height: inherit; text-decoration: none; } .side .nav-count:hover { background: var(--accent-soft); } .side .nav-badge { margin-left: auto; } /* СЧЁТЧИК-ССЫЛКА ВНУТРИ ОБВОДКИ АКТИВНОГО ПУНКТА (17.12, Вл. 3). В 17.6 плашку выровняли по росту, но заливка активного пункта лежала на одной ссылке, а счётчик «Заказов» — её сосед: на открытых «Заказах» он стоял вне обводки (у «Вопросов» плашка внутри ссылки — там было верно). Теперь заливку несёт весь пункт, а правый край у счётчика тот же, что у плашки «Вопросов» (отступ ссылки, `--s2`), — и в покое, и активным. */ .side .nav-entry:has(> .nav-count) { padding-right: var(--s2); border-radius: var(--radius-sm); } .side .nav-entry.is-on { background: var(--accent); border-radius: var(--radius-sm); } /* НАВЕДЕНИЕ — ТОЖЕ НА ВЕСЬ ПУНКТ СО СЧЁТЧИКОМ (18.1, владелец 25.10). 17.12 перенёс заливку АКТИВНОГО пункта на весь `.nav-entry`, а заливка при наведении осталась на одной ссылке (`.side a:hover`): на любой странице, кроме самих «Заказов», под курсором подсвечивался текст, а счётчик стоял вне подсветки. Теперь наведение красит пункт целиком — тем же цветом, что ссылка, и с тем же краем, что у активного. */ .side .nav-entry:has(> .nav-count):not(.is-on):hover { background: var(--row-hover); } html.side-thin .side .nav-count { position: absolute; right: 0; top: 0; } .content { min-width: 0; } /* РАБОЧАЯ ОБЛАСТЬ (13.1.3). Потолок поднят с 1360 и поля стали плавающими: на широком мониторе по краям оставалось по четыреста пустых пикселей, а содержимое жалось в середину. Совсем без потолка нельзя — не из-за Главной, ей всё равно, а из-за таблиц: строка заказа шириной в две с половиной тысячи пикселей теряется, глаз доходит до колонки «Создан» и уже не помнит, чья это строка. MAIN — КОЛОНКА, И ЭТО НЕ ОФОРМЛЕНИЕ, А ПОРЯДОК. Заголовок каждой страницы живёт в её собственном шаблоне, а тревога — одна на все сорок экранов, в оболочке. Чтобы тревога встала ПОД заголовком, не вписывая её в сорок шаблонов, порядок задан ступенями `order`. ПОРЯДОК — ОДИН НА ВСЕ ЭКРАНЫ (17.6, `ОФОРМЛЕНИЕ.md` §8, §11): заголовок, тревога, вкладки раздела, сообщение об удаче, содержимое. До 17.6 так стояли только заказы, хранилище, клиенты и партнёры — своими правилами, — а остальные экраны ставили вкладки НАД заголовком. Человек, переходя из «Клиентов» в «Аналитику», видел, как полоса вкладок прыгает с места на место. Сообщение об удаче — над содержимым, к которому относится, а не над заголовком. ШИРИНА — ТОЖЕ ОДНА. У заказов и хранилища потолка не было («таблица широкая»), но таблица заказов с 17.6 сама укладывается в ширину, а смысл потолка (строку в 2 500 пикселей глаз не держит) у широкой таблицы как раз сильнее. */ main { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 1760px; margin: 0 auto; padding: var(--s6) clamp(16px, 2.2vw, 48px) var(--s8); } main > h1 { order: -4; margin-bottom: calc(var(--s4) - 2px); } main > .alarms { order: -3; margin-bottom: calc(var(--s5) - 2px); } main > .tabs { order: -2; } main > .flash { order: -1; } /* Заголовок бывает не голым: в карточке плана он стоит в одной строке со значком и ссылкой. Поднимаем всю строку — иначе тревога встанет над заголовком именно на этом экране, и никто не поймёт, почему. */ main > .toolbar:has(h1) { order: -4; } /* Верхняя полоска: только на телефоне, где меню уезжает за край. */ .topbar { display: none; align-items: center; gap: var(--s3); background: var(--panel); border-bottom: 1px solid var(--border); padding: var(--s2) var(--s4); position: sticky; top: 0; z-index: 5; min-height: 52px; } .topbar .brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-weight: 700; } .topbar .collapse { width: auto; } /* Логотип 13.6.2a — только фирменный знак рядом с прежним текстом. Отдельный namespace не меняет геометрию навигации и других картинок. */ .admin-brand-logo { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; } .admin-brand-logo[hidden] { display: none; } .admin-brand-logo img, .side .admin-brand-logo img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; } .admin-brand-title { min-width: 0; overflow: hidden; overflow-wrap: anywhere; text-overflow: ellipsis; } .topbar .admin-brand-logo { flex-basis: 24px; width: 24px; height: 24px; } /* ФОКУС С КЛАВИАТУРЫ ВИДЕН ВСЕГДА И ВЕЗДЕ. Пол качества, не украшение: по табу надо уметь пройти весь экран, а невидимый фокус означает, что человек не знает, где он находится. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ============================================================ ПОЛОСА ТРЕВОГ. Не на сводке, а на КАЖДОМ экране. Реквизиты-заглушка означают, что клиенты переводят деньги в никуда. Показывать это только на сводке значит не показывать вовсе тому, кто живёт в заказах и на сводку не заходит. ============================================================ */ /* ТРЕВОГА — ОГРАНИЧЕННЫЙ БЛОК, А НЕ ПОЛОСА ВО ВСЮ ОБЛАСТЬ (13.1.3). Полоса поверх всего читалась как системный баннер браузера — то есть как чужой элемент, который можно не читать. Блок в общей сетке, той же ширины, что и панели под ним, читается как часть рабочего места. */ .alarms { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); } /* ТРЕВОГА — ОДИН БЛОК НА ВСЮ АДМИНКУ (13.2.3). Рисуется в `base.html` и выводится на каждом экране. В 13.2.2 её геометрию переопределили локально внутри списка заказов: одна и та же «карта состоит из нулей» выглядела на заказах иначе, чем на остальных тридцати девяти экранах. Вид, отобранный дизайнером, поднят сюда целиком; локального диалекта больше нет. Меняем здесь — меняется везде, как и задумано. */ .alarm { display: flex; gap: 12px; align-items: center; min-height: 0; padding: calc(var(--s3) + 1px) var(--s4); border-radius: var(--radius-lg); border: 1px solid var(--stop-fg); background: var(--stop-bg); color: var(--stop-fg); font-size: var(--fs-3); } .alarm.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-fg); } .alarm b { flex: 0 0 auto; } .alarm .body { flex: 1 1 auto; width: 100%; } .alarm details { display: flex; align-items: center; gap: calc(var(--s2) - 2px); width: 100%; } .alarm a { color: inherit; font-weight: 600; } .alarm summary { cursor: pointer; list-style: none; font-weight: 600; flex: 0 0 auto; margin: 0; } .alarm summary::-webkit-details-marker { display: none; } .alarm details[open] summary { margin-bottom: 0; } @media (max-width: 760px) { .alarm details { align-items: flex-start; flex-direction: column; } .alarm a { margin-left: 0; } } /* ============================================================ ВКЛАДКИ ВНУТРИ РАЗДЕЛА. Горизонтальные — в отличие от меню. С 17.6 их вид — тот же, что у вкладок состояния `.list-tabs` (подчёркивание, активная — цветом текста), и правило у них одно: см. «ОБЩИЙ НАБОР СПИСКА». Здесь осталось только место. ============================================================ */ /* ============================================================ ОБЩИЕ ЭЛЕМЕНТЫ. Имена классов те же, что были, — сорок шаблонов опираются на них, и переименование ради красоты стоило бы этапа. ============================================================ */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s5); margin-bottom: var(--s5); box-shadow: var(--shadow); } .flash { background: var(--stop-bg); color: var(--stop-fg); border-left: 3px solid currentColor; border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin-bottom: var(--s4); } .flash.ok { background: var(--done-bg); color: var(--done-fg); } /* Предупреждение, а не отказ (16.5): сохранено, но проверьте. */ .flash.warn { background: var(--warn-bg); color: var(--warn-fg); } /* КОНТУР ПОЛЯ — НЕ ОБЩАЯ ГРАНИЦА, И ЭТО НЕ ПРИДИРКА. `border` — линия между строками таблицы, ей громкость не нужна, и она даёт около 1.4 : 1. Поле ввода на такой рамке выглядит как пустое место: человек не понимает, куда печатать. У контура свой токен со своим порогом 3 : 1, проверяется тестом. */ input[type="password"], input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="color"], input[type="file"], input[type="month"], select { padding: var(--s2) var(--s3); border: 1px solid var(--control); border-radius: var(--radius-sm); font: inherit; background: var(--panel); color: var(--text); } textarea { width: 100%; padding: var(--s2) var(--s3); border: 1px solid var(--control); border-radius: var(--radius-sm); font: inherit; resize: vertical; background: var(--panel); color: var(--text); } input:hover, select:hover, textarea:hover { border-color: var(--control-hover); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } button { font: inherit; padding: var(--s2) var(--s5); border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); cursor: pointer; } button:hover { background: var(--accent-hover); } button.quiet { background: transparent; color: var(--muted); padding: var(--s2); } button.quiet:hover { background: transparent; color: var(--stop-fg); } button.danger { background: var(--stop-fg); } button.danger:hover { background: var(--stop-fg); opacity: .88; } .actions { display: flex; gap: var(--s3); flex-wrap: wrap; } .actions form { margin: 0; } form.stack label { display: block; font-weight: 600; margin: var(--s3) 0 var(--s2); } .muted { color: var(--muted); } h1 { font-size: var(--fs-6); line-height: 1.2; margin: 0 0 var(--s4); letter-spacing: -.01em; } h2 { font-size: var(--fs-5); line-height: 1.3; margin: 0 0 var(--s3); } a { color: var(--accent); text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; } /* ШАПКА ТАБЛИЦЫ ОТЧЁРКНУТА ЗАМЕТНОЙ ЛИНИЕЙ. Обычная граница между строками и граница «здесь кончаются заголовки» — разные по смыслу линии, и рисовать их одинаково значит не рисовать вторую. */ th { color: var(--muted); font-weight: 600; white-space: nowrap; border-bottom-color: var(--border-strong); } /* ПОДСВЕТКА СТРОКИ ПОД КУРСОРОМ. На широкой таблице это не украшение: строка в тысячу с лишним пикселей читается справа налево с трудом, и подсветка — единственное, что держит глаз на своей строке. Была слишком тихой, поэтому добавлена рамка слева. */ tbody tr:hover td, table tr:hover td { background: var(--row-hover); } table tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .nowrap { white-space: nowrap; } /* ЧИСЛА В КОЛОНКЕ — ТАБЛИЧНЫМИ ЦИФРАМИ. Без этого столбец сумм танцует по горизонтали, и это видно даже тому, кто не знает слова «моноширинный». */ .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .badge { display: inline-block; padding: var(--s1) var(--s2); border-radius: 10px; font-size: var(--fs-3); background: var(--off-bg); color: var(--off-fg); white-space: nowrap; } .badge.awaiting_payment, .badge.payment_claimed, .badge.pending { background: var(--warn-bg); color: var(--warn-fg); } .badge.paid, .badge.in_work, .badge.booked { background: var(--busy-bg); color: var(--busy-fg); } .badge.done { background: var(--done-bg); color: var(--done-fg); } .badge.cancelled, .badge.new, .badge.no_show, .badge.missed { background: var(--off-bg); color: var(--off-fg); } .badge.unread { background: var(--stop-bg); color: var(--stop-fg); font-weight: 600; } /* ПЛАШКА ПО СМЫСЛУ, А НЕ ПО ЧУЖОМУ СТАТУСУ (17.1). До 17.1 тип обращения на «Вопросах» красился статусами заказа: срочный — как «Отменён», остальные — как «Ждёт оплаты». Сущность без своего набора статусов берёт смысловой класс отсюда. Добавка: ни одно существующее правило плашки не изменено. */ .badge.stop { background: var(--stop-bg); color: var(--stop-fg); font-weight: 600; } .badge.warn { background: var(--warn-bg); color: var(--warn-fg); } .badge.busy { background: var(--busy-bg); color: var(--busy-fg); } .badge.off { background: var(--off-bg); color: var(--off-fg); } .toolbar { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); align-items: center; } details > pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--s3); overflow-x: auto; font-size: var(--fs-3); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); margin-bottom: var(--s6); } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s4); text-decoration: none; color: inherit; display: block; box-shadow: var(--shadow); } a.card:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); } .card .label { font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); } .card .value { font-size: var(--fs-6); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .card .value.warn { color: var(--warn-fg); } /* Плашка-объяснение внутри страницы: три уровня громкости. Красный — идут потери прямо сейчас. Жёлтый — разобрать, но не сегодня. Без класса — просто факт, серым и тихо. */ .note { border-left: 3px solid var(--border); padding: var(--s3) var(--s4); background: var(--panel); border-radius: var(--radius-sm); margin-bottom: var(--s4); color: var(--muted); } .note.stop { border-left-color: var(--stop-fg); background: var(--stop-bg); color: var(--stop-fg); } .note.warn { border-left-color: var(--warn-fg); background: var(--warn-bg); color: var(--warn-fg); } /* ============================================================ СМЫСЛОВЫЕ КЛАССЫ ВМЕСТО ЦВЕТА В РАЗМЕТКЕ (13.0). По шаблонам было раскидано полсотни жёстких цветов. Шестнадцать разных кодов — но смыслов за ними всего четыре, и коды между собой не совпадали даже там, где смысл был один. Каждый такой код — это место, которое НЕ ПЕРЕКРАСИТСЯ вместе с темой. На светлой палитре разница незаметна; на тёмной красная рамка останется красной на чёрном. ============================================================ */ .panel.stop, .card.stop { border-left: 4px solid var(--stop-fg); } .panel.warn, .card.warn { border-left: 4px solid var(--warn-fg); } .panel.done, .card.done { border-left: 4px solid var(--done-fg); } .panel.stop { border-color: var(--stop-fg); } .fg-stop { color: var(--stop-fg); } .fg-warn { color: var(--warn-fg); } .fg-done { color: var(--done-fg); } .badge.b-stop { background: var(--stop-fg); color: var(--on-accent); } .badge.b-warn { background: var(--warn-fg); color: var(--on-accent); } .badge.b-off { background: var(--off-bg); color: var(--off-fg); } /* Прибыль и убыток. Цвет тут несёт смысл, поэтому рядом всегда есть знак числа: дальтоник читает минус, а не оттенок. */ .gain { color: var(--done-fg); } .warn-line { border-left: 4px solid var(--warn-fg); padding-left: var(--s3); } /* ЦВЕТ КАТЕГОРИИ — ЭТО ДАННЫЕ, а не оформление: владелец выбирает его сам в справочнике услуг. Он приезжает из базы в переменную `--tint`, а цвет текста поверх остаётся темы. */ .badge.tinted { background: var(--tint); color: var(--on-accent); } .loss { color: var(--stop-fg); } /* Просрочено: красным И жирным. Цвет здесь несёт смысл, поэтому рядом всегда стоит сама дата — прочитать её можно и не различая оттенка. */ .overdue { color: var(--stop-fg); font-weight: 600; } /* Подходит к пределу — та же пара «цвет плюс жирность», но жёлтая: ещё можно, но уже недолго. Рядом всегда стоит само число, поэтому не различающий оттенка прочитает остаток и без цвета. */ .near-limit { color: var(--warn-fg); font-weight: 600; } /* Черта внутри таблицы: подытог и итог. */ tr.rule > * { border-top: 1px solid var(--border); } tr.rule-hard > * { border-top: 2px solid var(--text); } tr.ahead > td { background: var(--warn-bg); } /* `:not(rect)` (17.2): столбик графика тоже носит класс `bar`, и эта полоска прогресса попадала на него — CSS-свойство `height` у `rect` сильнее атрибута, и каждый столбик рисовался плашкой в 10 пикселей на уровне своего значения. На «Прибыли», где столбики по умолчанию, все месяцы выглядели одинаковыми: экран врал молча. Найдено снимком 17.2. Полоска прогресса прямоугольником SVG не бывает, поэтому у неё не изменилось ничего. */ .bar:not(rect) { height: 10px; border-radius: 5px; background: var(--off-bg); margin: var(--s4) 0 var(--s2); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); } /* Полоска, у которой заливка НЕСЁТ СМЫСЛ, а не оформление: дошли до точки — цветом «готово», не дошли — цветом «внимание». Стояло это шестнадцатеричными кодами прямо в шаблоне отчёта о прибыли, причём кодами бирюзовой темы: в тёмной палитре полоска оставалась салатовой на почти чёрном фоне. */ .bar > i.done { background: var(--done-fg); } .bar > i.short { background: var(--warn-fg); } .tile { flex: 1 1 300px; min-width: 260px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); } /* ============================================================ ТЕПЛОВАЯ КАРТА: ШКАЛА ЗДЕСЬ, ЦВЕТ — В ТЕМЕ. Заливка клетки была написана прямо в шаблоне зелёным через `rgba(…)`, а белый текст поверх — кодом цвета. Это цвета одной палитры, вбитые руками: в тёмной теме карта оставалась салатовой на почти чёрном фоне, и увидел бы это владелец, а не мы. Клетка приносит с собой ОДНО число — свою силу в процентах (`--heat`), ровно как услуга приносит свой цвет в `--tint`. Насколько красить, решают данные; чем красить — тема. ЗАПАСНОГО ФОНА У ПРАВИЛА НЕТ НАМЕРЕННО. Браузер, не знающий `color-mix`, выбросит строку целиком, и таблица останется без заливки — числа в ней на месте, читать её можно. Запасной ровный фон был бы хуже: все клетки стали бы одинаковыми, то есть карта соврала бы, что нагрузка ровная. ============================================================ */ /* НАВЕДЕНИЕ СТРОКИ ЗАЛИВКУ НЕ ПЕРЕБИВАЕТ (17.11, баг владельца). Общее `tbody tr:hover td` сильнее `td.heat` и красило клетку под курсором фоном строки: при наведении и прокрутке клетки меняли цвет, самая тёмная тускнела, а её светлый текст пропадал на светлом фоне. */ td.heat, tr:hover > td.heat { background: color-mix(in srgb, var(--accent) var(--heat, 0%), transparent); } /* Клетка настолько тёмная, что текст на ней читается только цветом для акцента. Порог считает шаблон — здесь правило, а не число. */ td.heat.strong { color: var(--on-accent); } /* ============================================================ ШИРИНЫ КОЛОНОК — В ЕДИНИЦАХ ТЕКСТА, А НЕ В ПИКСЕЛЯХ. `em` привязан к размеру текста: колонка под сумму всегда шириной в шесть знаков, каким бы крупным ни был шрифт. ============================================================ */ .w4 { width: 4em; } .w6 { width: 6em; } .w8 { width: 8em; } .w10 { width: 10em; } .w14 { width: 14em; } .wfull { width: 100%; } .col { flex: 1 1 18em; min-width: 16em; } .col-wide { max-width: 34em; } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: var(--s2); background: var(--tint); } /* ============================================================ ОТСТУПЫ. Три сотни `style="margin:0"` по шаблонам — это не вкус, это одно и то же желание, записанное три сотни раз. ============================================================ */ .m0 { margin: 0; } .mb0 { margin-bottom: 0; } .mt6 { margin-top: var(--s2); } .mt8 { margin-top: var(--s2); } .mt16 { margin-top: var(--s4); } .tiny { font-size: var(--fs-3); } .dim { opacity: .55; } .inline { display: inline; } .center { align-self: center; } .grow { flex: 1; } .pointer { cursor: pointer; } .row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); } .ind1 { padding-left: var(--s5); } .ind2 { padding-left: var(--s7); } /* --- Календарь недели (расписание) ------------------------- */ .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2); } .day { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s2); min-height: 120px; } .day.today { border-color: var(--accent); } .day .head { font-size: var(--fs-2); color: var(--muted); margin-bottom: var(--s2); font-weight: 600; } .slot { display: block; border-radius: var(--radius-sm); padding: var(--s1) var(--s2); margin-bottom: var(--s1); font-size: var(--fs-3); text-decoration: none; background: var(--busy-bg); color: var(--busy-fg); } .slot.full { background: var(--warn-bg); color: var(--warn-fg); } .slot.done { background: var(--done-bg); color: var(--done-fg); } .slot.cancelled { background: var(--off-bg); color: var(--off-fg); text-decoration: line-through; } .slot:hover { outline: 2px solid var(--accent); } /* --- Чат --------------------------------------------------- */ .chat { display: flex; flex-direction: column; gap: var(--s2); max-width: 720px; } .msg { max-width: 75%; padding: var(--s2) var(--s3); border-radius: var(--s3); white-space: pre-wrap; word-break: break-word; } .msg.in { align-self: flex-start; background: var(--panel-soft); border: 1px solid var(--border); border-bottom-left-radius: var(--s1); } .msg.out { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: var(--s1); } .msg.out.auto { background: var(--off-bg); color: var(--off-fg); font-size: var(--fs-3); } /* НЕ ДОШЛО. Красная рамка, а не удаление: пропавшая строка хуже помеченной — по ней не поймёшь, писали мы вообще или нет. */ .msg.undelivered { border: 1px solid var(--stop-fg); background: var(--stop-bg); } .msg .fail { display: block; font-size: var(--fs-1); color: var(--stop-fg); font-weight: 600; margin-top: var(--s1); } /* Плашка двери: клиент ушёл или вернулся. Во всю ширину и по центру — это не чья-то реплика, а событие между ними. */ .plate { align-self: center; font-size: var(--fs-2); padding: var(--s1) var(--s3); border-radius: 10px; margin: var(--s1) 0; } .plate.gone { background: var(--stop-bg); color: var(--stop-fg); } .plate.back { background: var(--done-bg); color: var(--done-fg); } .msg .meta { display: block; font-size: var(--fs-1); color: var(--muted); margin-top: var(--s1); text-align: right; } /* ############################################################ ГЛАВНАЯ (13.1.2, оформление от дизайнера). ############################################################ */ /* ------------------------------------------------------------ РЯД ПЛИТОК — ОДНА ПАНЕЛЬ С ПЕРЕГОРОДКАМИ, А НЕ ЧЕТЫРЕ КАРТОЧКИ. Четыре отдельные карточки — это первая строка описания дефолтного дашборда, и они же врут по смыслу: плитки отвечают на ОДИН вопрос («что горит»), а разнесённые карточки читаются как четыре разных разговора. Одна панель с перегородками говорит «это один ряд». ЯРЛЫК И ЧИСЛО В СТРОКУ, А НЕ КАПСЛОКОМ НАД ЦИФРОЙ. Вторая строка описания дефолта — оттуда же. В строку читается как предложение: «Просрочено 5». ------------------------------------------------------------ */ /* ФЛЕКС, А НЕ СЕТКА В ЧЕТЫРЕ КОЛОНКИ, И ЭТО ПОЧИНКА. Плиток не всегда четыре: у преподавателя она одна — «Занятий сегодня», — и в сетке эта одна растягивалась на всю ширину экрана. Получалась подпись слева, число у правого края и тысяча пикселей пустоты между ними: два конца одного предложения, которые глаз уже не связывает. Теперь у плитки своя ширина, а полоса — по числу плиток. */ /* ПОЛОСА ПЛИТОК — ВО ВСЮ ШИРИНУ СЕТКИ, равными колонками (13.1.3). Была шириной по содержимому, и справа от неё зияло пустое место, пока панели под ней шли на всю ширину: верх страницы переставал быть связан с низом. ОДИНОКАЯ ПЛИТКА — ИСКЛЮЧЕНИЕ, И ОНО ЛЕЧИТСЯ ЗДЕСЬ, а не сужением всей полосы. У преподавателя плитка ровно одна, и на всю ширину она давала подпись слева, число у правого края и тысячу пикселей между ними — два конца одного предложения, которые глаз уже не связывает. */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--s5); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .kpis:has(.kpi:only-child) { width: fit-content; } .kpi { min-width: 0; min-height: 82px; display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); text-decoration: none; color: var(--text); } .kpi:only-child { min-width: 320px; } .kpi + .kpi { border-left: 1px solid var(--border); } .kpi:hover { background: var(--row-hover); color: var(--text); } .kpi .round { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--panel-soft); color: var(--muted); } .kpi .round .ic { width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 1.8; } .kpi .label { min-width: 0; font-size: var(--fs-4); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi .value { margin-left: auto; font-size: var(--fs-7); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; } /* ОДИН ЭЛЕМЕНТ — ОДИН УРОВЕНЬ ГРОМКОСТИ. До 13.1.2 на плитке «Просрочено» стояли красная рамка И янтарное число: два утверждения про одну вещь, которые спорят. Читающий не знает, какому верить, и перестаёт верить обоим. Теперь уровень задаёт подложку иконки и цвет числа — и всё. Ноль всегда нейтрален: тревожиться не о чем, но плитка остаётся на месте, иначе завтра придётся вспоминать, была она вчера. */ .kpi.stop .round { background: var(--stop-bg); color: var(--stop-fg); } .kpi.stop .value { color: var(--stop-fg); } .kpi.warn .round { background: var(--warn-bg); color: var(--warn-fg); } .kpi.warn .value { color: var(--warn-fg); } /* ------------------------------------------------------------ ПАНЕЛЬ С ШАПКОЙ. Отдельный класс, а не переопределение `.panel`: на `.panel` опираются тридцать девять других экранов, и сделать её флекс-колонкой с обрезкой значило бы разложить админку целиком ради одного экрана. ------------------------------------------------------------ */ .board { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .board-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--panel-soft); border-bottom: 1px solid var(--border); } .board-head h2 { margin: 0; } .board-body { flex: 1; display: flex; flex-direction: column; padding: var(--s1) var(--s5) var(--s4); } .board-body > p { color: var(--muted); } /* Две колонки, а на узком экране одна. Ширины в минимумах, а не в процентах: колонка «что сделать сегодня» содержит строки переменной длины, и жёсткая доля превращала бы короткий список в полупустое поле. */ /* ПАНЕЛИ ОДНОГО РОСТА (13.1.3). До этого правая росла вслед за числом сроков, а левая оставалась короткой — одна колонка страницы оказывалась втрое длиннее второй, и под короткой зияла пустота. Рост выравнивает сетка, а бесконечно расти обеим не даёт листалка. */ .two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s4); align-items: stretch; } .two > .board { margin-bottom: 0; } /* ------------------------------------------------------------ СПИСОК ДЕЛ. СТРОКА ПОКАЗЫВАЕТ ТО, ЧЕМ ОНА ОТЛИЧАЕТСЯ ОТ СОСЕДНЕЙ. Раньше в каждой строке стояло слово «просрочено» — восемь одинаковых слов подряд не сообщают ничего: если бы что-то не было просрочено, оно не попало бы в эту группу. Теперь там «9 дн.» — это разные разговоры с клиентом, и по ним решают, кому звонить первым. ------------------------------------------------------------ */ .deeds { list-style: none; margin: 0; padding: 0; } /* СЕТКА, А НЕ ФЛЕКС, И ЭТО ПОЧИНКА. На флексе длинное имя клиента раздвигало ссылку, та наезжала на название вехи, и строка превращалась в кашу — на узком экране целиком. В сетке у каждой колонки своя доля, а `minmax(0, ...)` разрешает содержимому сжиматься вместо того, чтобы вылезать за край. */ .deeds li { display: grid; grid-template-columns: 22px minmax(0, .9fr) minmax(0, 1.1fr) 5em; gap: var(--s3); align-items: center; min-height: 48px; padding: var(--s2) 0; border-top: 1px solid var(--border); } .deeds li:first-child { border-top: 0; } .deeds form { margin: 0; display: flex; } .deeds .what { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deeds .where { min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .deeds .when { justify-self: end; text-align: right; font-size: var(--fs-2); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); } .deeds .when.overdue { color: var(--stop-fg); font-weight: 600; } /* ЗАГОЛОВОК ГРУППЫ СО СЧЁТЧИКОМ. Число берётся из того же расчёта, что и плитка над ним, — это не второе утверждение про ту же реальность, а то же самое число. */ .grouphead { display: flex; align-items: center; gap: var(--s2); padding: var(--s4) 0 var(--s2); font-size: var(--fs-2); font-weight: 700; letter-spacing: .02em; } .grouphead.stop { color: var(--stop-fg); } .counter { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 var(--s2); border-radius: 999px; background: var(--off-bg); color: var(--off-fg); font-size: var(--fs-1); font-weight: 700; font-variant-numeric: tabular-nums; } .grouphead.stop .counter { background: var(--stop-bg); color: var(--stop-fg); } /* ДВЕСТИ СТРОК, ОБРЕЗАННЫЕ МОЛЧА, — ЭТО ЛОЖЬ. Если показано не всё, об этом сказано словами и числом. */ .cutoff { padding: var(--s3) 0 0; color: var(--muted); font-size: var(--fs-2); } /* ГАЛОЧКА. Кружок, а не кнопка со словом: слово «Сделано» рядом с семью строками превращает список в стену текста. Размер намеренно крупнее шрифта — по нему попадают пальцем. */ .deeds .tick { background: transparent; border: 1.5px solid var(--control); color: var(--muted); border-radius: 50%; width: 22px; height: 22px; line-height: 1; padding: 0; font-size: 0; cursor: pointer; flex: 0 0 auto; transition: background .1s ease, border-color .1s ease; } .deeds .tick:hover { border-color: var(--done-fg); background: var(--done-bg); } /* ЛИСТАЛКА. Ссылками, без скрипта: страница живёт в адресе, её можно послать, обновить и вернуться на неё «назад». Прижата к низу панели (`margin-top: auto`), поэтому у соседних панелей она стоит на одной высоте даже когда строк в них разное число. */ .pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--border); font-size: var(--fs-2); } .pager a { text-decoration: none; font-weight: 600; padding: var(--s1) var(--s2); border-radius: var(--radius-sm); } .pager a:hover { background: var(--row-hover); } /* Край списка виден, но не притворяется кнопкой: серое и не нажимается. */ .pager .off { color: var(--muted-soft); padding: var(--s1) var(--s2); } .pager-at { color: var(--muted); font-variant-numeric: tabular-nums; } /* ГЛАЗ «ВЫПОЛНЕННЫЕ». Отметка вехи необратима, и это единственное место, где можно посмотреть, что закрыто за сутки. Тихий, пока не нажат: основная работа экрана — несделанное. */ .eye { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: var(--fs-2); font-weight: 600; white-space: nowrap; } .eye:hover { background: var(--row-hover); color: var(--text); } .eye.on { background: var(--accent-soft); color: var(--accent); } .eye .ic { width: 16px; height: 16px; flex: 0 0 16px; } /* Выполненное показано тише сделанного: это справка, а не работа. */ .done-list .what { font-weight: 400; } .done-list .tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--fs-2); background: var(--done-bg); color: var(--done-fg); } .done-list .when { text-align: right; line-height: 1.3; } /* ------------------------------------------------------------ БЛИЖАЙШИЕ ДЕДЛАЙНЫ: что и когда, дата отдельной колонкой справа. ------------------------------------------------------------ */ .dl { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em; gap: var(--s4); align-items: center; min-height: 56px; padding: var(--s2) 0; border-top: 1px solid var(--border); } .dl:first-of-type { border-top: 0; } .dl-copy { min-width: 0; } .dl-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-meta { display: flex; gap: var(--s2); min-width: 0; color: var(--muted); font-size: var(--fs-3); } .dl-meta .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .datebox { justify-self: end; width: 100%; padding: var(--s2) var(--s1); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel-soft); text-align: center; font-size: var(--fs-2); font-weight: 600; line-height: 1.2; white-space: nowrap; } .datebox.soon { border-color: var(--warn-fg); background: var(--warn-bg); color: var(--warn-fg); } /* Пустая коробка ДЕРЖИТ КОЛОНКУ, но ничего не утверждает: строка идёт тем же днём, что и предыдущая, и повторять его незачем. */ .datebox.empty { border-color: transparent; background: transparent; } /* ------------------------------------------------------------ КАЛЕНДАРЬ НА ДВЕ НЕДЕЛИ. ЗАЧЕМ ОН РЯДОМ СО СПИСКОМ СРОКОВ, ЕСЛИ ДАННЫЕ ТЕ ЖЕ. Список идёт по порядку, и один тяжёлый день съедает его целиком: под «14 авг · 9» не видно, что дальше три пустых дня и завал в понедельник. Календарь показывает ФОРМУ двух недель, список — ближайшую очередь. СЕТКА ПН–ВС ОТ ПОНЕДЕЛЬНИКА ТЕКУЩЕЙ НЕДЕЛИ, включая прошедшие дни: там висит несделанное, и видеть его полезно. ------------------------------------------------------------ */ .cal { overflow: visible; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border-strong); } .cal-day { position: relative; min-width: 0; min-height: 118px; padding: 0 var(--s2) var(--s3); background: var(--panel); border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); } /* ПРОШЕДШИЕ ДНИ ПРИГЛУШЕНЫ, А НЕ СПРЯТАНЫ. Убери их — и сетка перестанет быть неделей: понедельник окажется в среду. */ .cal-day.past { background: var(--panel-soft); } .cal-head { display: flex; align-items: baseline; justify-content: center; gap: var(--s2); min-height: 30px; margin: 0 calc(-1 * var(--s2)); padding: var(--s2); background: var(--panel-soft); border-bottom: 1px solid var(--border); font-size: var(--fs-2); } .cal-wd { color: var(--muted-soft); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .cal-num { font-weight: 700; font-variant-numeric: tabular-nums; } .cal-day.on .cal-head { background: var(--accent); color: var(--on-accent); } .cal-day.on .cal-wd { color: var(--on-accent); } .cal-item { position: relative; display: block; width: 100%; min-width: 0; margin-top: var(--s2); padding: var(--s2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-size: var(--fs-2); line-height: 1.25; text-align: left; cursor: pointer; } .cal-item:hover, .cal-item:focus-visible { background: var(--row-hover); border-color: var(--accent); } /* ДВЕ СТРОКИ, А НЕ МНОГОТОЧИЕ. В одну строку клетка обрезала названия до «Согласовать ...» и «Уточнить дет...» — а в соседних клетках стояли «Согласовать план» и «Уточнить детали», то есть многоточие съедало ровно то, чем клетки различаются. Две строки читаются, третья уже не нужна: подробности лежат во всплывашке. */ .cal-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-weight: 600; padding-right: var(--s5); } .cal-n { position: absolute; top: var(--s2); right: var(--s2); display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 var(--s1); border-radius: 999px; background: var(--panel); color: var(--accent); font-size: var(--fs-1); font-weight: 700; font-variant-numeric: tabular-nums; } .cal-empty { padding-top: var(--s1); color: var(--muted-soft); font-size: var(--fs-1); } /* ВСПЛЫВАШКА БЕЗ ЕДИНОЙ СТРОКИ СКРИПТА. Держится на `:hover` и на фокусе самой кнопки: с клавиатуры открывается табом, пальцем — касанием. Скрипт здесь был бы четвёртым в админке, и чинить его пришлось бы отдельно на каждом устройстве. */ .pop { position: absolute; left: 50%; bottom: calc(100% + var(--s2)); width: 260px; transform: translateX(-50%); padding: var(--s3); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow-hover); text-align: left; display: none; pointer-events: none; z-index: 40; } /* СКРЫТАЯ ВСПЛЫВАШКА — `display: none`, А НЕ `visibility: hidden` (17.12, баг 17.6-1). Невидимая, она всё равно занимала место: у клетки воскресенья вылезала за правый край, и вся Главная на 1440 ехала вбок на 15 px. */ .cal-item:hover .pop, .cal-item:focus-visible .pop { display: block; } .pop-line { display: block; padding: var(--s2) 0; border-top: 1px solid var(--border); font-size: var(--fs-2); } .pop-line:first-child { border-top: 0; padding-top: 0; } .pop-line b { display: block; font-weight: 600; } .pop-line span { color: var(--muted); } /* ============================================================ ТРИ ШИРИНЫ. Рисуем под первую. Вторая и третья обязаны не РАЗВАЛИВАТЬСЯ — это не «мобильная версия», а обещание, что открывший админку с телефона увидит рабочий экран, а не кашу. ============================================================ */ @media (max-width: 1240px) { .two { grid-template-columns: minmax(0, 1fr); } .cal-grid { grid-template-columns: repeat(7, minmax(104px, 1fr)); overflow-x: auto; } } /* Ноутбук и планшет: боковое меню уже, поля тоньше. */ @media (max-width: 1100px) { :root { --sidebar-w: 184px; } main { padding: var(--s5) var(--s4) var(--s7); } } /* Телефон: меню уезжает за край и открывается кнопкой. Всё остальное встаёт друг под друга — страница растёт в длину, а не сжимается в нечитаемое. */ @media (max-width: 760px) { .shell { grid-template-columns: minmax(0, 1fr); } .topbar { display: flex; } .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 10; width: 260px; max-width: 86vw; height: 100dvh; transform: translateX(-102%); transition: transform .12s ease; } html.side-open .side { transform: translateX(0); } html.side-open .scrim { position: fixed; inset: 0; z-index: 9; background: var(--scrim); } /* На телефоне узкий режим не работает: там меню либо открыто поверх содержимого, либо его нет совсем. */ html.side-thin .shell { grid-template-columns: minmax(0, 1fr); } html.side-thin .side { padding: var(--s4) var(--s3); } html.side-thin .side a { flex-direction: row; text-align: left; padding: var(--s2); gap: var(--s2); } html.side-thin .side a span { font-size: var(--fs-4); } html.side-thin .side .grp, html.side-thin .side .who { display: block; } .week { grid-template-columns: minmax(0, 1fr); } .day { min-height: auto; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .msg { max-width: 92%; } main { padding: var(--s4) var(--s3) var(--s7); } .panel { padding: var(--s4); } .board-head { padding: var(--s3) var(--s4); } .board-body { padding: var(--s1) var(--s4) var(--s3); } /* СТРОКА СТАНОВИТСЯ КАРТОЧКОЙ. Четыре колонки в 390 пикселей не помещаются: имя вехи и ссылка на заказ вставали друг на друга, и список превращался в кашу. Здесь дело и заказ идут в столбик, а срок остаётся справа — он и есть то, по чему сканируют. */ .deeds li { grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: start; padding: var(--s3) 0; } .deeds .what { white-space: normal; } .deeds .where { grid-column: 2; white-space: normal; } .deeds .when { grid-column: 3; grid-row: 1 / span 2; align-self: center; } .dl { grid-template-columns: minmax(0, 1fr) 5em; gap: var(--s3); } .dl-title, .dl-meta .who { white-space: normal; } /* КАЛЕНДАРЬ НА ТЕЛЕФОНЕ — ДВЕ КОЛОНКИ ОТДЕЛЬНЫМИ КЛЕТКАМИ. Семь колонок в 390 пикселей дают полосу по три буквы: это не «сжалось», это перестало работать. */ .cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; gap: var(--s2); padding: var(--s2) 0; overflow-x: visible; } .cal-day { border: 1px solid var(--border); border-radius: var(--radius); min-height: 96px; } .pop { width: 200px; } /* ТАБЛИЦЫ НА УЗКОМ ЭКРАНЕ. Семь колонок в 390 пикселей не влезают никак, и сжимать их — значит получить столбик по букве. Пока не разобраны поэкранно, таблица ЕДЕТ ВБОК внутри своей рамки. */ .panel > table, .panel > form > table { display: block; overflow-x: auto; white-space: nowrap; } .panel > .backup-health { display: table; table-layout: fixed; overflow: visible; white-space: normal; } .backup-health td:first-child { width: 34%; } .backup-health td, .backup-health .badge { white-space: normal; overflow-wrap: anywhere; } } @media (max-width: 760px) { /* На телефоне плитки идут столбиком, и перегородка между ними становится горизонтальной: вертикальная линия между строками не разделяет ничего. */ .kpis { grid-template-columns: minmax(0, 1fr); width: 100%; } .kpi + .kpi { border-left: 0; border-top: 1px solid var(--border); } } @media (max-width: 460px) { .cal-grid { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ ОБЩИЙ НАБОР СПИСКА 17.1: вкладки состояния, строка поиска, чипы и кнопки, подпись «Найдено», карточка с таблицей, страницы, пустое состояние, демо-замок, боковая панель и окно. ОТКУДА ЗНАЧЕНИЯ. До 17.1 эти элементы жили тремя локальными копиями — заказы с хранилищем, клиенты, партнёры — и уже разошлись в мелочах: ширина поиска 420 и 440, прозрачность неактивной страницы .35 и .45, подвал 57 и 58. Общего не было. Значения взяты из копии «Клиенты» (13.4.2) — она единственная целиком на токенах шкалы, — потому что вид, уже принятый владельцем, первичен, а прототип его только направляет. СВЕДЕНИЕ (17.6). Заказы, хранилище, клиенты и партнёры переведены на набор, их копии удалены (сверка правил до и после — разбором tinycss2, паспорт 17.6). Всё, что у копий было общим, а в наборе 17.1 не нашлось, поднято сюда: панель фильтров, сортировка, метка чипа, сводка под таблицей, выбранная строка, строка-карточка на телефоне, окно с формой. Экранам осталось только содержимое своих ячеек. ============================================================ */ .list-page { width: 100%; min-width: 0; color: var(--text); font-size: calc(var(--fs-4) - 1px); line-height: 1.4; } .list-page .list-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Вкладки СОСТОЯНИЯ внутри экрана («Ждут ответа | Завершённые») и общие `.tabs` — вкладки разделов меню. Смысл разный, вид с 17.6 один (решение владельца — вид, принятый на заказах и клиентах): текст без плашек, активная — цветом текста и полосой акцента 2px. Вкладки состояния бывают кнопками (`role="tab"` в «Настройках»), поэтому правило понимает и `button`, и выбранную по `aria-selected`. «Настройки» до 17.6 рисовали вкладки своей сеткой-рамкой: активная обводилась внутренней тенью, которую обрезали скругление и соседняя граница, — «кривая обводка» из списка владельца. */ .tabs, .list-tabs { display: flex; gap: var(--s2) 28px; flex-wrap: wrap; margin: 0 0 calc(var(--s5) - 2px); padding-left: calc(var(--s1) - 2px); border-bottom: 1px solid var(--border); } .tabs a, .list-tabs a, .list-tabs button { position: relative; display: inline-flex; align-items: center; gap: var(--s2); min-height: 0; margin: 0; padding: 0 0 var(--s3); border: 0; border-radius: 0; background: transparent; color: var(--muted); font: inherit; font-size: calc(var(--fs-4) - 1px); font-weight: 650; text-decoration: none; cursor: pointer; } .tabs a:hover, .list-tabs a:hover, .list-tabs button:hover { background: transparent; color: var(--text); } .tabs a.on, .list-tabs a.on, .list-tabs [aria-selected="true"] { color: var(--text); } .tabs a.on::after, .list-tabs a.on::after, .list-tabs [aria-selected="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: var(--accent); content: ""; } .list-tabs-count { min-width: 22px; padding: 0 var(--s2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-2); font-weight: 700; text-align: center; } .list-viewbar, .list-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--s3) + 2px); } .list-viewbar { padding: 0 0 var(--s1); } .list-controls { position: relative; padding: calc(var(--s4) + 2px) 0 calc(var(--s3) + 2px); } .list-controls-left, .list-quick { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); } .list-controls-left { flex: 1 1 auto; min-width: 0; } .list-search { display: flex; align-items: center; gap: var(--s2); width: min(440px, 38vw); height: 40px; padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius); background: var(--panel); color: var(--muted); } .list-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .list-search input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; } .list-button, .list-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius); background: var(--panel); color: var(--text); font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; } .list-button:hover, .list-chip:hover { background: var(--row-hover); color: var(--text); } .list-button.is-primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .list-button.is-primary:hover { background: var(--accent-hover); color: var(--on-accent); } .list-viewbar > .list-button { min-height: 40px; padding-inline: calc(var(--s4) + 1px); } /* Опасное действие (удалить, очистить) — тихим красным, а не заливкой: кнопка не должна быть самой громкой на экране (17.6, из хранилища). */ .list-button.is-danger { border-color: var(--stop-fg); background: var(--stop-bg); color: var(--stop-fg); } .list-button.is-danger:hover { background: var(--stop-bg); color: var(--stop-fg); } /* Кнопка, которая оживает скриптом, приезжает выключенной — и это видно (17.6): без скрипта «тык — ничего» хуже честно погашенной кнопки. */ .list-button:disabled, .list-button:disabled:hover { opacity: .52; cursor: not-allowed; } .list-button.is-primary:disabled:hover { background: var(--accent); } .list-chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .list-button .ic, .list-chip .ic, .list-search .ic { width: 16px; height: 16px; flex-basis: 16px; } /* ДЕМО-ЗАМОК (решение владельца, 17.1). То, что нарисовано в прототипе, но в системе ещё не существует, стоит на своём месте с замком и пояснением при наведении, а не исчезает и не притворяется работающим. Пунктир и приглушённый цвет — чтобы рабочие и демо- элементы не путались в одном ряду. Элемент — `aria-disabled`, а не `disabled`: у выключенной кнопки браузер не показывает подсказку, и человек не узнал бы, почему она молчит. */ .is-demo { border-style: dashed; color: var(--muted); cursor: not-allowed; } .list-button.is-demo:hover, .list-chip.is-demo:hover { background: var(--panel); color: var(--muted); } .list-search.is-demo { background: var(--panel-soft); } /* НЕДОСТУПНЫЙ ВЫБОР (17.2) — не демо: функция есть, но сейчас этот вариант не годится, и подсказка при наведении говорит почему («365 точек — столбиками больше 90»). Пунктир, как у демо, но без замка; `aria-disabled`, а не `disabled`, — иначе браузер не покажет подсказку. Первым взяли переключатели детализации на аналитике. */ .list-chip.is-off, .list-chip.is-off:hover { border-style: dashed; background: var(--panel-soft); color: var(--muted-soft); cursor: not-allowed; } .list-search.is-demo input { cursor: not-allowed; } .demo-lock { color: var(--muted-soft); } .list-button .demo-lock, .list-chip .demo-lock, .list-search .demo-lock, .list-link .demo-lock { width: 14px; height: 14px; flex-basis: 14px; } .list-link { display: inline-flex; align-items: center; gap: var(--s1); padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; } .list-link:hover { background: transparent; color: var(--accent-hover); text-decoration: underline; } .list-link.is-demo, .list-link.is-demo:hover { color: var(--muted); text-decoration: none; } .list-link .ic { width: 14px; height: 14px; flex-basis: 14px; } .list-meta { margin: 0 0 calc(var(--s2) + 2px); color: var(--muted); font-size: var(--fs-3); } .list-card { overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) + 3px); background: var(--panel); box-shadow: var(--shadow); } .list-table-wrap { overflow: auto; } .list-table { width: 100%; border-collapse: collapse; table-layout: fixed; } /* ШАПКА ПЕРЕНОСИТСЯ (17.6). С фиксированной раскладкой колонка не растёт под свой заголовок, и в одну строку «№ клиента» залезал на «Клиента». */ .list-table th { height: 50px; padding: 0 var(--s3); border-bottom: 1px solid var(--border); background: var(--panel-soft); color: var(--muted); font-size: var(--fs-2); font-weight: 700; line-height: 1.25; text-align: left; vertical-align: middle; white-space: normal; overflow-wrap: break-word; } .list-table td { padding: calc(var(--s3) + 2px) var(--s3); border-bottom: 1px solid var(--border); background: var(--panel); line-height: 1.45; vertical-align: top; } .list-table tbody tr:last-child td { border-bottom: 0; } .list-table tbody tr:hover > td { background: var(--row-hover); } .list-table tbody tr[data-row-link], .list-table tbody tr[tabindex] { cursor: pointer; } /* Строка, открытая в боковой панели: видно, чья панель. Табиндекс строке даёт скрипт экрана — без скрипта строка не притворяется нажимаемой. */ .list-table tbody tr.is-selected > td { background: var(--accent-soft); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); } .list-table tbody tr.is-selected > td:first-child { box-shadow: inset 2px 0 0 var(--accent), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); } .list-table tbody tr.is-selected > td:last-child { box-shadow: inset -1px 0 0 var(--accent), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); } .list-table .is-num { text-align: center; font-variant-numeric: tabular-nums; } .list-table td.list-muted { color: var(--muted); } /* Что стоит в ячейках списков: номер записи, имя-ссылка, приглушённое, счётчик, «ещё N» (17.6, вид «Клиентов»). */ .list-id { color: var(--accent); font-weight: 800; white-space: nowrap; text-decoration: none; } a.list-id:hover { color: var(--accent-hover); text-decoration: underline; } .list-name { max-width: 100%; color: var(--text); font-size: var(--fs-4); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; text-decoration: none; } .list-name:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .list-muted { color: var(--muted); } .list-count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 27px; padding: 0 var(--s2); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 800; } .list-more { margin-top: calc(var(--s1) - 1px); } .list-more summary { color: var(--accent); cursor: pointer; font-size: var(--fs-2); font-weight: 700; } .list-more ul { margin: var(--s1) 0 0; padding-left: calc(var(--s5) - 2px); color: var(--muted); } .list-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 58px; padding: var(--s3) calc(var(--s3) + 2px); border-top: 1px solid var(--border); color: var(--muted); } .list-pages { display: flex; align-items: center; gap: var(--s1); } .list-pages a, .list-pages span { display: inline-grid; place-items: center; min-width: 31px; height: 31px; padding: 0 var(--s2); border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; } .list-pages a:hover { background: var(--row-hover); color: var(--text); } .list-pages .is-current { background: var(--accent-soft); color: var(--accent); font-weight: 800; } .list-pages .is-disabled { opacity: .45; } /* МЕТКА ЧИПА — КРУЖОК «ВЫБРАН / НЕ ВЫБРАН» (17.6, вид «Клиентов»). Свои значки у каждого чипа заказов (◉ ◇ ▣ ♙) смысла не несли и были единственным местом списков, где чип выглядел иначе. */ .list-chip-dot { position: relative; display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; border: 2px solid var(--muted-soft); border-radius: 50%; background: var(--panel); } .list-chip-dot::after { position: absolute; inset: 3px; border-radius: 50%; background: transparent; content: ""; } .list-chip.is-active .list-chip-dot { border-color: var(--accent); } .list-chip.is-active .list-chip-dot::after { background: var(--accent); } /* Сортировка и правая часть полосы фильтров. */ .list-search-form { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; } .list-controls-right { display: flex; flex: 0 0 auto; align-items: center; gap: var(--s2); } .list-sort { flex: 0 0 auto; margin: 0; } .list-sort select { min-width: 280px; height: 36px; padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius); background: var(--panel); color: var(--text); font: inherit; font-weight: 600; } /* ФИЛЬТРЫ — ПАНЕЛЬ ПОД ПОЛОСОЙ. Кнопка — ссылка с `filters_open`: без скрипта панель откроет сервер, со скриптом она открывается на месте (`screen-search.js`). Панель — ребёнок полосы, поэтому встаёт под всей полосой, сколько бы строк ни заняли чипы. */ .list-filter { display: flex; } .list-filter-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--s2); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-1); font-weight: 700; } .list-filter-panel { position: absolute; z-index: 45; top: calc(100% - var(--s2) + 2px); left: 0; width: 700px; max-width: calc(100vw - var(--sidebar-w) - var(--s8)); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-hover); } .list-filter-panel[hidden] { display: none; } .list-filter-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: calc(var(--s3) + 2px); } .list-filter-head h2 { margin: 0; font-size: var(--fs-4); } .list-filter-head .layer-close { position: static; } .list-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } .list-filter-actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: calc(var(--s3) + 2px); padding-top: calc(var(--s3) + 2px); border-top: 1px solid var(--border); } /* ПОЛЯ ФОРМЫ В ПАНЕЛИ ФИЛЬТРОВ И В ОКНЕ — один вид. Перечислены все типы полей: общий контур поля (выше) знает не все (`tel`, `email`). */ .list-filter-grid label, .modal-grid label { display: flex; min-width: 0; flex-direction: column; gap: var(--s1); color: var(--muted); font-size: var(--fs-2); } .list-filter-grid input, .list-filter-grid select, .modal-grid input:not([type="checkbox"]):not([type="radio"]), .modal-grid select { width: 100%; min-width: 0; min-height: 38px; padding: var(--s2) var(--s3); border: 1px solid var(--control); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; font-size: calc(var(--fs-4) - 1px); } /* СВОДКА ПОД ТАБЛИЦЕЙ — числа по всему списку, не по фильтру; поэтому первой строкой говорит, по чему посчитана. */ .list-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); margin-top: calc(var(--s3) + 2px); padding: calc(var(--s3) + 2px) var(--s4); border: 1px solid var(--accent); border-left: 4px solid var(--accent); border-radius: calc(var(--radius) + 2px); background: var(--accent-soft); color: var(--muted); box-shadow: var(--shadow); font-size: var(--fs-3); } .list-summary strong { color: var(--text); font-size: var(--fs-4); } .list-summary i { color: var(--muted-soft); font-style: normal; } .list-summary-scope { flex-basis: 100%; font-weight: 600; } /* ПУСТО — ЭТО ТОЖЕ ОТВЕТ. Пустой экран одинаково выглядит и когда показывать нечего, и когда что-то сломалось; поэтому пустое состояние говорит словами, что именно пусто и что делать. */ .list-empty { display: grid; justify-items: center; gap: var(--s1); padding: var(--s8) var(--s5); text-align: center; } .list-empty .ic { width: 28px; height: 28px; flex-basis: 28px; margin-bottom: var(--s2); color: var(--muted-soft); } .list-empty p { margin: 0 0 var(--s2); color: var(--muted); } /* ОДИН КОМПОНЕНТ СЛУЖЕБНЫХ СОСТОЯНИЙ (17.10, решение владельца): «пусто», «нет доступа», «такого нет», «форма устарела» — этим же видом, макрос `_state.html`. Действия — ссылками; служебная страница (`.is-page`) — тот же элемент во всю карточку, текст уже строки. */ .list-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s3); } .list-empty.is-page { padding: var(--s8) var(--s6); } .list-empty.is-page .ic { width: 40px; height: 40px; flex-basis: 40px; } .list-empty.is-page p { max-width: 560px; font-size: var(--fs-4); line-height: 1.5; } /* Страница сбоя (500) — статичный файл без оболочки и меню (17.11): тот же компонент посреди пустой страницы. */ .state-page { max-width: 720px; margin: var(--s8) auto; padding: 0 var(--s4); } /* БОКОВАЯ ПАНЕЛЬ И ОКНО — ОДНА ОБОЛОЧКА. Открываются ЯКОРЕМ (`#id` → `:target`), поэтому работают и без скрипта: серверная форма внутри (CSRF, POST) не зависит от JavaScript, как и требует ОФОРМЛЕНИЕ §7. Подложка — ссылка «закрыть» под панелью. Скрипт экрана добавляет только Esc, фокус и то, чтобы страница под панелью не прыгала. */ /* ТРИ СПОСОБА ОТКРЫТЬ ОДНУ ОБОЛОЧКУ (17.6). Якорь (`:target`) — без скрипта; класс `is-open` — панель, которую скрипт заполняет данными строки (клиенты, партнёры, управление хранилищем); `` — окна заказов и хранилища, которым нужен верхний слой браузера: окно «Новый клиент» встаёт поверх окна «Создать заказ». Вид у всех трёх один. */ .drawer, .modal { position: fixed; z-index: 95; inset: 0; display: none; } .drawer:target, .modal:target, .drawer.is-open, .modal.is-open, dialog.drawer[open], dialog.modal[open] { display: block; } /* ОКНО ПОВЕРХ ПАНЕЛИ (18.3): увеличение миниатюры из панели урока или медиа. Окно стоит внутри панели; пока оно открыто якорем, панель тоже открыта — закрыл окно, и человек снова в панели, а не на пустой странице. */ .drawer:has(.modal:target) { display: block; } .drawer .modal { z-index: 96; } .modal { overflow-y: auto; } dialog.drawer, dialog.modal { width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; } dialog.drawer::backdrop, dialog.modal::backdrop { background: transparent; } body:has(.drawer:target), body:has(.modal:target), body:has(.drawer.is-open), body:has(.modal.is-open), body:has(dialog.drawer[open]), body:has(dialog.modal[open]) { overflow: hidden; } .layer-scrim { position: fixed; inset: 0; background: var(--scrim); } .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; width: min(430px, 94vw); flex-direction: column; border-left: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow-hover); } .drawer-head, .modal-head { position: relative; border-bottom: 1px solid var(--border); } .drawer-head { padding: var(--s6) var(--s6) var(--s4); } .drawer-head h2 { margin: 0 36px 0 0; font-size: var(--fs-6); overflow-wrap: anywhere; } .drawer-kicker { display: block; margin-bottom: var(--s1); color: var(--accent); font-size: var(--fs-1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .drawer-sub, .modal-head p { margin: var(--s1) var(--s7) 0 0; color: var(--muted); font-size: var(--fs-3); } .layer-close { position: absolute; top: var(--s4); right: var(--s4); display: grid; place-items: center; width: var(--s7); height: var(--s7); border-radius: var(--radius-sm); color: var(--muted); } .layer-close:hover { background: var(--row-hover); color: var(--text); } button.layer-close { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; } .drawer-body { flex: 1 1 auto; min-height: 0; padding: var(--s5) var(--s6) var(--s4); overflow: auto; } .drawer-section { padding: var(--s3) 0; border-top: 1px solid var(--border); } .drawer-section h3 { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--fs-2); font-weight: 500; } .drawer-props { margin: 0 0 var(--s3); } .drawer-props > div:not(.drawer-divider) { display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: var(--s5); align-items: start; padding: var(--s2) 0; } .drawer-divider { height: 1px; margin: var(--s2) 0; background: var(--border); } .drawer-status { margin: 0; color: var(--muted); font-size: var(--fs-3); } .drawer-status:empty { display: none; } .drawer-props dt { color: var(--muted); font-size: var(--fs-2); } .drawer-props dd { min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; } .drawer-foot { flex: 0 0 auto; padding: var(--s4) var(--s6) var(--s5); border-top: 1px solid var(--border); background: var(--panel); } .drawer-foot form { margin: 0; } .drawer-foot .list-button { width: 100%; min-height: 40px; } .drawer-foot { display: grid; gap: var(--s2); } /* Широкая панель (18.2): правка урока — поля слева, пузыри «как увидит ученик» справа; в 430px они не помещаются рядом. На телефоне — во всю ширину, как любая панель. */ .drawer-panel.is-wide { width: min(1040px, 96vw); } .modal-panel { position: relative; width: min(560px, 96vw); margin: 10vh auto var(--s5); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-hover); } .modal-head { padding: var(--s5) var(--s5) var(--s4); } .modal-head h2 { margin: 0 var(--s7) 0 0; font-size: var(--fs-5); } .modal-body { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); } .modal-body label { display: grid; gap: var(--s1); color: var(--muted); font-size: var(--fs-2); } .modal-body input { width: 100%; min-width: 0; } .modal-body p { margin: 0; color: var(--muted); font-size: var(--fs-3); } .modal-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--border); } .modal-panel.is-narrow { width: min(470px, 96vw); } /* Форма в окне — две колонки, длинное поле во всю ширину. */ .modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .modal-grid .is-wide { grid-column: 1 / -1; } .modal-body .modal-error { padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: var(--stop-bg); color: var(--stop-fg); } @media (max-width: 980px) { .list-viewbar, .list-controls { flex-direction: column; align-items: stretch; } .list-search { width: 100%; } .list-controls-right { flex-wrap: wrap; } .list-sort, .list-sort label, .list-sort select { width: 100%; min-width: 0; } /* На узком экране панель фильтров — лист снизу, а не выпадашка. */ .list-filter-panel { position: fixed; z-index: 96; top: auto; right: var(--s3); bottom: var(--s3); left: var(--s3); width: auto; max-width: none; max-height: 82dvh; overflow: auto; } .list-filter-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { /* Чипы на телефоне не растягиваются в столбик, а переносятся строкой: тот же набор чипов стоит на аналитике и «Вопросах». */ .list-viewbar > .list-button, .list-controls-right > .list-button { width: 100%; } .list-pagination { align-items: stretch; flex-direction: column; } .list-pages { justify-content: center; } .list-summary { align-items: flex-start; flex-direction: column; } .list-summary i { display: none; } .drawer-panel { left: 0; width: auto; border-left: 0; } .drawer-props > div:not(.drawer-divider) { grid-template-columns: 104px minmax(0, 1fr); gap: var(--s3); } .modal-panel, .modal-panel.is-narrow { width: auto; margin: var(--s4) var(--s3); } .modal-grid { grid-template-columns: 1fr; } /* СТРОКА — КАРТОЧКА (`is-cards`, 17.6). Десять колонок на 390px не читаются ни прокруткой, ни сжатием; подпись колонки приезжает из `data-label` ячейки. Модификатор, а не правило для всех таблиц набора: таблице без подписей карточка не нужна. */ .list-table.is-cards { display: block; } .list-table.is-cards colgroup { display: none; } .list-table.is-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .list-table.is-cards tbody { display: grid; gap: var(--s3); padding: var(--s3); } .list-table.is-cards tr { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); } /* Подпись — слева в своей колонке на всю высоту ячейки, всё содержимое — справа столбиком: в ячейке бывает несколько строк («Дипломная работа», «ещё 2», тема), а подпись — в две строки («Следующее действие»), и ячейка растёт под большее из двух. */ .list-table.is-cards td, .list-table.is-cards td.is-num { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--s3); row-gap: 0; align-items: start; min-width: 0; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); text-align: left; } .list-table.is-cards td > * { grid-column: 2; justify-self: start; max-width: 100%; } .list-table.is-cards td:last-child { border-bottom: 0; } .list-table.is-cards td::before { grid-column: 1; grid-row: 1 / span 9; content: attr(data-label); color: var(--muted); font-size: var(--fs-2); font-weight: 600; line-height: 1.45; } .list-table.is-cards tbody tr.is-selected > td:first-child { box-shadow: inset 0 3px 0 var(--accent); } } /* ============================================================ ОБЩИЙ НАБОР ФОРМЫ 17.7: язык «Настроек» для всех экранов. До 17.7 зоны с заголовком, поля, подсказки и тумблер жили только внутри `.settings-page` (13.6.2). «Маркетинг» и «Команда» просили тот же вид, а копия — это ровно то, что чистили в 17.6 (три копии списка разошлись в мелочах). Значения — из «Настроек» без правки; «Настройки» переведены на этот набор, снимки до и после сверены. `.form-panel` — большая карточка с шапкой (вкладка «Настроек»); `.form-grid` — сетка 12 колонок, `.form-span-N` — ширина зоны; `.form-zone` — зона с цветной шапкой `.form-zone-header`; `.form-field` — подпись, поле, `.form-help` под ним; `.form-number-control` — число с единицей справа («ч», «дн.»); `.form-toggle-row` — строка «подпись + тумблер»; `.form-toggle` — тумблер: `input[type=checkbox]` в форме с «Сохранить» ИЛИ `button[role=switch]`, который сам отправляет свою форму (кампания, правило напоминания: тык — и сохранено); `.help-tip` — «?» с пояснением при наведении и фокусе, без скрипта (с 17.2 жил в аналитике `.an-help`). ============================================================ */ .form-errors { margin-bottom: var(--s4); padding: var(--s4); border: 1px solid var(--stop-fg); border-radius: var(--radius); background: var(--stop-bg); color: var(--stop-fg); } .form-errors ul { margin: var(--s2) 0 0; } .form-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); } .form-panel[hidden] { display: none; } .form-panel-header { padding: var(--s5) var(--s6) var(--s4); border-bottom: 1px solid var(--border); background: var(--panel); } .form-panel-header h2, .form-panel-header p, .form-zone-header h3 { margin: 0; } .form-panel-header h2 { font-size: var(--fs-6); line-height: 1.2; } .form-panel-header p { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-3); } .form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); padding: var(--s4) var(--s6) var(--s6); } .form-span-4 { grid-column: span 4; } .form-span-5 { grid-column: span 5; } .form-span-6 { grid-column: span 6; } .form-span-7 { grid-column: span 7; } .form-span-8 { grid-column: span 8; } .form-span-12 { grid-column: span 12; } .form-zone { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); } .form-zone-header { display: flex; align-items: center; gap: var(--s2); min-height: 50px; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border); background: var(--accent-soft); } .form-zone-marker { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .form-zone-header h3 { font-size: var(--fs-5); line-height: 1.25; } .form-zone-body { min-width: 0; padding: var(--s5); } .form-zone-body-compact { padding-bottom: var(--s4); } .form-columns { display: grid; gap: var(--s4); min-width: 0; } .form-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-columns-4 { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); } .form-field { min-width: 0; margin-bottom: var(--s3); } .form-field:last-child { margin-bottom: 0; } .form-field > label { display: block; margin-bottom: var(--s2); color: var(--text); font-size: var(--fs-3); font-weight: 600; } .form-field input, .form-field select, .form-field textarea { width: 100%; max-width: none; min-width: 0; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--control); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font: inherit; } .form-field textarea { min-height: 88px; resize: vertical; } .form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--control-hover); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; } .form-help { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-3); line-height: 1.45; overflow-wrap: anywhere; } .form-number-control { display: flex; align-items: center; gap: var(--s2); min-width: 0; } .form-number-control input { min-width: 0; } .form-number-control span { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-3); white-space: nowrap; } .form-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-width: 0; margin-bottom: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .form-toggle-row > div { min-width: 0; } .form-toggle-row label { font-weight: 600; } /* Тумблер. У кнопки-переключателя состояние — `aria-checked`, у галочки — `:checked`; вид один. Кнопке сброшено всё, что дала общая `button`. */ .form-toggle { position: relative; flex: 0 0 auto; width: 48px; height: 28px; min-height: 0; margin: 0; padding: 0; appearance: none; border: 1px solid var(--control); border-radius: var(--s4); background: var(--panel-soft); box-shadow: none; cursor: pointer; } .form-toggle:hover { background: var(--panel-soft); } .form-toggle::after { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); content: ""; } .form-toggle:checked, .form-toggle[aria-checked="true"], .form-toggle[aria-checked="true"]:hover { border-color: var(--accent); background: var(--accent); } .form-toggle:checked::after, .form-toggle[aria-checked="true"]::after { left: 23px; background: var(--on-accent); } .form-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .form-toggle[aria-disabled="true"] { border-color: var(--border-strong); cursor: not-allowed; opacity: .72; } .form-locked-control { padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); } /* «?» — пояснение. Объяснение читают один раз, а видят каждый день, поэтому оно не на экране, а здесь; метки, от которых зависит действие, на экране остаются. `display`, а не `visibility`: спрятанная подсказка с `visibility` на телефоне растягивала страницу вбок (снимок 390 px, 17.2). */ .help-tip { position: relative; display: inline-flex; vertical-align: middle; cursor: help; outline: none; } .help-tip-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--panel); color: var(--muted); font-size: var(--fs-1); font-weight: 800; line-height: 1; } .help-tip:focus-visible .help-tip-mark { outline: 2px solid var(--accent); outline-offset: 1px; } .help-tip-pop { position: absolute; z-index: 60; top: calc(100% + var(--s2)); left: calc(-1 * var(--s3)); width: min(320px, 80vw); padding: var(--s3); border-radius: var(--radius); background: var(--text); color: var(--panel); box-shadow: var(--shadow-hover); font-size: var(--fs-2); font-weight: 400; line-height: 1.45; white-space: normal; text-align: left; display: none; pointer-events: none; } .help-tip:hover .help-tip-pop, .help-tip:focus-within .help-tip-pop { display: block; } @media (max-width: 1180px) { .form-span-4, .form-span-5, .form-span-7, .form-span-8 { grid-column: span 6; } .form-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .form-grid { padding: var(--s4); } .form-panel-header { padding: var(--s4); } .form-span-4, .form-span-5, .form-span-6, .form-span-7, .form-span-8 { grid-column: span 12; } .form-columns-3, .form-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .help-tip-pop { position: fixed; top: auto; bottom: var(--s4); left: var(--s3); right: var(--s3); width: auto; } } @media (max-width: 560px) { .form-grid { gap: var(--s3); padding: var(--s3); } .form-zone-body { padding: var(--s4); } .form-columns-2, .form-columns-3, .form-columns-4 { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ ЛЕНТА ИСТОРИИ 17.12 — заказ и клиент одним элементом (`templates/_timeline.html`, Вл. 8, 9). До 17.12 — две копии (`order-v18-event`, `card-page-event`) с разной сеткой, и линия у обеих шла «откуда-то»: начиналась под точкой и обрывалась над следующей. Сетка: время | точка | текст. Линия — от середины точки до середины следующей точки ТОГО ЖЕ ДНЯ (следующий сосед — событие, а не шапка дня); точка лежит поверх линии и обведена цветом панели. Расстояние между событиями — нижний отступ самого события, без внешних полей: тогда низ события и верх следующего совпадают, и конец линии считается одной формулой. ============================================================ */ .timeline { --timeline-time: 52px; --timeline-col: 16px; --timeline-dot: 10px; --timeline-line: 20px; min-width: 0; padding: var(--s4) var(--s5); } .timeline-day { margin: var(--s4) 0 var(--s3); font-size: var(--fs-2); font-weight: 800; } .timeline-day:first-child { margin-top: 0; } .timeline-event { position: relative; display: grid; grid-template-columns: var(--timeline-time) var(--timeline-col) minmax(0, 1fr); column-gap: var(--s2); padding-bottom: var(--s4); } .timeline-event time { color: var(--muted); font-size: var(--fs-2); line-height: var(--timeline-line); font-variant-numeric: tabular-nums; } .timeline-dot { position: relative; z-index: 1; justify-self: center; width: var(--timeline-dot); height: var(--timeline-dot); margin-top: calc((var(--timeline-line) - var(--timeline-dot)) / 2); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--panel); } .timeline-dot.is-money { background: var(--done-fg); } .timeline-dot.is-note { background: var(--warn-fg); } .timeline-dot.is-system { background: var(--muted); } .timeline-event:has(+ .timeline-event)::before { position: absolute; top: calc(var(--timeline-line) / 2); bottom: calc(-1 * var(--timeline-line) / 2); left: calc(var(--timeline-time) + var(--s2) + var(--timeline-col) / 2 - .5px); width: 1px; background: var(--border-strong); content: ""; } .timeline-body { min-width: 0; overflow-wrap: anywhere; } .timeline-body strong { display: block; line-height: var(--timeline-line); } .timeline-body p { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-3); } .timeline-empty { margin: 0; color: var(--muted); } @media (max-width: 760px) { .timeline { padding: var(--s3); } } /* === МЕДИА 18.3 — миниатюра и увеличение: общий компонент («Медиа», панель урока, предпросмотр урока, отчёт загрузки курса; `_media.html`, ОФОРМЛЕНИЕ §23) === */ /* Миниатюра — ссылка на окно увеличения (`#view-N`): мелко в строке, крупно поверх страницы, без скрипта и без новой вкладки. Нет миниатюры (код из файла курса ещё не присылали) — значок вида на подложке. У видео — ▶ и длительность поверх, как в Telegram. Цвета — токены темы. */ .media-thumb { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-soft); color: var(--muted); text-decoration: none; } .media-thumb:hover { border-color: var(--border-strong); } .media-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .media-thumb .ic { width: 28px; height: 28px; } .media-thumb.is-big { width: 100%; max-width: 420px; } .media-thumb.is-bubble { width: 100%; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .media-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--panel); color: var(--text); font-size: var(--fs-1); box-shadow: var(--shadow); } .media-dur { position: absolute; right: var(--s1); bottom: var(--s1); padding: 0 var(--s1); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); font-size: var(--fs-1); font-variant-numeric: tabular-nums; } .media-view-panel { width: min(960px, 96vw); margin-top: 5vh; } .media-view-body { display: grid; gap: var(--s3); padding: var(--s4) var(--s5); } /* Миниатюра Telegram у видео — 320 px: растягиваем до окна, иначе «увеличение» было бы той же картинкой. Фото кэшируется крупным. */ .media-view-body img { display: block; width: 100%; max-width: 760px; height: auto; max-height: 70vh; margin: 0 auto; border-radius: var(--radius-sm); object-fit: contain; } .media-view-empty { display: grid; justify-items: center; gap: var(--s2); padding: var(--s6) var(--s4); border-radius: var(--radius-sm); background: var(--panel-soft); color: var(--muted); text-align: center; } .media-view-empty .ic { width: 40px; height: 40px; } .media-view-empty p { max-width: 520px; margin: 0; font-size: var(--fs-3); } .media-view-caption { padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: var(--panel-soft); } .media-view-panel .modal-foot { flex-wrap: wrap; align-items: center; } .media-view-panel .modal-foot form { margin: 0; } /* Пузырь медиа в предпросмотре урока: миниатюра сверху, подпись снизу. */ .tgp-msg.is-media { padding: 0; overflow: hidden; } .tgp-msg.is-media .tgp-text { padding: var(--s2) var(--s3); } .tgp-media-note { padding: var(--s1) var(--s3) var(--s2); color: var(--muted); font-size: var(--fs-1); } .tgp-media-note.is-bad { color: var(--stop-fg); } /* === КОНЕЦ БЛОКА «МЕДИА: миниатюра» === */ /* ============================================================ ГЛАВНАЯ 13.3 — ГЕОМЕТРИЯ АКТУАЛЬНОГО ПРОТОТИПА. Корневой namespace обязателен: общие `.panel`, `.board`, `.two`, `.deeds` и `.dl` используются как контракт старых экранов. Главная уточняет только собственную композицию, не меняя потолок общего `main`. ============================================================ */ .dashboard-page { --dashboard-calendar-inline: calc(var(--s3) - (var(--s1) / 2)); --dashboard-calendar-bottom: calc(var(--s3) - 1px); --dashboard-calendar-tight: calc(var(--s2) - 1px); --dashboard-calendar-row-gap: calc(var(--s2) + 1px); --dashboard-event-block: calc(var(--s2) - (var(--s1) / 2)); --dashboard-kpi-block-pad: calc(var(--s4) - 1px); --dashboard-kpi-value-gap: calc(var(--s1) / 2); width: 100%; max-width: none; min-width: 0; } .dashboard-page .kpi { justify-content: flex-start; gap: var(--s3); padding: var(--dashboard-kpi-block-pad) var(--s5); } .dashboard-page .kpi .round .ic { width: 21px; height: 21px; flex-basis: 21px; } .dashboard-page .kpi .label { font-weight: 650; } .dashboard-page .kpi .value { margin-left: var(--dashboard-kpi-value-gap); font-size: calc(var(--fs-7) - 1px); font-weight: 780; } .dashboard-page .kpi.busy .round { background: var(--busy-bg); color: var(--busy-fg); } .dashboard-page .kpi.busy .value { color: var(--busy-fg); } .dashboard-page .kpi.done .round { background: var(--done-bg); color: var(--done-fg); } .dashboard-page .kpi.done .value { color: var(--done-fg); } .dashboard-page .dashboard-workspace { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: stretch; } .dashboard-page .deeds li { min-height: 52px; } .dashboard-page .deeds .what, .dashboard-page .deeds .where { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; word-break: normal; } .dashboard-page .deeds li:hover, .dashboard-page .deeds li:focus-within, .dashboard-page .dl:hover, .dashboard-page .dl:focus-within { background: var(--row-hover); } .dashboard-page .dl { min-height: 64px; } .dashboard-page .dl-meta { flex-wrap: wrap; } .dashboard-page .dl-title, .dashboard-page .dl-meta .who { min-width: 0; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } .dashboard-page .dashboard-calendar { margin-top: var(--s4); } .dashboard-page .dashboard-calendar-head { align-items: flex-start; } .dashboard-page .dashboard-calendar-heading { min-width: 0; } .dashboard-page .dashboard-calendar-subtitle { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-3); line-height: 1.3; } .dashboard-page .cal-day { min-height: 126px; padding: 0 var(--dashboard-calendar-inline) var(--dashboard-calendar-bottom); } .dashboard-page .cal-head { min-height: 34px; align-items: center; gap: var(--dashboard-calendar-tight); margin: 0 calc(-1 * var(--dashboard-calendar-inline)) var(--dashboard-calendar-row-gap); padding: var(--dashboard-calendar-tight) var(--s2); border-bottom-color: var(--accent-hover); background: var(--accent); color: var(--on-accent); } .dashboard-page .cal-wd { color: inherit; } .dashboard-page .cal-day.on .cal-head { background: var(--accent-hover); color: var(--on-accent); box-shadow: inset 0 0 0 2px var(--on-accent); } .dashboard-page .cal-item { margin-top: var(--dashboard-event-block); padding: var(--dashboard-event-block) var(--s2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); } .dashboard-page .cal-n { border-radius: 999px; background: var(--panel); color: var(--accent); } /* 17.12. Строка дедлайна: «Заказ #N · вид работы · клиент» (Вл. 1). */ .dashboard-page .dl-meta { align-items: baseline; column-gap: var(--s1); } .dashboard-page .dl-sep { color: var(--muted-soft); } /* Листание календаря по неделям (Вл. 2): чипы справа в шапке. */ .dashboard-page .dashboard-calendar-head { justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .dashboard-page .dashboard-calendar-nav { display: flex; gap: var(--s2); } /* Шапка дня — ссылка на заказы этого дня, вид прежний. */ .dashboard-page a.cal-head { text-decoration: none; } .dashboard-page a.cal-head:hover, .dashboard-page a.cal-head:focus-visible { background: var(--accent-hover); } .dashboard-page a.cal-head:hover .cal-num, .dashboard-page a.cal-head:focus-visible .cal-num { text-decoration: underline; } /* ЧИСЛО ЗАКАЗОВ — ПО СЕРЕДИНЕ СТРОКИ, как текст (Вл. 2). Было прибито к углу абсолютной позицией и при одной строке названия смотрело вниз. */ .dashboard-page .cal-item { display: flex; align-items: center; gap: var(--s2); } .dashboard-page .cal-name { flex: 1 1 auto; min-width: 0; padding-right: 0; } .dashboard-page .cal-n { position: static; flex: 0 0 auto; } /* Всплывашка крайних колонок встаёт у своего края, а не посередине: у воскресенья она уходила за край окна. */ @media (min-width: 761px) { .dashboard-page .cal-day:nth-child(7n + 1) .pop { left: 0; transform: none; } .dashboard-page .cal-day:nth-child(7n) .pop { right: 0; left: auto; transform: none; } } /* Галочка — ссылка на окно подтверждения (17.12, вместо `confirm()`). */ .dashboard-page .deeds a.tick { display: block; } @media (max-width: 920px) { .dashboard-page .dashboard-workspace { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .dashboard-page .cal-day { min-height: 96px; } } /* ============================================================ СПИСКИ 17.6 — ЗАКАЗЫ, ХРАНИЛИЩЕ, КЛИЕНТЫ, ПАРТНЁРЫ. До 17.6 здесь стояли четыре экранных блока, около трёх тысяч строк: каждый повторял поиск, чипы, панель фильтров, таблицу, страницы, боковую панель и окно своей копией, и копии разошлись (ширина поиска, рамка поля, прозрачность страниц, высота подвала, своя шапка панели). Теперь всё это — общий набор («ОБЩИЙ НАБОР СПИСКА» выше), а здесь только то, чего у набора нет и быть не должно: ширины колонок и содержимое ячеек — ход и дедлайн заказа, метки клиента, деньги партнёра, файл и его меню. Каждое правило — в скоупе своего экрана, ни одно не переопределяет общий компонент. ============================================================ */ /* ---- Заказы ---- */ /* Колонки — долями: таблица укладывается в ширину страницы (до 17.6 колонка «Менеджер» уходила под прокрутку уже на 1440). */ .orders-page .orders-col-id { width: 6%; } .orders-page .orders-col-client { width: 12%; } .orders-page .orders-col-work { width: 16%; } .orders-page .orders-col-stage { width: 8%; } .orders-page .orders-col-now { width: 10%; } .orders-page .orders-col-next { width: 14%; } .orders-page .orders-col-deadline { width: 7%; } .orders-page .orders-col-money { width: 11%; } .orders-page .orders-col-manager { width: 8%; } .orders-page .orders-col-author { width: 8%; } .orders-page .orders-topic { display: block; margin-top: calc(var(--s1) - 1px); color: var(--muted); font-size: var(--fs-2); } .orders-page .orders-client-now-content { display: grid; justify-items: start; gap: var(--s1); } .orders-page .orders-waiting { color: var(--muted); font-size: var(--fs-2); } .orders-page .orders-next-action-line time { white-space: nowrap; } .orders-page .orders-next-action-line > i { margin: 0 var(--s1); color: var(--muted); font-style: normal; } .orders-page .orders-next-action-line > strong { color: var(--text); font-weight: 600; } .orders-page .orders-deadline-details { position: relative; } .orders-page .orders-deadline-details > summary { cursor: pointer; list-style: none; white-space: nowrap; } .orders-page .orders-deadline-details > summary::-webkit-details-marker { display: none; } .orders-page .orders-deadline-popover { position: absolute; z-index: 50; top: calc(100% + var(--s2)); right: 0; display: grid; width: 270px; gap: calc(var(--s1) + 1px); padding: calc(var(--s3) + 1px) calc(var(--s4) - 2px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-hover); color: var(--muted); font-size: var(--fs-3); font-weight: 400; white-space: normal; } .orders-page .orders-deadline-popover > strong { margin-bottom: var(--s1); color: var(--text); font-size: calc(var(--fs-4) - 1px); } .orders-page .orders-overdue { color: var(--stop-fg); } .orders-page .orders-client-picker { display: flex; gap: var(--s2); align-items: stretch; } .orders-page .orders-client-picker input { flex: 1 1 auto; } .orders-page .orders-client-add { flex: 0 0 40px; padding: 0; font-size: var(--fs-5); } .orders-page .orders-client-field { display: grid; gap: var(--s1); color: var(--muted); font-size: var(--fs-2); } .orders-page .orders-client-field p { font-size: var(--fs-2); } .orders-page .orders-preview-now { white-space: pre-line; } /* ---- Хранилище ---- */ .storage-page .storage-check-column { width: 42px; text-align: center; } .storage-page .storage-actions-column { width: 52px; text-align: center; } .storage-page .storage-file-cell { width: 26%; } /* Значок расширения растёт по тексту длинного расширения, а не обрезается, и не раздувает строку (13.3). */ .storage-page .storage-file-icon { display: inline-grid; place-items: center; width: auto; min-width: 28px; height: 28px; box-sizing: border-box; flex: 0 0 auto; margin-right: var(--s2); padding: 0 var(--s1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-soft); color: var(--muted); font-size: var(--fs-1); font-weight: 800; text-align: center; vertical-align: middle; white-space: nowrap; } .storage-page .storage-file-primary { display: inline-flex; max-width: calc(100% - 40px); flex-direction: column; vertical-align: middle; } .storage-page .storage-file-link, .storage-page .storage-file-name { color: var(--accent); font-weight: 650; overflow-wrap: anywhere; } .storage-page .storage-file-primary small, .storage-page .storage-order-status { display: block; color: var(--muted); font-size: var(--fs-1); font-weight: 400; } .storage-page .storage-direction { white-space: nowrap; } .storage-page .storage-direction.is-in { color: var(--busy-fg); } .storage-page .storage-direction.is-out { color: var(--accent); } .storage-page .storage-client-link { color: var(--text); font-weight: 650; text-decoration: none; } .storage-page .storage-client-link:hover { text-decoration: underline; } .storage-page .storage-type-tag { display: inline-flex; max-width: 100%; min-height: 25px; box-sizing: border-box; align-items: center; padding: 0 var(--s2); overflow: hidden; border-radius: var(--radius-sm); background: var(--off-bg); color: var(--off-fg); font-size: var(--fs-2); text-overflow: ellipsis; white-space: nowrap; } .storage-page .storage-type-tag.is-image { background: var(--busy-bg); color: var(--busy-fg); } .storage-page .storage-type-tag.is-document { background: var(--done-bg); color: var(--done-fg); } .storage-page .storage-type-tag.is-archive { background: var(--warn-bg); color: var(--warn-fg); } .storage-page .storage-nowrap { white-space: nowrap; } .storage-page .storage-file-actions { position: relative; display: inline-block; } .storage-page .storage-file-actions summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); cursor: pointer; list-style: none; font-size: var(--fs-5); } .storage-page .storage-file-actions summary::-webkit-details-marker { display: none; } .storage-page .storage-file-actions summary:hover { background: var(--row-hover); } .storage-page .storage-file-menu { position: fixed; z-index: 55; top: 0; left: 0; width: 210px; padding: var(--s1); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-hover); text-align: left; } .storage-page .storage-file-menu a, .storage-page .storage-file-menu button { display: flex; width: 100%; min-height: 36px; align-items: center; gap: var(--s2); padding: var(--s2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; text-decoration: none; } .storage-page .storage-file-menu a:hover, .storage-page .storage-file-menu button:hover { background: var(--row-hover); } .storage-page .storage-file-menu .is-danger { color: var(--stop-fg); } .storage-page .storage-file-menu small { display: block; padding: 0 var(--s2) var(--s1); color: var(--muted); font-size: var(--fs-1); } .storage-page .storage-files-table tbody tr.is-menu-open > td { background: var(--row-hover); } .storage-page .storage-selection { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); } .storage-page .storage-note { margin: var(--s2) var(--s1) 0; color: var(--muted); font-size: var(--fs-3); } .storage-page .storage-manager-body { display: grid; align-content: start; gap: var(--s4); } .storage-page .storage-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); } .storage-page .storage-stats > div { display: grid; gap: var(--s1); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); } .storage-page .storage-stats span { color: var(--muted); font-size: var(--fs-2); } .storage-page .storage-stats strong { font-size: var(--fs-5); } .storage-page .storage-backup-state { display: grid; gap: var(--s1); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--off-bg); color: var(--off-fg); } .storage-page .storage-backup-state.is-on { background: var(--done-bg); color: var(--done-fg); } .storage-page .storage-backup-state span { font-size: var(--fs-2); } .storage-page .storage-purge-form, .storage-page .storage-candidates { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-lg); } .storage-page .storage-purge-form h3, .storage-page .storage-candidates h3 { margin: 0; font-size: var(--fs-5); } .storage-page .storage-purge-form p, .storage-page .storage-candidates p { margin: 0; color: var(--muted); font-size: var(--fs-3); } .storage-page .storage-field { display: grid; gap: var(--s1); color: var(--muted); font-size: var(--fs-2); } .storage-page .storage-candidates-link { justify-self: start; } /* ---- Клиенты ---- */ .clients-page .clients-col-id { width: 8%; } .clients-page .clients-col-client { width: 22%; } .clients-page .clients-col-contact { width: 14%; } .clients-page .clients-col-orders { width: 10%; } .clients-page .clients-col-active { width: 9%; } .clients-page .clients-col-paid { width: 11%; } .clients-page .clients-col-registered { width: 13%; } .clients-page .clients-col-source { width: 13%; } .clients-page .clients-client-main { display: flex; align-items: flex-start; flex-direction: column; gap: var(--s2); min-width: 0; } .clients-page .clients-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1); width: 100%; min-width: 0; } .clients-page .clients-tag { display: inline-flex; align-items: center; min-width: 0; min-height: 19px; padding: var(--s1) var(--s2); border-radius: var(--radius-sm); font-size: var(--fs-1); font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; } /* Цвет метки — по порядку, а не по смыслу: метки владелец пишет сам. */ .clients-page .clients-tag-1 { background: var(--done-bg); color: var(--done-fg); } .clients-page .clients-tag-2 { background: var(--warn-bg); color: var(--warn-fg); } .clients-page .clients-tag-3 { background: var(--busy-bg); color: var(--busy-fg); } .clients-page .clients-tag-4 { background: var(--stop-bg); color: var(--stop-fg); } .clients-page .clients-tag-5 { background: var(--accent-soft); color: var(--accent); } .clients-page .clients-unread { background: var(--busy-bg); color: var(--busy-fg); } .clients-page .clients-blocked { background: var(--stop-bg); color: var(--stop-fg); } .clients-page .clients-money { font-weight: 700; } .clients-page .clients-source { display: inline-flex; max-width: 100%; padding: var(--s1) var(--s2); border-radius: var(--radius-sm); background: var(--off-bg); color: var(--off-fg); font-size: var(--fs-2); overflow-wrap: anywhere; } .clients-page .clients-drawer-section h3 { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--fs-2); font-weight: 500; } .clients-page .clients-drawer-props { margin-top: var(--s4); } .clients-page .clients-contact-list { display: flex; flex-direction: column; gap: var(--s2); } .clients-page .clients-contact-item { display: flex; align-items: flex-start; gap: var(--s2); } .clients-page .clients-contact-kind { min-width: 74px; color: var(--muted); font-weight: 500; } .clients-page .clients-contact-blocked { color: var(--stop-fg); font-size: var(--fs-2); } .clients-page .clients-active-orders-section { margin-top: var(--s5); } .clients-page .clients-active-order { padding: var(--s3) 0; border-top: 1px solid var(--border); } .clients-page .clients-active-order:first-child { border-top: 0; } .clients-page .clients-active-order-head { display: flex; justify-content: space-between; gap: var(--s2); } .clients-page .clients-order-work { margin-top: var(--s1); font-weight: 600; overflow-wrap: anywhere; } .clients-page .clients-order-topic, .clients-page .clients-order-deadline { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-3); } /* ---- Партнёры ---- */ .partners-page .partners-col-id { width: 9%; } .partners-page .partners-col-name { width: 18%; } .partners-page .partners-col-total { width: 12%; } .partners-page .partners-col-l1 { width: 9%; } .partners-page .partners-col-l2 { width: 9%; } .partners-page .partners-col-earned { width: 15%; } .partners-page .partners-col-pending { width: 13%; } .partners-page .partners-col-available { width: 15%; } /* Деньги партнёра со смыслом: «в пути» ждёт, «доступно» можно выводить. */ .partners-page .partners-money { white-space: nowrap; } .partners-page .partners-money.is-pending { color: var(--warn-fg); } .partners-page .partners-money.is-available { color: var(--done-fg); font-weight: 700; } .partners-page .partners-referrals { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--border); } .partners-page .partners-referrals summary { display: flex; align-items: center; justify-content: space-between; color: var(--text); font-weight: 700; list-style: none; cursor: pointer; } .partners-page .partners-referrals summary::-webkit-details-marker { display: none; } .partners-page .partners-referrals summary span { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 var(--s2); border-radius: 12px; background: var(--accent-soft); color: var(--accent); } .partners-page .partners-referral-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .partners-page .partners-referral-item:last-child { border-bottom: 0; } .partners-page .partners-referral-level { display: inline-grid; place-items: center; height: 26px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-2); font-weight: 800; } .partners-page .partners-referral-item div { display: flex; min-width: 0; flex-direction: column; gap: var(--s1); } .partners-page .partners-referral-item strong { overflow-wrap: anywhere; } .partners-page .partners-referral-item div span { color: var(--muted); font-size: var(--fs-2); } @media (max-width: 760px) { .storage-page .storage-check-column, .storage-page .storage-actions-column, .storage-page .storage-file-cell { width: auto; } .storage-page .storage-file-primary { max-width: none; } .storage-page .storage-selection { align-items: stretch; flex-direction: column; } .storage-page .storage-stats { grid-template-columns: minmax(0, 1fr); } .orders-page .orders-deadline-popover { right: auto; left: 0; width: min(270px, 70vw); } } /* === КОНЕЦ БЛОКА «СПИСКИ» === */ /* === КАНДИДАТЫ НА ОЧИСТКУ 17.12 (п. 33): отбор и строка действий; поля, кнопки, таблица и окно — общие наборы. === */ .candidates-page .candidates-filter { justify-content: flex-start; align-items: end; flex-wrap: wrap; gap: var(--s3); } .candidates-page .candidates-filter .form-field { margin-bottom: 0; } .candidates-page .candidates-filter .form-field:first-child { width: min(320px, 100%); } .candidates-page .candidates-filter .form-field + .form-field { width: 140px; } .candidates-page .candidates-filter > button { min-height: 44px; } .candidates-page .candidates-actions { display: flex; justify-content: flex-end; margin-top: var(--s3); } /* === КОНЕЦ БЛОКА «КАНДИДАТЫ НА ОЧИСТКУ» === */ /* ============================================================ ГРАФИКИ. РАЗМЕТКА НЕСЁТ ГЕОМЕТРИЮ, СТИЛИ — ПРАВИЛА, ТЕМА — ЦВЕТ. Ни один тон не написан внутри SVG: там только номер ряда классом (`s1` … `s7`), а чем этот номер красить, решает палитра заведения. ============================================================ */ .chart { width: 100%; height: auto; display: block; } /* Сетка и оси — теми же линиями, что и границы таблиц: график не должен выглядеть чужой вставкой на странице. */ .chart .grid { stroke: var(--border); stroke-width: 1; fill: none; } .chart .axis { fill: var(--muted); font-size: var(--fs-3); } /* ГРАНИЦА МЕСЯЦА И ГОДА. Пунктиром и цветом рамки, а не акцентом: это разделитель, а не данные. Сплошная линия читалась бы как ещё один ряд. */ .chart .edge { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; } /* Квартал на неделях — тем же пунктиром, но реже: видно, что это другая граница, а не месяц (17.2). */ .chart .edge.quarter { stroke-dasharray: 6 4; } .chart .edge.year { stroke-width: 2; stroke-dasharray: none; } /* Ось — заметнее сетки, но тише данных; засечки подписей — ею же. */ .chart .baseline, .chart .tick { stroke: var(--border-strong); stroke-width: 1; } /* ЛИНИЯ БЕЗ ТОЧЕК (17.2, по прототипу). Толщина 2,25 и круглые концы: ломаная из сотни дней читается формой, а не бусинами. */ .chart .line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; } .chart .dot { stroke: var(--panel); stroke-width: 1.5; } /* МАРКЕР — ТОЛЬКО У ТОЧКИ ПОД КУРСОРОМ, и это CSS, а не скрипт: полоса под курсором (`.hitgroup`) несёт кружок на каждом ряду. Закреплённая нажатием точка (`.on`) держит маркер, пока не выбрали другую. */ .chart .mark { fill: currentColor; stroke: var(--panel); stroke-width: 2; opacity: 0; pointer-events: none; } .chart .hitgroup:hover .mark, .chart .hitgroup.on .mark { opacity: 1; } .chart .mark[hidden] { display: none; } .chart .bar { stroke: none; } /* ВЫКЛЮЧЕННЫЙ РЯД НЕ УДАЛЯЕТСЯ ИЗ РАЗМЕТКИ, А ГАСНЕТ. Тогда его можно вернуть, не спрашивая сервер, и человек не ждёт перезагрузки ради того, чтобы посмотреть на линию под линией. */ .chart .series[hidden] { display: none; } /* Столбик или точка под курсором. Обводка, а не смена заливки: заливка — это ряд, и менять её значило бы соврать про цвет. */ .chart .hit { fill: transparent; } .chart .band { fill: var(--row-hover); opacity: 0; } .chart .band.on { opacity: 1; } .s1 { color: var(--series-1); } .s2 { color: var(--series-2); } .s3 { color: var(--series-3); } .s4 { color: var(--series-4); } .s5 { color: var(--series-5); } .s6 { color: var(--series-6); } .s7 { color: var(--series-7); } /* Один класс красит и линию, и заливку, и точку в легенде: `color` объявлен выше, `currentColor` его подхватывает. Иначе на каждый ряд пришлось бы по три правила, и однажды одно из трёх забыли бы. */ .chart .line, .chart .bar, .chart .dot { stroke: currentColor; } .chart .bar, .chart .dot { fill: currentColor; } .chart .line { fill: none; } /* Точка ряда в легенде и в подписи под курсором. */ .seriesdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-right: var(--s2); vertical-align: baseline; } .legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); font-size: var(--fs-3); } .readout { min-height: 1.4em; } /* НОЛЬ НА ОСИ ПРИБЫЛИ — ГРАНИЦА СМЫСЛА, А НЕ ОЧЕРЕДНОЕ ДЕЛЕНИЕ: выше заработали, ниже потеряли. Сольётся с сеткой — и убыточный месяц придётся вычислять по подписям слева вместо того, чтобы увидеть. */ .chart .grid.zero { stroke: var(--border-strong); stroke-width: 1.5; } /* Погашенный ряд в легенде. Гаснет подпись, а не исчезает: кнопку надо чем-то нажать обратно. */ .legend button.dim { opacity: .45; } /* ============================================================ НАСТРОЙКИ V6.3 (13.6.2). Весь блок изолирован маршрутом. ============================================================ */ .settings-page { width: 100%; max-width: none; min-width: 0; padding-bottom: calc(64px + var(--s8)); } /* ЗОНЫ, ПОЛЯ, ТУМБЛЕР И ПАНЕЛЬ ВКЛАДКИ — ОБЩИЙ НАБОР ФОРМЫ `form-*` (17.7, решение владельца: «Маркетинг» и «Команда» говорят языком «Настроек», а копия расходится). Здесь остаётся только то, чего нет больше нигде: темы, звёзды, логотип, провайдеры, ссылки, плашка сохранения. */ /* ВКЛАДКИ НАСТРОЕК — ОБЩИЕ `.list-tabs` (17.6, владелец: «обводка кривая»). Своя сетка-рамка с внутренней тенью у активной обрезалась скруглением и соседней границей; правила удалены, вид — как у остальных вкладок. */ .settings-page .settings-stars legend, .settings-page .settings-radio-stack legend, .settings-page .settings-theme-options legend { display: block; margin-bottom: var(--s2); color: var(--text); font-size: var(--fs-3); font-weight: 600; } .settings-page .settings-theme-options, .settings-page .settings-radio-stack, .settings-page .settings-stars { min-width: 0; margin: 0; padding: 0; border: 0; } .settings-page .settings-theme-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); } .settings-page .settings-theme-options legend { grid-column: 1 / -1; } .settings-page .settings-theme-options label, .settings-page .settings-radio-stack label { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-soft); cursor: pointer; } .settings-page .settings-theme-options label:has(input:checked), .settings-page .settings-radio-stack label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .settings-page .settings-radio-stack { display: grid; gap: var(--s2); margin-bottom: 0; } .settings-page .settings-stars > div { display: flex; flex-wrap: wrap; gap: var(--s1); } .settings-page .settings-stars label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-soft); color: var(--muted-soft); cursor: pointer; } .settings-page .settings-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; } .settings-page .settings-stars label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .settings-page .settings-stars label:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; } .settings-page .settings-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .settings-page .settings-provider-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; padding: var(--s3); border-bottom: 1px solid var(--border); } .settings-page .settings-provider-row strong { color: var(--muted); font-size: var(--fs-3); font-weight: 500; } .settings-page .settings-logo-block { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: var(--s4); padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); } .settings-page .settings-logo-preview { display: grid; place-items: center; width: 104px; height: 104px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--muted); font-size: var(--fs-2); line-height: 1.3; text-align: center; } .settings-page .settings-logo-preview img { display: block; width: 100%; height: 100%; object-fit: contain; } .settings-page .settings-logo-preview [hidden] { display: none; } .settings-page .settings-logo-controls { display: grid; min-width: 0; gap: var(--s2); } .settings-page .settings-logo-controls > label { font-weight: 600; } .settings-page .settings-logo-controls input[type="file"] { min-width: 0; width: 100%; } .settings-page .settings-logo-actions { display: flex; flex-wrap: wrap; gap: var(--s2); } .settings-page .settings-logo-actions button { min-height: 44px; } .settings-page .settings-logo-message { min-height: 20px; margin: 0; font-size: var(--fs-3); } .settings-page .settings-logo-message[data-state="error"] { color: var(--stop-fg); } .settings-page .settings-logo-message[data-state="ok"] { color: var(--accent); } .settings-page .settings-legal-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--s4); } .settings-page .settings-legal-links .form-field, .settings-page .settings-legal-links input { min-width: 0; } .settings-page .is-disabled { color: var(--muted); opacity: .62; } .settings-page .is-disabled input, .settings-page .is-disabled select, .settings-page .is-disabled textarea { border-color: var(--border); background: var(--panel-soft); cursor: not-allowed; } .settings-page .settings-reminders-link { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } .settings-page .settings-secondary-action { flex: 0 0 auto; min-height: 44px; padding: var(--s2) var(--s4); border: 1px solid var(--control); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; } .settings-page .settings-secondary-action:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .settings-page .settings-inline-submit { padding: 0 var(--s6) var(--s6); } .settings-page.is-enhanced .settings-inline-submit { display: none; } .settings-page .settings-savebar { position: fixed; z-index: 40; left: var(--sidebar-w); right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; margin: 0; padding: var(--s2) var(--s5); border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--panel); box-shadow: var(--shadow-hover); } .settings-page .settings-savebar[hidden] { display: none; } .settings-page .settings-savebar p { display: grid; gap: var(--s1); min-width: 0; margin: 0; } .settings-page .settings-savebar p span { color: var(--muted); font-size: var(--fs-3); } .settings-page .settings-savebar > div { display: flex; gap: var(--s2); } .settings-page .settings-savebar button { min-height: 44px; padding: var(--s2) var(--s5); } @media (max-width: 1180px) { .settings-page .settings-theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } .settings-page .settings-legal-links { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .settings-page .settings-savebar { left: 0; } } @media (max-width: 560px) { .settings-page { padding-bottom: calc(132px + var(--s4)); } .settings-page .settings-theme-options { grid-template-columns: minmax(0, 1fr); } .settings-page .settings-reminders-link, .settings-page .settings-savebar { align-items: stretch; flex-direction: column; } .settings-page .settings-secondary-action { width: 100%; text-align: center; } .settings-page .settings-savebar { left: 0; bottom: 0; min-height: 0; margin: 0; } .settings-page .settings-savebar > div { display: grid; grid-template-columns: 1fr 1fr; } .settings-page .settings-savebar button { width: 100%; } .settings-page .settings-logo-block { grid-template-columns: minmax(0, 1fr); } .settings-page .settings-logo-preview { width: 96px; height: 96px; } .settings-page .settings-logo-actions { display: grid; grid-template-columns: minmax(0, 1fr); } .settings-page .settings-logo-actions button { width: 100%; } } /* КОНЕЦ БЛОКА «НАСТРОЙКИ V6.3» */ /* ------------------------------------------------------------------------- КАРТОЧКИ КЛИЕНТА И ПАРТНЁРА Общая production-оболочка V18/V12. Селекторы намеренно замкнуты на страницу: другие карточки и таблицы CRM от этого блока не меняются. ------------------------------------------------------------------------- */ :is(.client-card-page, .partner-card-page) { display: grid; gap: var(--s4); max-width: 1540px; min-width: 0; padding-bottom: var(--s8); } :is(.client-card-page, .partner-card-page) .card-page-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :is(.client-card-page, .partner-card-page) .card-page-breadcrumb { width: max-content; max-width: 100%; color: var(--accent); font-weight: 700; overflow-wrap: anywhere; } :is(.client-card-page, .partner-card-page) .card-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); } :is(.client-card-page, .partner-card-page) .card-page-header h1 { margin: 0; font-size: var(--fs-7); line-height: 1.15; overflow-wrap: anywhere; } :is(.client-card-page, .partner-card-page) .card-page-kicker { margin: 0 0 var(--s1); color: var(--muted); font-size: var(--fs-3); font-weight: 700; } :is(.client-card-page, .partner-card-page) .card-page-alert { border: 1px solid var(--border); border-left: 4px solid var(--warn-fg); border-radius: var(--radius-lg); background: var(--warn-bg); color: var(--text); padding: var(--s3) var(--s4); } :is(.client-card-page, .partner-card-page) .card-page-alert.stop { border-left-color: var(--stop-fg); background: var(--stop-bg); } :is(.client-card-page, .partner-card-page) .card-page-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); } :is(.client-card-page, .partner-card-page) .card-page-kpi { display: grid; min-height: 84px; place-content: center; gap: var(--s1); border: 0; border-left: 1px solid var(--border); background: var(--panel); color: var(--text); padding: var(--s3) var(--s4); text-align: center; } :is(.client-card-page, .partner-card-page) .card-page-kpi:first-child { border-left: 0; } :is(.client-card-page, .partner-card-page) button.card-page-kpi { cursor: pointer; } :is(.client-card-page, .partner-card-page) button.card-page-kpi:hover { background: var(--row-hover); } :is(.client-card-page, .partner-card-page) .card-page-kpi strong { font-size: var(--fs-6); line-height: 1.1; overflow-wrap: anywhere; } :is(.client-card-page, .partner-card-page) .card-page-kpi span { color: var(--muted); font-size: var(--fs-3); font-weight: 600; } :is(.client-card-page, .partner-card-page) .card-page-tabs { display: flex; align-items: center; gap: var(--s2); min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-bottom: 1px solid var(--border); padding: 0 var(--s1); } :is(.client-card-page, .partner-card-page) .card-page-tabs::-webkit-scrollbar { display: none; } :is(.client-card-page, .partner-card-page) .card-page-tabs-row { display: flex; align-items: flex-end; gap: var(--s3); border-bottom: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-tabs-row .card-page-tabs { flex: 1 1 auto; border-bottom: 0; } :is(.client-card-page, .partner-card-page) .card-page-panel { min-width: 0; } :is(.client-card-page, .partner-card-page) .card-page-tabs button { position: relative; flex: 0 0 auto; border: 0; border-bottom: 0; border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; padding: var(--s2) var(--s2) var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-tabs button[aria-selected="true"] { color: var(--text); } :is(.client-card-page, .partner-card-page) .card-page-tabs button[aria-selected="true"]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 0; background: var(--accent); content: ""; } :is(.client-card-page, .partner-card-page) .card-page-tabs button:hover { color: var(--text); } :is(.client-card-page, .partner-card-page) .card-page-related-link { flex: 0 0 auto; padding: var(--s2) var(--s2) var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-zone { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); } :is(.client-card-page, .partner-card-page) .card-page-zone > header { display: flex; align-items: center; min-height: 48px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel)); } :is(.client-card-page, .partner-card-page) .card-page-zone > header::before { content: ""; width: var(--s2); height: var(--s2); flex: 0 0 auto; margin-right: var(--s2); border-radius: 50%; background: var(--accent); } :is(.client-card-page, .partner-card-page) .card-page-zone > header h2 { margin: 0; font-size: var(--fs-4); } :is(.client-card-page, .partner-card-page) .card-page-zone > header p { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-3); } :is(.client-card-page, .partner-card-page) [hidden] { display: none !important; } :is(.client-card-page, .partner-card-page) .card-page-zone-body { padding: var(--s4); } :is(.client-card-page, .partner-card-page) .card-page-stack { display: grid; gap: var(--s4); min-width: 0; } .client-card-page .client-card-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: var(--s4); align-items: start; } .partner-card-page .partner-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-items: start; } :is(.client-card-page, .partner-card-page) .card-page-properties { display: grid; margin: 0; } :is(.client-card-page, .partner-card-page) .card-page-properties > div, :is(.client-card-page, .partner-card-page) .card-page-edit-field { display: grid; grid-template-columns: minmax(132px, .7fr) minmax(0, 1.3fr); gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-properties > div:last-child { border-bottom: 0; } :is(.client-card-page, .partner-card-page) .card-page-properties dt, :is(.client-card-page, .partner-card-page) .card-page-edit-field > span { color: var(--muted); font-size: var(--fs-3); } :is(.client-card-page, .partner-card-page) .card-page-properties dd { min-width: 0; margin: 0; font-weight: 650; overflow-wrap: anywhere; } :is(.client-card-page, .partner-card-page) .card-page-editable-value, :is(.client-card-page, .partner-card-page) .card-page-inline-display { display: flex; min-width: 0; align-items: center; gap: var(--s2); } :is(.client-card-page, .partner-card-page) .card-page-inline-display > span { min-width: 0; overflow-wrap: anywhere; } :is(.client-card-page, .partner-card-page) .card-page-inline-editor { width: 100%; flex-wrap: nowrap; } :is(.client-card-page, .partner-card-page) .card-page-inline-form, :is(.client-card-page, .partner-card-page) .card-page-action-form, :is(.client-card-page, .partner-card-page) .card-page-grant { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: 0; } :is(.client-card-page, .partner-card-page) .card-page-inline-form input, :is(.client-card-page, .partner-card-page) .card-page-inline-form select, :is(.client-card-page, .partner-card-page) .card-page-action-form input, :is(.client-card-page, .partner-card-page) .card-page-grant input, :is(.client-card-page, .partner-card-page) .card-page-grant select, :is(.client-card-page, .partner-card-page) .card-page-form-stack input, :is(.client-card-page, .partner-card-page) .card-page-form-stack textarea, :is(.client-card-page, .partner-card-page) .card-page-compose textarea { max-width: 100%; border-color: var(--border-strong); background: var(--panel); } :is(.client-card-page, .partner-card-page) .card-page-inline-form input[type="text"] { box-sizing: border-box; height: 36px; min-height: 36px; min-width: 0; flex: 1 1 144px; border: 1px solid var(--control); border-radius: var(--radius); padding: 0 var(--s3); background: var(--panel); color: var(--text); font: inherit; line-height: 1.2; } /* КНОПКИ КАРТОЧЕК — ОБЩИЙ НАБОР (17.12, 17.6-5, остаток Вл. 6): кнопка — `.list-button` (`is-primary`, `is-danger`), ссылка-действие — `.list-link`. До 17.12 здесь жили свои `.card-page-secondary`, `.card-page-copy` и правило «любая кнопка в форме карточки — залита акцентом». */ :is(.client-card-page, .partner-card-page) .card-page-action-row { margin: var(--s3) 0 0; } :is(.client-card-page, .partner-card-page) .card-page-icon-action { display: inline-grid; width: 32px; min-width: 32px; height: 32px; min-height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid transparent; border-radius: var(--radius); padding: 0; background: transparent; color: var(--accent); font-size: var(--fs-4); font-weight: 800; line-height: 1; cursor: pointer; } :is(.client-card-page, .partner-card-page) .card-page-icon-action:hover { border-color: var(--border); background: var(--row-hover); } :is(.client-card-page, .partner-card-page) .card-page-icon-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :is(.client-card-page, .partner-card-page) .card-page-icon-action:active { transform: translateY(1px); } :is(.client-card-page, .partner-card-page) .card-page-icon-action:disabled { opacity: .5; cursor: default; } :is(.client-card-page, .partner-card-page) .card-page-header-action { margin-left: auto; } :is(.client-card-page, .partner-card-page) .card-page-action-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } :is(.client-card-page, .partner-card-page) .card-page-inline-form .card-page-icon-action { width: 36px; min-width: 36px; height: 36px; min-height: 36px; flex-basis: 36px; border-color: var(--border); border-radius: var(--radius); padding: 0; } :is(.client-card-page, .partner-card-page) .card-page-inline-form .card-page-icon-action.is-confirm { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } :is(.client-card-page, .partner-card-page) .card-page-inline-form .card-page-icon-action.is-cancel { background: var(--panel); color: var(--muted); } :is(.client-card-page, .partner-card-page) .card-page-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); } :is(.client-card-page, .partner-card-page) .card-page-help { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--fs-3); overflow-wrap: anywhere; } :is(.client-card-page, .partner-card-page) .card-page-tags { display: flex; flex-wrap: wrap; gap: var(--s2); } :is(.client-card-page, .partner-card-page) .card-page-tag { display: inline-flex; align-items: center; gap: var(--s1); min-height: 28px; border: 0; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); padding: var(--s1) var(--s2); font-size: var(--fs-3); font-weight: 700; } :is(.client-card-page, .partner-card-page) .card-page-tag button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; } :is(.client-card-page, .partner-card-page) .card-page-tag-remove { display: inline-grid; width: 22px; height: 22px; place-items: center; margin: -4px -4px -4px 0; border-radius: 50%; opacity: 0; } :is(.client-card-page, .partner-card-page) .card-page-tag:hover .card-page-tag-remove, :is(.client-card-page, .partner-card-page) .card-page-tag:focus-within .card-page-tag-remove, :is(.client-card-page, .partner-card-page) .card-page-tag-remove:focus-visible { opacity: 1; } :is(.client-card-page, .partner-card-page) .card-page-tag-remove:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } :is(.client-card-page, .partner-card-page) .card-page-tag-editor { margin-top: var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-contacts { display: grid; } :is(.client-card-page, .partner-card-page) .card-page-contact { display: grid; grid-template-columns: minmax(80px, .55fr) minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-contact:last-child { border-bottom: 0; } :is(.client-card-page, .partner-card-page) .card-page-contact > span { color: var(--muted); font-size: var(--fs-3); } :is(.client-card-page, .partner-card-page) .card-page-contact strong { min-width: 0; overflow-wrap: anywhere; } :is(.client-card-page, .partner-card-page) .card-page-contact > div { display: flex; align-items: center; gap: var(--s1); } :is(.client-card-page, .partner-card-page) .card-page-state { display: inline-flex; align-items: center; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); padding: var(--s1) var(--s2); font-size: var(--fs-2); font-weight: 700; white-space: nowrap; } :is(.client-card-page, .partner-card-page) .card-page-state.stop { background: var(--stop-bg); color: var(--stop-fg); } :is(.client-card-page, .partner-card-page) .card-page-form-stack { display: grid; gap: var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-form-stack label, :is(.client-card-page, .partner-card-page) .card-page-action-form label, :is(.client-card-page, .partner-card-page) .card-page-grant label { display: grid; gap: var(--s1); color: var(--muted); font-size: var(--fs-3); font-weight: 650; } :is(.client-card-page, .partner-card-page) .card-page-form-stack textarea, :is(.client-card-page, .partner-card-page) .card-page-compose textarea { width: 100%; resize: vertical; } :is(.client-card-page, .partner-card-page) .card-page-table-wrap { overflow: auto; } :is(.client-card-page, .partner-card-page) .card-page-table { width: 100%; min-width: 720px; border-collapse: collapse; } :is(.client-card-page, .partner-card-page) .card-page-table th { background: var(--panel-soft); color: var(--muted); font-size: var(--fs-3); padding: var(--s3); text-align: left; white-space: nowrap; } :is(.client-card-page, .partner-card-page) .card-page-table td { padding: var(--s3); border-top: 1px solid var(--border); vertical-align: middle; } :is(.client-card-page, .partner-card-page) .card-page-table tbody tr:hover td { background: var(--row-hover); } :is(.client-card-page, .partner-card-page) .card-page-table .num { text-align: right; white-space: nowrap; } :is(.client-card-page, .partner-card-page) .card-page-orders-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); color: var(--muted); font-size: var(--fs-3); } :is(.client-card-page, .partner-card-page) .card-page-order-filters { display: flex; flex-wrap: wrap; gap: var(--s2); } :is(.client-card-page, .partner-card-page) .card-page-order-filters button { min-height: 34px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--muted); padding: var(--s1) var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-order-filters button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } :is(.client-card-page, .partner-card-page) .card-page-empty { padding: var(--s5); margin: 0; color: var(--muted); text-align: center; } :is(.client-card-page, .partner-card-page) .card-page-chat { display: grid; gap: var(--s2); max-height: 600px; overflow: auto; padding: var(--s4); background: var(--panel-soft); } :is(.client-card-page, .partner-card-page) .card-page-message { width: fit-content; max-width: min(76%, 760px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); padding: var(--s3); overflow-wrap: anywhere; } :is(.client-card-page, .partner-card-page) .card-page-message.out { justify-self: end; background: var(--accent-soft); border-color: var(--border-strong); } :is(.client-card-page, .partner-card-page) .card-page-message small, :is(.client-card-page, .partner-card-page) .card-page-message-fail { display: block; margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-2); } :is(.client-card-page, .partner-card-page) .card-page-message-fail { color: var(--stop-fg); } :is(.client-card-page, .partner-card-page) .card-page-chat-plate { justify-self: center; color: var(--muted); font-size: var(--fs-3); text-align: center; } :is(.client-card-page, .partner-card-page) .card-page-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-details summary { color: var(--accent); cursor: pointer; font-weight: 700; } :is(.client-card-page, .partner-card-page) .card-page-details form { margin-top: var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-grant { padding: var(--s4); border-top: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-danger-zone { border-left: 4px solid var(--stop-fg); } :is(.client-card-page, .partner-card-page) .card-page-link-value { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s2); } :is(.client-card-page, .partner-card-page) .card-page-link-value a { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 900px) { .client-card-page .client-card-grid, .partner-card-page .partner-card-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { :is(.client-card-page, .partner-card-page) .card-page-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(4) { border-top: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-header { align-items: stretch; flex-direction: column; } :is(.client-card-page, .partner-card-page) .card-page-header form > button { width: 100%; } :is(.client-card-page, .partner-card-page) .card-page-tabs-row { align-items: stretch; flex-direction: column; gap: 0; } :is(.client-card-page, .partner-card-page) .card-page-related-link { align-self: flex-start; } :is(.client-card-page, .partner-card-page) .card-page-orders-toolbar { align-items: flex-start; flex-direction: column; } :is(.client-card-page, .partner-card-page) .card-page-properties > div, :is(.client-card-page, .partner-card-page) .card-page-edit-field, :is(.client-card-page, .partner-card-page) .card-page-contact { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } :is(.client-card-page, .partner-card-page) .card-page-contact > div { justify-content: space-between; } :is(.client-card-page, .partner-card-page) .card-page-compose { grid-template-columns: minmax(0, 1fr); } :is(.client-card-page, .partner-card-page) .card-page-compose button { width: 100%; } } @media (max-width: 420px) { :is(.client-card-page, .partner-card-page) .card-page-kpis { grid-template-columns: minmax(0, 1fr); } :is(.client-card-page, .partner-card-page) .card-page-kpi, :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(3), :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(4) { border-left: 0; border-top: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-kpi:first-child { border-top: 0; } :is(.client-card-page, .partner-card-page) .card-page-zone-body { padding: var(--s3); } } /* 13.6.4a — точная геометрия V18/V12 поверх production tokens. */ :is(.client-card-page, .partner-card-page) { display: block; width: 100%; max-width: 1540px; padding-bottom: var(--s8); } :is(.client-card-page, .partner-card-page) .card-page-breadcrumb { display: inline-flex; margin-bottom: var(--s2); text-decoration: none; } :is(.client-card-page, .partner-card-page) .card-page-breadcrumb:hover { text-decoration: underline; } :is(.client-card-page, .partner-card-page) .card-page-header { position: relative; align-items: center; min-height: 36px; margin-bottom: var(--s4); } :is(.client-card-page, .partner-card-page) .card-page-header h1 { min-width: 0; font-size: clamp(24px, 2vw, 31px); line-height: 1.15; letter-spacing: -.02em; } :is(.client-card-page, .partner-card-page) .card-page-head-menu { position: relative; flex: 0 0 auto; } :is(.client-card-page, .partner-card-page) .card-page-head-menu > summary { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); cursor: pointer; font-size: var(--fs-6); line-height: 1; list-style: none; } :is(.client-card-page, .partner-card-page) .card-page-head-menu > summary::-webkit-details-marker { display: none; } :is(.client-card-page, .partner-card-page) .card-page-head-menu > summary:hover { background: var(--panel-soft); } :is(.client-card-page, .partner-card-page) .card-page-menu { position: absolute; z-index: 6; top: calc(100% + var(--s2)); right: 0; width: min(320px, calc(100vw - var(--s8))); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); } :is(.client-card-page, .partner-card-page) .card-page-menu > p { margin: var(--s2) 0 var(--s3); color: var(--muted); font-size: var(--fs-3); } :is(.client-card-page, .partner-card-page) .card-page-check { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: var(--s2) !important; } :is(.client-card-page, .partner-card-page) .card-page-check input { flex: 0 0 auto; } :is(.client-card-page, .partner-card-page) .card-page-alert { margin-bottom: var(--s4); } :is(.client-card-page, .partner-card-page) .card-page-kpis { margin-bottom: var(--s5); border-radius: var(--radius-lg); } :is(.client-card-page, .partner-card-page) .card-page-kpi { min-height: 82px; padding: var(--s4) var(--s5); } :is(.client-card-page, .partner-card-page) .card-page-kpi strong { font-size: var(--fs-7); font-variant-numeric: tabular-nums; } :is(.client-card-page, .partner-card-page) .card-page-kpi span { font-size: var(--fs-2); } :is(.client-card-page, .partner-card-page) .card-page-tabs-row { align-items: flex-start; gap: calc(var(--s7) - var(--s1)); margin-bottom: var(--s4); } :is(.client-card-page, .partner-card-page) .card-page-tabs { gap: 28px; padding: 0 var(--s1); } :is(.client-card-page, .partner-card-page) .card-page-tabs button, :is(.client-card-page, .partner-card-page) .card-page-related-link { min-height: 40px; padding: 0 0 12px; white-space: nowrap; } :is(.client-card-page, .partner-card-page) .card-page-related-link { padding-top: var(--s1); } :is(.client-card-page, .partner-card-page) .card-page-zone { border-radius: var(--radius-lg); } :is(.client-card-page, .partner-card-page) .card-page-zone > header { min-height: 48px; padding: var(--s3) var(--s4); background: var(--panel); } :is(.client-card-page, .partner-card-page) .card-page-zone > header::before { display: none; } :is(.client-card-page, .partner-card-page) .card-page-zone > header h2 { font-size: var(--fs-4); } :is(.client-card-page, .partner-card-page) .card-page-zone-body { padding: var(--s4); } :is(.client-card-page, .partner-card-page) .card-page-stack { gap: var(--s4); } .client-card-page .client-card-grid { grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: var(--s4); } .partner-card-page .partner-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } :is(.client-card-page, .partner-card-page) .card-page-properties > div, :is(.client-card-page, .partner-card-page) .card-page-edit-field { grid-template-columns: 190px minmax(0, 1fr); gap: var(--s4); padding: var(--s2) 0; } :is(.client-card-page, .partner-card-page) .card-page-secondary-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-disclosure { min-width: 0; } :is(.client-card-page, .partner-card-page) .card-page-disclosure > summary { width: max-content; max-width: 100%; color: var(--accent); cursor: pointer; font-weight: 700; } :is(.client-card-page, .partner-card-page) .card-page-disclosure[open] { flex: 1 1 100%; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); } :is(.client-card-page, .partner-card-page) .card-page-disclosure form { margin-top: var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-note-text { min-height: 64px; margin: 0 0 var(--s3); line-height: 1.6; white-space: pre-line; } :is(.client-card-page, .partner-card-page) .card-page-contact { grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s3) 0; } :is(.client-card-page, .partner-card-page) .card-page-action-form { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.2fr) auto; align-items: end; gap: var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-action-form button { min-height: 38px; } .partner-card-page .card-page-action-form.payout-request-form { grid-template-columns: minmax(0, 1fr) auto auto; } @media (max-width: 720px) { .partner-card-page .card-page-action-form.payout-request-form { grid-template-columns: minmax(0, 1fr); } } :is(.client-card-page, .partner-card-page) .card-page-money-properties dd { font-variant-numeric: tabular-nums; } :is(.client-card-page, .partner-card-page) .card-page-data-zone > header { min-height: 44px; } :is(.client-card-page, .partner-card-page) .card-page-table { min-width: 900px; } .client-card-page .card-page-orders-table { min-width: 1080px; } .partner-card-page .card-page-referred-table { min-width: 760px; } .partner-card-page .card-page-accruals-table { min-width: 1080px; } .partner-card-page .card-page-money-table { min-width: 980px; table-layout: fixed; } :is(.client-card-page, .partner-card-page) .card-page-table th { height: 44px; padding: 0 var(--s3); font-size: var(--fs-2); vertical-align: middle; } :is(.client-card-page, .partner-card-page) .card-page-table td { height: 48px; padding: var(--s2) var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-row-link { color: var(--accent); font-weight: 750; } :is(.client-card-page, .partner-card-page) .card-page-state.active { background: var(--busy-bg); color: var(--busy-fg); } :is(.client-card-page, .partner-card-page) .card-page-state.complete, :is(.client-card-page, .partner-card-page) .card-page-state.available { background: var(--done-bg); color: var(--done-fg); } :is(.client-card-page, .partner-card-page) .card-page-state.transit { background: var(--warn-bg); color: var(--warn-fg); } :is(.client-card-page, .partner-card-page) .card-page-orders-toolbar, :is(.client-card-page, .partner-card-page) .card-page-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); color: var(--muted); font-size: var(--fs-3); } :is(.client-card-page, .partner-card-page) .card-page-filter-bar-stacked { align-items: flex-start; } :is(.client-card-page, .partner-card-page) .card-page-filter-groups { display: flex; flex-wrap: wrap; gap: var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-filter-group { display: flex; flex-wrap: wrap; gap: var(--s2); } :is(.client-card-page, .partner-card-page) .card-page-filter-group button { min-height: 34px; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--muted); font-weight: 650; } :is(.client-card-page, .partner-card-page) .card-page-filter-group button[aria-pressed="true"] { border-color: var(--border-strong); background: var(--accent-soft); color: var(--accent); } :is(.client-card-page, .partner-card-page) .card-page-date-filter { display: flex; align-items: end; gap: var(--s2); margin-left: auto; } :is(.client-card-page, .partner-card-page) .card-page-date-filter label { display: grid; gap: var(--s1); color: var(--muted); font-size: var(--fs-2); } :is(.client-card-page, .partner-card-page) .card-page-date-filter input { height: 34px; border-color: var(--border); background: var(--panel); } :is(.client-card-page, .partner-card-page) .card-page-summary { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); } :is(.client-card-page, .partner-card-page) .card-page-summary span { display: inline-flex; align-items: baseline; gap: var(--s1); min-height: 32px; padding: var(--s1) var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--muted); font-size: var(--fs-3); } :is(.client-card-page, .partner-card-page) .card-page-summary strong { color: var(--text); font-variant-numeric: tabular-nums; } :is(.client-card-page, .partner-card-page) .card-page-table-footer { display: flex; justify-content: flex-end; gap: 0.35em; padding: var(--s3) var(--s4); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-3); } :is(.client-card-page, .partner-card-page) .card-page-chat-zone { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 620px; } :is(.client-card-page, .partner-card-page) .card-page-chat-zone > header { justify-content: space-between; } :is(.client-card-page, .partner-card-page) .card-page-channel-badge { display: inline-flex; align-items: center; min-height: 28px; padding: var(--s1) var(--s2); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-2); font-weight: 700; } :is(.client-card-page, .partner-card-page) .card-page-chat { display: flex; flex-direction: column; gap: var(--s2); min-height: 480px; max-height: 540px; padding: var(--s5); } :is(.client-card-page, .partner-card-page) .card-page-chat-day { align-self: center; padding: var(--s1) var(--s2); border: 1px solid var(--border); border-radius: var(--s5); background: var(--panel); color: var(--muted); font-size: var(--fs-1); } :is(.client-card-page, .partner-card-page) .card-page-message { max-width: min(68%, 760px); border-radius: 10px; padding: var(--s2) var(--s3); } :is(.client-card-page, .partner-card-page) .card-page-message.in { align-self: flex-start; border-top-left-radius: var(--s1); } :is(.client-card-page, .partner-card-page) .card-page-message.out { align-self: flex-end; border-top-right-radius: var(--s1); } :is(.client-card-page, .partner-card-page) .card-page-message-author { display: block; margin-bottom: var(--s1); color: var(--muted); font-size: var(--fs-1); } :is(.client-card-page, .partner-card-page) .card-page-chat-plate { align-self: center; } :is(.client-card-page, .partner-card-page) .card-page-compose { min-height: 104px; } :is(.client-card-page, .partner-card-page) .card-page-compose-unavailable { margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--border); color: var(--muted); } :is(.client-card-page, .partner-card-page) .card-page-money-kind { display: inline-flex; min-height: 26px; align-items: center; padding: var(--s1) var(--s2); border-radius: var(--radius); background: var(--panel-soft); font-size: var(--fs-2); font-weight: 700; white-space: nowrap; } :is(.client-card-page, .partner-card-page) .card-page-money-kind.accrual { background: var(--done-bg); color: var(--done-fg); } :is(.client-card-page, .partner-card-page) .card-page-money-kind.spend { background: var(--stop-bg); color: var(--stop-fg); } :is(.client-card-page, .partner-card-page) .card-page-money-kind.payout { background: var(--busy-bg); color: var(--busy-fg); } :is(.client-card-page, .partner-card-page) .card-page-money-kind.adjust { background: var(--accent-soft); color: var(--accent); } :is(.client-card-page, .partner-card-page) .card-page-money-amount { font-weight: 780; } :is(.client-card-page, .partner-card-page) .card-page-money-amount.plus { color: var(--done-fg); } :is(.client-card-page, .partner-card-page) .card-page-money-amount.minus { color: var(--stop-fg); } @media (max-width: 1000px) { .client-card-page .client-card-grid, .partner-card-page .partner-card-grid { grid-template-columns: minmax(0, 1fr); } :is(.client-card-page, .partner-card-page) .card-page-action-form { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { :is(.client-card-page, .partner-card-page) .card-page-header { flex-direction: row; align-items: flex-start; } :is(.client-card-page, .partner-card-page) .card-page-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.client-card-page, .partner-card-page) .card-page-kpi, :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(3), :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(4) { border-top: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(-n+2) { border-top: 0; } :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(odd) { border-left: 0; } :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(even) { border-left: 1px solid var(--border); } :is(.client-card-page, .partner-card-page) .card-page-tabs-row { flex-direction: column; align-items: stretch; gap: var(--s1); overflow: visible; } :is(.client-card-page, .partner-card-page) .card-page-tabs { width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: none; } :is(.client-card-page, .partner-card-page) .card-page-related-link { align-self: flex-end; min-height: 32px; padding-bottom: var(--s2); } :is(.client-card-page, .partner-card-page) .card-page-properties > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } :is(.client-card-page, .partner-card-page) .card-page-contact { grid-template-columns: minmax(0, 1fr) auto; } :is(.client-card-page, .partner-card-page) .card-page-contact > span { grid-column: 1 / -1; } :is(.client-card-page, .partner-card-page) .card-page-message { max-width: 88%; } :is(.client-card-page, .partner-card-page) .card-page-date-filter { width: 100%; margin-left: 0; } :is(.client-card-page, .partner-card-page) .card-page-icon-action { width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; } :is(.client-card-page, .partner-card-page) .card-page-inline-form input[type="text"] { height: 40px; min-height: 40px; } :is(.client-card-page, .partner-card-page) .card-page-inline-form .card-page-icon-action { width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; } :is(.client-card-page, .partner-card-page) .card-page-tag-remove { width: 32px; min-width: 32px; height: 32px; min-height: 32px; opacity: 1; } } @media (hover: none) { :is(.client-card-page, .partner-card-page) .card-page-tag-remove { opacity: 1; } } /* Выгрузка и загрузка структуры, 16.2. Путь до поля и поле файла не вылезают за панель на телефоне. */ .transfer-page .transfer-path { overflow-wrap: anywhere; } .transfer-page input[type="file"] { min-width: 0; max-width: 100%; } /* ПРЕДПРОСМОТР БОТА, 16.3 — «как в Телеграме», а не как в отладке. Пути клиента — колонками шириной с телефон; на телефоне — одна. Кнопки одного ряда одинаковой ширины, как у телеграма; подпись, которую телефон обрежет, уже показана обрезанной и помечена пунктиром (мерка та же, что у бота, — `layout`). */ .tgp { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); align-items: start; } .tgp-walk { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); min-width: 0; } .tgp-walk > summary { cursor: pointer; padding: var(--s3) var(--s4); font-weight: 600; } .tgp-chat { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); background: var(--panel-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .tgp-note { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-1); } .tgp-system { align-self: center; margin: var(--s2) 0; color: var(--muted); font-size: var(--fs-2); } .tgp-refusal { color: var(--stop-fg); } .tgp-msg { max-width: 100%; padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); overflow-wrap: anywhere; } .tgp-anchor { border-color: var(--border-strong); } .tgp-pin { color: var(--muted); font-size: var(--fs-1); margin-bottom: var(--s1); } .tgp-text { white-space: pre-wrap; font-size: var(--fs-3); line-height: 1.45; } .tgp-text pre, .tgp-text code { white-space: pre-wrap; } .tgp-text blockquote { margin: var(--s1) 0; padding-left: var(--s2); border-left: 2px solid var(--border-strong); } .tgp-text .tg-spoiler { background: var(--border); } .tgp-kb { display: flex; flex-direction: column; gap: var(--s1); } .tgp-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s1); } .tgp-btn { padding: var(--s2) var(--s1); border-radius: var(--radius); background: var(--accent-soft); text-align: center; font-size: var(--fs-2); overflow-wrap: anywhere; } .tgp-btn.is-cut { outline: 1px dashed var(--stop-fg); outline-offset: -1px; } .tgp-link { color: var(--muted); } @media (max-width: 560px) { .tgp { grid-template-columns: minmax(0, 1fr); } } /* СТРАНИЦА «СТРУКТУРА», 16.4. Блоки раскрываются по одному; у раскрытого поля слева, экран бота справа (на телефоне — под полями). Таблицы вопросов на телефоне складываются в карточки: строка — карточка, подпись колонки берётся из `data-th`. Прокрутка вбок — нигде у страницы. Цвета — только токены темы. */ .structure-page .st-block { margin-bottom: var(--s6); } .structure-page .st-small { font-size: var(--fs-2); } .structure-page details > summary { cursor: pointer; } .st-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .st-step > details, .st-work, .st-order { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .st-work, .st-order { margin-bottom: var(--s3); } .st-step > details > summary, .st-work > summary, .st-order > summary, #s-menu > summary { padding: var(--s3) var(--s4); } #s-menu { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .st-step.is-off > details > summary, .st-work.is-off > summary { color: var(--muted); } .st-n { display: inline-block; min-width: 1.6em; color: var(--muted); font-variant-numeric: tabular-nums; } .st-sub { margin: var(--s2) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); } .st-sub > summary { padding: var(--s2) var(--s3); } .st-remind { margin: var(--s1) 0 0 var(--s4); color: var(--muted); font-size: var(--fs-2); } .st-form { padding: 0 var(--s4) var(--s4); margin: 0; } .st-edit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s5); align-items: start; } .st-fields { min-width: 0; } /* ЭКРАН БОТА — НА ВСЮ СВОЮ ВЫСОТУ, БЕЗ СВОЕЙ ПРОКРУТКИ (17.12, Вл. 11, решение 55). До 17.12 он прилипал к верху окна и резался на 70 % высоты окна со своей полосой прокрутки: длинную переписку листали в маленьком окошке внутри страницы. Прилипание снято вместе с обрезкой: экран выше окна, прилипший к верху, не долистывается до низа. */ .st-screen { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); } .st-screen-head { padding: var(--s2) var(--s3); color: var(--muted); font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .st-screen [aria-busy="true"] { opacity: .6; } .st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2) var(--s4); } /* ПОЛЯ РАБОТЫ — В ДВЕ СТРОКИ (17.12, Вл. 11): подпись кнопки и название в чеке — широкими, база, минимальная цена, минимальный срок и «можно сдать частями» — четырьмя узкими в одну строку. Число в узкой колонке занимает её целиком. */ .st-work-head { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-work-head > .st-field.is-text { grid-column: span 2; } .st-work-head .st-unit { display: flex; } .st-work-head .st-money, .st-work-head .st-num { width: 100%; min-width: 0; } .st-field { display: flex; flex-direction: column; gap: var(--s1); margin: var(--s2) 0; min-width: 0; } .st-label { font-weight: 600; font-size: var(--fs-2); } .st-note { color: var(--muted); font-size: var(--fs-1); } .st-err { color: var(--stop-fg); font-size: var(--fs-2); font-weight: 600; } .st-field.has-err input, .st-field.has-err textarea { border-color: var(--stop-fg); } td:has(> .st-err) input, td:has(.st-err) input { border-color: var(--stop-fg); } .st-check { display: inline-flex; gap: var(--s2); align-items: center; font-weight: 400; cursor: pointer; } .st-del { color: var(--stop-fg); margin: var(--s2) 0; } .st-unit { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; } .st-text { width: 100%; min-width: 0; } .st-money { width: 9em; text-align: right; font-variant-numeric: tabular-nums; } .st-pct { width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; } .st-num { width: 9em; } .st-h3 { font-size: var(--fs-4); margin: var(--s5) 0 var(--s2); } .st-leaf { font-size: var(--fs-1); color: var(--muted); margin-left: var(--s1); } .st-table-wrap { min-width: 0; } .st-table td { vertical-align: middle; } .st-table tr.is-off td { color: var(--muted); } .st-table tr.st-new td { background: var(--panel-soft); } .st-table tr:hover td:first-child { box-shadow: none; } .st-overrides { margin-top: var(--s3); padding: var(--s3); border-left: 3px solid var(--border-strong); background: var(--panel-soft); border-radius: var(--radius-sm); } .st-override { margin-top: var(--s2); } .st-inline { max-width: 420px; } .st-buttons { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); } .st-default { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .st-review { margin: var(--s3) 0; padding: var(--s3) var(--s4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--panel-soft); } .st-review .note { margin: var(--s2) 0; } .st-review ul { margin: var(--s2) 0 0; padding-left: var(--s5); } .st-changes li { margin-bottom: var(--s1); } .st-nothing { margin: 0; } .st-menu, .st-orderlist { list-style: none; margin: var(--s2) 0; padding: 0; } .st-menu-row { padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .st-menu-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s2); align-items: center; } /* 18.9.2: ключевые слова — «слова · тест/курс · номер · убрать». */ .st-words .st-menu-top { grid-template-columns: minmax(0, 1fr) auto 5rem auto; } @media (max-width: 760px) { .st-words .st-menu-top { grid-template-columns: minmax(0, 1fr) 5rem auto; } .st-words .st-menu-top > .st-text { grid-column: 1 / -1; } } .st-orderlist li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--border); } .st-arrows { display: inline-flex; gap: var(--s1); white-space: nowrap; } .st-add { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; } @media (max-width: 1100px) { .st-edit { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .st-work-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .st-form { padding: 0 var(--s3) var(--s3); } .st-table thead { display: none; } .st-table, .st-table tbody { display: block; } .st-table tr { display: grid; grid-template-columns: auto auto auto; justify-content: start; align-items: end; gap: var(--s1) var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .st-table td { display: block; border: 0; padding: 0; } .st-table td:first-child { grid-column: 1 / -1; } .st-table td[data-th]:not([data-th=""])::before { content: attr(data-th); display: block; color: var(--muted); font-size: var(--fs-1); } .st-table.st-tier tr { grid-template-columns: 1fr 1fr; } .st-table.st-tier td:first-child { grid-column: auto; } .st-table tr.st-new td:last-child { grid-column: 1 / -1; } .st-menu-top { grid-template-columns: minmax(0, 1fr); } .st-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } } /* ------------------------------------------------------------------------- КАРТОЧКА ЗАКАЗА V18 — только production tokens, без влияния на другие routes. Геометрия источника: content 1540, head 1fr/420, gaps 16/18, chat 600/520. ------------------------------------------------------------------------- */ @media (max-width: 1180px) { } @media (max-width: 820px) { } @media (max-width: 460px) { } /* 13.6.5a — финальная композиция V18. Селектор main только снимает глобальное центрирование на route карточки заказа. */ @media (max-width: 1180px) { } @media (max-width: 820px) { } @media (max-width: 460px) { } /* 13.6.5b — единая интерактивная модель V18: modal / mode switch / compact rows. */ @media (max-width: 1120px) { } @media (max-width: 620px) { } body.order-card-modal-open { overflow: hidden; } /* Общие формы восстановления и разбора доставки, 15.10. */ .delivery-resolution-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s3); } .delivery-resolution-form label { display: grid; align-content: start; gap: var(--s2); color: var(--muted); font-size: var(--fs-3); } .delivery-resolution-form .delivery-checked { grid-column: 1 / -1; display: flex; align-items: start; color: var(--text); } .delivery-checked input { flex: 0 0 auto; } .delivery-resolution-form input { min-width: 0; } .delivery-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); } .delivery-actions button { white-space: normal; } /* Страницы повтора (17.12, п. 34): общий набор формы, свои — ширина и строка действий. */ .recovery-panel { max-width: 760px; } .recovery-form { display: grid; gap: var(--s4); } .recovery-form .form-field { margin-bottom: 0; } .recovery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); } /* ============================================================ КАРТОЧКА ЗАКАЗА V18 — HTML-derived presentation shell. Геометрия повторяет DESIGN_HTML/Карточка_заказа_V18.html; палитра поступает только из production theme tokens. ============================================================ */ main:has(> .order-v18-page) { --order-v18-px-1: 1px; --order-v18-px-2: 2px; --order-v18-px-3: 3px; --order-v18-px-5: 5px; --order-v18-px-6: 6px; --order-v18-px-7: 7px; --order-v18-px-9: 9px; --order-v18-px-10: 10px; --order-v18-px-11: 11px; --order-v18-px-13: 13px; --order-v18-px-14: 14px; --order-v18-px-15: 15px; --order-v18-px-17: 17px; --order-v18-px-18: 18px; --order-v18-px-22: 22px; --order-v18-px-26: 26px; --order-v18-title-size: 28px; --order-v18-control-size: 11.5px; --order-v18-close-size: 22px; width: 100%; /* `max-width: none` снят в 17.6: ширина `main` одна на все экраны (`ОФОРМЛЕНИЕ.md` §11). Карточку держит свой предел 1488 ниже, на 1440 вид не меняется. */ padding: var(--order-v18-px-18) var(--order-v18-px-26) 44px; } main:has(> .order-v18-page) > .alarms { max-width: 1540px; margin-bottom: var(--order-v18-px-14); } .order-v18-page { width: 100%; max-width: 1488px; min-width: 0; color: var(--text); } .order-v18-page [hidden] { display: none !important; } .order-v18-page button, .order-v18-page input, .order-v18-page select, .order-v18-page textarea { font: inherit; color: inherit; } .order-v18-page a { color: var(--accent); text-underline-offset: 3px; } .order-v18-page button { cursor: pointer; } .order-v18-back { display: inline-flex; align-items: center; gap: var(--order-v18-px-6); margin-bottom: var(--order-v18-px-11); color: var(--accent); font-weight: 700; text-decoration: none; } .order-v18-back:hover { text-decoration: underline; } .order-v18-head { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--order-v18-px-18); align-items: center; margin-bottom: var(--order-v18-px-13); } .order-v18-title-wrap { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--order-v18-px-10); } .order-v18-title { min-width: 0; margin: 0; font-size: var(--order-v18-title-size); line-height: 1.08; letter-spacing: -.02em; overflow-wrap: anywhere; } .order-v18-client-mini { display: grid; position: relative; grid-template-columns: 38px minmax(0, 1fr); gap: var(--order-v18-px-10); align-items: center; min-width: 0; padding: var(--order-v18-px-11) var(--order-v18-px-13); border: 1px solid var(--border); border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); } .order-v18-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; } .order-v18-client-copy { min-width: 0; } .order-v18-client-label { margin-bottom: var(--order-v18-px-1); color: var(--muted); font-size: var(--fs-1); } .order-v18-client-name { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; font-size: var(--fs-4); font-weight: 800; overflow-wrap: anywhere; } .order-v18-quick-contacts { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--order-v18-px-7); margin-top: 4px; color: var(--muted); font-size: var(--fs-1); } .order-v18-quick-contacts > span { min-width: 0; overflow-wrap: anywhere; } .order-v18-more-contacts { display: inline-flex; min-height: 22px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0 var(--order-v18-px-7); background: var(--panel-soft); color: var(--accent); font-size: var(--fs-1); font-weight: 800; } .order-v18-alert { display: flex; align-items: center; gap: var(--order-v18-px-11); margin-bottom: var(--order-v18-px-14); padding: var(--order-v18-px-11) var(--order-v18-px-14); border: 1px solid var(--stop-fg); border-radius: var(--radius-lg); background: var(--stop-bg); } .order-v18-alert-mark { color: var(--stop-fg); font-weight: 900; } .order-v18-alert .order-v18-text-link { margin-left: auto; } .order-v18-state-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); } .order-v18-state-cell { min-width: 0; padding: var(--order-v18-px-11) var(--order-v18-px-14); border-right: 1px solid var(--border); } .order-v18-state-cell:last-child { border-right: 0; } .order-v18-state-label { margin-bottom: 4px; color: var(--muted); font-size: var(--fs-1); } .order-v18-state-value { font-weight: 760; line-height: 1.3; overflow-wrap: anywhere; } .order-v18-state-value.is-warn { color: var(--warn-fg); } .order-v18-state-value.is-money { font-variant-numeric: tabular-nums; } .order-v18-state-cell small { color: var(--muted); font-size: var(--fs-1); } .order-v18-tabs { display: flex; gap: 28px; overflow-x: auto; overflow-y: hidden; margin: 0 0 16px; border-bottom: 1px solid var(--border); padding-left: var(--order-v18-px-2); scrollbar-width: none; } .order-v18-tabs::-webkit-scrollbar { display: none; } .order-v18-tab { position: relative; flex: 0 0 auto; border: 0; border-radius: 0; padding: 0 0 var(--order-v18-px-11); background: transparent; color: var(--muted); font-weight: 650; white-space: nowrap; } .order-v18-tab:hover, .order-v18-tab:focus, .order-v18-tab.is-active { background: transparent; color: var(--text); } .order-v18-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 0; background: var(--accent); content: ""; } .order-v18-panel { min-width: 0; } .order-v18-overview-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr); gap: 16px; align-items: start; } .order-v18-stack, .order-v18-service-stack { display: grid; min-width: 0; gap: 16px; } .order-v18-zone, .order-v18-card, .order-v18-full-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); } .order-v18-zone { border-radius: 14px; } .order-v18-card, .order-v18-full-card { border-radius: 11px; } .order-v18-zone-head { display: flex; min-height: 48px; align-items: center; gap: var(--order-v18-px-9); padding: var(--order-v18-px-13) 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); } .order-v18-zone-head h2, .order-v18-card-head h2, .order-v18-section-top h2 { margin: 0; line-height: 1.25; } .order-v18-zone-head h2, .order-v18-section-top h2 { font-size: var(--fs-5); } .order-v18-zone-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--accent); } .order-v18-zone-head .order-v18-text-link, .order-v18-zone-head .order-v18-btn { margin-left: auto; } .order-v18-zone-body { min-width: 0; padding: 16px; } .order-v18-work-type { margin-bottom: var(--order-v18-px-5); color: var(--accent); font-size: var(--fs-2); font-weight: 800; } .order-v18-topic { margin-bottom: var(--order-v18-px-14); font-size: var(--fs-5); line-height: 1.34; font-weight: 760; } .order-v18-info-table, .order-v18-kv { width: 100%; border-collapse: collapse; } .order-v18-info-table td { padding: 8px 0; border-top: 1px solid var(--border); vertical-align: top; } .order-v18-info-table tr:first-child td { border-top: 0; } .order-v18-info-table td:first-child { width: 116px; color: var(--muted); font-size: var(--fs-2); } .order-v18-info-table td:last-child { font-weight: 650; } .order-v18-page .order-v18-info-table tr:hover td { background: transparent; box-shadow: none; } .order-v18-card-head { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: var(--order-v18-px-10); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel-soft); } .order-v18-card-head h2 { font-size: var(--fs-4); } /* ТЕКСТОВЫЕ ДЕЙСТВИЯ КАРТОЧКИ — ОБЩИЙ `.list-link` (17.6, владелец). «Вся история / Все задачи / Все файлы» были кнопками своего вида: цвет у них перебивало наследование (`button` карточки берёт цвет текста), а при наведении на них ложилась заливка общей кнопки впритык к буквам — «выделяется криво». Здесь только возврат цвета и начертания, которые перебивает наследование строкой выше. */ .order-v18-page .order-v18-text-link { color: var(--accent); font-weight: 650; } .order-v18-page .order-v18-text-link:hover { color: var(--accent-hover); } .order-v18-text-link, .order-v18-btn, .order-v18-icon-btn { user-select: none; } .order-v18-table-wrap { max-width: 100%; overflow-x: auto; padding: 0 16px var(--order-v18-px-10); } .order-v18-table { width: 100%; min-width: 620px; border-collapse: collapse; } .order-v18-table th { padding: var(--order-v18-px-10) 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--fs-2); font-weight: 650; text-align: left; white-space: nowrap; } .order-v18-table td { padding: var(--order-v18-px-11) 8px; border-bottom: 1px solid var(--border); font-size: var(--fs-3); vertical-align: middle; } .order-v18-table tr:last-child td { border-bottom: 0; } .order-v18-table tbody tr:hover td { background: var(--panel-soft); } .order-v18-task-name, .order-v18-file-name { font-weight: 650; } .order-v18-task-origin { display: inline-flex; margin-left: var(--order-v18-px-6); color: var(--accent); font-size: var(--fs-1); font-weight: 700; vertical-align: middle; } .order-v18-status { display: inline-flex; align-items: center; border-radius: 6px; padding: var(--order-v18-px-3) 8px; background: var(--panel-soft); color: var(--muted); font-size: var(--fs-1); white-space: nowrap; } .order-v18-status.is-in_progress { background: var(--busy-bg); color: var(--busy-fg); } .order-v18-status.is-review { background: var(--warn-bg); color: var(--warn-fg); } .order-v18-status.is-done { background: var(--done-bg); color: var(--done-fg); } .order-v18-status.is-missed { background: var(--stop-bg); color: var(--stop-fg); } .order-v18-status-form { display: inline-flex; margin: 0; } .order-v18-task-status-select { width: auto; min-width: 118px; height: 30px; border: 0; border-radius: 7px; padding: 0 28px 0 var(--order-v18-px-9); background: var(--panel-soft); color: var(--muted); font-size: var(--order-v18-control-size); font-weight: 700; cursor: pointer; } .order-v18-task-status-select.is-in_progress { background: var(--busy-bg); color: var(--busy-fg); } .order-v18-task-status-select.is-review { background: var(--warn-bg); color: var(--warn-fg); } .order-v18-task-status-select.is-done { background: var(--done-bg); color: var(--done-fg); } .order-v18-file-name { min-width: 220px; } .order-v18-file-icon { display: inline-grid; width: 24px; height: 24px; place-items: center; margin-right: var(--order-v18-px-7); border-radius: 5px; background: var(--panel-soft); color: var(--muted); font-size: var(--fs-1); font-weight: 800; } .order-v18-note-body { display: grid; gap: 12px; padding: 16px; } .order-v18-note-text { font-size: var(--fs-4); line-height: 1.5; white-space: pre-wrap; } .order-v18-note-actions { display: flex; justify-content: flex-end; } .order-v18-plan-body { padding: 12px 16px var(--order-v18-px-14); } .order-v18-plan-list { display: grid; } .order-v18-plan-item { display: grid; position: relative; grid-template-columns: 22px minmax(0, 1fr); gap: var(--order-v18-px-9); padding: var(--order-v18-px-7) 0; } .order-v18-plan-item::before { position: absolute; bottom: -8px; left: 9px; top: 25px; width: 1px; background: var(--border-strong); content: ""; } .order-v18-plan-item:last-child::before { display: none; } .order-v18-plan-dot { display: grid; position: relative; z-index: 1; width: 19px; height: 19px; place-items: center; margin-top: var(--order-v18-px-1); border: 2px solid var(--border-strong); border-radius: 50%; background: var(--panel); color: var(--muted); font-size: var(--fs-1); font-weight: 900; } .order-v18-plan-item.is-done .order-v18-plan-dot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .order-v18-plan-item.is-done::before { background: var(--accent); } .order-v18-plan-item.is-current { margin: var(--order-v18-px-2) -8px; border-radius: 9px; padding: 8px; background: transparent; } .order-v18-plan-item.is-current::before { left: 17px; } .order-v18-plan-item.is-current::after { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 31px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); content: ""; } .order-v18-plan-item.is-current > * { position: relative; z-index: 1; } .order-v18-plan-item.is-current .order-v18-plan-dot { border: 3px solid var(--accent); background: var(--panel); } .order-v18-plan-name { font-size: var(--fs-4); font-weight: 700; line-height: 1.25; } .order-v18-plan-item.is-current .order-v18-plan-name { color: var(--accent); font-weight: 800; } .order-v18-plan-meta { margin-top: var(--order-v18-px-2); color: var(--muted); font-size: var(--fs-2); } .order-v18-plan-item.is-current .order-v18-plan-meta { color: var(--accent); font-weight: 650; } .order-v18-full-card { border-radius: 11px; } .order-v18-section-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--order-v18-px-14) 16px; border-bottom: 1px solid var(--border); background: var(--panel-soft); } .order-v18-muted { color: var(--muted); } .order-v18-small { font-size: var(--fs-2); } .order-v18-service-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 16px; align-items: start; } .order-v18-service-plan { position: sticky; top: 16px; } .order-v18-action-grid, .order-v18-inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .order-v18-btn { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: var(--order-v18-px-7); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--order-v18-px-13); background: var(--panel); font-weight: 650; } .order-v18-btn:hover { background: var(--panel-soft); } .order-v18-btn.is-primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .order-v18-btn.is-danger { border-color: var(--stop-fg); background: var(--stop-bg); color: var(--stop-fg); } .order-v18-btn.is-small { min-height: 32px; padding-inline: var(--order-v18-px-10); font-size: var(--fs-2); } .order-v18-input, .order-v18-select, .order-v18-textarea { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); } .order-v18-input, .order-v18-select { height: 38px; padding: 0 var(--order-v18-px-10); } .order-v18-textarea { width: 100%; min-height: 88px; padding: var(--order-v18-px-10); resize: vertical; } .order-v18-people { display: grid; margin-bottom: var(--order-v18-px-10); } .order-v18-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); } .order-v18-inline-form .order-v18-select { min-width: 220px; } .order-v18-kv td { padding: var(--order-v18-px-10) 0; border-bottom: 1px solid var(--border); } .order-v18-kv tr:last-child td { border-bottom: 0; } .order-v18-kv td:first-child { color: var(--muted); } .order-v18-kv td:last-child { text-align: right; font-weight: 700; } .order-v18-table-wrap-nested { padding: 0; } .order-v18-table-wrap-nested .order-v18-table { min-width: 0; } .order-v18-table-wrap-nested small { display: block; margin-top: var(--order-v18-px-2); color: var(--muted); font-size: var(--fs-1); } .order-v18-card-actions { display: flex; padding: 0; border-top: 1px solid var(--border); background: var(--panel); box-shadow: none; transition: background-color .15s ease, box-shadow .15s ease; } .order-v18-card-actions:hover, .order-v18-card-actions:focus-within { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); box-shadow: inset 3px 0 0 var(--accent); } .order-v18-card-actions .order-v18-text-link { display: flex; width: 100%; min-height: 46px; align-items: center; padding: 0 16px; color: var(--text); text-align: left; text-decoration: none; } .order-v18-card-actions .order-v18-text-link:hover, .order-v18-card-actions .order-v18-text-link:focus-visible { background: transparent; color: var(--accent); text-decoration: none; } .order-v18-icon-btn { display: grid; width: 32px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); } .order-v18-plan-editor-wrap { border-top: 1px solid var(--border); background: var(--panel-soft); } .order-v18-editor-note { margin: 0; padding: 12px 12px 0; color: var(--muted); font-size: var(--fs-1); } .order-v18-plan-editor { display: grid; gap: var(--order-v18-px-9); padding: 12px; } .order-v18-plan-edit-card { display: grid; grid-template-columns: 24px minmax(120px, 1fr) 168px 104px minmax(88px, auto) 32px; gap: var(--order-v18-px-6); align-items: center; padding: var(--order-v18-px-9) var(--order-v18-px-10); border: 1px solid var(--border); border-radius: 9px; background: var(--panel); } .order-v18-plan-edit-card[data-plan-row] { cursor: grab; } .order-v18-plan-edit-card[data-plan-row]:active { cursor: grabbing; } .order-v18-plan-edit-card.is-dragging { opacity: .45; } .order-v18-plan-edit-card.is-drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); } .order-v18-plan-editor.is-sorting { user-select: none; } .order-v18-drag-handle { display: grid; width: 24px; height: 34px; place-items: center; color: var(--muted); font-size: var(--fs-5); cursor: grab; } .order-v18-plan-fixed-mark { display: grid; width: 24px; height: 34px; place-items: center; color: var(--muted); font-size: var(--fs-5); cursor: default; } .order-v18-plan-edit-card .order-v18-input, .order-v18-plan-edit-card .order-v18-select { width: 100%; } .order-v18-plan-title { height: auto; min-height: 38px; max-height: 96px; padding: var(--order-v18-px-9) var(--order-v18-px-10); line-height: 1.25; resize: none; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; } .order-v18-plan-task { display: inline-flex; align-items: center; gap: var(--order-v18-px-6); color: var(--muted); font-size: var(--fs-2); font-weight: 650; white-space: nowrap; } .order-v18-plan-task-slot { display: flex; min-width: 0; min-height: 38px; align-items: center; } .order-v18-plan-task input { margin: 0; accent-color: var(--accent); } .order-v18-plan-owner { grid-column: 2 / 5; } .order-v18-plan-row-actions { display: flex; grid-column: 5 / 7; align-items: center; justify-content: flex-end; gap: var(--order-v18-px-6); } .order-v18-system-badge { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; border-radius: 6px; padding: 4px var(--order-v18-px-7); background: var(--panel-soft); color: var(--muted); font-size: var(--fs-1); font-weight: 700; white-space: nowrap; } .order-v18-plan-move-actions { display: flex; flex-wrap: wrap; gap: 8px; } .order-v18-icon-btn:hover:not(:disabled) { background: var(--panel-soft); color: var(--text); } .order-v18-plan-editor-actions { display: flex; justify-content: space-between; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--panel); } .order-v18-empty { margin: 0; padding: 16px; color: var(--muted); text-align: center; } .order-v18-chat-wrap { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 600px; } .order-v18-chat-list { display: flex; max-height: 520px; min-height: 360px; flex-direction: column; gap: var(--order-v18-px-10); overflow-y: auto; padding: var(--order-v18-px-18) var(--order-v18-px-22); background: var(--panel-soft); } .order-v18-chat-day { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--muted); font-size: var(--fs-1); } .order-v18-chat-day::before, .order-v18-chat-day::after { height: 1px; flex: 1; background: var(--border); content: ""; } .order-v18-bubble { max-width: 66%; padding: var(--order-v18-px-10) 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow-wrap: anywhere; } .order-v18-bubble.is-mine { margin-left: auto; border-color: var(--border-strong); background: var(--accent-soft); } .order-v18-order-context { margin-bottom: 4px; color: var(--accent); font-size: var(--fs-1); font-weight: 800; } .order-v18-time { margin-top: var(--order-v18-px-5); color: var(--muted); font-size: var(--fs-1); text-align: right; } .order-v18-chat-system { align-self: center; color: var(--muted); font-size: var(--fs-2); } .order-v18-deliveries { padding: var(--s4); border-bottom: 1px solid var(--border); } .order-v18-deliveries h3 { margin: 0 0 var(--s3); } .order-v18-delivery { padding: var(--s3) 0; overflow-wrap: anywhere; } .order-v18-delivery + .order-v18-delivery { border-top: 1px solid var(--border); } .order-v18-delivery summary { cursor: pointer; font-weight: 600; } .order-v18-chat-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--panel); } .order-v18-chat-input textarea { height: 48px; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--order-v18-px-10); resize: none; } .order-v18-chat-actions { display: flex; align-items: center; gap: 8px; } .order-v18-chat-input .order-v18-btn { min-height: 48px; } .order-v18-attach { display: inline-flex; min-height: 38px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--order-v18-px-10); cursor: pointer; } .order-v18-chat-actions small { color: var(--muted); font-size: var(--fs-1); } /* ПЕРЕДАЧА РАБОТЫ (15.6). Третья строка формы переписки: она занимает обе колонки сетки, потому что это не «ещё одна кнопка рядом», а другое действие — отправка работы, а не реплика в чате. */ .order-v18-handoff { grid-column: 1 / -1; margin-top: var(--s2); border-top: 1px solid var(--border); padding-top: var(--s3); } .order-v18-handoff-head { margin-bottom: var(--s2); color: var(--muted); font-size: var(--fs-1); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; } .order-v18-handoff-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); } .order-v18-handoff p { margin: var(--s2) 0 0; } .order-v18-plan-item.is-sent .order-v18-plan-dot { border-color: var(--accent); color: var(--accent); } .order-v18-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); } .order-v18-modal-bg[hidden] { display: none; } .order-v18-modal-bg { display: none; position: fixed; z-index: 100; inset: 0; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--text) 22%, transparent); } .order-v18-modal-bg.is-open { display: flex; } .order-v18-modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: hidden auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); } .order-v18-modal-head { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: var(--order-v18-px-15) var(--order-v18-px-17); border-bottom: 1px solid var(--border); } .order-v18-modal-head h3 { margin: 0; font-size: var(--fs-5); } .order-v18-modal-close { display: grid; width: 32px; height: 32px; place-items: center; border: 0; padding: 0; background: none; color: var(--muted); font-size: var(--order-v18-close-size); line-height: 1; } .order-v18-modal-body { padding: 16px var(--order-v18-px-17); } .order-v18-field { margin-bottom: 12px; } .order-v18-field:last-child { margin-bottom: 0; } .order-v18-field label { display: block; margin-bottom: var(--order-v18-px-5); color: var(--muted); font-size: var(--fs-2); } .order-v18-field .order-v18-input, .order-v18-field .order-v18-select, .order-v18-field .order-v18-textarea { width: 100%; } .order-v18-input.is-file { height: auto; padding: 8px; } .order-v18-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px var(--order-v18-px-17); border-top: 1px solid var(--border); } .order-v18-modal-foot.has-danger { display: grid; grid-template-columns: auto 1fr auto auto; } .order-v18-action-list { display: grid; gap: 12px; } .order-v18-action-list form { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } @media (max-width: 1180px) { .order-v18-head, .order-v18-overview-layout, .order-v18-service-main-grid { grid-template-columns: minmax(0, 1fr); } .order-v18-client-mini { max-width: 520px; } .order-v18-service-plan { position: static; } .order-v18-plan-edit-card { grid-template-columns: 24px minmax(120px, 1fr) 168px 104px minmax(88px, auto) 32px; } } @media (max-width: 820px) { main:has(> .order-v18-page) { padding: 16px; } .order-v18-state-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .order-v18-state-cell:nth-child(2) { border-right: 0; } .order-v18-state-cell:nth-child(n+3) { border-top: 1px solid var(--border); } .order-v18-bubble { max-width: 84%; } .order-v18-plan-edit-card { grid-template-columns: 24px minmax(0, 1fr) 32px; align-items: start; } .order-v18-plan-edit-card .order-v18-plan-date, .order-v18-plan-edit-card .order-v18-plan-status, .order-v18-plan-edit-card .order-v18-plan-task-slot, .order-v18-plan-edit-card .order-v18-plan-owner, .order-v18-plan-edit-card .order-v18-system-badge { grid-column: 2 / 3; } .order-v18-plan-row-actions { grid-column: 2 / 4; justify-content: flex-start; flex-wrap: wrap; } } @media (max-width: 520px) { main:has(> .order-v18-page) { padding: 12px; } .order-v18-head { gap: 12px; } .order-v18-title { font-size: var(--fs-6); } .order-v18-client-mini { grid-template-columns: 34px minmax(0, 1fr); padding: var(--order-v18-px-10); } .order-v18-avatar { width: 34px; height: 34px; } .order-v18-state-strip { grid-template-columns: minmax(0, 1fr); } .order-v18-state-cell { border-top: 1px solid var(--border); border-right: 0; } .order-v18-state-cell:first-child { border-top: 0; } .order-v18-tabs { gap: var(--order-v18-px-22); } .order-v18-zone-body { padding: var(--order-v18-px-14); } .order-v18-section-top { align-items: flex-start; flex-direction: column; } .order-v18-section-top .order-v18-btn { width: 100%; } .order-v18-table { min-width: 620px; } .order-v18-info-table td:first-child { width: 104px; } .order-v18-action-grid, .order-v18-action-grid form, .order-v18-action-grid .order-v18-btn { width: 100%; } .order-v18-inline-form, .order-v18-inline-form .order-v18-select, .order-v18-inline-form .order-v18-btn { width: 100%; } .order-v18-chat-list { min-height: 320px; padding: 12px; } .order-v18-bubble { max-width: 92%; } .order-v18-chat-input { grid-template-columns: minmax(0, 1fr); } .order-v18-chat-actions { flex-wrap: wrap; } .order-v18-chat-actions .order-v18-btn { margin-left: auto; } .order-v18-modal-bg { align-items: flex-end; padding: 8px; } .order-v18-modal { width: 100%; max-height: calc(100vh - 16px); } .order-v18-modal-foot.has-danger { grid-template-columns: auto 1fr auto; } .order-v18-modal-foot.has-danger > span { display: none; } } /* === КОНЕЦ БЛОКА «КАРТОЧКА ЗАКАЗА V18» === */ /* Нижний маркер поставлен на 17.1: сторож карточки резал файл от своего заголовка до конца файла и покраснел на первом же блоке после него — ровно та мина, что описана в паспорте 13 у заказов. */ /* === ВОПРОСЫ 17.1 — очередь слева, вопрос справа; завершённые таблицей === */ /* Раскладка и порядок — из прототипа дизайнера («Вопросы.html»); вид — общий набор списка выше и общая плашка. Каждый селектор блока начинается со скоупа `.questions-page`; `@media` — внутри блока. Блок не переопределяет ни одного общего компонента (`.badge`, `.tabs`, `h1`, `.panel`): только свои классы `questions-*`. */ .questions-page .questions-workbench { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--s4); align-items: start; } .questions-page .questions-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--border); } .questions-page .questions-card-head h2 { margin: 0; font-size: var(--fs-4); } .questions-page .questions-card-head span { color: var(--muted); font-size: var(--fs-2); } /* ОЧЕРЕДЬ. Строка — ссылка на якорь вопроса: выбор работает и без скрипта, а все черновики страницы остаются в разметке, поэтому текст не пропадает при переключении между вопросами. */ .questions-page .questions-rows { margin: 0; padding: 0; list-style: none; } .questions-page .questions-rows li + li { border-top: 1px solid var(--border); } .questions-page .questions-row { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); color: var(--text); text-decoration: none; } .questions-page .questions-row:hover { background: var(--row-hover); color: var(--text); } .questions-page .questions-row[aria-current="true"], .questions-page:not(:has(.questions-card:target)) .questions-rows li:first-child .questions-row { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .questions-page .questions-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); } .questions-page .questions-row-top strong { min-width: 0; font-weight: 700; overflow-wrap: anywhere; } .questions-page .questions-wait { flex: 0 0 auto; color: var(--muted); font-size: var(--fs-2); white-space: nowrap; } .questions-page .questions-row-text, .questions-page .questions-clip { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; } .questions-page .questions-row-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: var(--s1); } .questions-page .questions-badges { display: flex; flex-wrap: wrap; gap: var(--s1); } .questions-page .questions-num { color: var(--muted); font-size: var(--fs-2); } /* ВЫБРАННЫЙ ВОПРОС. Без якоря в адресе показан первый — тот же, что подсвечен в очереди. */ .questions-page .questions-detail { min-width: 0; } .questions-page .questions-detail .questions-card { display: none; } .questions-page .questions-detail .questions-card:target, .questions-page .questions-detail:not(:has(.questions-card:target)) .questions-card:first-child { display: block; } .questions-page .questions-card-body { padding: var(--s5); } .questions-page .questions-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--border); } .questions-page .questions-card-title h2 { margin: 0; font-size: var(--fs-5); } .questions-page .questions-date { color: var(--muted); font-size: var(--fs-2); white-space: nowrap; } .questions-page .questions-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s2); } .questions-page .questions-props { margin: 0; } .questions-page .questions-props > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .questions-page .questions-props dt { color: var(--muted); } .questions-page .questions-props dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } .questions-page .questions-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; } .questions-page .questions-context { display: grid; gap: var(--s1); } .questions-page .questions-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s1); } /* ОТВЕТ. Две серверные формы — «Отправить ответ» и «Ответили вне бота» — стоят одной строкой: первая форма раскрыта (`display: contents`), и её поля становятся ячейками общего ряда. Вложить одну форму в другую нельзя, а `form=` у кнопки не видят старые браузеры. */ .questions-page .questions-answer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); } .questions-page .questions-answer-form { display: contents; } .questions-page .questions-answer label, .questions-page .questions-answer textarea, .questions-page .questions-hint { flex: 1 1 100%; } .questions-page .questions-answer label { color: var(--muted); font-size: var(--fs-2); } .questions-page .questions-answer textarea { min-height: 128px; } .questions-page .questions-hint { margin: 0 0 var(--s1); color: var(--muted); font-size: var(--fs-2); } .questions-page .questions-silent-form { margin: 0; } /* ИСТОРИЯ — ИЗ ТОГО, ЧТО УЖЕ ЛЕЖИТ В БАЗЕ. Полного журнала шагов нет (ОТЛОЖЕНО): показаны момент вопроса, последний ответ до возврата и число возвратов, а остальное честно помечено замком. */ .questions-page .questions-history { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); } .questions-page .questions-history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-bottom: var(--s3); } .questions-page .questions-history-head h3 { margin: 0; font-size: var(--fs-3); } .questions-page .questions-timeline { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; } .questions-page .questions-timeline li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--s3); } .questions-page .questions-timeline li::before { width: 8px; height: 8px; margin-top: calc(var(--s1) + 2px); border-radius: 50%; background: var(--border-strong); content: ""; } .questions-page .questions-event-title { font-size: var(--fs-3); font-weight: 650; } .questions-page .questions-event-meta { color: var(--muted); font-size: var(--fs-2); } .questions-page .questions-quote { margin-top: var(--s1); padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); white-space: pre-wrap; overflow-wrap: anywhere; } .questions-page .questions-history-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: var(--s3) 0 0; color: var(--muted); font-size: var(--fs-2); } /* ЗАВЕРШЁННЫЕ. Колонка «Закрыт» — дата закрытия: по ней список и отсортирован. Строка открывает боковую панель с полным текстом и «Вернуть в очередь»; отдельной колонки действий нет. */ .questions-page .questions-done-table { min-width: 900px; } .questions-page .questions-col-when { width: 14%; } .questions-page .questions-col-client { width: 16%; } .questions-page .questions-col-question { width: 32%; } .questions-page .questions-col-result { width: 26%; } .questions-page .questions-col-who { width: 12%; } .questions-page .questions-done-link { display: grid; gap: var(--s1); justify-items: start; color: var(--text); text-decoration: none; } .questions-page .questions-done-link:hover { color: var(--text); } .questions-page .questions-done-link:hover .questions-clip { text-decoration: underline; text-underline-offset: 2px; } .questions-page .questions-stack { display: grid; gap: var(--s1); justify-items: start; min-width: 0; } .questions-page .questions-stack .questions-clip { color: var(--muted); } .questions-page .questions-when { color: var(--muted); white-space: nowrap; } @media (max-width: 980px) { .questions-page .questions-workbench { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .questions-page .questions-card-body { padding: var(--s4); } .questions-page .questions-card-title { flex-direction: column; gap: var(--s1); } .questions-page .questions-props > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } } /* === КОНЕЦ БЛОКА «ВОПРОСЫ» === */ /* === АНАЛИТИКА 17.2 — каркас семи вкладок, «Воронка», «Источники» === Весь блок в скоупе `.an-page` (обёртка `reports_base.html`) и не переопределяет общих компонентов: плитки стоят в общей панели `.kpis`, но внутренность у них своя (`.an-kpi`), переключатели — общие `.list-chip`, демо — общий `.is-demo`. Цвет — токены темы: подсказка — инверсией `--text` / `--panel`, дорожка полоски — `--border`, полоска — `--accent`; новых токенов нет. Прототип задал геометрию и порядок; шкала, палитра и оболочка — наши (решение 17.1). */ .an-page { min-width: 0; } .an-page .an-label { display: block; margin-bottom: var(--s1); color: var(--muted); font-size: var(--fs-2); font-weight: 600; } /* ---- полоса фильтров ---- */ .an-page .an-filters { padding: var(--s4) var(--s5); } .an-page .an-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s5); } .an-page .an-filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin: 0; } .an-page .an-field { display: block; margin: 0; } .an-page .an-field select, .an-page .an-field input[type="date"] { min-height: 36px; } .an-page .an-filter-end { margin-left: auto; } .an-page .an-filter-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); margin-top: var(--s3); color: var(--muted); font-size: var(--fs-2); } /* ---- плитки ---- */ .an-page .an-kpis { margin-bottom: var(--s3); } .an-page .an-kpi { display: flex; align-items: center; gap: var(--s3); min-width: 0; min-height: 82px; padding: var(--s4) var(--s5); } .an-page .an-kpi + .an-kpi { border-left: 1px solid var(--border); } .an-page .an-kpi-icon { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); } .an-page .an-kpi-icon .ic { width: 20px; height: 20px; flex-basis: 20px; } .an-page .an-kpi-body { min-width: 0; } .an-page .an-kpi-label { color: var(--muted); font-size: var(--fs-3); } .an-page .an-kpi-value { margin-top: var(--s1); font-size: var(--fs-6); font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; } .an-page .an-kpi-was { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-2); font-variant-numeric: tabular-nums; } .an-page .an-kpi-was b { white-space: nowrap; } /* ПРОЦЕНТ — СВОЕЙ СТРОКОЙ, ЕСЛИ НЕ ВЛЕЗ (17.12, баг п. 16). «· −73,7 %» не рвётся: строка «было 298,50 $ ·» с процентом на следующей читалась обрывом. Переносится весь кусок с точкой. */ .an-page .an-kpi-growth { white-space: nowrap; } .an-page .an-kpi-was .gain { color: var(--done-fg); } .an-page .an-kpi-was .loss { color: var(--stop-fg); } .an-page .an-kpis + .an-kpis { margin-top: var(--s3); } /* ПЛИТКА НЕ УЖЕ СВОЕГО ЧИСЛА (17.5). С видом «11 600 819,50 ₽» число длиннее прежнего «₽11600819.50», а пробелы в нём неразрывные — оно не переносится и вылезало на соседнюю плитку. Ряд плиток — гибкий: равные доли, пока число влезает; не влезло — плитка шире, соседи уже, а на узком экране плитки уходят на следующую строку. */ .an-page .an-kpis { display: flex; flex-wrap: wrap; } .an-page .an-kpis .an-kpi { flex: 1 1 200px; min-width: fit-content; } .an-page .an-note { margin: var(--s2) 0 var(--s4); color: var(--muted); font-size: var(--fs-2); } .an-page .an-card .an-note:last-child { margin-bottom: 0; } /* ---- карточка блока, «?» ---- */ .an-page .an-card { padding: 0; overflow: visible; } .an-page .an-card > :not(.an-card-head) { margin-left: var(--s5); margin-right: var(--s5); } .an-page .an-card > :last-child { margin-bottom: var(--s5); } .an-page .an-card-head { margin-bottom: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); } .an-page .an-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .an-page .an-title-line h2 { margin: 0; } .an-page .an-desc { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-3); } /* «?» — общий `.help-tip` (с 17.7 в общем наборе формы). */ /* ---- переключатели и панель инструментов графика ---- */ .an-page .an-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s3) var(--s5); margin-bottom: var(--s3); } .an-page .an-toolbar-end { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); } .an-page .an-series-chip .seriesdot { margin-right: 0; } /* Погашенный ряд: кнопка тускнеет, а не исчезает — её надо чем-то нажать обратно. */ .an-page .an-series-chip.is-hidden { opacity: .5; } .an-page .an-block-controls { display: flex; justify-content: flex-end; margin-bottom: var(--s3); } /* ---- график ---- */ .an-page .an-chart-shell { padding: var(--s2) var(--s2) var(--s1); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); } .an-page .an-chart-meta { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) var(--s2) var(--s2); color: var(--muted); font-size: var(--fs-2); } .an-page .an-chart-meta strong { color: var(--text); } .an-page .an-chart-scroll { overflow-x: auto; } /* У ТЕЛЕФОНА ГРАФИК ПРОКРУЧИВАЕТСЯ ВНУТРИ КАРТОЧКИ. Текст SVG растёт и сжимается вместе с шириной; на 390 px подписи оси стали бы по пять пикселей. Поэтому у графика есть наименьшая ширина, а лишнее уезжает вбок внутри карточки, — страница при этом вбок не едет. */ .an-page .an-chart-scroll .chart { min-width: 640px; } .an-page .an-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); padding: var(--s2) var(--s2) var(--s1); color: var(--muted); font-size: var(--fs-2); } .an-page .an-legend-item { display: inline-flex; align-items: center; } .an-page .an-legend-item, .an-page .an-reading-values > span { color: inherit; } .an-page .an-legend-item[hidden], .an-page .an-reading-values > span[hidden] { display: none; } .an-page .an-reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--panel-soft); font-size: var(--fs-3); } .an-page .an-reading[hidden] { display: none; } .an-page .an-reading strong { white-space: nowrap; } .an-page .an-reading-values { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); } .an-page .an-reading-values b { font-variant-numeric: tabular-nums; } .an-page .an-chart-table-wrap { max-height: 480px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); } .an-page .an-chart-table thead th { position: sticky; top: 0; z-index: 1; } /* Подсказка над точкой: ставит скрипт, поэтому живёт у `body`, а не внутри `.an-page`, — но класс свой и только аналитики. */ .an-tip { position: fixed; z-index: 90; min-width: 200px; padding: var(--s3); border-radius: var(--radius); background: var(--text); color: var(--panel); box-shadow: var(--shadow-hover); font-size: var(--fs-2); pointer-events: none; } .an-tip-title { margin-bottom: var(--s1); font-weight: 700; } .an-tip-row { display: flex; justify-content: space-between; gap: var(--s5); margin-top: var(--s1); } .an-tip-row span { display: inline-flex; align-items: center; } .an-tip-row b { font-variant-numeric: tabular-nums; } .an-tip-row .seriesdot { box-shadow: 0 0 0 1px var(--panel); } /* ---- лестница и повторные: полоски вёрсткой ---- */ .an-page .an-steps-head, .an-page .an-step { display: grid; grid-template-columns: minmax(12ch, 16ch) minmax(0, 1fr) 20ch; gap: var(--s4); align-items: center; } .an-page .an-steps-head { padding: 0 var(--s3) var(--s2); color: var(--muted); white-space: nowrap; font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .an-page .an-steps-head > :nth-child(n+3) { text-align: right; } .an-page .an-step { padding: var(--s3); border: 1px solid transparent; border-radius: var(--radius); } .an-page .an-step:hover { border-color: var(--border); background: var(--panel-soft); } .an-page .an-step-name { font-weight: 650; } .an-page .an-step-value { font-size: var(--fs-5); font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .an-page .an-step-value small { color: var(--muted); font-size: var(--fs-2); font-weight: 500; } /* РЕЖИМ ЛЕСТНИЦЫ — АТРИБУТОМ НА КОРНЕ. Сервер отдал все три числа; видно то, что выбрано (`ladder`, `rep` в адресе или скрипт). */ .an-page [data-an-mode] .an-v-count, .an-page [data-an-mode] .an-v-prev, .an-page [data-an-mode] .an-v-start, .an-page [data-an-mode] .an-v-avg, .an-page [data-an-mode] .an-v-people { display: none; } .an-page [data-an-mode="count"] .an-v-count, .an-page [data-an-mode="prev"] .an-v-prev, .an-page [data-an-mode="start"] .an-v-start, .an-page [data-an-mode="avg"] .an-v-avg, .an-page [data-an-mode="people"] .an-v-people { display: block; } .an-page .an-steps-head [class^="an-v-"] { text-align: right; } .an-page .an-deal { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--panel-soft); font-size: var(--fs-3); } .an-page .an-bar { display: block; width: 100%; height: 14px; } .an-page .an-bar-track { fill: var(--border); } .an-page .an-bar-fill { fill: var(--accent); } /* ---- таблицы с полоской доли и раскрытием ---- */ .an-page .an-table-wrap { overflow-x: auto; } .an-page .an-table { font-variant-numeric: tabular-nums; } .an-page .an-table th, .an-page .an-table td { vertical-align: middle; } .an-page .an-share-col { width: 22%; min-width: 160px; } .an-page .an-share { display: flex; align-items: center; gap: var(--s3); } .an-page .an-share .an-bar { flex: 1 1 auto; height: 10px; } .an-page .an-share > span { flex: 0 0 7ch; color: var(--muted); font-size: var(--fs-3); text-align: right; white-space: nowrap; } .an-page .an-sources thead th { background: var(--panel-soft); } .an-page .an-toggle { display: inline-flex; align-items: center; gap: var(--s1); color: var(--text); font-weight: 650; text-decoration: none; } .an-page .an-toggle .ic { width: 16px; height: 16px; flex-basis: 16px; color: var(--muted); } .an-page .an-src.is-open .an-toggle .ic { transform: rotate(90deg); } .an-page .an-toggle-none { padding-left: calc(var(--s4) + var(--s1)); font-weight: 650; } .an-page .an-child td { background: var(--panel-soft); color: var(--muted); font-size: var(--fs-3); } .an-page .an-child td:first-child { padding-left: var(--s8); } .an-page .an-child-tail td:first-child { font-style: italic; } .an-page .an-tail td { color: var(--muted); font-style: italic; } .an-page .an-total th { border-top: 1px solid var(--border-strong); border-bottom: 0; color: var(--text); background: var(--panel-soft); } .an-page .an-insight { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s3); color: var(--muted); font-size: var(--fs-3); } .an-page .an-insight .ic { flex: 0 0 18px; width: 18px; height: 18px; color: var(--warn-fg); } /* ---- «Сколько мы отдали» ---- */ .an-page .an-fold { margin-bottom: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); } .an-page .an-fold > summary { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); cursor: pointer; list-style: none; } .an-page .an-fold > summary::-webkit-details-marker { display: none; } .an-page .an-fold[open] > summary { border-bottom: 1px solid var(--border); background: var(--panel-soft); } .an-page .an-fold-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); } .an-page .an-fold-warm .an-fold-icon { background: var(--warn-bg); color: var(--warn-fg); } .an-page .an-fold-icon .ic { width: 18px; height: 18px; flex-basis: 18px; } .an-page .an-fold-title { display: grid; color: var(--muted); font-size: var(--fs-3); } .an-page .an-fold-title b { color: var(--text); font-size: var(--fs-5); } .an-page .an-fold > :not(summary) { margin: var(--s3) var(--s4); } .an-page .an-fold > table { width: calc(100% - 2 * var(--s4)); } .an-page .an-given td:nth-child(2), .an-page .an-given th:nth-child(2) { width: 14ch; } /* ---- «Прибыль» (17.3): полоса периода, отчёт, структура, точка, юнит-экономика. Каркас тот же; ниже — только то, чего у «Воронки» и «Источников» не было. ---- */ .an-page .an-period-step { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .an-page .an-period-title { font-size: var(--fs-5); white-space: nowrap; } .an-page .an-period-days { color: var(--muted); font-size: var(--fs-3); white-space: nowrap; } .an-page .an-pnl-alarm { margin-bottom: var(--s4); } .an-page .an-badges { display: inline-flex; gap: var(--s1); margin-left: var(--s2); vertical-align: middle; } .an-page .an-pnl-sum .an-src-row td, .an-page .an-pnl-total .an-src-row td { border-top: 1px solid var(--border-strong); font-weight: 700; } .an-page .an-pnl-total .an-src-row td { background: var(--panel-soft); font-size: var(--fs-5); } .an-page .an-pnl-sub .an-src-row td { color: var(--muted); font-size: var(--fs-3); } .an-page .an-row-note { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--fs-2); } /* Шеврон статьи вращается от СВОЕЙ строки, а не от раскрытого ведра. */ .an-page .an-src .an-sub .an-toggle .ic { transform: none; } .an-page .an-src .an-sub.is-open .an-toggle .ic { transform: rotate(90deg); } .an-page .an-sub .an-toggle { color: inherit; font-weight: 600; } .an-page .an-grand td { font-size: var(--fs-2); } .an-page .an-grand td:first-child { padding-left: calc(var(--s8) + var(--s6)); } .an-page .an-mix-aside td { color: var(--muted); } .an-page .an-triad td:first-child, .an-page .an-triad th:first-child { width: 40%; } .an-page .an-kpi.is-done .an-kpi-value { color: var(--done-fg); } .an-page .an-kpi.is-short .an-kpi-value { color: var(--warn-fg); } /* Плитки и полоска внутри карточки: ширина — от карточки за вычетом её полей, а не 100 % (на телефоне общий `.kpis` ставит 100 %, и с полями карточки они вылезали за край — снимок 390 px). */ .an-page .an-card > .an-kpis { width: auto; } .an-page .an-be-track { margin-top: var(--s2); } .an-page .an-be-bar.is-done .an-bar-fill { fill: var(--done-fg); } .an-page .an-be-bar.is-short .an-bar-fill { fill: var(--warn-fg); } .an-page .an-be-verdict { margin: var(--s3) 0 var(--s1); font-size: var(--fs-4); } /* Юнит-экономика: ручки сеткой в две колонки, чтобы левая часть была не выше результата (замечание владельца 17.3). */ .an-page .an-unit-reset { margin-left: auto; } .an-page .an-unit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: var(--s5); align-items: start; } .an-page .an-unit-knobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); } .an-page .an-unit-label { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin: 0 0 var(--s1); color: var(--muted); font-size: var(--fs-3); } .an-page .an-unit-label input { width: 12ch; min-height: 32px; } .an-page .be-knob input[type="range"] { display: block; width: 100%; margin: 0; } .an-page .an-unit-other { grid-column: 1 / -1; margin: 0; } .an-page .an-unit-result { padding: var(--s4) var(--s5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); } .an-page .an-unit-point b { display: block; margin-top: var(--s1); font-size: var(--fs-7); line-height: 1.15; font-variant-numeric: tabular-nums; } .an-page .an-unit-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); } .an-page .an-unit-figures b { display: block; margin-top: var(--s1); font-size: var(--fs-5); font-variant-numeric: tabular-nums; white-space: nowrap; } .an-page .an-guide { margin-top: var(--s4); } .an-page .an-guide-list { padding-left: var(--s5); color: var(--muted); font-size: var(--fs-3); } .an-page .an-guide-list li + li { margin-top: var(--s2); } .an-page .an-guide-list b { color: var(--text); } /* ---- «Реклама», «Загрузка», «Стены и отказы», «Оценки» (17.4) ---- */ .an-page .an-back { margin: 0 0 var(--s3); font-size: var(--fs-3); } .an-page .an-ads-typo p { margin: 0 0 var(--s2); } .an-page .an-ads-merge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; } .an-page .an-ads-merge .an-note { margin: 0; } .an-page .an-ads-drift { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); } .an-page .an-ads-free .an-src-row td { color: var(--muted); } .an-page .an-kv td:first-child { width: 60%; } .an-page .an-kv-aside { margin-left: var(--s2); color: var(--muted); font-size: var(--fs-2); } .an-page .an-group th { padding-top: var(--s3); color: var(--muted); font-size: var(--fs-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--panel-soft); } .an-page .an-walls-where, .an-page .an-feed-what, .an-page .an-feed-when { color: var(--muted); white-space: nowrap; } .an-page .an-stars th { width: 8ch; white-space: nowrap; } .an-page .an-heat-controls { justify-content: flex-start; } .an-page .an-heat td, .an-page .an-heat th { white-space: nowrap; } .an-page .an-heat-none { color: var(--muted); } .an-page .an-heat-total { font-weight: 700; } /* СИЛА КЛЕТКИ — СТУПЕНЬЮ-КЛАССОМ, А НЕ ИНЛАЙН-СТИЛЕМ (17.4). Класс задаёт только долю; чем красить, решает общее правило `td.heat` (`--accent` темы). Одиннадцать ступеней: 6 % … 68 %, как было. */ .an-page .heat-0 { --heat: 6.0%; } .an-page .heat-1 { --heat: 12.2%; } .an-page .heat-2 { --heat: 18.4%; } .an-page .heat-3 { --heat: 24.6%; } .an-page .heat-4 { --heat: 30.8%; } .an-page .heat-5 { --heat: 37.0%; } .an-page .heat-6 { --heat: 43.2%; } .an-page .heat-7 { --heat: 49.4%; } .an-page .heat-8 { --heat: 55.6%; } .an-page .heat-9 { --heat: 61.8%; } .an-page .heat-10 { --heat: 68.0%; } @media (max-width: 760px) { .an-page .an-filter-end { margin-left: 0; } .an-page .an-kpi + .an-kpi { border-left: 0; border-top: 1px solid var(--border); } .an-page .an-steps-head { display: none; } .an-page .an-step { grid-template-columns: minmax(8ch, 11ch) minmax(0, 1fr) 9ch; gap: var(--s2); } .an-page .an-card > :not(.an-card-head) { margin-left: var(--s3); margin-right: var(--s3); } .an-page .an-card-head { padding: var(--s3); } .an-page .an-toolbar-end { gap: var(--s3); } .an-page .an-unit, .an-page .an-unit-knobs { grid-template-columns: minmax(0, 1fr); } .an-page .an-grand td:first-child { padding-left: var(--s8); } } /* === КОНЕЦ БЛОКА «АНАЛИТИКА» === */ /* === МАРКЕТИНГ 17.7 — «Рассылки», «Скидки», «Напоминания» === */ /* Вид — общие наборы: список (`list-*`), окно (`.modal`), форма (`form-*`, язык «Настроек»), «?» (`.help-tip`), плашка. Здесь только раскладка трёх экранов: список рассылок слева и выбранная справа, строка кампании с тумблером и раскрытием, ручка напоминания со словом состояния и текстом сообщения. Каждый селектор начинается со скоупа `.mk-page`; `@media` — внутри блока; общих компонентов блок не переопределяет. */ .mk-page .mk-lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); color: var(--muted); font-size: var(--fs-3); } .mk-page .mk-viewbar { align-items: center; padding-bottom: var(--s4); } .mk-page .mk-viewbar .mk-lead { flex: 1 1 auto; margin: 0; } .mk-page .mk-chip-n { color: var(--muted); font-variant-numeric: tabular-nums; } /* ---- РАССЫЛКИ: список и выбранная ---- */ .mk-page .mk-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: var(--s4); align-items: start; } .mk-page .mk-bc-rows { margin: 0; padding: 0; list-style: none; } .mk-page .mk-bc-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--border); } .mk-page .mk-bc-item:hover { background: var(--row-hover); } .mk-page .mk-bc-item.is-current { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .mk-page .mk-bc-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2) var(--s3) var(--s4); color: var(--text); text-decoration: none; } .mk-page .mk-bc-row:hover { color: var(--text); } .mk-page .mk-bc-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--panel-soft); color: var(--muted); } .mk-page .mk-bc-icon .ic { width: 16px; height: 16px; } .mk-page .mk-bc-icon.is-done { background: var(--done-bg); color: var(--done-fg); } .mk-page .mk-bc-icon.is-busy { background: var(--busy-bg); color: var(--busy-fg); } .mk-page .mk-bc-icon.is-warn { background: var(--warn-bg); color: var(--warn-fg); } .mk-page .mk-bc-main { display: grid; gap: var(--s1); min-width: 0; } .mk-page .mk-bc-title { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .mk-page .mk-bc-meta { color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-bc-n { display: inline-flex; align-items: center; gap: var(--s1); white-space: nowrap; } .mk-page .mk-bc-n .ic { width: 13px; height: 13px; } .mk-page .mk-bc-state { color: var(--muted); font-size: var(--fs-2); font-weight: 650; text-align: right; } .mk-page .mk-bc-state.is-done { color: var(--done-fg); } .mk-page .mk-bc-state.is-busy { color: var(--busy-fg); } .mk-page .mk-bc-state.is-warn { color: var(--warn-fg); } /* Меню «⋯» — `
`: открывается и без скрипта. */ .mk-page .mk-menu { position: relative; margin-right: var(--s2); } .mk-page .mk-menu > summary { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; list-style: none; } .mk-page .mk-menu > summary::-webkit-details-marker { display: none; } .mk-page .mk-menu > summary:hover, .mk-page .mk-menu[open] > summary { background: var(--panel-soft); color: var(--text); } .mk-page .mk-menu-pop { position: absolute; z-index: 30; top: calc(100% + 2px); right: 0; display: grid; gap: var(--s1); min-width: 210px; padding: var(--s2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-hover); } .mk-page .mk-menu-pop a { padding: var(--s1) var(--s2); } .mk-page .mk-bc-detail { position: sticky; top: var(--s4); } .mk-page .mk-detail-head { position: relative; display: grid; gap: var(--s1); justify-items: start; padding: var(--s5) var(--s7) var(--s4) var(--s5); border-bottom: 1px solid var(--border); } .mk-page .mk-detail-head h2 { margin: 0; font-size: var(--fs-5); overflow-wrap: anywhere; } .mk-page .mk-detail-head p { margin: 0; color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-detail-section { padding: var(--s4) var(--s5); border-top: 1px solid var(--border); } .mk-page .mk-detail-section h3 { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--fs-2); font-weight: 600; } .mk-page .mk-detail-section dl { margin: 0; } .mk-page .mk-detail-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--border); } .mk-page .mk-detail-foot form { margin: 0; } .mk-page .mk-foot-note { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-detail-empty { min-height: 320px; align-content: center; } .mk-page .mk-people { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0; } /* Сообщение — как в телеграме: текст с переносами, без разметки. */ .mk-page .mk-message { padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); font-size: var(--fs-3); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } /* Плитки чисел рассылки и кампании; `.is-demo` — пунктир и замок. */ .mk-page .mk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: var(--s4) var(--s5); } .mk-page .mk-stats > div { min-width: 0; } .mk-page .mk-stats dt { display: flex; align-items: center; gap: var(--s1); color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-stats dt .ic { width: 13px; height: 13px; } .mk-page .mk-stats dd { margin: 0; font-size: var(--fs-5); font-weight: 700; font-variant-numeric: tabular-nums; } .mk-page .mk-stats.mk-demo { margin: 0 var(--s5) var(--s4); padding: var(--s3); border: 1px dashed var(--border-strong); border-radius: var(--radius); cursor: help; } .mk-page .mk-stats.mk-demo dd { color: var(--muted); } .mk-page .mk-stats-lock { display: flex; grid-column: 1 / -1; grid-row: 1; align-items: center; gap: var(--s1); color: var(--muted-soft); font-size: var(--fs-2); } .mk-page .mk-demo-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); } /* Окно новой рассылки: шире обычного — метки в ряд. */ .mk-page .mk-new-panel { width: min(720px, 96vw); } .mk-page .mk-tags { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; margin: 0; padding: 0; border: 0; } .mk-page .mk-tags legend { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); color: var(--text); font-size: var(--fs-3); font-weight: 600; } .mk-page .mk-tag { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--control); border-radius: 999px; color: var(--text); font-size: var(--fs-3); cursor: pointer; } .mk-page .mk-tag input { width: auto; min-width: 0; margin: 0; } .mk-page .mk-tag:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .mk-page .mk-tag-n { color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-reach { padding: var(--s3); border-radius: var(--radius); background: var(--accent-soft); } .mk-page .mk-reach p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: 0; color: var(--text); font-size: var(--fs-3); } .mk-page .mk-reach p[hidden] { display: none; } .mk-page .mk-reach strong { font-size: var(--fs-5); } .mk-page .mk-counter { color: var(--muted-soft); white-space: nowrap; } /* ---- СКИДКИ: строка кампании ---- */ .mk-page .mk-camp-head, .mk-page .mk-camp-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.8fr) 72px 104px 190px 20px; align-items: center; gap: var(--s3); } .mk-page .mk-camp-head { padding: 0 var(--s4) 0 calc(48px + var(--s4) * 2); min-height: 44px; border-bottom: 1px solid var(--border); background: var(--panel-soft); color: var(--muted); font-size: var(--fs-2); font-weight: 600; } .mk-page .mk-camp-head span:first-child { position: absolute; left: var(--s4); } .mk-page .mk-camp-card { position: relative; } .mk-page .mk-camps { margin: 0; padding: 0; list-style: none; } .mk-page .mk-camp { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s4); padding: 0 var(--s4); border-bottom: 1px solid var(--border); } .mk-page .mk-camp:last-child { border-bottom: 0; } .mk-page .mk-camp-switch { margin: 0; padding-top: calc(var(--s4) + 2px); } .mk-page .mk-camp-row { padding: var(--s3) 0; min-height: 60px; cursor: pointer; list-style: none; } .mk-page .mk-camp-row::-webkit-details-marker { display: none; } .mk-page .mk-camp-row:hover .mk-camp-name strong { text-decoration: underline; text-underline-offset: 2px; } .mk-page .mk-camp.is-off .mk-camp-name strong, .mk-page .mk-camp.is-off .mk-camp-pct strong { color: var(--muted); } .mk-page .mk-camp-name, .mk-page .mk-camp-pct { display: grid; gap: var(--s1); min-width: 0; } .mk-page .mk-camp-name strong { overflow-wrap: anywhere; } .mk-page .mk-camp-name span, .mk-page .mk-camp-pct span, .mk-page .mk-camp-rule { color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-camp-num { display: inline-flex; align-items: center; gap: var(--s1); font-variant-numeric: tabular-nums; } .mk-page .mk-camp-num.mk-demo { padding: 0 var(--s2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--muted); justify-self: start; } .mk-page .mk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .mk-page .mk-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .12s ease; } .mk-page .mk-camp-body[open] .mk-chev { transform: rotate(90deg); } .mk-page .mk-camp-open { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5); padding: var(--s2) 0 var(--s5); } .mk-page .mk-camp-open h3 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: var(--fs-4); } .mk-page .mk-camp-edit .form-help { margin-bottom: var(--s3); } .mk-page .mk-camp-side { display: grid; gap: var(--s4); align-content: start; } .mk-page .mk-camp-side .mk-stats.mk-demo { margin: 0; } .mk-page .mk-camp-grant .form-field { max-width: 260px; } .mk-page .mk-camp-warn { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: var(--stop-bg); color: var(--stop-fg); font-size: var(--fs-2); } .mk-page .mk-kind { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: 1px dashed var(--border); } .mk-page .mk-kind[hidden] { display: none; } .mk-page .mk-kind-note { margin: 0; color: var(--muted); font-size: var(--fs-2); font-weight: 600; } .mk-page .mk-kind-note[hidden] { display: none; } /* ---- НАПОМИНАНИЯ: зоны и ручки ---- */ .mk-page .mk-grid { padding: 0; margin-bottom: var(--s5); } .mk-page .mk-zone .form-zone-header .help-tip { margin-left: auto; } .mk-page .mk-zone[data-mode="ahead"] .form-zone-header { background: var(--warn-bg); } .mk-page .mk-zone[data-mode="ahead"] .form-zone-marker { background: var(--warn-fg); } .mk-page .mk-knob { padding: 0 0 var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--border); } .mk-page .mk-knob:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .mk-page .mk-zone .form-number-control input { max-width: 120px; } .mk-page .mk-camp-edit input[type="number"] { max-width: 120px; } .mk-page .mk-lock { width: 14px; height: 14px; flex: 0 0 14px; } .mk-page .mk-knob-state { margin-left: auto; white-space: nowrap; } .mk-page .mk-text { margin-top: var(--s2); } .mk-page .mk-text > summary { color: var(--accent); cursor: pointer; font-size: var(--fs-2); font-weight: 600; } .mk-page .mk-text-item { display: grid; gap: var(--s1); justify-items: start; margin-top: var(--s2); } .mk-page .mk-text-item .mk-message { justify-self: stretch; } .mk-page .mk-text-name { color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-knob-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: var(--s2) 0 0; color: var(--muted); font-size: var(--fs-2); } /* 18.9.2: «ушло за 30 дней» — настоящее, вне замка; пунктир и замок — только у «нажали · заказали». */ .mk-page .mk-knob-stats .mk-knob-sent { color: var(--text); } .mk-page .mk-knob-stats .mk-knob-lock { display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); cursor: help; } .mk-page .mk-zone-note { margin: 0 0 var(--s4); color: var(--muted); font-size: var(--fs-3); line-height: 1.5; } .mk-page .mk-zone-note > .ic { width: 16px; height: 16px; margin-right: var(--s1); vertical-align: -3px; } .mk-page .mk-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: calc(-1 * var(--s2)) 0 var(--s6); } .mk-page .mk-rules { display: grid; margin: 0 0 var(--s4); padding: 0; list-style: none; } .mk-page .mk-rule { display: grid; grid-template-columns: 48px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .mk-page .mk-rule form { margin: 0; } .mk-page .mk-rule-main { display: grid; gap: var(--s1); min-width: 0; } .mk-page .mk-rule-main span, .mk-page .mk-rule-who { color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-rule.is-off .mk-rule-main strong { color: var(--muted); } .mk-page .mk-rule-code { overflow: hidden; color: var(--muted); font-size: var(--fs-2); text-overflow: ellipsis; } .mk-page .mk-checks { display: flex; flex-wrap: wrap; gap: var(--s4); } .mk-page .mk-checks label { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text); font-size: var(--fs-3); } .mk-page .mk-checks input { width: auto; } .mk-page .mk-people-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; } .mk-page .mk-people-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } /* 18.9.1 — рассылка по-настоящему: предпросмотр пузырями, вложение, кнопки черновика, «Нажали · Купили», «Запланировать», «Использовано». */ .mk-page .mk-bc-preview { max-width: 420px; } .mk-page .mk-bc-note { margin: 0; padding: 0 var(--s5) var(--s4); } .mk-page .mk-bc-media { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); } .mk-page .mk-bc-media form { margin: 0; } .mk-page .mk-bc-buttons { display: grid; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; list-style: none; } .mk-page .mk-bc-buttons li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); } .mk-page .mk-bc-buttons li > span { min-width: 0; overflow-wrap: anywhere; } .mk-page .mk-bc-button-acts { display: inline-flex; gap: var(--s2); margin-left: auto; } .mk-page .mk-bc-button-acts form { margin: 0; } .mk-page .mk-demo-row form { margin: 0; } .mk-page .mk-bc-schedule { border-top: 1px solid var(--border); } .mk-page .mk-bc-schedule h3 { margin: 0 0 var(--s3); font-size: var(--fs-3); } .mk-page .mk-bc-discount { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; } .mk-page .mk-bc-discount legend { margin-bottom: var(--s2); color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-camp-used { margin-top: var(--s4); } .mk-page .mk-camp-used h3 { margin: 0 0 var(--s2); font-size: var(--fs-3); } .mk-page .mk-camp-used-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); line-height: 1.5; } @media (max-width: 1240px) { .mk-page .mk-camp-head { display: none; } .mk-page .mk-camp-row { grid-template-columns: minmax(0, 1fr) auto 20px; row-gap: var(--s1); } .mk-page .mk-camp-pct, .mk-page .mk-camp-rule { grid-column: 1; } .mk-page .mk-camp-num { grid-column: 1; } /* Шапки колонок нет — подпись числа встаёт рядом с ним. */ .mk-page .mk-camp-num .mk-sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: var(--muted); font-size: var(--fs-2); } .mk-page .mk-camp-state { grid-column: 2; grid-row: 1; } .mk-page .mk-chev { grid-column: 3; grid-row: 1; } } @media (max-width: 1100px) { .mk-page .mk-workbench { grid-template-columns: minmax(0, 1fr); } .mk-page .mk-workbench.has-selected .mk-bc-detail { order: -1; } .mk-page .mk-bc-detail { position: static; } } @media (max-width: 760px) { .mk-page .mk-new-panel { width: auto; } .mk-page .mk-bc-row { grid-template-columns: 32px minmax(0, 1fr); padding-left: var(--s3); } .mk-page .mk-bc-state { grid-column: 2; text-align: left; } .mk-page .mk-bc-title { white-space: normal; } .mk-page .mk-camp { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s3); padding: 0 var(--s3); } .mk-page .mk-camp-row { grid-template-columns: minmax(0, 1fr) 20px; } .mk-page .mk-camp-state { grid-column: 1; grid-row: auto; } .mk-page .mk-chev { grid-column: 2; grid-row: 1; } .mk-page .mk-camp-open { grid-template-columns: minmax(0, 1fr); } .mk-page .mk-camp-warn { grid-column: 1 / -1; } .mk-page .mk-rule { grid-template-columns: 48px minmax(0, 1fr); } .mk-page .mk-rule-who, .mk-page .mk-rule-code, .mk-page .mk-rule-del { grid-column: 2; } .mk-page .mk-knob .form-number-control { flex-wrap: wrap; } .mk-page .mk-detail-head { padding-left: var(--s4); } .mk-page .mk-detail-section, .mk-page .mk-stats { padding-left: var(--s4); padding-right: var(--s4); } .mk-page .mk-stats.mk-demo { margin-left: var(--s4); margin-right: var(--s4); } /* 18.9.1: «Использовано» в трети ряда на 390 упирается в «Конверсию». */ .mk-page .mk-bc-note { padding-left: var(--s4); padding-right: var(--s4); } .mk-page .mk-camp-side .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* === КОНЕЦ БЛОКА «МАРКЕТИНГ» === */ /* === КОМАНДА И РАСХОДЫ 17.8 — «Люди», «Ставки», «К выплате», карточка сотрудника; «Записи», «Справочник статей», «Постоянные расходы», карточка плана === */ /* Вид — общие наборы: список (`list-*`), панель и окно (`.drawer`, `.modal`, открываются якорем), форма (`form-*`), «?» (`.help-tip`), плашка. Здесь только раскладка восьми экранов: ширины колонок, вторая строка ячейки, плитки сумм, полки прав роли, полоса периода. Каждый селектор начинается со скоупа `.tm-page`; `@media` — внутри блока; общих компонентов блок не переопределяет. */ .tm-page .tm-viewbar { align-items: center; gap: var(--s4); padding-bottom: var(--s4); } .tm-page .tm-lead { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--muted); font-size: var(--fs-3); line-height: 1.5; } .tm-page .tm-lead strong { color: var(--text); } .tm-page .tm-sub { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--fs-2); font-weight: 400; } .tm-page .tm-sub .ic { width: 12px; height: 12px; margin-right: var(--s1); vertical-align: -1px; } .tm-page .tm-back { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); } .tm-page .tm-note { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); font-size: var(--fs-3); line-height: 1.5; } .tm-page .tm-note > .ic { width: 16px; height: 16px; flex: 0 0 16px; } .tm-page .tm-rule { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); color: var(--muted); font-size: var(--fs-3); line-height: 1.5; } .tm-page .tm-rule > .ic { width: 16px; height: 16px; flex: 0 0 16px; } .tm-page .tm-check { display: inline-flex; align-items: flex-start; gap: var(--s2); color: var(--text); font-size: var(--fs-3); line-height: 1.45; cursor: pointer; } .tm-page .tm-check input { width: auto; } /* Строка с действием: колонка «›», «Убрать», «Книга». */ .tm-page .tm-col-chev { width: 44px; } .tm-page .tm-col-act { width: 120px; } .tm-page .tm-chev-cell { color: var(--muted); text-align: right; } .tm-page .tm-chev-cell .ic { width: 16px; height: 16px; } .tm-page .tm-act-cell { text-align: right; white-space: nowrap; } .tm-page .tm-act-cell form { margin: 0; } .tm-page tr.is-off td { color: var(--muted); } .tm-page tr.is-off td strong, .tm-page tr.is-off td a { color: var(--muted); } /* Ширины колонок — долями, таблица укладывается в 1440 сама. */ .tm-page .tm-col-name { width: 26%; } .tm-page .tm-col-role { width: 16%; } .tm-page .tm-col-bot { width: 16%; } .tm-page .tm-col-client { width: 20%; } .tm-page .tm-col-state { width: 14%; } .tm-page .tm-col-role-name { width: auto; } .tm-page .tm-col-num { width: 120px; } .tm-page .tm-col-who { width: 24%; } .tm-page .tm-col-what { width: 26%; } .tm-page .tm-col-money { width: 160px; } .tm-page .tm-col-pct { width: 110px; } .tm-page .tm-col-note { width: auto; } .tm-page .tm-col-day { width: 120px; } .tm-page .tm-col-kind { width: 150px; } .tm-page .tm-col-order { width: 100px; } .tm-page .tm-col-cat { width: 22%; } .tm-page .tm-col-when { width: 150px; } .tm-page .tm-col-label { width: 130px; } .tm-page .tm-col-loc { width: 120px; } .tm-page .tm-col-cat-name { width: auto; } .tm-page .tm-col-bucket { width: 18%; } .tm-page .tm-col-scales { width: 16%; } .tm-page .tm-col-imp { width: 22%; } .tm-page .tm-col-switch { width: 72px; } .tm-page .tm-col-period { width: 150px; } .tm-page .tm-col-next { width: 190px; } .tm-page tr.tm-child td:first-child { padding-left: var(--s7); } .tm-page .tm-switch-cell form { margin: 0; } /* Шапка карточки-таблицы: заголовок слева, пояснение или период справа. */ .tm-page .tm-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); } .tm-page .tm-card-head h2 { margin: 0; font-size: var(--fs-5); } .tm-page .tm-card-head > span { font-size: var(--fs-3); } .tm-page .tm-card-head .tm-period { margin-left: auto; } .tm-page .tm-cats-month { margin-bottom: var(--s5); } .tm-page .tm-book { margin-top: var(--s5); } /* Полоса периода и месяца: поля набора формы в строку. */ .tm-page .tm-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin: 0; } .tm-page .tm-period .form-field { margin: 0; } .tm-page .tm-period .form-field > label { font-size: var(--fs-2); } .tm-page .tm-period .form-field input { min-height: 36px; width: auto; } /* Плитки сумм: числа уже посчитанные, своих нет. */ .tm-page .tm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s5); } .tm-page .tm-stats > div { min-width: 0; padding: var(--s4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); } .tm-page .tm-stats dt { display: flex; align-items: center; gap: var(--s1); color: var(--muted); font-size: var(--fs-2); font-weight: 600; } .tm-page .tm-stats dd { margin: var(--s1) 0 0; font-size: var(--fs-6); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .tm-page .tm-stats dd.tm-word { font-size: var(--fs-5); } .tm-page .tm-stats > div.is-main { border-color: var(--accent); background: var(--accent-soft); } .tm-page .tm-plan-props { max-width: 640px; margin-bottom: var(--s5); } .tm-page .tm-grid { padding: 0; margin-bottom: var(--s5); } .tm-page .tm-sum { margin: 0; } .tm-page .tm-line-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); } /* Формы в строку внутри панели: поле растёт, кнопка — по месту. */ .tm-page .tm-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); margin: 0 0 var(--s3); } .tm-page .tm-inline-form .form-field { flex: 1 1 200px; min-width: 0; margin: 0; } .tm-page .tm-inline-form:last-child { margin-bottom: 0; } .tm-page .tm-step-form { margin-top: var(--s4); } /* «Стучатся в рабочий бот». */ .tm-page .tm-invites { margin: 0 0 var(--s4); } .tm-page .tm-invites h2 { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); font-size: var(--fs-4); } .tm-page .tm-invites h2 .ic { width: 16px; height: 16px; } .tm-page .tm-invite-list { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; } .tm-page .tm-invite-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); } .tm-page .tm-code { font-size: var(--fs-5); font-weight: 800; letter-spacing: .08em; } /* Окно шире обычного: права роли полками, форма расхода в три колонки. */ .tm-page .tm-wide-panel { width: min(880px, 96vw); } .tm-page .tm-cols-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .tm-page .tm-perm-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); } .tm-page .tm-perm-group { display: grid; gap: var(--s1); align-content: start; min-width: 0; margin: 0; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); } .tm-page .tm-perm-group legend { padding: 0 var(--s1); color: var(--text); font-size: var(--fs-3); font-weight: 700; } .tm-page .tm-perm { display: flex; align-items: flex-start; gap: var(--s2); color: var(--text); font-size: var(--fs-3); font-weight: 400; line-height: 1.4; cursor: pointer; } .tm-page .tm-perm input { width: auto; flex: 0 0 auto; } .tm-page .tm-perm[hidden] { display: none; } .tm-page .tm-perm-all { padding-bottom: var(--s1); border-bottom: 1px dashed var(--border); color: var(--accent); font-weight: 600; } /* «Справочник статей»: вопрос второй оси — на виду, а не в «?». */ .tm-page .tm-question { color: var(--text); } /* Опасная зона карточки плана — тихо, в конце страницы. */ .tm-page .tm-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s6); padding: var(--s4) var(--s5); border: 1px solid var(--stop-fg); border-radius: var(--radius-lg); background: var(--stop-bg); } .tm-page .tm-danger h2 { margin: 0 0 var(--s1); color: var(--stop-fg); font-size: var(--fs-4); } .tm-page .tm-danger p { margin: 0; color: var(--text); font-size: var(--fs-3); } .tm-page .tm-total th, .tm-page .tm-total td { padding: var(--s3); border-top: 1px solid var(--border); background: var(--panel-soft); text-align: left; } .tm-page .tm-total td { text-align: center; } @media (max-width: 1180px) { .tm-page .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-page .tm-perm-groups { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .tm-page .tm-viewbar { flex-wrap: wrap; } .tm-page .tm-stats { grid-template-columns: minmax(0, 1fr); } .tm-page .tm-line-cols, .tm-page .tm-cols-wide { grid-template-columns: minmax(0, 1fr); } .tm-page .tm-card-head .tm-period { margin-left: 0; } .tm-page tr.tm-child td:first-child { padding-left: var(--s3); } .tm-page td.tm-chev-cell { display: none; } .tm-page td.tm-act-cell { text-align: left; } .tm-page .tm-total { display: grid; } .tm-page .tm-total th, .tm-page .tm-total td:empty { display: none; } .tm-page .tm-total td { display: flex; justify-content: space-between; text-align: left; } .tm-page .tm-total td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-2); } } /* === КОНЕЦ БЛОКА «КОМАНДА И РАСХОДЫ» === */ /* === ТЕКСТЫ И ЦЕНЫ 17.9 — «Тексты бота» карточками сообщений, «Ступени воронки», «История структуры», «Выгрузка и загрузка» === */ /* Вид — общие наборы: список (`list-*`), окно (`.modal`, открывается якорем), форма (`form-*`), «?» (`.help-tip`), плашка; пузырь «как в Телеграме» — предпросмотр 16.3 (`.tgp-*`). Здесь только раскладка: карточки сообщений сеткой, правка на месте по якорю (`:target`) — карточка встаёт во всю ширину, поле слева, «Сейчас у клиента» справа. Каждый селектор начинается со скоупа `.tc-page`; `@media` — внутри блока; общих компонентов блок не переопределяет. */ .tc-page .tx-viewbar { align-items: center; gap: var(--s4); padding-bottom: var(--s3); } .tc-page .tx-lead { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--muted); font-size: var(--fs-3); line-height: 1.5; } .tc-page .tx-meta { line-height: 1.6; } .tc-page .tx-meta-warn { color: var(--warn-fg); font-weight: 600; } /* Заметки над списком: лишние правки и висяки. */ .tc-page .tx-redundant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s4); } .tc-page .tx-redundant p { display: flex; align-items: flex-start; gap: var(--s2); margin: 0; font-size: var(--fs-3); line-height: 1.5; } .tc-page .tx-redundant p > .ic { width: 16px; height: 16px; flex: 0 0 16px; margin-top: var(--s1); } .tc-page .tx-redundant-list { max-height: 50vh; margin: 0; padding-left: var(--s5); overflow-y: auto; font-size: var(--fs-3); line-height: 1.6; } .tc-page .tx-redundant-list code { color: var(--muted); font-size: var(--fs-1); overflow-wrap: anywhere; } .tc-page .tx-stale { margin: 0 0 var(--s4); } .tc-page .tx-stale p { margin: 0 0 var(--s3); font-size: var(--fs-3); } .tc-page .tx-stale-list { display: flex; flex-wrap: wrap; gap: var(--s2); } .tc-page .tx-stale-list form { margin: 0; } /* Группа — складной блок; заголовки групп помещаются на телефон. */ .tc-page .tx-group { margin-bottom: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); } .tc-page .tx-group > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s4) var(--s5); cursor: pointer; } .tc-page .tx-group > summary h2 { display: inline; margin: 0; font-size: var(--fs-5); } .tc-page .tx-group > summary > span { font-size: var(--fs-3); } .tc-page .tx-group[open] > summary { border-bottom: 1px solid var(--border); } .tc-page .tx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); background: var(--panel-soft); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* Карточка сообщения: имя, когда видит клиент, пузырь. */ .tc-page .tx-msg { display: flex; min-width: 0; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); scroll-margin-top: var(--s4); } .tc-page .tx-msg.is-changed { border-left: 3px solid var(--warn-fg); } .tc-page .tx-msg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); } .tc-page .tx-msg-title { min-width: 0; } .tc-page .tx-msg-title h3 { margin: 0; font-size: var(--fs-4); line-height: 1.35; overflow-wrap: anywhere; } .tc-page .tx-msg-when { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-2); line-height: 1.4; } .tc-page .tx-msg-marks { display: flex; flex: 0 0 auto; align-items: center; gap: var(--s2); } .tc-page .tx-edit { width: 36px; padding: 0; } .tc-page .tx-msg-view .tgp-msg { background: var(--panel-soft); } .tc-page .tx-msg-view .tgp-text { max-height: 280px; overflow-y: auto; } .tc-page .tx-kb { max-width: 280px; } .tc-page .tx-value { margin: 0; } .tc-page .tx-sub { padding: 0 var(--s1); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 600; white-space: nowrap; } .tc-page .tx-saved { display: flex; align-items: center; gap: var(--s1); margin: var(--s2) 0 0; color: var(--done-fg); font-size: var(--fs-2); font-weight: 600; } .tc-page .tx-saved .ic { width: 14px; height: 14px; } .tc-page .tx-warn, .tc-page .tx-hint { margin: 0; font-size: var(--fs-2); } /* Правка на месте — по якорю, без перезагрузки и без скрипта. */ .tc-page .tx-msg-edit { display: none; margin: 0; } .tc-page .tx-msg-edit:target { display: block; } .tc-page .tx-msg:has(.tx-msg-edit:target) { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; gap: var(--s3) var(--s5); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .tc-page .tx-msg:has(.tx-msg-edit:target) > * { grid-column: 1; } .tc-page .tx-msg:has(.tx-msg-edit:target) > .tx-msg-head { grid-column: 1 / -1; } .tc-page .tx-msg:has(.tx-msg-edit:target) > .tx-msg-view { grid-row: 2 / span 4; grid-column: 2; } .tc-page .tx-msg:has(.tx-msg-edit:target) > .tx-msg-view::before { display: block; margin-bottom: var(--s2); color: var(--muted); font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; content: "Сейчас у клиента"; } .tc-page .tx-msg:has(.tx-msg-edit:target) .tx-msg-view .tgp-text { max-height: none; } .tc-page .tx-msg:has(.tx-msg-edit:target) .tx-edit { display: none; } .tc-page .tx-msg-edit .form-field > label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); } .tc-page .tx-key code { color: var(--muted); font-size: var(--fs-1); font-weight: 400; overflow-wrap: anywhere; } .tc-page .tx-msg-edit textarea { min-height: 120px; font-size: var(--fs-3); line-height: 1.5; } .tc-page .tx-subs code { margin-right: var(--s1); } .tc-page .tx-factory { margin-top: var(--s3); } .tc-page .tx-factory-label { display: block; margin-bottom: var(--s1); color: var(--muted); font-size: var(--fs-2); font-weight: 600; } .tc-page .tx-factory .tgp-msg { background: var(--panel-soft); } .tc-page .tx-msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); } .tc-page .tx-reset { margin-left: auto; } /* «Ступени воронки»: строка — номер, название, «считать ли». */ .tc-page .tx-stages { max-width: 960px; } .tc-page .tx-stage-list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; } .tc-page .tx-stage { display: grid; grid-template-columns: 32px minmax(0, 1fr) 200px; align-items: start; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--border); } .tc-page .tx-stage.is-off .tx-stage-n { opacity: .5; } .tc-page .tx-stage-n { display: grid; place-items: center; width: 32px; height: 32px; margin-top: var(--s6); border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; } .tc-page .tx-stage .form-field { margin: 0; } .tc-page .tx-stage-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); } /* Общее «Текстов и цен»: вводная строка, возврат, кнопки в ряд. */ .tc-page .tc-lead { max-width: 960px; margin: 0 0 var(--s4); color: var(--muted); font-size: var(--fs-3); line-height: 1.5; } .tc-page .tc-viewbar { align-items: center; gap: var(--s4); padding-bottom: var(--s4); } .tc-page .tc-viewbar .tc-lead { flex: 1 1 auto; min-width: 0; margin: 0; } .tc-page .tc-back { margin: 0 0 var(--s3); } .tc-page .tc-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .tc-page .tc-help-top { margin: 0 0 var(--s3); } /* «Структура»: раскладка 16.4 не тронута — только вводная и кнопки общим набором (стрелки и «убрать» — квадратные кнопки с иконкой). */ .tc-page .st-intro { margin-bottom: var(--s5); } .tc-page .st-version { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--fs-3); } .tc-page .st-icon-btn { width: 36px; padding: 0; } /* «История структуры»: ширины колонок и «что изменилось» списком. */ .tc-page .tc-col-n { width: 130px; } .tc-page .tc-col-when { width: 150px; } .tc-page .tc-col-who { width: 14%; } .tc-page .tc-col-src { width: 14%; } .tc-page .tc-col-what { width: auto; } .tc-page .tc-col-act { width: 230px; } .tc-page .tc-history tr.is-current > td { background: var(--accent-soft); } .tc-page .tc-comment { margin-bottom: var(--s1); font-weight: 600; } .tc-page .tc-diff { margin: 0; padding-left: var(--s4); color: var(--muted); font-size: var(--fs-3); } .tc-page .tc-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); } /* «Выгрузка и загрузка»: отчёт проверки и два шага зонами. */ .tc-page .tc-report { margin-bottom: var(--s5); } .tc-page .tc-report h2, .tc-page .tc-warnings h2 { margin: 0 0 var(--s2); font-size: var(--fs-5); } .tc-page .tc-report p, .tc-page .tc-warnings p { margin: 0 0 var(--s2); } .tc-page .tc-report-grid { display: grid; gap: var(--s4); margin-bottom: var(--s5); } .tc-page .tc-changes { margin: 0; padding-left: var(--s5); line-height: 1.6; } .tc-page .tc-inline-form { margin: var(--s4) 0 0; } .tc-page .tc-apply { padding: var(--s4) var(--s5); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--accent-soft); } .tc-page .tc-apply p { margin: 0 0 var(--s3); font-size: var(--fs-3); } .tc-page .tc-apply form { margin: 0; } .tc-page.preview-page .tc-apply { margin-bottom: var(--s5); } .tc-page .tc-steps { padding: 0; } .tc-page .tc-links { display: grid; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; list-style: none; } .tc-page .tc-row { display: flex; gap: var(--s2); } .tc-page .tc-row select { flex: 1 1 auto; } .tc-page .tc-row-btn { min-height: 44px; } .tc-page .transfer-path { overflow-wrap: anywhere; } /* «Копии и присмотр»: состояние строками, журнал и реестр таблицами. */ .tc-page .bk-grid { padding: 0; margin-bottom: var(--s5); } .tc-page .bk-rows { display: grid; margin: 0 0 var(--s4); } .tc-page .bk-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .tc-page .bk-row dt { color: var(--muted); font-size: var(--fs-3); font-weight: 600; } .tc-page .bk-row dd { min-width: 0; margin: 0; line-height: 1.6; } .tc-page .bk-badges { display: flex; flex-wrap: wrap; gap: var(--s1); } .tc-page .bk-bad { display: block; color: var(--stop-fg); } .tc-page .bk-sub { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--fs-2); overflow-wrap: anywhere; } .tc-page .bk-err { color: var(--stop-fg); } .tc-page .bk-now { margin: 0; } .tc-page .bk-foot { margin-top: var(--s4); } .tc-page .bk-card { margin-bottom: var(--s5); } .tc-page .bk-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); } .tc-page .bk-card-head h2 { margin: 0; font-size: var(--fs-5); } .tc-page .bk-card-head .bk-bad { display: inline; } .tc-page .bk-reg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); } .tc-page .bk-reg-actions form { margin: 0; } .tc-page .bk-more > summary { padding: var(--s3) var(--s5); border-top: 1px solid var(--border); color: var(--accent); font-weight: 650; cursor: pointer; } .tc-page .bk-col-when { width: 160px; } .tc-page .bk-col-what { width: 140px; } .tc-page .bk-col-res { width: auto; } .tc-page .bk-col-where { width: 140px; } .tc-page .bk-col-size { width: 110px; } .tc-page .bk-col-file { width: 24%; } .tc-page .bk-col-order { width: 90px; } .tc-page .bk-col-arch { width: 26%; } .tc-page .bk-col-ref { width: 16%; } @media (max-width: 760px) { .tc-page .tx-viewbar { flex-direction: column; align-items: stretch; } .tc-page .tx-search { width: 100%; } .tc-page .tx-cards { grid-template-columns: minmax(0, 1fr); padding: var(--s3); } .tc-page .tx-group > summary { padding: var(--s3) var(--s4); } .tc-page .tx-msg:has(.tx-msg-edit:target) { display: flex; } .tc-page .tx-msg:has(.tx-msg-edit:target) > .tx-msg-view { order: 5; } .tc-page .tx-stage { grid-template-columns: 32px minmax(0, 1fr); } .tc-page .tx-stage-on { grid-column: 2; } .tc-page .tx-reset { margin-left: 0; } .tc-page .tc-viewbar { flex-direction: column; align-items: stretch; } .tc-page .tc-act { flex-direction: row; flex-wrap: wrap; align-items: center; } .tc-page .bk-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } .tc-page .tc-row { flex-direction: column; } } /* === КОНЕЦ БЛОКА «ТЕКСТЫ И ЦЕНЫ» === */ /* === ОБУЧЕНИЕ 18.2 — «Курсы»: список, карточка курса (модули и уроки), панели курса, модуля и урока === */ /* Вид — общие наборы: список (`list-*`), панель и окно (`.drawer`, `.modal`, открываются якорем), форма (`form-*`), «?» (`.help-tip`), плашка; пузырь «как в Телеграме» — предпросмотр 16.3 (`.tgp-*`); «История» и «Выгрузка и загрузка» — вид «Текстов и цен» (`.tc-page`). Здесь только раскладка. Каждый селектор начинается со скоупа `.courses-page` или `.course-page`; `@media` — внутри блока; общих компонентов блок не переопределяет. */ .courses-page .courses-viewbar { align-items: center; justify-content: space-between; } .courses-page .courses-viewbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); } .courses-page .courses-col-title { width: auto; } .courses-page .courses-col-size { width: 22%; } .courses-page .courses-col-access { width: 14%; } .courses-page .courses-col-students { width: 12%; } .courses-page .courses-col-when { width: 22%; } .course-page .course-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s5); } .course-page .course-head-main { flex: 1 1 480px; min-width: 0; } .course-page .course-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); color: var(--muted); font-size: var(--fs-3); } .course-page .course-desc { max-width: 960px; margin: 0; } .course-page .course-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: var(--s3) 0 0; overflow-wrap: anywhere; } .course-page .course-head-actions { display: flex; flex-wrap: wrap; gap: var(--s2); } .course-page .course-module { margin-bottom: var(--s4); scroll-margin-top: var(--s4); } .course-page .course-module.is-archived .course-module-head h2 { color: var(--muted); } .course-page .course-module-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); } .course-page .course-module-head h2 { margin: 0; font-size: var(--fs-5); overflow-wrap: anywhere; } .course-page .course-module-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .course-page .course-move { display: flex; gap: var(--s1); margin: 0; } .course-page .course-icon-btn { width: 36px; padding: 0; justify-content: center; } .course-page .course-col-n { width: 72px; } .course-page .course-col-title { width: auto; } .course-page .course-col-marks { width: 30%; } .course-page .course-col-size { width: 22%; } .course-page .course-col-act { width: 96px; } .course-page .course-lessons tr { scroll-margin-top: var(--s4); } .course-page .course-marks { display: flex; flex-wrap: wrap; gap: var(--s1); } /* Панели: форма обнимает тело и подвал — кнопки подвала отправляют её. */ .course-page .course-drawer-form { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; margin: 0; } .course-page .course-drawer-form .form-field { margin-bottom: var(--s3); } .course-page .course-drawer-form .form-toggle-row { margin-bottom: var(--s2); } .course-page .course-changes { margin: 0 0 var(--s3); } .course-page .course-change-list { margin: 0; padding-left: var(--s5); line-height: 1.6; } .course-page .course-lesson { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; gap: var(--s5); } .course-page .course-lesson-fields textarea { font-size: var(--fs-3); line-height: 1.5; } .course-page .course-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1); margin: var(--s4) 0 var(--s2); font-size: var(--fs-4); } .course-page .course-button-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--s2); } .course-page .course-lesson-preview { display: grid; gap: var(--s3); position: sticky; top: 0; } .course-page .course-pv-title { margin: 0; padding: var(--s3) var(--s4); font-size: var(--fs-3); } .course-page .course-pv-note { margin: 0; padding: var(--s2) var(--s4) var(--s3); } .course-page .course-drawer-foot { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .course-page .course-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; gap: var(--s4); } @media (max-width: 980px) { .course-page .course-lesson { grid-template-columns: minmax(0, 1fr); } .course-page .course-lesson-preview { position: static; } } @media (max-width: 760px) { .courses-page .courses-viewbar { flex-direction: column; align-items: stretch; } .course-page .course-module-head { padding: var(--s3) var(--s4); } .course-page .course-button-row { grid-template-columns: minmax(0, 1fr); } .course-page .course-previews { grid-template-columns: minmax(0, 1fr); } } /* === КОНЕЦ БЛОКА «ОБУЧЕНИЕ» === */ /* === МЕДИА 18.3 — «Обучение → Медиа»: список, панель медиа, части-медиа урока и обложка === */ /* Раскладка экранов; миниатюра и окно — общий компонент выше. Каждый селектор — в скоупе `.media-page` или `.course-page`; общих компонентов блок не переопределяет. */ .media-page .media-viewbar { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); } .media-page .media-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .media-page .media-filters-sep { width: 1px; height: var(--s5); margin: 0 var(--s1); background: var(--border); } .media-page .media-viewbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .media-page .media-send-all { display: flex; align-items: center; gap: var(--s1); margin: 0; } .media-page .media-rebind { display: grid; gap: var(--s2); } .media-page .media-rebind p { margin: 0; } .media-page .media-rebind-actions { display: flex; flex-wrap: wrap; gap: var(--s2); } .media-page .media-col-thumb { width: 124px; } .media-page .media-col-n { width: 72px; } .media-page .media-col-title { width: auto; } .media-page .media-col-len { width: 120px; } .media-page .media-col-where { width: 30%; } .media-page .media-col-file { width: 150px; } .media-page .media-thumb-cell { padding-top: var(--s2); padding-bottom: var(--s2); } .media-page .media-kind { display: block; font-size: var(--fs-2); } .media-page .media-uses, .course-page .media-uses { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); } .media-page .media-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .media-page .media-panel-pic { display: flex; } .media-page .media-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; } .media-page .media-facts dt { color: var(--muted); font-size: var(--fs-2); } .media-page .media-facts dd { margin: 0; overflow-wrap: anywhere; } .media-page .media-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); } .media-page .media-inline input { min-width: 0; width: 100%; } .media-page .media-panel-foot { grid-template-columns: minmax(0, 1fr); } .media-page .media-del-note { font-size: var(--fs-2); } /* Части-медиа в панели урока: миниатюра, номер и подпись, «убрать». */ .course-page .course-media-part { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--s3); align-items: start; margin-bottom: var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius-sm); } .course-page .course-media-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s2); font-size: var(--fs-3); } .course-page .course-media-part textarea { font-size: var(--fs-3); } .course-page .course-media-add { display: grid; gap: var(--s2); margin: 0 0 var(--s3); padding: var(--s3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); } .course-page .course-media-actions { display: flex; flex-wrap: wrap; gap: var(--s2); } .course-page .course-media-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); } .course-page .course-media-pick form { display: grid; gap: var(--s1); margin: 0; } .course-page .course-media-pick .course-media-pick-name { font-size: var(--fs-2); overflow-wrap: anywhere; } .course-page .course-cover { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--s3); align-items: center; } .course-page .course-head-cover { flex: 0 0 200px; } .course-page .course-media-count { white-space: nowrap; } @media (max-width: 760px) { .media-page .media-viewbar { flex-direction: column; align-items: stretch; } .media-page .media-facts { grid-template-columns: minmax(0, 1fr); } .course-page .course-media-part { grid-template-columns: minmax(0, 1fr); } .course-page .course-cover { grid-template-columns: minmax(0, 1fr); } } /* === КОНЕЦ БЛОКА «МЕДИА» === */ /* === ДОСТУП 18.4 — тарифы курса, доступ к курсу в заказе и у клиента === */ /* Вкладка «Тарифы» карточки курса, окно «Выдать доступ», блок «Доступ к курсу» карточки заказа и вкладка «Доступ к курсам» карточки клиента. Вид — общие наборы (список, панель и окно якорем, форма, плашка) и вид самих карточек; здесь только раскладка. Каждый селектор — в скоупе `.course-page`, `.order-v18-page` или `.client-card-page`; общих компонентов блок не переопределяет. */ .course-page .course-col-tariff { width: auto; } .course-page .course-col-price { width: 132px; } .course-page .course-col-days { width: 140px; } .course-page .course-col-modules { width: 22%; } .course-page .course-col-calls { width: 104px; } .course-page .course-col-state { width: 120px; } .course-page .course-col-tact { width: 260px; } .course-page .course-tariff-desc { display: block; margin-top: var(--s1); font-size: var(--fs-2); } .course-page .course-tariff-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s2); } .course-page .course-tariff-modules { display: grid; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; border: 0; } .course-page .course-tariff-modules legend { margin-bottom: var(--s2); padding: 0; font-weight: 600; } .course-page .course-tariff-module { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--fs-3); } .course-page .course-tariff-toggle { display: grid; gap: var(--s2); } .course-page .course-grant-search { display: grid; gap: var(--s2); } .course-page .course-grant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); } .course-page .course-grant-row input { min-width: 0; width: 100%; } .course-page .course-grant-found { display: grid; gap: var(--s2); max-height: 50vh; overflow: auto; } .course-page .course-grant-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); margin: 0; padding: var(--s2) 0; border-bottom: 1px solid var(--border); } .course-page .course-grant-who { display: grid; justify-items: start; gap: var(--s1); min-width: 0; } .course-page .course-grant-warn { max-width: 100%; white-space: normal; } .order-v18-page .order-course-kv + .order-course-kv { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); } .client-card-page .client-courses td:last-child { text-align: right; } @media (max-width: 760px) { .course-page .course-tariff-act { justify-content: flex-start; } .course-page .course-grant-row { grid-template-columns: minmax(0, 1fr); } } /* === КОНЕЦ БЛОКА «ДОСТУП» === */ /* ОТМЕТКА «ТЕКСТ НЕЙРОСЕТИ» (18.6, `_ai.html`). Маленькая плашка в строку с текстом, а не кнопка: красная — написала нейросеть, жёлтая — переработала текст автора. Цвета — токены темы. */ .ai-mark { display: inline-flex; align-items: center; padding: 0 var(--s2); border-radius: 999px; font-size: var(--fs-1); font-weight: 700; line-height: 1.6; vertical-align: middle; white-space: nowrap; cursor: help; } .ai-mark.is-new { background: var(--stop-bg); color: var(--stop-fg); } .ai-mark.is-edited { background: var(--warn-bg); color: var(--warn-fg); } .ai-legend { margin: 0 0 var(--s2); } /* ОБУЧЕНИЕ → ТЕСТЫ (18.6). Скоуп — `.tests-page` (список) и `.test-page` (карточка); часть «тест» в уроке курса — `.course-test-part`. */ .tests-page .tests-places, .test-page .tests-places { list-style: none; margin: 0; padding: 0; } .tests-page .tests-places li, .test-page .tests-places li { margin: 0 0 var(--s1); } .test-page .test-chip { display: inline-block; margin: 0 var(--s2) var(--s1) 0; padding: 0 var(--s2); border-radius: 999px; background: var(--row-hover); white-space: nowrap; } .test-page .test-qtext { margin: var(--s1) 0; font-weight: 600; } /* 18.9.2: тест вне курса — ссылка, слова, кнопки после итога. */ .test-page .test-outside .course-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: 0; overflow-wrap: anywhere; } .test-page .test-outside-line { margin: var(--s2) 0 0; overflow-wrap: anywhere; } .test-page .test-options, .test-page .test-rules { margin: 0; padding-left: 1.4em; } .test-page .test-options li, .test-page .test-rules li { margin: 0 0 var(--s1); } .test-page .test-acts { color: var(--muted); } .test-page .test-rule-text summary { cursor: pointer; color: var(--muted); } .test-page .test-rule-text .tgp-chat { margin-top: var(--s1); } .course-page .course-test-part { margin: var(--s2) 0; } /* === ОБУЧЕНИЕ 18.7 — «Ученики», «Статистика» курса, правка текстов теста, «Курсы» клиента, «Заказы» и «Медиа» под курсы, Главная инфобиза === */ /* Вид — общие наборы (список, чипы, плашка, панель якорем, полоска аналитики); здесь только раскладка. Каждый селектор — в скоупе страницы (`.course-page`, `.students-page`, `.test-page`, `.client-card-page`, `.orders-page`, `.media-page`, `.dashboard-page`). Цвета — токены темы. */ .course-page .students-viewbar, .students-page .students-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .course-page .students-chips, .students-page .students-chips, .students-page .students-courses { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .students-page .students-courses { margin: 0 0 var(--s3); } .course-page .students-chips-sep, .students-page .students-chips-sep { color: var(--muted); } .course-page .students-chips-sep:empty, .students-page .students-chips-sep:empty { width: var(--s3); } .course-page .students-nick, .students-page .students-nick { display: block; font-size: var(--fs-2); } .course-page .students-test + .students-test, .students-page .students-test + .students-test { margin-top: var(--s1); } .course-page .students-table td, .students-page .students-table td { overflow-wrap: anywhere; } .course-page .students-table .badge, .students-page .students-table .badge { max-width: 100%; white-space: normal; text-align: left; } .course-page .cstat-card { margin-bottom: var(--s4); padding: var(--s4); } .course-page .cstat-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); } .course-page .cstat-head h2 { margin: 0 0 var(--s1); font-size: var(--fs-5); } .course-page .cstat-head p { margin: 0; } .course-page .cstat-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .course-page .cstat-period-title { font-weight: 600; } .course-page .cstat-total { margin: 0 0 var(--s3); font-size: var(--fs-4); } .course-page .cstat-total b { font-size: var(--fs-6); } .course-page .cstat-chart { overflow-x: auto; } .course-page .cstat-chart .chart { min-width: 640px; } .course-page .cstat-table { margin-top: var(--s3); } .course-page .cstat-table summary { cursor: pointer; color: var(--muted); } .course-page .cstat-tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .course-page .cstat-tile { display: grid; gap: var(--s1); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; } .course-page .cstat-tile:hover { background: var(--row-hover); } .course-page .cstat-tile span { color: var(--muted); font-size: var(--fs-3); } .course-page .cstat-tile b { font-size: var(--fs-6); } .course-page .cstat-tile.is-muted b { color: var(--muted); } .course-page .cstat-card .is-total td { font-weight: 600; } .course-page .cstat-bar-col { width: 34%; } .course-page .cstat-funnel .an-bar { display: block; width: 100%; height: 10px; } .course-page .cstat-funnel .an-bar-track { fill: var(--border); } .course-page .cstat-funnel .an-bar-fill { fill: var(--accent); } .course-page .cstat-note { margin: var(--s3) 0 0; font-size: var(--fs-2); } .test-page .test-pen { display: inline-flex; vertical-align: middle; } .test-page .test-pen .ic { width: 14px; height: 14px; } .test-page .test-verified { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); } .test-page .test-answers li { margin: 0 0 var(--s2); } .client-card-page .client-course-facts { display: grid; gap: var(--s2) var(--s4); margin: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .client-card-page .client-course-facts dt { color: var(--muted); font-size: var(--fs-2); } .client-card-page .client-course-facts dd { margin: 0; overflow-wrap: anywhere; } .client-card-page .client-courses + .client-courses { margin-top: var(--s4); } .orders-page .orders-access-debt { display: inline-block; margin-top: var(--s1); white-space: normal; } /* 18.9.2: следующая часть курса у строки «Долгов» и на карточке заказа. */ .orders-page .orders-next-part { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--fs-2); white-space: normal; } .orders-page .orders-next-part.is-late { color: var(--stop-fg); } .order-v18-page .order-next-part-fields { margin: 0; padding: 0; border: 0; } .order-v18-page .order-next-part-fields legend { margin: 0 0 var(--s2); font-weight: 600; } .media-page .media-uses-n { display: inline-block; min-width: 1.5em; margin-right: var(--s1); } .media-page .media-sort { white-space: nowrap; } .dashboard-page .dashboard-workspace.is-single { grid-template-columns: minmax(0, 1fr); } @media (max-width: 760px) { .course-page .cstat-head { flex-direction: column; } .course-page .cstat-bar-col { width: 25%; } } /* === КОНЕЦ БЛОКА «ОБУЧЕНИЕ 18.7» === */ /* --------------------------------------------------------------------- КАНАЛЫ 18.8 — «Сводка», «Ссылки», «Подписчики», «Импорт» (`.channels-page`) и блок «Аудитория за 2 недели» на Главной (`.dashboard-audience`). Только токены темы; сетка дней — та же `.cal-grid`, что календарь. --------------------------------------------------------------------- */ .channels-page .channels-places, .channels-page .channels-kinds, .dashboard-audience .dashboard-audience-places { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); } .channels-page .channels-places { margin: 0 0 var(--s3); } .dashboard-audience .dashboard-audience-places { margin: 0 0 var(--s3); } .channels-page .channels-period { margin: 0 0 var(--s3); } .channels-page .channels-period-span { margin: var(--s2) 0 0; font-size: var(--fs-2); } .channels-page .channels-note { display: flex; gap: var(--s2); align-items: flex-start; margin: 0 0 var(--s4); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); color: var(--text); font-size: var(--fs-2); } .channels-page .channels-note .ic { flex: none; color: var(--accent); } .channels-page .channels-kpi-note { font-size: var(--fs-1); } .channels-page .channels-two { margin: var(--s4) 0; } .channels-page .channels-size-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } .channels-page .channels-size-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s3); } .channels-page .channels-size-list .channels-size-how { grid-column: 1 / -1; font-size: var(--fs-1); color: var(--muted); } .channels-page .channels-big { margin: 0; font-size: var(--fs-5); font-weight: 600; } .channels-page .channels-known, .channels-page .channels-cross { margin: var(--s3) 0 0; } .channels-page .channels-buckets table { margin: 0 0 var(--s3); } .channels-page .channels-buckets-form { margin: 0; } .channels-page .channels-days, .channels-page .channels-chats { margin: 0 0 var(--s4); } .channels-page .board-head { display: flex; align-items: center; gap: var(--s2); } .channels-page .channels-url { word-break: break-all; font-size: var(--fs-2); } .channels-page .channels-raw td, .channels-page .channels-none td { color: var(--muted); } .channels-page .channels-raw td .channels-url { color: var(--text); } .channels-page .channels-archive { padding: var(--s3); } .channels-page .channels-archive summary { cursor: pointer; color: var(--muted); } .channels-page .channels-empty { padding: var(--s3); margin: 0; } .dashboard-audience .cal-item { text-decoration: none; } .dashboard-audience .aud-in .cal-name { color: var(--done-fg); font-weight: 600; } .dashboard-audience .aud-out .cal-name { color: var(--stop-fg); font-weight: 600; } .client-card-page .client-membership-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); } @media (min-width: 900px) { .channels-page .channels-links td:first-child, .channels-page .channels-links th:first-child { min-width: 15rem; } } /* 18.11.2: payment review stays inside the order card. */ .order-v18-page .order-payment-hash { overflow-wrap: anywhere; word-break: break-word; } .order-v18-page .order-payment-request { min-width: 0; padding-block: 1rem; } .order-v18-page .order-payment-request + .order-payment-request { border-top: 1px solid var(--border); } .order-v18-page .order-payment-review { display: grid; gap: .75rem; max-width: 38rem; } .order-v18-page .order-payment-review .order-v18-btn { justify-self: start; max-width: 100%; white-space: normal; }