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 —
|
||||
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.
|
||||
/* 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 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).
|
||||
cascade without `!important`, except where noted 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
|
||||
`--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 */
|
||||
|
|
@ -32,7 +23,7 @@ body {
|
|||
"Source Code Pro", monospace;
|
||||
}
|
||||
|
||||
/* Topbar — replaces Swagger's default green bar. */
|
||||
/* Topbar */
|
||||
.swagger-ui .topbar {
|
||||
background: var(--base01);
|
||||
border-bottom: 1px solid var(--base02);
|
||||
|
|
@ -47,7 +38,7 @@ body {
|
|||
color: var(--base01);
|
||||
}
|
||||
|
||||
/* Info block (spec title/description) + links throughout. */
|
||||
/* Info block + links */
|
||||
.swagger-ui .info .title,
|
||||
.swagger-ui .info li,
|
||||
.swagger-ui .info p,
|
||||
|
|
@ -74,9 +65,8 @@ body {
|
|||
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. */
|
||||
/* Endpoint rows — method-colour left border stays; only the card body
|
||||
is recoloured. */
|
||||
.swagger-ui .opblock {
|
||||
background: var(--base01);
|
||||
border-color: var(--base02);
|
||||
|
|
@ -132,9 +122,7 @@ body {
|
|||
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. */
|
||||
/* Form controls */
|
||||
.swagger-ui select,
|
||||
.swagger-ui input[type="text"],
|
||||
.swagger-ui input[type="password"],
|
||||
|
|
@ -147,9 +135,8 @@ body {
|
|||
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. */
|
||||
/* 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);
|
||||
|
|
@ -163,13 +150,9 @@ body {
|
|||
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. */
|
||||
/* `!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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
<!-- HTML for static distribution bundle build -->
|
||||
<!-- Overrides the vendored Swagger UI's own `dist/index.html` (byte-for-
|
||||
byte identical otherwise — copied from utoipa-swagger-ui-vendored
|
||||
0.1.2's swagger-ui-5.17.14/dist/index.html) via the crate's
|
||||
`SWAGGER_UI_OVERWRITE_FOLDER` build-time hook, adding two lines: the
|
||||
dashboard's own themed `colors.css` (same absolute `/static/`
|
||||
origin the dashboard dist serves it from — 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
|
||||
<!-- Overrides the vendored Swagger UI's dist/index.html (byte-identical
|
||||
otherwise) via `SWAGGER_UI_OVERWRITE_FOLDER`. Adds `colors.css`
|
||||
(same origin as the dashboard — see dashboardProxyLocation in
|
||||
nix/host-modules/hive-gateway/vhosts.nix — so this resolves the
|
||||
operator's live stylix theme, not a frozen copy) and
|
||||
hyperhive-theme.css, which consumes its `--baseNN` vars. See
|
||||
docs/web-ui/dashboard.md::Dashboard endpoints. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
|
|
|||
Loading…
Reference in a new issue