/* ============================================================================ app-mode.css — native "App Mode" overrides Active only when has .app-mode (Capacitor native shell or an installed/ standalone PWA). Loaded site-wide from core/header.php. Everything here is a no-op for ordinary mobile-web/desktop visitors. ============================================================================ */ /* ── Bottom tab bar ───────────────────────────────────────────────────────── The tab bar markup lives in core/footer.php and is hidden by default + shown only under @media (display-mode: standalone). Inside a Capacitor WebView the display-mode is NOT standalone, so we re-show it for any .app-mode session. Higher specificity (html.app-mode #pwa-tabbar) beats the base #pwa-tabbar. */ html.app-mode #pwa-tabbar{ display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid rgba(0,0,0,.07); padding-bottom:env(safe-area-inset-bottom,0); box-shadow:0 -2px 16px rgba(0,0,0,.05); } /* Reserve space so page content never hides behind the bar. */ html.app-mode body{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0)) !important; } /* ── Status-bar safe area ─────────────────────────────────────────────────── app-native.js asks the native StatusBar plugin NOT to overlay the WebView, so normally no top inset is needed. This is a defensive fallback for devices / OS versions that force edge-to-edge (e.g. Android 15+). */ html.capacitor body{ padding-top:env(safe-area-inset-top,0); } /* ── Suppress web-only install chrome inside the app ──────────────────────── These promote "Add to Home Screen"/install, which is meaningless in the app. !important is required to beat the inline display set by footer JS. */ html.app-mode #pwa-fab, html.app-mode #pwa-install-banner, html.app-mode [data-hide-in-app]{ display:none !important; } /* ── Native scroll/feel ─────────────────────────────────────────────────────*/ html.app-mode, html.app-mode body{ overscroll-behavior-y:none; /* kill the rubber-band white flash */ -webkit-tap-highlight-color:transparent; } html.app-mode body{ -webkit-overflow-scrolling:touch; } /* Hide horizontal scrollbars that can appear in a fixed-width WebView. */ html.app-mode body::-webkit-scrollbar{ width:0; height:0; } /* Active tab uses the brand colour with a subtle lift. */ html.app-mode #pwa-tabbar .tabbar-item.tabbar-active i{ transform:translateY(-1px); } html.app-mode #pwa-tabbar .tabbar-item{ transition:color .15s ease, transform .15s ease; } html.app-mode #pwa-tabbar .tabbar-item:active{ transform:scale(.92); } /* Utility: tag anything in a page with class="only-in-app" / "hide-in-app". */ .only-in-app{ display:none; } html.app-mode .only-in-app{ display:revert; } html.app-mode .hide-in-app{ display:none !important; }