/* ============================================================ Zorem UI — Snackbar (Floating Glass Pill) ------------------------------------------------------------ Top-right toast for save / action feedback. Design: glassmorphic white pill with a vertical accent strip on the left edge, a circular icon, the message, a close button, and a bottom progress bar that animates from full to empty over the toast's lifetime. Markup (built by ZUI.snackbar JS API):
… Data saved successfully
Variants: --success green --error / --danger red --warning amber --info blue (default) JS API: ZUI.snackbar('Saved', { type: 'success' }); ZUI.snackbar('Failed', { type: 'error', duration: 5000 }); ============================================================ */ /* ---- Stack container (fixed, anchors stack to top-right) ---- */ .zui-scope .zui-snackbar-stack, .zui-snackbar-stack { position: fixed; top: 56px; /* below WP admin bar */ inset-inline-end: 24px; z-index: 100001; display: flex; flex-direction: column; gap: 14px; pointer-events: none; /* let underlying clicks through; items re-enable */ max-width: calc(100vw - 48px); } /* ---- Toast ---- */ .zui-scope .zui-snackbar, .zui-snackbar-stack .zui-snackbar { position: relative; pointer-events: auto; min-width: 340px; max-width: 440px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.92); /* clean white glass — no tint */ backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 16px; box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); overflow: hidden; color: var(--zui-text-strong, #0f172a); animation: zui-snackbar-in 280ms cubic-bezier(0.16, 1, 0.3, 1); transition: opacity 240ms ease, transform 240ms ease; will-change: transform, opacity; } /* ---- Icon circle (large, soft variant-tinted background) ---- Background is a light tint of the variant accent (success = light green, error = light red, info = light blue, etc.) so the icon stays legible against the white snackbar surface. */ .zui-scope .zui-snackbar__icon, .zui-snackbar-stack .zui-snackbar__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix( in srgb, var(--zui-snackbar-accent, var(--zui-info, #2563eb)) 12%, #fff ); color: var(--zui-snackbar-accent, var(--zui-info, #2563eb)); } .zui-scope .zui-snackbar__icon svg, .zui-snackbar-stack .zui-snackbar__icon svg { width: 20px; height: 20px; stroke-width: 2.5; } /* ---- Message text ---- */ .zui-scope .zui-snackbar__text, .zui-snackbar-stack .zui-snackbar__text { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--zui-text-strong, #0f172a); } /* ---- Close button ---- */ .zui-scope .zui-snackbar__close, .zui-snackbar-stack .zui-snackbar__close { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--zui-text-muted, #94a3b8); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color 160ms ease, color 160ms ease; } .zui-scope .zui-snackbar__close:hover, .zui-snackbar-stack .zui-snackbar__close:hover { background: rgba(15, 23, 42, 0.06); color: var(--zui-text-strong, #0f172a); } .zui-scope .zui-snackbar__close svg, .zui-snackbar-stack .zui-snackbar__close svg { width: 16px; height: 16px; stroke-width: 2.25; } /* ---- Bottom progress bar (countdown) ---- */ .zui-scope .zui-snackbar__progress, .zui-snackbar-stack .zui-snackbar__progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left center; background: var(--zui-snackbar-accent, var(--zui-info, #2563eb)); border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; animation: zui-snackbar-progress var(--zui-snackbar-duration, 3000ms) linear forwards; } /* Pause progress on hover so user can read longer messages */ .zui-scope .zui-snackbar:hover .zui-snackbar__progress, .zui-snackbar-stack .zui-snackbar:hover .zui-snackbar__progress { animation-play-state: paused; } /* ---- Variant accents (single custom prop drives the left strip, icon, and progress bar) ---- */ .zui-scope .zui-snackbar--success, .zui-snackbar-stack .zui-snackbar--success { --zui-snackbar-accent: var(--zui-success, #10b981); } .zui-scope .zui-snackbar--error, .zui-scope .zui-snackbar--danger, .zui-snackbar-stack .zui-snackbar--error, .zui-snackbar-stack .zui-snackbar--danger { --zui-snackbar-accent: var(--zui-danger, #f43f5e); } .zui-scope .zui-snackbar--warning, .zui-snackbar-stack .zui-snackbar--warning { --zui-snackbar-accent: var(--zui-warning, #f59e0b); } .zui-scope .zui-snackbar--info, .zui-snackbar-stack .zui-snackbar--info { --zui-snackbar-accent: var(--zui-info, #2563eb); } /* ---- Animations ---- */ @keyframes zui-snackbar-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes zui-snackbar-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } .zui-snackbar.is-leaving { opacity: 0; transform: translateX(20px) scale(0.96); } /* ---- Responsive ---- */ @media (max-width: 600px) { .zui-scope .zui-snackbar-stack, .zui-snackbar-stack { inset-inline-start: 12px; inset-inline-end: 12px; top: 46px; max-width: none; } .zui-scope .zui-snackbar, .zui-snackbar-stack .zui-snackbar { min-width: 0; max-width: none; } } /* ---- Reduced-motion fallback ---- */ @media (prefers-reduced-motion: reduce) { .zui-scope .zui-snackbar, .zui-snackbar-stack .zui-snackbar { animation-duration: 1ms; transition-duration: 1ms; } .zui-scope .zui-snackbar__progress, .zui-snackbar-stack .zui-snackbar__progress { animation: none; transform: scaleX(0); } }