/* ========================================================================== IMS — Premium Toastr Restyle (V18) -------------------------------------------------------------------------- Pure-CSS override of toastr@2.1.4. NO JS, NO option changes, NO invocation changes. Loaded AFTER the CDN toastr.min.css so cascade order wins. Design goals (matches enterprise reference — Linear / Stripe / Dynamics): - White card with soft shadow + rounded corners - 36px circular icon on the left (light tint bg + stroked glyph) - Coloured eyebrow Title + dark body Message (clear hierarchy) - Minimal close (×) icon button at top-right - 4px theme-coloured progress bar at the bottom - Subtle slide-in-from-right entry animation - Stacks neatly top-right, responsive on tablet / mobile Markup recap (toastr 2.1.4): #toast-container.toast-top-right └── .toast.toast-(success|info|warning|error) ├── .toast-close-button ("×") ├── .toast-title (optional — only if caller passes a title) ├── .toast-message (the body text) └── .toast-progress (only when toastr.options.progressBar) ========================================================================== */ /* ========================================================================== 1. Container — position, spacing, stacking ========================================================================== */ #toast-container { /* V18.2 — ultra-compact tokens. Closer to Linear / GitHub flash notifications: ~320px wide, 24px icon, 12px body. */ --ims-toast-radius: 9px; --ims-toast-width: 320px; --ims-toast-shadow: 0 6px 18px rgba(15, 23, 42, 0.09), 0 1px 4px rgba(15, 23, 42, 0.04); /* Above Bootstrap modal (1055) / offcanvas (1045) / tooltip (1080). Stays below any explicit critical-overlay layer. */ z-index: 1090; pointer-events: none; /* gaps between toasts shouldn't capture clicks */ } #toast-container > .toast { pointer-events: auto; } #toast-container.toast-top-right { top: 76px; /* clears the sticky navbar */ right: 16px; } #toast-container.toast-bottom-right { bottom: 16px; right: 16px; } #toast-container.toast-top-left { top: 76px; left: 16px; } #toast-container.toast-bottom-left { bottom: 16px; left: 16px; } /* ========================================================================== 2. The card itself — layout, surface, shadow, entry animation ========================================================================== */ #toast-container > .toast { /* Cancel toastr's built-in icon background (we redraw below) and its solid coloured panel — we want a clean white card. */ background-image: none !important; background-color: #ffffff !important; color: #1f2937; opacity: 1; /* Ultra-compact gutter: 9px gutter + 24px icon + 9px gap = 42px left padding; 28px right padding leaves room for the close icon. */ padding: 8px 28px 10px 42px; width: var(--ims-toast-width); max-width: calc(100vw - 20px); margin: 0 0 7px; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: var(--ims-toast-radius); box-shadow: var(--ims-toast-shadow); position: relative; overflow: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; animation: ims-toast-in 240ms cubic-bezier(0.16, 1, 0.3, 1); transition: box-shadow 180ms ease, transform 180ms ease; } /* Subtle hover lift — invites the user to click the close icon. */ #toast-container > .toast:hover { box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14), 0 4px 10px rgba(15, 23, 42, 0.08); } @keyframes ims-toast-in { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { #toast-container > .toast { animation: none; transition: none; } } /* ========================================================================== 3. Icon — circular SVG drawn as background-image (replaces toastr's default) ========================================================================== */ #toast-container > .toast { background-repeat: no-repeat; background-position: 9px 9px; background-size: 24px 24px; } #toast-container > .toast-success { background-image: url("data:image/svg+xml;utf8,") !important; } #toast-container > .toast-info { background-image: url("data:image/svg+xml;utf8,") !important; } #toast-container > .toast-warning { background-image: url("data:image/svg+xml;utf8,") !important; } #toast-container > .toast-error { background-image: url("data:image/svg+xml;utf8,") !important; } /* ========================================================================== 4. Title — explicit (toastr.success(msg, "Saved!")) ========================================================================== */ #toast-container > .toast .toast-title { font-size: 12.5px; font-weight: 600; line-height: 1.2; margin: 0 0 1px; letter-spacing: -0.005em; } #toast-container > .toast-success .toast-title { color: #16a34a; } #toast-container > .toast-info .toast-title { color: #2563eb; } #toast-container > .toast-warning .toast-title { color: #b45309; } #toast-container > .toast-error .toast-title { color: #dc2626; } /* ========================================================================== 5. Implicit title — when caller didn't pass a title arg, inject the type label as a coloured eyebrow before the message so every toast keeps a consistent two-line "Title / Body" hierarchy without touching call sites. Uses :has() (Baseline 2024) to detect "no .toast-title is present". ========================================================================== */ #toast-container > .toast-success:not(:has(.toast-title)) .toast-message::before, #toast-container > .toast-info:not(:has(.toast-title)) .toast-message::before, #toast-container > .toast-warning:not(:has(.toast-title)) .toast-message::before, #toast-container > .toast-error:not(:has(.toast-title)) .toast-message::before { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; margin-bottom: 1px; letter-spacing: -0.005em; } #toast-container > .toast-success:not(:has(.toast-title)) .toast-message::before { content: 'Success'; color: #16a34a; } #toast-container > .toast-info:not(:has(.toast-title)) .toast-message::before { content: 'Information'; color: #2563eb; } #toast-container > .toast-warning:not(:has(.toast-title)) .toast-message::before { content: 'Warning'; color: #b45309; } #toast-container > .toast-error:not(:has(.toast-title)) .toast-message::before { content: 'Error'; color: #dc2626; } /* ========================================================================== 6. Message body ========================================================================== */ #toast-container > .toast .toast-message { font-size: 12px; font-weight: 400; line-height: 1.35; color: #475569; word-break: break-word; padding: 0; /* toastr default adds padding-right for close-x */ } /* Honour inline markup commonly used in existing toastr.error(...) calls (e.g. msg + '
' + errors.join('
')). */ #toast-container > .toast .toast-message a { color: inherit; text-decoration: underline; font-weight: 500; } #toast-container > .toast .toast-message a:hover { text-decoration: none; } #toast-container > .toast .toast-message strong { font-weight: 600; } /* Optional action-link slot — future call sites may use: toastr.success('Saved. View') without any framework changes. */ #toast-container > .toast .toast-message .toast-action { display: inline-block; margin-top: 4px; padding: 1px 6px; font-size: 11.5px; font-weight: 600; border-radius: 5px; text-decoration: none; } #toast-container > .toast-success .toast-message .toast-action { color: #16a34a; background: rgba(34, 197, 94, 0.10); } #toast-container > .toast-info .toast-message .toast-action { color: #2563eb; background: rgba(37, 99, 235, 0.10); } #toast-container > .toast-warning .toast-message .toast-action { color: #b45309; background: rgba(245, 158, 11, 0.12); } #toast-container > .toast-error .toast-message .toast-action { color: #dc2626; background: rgba(239, 68, 68, 0.10); } #toast-container > .toast .toast-message .toast-action:hover { filter: brightness(0.92); } /* ========================================================================== 7. Close button — minimal × icon, theme-tinted, top-right ========================================================================== */ #toast-container > .toast .toast-close-button { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; padding: 0; /* Hide the default "×" character that toastr inserts as text. */ font-size: 0; line-height: 0; color: transparent; text-shadow: none; opacity: 1; background: transparent; border: 0; border-radius: 5px; transition: background-color 140ms ease, transform 140ms ease; cursor: pointer; float: none !important; /* toastr applies float:right which fights abs */ } /* Draw a crisp Tabler-style × via CSS mask, tinted to the toast colour. */ #toast-container > .toast .toast-close-button::before { content: ''; position: absolute; inset: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / 10px 10px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 10px 10px no-repeat; } #toast-container > .toast-success .toast-close-button { color: #16a34a; } #toast-container > .toast-info .toast-close-button { color: #2563eb; } #toast-container > .toast-warning .toast-close-button { color: #b45309; } #toast-container > .toast-error .toast-close-button { color: #dc2626; } #toast-container > .toast .toast-close-button:hover, #toast-container > .toast .toast-close-button:focus-visible { background-color: rgba(15, 23, 42, 0.06); transform: scale(1.06); outline: none; } /* ========================================================================== 8. Progress bar — auto-dismiss countdown along the bottom edge. Drawn over a soft track (the toast's ::before). ========================================================================== */ /* Track behind the progress (always present so every type looks balanced). */ #toast-container > .toast::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background-color: rgba(15, 23, 42, 0.05); pointer-events: none; } /* When toastr is invoked with progressBar:false the track would float on its own — hide it in that case. */ #toast-container > .toast:not(:has(.toast-progress))::before { display: none; } #toast-container > .toast .toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; opacity: 1; border-radius: 0; transition: width linear; /* toastr animates width via inline style */ } #toast-container > .toast-success .toast-progress { background-color: #16a34a !important; } #toast-container > .toast-info .toast-progress { background-color: #2563eb !important; } #toast-container > .toast-warning .toast-progress { background-color: #f59e0b !important; } #toast-container > .toast-error .toast-progress { background-color: #dc2626 !important; } /* ========================================================================== 9. Responsive — tablet & mobile ========================================================================== */ @media (max-width: 768px) { #toast-container.toast-top-right, #toast-container.toast-top-left { top: 66px; right: 10px; left: 10px; } #toast-container.toast-bottom-right, #toast-container.toast-bottom-left { bottom: 10px; right: 10px; left: 10px; } #toast-container > .toast { width: auto; max-width: none; } } @media (max-width: 480px) { #toast-container > .toast { padding: 7px 26px 9px 40px; border-radius: 8px; } } /* ========================================================================== 10. Fallback for browsers without :has() support — show the title chip unconditionally. Worst case the type label appears even when an explicit title was passed, which is still readable. ========================================================================== */ @supports not selector(:has(*)) { #toast-container > .toast-success .toast-message::before { content: 'Success'; color: #16a34a; display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; margin-bottom: 1px; } #toast-container > .toast-info .toast-message::before { content: 'Information'; color: #2563eb; display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; margin-bottom: 1px; } #toast-container > .toast-warning .toast-message::before { content: 'Warning'; color: #b45309; display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; margin-bottom: 1px; } #toast-container > .toast-error .toast-message::before { content: 'Error'; color: #dc2626; display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; margin-bottom: 1px; } }