/* ==== css/core.css ==== */
/* ============================
CORE.CSS
Глобальные переменные + база
============================ */
/* ====== Бренд-шрифты (само-хостинг, woff2, latin+cyrillic) ======
Manrope — весь UI; веса под реальный font-weight в разметке (400/500/600/700/800).
Geist Mono — акцентные тех-подписи (версия, реф-ссылка). font-display:swap —
первый рендер не блокируется, текст рисуется системным и подменяется без FOIT. */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/static/fonts/manrope-400.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/static/fonts/manrope-500.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/static/fonts/manrope-600.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/static/fonts/manrope-700.woff2") format("woff2");
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/static/fonts/manrope-800.woff2") format("woff2");
}
@font-face {
font-family: "Geist Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/static/fonts/geist-mono-400.woff2") format("woff2");
}
/* ====== Телеграм ТЕМА ====== */
:root {
/* Светлая тема ЯВНО: meta color-scheme разрешает обе, и при тёмной ОС браузер
иначе отрисовал бы нативные контролы (поля, скроллбары, автозаполнение)
тёмными поверх нашей светлой вёрстки. Тёмная тема ставит dark сама. */
color-scheme: light;
/* Brand palette */
--brand-olive: #5B7A39;
--brand-olive-dark: #4A6630;
--brand-silver: #B8B8B8;
--brand-red: #E32A20;
--brand-gray: #D8D8D8;
--brand-ivory: #E4E3DF;
--brand-black: #191919;
--brand-white: #FFFFFF;
/* Лёгкая заливка полей ввода — очень светлый нейтральный тон на базе ivory,
чтобы поле «читалось» на белой карточке, не споря с оливковыми акцентами */
--input-bg: #F3F2EE;
/* Типографика: Manrope — весь UI, Geist Mono — акцентные тех-подписи. Системный
хвост — фолбэк на время swap и для отсутствующих глифов (напр. ₽ нет в Manrope). */
--font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* ====== СЕМАНТИЧЕСКИЙ СЛОЙ (роли) — единственное, что переопределяет тема ======
Компоненты должны обращаться СЮДА, а не к сырым --brand-*. Light-значения
равны прежним: внешний вид светлой темы не меняется. Dark-набор — в конце
файла, под html[data-theme="dark"]. */
/* Поверхности: 1 — фон страницы, 2 — карточка, 3 — модалки/шиты/поповеры. */
--surface-1: var(--brand-ivory);
--surface-2: var(--brand-white);
--surface-3: var(--brand-white);
/* Текст: primary — основной, secondary — подписи/хинты, muted — самый тихий,
on-accent — текст поверх заливок (олива/статусы), НЕ равен surface. */
--text-primary: var(--brand-black);
--text-secondary: #7A7A72;
--text-muted: #9A9A92;
--on-accent: #FFFFFF;
/* Границы */
--border-subtle: var(--brand-gray);
--border-strong: var(--brand-silver);
/* Границы полей ввода/кнопок-пилюль — свой сине-серый оттенок (НЕ --border-subtle:
там нейтральный серый). Две ступени = две альфы, что стоят в вёрстке. */
/* ТРИПЛЕТЫ под полупрозрачные подмешки: каждое место держит СВОЮ альфу, а тема
меняет только базовый цвет. Иначе тёмная тема получала бы чёрное на чёрном
(тинты) и невидимые границы. Скримы/тени НЕ отсюда — они тёмные в обеих темах. */
--tint-rgb: 0, 0, 0;
--border-field-rgb: 148, 163, 184;
--border-field: rgba(var(--border-field-rgb), 0.45);
--border-field-strong: rgba(var(--border-field-rgb), 0.5);
/* Акцент триплетом — для полупрозрачных оливковых заливок/границ: rgba(var(...), a)
сериализуется точь-в-точь как прежние литералы (color-mix даёт color(srgb …)
и не поддерживается старыми WebKit). */
--accent-rgb: 91, 122, 57;
/* Нейтральные тинты поверх поверхности (пузырь чата собеседника, разделитель
дат). На светлой — подмешка чёрного, на тёмной — белого: иначе на тёмном фоне
чёрный тинт превращается в невидимый. */
--tint-neutral: rgba(var(--tint-rgb), 0.07);
--tint-neutral-weak: rgba(var(--tint-rgb), 0.05);
/* ИНВЕРСНАЯ поверхность — тост: тёмная пилюля на светлой теме и наоборот.
Это НЕ --surface-3: тост намеренно контрастен фону, поэтому в тёмной теме
он светлеет, а текст на нём темнеет. */
--surface-inverse: var(--brand-black);
--text-on-inverse: var(--brand-white);
/* Слои: затемнение под шитами/меню/лайтбоксом */
--overlay: rgba(0, 0, 0, 0.5);
/* Валюта — единый токен листа (сейчас дублируется хардкодом в .gs-leaf и app.html;
перевод потребителей на токен — Фаза 1/2). */
--leaf: #6B8E23;
/* Оливковый ТЕКСТ (подзаголовки статей): на тёмном фоне #41521f нечитаем. */
--text-accent: #41521f;
/* Semantic tokens — ЛЕГАСИ-ИМЕНА, оставлены алиасами на роли выше: всё, что уже
использует --tg-*, флипается в тёмной теме автоматически. Новый код — роли. */
--tg-bg: var(--surface-1);
--tg-text: var(--text-primary);
--tg-hint: var(--text-secondary);
--tg-secondary-bg: var(--surface-2);
/* Brand / UI */
--accent: var(--brand-olive);
--accent-dark: var(--brand-olive-dark);
--danger: var(--brand-red);
--border: var(--brand-gray);
--silver: var(--brand-silver);
/* Семантические цвета статусов (бейджи растений/сделок, прогресс сделки).
Значения зафиксированы — менять цвет статуса только здесь. */
/* Приглушённая статус-палитра: не спорит с оливой бренда. Красный — единственный
яркий маркер (отклонено/ошибка), поэтому идёт из палитры (--brand-red). */
--status-pending: #7D6036; /* охра — на модерации / ожидание */
--status-reserved: #3D648F; /* синий — в брони */
--status-approved: #347946; /* зелёный — опубликовано / завершено */
--status-rejected: var(--brand-red); /* бренд-красный маркер — отклонено */
--status-purple: #7947A6; /* фиолетовый — старт сделки (создана) */
/* СВЕТЛЫЕ ПАРЫ цветного ТЕКСТА статусов: сам --status-* рассчитан как ЗАЛИВКА
(белый текст поверх). Как текст НА поверхности он в тёмной теме проваливается
по контрасту, поэтому у баннеров своя, осветлённая версия того же оттенка.
Light-значения РАВНЫ --status-*, поэтому светлая тема не меняется. */
--status-pending-text: var(--status-pending);
--status-approved-text: var(--status-approved);
--status-rejected-text: var(--status-rejected);
--status-purple-text: var(--status-purple);
/* Тинт-подложки баннеров — вынесены в токены, чтобы в тёмной теме поднять альфу
(при низкой альфе оттенок на тёмном фоне не читается). */
--banner-warn-bg: rgba(241, 196, 15, 0.15);
--banner-ok-bg: rgba(91, 122, 57, 0.12);
--banner-error-bg: rgba(227, 42, 32, 0.08);
--banner-purple-bg: rgba(121, 71, 166, 0.08);
/* Цвета баннеров владельца растения (.pf-info-banner--*, .ps-owner-banner) */
--banner-warn: #c09020; /* кнопка предупреждающего баннера */
--banner-warn-text: #7a6000; /* текст предупреждающего баннера */
--banner-warn-accent: #f1c40f; /* акцентная полоса предупреждения */
--banner-ok: #1e7a47; /* кнопка успешного баннера */
--banner-purple: #7947A6; /* кнопка/полоса фиолетового баннера (= --status-purple) */
--banner-purple-text: #6c3483; /* текст фиолетового баннера */
--banner-frame: #B3B3B3; /* серая рамка статус-баннера (темнее --brand-gray), общая для всех статусов */
--banner-frame-strong: #8C8C8C; /* полоса статуса черновика (neutral) — темнее рамки, как акцент */
/* Shapes */
--radius-xl: 24px;
--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 12px;
--radius-xs: 10px;
--radius-pill: 999px;
/* Effects */
--shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.07);
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
--card-border: 1px solid rgba(0, 0, 0, 0.07);
--shadow-olive: none;
--shadow-chip: 0 1px 4px rgba(0, 0, 0, 0.2); /* мелкие бейджи-кружки (аватар) */
--shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.12); /* выпадашки подсказок */
--shadow-up: 0 -8px 24px rgba(15, 23, 42, 0.22);
--scroll-end-gap: 20px; /* отступ от последнего элемента до нижней навигации */
/* Клиренс нижнего бара под home-indicator (по режиму). Единый источник и для
padding-bottom самого .bottom-nav, и для нижнего резерва .page-inner под нав —
чтобы высота бара и резерв контента совпадали. Браузер/Safari: 0 (fixed;bottom:0
сам над панелью). Standalone-переопределение — ниже, после :root. */
--nav-clearance: 0px;
--transition-fast: 0.15s ease-out;
--fab-enter-duration: 250ms;
--fab-enter-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
/* высота «контента» шапки, без челки (резерв под fixed .topbar-container).
Синхронно с .topbar padding: снижен 101→91 после сжатия шапки на 10px. */
--app-header-content-height: 91px;
--app-header-height: calc(
env(safe-area-inset-top, 0px) + var(--app-header-content-height)
);
}
/* ====== ТЁМНАЯ ТЕМА — переопределение РОЛЕЙ ======
Тема ставится атрибутом html[data-theme] (инлайн-скрипт в app.html, до
первого кадра — против FOUC). Переключателя в UI пока нет: для превью —
document.documentElement.dataset.theme = 'dark'.
Сырые --brand-* НЕ переопределяем (их потребители мигрируют на роли в Фазе 1),
статусы и --banner-* тоже пока светлые — отдельным шагом. */
html[data-theme="dark"] {
color-scheme: dark; /* нативные контролы/скроллбары/автозаполнение — тёмные */
--surface-1: #1A1A18;
--surface-2: #232320;
--surface-3: #2B2B27;
--text-primary: #ECEBE6;
--text-secondary: #9C9B92;
--text-muted: #6E6E66;
--on-accent: #FFFFFF;
--border-subtle: rgba(255, 255, 255, 0.12);
--border-strong: rgba(255, 255, 255, 0.20);
--border-field: rgba(var(--border-field-rgb), 0.14);
--border-field-strong: rgba(var(--border-field-rgb), 0.18);
--tint-rgb: 255, 255, 255;
--border-field-rgb: 255, 255, 255;
--tint-neutral: rgba(var(--tint-rgb), 0.10);
--tint-neutral-weak: rgba(var(--tint-rgb), 0.07);
--text-accent: #8FB35E;
/* Баннеры: осветлённый ТЕКСТ статуса того же оттенка + более плотный тинт-фон,
чтобы цвет узнавался на тёмной поверхности. */
--status-pending-text: #D9A85A; /* охра */
--status-approved-text: #7FC48F; /* зелёный */
--status-rejected-text: #FF7A70; /* красный */
--status-purple-text: #C9A3E8; /* фиолетовый */
--banner-warn-bg: rgba(241, 196, 15, 0.22);
--banner-ok-bg: rgba(91, 122, 57, 0.22);
--banner-error-bg: rgba(227, 42, 32, 0.18);
--banner-purple-bg: rgba(121, 71, 166, 0.20);
--banner-warn-text: #E8C766;
--banner-purple-text: #C9A3E8;
--banner-warn-accent: #F1C40F;
--banner-ok: #7FC48F;
--banner-purple: #C9A3E8;
--banner-frame: rgba(255, 255, 255, 0.28);
--banner-frame-strong: rgba(255, 255, 255, 0.45);
--shadow-chip: 0 1px 4px rgba(0, 0, 0, 0.55);
--shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.6);
--surface-inverse: #ECEBE6;
--text-on-inverse: #1A1A18;
/* Заливка полей/скелетонов: светлый #F3F2EE в тёмной теме «горел» бы. */
--input-bg: #2E2E2A;
--overlay: rgba(0, 0, 0, 0.62);
--leaf: #7BA02B;
/* Тени на тёмном фоне должны быть глубже, иначе не читаются. */
--shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.5);
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.55);
--shadow-up: 0 -8px 24px rgba(0, 0, 0, 0.6);
--card-border: 1px solid rgba(255, 255, 255, 0.10);
}
/* Standalone (иконка на «Домой»): клиренс под home-indicator, подтянутый на ~22px
(минимум 4px). -22px/4px подбираются на устройстве (подписи не касаются индикатора). */
@media (display-mode: standalone) {
:root { --nav-clearance: max(4px, calc(env(safe-area-inset-bottom, 0px) - 22px)); }
}
/* =================== RESET =================== */
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
height: 100%;
/* Документ ЗАЛОЧЕН: overflow:hidden (не только -x) — иначе overflow-y вычислялся
в auto (overflow-x:hidden + overflow-y:visible → auto), и html/body становились
живым скролл-контейнером, который на iOS перехватывал нативный focus-scroll
(поле улетало на ~высоту клавиатуры). Единственные скроллеры — внутренние
.tab--active / #psScrollArea (ни один экран не зависит от document/window-скролла). */
overflow: hidden;
}
/* Против рабербенда всего документа (жест у краёв внутренних скроллеров не
«проваливается» в системный bounce окна). */
body {
overscroll-behavior: none;
}
/* Скрываем скроллбар браузера — Telegram WebApp его не использует,
на десктопе он создаёт асимметрию при margin: 0 auto */
html {
scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
body {
margin: 0;
padding: 0;
height: 100%;
font-family: var(--font); /* Manrope, наследуется в input/button/textarea (там inherit) */
background: var(--tg-bg);
color: var(--tg-text);
-webkit-tap-highlight-color: transparent;
}
/* Form-элементы не наследуют font автоматически в браузерах */
input, button, textarea, select {
font-family: inherit;
}
/* Курсор ввода — оливковый (белый дефолтный не виден на белом фоне полей) */
input, textarea {
caret-color: var(--accent);
}
/* Telegram topbar takes space — add padding */
body.page {
display: flex;
flex-direction: column;
height: 100%;
padding-top: 0;
}
/* Контейнер для страничного контента */
.page-inner {
flex: 1 1 auto;
display: flex;
flex-direction: column;
width: 100%;
max-width: 480px;
margin: 0 auto;
/* Горизонтальный инсет 12px перенесён на ВНУТРЕННИЙ контент скроллеров (не на
page-inner и не на сам скроллер) — чтобы полоса прокрутки была у края экрана.
Здесь только вертикальные отступы: сверху высота шапки, снизу под нижнюю навигацию. */
padding: var(--app-header-height) 0 calc(51px + var(--nav-clearance));
min-height: 0;
}
/* Клавиатура открыта → нав скрыт (body.gs-kb-open), 51px-резерв под нав лишний —
снимаем, чтобы контент (в т.ч. композер чата в потоке) вставал вплотную над
клавиатурой без пустого зазора. Экран сделки при ЗАКРЫТОЙ клавиатуре использует
базовый 51px-резерв: композер стоит НАД навом (нав виден). */
body.gs-kb-open .page-inner {
/* Клавиатура открыта → home-индикатора нет → safe-area снизу не нужна (иначе зазор). */
padding-bottom: 6px;
}
/* Клавиатура открыта на экране сделки: пиннингуем .page-inner к ВИДИМОЙ области.
position:fixed; top:0 — верх видимой области; ВЫСОТУ задаёт ТОЛЬКО JS
(.page-inner.style.height = visualViewport.height + "px", одна запись, без чтений).
CSS-height НЕ ставим (height:100% фиксед-элемента конфликтовал с flex-цепочкой →
.deal-page схлопывалась). Fixed-контейнер с реальной px-высотой → flex-цепочка
(#appMain → #tab-deal-detail → .deal-page → .chat-messages flex:1) заполняет,
композер уходит В НИЗ. Шапка (.topbar-container, сама fixed — вне flow) скрыта,
резерв под неё снят (padding-top:8px). */
body.gs-kb-open.page--deal-detail-active .page-inner {
position: fixed;
/* top НЕ ставим здесь: fixed анкорится к layout-верху, а видимая область смещена
на visualViewport.offsetTop → JS выставляет top=offsetTop (иначе контент уезжает
вверх на offsetTop, замер rect.top=−413). */
left: 0;
right: 0;
z-index: 20;
padding-top: 4px; /* чат чуть выше (по просьбе); скруглённый верх остаётся виден */
}
body.gs-kb-open.page--deal-detail-active .topbar-container {
display: none;
}
/* Клавиатура открыта на сделке → залочить скролл документа: страница не скроллится/не
дрожит/не рубер-бэндит, единственный скроллер — лента чата (.chat-messages). */
body.gs-kb-open.page--deal-detail-active {
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
}
/* Растение: резерв под нав (51px) в .page-inner НЕ снимаем — нав видна на экране
растения, #psActions стоит НАД навом (bottom:0 у #screen-plant = верх нава).
Прежний :has()-override (снимал резерв ради «бар у самого низа») убран вместе со
скрытием нава. */
/* Вкладки */
.tab {
display: none;
width: 100%;
}
.tab--active {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Сделка управляет своим скроллингом сама (чат внутри) */
#tab-deal-detail.tab--active {
overflow: hidden;
}
/* Утилита для скрытия */
.hidden {
display: none !important;
}
/* ============================
ВЕРХНЯЯ ПАНЕЛЬ ВИТРИНЫ
============================ */
.feed-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0 2px;
margin-bottom: 0;
position: sticky;
top: 0;
z-index: 10;
background: var(--surface-1);
}
/* Мягкое растворение контента под залипшей строкой (Стол/Сделки/Профиль):
градиент в фон страницы, тапы не перехватывает. sticky даёт containing block. */
.feed-toolbar::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(to bottom, var(--tg-bg), transparent);
pointer-events: none;
}
.feed-toolbar__search {
flex: 1 1 auto;
min-width: 0;
}
/* Обёртка-бокс поля поиска несёт ВЕСЬ визуал (рамка/фон/pill/высота/паддинг) и
центрирует инпут через flex. Сам внутри = высота line box, каретка = вся
высота инпута → ей некуда съезжать при рефлоу вьюпорта (открытие клавиатуры на iOS).
Значения = как были у .feed-search-input, чтобы вид не изменился. Класс навешен на
существующие обёртки (.feed-toolbar__search / .admin-search-wrap). */
.search-box {
display: flex;
align-items: center;
box-sizing: border-box;
height: 31px; /* = высота .feed-btn (Фильтр/Сортировка); border-box → с бордерами */
padding: 0 12px;
border: 1px solid var(--border-field);
border-radius: var(--radius-pill);
background: var(--tg-secondary-bg);
/* iOS scroll-into-view при фокусе не заводит поле под залипшую шапку */
scroll-margin-top: var(--app-header-height);
/* Локальная система координат каретки: обёртка = containing block, и iOS Safari
считает caret-rect относительно неё, а не вложенного скролл-предка (глубина
обёрток у стола/профиля/сделок разная → каретка «ехала» по-разному). */
transform: translateZ(0);
transition:
border-color 0.15s ease-out,
box-shadow 0.15s ease-out,
background-color 0.15s ease-out;
}
.search-box:focus-within {
border-color: var(--accent);
background: var(--surface-2);
box-shadow:
0 0 0 1px rgba(91, 122, 57, 0.18),
0 4px 10px rgba(15, 23, 42, 0.12);
}
/* iOS caret-fix: локальный containing block. КРИТИЧНО — translateZ ДОЛЖЕН быть на
ОБЁРТКЕ поля (родителе инпута), НЕ на самом инпуте: transform на инпуте не создаёт
промежуточный CB для его СОБСТВЕННОЙ каретки, и iOS считает офсет относительно
скролл-предка (особенно с -webkit-overflow-scrolling:touch). Рабочий эталон — .search-box
(обёртка), инпут — ребёнок.
Заход 1 (fixed-контекст, подтверждён на устройстве — оставлены как есть): чат
(.chat-input-bar — обёртка композера), GsSheet (.gs-sheet-input/textarea), авторизация
(.auth-input/.auth-code-input). Заход 2/3 (скролл + overflow-scrolling) — translateZ
ПЕРЕНЕСЁН с инпутов на ОБЁРТКИ: растение название (.plant-detail-title-row), описание
(.plant-detail-desc-block), пикер города (.lp-wrap — во всех хостах: растение/онбординг/
профиль-edit), онбординг имя/био (.auth-field__wrap), профиль-edit имя/био (.pe-field-group). */
.gs-caret-fix,
.chat-input-bar,
.gs-sheet-input,
.gs-sheet-textarea,
.auth-input,
.auth-code-input,
.plant-detail-title-row,
.plant-detail-desc-block,
.lp-wrap,
.auth-field__wrap,
.pe-field-group {
transform: translateZ(0);
}
/* Инпут раздет до текста: весь бокс — на .search-box. Высота = line box → каретка
стабильна при открытии клавиатуры (нет вертикального padding/height внутри инпута). */
.feed-search-input {
flex: 1;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
height: auto;
border: none;
background: transparent;
outline: none;
font-size: 14px;
line-height: revert; /* сброс к UA-стилю Safari для инпута — выравнивает каретку/плейсхолдер там, где normal/1 не помогали (Adam Cap) */
color: var(--tg-text);
-webkit-appearance: none;
appearance: none;
/* Длинный плейсхолдер троеточится «…», а не режется по краю (узкий мобильный) */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* iOS применяет ellipsis именно к ::placeholder, не к самому input */
.feed-search-input::placeholder {
color: var(--tg-hint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.feed-toolbar__actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
/* Кнопки фильтра/сортировки и кнопки в модалках */
.feed-btn {
border-radius: var(--radius-pill);
border: 1px solid var(--border-field-strong);
background: var(--tg-secondary-bg);
color: var(--tg-text);
padding: 7px 10px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition:
background-color 0.12s ease-out,
box-shadow 0.12s ease-out,
transform 0.12s ease-out,
border-color 0.12s ease-out;
}
.feed-btn:active {
transform: translateY(1px);
box-shadow: 0 3px 6px rgba(15, 23, 42, 0.12);
}
.feed-btn--primary {
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
border-color: transparent;
color: var(--on-accent);
}
.feed-btn--secondary {
background: var(--tg-secondary-bg);
color: var(--tg-text);
}
.feed-btn--active,
.feed-btn.active {
background: var(--accent);
border-color: transparent;
color: var(--on-accent);
}
/* ============================
МОДАЛКИ ФИЛЬТРА И СОРТИРОВКИ
============================ */
.feed-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 1100;
}
.feed-modal {
width: 100%;
max-width: 480px;
background: var(--tg-bg);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: var(--shadow-up);
padding: 12px 12px calc(62px + env(safe-area-inset-bottom, 0px) + 8px);
animation: feed-modal-slide-up 0.18s ease-out;
}
@keyframes feed-modal-slide-up {
from {
transform: translateY(16px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.feed-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.feed-modal__header span {
font-size: 17px;
font-weight: 600;
}
.feed-modal__close {
border: none;
background: transparent;
color: var(--tg-hint);
font-size: 20px;
cursor: pointer;
padding: 4px;
}
.feed-modal__body {
padding: 6px 2px 10px;
max-height: 60vh;
overflow-y: auto;
}
.feed-modal__footer {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 6px;
}
.feed-modal__footer .feed-btn {
flex: 1;
padding: 12px 16px;
min-height: 48px;
}
/* Секции внутри фильтра */
.feed-filter-section {
margin-bottom: 14px;
font-size: 15px;
}
.feed-filter-section__title {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
color: var(--tg-hint);
}
.feed-filter-section label {
font-size: 15px;
color: var(--tg-text);
}
/* две секции рядом: Тип слева, Способ передачи справа */
.feed-filter-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 12px;
margin-bottom: 12px;
}
.feed-filter-two-col .feed-filter-section {
margin-bottom: 0;
}
/* touch-friendly метка чекбокса */
.feed-filter-item {
display: flex;
align-items: center;
gap: 8px;
min-height: 40px;
font-size: 15px;
color: var(--tg-text);
cursor: pointer;
}
/* ряд для "От / До" листочков — кнопки-пилюли */
.feed-leaf-range {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
.feed-leaf-range__row {
display: flex;
align-items: center;
gap: 8px;
}
.feed-leaf-range__label {
font-size: 13px;
color: var(--tg-hint);
flex-shrink: 0;
}
.feed-leaf-stepper {
display: inline-flex;
align-items: center;
border: 1.5px solid rgba(var(--border-field-rgb), 0.45);
border-radius: var(--radius-pill);
overflow: hidden;
background: var(--tg-secondary-bg);
}
.feed-leaf-stepper__btn {
width: 44px;
height: 44px;
font-size: 22px;
line-height: 1;
border: none;
background: transparent;
color: var(--tg-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feed-leaf-stepper__val {
min-width: 32px;
text-align: center;
font-size: 17px;
font-weight: 600;
color: var(--tg-text);
user-select: none;
}
.feed-number-input,
.feed-text-input {
width: 100%;
padding: 7px 10px;
font-size: 14px;
border-radius: var(--radius-pill);
border: 1px solid rgba(var(--border-field-rgb), 0.6);
background: var(--tg-secondary-bg);
color: var(--tg-text);
outline: none;
box-sizing: border-box;
transition:
border-color 0.15s ease-out,
box-shadow 0.15s ease-out,
background-color 0.15s ease-out;
}
.feed-number-input::placeholder,
.feed-text-input::placeholder {
color: var(--tg-hint);
}
.feed-number-input:focus,
.feed-text-input:focus {
border-color: var(--accent);
background: var(--surface-2);
box-shadow:
0 0 0 1px rgba(91, 122, 57, 0.18),
0 4px 10px rgba(15, 23, 42, 0.12);
}
/* Радио/чекбоксы */
.feed-filter-section input[type="radio"],
.feed-filter-section input[type="checkbox"] {
accent-color: var(--accent);
width: 18px;
height: 18px;
flex-shrink: 0;
cursor: pointer;
}
/* Профильный модал с мгновенным выбором */
.profile-modal {
/* отступ снизу = нижняя панель навигации + safe area */
padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 4px);
}
.profile-modal__options {
display: flex;
flex-direction: column;
}
.profile-modal__option {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 4px;
font-size: 14px;
color: var(--tg-text);
cursor: pointer;
border-bottom: 1px solid rgba(var(--border-field-rgb), 0.12);
}
.profile-modal__option:last-child {
border-bottom: none;
}
.profile-modal__option input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
flex-shrink: 0;
cursor: pointer;
}
.profile-modal__option--danger {
border-top: 1px solid rgba(var(--border-field-rgb), 0.2);
margin-top: 4px;
color: var(--tg-hint);
}
/* Основной контейнер приложения */
/* FAB: анимация появления (fade) */
@keyframes fab-enter {
from { opacity: 0; }
to { opacity: 1; }
}
.feed-fab--entering {
animation: fab-enter var(--fab-enter-duration) var(--fab-enter-ease);
}
#appMain {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#tab-deals,
#tab-deal-detail {
width: 100%;
align-self: stretch;
}
#tab-deal-detail .deal-page {
width: 100%;
}
/* ============================
ИКОНКА ГЕОЛОКАЦИИ В ПОЛЕ ГОРОДА (location_picker.js)
============================ */
/* Резервируем место под иконку (24×24), чтобы текст ввода не уходил под неё */
.gs-has-loc .lp-city-input,
.gs-has-loc .lp-loc-input {
padding-right: 44px;
}
.gs-loc-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
cursor: pointer;
color: var(--tg-hint);
opacity: 0.7;
z-index: 40; /* выше dropdown подсказок, чтобы тап доходил */
}
.gs-loc-btn svg {
width: 24px;
height: 24px;
}
/* В режиме очистки — единый крестик 16×16 (как в .auth-field__clear) */
.gs-loc-btn[data-mode="clear"] svg {
width: 16px;
height: 16px;
}
/* Крестик очистки должен выглядеть идентично .auth-field__clear:
без приглушения и без padding (иконка геолокации остаётся opacity:0.7). */
.gs-loc-btn[data-mode="clear"] {
opacity: 1;
padding: 0;
}
.gs-loc-btn:active {
opacity: 1;
}
/* Подсказка под полем города (только онбординг) */
.gs-loc-hint {
margin: 6px 2px 0;
font-size: 12px;
color: var(--tg-hint);
line-height: 1.4;
}
/* Сообщение об ошибке геолокации под полем локации (на 3 сек).
Всегда в DOM и резервирует место (visibility, не display) — чтобы кнопка
«Начать обмен» не сдвигалась при появлении/исчезновении текста. */
.lp-geo-hint {
margin: 6px 2px 0;
min-height: 1.4em;
font-size: 12px;
color: var(--brand-red);
line-height: 1.3;
visibility: hidden;
/* Длинный текст ошибки гео («Не удалось найти месторасположение») переносится
на несколько строк, а не обрезается в одну. */
white-space: normal;
overflow-wrap: anywhere;
}
.lp-geo-hint--visible { visibility: visible; }
/* Текст статуса «Определяем местоположение...» прямо в поле ввода.
Двойной класс — чтобы перебить базовый `.lp-loc-input` из ui.css (та же
специфичность, но ui.css грузится позже и иначе выигрывала бы). */
.lp-input--detecting,
.lp-loc-input.lp-input--detecting {
/* Размер шрифта не менять — иначе поле прыгает по высоте. */
color: var(--tg-hint);
-webkit-text-fill-color: var(--tg-hint);
}
/* Ошибка валидации поля локации — красная рамка (как у поля имени/галки) */
.lp-input--error {
border-color: var(--brand-red) !important;
}
/* ==== css/ui.css ==== */
/* ============================
UI.CSS
Компоненты + экраны
============================ */
button,
.btn,
.deal-btn {
cursor: pointer;
}
/* =========================
КАРТОЧКА РАСТЕНИЯ (универсальная)
========================= */
.plant-card {
position: relative;
background: var(--tg-secondary-bg);
border-radius: 16px;
border: var(--card-border);
box-shadow: var(--shadow-card);
padding: 10px;
min-width: 0;
display: flex;
flex-direction: column;
cursor: pointer;
transition: transform 0.12s, box-shadow 0.12s;
}
.plant-card:active {
transform: scale(0.97);
}
/* Во время горизонтального свайпа карусели гасим press-scale (иначе карточка
«сжимается» пока палец удерживает :active). Обычный тап press-фидбек сохраняет. */
.plant-card.is-swiping,
.plant-card.is-swiping:active,
.plant-card:has(.plant-card__nav:active) { /* десктоп: клик по стрелке не жмёт карточку */
transform: none !important;
}
/* Свайп между разделами, начатый по телу плитки: гасим press-scale, иначе плитка
«прожата» весь драг (swipe_tabs.js вешает body.gs-tab-swiping при подтверждённом
драге, снимает на touchend/cancel). Плитки ленты/профиля (.plant-card) и Сделок
(.deal-card). */
body.gs-tab-swiping .plant-card:active,
body.gs-tab-swiping .deal-card:active {
transform: none !important;
transition: none !important; /* без 0.12s отката scale → нет «дёрга» при драге */
}
/* ── Единый слот фотографии растения ──────────────────────────
Фон-заглушка no-photo-v2.svg + обрезка по слоту. Правило: «нет фото» и
«ошибка загрузки» дают ОДНУ И ТУ ЖЕ заглушку — img гасится (пустой src
правилом ниже, ошибка — через window.gsAttachPhotoFallback), из-под него
проступает фон слота.
Пропорции задаёт МЕСТО ПРИМЕНЕНИЯ: aspect-ratio 1/1 у карточек, 4/3 у
детали, фиксированные px у миниатюр и ячеек формы. Здесь их нет.
no-photo-v2.svg — иконка, поэтому 55% и no-repeat, НЕ cover (растянется).
Аватары используют этот класс НЕ через img-заглушку: у них своя ветка
(буква на оливковом), см. avatar.js. */
.gs-photo-slot {
overflow: hidden;
background: var(--surface-2) url('/static/img/no-photo-v2.svg') center / 55% no-repeat;
}
.gs-photo-slot__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Пустой src — скрываем img, видно фон-заглушку (ошибку гасит onerror) */
.gs-photo-slot__img[src=""],
.gs-photo-slot__img[src="undefined"],
.gs-photo-slot__img[src="null"] {
opacity: 0;
}
/* Фото — КВАДРАТ с нормальной обрезкой. Обёртка несёт не только фото:
относительно неё позиционируется .plant-status-badge. */
.plant-card__photo-wrapper {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative; /* якорь для точек/стрелок карусели */
}
/* === Карусель фото на карточке (gsBuildCardPhotos) === */
/* Слайд-трек: кадры в ряд, сдвиг translateX даёт эффект пролистывания.
Контейнер .plant-card__photo-wrapper (gs-photo-slot) уже overflow:hidden. */
.plant-card__track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.25s ease;
will-change: transform;
}
.plant-card__frame {
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover; /* обрезка по слоту, как у одиночного фото */
}
/* Точки: снизу по центру, поверх фото; не перехватывают тап/свайп. */
.plant-card__dots {
position: absolute;
left: 0;
right: 0;
bottom: 6px;
display: flex;
justify-content: center;
gap: 5px;
pointer-events: none;
z-index: 2;
}
.plant-card__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
transition: background 0.15s;
}
.plant-card__dot.is-active {
background: var(--on-accent); /* точка НА ФОТО — белая в обеих темах */
}
/* Стрелки: по краям фото, компактнее базового gs-img-ctrl; скрыты на тач,
проявляются на hover десктопа. Не перекрывают угловые бейджи (те сверху).
Селекторы с префиксом .plant-card — чтобы перебить .gs-img-ctrl {width:44px},
объявленный ПОЗЖЕ с той же специфичностью (иначе стрелки остаются 44px). */
.plant-card .plant-card__nav {
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
z-index: 2;
opacity: 0;
pointer-events: none; /* скрытые стрелки не ловят тап (на тач всегда скрыты) */
transition: opacity 0.15s;
}
.plant-card .plant-card__nav--prev { left: 6px; }
.plant-card .plant-card__nav--next { right: 6px; }
/* Шеврон — пропорционально уменьшенному кружку (базовый 11px торчал бы). */
.plant-card .plant-card__nav--prev::before,
.plant-card .plant-card__nav--next::before {
width: 8px;
height: 8px;
border-top-width: 2px;
border-left-width: 2px;
}
.plant-card .plant-card__nav--prev::before { transform: translateX(1px) rotate(-45deg); }
.plant-card .plant-card__nav--next::before { transform: translateX(-1px) rotate(135deg); }
/* Стрелки видны ТОЛЬКО на устройствах с настоящим hover-курсором (десктоп).
На тач :hover эмулируется при свайпе → стрелки всплывали; жёстко гасим. */
@media (hover: hover) and (pointer: fine) {
.plant-card:hover .plant-card__nav { opacity: 0.9 !important; pointer-events: auto; }
}
/* Текстовый блок карточки */
.plant-card__info {
min-width: 0;
overflow: hidden;
}
.plant-card__header {
display: flex;
align-items: flex-start; /* листочки по ПЕРВОЙ строке названия (не baseline) */
justify-content: space-between;
gap: 4px;
margin-top: 8px;
}
/* Контейнер «название + тип» — до 2 строк. Обрезка через JS gsFitCardTitle:
режется ИМЯ (.plant-card__title) по словам с «…», ТИП (.plant-card__type) —
всегда целиком (входит в замер, поэтому не «отрывается» и не пропадает).
line-clamp НЕ используем — он ставит «…» в конце блока, т.е. на тип.
max-height + overflow — предохранитель до срабатывания JS. */
.plant-card__title-wrap {
flex: 1;
min-width: 0;
font-size: 14px;
line-height: 1.3;
max-height: 2.6em;
overflow: hidden;
}
.plant-card__title {
font-weight: 600; /* название жирным; без nowrap — перенос на 2 строки */
}
.plant-card__type {
font-weight: 400;
color: var(--tg-hint); /* тип серым, инлайн сразу за названием */
text-transform: lowercase;
font-size: 13px; /* название рядом 14px → тип чуть мельче */
}
/* Цена 🌿 — белая плашка в правом-нижнем углу фото (внутри .plant-card__photo-wrapper).
Статус-бейдж — вверху-справа, точки карусели — снизу-по-центру: угол свободен. */
.plant-card__leaf {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 3;
background: var(--surface-2);
color: var(--text-primary);
font-size: 12.5px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
/* Правый паддинг меньше левого: у листа справа есть внутренний воздух глифа,
иначе справа визуально больше места, чем слева от числа. */
padding: 4px 7px 4px 9px;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.plant-card__meta {
font-size: 12px;
color: var(--tg-hint);
margin-top: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Владелец (только Стол): мини-аватар + имя */
.plant-card__owner {
display: flex;
align-items: center;
gap: 5px;
margin-top: 6px;
min-width: 0;
font-size: 12px;
color: var(--text-primary);
}
.plant-card__owner-avatar { flex-shrink: 0; }
.plant-card__owner-name {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plant-card__delivery {
font-size: 11px;
color: var(--tg-hint);
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Стол — сетка */
.plants-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
/* Зазор = высота градиента .feed-toolbar::after (8px): первая плитка стартует
ПОД градиентом при покое (не «заходит под фильтр»), уходит под него при прокрутке. */
padding-top: 8px;
padding-bottom: calc(var(--scroll-end-gap) + 20px); /* FAB кнопка добавить растение + зазор */
}
/* === Полоса «сторис»-подсказок (скролл-контент над лентой, НЕ sticky) === */
.stories-strip {
display: flex;
align-items: flex-start;
gap: 12px;
/* #feedStories — flex-child колоночного #tab-feed.tab--active (flex-column):
БЕЗ flex:0 0 auto он сжимался (flex-shrink:1) до высоты ~строки → кружки 60px
обрезались. Не сжимаемся + min-height под содержимое (кружок 60 + подпись +
вертикальный паддинг). */
flex: 0 0 auto;
min-height: 94px;
overflow-x: auto;
overflow-y: hidden; /* только горизонтальный скролл; высота фикс — контент не клипуется */
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
/* Вертикальный паддинг вмещает кружок 60px + подпись ЦЕЛИКОМ (без обрезки дуг).
Боковой 12px — инсет как у грида/тулбара. */
padding: 10px 12px 8px;
}
.stories-strip::-webkit-scrollbar { display: none; }
.stories-strip.hidden { display: none; }
/* === Единая inline-SVG иконка (Tabler outline). Пути — в спрайте app.html; цвет —
currentColor (наследует цвет текста/кнопки). Модификаторы success/danger — на
этапе статусов. === */
.gs-icon {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
flex: none;
}
/* Валюта листочков — СПЛОШНАЯ заливка, сочно-зелёный; выровнен под текст рядом с числом.
Переопределяет .gs-icon (fill:none; stroke:currentColor). */
.gs-leaf {
color: var(--leaf);
fill: currentColor;
stroke: none;
/* Рядом с числом: пробела в разметке НЕТ, зазор даёт margin. Выравнивание —
дефолтное (baseline), у нового глифа своя посадка. */
margin-left: 0.1em;
vertical-align: -0.2em; /* 0 = baseline, минус = ниже */
}
/* На зелёных подложках — белый лист (вена-прорезь читается зелёным фоном, как иконка). */
.gs-leaf--on-dark { color: #fff; }
/* Цветовые модификаторы иконок (тинт через currentColor). */
.gs-icon--green { color: #3B6D11; }
.gs-icon--red { color: var(--brand-red); }
.gs-icon--olive { color: var(--accent); }
.gs-icon--muted { color: var(--tg-hint); }
/* Залитый глиф (например #i-leaf-fill как категорийная иконка) — fill вместо stroke. */
.gs-icon--fill { fill: currentColor; stroke: none; }
/* Центрируем svg-иконку в кружках категории/причины (был текстовый эмодзи). */
.leaves-tx__icon, .notif-item__icon { display: flex; align-items: center; justify-content: center; }
/* Standalone-иконки (не рядом с числом) — без левого зазора. */
.topbar-balance-icon .gs-leaf,
.leaves-balance-icon .gs-leaf,
.feed-paywall__icon .gs-leaf { margin-left: 0; }
/* Баланс-баннер листочков: приподнять белый лист (flex-центр → двигаем transform'ом). */
.leaves-balance-icon .gs-leaf { transform: translateY(-3px); }
/* Бренд-вордмарк (топбар/онбординг используют gsLeaf) — своя посадка листа, НЕ
зависит от валютного .gs-leaf (-0.2em). Раскрутить отдельно от валюты. */
.topbar-brand .gs-leaf,
.ob-header__brand .gs-leaf { vertical-align: -0.1em; }
/* Валютный margin-left (0.1em) у .gs-leaf в вордмарке даёт асимметрию: у правого
листа отступ попадает МЕЖДУ текстом и листом (правый зазор больше), у левого —
наружу. Гасим — зазор с обеих сторон задаётся только пробелами в разметке. */
.topbar-brand .gs-leaf,
.ob-header__brand .gs-leaf,
.stories-viewer__brand .gs-leaf { margin-left: 0; }
/* Симметрия бренд-вордмарка: ЛЕВЫЙ листок (первый в обёртке) зеркалим — оба листа
смотрят единообразно. Правый не трогаем. Splash/auth (хардкод SVG в app.html) —
зеркалятся инлайном (рендерятся до загрузки ui.css). */
.topbar-brand .gs-leaf:first-child,
.ob-header__brand .gs-leaf:first-child,
.stories-viewer__brand .gs-leaf:first-child { transform: scaleX(-1); }
/* === Полноэкранный просмотрщик сторис (по образцу gs-lightbox) === */
.stories-viewer {
position: fixed;
inset: 0;
z-index: 10500;
display: none; /* JS ставит flex при открытии */
align-items: center;
justify-content: center;
/* Тёмный backdrop по краям — на десктопе рамка уже вьюпорта, по бокам затемнение. */
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.2s ease;
/* iOS: долгий тап не должен выделять текст / открывать callout-меню. */
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.stories-viewer.visible { opacity: 1; }
/* Рамка-«телефон»: ограничивает контент по ширине и центрирует. Все абсолютные дети
(bg/scrim/segments/close/zone/actions) анкорятся к ней. На мобильном max-width=100%
→ визуально как раньше (во всю ширину). Оливковый фон живёт в рамке. */
.stories-viewer__frame {
position: relative;
width: 100%;
max-width: 480px; /* = колонка приложения (.page-inner/.topbar-container/.feed-modal) */
height: 100%;
margin: 0 auto;
overflow: hidden;
background: var(--accent);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
box-sizing: border-box;
}
.stories-viewer__segments {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 10px);
left: 12px;
right: 12px;
display: flex;
gap: 4px;
z-index: 3;
}
.stories-viewer__seg {
flex: 1;
height: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.35);
overflow: hidden;
}
.stories-viewer__seg-fill {
height: 100%;
width: 0;
background: var(--on-accent);
border-radius: 2px;
}
.stories-viewer__seg-fill.is-active {
width: 0;
animation: storiesFill linear forwards; /* duration задаёт JS */
}
@keyframes storiesFill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
.stories-viewer__seg-fill.is-active { animation: none; width: 100%; }
}
.stories-viewer__close {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 22px);
right: 12px;
z-index: 4;
color: var(--on-accent);
}
/* Тап-зоны листания — под контентом-карточкой, но над фоном. НЕ накрывают верхнюю
полосу (сегменты + крестик, ~56px), иначе next-зона перехватывала бы тап по крестику. */
.stories-viewer__zone {
position: absolute;
top: 56px;
bottom: 0;
width: 35%;
z-index: 1;
}
.stories-viewer__zone--prev { left: 0; }
.stories-viewer__zone--next { right: 0; }
.stories-viewer__card {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 340px;
color: var(--on-accent);
pointer-events: none; /* тапы проходят к зонам листания */
}
.stories-viewer__icon {
width: 88px;
height: 88px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
margin-bottom: 20px;
}
.stories-viewer__icon svg { width: 44px; height: 44px; }
.stories-viewer__title {
font-size: 22px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 12px;
}
.stories-viewer__text {
font-size: 15px;
line-height: 1.5;
opacity: 0.92;
}
/* Бренд-вордмарк внутри бренд-кадра сторис (brand:true) — крупнее заголовка,
листья по бокам чуть приподняты (как в топбар-вордмарке). */
.stories-viewer__brand { font-size: 24px; }
.stories-viewer__brand .gs-leaf { vertical-align: -0.1em; }
/* Тело бренд-кадра: tagline по центру + список выгод слева. */
.stories-brand__body { opacity: 1; }
.stories-brand__tagline {
font-size: 20px;
font-weight: 500;
line-height: 1.3;
margin-bottom: 22px;
}
/* Подводка обычного кадра с features (текст по центру над списком). */
.stories-viewer__lead {
margin-bottom: 22px;
}
.stories-brand__features {
display: flex;
flex-direction: column;
gap: 16px;
text-align: left;
}
.stories-brand__feature {
display: flex;
align-items: center;
gap: 12px;
}
.stories-brand__feature-icon {
flex-shrink: 0;
display: inline-flex;
color: var(--on-accent);
}
.stories-brand__feature-icon svg { width: 24px; height: 24px; }
.stories-brand__feature-text {
font-size: 15px;
line-height: 1.35;
}
/* Фон-фото кадра + затемняющий scrim (только для кадров с фото). */
.stories-viewer__bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Затемнение фото — РАВНОМЕРНЫЙ оверлей (легко подкрутить: --stories-scrim) +
лёгкий доп-градиент снизу под CTA. Цель — белый текст читается по всей высоте. */
.stories-viewer { --stories-scrim: rgba(10, 14, 10, 0.45); }
.stories-viewer__scrim {
position: absolute;
inset: 0;
z-index: 0;
display: none;
background:
linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%),
var(--stories-scrim);
}
.stories-viewer.has-image .stories-viewer__scrim { display: block; }
/* С фото — контент ПО ЦЕНТРУ рамки (бренд/tagline/выгоды/CTA), иконку не показываем.
Контент-флекс живёт в рамке → justify-content на ней, не на оверлее. */
.stories-viewer.has-image .stories-viewer__frame {
justify-content: center;
/* Тёмная подложка под #storiesBg — до готовности фото (и на первый показ) видна
она, а не оливковый фон рамки → нет зелёной вспышки при листании. */
background-color: rgba(10, 14, 10, 1);
}
.stories-viewer.has-image .stories-viewer__card { margin-bottom: 0; }
.stories-viewer.has-image .stories-viewer__text { opacity: 1; }
/* Значок темы над заголовком (только has-image): frosted-кружок с media.icon.
:not([hidden]) — чтобы пустой/скрытый значок не рисовал кружок. */
.stories-viewer.has-image .stories-viewer__badge:not([hidden]) {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0 auto 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 0.5px solid rgba(255, 255, 255, 0.25);
}
.stories-viewer__badge[hidden] { display: none; }
.stories-viewer.has-image .stories-viewer__badge svg {
width: 22px;
height: 22px;
color: #fff;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}
/* Читаемость на фото: тень белому контенту (только has-image; затемнение
--stories-scrim не трогаем). Заголовок/бренд, tagline, текст, подписи выгод, ссылки. */
.stories-viewer.has-image .stories-viewer__title,
.stories-viewer.has-image .stories-viewer__brand,
.stories-viewer.has-image .stories-brand__tagline,
.stories-viewer.has-image .stories-viewer__lead,
.stories-viewer.has-image .stories-viewer__text,
.stories-viewer.has-image .stories-brand__feature-text {
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* Иконки выгод (SVG stroke) — лёгкий drop-shadow для единообразия. */
.stories-viewer.has-image .stories-brand__feature-icon svg,
.stories-viewer.has-image .stories-viewer__brand .gs-leaf {
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}
/* Вторичная кнопка «Подробнее» — лёгкая тёмная заливка + тень подписи (не теряется
на среднем тоне). CTA «К столу» (сплошная) не трогаем. */
.stories-viewer.has-image .stories-viewer__link {
background: rgba(0, 0, 0, 0.22);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
/* Панель действий: ряд вторичных ссылок над основной кнопкой. */
.stories-viewer__actions {
position: absolute;
left: 20px;
right: 20px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
z-index: 4;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: auto; /* карточка pointer-events:none; кнопки — кликабельны */
}
/* Вторичные ссылки — ПОД текстом внутри карточки (карточка pointer-events:none →
ссылкам возвращаем pointer-events:auto). */
.stories-viewer__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 18px;
pointer-events: auto;
}
.stories-viewer__links:empty { display: none; margin-top: 0; }
.stories-viewer__link {
padding: 8px 14px;
border-radius: var(--radius-pill);
border: 1.5px solid rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.14);
color: var(--on-accent);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.stories-viewer__link:active { opacity: 0.8; }
.stories-viewer__cta {
width: 100%;
padding: 14px 16px;
border: none;
border-radius: var(--radius-pill);
background: var(--on-accent);
color: var(--accent);
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.stories-viewer__cta:active { opacity: 0.85; }
.stories-strip__item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
width: 64px;
padding: 0;
border: none;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.stories-strip__ring {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
background: var(--surface-2);
border: 2px solid var(--accent);
transition: transform 0.12s;
}
/* Просмотренная история — приглушённое серое кольцо (акцент снят). */
.stories-strip__ring.is-seen {
color: var(--tg-hint);
border-color: var(--border-subtle);
}
.stories-strip__item:active .stories-strip__ring { transform: scale(0.94); }
.stories-strip__label {
font-size: 11px;
line-height: 1.2;
color: var(--text-primary);
text-align: center;
max-width: 64px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* === Горизонтальный инсет контента скроллеров (полоса прокрутки — у края экрана) ===
.page-inner больше не даёт боковой отступ; 12px висят на ВНУТРЕННЕМ контенте, а сами
скроллеры (.tab--active, .plant-detail-scroll, .admin-page) — во всю ширину. */
/* Feed: тулбар (sticky) и грид — прямые дети скроллера, обёртки нет → инсет на каждом. */
#tab-feed .feed-toolbar { padding-left: 12px; padding-right: 12px; }
#tab-feed .plants-grid { padding-left: 12px; padding-right: 12px; }
/* Deals/Settings/Admin: инсет на внутреннем контейнере (sticky-тулбар внутри — вдвигается
вместе с контентом, поэтому фон не «выглядывает» по краям). */
#dealsContainer { padding-left: 12px; padding-right: 12px; }
#settingsContainer { padding-left: 12px; padding-right: 12px; }
#adminContent { padding-left: 12px; padding-right: 12px; }
#helpContainer, #helpArticleContainer, #legalDocContainer { padding-left: 12px; padding-right: 12px; }
/* Notifications (.notifications-container) уже имеет собственный 12px — не трогаем. */
/* Истинно пустой стол (нет карточек, без фильтра/поиска) — центрируем блок
по вертикали в доступной высоте фида. Класс вешается только в этом режиме
(plants_feed.js), обычная сетка карточек и no-results не затрагиваются. */
.plants-grid--empty-center {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding-bottom: 0;
}
/* Базовый бейдж статуса (форма, топбар и т.п.) */
.plant-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: var(--radius-pill);
font-size: 12px;
line-height: 1.2;
font-weight: 500;
background: var(--tg-secondary-bg);
color: var(--tg-text);
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Бейдж статуса поверх фото в карточке */
.plant-card .plant-status-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 3; /* над слайд-треком фото (wrapper position:relative) — иначе уходит за фото */
background: rgba(0, 0, 0, 0.55);
color: var(--on-accent);
font-weight: 600; /* заметнее на фото (база 500) */
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* Варианты статусов — пастельная система (совпадает с deal-status-badge).
Специфичность 0,2,0 — перебивает .plant-card .plant-status-badge (тёмный оверлей). */
.plant-card .plant-status-badge--new,
.plant-card .plant-status-badge--hidden,
.plant-card .plant-status-badge--deleted,
.plant-card .plant-status-badge--mine { /* «Моё» на столе — тот же тёмный фростед, что «Удалено» */
background: rgba(0, 0, 0, 0.6); /* тёмный фростед — читаемо на фото (серого цвета у статуса нет) */
color: var(--on-accent);
}
/* Цвета статусов — палитра профиля (--status-*). На карточке бейдж лежит НА ФОТО,
поэтому заливка СПЛОШНАЯ цветом статуса + белый текст (пастельные rgba-тона не
читались на фото). Баннер (на белом) остаётся пастельным — тот же оттенок. */
.plant-card .plant-status-badge--pending {
background: var(--status-pending);
color: var(--on-accent);
}
/* «Отдано» (completed) — ЗЕЛЁНЫЙ, как approved (читается как успех). Карточка бледнеет
(.plant-card--faded), но бейдж — на полной яркости (приглушаем не всю карточку, а
её внутренние блоки, см. ниже). */
.plant-card .plant-status-badge--approved,
.plant-card .plant-status-badge--completed {
background: var(--status-approved);
color: var(--on-accent);
}
/* Бледная карточка (профиль: Отдано/Удалено) — «этого растения по сути больше нет».
Приглушаем ФОТО и ТЕКСТ, но НЕ статус-бейдж: opacity на всей .plant-card притушила бы
и бейдж (child не может быть ярче faded-родителя), поэтому фейдим внутренние блоки —
бейдж (прямой ребёнок карточки, absolute) остаётся на полной яркости и «выныривает». */
.plant-card--faded .plant-card__photo-wrapper,
.plant-card--faded .plant-card__info {
opacity: 0.55;
}
.plant-card .plant-status-badge--reserved {
background: var(--status-purple); /* «Бронь» — как шаг сделки (deal-progress data-step=0) */
color: var(--on-accent);
}
.plant-card .plant-status-badge--rejected {
background: var(--status-rejected);
color: var(--on-accent);
}
/* Плитка модерации (admin) — бейдж статуса ИНЛАЙН в строке (не оверлей на фото):
берём ту же палитру --status-*, но БЕЗ position:absolute из .plant-card. */
.admin-plant-card .plant-status-badge--pending { background: var(--status-pending); color: var(--on-accent); }
.admin-plant-card .plant-status-badge--rejected { background: var(--status-rejected); color: var(--on-accent); }
.admin-plant-card .plant-status-badge--approved,
.admin-plant-card .plant-status-badge--completed { background: var(--status-approved); color: var(--on-accent); }
.admin-plant-card .plant-status-badge--reserved { background: var(--status-purple); color: var(--on-accent); }
/* Комментарий модератора на карточке в профиле */
.plant-card__reject-note {
font-size: 11px;
color: var(--brand-red);
line-height: 1.3;
padding: 4px 2px 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* =========================
ДЕТАЛЬ РАСТЕНИЯ
========================= */
/* Визуально скрытый, но В ПОТОКЕ элемент. Для : iOS Safari у
инпута с display:none НЕ диспатчит change после выбора фото → файл не добавляется.
Этот приём (в потоке, 1×1px, прозрачный) — инпут кликается программно и надёжно
шлёт change. НЕ использовать display:none/visibility:hidden на file-инпутах. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
/* Скролируемая область */
#screen-plant.tab--active,
#screen-plant-detail.tab--active {
overflow: hidden;
position: relative;
}
.plant-detail-scroll {
flex: 1;
overflow-y: auto;
/* -webkit-overflow-scrolling:touch убран — legacy (на совр. iOS momentum и так есть),
и он якорь caret-офсета: iOS считал позицию каретки полей относительно этого
momentum-скроллера. Скролл остаётся плавным. */
/* БЕЗ padding-top: он сдвигал пин sticky-головы (#psStickyHead top:0) на 8px вниз
(WebKit sticky уважает padding скроллера) → между топбаром и баннером прозрачная
полоса, где при скролле просвечивал контент. At-rest-зазор голова→карточка даёт
.plant-detail-main-card margin-top:8px. Паттерн Стола: скроллер без верхнего
паддинга, зазор — на контенте (.plants-grid padding-top:8px). */
padding-bottom: var(--scroll-end-gap);
/* Клавиатурный резерв — через scroll-padding (не content-padding): нативный
scrollIntoView оставляет место под клавиатуру снизу для нижних полей (описание)
БЕЗ пустого контента (не нужен focusout-возврат, пустоты при закрытой клавиатуре
нет). Верх — под sticky-голову #psStickyHead (JS уточняет scrollPaddingTop по её
реальной высоте на focusin; здесь дефолт-фолбэк). */
scroll-padding-bottom: 340px;
scroll-padding-top: 56px;
}
/* Скроллер во всю ширину (полоса у края); h-инсет 12 — на его прямых детях.
Баннер владельца так вдвинут → его border-right/::before не заходят на полосу. */
#psScrollArea > #psFormError,
#psScrollArea > #psStickyHead,
#psScrollArea > .plant-detail-main-card,
#psScrollArea > #psSkeleton,
#psScrollArea > #psErrorState {
margin-left: 12px;
margin-right: 12px;
}
/* Sticky-голова (баннер + строка правки) держится единым блоком при скролле.
padding-top:8px — ОПАКОВЫЙ зазор над баннером (фон tg-bg = фон страницы → читается
как отступ от топбара, симметрично зазору голова→карточка снизу). Он ВНУТРИ sticky-
элемента, поэтому при закреплении едет вместе с головой и накрывает уезжающий контент
(в отличие от padding-top скроллера, который сдвигал пин и оставлял прозрачную щель).
padding-bottom:2px — опаковый зазор под блоком. */
#psStickyHead {
position: sticky;
top: 0;
z-index: 10;
background: var(--tg-bg);
padding-top: 8px;
padding-bottom: 2px;
}
/* Плавный градиент под sticky-головой (как .feed-toolbar::after на Столе):
высота 8px, начинается от низа головы (top:100%), едет с ней при скролле;
контент уходит под кнопки с мягким растворением. pointer-events:none. */
#psStickyHead::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(to bottom, var(--tg-bg), transparent);
pointer-events: none;
}
/* Строка правки [Отмена][Сохранить]. Кнопки берут flex:1 + order из
#screen-plant .secondary/.primary-button (Отмена белая слева, Сохранить зелёная
справа). Свёрнута в view (0 высоты, «спрятана» под баннером); при входе в
edit/create РАЗВОРАЧИВАЕТСЯ ВНИЗ из-под баннера — плавно (max-height+opacity). */
.ps-edit-actions {
display: flex;
gap: 8px;
justify-content: center; /* по центру строки (не на всю ширину) */
max-height: 0;
opacity: 0;
margin-top: 0;
overflow: hidden;
pointer-events: none;
transition: max-height 0.24s ease, opacity 0.18s ease, margin-top 0.24s ease;
}
#screen-plant[data-mode="edit"] .ps-edit-actions,
#screen-plant[data-mode="create"] .ps-edit-actions {
max-height: 56px;
opacity: 1;
margin-top: 12px;
pointer-events: auto;
}
/* Кнопки правки — размер как «На модерацию» в баннере (8px 12px / 13px), по
контенту (flex:0 0 auto), НЕ на всю ширину. ID-специфичность #screen-plant —
перебить базовые .secondary/.primary-button (flex:1 + крупный паддинг). */
#screen-plant .ps-edit-actions .secondary-button,
#screen-plant .ps-edit-actions .primary-button {
flex: 0 0 120px; /* равная ширина обеих кнопок (Отмена = Сохранить) */
padding: 8px 12px;
font-size: 13px;
text-align: center;
}
/* «Сохранить» — белая (не зелёная), как «Отмена»; отличается только жирностью. */
#screen-plant .ps-edit-actions .primary-button {
background: var(--surface-2);
color: var(--text-primary);
border: 1.5px solid var(--border-subtle);
font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
.ps-edit-actions { transition: none; }
}
/* Основная карточка: фото + текст вместе */
.plant-detail-main-card {
background: var(--tg-secondary-bg);
border-radius: var(--radius-lg);
/* Зазор = высота градиента #psStickyHead::after (8px): карточка при покое
стартует ПОД градиентом (не «заходит за него»), уходит под него на скролле. */
margin-top: 8px;
margin-bottom: 10px;
padding: 10px;
}
/* ── Состояния экрана растения (loading/data/error) ────────────
#screen-plant — ПЕРЕИСПОЛЬЗУЕМЫЙ статичный экран, как #tab-deal-detail:
узлы захвачены в модульные $ps*-переменные (plant_screen.js), поэтому
setListState сюда направлять нельзя (host.innerHTML="" их уничтожит).
Состояние — data-state на секции; скелетон и error — сиблинги.
data-mode (view/edit/create) живёт отдельно и с data-state не конфликтует. */
#psSkeleton,
#psErrorState {
display: none;
}
#screen-plant[data-state="loading"] .plant-detail-main-card,
#screen-plant[data-state="loading"] #psStickyHead,
#screen-plant[data-state="loading"] #psFormError,
#screen-plant[data-state="error"] .plant-detail-main-card,
#screen-plant[data-state="error"] #psStickyHead,
#screen-plant[data-state="error"] #psFormError,
#screen-plant[data-state="loading"] #psActions,
#screen-plant[data-state="error"] #psActions {
display: none !important;
}
#screen-plant[data-state="loading"] #psSkeleton {
display: block;
}
#screen-plant[data-state="error"] #psErrorState {
display: block;
}
/* Фото-враппер — как на столе */
.plant-detail-photo-main {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-sm);
position: relative; /* якорь для инлайн-стрелок .ps-main-nav */
}
/* Нет реальных фото — компактная заглушка вместо высокого слота 4/3 (иначе вокруг
иконки много пустоты). Фикс. невысокий слот + иконка нормального размера. */
.plant-detail-photo-main--empty {
aspect-ratio: auto;
height: 150px;
background-size: 128px auto; /* иконка ×2 (крупнее, но слот всё ещё компактный) */
}
/* Инлайн-стрелки листания главного фото — кружок общий .gs-img-ctrl, вид 1-в-1
с лайтбоксом. Видимость — JS (psRefreshMainNav). */
.ps-main-nav {
display: none; /* показ управляется JS (psRefreshMainNav) */
top: 50%;
transform: translateY(-50%);
}
.ps-main-nav--prev { left: 8px; }
.ps-main-nav--next { right: 8px; }
/* object-position и translateZ — сверх .gs-photo-slot__img (антиалиасинг на iOS) */
.plant-detail-photo-main img {
object-position: center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Плавное пролистывание главного фото (psSlideMainPhoto): transition в классе,
инлайном меняется только transform → надёжный запуск в WebView. */
.plant-detail-photo-main img.ps-photo-slide {
transition: transform 260ms ease;
}
/* Миниатюры внутри карточки */
.plant-detail-thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 8px 0;
scrollbar-width: none;
}
.plant-detail-thumbs::-webkit-scrollbar {
display: none;
}
/* Обёртка миниатюры (view и edit): держит рамку/активное состояние; в edit —
якорь для крестика удаления. Внутри — img .plant-detail-thumb на всю площадь. */
.ps-thumb {
position: relative;
width: 58px;
height: 58px;
flex-shrink: 0;
border-radius: var(--radius-xs);
border: 2px solid transparent;
cursor: pointer;
overflow: hidden;
transition: border-color 0.12s;
box-sizing: border-box;
}
.ps-thumb--active {
border-color: var(--accent);
}
/* Миниатюра-img внутри обёртки: заполняет её, рамку/скругление держит .ps-thumb. */
.plant-detail-thumb {
width: 100%;
height: 100%;
border: none;
border-radius: 0;
}
/* Крестик удаления фото (edit) — в правом-верхнем углу миниатюры (как онбординг) */
.ps-thumb-del {
position: absolute;
top: 2px;
right: 2px;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(25, 25, 25, 0.65);
color: var(--on-accent);
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
-webkit-tap-highlight-color: transparent;
}
/* Плашка «добавить фото» — миниатюра-кнопка с пунктиром в конце ряда (edit) */
.ps-thumb-add {
border-style: dashed;
border-color: var(--border-subtle);
background: var(--surface-1);
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
}
.ps-thumb-add:active { background: var(--input-bg); }
.ps-thumb-add__plus {
font-size: 26px;
font-weight: 300;
line-height: 1;
color: var(--tg-hint);
}
/* Ошибка «нужно фото»: НЕ обводим весь ряд миниатюр (убираем рамку контейнера от
.ps-field--error), обводим ТОЛЬКО кнопку «+» — сплошной красной (не пунктиром). */
.plant-detail-thumbs.ps-field--error {
border: none !important;
}
.plant-detail-thumbs.ps-field--error .ps-thumb-add {
border-style: solid;
border-color: var(--brand-red);
}
/* Текстовая часть карточки */
/* Группа «название → город → участник» — плотно, ровный зазор 5px.
Отступ сверху (после фото) — на .plant-detail-info; между строками — pad-top 5px. */
.plant-detail-info {
padding: 10px 0 0;
}
.plant-detail-title-row {
display: flex;
align-items: flex-start; /* листочки по ПЕРВОЙ строке названия (не baseline) */
justify-content: space-between;
gap: 10px;
}
.plant-detail-title {
font-size: 18px;
font-weight: 700;
line-height: 1.25;
flex: 1;
min-width: 0;
}
/* View-название — до 2 строк с обрезкой «…» (edit — input #psTitle) */
.plant-detail-title-view {
flex: 1;
min-width: 0;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.plant-detail-leaf {
font-size: 16px;
font-weight: 700;
line-height: 1.25; /* выравнивание по первой строке названия */
white-space: nowrap;
flex-shrink: 0;
}
/* Город — отдельная строка без заголовка (view = текст, edit = пикер) */
.plant-detail-city-row {
padding: 5px 0 0; /* 5px зазор к названию, без линии */
}
/* Edit/create: инлайн-поля (подчёркивание) название и город слипались — добавляем зазор. */
#screen-plant[data-mode="edit"] .plant-detail-city-row,
#screen-plant[data-mode="create"] .plant-detail-city-row {
margin-top: 8px;
}
.plant-detail-city-row #psCityView {
font-size: 14px;
font-weight: 400; /* обычный вес, как участник/описание; жирным только название */
}
/* Участник — отдельная строка (view чужих): аватар + имя + стрелка → профиль */
.plant-detail-seller-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0 0; /* 5px зазор к городу; линии после города НЕТ */
margin-top: 0;
cursor: pointer;
}
.plant-detail-seller-row:active { opacity: 0.6; }
.plant-detail-seller__avatar { flex-shrink: 0; }
.plant-detail-seller__name {
flex: 0 1 auto; /* по контенту (не тянем во всю строку) — шеврон вплотную к имени;
может ужаться с «…» при длинном имени */
min-width: 0;
font-size: 14px;
font-weight: 400; /* обычный вес, как город/описание; жирным остаётся только название */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.plant-detail-seller__chevron {
flex-shrink: 0;
color: var(--tg-hint);
font-size: 18px;
font-weight: 400;
}
/* ── Общая info-сетка (2 колонки) ─────────────────────────────
Разделители рисует ЗАЗОР сетки поверх фона-подложки контейнера, а НЕ
бордюры ячеек по nth-child. Не зависит от высоты ячеек (stretch их равняет)
и от числа видимых ячеек — скрытие ячейки не ломает решётку (в отличие от
nth-child-бордюров). Внешние рамки (верх/низ) — НЕ здесь: gap рисует только
внутренние линии, внешние остаются на конкретном контейнере по потребности.
Применяется на экране растения и в деталях сделки. */
.gs-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(var(--tint-rgb), 0.07);
}
.gs-info-cell {
background: var(--tg-secondary-bg);
}
.plant-detail-params {
/* grid/gap/подложка — из .gs-info-grid; здесь внешняя верхняя рамка + вылет за
padding карточки. margin-top 12px — заметное отделение группы (название/город/
участник) от грида тип/доставка, одинаково с участником и без него. */
border-top: 1px solid var(--tint-neutral);
margin: 12px -10px 0;
}
.plant-detail-param {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px 4px;
}
/* Раскладка: Город/Участник — на всю ширину; Тип|Передача — в ряд.
Спан-ячейки заполняют сетку целиком → нет пустых клеток (серых пятен),
линии-разделители (gap+подложка) ровные. Внешние края — padding 12, у
границы центрального дивайдера — 8. */
.plant-detail-param--full {
grid-column: 1 / -1;
padding-left: 12px;
padding-right: 12px;
}
.plant-detail-param--col1 {
padding-left: 12px;
padding-right: 8px;
}
.plant-detail-param--col2 {
padding-left: 8px;
padding-right: 12px;
}
.plant-detail-param--link {
cursor: pointer;
position: relative;
}
.plant-detail-param--link:active {
opacity: 0.6;
}
.plant-detail-param--link .plant-detail-param__value::after {
content: " ›";
color: var(--tg-hint);
font-size: 16px;
font-weight: 400;
}
.plant-detail-param__label {
/* Единая типографика подписей с секционными (.pf-section__label): 11/700/0.06 */
font-size: 11px;
font-weight: 700;
color: var(--tg-hint);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.plant-detail-param__value {
font-size: 14px;
font-weight: 600;
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
/* View-значение параметра плашкой (Тип/Передача) — вид выбранного чипа, некликабельный */
#screen-plant .ps-view-chip {
display: inline-flex;
align-items: center;
/* Отступы между плашками — margin (как в edit): flex row-gap в этом WebView
не работает, при переносе плашки слипались бы. Контейнеры #psStageView/
#psDeliveryView гасят свой gap (ниже), чтобы горизонталь не удвоилась. */
margin: 0 4px 4px 0;
padding: 4px 10px;
border-radius: var(--radius-pill);
/* Прозрачная рамка 1.5px — чтобы размер совпадал с edit-плашкой (.delivery-chip
имеет border:1.5px), иначе view-плашка была бы на 3px мельче. */
border: 1.5px solid transparent;
background: var(--accent);
color: var(--on-accent);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
/* Контейнеры view-плашек (Тип/Доставка): gap:0 — отступы даёт margin плашек;
компенсируем нижний margin последнего ряда. */
#psStageView, #psDeliveryView {
gap: 0;
margin-bottom: -4px;
}
.plant-detail-description {
font-size: 14px;
line-height: 1.55;
color: var(--tg-text);
margin: 0 -10px;
padding: 10px 12px 4px;
}
.plant-detail-description:not(:empty) {
border-top: 1px solid var(--tint-neutral);
}
/* ===== Inline-edit поля (этап 2/3 слияния view+edit) =====
ОБЩИЙ приём (класс .ps-inline-field, не id — чтобы подключать будущие поля
тип/локация/передача): вид просмотра в обоих режимах, редактируемость edit
показывает ТОЛЬКО тонкое нижнее подчёркивание. Никакого бокса (рамка/фон/
радиус/паддинг убраны — перебивают общие #screen-plant input/textarea).
border-bottom присутствует всегда (в view прозрачный) → лейаут не прыгает
при флипе view↔edit; в edit — приглушённый, на фокусе — акцентный. */
#psTitle.plant-detail-title {
font-size: 18px; font-weight: 700; line-height: 1.25;
}
#psDesc.plant-detail-description {
font-size: 14px; line-height: 1.55;
width: 100%; resize: none; overflow: hidden; /* высоту ведёт JS (psAutosize) */
}
/* В edit пустое поле — видимая область ввода. КЛЮЧЕВОЕ: перебить
`.plant-detail-description:empty { display:none }` (0,2,0) — пустой textarea
matches :empty (value не создаёт дочерних узлов) и иначе скрыт в edit тоже.
display:block (спец. 2,2,0) возвращает поле; min-height — «пол», psAutosize растит выше. */
#screen-plant[data-mode="edit"] #psDesc.plant-detail-description,
#screen-plant[data-mode="create"] #psDesc.plant-detail-description { display: block; min-height: 40px; }
#screen-plant .ps-inline-field {
background: transparent;
border: none;
border-bottom: 1px solid transparent; /* резерв под подчёркивание — без прыжка */
border-radius: 0;
padding: 0 0 4px;
min-height: 0;
box-shadow: none;
color: var(--tg-text);
box-sizing: border-box;
/* readonly-контрол не «серый мёртвый» */
opacity: 1;
-webkit-text-fill-color: currentColor;
}
/* EDIT/CREATE: приглушённое подчёркивание; фокус — акцент (чуть заметнее, без рефлоу) */
#screen-plant[data-mode="edit"] .ps-inline-field,
#screen-plant[data-mode="create"] .ps-inline-field {
border-bottom-color: var(--border-subtle);
}
#screen-plant[data-mode="edit"] .ps-inline-field:focus,
#screen-plant[data-mode="create"] .ps-inline-field:focus {
border-bottom-color: var(--accent);
box-shadow: inset 0 -1px 0 0 var(--accent);
}
/* Крестик очистки названия (edit/create) — абсолютом справа строки названия */
.plant-detail-title-row { position: relative; }
#screen-plant[data-mode="edit"] #psTitle.ps-inline-field,
#screen-plant[data-mode="create"] #psTitle.ps-inline-field { padding-right: 30px; } /* место под крестик 28px */
/* Крестик очистки названия — единый вид с крестиком города (.gs-loc-btn[clear]):
центрирован по вертикали, бокс 28×28, глиф 16×16, цвет --tg-hint. */
.ps-inline-clear {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
line-height: 1;
opacity: 1;
color: var(--tg-hint); /* SVG stroke=currentColor — как крестик города */
}
.ps-inline-clear svg { width: 16px; height: 16px; } /* единый крестик 16×16, как у города (clear) и auth-полей */
.ps-inline-clear:active { opacity: .6; }
.plant-detail-description:not(:empty)::before {
content: "ОПИСАНИЕ";
display: block;
font-size: 11px;
font-weight: 500;
color: var(--tg-hint);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 3px;
}
/* Блок описания: верхний разделитель + выравнивание по инсету ячеек (как
.plant-detail-params). Пустое описание скрывается КЛАССОМ .is-empty (textarea
всегда :empty — .value без дочерних узлов; тоггл в psFillViewData/psReset),
и только в view — в edit/create блок всегда виден (подпись + поле ввода). */
.plant-detail-desc-block {
border-top: 1px solid var(--tint-neutral);
/* margin-top:0 — граница-разделитель прижата к низу инфо-сетки, чтобы
вертикаль между Тип|Передача касалась нижней горизонтали. Отступ
контента — паддингом (12px), а не margin. */
margin: 0 -10px 0;
padding: 10px 12px 0; /* единый шаг над разделителем (ровно с seller/params) */
}
/* Инсет/разделитель теперь на блоке → у самой textarea гасим собственный
bleed-margin (-10px) и верхнюю рамку, чтобы не задваивать. */
.plant-detail-desc-block .plant-detail-description { margin: 0; border-top: none; }
#screen-plant:not([data-mode="edit"]):not([data-mode="create"]) .plant-detail-desc-block.is-empty {
display: none;
}
/* Блок продавца (отдельная карточка) */
/* Кнопки снизу: Написать + Забрать */
.plant-detail-actions {
/* Постоянный бар действий, прижат к низу #screen-plant (positioned-предок на
полную layout-высоту). ABSOLUTE, НЕ fixed — при открытой клавиатуре бар
уходит к layout-низу ЗА клавиатуру, а не всплывает над ней (как .bottom-nav).
Общий для edit/create ([Сохранить][Отмена]) и view (Забронировать/К сделке). */
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
gap: 10px;
/* Градиентный фон transparent → --tg-bg: контент доскролливается ПОД кнопками
с мягким затуханием (не сплошная панель). pointer-events:none на баре пускает
тапы сквозь прозрачную зону к контенту; кнопки перекрывают auto (ниже).
Низ фиксированный 10px; бар стоит НАД навигацией (safe-area даёт сам нав). */
/* Равные внутренние отступы сверху/снизу вокруг кнопок (единый шаг 12px). */
padding: 12px 12px;
background: linear-gradient(to bottom, transparent 0%, var(--tg-bg) 38%);
pointer-events: none;
}
.plant-detail-actions > button {
pointer-events: auto;
}
.plant-chat-btn {
flex-shrink: 0;
padding: 13px 16px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--border-subtle);
background: var(--surface-2);
color: var(--text-primary);
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: 0.12s;
white-space: nowrap;
}
.plant-chat-btn:active {
background: var(--border-subtle);
transform: scale(0.97);
}
/* .take-button слит с .primary-button (единый вид primary) — см. секцию
«#screen-plant .primary-button». Отдельного стиля больше нет. */
/* Заблокированные кнопки формы (на время запроса) — видимо неактивны,
не молчаливо мертвы. Реэнейбл снимается в finally psHandleSubmit. */
#screen-plant .primary-button:disabled,
#screen-plant .take-button:disabled,
#screen-plant .secondary-button:disabled {
opacity: 0.55;
cursor: default;
}
/* =========================
ЕДИНЫЙ ЭКРАН РАСТЕНИЯ (ps-)
========================= */
/* Видимость по режиму */
.ps-edit-section { display: none; }
#screen-plant[data-mode="edit"] .ps-edit-section,
#screen-plant[data-mode="create"] .ps-edit-section { display: block; }
/* View: скрыть edit-контролы с бОльшей специфичностью — иначе #screen-plant
.delivery-chips {display:flex} (1,1,0) перебивает .ps-edit-section (0,1,0)
и чипы Тип/Передача просвечивали бы в view. В edit/create селектор не матчится. */
#screen-plant:not([data-mode="edit"]):not([data-mode="create"]) .ps-edit-section { display: none !important; }
#screen-plant[data-mode="edit"] .ps-view-section,
#screen-plant[data-mode="create"] .ps-view-section { display: none !important; }
/* Подсказка «Не знаете точное название?» под полем названия (edit/create) —
свёрнуто строка-ссылка (пунктирное подчёркивание, без шеврона), тап разворачивает. */
.ps-title-hint { margin-top: 6px; }
.ps-title-hint__toggle {
display: inline-flex; /* иконка + текст по вертикальному центру (без съезда) */
align-items: center;
gap: 5px;
background: none;
border: none;
padding: 0;
font: inherit;
font-size: 13px;
color: var(--accent);
cursor: pointer;
text-align: left;
/* пунктир только под текстом — SVG-иконка (replaced) подчёркивание не рендерит */
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.ps-title-hint__icon { flex: 0 0 auto; }
/* Единое окно одобрения растения (admin.js showAdminApproveSheet) — центральная
модалка gsModal: название + тип + листочки. Ширина на всю карточку модалки.
margin-bottom — зазор до ряда кнопок (.gs-modal__actions — сосед после body),
чтобы чипы «Листочки» не липли к «Отмена»/«Одобрить». Scoped, общий .gs-modal не трогаем. */
.admin-approve { display: flex; flex-direction: column; width: 100%; margin-bottom: 18px; }
.admin-approve__label {
font-size: 13px;
font-weight: 600;
color: var(--tg-text);
margin: 12px 0 6px;
}
.admin-approve__label:first-child { margin-top: 0; }
.admin-approve__namewrap { width: 100%; } /* обёртка поля названия (.gs-caret-fix → CB каретки) */
/* Окно причины отклонения (admin.js showAdminRejectSheet) — центральная модалка
gsModal, симметрично одобрению. Поле — textarea в обёртке .gs-caret-fix. */
.admin-reject { display: flex; flex-direction: column; width: 100%; margin-bottom: 18px; }
.admin-reject__wrap { width: 100%; }
.admin-reject__input { resize: none; min-height: 76px; line-height: 1.4; }
.admin-reject .gs-field-error { margin-top: 6px; }
/* Формы админ-модалок (эконом-редактор, «Изменить баланс») — центральная gsModal.
Зазор до ряда кнопок — как в .admin-approve/.admin-reject. Поля в .gs-caret-fix. */
.admin-modal-form { display: flex; flex-direction: column; width: 100%; margin-bottom: 18px; }
.admin-modal-form__wrap { width: 100%; }
.admin-modal-form__hint { font-size: 12px; color: var(--tg-hint); margin-bottom: 6px; }
.admin-approve .gs-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Чипы Тип/Листочки НА БЕЛОМ фоне модалки — не должны сливаться (у .gs-chip фон ivory).
Невыбранные: белый фон + чёткий бордер; выбранный: зелёный #5B7A39 + белый текст. */
.admin-approve .gs-chip {
background: var(--surface-2);
border-color: rgba(var(--border-field-rgb), 0.55);
/* Крупнее для попадания пальцем (тип и листочки — одинаковая высота). */
padding: 9px 14px;
font-size: 15px;
}
.admin-approve .gs-chip--active {
background: var(--accent); /* #5B7A39 */
border-color: var(--accent);
color: var(--on-accent);
}
/* Листочки (0–5) — крупнее для попадания пальцем: 6 равных чипов на всю ширину
ряда (flex:1), больше вертикальный padding и шрифт. Цифра по центру. */
.admin-approve #apLeaf { gap: 6px; }
.admin-approve #apLeaf .gs-chip {
flex: 1 1 0;
min-width: 0;
padding: 10px 0;
font-size: 16px;
text-align: center;
}
.ps-title-hint__body {
margin-top: 6px;
font-size: 13px;
line-height: 1.4;
color: var(--tg-hint);
}
/* Кнопка-карандаш редактирования */
.ps-pencil-btn {
background: none;
border: none;
padding: 2px 4px;
cursor: pointer;
font-size: 17px;
flex-shrink: 0;
opacity: 0.45;
line-height: 1;
-webkit-tap-highlight-color: transparent;
}
.ps-pencil-btn:active { opacity: 0.75; }
/* Строка название + бейдж в режиме редактирования */
.ps-edit-title-row {
padding: 14px 16px 0;
}
/* Единый блок фото (view + edit): большое главное фото + миниатюры.
Инсет как у .plant-detail-desc-block/ячеек (12px): подпись «Фото», главное
фото и миниатюры выровнены по левому краю с «Город»/«Описание». */
.ps-photos {
margin: 0 -10px;
padding: 0 12px;
}
/* В edit/create режиме кнопки могут переносится (submit + save + delete) */
#screen-plant .plant-detail-actions {
flex-wrap: wrap;
}
/* В edit/create кнопки [Отмена][Сохранить] переехали в sticky-голову сверху,
нижнего бара нет → нижний резерв ставит psUpdateScrollPadding (--scroll-end-gap). */
/* ===== Баннер владельца (view-режим) ===== */
/* Цвета и форма берутся из pf-info-banner--* — здесь только позиционирование и кнопки */
/* Вертикальная раскладка: строка-статус сверху на всю ширину, кнопки —
рядом ПОД текстом. Селектор .pf-info-banner.ps-owner-banner (0,2,0) —
выше специфичности базового .pf-info-banner (0,1,0), который идёт ПОЗЖЕ в
файле и иначе перебивал бы align-items:center → дети центрировались по
горизонтали (в column cross-axis = горизонталь). Не трогая другие баннеры. */
.pf-info-banner.ps-owner-banner {
margin: 0; /* нижний зазор даёт padding-bottom обёртки #psStickyHead (опаковый) */
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 12px; /* зазор строка статуса ↔ кнопки (единый 12px-ритм баннеров) */
padding: 12px 14px; /* чуть просторнее базовых 10px по вертикали */
/* Скругление как у других блоков (radius-md из базового .pf-info-banner).
Sticky перенесён на обёртку #psStickyHead (баннер + строка правки держатся
единым блоком). position:relative — контекст для ::before-подложки (inset:0
якорится к баннеру, а не к обёртке). Непрозрачную подложку/углы даёт ::before. */
position: relative;
/* Цвет статуса единым акцентом --banner-accent-rgb (R,G,B — задаёт модификатор):
боковые полосы 5.25px (левая+правая) — плотный акцент (верх/низ без рамки).
Фон везде белый (непрозрачная подложка ::before). ТОЛЬКО .ps-owner-banner
(0,2,0) — другие .pf-info-banner (форм-ошибки) не трогаем. */
border: none;
border-left: 5.25px solid rgb(var(--banner-accent-rgb, 216, 216, 216));
border-right: 5.25px solid rgb(var(--banner-accent-rgb, 216, 216, 216));
}
/* Акцент статуса (R,G,B) — единый источник фона/рамки/полосы (см. базовое правило).
Цвет ТЕКСТА статуса не трогаем (оставляем как у бейджа карточки). Только
owner-banner — глобальные .pf-info-banner--* (psFormError и др.) не трогаем. */
.ps-owner-banner.pf-info-banner--warn {
--banner-accent-rgb: 125, 96, 54; /* На модерации — охра = --status-pending (#7D6036), как бейдж */
--banner-status-color: var(--status-pending-text); /* цветом только название статуса */
}
.ps-owner-banner.pf-info-banner--ok {
--banner-accent-rgb: 91, 122, 57; /* Опубликовано — olive */
--banner-status-color: var(--status-approved-text);
}
.ps-owner-banner.pf-info-banner--error {
--banner-accent-rgb: 227, 42, 32; /* Отклонено — красный */
--banner-status-color: var(--status-rejected-text);
}
.ps-owner-banner.pf-info-banner--purple {
--banner-accent-rgb: 121, 71, 166; /* В брони — фиолетовый (= --status-purple #7947A6) */
--banner-status-color: var(--status-purple-text);
}
.ps-owner-banner.pf-info-banner--done {
--banner-accent-rgb: 52, 121, 70; /* Завершено — зелёный = --status-approved (#347946), как completed-бейдж профиля */
--banner-status-color: var(--status-approved-text);
}
/* Черновик/Скрыто (neutral): акцент — тёмно-серый (#8C8C8C → 140,140,140),
как neutral-статус на плитке в профиле. Полоса серая, текст не переопределяем. */
.ps-owner-banner.pf-info-banner--neutral {
--banner-accent-rgb: 140, 140, 140; /* тёмно-серый (--banner-frame-strong #8C8C8C), как neutral на плитке */
}
/* Непрозрачная белая подложка — контент не просвечивает при sticky. Цвет статуса
несут только рамка и левая полоса; фон везде белый. Рисуется в ::before (negative-z)
— фон самого элемента был бы скрыт этим же ::before. Скруглена как баннер (inherit). */
.ps-owner-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--surface-2);
}
/* Шапка баннера: только строка статуса. ⋮ вынесена position:absolute (см. ниже),
поэтому НЕ раздувает высоту шапки — кнопки поднимаются вплотную к тексту.
padding-right — резерв под абсолютную ⋮, чтобы длинный статус не заходил под неё. */
.ps-owner-banner__head {
align-self: stretch;
padding-right: 30px;
}
/* ⋮ баннера — точь-в-точь как в профиле (.profile-settings-btn): SVG из трёх
залитых кружков, тёмный (--brand-black) с opacity .6, absolute в правом углу. */
.ps-owner-banner__menu {
position: absolute;
top: 6px;
right: 6px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
line-height: 1;
color: var(--text-primary);
opacity: 0.6;
transition: opacity 0.15s;
}
.ps-owner-banner__menu svg { display: block; }
.ps-owner-banner__menu:active { opacity: 0.3; }
.ps-owner-banner__text {
align-self: stretch; /* на всю ширину, чтобы text-align:left был виден */
margin-bottom: 0;
font-size: 13px;
line-height: 1.4;
text-align: left;
color: var(--text-primary); /* комментарий (не жирный) — чёрный; цвет только у названия статуса */
}
/* Кнопки баннера — компактнее нижнего бара (#psActions); ряд под текстом,
по контенту слева. danger — красная ссылка на всю ширину отдельной строкой. */
.ps-owner-banner__actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-self: stretch; /* на всю ширину баннера, чтобы центрирование было видно */
justify-content: center; /* кнопки по центру */
gap: 8px;
}
.ps-owner-banner__btn {
flex: 0 0 auto;
padding: 8px 12px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 500;
/* secondary по умолчанию: белая с серой рамкой (как .secondary-button) */
color: var(--text-primary);
border: 1.5px solid var(--border-subtle);
background: var(--surface-2);
cursor: pointer;
white-space: nowrap;
line-height: 1;
transition: background 0.12s, transform 0.12s;
}
.ps-owner-banner__btn:active { background: var(--border-subtle); transform: scale(0.97); }
/* primary — ВСЕГДА зелёная (цвет не зависит от статуса/панели) */
.ps-owner-banner__btn--primary {
color: var(--on-accent);
font-weight: 600;
border: none;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}
.ps-owner-banner__btn--primary:active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
/* danger — красная ссылка на всю ширину отдельной строкой (как .danger-button) */
.ps-owner-banner__btn--danger {
flex-basis: 100%;
order: 2;
padding: 6px 0;
border: none;
background: transparent;
color: var(--danger);
font-size: 13px;
font-weight: 500;
text-align: center;
text-decoration: underline;
text-decoration-color: rgba(227, 42, 32, 0.35);
text-underline-offset: 2px;
}
.ps-owner-banner__btn--danger:active { background: transparent; transform: none; opacity: 0.55; }
/* Жирное слово-статус в тексте баннера */
.ps-owner-banner__text strong {
font-weight: 700;
color: var(--banner-status-color, var(--text-primary)); /* название статуса — в цвете статуса (neutral → чёрный) */
}
/* Оверлей успеха (поверх экрана, не ломает DOM формы) */
.ps-success-overlay {
position: absolute;
inset: 0;
background: var(--tg-bg);
z-index: 10;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
/* =========================
МОИ СДЕЛКИ — СПИСОК
========================= */
/* Вкладки роли (Получаю / Отдаю) — стиль с подчёркиванием */
.deals-role-tabs {
display: flex;
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
margin-bottom: 2px;
}
.deals-role-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 8px 10px;
font-size: 15px;
font-weight: 500;
color: var(--tg-hint);
text-align: center;
cursor: pointer;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.deals-role-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.deals-role-tab__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 600;
line-height: 1;
background: var(--border-subtle);
color: var(--tg-hint);
transition: background 0.15s, color 0.15s;
}
.deals-role-tab.active .deals-role-tab__count {
background: var(--accent);
color: var(--on-accent);
}
/* Кастомный список фильтра в шите */
.gs-filter-list {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0 -4px;
}
.gs-filter-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.gs-filter-item:active {
background: rgba(var(--tint-rgb), 0.05);
}
.gs-filter-item--active {
background: rgba(91, 122, 57, 0.10);
}
.gs-filter-item__body {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.gs-filter-item__label {
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
}
.gs-filter-item--active .gs-filter-item__label {
font-weight: 600;
color: var(--accent);
}
.gs-filter-item__desc {
font-size: 13px;
color: var(--tg-hint);
}
.gs-filter-item__check {
font-size: 17px;
font-weight: 600;
color: var(--accent);
flex-shrink: 0;
width: 20px;
text-align: center;
}
/* Список и пустой стейт */
.deals-list {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 8px; /* зазор под градиент .feed-toolbar::after — первая плитка не под фильтром */
padding-bottom: var(--scroll-end-gap);
}
/* ── Единый компонент пустых состояний (empty states) ──────
Три размера: default (lifecycle + кнопка), compact (no-results + ссылка),
inline (одна строка). Без иконок-эмодзи. См. webapp/empty_state.js. */
.gs-empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 24px 32px;
gap: 0;
}
.gs-empty-state__title {
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.gs-empty-state__desc {
font-size: 14px;
color: var(--tg-hint);
line-height: 1.45;
margin-bottom: 20px;
max-width: 260px;
}
.gs-empty-state__btn {
padding: 13px 24px;
border-radius: var(--radius-pill);
background: var(--accent);
color: var(--on-accent);
font-size: 15px;
font-weight: 600;
border: none;
cursor: pointer;
box-shadow: none;
}
/* compact — результат фильтра/поиска: тише заголовок, подсказка со ссылкой */
.gs-empty-state--compact {
padding: 32px 16px;
grid-column: 1 / -1; /* растянуть на всю ширину grid-стола */
}
.gs-empty-state--compact .gs-empty-state__title {
font-size: 15px;
font-weight: 500;
color: var(--tg-hint);
margin-bottom: 4px;
}
.gs-empty-state--compact .gs-empty-state__desc {
margin-bottom: 0;
max-width: none;
line-height: 1.5;
}
.gs-empty-state__link {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.gs-empty-state__link:active {
opacity: 0.6;
}
/* inline — одна строка (чат, история, уведомления, дропдаун) */
.gs-empty-state--inline {
display: block;
text-align: center;
color: var(--tg-hint);
font-size: 14px;
padding: 32px 16px;
}
/* Чат — плейсхолдер центрируется по всей высоте области сообщений.
Узел СТРОИТ setListState прямо в #chatMessages (host), отдельного #chatEmpty
в разметке нет: он лежал ВНУТРИ host и уничтожался его же innerHTML="".
display здесь, чтобы показ давал flex, а не block. */
.chat-messages > .gs-empty-state--inline {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: 20px;
}
/* ── Скелетоны загрузки ────────────────────────────────────
Заглушки формы контента: скелетон занимает тот же контейнер,
что и данные → переход loading→data без сдвига. Приглушённый
серый в тон surface + мягкий pulse по opacity (layout не трогает).
Типы: plant-card (сетка стола/профиля), deal-row (сделки),
line-row (листочки, уведомления). См. webapp/empty_state.js. */
.gs-skel {
animation: gs-skel-pulse 1.4s ease-in-out infinite;
pointer-events: none;
}
.gs-skel__box,
.gs-skel__line,
.gs-skel__thumb {
background: var(--input-bg);
}
.gs-skel__line {
height: 12px;
border-radius: var(--radius-sm);
}
/* Карточка сетки: квадрат-картинка + 2 строки текста (как .plant-card) */
.gs-skel--plant-card {
background: var(--tg-secondary-bg);
border: var(--card-border);
border-radius: 16px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.gs-skel--plant-card .gs-skel__box {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--radius-lg);
flex-shrink: 0;
}
/* Строка сделки: миниатюра + две строки + короткий хвост справа */
.gs-skel--deal-row {
display: flex;
align-items: center;
gap: 12px;
height: 72px;
padding: 0 12px;
background: var(--tg-secondary-bg);
border: var(--card-border);
border-radius: var(--radius-lg);
}
.gs-skel--deal-row .gs-skel__thumb {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
flex-shrink: 0;
}
/* Каркас карточки пользователя в профиле (только на время загрузки) */
.gs-skel--profile-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
margin-bottom: 16px;
background: var(--tg-secondary-bg);
border: var(--card-border);
border-radius: var(--radius-xl);
}
.gs-skel--profile-card .gs-skel__avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--input-bg);
flex-shrink: 0;
}
/* Экран растения: фото 4/3 (форма .plant-detail-photo-main) + три строки */
.gs-skel--plant-detail {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
background: var(--tg-secondary-bg);
border-radius: var(--radius-lg);
}
.gs-skel--plant-detail .gs-skel__box {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-sm);
}
/* Шапка сделки: квадрат 80×80 + две строки (форма .deal-info-card__plant) */
.gs-skel--deal-header {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
}
.gs-skel--deal-header .gs-skel__thumb {
width: 80px;
height: 80px;
border-radius: var(--radius-md);
flex-shrink: 0;
}
/* Простая строка: одна длинная + одна короткая линия */
.gs-skel--line-row {
display: flex;
align-items: center;
height: 56px;
padding: 0 4px;
}
.gs-skel__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
@keyframes gs-skel-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.gs-skel { animation: none; }
}
/* Горизонтальная карточка сделки */
/* ── Горизонтальная плитка сделки ──────────────────────────────
Фото слева → инфо (flex:1, справа резерв 72px под листочки/статус) →
листочки (absolute, по центру) + статус (absolute, верх-право). */
.deal-card {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
background: var(--tg-secondary-bg);
border: var(--card-border);
border-radius: var(--radius-lg);
cursor: pointer;
min-width: 0;
transition: transform 0.12s ease-out;
}
.deal-card:active { transform: scale(0.98); }
.deal-card__photo {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: var(--radius-md);
align-self: flex-start; /* фото к верху → точка непрочитанного ложится на угол одинаково */
}
.deal-card__photo-img { width: 100%; height: 100%; object-fit: cover; }
.deal-card__info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Терминальные сделки (Получено/Отменено) — «этой сделки по сути больше нет».
Гасим ТОЛЬКО фото и инфо; .deal-card__right (статус/листочки/дата) и шеврон
остаются яркими и выныривают (тот же приём, что .plant-card--faded в профиле). */
.deal-card--faded .deal-card__photo,
.deal-card--faded .deal-card__info {
opacity: 0.55;
}
/* Правый столбец: статус → листочки → дата, выравнивание по правому краю */
.deal-card__right {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
min-width: 0;
}
/* title-wrap переиспользован из плитки растения (2 строки, «…»); гасим его flex:1,
чтобы в колонке инфо он не растягивался. */
.deal-card .plant-card__title-wrap { flex: 0 0 auto; }
.deal-card__city {
font-size: 12px;
color: var(--tg-hint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.deal-card__partner {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
margin-top: 2px;
font-size: 12px;
color: var(--text-primary);
}
.deal-card__partner-avatar { flex-shrink: 0; }
.deal-card__partner-name {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Листочки — в правом столбце */
.deal-card__leaves {
font-size: 14px;
font-weight: 700;
white-space: nowrap;
color: var(--text-primary);
}
/* Статус — solid-плашка в правом столбце (вид как profile plant-status-badge) */
.deal-card__status {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 3px 8px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 600;
line-height: 1.2;
color: var(--on-accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.deal-card__status--orange { background: var(--status-pending); } /* Ожидает */
.deal-card__status--blue { background: var(--status-reserved); } /* В пути */
.deal-card__status--green { background: var(--status-approved); } /* Завершено */
.deal-card__status--gray { background: rgba(0, 0, 0, 0.55); } /* Отменено */
/* Бейдж статуса сделки */
.deal-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.deal-status-badge--purple {
background: rgba(175, 82, 222, 0.12);
color: var(--status-purple);
}
.deal-status-badge--orange {
background: rgba(255, 149, 0, 0.15);
color: var(--status-pending);
}
.deal-status-badge--blue {
background: rgba(0, 122, 255, 0.12);
color: var(--status-reserved);
}
.deal-status-badge--green {
background: rgba(91, 122, 57, 0.14);
color: var(--status-approved);
}
.deal-status-badge--gray {
background: rgba(var(--tint-rgb), 0.06);
color: var(--tg-hint);
}
.deal-card__date {
font-size: 11px;
color: var(--tg-hint);
white-space: nowrap;
}
/* Шеврон-намёк на переход в сделку (метрики как у .deal-more-chevron) */
.deal-card__chevron {
flex: 0 0 auto;
align-self: center;
font-size: 22px;
line-height: 1;
color: var(--tg-hint);
}
/* Точка непрочитанных — левый-верхний угол фото (правый угол занят статусом) */
.deal-card__unread-dot {
position: absolute;
top: 6px;
left: 6px;
z-index: 2;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent, #5B7A39);
border: 2px solid var(--tg-secondary-bg);
}
/* Кликабельная строка параметра (например, переход в профиль) */
.deal-param--tappable {
cursor: pointer;
transition: background 0.15s ease;
}
.deal-param--tappable:active {
background: rgba(91, 122, 57, 0.08);
}
/* Стрелка после имени партнёра — показывает что строка тапабельна */
.deal-partner-link::after {
content: ' ›';
color: var(--tg-hint);
font-size: 15px;
}
/* =========================
ЭКРАН СДЕЛКИ
========================= */
/* --- Прогресс --- */
/* Единая карточка: прогресс + статус + кнопка */
.deal-state-card {
position: relative; /* под абсолютное ⋮-меню */
background: var(--tg-secondary-bg);
border-radius: var(--radius-md);
flex-shrink: 0;
overflow: hidden;
/* Цветные боковые полосы по статусу — как у .ps-owner-banner (border-left/right в
цвет статуса через --banner-accent-rgb; верх/низ БЕЗ акцента). Ширина 5.25px —
та же, что у баннера растения (.ps-owner-banner). Значение rgb ставит inline
renderProgress (deal_detail.js) из ЕДИНОГО getDealStatusMeta → цвет = бейджу
списка. Дефолт (до установки) — серый. */
border-left: 5.25px solid rgb(var(--banner-accent-rgb, 140, 140, 140));
border-right: 5.25px solid rgb(var(--banner-accent-rgb, 140, 140, 140));
}
/* ⋮-меню сделки — в СТРОКЕ с комментарием (напротив хинта), не над прогрессом.
Вид как .ps-owner-banner__menu (три кружка, тёмный с opacity). */
.deal-actions__menu {
flex: 0 0 auto;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
line-height: 1;
color: var(--text-primary);
opacity: 0.6;
transition: opacity 0.15s;
}
.deal-actions__menu svg { display: block; }
.deal-actions__menu:active { opacity: 0.3; }
.deal-state-card__divider {
height: 1px;
background: rgba(var(--tint-rgb), 0.07);
margin: 0 14px;
}
.deal-progress {
display: flex;
align-items: center;
padding: 14px 16px 10px;
}
.deal-progress__step {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex: 1;
}
.deal-progress__dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--border-subtle);
border: 2px solid var(--border-subtle);
transition: background 0.2s, border-color 0.2s;
}
/* Цвет ТЕКУЩЕГО шага = цвет статуса (единая палитра getDealStatusMeta):
0 Бронь → фиолет, 1 Отправлено → синий, 2 Получено → зелёный. (Фикс: step1 был
оранжевым, step2 синим.) */
.deal-progress__step[data-step="0"] { --step-color: var(--status-purple); --step-glow: rgba(121, 71, 166, 0.25); }
.deal-progress__step[data-step="1"] { --step-color: var(--status-reserved); --step-glow: rgba( 61, 100, 143, 0.25); }
.deal-progress__step[data-step="2"] { --step-color: var(--status-approved); --step-glow: rgba( 52, 121, 70, 0.25); }
.deal-progress__step[data-step="3"] { --step-color: var(--status-approved); --step-glow: rgba( 52, 121, 70, 0.25); }
/* ГОТОВЫЕ шаги — зелёная точка с белой галочкой; линия к ним зелёная. */
.deal-progress__step--done .deal-progress__dot {
background: var(--status-approved);
border-color: var(--status-approved);
position: relative;
}
.deal-progress__step--done .deal-progress__dot::after {
content: "";
position: absolute;
left: 4px; top: 1px;
width: 3px; height: 6px;
border: solid var(--on-accent);
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
/* ТЕКУЩИЙ шаг — цвет статуса (--step-color); будущие — серый контур (дефолт .dot). */
.deal-progress__step--active .deal-progress__dot {
background: var(--step-color);
border-color: var(--step-color);
box-shadow: 0 0 0 3px var(--step-glow);
}
.deal-progress__label {
font-size: 11px;
color: var(--tg-hint);
white-space: nowrap;
transition: color 0.2s, font-weight 0.2s;
}
.deal-progress__step--done .deal-progress__label {
color: var(--status-approved); /* готово — зелёный (как точка-галочка) */
font-weight: 600;
}
.deal-progress__step--active .deal-progress__label {
color: var(--step-color); /* текущий — цвет статуса */
font-weight: 600;
}
.deal-progress__line {
flex: 1 1 auto;
height: 2px;
background: var(--border-subtle);
margin: 0 4px;
margin-bottom: 18px;
border-radius: 1px;
transition: background 0.2s;
}
.deal-progress__line--done {
background: var(--status-approved); /* пройденный участок — зелёный */
}
/* --- Финальный блок --- */
.deal-done-block {
padding: 10px 14px 14px;
text-align: center;
}
.deal-done-block__line {
font-size: 14px;
font-weight: 500;
}
.deal-done-block__line--ok { color: var(--status-approved); }
.deal-done-block__line--cancel { color: var(--tg-hint); }
/* ============================
УНИВЕРСАЛЬНЫЙ BOTTOM SHEET (GsSheet)
============================ */
/* ============================
Полноэкранный лайтбокс с зумом (gsLightbox)
z-index 10500 — выше sheet (10000), ниже toast/splash (99999).
============================ */
.gs-lightbox-overlay {
position: fixed;
inset: 0;
z-index: 10500;
background: rgba(0, 0, 0, 0.92);
display: none; /* flex ставит JS при open() */
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease;
touch-action: none;
overscroll-behavior: contain;
}
.gs-lightbox-overlay.visible {
opacity: 1;
}
.gs-lightbox__img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
touch-action: none;
will-change: transform;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
}
/* Стандартный кружок-контрол поверх изображений (лайтбокс И инлайн-фото):
единый вид (кружок 44×44 + CSS-глиф, font-independent). Текстовые символы
(✕ ‹ ›) в разметке скрыты (font-size:0), глиф рисуется бордером/штрихами →
центрируется надёжно, не зависит от шрифта WebView. Позиции — в контекстных
классах (лайтбокс — по краям экрана; инлайн — по краям фото). Новые
кружки-контролы над фото заводить через этот класс. */
.gs-img-ctrl {
position: absolute;
z-index: 1;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
font-size: 0; /* прячет текстовый глиф в разметке */
line-height: 1;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
/* --- глиф-chevron стрелок (border-top+border-left, поворот) --- */
.gs-img-ctrl--prev::before,
.gs-img-ctrl--next::before {
content: "";
display: block;
width: 11px;
height: 11px;
border-top: 2.5px solid var(--on-accent);
border-left: 2.5px solid var(--on-accent);
}
/* translateX компенсирует оптический вынос «остриё» chevron за геометрический центр */
.gs-img-ctrl--prev::before { transform: translateX(2px) rotate(-45deg); }
.gs-img-ctrl--next::before { transform: translateX(-2px) rotate(135deg); }
/* nav-кнопки лайтбокса показываются по JS (refreshNav) — display управляется JS */
.gs-lightbox__nav { display: none; }
/* --- глиф-крест close (два штриха ±45°, тем же приёмом) --- */
.gs-lightbox__close::before,
.gs-lightbox__close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2.5px;
background: var(--on-accent);
border-radius: 1px;
}
.gs-lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.gs-lightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* --- позиции --- */
.gs-lightbox__close { top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; }
.gs-lightbox__nav { top: 50%; transform: translateY(-50%); }
.gs-lightbox__nav--prev { left: calc(env(safe-area-inset-left, 0px) + 8px); }
.gs-lightbox__nav--next { right: calc(env(safe-area-inset-right, 0px) + 8px); }
.gs-lightbox__counter {
position: absolute;
bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: none; /* показ управляется JS (refreshNav) */
padding: 4px 12px;
border-radius: var(--radius-pill);
background: rgba(0, 0, 0, 0.45);
color: var(--on-accent);
font-size: 13px;
line-height: 1.4;
}
/* Формовые классы .gs-sheet-* (label/input/textarea) остались от компонента
нижнего шита (удалён в фазе 3) — переиспользуются контентом центральной
модалки gsModal. Оболочка шита (.gs-sheet-overlay/.gs-sheet/__*/-btn) удалена. */
/* Подпись внутри контента */
.gs-sheet-label {
font-size: 13px;
color: var(--tg-hint);
text-align: center;
margin-bottom: 10px;
}
/* Текстовые поля ввода */
.gs-sheet-input {
width: 100%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: 15px;
font-family: inherit;
background: var(--surface-2);
color: var(--text-primary);
outline: none;
transition: border-color 0.15s;
-webkit-appearance: none;
display: block;
}
.gs-sheet-input:focus {
border-color: var(--accent);
}
/* Тумблер начислить/списать в админском шите изменения баланса */
.gs-leaf-adjust__toggle {
display: flex;
gap: 8px;
}
.gs-leaf-adjust__sign {
flex: 1;
padding: 10px 12px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--tg-hint);
font-size: 14px;
font-family: inherit;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.gs-leaf-adjust__sign.selected {
border-color: var(--accent);
color: var(--accent);
background: rgba(91, 122, 57, 0.10);
font-weight: 600;
}
.gs-leaf-adjust__error {
margin-top: 8px;
min-height: 16px;
font-size: 13px;
color: var(--brand-red);
}
/* Textarea */
.gs-sheet-textarea {
width: 100%;
min-height: 90px;
padding: 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: 15px;
font-family: inherit;
resize: none;
box-sizing: border-box;
background: var(--surface-2);
color: var(--text-primary);
outline: none;
transition: border-color 0.15s;
display: block;
}
.gs-sheet-textarea:focus {
border-color: var(--accent);
}
/* Список опций (pickOption → _adminPickOptionModal) */
.gs-options-list {
display: flex;
flex-direction: column;
gap: 8px;
margin: 4px 0;
}
.gs-option-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.gs-option-item.selected {
border-color: var(--accent);
background: rgba(91, 122, 57, 0.06);
}
.gs-option-item:active:not(.selected) {
background: var(--surface-1);
}
.gs-option-dot {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid var(--border-subtle);
flex-shrink: 0;
transition: border-color 0.12s, background 0.12s;
}
.gs-option-item.selected .gs-option-dot {
border-color: var(--accent);
background: var(--accent);
}
.gs-option-item__label {
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
}
.gs-option-item__desc {
font-size: 12px;
color: var(--tg-hint);
margin-top: 2px;
}
/* Дни — пресеты (pickDays) */
.gs-days-presets {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.gs-days-preset {
flex: 1;
padding: 11px 8px;
border: 1.5px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--surface-2);
font-size: 14px;
font-weight: 500;
cursor: pointer;
text-align: center;
color: var(--text-primary);
transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.gs-days-preset.selected {
border-color: var(--accent);
background: rgba(91, 122, 57, 0.06);
color: var(--accent);
}
.gs-days-preset:active:not(.selected) {
background: var(--surface-1);
}
.deal-page {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
gap: 10px;
padding: 8px 12px 0; /* h-инсет 12 на контенте сделки (карточки/чат) */
}
/* ── Состояния экрана сделки (loading/data/error) ──────────────
#tab-deal-detail — ПЕРЕИСПОЛЬЗУЕМЫЙ статичный экран: его разметка не
пересоздаётся, а узлы захвачены в модульные const (deal_detail.js).
Поэтому setListState сюда направлять НЕЛЬЗЯ (он делает innerHTML="" и
уничтожил бы эти узлы). Состояние переключается data-атрибутом, а
скелетон и error живут отдельными узлами-сиблингами. */
#dealSkeleton,
#dealErrorState {
display: none;
}
.deal-page[data-state="loading"] > .deal-info-card,
.deal-page[data-state="loading"] > .deal-state-card,
.deal-page[data-state="loading"] > .deal-chat-container,
.deal-page[data-state="error"] > .deal-info-card,
.deal-page[data-state="error"] > .deal-state-card,
.deal-page[data-state="error"] > .deal-chat-container {
display: none;
}
.deal-page[data-state="loading"] > #dealSkeleton {
display: block;
}
.deal-page[data-state="error"] > #dealErrorState {
display: block;
}
/* Карточки-обёртки скелетона повторяют геометрию реальных (без сдвига) */
.deal-skel-card {
background: var(--tg-secondary-bg);
border: var(--card-border);
border-radius: var(--radius-lg);
margin-bottom: 10px;
padding: 4px 0;
}
/* Единый блок: растение + партнёр + доставка */
.deal-info-card {
background: var(--tg-secondary-bg);
border-radius: var(--radius-lg);
border: var(--card-border);
box-shadow: var(--shadow-card);
flex-shrink: 0;
overflow: hidden;
/* Вся плитка кликабельна (→ карточка растения). Press-фидбек тем же приёмом,
что .deal-param--tappable: лёгкий оливковый тон подложки, без scale/сдвигов. */
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.15s ease;
}
.deal-info-card:active {
background: rgba(91, 122, 57, 0.08);
}
/* Инфо-карточка сделки — по образцу детали растения: фото слева (к верху), колонка
(название+тип, город, участник), листочки справа по центру. Без статус-плашки. */
.deal-info-card__row {
display: flex;
gap: 12px;
padding: 12px;
align-items: flex-start; /* фото и колонка выравниваются к верху */
}
.deal-info-photo {
padding: 0;
border: none;
background: none;
cursor: pointer;
flex-shrink: 0;
}
.deal-info-photo:active { opacity: 0.7; }
.deal-plant-photo-wrapper {
width: 76px;
height: 76px;
border-radius: var(--radius-md);
flex-shrink: 0;
overflow: hidden;
}
.deal-plant-info {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Название + тип инлайн (жирное + серый), до 2 строк с «…». */
.deal-plant-title {
font-size: 16px;
font-weight: 600;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.deal-plant-type {
font-weight: 400;
color: var(--tg-hint);
text-transform: lowercase;
font-size: 14px; /* название рядом 16px → тип чуть мельче */
}
.deal-plant-meta {
font-size: 13px;
color: var(--tg-hint);
}
/* Участник — под городом: аватар + имя + шеврон, кнопка, без разделителя. */
.deal-partner-inline {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 2px;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
max-width: 100%;
}
.deal-partner-inline:active { opacity: 0.6; }
.deal-partner-avatar {
width: 22px;
height: 22px;
flex-shrink: 0;
display: block;
}
.deal-partner-name {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.deal-partner-chevron {
font-size: 18px;
color: var(--tg-hint);
line-height: 1;
flex-shrink: 0;
}
/* Листочки — справа, по центру по вертикали. */
.deal-plant-leaves {
font-size: 14px;
font-weight: 700;
color: var(--tg-hint);
flex-shrink: 0;
white-space: nowrap;
align-self: center;
}
/* Шеврон «открыть растение» — у правого края строки, по центру по вертикали.
Вся плитка кликабельна (onclick .deal-info-card → растение), шеврон лишь индикатор:
клик по нему всплывает к секции. align-self:center центрирует его в строке, не трогая
верхнее выравнивание фото/колонки (.deal-info-card__row align-items:flex-start). */
.deal-more-chevron {
flex: 0 0 auto;
align-self: center;
font-size: 22px;
line-height: 1;
color: var(--tg-hint);
}
/* Сохранён для админ-детали растения (admin.js), где ещё используется. */
.deal-info-card__divider {
height: 1px;
background: rgba(var(--tint-rgb), 0.07);
margin: 0 12px;
}
/* Плейсхолдер пустого чата */
/* .chat-empty унифицирован в .gs-empty-state--inline (.chat-messages > …, см. выше) */
/* Блок статуса + действий */
.deal-status-hint {
font-size: 13px;
color: var(--tg-hint);
margin: 0;
text-align: center;
}
.deal-plant-busy {
font-size: 13px;
color: var(--tg-hint);
margin: 0;
text-align: center;
}
/* Одна строка: подсказка (hint) слева, кнопка + ⋮ справа. Отмена ушла в ⋮-меню. */
.deal-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 12px 14px 14px;
}
.deal-status-hint,
.deal-plant-busy {
flex: 1;
min-width: 0;
text-align: left;
margin: 0;
}
/* Отмена — вторичная пилюля с красным текстом (secondary баннера + --danger). */
.deal-actions__cancel {
flex: 0 0 auto;
padding: 8px 12px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 500;
border: 1.5px solid var(--border-subtle);
background: var(--surface-2);
color: var(--danger);
cursor: pointer;
white-space: nowrap;
line-height: 1;
text-decoration: none;
transition: background 0.12s, transform 0.12s;
}
.deal-actions__cancel:active {
background: var(--border-subtle);
transform: scale(0.97);
}
/* Primary («Отправил»/«Получил») — акцентная пилюля (как .ps-owner-banner__btn--primary). */
.deal-btn {
flex: 0 0 auto;
padding: 8px 12px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 600;
border: none;
cursor: pointer;
white-space: nowrap;
line-height: 1;
color: var(--on-accent);
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
transition: transform 0.12s ease-out;
}
.deal-btn:active,
.deal-btn--primary:active {
transform: scale(0.97);
}
.deal-btn--primary {
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: var(--on-accent);
}
.deal-chat-title {
position: absolute;
top: 8px;
left: 10px;
font-size: 11px;
font-weight: 700;
color: var(--tg-hint);
text-transform: uppercase;
letter-spacing: 0.06em;
pointer-events: none;
z-index: 1;
}
.deal-chat-container {
position: relative;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
/* ===== Чат сделки ===== */
.chat-messages {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Единственный скроллер экрана: рубер-бэнд не уходит в документ, вертикальный пан
разрешён (при залоченном скролле документа — core.css). */
overscroll-behavior: contain;
touch-action: pan-y;
background: var(--tg-secondary-bg);
/* Композер теперь В ПОТОКЕ (не fixed) — нижний резерв не нужен. */
padding: 10px;
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 6px;
}
.chat-input-bar {
/* Композер В ПОТОКЕ: последний flex-элемент .deal-chat-container (после ленты
.chat-messages flex:1). Клавиатура открыта → layout сжимается
(interactive-widget=resizes-content, viewport-meta) → колонка укорачивается,
композер встаёт над клавиатурой БЕЗ JS. Ширина/центр — от .page-inner (480px). */
flex: 0 0 auto;
box-sizing: border-box;
background: var(--tg-bg);
/* Без safe-area снизу: закрыта клавиатура → нав снизу держит home-индикатор;
открыта → индикатора нет. Иначе композер стоял слишком далеко от нижней панели.
Низ 12px против верха 6px — компенсация: 51px-резерв .page-inner ставит бар
вплотную на нав, и симметричные 6px читались бы поджато. При открытой клавиатуре
добавка снимается (правило ниже) — поле стоит вплотную над клавиатурой. */
padding: 6px 0 12px;
}
/* Клавиатура открыта → нав скрыт, компенсация низа не нужна: поле вплотную над клавиатурой. */
body.gs-kb-open.page--deal-detail-active .chat-input-bar {
padding-bottom: 6px;
}
/* Клавиатура открыта → скрыть инфо/прогресс-карточки: чат занимает всю высоту, верх
не режется. ЧИСТО CSS по классу глобального детектора (фокус не роняет). */
body.gs-kb-open .deal-info-card,
body.gs-kb-open .deal-state-card {
display: none;
}
/* Чистый верх чата при печати: отступ от края экрана — видны верхние закругления
белой карточки ленты (.chat-messages скруглена --radius-md), не впритык к статус-бару. */
body.gs-kb-open.page--deal-detail-active .deal-chat-container {
margin-top: 8px;
}
/* Базовый пузырь */
.chat-message {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
max-width: 80%;
padding: 8px 10px;
border-radius: var(--radius-md);
font-size: 14px;
line-height: 1.35;
word-wrap: break-word;
word-break: break-word;
}
/* мои сообщения — справа, контент внутри тоже вправо */
.chat-message--me {
align-self: flex-end;
align-items: flex-end;
background: var(--accent-dark);
color: var(--on-accent);
}
/* чужие сообщения — слева */
.chat-message--other {
align-self: flex-start;
background: var(--tint-neutral);
color: var(--tg-text);
}
/* системное сообщение о переходе статуса */
.chat-system-msg {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
background: rgba(var(--accent-rgb), 0.08);
border-radius: var(--radius-sm);
padding: 5px 14px;
margin: 6px 0 2px;
flex-shrink: 0;
text-align: center;
max-width: 80%;
}
.chat-system-msg__text {
font-size: 12px;
color: var(--tg-hint);
}
.chat-system-msg__time {
font-size: 11px;
color: var(--tg-hint);
opacity: 0.7;
}
/* разделитель даты */
.chat-date-sep {
align-self: center;
font-size: 12px;
color: var(--tg-hint);
background: var(--tint-neutral-weak);
border-radius: var(--radius-pill);
padding: 3px 10px;
margin: 4px 0;
flex-shrink: 0;
}
/* время внутри пузыря */
.chat-message__time {
font-size: 11px;
opacity: 0.7;
margin-top: 2px;
align-self: flex-end;
}
/* Инпут */
.chat-input-row {
display: flex;
align-items: stretch;
gap: 8px;
}
.chat-input {
flex: 1;
padding: 10px 14px;
font-size: 15px;
line-height: 1.3;
border-radius: var(--radius-pill);
border: 1px solid var(--border-subtle);
background: var(--surface-2);
color: var(--tg-text);
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-input::placeholder {
color: var(--tg-hint);
}
.chat-input:focus {
border-color: var(--accent);
box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}
.chat-send-btn {
width: 42px;
flex: 0 0 auto;
border: none;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent), var(--accent-dark));
color: var(--on-accent);
font-size: 20px;
font-weight: 600;
cursor: pointer;
transition: transform 0.12s;
}
.chat-send-btn:active {
transform: scale(0.95);
}
/* ====== TOPBAR ====== */
.topbar-container {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: flex-end;
height: var(--app-header-height);
z-index: 1000;
background: var(--tg-bg);
border-bottom: 1px solid var(--tg-secondary-bg);
}
.topbar {
width: 100%;
max-width: 480px;
/* Отступ строки бренда/кнопок от верха — с учётом выреза (standalone-PWA) и в
браузере. Было 16px → над брендом оставалось много воздуха; 8px делает шапку
компактнее (высота ~94px), бренд не липнет к верху. env(safe-area-inset-top)
сохраняем — под вырезом отступ остаётся. Низ 10→8 — симметрично. */
padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
}
.topbar-brand {
text-align: center;
font-size: 24px;
font-weight: 700;
margin-bottom: 6px;
color: var(--text-primary);
position: relative;
margin-top: 4px; /* можно 0–6, но НЕ 20 */
}
/* Вторая строка (если используется) — заголовок страницы, баланс и т.п. */
.topbar-line {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
/* Подъём блока заголовка ближе к строке бренда: бренд (24px) центрируется в
строке высотой 38px (кнопки ←/☰) → под ним ~7px leading; −4px убирает лишний
зазор. Верхний край шапки и горизонтальный инсет 12px не трогаем. */
margin-top: -4px;
/* Без доп. инсета: заголовок/пилюля выровнены по контентной сетке 12px
(padding .topbar) — в линию с карточками стола и краями кнопок ←/☰.
Прежние 8px (выравнивание по центру глифа) уводили их на 20px, вразрез
с контентом. */
}
.topbar-back-btn {
flex-shrink: 0;
/* Резервируем место под кнопку всегда — даже когда её не видно (visibility:hidden),
чтобы заголовок не сдвигался при появлении/исчезновении «Назад». */
min-width: 24px;
background: none;
border: none;
padding: 0 4px 0 0;
font-size: 28px;
line-height: 1;
color: var(--accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.topbar-title-wrapper {
flex: 1 1 auto;
min-width: 0;
/* Лёгкое появление заголовка при смене экрана — скрывает момент перерисовки */
animation: gsTitleFade 150ms ease;
}
@keyframes gsTitleFade {
from { opacity: 0; }
to { opacity: 1; }
}
.topbar-page-title {
font-size: 20px;
font-weight: 700;
/* Manrope даёт больший leading, чем системный шрифт: line-height:normal раздувал
строчный бокс до 28px (у системного — 24px) → над «Стол» появлялся лишний
зазор под строкой бренда. 1.2 = бокс 24px, компактность как на системном. */
line-height: 1.2;
margin: 0 0 2px;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-page-subtitle {
font-size: 13px;
color: var(--tg-hint);
/* Резерв под одну строку: подзаголовок, появляющийся во второй фазе рендера
(роль сделки, статус растения), не сдвигает заголовок по вертикали. */
min-height: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-balance {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 3px;
margin-left: 12px;
background: var(--surface-2);
border: 1px solid rgba(var(--accent-rgb), 0.35);
border-radius: var(--radius-pill);
padding: 4px 8px 4px 10px;
cursor: pointer;
transition: background 0.15s ease, transform 0.12s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.topbar-balance:active {
background: rgba(var(--accent-rgb), 0.08);
transform: scale(0.96);
}
.topbar-balance-icon {
font-size: 16px;
/* Центрируем svg внутри спана → vertical-align детей (у листа .gs-leaf -0.12em,
у колокола .gs-icon middle) не влияет: лист и колокол на одном уровне.
Только плашка баланса; инлайн-в-тексте суммы/цена не затронуты. */
display: flex;
align-items: center;
}
.topbar-balance-value {
font-size: 15px;
font-weight: 600;
color: var(--tg-text);
}
.topbar-balance-arrow {
font-size: 18px;
line-height: 1;
color: var(--accent, #5B7A39);
font-weight: 400;
margin-left: 1px;
}
/* Верхняя строка топбара: [← назад] | [🌿 GreenSwap 🌿] | [☰ меню].
Grid auto|1fr|auto — бренд по центру независимо от видимости «Назад». */
.topbar-top {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 8px;
/* Строка бренда/кнопок вплотную к заголовку: заголовок не двигаем (его отступы
не трогаем) — сокращаем именно зазор между двумя строками шапки. */
margin-bottom: 0;
}
.topbar-top .topbar-brand { margin: 0; }
/* Парные круглые кнопки ← и ☰ (одинаковые). */
.topbar-circle-btn {
flex-shrink: 0;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: transparent;
color: var(--accent);
cursor: pointer;
position: relative;
box-shadow: none;
transition: background 0.15s ease, transform 0.12s ease;
padding: 0;
}
.topbar-circle-btn:active {
/* Лёгкий фидбек нажатия — временный, не постоянная плашка. */
background: rgba(var(--accent-rgb), 0.12);
transform: scale(0.94);
}
/* Красная точка непрочитанных на ☰. */
.topbar-menu-dot {
position: absolute;
top: 6px;
right: 6px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--brand-red);
border: 1.5px solid var(--on-accent);
box-sizing: border-box;
}
.topbar-menu-dot[data-zero="true"] { display: none; }
/* ── Меню-drawer (☰) ─────────────────────────────────────────────── */
.gs-mainmenu-overlay {
position: fixed;
inset: 0;
z-index: 10800; /* выше топбара (1000) и контента; ниже лайтбокса (10500? см. ниже) */
display: none;
}
.gs-mainmenu-overlay.visible { display: block; }
/* Во время закрытия (display ещё block, но класс снят) не перехватываем клики —
иначе гаснущая шторка блокировала бы модалку подтверждения выхода. */
.gs-mainmenu-overlay:not(.visible) { pointer-events: none; }
.gs-mainmenu-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.25s ease;
}
.gs-mainmenu-overlay.visible .gs-mainmenu-backdrop { opacity: 1; }
.gs-mainmenu-panel {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 78%;
max-width: 300px;
background: var(--surface-3);
box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
display: flex;
flex-direction: column;
padding: calc(env(safe-area-inset-top, 0px) + 16px) 8px calc(env(safe-area-inset-bottom, 0px) + 16px);
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.25s ease;
}
.gs-mainmenu-overlay.visible .gs-mainmenu-panel { transform: translateX(0); }
.gs-mainmenu-item {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 12px;
background: none;
border: none;
border-radius: var(--radius-md);
text-align: left;
cursor: pointer;
color: var(--text-primary);
transition: background 0.12s ease;
}
.gs-mainmenu-item:active { background: rgba(var(--accent-rgb), 0.08); }
.gs-mainmenu-item__icon {
flex-shrink: 0;
display: inline-flex;
color: var(--accent);
}
.gs-mainmenu-item__label {
flex: 1;
min-width: 0;
font-size: 16px;
font-weight: 600;
}
.gs-mainmenu-item__right {
flex-shrink: 0;
font-size: 15px;
font-weight: 600;
color: var(--accent);
display: inline-flex;
align-items: center;
}
.gs-mainmenu-item__badge {
flex-shrink: 0;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--danger);
color: var(--on-accent);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gs-mainmenu-item__badge[data-zero="true"] { display: none; }
.gs-mainmenu-item--danger { color: var(--danger); }
.gs-mainmenu-item--danger .gs-mainmenu-item__icon { color: var(--danger); }
/* Тонкий inset-разделитель между группами пунктов (зеркалит .gs-menu__divider). */
.gs-mainmenu-divider {
height: 0.5px;
background: var(--border-subtle);
margin: 6px 12px;
}
/* Толстый разделитель-полоса перед «Выйти» — отбивка фоном, как spacer в меню профиля. */
.gs-mainmenu-spacer {
height: 8px;
margin: 6px -8px;
background: rgba(var(--tint-rgb), 0.045);
border-top: 0.5px solid var(--border-subtle);
border-bottom: 0.5px solid var(--border-subtle);
}
/* Футер меню — прижат к низу панели: лист + версия по центру. */
.gs-mainmenu-footer {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
padding-top: 20px;
padding-bottom: 4px;
}
/* Фирменный лист — крупно, приглушённо-оливковый. */
.gs-mainmenu-footer__leaf {
line-height: 0;
color: var(--accent);
opacity: 0.3;
}
/* Номер версии — приглушённый, по центру под листом. */
.gs-mainmenu-version {
text-align: center;
font-size: 12px;
color: var(--tg-hint);
font-family: var(--font-mono); /* тех-подпись версии — моноширинный акцент */
}
/* =======================================================
ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ
======================================================= */
.profile-page {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px var(--scroll-end-gap); /* h-инсет 12 на контенте (скроллер — .tab--active — во всю ширину) */
}
.profile-user-card {
display: flex;
flex-direction: column;
padding: 12px 14px;
background: var(--surface-2);
border-radius: var(--radius-lg);
border: var(--card-border);
box-shadow: var(--shadow-card);
position: relative;
}
.profile-edit-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 14px;
cursor: pointer;
padding: 4px;
line-height: 1;
opacity: 0.55;
transition: opacity 0.15s;
}
.profile-edit-btn:active { opacity: 0.3; }
/* Кнопка меню (три точки) в шапке своего профиля */
.profile-settings-btn {
position: absolute;
top: 2px;
right: 2px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
line-height: 1;
color: var(--text-primary);
opacity: 0.6;
transition: opacity 0.15s;
}
.profile-settings-btn svg { display: block; }
.profile-settings-btn:active { opacity: 0.3; }
/* Список действий в GsSheet (меню профиля) */
.profile-action-list {
display: flex;
flex-direction: column;
margin: 0 -4px;
}
.profile-action-item {
display: block;
width: 100%;
padding: 14px 4px;
background: none;
border: none;
text-align: left;
font-size: 16px;
color: var(--text-primary);
cursor: pointer;
border-bottom: 1px solid rgba(var(--tint-rgb), 0.06);
transition: opacity 0.12s;
}
.profile-action-item:last-child { border-bottom: none; }
.profile-action-item:active { opacity: 0.45; }
.profile-action-item--danger { color: var(--brand-red); }
.profile-action-divider {
height: 1px;
background: var(--border-subtle);
margin: 4px 0;
}
/* ===== Анкорное поповер-меню ⋮ (gsMenu, menu.js) ===== */
/* Замена нижнего шита для контекстных меню: открывается у кнопки, без затемнения. */
.gs-menu-backdrop {
position: fixed;
inset: 0;
background: transparent; /* ловушка внешнего тапа, экран НЕ темнеет */
z-index: 999;
/* Тап поглощается целиком: без 300мс-задержки клика и без подсветки backdrop. */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.gs-menu {
position: fixed;
min-width: 180px;
max-width: 240px;
background: var(--surface-3);
border: 0.5px solid rgba(var(--tint-rgb), 0.1);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
overflow: hidden;
z-index: 1000;
transform-origin: top right; /* растёт из угла у ⋮ */
animation: gsMenuIn 0.12s ease-out;
}
@keyframes gsMenuIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.gs-menu__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 13px 14px;
font-size: 15px;
color: var(--text-primary);
cursor: pointer;
border-bottom: 0.5px solid rgba(var(--tint-rgb), 0.06);
transition: opacity 0.12s;
}
.gs-menu__item:last-child { border-bottom: none; }
.gs-menu__item:active { opacity: 0.45; }
.gs-menu__item--danger { color: var(--danger); }
.gs-menu__item-label { flex: 1; min-width: 0; }
.gs-menu__item--active { font-weight: 600; }
.gs-menu__item-check { flex-shrink: 0; color: var(--accent); font-weight: 700; }
.gs-menu__divider {
height: 0.5px;
background: var(--border-subtle);
}
/* Режим «панель» (gsMenu.openPanel) — произвольный контент (фильтр Стола).
Ширину/max-height ставит JS; снимаем list-ограничения базового .gs-menu. */
.gs-menu--panel {
max-width: none;
overflow: visible; /* дропдаун города escape-ит клиппинг панели */
transform-origin: top right;
}
.gs-menu-panel__content {
padding: 12px;
}
/* Внутри панели: заголовки секций/город работают как в модале.
Убираем нижний bleed последней секции. */
.gs-menu--panel .feed-filter-section:last-of-type { margin-bottom: 0; }
/* Шапка панели фильтра: заголовок + крестик закрытия (отмена). */
.gs-filter-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.gs-filter-panel__title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.gs-filter-panel__close {
flex-shrink: 0;
width: 32px;
height: 32px;
margin: -6px -6px -6px 0; /* tap-таргет крупнее, не раздувая шапку */
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--tg-hint);
cursor: pointer;
border-radius: var(--radius-pill);
transition: opacity 0.15s;
}
.gs-filter-panel__close:active { opacity: 0.35; }
.gs-filter-panel__close svg { display: block; }
/* Крестик очистки поля города — абсолютом справа внутри .feed-city-wrap. */
#feedFilterPanel #cityInput { padding-right: 34px; }
.gs-city-clear {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--tg-hint);
cursor: pointer;
z-index: 2;
}
.gs-city-clear:active { opacity: 0.4; }
.gs-city-clear svg { display: block; }
/* Кнопки футера панели мельче, чем в полноэкранном модале (scoped — другие
.feed-btn не задеты). Вид secondary/primary сохранён. */
#feedFilterPanel .feed-modal__footer .feed-btn {
padding: 8px 14px;
min-height: 0;
font-size: 14px;
}
/* Generic-чип (Тип/Доставка в фильтре) — метрики .delivery-chip, но без
#screen-plant-scope. Мультивыбор, active залит акцентом. */
.gs-chip {
display: inline-block;
/* Компактные метрики как у чипа формы растения (#screen-plant .delivery-chips--cell). */
padding: 4px 10px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--border-subtle);
background: var(--surface-1);
color: var(--tg-text);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
-webkit-appearance: none;
appearance: none;
transition: background 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out;
}
.gs-chip--active {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
font-weight: 600;
}
.gs-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
@media (prefers-reduced-motion: reduce) {
.gs-menu { animation: none; }
}
/* Кнопки в топбаре экрана уведомлений (✓ и ⚙️) */
.notif-topbar-btn {
background: none;
border: none;
font-size: 18px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.55;
cursor: pointer;
transition: opacity 0.15s;
line-height: 1;
flex-shrink: 0;
}
.notif-topbar-btn:active { opacity: 0.3; }
.profile-user-top {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 14px;
}
.profile-user-params {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 12px -14px 0; /* 12px над разделителем (как у статистики) */
padding-top: 12px; /* 12px под разделителем до участия/листочков */
border-top: 1px solid var(--border-subtle);
}
.profile-user-param-cell {
display: flex;
flex-direction: column;
align-items: center; /* центрируем участие/листочки */
gap: 3px;
padding: 0 14px; /* верт. отступы — у контейнера (12px) и карточки (12px) */
}
.profile-user-param-cell:first-child {
border-right: 1px solid rgba(var(--tint-rgb), 0.07);
}
.profile-user-param-cell--tappable {
cursor: pointer;
transition: background 0.1s;
}
.profile-user-param-cell--tappable:active {
background: rgba(var(--tint-rgb), 0.04);
}
.profile-user-param__label {
font-size: 11px;
font-weight: 500;
color: var(--tg-hint);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.profile-user-param__value {
font-size: 14px;
font-weight: 600;
color: var(--tg-text);
}
.profile-user-param-cell--tappable .profile-user-param__value::after {
content: " ›";
color: var(--tg-hint);
font-weight: 400;
}
.profile-avatar {
width: 68px;
height: 68px;
border-radius: 50%;
overflow: hidden;
background: var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 700;
color: var(--on-accent);
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(25,25,25,0.12);
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-name {
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-city {
font-size: 14px;
color: var(--tg-text); /* обычный текст (проектный secondary), не приглушённо-серый */
margin-bottom: 4px;
}
.profile-bio {
font-size: 13px;
color: var(--tg-hint);
margin-bottom: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.profile-user-info {
flex: 1;
min-width: 0;
}
.profile-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: auto;
gap: 0;
/* Отдельный ряд во всю ширину карточки (разделитель + отступ, как в карточке сделки) */
margin: 12px -14px 0;
padding: 12px 14px 0;
border-top: 1px solid var(--border-subtle);
}
.profile-stat-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding-right: 10px;
}
.profile-stat-cell:not(:first-child) {
padding-left: 10px;
}
.profile-stat-cell:not(:last-child) {
border-right: 1px solid rgba(var(--tint-rgb), 0.07);
}
.profile-stat-value {
font-size: 14px;
font-weight: 600;
color: var(--tg-text);
width: 100%;
text-align: center;
}
.profile-stat-label {
font-size: 11px;
font-weight: 500;
color: var(--tg-hint);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.profile-section-title {
margin: 4px 0 0;
font-size: 19px;
font-weight: 700;
color: var(--tg-text);
}
.profile-empty-plants {
margin: 8px 0 0;
font-size: 14px;
color: var(--tg-hint);
text-align: center;
}
#profilePlantsSection .plants-grid {
/* Верхний зазор под градиент .feed-toolbar::after даёт САМ .profile-page gap:8
(тулбар и #profilePlantsSection — соседние flex-дети). Поэтому обнуляем базовый
.plants-grid padding-top:8px — иначе 8(gap)+8(padding)=16px против 8px на Столе. */
padding-top: 0;
padding-bottom: 20px; /* profile-page добавляет ещё 20px → итого 40px как на столе */
}
/* =======================================================
ФОРМА РАСТЕНИЯ (screen-plant, edit/create mode)
======================================================= */
.pf-container {
display: flex;
flex-direction: column;
gap: 12px;
padding: 8px 0 0;
width: 100%;
box-sizing: border-box;
}
/* Секция формы */
.pf-section {
background: var(--surface-2);
border-radius: var(--radius-lg);
padding: 16px;
border: var(--card-border);
box-shadow: var(--shadow-card);
}
/* Метка «Фото» — та же типографика, что у подписей полей формы
(#screen-plant label: 11px/700 uppercase, margin-bottom 6px). flex —
ради inline-подсказки «до 5 штук» справа. */
.pf-section__label {
font-size: 11px;
font-weight: 700;
color: var(--tg-hint);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.pf-section__hint {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
/* Поля формы */
#screen-plant .form-field {
margin-bottom: 12px;
}
#screen-plant .form-field:last-child {
margin-bottom: 0;
}
#screen-plant label {
display: block;
margin-bottom: 6px;
font-size: 11px;
font-weight: 700;
color: var(--tg-hint);
text-transform: uppercase;
letter-spacing: 0.06em;
}
#screen-plant input,
#screen-plant textarea,
#screen-plant select {
width: 100%;
padding: 11px 12px;
font-size: 15px;
border-radius: var(--radius-sm);
border: 1.5px solid rgba(var(--tint-rgb), 0.09);
background: var(--surface-1);
color: var(--tg-text);
outline: none;
box-sizing: border-box;
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
-webkit-appearance: none;
appearance: none;
}
#screen-plant textarea {
resize: none;
min-height: 80px;
line-height: 1.5;
}
#screen-plant input:focus,
#screen-plant textarea:focus,
#screen-plant select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
#screen-plant select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
padding-right: 36px;
}
#screen-plant .hint {
margin-top: 6px;
font-size: 12px;
color: var(--tg-hint);
}
/* Чипы доставки */
#screen-plant .delivery-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#screen-plant .delivery-chip {
/* Три кнопки делят строку поровну и помещаются на узких экранах (БАГ 2) */
flex: 1 1 0;
min-width: 0;
text-align: center;
padding: 8px 6px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--border-subtle);
background: var(--surface-1);
color: var(--tg-text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
/* Сброс нативной кнопки WebKit: без него