/* ══════════════════════════════════════════════════════════════ Recon Ranger — Swagger UI dark theme override Matches the dashboard palette. Load AFTER swagger-ui.css. ══════════════════════════════════════════════════════════════ */ /* ── Page shell ──────────────────────────────────────────────── */ body { background: #0f1117; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Lift all Swagger content above the body::before dark overlay (z-index: 0). Without this, the fixed overlay covers everything since Swagger's divs have no stacking context of their own. */ .swagger-ui, .swagger-ui-wrap { position: relative; z-index: 1; color: #e2e8f0; } /* ── Global text fallback — catch any element Swagger sets to near-black ── */ .swagger-ui p, .swagger-ui span, .swagger-ui div, .swagger-ui h1, .swagger-ui h2, .swagger-ui h3, .swagger-ui h4, .swagger-ui h5, .swagger-ui label, .swagger-ui li, .swagger-ui td, .swagger-ui th { color: #e2e8f0; } /* ── Compound selectors with higher specificity in swagger-ui.css ──────── These all set dark text and need explicit overrides to win by load order. */ .swagger-ui section h3, .swagger-ui section.models h4, .swagger-ui section.models h5, .swagger-ui .responses-inner h4, .swagger-ui .responses-inner h5, .swagger-ui .opblock-title_normal h4, .swagger-ui .opblock-title_normal p, .swagger-ui .opblock-description-wrapper h4, .swagger-ui .opblock-description-wrapper p, .swagger-ui .opblock-external-docs-wrapper h4, .swagger-ui .opblock-external-docs-wrapper p, .swagger-ui .opblock .opblock-section-header h4, .swagger-ui .opblock .opblock-section-header > label, .swagger-ui .dialog-ux .modal-ux-header h3, .swagger-ui .dialog-ux .modal-ux-content h4, .swagger-ui .dialog-ux .modal-ux-content p, .swagger-ui .errors-wrapper hgroup h4, .swagger-ui .errors-wrapper .errors h4, .swagger-ui .errors-wrapper .errors small, .swagger-ui .scopes h2, .swagger-ui .scopes h2 a, .swagger-ui table.model tr.description, .swagger-ui table.model tr.extension, .swagger-ui table.headers td, .swagger-ui table.headers .header-example, .swagger-ui table thead tr td, .swagger-ui table thead tr th { color: #e2e8f0; } /* Empty-spec and fallback messages */ .swagger-ui .opblock-tag-section p, .swagger-ui .fallback, .swagger-ui .info__tos, .swagger-ui .renderedMarkdown p, .swagger-ui .markdown p { color: #cbd5e1; } /* ── Top bar ─────────────────────────────────────────────────── */ .swagger-ui .topbar { background: #1b1b1b; padding: 10px 0; border-bottom: 1px solid #2d2d3a; } .swagger-ui .topbar .download-url-wrapper input[type="text"] { background: #161622; border: 1px solid #2d2d3a; color: #e2e8f0; border-radius: 5px; } .swagger-ui .topbar .download-url-wrapper .download-url-button { background: #252540; color: #e2e8f0; border: 1px solid #2d2d3a; border-radius: 5px; } /* ── Info block ──────────────────────────────────────────────── */ .swagger-ui .information-container { background: rgba(15, 17, 23, 0.45); backdrop-filter: blur(6px); border-radius: 12px; padding: 24px; margin-bottom: 24px; border: 1px solid #2d2d3a; } .swagger-ui .info .title, .swagger-ui .info h1, .swagger-ui .info h2, .swagger-ui .info h3 { color: #f1f5f9; } .swagger-ui .info p, .swagger-ui .info li, .swagger-ui .info a { color: #cbd5e1; } .swagger-ui .info a:hover { color: #f1f5f9; } /* ── Scheme / server selector ────────────────────────────────── */ .swagger-ui .scheme-container { background: #161622; border-radius: 8px; border: 1px solid #2d2d3a; box-shadow: none; padding: 16px 24px; margin-bottom: 16px; } .swagger-ui .scheme-container .schemes > label { color: #94a3b8; } .swagger-ui select { background: #1a1a28; border: 1px solid #2d2d3a; color: #e2e8f0; border-radius: 5px; } /* ── Operation tag headers ───────────────────────────────────── */ .swagger-ui .opblock-tag { color: #f1f5f9; border-bottom: 1px solid #2d2d3a; font-size: 18px; font-weight: 600; } .swagger-ui .opblock-tag:hover { background: #1a1a28; border-radius: 6px; } .swagger-ui .opblock-tag small { color: #94a3b8; } /* ── Operation blocks (GET / POST / PUT / DELETE / PATCH) ────── */ .swagger-ui .opblock { border-radius: 8px; border: 1px solid #2d2d3a; margin-bottom: 8px; box-shadow: none; } .swagger-ui .opblock .opblock-summary { border-radius: 8px; } .swagger-ui .opblock .opblock-summary-description { color: #94a3b8; } /* GET */ .swagger-ui .opblock.opblock-get { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.35); } .swagger-ui .opblock.opblock-get .opblock-summary-method { background: #3b82f6; } /* POST */ .swagger-ui .opblock.opblock-post { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.35); } .swagger-ui .opblock.opblock-post .opblock-summary-method { background: #22c55e; } /* PUT */ .swagger-ui .opblock.opblock-put { background: rgba(249, 115, 22, 0.08); border-color: rgba(249, 115, 22, 0.35); } .swagger-ui .opblock.opblock-put .opblock-summary-method { background: #f97316; } /* DELETE */ .swagger-ui .opblock.opblock-delete { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.35); } .swagger-ui .opblock.opblock-delete .opblock-summary-method { background: #ef4444; } /* PATCH */ .swagger-ui .opblock.opblock-patch { background: rgba(20, 184, 166, 0.08); border-color: rgba(20, 184, 166, 0.35); } .swagger-ui .opblock.opblock-patch .opblock-summary-method { background: #14b8a6; } /* ── Expanded opblock panels — use !important to beat vendor specificity ─── */ .swagger-ui .opblock-body, .swagger-ui .opblock-section, .swagger-ui .opblock .opblock-section-header, .swagger-ui .opblock-section-header, .swagger-ui .table-container, .swagger-ui .parameters-container, .swagger-ui .body-param, .swagger-ui .body-param__text, .swagger-ui .body-param-options, .swagger-ui .responses-wrapper, .swagger-ui .responses-inner, .swagger-ui .response, .swagger-ui .live-responses-table, .swagger-ui .request-url, .swagger-ui .curl-command, .swagger-ui .curl-command pre, .swagger-ui .highlight-code, .swagger-ui .microlight, .swagger-ui .model-example, .swagger-ui .example-module-example, .swagger-ui .scheme-container, .swagger-ui section.models, .swagger-ui section.models .model-container, .swagger-ui section.models .model-container:hover, .swagger-ui section.models .model-box, .swagger-ui .model-box, .swagger-ui .model-box .json-schema-2020-12, .swagger-ui .model-box .json-schema-2020-12-accordion, .swagger-ui .model-box .json-schema-2020-12-expand-deep-button, .swagger-ui .model-container, .swagger-ui .json-schema-2020-12, .swagger-ui .json-schema-2020-12--embedded, .swagger-ui .json-schema-2020-12__constraint, .swagger-ui .json-schema-2020-12__constraint--string, .swagger-ui .json-schema-2020-12-accordion, .swagger-ui .json-schema-2020-12-expand-deep-button, .swagger-ui .model-hint, .swagger-ui .markdown pre, .swagger-ui .renderedMarkdown pre, .swagger-ui .dialog-ux .modal-ux, .swagger-ui .dialog-ux .modal-ux-header { background: #161622 !important; color: #cbd5e1 !important; } .swagger-ui .opblock-body pre, .swagger-ui pre.microlight, .swagger-ui .response pre { background: #0f1117 !important; color: #cbd5e1 !important; border: 1px solid #2d2d3a; border-radius: 6px; padding: 12px 16px; } .swagger-ui code, .swagger-ui .renderedMarkdown code, .swagger-ui .markdown code, .swagger-ui .response-col_description code { background: #0f1117 !important; color: #94a3b8 !important; border-radius: 4px; padding: 1px 5px; } .swagger-ui .opblock-description-wrapper p, .swagger-ui .opblock-external-docs-wrapper p, .swagger-ui .opblock .opblock-section-header h4, .swagger-ui .opblock-section-header h4, .swagger-ui .opblock .opblock-section-header > label, .swagger-ui .opblock-section-header label { color: #94a3b8; } /* ── Parameters table ────────────────────────────────────────── */ .swagger-ui table { border-collapse: collapse; width: 100%; } .swagger-ui table thead tr { background: #1b1b2e; color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .swagger-ui table thead tr th, .swagger-ui table thead tr td { color: #94a3b8; border-bottom: 1px solid #2d2d3a; padding: 12px 16px; } .swagger-ui table tbody tr { background: #161622; } .swagger-ui table tbody tr:nth-child(even) { background: #1a1a28; } .swagger-ui table tbody tr:hover { background: #252540; } .swagger-ui table tbody tr td { color: #cbd5e1; border-bottom: 1px solid #22222e; padding: 12px 16px; } .swagger-ui .parameter__name, .swagger-ui .parameter__type, .swagger-ui .parameter__deprecated, .swagger-ui .parameter__in { color: #94a3b8; } .swagger-ui .parameter__name.required::after { color: #f87171; } /* ── Input / textarea ────────────────────────────────────────── */ .swagger-ui input[type="text"], .swagger-ui input[type="email"], .swagger-ui input[type="password"], .swagger-ui textarea { background: #1a1a28; border: 1px solid #2d2d3a; color: #e2e8f0; border-radius: 5px; } .swagger-ui input[type="text"]:focus, .swagger-ui textarea:focus { border-color: #3b82f6; outline: none; } /* ── Buttons ─────────────────────────────────────────────────── */ .swagger-ui .btn { border-radius: 5px; font-weight: 500; transition: all 0.2s ease; } .swagger-ui .btn.execute { background: #3b82f6; border-color: #3b82f6; color: #fff; } .swagger-ui .btn.execute:hover { background: #2563eb; border-color: #2563eb; } .swagger-ui .btn.cancel { background: transparent; border-color: #f87171; color: #f87171; } .swagger-ui .btn.try-out__btn { border-color: #4ade80; color: #4ade80; background: transparent; } .swagger-ui .btn.try-out__btn.cancel { border-color: #f87171; color: #f87171; } .swagger-ui .btn.authorize { background: rgba(34, 197, 94, 0.1); border-color: #4ade80; color: #4ade80; } /* ── Response section ────────────────────────────────────────── */ .swagger-ui .response-col_status { color: #4ade80; font-weight: 600; } .swagger-ui .response-col_description__inner p { color: #cbd5e1; } /* ── Models section ──────────────────────────────────────────── */ .swagger-ui section.models h4 { color: #f1f5f9; border-bottom: 1px solid #2d2d3a; } .swagger-ui .model-title { color: #94a3b8; } .swagger-ui .model { color: #cbd5e1; } .swagger-ui .prop-type { color: #4ade80; } .swagger-ui .prop-format { color: #94a3b8; } /* ── Auth modal ──────────────────────────────────────────────── */ .swagger-ui .dialog-ux .modal-ux { border: 1px solid #2d2d3a; border-radius: 12px; } .swagger-ui .dialog-ux .modal-ux-header { border-bottom: 1px solid #2d2d3a; border-radius: 12px 12px 0 0; } .swagger-ui .dialog-ux .modal-ux-header h3 { color: #f1f5f9; } .swagger-ui .dialog-ux .modal-ux-content p, .swagger-ui .dialog-ux .modal-ux-content label { color: #94a3b8; }