/* * Install offer and update notice. * * Raw CSS served from public/ — no build step (assets/web/ is outside mix). * * Both bars sit bottom-left, deliberately away from the notification toasts, * which come in bottom-right (see notifications.css). Two things sliding into * the same corner is how a nurse dismisses an urgent result by reaching for an * install prompt. */ .hms-pwa-bar { position: fixed; bottom: 1.25rem; inset-inline-start: 1.25rem; z-index: 1080; display: flex; align-items: center; gap: .875rem; max-width: min(24rem, calc(100vw - 2.5rem)); padding: .875rem 1rem; background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); font-size: .875rem; line-height: 1.45; /* Slides in from the edge it is anchored to, so RTL slides from the right. */ transform: translateX(calc(-1 * (100% + 2rem))); opacity: 0; transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; } [dir="rtl"] .hms-pwa-bar { transform: translateX(calc(100% + 2rem)); } .hms-pwa-bar.is-in { transform: translateX(0); opacity: 1; } .hms-pwa-bar__icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: rgba(0, 144, 168, .1); color: #0090a8; border-radius: 10px; font-size: 1rem; } .hms-pwa-bar--update .hms-pwa-bar__icon { background: rgba(217, 119, 6, .12); color: #b45309; } .hms-pwa-bar__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .hms-pwa-bar__text strong { font-weight: 620; } .hms-pwa-bar__text small { color: #64748b; font-size: .78rem; line-height: 1.35; } .hms-pwa-btn { flex: 0 0 auto; font: inherit; font-weight: 620; white-space: nowrap; color: #fff; background: #0090a8; border: 0; border-radius: 9px; padding: .5rem 1rem; cursor: pointer; transition: background .15s ease; } .hms-pwa-btn:hover { background: #007a8f; } .hms-pwa-btn:focus-visible { outline: 3px solid rgba(0, 144, 168, .45); outline-offset: 2px; } .hms-pwa-close { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; color: #94a3b8; background: transparent; border: 0; border-radius: 7px; cursor: pointer; transition: background .15s ease, color .15s ease; } .hms-pwa-close:hover { background: #f1f5f9; color: #475569; } /* Dark mode — the admin shell sets .dark-mode on ; the media query covers the login and public pages, which follow the system instead. */ body.dark-mode .hms-pwa-bar { background: #1e293b; color: #e2e8f0; border-color: #334155; } body.dark-mode .hms-pwa-bar__text small { color: #94a3b8; } body.dark-mode .hms-pwa-close:hover { background: #334155; color: #cbd5e1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hms-pwa-bar { background: #1e293b; color: #e2e8f0; border-color: #334155; } :root:not([data-theme="light"]) .hms-pwa-bar__text small { color: #94a3b8; } :root:not([data-theme="light"]) .hms-pwa-close:hover { background: #334155; color: #cbd5e1; } } /* On a narrow screen the bar spans the width rather than floating. */ @media (max-width: 32rem) { .hms-pwa-bar { inset-inline: .75rem; bottom: .75rem; max-width: none; } } /* * Already installed: hide every "install this app" affordance. * * pwa.js stamps the class, and the display-mode query is the belt to its * braces — a window opened from the dock matches even before the script runs. */ .hms-standalone [data-pwa-install-button], .hms-standalone #hms-pwa-install { display: none !important; } @media (display-mode: standalone) { [data-pwa-install-button], #hms-pwa-install { display: none !important; } } /* * The installed window has no browser chrome, so anything the app pins to the * very top or bottom needs to clear the device's own safe areas (a notch, a * home indicator). Harmless in a tab, where the insets are zero. */ @media (display-mode: standalone) { body { padding-bottom: env(safe-area-inset-bottom); } } @media print { .hms-pwa-bar { display: none !important; } }