/* ========================================================================== Toast notifications - assets/css/toast.css -------------------------------------------------------------------------- Compact floating notifications pinned to the bottom-left corner of the viewport. Replaces the old full-width `.alert` banner that used to be rendered by includes/header.php + includes/layouts/master.php. The container is `position: fixed` and lives directly under , so it never participates in document flow and never pushes page content. Paired with assets/js/toast.js (window.showToast). Loaded on every page by toastAssetTags() in includes/functions.php. ========================================================================== */ .sahl-toasts { position: fixed; bottom: 16px; left: 16px; /* physical left: same corner in RTL and LTR */ z-index: 2147483000; /* above the app ceiling (99999) and Bootstrap modals */ display: flex; flex-direction: column-reverse; /* newest toast sits closest to the corner */ gap: 8px; max-height: calc(100vh - 32px); width: max-content; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; /* the gaps between toasts stay click-through */ margin: 0; padding: 0; } /* -------------------------------------------------------------------------- Toast -------------------------------------------------------------------------- */ .sahl-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 11px 14px; padding-inline-start: 17px; /* room for the 3px accent bar */ border-radius: 10px; border: 1px solid var(--toast-border, #e2e8f0); background: var(--toast-bg, #ffffff); color: var(--toast-fg, #1e293b); box-shadow: 0 4px 6px -1px rgba(15, 23, 42, .10), 0 10px 20px -6px rgba(15, 23, 42, .14); overflow: hidden; /* Kurdish/Arabic messages wrap on word boundaries and stay legible. */ line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; } /* Accent bar on the leading edge - follows text direction, unlike the container itself, so it always sits where reading starts. */ .sahl-toast::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--toast-accent, #64748b); } .sahl-toast__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 1px; color: var(--toast-accent, #64748b); } .sahl-toast__icon svg { width: 18px; height: 18px; display: block; } .sahl-toast__body { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; /* Messages inherited from alert() often carry \n-separated lines. */ white-space: pre-line; } /* Repeat counter for collapsed duplicate messages ("x3"). */ .sahl-toast__count { flex: 0 0 auto; align-self: center; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--toast-accent, #64748b); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; direction: ltr; } .sahl-toast__close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: -1px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: currentColor; opacity: .45; font-size: 16px; line-height: 1; cursor: pointer; transition: opacity .15s ease, background-color .15s ease; } .sahl-toast__close:hover, .sahl-toast__close:focus-visible { opacity: 1; background: rgba(100, 116, 139, .14); } .sahl-toast__close:focus-visible { outline: 2px solid var(--toast-accent, #64748b); outline-offset: 1px; } /* -------------------------------------------------------------------------- Types -------------------------------------------------------------------------- */ .sahl-toast--success { --toast-accent: #16a34a; --toast-bg: #f0fdf4; --toast-border: #bbf7d0; --toast-fg: #14532d; } .sahl-toast--error { --toast-accent: #dc2626; --toast-bg: #fef2f2; --toast-border: #fecaca; --toast-fg: #7f1d1d; } .sahl-toast--warning { --toast-accent: #d97706; --toast-bg: #fffbeb; --toast-border: #fde68a; --toast-fg: #78350f; } .sahl-toast--info { --toast-accent: #2563eb; --toast-bg: #eff6ff; --toast-border: #bfdbfe; --toast-fg: #1e3a8a; } /* -------------------------------------------------------------------------- Animation -------------------------------------------------------------------------- */ .sahl-toast { opacity: 0; transform: translateX(-24px) scale(.97); transition: opacity .22s ease, transform .22s cubic-bezier(.21, 1.02, .73, 1); } .sahl-toast.is-visible { opacity: 1; transform: translateX(0) scale(1); } .sahl-toast.is-leaving { opacity: 0; transform: translateX(-24px) scale(.97); /* Collapse the box so the toasts below slide up smoothly. */ margin-bottom: -100%; transition: opacity .18s ease, transform .18s ease, margin-bottom .18s ease; } /* Brief pulse when a duplicate message is folded into an existing toast. */ @keyframes sahlToastBump { 50% { transform: translateX(0) scale(1.035); } } .sahl-toast.is-bumping { animation: sahlToastBump .28s ease; } @media (prefers-reduced-motion: reduce) { .sahl-toast, .sahl-toast.is-leaving { transition-duration: .01ms; transform: none; } .sahl-toast.is-bumping { animation: none; } } /* -------------------------------------------------------------------------- Dark theme (html.dark-theme, set by assets/js/theme.js) -------------------------------------------------------------------------- */ html.dark-theme .sahl-toast { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .40), 0 10px 20px -6px rgba(0, 0, 0, .50); } html.dark-theme .sahl-toast--success { --toast-accent: #4ade80; --toast-bg: #14261c; --toast-border: #1e4632; --toast-fg: #d1fae5; } html.dark-theme .sahl-toast--error { --toast-accent: #f87171; --toast-bg: #2a1618; --toast-border: #4c1d1d; --toast-fg: #fee2e2; } html.dark-theme .sahl-toast--warning { --toast-accent: #fbbf24; --toast-bg: #2a2013; --toast-border: #4a3413; --toast-fg: #fef3c7; } html.dark-theme .sahl-toast--info { --toast-accent: #60a5fa; --toast-bg: #151f33; --toast-border: #1e3a5f; --toast-fg: #dbeafe; } html.dark-theme .sahl-toast__close:hover, html.dark-theme .sahl-toast__close:focus-visible { background: rgba(226, 232, 240, .16); } /* -------------------------------------------------------------------------- Small screens - full width so long Kurdish messages do not wrap into a narrow column. -------------------------------------------------------------------------- */ @media (max-width: 480px) { .sahl-toasts { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; } .sahl-toast { padding: 12px 14px; padding-inline-start: 17px; } .sahl-toast__body { font-size: 13.5px; } } /* Keep clear of the delegate PWA bottom nav / iOS home indicator. */ @supports (padding: env(safe-area-inset-bottom)) { .sahl-toasts { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 480px) { .sahl-toasts { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } } } @media print { .sahl-toasts { display: none !important; } }