/* Partial hyperhive (Catppuccin Mocha) 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). Same base16 contract as frontend/packages/shared/src/colors.css (Catppuccin Mocha) — this file can't @import that one (separate build pipeline, plain static asset, no preprocessing), so the slots are redeclared here. Keep the two in sync if the palette ever changes; see docs/web-ui/css-vars.md for the base16 contract this mirrors. */ :root { --hh-base00: #1e1e2e; /* default bg */ --hh-base01: #181825; /* lighter bg (elevated surfaces / topbar) */ --hh-base02: #313244; /* selection / surface — borders */ --hh-base03: #45475a; /* comments / dim surface */ --hh-base05: #cdd6f4; /* default foreground */ --hh-base0c: #89dceb; /* cyan — info accents */ --hh-base0d: #89b4fa; /* blue — links, interactive accent */ --hh-base0e: #cba6f7; /* mauve — primary accent (active tabs, highlights) */ } /* Page chrome */ html, body { background: var(--hh-base00); } .swagger-ui { color: var(--hh-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(--hh-base01); border-bottom: 1px solid var(--hh-base02); } .swagger-ui .topbar .download-url-wrapper input[type="text"] { border-color: var(--hh-base02); background: var(--hh-base00); color: var(--hh-base05); } .swagger-ui .topbar .download-url-wrapper .download-url-button { background: var(--hh-base0e); color: var(--hh-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(--hh-base05); } .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited, .swagger-ui .info a { color: var(--hh-base0d); } .swagger-ui .opblock-tag { color: var(--hh-base05); border-bottom-color: var(--hh-base02); } .swagger-ui .opblock-tag:hover { background: color-mix(in srgb, var(--hh-base0e) 8%, transparent); } /* Scheme/server selector bar. */ .swagger-ui .scheme-container { background: var(--hh-base01); box-shadow: none; border-bottom: 1px solid var(--hh-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(--hh-base01); border-color: var(--hh-base02); } .swagger-ui .opblock .opblock-summary-description, .swagger-ui .opblock .opblock-summary-path, .swagger-ui .opblock .opblock-summary-path__deprecated { color: var(--hh-base05); } .swagger-ui .opblock .opblock-section-header { background: var(--hh-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(--hh-base05); } .swagger-ui .tab li, .swagger-ui .opblock .opblock-section-header h4, .swagger-ui .opblock .opblock-section-header label { color: var(--hh-base05); } /* Response / model tables. */ .swagger-ui table thead tr td, .swagger-ui table thead tr th { color: var(--hh-base05); border-bottom-color: var(--hh-base02); } .swagger-ui .responses-inner h4, .swagger-ui .responses-inner h5 { color: var(--hh-base05); } .swagger-ui .response-col_status { color: var(--hh-base05); } .swagger-ui .model-box, .swagger-ui section.models { background: var(--hh-base01); } .swagger-ui section.models { border-color: var(--hh-base02); } .swagger-ui section.models h4 { color: var(--hh-base05); } .swagger-ui .model { color: var(--hh-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(--hh-base00); color: var(--hh-base05); border-color: var(--hh-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(--hh-base05); border-color: var(--hh-base02); background: var(--hh-base00); } .swagger-ui .btn.authorize { color: var(--hh-base0e); border-color: var(--hh-base0e); } .swagger-ui .btn.authorize svg { fill: var(--hh-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(--hh-base00) !important; } .swagger-ui .microlight { color: var(--hh-base05); }