/* * 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. */ turbo-frame { display: block; } turbo-frame[busy] { opacity: 0.5; transition: opacity 200ms ease-in; } turbo-frame:not([busy]) { opacity: 1; transition: opacity 150ms ease-out; } /* PWA standalone mode: show dock, hide drawer on small screens */ .pwa-standalone-show { display: none; } @media (display-mode: standalone) { /* On small screens in PWA: show dock layout, hide drawer layout */ @media (max-width: 1023px) { .pwa-standalone-hide { display: none !important; } .pwa-standalone-show { display: flex !important; } } } /* iOS standalone (detected via JS, adds class to ) */ @media (max-width: 1023px) { .ios-standalone .pwa-standalone-hide { display: none !important; } .ios-standalone .pwa-standalone-show { display: flex !important; } } /* Fixed dock at bottom with safe area for notched devices */ .pwa-dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding-bottom: env(safe-area-inset-bottom); }