/* ============================================================ LEVIAPAY · Notification / Toast system Canonical spec ported from the design mockup. Respects design tokens — rounds in Klar/Kontrast, squares in Raster. Types: success · error · warning · info · loading NOTE: the container element itself carries `lp-app theme-light dir-raster` so the .lp-app-scoped tokens resolve (it lives on , outside the app shells) and the Raster look applies. ============================================================ */ .lp-toasts { position: fixed; z-index: 4000; display: flex; flex-direction: column; gap: 11px; width: 382px; max-width: calc(100vw - 28px); pointer-events: none; /* The container carries `lp-app` only so the .lp-app-scoped design tokens resolve. Neutralise the structural props that class also sets (redesign.css: .lp-app{min-height:100vh;background;...}) so the fixed, bottom-right container does not become a full-height background block. */ min-height: 0; height: auto; background: transparent; } .lp-toasts.pos-br { bottom: 24px; right: 24px; } .lp-toasts.pos-tr { top: 24px; right: 24px; } .lp-toasts.pos-tc { top: 24px; left: 50%; transform: translateX(-50%); align-items: center; } .lp-toasts.pos-bc { bottom: 24px; left: 50%; transform: translateX(-50%); align-items: center; } @media (max-width: 560px) { .lp-toasts { width: auto; left: 14px; right: 14px; transform: none; align-items: stretch; } .lp-toasts.pos-tc, .lp-toasts.pos-tr { top: 14px; } .lp-toasts.pos-bc, .lp-toasts.pos-br { bottom: 14px; } } /* ---------- the toast ---------- */ .lp-toast { pointer-events: auto; position: relative; overflow: hidden; width: 100%; display: flex; gap: 12px; align-items: flex-start; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--accent)); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 13px 13px 13px 14px; transform-origin: center; animation: lp-toast-in 0.3s cubic-bezier(0.2, 0.85, 0.25, 1) both; } .lp-toast.leaving { animation: lp-toast-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; } /* squared direction: genuinely sharp corners (Raster) */ .dir-raster .lp-toast { border-radius: 0; border-left-width: 3px; } .dir-raster .lp-toast-ic { border-radius: 0; } .dir-raster .lp-toast-x { border-radius: 0; } .dir-raster .lp-toast-btn { border-radius: 0; } @keyframes lp-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes lp-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(18px) scale(0.98); } } @media (prefers-reduced-motion: reduce) { .lp-toast, .lp-toast.leaving { animation-duration: 0.01ms; } } /* type accent colours map onto existing system tokens */ .lp-toast.t-success { --tc: var(--success); } .lp-toast.t-error { --tc: var(--danger); } .lp-toast.t-warning { --tc: var(--warn); } .lp-toast.t-info { --tc: var(--accent); } .lp-toast.t-loading { --tc: var(--ink-3); } /* leading icon tile */ .lp-toast-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--r-chip); display: grid; place-items: center; margin-top: 1px; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); } .dir-kontrast .lp-toast-ic { color: #fff; background: var(--tc); } /* spinner for loading */ .lp-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--tc) 28%, transparent); border-top-color: var(--tc); animation: lp-spin 0.7s linear infinite; } .dir-kontrast .lp-spin { border-color: rgba(255, 255, 255, 0.4); border-top-color: #fff; } @keyframes lp-spin { to { transform: rotate(360deg); } } /* body */ .lp-toast-body { flex: 1; min-width: 0; padding-top: 1px; } .lp-toast-ey { font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tc); margin: 0 0 3px; line-height: 1; } .lp-toast-msg { font-size: var(--fs-sm); font-weight: 600; line-height: 1.42; color: var(--ink); letter-spacing: -0.005em; overflow-wrap: anywhere; text-wrap: pretty; } .lp-toast-desc { font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; } .lp-toast-src { display: inline-block; margin-top: 7px; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); font-family: var(--mono, ui-monospace, monospace); } /* action row */ .lp-toast-act { display: flex; gap: 8px; margin-top: 11px; } .lp-toast-btn { height: 29px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.14s, border-color 0.14s; } .lp-toast-btn:hover { background: var(--hover); } .lp-toast-btn.primary { background: var(--tc); border-color: var(--tc); color: #fff; } .lp-toast-btn.primary:hover { background: color-mix(in srgb, var(--tc) 86%, #000); } /* close */ .lp-toast-x { flex: 0 0 24px; width: 24px; height: 24px; margin: -2px -2px 0 0; appearance: none; border: 0; background: transparent; color: var(--ink-3); border-radius: 7px; cursor: pointer; display: grid; place-items: center; transition: background 0.14s, color 0.14s; } .dir-raster .lp-toast-x { border-radius: var(--r-chip); } .lp-toast-x:hover { background: var(--hover); color: var(--ink); } /* progress bar */ .lp-toast-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--tc); opacity: 0.85; transform-origin: left center; animation: lp-prog linear forwards; } .lp-toast.is-paused .lp-toast-prog { animation-play-state: paused; } @keyframes lp-prog { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ---------- ACK modal (single-OK gate, e.g. account deleted) ---------- */ .lp-ack-scrim { position: fixed; inset: 0; z-index: 4100; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.46); animation: lp-ack-fade 0.18s ease both; } @keyframes lp-ack-fade { from { opacity: 0; } to { opacity: 1; } } .lp-ack { width: 100%; max-width: 420px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 24px 24px 20px; animation: lp-toast-in 0.26s cubic-bezier(0.2, 0.85, 0.25, 1) both; } .dir-raster .lp-ack { border-radius: 0; } .dir-raster .lp-ack-ok { border-radius: 0; } .lp-ack-t { font-size: var(--fs-h2, 19px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 8px; } .lp-ack-msg { font-size: var(--fs-sm); font-weight: 500; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; overflow-wrap: anywhere; } .lp-ack-act { display: flex; justify-content: flex-end; } .lp-ack-ok { height: 38px; padding: 0 20px; border: 0; border-radius: var(--r-ctl); background: var(--accent); color: #fff; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; } .lp-ack-ok:hover { background: color-mix(in srgb, var(--accent) 86%, #000); } @media (prefers-reduced-motion: reduce) { .lp-ack-scrim, .lp-ack { animation-duration: 0.01ms; } }