/* ============================================================================ UPLOAD PROGRESS OVERLAY — the visible half of js/component/upload-progress.js ---------------------------------------------------------------------------- Built once, lazily, and appended to ; the script toggles [hidden] and the two state classes. Nothing here is page-specific, so it is linked from fragments/header.html next to the script. The overlay is deliberately blocking. While a multipart POST is in flight there is nothing useful to do on the page behind it, and a visitor who can still reach the form is a visitor who can still submit it again — which is the bug this whole feature exists to prevent. ========================================================================== */ .upload-progress { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--overlay-dark-lg, rgba(10, 5, 50, 0.7)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: uploadProgressIn 0.2s ease; } @keyframes uploadProgressIn { from { opacity: 0; } to { opacity: 1; } } /* The script flips `hidden`; without this the flex display would win over it. */ .upload-progress[hidden] { display: none; } body.upload-in-progress { overflow: hidden; } .upload-progress-card { width: min(420px, 100%); box-sizing: border-box; padding: 2rem 1.75rem; border-radius: 16px; text-align: center; color: #fff; background: var(--thumb-solid, #2c2480); border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 20px 60px rgba(10, 5, 50, 0.55); } .upload-progress-spinner { width: 44px; height: 44px; margin: 0 auto 1.1rem; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--hue-gold, #ffd700); animation: uploadProgressSpin 0.9s linear infinite; } @keyframes uploadProgressSpin { to { transform: rotate(360deg); } } .upload-progress-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; } .upload-progress-track { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.18); } .upload-progress-bar { height: 100%; width: 0; border-radius: 999px; background: var(--gradient-primary, linear-gradient(90deg, #7259b6, #6b6ed3)); transition: width 0.25s ease; } /* The body is sent; what happens next is server-side and unmeasurable, so the bar stops claiming a percentage and just shows that work is still going on. A bar that sits at 100% while nothing visibly happens reads as "frozen", which is the exact impression this feature is here to remove. */ .upload-progress.is-indeterminate .upload-progress-bar { width: 40% !important; animation: uploadProgressSlide 1.3s ease-in-out infinite; } @keyframes uploadProgressSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .upload-progress-detail { margin-top: 0.75rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); min-height: 1.2em; } .upload-progress-note { margin-top: 0.85rem; font-size: 0.8rem; font-style: italic; color: var(--color-gold-text, #ffe27a); } .upload-progress-note[hidden] { display: none; } /* ── error state ─────────────────────────────────────────────────────────── */ .upload-progress.is-error .upload-progress-card { border-color: color-mix(in srgb, var(--hue-danger, #ff6b6b) 60%, transparent); } .upload-progress.is-error .upload-progress-spinner { animation: none; border-color: color-mix(in srgb, var(--hue-danger, #ff6b6b) 55%, transparent); border-top-color: var(--hue-danger, #ff6b6b); } .upload-progress.is-error .upload-progress-track { display: none; } @media (prefers-reduced-motion: reduce) { .upload-progress, .upload-progress-spinner, .upload-progress-bar, .upload-progress.is-indeterminate .upload-progress-bar { animation: none; transition: none; } }