diff --git a/hive-c0re/swagger-ui-theme/hyperhive-theme.css b/hive-c0re/swagger-ui-theme/hyperhive-theme.css index 671ffc3c..627d7a95 100644 --- a/hive-c0re/swagger-ui-theme/hyperhive-theme.css +++ b/hive-c0re/swagger-ui-theme/hyperhive-theme.css @@ -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; } diff --git a/hive-c0re/swagger-ui-theme/index.html b/hive-c0re/swagger-ui-theme/index.html index e80a7b18..133dc243 100644 --- a/hive-c0re/swagger-ui-theme/index.html +++ b/hive-c0re/swagger-ui-theme/index.html @@ -1,16 +1,10 @@ -