/* * Sprint 2026-05-11 UNBLOCK-5 — overlay canonical de progresso para uploads * MinIO. CSS-only (class-based, NUNCA inline style — veto canonical). * * Uso: * * ... * * * Visibilidade alternada por JS (forms/upload-progress.js) via remove/add do * atributo HTML `hidden` (default). */ .upload-progress-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); padding: 1rem; animation: upload-progress-fade-in 0.15s ease-out; } .upload-progress-overlay[hidden] { display: none; } .upload-progress-card { width: min(100%, 360px); background: #ffffff; color: var(--color-text, #1f2937); border-radius: 0.875rem; padding: 1.5rem 1.25rem 1.25rem; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .upload-progress-spinner { width: 44px; height: 44px; border: 4px solid rgba(0, 70, 124, 0.18); border-top-color: var(--color-primary, #00467c); border-radius: 50%; animation: upload-progress-spin 0.9s linear infinite; } .upload-progress-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--color-text, #1f2937); } .upload-progress-status { font-size: 0.875rem; color: var(--color-muted, #6b7280); margin: 0; min-height: 1.25rem; } .upload-progress-bar { width: 100%; height: 8px; background: rgba(0, 70, 124, 0.12); border-radius: 999px; overflow: hidden; margin-top: 0.25rem; } .upload-progress-bar-fill { height: 100%; width: var(--upload-progress-pct, 0%); background: var(--color-primary, #00467c); border-radius: 999px; transition: width 0.2s ease; } .upload-progress-bar-fill.is-indeterminate { --upload-progress-pct: 35%; animation: upload-progress-indeterminate 1.4s ease-in-out infinite; } .upload-progress-percent { font-size: 0.8125rem; font-weight: 600; color: var(--color-primary, #00467c); letter-spacing: 0.02em; } .upload-progress-percent.is-hidden { visibility: hidden; } @keyframes upload-progress-spin { to { transform: rotate(360deg); } } @keyframes upload-progress-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes upload-progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } @media (max-width: 480px) { .upload-progress-card { padding: 1.25rem 1rem 1rem; } .upload-progress-spinner { width: 36px; height: 36px; } } @media (prefers-reduced-motion: reduce) { .upload-progress-spinner, .upload-progress-bar-fill.is-indeterminate { animation: none; } .upload-progress-overlay { animation: none; } }