/** * pwa_mobile.css — базовые стили для мобильного PWA-режима Кольца. * * Подключается через includes/pwa_head.php → доступен на всех страницах. * Содержит только безопасные утилиты без автоматических overrides на * body/html, чтобы не ломать существующую вёрстку. * * Подэтап 7.1: safe-area-insets для iPhone с чёлкой / Dynamic Island / * домашним индикатором. */ /* ─── iOS Safari: запрет горизонтального переполнения ────────────────── На iPhone Safari не всегда обрезает контент через родительский overflow:hidden. НО: `overflow-x: hidden` на body на Android Chrome в PWA может целиком блокировать вертикальный touch-скролл. Поэтому используем `overflow-x: clip` — он обрезает, но не создаёт scroll- контейнер и не мешает тач-скроллу. Для старых браузеров fallback на max-width + overflow-y. */ html, body { max-width: 100vw; } html { overflow-x: clip; } body { overflow-x: clip; /* Явно говорим браузеру: вертикальный скролл и pinch-zoom разрешены, горизонтальный pan — нет (предотвращает конфликты) */ touch-action: pan-y pinch-zoom; } /* ─── Типовые защиты от overflow на мобильном ───────────────────────── Предотвращают ситуацию «элемент выходит за экран» на узких viewport: длинные имена / ссылки / URL переносятся, картинки и видео не шире родителя, pre/code не растягивают страницу. */ @media (max-width: 768px) { img, video, iframe, embed, object, canvas, svg { max-width: 100%; height: auto; } pre, code, kbd, samp { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } /* Длинные строки без пробелов (URL'ы в постах, email'ы) ломают */ .break-long, .post-content, .article-content, .about-me, .bio, .profile-bio, .dialog-preview { overflow-wrap: break-word; word-break: break-word; } } /* ─── Подэтап 7.3: Touch-targets 44px ──────────────────────────────── Apple HIG: минимальный тач-таргет 44×44pt. Маленькие кнопки часто промахиваются пальцем. Применяем ТОЛЬКО на touch-устройствах, чтобы на desktop-мышке не растягивать дизайн. */ @media (max-width: 768px) and (pointer: coarse) { /* Основные классы кнопок проекта */ .btn, button.btn, a.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger, [role="button"].btn { min-height: 44px; } /* Иконка-кнопки (квадратные). Опознаём по aria-label (обычно ставят на кнопки без текста) и по явному классу .icon-btn. */ .icon-btn, button[aria-label]:not(.btn):not(.tab):not([class*="toggle"]), a[aria-label]:not(.btn), .modal-close, .close-btn, button.close, [class$="-close"] { min-width: 44px; min-height: 44px; } /* Навигация: пункты сайдбара и верхнего меню */ .sidebar-link, .nav-link, .nav-menu a, .mobile-menu-btn, .hu-bell-btn { min-height: 44px; } /* Универсальный opt-in класс: навесь .tap-44 на любой элемент, чтобы принудительно получить 44×44 на мобильном. */ .tap-44 { min-width: 44px !important; min-height: 44px !important; } /* SVG внутри кнопки не ловят клик сами (только родитель): предотвращает "промахи" когда палец попадает в padding */ button svg, a svg, .btn svg { pointer-events: none; } } /* ─── Подэтап 7.2: отключаем авто-зум iOS при фокусе на input ───────── iOS Safari ЗУМИТ страницу, если font-size поля < 16px, и обратно не возвращает. Пользователь остаётся с масштабированным экраном. Принудительно ставим 16px на всех полях ввода на мобильном. */ @media (max-width: 768px) { input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]), textarea, select { font-size: 16px !important; } } /* ─── Safe-area CSS-переменные ─────────────────────────────────────────── */ :root { --kolco-safe-top: env(safe-area-inset-top, 0px); --kolco-safe-right: env(safe-area-inset-right, 0px); --kolco-safe-bottom: env(safe-area-inset-bottom, 0px); --kolco-safe-left: env(safe-area-inset-left, 0px); } /* ─── Утилитарные классы ────────────────────────────────────────────────── Используются точечно там, где элемент должен уважать safe-area. Можно навесить на header/footer/sticky-элементы без риска сломать остальную вёрстку. */ .safe-pad-top { padding-top: max(var(--kolco-safe-top), 0px); } .safe-pad-bottom { padding-bottom: max(var(--kolco-safe-bottom), 0px); } .safe-pad-left { padding-left: max(var(--kolco-safe-left), 0px); } .safe-pad-right { padding-right: max(var(--kolco-safe-right), 0px); } .safe-pad-x { padding-left: max(var(--kolco-safe-left), 0px); padding-right: max(var(--kolco-safe-right), 0px); } .safe-pad-y { padding-top: max(var(--kolco-safe-top), 0px); padding-bottom: max(var(--kolco-safe-bottom), 0px); } .safe-pad-all { padding-top: max(var(--kolco-safe-top), 0px); padding-right: max(var(--kolco-safe-right), 0px); padding-bottom: max(var(--kolco-safe-bottom), 0px); padding-left: max(var(--kolco-safe-left), 0px); } .safe-mt { margin-top: max(var(--kolco-safe-top), 0px); } .safe-mb { margin-bottom: max(var(--kolco-safe-bottom), 0px); } /* Sticky-элементы в шапке: добавить safe-area-top к существующему top. */ .safe-sticky-top { top: var(--kolco-safe-top); } /* Fixed footer/bottom-bar: смещаем его выше домашнего индикатора. */ .safe-fixed-bottom { bottom: var(--kolco-safe-bottom); padding-bottom: env(safe-area-inset-bottom, 0px); } /* ─── Автоматическое поведение ТОЛЬКО в standalone PWA ────────────────── Не трогаем обычные вкладки браузера — только установленное приложение. На iPhone с чёлкой без этого статус-бар налезает на контент body. */ @media (display-mode: standalone) { /* Даём html/body узнать о safe-area, но без принудительных отступов. Страницы могут сами решить, нужен ли им padding, через классы выше. Здесь только фон доходит до краёв экрана. */ html { background-color: #f8fafc; } @media (prefers-color-scheme: dark) { html { background-color: #0f172a; } } } /* ─── Подэтап 7.4: Standalone UX — ощущение нативного приложения ────── Срабатывает ТОЛЬКО для установленного PWA на touch-устройстве (iPhone/Android). Desktop PWA (Chrome Edge в отдельном окне) должен сохранять обычное поведение — scrollbar, выделение, drag картинок. */ @media (display-mode: standalone) and (pointer: coarse) { /* Отключаем синюю вспышку при тапе (iOS Safari) */ * { -webkit-tap-highlight-color: transparent; } /* Отключаем выделение текста и long-press callout на UI-элементах: кнопки, навигация, иконки, аватары, табы. Главное — НЕ трогаем сам контент (статьи, сообщения, био), чтобы можно было копировать. */ button, a, .btn, .tab, .sidebar-link, .nav-menu, .dialog-item, .card-actions, [role="button"], .avatar, .dialog-avatar, .chat-header-avatar, img[src*="avatar"], img[src*="logo"], img.icon, svg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Для картинок — отключаем drag (чтобы иконки не "подхватывались" при long-press на тачскрине) */ img { -webkit-user-drag: none; user-drag: none; } /* Скрываем scrollbar-декор браузера (не сам scroll, а его отображение). На Android Chrome `width: 0` может ломать touch-скролл — используем `display: none`, он безопасен во всех WebKit/Blink. */ ::-webkit-scrollbar { display: none; } } /* NOTE 2026-04-22: `overscroll-behavior-y: contain` на html/body убрано. На Android PWA иногда приводит к блокировке всего тач-скролла. Свой pull-to-refresh сделаем в 7.5 с точечным overscroll-behavior на конкретных контейнерах, а не глобально на html. */ /* ─── iOS-only: на всякий случай, для старых версий Safari ─────────────── */ @supports (-webkit-touch-callout: none) { :root { --kolco-safe-top: constant(safe-area-inset-top); --kolco-safe-right: constant(safe-area-inset-right); --kolco-safe-bottom: constant(safe-area-inset-bottom); --kolco-safe-left: constant(safe-area-inset-left); --kolco-safe-top: env(safe-area-inset-top); --kolco-safe-right: env(safe-area-inset-right); --kolco-safe-bottom: env(safe-area-inset-bottom); --kolco-safe-left: env(safe-area-inset-left); } }