/* ============================================================ Swagger UI re-skin — pulls Swagger UI in line with the Atrict design tokens (see site.css). Keeps Swagger's structure intact; only restyles surfaces, borders, type, and accents. The Inter webfont is imported here because Swagger UI is served outside our _Layout.cshtml; we can't rely on the host page to have already pulled it. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* fallback design tokens — they're inherited from site.css when the iframe shares the host's stylesheet, but Swagger UI's own bundle is loaded without our shell, so we redeclare them here too. Light mode is the default; dark mode flips everything via [data-theme="dark"] on . */ .swagger-ui { --color-bg: #ffffff; --color-bg-secondary: #f7f8fa; --color-bg-tertiary: #eef0f3; --color-surface: #ffffff; --color-border: #e0e3e8; --color-border-light: #eef0f3; --color-text: #1a1d23; --color-text-secondary: #5f6570; --color-text-muted: #8b919d; --color-text-inverse: #ffffff; --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-primary-light: rgba(37, 99, 235, 0.08); --color-danger: #dc2626; --color-success: #16a34a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); /* method-pill colors lifted directly from docs/design/css/design.css (.swagger-op-method.{get,post,del,patch}) so live UI = mock. */ --method-get: #2563eb; --method-post: #2f7a4f; --method-del: #b03a3a; --method-patch: #a35a14; --method-put: #7c3aed; } [data-theme="dark"] .swagger-ui { --color-bg: #0f1117; --color-bg-secondary: #181a22; --color-bg-tertiary: #1f222c; --color-surface: #181a22; --color-border: #2a2d38; --color-border-light: #1f222c; --color-text: #e4e6eb; --color-text-secondary: #9da2ae; --color-text-muted: #6b7280; --color-text-inverse: #0f1117; --color-primary: #5b8def; --color-primary-hover: #7ba4f7; --color-primary-light: rgba(91, 141, 239, 0.14); --color-danger: #ef4444; --color-success: #22c55e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); } /* dark mode: flip the body too so the area outside .swagger-ui matches */ [data-theme="dark"] body { background: #0f1117 !important; color: #e4e6eb !important; } /* === Globals: type & background === Inter for everything in the Swagger surface, with a small monospace whitelist below. Use a high-specificity selector list so we beat the upstream selectors that style each element individually. */ .swagger-ui, .swagger-ui *, .swagger-ui *::before, .swagger-ui *::after { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; } /* keep monospace for things that should look like code */ .swagger-ui .opblock .opblock-summary-path, .swagger-ui .opblock .opblock-summary-path__deprecated, .swagger-ui .opblock-summary-method, .swagger-ui pre, .swagger-ui pre *, .swagger-ui code, .swagger-ui code *, .swagger-ui .microlight, .swagger-ui .microlight *, .swagger-ui .highlight-code, .swagger-ui .highlight-code *, .swagger-ui .parameter__name, .swagger-ui .parameter__type, .swagger-ui .model, .swagger-ui .model *, .swagger-ui .prop-type, .swagger-ui .prop-name, .swagger-ui .prop-format, .swagger-ui textarea.curl, .swagger-ui .response-col_status { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important; } .swagger-ui, .swagger-ui .info, .swagger-ui .scheme-container { background: var(--color-bg); color: var(--color-text); } body { background: var(--color-bg); } /* === Top bar — hide entirely === The host page (Atrict /docs/api-ui) already provides "Atrict API" in the page header. Standalone /api-docs viewers see no chrome either; the operations grid is its own thing. We rely on swagger-ui-skin.js to also hide the topbar via inline style for the brief paint before this stylesheet kicks in. */ .swagger-ui .topbar { display: none !important; } /* === Hide the upstream "info" block at the top (title, description, raw-spec link). The topbar already shows "Atrict API v1"; the description duplicates the /docs/api page. The Authorize button stays — it lives inside the .scheme-container right below the info block. === */ .swagger-ui .information-container, .swagger-ui .info { display: none !important; } /* the scheme-container floats the Authorize button to the right; without the info block above it, give it some top breathing room. */ .swagger-ui .scheme-container { box-shadow: none; border-bottom: 1px solid var(--color-border); margin: 0; padding: 0.875rem 1.125rem; background: var(--color-bg-secondary); } .swagger-ui .scheme-container .schemes { align-items: center; } /* === Authorize button (subtle secondary chrome to match design) === */ .swagger-ui .btn.authorize { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: none; padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500; border-radius: 6px; } .swagger-ui .btn.authorize:hover { background: var(--color-bg-secondary); border-color: var(--color-text-secondary); color: var(--color-text); } .swagger-ui .btn.authorize svg { fill: var(--color-text-secondary); transform: translateY(1px); } .swagger-ui .btn.authorize.locked svg { fill: var(--color-success); } /* the per-operation tiny lock buttons */ .swagger-ui .authorization__btn { color: var(--color-text-muted); } .swagger-ui .authorization__btn.locked svg { fill: var(--color-success); } .swagger-ui .authorization__btn.unlocked svg { fill: var(--color-text-muted); } /* === Authorize modal — matches Atrict .login-card chrome === */ .swagger-ui .dialog-ux .backdrop-ux { background: rgba(15, 17, 23, 0.45); } .swagger-ui .dialog-ux .modal-ux { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-md); max-width: 520px; width: calc(100% - 2rem); overflow: hidden; /* upstream centers the modal vertically (top:50% + translateY(-50%)), which makes long modals (scopes list + scrollable content) extend off the bottom of the viewport, requiring scroll to reach Authorize/Close. Pin to the top with a small offset so the header is always visible. */ top: 1.5rem !important; transform: translate(-50%, 0) !important; /* keep it inside the viewport: max height = viewport minus offset twice (top + bottom breathing room). modal-ux-content already scrolls. */ max-height: calc(100vh - 3rem); display: flex; flex-direction: column; } .swagger-ui .dialog-ux .modal-ux-inner { /* fill the capped modal height so .modal-ux-content gets a scroll region when the body is taller than the remaining space. */ padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .swagger-ui .dialog-ux .modal-ux-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0.875rem 1.125rem; align-items: center; } .swagger-ui .dialog-ux .modal-ux-header h3 { color: var(--color-text); font-size: 0.9375rem; font-weight: 600; margin: 0; } .swagger-ui .dialog-ux .modal-ux-content { padding: 1.125rem 1.25rem; background: var(--color-surface); color: var(--color-text); font-size: 0.875rem; line-height: 1.55; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .swagger-ui .dialog-ux .modal-ux-content > h4 { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); margin: 0.25rem 0 0.5rem; } .swagger-ui .dialog-ux .modal-ux-content h4, .swagger-ui .dialog-ux .modal-ux-content h5, .swagger-ui .dialog-ux .modal-ux-content h6, .swagger-ui .dialog-ux .modal-ux-content label, .swagger-ui .dialog-ux .modal-ux-content p { color: var(--color-text); font-size: 0.875rem; } .swagger-ui .dialog-ux .modal-ux-content > p, .swagger-ui .dialog-ux .modal-ux-content > div > p { color: var(--color-text-secondary); margin: 0 0 0.625rem; } .swagger-ui .dialog-ux .modal-ux-content code { background: var(--color-bg-tertiary); padding: 0.0625rem 0.375rem; border-radius: 4px; font-size: 0.8125rem; color: var(--color-text); } .swagger-ui .dialog-ux .auth-container { border: 0; margin: 0; padding-bottom: 0.875rem; } .swagger-ui .dialog-ux .auth-container h4 { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.375rem; } .swagger-ui .dialog-ux .auth-container h6 { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); margin: 0.625rem 0 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; } .swagger-ui .dialog-ux .auth-container label { font-size: 0.8125rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.25rem; display: block; } .swagger-ui .dialog-ux .auth-container input[type="text"], .swagger-ui .dialog-ux .auth-container input[type="password"] { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem 0.625rem; font-size: 0.875rem; box-shadow: none; width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; height: auto; line-height: 1.4; } .swagger-ui .dialog-ux .auth-container input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } /* modal scopes block */ .swagger-ui .dialog-ux .scopes h2 { color: var(--color-text); font-size: 0.875rem; font-weight: 600; margin: 0.75rem 0 0.5rem; } .swagger-ui .dialog-ux .scopes label { color: var(--color-text); font-size: 0.8125rem; font-weight: 500; } .swagger-ui .dialog-ux .scopes label small { color: var(--color-text-secondary); font-style: normal; font-size: 0.75rem; font-weight: 400; } .swagger-ui .dialog-ux .scopes label input[type="checkbox"] { margin-right: 0.5rem; transform: translateY(1px); } .swagger-ui .dialog-ux .scope-def { color: var(--color-text-secondary); } /* "select all / select none" links inside the scopes block */ .swagger-ui .dialog-ux .scopes a, .swagger-ui .dialog-ux .modal-ux-content a { color: var(--color-primary); text-decoration: none; font-weight: 500; } .swagger-ui .dialog-ux .scopes a:hover, .swagger-ui .dialog-ux .modal-ux-content a:hover { text-decoration: underline; } /* primary modal action — Authorize / Logout */ .swagger-ui .dialog-ux .auth-btn-wrapper { gap: 0.5rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--color-border); background: var(--color-bg-secondary); justify-content: flex-end; display: flex; } .swagger-ui .dialog-ux .auth-btn-wrapper .btn-done, .swagger-ui .dialog-ux .modal-btn.authorize { background: var(--color-primary); border: 1px solid var(--color-primary); color: var(--color-text-inverse); border-radius: 6px; padding: 0.4375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; box-shadow: none; line-height: 1.2; } .swagger-ui .dialog-ux .auth-btn-wrapper .btn-done:hover, .swagger-ui .dialog-ux .modal-btn.authorize:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .swagger-ui .dialog-ux .modal-btn.btn-done, .swagger-ui .dialog-ux .modal-btn:not(.authorize) { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); border-radius: 6px; padding: 0.4375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; box-shadow: none; line-height: 1.2; } .swagger-ui .dialog-ux .modal-btn.btn-done:hover, .swagger-ui .dialog-ux .modal-btn:not(.authorize):hover { background: var(--color-bg-secondary); } .swagger-ui .dialog-ux .close-modal { color: var(--color-text-muted); background: transparent; border: 0; padding: 0.25rem; } .swagger-ui .dialog-ux .close-modal:hover { color: var(--color-text); } /* === Headings + body type === */ .swagger-ui .opblock-tag, .swagger-ui .opblock .opblock-summary-operation-id, .swagger-ui .opblock .opblock-summary-path, .swagger-ui .opblock .opblock-summary-description, .swagger-ui .markdown p, .swagger-ui table thead tr th, .swagger-ui .parameter__name, .swagger-ui .response-col_status, .swagger-ui label, .swagger-ui .tab li, .swagger-ui .responses-inner h4, .swagger-ui .responses-inner h5, .swagger-ui section.models h4, .swagger-ui section.models .model { color: var(--color-text); } .swagger-ui .opblock-tag { font-size: 1rem; font-weight: 600; padding: 0.875rem 0 0.625rem; } /* === Operation blocks === Goal: match the static mock in docs/design/index.html — a thin border in the verb's tone, no thick left strap, no thick coloured ring around the expanded block. */ .swagger-ui .opblock { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: none; border-radius: 8px; margin: 0 0 0.5rem 0; } .swagger-ui .opblock .opblock-summary { border-color: var(--color-border); padding: 0.25rem 0.625rem; } .swagger-ui .opblock .opblock-summary-control:focus { outline: none; } .swagger-ui .opblock-summary-description { font-size: 0.8125rem; color: var(--color-text-secondary); font-weight: 400; } /* path text inside the summary row — match the reference mock (.swagger-op-path: monospace, 0.8125rem, regular weight). Upstream sets weight 600 which reads too bold next to the muted method pill. */ .swagger-ui .opblock .opblock-summary-path, .swagger-ui .opblock .opblock-summary-path a, .swagger-ui .opblock .opblock-summary-path span { font-weight: 400; font-size: 0.8125rem; color: var(--color-text); } /* per-verb tinted backgrounds — extremely subtle (4% alpha), thin border */ .swagger-ui .opblock.opblock-get { border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.04); } .swagger-ui .opblock.opblock-post { border-color: rgba(47, 122, 79, 0.35); background: rgba(47, 122, 79, 0.04); } .swagger-ui .opblock.opblock-patch { border-color: rgba(163, 90, 20, 0.35); background: rgba(163, 90, 20, 0.04); } .swagger-ui .opblock.opblock-put { border-color: rgba(124, 58, 237, 0.35); background: rgba(124, 58, 237, 0.04); } .swagger-ui .opblock.opblock-delete { border-color: rgba(176, 58, 58, 0.35); background: rgba(176, 58, 58, 0.04); } /* expanded state: keep the thin border, no extra ring or shadow. .is-open is added by Swagger UI when an operation is expanded. */ .swagger-ui .opblock.is-open { box-shadow: none; } .swagger-ui .opblock.opblock-get.is-open { border-color: rgba(37, 99, 235, 0.55); } .swagger-ui .opblock.opblock-post.is-open { border-color: rgba(47, 122, 79, 0.55); } .swagger-ui .opblock.opblock-patch.is-open { border-color: rgba(163, 90, 20, 0.55); } .swagger-ui .opblock.opblock-put.is-open { border-color: rgba(124, 58, 237, 0.55); } .swagger-ui .opblock.opblock-delete.is-open { border-color: rgba(176, 58, 58, 0.55); } /* === Method pill — matches docs/design swagger-op-method === */ .swagger-ui .opblock .opblock-summary-method { min-width: 56px; width: 56px; padding: 0.1875rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; color: #fff; text-transform: uppercase; text-align: center; text-shadow: none; background: var(--color-text-muted); box-shadow: none; line-height: 1.4; } .swagger-ui .opblock.opblock-get .opblock-summary-method { background: var(--method-get); } .swagger-ui .opblock.opblock-post .opblock-summary-method { background: var(--method-post); } .swagger-ui .opblock.opblock-patch .opblock-summary-method { background: var(--method-patch); } .swagger-ui .opblock.opblock-put .opblock-summary-method { background: var(--method-put); } .swagger-ui .opblock.opblock-delete .opblock-summary-method { background: var(--method-del); } /* Section headers inside an expanded operation (Parameters / Responses bars). Upstream selector (.swagger-ui .opblock .opblock-section-header) is 0,3,0; match it with a 3-class selector or higher so we don't lose specificity. */ .swagger-ui .opblock .opblock-section-header, .swagger-ui .responses-wrapper .opblock-section-header, .swagger-ui .tab-header, .swagger-ui .responses-inner-header { background: var(--color-bg-secondary); color: var(--color-text); border-bottom: 1px solid var(--color-border); box-shadow: none; min-height: unset; padding: 0.625rem 0.875rem; } .swagger-ui .opblock .opblock-section-header h4, .swagger-ui .opblock .opblock-section-header > label, .swagger-ui .responses-wrapper .opblock-section-header h4, .swagger-ui .responses-inner-header h4, .swagger-ui .tab-header h4 { color: var(--color-text); font-size: 0.8125rem; font-weight: 600; margin: 0; } /* response table rows */ .swagger-ui .responses-table .response, .swagger-ui .responses-table td { background: transparent; color: var(--color-text); border-color: var(--color-border-light); } .swagger-ui .response-col_status { font-weight: 600; } .swagger-ui .opblock-tag svg, .swagger-ui .expand-operation svg, .swagger-ui .arrow { fill: var(--color-text-secondary); } /* === Form controls === */ .swagger-ui input[type="text"], .swagger-ui input[type="password"], .swagger-ui input[type="search"], .swagger-ui input[type="email"], .swagger-ui input[type="url"], .swagger-ui input[type="number"], .swagger-ui textarea, .swagger-ui select { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; box-shadow: none; } .swagger-ui input:focus, .swagger-ui textarea:focus, .swagger-ui select:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-primary-light); } /* === Action buttons inside operation body — Try it out, Cancel, Execute, Clear. Mirror the site's btn-secondary / btn primary look. === */ .swagger-ui .btn.try-out__btn, .swagger-ui .btn.cancel, .swagger-ui .btn-clear, .swagger-ui .btn.btn-clear { border-radius: 6px; padding: 0.4375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; box-shadow: none; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-shadow: none; text-transform: none; line-height: 1.2; } .swagger-ui .btn.try-out__btn:hover, .swagger-ui .btn.cancel:hover, .swagger-ui .btn-clear:hover { background: var(--color-bg-secondary); border-color: var(--color-text-secondary); color: var(--color-text); } .swagger-ui .btn.execute { border-radius: 6px; padding: 0.4375rem 1.125rem; font-size: 0.8125rem; font-weight: 500; box-shadow: none; background: var(--color-primary); border: 1px solid var(--color-primary); color: var(--color-text-inverse); text-shadow: none; text-transform: none; line-height: 1.2; width: auto; display: inline-block; } .swagger-ui .btn.execute:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* try-out wrapper alignment so the row reads: [Try it out] ___________ [Execute] */ .swagger-ui .try-out { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; } .swagger-ui .execute-wrapper { padding: 0.625rem 0.875rem; text-align: right; } /* === Tables / models / code === */ .swagger-ui table { background: transparent; } .swagger-ui table thead tr th, .swagger-ui table tbody tr td { border-color: var(--color-border-light); color: var(--color-text); font-size: 0.8125rem; } .swagger-ui table thead tr th { font-weight: 600; background: transparent; color: var(--color-text-secondary); text-transform: none; letter-spacing: 0; } .swagger-ui .model-box, .swagger-ui .model-box-control { background: var(--color-bg-secondary); border-color: var(--color-border); } .swagger-ui .response-col_links, .swagger-ui .response-col_description, .swagger-ui .response-col_description__inner div.markdown, .swagger-ui .response-col_description__inner div.renderedMarkdown { color: var(--color-text-secondary); } /* === Code blocks (Example Value, server response, curl) === */ .swagger-ui .highlight-code, .swagger-ui pre { background: var(--color-bg-tertiary); color: var(--color-text); border: 1px solid var(--color-border-light); border-radius: 8px; box-shadow: none; padding: 0.75rem 0.875rem; font-size: 0.8125rem; line-height: 1.55; } /* microlight is the syntax-highlighted JSON renderer. Reset all the loud Swagger token colors to subtle, design-token-driven hues. */ .swagger-ui .microlight { background: var(--color-bg-tertiary) !important; color: var(--color-text) !important; font-size: 0.8125rem !important; line-height: 1.55 !important; } /* the inline tokens microlight emits use inline color styles. Strip the bright defaults and re-tone them — we override with our own palette via attribute selectors below since microlight uses inline `style` (which would normally beat us, but `!important` wins). */ .swagger-ui .microlight span, .swagger-ui .highlight-code span { color: inherit !important; } .swagger-ui .microlight .hljs-string, .swagger-ui .highlight-code .hljs-string, .swagger-ui .microlight .token.string { color: #2f7a4f !important; } .swagger-ui .microlight .hljs-number, .swagger-ui .highlight-code .hljs-number, .swagger-ui .microlight .token.number { color: #a35a14 !important; } .swagger-ui .microlight .hljs-attr, .swagger-ui .highlight-code .hljs-attr, .swagger-ui .microlight .token.property { color: var(--color-text) !important; font-weight: 600 !important; } [data-theme="dark"] .swagger-ui .microlight .hljs-string, [data-theme="dark"] .swagger-ui .microlight .token.string { color: #6cc28a !important; } [data-theme="dark"] .swagger-ui .microlight .hljs-number, [data-theme="dark"] .swagger-ui .microlight .token.number { color: #d8985a !important; } /* curl preview block (after Execute) */ .swagger-ui .curl-command, .swagger-ui .curl, .swagger-ui textarea.curl { background: var(--color-bg-tertiary); color: var(--color-text); border: 1px solid var(--color-border-light); border-radius: 8px; font-size: 0.8125rem; line-height: 1.55; } /* response code block */ .swagger-ui .responses-inner pre, .swagger-ui .response pre { background: var(--color-bg-tertiary); color: var(--color-text); } /* === Hide noise: media-type dropdown, Schemas section, copy-link === */ /* we only emit application/json — the dropdown is irrelevant. Hide both the parameter-content media selector and the response-content one. Swagger UI prefixes them differently across versions, so cover both. */ .swagger-ui .response-control-media-type, .swagger-ui .opblock-section-request-body .content-type, .swagger-ui .opblock-section .response-control-media-type, .swagger-ui .responses-wrapper .response-control-media-type, .swagger-ui .opblock-body .opblock-section-request-body .opblock-section-header .content-type-wrapper { display: none !important; } /* the bottom Schemas block: section.models. Keep schemas reachable inline (model-ref is shown next to each operation) but the global Schemas dump at the bottom is duplicated by /docs/api. Hide it. */ .swagger-ui section.models, .swagger-ui .models { display: none !important; } /* per-operation copy-to-clipboard glyph at the end of the path — user explicitly asked to remove this. */ .swagger-ui .copy-to-clipboard, .swagger-ui .view-line-link.copy-to-clipboard, .swagger-ui .copy-to-clipboard-button { display: none !important; } /* slim the OAS3 dialect/version stamp the info block already contained; defensive against a future upstream re-render. */ .swagger-ui .info hgroup.main pre, .swagger-ui .info hgroup.main a, .swagger-ui .info .title small.version-stamp { display: none; } /* response status / wrapper background flat to surface */ .swagger-ui .response-control, .swagger-ui .responses-inner { background: transparent; } /* Tabs (Example / Schema toggle) */ .swagger-ui .tab li { font-size: 0.8125rem; color: var(--color-text-secondary); } .swagger-ui .tab li.active, .swagger-ui .tab li button.active { color: var(--color-primary); }