/* ========================================================================== * ДОБАВЛЕНИЯ АДМИНКИ К ДИЗАЙН-СИСТЕМЕ * ========================================================================== * * Здесь лежит РОВНО ТО, ЧЕГО В `styk.css` ЕЩЁ НЕТ, и ни строчкой больше. * Дизайн-система одна на обе поверхности «Стыка»; править её ради приёмов, * которые сегодня нужны только оператору (сортировка списка, копирование * машинного номера, полоса сроков разбора), значило бы менять общий пакет из * одного приложения — и получить в кабинете партнёра правило, которого там * никто не заказывал. * * ТРИ ПРАВИЛА ЭТОГО ФАЙЛА: * * 1. НИЧЕГО НЕ ПЕРЕОПРЕДЕЛЯЕТСЯ. Ни одного селектора, который уже есть в * `styk.css`. Файл грузится вторым, и переопределение здесь было бы * тихой правкой чужого пакета — она пережила бы обновление дизайн-системы * и переспорила бы его. * 2. НИ ОДНОГО СВОЕГО ЦВЕТА, КЕГЛЯ И ОТСТУПА. Только переменные системы * (`--st-*`): второй набор значений расходится с первым на первой же * правке палитры, и расходится он в тёмной теме, где это замечают позже * всего. * 3. ЦЕЛЬ НАЖАТИЯ НЕ НИЖЕ 44 px по высоте на телефоне. Правило системы, * нарушенное на её собственных экранах (аудит 29.08: пресеты периода * 30 px, ссылки-номера 17 px); здесь оно соблюдается с самого начала. * * Когда эти приёмы приедут в `packages/design-system`, файл схлопывается до * пустого, а ссылка на него снимается одной строкой в `layout.ts`. */ /* ---- Счётчик просрочки в рельсе ---------------------------------------- `.st-rail__count` уже есть в системе — здесь только пометка просрочки. ЗНАКОМ, А НЕ ЦВЕТОМ: цветовая разница в тёмной теме садится первой, и правило системы «признак не цветовой» тут не имеет исключений. Полная фраза («ждёт 12, из них просрочено 5») уезжает в `title` и в скрытую подпись, которую читают вслух. */ .st-rail__count--overdue { color: var(--st-tone-alarm-ink); border-color: var(--st-tone-alarm-ink); } .st-rail__overdue { margin-left: 2px; font-weight: var(--st-weight-semibold); } /* ---- Полоса сроков разбора: СНЯТА 18.09.2026 ---------------------------- Здесь жили `.st-deadline*` — восемь селекторов и два медиазапроса под блок, которого в разметке нет НИ ОДНОГО. Блок, ради которого стили писались, сводка рисует таблицей `register` (`pages/summary.ts`), и стили к нему не относятся: они остались от прежней подачи и пережили её. Мёртвый стиль опаснее мёртвой кнопки тем, что его не видно глазами: он не мешает, не ломается и живёт годами, а правку в него однажды вносят всерьёз. -------------------------------------------------------------------------- */ /* ---- Сортировка списка -------------------------------------------------- ССЫЛКАМИ И НАД ТАБЛИЦЕЙ, А НЕ ЩЕЛЧКОМ ПО ЗАГОЛОВКУ КОЛОНКИ. Причина не в простоте. На телефоне таблицы нет вовсе — реестр рисуется карточками, и заголовков колонок, по которым можно щёлкнуть, там не существует. Сортировка, живущая в ``, на основном макете системы недоступна целиком. Полоса над списком работает в обоих видах и работает без единой строки скрипта: это обычные ссылки, их можно послать коллеге. ЦЕЛЬ НАЖАТИЯ — 44 px по высоте. Правило системы для телефона. */ .st-sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-2); padding: var(--st-space-2) 0; } .st-sort__label { color: var(--st-ink-muted); font-size: var(--st-text-caption); } .st-sort__link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--st-tap-target); padding: 0 var(--st-space-3); border: var(--st-border-hairline) solid var(--st-line-faint); border-radius: var(--st-radius-sm); color: var(--st-ink); font-size: var(--st-text-caption); text-decoration: none; } .st-sort__link:hover { border-color: var(--st-line); } /* НАЖАТЫЙ ПУНКТ ОТЛИЧАЕТСЯ НЕ ТОЛЬКО ЦВЕТОМ: у него стрелка направления и `aria-current`, который читается вслух. */ .st-sort__link[aria-current='true'] { border-color: var(--st-ink); font-weight: var(--st-weight-semibold); } .st-sort__dir { font-family: var(--st-font-mono); } /* ---- Копирование машинного номера --------------------------------------- Обёртка вокруг значения. `min-width: 0` обязателен: внутри лежит машинная строка в 26–36 знаков, и без него она распирает ячейку таблицы наружу — тот самый выезд вбок, который аудит намерил на четырёх экранах. */ .st-copyable { display: inline-flex; align-items: center; min-width: 0; gap: 2px; } /* ---- Кнопка ------------------------------------------------------------- ULID в 26 знаков и UUID в 36 выделяют пальцем на телефоне — и выделяют неверно. Кнопка стоит РЯДОМ с номером, а не вместо него: номер обязан остаться видимым и выделяемым, кнопка лишь избавляет от выделения. БЕЗ СКРИПТА КНОПКИ НЕТ ВОВСЕ. Она рисуется скриптом админки и вставляется только там, где `navigator.clipboard` есть: нарисованная в разметке, она осталась бы на странице мёртвой у того, у кого скрипт не выполнился, — а мёртвая кнопка хуже, чем её отсутствие. */ .st-copy { display: inline-flex; align-items: center; justify-content: center; min-width: var(--st-tap-target); min-height: var(--st-tap-target); margin-left: 4px; padding: 0 var(--st-space-2); border: var(--st-border-hairline) solid var(--st-line-faint); border-radius: var(--st-radius-sm); background: transparent; color: var(--st-ink-muted); font-family: var(--st-font-ui); font-size: var(--st-text-micro); line-height: 1; cursor: pointer; } .st-copy:hover { border-color: var(--st-line); color: var(--st-ink); } .st-copy[data-copied='true'] { border-color: var(--st-tone-done-edge); color: var(--st-ink); } /* В плотной таблице кнопка не имеет права раздвигать строку: там цель нажатия ограничена высотой строки, и это допустимо — таблица живёт на широком экране, где нажимают мышью, а не пальцем. */ .st-table .st-copy { min-width: 28px; min-height: 24px; } /* ---- Готовая команда оператора: прокрутка ВНУТРИ блока ------------------- ⚠ У ЭТОГО КЛАССА НЕ БЫЛО НИ ОДНОГО ПРАВИЛА ВООБЩЕ. `st-command` стоял в разметке экрана «Партнёр заведён» с 10.09.2026, а в таблицах стилей его не было — то есть блок вокруг команды был обычным `div` без единого ограничения. ЧЕМ ЭТО КОНЧИЛОСЬ, ИЗМЕРЕНО ПРИЁМКОЙ 11.09.2026 (дефект Д-1): команда `mint-key` — это 1183 точки моноширинного текста с `white-space: nowrap` внутри контейнера шириной 333, у которого `overflow: visible`. Наружу уезжала не строка, а ВСЯ СТРАНИЦА: `scrollWidth` 1215 при окне 390, то есть втрое. ПРОКРУТКА, А НЕ ПЕРЕНОС, И ЭТО РЕШЕНИЕ. Команду не читают — её копируют кнопкой и вставляют в терминал целиком. Перенос по любому знаку разорвал бы `--label="ТЕСТ ПРИЁМКА: песочница"` посреди кавычек, и человек, сверяющий глазами скопированное, увидел бы строку, которой не набирал. Ссылки и адреса — другое дело, они переносятся (`st-mono--wrap`): там разрыв ничего не портит, а прокрутка прятала бы хвост. `min-width: 0` ОБЯЗАТЕЛЕН. Без него блок внутри `flex`/`grid` берёт ширину содержимого, и `overflow-x` не срабатывает вовсе: прокручивать нечего, когда контейнер сам растянулся под строку. Та же строка стоит у `.st-copyable` выше и по той же причине. */ .st-command { max-width: 100%; min-width: 0; overflow-x: auto; /* Полоса прокрутки не должна наезжать на текст команды. */ padding-bottom: var(--st-space-2); } /* ---- Группа полей формы: `fieldset` обязан сжиматься --------------------- ⚠ `FIELDSET` — ЕДИНСТВЕННЫЙ ЭЛЕМЕНТ HTML С `min-width: min-content` ОТ БРАУЗЕРА, и снять это сокращённой записью нельзя: свойство не наследуется и не перекрывается ничем, кроме явного `min-width: 0`. Приёмка 11.09.2026 намерила на форме заведения партнёра: `FIELDSET` шириной 432 внутри окна 390, `scrollWidth` страницы 461. Тянет он за собой все поля разом — самое широкое из них и задаёт `min-content` всей группе. ⚠ ПРАВИЛО НЕ ОБЪЕДИНЯТЬ С `.st-command` ЧЕРЕЗ ЗАПЯТУЮ. Они чинят одинаковый симптом разными причинами: там строка шире блока, здесь блок не сжимается. Слитые в один селектор, они однажды разъедутся — и разъедутся молча. */ .st-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } /* ---- Ряд состояний ленты: перенос вместо прокрутки вбок ------------------ Аудит 29.08.2026, замер на 1440: «ряд из 11 состояний обрезан правым краем, „возврат подтверждён“ уходит за край. Внутренняя прокрутка есть, но признака её нет — человек не знает, что справа что-то есть». Прокрутка без видимого края прячет кнопки, о существовании которых не догадываются. У фильтров ленты кнопок одиннадцать, и последние из них — как раз редкие состояния, ради которых в ленту и заходят («возврат подтверждён», «истекла»). Перенос в две строки не прячет ничего. МОДИФИКАТОР, А НЕ ПРАВКА `.st-filters`. Прокрутка правильна там, где рядов мало и они короткие (пресеты периода в кабинете); здесь их одиннадцать. */ .st-filters--wrap { flex-wrap: wrap; overflow-x: visible; } /* На узком экране кнопка состояния — цель нажатия, а не строка текста. */ @media (max-width: 599px) { .st-filters--wrap .st-filter { min-height: var(--st-tap-target); } } /* ---- Дата в русском виде под полем периода ------------------------------- Аудит 29.08.2026: «Поля дат показывают 08/29/2026 — американский формат в русском интерфейсе… читается как небрежность в первую секунду». ПОЧЕМУ ЭТО НЕ ЧИНИТСЯ РАЗМЕТКОЙ. Формат нативного `` берётся из языка ИНТЕРФЕЙСА БРАУЗЕРА, а не из `lang` документа: ни атрибутом, ни стилем его не задать. Заменить поле своим текстовым значило бы потерять календарь и цифровую клавиатуру телефона — то есть чинить подпись ценой основного макета. Поэтому поле остаётся нативным, а под ним стоит выбранная дата, набранная по-русски. Что бы ни показал виджет, на экране есть дата в том виде, в каком её называют вслух и переносят в переписку. */ .st-date-shown { display: block; margin-top: 2px; color: var(--st-ink-muted); font-family: var(--st-font-mono); font-size: var(--st-text-caption); } /* ---- Цель нажатия у ссылок списка на телефоне ---------------------------- Аудит 29.08.2026: «ссылки-номера в таблицах 17 px» при правиле системы «цель нажатия на телефоне не ниже 44 px». ПОЧЕМУ ЭТО НЕ ЧИНИТСЯ `min-height`. Ссылка внутри строки — строчный элемент, а `min-height` на строчном не делает ничего вовсе: правило было бы написано, выглядело бы соблюдённым и не работало. Работает `inline-flex` с явной высотой. ТОЛЬКО НА УЗКОМ И ТОЛЬКО В КАРТОЧКАХ СПИСКА. На широком экране нажимают мышью, и раздутые строки там просто уменьшают число видимых записей; в карточке телефона высота строки и так задаётся содержимым. Полоса контекста («Ко всем партнёрам») попадает сюда же — это выход из партнёрского разреза, и промахиваться по нему человек не должен. */ @media (max-width: 599px) { .st-cards a, .st-context__out { display: inline-flex; align-items: center; min-height: var(--st-tap-target); } } /* ---- Полоса денег: строка сходимости ------------------------------------- Появилась 29.08.2026 вместе с тремя величинами сводки. СТРОКА ПЕЧАТАЕТСЯ ВСЕГДА, ВКЛЮЧАЯ НОЛЬ, и потому у неё два вида, а не один. Отчёт, в котором сходимость не показана, неотличим от отчёта, в котором её не проверяли, — значит «сошлось» обязано быть видимым утверждением. СОШЛОСЬ — ПРИГЛУШЁННАЯ СТРОКА, А НЕ ЗЕЛЁНАЯ ПЛАШКА. Зелёный в системе означает ровно одно — «выдано клиенту» (§12), и раздать его признаку нормы значит перестать его читать. Норма не требует внимания: она требует только возможности убедиться. НЕ СОШЛОСЬ — ТОН РАСХОЖДЕНИЯ И ШТРИХ СЛЕВА. Заливок в статусах система запрещает прямо, поэтому штрих, как у строки очереди и у полосы сроков. */ .st-check { margin: var(--st-space-3) 0 0; padding-left: var(--st-space-3); border-left: 3px solid transparent; } .st-check--ok { border-left-color: var(--st-line-faint); } .st-check--broken { border-left-color: var(--st-tone-alarm-edge); color: var(--st-tone-alarm-ink); } /* ---- Полоса денег: плотность --------------------------------------------- Владелец 29.08.2026: «UI неоптимальный. Слишком много места занимает». ПОЯСНЕНИЯ ПОД ЧИСЛАМИ НЕ ЗАНИМАЮТ ОТДЕЛЬНОЙ СТРОКИ ВЫСОТЫ. Подпись у величины обязана быть — число без подписи врёт, — но набрана она мелко и прижата к своему числу, а не отбита от него пустотой в целый шаг сетки. */ .st-figures .st-figure__note { margin-top: 2px; line-height: 1.3; } /* Пары «подпись — значение» под разложением идут плотнее обычного: это не карточка на чтение, а хвост таблицы, который просматривают глазами. */ .st-panel .st-facts .st-hint { display: block; margin-top: 1px; } /* ---- Полоса денег: плотность на телефоне --------------------------------- Владелец 29.08.2026: «слишком много места занимает». ТРИ ВЕЛИЧИНЫ СТОЯТ В РЯД И НА 390 ТОЖЕ. Сложенные в столбик, они занимают три экрана телефона на три числа — а это ровно те три числа, ради которых экран открывают. Суммы контура умещаются в треть ширины: разряды ставятся неразрывным пробелом и переносом не рвутся, а подпись под числом переносится штатно. ЭТО НЕ ОТМЕНА ПРАВИЛА «НЕ ЖМАТЬ КОЛОНКИ НА ТЕЛЕФОНЕ». Правило про ТАБЛИЦЫ, где в строке живёт запись целиком; здесь в ячейке одно число и одна подпись. */ @media (max-width: 599px) { .st-panel .st-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } .st-panel .st-figure { min-width: 0; } /* Подпись под числом на телефоне мельче и в две строки: она объясняет, а не читается подряд. Обрезать её нельзя — число без подписи врёт. */ .st-panel .st-figures .st-figure__note { font-size: var(--st-text-caption); } /* ИСКЛЮЧЕНИЕ ИЗ ПРАВИЛА ВЫШЕ — ИТОГИ СВОДКИ В ОДИН СТОЛБЕЦ (15.09.2026). Полоса денег контура держит три КОРОТКИХ контурных числа в ряд и на 390 — они умещаются в треть ширины. Итоги за период (`st-figures--wide`) — другое: оборот и прибыль считаются за окно и бывают любой длины, и в трети ширины 390 рубль уезжал бы за край плитки МОЛЧА (та же беда, что чинит `1fr` в дизайн-системе, только там её перебивает правило плотности выше по этому файлу). Здесь оно перебивается обратно — но только для широких плиток итогов, а не для короткой полосы денег. Селектор специфичнее (`--wide`), поэтому выигрывает без `!important`. Дизайн-система уже переносит рамку плитки со стороны на низ на ≤640 — переопределять её тут нечем. */ .st-panel .st-figures--wide { grid-template-columns: 1fr; } } /* Объяснение очереди под её названием: подписью, не основным кеглем. Оно отвечает на вопрос «чем эта очередь отличается от соседней» и читается один раз, а место занимало бы в каждой строке. */ .st-queue__what { display: block; margin-top: 2px; max-width: 56ch; line-height: 1.35; } /* Объяснение равенства двух величин вознаграждения: строкой во всю ширину, а не абзацем внутри плитки шириной 110 px. */ .st-money-why { margin: var(--st-space-2) 0 0; max-width: 78ch; } /* ---- Счётчик проектного предела на сводке -------------------------------- Предел один на всех партнёров, и когда он исчерпан, приём встаёт у всех разом. Поэтому счётчик стоит на первом экране дня, а не только в своём разделе, — но стоит СТРОКОЙ, а не панелью: он отвечает на вопрос «работаем ли мы прямо сейчас», и ответ на него короткий. ТОН — ШТРИХОМ У ЛЕВОГО КРАЯ, как у строки очереди и как было у полосы сроков. Заливки в статусах дизайн-система запрещает прямо (§12). */ .st-turnover { padding: var(--st-space-2) 0 var(--st-space-3) var(--st-space-3); border-left: 3px solid transparent; border-bottom: var(--st-border-hairline) solid var(--st-line-faint); margin-bottom: var(--st-space-3); } .st-turnover--calm { border-left-color: var(--st-line-faint); } .st-turnover--near { border-left-color: var(--st-tone-act-edge); } .st-turnover--stop { border-left-color: var(--st-tone-alarm-edge); } .st-turnover__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-2); margin-bottom: var(--st-space-2); font-weight: var(--st-weight-semibold); } /* Название ведёт в раздел предела — значит цель нажатия. `min-height` на строчном элементе не делает ничего, поэтому `inline-flex`. */ .st-turnover__head > a { display: inline-flex; align-items: center; min-height: var(--st-tap-target); } /* Четыре величины в строку на широком и в две колонки на телефоне: это счётчик, который читают взглядом, а не таблица, которую изучают. */ .st-turnover .st-facts { grid-template-columns: auto auto auto auto; justify-content: start; gap: var(--st-space-1) var(--st-space-5); } @media (max-width: 599px) { .st-turnover .st-facts { grid-template-columns: auto auto; gap: var(--st-space-1) var(--st-space-4); } } /* ---- Сегментный выбор периода на сводке ---------------------------------- Продуктовый переключатель окна итогов и разреза: Сегодня / Неделя / Месяц / Всё время. В `styk.css` `.st-period` — это подбор ДАТ (пресеты плюс поля от/до) у ленты; здесь другой прибор — четыре жёстких окна, и заводить его отдельным классом честнее, чем растягивать чужой. ССЫЛКАМИ, А НЕ КНОПКАМИ. Страница серверная: окно живёт в адресе, ссылку можно послать коллеге, она переживает перезагрузку и работает без скрипта — тем же приёмом, что сортировка реестра. Один блок рамки, сегменты разделены волосяной вертикалью — как ячейки плиток итогов; текущий помечен швом снизу и подложкой акцента, а не только цветом текста (в тёмной теме он сел бы первым), и несёт `aria-current`, который читают вслух. ЦЕЛЬ НАЖАТИЯ — 44 px по высоте: правило системы для телефона, здесь соблюдённое и на широком. Шапка панели переносит (`flex-wrap` в `styk.css`), поэтому на узком экране сегмент опускается под заголовок целиком, а не выезжает вбок — проверено замером на 390. */ .st-seg { display: inline-flex; max-width: 100%; border: var(--st-border-hairline) solid var(--st-line-strong); border-radius: var(--st-radius-sm); overflow: hidden; } .st-seg__item { display: inline-flex; align-items: center; justify-content: center; min-height: var(--st-tap-target); padding: 0 var(--st-space-3); border-left: var(--st-border-hairline) solid var(--st-line-faint); color: var(--st-ink-muted); font-size: var(--st-text-caption); text-decoration: none; white-space: nowrap; } .st-seg__item:first-child { border-left: 0; } .st-seg__item:hover { color: var(--st-ink); } /* Нажатое окно — швом снизу и подложкой акцента, а не одним цветом. */ .st-seg__item[aria-current='page'] { background: var(--st-seam-wash); color: var(--st-ink); font-weight: var(--st-weight-medium); box-shadow: inset 0 -2px 0 var(--st-seam); } /* ------------------------------------------------------------------------ */ /* Шов сверки: объяснённая разница (17.09.2026) */ /* ------------------------------------------------------------------------ */ /* ТРЕТЬЕ ПОЛОЖЕНИЕ ШВА, КОТОРОГО НЕТ В КАБИНЕТЕ, И ПОТОМУ ОНО ЗДЕСЬ. У партнёра разница либо есть, либо нет. У оператора бывает третье: разница есть, и она ОБЪЯСНЕНА — например, разным округлением банковских 0,7 % (мы отбрасываем остаток, провайдер округляет; замер 17.09.2026 — две копейки на двух платежах). Такой шов не красный и не сомкнутый: стойки спокойные, а РАЗРЫВ ОТКРЫТ и число в нём стоит. Спрятать сумму потому, что она мала, — это ровно тот дефект, из-за которого проверка перестаёт уметь краснеть. Подпись под швом занимает всю ширину: `.st-seam` — сетка из трёх колонок, и четвёртый ребёнок без этого встал бы под левой стороной. */ .st-seam--told .st-seam__stub { background: var(--st-seam); } .st-seam--told .st-seam__verdict { color: var(--st-ink-muted); background: var(--st-surface-sunken); } .st-seam__note { grid-column: 1 / -1; margin: 0; text-align: center; } /* ------------------------------------------------------------------------ */ /* Свод разбора расхождения: период и подзаголовок (17.09.2026) */ /* ------------------------------------------------------------------------ */ /* Форма периода — три поля в строку на широком и в столбец на телефоне. Отдельным классом, а не правкой `.st-form`: та форма общая на обе поверхности, и «две даты рядом» нужны ровно здесь. */ .st-form--period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--st-space-3); } .st-form--period .st-field { flex: 0 1 auto; min-width: 0; } /* Подзаголовок внутри панели: лента решений стоит под сводом и обязана быть отделена от него словом, а не пустым местом. */ .st-subhead { margin: var(--st-space-5) 0 var(--st-space-2); font-size: var(--st-text-caption); font-weight: var(--st-weight-semibold); letter-spacing: var(--st-tracking-label); text-transform: uppercase; color: var(--st-ink-faint); } /* ========================================================================== ЛЕНТА ЗАЯВОК: ОТБОР В ДВА СТОЛБЦА, ДЕЙСТВУЮЩИЕ УСЛОВИЯ, ЖИВАЯ ЛЕНТА (18.09.2026) ========================================================================== Требование владельца дословно: «используй лэйаут с несколькими столбцами, где это будет логично. Списки заявок и денег — на всю ширину, там и так таблицы. А то что не в таблицах — по разным колонкам в UI». Здесь ровно это: органы управления слева, три числа справа, а сама лента ниже и во всю ширину — таблице колонки не нужны, ей нужна ширина. */ /* ДВА СТОЛБЦА ТОЛЬКО ТАМ, ГДЕ ОНИ ПОМЕЩАЮТСЯ, И ГРАНИЦА — 1000 px, А НЕ 768. Правый столбец несёт три денежных числа с подписью «по всему отбору»; на 900 px он сжимается до ширины, на которой «1 481 200,00 ₽» переносится посреди разрядов — то есть деньги начинают читаться неверно. Лучше одна колонка, чем две с перенесённой суммой. ⚠ `min-width: 0` НА ОБОИХ СТОЛБЦАХ. Урок уже куплен дважды в этом репозитории (`.st-toolbar__filters`, `.st-feed-filters`): у элемента сетки `min-width` по умолчанию `auto`, он не даёт себе стать уже содержимого, и ряд состояний с собственной прокруткой распирает сначала панель, потом страницу, и вбок уезжает ВЕСЬ документ вместе с рельсом. На снимке это не видно — находится только замером. */ .st-feed-controls { display: grid; gap: var(--st-space-4); min-width: 0; } .st-feed-controls__main, .st-feed-controls__side { min-width: 0; } @media (min-width: 1000px) { .st-feed-controls { grid-template-columns: minmax(0, 1fr) minmax(260px, 20rem); align-items: start; } } .st-feed-controls__main { display: flex; flex-direction: column; gap: var(--st-space-3); } /* ---- Поиск по номеру: первый и крупный --------------------------------- Поле и кнопка в один ряд, поле тянется. На телефоне ряд остаётся рядом: кнопка «Найти» — два слова, места ей хватает, а перенос её под поле добавил бы к самому частому действию экрана лишнюю строку прокрутки. */ .st-feed-search { display: flex; flex-direction: column; gap: var(--st-space-1); min-width: 0; } .st-feed-search__row { display: flex; gap: var(--st-space-2); min-width: 0; } .st-feed-search__row .st-input { flex: 1 1 auto; min-width: 0; } /* ---- Разделитель внутри ряда состояний --------------------------------- Отделяет «Любое» и «Требуют разбора» от одиннадцати отдельных состояний: первые два — ответы на вопрос, остальные — перечисление. Волосяная линия, а не отступ: отступ в переносящемся ряду теряется на второй строке. */ .st-filters__split { align-self: stretch; width: var(--st-border-hairline); margin: var(--st-space-2) var(--st-space-1); background: var(--st-line); } /* ---- Нажатый фильтр-ССЫЛКА --------------------------------------------- Кнопки состояний стали ссылками (одна ссылка несёт весь отбор целиком), и `aria-pressed` у ссылки не бывает. Признак — свой класс; вид тот же, что у нажатой кнопки в системе, и берётся он теми же переменными: второй набор значений разошёлся бы с первым в тёмной теме, где это замечают позже всего. */ .st-filter.is-on { border-left-color: var(--st-seam); background: var(--st-seam-wash); color: var(--st-ink); font-weight: var(--st-weight-medium); } a.st-filter { text-decoration: none; } /* ---- Складка «ещё условия» --------------------------------------------- ЦЕЛЬ НАЖАТИЯ 44 px, как и у всего остального на этом экране: строка-заголовок складки на телефоне нажимается пальцем, а не мышью. */ .st-more { min-width: 0; } .st-more__head { display: flex; align-items: center; min-height: var(--st-tap-target); color: var(--st-ink-muted); font-size: var(--st-text-caption); cursor: pointer; } .st-more__head:hover { color: var(--st-ink); } .st-more[open] .st-more__head { margin-bottom: var(--st-space-3); color: var(--st-ink); } /* ---- Строка действующих условий ---------------------------------------- Читается как предложение, а не как ряд плиток: «Контур: боевые · Партнёр: Цифровой Контур ×». Крупная плитка на каждое условие — первый из признаков сгенерированного интерфейса (DESIGN.md §3), и здесь она была бы вдобавок неверна по смыслу: условие отбора — это слово, а не показатель. */ .st-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-2); margin-top: var(--st-space-3); padding-top: var(--st-space-3); border-top: var(--st-border-hairline) solid var(--st-line-faint); font-size: var(--st-text-caption); } .st-chip { display: inline-flex; align-items: center; gap: var(--st-space-1); padding: 2px var(--st-space-2); border: var(--st-border-hairline) solid var(--st-line); border-radius: var(--st-radius-sm); background: var(--st-surface); } .st-chip__label { color: var(--st-ink-faint); } .st-chip__label::after { content: ':'; } .st-chip__value { color: var(--st-ink); } /* КРЕСТИК — ЦЕЛЬ НАЖАТИЯ 44 px НА ТЕЛЕФОНЕ, и добирается она полем, а не размером знака: знак крупнее ломал бы строку по высоте. `line-height: 1` держит саму строку короткой на широком экране. */ .st-chip__drop { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; margin-right: calc(var(--st-space-2) * -1 + 2px); color: var(--st-ink-faint); line-height: 1; text-decoration: none; } .st-chip__drop:hover { color: var(--st-tone-alarm-ink); } .st-chip__reset { color: var(--st-ink-muted); } @media (max-width: 640px) { .st-chip__drop { min-width: var(--st-tap-target); min-height: var(--st-tap-target); margin-right: calc(var(--st-space-2) * -1); } } /* ========================================================================== ЖИВАЯ ЛЕНТА ========================================================================== */ /* ---- Признак «живая» / «обновляется вручную» --------------------------- ⚠ СЛОВОМ, А НЕ ТОЛЬКО ТОЧКОЙ. Цветная точка без подписи — это признак, который читают трое из десяти и ни один дальтоник; разница «зелёная» против «серой» в тёмной теме садится первой. Точка здесь — украшение при слове, и помечена `aria-hidden`. */ .st-live { display: inline-flex; align-items: center; gap: var(--st-space-2); color: var(--st-ink-muted); font-size: var(--st-text-caption); } .st-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-ink-faint); } .st-live[data-live-state='on'] .st-live__dot { /* ⚠ ЦВЕТ ИЗ ПАЛИТРЫ СИСТЕМЫ, А НЕ «ЗЕЛЁНЫЙ». Тона «всё хорошо» в палитре «Стыка» нет и не заводится ради точки: свой шестнадцатеричный цвет здесь разошёлся бы с палитрой на первой же её правке, и разошёлся бы в тёмной теме. `--st-seam` — тот же цвет, которым система помечает выбранное. */ background: var(--st-seam); } /* СРЕДНЕЕ СОСТОЯНИЕ — ПОЛАЯ ТОЧКА, А НЕ ТРЕТИЙ ЦВЕТ (20.09.2026). Поток не доехал, работает страховочный опрос: изменения придут, но не мгновенно. Третий цвет пришлось бы либо завести свой (чего этот файл не делает), либо занять `--st-warn` — а предупреждать тут не о чем: экран работает. Обводка без заливки читается как «то же самое, но слабее», и читается одинаково в обеих темах и при любом зрении. Главное слово всё равно стоит рядом буквами. */ .st-live[data-live-state='slow'] .st-live__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--st-seam); } /* ПУЛЬС ТОЛЬКО У ЖИВОЙ, И ТОЛЬКО ЕСЛИ ЧЕЛОВЕК НЕ ПРОСИЛ УБРАТЬ ДВИЖЕНИЕ. Постоянно мигающая точка на экране, за которым сидят часами, — это то, на чём устают; `prefers-reduced-motion` здесь не формальность. */ @media (prefers-reduced-motion: no-preference) { .st-live[data-live-state='on'] .st-live__dot { animation: st-live-pulse 2.4s ease-in-out infinite; } } @keyframes st-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---- Полоса «пришли новые» --------------------------------------------- ⚠ ПЛАВАЕТ У НИЖНЕГО КРАЯ ОКНА, А НЕ ЛИПНЕТ К ВЕРХУ СВОЕЙ ПАНЕЛИ. Первый вариант был именно липким к верху (`position: sticky; top: 0`), и браузер показал, чем он плох: шапка админки САМА липкая и стоит на тех же нулевых координатах, поэтому полоса уезжала ПОД НЕЁ и человек, ушедший вниз по ленте, не видел её вовсе. Проверка при этом была зелёной — она смотрела, что элемент показан, а не что его ВИДНО. Признак теперь меряет то, ради чего заведён: прямоугольник полосы против окна и попадание нажатия по ней. Высоту шапки подставить было нельзя: она разная на телефоне и на столе, и вычитание её из `top` завело бы третье место, где записан её размер. НИЖНИЙ КРАЙ, А НЕ ВЕРХНИЙ, И ЭТО НЕ ТОЛЬКО ОБХОД ШАПКИ: на телефоне большой палец достаёт до низа экрана, а до верха — нет, а именно там по этой кнопке и будут нажимать чаще всего. ⚠ `pointer-events` НА ОБЁРТКЕ СНЯТЫ. Полоса тянется во всю ширину окна и поверх ленты: не сними мы их, невидимая полоса перехватывала бы нажатия по нижним строкам таблицы — и строка просто «не открывалась бы», без единого признака почему. */ .st-livebar { position: fixed; left: 0; right: 0; bottom: var(--st-space-4); z-index: var(--st-z-sticky); display: flex; justify-content: center; pointer-events: none; } /* ОТДЕЛЯЕТСЯ ОБВОДКОЙ, А НЕ ТЕНЬЮ. Тень пришлось бы задать своим цветом — а своих цветов в этом файле нет по первому же его правилу, и в тёмной теме такая тень не читается вовсе. Обводка цветом линии системы работает в обеих. */ .st-livebar > * { pointer-events: auto; outline: var(--st-border-edge) solid var(--st-line-strong); outline-offset: 1px; } .st-livebar[hidden] { display: none; } /* ---- Подсветка свежей строки ------------------------------------------- ⚠ ГАСНЕТ САМА ЗА ШЕСТЬ СЕКУНД. Признак, который не гаснет, через час превращает половину ленты в «новое» — то есть перестаёт что-либо означать. Шесть секунд — столько, чтобы глаз успел найти строку, вернувшись к экрану после короткого отвлечения. ПОДСВЕТКА — ФОН, А НЕ ЦВЕТ БУКВ. Цвет букв в строке уже занят: им рисуются деньги и состояние, и перекрасить их значило бы сказать о заявке неправду (`st-row--alarm` тут же рядом). Фон ничего не перебивает. При `prefers-reduced-motion` подсветка не мигает, а просто стоит и исчезает — без анимации: правило системы, и оно не про красоту. */ [data-fresh] { background: var(--st-seam-wash); } @media (prefers-reduced-motion: no-preference) { [data-fresh] { animation: st-fresh-fade 6s ease-out forwards; } } @keyframes st-fresh-fade { 0%, 40% { background: var(--st-seam-wash); } 100% { background: transparent; } }