/** * placeholder-wiring.css * ----------------------- * Global styles for the placeholder-wiring system. * * Provides: * - .ph-toast / .ph-toast--visible — transient accessible toast notice * shown by placeholder-wiring.js when the user interacts with an * unfinished placeholder control. * - .health-status-badge variants — status coloring for health widgets * wired by the same script. * - .is-unavailable — degraded-endpoint visual cue. * * Loaded globally via AssetManager (config/assets.php → global.css list and * Header.php fallback list). No JavaScript dependency for the CSS itself. * * COMP-5d: canonical asset-path entry point for placeholder-wiring styles. * The implementation mirrors frontend-placeholder-wiring.css so either file * alone is sufficient; both being present is harmless (CSS is idempotent). */ /* ========================================================= Health status badge — base ========================================================= */ .health-status-badge { display: inline-block; padding: 0.2em 0.6em; border-radius: 0.3em; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; vertical-align: middle; border: 1px solid transparent; } /* === ok / healthy state ================================== */ .health-status-badge--ok, .health-status-badge.is-ok { background-color: #d1fae5; color: #065f46; border-color: #6ee7b7; } /* === degraded / down state =============================== */ .health-status-badge--degraded, .health-status-badge--down, .health-status-badge.is-unavailable, .is-unavailable .health-status-badge { background-color: #fee2e2; color: #991b1b; border-color: #fca5a5; } /* ========================================================= Widget-level unavailable overlay ========================================================= Applied to the data-health-endpoint container when the endpoint is unreachable or returns an unexpected payload. ========================================================= */ .is-unavailable { opacity: 0.7; } /* ========================================================= Placeholder-action toast notice ========================================================= Created lazily as a single DOM node by placeholder-wiring.js and appended to . Fixed to bottom-right corner so it is non-blocking; dismissed automatically after 2.5 s. Accessibility: role="status" aria-live="polite" aria-atomic="true" are set in JS on the same element so screen readers announce the message without moving focus. ========================================================= */ .ph-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; max-width: 22rem; padding: 0.75rem 1.1rem; border-radius: 0.4rem; /* slate-800 background — high contrast on white pages */ background-color: #1e293b; color: #f1f5f9; /* slate-100 */ font-size: 0.875rem; line-height: 1.5; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); /* Hidden by default; visibility toggled via .ph-toast--visible */ opacity: 0; transform: translateY(0.5rem); /* Invisible toast must not capture pointer events */ pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } /* Visible modifier toggled by JS */ .ph-toast--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Respect user motion preference — disable all transitions */ @media (prefers-reduced-motion: reduce) { .ph-toast { transition: none; } }