/* ============ Confirmation pop-up (LEN-29) ============ * Animated success/error/warning/info/loading popovers used in place of the * legacy flat "messageList" banner. The JS module in pop.js exposes * `window.LTPop.success()` / `.error()` / `.warning()` / `.info()` / * `.loading()` — see that file for the API. * * Variables come from tokens.css; pop.css assumes :root is already set up. */ /* Hide the server-rendered Django message banners that pop.js consumes on * DOMContentLoaded. With JS enabled the divs are replayed as animated pops * (and then removed from the DOM); without JS the noscript fallback in * base_v2.html / base_auth.html re-enables them so users still see the text. * Tagged with `html:not(.no-js)` so the noscript override is a plain * `.no-js` class on rather than fighting specificity here. */ html:not(.no-js) #message, html:not(.no-js) .auth-messages { display: none !important; } .lt-pop-host { position: fixed; top: 0; right: 0; bottom: 0; left: 0; /* longhands, not `inset:` — see components.css modal note */ z-index: 100; /* above .modal-overlay (90) so a pop fired from a modal sits on top */ display: none; place-items: start center; padding-top: 96px; pointer-events: none; } .lt-pop-host.is-open { display: grid; } .lt-pop-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20, 18, 15, 0.18); opacity: 0; transition: opacity 160ms ease-out; pointer-events: auto; } .lt-pop-host.is-open .lt-pop-scrim { opacity: 1; } .lt-pop { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); width: 320px; max-width: calc(100% - var(--s-8)); padding: var(--s-6) var(--s-5) var(--s-5); background: var(--c-panel); border-radius: var(--r-5); box-shadow: var(--sh-3); pointer-events: auto; cursor: pointer; opacity: 0; transform: translateY(-8px) scale(0.96); transition: opacity 180ms ease-out, transform 180ms cubic-bezier(0.2, 0.85, 0.35, 1); } .lt-pop.is-in { opacity: 1; transform: translateY(0) scale(1); } .lt-pop.is-out { opacity: 0; transform: translateY(-6px) scale(0.97); transition: opacity 140ms ease-in, transform 140ms ease-in; } .lt-pop-msg { font-size: var(--fs-15); font-weight: 500; color: var(--c-fg); text-align: center; line-height: 1.4; letter-spacing: -0.005em; margin: 0; } /* ---------- Icon disc ---------- */ .lt-pop-icon { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; position: relative; flex: none; } .lt-pop-icon svg { width: 100%; height: 100%; display: block; } .lt-pop-disc { fill: currentColor; opacity: 0.12; transform-origin: 50% 50%; } .lt-pop-stroke { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } /* Variant colors — tokens drive the hue, all share the same icon disc. */ .lt-pop-success .lt-pop-icon { color: var(--c-success); } .lt-pop-error .lt-pop-icon { color: var(--c-danger); } .lt-pop-warning .lt-pop-icon { color: var(--c-warning); } .lt-pop-info .lt-pop-icon { color: var(--c-info); } .lt-pop-loading .lt-pop-icon { color: var(--c-accent); } /* ---------- Animated check stroke (success) ---------- * `pathLength="60"` on the SVG normalises the actual path length to 60 * units regardless of the literal coordinates, so a single dasharray/offset * pair works for both halves of the check. dashoffset animates 60 → 0 so * the line draws in, after the card has eased in (140ms) — the user * notices the draw as the card settles. */ .lt-pop-success .lt-pop-stroke { stroke-dasharray: 60; stroke-dashoffset: 60; } .lt-pop.is-in.lt-pop-success .lt-pop-stroke { animation: lt-pop-draw 320ms cubic-bezier(0.55, 0.05, 0.2, 1) 140ms forwards; } /* ---------- Animated X stroke (error) ---------- * Two lines drawn sequentially. The shake reinforces the "something went * wrong" cue without being aggressive. Same `pathLength` trick — each path * is normalised to 40 units so the dash math is stable. */ .lt-pop-error .lt-pop-stroke-a, .lt-pop-error .lt-pop-stroke-b { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; } .lt-pop.is-in.lt-pop-error .lt-pop-stroke-a { animation: lt-pop-draw 220ms ease-out 120ms forwards; } .lt-pop.is-in.lt-pop-error .lt-pop-stroke-b { animation: lt-pop-draw 220ms ease-out 280ms forwards; } .lt-pop.is-in.lt-pop-error .lt-pop-icon { animation: lt-pop-shake 360ms ease-out 200ms; } /* ---------- Warning & info ---------- */ .lt-pop-warning .lt-pop-stroke, .lt-pop-info .lt-pop-stroke, .lt-pop-warning .lt-pop-dot, .lt-pop-info .lt-pop-dot { fill: currentColor; stroke: none; } .lt-pop-warning .lt-pop-bar, .lt-pop-info .lt-pop-bar { fill: currentColor; stroke: none; transform-origin: 50% 50%; opacity: 0; } .lt-pop.is-in.lt-pop-warning .lt-pop-bar, .lt-pop.is-in.lt-pop-info .lt-pop-bar { animation: lt-pop-fade-in 200ms ease-out 140ms forwards; } .lt-pop.is-in.lt-pop-warning .lt-pop-dot, .lt-pop.is-in.lt-pop-info .lt-pop-dot { animation: lt-pop-fade-in 200ms ease-out 280ms forwards; opacity: 0; } /* ---------- Loading spinner ---------- */ .lt-pop-loading .lt-pop-spinner { width: 48px; height: 48px; border-radius: 999px; border: 4px solid var(--c-accent-soft); border-top-color: var(--c-accent); animation: lt-pop-spin 720ms linear infinite; } /* ---------- Keyframes ---------- */ @keyframes lt-pop-draw { to { stroke-dashoffset: 0; } } @keyframes lt-pop-fade-in { to { opacity: 1; } } @keyframes lt-pop-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } @keyframes lt-pop-spin { to { transform: rotate(360deg); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .lt-pop, .lt-pop.is-in, .lt-pop.is-out, .lt-pop-scrim { transition: opacity 80ms linear; transform: none; } .lt-pop.is-in { transform: none; } .lt-pop.is-out { transform: none; } .lt-pop-success .lt-pop-stroke, .lt-pop-error .lt-pop-stroke-a, .lt-pop-error .lt-pop-stroke-b { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; } .lt-pop.is-in.lt-pop-error .lt-pop-icon { animation: none; } .lt-pop.is-in.lt-pop-warning .lt-pop-bar, .lt-pop.is-in.lt-pop-info .lt-pop-bar, .lt-pop.is-in.lt-pop-warning .lt-pop-dot, .lt-pop.is-in.lt-pop-info .lt-pop-dot { opacity: 1; animation: none; } .lt-pop-loading .lt-pop-spinner { animation: lt-pop-spin 1200ms linear infinite; } }