/* 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); } .header--mobile-actions-stack .header__title { margin-block-start: 0; } /* Collapse header when it only has a back button (native nav bar shows it) */ .header:is( :not(:has(.header__title, .header__actions)), :not(:has(.header__title, .header__actions--end)):has(.header__actions--start .btn--back:only-child) ) { 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: larger text, icons, gaps, and touch targets */ .hotwire-native .nav__section { font-size: var(--text-normal); } .hotwire-native .popup__item { --popup-item-min-height: 44px; --popup-item-gap: 0.25em; } .hotwire-native .popup__icon { --icon-size: 1.2em; } /* 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 */ [data-bridge-components~=overflow-menu] { [data-controller~=bridge--overflow-menu] { [data-bridge--overflow-menu-target~=item] { display: none; } } } /* Stamps → native status indicators */ [data-bridge-components~=stamp] { [data-controller~=bridge--stamp] { display: none; } } /* Page title → native navigation bar title. * Header-area headings are hidden because the nav bar shows the title. * Card-embedded headings (card__title) stay visible — the native bar * hides itself instead via the bridge elementVisible flag. */ [data-bridge-components~=title] { .header__title[data-bridge--title-target="header"] { display: none; } } }