/* Network health banner — injected once into by network-watcher.js. A fixed, top-centre pill that slides in when connectivity degrades and slides out when it recovers. */ .network-banner { position: fixed; top: 0.75rem; left: 50%; /* Parked above the viewport; .visible drops it into view. */ transform: translate(-50%, -180%); z-index: 1000; /* above the fixed header (z-index: 10) */ display: flex; align-items: center; gap: 0.6rem; max-width: min(70vw, 40rem); padding: 0.6rem 1.2rem; border-radius: 2rem; font-size: var(--font-size-normal); font-weight: 600; color: var(--global-font-color); box-shadow: var(--soft-continer-outer-shadow); opacity: 0; pointer-events: none; transition: transform 0.35s ease, opacity 0.35s ease; background: var(--darker-primary-green); } .network-banner.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .network-banner[data-variant="slow"] { background: var(--darker-primary-green); box-shadow: var(--primary-button-shadow); color: var(--colored-button-font-color); } .network-banner[data-variant="reconnecting"] { background: var(--darker-primary-green); color: var(--global-font-color); } .network-banner[data-variant="disconnected"], .network-banner[data-variant="offline"] { background: var(--danger-red); } .network-banner-spinner { display: none; font-size: 1.1rem; --indicator-color: #fff; --track-color: rgba(255, 255, 255, 0.35); --track-width: 2px; visibility: visible; /* override the global `sl-spinner { visibility: hidden }` */ } .network-banner.has-spinner .network-banner-spinner { display: inline-flex; }