/* ============================================================================ mobile.css — мобильный слой CRM «Bloggers». Что это. Единственный файл, который отвечает за вид приложения на телефоне. Подключается в index.html СРАЗУ ПОСЛЕ styles.css, поэтому при равной специфичности выигрывает он — !important здесь не нужен и не используется. Когда включается. Всё, кроме трёх правил в блоке «Глобально» ниже, живёт внутри медиа-листа @media (max-width:768px), (max-height:500px) and (orientation:landscape) — то есть узкий экран ИЛИ лежащий телефон (812×375: ширина большая, а высота мизерная, десктопная таблица в такую полосу не помещается). JS-двойник этого листа — константа MOBILE_MQ в common.js; менять их надо ВМЕСТЕ, иначе вёрстка и логика рендера разъедутся. Настоящий десктоп (769px+ шириной и выше 500px) рендерится ровно так же, как до появления этого файла. Как устроено внутри. Мобильный режим — НЕ один макет, а два, и разделены они не «полнотой», а формой дефицита: · узкий портрет (375×812) — мало ШИРИНЫ → нижняя панель, карточки, шторка; · лежащий телефон (812×375) — мало ВЫСОТЫ → левая полоска иконок, таблица, панель справа. Нижняя панель съела бы 13% экрана, полоска слева — 7%. Разделы 1–11 ниже — общее для обоих. Разделы 12 и 13 — сами макеты; их условия дополняют друг друга ровно, без щели и без нахлёста (см. врезку перед разделом 12). JS-двойник этого водораздела — CARDS_MQ в common.js. Исключения (осознанные, вне медиа-запроса): 1. #mnav{display:none} — нижняя навигация не существовала раньше вовсе, на десктопе она обязана быть скрыта на любой ширине. 2. :focus-visible — видимая рамка фокуса с клавиатуры (доступность). 3. prefers-reduced-motion — глушим анимации, если человек попросил этого в системных настройках. Единственное место, где !important уместен: перебить нужно решительно все объявления transition/animation. Правила, которым файл следует: цвета только из токенов :root, тач-цели ≥44px, поля ввода 16px (иначе iOS Safari зумит страницу при фокусе), высоты в dvh, нижние фиксированные элементы с env(safe-area-inset-bottom), анимации 150–300 мс и только по transform/opacity. ========================================================================== */ /* ============================ Глобально (вне медиа) ======================= */ /* Нижняя навигация — сущность чисто мобильная. Прячем её на любой ширине, мобильный блок ниже включает обратно. */ #mnav{display:none} /* Фокус с клавиатуры должно быть видно. :focus-visible не срабатывает на мышиный клик, поэтому обычный вид кнопок не меняется. */ :focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* Человек попросил меньше движения — отдаём меньше движения. */ @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* ================================ МОБИЛЬНЫЙ ============================== */ @media (max-width:768px), (max-height:500px) and (orientation:landscape){ /* ---- 1. Каркас ---------------------------------------------------------- */ /* Сайдбар уезжает целиком, его место занимает нижняя навигация. Колонка превращается в обычный поток: flex тут больше нечего раскладывать. */ /* Каркас различается по ориентации и живёт в подблоках 12/13: в узком портрете сайдбар уезжает и его место занимает нижняя панель, в широком мобильном — наоборот. Общее здесь — только то, что верно в обоих случаях. */ #app{min-height:100dvh} main{max-width:100%;overflow-x:hidden} /* ---- 2. Системный блок в Настройках ------------------------------------- */ /* Сама нижняя навигация #mnav — сущность узкого портрета, её стили в подблоке 12. А вот блок «режим + кто я + выйти» нужен в ОБЕИХ ориентациях: в портрете сайдбара нет вовсе, в ландшафте у свёрнутого сайдбара нижний блок скрыт (места по высоте нет) — и там и там единственная точка доступа это Настройки. mobile-nav.js рисует блок как
и ставит ПЕРВЫМ в #view-settings, поэтому поверхность (фон/рамку/паддинг) даёт .dsection — здесь только отступ снизу и размеры нажимаемых элементов. */ .msys{margin-top:0;margin-bottom:14px} .msys .mode-toggle button{min-height:44px} .msys .side-foot{padding:10px 2px 0} .msys .btn.ghost{width:100%;margin-top:10px} /* ---- 3. Шапка экрана .top ----------------------------------------------- */ /* Первая строка: заголовок + счётчик (+ бейдж «ДЕМО»). Вторая: поиск во всю ширину. Третья: сегмент + «+ Добавить». */ /* Общее для обеих ориентаций: размер тач-цели и 16px против зума iOS. Раскладка (в одну строку или в три) различается — она в подблоках 12/13. */ .top{gap:10px;align-items:center} .top h2{line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis} .hsearch{gap:8px} .hsearch .btn{flex:0 0 auto} .hsearch input,.hsearch select{font-size:16px;min-height:44px;padding:10px 12px} /* ---- 4. Ленты чипов ----------------------------------------------------- */ /* Единственный горизонтальный скроллер, который разрешён на странице. Отрицательный margin даёт «вылет» под края экрана, парный padding возвращает первому и последнему чипу нормальный отступ. */ .stagebar{ flex-wrap:nowrap; overflow-x:auto;overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline-start:14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:8px; margin-inline:-14px; padding-inline:14px; /* по 3px сверху и снизу: ровно столько, чтобы 44px-зона нажатия чипа (см. ::after ниже) поместилась в padding-box и не была срезана */ padding-block:3px; } .stagebar::-webkit-scrollbar{display:none} .stagebar .chip{ position:relative; flex:none; scroll-snap-align:start; min-height:38px; display:inline-flex;align-items:center; padding:8px 14px;font-size:13px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* Чип рисуется на 38px, но палец попадает по 44px: прозрачная зона поверх, вертикально по центру. Соседям не мешает — растёт только вверх и вниз. */ .stagebar .chip::after{ content:"";position:absolute;left:0;right:0;top:50%; height:44px;transform:translateY(-50%); } /* ---- 5. Список блогеров: карточки (только узкий портрет) ---------------- */ /* Прятать .btable здесь нельзя: в широком мобильном base.js рендерит именно таблицу (IS_CARDS() === false). display:none для неё — в подблоке 12. Стили самих карточек общие: в ландшафте их просто никто не создаёт. */ .bcards{display:flex;flex-direction:column;gap:10px} .bcard{ display:flex;flex-direction:column;gap:6px; min-height:64px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .15s ease,border-color .15s ease; } .bcard:active{transform:scale(.985)} .bc-top{display:flex;align-items:center;gap:8px;min-width:0} .bc-name{ flex:1;min-width:0; font-weight:600;font-size:15px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .bc-top .stg,.bc-top .coldbang,.bc-top .stalemark{flex:none} .bc-sub{color:var(--mut);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bc-metrics{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12px;color:var(--mut);min-width:0} .bc-src{margin-left:auto;flex:none;font-size:14px} .empty{padding:32px 16px} /* ---- 6. Карточка блогера как нижний шит --------------------------------- */ /* Класс .sheet вешает sheet.js/drawer.js при открытии, когда IS_MOBILE(). Важно: #drawer.sheet и #drawer.show имеют одинаковую специфичность, и наш файл идёт позже — поэтому «открытое» состояние обязано быть двухклассовым (#drawer.sheet.show), иначе шит никогда бы не выехал. */ #drawer.sheet{ top:auto;right:0;left:0;bottom:0; width:100%;min-width:0;max-width:none; height:92dvh; border-left:none; border-top:1px solid var(--line); border-radius:20px 20px 0 0; padding:0 16px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transform:translateY(101%); transition:transform .26s cubic-bezier(.32,.72,0,1); } #drawer.sheet.show{transform:none} /* Во время жеста позицию диктует инлайновый transform из JS — своя анимация тут только мешала бы: шит отставал бы от пальца. */ #drawer.sheet.dragging{transition:none} /* «Ручка»: липкая полоса во всю ширину (чтобы контент не просвечивал под ней) с пилюлей 36×4 по центру. Жест ловит JS, поэтому браузерную прокрутку с самой ручки снимаем. */ #drawer.sheet .sheet-grab{ position:sticky;top:0;z-index:3; display:flex;align-items:center;justify-content:center; height:28px;margin:0 -16px 6px; background:var(--panel); touch-action:none; cursor:grab; } #drawer.sheet .sheet-grab::before{ content:"";width:36px;height:4px;border-radius:999px;background:var(--line); } #drawer.sheet .sheet-grab:active{cursor:grabbing} /* Шапка карточки */ .dh{gap:11px} .dh .av{width:46px;height:46px;font-size:16px} /* Средняя колонка (хендл + имя) обязана уметь сжиматься, иначе длинное имя без пробелов распирает шит. Аватар и блок кнопок трогать нельзя — у них фиксированный размер. */ .dh>div:not(.av):not(.acts){min-width:0} .dh .nm{font-size:18px} .dh .nm,.dh .em{overflow-wrap:anywhere} .dh .acts{gap:6px} .dh .acts .x{ width:44px;height:44px;flex:none; display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:10px; background:var(--panel2);color:var(--mut); font-size:16px;line-height:1; touch-action:manipulation; } /* ---- 7. Плитки и сетки внутри шита -------------------------------------- */ .dtiles{grid-template-columns:repeat(2,1fr)} .dtiles.f5{grid-template-columns:repeat(3,1fr)} /* f4 — вид менеджера (без колонки «доход»), см. drawer.js IS_OWNER */ .dtiles.f4{grid-template-columns:repeat(2,1fr)} .dtiles.f5 .dtile,.dtiles.f4 .dtile{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center} /* Подписи шагов воронки («Написан DM», «Фидбек + CTA») на 375px не влезают в одну строку — разрешаем перенос вместо обрезки. */ .stepper2{margin:4px 0 18px} .stepper2 .sl{ font-size:9.5px;line-height:1.2; white-space:normal;overflow-wrap:anywhere;hyphens:auto; padding:0 2px; } .stepper2 .sq{width:30px;height:30px;font-size:13px} .stepper2 .ln2{top:14px} /* Две колонки «ключ — значение» остаются двумя, но длинные email/ссылки переносятся, а не растягивают шит. */ .kv{grid-template-columns:minmax(0,1fr) minmax(0,auto)} .kv .k,.kv .v{min-width:0;overflow-wrap:anywhere} .contacts{flex-wrap:wrap} .contactbtn{min-height:46px;display:flex;align-items:center;justify-content:center;flex:1 1 45%} .advance,.archive{min-height:46px} .goback,.btn.testgrant{min-height:46px} .rowin{flex-wrap:wrap} .rowin input,.rowin select,.rowin textarea{font-size:16px;min-height:44px;flex:1 1 100%} .rowin .btn,.rowin .btn.sm{flex:1 1 100%;min-height:44px} /* Две поправки к правилу «каждое поле на свою строку» — оно верное для длинных полей и вредное для коротких. 1. «кол-во» шириной 110px висело одно на строке, а справа оставалось ~200px пустоты. Ставим его в пару с «причиной». 2. Кнопка «Копир.» во всю ширину читается как главное действие блока, хотя главное там — сама ссылка. Возвращаем её к содержимому. */ .rowin #cr-amount{flex:0 1 110px;min-width:96px} .rowin #cr-reason{flex:1 1 140px} .rowin #reflink{flex:1 1 60%} .rowin #reflink + .btn{flex:0 0 auto;min-width:104px} /* Ссылка на профиль в шапке карточки была единственной целью ниже 44px (23px). */ .dh .nm a{display:inline-flex;align-items:center;min-height:44px} /* Мелкие интерактивные элементы внутри шита дорастают до пальца. */ .delx{width:44px;height:44px;font-size:15px;opacity:.75} .convhint{min-height:44px} .task{min-height:44px;gap:11px} .task input{width:22px;height:22px} /* ---- 8. Модалки --------------------------------------------------------- */ /* Во всю ширину минус 16px: по 8px паддинга у затемнённой подложки. */ #modal{padding:0 8px;align-items:center} #modal .card{ width:100%;max-width:none; max-height:92dvh;overflow:auto;overscroll-behavior:contain; padding:20px 18px; } #modal h3{font-size:16px;margin-bottom:14px} /* Два поля в строке на 375px не живут — ставим друг под друга. gap обнуляем: вертикальный отступ уже даёт margin-bottom у .fld. */ .mrow{flex-direction:column;gap:0} .mfoot{gap:10px;margin-top:10px} .mfoot .btn{flex:1 1 0;min-height:44px} #cmodal{padding:0 8px} #cbox{ width:100%;max-width:none; max-height:92dvh;overflow:auto;overscroll-behavior:contain; padding:16px 14px; } .cbh .close{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;margin:-6px -6px 0 0} .ctrls{gap:8px} .seg-ctrl button{min-height:44px;padding:6px 12px;font-size:13px} #confirm{padding:0 8px} .cfmbox{ width:100%;max-width:none; max-height:92dvh;overflow:auto;overscroll-behavior:contain; padding:22px 18px 18px; } .cfmfoot{gap:10px} .cfmfoot .btn{min-height:44px} /* ---- 9. Сетки остальных экранов ----------------------------------------- */ /* Схлопывание в одну колонку — свойство УЗКОГО экрана, оно в подблоке 12. В ландшафте под контент остаётся ~724px, там штатные две колонки уместны. */ .taskbar{flex-wrap:wrap;gap:8px 12px} .taskbar .pb{flex:1 1 100%;order:2} .titem{min-height:44px;padding:0} .titem .cb{width:22px;height:22px;font-size:13px} .copybtn{min-height:44px} .chartcard{padding:14px 12px} .legend{gap:8px 14px} /* ---- 10. Экран входа ---------------------------------------------------- */ #login .card{width:100%;max-width:360px;margin:0 16px;padding:24px 20px} /* ---- 11. Общие правила ввода и нажатия ---------------------------------- */ /* 16px — не вкусовое: на меньшем размере iOS Safari зумит страницу при фокусе и после этого у страницы появляется горизонтальный скролл. */ input,select,textarea{font-size:16px} .fld input,.fld select,.fld textarea{font-size:16px;min-height:44px;padding:11px 12px} .btn{min-height:44px;padding:11px 16px;touch-action:manipulation} .btn.sm{min-height:44px;padding:10px 14px;font-size:14px} button{-webkit-tap-highlight-color:transparent} /* ========================================================================== ДВА ПОДБЛОКА. Внешний медиа-лист — «мобильный режим вообще». Внутри он делится на два непересекающихся и вместе исчерпывающих случая: 12. ПОРТРЕТ : (max-width:768px) and (orientation:portrait) 13. ШИРОКИЙ : (min-width:769px), (orientation:landscape) Второй — точное отрицание первого (де Морган), поэтому «между ними» экрана не бывает: любой экран, попавший во внешний лист, попадёт РОВНО в один подблок. Это не педантизм — 13-й выключает нижнюю панель и включает сайдбар; экран, не попавший никуда, остался бы вообще без навигации. Тот же водораздел в JS — CARDS_MQ в common.js (портрет = карточки+шторка). Менять эти два условия можно только ВМЕСТЕ с ним. ========================================================================== */ /* ---- 12. УЗКИЙ ПОРТРЕТ: нижняя панель, карточки, шторка ----------------- */ @media (max-width:768px) and (orientation:portrait){ /* Каркас: сайдбар уезжает целиком, его место занимает нижняя навигация. Колонка превращается в обычный поток — flex тут больше нечего раскладывать. */ #app{display:block} #side{display:none} main{ padding:16px 14px; /* высота навбара + safe-area + воздух, иначе последняя карточка уходит под нав */ padding-bottom:calc(56px + env(safe-area-inset-bottom) + 16px); } /* Тост всплывает над навигацией, а не под ней. */ .toast{bottom:calc(56px + env(safe-area-inset-bottom) + 16px)} /* Нижняя навигация. Разметку вставляет mobile-nav.js: