/** * pwa-banners.css * * Styles for all SnowAlarm PWA banners injected by pwa.js. * Add to your after your main stylesheet: * * * Placement rationale: * #sa-install-banner — TOP on desktop (conventional, no thumb needed) * BOTTOM on mobile (thumb-friendly, matches Chrome's * own install chip and the iOS install banner) * #sa-offline-banner — TOP on all devices (persistent warning, must be seen) * #sa-update-banner — TOP on all devices (persistent action, must be seen) * #sa-ios-install-banner — BOTTOM always (iOS Share sheet is at the bottom) * #sa-ios-open-banner — BOTTOM always (contextual nudge near the toolbar) * Toast (#sa-pwa-toast) — BOTTOM always (injected by pwa.js with its own CSS) */ /* ─── Shared base for persistent top banners ─────────────────────────────── */ #sa-offline-banner, #sa-update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.4; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* ─── Android/Chrome install banner ──────────────────────────────────────── */ /* * Desktop: fixed top bar — conventional position, no thumb reach needed. * Mobile: fixed bottom sheet — thumb-friendly, consistent with toast and * iOS install banner, and matches where Chrome shows its own * install prompt chip. */ #sa-install-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.4; background: #0A1628; color: #F0F6FF; border-bottom: 1px solid rgba(91, 163, 217, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } #sa-install-banner span { flex: 1; } #sa-install-banner button { flex-shrink: 0; border: none; border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } /* Primary action — orange, high contrast */ #sa-install-banner button:first-of-type { background: #FF6B35; color: #ffffff; } #sa-install-banner button:first-of-type:hover { background: #e85e2b; } /* Secondary / dismiss — ghost style */ #sa-install-banner button:last-of-type { background: transparent; color: rgba(240, 246, 255, 0.6); border: 1px solid rgba(240, 246, 255, 0.2); } #sa-install-banner button:last-of-type:hover { color: #F0F6FF; border-color: rgba(240, 246, 255, 0.4); } /* ── Mobile override: move install banner to bottom ── */ @media (max-width: 768px) { #sa-install-banner { top: auto; bottom: 0; border-bottom: none; border-top: 2px solid rgba(91, 163, 217, 0.4); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4); /* Extra bottom padding for Android navigation bar / gesture bar */ padding: 14px 16px 28px; /* Slide up on appear — matches iOS install banner feel */ animation: sa-slide-up 0.25s ease-out; /* Stack buttons vertically on narrow screens */ flex-wrap: wrap; } #sa-install-banner span { width: 100%; margin-bottom: 10px; } #sa-install-banner button { flex: 1; text-align: center; } } /* ─── Offline banner — top on all devices ───────────────────────────────── */ #sa-offline-banner { background: #3d2000; color: #ffd580; border-bottom: 1px solid #7a4a00; justify-content: center; text-align: center; } /* ─── Update banner — top on all devices ────────────────────────────────── */ #sa-update-banner { background: #0d2a0d; color: #a8e6a8; border-bottom: 1px solid #1a5c1a; justify-content: center; gap: 16px; } #sa-update-banner button { flex-shrink: 0; border: none; border-radius: 6px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; background: #2e7d32; color: #ffffff; } #sa-update-banner button:hover { background: #256427; } /* ─── iOS install banner (bottom sheet) ──────────────────────────────────── */ #sa-ios-install-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1c2f4a; color: #F0F6FF; border-top: 2px solid #5BA3D9; border-radius: 16px 16px 0 0; padding: 20px 20px 32px; /* extra bottom padding for iPhone home indicator */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5); animation: sa-slide-up 0.3s ease-out; } /* Drag handle pill */ #sa-ios-install-banner::before { content: ''; display: block; width: 40px; height: 4px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; margin: 0 auto 16px; } #sa-ios-install-inner { position: relative; max-width: 480px; margin: 0 auto; } /* Dismiss ✕ button */ #sa-ios-dismiss { position: absolute; top: -4px; right: 0; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: rgba(240, 246, 255, 0.7); font-size: 14px; cursor: pointer; line-height: 1; } #sa-ios-dismiss:hover { background: rgba(255, 255, 255, 0.2); color: #F0F6FF; } #sa-ios-install-msg { font-size: 15px; font-weight: 600; color: #F0F6FF; margin: 0 0 12px; padding-right: 32px; line-height: 1.4; } #sa-ios-install-steps { margin: 0 0 16px 20px; padding: 0; } #sa-ios-install-steps li { font-size: 14px; color: rgba(240, 246, 255, 0.85); margin-bottom: 8px; line-height: 1.5; } #sa-ios-install-steps li strong { color: #F0F6FF; } /* Share icon approximation */ .sa-ios-icon { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #5BA3D9; border-radius: 4px; padding: 1px 4px; font-size: 11px; color: #5BA3D9; vertical-align: middle; margin: 0 2px; line-height: 1; } /* Bouncing arrow pointing to browser toolbar */ #sa-ios-arrow { text-align: center; color: #5BA3D9; font-size: 22px; margin-bottom: 12px; animation: sa-bounce 1.4s ease-in-out infinite; } /* "Done — I added it" button */ #sa-ios-done { display: block; width: 100%; padding: 13px 16px; background: #5BA3D9; color: #ffffff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; text-align: center; letter-spacing: 0.1px; margin-top: 4px; } #sa-ios-done:hover, #sa-ios-done:active { background: #4a8bbf; } /* ─── iOS "open from home screen" nudge banner ───────────────────────────── */ #sa-ios-open-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1c2f4a; color: #F0F6FF; border-top: 2px solid #FF6B35; border-radius: 16px 16px 0 0; padding: 20px 20px 32px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5); animation: sa-slide-up 0.3s ease-out; } #sa-ios-open-inner { position: relative; max-width: 480px; margin: 0 auto; } #sa-ios-open-inner p { font-size: 15px; color: rgba(240, 246, 255, 0.9); margin: 0; padding-right: 32px; line-height: 1.5; } #sa-ios-open-inner button { position: absolute; top: -4px; right: 0; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 28px; height: 28px; color: rgba(240, 246, 255, 0.7); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ─── Shared animations ──────────────────────────────────────────────────── */ @keyframes sa-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes sa-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }