5471b49f2a
Cut the process-narrative framing (operator quote, backstory) and shortened per-section labels — the CSS was carrying more explanation than declaration. Keep only what a future reader actually needs: the override mechanism, the stylix-follows-live fact, and the two non-obvious calls (method-colour exception, the one !important).
161 lines
4.3 KiB
CSS
161 lines
4.3 KiB
CSS
/* Partial hyperhive reskin for the vendored Swagger UI at /api/docs.
|
|
Recolors chrome (background, topbar, borders, links, inputs) to
|
|
match the dashboard. Swagger's own semantic HTTP-method badge colours
|
|
and execute/cancel button colours are left alone — those carry
|
|
meaning independent of hyperhive branding.
|
|
|
|
Loaded after swagger-ui.css (see index.html) so these rules win the
|
|
cascade without `!important`, except where noted below.
|
|
|
|
`--baseNN` values come from `/static/colors.css` (linked in
|
|
index.html, same origin as the dashboard) — this follows the
|
|
operator's live stylix theme, not a hardcoded copy. 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 */
|
|
.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 + links */
|
|
.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 — method-colour left border stays; only the card body
|
|
is recoloured. */
|
|
.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 */
|
|
.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 buttons (Try it out / Reset / Authorize etc) — execute/cancel
|
|
keep Swagger's own colours. */
|
|
.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`: highlight.js re-asserts this per-token inline, so a
|
|
plain override loses. Scoped to the code-sample block background
|
|
only — token colours stay as highlight.js's theme provides. */
|
|
.swagger-ui .highlight-code {
|
|
background: var(--base00) !important;
|
|
}
|
|
.swagger-ui .microlight {
|
|
color: var(--base05);
|
|
}
|