99 lines
3.1 KiB
CSS
99 lines
3.1 KiB
CSS
/* ──────────────────────────────────────────────────────────────────────────
|
|
* Toast — host-level notification pill
|
|
*
|
|
* Top-center, fixed positioning so it sits above the editor's own canvas
|
|
* UI without occluding the action it's commenting on. The editor module
|
|
* has its own internal toast surface for editor concerns (rendered
|
|
* inside the canvas area); this one is anchored to the viewport so
|
|
* host-originated toasts are visually distinct from editor-originated
|
|
* ones.
|
|
*
|
|
* Z-index sits just under the PWA install banner (1000) and above the
|
|
* canvas. The offline indicator (z 9999) intentionally outranks toasts
|
|
* — being offline is more important than transient feedback.
|
|
* ────────────────────────────────────────────────────────────────────────── */
|
|
|
|
.app-toast-wrap {
|
|
position: fixed;
|
|
top: calc(var(--header-height) + 1rem);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 900;
|
|
pointer-events: none;
|
|
/* Wrap is pointer-events:none so it doesn't intercept clicks on the
|
|
* area behind it; the inner pill re-enables pointer events for its
|
|
* own dismiss button. */
|
|
}
|
|
|
|
.app-toast {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.65rem 0.9rem 0.65rem 1.1rem;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-pill);
|
|
box-shadow: var(--shadow-pop);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
pointer-events: auto;
|
|
max-width: min(560px, calc(100vw - 2rem));
|
|
animation: app-toast-in 0.22s ease-out;
|
|
}
|
|
|
|
@keyframes app-toast-in {
|
|
from { opacity: 0; transform: translateY(-6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.app-toast__message {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.app-toast__close {
|
|
flex: 0 0 auto;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 999px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: background 0.12s ease, color 0.12s ease;
|
|
}
|
|
|
|
.app-toast__close:hover {
|
|
background: var(--brand-pink-soft);
|
|
color: var(--brand-pink-strong);
|
|
}
|
|
|
|
/* Variants — info is the default styling above; success and error tint
|
|
* the border + add a subtle background wash so the kind reads at a
|
|
* glance without leaning on color alone. */
|
|
|
|
.app-toast--success {
|
|
border-color: rgba(34, 197, 94, 0.4);
|
|
background: linear-gradient(180deg, rgba(34, 197, 94, 0.06), var(--bg-primary));
|
|
}
|
|
|
|
.app-toast--error {
|
|
border-color: rgba(239, 68, 68, 0.4);
|
|
background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), var(--bg-primary));
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Mobile — the toast lives below the smaller mobile header. */
|
|
@media (max-width: 768px) {
|
|
.app-toast-wrap {
|
|
top: calc(var(--header-height-mobile) + 0.75rem);
|
|
}
|
|
.app-toast {
|
|
font-size: 13px;
|
|
padding: 0.55rem 0.75rem 0.55rem 0.95rem;
|
|
}
|
|
}
|