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.
40 lines
1 KiB
CSS
40 lines
1 KiB
CSS
/* api-error-panel.css — layout for `<ApiErrorPanel>`'s content, plus the
|
|
one spacing concern that's genuinely this component's own (the top
|
|
margin — `WarnBanner` only sets `margin-bottom`, tuned for a banner
|
|
that's the first thing in a page, not a panel that usually follows a
|
|
form or a table). Colour/border/pulse belong to `WarnBanner`
|
|
(../warn-banner/WarnBanner.css) — not duplicated here. */
|
|
|
|
.api-error-panel {
|
|
margin-top: 1em;
|
|
}
|
|
.api-error-heading {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 0.8em;
|
|
}
|
|
.api-error-title {
|
|
font-weight: 600;
|
|
}
|
|
.api-error-copy {
|
|
flex: none;
|
|
background: transparent;
|
|
color: inherit;
|
|
border: 1px solid currentColor;
|
|
border-radius: 0.3em;
|
|
padding: 0.1em 0.6em;
|
|
font: inherit;
|
|
font-size: 0.85em;
|
|
cursor: pointer;
|
|
}
|
|
.api-error-copy:hover {
|
|
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
}
|
|
.api-error-detail {
|
|
margin: 0.5em 0 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-size: 0.9em;
|
|
opacity: 0.9;
|
|
}
|