ca84079a21
mara, on review: "i want each component to import its own css file itself[;] if you need a bunch of extra css externally, its not a proper component ... you may need to migrate other components that you would want to use first". WarnBanner is the Preact-component successor to the shadow-DOM <hive-warn> custom element (same three-tier info/warning/error visual language, colours copied faithfully from hive-warn.css). ApiErrorPanel now composes it instead of owning a copy of the border/colour/pulse rules itself — its own CSS is back down to just the layout that's actually specific to it (heading, copy button, detail text). Re-verified with a fresh mock-server screenshot: same rendered output as before, now via composition instead of a duplicated banner shape.
36 lines
1.3 KiB
CSS
36 lines
1.3 KiB
CSS
/* WarnBanner.css — three levels, not an open-ended severity+modifier
|
|
combination (same rule `hive-warn.css` states, copied faithfully since
|
|
this is that component's visual language, just reached through a
|
|
class instead of a `:host([level])` attribute selector). Colours reuse
|
|
theme.css's own documented semantics: --cyan = "info accents", --amber
|
|
= "warnings", --red = "errors, fail state". */
|
|
|
|
.warn-banner {
|
|
display: block;
|
|
border: 1px solid var(--amber);
|
|
border-radius: 4px;
|
|
padding: 0.5em 0.8em;
|
|
margin-bottom: 0.6em;
|
|
color: var(--amber);
|
|
background: color-mix(in srgb, var(--amber) 8%, transparent);
|
|
}
|
|
.warn-banner-info {
|
|
border-color: var(--cyan);
|
|
color: var(--cyan);
|
|
background: color-mix(in srgb, var(--cyan) 8%, transparent);
|
|
}
|
|
.warn-banner-error {
|
|
border-color: var(--red);
|
|
color: var(--red);
|
|
background: color-mix(in srgb, var(--red) 8%, transparent);
|
|
/* Only `error` pulses — an active incident, not a standing caveat. */
|
|
text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
|
|
animation: warn-banner-pulse 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes warn-banner-pulse {
|
|
0%, 100% { box-shadow: 0 0 12px -4px color-mix(in srgb, currentColor 55%, transparent); }
|
|
50% { box-shadow: 0 0 22px -2px color-mix(in srgb, currentColor 95%, transparent); }
|
|
}
|
|
.warn-banner strong {
|
|
color: inherit;
|
|
}
|