/* * platform-overrides.css * * Загружается ПОСЛЕДНИМ — перекрывает основные стили для конкретных платформ. * Классы/атрибуты на выставляются скриптом platform-detect.js: * * data-platform="ios" — iOS Safari / iOS WebView * data-platform="android" — Android Browser / Android WebView * data-pwa — запущено как установленный PWA (standalone) * data-native — запущено в MAUI-нативном приложении * * Порядок специфичности: media-query → platform → native > pwa > ios > android */ /* ══════════════════════════════════════════════════════════════════ UNIVERSAL — применяется на всех платформах ══════════════════════════════════════════════════════════════════ */ /* Предотвращаем горизонтальный скролл (от translateX-анимаций абсолютных панелей pm-sidebar / pm-chat-wrap) */ html, body { overflow-x: hidden; max-width: 100%; } /* pm-root тоже не должен создавать горизонтальный оверфлоу */ .pm-root { overflow-x: hidden; } /* ══════════════════════════════════════════════════════════════════ MOBILE PHONES — ≤ 767px ══════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Запрещаем скролл самого документа — скроллиться должны только внутренние контейнеры (.pm-messages, .pm-sidebar, .app-rail). Без этого пользователь может случайно утащить страницу вниз, хедер уедет вверх, а под инпутом появится пустая зона. */ html, body { overflow: hidden; overscroll-behavior: none; } /* app-rail остаётся — пользователь навигирует через него. padding-bottom сдвигает профиль-иконку выше системной навигации Android/iOS. */ .app-rail { flex-shrink: 0; overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); } /* Контент не должен выходить за ширину экрана */ .app-content { min-width: 0; width: 0; flex: 1; } /* ── Профиль: одна колонка на мобильных ────────────────────────── На широком экране — две колонки (левая 280px + правая flex). На телефоне — стек: сначала левая (О себе / Серверы), затем Стена. */ .prof-body { flex-direction: column; padding: 12px 16px; gap: 12px; } .prof-left { width: 100%; } .prof-banner { height: 100px; } .prof-header-body { padding: 8px 16px 12px; flex-wrap: wrap; gap: 8px; } .prof-header-actions { flex-wrap: wrap; gap: 6px; } /* ── Исправление зазора под инпутом при открытой клавиатуре ────── Проблема: когда клавиатура открывается, браузер скрывает свою адресную строку (44px) — резерв --mobile-nav-h становится видимым пустым местом над клавиатурой. Решение: когда body.kb-open убираем --mobile-nav-h из формулы, оставляем только --kb-offset (для случая когда layout не сжался) и safe-area-inset-bottom (home indicator ~34px на iPhone, ~0 на Android). Применяется на ВСЕХ платформах (iOS + Android + PWA + native). */ body.kb-open .pm-input-wrap { padding: 0 10px max(var(--kb-offset, 0px), env(safe-area-inset-bottom, 4px)); } } @media (max-width: 400px) { body.kb-open .pm-input-wrap { padding: 0 8px max(var(--kb-offset, 0px), env(safe-area-inset-bottom, 4px)); } } /* ══════════════════════════════════════════════════════════════════ iOS (Safari + WebView + PWA) ══════════════════════════════════════════════════════════════════ */ html[data-platform="ios"], html[data-native][data-platform="ios"] { /* iOS-специфичный скролл — плавный на тач */ -webkit-overflow-scrolling: touch; } /* ══════════════════════════════════════════════════════════════════ PWA (installed, standalone display-mode) Контент уходит под системный статус-бар потому что viewport-fit=cover + black-translucent убирают браузерный chrome. Нужен padding-top = высота статус-бара через env(safe-area-inset-top). ══════════════════════════════════════════════════════════════════ */ html[data-pwa] .app-shell { /* Сдвигаем контент ниже статус-бара. Цвет фона рейла окрашивает зону статус-бара. */ padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; /* Фон под статус-баром = цвет рейла (чтобы не было белой полосы) */ background-color: var(--th-bg-rail, #1e1f22); } html[data-pwa] .pm-root { padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; /* dvh с учётом safe-area */ height: calc(100dvh - env(safe-area-inset-top, 0px)); } /* На PWA горизонтальный свайп не нужен — убираем резиновый бок */ html[data-pwa] body { overscroll-behavior-x: none; } /* ══════════════════════════════════════════════════════════════════ iOS PWA — комбинированные правила ══════════════════════════════════════════════════════════════════ */ html[data-pwa][data-platform="ios"] .app-shell, html[data-pwa][data-platform="ios"] .pm-root { /* На iOS PWA safe-area-inset-top = высота Dynamic Island / notch */ padding-top: env(safe-area-inset-top, 44px); } /* ══════════════════════════════════════════════════════════════════ NATIVE (MAUI-приложение на iOS/Android) В нативном приложении системные инсеты обрабатываются платформой через Window.SetDecorFitsSystemWindows(false), поэтому используем те же env() переменные. ══════════════════════════════════════════════════════════════════ */ html[data-native] .app-shell { padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; background-color: var(--th-bg-rail, #1e1f22); } html[data-native] .pm-root { padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; height: calc(100dvh - env(safe-area-inset-top, 0px)); } /* kb-open padding покрывается универсальным правилом в @media (max-width: 767px) выше */ /* ══════════════════════════════════════════════════════════════════ NATIVE + PWA: инпут ближе к нижней навигации В браузере нужен --mobile-nav-h (44px) как резерв под адресную строку. В нативном приложении и PWA браузерного chrome нет — убираем лишние 44px. Остаётся только env(safe-area-inset-bottom) = высота системной навигации (nav bar ~48dp на Android, home indicator ~34px на iOS). Применяется только когда клавиатура ЗАКРЫТА (без body.kb-open). ══════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* body:not(.kb-open) — только когда клавиатура ЗАКРЫТА. Когда открыта — body.kb-open добавляется и это правило перестаёт матчиться, тогда срабатывает body.kb-open .pm-input-wrap выше с правильным kb-offset. */ html[data-native] body:not(.kb-open) .pm-input-wrap, html[data-pwa] body:not(.kb-open) .pm-input-wrap { padding: 0 10px env(safe-area-inset-bottom, 8px); } } /* ══════════════════════════════════════════════════════════════════ ANDROID — специфика ══════════════════════════════════════════════════════════════════ */ /* На Android с interactive-widget=resizes-content layout-viewport корректно сжимается → kb-offset уже корректен, дополнительных правок не нужно. */ /* Убираем тапный highlight (синяя вспышка при тапе) */ html[data-platform="android"] * { -webkit-tap-highlight-color: transparent; } /* ══════════════════════════════════════════════════════════════════ iOS NATIVE (MAUI BlazorWebView + WKWebView) ────────────────────────────────────────────────────────────────── На iOS WKWebView ведёт себя иначе чем Android WebView: • interactive-widget=resizes-content в WKWebView не сжимает layout-viewport — поэтому инпут уходит под клавиатуру. Нативный авто-скролл WKWebView отключён через WebViewConfig.cs (Bounces=false + KVO на contentOffset), значит инпут НАДО поднимать через --kb-offset. • 100dvh после открытия/закрытия клавиатуры может «застревать» на сжатой высоте — используем 100vh как стабильный fallback. • env(safe-area-inset-*) возвращает device-level inset (notch / home-indicator), несмотря на то что MAUI ContentPage уже сам обрабатывает safe-area — двойной отступ виден как «громадный нижний отступ» в скриншотах. Сжимаем env() до minimal значения. ══════════════════════════════════════════════════════════════════ */ /* WebView в MAUI на iOS: • padding-top через env(safe-area-inset-top) ДЕЙСТВИТЕЛЬНО нужен — WKWebView расширяется под статус-бар, и без него хедер уезжает наверх и системный статус-бар (часы/wifi/battery) накладывается на наш UI. Оставляем как в общем правиле html[data-native]. • Используем height: 100vh — стабильнее чем 100dvh после клавиатуры. */ /* На уровне html/body отрезаем горизонтальный overflow. Не используем position:fixed — это ломает вертикальную прокрутку внутренних списков .pm-friends-list / .pm-messages на iOS WKWebView (touch-события у fixed-родителя обрабатываются иначе). */ html[data-native][data-platform="ios"], html[data-native][data-platform="ios"] body { width: 100vw; max-width: 100vw; overflow-x: hidden; } html[data-native][data-platform="ios"] .app-shell { height: 100vh; } @media (max-width: 767px) { html[data-native][data-platform="ios"] .pm-root { height: calc(100vh - env(safe-area-inset-top, 0px)); } /* App-rail на iOS: top секция должна скроллиться, bottom (профиль) — всегда виден внизу. Без min-height:0 flex-child с overflow-y:auto на iOS WebKit не сжимается до доступной высоты, и app-rail-bottom выпадает за низ. */ html[data-native][data-platform="ios"] .app-rail-top { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1 1 auto; } html[data-native][data-platform="ios"] .app-rail-bottom { flex-shrink: 0; } /* Инпут: убираем большой `--mobile-nav-h + safe-area-bottom` зазор. На iOS env(safe-area-inset-bottom) ≈ 34px (home indicator) — этого достаточно, плюс минимальный 8px дыхательный отступ. Когда клавиатура открыта — `--kb-offset` (выставляется chat.js по visualViewport) поднимает инпут над клавиатурой. */ html[data-native][data-platform="ios"] body:not(.kb-open) .pm-input-wrap { padding: 0 10px max(env(safe-area-inset-bottom, 8px), 8px); } html[data-native][data-platform="ios"] body.kb-open .pm-input-wrap { padding: 0 10px max(var(--kb-offset, 0px), env(safe-area-inset-bottom, 8px)); } /* Горизонтальный скролл фиксится через KVO-observer в WebViewConfig.cs (сбрасывает contentOffset в 0,0). Здесь только защита уровня контейнеров — НЕ трогаем .pm-msg/.pm-msg-body, чтобы не сломать flex-layout сообщений. */ html[data-native][data-platform="ios"] .pm-chat, html[data-native][data-platform="ios"] .pm-chat-wrap, html[data-native][data-platform="ios"] .pm-messages, html[data-native][data-platform="ios"] .pm-msgs { max-width: 100%; overflow-x: hidden; } /* iOS long-press → contextmenu: подавляем нативный callout (share/copy/preview) на элементах с @oncontextmenu, иначе системное меню iOS перехватывает long-press и наш Blazor-хендлер не успевает сработать. Внутри сообщения текст по-прежнему выделяется (callout-default стоит только на корне .pm-msg, не на .pm-msg-text). */ html[data-native][data-platform="ios"] .pm-msg, html[data-native][data-platform="ios"] .pm-friend-item, html[data-native][data-platform="ios"] .pm-pinned-draggable, html[data-native][data-platform="ios"] .app-rail-item, html[data-native][data-platform="ios"] .app-rail-srv-wrap, html[data-native][data-platform="ios"] .app-rail-sc-wrap, html[data-native][data-platform="ios"] .srv-member-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Блок кода (``` ``` в сообщении): по дефолту overflow-x:auto + white-space:pre, что на iOS позволяет свайпом утянуть весь документ горизонтально. На iOS переводим в режим переноса — строки будут wrap'иться, а не скроллиться. */ html[data-native][data-platform="ios"] .chat-code-block, html[data-native][data-platform="ios"] .chat-code-block code { white-space: pre-wrap; word-break: break-word; overflow-x: hidden; } }