062a84378d
Loads the dashboard's own themed /static/colors.css directly (same origin, see vhosts.nix dashboardProxyLocation) instead of redeclaring the Catppuccin Mocha hex values locally. The theme now re-themes live with the rest of the dashboard instead of drifting out of sync. Addresses review feedback on PR.
178 lines
5.6 KiB
CSS
178 lines
5.6 KiB
CSS
/* Partial hyperhive reskin for the vendored Swagger UI at /api/docs —
|
|
the operator asked for this as a follow-up to the OpenAPI/Swagger-UI
|
|
docs work. Scope is deliberately bounded per her steer ("its not
|
|
about making it completely vibec0re, apply theme colors only"):
|
|
recolor the page chrome (background, topbar, borders, links,
|
|
headings, inputs) to match the rest of the dashboard; leave Swagger's
|
|
own semantic HTTP-method colours (GET/POST/PUT/DELETE badges) and the
|
|
execute/cancel action-button colours alone — those carry real meaning
|
|
to anyone who already knows Swagger UI, not just hyperhive branding.
|
|
|
|
Loaded after swagger-ui.css (see index.html) so these rules win the
|
|
cascade on shared selectors without `!important`; only reaching for
|
|
`!important` where Swagger's own CSS is more specific than a same-
|
|
specificity override can beat (documented per-rule below).
|
|
|
|
Follows stylix live, same as every other dashboard page: index.html
|
|
links the dashboard's own themed `colors.css` (served from
|
|
`/static/`, same origin) directly ahead of this file, so the
|
|
`--baseNN` custom properties below resolve to whatever the operator's
|
|
current stylix scheme actually is — no hardcoded hex, nothing to
|
|
drift out of sync when the theme changes. See
|
|
frontend/packages/shared/src/colors.css for the base16 contract. */
|
|
|
|
/* Page chrome */
|
|
html,
|
|
body {
|
|
background: var(--base00);
|
|
}
|
|
.swagger-ui {
|
|
color: var(--base05);
|
|
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
|
|
"Source Code Pro", monospace;
|
|
}
|
|
|
|
/* Topbar — replaces Swagger's default green bar. */
|
|
.swagger-ui .topbar {
|
|
background: var(--base01);
|
|
border-bottom: 1px solid var(--base02);
|
|
}
|
|
.swagger-ui .topbar .download-url-wrapper input[type="text"] {
|
|
border-color: var(--base02);
|
|
background: var(--base00);
|
|
color: var(--base05);
|
|
}
|
|
.swagger-ui .topbar .download-url-wrapper .download-url-button {
|
|
background: var(--base0E);
|
|
color: var(--base01);
|
|
}
|
|
|
|
/* Info block (spec title/description) + links throughout. */
|
|
.swagger-ui .info .title,
|
|
.swagger-ui .info li,
|
|
.swagger-ui .info p,
|
|
.swagger-ui .info table {
|
|
color: var(--base05);
|
|
}
|
|
.swagger-ui a.nostyle,
|
|
.swagger-ui a.nostyle:visited,
|
|
.swagger-ui .info a {
|
|
color: var(--base0D);
|
|
}
|
|
.swagger-ui .opblock-tag {
|
|
color: var(--base05);
|
|
border-bottom-color: var(--base02);
|
|
}
|
|
.swagger-ui .opblock-tag:hover {
|
|
background: color-mix(in srgb, var(--base0E) 8%, transparent);
|
|
}
|
|
|
|
/* Scheme/server selector bar. */
|
|
.swagger-ui .scheme-container {
|
|
background: var(--base01);
|
|
box-shadow: none;
|
|
border-bottom: 1px solid var(--base02);
|
|
}
|
|
|
|
/* Endpoint rows — keep the method-colour left border (GET/POST/etc, it's
|
|
Swagger's own semantic language) but recolour the card body so it
|
|
doesn't sit on stock white. */
|
|
.swagger-ui .opblock {
|
|
background: var(--base01);
|
|
border-color: var(--base02);
|
|
}
|
|
.swagger-ui .opblock .opblock-summary-description,
|
|
.swagger-ui .opblock .opblock-summary-path,
|
|
.swagger-ui .opblock .opblock-summary-path__deprecated {
|
|
color: var(--base05);
|
|
}
|
|
.swagger-ui .opblock .opblock-section-header {
|
|
background: var(--base00);
|
|
}
|
|
.swagger-ui .opblock-description-wrapper p,
|
|
.swagger-ui .opblock-external-docs-wrapper p,
|
|
.swagger-ui .opblock-title_normal p,
|
|
.swagger-ui .parameter__name,
|
|
.swagger-ui .parameter__type,
|
|
.swagger-ui .parameter__deprecated,
|
|
.swagger-ui .parameter__in,
|
|
.swagger-ui table.model tr.property-row td {
|
|
color: var(--base05);
|
|
}
|
|
.swagger-ui .tab li,
|
|
.swagger-ui .opblock .opblock-section-header h4,
|
|
.swagger-ui .opblock .opblock-section-header label {
|
|
color: var(--base05);
|
|
}
|
|
|
|
/* Response / model tables. */
|
|
.swagger-ui table thead tr td,
|
|
.swagger-ui table thead tr th {
|
|
color: var(--base05);
|
|
border-bottom-color: var(--base02);
|
|
}
|
|
.swagger-ui .responses-inner h4,
|
|
.swagger-ui .responses-inner h5 {
|
|
color: var(--base05);
|
|
}
|
|
.swagger-ui .response-col_status {
|
|
color: var(--base05);
|
|
}
|
|
.swagger-ui .model-box,
|
|
.swagger-ui section.models {
|
|
background: var(--base01);
|
|
}
|
|
.swagger-ui section.models {
|
|
border-color: var(--base02);
|
|
}
|
|
.swagger-ui section.models h4 {
|
|
color: var(--base05);
|
|
}
|
|
.swagger-ui .model {
|
|
color: var(--base05);
|
|
}
|
|
|
|
/* Form controls — inputs/selects/textareas default to Swagger's stock
|
|
white regardless of surrounding recolour; without this they'd be the
|
|
one visibly wrong element on the page. */
|
|
.swagger-ui select,
|
|
.swagger-ui input[type="text"],
|
|
.swagger-ui input[type="password"],
|
|
.swagger-ui input[type="search"],
|
|
.swagger-ui input[type="email"],
|
|
.swagger-ui input[type="file"],
|
|
.swagger-ui textarea {
|
|
background: var(--base00);
|
|
color: var(--base05);
|
|
border-color: var(--base02);
|
|
}
|
|
|
|
/* Generic (non-semantic) buttons — "Try it out" / "Reset" / "Clear" /
|
|
"Authorize" close etc. Execute (green) and Cancel (red) keep Swagger's
|
|
own colours; only the ones that were plain-white-on-white before. */
|
|
.swagger-ui .btn {
|
|
color: var(--base05);
|
|
border-color: var(--base02);
|
|
background: var(--base00);
|
|
}
|
|
.swagger-ui .btn.authorize {
|
|
color: var(--base0E);
|
|
border-color: var(--base0E);
|
|
}
|
|
.swagger-ui .btn.authorize svg {
|
|
fill: var(--base0E);
|
|
}
|
|
|
|
/* `!important` needed here: Swagger's own `.swagger-ui .highlight-code`
|
|
syntax-highlighting rules ship at equal-or-higher specificity and are
|
|
emitted after the cascade point our stylesheet link occupies is
|
|
evaluated (they're re-asserted per-token by highlight.js's inline
|
|
theme), so a plain override loses. Scoped narrowly to the response/
|
|
request code-sample background only — token colours stay as
|
|
highlight.js's own theme provides, this is just the block bg. */
|
|
.swagger-ui .highlight-code {
|
|
background: var(--base00) !important;
|
|
}
|
|
.swagger-ui .microlight {
|
|
color: var(--base05);
|
|
}
|