/** * V2 — Toasts globaux * -------------------------------------------------------------- * Système de notifications « toast » maison, sans dépendance (pas de * toastr). Réutilise les design tokens définis dans dashboard.css * (--surface, --text, --accent, --success/--danger/--warning…), donc * chargé APRÈS dashboard.css dans le du layout V2. * * Piloté par public/assets/v2/js/toast.js → window.pluginToast(...). * Repris du toast `.auth-toast` de la page login (login.css) mais * généralisé à tout le shell V2. */ .plugin-toast-stack { position: fixed; inset-block-end: clamp(0.75rem, 3vw, 1.5rem); inset-inline-end: clamp(0.75rem, 3vw, 1.5rem); z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; max-inline-size: min(22rem, calc(100vw - 1.5rem)); pointer-events: none; } .plugin-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.875rem 2.25rem 0.875rem 0.875rem; border-radius: var(--radius, 0.875rem); background: var(--surface, #fff); color: var(--text, #1a1a1a); border: 1px solid var(--border, #e5e7eb); box-shadow: var(--shadow-lg, 0 20px 48px rgba(20, 20, 30, 0.12), 0 8px 16px rgba(20, 20, 30, 0.06)); font-size: 0.8125rem; line-height: 1.4; animation: pluginToastIn 0.32s var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)) both; transform-origin: bottom right; } .plugin-toast.is-leaving { animation: pluginToastOut 0.22s var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)) forwards; } @keyframes pluginToastIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pluginToastOut { to { opacity: 0; transform: translateY(-6px) scale(0.97); } } .plugin-toast__icon { flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 0.5rem; display: grid; place-items: center; background: color-mix(in oklch, var(--text-2, #6b7280) 8%, transparent); color: var(--text-2, #6b7280); } .plugin-toast__icon svg { inline-size: 1.125rem; block-size: 1.125rem; } .plugin-toast__body { flex: 1; min-inline-size: 0; } .plugin-toast__title { display: block; font-family: var(--font-display, 'Inter Tight', system-ui, sans-serif); font-weight: 700; font-size: 0.8125rem; letter-spacing: -0.005em; color: var(--text, #1a1a1a); } .plugin-toast__text { display: block; color: var(--text-2, #6b7280); overflow-wrap: anywhere; } .plugin-toast__close { position: absolute; inset-block-start: 0.375rem; inset-inline-end: 0.375rem; inline-size: 1.5rem; block-size: 1.5rem; border: 0; background: transparent; cursor: pointer; border-radius: 0.375rem; color: var(--text-3, #9ca3af); font-size: 1.125rem; line-height: 1; opacity: 0.7; transition: opacity 0.12s, background 0.12s; } .plugin-toast__close:hover { opacity: 1; background: var(--surface-2, #f3f4f6); } .plugin-toast__progress { position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 2px; background: var(--accent, #2563eb); transform-origin: left; border-radius: 0 0 var(--radius, 0.875rem) var(--radius, 0.875rem); animation: pluginToastProgress linear forwards; } @keyframes pluginToastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .plugin-toast--success { border-color: color-mix(in oklch, var(--success, #16a34a) 25%, transparent); } .plugin-toast--success .plugin-toast__icon { background: var(--success-soft, #dcfce7); color: light-dark(oklch(36% 0.13 155), oklch(86% 0.10 155)); } .plugin-toast--success .plugin-toast__progress { background: var(--success, #16a34a); } .plugin-toast--error { border-color: color-mix(in oklch, var(--danger, #dc2626) 25%, transparent); } .plugin-toast--error .plugin-toast__icon { background: var(--danger-soft, #fee2e2); color: light-dark(oklch(38% 0.18 25), oklch(88% 0.12 25)); } .plugin-toast--error .plugin-toast__progress { background: var(--danger, #dc2626); } .plugin-toast--warning { border-color: color-mix(in oklch, var(--warning, #d97706) 28%, transparent); } .plugin-toast--warning .plugin-toast__icon { background: var(--warning-soft, #fef3c7); color: light-dark(oklch(42% 0.13 75), oklch(86% 0.10 75)); } .plugin-toast--warning .plugin-toast__progress { background: var(--warning, #d97706); } .plugin-toast--info { border-color: color-mix(in oklch, var(--accent, #2563eb) 28%, transparent); } .plugin-toast--info .plugin-toast__icon { background: var(--accent-soft, #dbeafe); color: var(--accent-text, #1d4ed8); } .plugin-toast--info .plugin-toast__progress { background: var(--accent, #2563eb); } @media (prefers-reduced-motion: reduce) { .plugin-toast, .plugin-toast__progress { animation: none !important; } }