hive-c0re: trim swagger-theme comments down to essentials
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).
This commit is contained in:
parent
062a84378d
commit
5471b49f2a
2 changed files with 25 additions and 48 deletions
|
|
@ -1,24 +1,15 @@
|
||||||
/* Partial hyperhive reskin for the vendored Swagger UI at /api/docs —
|
/* 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
|
Recolors chrome (background, topbar, borders, links, inputs) to
|
||||||
docs work. Scope is deliberately bounded per her steer ("its not
|
match the dashboard. Swagger's own semantic HTTP-method badge colours
|
||||||
about making it completely vibec0re, apply theme colors only"):
|
and execute/cancel button colours are left alone — those carry
|
||||||
recolor the page chrome (background, topbar, borders, links,
|
meaning independent of hyperhive branding.
|
||||||
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
|
Loaded after swagger-ui.css (see index.html) so these rules win the
|
||||||
cascade on shared selectors without `!important`; only reaching for
|
cascade without `!important`, except where noted below.
|
||||||
`!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
|
`--baseNN` values come from `/static/colors.css` (linked in
|
||||||
links the dashboard's own themed `colors.css` (served from
|
index.html, same origin as the dashboard) — this follows the
|
||||||
`/static/`, same origin) directly ahead of this file, so the
|
operator's live stylix theme, not a hardcoded copy. See
|
||||||
`--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. */
|
frontend/packages/shared/src/colors.css for the base16 contract. */
|
||||||
|
|
||||||
/* Page chrome */
|
/* Page chrome */
|
||||||
|
|
@ -32,7 +23,7 @@ body {
|
||||||
"Source Code Pro", monospace;
|
"Source Code Pro", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Topbar — replaces Swagger's default green bar. */
|
/* Topbar */
|
||||||
.swagger-ui .topbar {
|
.swagger-ui .topbar {
|
||||||
background: var(--base01);
|
background: var(--base01);
|
||||||
border-bottom: 1px solid var(--base02);
|
border-bottom: 1px solid var(--base02);
|
||||||
|
|
@ -47,7 +38,7 @@ body {
|
||||||
color: var(--base01);
|
color: var(--base01);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Info block (spec title/description) + links throughout. */
|
/* Info block + links */
|
||||||
.swagger-ui .info .title,
|
.swagger-ui .info .title,
|
||||||
.swagger-ui .info li,
|
.swagger-ui .info li,
|
||||||
.swagger-ui .info p,
|
.swagger-ui .info p,
|
||||||
|
|
@ -74,9 +65,8 @@ body {
|
||||||
border-bottom: 1px solid var(--base02);
|
border-bottom: 1px solid var(--base02);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Endpoint rows — keep the method-colour left border (GET/POST/etc, it's
|
/* Endpoint rows — method-colour left border stays; only the card body
|
||||||
Swagger's own semantic language) but recolour the card body so it
|
is recoloured. */
|
||||||
doesn't sit on stock white. */
|
|
||||||
.swagger-ui .opblock {
|
.swagger-ui .opblock {
|
||||||
background: var(--base01);
|
background: var(--base01);
|
||||||
border-color: var(--base02);
|
border-color: var(--base02);
|
||||||
|
|
@ -132,9 +122,7 @@ body {
|
||||||
color: var(--base05);
|
color: var(--base05);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Form controls — inputs/selects/textareas default to Swagger's stock
|
/* Form controls */
|
||||||
white regardless of surrounding recolour; without this they'd be the
|
|
||||||
one visibly wrong element on the page. */
|
|
||||||
.swagger-ui select,
|
.swagger-ui select,
|
||||||
.swagger-ui input[type="text"],
|
.swagger-ui input[type="text"],
|
||||||
.swagger-ui input[type="password"],
|
.swagger-ui input[type="password"],
|
||||||
|
|
@ -147,9 +135,8 @@ body {
|
||||||
border-color: var(--base02);
|
border-color: var(--base02);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Generic (non-semantic) buttons — "Try it out" / "Reset" / "Clear" /
|
/* Generic buttons (Try it out / Reset / Authorize etc) — execute/cancel
|
||||||
"Authorize" close etc. Execute (green) and Cancel (red) keep Swagger's
|
keep Swagger's own colours. */
|
||||||
own colours; only the ones that were plain-white-on-white before. */
|
|
||||||
.swagger-ui .btn {
|
.swagger-ui .btn {
|
||||||
color: var(--base05);
|
color: var(--base05);
|
||||||
border-color: var(--base02);
|
border-color: var(--base02);
|
||||||
|
|
@ -163,13 +150,9 @@ body {
|
||||||
fill: var(--base0E);
|
fill: var(--base0E);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* `!important` needed here: Swagger's own `.swagger-ui .highlight-code`
|
/* `!important`: highlight.js re-asserts this per-token inline, so a
|
||||||
syntax-highlighting rules ship at equal-or-higher specificity and are
|
plain override loses. Scoped to the code-sample block background
|
||||||
emitted after the cascade point our stylesheet link occupies is
|
only — token colours stay as highlight.js's theme provides. */
|
||||||
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 {
|
.swagger-ui .highlight-code {
|
||||||
background: var(--base00) !important;
|
background: var(--base00) !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,10 @@
|
||||||
<!-- HTML for static distribution bundle build -->
|
<!-- HTML for static distribution bundle build -->
|
||||||
<!-- Overrides the vendored Swagger UI's own `dist/index.html` (byte-for-
|
<!-- Overrides the vendored Swagger UI's dist/index.html (byte-identical
|
||||||
byte identical otherwise — copied from utoipa-swagger-ui-vendored
|
otherwise) via `SWAGGER_UI_OVERWRITE_FOLDER`. Adds `colors.css`
|
||||||
0.1.2's swagger-ui-5.17.14/dist/index.html) via the crate's
|
(same origin as the dashboard — see dashboardProxyLocation in
|
||||||
`SWAGGER_UI_OVERWRITE_FOLDER` build-time hook, adding two lines: the
|
nix/host-modules/hive-gateway/vhosts.nix — so this resolves the
|
||||||
dashboard's own themed `colors.css` (same absolute `/static/`
|
operator's live stylix theme, not a frozen copy) and
|
||||||
origin the dashboard dist serves it from — see
|
hyperhive-theme.css, which consumes its `--baseNN` vars. See
|
||||||
nix/host-modules/hive-gateway/vhosts.nix's dashboardProxyLocation,
|
|
||||||
`/` and `/api/` share one vhost so this resolves whatever the
|
|
||||||
operator's stylix theme currently renders, not a frozen copy) and
|
|
||||||
hyperhive-theme.css, which consumes those `--baseNN` vars. Loaded
|
|
||||||
after swagger-ui.css so hyperhive-theme.css's rules win the cascade
|
|
||||||
without needing `!important`. See
|
|
||||||
docs/web-ui/dashboard.md::Dashboard endpoints. -->
|
docs/web-ui/dashboard.md::Dashboard endpoints. -->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue