/* Native — styles for Hotwire Native shell. * * This layer sits above `utilities` in the cascade so native overrides take * priority. Elements are always rendered in HTML (so bridge JS can .click() * them) but hidden via CSS when the native app takes over rendering. * * The `data-bridge-components` attribute on lists which components * the native app supports. The `data-platform` attribute identifies the * platform ("native ios", "native android"). */ @layer native { /* ----------------------------------------------------------------------- * Safe area insets — prefer injected values from bridge--insets, * fall back to env() for PWA / web contexts. * ----------------------------------------------------------------------- */ :root { --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px)); --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px)); --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px)); --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px)); } /* ----------------------------------------------------------------------- * Platform-level overrides — when inside the native shell * ----------------------------------------------------------------------- */ [data-platform~=native] { -webkit-tap-highlight-color: transparent; /* Native shell handles back navigation */ .header .btn--back { display: none; } /* Native shell provides its own tab bar */ --footer-height: 0; /* Generic class for elements that should be web-only */ .hide-on-native { display: none; } /* Safe area padding */ &:not(.contained-scrolling) #main { padding-block-end: var(--custom-safe-inset-bottom); } .header { padding-block-start: var(--custom-safe-inset-top); } /* Collapse the header when the native nav bar fully owns it. * Matches either: * (a) Back-button-only pages (nav + back are native-provided). * (b) Pages that opt in via `.header--bridged` — meaning every * visible thing (title, toolbar buttons) is handled by a bridge * component, so the web
is pure duplication but its * DOM must stay so bridge controllers can still query targets. * The collapsed element still reserves `--custom-safe-inset-top` so * web content doesn't slide under the native status bar. */ .header:is( :not(:has(.header__actions)), :has(.header__actions--start .btn--back:only-child), .header--bridged ) { block-size: var(--custom-safe-inset-top); padding: unset; * { display: none; } } /* Card perma — native refinements */ .card-perma { margin-block-start: var(--block-space-half); .card { box-shadow: unset; } } .card-perma__bg { padding-inline: 0; padding-block-start: 0; background-color: unset; } /* Search */ .search__results { overscroll-behavior: auto; } .search__title { text-decoration: none; } } /* Duplicate hide-on-native under .hotwire-native for modal WKWebView sessions that may not have data-platform set. */ .hotwire-native .hide-on-native { display: none; } /* ----------------------------------------------------------------------- * Native menu drawer — clean flat-list look matching native apps. * * The native modal renders menu_page.html without the .nav__menu wrapper, * so items get only base popup.css styles. We override here to strip * web-specific chrome and produce a native iOS grouped-list look: * • No hairline section borders (nav.css .nav__section adds these) * • Small gray section labels replacing the sticky sunken-bg headers * • 44pt touch targets * • No border-radius on items * • Caret removed (sections always open) * ----------------------------------------------------------------------- */ .hotwire-native { /* Strip the hairline top border that nav.css adds between sections */ .nav__section { border-block-start: none; font-size: var(--text-normal); } /* Section label: lightweight iOS-style table header — small, faint, * plain background, no sticky, no caret */ .popup__section-title { background: transparent; position: static; padding-block-start: 2ch; padding-block-end: 0.5ch; padding-inline: var(--inline-space-half); color: var(--ink-faint); font-size: var(--text-x-small); font-family: -apple-system, system-ui, sans-serif; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Hide the expand/collapse caret — sections are always open on native */ .popup__section-title .icon--caret-down { display: none; } .popup__list { row-gap: 0; } /* 44pt touch targets, icon-label gap */ .popup__item { --popup-item-min-height: 44px; --popup-item-gap: 0.5ch; border-radius: 0; } /* Slightly larger icons */ .popup__icon { --icon-size: 1.3em; } /* Full-bleed row, padding from button not from item */ .popup__btn { border-radius: 0; padding-inline: var(--inline-space-half); } /* Pressed state (no hover on iOS) */ .popup__item:active { background: var(--color-ink-lightest); } @media (any-hover: hover) { .popup__item:hover { background: transparent; } } /* Footer: small and quiet — native shell provides branding context */ .nav__footer { background: transparent; border-block-start: none; font-size: var(--text-x-small); color: var(--ink-faint); opacity: 0.5; } } /* Turbo adds .turbo-native on — hide bridge--back web buttons * so only the native navigation chevron remains. */ .turbo-native [data-controller~="bridge--back"] { display: none; } /* ----------------------------------------------------------------------- * Android-specific overrides * ----------------------------------------------------------------------- */ [data-platform~=android] { .hide-on-android { display: none; } /* Android WebView uses larger base font — bump small text up */ .filters { --text-x-small: 1rem; } } /* ----------------------------------------------------------------------- * Bridge component hiding — hide HTML elements when the native app * renders them natively. The elements remain in the DOM so bridge * controllers can trigger .click() on them. * ----------------------------------------------------------------------- */ /* Toolbar buttons → native navigation bar buttons */ [data-bridge-components~=buttons] { [data-bridge--buttons-target~=button]:not([data-bridge-keep-visible]) { display: none; } } /* Form submit/cancel → native navigation bar buttons */ [data-bridge-components~=form] { [data-controller~=bridge--form] { [data-bridge--form-target~=submit] { display: none; } [data-bridge--form-target~=cancel] { display: none; } } } /* Overflow menu items → native action sheet. * Each item element carries data-controller~=bridge--overflow-menu directly * (per-element pattern); hide the element itself, not a child target. */ [data-bridge-components~=overflow-menu] { [data-controller~=bridge--overflow-menu] { display: none; } } /* Stamps → native status indicators */ [data-bridge-components~=stamp] { [data-controller~=bridge--stamp] { display: none; } } }