49 lines
1.5 KiB
CSS
49 lines
1.5 KiB
CSS
/* assets/css/toast.css */
|
|
/* Works whether the root is in <body> or inside a <dialog open> (top layer) */
|
|
.toast-root, #toast-root {
|
|
position: fixed; /* relative to viewport even inside dialog's top layer */
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 2147483647;
|
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.toast {
|
|
pointer-events: auto;
|
|
position: fixed;
|
|
right: 16px;
|
|
top: 16px;
|
|
min-width: 240px;
|
|
max-width: 420px;
|
|
border-radius: 12px;
|
|
padding: 12px 14px;
|
|
box-shadow: 0 10px 30px rgba(2, 6, 23, .25), 0 2px 8px rgba(2,6,23,.12);
|
|
color: #0f172a;
|
|
background: #ffffff;
|
|
border: 1px solid rgba(148,163,184,.35);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
animation: toast-slide-in .18s ease-out;
|
|
}
|
|
|
|
.toast + .toast { margin-top: 12px; }
|
|
|
|
.toast .icon { font-size: 18px; line-height: 1; margin-top: 2px; }
|
|
.toast .content { flex: 1; font-size: 14px; line-height: 1.35; }
|
|
.toast .close { appearance: none; border: 0; background: transparent; font-size: 16px; color: #475569; cursor: pointer; padding: 2px 4px; }
|
|
|
|
/* success (green) by default */
|
|
.toast.success { border-color: #86efac; background: #ecfdf5; color: #065f46; }
|
|
.toast.success .icon { color: #10b981; }
|
|
|
|
/* error (red) */
|
|
.toast.error { border-color: #fecaca; background: #fff1f2; color: #7f1d1d; }
|
|
.toast.error .icon { color: #ef4444; }
|
|
|
|
@keyframes toast-slide-in {
|
|
from { transform: translateY(-6px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|