/** * Native platform stylesheet — installed-app look & feel. * * Imported automatically by app-shell.css. Rules are gated on the platform * classes that `@burdenoff/fe-libs/shell-native` (`bootNativeShell`) puts on * : `.platform-ios`, `.platform-android`, `.platform-web`, * `.platform-native` (ios|android), `.platform-preview` (presentation preview * via `?__nativePreview=`), plus `html[data-desktop-*]` set by the Electron * bridge (`bootDesktopShell`). * * Token-only: every color comes from --color-* tokens. No raw colors. * * Sections are owned by workstreams (do not reorder the anchors): * 1. variables (WS-B) * 2. base reset (WS-B) * 3. tab bar / top bar (WS-B) * 4. swipe + transitions (WS-B) * 5. welcome / pwa / misc (WS-C) * 6. desktop (Electron) (WS-D) */ /* === 1. variables (WS-B) === */ :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --keyboard-height: 0px; --mobile-tabbar-height: 0px; --native-topbar-height: 0px; --swipe-progress: 0; /* Native chrome metrics (platform overrides in section 3). */ --native-tabbar-row-height: 56px; --native-topbar-row-height: 48px; /* Page-transition duration; overridable per instance via the `durationMs` prop on . */ --page-transition-duration: 260ms; --swipe-transition-duration: 220ms; } .platform-ios { --native-tabbar-row-height: 49px; --native-topbar-row-height: 44px; --page-transition-duration: 280ms; /* iOS system text stack — matches the platform's own chrome. */ --font-family-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; } .platform-android { --native-tabbar-row-height: 80px; --native-topbar-row-height: 56px; --page-transition-duration: 210ms; --font-family-body: Roboto, system-ui, sans-serif; } /* === 2. base reset (WS-B) === */ /* Appendix-D reset: a WebView should not feel like a browser. The platform classes live on , so is reached with :has(). */ .platform-native, html:has(body.platform-native) { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* The platform font stacks are redefined on the platform class (section 1); body consumes --font-family-body (see app-shell.css), so the override lands automatically — restated here so it survives a shell that sets its own body font-family. */ .platform-native { font-family: var(--font-family-body); } /* Shell chrome is furniture, not content — never selectable... */ .platform-native [data-shell-chrome] { -webkit-user-select: none; user-select: none; } /* ...but real text input and anything explicitly marked stays selectable. */ .platform-native input, .platform-native textarea, .platform-native [contenteditable], .platform-native .selectable { -webkit-user-select: text; user-select: text; } /* Kill the 300ms tap delay everywhere; the swipe root still needs vertical panning so the page can scroll while the edge gesture is armed. */ .platform-native * { touch-action: manipulation; } .platform-native [data-swipe-root], .platform-native [data-shell-scroll-container] { touch-action: pan-y; } /* Hover states never resolve on touch — use press states instead. */ @media (hover: none) { .platform-native :is(button, [role='button'], [role='tab'], a):active { opacity: 0.72; transform: scale(0.98); transition: transform 80ms ease-out, opacity 80ms ease-out; } } /* Native apps have no visible scrollbars. */ .platform-native ::-webkit-scrollbar { display: none; } .platform-native * { scrollbar-width: none; } /* Web-only chrome (install banners, browser CTAs, cross-product switcher). */ .platform-native .web-only { display: none !important; } /* 44px minimum touch targets — scoped to shell chrome so product tables and dense toolbars are not forcibly inflated. `.dense` opts a subtree out. */ .platform-native :is([data-shell-chrome], [data-mobile-tabbar], [data-native-topbar]) :is(button, a, [role='button'], [role='tab']) { min-height: 44px; min-width: 44px; } .platform-native :is([data-shell-chrome], [data-mobile-tabbar], [data-native-topbar]) .dense :is(button, a, [role='button'], [role='tab']) { min-height: 0; min-width: 0; } /* Safe areas are owned by ONE layer. On native (or any shell that opted into native-compact mode) that layer is AppShellLayout, so #root must not add a second inset on top of it (app-shell.css applies env() padding for web). */ .platform-native #root, #root:has([data-native-shell]) { padding: 0; } /* Keyboard handling — `body.keyboard-open` + `--keyboard-height` are set by the shell-native boot runtime from the Capacitor keyboard events. */ body.keyboard-open [data-mobile-tabbar]:not([data-keyboard-keep]) { display: none; } body.keyboard-open [data-native-shell] main { padding-bottom: var(--keyboard-height); } /* Content clears the fixed tab bar (the bar publishes its measured height). */ .platform-native [data-native-shell] main { padding-bottom: var(--mobile-tabbar-height); } /* === 3. tab bar / top bar (WS-B) === */ /* ---- MobileTabBar (bottom tabs) ---- */ [data-mobile-tabbar] { min-height: var(--native-tabbar-row-height); padding-bottom: max(var(--safe-bottom), env(safe-area-inset-bottom, 0px)); padding-left: max(var(--safe-left), env(safe-area-inset-left, 0px)); padding-right: max(var(--safe-right), env(safe-area-inset-right, 0px)); border-top: 1px solid var(--color-border-subtle); } [data-mobile-tabbar] .mobile-tab { padding-top: 6px; padding-bottom: 6px; } [data-mobile-tabbar] .mobile-tab__icon > svg { width: 24px; height: 24px; } [data-mobile-tabbar] .mobile-tab__label { font-size: 11px; line-height: 1.2; } /* iOS: translucent, hairline separator, 24px glyph over a 10px label. */ .platform-ios [data-mobile-tabbar] { background-color: color-mix(in srgb, var(--color-bg-surface) 80%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .platform-ios [data-mobile-tabbar] .mobile-tab__label { font-size: 10px; letter-spacing: 0.01em; } /* Android: Material 3 navigation bar — 80px row, active pill behind the icon. */ .platform-android [data-mobile-tabbar] { background-color: var(--color-bg-surface); } .platform-android [data-mobile-tabbar] .mobile-tab { padding-top: 12px; padding-bottom: 16px; gap: 4px; } .platform-android [data-mobile-tabbar] .mobile-tab__icon { border-radius: 9999px; padding: 4px 20px; transition: background-color 150ms ease-out, padding 150ms ease-out; } .platform-android [data-mobile-tabbar] .mobile-tab[data-active] .mobile-tab__icon { background-color: var(--color-bg-accentSubtle); } .platform-android [data-mobile-tabbar] .mobile-tab__label { font-size: 12px; } /* ---- NativeTopBar ---- */ [data-native-topbar] { padding-top: max(var(--safe-top), env(safe-area-inset-top, 0px)); padding-left: max(var(--safe-left), env(safe-area-inset-left, 0px)); padding-right: max(var(--safe-right), env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--color-border-subtle); } [data-native-topbar] .native-topbar__row { min-height: var(--native-topbar-row-height); padding-left: 8px; padding-right: 8px; } /* iOS: blurred translucent bar, title optically centered in the row. */ .platform-ios [data-native-topbar] { background-color: color-mix(in srgb, var(--color-bg-surface) 80%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .platform-ios [data-native-topbar] .native-topbar__title { text-align: center; } /* Android: opaque 56px bar, title left-aligned next to the back arrow, and no iOS-style back TEXT label. */ .platform-android [data-native-topbar] { background-color: var(--color-bg-surface); } .platform-android [data-native-topbar] .native-topbar__backlabel { display: none; } .platform-android [data-native-topbar] .native-topbar__title { position: static; margin: 0; max-width: none; justify-content: flex-start; flex: 1 1 auto; text-align: left; padding-left: 8px; } .platform-android [data-native-topbar] .native-topbar__lead { flex: 0 0 auto; } /* === 4. swipe + transitions (WS-B) === */ /* ---- Edge-swipe navigation (SwipeNavigation) ---- */ /* The swiped element carries data-swipe-dir + --swipe-progress (0..1). */ [data-swipe-dir] { will-change: transform; } [data-swipe-dir='back'] { transform: translateX(calc(var(--swipe-progress, 0) * 100%)); } [data-swipe-dir='forward'] { transform: translateX(calc(var(--swipe-progress, 0) * -100%)); } /* Commit / spring-back animate; the drag itself tracks the finger 1:1. */ [data-swipe-dir][data-swipe-committing] { transition: transform var(--swipe-transition-duration) cubic-bezier(0.32, 0.72, 0, 1); } /* Dim the page underneath as it slides away. */ [data-swipe-dir]::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-color: var(--color-bg-inverse); opacity: calc(var(--swipe-progress, 0) * 0.18); } /* ---- Page transitions (NativePageTransition) ---- */ [data-page-transition='enter-forward'] { animation: boff-page-enter-forward var(--page-transition-duration) cubic-bezier(0.32, 0.72, 0, 1) both; } [data-page-transition='enter-back'] { animation: boff-page-enter-back var(--page-transition-duration) cubic-bezier(0.32, 0.72, 0, 1) both; } /* Android replaces the iOS slide with a fade-through + 8px shared-axis Y. */ .platform-android [data-page-transition='enter-forward'], .platform-android [data-page-transition='enter-back'] { animation: boff-page-enter-android var(--page-transition-duration) ease-out both; } @keyframes boff-page-enter-forward { from { transform: translateX(30%); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } @keyframes boff-page-enter-back { from { transform: translateX(-15%); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } @keyframes boff-page-enter-android { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Reduced motion: no transforms, no animations — navigation still happens, it just lands instantly. */ @media (prefers-reduced-motion: reduce) { [data-swipe-dir], [data-swipe-dir='back'], [data-swipe-dir='forward'] { transform: none; transition: none; will-change: auto; } [data-swipe-dir]::before { display: none; } [data-page-transition] { animation: none; } .platform-native :is(button, [role='button'], [role='tab'], a):active { transform: none; transition: none; } } /* === 5. welcome / pwa / misc (WS-C) === */ /* Native welcome (installed-app entry screen) ---------------------------- */ [data-native-welcome] { /* Full-bleed entry surface: no document scroll, the carousel scrolls instead. */ overscroll-behavior: none; } .platform-ios [data-native-welcome] h1 { /* iOS large-title feel: tighter tracking, heavier weight. */ letter-spacing: -0.02em; font-weight: 700; } .platform-android [data-native-welcome] h1 { /* Material headline: normal tracking, medium weight. */ letter-spacing: 0; font-weight: 600; } [data-native-welcome-carousel] { scrollbar-width: none; -ms-overflow-style: none; /* Horizontal swipes belong to the carousel, never the back-swipe gesture. */ overscroll-behavior-x: contain; touch-action: pan-x; } [data-native-welcome-carousel]::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { [data-native-welcome-carousel] { scroll-behavior: auto; } } /* Offline banner --------------------------------------------------------- */ [data-offline-banner] { /* Sits under the notch and under the native top bar when one is mounted. */ top: calc( max(var(--safe-top, 0px), env(safe-area-inset-top, 0px)) + var(--native-topbar-height, 0px) ); } @media (prefers-reduced-motion: no-preference) { [data-offline-banner] { animation: boff-native-slide-down 200ms var(--motion-easing-out, ease-out) both; } } @keyframes boff-native-slide-down { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } } /* Pull-to-refresh -------------------------------------------------------- */ [data-pull-to-refresh] { /* Keep the browser's own overscroll/refresh out of the gesture. */ overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; } [data-pull-to-refresh-indicator] { transition: transform 180ms var(--motion-easing-out, ease-out), opacity 180ms var(--motion-easing-out, ease-out); } [data-pull-to-refresh][data-state='pulling'] [data-pull-to-refresh-indicator], [data-pull-to-refresh][data-state='armed'] [data-pull-to-refresh-indicator] { /* While the finger is down the indicator tracks the pull with no easing lag. */ transition: none; } @media (prefers-reduced-motion: reduce) { [data-pull-to-refresh-indicator] { transition: none; } } /* PWA update toast ------------------------------------------------------- */ [data-pwa-update-toast] { /* Above the home indicator and the mobile tab bar. */ bottom: calc( max(var(--safe-bottom, 0px), env(safe-area-inset-bottom, 0px)) + var(--mobile-tabbar-height, 0px) + 0.75rem ); } @media (prefers-reduced-motion: no-preference) { [data-pwa-update-toast] { animation: boff-native-slide-up 220ms var(--motion-easing-out, ease-out) both; } } @keyframes boff-native-slide-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } } /* Action sheet / native select rows -------------------------------------- */ [data-action-sheet-option], [data-action-sheet-cancel], [data-native-select-option] { /* Native minimum target size (spec §4/§5.7). */ min-height: 48px; -webkit-tap-highlight-color: transparent; } .platform-ios [data-action-sheet-option], .platform-ios [data-action-sheet-cancel] { /* iOS action sheets center their rows in a rounded card stack. */ font-size: 1.0625rem; } /* === 6. desktop (Electron) (WS-D) === */ /* * DOM contract, set by `bootDesktopShell()` (shared/native/desktop.ts): * html[data-desktop-platform="darwin|win32|linux"] * html[data-desktop-titlebar="hidden-inset|native"] * html[data-desktop-fullscreen|data-desktop-focused|data-desktop-maximized]="true|false" * body.platform-desktop * Chrome opts into window dragging with `data-desktop-drag-region`; interactive * groups inside it opt back out with `data-no-drag`. */ /* Frameless macOS window: the header IS the titlebar. Reserve room for the traffic lights on the left (they overlay the web contents at hidden-inset). */ html[data-desktop-titlebar='hidden-inset'] [data-desktop-drag-region] { -webkit-app-region: drag; app-region: drag; padding-left: 84px; } /* Fullscreen hides the traffic lights — give the padding back. */ html[data-desktop-titlebar='hidden-inset'][data-desktop-fullscreen='true'] [data-desktop-drag-region] { padding-left: 0; } /* Anything clickable inside a drag region must stay clickable. */ [data-desktop-drag-region] :is( button, a, input, select, textarea, [role='button'], [role='menuitem'], [role='combobox'], [role='tab'], [data-no-drag] ) { -webkit-app-region: no-drag; app-region: no-drag; } /* Desktop chrome should feel native: no text selection on the shell frame. Content areas keep normal selection. */ html[data-desktop-platform] :is([data-shell-chrome], [data-desktop-drag-region]) { user-select: none; -webkit-user-select: none; } /* Dim the frameless titlebar when the window loses focus (macOS convention). */ html[data-desktop-titlebar='hidden-inset'][data-desktop-focused='false'] [data-desktop-drag-region] { opacity: 0.92; } /* NOTE: scrollbars are intentionally left at the platform default on desktop — desktop users expect real scrollbars, unlike the mobile shells. */