/** * @file * HCA Toast styles. * * Leans on Bootstrap 5 toast components and CSS variables so light/dark * mode ([data-bs-theme="dark"]) works with no extra layer. Only additive * pieces live here: header tinting, the progress bar, entry/exit * animations, drag affordance, and the JS-off fallback rule. */ /* With JS available, the server-rendered alert sources are hidden before first paint (core adds the .js class on in the head). Without JS, they remain visible as normal Bootstrap alerts - messages never vanish. */ html.js .hca-toast-source { display: none !important; } #hca-toast-container { z-index: 1100; /* Above Bootstrap modals (1055) and offcanvas (1045). */ --hca-toast-max-width: 380px; } #hca-toast-container .toast { width: min(var(--hca-toast-max-width), calc(100vw - 2rem)); overflow: hidden; /* Keeps the progress bar inside the rounded corners. */ } /* Subtle type-colored header tint; text/icon carry the strong color. */ .hca-toast--success .toast-header { background-color: rgba(var(--bs-success-rgb), 0.12); } .hca-toast--warning .toast-header { background-color: rgba(var(--bs-warning-rgb), 0.15); } .hca-toast--danger .toast-header { background-color: rgba(var(--bs-danger-rgb), 0.12); } .hca-toast--info .toast-header { background-color: rgba(var(--bs-info-rgb), 0.12); } .hca-toast__title { font-size: var(--hca-toast-title-size, inherit); } .hca-toast__body { font-size: var(--hca-toast-message-size, inherit); } .hca-toast-source { background: none; } /* Progress bar. */ .hca-toast__progress { height: 3px; background-color: rgba(var(--bs-body-color-rgb), 0.08); } .hca-toast__progress-bar { height: 100%; width: 100%; } /* Drag affordance. */ .hca-toast--dragging { cursor: grabbing; user-select: none; touch-action: pan-y; } /* Entry animations. */ @keyframes hcaFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes hcaSlideUpIn { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } } @keyframes hcaSlideRightIn { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: translateX(0); } } .hca-anim-in-fade { animation: hcaFadeIn 250ms ease-out; } .hca-anim-in-slide-up { animation: hcaSlideUpIn 250ms ease-out; } .hca-anim-in-slide-right { animation: hcaSlideRightIn 250ms ease-out; } /* Exit animations. */ @keyframes hcaFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes hcaSlideDownOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(1rem); } } @keyframes hcaSlideRightOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(1.5rem); } } .hca-anim-out-fade { animation: hcaFadeOut 200ms ease-in forwards; } .hca-anim-out-slide-down { animation: hcaSlideDownOut 200ms ease-in forwards; } .hca-anim-out-slide-right { animation: hcaSlideRightOut 200ms ease-in forwards; } /* Accessibility: honor reduced motion preferences. */ @media (prefers-reduced-motion: reduce) { .hca-anim-in-fade, .hca-anim-in-slide-up, .hca-anim-in-slide-right, .hca-anim-out-fade, .hca-anim-out-slide-down, .hca-anim-out-slide-right { animation: none; } .hca-toast__progress-bar { transition: none !important; } }