/* Loading overlay — theme tokens align with app-shell */ /* Light defaults: applied to root and html.rm-theme-light */ :root, html.rm-theme-light { --rm-loading-backdrop: rgba(0, 0, 0, 0.45); --rm-loading-surface: #fff; --rm-loading-border: rgba(0, 0, 0, 0.06); --rm-loading-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 10px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08); --rm-loading-text: #2e3338; --rm-loading-text-muted: #5c6370; --rm-loading-text-pending: #949ba4; --rm-loading-active: #0d6efd; --rm-loading-success: #198754; --rm-loading-pending-ring: #ccc; --rm-loading-spinner-track: rgba(13, 110, 253, 0.2); --rm-loading-ring-glow: 0.28; --rm-loading-dot-pending-opacity: 0.38; } /* Dark override: explicit dark theme */ html.rm-theme-dark { --rm-loading-backdrop: rgba(0, 0, 0, 0.5); --rm-loading-surface: #26272b; --rm-loading-border: rgba(255, 255, 255, 0.06); --rm-loading-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.28); --rm-loading-text: #dbdee1; --rm-loading-text-muted: #949ba4; --rm-loading-text-pending: #6d7278; --rm-loading-active: #5865f2; --rm-loading-success: #3ba55d; --rm-loading-pending-ring: #4a4d52; --rm-loading-spinner-track: rgba(88, 101, 242, 0.22); --rm-loading-ring-glow: 0.38; --rm-loading-dot-pending-opacity: 0.34; } /* Dark override: auto theme follows system, or default without theme class */ @media (prefers-color-scheme: dark) { html.rm-theme-auto, html:not([class*="rm-theme-"]) { --rm-loading-backdrop: rgba(0, 0, 0, 0.5); --rm-loading-surface: #26272b; --rm-loading-border: rgba(255, 255, 255, 0.06); --rm-loading-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.28); --rm-loading-text: #dbdee1; --rm-loading-text-muted: #949ba4; --rm-loading-text-pending: #6d7278; --rm-loading-active: #5865f2; --rm-loading-success: #3ba55d; --rm-loading-pending-ring: #4a4d52; --rm-loading-spinner-track: rgba(88, 101, 242, 0.22); --rm-loading-ring-glow: 0.38; --rm-loading-dot-pending-opacity: 0.34; } } /* Light override: auto theme follows system, or default without theme class */ @media (prefers-color-scheme: light) { html.rm-theme-auto, html:not([class*="rm-theme-"]) { --rm-loading-backdrop: rgba(0, 0, 0, 0.45); --rm-loading-surface: #fff; --rm-loading-border: rgba(0, 0, 0, 0.06); --rm-loading-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 10px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08); --rm-loading-text: #2e3338; --rm-loading-text-muted: #5c6370; --rm-loading-text-pending: #949ba4; --rm-loading-active: #0d6efd; --rm-loading-success: #198754; --rm-loading-pending-ring: #ccc; --rm-loading-spinner-track: rgba(13, 110, 253, 0.2); --rm-loading-ring-glow: 0.28; --rm-loading-dot-pending-opacity: 0.38; } } .loading-progress-dialog { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 16px; max-width: 100vw; overflow: hidden; -webkit-font-smoothing: antialiased; } .loading-progress-backdrop { position: absolute; inset: 0; background: var(--rm-loading-backdrop); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .loading-progress-content { position: relative; box-sizing: border-box; width: min(272px, 100%); min-width: 0; max-width: 100%; padding: 20px; background: var(--rm-loading-surface); border: 1px solid var(--rm-loading-border); border-radius: 16px; color: var(--rm-loading-text); box-shadow: var(--rm-loading-shadow); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .loading-progress-spinner, .loading-progress-title, .loading-progress-dots, .loading-progress-status { animation: loading-part-in 0.38s cubic-bezier(0.2, 0, 0, 1) both; } .loading-progress-spinner { animation-delay: 0s; } .loading-progress-title { animation-delay: 0.08s; } .loading-progress-dots { animation-delay: 0.16s; } .loading-progress-status { animation-delay: 0.24s; } @keyframes loading-part-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .loading-progress-spinner { display: flex; justify-content: center; flex: 0 0 46px; width: 100%; height: 46px; margin: 0; } .loading-spinner { position: relative; width: 46px; height: 46px; } .spinner-ring { position: absolute; inset: 0; border: 2.5px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: loading-spin-ring 1.65s cubic-bezier(0.45, 0, 0.55, 1) infinite; will-change: transform; } .spinner-ring:nth-child(1) { animation-delay: -0.5s; color: var(--rm-edge-status-1); border-top-color: var(--rm-edge-status-1); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rm-edge-status-1) calc(var(--rm-loading-ring-glow) * 100%), transparent)); } .spinner-ring:nth-child(2) { animation-delay: -0.33s; color: var(--rm-edge-status-2); border-top-color: var(--rm-edge-status-2); inset: 12%; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rm-edge-status-2) calc(var(--rm-loading-ring-glow) * 100%), transparent)); } .spinner-ring:nth-child(3) { animation-delay: -0.16s; color: var(--rm-edge-status-3); border-top-color: var(--rm-edge-status-3); inset: 24%; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rm-edge-status-3) calc(var(--rm-loading-ring-glow) * 100%), transparent)); } .spinner-ring:nth-child(4) { color: var(--rm-edge-status-4); border-top-color: var(--rm-edge-status-4); inset: 36%; opacity: 0.94; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--rm-edge-status-4) calc(var(--rm-loading-ring-glow) * 85%), transparent)); } @keyframes loading-spin-ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loading-progress-title { margin: 0; flex: 0 0 auto; width: 100%; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--rm-loading-text); text-wrap: balance; } .loading-progress-dots { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 100%; min-height: 10px; flex-wrap: nowrap; gap: 6px; } .loading-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--rm-loading-pending-ring); flex-shrink: 0; transition-property: background-color, transform, opacity, box-shadow; transition-duration: 0.32s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); } .loading-dot.pending { opacity: var(--rm-loading-dot-pending-opacity); transform: scale(0.94); } .loading-dot.active { background: var(--rm-loading-active); opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-loading-active) 20%, transparent), 0 0 12px color-mix(in srgb, var(--rm-loading-active) 42%, transparent); animation: loading-dot-pulse 1.35s ease-in-out infinite; } .loading-dot.completed { background: var(--rm-loading-success); opacity: 0.96; transform: scale(1); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rm-loading-success) 28%, transparent); } @keyframes loading-dot-pulse { 0%, 100% { transform: scale(1.12); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-loading-active) 18%, transparent), 0 0 10px color-mix(in srgb, var(--rm-loading-active) 36%, transparent); } 50% { transform: scale(1.24); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rm-loading-active) 24%, transparent), 0 0 16px color-mix(in srgb, var(--rm-loading-active) 50%, transparent); } } .loading-progress-status { margin: 0; flex: 0 0 auto; width: 100%; max-width: 100%; font-size: 12px; line-height: 1.35; color: var(--rm-loading-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-wrap: pretty; } .loading-progress-status.is-empty { opacity: 0; } .loading-progress-dialog.is-fatal-error .loading-progress-content { width: min(320px, 100%); gap: 12px; } .loading-progress-dialog.is-fatal-error .loading-progress-title { color: var(--rm-loading-danger, #dc3545); } .loading-progress-dialog.is-fatal-error .loading-progress-status { visibility: visible; white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.45; } .loading-progress-actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-top: 4px; } .loading-progress-reload-btn { width: 100%; } @media (max-width: 480px) { .loading-progress-content { padding: 18px 16px; gap: 8px; } .loading-progress-title { font-size: 14px; } .loading-progress-dots { gap: 5px; } .loading-dot { width: 7px; height: 7px; } .loading-progress-status { visibility: hidden; } .loading-progress-dialog.is-fatal-error .loading-progress-status { visibility: visible; } } @media (prefers-reduced-motion: reduce) { .loading-progress-spinner, .loading-progress-title, .loading-progress-dots, .loading-progress-status { animation: none; } .spinner-ring { animation: none; filter: none; } .loading-dot.active { animation: none; } .loading-dot { transition: none; } } .geo-result-marker { width: 40px; height: 40px; position: relative; cursor: pointer; } .geo-result-pulse { width: 40px; height: 40px; border-radius: 50%; background: rgba(13, 110, 253, 0.4); border: 3px solid #0d6efd; position: absolute; top: 0; left: 0; animation: geo-pulse 1.5s ease-out infinite; } @keyframes geo-pulse { 0% { transform: scale(0.8); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }