/* ─── Каркас: шапка, вкладки, поиск, панели ────────────────────────────────── Всё, что обрамляет ленту и экран лота. Здесь же будут жить правила широких режимов (контейнер, колонка фильтров) — см. границы `--bp-*` в tokens.css. ──────────────────────────────────────────────────────────────────────── */ /* ─── главная навигация: пять разделов ─────────────────────────────────── На телефоне — полоса внизу (решение юзера 04.08): до большого пальца дотягивается нижняя треть экрана, а шапка занимала верхнюю треть. На широком экране ЭТА ЖЕ разметка становится колонкой слева — см. режим `desk` в конце файла. Вторая копия пунктов разъехалась бы с первой. */ #nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } #nav button { flex: 1 1 0; min-width: 0; height: var(--nav-h); border: 0; background: none; padding: 0 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-soft); font: inherit; font-size: var(--fs-caption); font-weight: 500; transition: color var(--fast) ease; } /* Значок — линия одной толщины, красится `currentColor`: выбранный раздел зеленеет целиком, значок вместе с подписью. Цветные эмодзи так не умели. */ #nav button .ic { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fast) ease; } #nav button:active .ic { transform: scale(.92); } #nav button .lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #nav button[aria-selected="true"] { color: var(--accent-strong); font-weight: 600; } /* Число у раздела — сколько там лотов ВСЕГО (не «сколько нашлось по фильтрам»): так же, как считались разделы «Моих» до перестановки. */ #nav .n { position: absolute; margin: -22px 0 0 22px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 600; line-height: 1; padding: 2px 5px; border-radius: 999px; } /* Экран лота на телефоне закрывает навигацию собой: у него своя липкая полоса с 👍/👎/⭐/📡, две полосы внизу спорили бы друг с другом, а «Назад» и так возвращает в ленту. На широком экране колонка слева — постоянная часть обстановки, там прятать нечего (переопределено в режиме `desk`). */ .at-lot #nav { display: none; } /* Место под навигацию: без этого последняя карточка ленты уезжает под полосу. */ #screen-feed, #screen-more { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } /* Шапка целиком липкая и УЕЗЖАЕТ при прокрутке вниз: её ряды съедали треть экрана телефона, а листать ленту надо длинно. Возвращается от любой прокрутки вверх — вкладки всегда в одном движении. На широком экране не прячется: там места хватает, а исчезающая шапка только сбивает мышь. */ #top { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); transition: transform 180ms ease; } #top.away { transform: translateY(-100%); } /* ─── имя приложения + счётчик выборки + подвкладка ─── */ #brand { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 6px; } /* Скругление здесь: сама иконка идёт полем до края, потому что iOS накладывает на неё СВОЮ маску (см. `scripts/make_web_icons.py`). */ #brand .mark { flex: none; width: 24px; height: 24px; border-radius: 7px; display: block; } #brand .logo { font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.015em; color: var(--accent-strong); } #brand .total { font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap; } /* Подсказка и счётчик прижаты вправо: слева имя, справа состояние выборки. */ #brand .total { margin-left: auto; } /* ─── подразделы текущего пункта навигации ─── */ /* Один ряд вместо прежних двух (вкладки + разделы «Моих»): что именно в нём стоит, зависит от выбранного внизу раздела. У Мониторинга и Избранного подразделов нет, и ряд не занимает места вовсе. */ #segment { display: flex; gap: 2px; margin: 0 12px 6px; padding: 2px; background: var(--surface); border-radius: var(--r-sm); } #segment button { flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--fs-body); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden; transition: background var(--fast) ease, color var(--fast) ease; } /* ⚠️ ВЫБРАННЫЙ СЕГМЕНТ — БЕЛАЯ ПИЛЮЛЯ НА СЕРОЙ ДОРОЖКЕ, а не заливка акцентом (03.09). Тот же самый переключатель в разделе задач (`.tsk-seg`) выглядел иначе — два вида одного элемента на соседних экранах читаются как два разных приложения. Плюс зелёная заливка спорила за внимание с зелёным выбранным разделом в нижней панели. */ #segment button[aria-selected="true"] { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); } /* Число — не «сколько нашлось по фильтрам», а «сколько у меня всего»: иначе сужённая выборка выглядела бы как опустевший раздел. */ #segment .n { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-soft); background: var(--bg); border-radius: 999px; padding: 1px 5px; } #segment button[aria-selected="true"] .n { color: var(--accent-strong); background: var(--accent-soft); } /* На невыбранном сегменте фон дорожки серый — число на белом кружке пропадало бы; берём тот же мягкий акцент, но бледнее. */ #segment button[aria-selected="false"] .n { background: var(--bg); } /* Кружок «i» текущего раздела — в строке имени, отдельным рядом он стоил бы 30 px высоты ради одной подсказки. */ #dest-hint { display: flex; align-items: center; } /* ─── поиск и переключатели панелей ─── */ #searchbar { display: flex; gap: 6px; padding: 0 12px 8px; } #searchbar input { flex: 1; min-width: 0; height: 38px; padding: 0 12px 0 32px; border: 0; border-radius: var(--r-sm); background: var(--surface) no-repeat 10px 50%; /* Лупа — inline-SVG в data:, а не файл и не CDN: одна строка вместо запроса, и CSP (`img-src 'self' data:`) её пропускает. Цвет обводки (%235C6B68) — единственное место, где значение токена продублировано: внутрь data:-URL `var(--ink-soft)` не подставляется. */ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235C6B68' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.4'/%3E%3Cpath d='M10.2 10.2 14 14'/%3E%3C/svg%3E"); color: var(--ink); font: inherit; font-size: var(--fs-ui); } #searchbar input::placeholder { color: var(--ink-soft); } #searchbar button { height: 38px; border: 0; border-radius: var(--r-sm); padding: 0 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-body); font-weight: 500; white-space: nowrap; transition: background var(--fast) ease, color var(--fast) ease; } #searchbar button.on { background: var(--accent); color: var(--on-accent); } /* ─── панели «Инструменты» и «Фильтры» ─── */ /* Панели лежат ВНУТРИ липкой шапки, а форма фильтров длиннее экрана (замер 31.07: шапка 965 px против экрана 844 px, кнопка «Показать» на 898 px). У `position: sticky` собственного скролла нет — до нижних полей было не дотянуться, а прокрутка страницы уводила всю шапку за экран. Поэтому панель получает СВОЮ прокрутку и высоту, при которой шапка заведомо помещается в экран: 100dvh минус ряды бренда и поиска (~134 px) и небольшой запас. `dvh` — потому что в мобильном вебвью `vh` не учитывает съезжающую панель браузера; `vh` оставлен фолбэком. `overscroll-behavior: contain` не пускает прокрутку дальше в ленту — иначе, докрутив панель до конца, палец продолжал бы листать лоты. */ #filters { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 12px; background: var(--bg); border-top: 1px solid var(--line); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Формы «Анализ» и «Карта белых пятен» с 03.09 живут в «Ещё», каждая своим разделом. Разметка осталась на месте (`#tool-forms`), `more.js` переносит узел к себе — поэтому оформление тоже остаётся здесь, а не уезжает в `more.css`: правило рядом с разметкой, которую оно красит. */ #analyze, #gaps, #radius { display: flex; flex-direction: column; gap: 8px; } #filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--ink-soft); } #filters label.check { flex-direction: row; align-items: center; gap: 8px; } #filters .pair { display: flex; gap: 6px; } #filters .pair > * { flex: 1; min-width: 0; } /* Все поля ввода и селекты — один вид: заливка `--surface`, без рамок. */ #analyze input, #gaps input, #gaps select, #radius input, #filters select, #filters input { height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-ui); } #analyze input::placeholder, #gaps input::placeholder, #radius input::placeholder, #filters input::placeholder { color: var(--ink-soft); } /* ⚠️ БЕЛОЕ ПОЛЕ БЫЛО НУЖНО ТОЛЬКО ВНУТРИ ПЛИТКИ «Инструментов»: там поле лежало НА `--surface`, заливка того же цвета делала его невидимым, и пустое поле читалось как строка подсказки (живая проверка). С 03.09 обе формы живут в «Ещё» на БЕЛОЙ карточке `.more-card`, и правило перевернулось: поле снова серое, как в фильтрах, — иначе белое на белом опять пропадает. */ /* Главная кнопка формы — акцент; вторичная («Сбросить») — заливка. */ #analyze button, #gaps button, #radius button, #filters button { height: 44px; border: 0; border-radius: var(--r-sm); padding: 0 14px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: var(--fs-ui); font-weight: 600; transition: background var(--fast) ease, opacity var(--fast) ease; } #analyze button:active, #gaps button:active, #radius button:active, #filters button:active { background: var(--accent-strong); } #analyze button:disabled, #gaps button:disabled, #radius button:disabled { opacity: .5; } /* Частые радиусы одной кнопкой. Выбранный — заливкой акцента, а не рамкой: рамка на сером поле почти не видна (тот же урок, что с «выбрано» в ленте). */ #radius .chips { display: flex; flex-wrap: wrap; gap: 6px; } #radius .chips button { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--fs-meta); font-weight: 500; } #radius .chips button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } #filters button.ghost { background: var(--surface); color: var(--ink); font-weight: 500; } /* ─── сохранённые наборы фильтров ─── */ #saved-filters { display: flex; flex-direction: column; gap: 4px; } #saved-filters .sf { display: flex; align-items: center; gap: 6px; background: var(--surface); border-radius: var(--r-sm); padding: 7px 10px; } #saved-filters .sf .name { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: var(--accent-strong); font: inherit; font-size: var(--fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #saved-filters .sf .act { flex: none; background: none; border: 0; padding: 2px 4px; font-size: var(--fs-body); color: var(--ink-soft); } /* ─── широкие экраны ───────────────────────────────────────────────────── Числа границ продублированы литералами: в `@media` переменную подставить нельзя (правило разбирается раньше, чем становятся известны значения). Единственный источник правды — `--bp-wide` / `--bp-desk` в tokens.css, правя одно, правь и другое. Смысл режимов не в том, чтобы «растянуть телефон», а в том, чтобы перестать растягиваться: карточка на 1920 px разъезжалась до 1896 px, номер лота уезжал от цены на 1700 px, а в экран влезало ПЯТЬ карточек против восьми на телефоне — чем больше экран, тем меньше видно. */ /* ─── wide: окно шире телефона ─── */ @media (min-width: 760px) { /* Полосы шапки и лента встают колонкой по центру; сама шапка остаётся во всю ширину, иначе её граница обрывается посреди экрана. Ширина — `--feed-max`: ряды шапки обязаны стоять по краям карточек, иначе поиск и фильтры повиснут узкой полосой над широкой лентой. */ #brand, #segment, #searchbar, #filters, #feed, #feed-status { max-width: var(--feed-max); margin-left: auto; margin-right: auto; } /* Поле поиска за лентой не тянется: строка ввода в 1500 px выглядит нелепо и читается хуже — набирают в неё несколько слов. Кнопки уезжают вправо сами (у поля `flex: 1`, ограниченный максимумом). */ #searchbar input { max-width: 720px; } /* Форма фильтров — тоже документ, а не лента: поля в два ряда по 1500 px никто не заполняет. */ #filters { max-width: var(--content-max); } /* Указатель мыши в этом режиме есть всегда — показываем, что нажимается. */ #nav button, #segment button, #searchbar button { cursor: pointer; } } /* ⚠️ КОЛОНКА СУЩЕСТВУЕТ ТОЛЬКО НА ШИРОКОМ ЭКРАНЕ, И ПРЯЧЕТ ЕЁ СТИЛЬ. `buildWideNav` снимает `hidden` независимо от ширины окна — иначе брейкпоинт жил бы в двух местах и разъехался бы. Без этого правила `