/* * Admin Panel — Toast Notifications * * Stacking inline notifications anchored to a fixed region. Consumed via * the adminToast.* JS API (admin-toast.js). Scoped to body[data-page="admin"]. * * Markup pattern (generated by JS): *

* *

Saved

Changes were saved successfully.

* *

* * Variants: --success, --error, --warning, --info, (default: neutral) */ /* ── Region (single, lives at the end of ) ───────────────────────── */ body[data-page="admin"] .admin-toast-region { position: fixed; bottom: var(--admin-space-5); right: var(--admin-space-5); z-index: 100; display: flex; flex-direction: column; gap: var(--admin-space-2); pointer-events: none; /* clicks pass through gaps; toasts re-enable */ max-width: min(420px, calc(100vw - 2 * var(--admin-space-3))); width: auto; } @media (max-width: 640px) { body[data-page="admin"] .admin-toast-region { top: calc(56px + var(--admin-space-2)); right: var(--admin-space-3); left: var(--admin-space-3); bottom: auto; max-width: none; } } /* ── Toast card ───────────────────────────────────────────────────────── */ body[data-page="admin"] .admin-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--admin-space-3); padding: var(--admin-space-3) var(--admin-space-4); background: var(--admin-surface-elevated); border: 1px solid var(--admin-border); border-left: 3px solid var(--admin-text-muted); border-radius: var(--admin-radius-md); box-shadow: var(--admin-shadow-2); color: var(--admin-text); font-size: 13px; line-height: 1.4; min-width: 280px; max-width: 420px; animation: adminToastSlideIn 220ms var(--admin-ease) both; } @keyframes adminToastSlideIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width: 640px) { @keyframes adminToastSlideIn { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } } body[data-page="admin"] .admin-toast.is-leaving { animation: adminToastSlideOut 180ms var(--admin-ease) both; } @keyframes adminToastSlideOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(8px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { body[data-page="admin"] .admin-toast, body[data-page="admin"] .admin-toast.is-leaving { animation: none; } } /* ── Variants ─────────────────────────────────────────────────────────── */ body[data-page="admin"] .admin-toast--success { border-left-color: var(--admin-success); } body[data-page="admin"] .admin-toast--success .admin-toast__icon { background: var(--admin-success-soft); color: var(--admin-success); } body[data-page="admin"] .admin-toast--error, body[data-page="admin"] .admin-toast--danger { border-left-color: var(--admin-danger); } body[data-page="admin"] .admin-toast--error .admin-toast__icon, body[data-page="admin"] .admin-toast--danger .admin-toast__icon { background: var(--admin-danger-soft); color: var(--admin-danger); } body[data-page="admin"] .admin-toast--warning { border-left-color: var(--admin-warning); } body[data-page="admin"] .admin-toast--warning .admin-toast__icon { background: var(--admin-warning-soft); color: var(--admin-warning); } body[data-page="admin"] .admin-toast--info { border-left-color: var(--admin-info); } body[data-page="admin"] .admin-toast--info .admin-toast__icon { background: var(--admin-info-soft); color: var(--admin-info); } /* ── Parts ────────────────────────────────────────────────────────────── */ body[data-page="admin"] .admin-toast__icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--admin-radius-sm); background: var(--admin-surface-raised); color: var(--admin-text-muted); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } body[data-page="admin"] .admin-toast__icon svg { width: 16px; height: 16px; } body[data-page="admin"] .admin-toast__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } body[data-page="admin"] .admin-toast__title { margin: 0; font-weight: 600; color: var(--admin-text); font-size: 13px; line-height: 1.3; } body[data-page="admin"] .admin-toast__message { margin: 0; color: var(--admin-text-muted); font-size: 12px; line-height: 1.4; word-wrap: break-word; } body[data-page="admin"] .admin-toast__message a { color: var(--admin-accent); text-decoration: underline; } body[data-page="admin"] .admin-toast__close { flex: 0 0 auto; width: 24px; height: 24px; margin-top: -2px; margin-right: -4px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--admin-text-subtle); border-radius: var(--admin-radius-sm); cursor: pointer; font-size: 18px; line-height: 1; transition: background var(--admin-dur-1) var(--admin-ease), color var(--admin-dur-1) var(--admin-ease); } body[data-page="admin"] .admin-toast__close:hover { background: var(--admin-surface-raised); color: var(--admin-text); } body[data-page="admin"] .admin-toast__close:focus-visible { outline: none; box-shadow: var(--admin-focus); } /* Toast with optional action button (e.g. "Undo") */ body[data-page="admin"] .admin-toast__action { flex: 0 0 auto; align-self: center; height: 28px; padding: 0 var(--admin-space-3); background: transparent; border: 1px solid var(--admin-border); border-radius: var(--admin-radius-sm); color: var(--admin-text); font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--admin-dur-1) var(--admin-ease), border-color var(--admin-dur-1) var(--admin-ease); } body[data-page="admin"] .admin-toast__action:hover { background: var(--admin-surface-raised); border-color: var(--admin-border-strong); } @media (pointer: coarse), (max-width: 768px) { body[data-page="admin"] .admin-toast__close { width: var(--admin-tap-h); height: var(--admin-tap-h); margin-top: -8px; margin-right: -10px; } body[data-page="admin"] .admin-toast__action { min-height: var(--admin-tap-h); } }