/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* Installed-PWA app chrome. The shared/_pwa_detector script adds `pwa` to in standalone display mode; here we swap the PUBLIC header/footer for the bottom tab bar (see shared/_mobile_tab_bar). Scoped to #site-header/ #site-footer so the admin layout's mobile top bar (the hamburger that opens the admin drawer) stays visible in the installed app. Inert on desktop web. */ #pwa-tab-bar { display: none; } .pwa #pwa-tab-bar { display: block; } .pwa #site-header, .pwa #site-footer, .pwa [data-donate-fab] { display: none; } /* Pad for the notch/status bar (top) and — on pages that render the tab bar — the tab bar + home indicator (bottom). Needs viewport-fit=cover (set in the layouts) for the safe-area insets to be non-zero on iOS/Android. */ .pwa body { padding-top: env(safe-area-inset-top); } .pwa body:has(#pwa-tab-bar) { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); } /* App footer at the bottom of Home (language switcher + admin entrance), only in the app chrome — the native shell and the installed PWA both lose the web header/footer that carry these for the browser site. */ .pwa #app-footer, body.hotwire-native #app-footer { display: block; }