/* * .NET 10 Reconnection Modal Styles * * Blazor sets these CSS classes on #components-reconnect-modal: * - components-reconnect-hide: Hidden (connected) * - components-reconnect-show: Visible (connection lost) * - components-reconnect-retrying: Visible (actively retrying) * - components-reconnect-failed: Visible (reconnection failed) * - components-reconnect-rejected: Visible (server rejected) */ /* Base modal styles - hidden by default */ .reconnect-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; } /* Overlay backdrop */ .reconnect-overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); } /* Dialog container */ .reconnect-dialog { position: relative; background-color: #ffffff; border-radius: 8px; padding: 2rem; min-width: 320px; max-width: 400px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); text-align: center; z-index: 1; } /* Hide all content sections by default */ .reconnect-content { display: none; } /* Show modal and appropriate content based on state */ #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-retrying, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { display: flex; } /* Show specific content for each state */ #components-reconnect-modal.components-reconnect-show .reconnect-show-content { display: block; } #components-reconnect-modal.components-reconnect-retrying .reconnect-retrying-content { display: block; } #components-reconnect-modal.components-reconnect-failed .reconnect-failed-content { display: block; } #components-reconnect-modal.components-reconnect-rejected .reconnect-rejected-content { display: block; } /* State exclusivity — Blazor can transiently set multiple state classes during transitions (e.g. show + retrying). Only one panel should ever render. Priority: rejected > failed > retrying > show. These rules come AFTER the display:block reveal rules above so they win on equal specificity (later wins). */ #components-reconnect-modal.components-reconnect-retrying .reconnect-show-content, #components-reconnect-modal.components-reconnect-failed .reconnect-show-content, #components-reconnect-modal.components-reconnect-failed .reconnect-retrying-content, #components-reconnect-modal.components-reconnect-rejected .reconnect-show-content, #components-reconnect-modal.components-reconnect-rejected .reconnect-retrying-content, #components-reconnect-modal.components-reconnect-rejected .reconnect-failed-content { display: none; } /* Defensive button styling — the reconnect modal lives in App.razor's OUTSIDE MainLayout's cascade, so MudBlazor's theme tokens (specifically --mud-palette-primary-text = white) don't reach the buttons here. Without these overrides, .mud-button-filled-primary inside the modal renders with dark grey text on the teal background (3.25:1 contrast — fails WCAG AA). Same root cause as the MobileCapture host-route fixes. */ #components-reconnect-modal .mud-button-filled-primary, #components-reconnect-modal .mud-button-filled-primary:hover, #components-reconnect-modal .mud-button-filled-primary:focus, #components-reconnect-modal .mud-button-filled-primary .mud-button-label, #components-reconnect-modal .mud-button-filled-primary .mud-icon-root { color: #ffffff; } #components-reconnect-modal .mud-button-root, #components-reconnect-modal .mud-button-root .mud-button-label { text-transform: none; } /* Responsive adjustments */ @media (max-width: 480px) { .reconnect-dialog { min-width: 280px; margin: 1rem; padding: 1.5rem; } } /* Animation for smooth appearance */ @keyframes reconnect-fade-in { from { opacity: 0; } to { opacity: 1; } } #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-retrying, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected { animation: reconnect-fade-in 0.2s ease-out; } /* Pulse animation kept available for other panels if needed. Binding removed from .reconnect-show-content / .reconnect-retrying-content because the new RentlyLogoSpinner's 3D flip is visually richer than a 5% scale pulse — running both together is redundant noise. */ @keyframes reconnect-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }