/* ===================================================================== FilmParty — floating notification toasts. Replaces the in-flow «green box at the top of the page» flash alerts. A toast is a temporary, floating, silver-glass card: it never takes part in page layout, never reflows content under it, and leaves with its own exit animation. Cheap by construction: one fixed host, no per-frame work, and only `opacity` + `transform` are animated so every transition stays on the compositor. Namespaced fp-toast-*, self-contained, loaded globally. ===================================================================== */ .fp-toast-host { position: fixed; z-index: 2147483000; top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; /* clears the sticky topbar so a toast slides in under it rather than across it */ padding: calc(env(safe-area-inset-top, 0px) + 74px) 12px 0; pointer-events: none; } @media (max-width: 640px) { .fp-toast-host { padding-top: calc(env(safe-area-inset-top, 0px) + 66px); } } .fp-toast-host * { box-sizing: border-box; } .fp-toast { --fp-toast-accent: rgba(226, 236, 248, 0.85); display: flex; align-items: center; gap: 10px; width: auto; max-width: min(92vw, 440px); padding: 12px 15px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.16); /* silver glass: a cool vertical sheen over a blurred backdrop */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)), rgba(16, 20, 28, 0.72); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14); color: #eef3f9; font-size: 14px; font-weight: 700; line-height: 1.75; text-align: right; pointer-events: auto; cursor: pointer; /* enter state */ opacity: 0; transform: translate3d(0, -14px, 0) scale(0.97); transition: opacity 0.22s cubic-bezier(0.22, 0.9, 0.3, 1), transform 0.26s cubic-bezier(0.22, 0.9, 0.3, 1); } .fp-toast.is-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* exit: lifts away rather than simply blinking out */ .fp-toast.is-out { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.96); transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.4, 0, 0.9, 0.4); } .fp-toast__icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--fp-toast-accent); } .fp-toast__icon svg { display: block; width: 100%; height: 100%; } .fp-toast__text { flex: 1 1 auto; min-width: 0; word-break: break-word; } /* The type only tints the icon and the rim — the surface stays silver so a notification never reads as a coloured block pasted into the page. */ .fp-toast--success { --fp-toast-accent: #4ade80; border-color: rgba(74, 222, 128, 0.32); } .fp-toast--error { --fp-toast-accent: #ff6b7d; border-color: rgba(255, 48, 79, 0.34); } .fp-toast--warning { --fp-toast-accent: #fbbf24; border-color: rgba(251, 191, 36, 0.32); } /* ---------- light theme ---------- */ :root[data-theme="light"] .fp-toast { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 247, 251, 0.82)), rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9); color: #0f172a; } :root[data-theme="light"] .fp-toast--success { border-color: rgba(18, 131, 63, 0.3); --fp-toast-accent: #12833f; } :root[data-theme="light"] .fp-toast--error { border-color: rgba(190, 18, 60, 0.3); --fp-toast-accent: #be123c; } :root[data-theme="light"] .fp-toast--warning { border-color: rgba(180, 120, 10, 0.3); --fp-toast-accent: #b4780a; } /* ---------- reduced motion: keep the fade, drop the travel ---------- */ @media (prefers-reduced-motion: reduce) { .fp-toast, .fp-toast.is-in, .fp-toast.is-out { transform: none; transition: opacity 0.15s linear; } } /* --------------------------------------------------------------------- Legacy `.filmparty-toast`. A dozen scripts create this element directly. Its styling only ever existed in home.css / profile-modern.css / profile-list-modals.css, so on every other page it rendered as an unstyled static
at the bottom of — a bare line of text wedged into the page. fp-toast.js normally adopts it and re-emits the message through the host above; these rules are the safety net so that even an element created before the adopter is ready floats and looks like the rest of the system. --------------------------------------------------------------------- */ .filmparty-toast { position: fixed; z-index: 2147482900; top: calc(env(safe-area-inset-top, 0px) + 74px); left: 50%; max-width: min(92vw, 440px); padding: 12px 15px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)), rgba(16, 20, 28, 0.72); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14); color: #eef3f9; font-size: 14px; font-weight: 700; line-height: 1.75; text-align: center; pointer-events: none; opacity: 0; transform: translate3d(-50%, -14px, 0) scale(0.97); transition: opacity 0.22s cubic-bezier(0.22, 0.9, 0.3, 1), transform 0.26s cubic-bezier(0.22, 0.9, 0.3, 1); } .filmparty-toast.show { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); } :root[data-theme="light"] .filmparty-toast { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 247, 251, 0.82)), rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9); color: #0f172a; } /* The element fp-toast.js parks for legacy callers must never paint itself: its messages are re-emitted as real toasts. */ .filmparty-toast[data-fp-toast-proxy] { display: none !important; } @media (prefers-reduced-motion: reduce) { .filmparty-toast, .filmparty-toast.show { transform: translate3d(-50%, 0, 0); transition: opacity 0.15s linear; } }