/* ============================================================================ MOBILE LAYOUT — схлопывание гридов, 2-колоночные формы → 1 колонка, тач-таргеты ≥40px, мобильные модалки, редактор доменов и settings-hub. Грузится одним из последних (после style.css / pset.css / domain-edit.css / light-theme.css / mobile-tables.css / mobile-theme.css) — каскадно перекрывает их layout. ТОЛЬКО layout/размеры/схлопывание. Цвета не трогаем (агент тем), таблицы/.table-toolbar не трогаем (агент таблиц), support и user-detail (.user-/.uc-/.wb-/.support-/.chat-/.composer-) не трогаем. Брейкпоинты: основной 768px, мелкий 420px. macos-страницы написаны на max-width:760px — важные правила дублируем на 768, чтобы закрыть «дыру» 761-768px. Модалки монтируются на (вне .admin-main) → их правим без префикса .admin-main, на брейкпоинте ≤480px. ========================================================================== */ /* ============================================================================ РАЗДЕЛ 1 — ГРИДЫ В 1 КОЛОНКУ В admin-new/css/style.css уже схлопнуты: .overview-hero,.command-stack, .ops-grid,.insight-grid,.grid-2,.grid-main,.kpi-grid,.domain-cubes, .summary-strip,.summary-grid,.step-grid,.pset-statgrid. Здесь добавляем остальные (без дублирования), которые иначе распирают viewport. ========================================================================== */ @media (max-width: 768px) { /* .drain-cards КРИТИЧНО: minmax(340px) даёт overflow на 390px. .domain-layout КРИТИЧНО для промокодов (minmax(360px)). */ .admin-main :is( .domain-layout, .totp-info-grid, .master-tips, .sweep-status-grid, .drain-cards, .dcard-stats, .online-grid, .online-now ) { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } } /* .sweep-counts-grid — на ≤420 две колонки (мелкие счётчики), выше — одна. На 421-768 оставляем 2 колонки, иначе слишком растянуто по вертикали. */ @media (max-width: 768px) { .admin-main .sweep-counts-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } } @media (max-width: 420px) { .admin-main .sweep-counts-grid { grid-template-columns: 1fr !important; } } /* ============================================================================ РАЗДЕЛ 2 — 2-КОЛОНОЧНЫЕ ФОРМЫ → 1 КОЛОНКА .form-line (label|input грид minmax(0,1fr) minmax(140px,180px)) и подобные → label сверху + full-width инпут. .detail-field из user-workspace НЕ трогаем (там свой агент) — скоупим явно НЕ под .user-* контейнеры через :not(). ========================================================================== */ @media (max-width: 768px) { .admin-main .form-line { grid-template-columns: 1fr !important; gap: 6px !important; align-items: start !important; } .admin-main .form-line .input, .admin-main .form-line .textarea, .admin-main .form-line .select { width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .admin-main .form-line .input, .admin-main .form-line .select { min-height: 44px !important; } /* Универсальные редакторные гриды форм вне user-workspace. */ .admin-main .editor-grid, .admin-main .color-grid, .admin-main .logo-drop { grid-template-columns: 1fr !important; gap: 10px !important; } .admin-main .editor-grid .editor-field:nth-child(2) { grid-row: auto !important; } .admin-main .logo-settings__row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; } } /* ============================================================================ РАЗДЕЛ 3 — РЕДАКТОР ДОМЕНОВ (#domains//edit) Полностраничный вариант .domain-edit-page — у него НЕТ ни одного @media. Мобильные правила macos написаны под предка .domain-editor (drawer) и сюда НЕ применяются. Дублируем + чиним sticky-полосу действий под новый padding. ВАЖНО: domain-edit.css теперь делает inner full-width (max-width:none, margin:0 auto) — НЕ навязываем узкий max-width. ========================================================================== */ @media (max-width: 768px) { .domain-edit-page .domain-editor__inner { padding: 14px !important; border-radius: 10px !important; } .domain-edit-page .editor-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .domain-edit-page .editor-grid .editor-field:nth-child(2) { grid-row: auto !important; } .domain-edit-page .color-grid { grid-template-columns: 1fr !important; gap: 8px !important; } .domain-edit-page .logo-drop { grid-template-columns: 1fr !important; } .domain-edit-page .logo-settings__row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; } .domain-edit-page .domain-editor-head { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; } .domain-edit-page .domain-editor-head h2 { font-size: 22px !important; } /* Сегментированные переключатели (Brand/Light/Dark и т.п.) — горизонтальный скролл вместо переноса, ничего не урезается. */ .domain-edit-page .seg-control, .domain-edit-page .color-tabs { overflow-x: auto !important; scrollbar-width: none; -ms-overflow-style: none; } .domain-edit-page .seg-control::-webkit-scrollbar, .domain-edit-page .color-tabs::-webkit-scrollbar { display: none; } .domain-edit-page .seg-btn { flex-shrink: 0 !important; min-height: 36px !important; } } /* Sticky-полоса действий: в macos margin:18px -20px -20px рассчитан на старый drawer padding:22px. На странице inner padding 22px (десктоп) / 14px (моб) — правим margin под него, фон в токене (обе темы). */ .domain-edit-page .domain-editor-actions { margin: 18px -22px -22px !important; padding: 14px 22px max(14px, env(safe-area-inset-bottom)) !important; background: var(--bg) !important; backdrop-filter: none !important; } @media (max-width: 768px) { .domain-edit-page .domain-editor-actions { margin: 14px -14px -14px !important; padding: 12px 14px max(12px, env(safe-area-inset-bottom)) !important; flex-wrap: wrap !important; } .domain-edit-page .domain-editor-actions .btn { flex: 1 1 auto !important; min-height: 44px !important; } } /* ============================================================================ РАЗДЕЛ 4 — SETTINGS HUB (pset) Тач-таргеты pset малы (pill 30px, iconbtn 28px). Поднимаем до ≥40px, на ≤420 действия в колонку. ========================================================================== */ @media (max-width: 768px) { .admin-main .pset-pill { height: 44px !important; padding: 0 14px !important; font-size: 14px !important; } .admin-main .pset-iconbtn { width: 40px !important; height: 40px !important; } .admin-main .pset-iconbtn svg { width: 16px !important; height: 16px !important; } } @media (max-width: 420px) { .admin-main .pset-actions { flex-direction: column !important; align-items: stretch !important; } .admin-main .pset-actions .pset-btn { width: 100% !important; min-height: 44px !important; justify-content: center !important; } .admin-main .pset-inline-input { text-align: left !important; width: 100% !important; max-width: none !important; } } /* Переключатель в светлой теме: белый thumb на сером track низкоконтрастен. Критично для UX тоггла — задаём фон+тень (единственное цветовое правило, разрешённое ТЗ для этого элемента). */ [data-theme="light"] .pset-switch-thumb { background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } /* ============================================================================ РАЗДЕЛ 5 — ТАЧ-ТАРГЕТЫ ≥40px (везде, КРОМЕ support / user-detail) ========================================================================== */ @media (max-width: 768px) { .admin-main .actions button, .admin-main .actions .icon-link { width: 36px !important; height: 36px !important; } .admin-main .icon-btn { min-width: 40px !important; min-height: 40px !important; } .admin-main .row-actions .btn-sm { min-height: 40px !important; padding: 8px 14px !important; } .admin-main .page-num, .admin-main .page-arrow { min-width: 40px !important; height: 40px !important; } .admin-main .drain-approved-toggle, .admin-main .drain-data-panel .page-num, .admin-main .drain-data-panel .page-arrow { min-height: 40px !important; } .admin-main .dcard-txhash { min-height: 36px !important; } } /* ============================================================================ РАЗДЕЛ 6 — МОДАЛКИ (монтируются на , вне .admin-main) Цвета НЕ трогаем (агент тем). Только layout: footer wrap, full-width кнопки, token-display в колонку, kv-грид в одну колонку. ========================================================================== */ @media (max-width: 480px) { .api-modal { padding: 8px !important; } .api-modal-card { max-height: 96vh !important; } .api-modal-card footer { flex-wrap: wrap !important; gap: 8px !important; } .api-modal-card footer .btn { flex: 1 1 auto !important; } .api-token-display { flex-direction: column !important; align-items: stretch !important; } .api-token-display .btn { width: 100% !important; min-width: 0 !important; } /* sweep details modal — пары «лейбл : значение». */ .api-modal-card .kv > div, .kv > div { grid-template-columns: 1fr !important; gap: 2px !important; } /* drain webhook modal — .dwm-box уже 95vw, чиним только перенос кнопок. */ .dwm-actions { flex-wrap: wrap !important; } .dwm-actions .btn { flex: 1 1 auto !important; } } /* ============================================================================ РАЗДЕЛ 7 — ФИКС-ШИРИНЫ КОНТРОЛОВ >180px распирают флекс Сбрасываем min-width/width на узких экранах + column-флип контейнеров. ========================================================================== */ @media (max-width: 768px) { /* Контролы: сброс жёстких min-width, full-width. */ .admin-main .master-addr-cell .addr-input, .admin-main .pd-card-input-wrap, .admin-main .pd-worker-selector .select, .admin-main .api-sa-controls .select, .admin-main .drain-filter-select, .admin-main .drain-worker-search, .admin-main .sweep-filters label, .admin-main .sweep-filters .select, .admin-main .sweep-filters .input, .admin-main .vf-auto-field { min-width: 0 !important; width: 100% !important; box-sizing: border-box; } /* Карточка промо-настроек: строка → колонка, элементы во всю ширину. */ .admin-main .pd-card { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .admin-main .pd-card-input-wrap { flex: 1 1 auto !important; } /* Sweep-фильтры — wrap уже есть, но дочерние не должны держать min-width. */ .admin-main .sweep-filters { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } /* Drain hero — в одну колонку, тулбар-контролы во всю ширину. */ .admin-main .drain-hero { grid-template-columns: 1fr !important; gap: 16px !important; } .admin-main .drain-toolbar-controls { flex-direction: column !important; align-items: stretch !important; } .admin-main .drain-toolbar-controls > * { width: 100% !important; min-width: 0 !important; } /* api-sa-controls контейнер в колонку. */ .admin-main .api-sa-controls { flex-direction: column !important; align-items: stretch !important; } } /* ============================================================================ РАЗДЕЛ 8 — ЕДИНАЯ ШИРИНА / РОВНО ПО ЛИНИЯМ Все страницы одной ширины, ровные отступы, без двойных горизонтальных паддингов. .admin-main уже даёт padding:14px + .page width:100% на мобиле (в style.css). Здесь нормализуем известные «особые» страницы, чтобы их левый/правый отступ совпадал с остальными и контент не урезался. ========================================================================== */ @media (max-width: 768px) { .admin-main :is( .pset-page, .drain-events-page, .domain-edit-page, .domain-edit-page__body ) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } } /* ============================================================================ prefers-reduced-motion — на всякий случай гасим transition у тач-элементов, которым мы меняли размеры (не вводим новых анимаций, просто гигиена). ========================================================================== */ @media (prefers-reduced-motion: reduce) { .domain-edit-page .seg-btn, .admin-main .pset-pill, .admin-main .pset-iconbtn { transition: none !important; } } /* ============================================================================ НИЖНЯЯ ПАНЕЛЬ (порт из маркета public/js/modules/mobile-nav.js → .mobile-bottom-bar / .mbb-tab). 4 таба: Home / Support / Users / More. «More» открывает левую панель (drawer). Только мобила. ========================================================================== */ .mobile-bottom-bar { display: none; } @media (max-width: 768px) { .mobile-bottom-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 56px; background: var(--bg); border-top: 1px solid var(--border); z-index: 140; padding-bottom: env(safe-area-inset-bottom, 0); } .mbb-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text); font-size: 10px; font-weight: calc(500 + var(--fw-adjust)); cursor: pointer; background: none; border: none; padding: 0; min-height: 44px; -webkit-tap-highlight-color: transparent; user-select: none; transition: color 0.15s, transform 0.12s; } .mbb-tab .mbb-ico { display: inline-flex; } .mbb-tab .mbb-ico svg { width: 23px; height: 23px; stroke: currentColor; transition: stroke 0.15s; } .mbb-tab.active { color: var(--accent); font-weight: calc(600 + var(--fw-adjust)); } .mbb-tab.active .mbb-ico svg { stroke: var(--accent); } .mbb-tab:active { transform: scale(0.92); } /* Резервируем место под панель, чтобы контент не прятался под ней. */ .admin-main { padding-bottom: 76px !important; } /* Поддержка-чат — полноэкранная: ужимаем высоту на хедер(56)+нижнюю панель(56). */ .admin-main:has(.support-shell) { padding-bottom: 0 !important; } .admin-main:has(.support-shell) .support-shell { height: calc(100vh - 56px - 56px - env(safe-area-inset-bottom, 0px)) !important; } } /* ============================================================================ ЛЕВАЯ ПАНЕЛЬ (drawer) — пункты в стиле блоков настроек (Drainer / 2FA / …): иконка слева + текст, как .pset-side-item. ========================================================================== */ .mobile-nav-item .mn-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; opacity: 0.85; } .mobile-nav-item .mn-ico svg { width: 20px; height: 20px; stroke: currentColor; } .mobile-nav-item.is-active .mn-ico { opacity: 1; color: var(--accent); } /* ============================================================================ ЛЕВАЯ ПАНЕЛЬ (drawer) — само окно НЕ листается целиком: шапка (лого) и низ (тема / macOS / Logout) зафиксированы, а скроллится ТОЛЬКО блок разделов (категорий), если он не влезает по высоте. ========================================================================== */ .mobile-nav-overlay .mobile-nav-drawer { display: flex !important; flex-direction: column !important; overflow: hidden !important; /* окно целиком не скроллится */ } .mobile-nav-drawer > .mn-head, .mobile-nav-drawer > .mn-divider, .mobile-nav-drawer > .mn-section { flex: 0 0 auto !important; } /* блок категорий (разделов) — единственный скроллируемый, занимает остаток. NB: :first-of-type здесь НЕ подходит (он по тегу div, а первый div — .mn-head), поэтому таргетим явный класс .mn-section--scroll. */ .mobile-nav-drawer > .mn-section--scroll { flex: 1 1 auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; min-height: 0 !important; scrollbar-width: none; } .mobile-nav-drawer > .mn-section--scroll::-webkit-scrollbar { display: none; }