/* ========================================================= QIXO Swagger UI Customization Brand colours from https://www.qixo.uk Light Blue : #58cbf4 Purple : #bc60a9 Blue : #4e65af Navy : #211f52 Dark mode is applied via [data-theme="dark"] on . The theme-switcher.js file injects the toggle button and handles OS preference detection + localStorage persistence. ========================================================= */ /* ========================================================= CSS CUSTOM PROPERTIES Light theme values are the defaults (no attribute needed). Dark theme overrides are scoped to [data-theme="dark"]. ========================================================= */ :root { /* Page chrome */ --q-bg: #ffffff; --q-bg-secondary: #f7f7f7; --q-bg-input: #ffffff; --q-text: #3b4151; --q-text-muted: #6b7280; --q-border: #d9d9d9; /* Brand */ --q-navy: #211f52; --q-blue: #4e65af; --q-light-blue: #58cbf4; --q-purple: #bc60a9; /* Derived */ --q-topbar-bg: #211f52; --q-topbar-border: #58cbf4; --q-info-title: #211f52; --q-scheme-bg: linear-gradient(135deg, rgba(88, 203, 244, 0.08), rgba(78, 101, 175, 0.08)); --q-scheme-border: #58cbf4; --q-link: #4e65af; --q-link-hover: #58cbf4; --q-modal-header-bg: #58cbf4; --q-modal-header-fg: #211f52; --q-post-bg: rgba(188, 96, 169, 0.05); --q-post-border: #bc60a9; --q-shadow-focus: rgba(88, 203, 244, 0.25); } [data-theme="dark"] { /* Page chrome */ --q-bg: #0A0A0A; --q-bg-secondary: #1c1a42; --q-bg-input: #1c1a42; --q-text: #dde2f0; --q-text-muted: #8b93b0; --q-border: #2e2c5e; /* Brand stays the same — they're vivid enough to work on dark */ /* Derived — adjusted for dark backgrounds */ --q-topbar-bg: #0e0d24; --q-topbar-border: #58cbf4; --q-info-title: #FFFFFF; --q-scheme-bg: linear-gradient(135deg, rgba(88, 203, 244, 0.06), rgba(78, 101, 175, 0.10)); --q-scheme-border: #4e65af; --q-link: #FFFFFF; --q-link-hover: #bc60a9; --q-modal-header-bg: #211f52; --q-modal-header-fg: #FFFFFF; --q-post-bg: rgba(188, 96, 169, 0.10); --q-post-border: #bc60a9; --q-shadow-focus: rgba(88, 203, 244, 0.20); } /* ========================================================= GLOBAL PAGE BACKGROUND + TEXT ========================================================= */ body, .swagger-ui { background-color: var(--q-bg) !important; color: var(--q-text) !important; } /* ========================================================= TOP BAR ========================================================= */ .swagger-ui .topbar { background-color: var(--q-topbar-bg) !important; border-bottom: 3px solid var(--q-topbar-border); } /* Hide default Swagger branding */ .swagger-ui .topbar .link img, .swagger-ui .topbar .link svg, .swagger-ui .topbar .link span, .swagger-ui .topbar .topbar-wrapper a span { display: none !important; } /* Inject Qixo logo */ .swagger-ui .topbar .link::before { content: ""; display: inline-block; width: 140px; height: 40px; background-image: url('/swagger-ui/MidLogoBlack.jpg'); background-repeat: no-repeat; background-size: contain; background-position: left center; } /* ========================================================= INFO SECTION ========================================================= */ .swagger-ui .info .title { color: var(--q-info-title) !important; } .swagger-ui .info p, .swagger-ui .info li, .swagger-ui .info table { color: var(--q-text) !important; } /* Version badge */ .swagger-ui .info .version { background-color: var(--q-blue) !important; color: #fff !important; } /* ========================================================= SERVERS / SCHEME CONTAINER ========================================================= */ .swagger-ui .scheme-container { background: var(--q-scheme-bg) !important; border-left: 4px solid var(--q-scheme-border); box-shadow: none !important; } .swagger-ui .scheme-container .schemes > label, .swagger-ui .scheme-container select { color: var(--q-text) !important; background: var(--q-bg-input) !important; border-color: var(--q-border) !important; } /* ========================================================= OPERATION TAG HEADINGS ========================================================= */ .swagger-ui .opblock-tag { border-bottom: 1px solid var(--q-border) !important; color: var(--q-text) !important; } .swagger-ui .opblock-tag:hover { background: var(--q-bg-secondary) !important; } .swagger-ui .opblock-tag small { color: var(--q-text-muted) !important; } /* ========================================================= OPERATION BLOCKS — shared ========================================================= */ .swagger-ui .opblock { border-radius: 8px; background-color: var(--q-bg-secondary) !important; } .swagger-ui .opblock .opblock-summary-description { color: var(--q-text-muted) !important; } .swagger-ui .opblock .opblock-summary-path, .swagger-ui .opblock .opblock-summary-path__deprecated { color: var(--q-text) !important; } /* Expanded body area */ .swagger-ui .opblock .opblock-body { background-color: var(--q-bg) !important; } .swagger-ui .opblock-description-wrapper p, .swagger-ui .opblock-external-docs-wrapper p, .swagger-ui .opblock-title_normal p { color: var(--q-text) !important; } /* ========================================================= OPERATION BLOCKS — POST (brand purple) ========================================================= */ .swagger-ui .opblock.opblock-post { border-color: var(--q-post-border); background-color: var(--q-post-bg) !important; } .swagger-ui .opblock.opblock-post .opblock-summary-method { background-color: #bc60a9; } .swagger-ui .opblock.is-open.opblock-post .opblock-summary { border-bottom: 2px solid #bc60a9 !important; } /* ========================================================= PARAMETERS / RESPONSES TABLES ========================================================= */ .swagger-ui table thead tr th, .swagger-ui table thead tr td { color: var(--q-text) !important; border-bottom: 1px solid var(--q-border) !important; } .swagger-ui .parameters-col_description p, .swagger-ui .parameter__name, .swagger-ui .parameter__type, .swagger-ui .parameter__in { color: var(--q-text) !important; } .swagger-ui .response-col_status, .swagger-ui .response-col_description { color: var(--q-text) !important; } /* Required badge */ .swagger-ui .parameter__name.required::after { color: #f93e3e !important; } /* ========================================================= MODELS / SCHEMAS ========================================================= */ .swagger-ui section.models { border-color: var(--q-border) !important; } .swagger-ui section.models .model-container { background: var(--q-bg-secondary) !important; } .swagger-ui section.models h4, .swagger-ui .model-title { color: var(--q-text) !important; } .swagger-ui .model { color: var(--q-text) !important; } .swagger-ui .model-box { background: var(--q-bg-secondary) !important; } /* ========================================================= INPUTS, TEXTAREAS, SELECTS ========================================================= */ .swagger-ui input, .swagger-ui textarea, .swagger-ui select { background: var(--q-bg-input) !important; color: var(--q-text) !important; border-color: var(--q-border) !important; } .swagger-ui input:focus, .swagger-ui select:focus, .swagger-ui textarea:focus { border-color: var(--q-light-blue) !important; box-shadow: 0 0 0 3px var(--q-shadow-focus) !important; outline: none; } /* ========================================================= BUTTONS ========================================================= */ /* Authorize */ .swagger-ui .btn.authorize { background-color: var(--q-navy) !important; border-color: var(--q-navy) !important; color: #ffffff !important; } .swagger-ui .btn.authorize:hover { background-color: var(--q-blue) !important; } /* Try it out / Execute */ .swagger-ui .btn.try-out__btn, .swagger-ui .btn.execute { background-color: var(--q-light-blue) !important; color: var(--q-navy) !important; } .swagger-ui .btn.try-out__btn:hover, .swagger-ui .btn.execute:hover { background-color: var(--q-blue) !important; color: #ffffff !important; } /* Cancel */ .swagger-ui .btn.cancel { border-color: var(--q-border) !important; color: var(--q-text) !important; } /* Copy button */ .swagger-ui .copy-to-clipboard { background: var(--q-bg-secondary) !important; } /* ========================================================= AUTHORIZE MODAL ========================================================= */ .swagger-ui .modal-ux { background: var(--q-bg) !important; border-color: var(--q-border) !important; } .swagger-ui .modal-ux-header { background-color: var(--q-modal-header-bg) !important; color: var(--q-modal-header-fg) !important; } .swagger-ui .modal-ux-header h3 { color: var(--q-modal-header-fg) !important; font-weight: 600; } .swagger-ui .modal-ux-header .close-modal { fill: var(--q-modal-header-fg) !important; } .swagger-ui .modal-ux-content p, .swagger-ui .modal-ux-content label { color: var(--q-text) !important; } /* Overlay */ .swagger-ui .dialog-ux .backdrop-ux { background: rgba(0, 0, 0, 0.6) !important; } /* ========================================================= RESPONSE CODE BLOCKS ========================================================= */ .swagger-ui .microlight, .swagger-ui .highlight-code pre { background: var(--q-bg-secondary) !important; color: var(--q-text) !important; border-radius: 4px; } .swagger-ui .responses-inner h4, .swagger-ui .responses-inner h5 { color: var(--q-text) !important; } /* ========================================================= LINKS ========================================================= */ .swagger-ui a { color: var(--q-link) !important; } .swagger-ui a:hover { color: var(--q-link-hover) !important; } /* ========================================================= THEME TOGGLE BUTTON Floats top-right, above the Swagger topbar. ========================================================= */ #qixo-theme-toggle { position: fixed; top: 10px; right: 16px; z-index: 99999; padding: 5px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); color: #ffffff; cursor: pointer; font-size: 12px; font-family: sans-serif; letter-spacing: 0.02em; backdrop-filter: blur(4px); transition: background 0.2s ease, border-color 0.2s ease; user-select: none; } #qixo-theme-toggle:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }