:root { --app-navbar-height: 46px; --app-drawer-width: 240px; --dxbl-accent-color: var(--bs-primary); } [data-bs-theme="dark"] { --dxbl-accent-color: var(--bs-primary); } /* ===== Ekran ładowania aplikacji ===== */ .app-loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bs-body-bg); color: var(--bs-body-color); font-family: "Roboto Condensed", system-ui, sans-serif; z-index: 9999; animation: app-fadein 0.35s ease; } @keyframes app-fadein { from { opacity: 0; } to { opacity: 1; } } /* Okrągły spinner w kolorze primary */ .app-loading-spinner { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(var(--bs-primary-rgb), 0.15); border-top-color: var(--bs-primary); animation: app-spinner-spin 0.8s linear infinite; margin-bottom: 2rem; } @keyframes app-spinner-spin { to { transform: rotate(360deg); } } .app-loading-title { font-size: 1.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--bs-primary); margin-bottom: 0.25rem; } .app-loading-sub { font-size: 0.8rem; font-weight: 300; opacity: 0.5; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2.5rem; } .app-loading-progress-wrap { width: 240px; height: 2px; background: rgba(var(--bs-primary-rgb), 0.12); border-radius: 2px; overflow: hidden; margin-bottom: 0.8rem; } /* Szerokość paska napędzana przez --blazor-load-percentage ustawianą przez Blazor WASM na */ .app-loading-bar { height: 100%; width: var(--blazor-load-percentage, 0%); background: var(--bs-primary); border-radius: 2px; transition: width 0.35s ease; } .app-loading-status { font-size: 0.68rem; font-weight: 300; opacity: 0.4; letter-spacing: 0.14em; text-transform: uppercase; } /* ===== Blazor Error UI ===== */ #blazor-error-ui { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; min-width: min(90vw, 400px); padding: 1rem 1.25rem; background: #fff; border-left: 4px solid var(--bs-primary); border-radius: 6px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); font-family: "Roboto Condensed", system-ui, sans-serif; animation: app-fadein 0.3s ease; } [data-bs-theme="dark"] #blazor-error-ui { background: #1b2741; color: #e9ecef; } .blazor-error-content { display: flex; align-items: center; gap: 0.85rem; } .blazor-error-icon { font-size: 1.35rem; line-height: 1; color: var(--bs-primary); flex-shrink: 0; } [data-bs-theme="dark"] .blazor-error-icon { color: #90b4f5; } .blazor-error-message { flex: 1; font-size: 0.88rem; line-height: 1.45; display: flex; flex-direction: column; gap: 0.15rem; } .blazor-error-message strong { font-weight: 600; } .blazor-error-message .reload { color: var(--bs-primary); text-underline-offset: 2px; } [data-bs-theme="dark"] .blazor-error-message .reload { color: #90b4f5; } .blazor-error-dismiss { background: none; border: none; cursor: pointer; padding: 0.2rem 0.4rem; color: #999; font-size: 0.9rem; line-height: 1; border-radius: 3px; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .blazor-error-dismiss:hover { background: rgba(0, 0, 0, 0.07); color: #333; } [data-bs-theme="dark"] .blazor-error-dismiss { color: #888; } [data-bs-theme="dark"] .blazor-error-dismiss:hover { background: rgba(255, 255, 255, 0.07); color: #e9ecef; }