/* === Десктоп: рабочее место, за которым сидят 73 % времени (промпт 53) === * * За две недели логов: 340 заходов с Macintosh против 124 с iPhone. При этом * два месяца проектировали ТЕЛЕФОН — 29 экранов получили мобильный слой, а * десктопная половина осталась ровно такой, какой была до всего редизайна: * мобильный слой лежит ПОВЕРХ, ниже 768 px десктоп прячется, выше не * показывается мобильный. * * Замер живой страницы `/rentals?desk=1` на 1280×800 (04.08.2026): * * было: строка 85 px, первая строка на 430 px → 5 строк на экране * стало: строка 44 px, первая строка на ~190 px → 13 строк * * ⚠️ Макет обещал «9 строк сейчас, 17 после». Реальность оказалась хуже * его оценки: пять. Плотность, рассчитанная на палец, за компьютером * заставляет прокручивать там, где влезало бы втрое больше. * * ВЕСЬ файл лежит под `@media (min-width: 768px)` — ниже начинается * мобильный слой, и он не должен заметить этих правил вовсе. */ @media (min-width: 768px) { /* --- Полоса контента --------------------------------------------------- Списки живут широко (1600), формы и текст — узко (720): строка длиной в монитор физически трудно читается. Прежние 1440 остаются нижней границей, ничего не ломается. */ .u-page { max-width: var(--u-content); margin: 0 auto; } .u-page--narrow { max-width: 720px; } /* --- Плотность строки списка ------------------------------------------ Главный источник потерянного места. 85 px на строку — это размер, рассчитанный на палец; за компьютером есть мышь. */ .u-row { min-height: 44px; padding: 7px 12px 7px 10px !important; gap: 10px; } .u-row-line1 { line-height: 1.3; } .u-row-line2 { margin-top: 1px; font-size: 12px; } .u-row-title { font-size: 14px; } /* Разделитель вместо воздуха: 558 аренд в списке, и каждая лишняя восьмёрка пикселей — это минус строка на экране. */ .u-row + .u-row { border-top: 1px solid var(--u-border-soft); } /* --- Шапка страницы ---------------------------------------------------- Съедала 55 px, а над первой строкой набегало 430. Заголовок и действия в один ряд. */ .u-head { padding: 10px 0 !important; min-height: 0; } .u-h1 { font-size: 20px !important; margin: 0 !important; } /* Панель фильтров: была отдельной карточкой на 90 px. */ .u-card--filters { padding: 8px 10px !important; } .u-card--filters .u-field { margin: 0; } /* --- Кнопки ------------------------------------------------------------ 44 px нужны пальцу. Мышь попадает в 30. */ .u-btn { min-height: 30px; padding: 5px 11px; font-size: 13px; } .u-btn--sm { min-height: 26px; padding: 3px 9px; font-size: 12px; } /* В формах оставляем крупнее: там кнопка — конец операции, а не строка. */ form .u-btn--dark, form button[type="submit"].u-btn { min-height: 34px; } /* --- Числа ------------------------------------------------------------- Табличные цифры: колонка сумм не должна дрожать при прокрутке. */ .u-num, .u-row-line2 { font-variant-numeric: tabular-nums; } /* --- Закреплённая шапка таблицы --------------------------------------- * Прокрутив двадцать строк, человек перестаёт понимать, что в колонке. * * ⚠️ Одного `position: sticky` тут НЕДОСТАТОЧНО, и это не видно ни из * кода, ни из тестов. Таблицы обёрнуты в `.u-table-wrap` с * `overflow-x: auto` (горизонтальная прокрутка широких таблиц), а такой * предок становится контейнером прокрутки по ОБЕИМ осям — шапка липнет * к нему, а он по вертикали не едет. Замер живого `/fleet?desk=1`: * прокрутка окна на 900 px увозила шапку на −627, то есть правило * работало вхолостую. * * Поэтому обёртке задаётся высота: таблица прокручивается внутри себя, и * шапка липнет к её верху. Короткие таблицы (платежи — одна строка, * инвесторы — одиннадцать) в этот предел не упираются и ведут себя * ровно как раньше; вертикальная прокрутка появляется только там, где * строк действительно много (парк — 51, аналитика по байкам — 51). * Убрать `overflow-x` вместо этого нельзя: он держит широкие таблицы. */ .u-table-wrap { max-height: calc(100vh - 210px); overflow-y: auto; } /* ⚠️ Классов у таблиц ДВА, и они не пересекаются: `u-table` (5 экранов, * все внутри `.u-table-wrap`) и `u-table-wide` (14 экранов, обёртки нет * вовсе). Первый селектор покрывал только `u-table` — то есть правило * действовало на четверть таблиц CRM. У `u-table-wide` предка с * `overflow` нет, поэтому шапка липнет прямо к окну и высоту ограничивать * не нужно. */ .u-table thead th, .u-table-wide thead th { position: sticky; top: 0; z-index: 2; background: var(--u-page); box-shadow: inset 0 -1px 0 var(--u-border); } /* --- Колпачок клавиши -------------------------------------------------- * Колпачок стоит РЯДОМ С ДЕЙСТВИЕМ, а не только в справке: справку * открывают единицы, а сочетание надо УВИДЕТЬ там, куда и так смотрят. * Сами сочетания живут в `base.html` (⌘K, ⌘P, ⌘B, /, N, C, H, Esc, ?) — * их система была в проекте до этого промпта, и второй такой заводить * нельзя. Здесь только внешний вид. */ .u-kbd { display: inline-block; margin-left: 6px; padding: 1px 5px; border: 1px solid #d0d5dd; border-bottom-width: 2px; border-radius: 4px; background: var(--u-page); font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--u-text-2); vertical-align: middle; } .u-btn--dark .u-kbd { border-color: rgba(255,255,255,.45); background: transparent; color: var(--u-on-fill); } } /* === Первый экран: где на самом деле терялось место ====================== * * Замер живой `/rentals?desk=1` на 1280×800 показал: до первой строки * списка 445 px — больше половины экрана. Разложение по слоям: * * шапка сайта `.u-topbar` 110 px * заголовок `.u-head` 70 px * фильтры `form.u-card-body` 90 px * шапка карточки списка 53 px * табы сегментов 47 px * * Ни один блок сам по себе не выглядит лишним, и поэтому его никто не * трогал. Проблема в сумме: пять уровней подписей до первой строки данных. */ @media (min-width: 768px) { /* ⚠️ Шапку сайта НЕ трогаем. Попытка сжать её через `padding` у детей дала обратный результат: полос там две, и правило добавило по 12 px каждой — 110 стало 122. Её высота задана вёрсткой самой шапки, а не отступами, и правится там же, а не отсюда. Это как раз тот случай, который макет 53 называет правилом: система задаёт плотность, но экран, свёрстанный под палец, правится сам. */ /* Заголовок страницы: название раздела уже стоит в меню, второй раз оно нужно мелко. */ .u-head { padding: 6px 0 !important; gap: 10px; } .u-h1 { font-size: 18px !important; line-height: 1.25 !important; } .u-head .u-sub, .u-head p { font-size: 12px !important; margin: 0 !important; } /* Фильтры — одна полоса, а не карточка с воздухом. */ form.u-card.u-card-body { padding: 8px 12px !important; } form.u-card.u-card-body .u-label { font-size: 11px; margin-bottom: 2px; } form.u-card.u-card-body .u-input, form.u-card.u-card-body select { height: 32px; font-size: 13px; } /* Шапка карточки списка и сегменты. */ .u-card-head { padding: 8px 12px !important; min-height: 0 !important; } .u-card-title-sm { font-size: 13px !important; } .u-tabs { padding: 4px 8px !important; gap: 4px; } .u-tabs a, .u-tabs button { padding: 5px 10px !important; font-size: 13px; } } /* --- Кнопка в строке списка -------------------------------------------- * Высоту строки держала именно она: 32 px кнопки + отступы давали 71 px * при содержимом в 33 px. Мыши хватает 26. */ @media (min-width: 768px) { .u-row .u-btn, .u-row .u-btn--sm { min-height: 24px; padding: 2px 9px; font-size: 12px; } .u-row-actions { gap: 6px; } } /* --- Выпадашка поиска в шапке ------------------------------------------- * Рендерится по HTMX из `/search?layout=dropdown` в шапку `base.html`, то * есть на КАЖДОМ экране CRM, и только на десктопе (на телефоне свой * полноэкранный слой на классах `as-*`). Стили жили в `search.css`, который * подключает одна страница `/search`, — и на всех остальных выпадашка была * голым списком ссылок без отступов, рамок и бейджей. * * `.sd-badge` без модификатора — серый: тон `grey` (завершённая аренда, * личный байк) намеренно не имеет своего правила. */ @media (min-width: 768px) { .sd-hint, .sd-none { padding: 12px 14px; font-size: 13px; color: var(--u-muted); } .sd-none-s { display: block; margin-top: 4px; font-size: 12px; } .sd-h { padding: 8px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); } .sd-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; text-decoration: none; color: inherit; font-size: 14px; } .sd-row:hover { background: var(--u-page); } .sd-row--exact { background: var(--u-blue-bg); } /* Подзаголовок группы разделов в пустом состоянии палитры. Отличается от `.sd-h` только отбивкой сверху: это второй уровень внутри «Разделы», а не самостоятельный раздел выдачи. */ .sd-h--sub { padding-top: 10px; } /* Иконка раздела. Фиксированная ширина — иначе «🛵» и «⚙️» разной ширины сдвигают названия друг относительно друга, и колонка перестаёт читаться как колонка. */ .sd-ico { flex: 0 0 1.25rem; text-align: center; font-size: 14px; } .sd-t { font-weight: 600; white-space: nowrap; } .sd-s { flex: 1; min-width: 0; color: var(--u-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sd-badge { margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--u-border-soft); border: 1px solid var(--u-border); color: var(--u-text-2); white-space: nowrap; } .sd-badge--green { background: var(--u-green-bg); border-color: var(--u-green-bd); color: var(--u-green-fg); } .sd-badge--blue { background: var(--u-blue-bg); border-color: var(--u-blue-bd); color: var(--u-blue-fg); } .sd-badge--red { background: var(--u-red-bg); border-color: var(--u-red-bd); color: var(--u-red-fg); } .sd-badge--amber { background: var(--u-amber-bg); border-color: var(--u-amber-bd); color: var(--u-amber-fg); } .sd-all { display: block; padding: 10px 14px; border-top: 1px solid var(--u-border-soft); font-size: 13px; font-weight: 560; color: var(--u-blue-fg); text-decoration: none; } } /* === Рельс разделов (макет промпта 61, 06.08.2026) ======================= * * Заменяет вторую полосу шапки — четыре выпадающих меню на 22 пункта. * Разметка в `base.html`, список разделов — из `web/navigation.py`. * * Весь блок под тем же медиазапросом, что и файл: ниже 768 px рельса нет * вовсе (в разметке он `hidden md:flex`), там своя нижняя панель. */ @media (min-width: 768px) { /* Вторая полоса шапки больше не нужна: её содержимое переехало в рельс. Прячем именно `.u-nav` внутри шапки — та же разметка используется в мобильном меню, но оно `md:hidden` и сюда не попадает. */ .u-topbar .u-nav { display: none !important; } /* Рельс стоит ПОД шапкой (56 px), а не от самого верха: марка, поиск и «+ Новая аренда» остаются в шапке, переносить их — отдельная правка, которая задела бы каждую страницу. */ .dk-rail { position: fixed; left: 0; top: 56px; bottom: 0; width: 236px; z-index: 20; flex-direction: column; gap: 10px; padding: 12px 12px 10px; background: var(--u-surface); border-right: 1px solid var(--u-border); overflow-y: auto; overscroll-behavior: contain; } /* Место под рельс освобождает `body`, а НЕ `main`. ⚠️ Первая версия ставила `main { margin-left: 236px }` — и контент наезжал под рельс на всех страницах, кроме `/park`. Причина: у `main` стоит Tailwind-класс `mx-auto` (`margin-left: auto`), он специфичнее селектора по тегу и приезжает позже — Play CDN дописывает свои правила в `` уже в браузере. То есть моё правило проигрывало всегда, а видно это было только глазами: разметка целая, тесты зелёные. `padding` у `body` в этот спор не вступает и двигает всё разом — шапку, контент и подвал. ⚠️ Через `:has()`, а не просто `body`: рельса нет на логине, у курьера и у инвестора — там отступ оставил бы пустую полосу в четверть экрана. */ body:has(.dk-rail) { padding-left: 236px; } .dk-cap { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--u-muted); padding: 0 4px 6px; } /* --- Что горит ------------------------------------------------------- */ .dk-hot { display: flex; flex-direction: column; gap: 2px; } .dk-hot-i { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 8px; border-radius: 8px; font-size: 13px; color: var(--u-text-2); text-decoration: none; border: 1px solid transparent; } .dk-hot-i:hover { background: var(--u-page); } .dk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--u-muted); flex: none; } .dk-hot-i--red { background: var(--u-red-bg); border-color: var(--u-red-bd); color: var(--u-red-fg); } .dk-hot-i--red .dk-dot { background: var(--u-red); } .dk-hot-i--amber { background: var(--u-amber-bg); border-color: var(--u-amber-bd); color: var(--u-amber); } .dk-hot-i--amber .dk-dot { background: var(--u-amber); } /* Спокойный день говорит это словами — пустой блок читается как поломка. */ .dk-hot-calm { padding: 4px 8px; font-size: 13px; color: var(--u-muted); } /* --- Разделы --------------------------------------------------------- */ .dk-nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--u-hairline); padding-top: 10px; } .dk-i { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13px; color: var(--u-text-2); text-decoration: none; border: 1px solid transparent; } .dk-i:hover { background: var(--u-page); } .dk-i.is-active { background: var(--u-blue-bg); border-color: var(--u-blue-bd); color: var(--u-blue-hover); font-weight: 500; } .dk-ico { width: 16px; text-align: center; flex: none; font-size: 13px; } .dk-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-more { display: flex; align-items: center; gap: 8px; height: 32px; margin-top: 8px; padding: 0 8px; border: 1px dashed var(--u-border); border-radius: 8px; background: none; font-family: inherit; font-size: 13px; color: var(--u-muted); cursor: pointer; text-align: left; } .dk-more:hover { background: var(--u-page); color: var(--u-text-2); } .dk-more .u-kbd { margin-left: auto; } } /* === Рельс, суженный до иконок ========================================== * * Второе состояние панели: 236 px → 56 px, остаются одни иконки. Класс * `bm-rail-mini` ставится на `` ДО первой отрисовки (скрипт в шапке * `base.html`), иначе панель мигала бы широкой на каждом переходе — переход * здесь это полная перезагрузка страницы. * * Почему сужение, а не скрытие: спрятанная панель забывается, и человек * возвращается к поиску как к единственной навигации — ровно к тому * маятнику, ради которого рельс и заводился. Иконка на месте напоминает, * что раздел есть. */ @media (min-width: 768px) { /* Кнопка переключения. На телефоне рельса нет, поэтому и кнопки нет — скрыта в общем правиле ниже, вне этого блока её не существует. */ .u-rail-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; margin-right: -4px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--u-muted); font-size: 15px; cursor: pointer; font-family: inherit; } .u-rail-btn:hover { background: var(--u-page); color: var(--u-text); } /* Плавность есть, но её выключает системная настройка «уменьшить движение»: панель дёргается в поле зрения, и для части людей это не украшение, а помеха. */ .dk-rail { transition: width .16s ease; } .dk-i, .dk-hot-i, .dk-more { transition: padding .16s ease; } @media (prefers-reduced-motion: reduce) { .dk-rail, .dk-i, .dk-hot-i, .dk-more { transition: none; } } /* Числа и галочка нужны только в узком виде — в широком их место в тексте. */ .dk-hot-n, .dk-hot-ok, .dk-more-mini { display: none; } /* --- Узкое состояние ------------------------------------------------- */ .bm-rail-mini .dk-rail { width: 56px; padding-left: 8px; padding-right: 8px; } /* Класс стоит на ``, поэтому селектор начинается с него. Отступ по-прежнему у `body` и по-прежнему через `:has()`: рельса нет на логине и у курьера, и полоса в 56 px там была бы пустой. */ .bm-rail-mini body:has(.dk-rail) { padding-left: 56px; } /* Подписи уходят, иконки встают по центру. `display: none`, а не прозрачность: скрытый текст остаётся в потоке и распирает панель. */ .bm-rail-mini .dk-cap, .bm-rail-mini .dk-lbl, .bm-rail-mini .dk-hot-t, .bm-rail-mini .dk-more-t, .bm-rail-mini .dk-more .u-kbd { display: none; } .bm-rail-mini .dk-i, .bm-rail-mini .dk-hot-i, .bm-rail-mini .dk-more { justify-content: center; padding: 0 6px; gap: 0; } .bm-rail-mini .dk-ico { width: auto; font-size: 15px; } /* «Что горит» в узком виде — число в кружке: точка без числа сообщает «что-то есть», но не говорит сколько, а ради этого блок и стоит. */ .bm-rail-mini .dk-dot { display: none; } .bm-rail-mini .dk-hot-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--u-hairline); color: var(--u-text-2); } .bm-rail-mini .dk-hot-i--red .dk-hot-n { background: var(--u-red-bg); color: var(--u-red-fg); } .bm-rail-mini .dk-hot-i--amber .dk-hot-n { background: var(--u-amber-bg); color: var(--u-amber); } .bm-rail-mini .dk-hot-ok { display: inline; color: var(--u-green); } .bm-rail-mini .dk-hot-calm { text-align: center; padding: 4px 0; } .bm-rail-mini .dk-more-mini { display: inline; letter-spacing: 1px; } .bm-rail-mini .dk-more { padding: 0; } }