/** * BHCoreToast styles — loaded on both wp-admin and the front end (see * class-toast.php). Colors default to the same success/warning/danger * palette BHY_UI's shared admin design system already uses * (class-ui.php's design_system_css(): --bhy-success/#1a7f37, * --bhy-warning/#8a5a00, --bhy-danger/#b3261e, --bhy-accent/#2271b1) via * var(--bhy-*, ) — on an ecosystem admin screen where those * custom properties are already printed, toasts automatically pick up * the exact same tones; everywhere else (front end, or any admin screen * BHY_UI doesn't print on) they fall back to the identical hardcoded * values, so the look never depends on load order or which screen this * happens to render on. */ /* Body scroll-lock while any ecosystem modal is open — see toast.js's MutationObserver-based syncScrollLock(). Locking on (not ) avoids fighting any plugin that sets its own body margin/padding. */ html.bhcore-scroll-locked { overflow: hidden; } .bhcore-toast-region { position: fixed; top: 16px; right: 16px; z-index: 999999; /* above wp-admin's own #wpadminbar (100) and any modal this ecosystem opens */ display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; /* clicks pass through the empty stack; individual toasts opt back in below */ } .bhcore-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; background: #fff; color: #1d2327; border: 1px solid #dcdcde; border-left-width: 4px; border-radius: 6px; padding: 10px 12px; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); opacity: 0; transform: translateX(24px); transition: opacity .18s ease, transform .18s ease; } .bhcore-toast.bhcore-toast-in { opacity: 1; transform: translateX(0); } .bhcore-toast.bhcore-toast-out { opacity: 0; transform: translateX(24px); } .bhcore-toast-success { border-left-color: var(--bhy-success, #1a7f37); } .bhcore-toast-error { border-left-color: var(--bhy-danger, #b3261e); } .bhcore-toast-warning { border-left-color: var(--bhy-warning, #8a5a00); } .bhcore-toast-info { border-left-color: var(--bhy-accent, #2271b1); } .bhcore-toast-msg { flex: 1; min-width: 0; overflow-wrap: break-word; } .bhcore-toast-close { flex: 0 0 auto; appearance: none; background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; color: #787c82; padding: 0 0 0 4px; } .bhcore-toast-close:hover, .bhcore-toast-close:focus { color: #1d2327; } /* Users who've asked their OS/browser to reduce motion get an instant show/hide instead of the slide+fade — same accessibility posture as every other animated affordance should have, even though nothing else in this ecosystem's existing CSS happens to animate yet. */ @media (prefers-reduced-motion: reduce) { .bhcore-toast { transition: none; } }