Browse Source

adjusting api for themes

Nostr-Signature: c6125da849827ef6481eed3588231630470289db0176066fc9c1e044f839976b 573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc 7a943b493af9d7108a26fb3bad8166e58ba2ed08eb6c24c178775387620601e6a130ce8a0f344a79e637fc4e75ed2e6d308a242101b14bdb38ccb901c09ff13f
main
Silberengel 3 weeks ago
parent
commit
0bcb69779a
  1. 1
      nostr/commit-signatures.jsonl
  2. 166
      src/app.css
  3. 56
      src/lib/components/ThemeToggle.svelte
  4. 833
      src/routes/api-docs/+page.svelte

1
nostr/commit-signatures.jsonl

@ -5,3 +5,4 @@
{"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771516332,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","security fixes"]],"content":"Signed commit: security fixes","id":"a16b9538d6ce6ce2f1030042a4106534e2af1583642315893cc56d9f2e7cd385","sig":"0be95c5f2d720c008b52a1d38cef9952b1a615ecd3ef34b5b373266a2afb880e30347d3ee467b4ea42eca4a0e57808f98795ada878357ad39ca1a3063d6b6a22"} {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771516332,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","security fixes"]],"content":"Signed commit: security fixes","id":"a16b9538d6ce6ce2f1030042a4106534e2af1583642315893cc56d9f2e7cd385","sig":"0be95c5f2d720c008b52a1d38cef9952b1a615ecd3ef34b5b373266a2afb880e30347d3ee467b4ea42eca4a0e57808f98795ada878357ad39ca1a3063d6b6a22"}
{"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771519913,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","fix swagger"]],"content":"Signed commit: fix swagger","id":"c0eb40be64306e1b11eba642ad357fd877776f50c8e64867cff845b92851c60e","sig":"194bedf752e25da9924bcf16b55eec0b29ae5da8bcd3f2a646e072f08d2d8f499269d42fafe6c056effb22840be0101c243aa1852b41899a73b242e6d6ad2932"} {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771519913,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","fix swagger"]],"content":"Signed commit: fix swagger","id":"c0eb40be64306e1b11eba642ad357fd877776f50c8e64867cff845b92851c60e","sig":"194bedf752e25da9924bcf16b55eec0b29ae5da8bcd3f2a646e072f08d2d8f499269d42fafe6c056effb22840be0101c243aa1852b41899a73b242e6d6ad2932"}
{"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771520422,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","correct icons"]],"content":"Signed commit: correct icons","id":"3d630436d21542aa097b574829ba03f9700db4d707f3d7065bc24000321d0ba2","sig":"6e345bb8ca6fef352400dd10a801d1f41b8798b7a0307eba9af84ea3b4045235b50510905ab2cc9cbdd2894b56a0d1524560a9347c137f39cf756c43ca72c326"} {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771520422,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","correct icons"]],"content":"Signed commit: correct icons","id":"3d630436d21542aa097b574829ba03f9700db4d707f3d7065bc24000321d0ba2","sig":"6e345bb8ca6fef352400dd10a801d1f41b8798b7a0307eba9af84ea3b4045235b50510905ab2cc9cbdd2894b56a0d1524560a9347c137f39cf756c43ca72c326"}
{"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771520523,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","fix contrast"]],"content":"Signed commit: fix contrast","id":"210177972a67b45a8c56494f2423987ffd30fc5594c539ed6a9f23c0f0992d21","sig":"c3122ebc0055f5a7145d394b9461b811b6e37a7423493d62a6debf7078c006435352e2e2a4259fce6a8a13486bdd137e2e7a49bfdf512a37a73d0c36d405ff2f"}

166
src/app.css

@ -18,8 +18,8 @@
--bg-secondary: var(--lavender-blush); --bg-secondary: var(--lavender-blush);
--bg-tertiary: var(--thistle); --bg-tertiary: var(--thistle);
--text-primary: #0a0a0a; /* Darker for better contrast */ --text-primary: #0a0a0a; /* Darker for better contrast */
--text-secondary: #2a2a2a; /* Darker for better contrast */ --text-secondary: #1a1a1a; /* Darker for better contrast on light backgrounds */
--text-muted: #4a4a4a; /* Darker for better contrast */ --text-muted: #3a3a3a; /* Darker for better contrast on light backgrounds */
--border-color: var(--thistle); --border-color: var(--thistle);
--border-light: var(--lavender-blush); --border-light: var(--lavender-blush);
--accent: var(--royal-plum); --accent: var(--royal-plum);
@ -60,8 +60,8 @@
--bg-secondary: var(--lavender-blush); --bg-secondary: var(--lavender-blush);
--bg-tertiary: var(--thistle); --bg-tertiary: var(--thistle);
--text-primary: #ffffff; /* Brighter for better contrast */ --text-primary: #ffffff; /* Brighter for better contrast */
--text-secondary: #e0e0e0; /* Brighter for better contrast */ --text-secondary: #e8e8e8; /* Brighter for better contrast on dark backgrounds */
--text-muted: #b0b0b0; /* Brighter for better contrast */ --text-muted: #c0c0c0; /* Brighter for better contrast on dark backgrounds */
--border-color: var(--thistle); --border-color: var(--thistle);
--border-light: var(--lavender-blush); --border-light: var(--lavender-blush);
--accent: var(--royal-plum); --accent: var(--royal-plum);
@ -74,12 +74,12 @@
--card-border: var(--border-color); --card-border: var(--border-color);
--button-primary: var(--royal-plum); --button-primary: var(--royal-plum);
--button-primary-hover: var(--accent-hover); --button-primary-hover: var(--accent-hover);
--button-secondary: #7a5a6a; /* Adjusted for dark theme */ --button-secondary: #8a6a7a; /* Lighter for better contrast with white text */
--button-secondary-hover: #8a6a7a; /* Lighter for hover */ --button-secondary-hover: #9a7a8a; /* Even lighter for hover */
--input-bg: var(--lavender-blush); --input-bg: var(--lavender-blush);
--input-border: var(--border-color); --input-border: var(--border-color);
--input-focus: var(--royal-plum); --input-focus: var(--royal-plum);
--input-placeholder: #a0a0a0; /* Lighter gray for placeholder on dark bg */ --input-placeholder: #b0b0b0; /* Lighter gray for better contrast on dark bg */
--error-bg: #4a1f1f; --error-bg: #4a1f1f;
--error-text: #ff8a8a; /* Brighter for better contrast */ --error-text: #ff8a8a; /* Brighter for better contrast */
--success-bg: #1a3a2a; --success-bg: #1a3a2a;
@ -116,8 +116,8 @@
--card-border: #30363d; /* GitHub's card border */ --card-border: #30363d; /* GitHub's card border */
--button-primary: var(--royal-plum); --button-primary: var(--royal-plum);
--button-primary-hover: #b84a8a; --button-primary-hover: #b84a8a;
--button-secondary: #21262d; /* GitHub's secondary button */ --button-secondary: #30363d; /* GitHub's secondary button - lighter for contrast */
--button-secondary-hover: #30363d; /* GitHub's secondary button hover */ --button-secondary-hover: #484f58; /* GitHub's secondary button hover - even lighter */
--input-bg: #0d1117; /* GitHub's input background */ --input-bg: #0d1117; /* GitHub's input background */
--input-border: #30363d; /* GitHub's input border */ --input-border: #30363d; /* GitHub's input border */
--input-focus: var(--royal-plum); --input-focus: var(--royal-plum);
@ -564,6 +564,45 @@ textarea:disabled::placeholder {
color: inherit; color: inherit;
} }
/* Make icon images theme-aware using filters */
.icon-small img,
.icon-inline img,
.hamburger-icon img,
.platform-icon img,
.repo-badge-icon img,
.btn-icon img {
filter: var(--icon-filter, brightness(0) saturate(100%) invert(var(--icon-invert, 0)));
transition: filter 0.3s ease;
opacity: 0.9;
}
/* Theme icons - handled separately for better control */
.theme-icon img:not(.theme-toggle .theme-icon img),
.theme-icon-option img:not(.theme-option .theme-icon-option img) {
filter: var(--icon-filter, brightness(0) saturate(100%) invert(var(--icon-invert, 0)));
transition: filter 0.3s ease;
opacity: 0.9;
}
/* Light theme: icons should be dark (black) */
:root,
[data-theme="light"] {
--icon-filter: brightness(0) saturate(100%);
--icon-invert: 0;
}
/* Dark theme: icons should be light (white/light gray) */
[data-theme="dark"] {
--icon-filter: brightness(0) saturate(100%) invert(1);
--icon-invert: 1;
}
/* Black theme: icons should be light (white/light gray) */
[data-theme="black"] {
--icon-filter: brightness(0) saturate(100%) invert(1);
--icon-invert: 1;
}
.icon-inline { .icon-inline {
width: 14px; width: 14px;
height: 14px; height: 14px;
@ -578,6 +617,115 @@ textarea:disabled::placeholder {
color: inherit; color: inherit;
} }
/* Ensure icons in buttons and interactive elements have proper contrast */
button .icon-inline img,
button .icon-small img,
.button .icon-inline img,
.button .icon-small img {
filter: var(--icon-filter, brightness(0) saturate(100%) invert(var(--icon-invert, 0)));
}
/* Icons on accent backgrounds should be white */
button[class*="primary"] .icon-inline img,
button[class*="primary"] .icon-small img,
.button[class*="primary"] .icon-inline img,
.button[class*="primary"] .icon-small img,
.theme-toggle:hover .theme-icon img {
filter: brightness(0) saturate(100%) invert(1);
}
/* Theme toggle icons - ensure high contrast with maximum specificity */
button.theme-toggle img.theme-icon,
.theme-toggle img.theme-icon,
button.theme-option img.theme-icon-option,
.theme-option img.theme-icon-option {
filter: brightness(0) saturate(100%) invert(1) !important; /* Default to white for dark backgrounds */
opacity: 1 !important;
transition: filter 0.3s ease, opacity 0.3s ease;
}
/* Light theme: pure black */
:root button.theme-toggle img.theme-icon,
:root .theme-toggle img.theme-icon,
[data-theme="light"] button.theme-toggle img.theme-icon,
[data-theme="light"] .theme-toggle img.theme-icon,
:root button.theme-option img.theme-icon-option,
:root .theme-option img.theme-icon-option,
[data-theme="light"] button.theme-option img.theme-icon-option,
[data-theme="light"] .theme-option img.theme-icon-option {
filter: brightness(0) saturate(100%) !important; /* Pure black in light theme */
opacity: 1 !important;
}
/* Dark themes: pure white */
[data-theme="dark"] button.theme-toggle img.theme-icon,
[data-theme="dark"] .theme-toggle img.theme-icon,
[data-theme="black"] button.theme-toggle img.theme-icon,
[data-theme="black"] .theme-toggle img.theme-icon,
[data-theme="dark"] button.theme-option img.theme-icon-option,
[data-theme="dark"] .theme-option img.theme-icon-option,
[data-theme="black"] button.theme-option img.theme-icon-option,
[data-theme="black"] .theme-option img.theme-icon-option {
filter: brightness(0) saturate(100%) invert(1) !important; /* Pure white in dark themes */
opacity: 1 !important;
}
/* Hover state: always white for maximum visibility */
button.theme-toggle:hover img.theme-icon,
.theme-toggle:hover img.theme-icon {
filter: brightness(0) saturate(100%) invert(1) !important; /* White on hover for visibility */
opacity: 1 !important;
}
/* Light theme hover: keep black */
[data-theme="light"] button.theme-toggle:hover img.theme-icon,
[data-theme="light"] .theme-toggle:hover img.theme-icon {
filter: brightness(0) saturate(100%) !important; /* Black in light theme on hover */
opacity: 1 !important;
}
/* Dropdown option icons - always visible */
button.theme-option:hover img.theme-icon-option,
.theme-option:hover img.theme-icon-option,
button.theme-option.active img.theme-icon-option,
.theme-option.active img.theme-icon-option {
filter: brightness(0) saturate(100%) invert(1) !important; /* White for visibility */
opacity: 1 !important;
}
/* Light theme: dropdown icons should be black */
[data-theme="light"] button.theme-option:hover img.theme-icon-option,
[data-theme="light"] .theme-option:hover img.theme-icon-option,
[data-theme="light"] button.theme-option.active img.theme-icon-option,
[data-theme="light"] .theme-option.active img.theme-icon-option {
filter: brightness(0) saturate(100%) !important; /* Black in light theme */
opacity: 1 !important;
}
/* Verification badge icons - maintain color while ensuring visibility */
.verification-badge .icon-inline img {
filter: var(--icon-filter, brightness(0) saturate(100%) invert(var(--icon-invert, 0)));
}
/* Verified badge: green checkmark - adjust based on theme */
[data-theme="light"] .verification-badge.verified .icon-inline img {
filter: brightness(0) saturate(100%) invert(0.4) sepia(1) saturate(3) hue-rotate(90deg);
}
[data-theme="dark"] .verification-badge.verified .icon-inline img,
[data-theme="black"] .verification-badge.verified .icon-inline img {
filter: brightness(0) saturate(100%) invert(0.6) sepia(1) saturate(3) hue-rotate(90deg);
}
[data-theme="dark"] .verification-badge.unverified .icon-inline img,
[data-theme="black"] .verification-badge.unverified .icon-inline img {
filter: brightness(0) saturate(100%) invert(0.5) sepia(1) saturate(3) hue-rotate(0deg);
}
[data-theme="light"] .verification-badge.unverified .icon-inline img {
filter: brightness(0) saturate(100%) invert(0.3) sepia(1) saturate(3) hue-rotate(0deg);
}
.clear-lookup-button img, .clear-lookup-button img,
.clear-lookup-button svg { .clear-lookup-button svg {
width: 14px; width: 14px;

56
src/lib/components/ThemeToggle.svelte

@ -157,6 +157,33 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
display: block; display: block;
filter: brightness(0) saturate(100%) invert(1) !important; /* Default white for dark themes */
opacity: 1 !important;
}
/* Light theme: black icon */
:global([data-theme="light"]) .theme-toggle .theme-icon {
filter: brightness(0) saturate(100%) !important; /* Black in light theme */
opacity: 1 !important;
}
/* Dark themes: white icon */
:global([data-theme="dark"]) .theme-toggle .theme-icon,
:global([data-theme="black"]) .theme-toggle .theme-icon {
filter: brightness(0) saturate(100%) invert(1) !important; /* White in dark themes */
opacity: 1 !important;
}
/* Hover: white for visibility */
.theme-toggle:hover .theme-icon {
filter: brightness(0) saturate(100%) invert(1) !important;
opacity: 1 !important;
}
/* Light theme hover: keep black */
:global([data-theme="light"]) .theme-toggle:hover .theme-icon {
filter: brightness(0) saturate(100%) !important;
opacity: 1 !important;
} }
.theme-dropdown { .theme-dropdown {
@ -214,12 +241,41 @@
height: 18px; height: 18px;
display: inline-block; display: inline-block;
flex-shrink: 0; flex-shrink: 0;
filter: brightness(0) saturate(100%) invert(1) !important; /* Default white for dark themes */
opacity: 1 !important;
}
/* Light theme: black icons */
:global([data-theme="light"]) .theme-option .theme-icon-option {
filter: brightness(0) saturate(100%) !important; /* Black in light theme */
opacity: 1 !important;
}
/* Dark themes: white icons */
:global([data-theme="dark"]) .theme-option .theme-icon-option,
:global([data-theme="black"]) .theme-option .theme-icon-option {
filter: brightness(0) saturate(100%) invert(1) !important; /* White in dark themes */
opacity: 1 !important;
} }
.theme-option.active .theme-icon-option { .theme-option.active .theme-icon-option {
transform: scale(1.1); transform: scale(1.1);
} }
/* Hover and active states */
.theme-option:hover .theme-icon-option,
.theme-option.active .theme-icon-option {
filter: brightness(0) saturate(100%) invert(1) !important; /* White for visibility */
opacity: 1 !important;
}
/* Light theme hover/active: keep black */
:global([data-theme="light"]) .theme-option:hover .theme-icon-option,
:global([data-theme="light"]) .theme-option.active .theme-icon-option {
filter: brightness(0) saturate(100%) !important; /* Black in light theme */
opacity: 1 !important;
}
.theme-name { .theme-name {
flex: 1; flex: 1;
} }

833
src/routes/api-docs/+page.svelte

@ -100,32 +100,861 @@
.api-docs-header code { .api-docs-header code {
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--text-primary);
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
border-radius: 0.25rem; border-radius: 0.25rem;
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
font-size: 0.875rem; font-size: 0.875rem;
border: 1px solid var(--border-light);
}
.api-docs-header .note strong {
color: var(--text-primary);
} }
#swagger-ui { #swagger-ui {
margin-top: 2rem; margin-top: 2rem;
} }
/* Override Swagger UI styles to match our theme */ /* Base Swagger UI theme overrides */
:global(.swagger-ui) { :global(.swagger-ui) {
font-family: 'IBM Plex Serif', serif; font-family: 'IBM Plex Serif', serif;
color: var(--text-primary) !important;
background: var(--bg-primary) !important;
}
:global(.swagger-ui .wrapper),
:global(.swagger-ui .wrapper .container),
:global(.swagger-ui .swagger-ui-wrap),
:global(.swagger-ui .topbar) {
background: var(--bg-primary) !important;
} }
:global(.swagger-ui .topbar) { :global(.swagger-ui .topbar) {
display: none; display: none;
} }
/* Info section */
:global(.swagger-ui .info) {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 2rem;
}
:global(.swagger-ui .info .title) { :global(.swagger-ui .info .title) {
color: var(--text-primary); color: var(--text-primary);
font-size: 2rem;
margin-bottom: 0.5rem;
display: flex !important;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
/* Container for version badges - align right with spacing */
:global(.swagger-ui .info .title > span) {
display: flex !important;
gap: 0.5rem !important;
align-items: center;
margin-left: auto;
flex-shrink: 0;
}
:global(.swagger-ui .info .description),
:global(.swagger-ui .info p) {
color: var(--text-secondary);
}
:global(.swagger-ui .info a) {
color: var(--link-color) !important;
}
:global(.swagger-ui .info a:hover) {
color: var(--link-hover) !important;
}
/* All links in Swagger UI */
:global(.swagger-ui a),
:global(.swagger-ui a span),
:global(.swagger-ui a code) {
color: var(--link-color) !important;
text-decoration: none;
}
:global(.swagger-ui a:hover),
:global(.swagger-ui a:hover span),
:global(.swagger-ui a:hover code) {
color: var(--link-hover) !important;
text-decoration: underline;
}
/* Version badges - unified round styling with matching borders */
/* Target the <pre class="version"> elements directly */
:global(.swagger-ui .info pre.version),
:global(.swagger-ui .info .version-stamp pre.version),
:global(.swagger-ui pre.version) {
border-radius: 9999px !important;
display: inline-block !important;
padding: 0.25rem 0.75rem !important;
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-color: var(--border-color) !important;
border-width: 1px !important;
margin: 0 !important;
font-size: inherit !important;
font-family: inherit !important;
line-height: 1.5 !important;
}
/* Add spacing between badges */
:global(.swagger-ui .info small:not(:last-child)),
:global(.swagger-ui .info .version-stamp:not(:last-child)) {
margin-right: 0.5rem !important;
}
/* Target the <small class="version-stamp"> wrapper */
:global(.swagger-ui .info small.version-stamp) {
border-radius: 9999px !important;
display: inline-block !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
margin: 0 !important;
}
/* Ensure <small> wrappers don't interfere */
:global(.swagger-ui .info small:not(.version-stamp)) {
display: inline-block !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
margin: 0 !important;
}
/* Remove any nested styling that creates double borders */
:global(.swagger-ui .info .version-stamp pre.version) {
margin: 0 !important;
}
/* Scheme container and filter */
:global(.swagger-ui .scheme-container),
:global(.swagger-ui .filter-container) {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.375rem;
padding: 1rem;
margin-bottom: 2rem;
}
:global(.swagger-ui .scheme-container label),
:global(.swagger-ui .filter-container label) {
color: var(--text-primary);
}
:global(.swagger-ui .scheme-container select),
:global(.swagger-ui .filter-container select) {
background: var(--input-bg);
color: var(--text-primary);
border: 1px solid var(--input-border);
}
/* Operation blocks */
:global(.swagger-ui .opblock) {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.375rem;
margin-bottom: 1rem;
}
:global(.swagger-ui .opblock.opblock-get) { border-left: 4px solid #61affe; }
:global(.swagger-ui .opblock.opblock-post) { border-left: 4px solid #49cc90; }
:global(.swagger-ui .opblock.opblock-put) { border-left: 4px solid #fca130; }
:global(.swagger-ui .opblock.opblock-delete) { border-left: 4px solid #f93e3e; }
:global(.swagger-ui .opblock.opblock-patch) { border-left: 4px solid #50e3c2; }
:global(.swagger-ui .opblock-tag) {
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
}
:global(.swagger-ui .opblock-tag small) {
color: var(--text-muted);
} }
:global(.swagger-ui .scheme-container) { :global(.swagger-ui .opblock-summary) {
background: var(--bg-secondary) !important;
border-bottom: 1px solid var(--border-color) !important;
padding: 1rem;
color: var(--text-primary) !important; /* Ensure base text color */
}
/* Ensure all text in summary has proper contrast */
:global(.swagger-ui .opblock-summary *),
:global(.swagger-ui .opblock-summary-path-description-wrapper *),
:global(.swagger-ui .opblock-summary-path-description-wrapper span),
:global(.swagger-ui .opblock-summary-path-description-wrapper div) {
color: inherit;
}
:global(.swagger-ui .opblock-summary-method) {
background: var(--accent);
color: var(--accent-text, #ffffff);
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
}
:global(.swagger-ui .opblock-summary-path),
:global(.swagger-ui .opblock-summary-path a),
:global(.swagger-ui .opblock-summary-path a span),
:global(.swagger-ui .opblock-summary-path-description-wrapper),
:global(.swagger-ui .opblock-summary-path-description-wrapper *) {
color: var(--text-primary) !important;
font-family: 'IBM Plex Mono', monospace;
}
:global(.swagger-ui .opblock-summary-path a.nostyle) {
color: var(--text-primary) !important;
text-decoration: none;
}
:global(.swagger-ui .opblock-summary-path a.nostyle:hover) {
color: var(--accent) !important;
text-decoration: underline;
}
:global(.swagger-ui .opblock-summary-description) {
color: var(--text-primary) !important; /* Use primary text for better contrast */
}
/* Operation body and expanded sections */
:global(.swagger-ui .opblock-body),
:global(.swagger-ui .opblock.is-open .opblock-body) {
background: var(--card-bg) !important;
padding: 1.5rem !important;
color: var(--text-primary) !important;
}
:global(.swagger-ui .opblock.is-open) {
background: var(--card-bg) !important;
border-color: var(--border-color) !important;
}
:global(.swagger-ui .opblock.is-open .opblock-summary) {
background: var(--bg-secondary) !important;
}
:global(.swagger-ui .opblock-description-wrapper),
:global(.swagger-ui .opblock-description-wrapper p) {
color: var(--text-secondary);
padding: 0.75rem 1rem !important;
}
/* Parameters */
:global(.swagger-ui .parameters-container) {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.375rem;
padding: 1rem !important;
margin-bottom: 1rem;
color: var(--text-primary) !important; /* Ensure base text color */
}
/* "No parameters" text and all text in parameters container */
:global(.swagger-ui .parameters-container p),
:global(.swagger-ui .parameters-container *),
:global(.swagger-ui .parameters-container span),
:global(.swagger-ui .parameters-container div) {
color: var(--text-primary) !important;
}
:global(.swagger-ui .parameter__name) {
color: var(--text-primary);
font-weight: 600;
}
:global(.swagger-ui .parameter__name.required),
:global(.swagger-ui .parameter__name.required span) {
color: var(--text-primary) !important;
}
:global(.swagger-ui .parameter__name.required::after),
:global(.swagger-ui .parameter__required) {
color: var(--error-text) !important;
}
:global(.swagger-ui .parameter__type) {
color: var(--accent);
font-family: 'IBM Plex Mono', monospace;
}
:global(.swagger-ui .parameter__in) {
color: var(--text-primary) !important; /* Use primary text for better contrast on bg-tertiary */
background: var(--bg-tertiary);
padding: 0.125rem 0.5rem;
border-radius: 0.25rem;
}
:global(.swagger-ui .parameter__description),
:global(.swagger-ui .parameters-col_description) {
color: var(--text-secondary) !important;
padding: 0.75rem 1rem !important;
}
/* Ensure text-secondary has good contrast on bg-secondary */
:global(.swagger-ui .parameters-container .parameter__description),
:global(.swagger-ui .parameters-container .parameters-col_description) {
color: var(--text-primary) !important; /* Use primary text for better contrast */
}
:global(.swagger-ui .parameter__extension),
:global(.swagger-ui .parameter__deprecated) {
color: var(--text-secondary) !important; /* Use secondary instead of muted for better contrast */
}
:global(.swagger-ui .parameter-row) {
padding: 0.75rem 1rem !important;
}
/* Form inputs */
:global(.swagger-ui input),
:global(.swagger-ui textarea),
:global(.swagger-ui select) {
background: var(--input-bg) !important;
color: var(--text-primary) !important;
border: 1px solid var(--input-border) !important;
border-radius: 0.375rem;
padding: 0.5rem;
font-family: 'IBM Plex Serif', serif;
}
:global(.swagger-ui input:focus),
:global(.swagger-ui textarea:focus),
:global(.swagger-ui select:focus) {
outline: none;
border-color: var(--input-focus) !important;
}
:global(.swagger-ui input::placeholder),
:global(.swagger-ui textarea::placeholder) {
color: var(--input-placeholder, var(--text-muted)) !important;
opacity: 1;
}
/* Buttons */
:global(.swagger-ui .btn),
:global(.swagger-ui button) {
background: var(--button-primary);
color: var(--accent-text, #ffffff) !important;
border: none;
border-radius: 0.375rem;
padding: 0.5rem 1rem;
font-family: 'IBM Plex Serif', serif;
cursor: pointer;
transition: background 0.2s ease;
}
:global(.swagger-ui .btn:hover),
:global(.swagger-ui button:hover) {
background: var(--button-primary-hover);
}
:global(.swagger-ui .btn.execute) {
background: var(--accent);
}
:global(.swagger-ui .btn.execute:hover) {
background: var(--accent-hover);
}
:global(.swagger-ui .btn.cancel),
:global(.swagger-ui button.btn-clear) {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important; /* Ensure primary text for contrast */
border: 1px solid var(--border-color) !important;
}
:global(.swagger-ui .btn.cancel:hover),
:global(.swagger-ui button.btn-clear:hover) {
background: var(--bg-secondary); background: var(--bg-secondary);
}
:global(.swagger-ui .try-out__btn) {
background: var(--button-secondary) !important;
color: var(--accent-text, #ffffff) !important;
}
/* Ensure button-secondary text is always readable */
:global(.swagger-ui .btn[class*="secondary"]),
:global(.swagger-ui button[class*="secondary"]) {
color: var(--accent-text, #ffffff) !important;
}
:global(.swagger-ui .try-out__btn:hover) {
background: var(--button-secondary-hover);
}
/* Response sections */
:global(.swagger-ui .responses-wrapper) {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.375rem;
padding: 1rem !important;
margin-top: 1rem;
}
:global(.swagger-ui .responses-inner) {
background: var(--card-bg) !important;
padding: 1rem !important;
border-radius: 0.25rem;
}
:global(.swagger-ui .response-col_status) {
color: var(--text-primary);
font-weight: 600;
}
:global(.swagger-ui .response-col_description) {
color: var(--text-secondary);
}
:global(.swagger-ui .response-col_links) {
color: var(--text-muted);
}
/* Code blocks and examples */
:global(.swagger-ui pre),
:global(.swagger-ui .highlight-code),
:global(.swagger-ui .microlight),
:global(.swagger-ui .curl),
:global(.swagger-ui .curl-command),
:global(.swagger-ui .example),
:global(.swagger-ui .example-value),
:global(.swagger-ui .example-single) {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.375rem;
padding: 1rem !important;
margin: 0.5rem 0;
font-family: 'IBM Plex Mono', monospace;
overflow-x: auto;
}
:global(.swagger-ui code) {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-family: 'IBM Plex Mono', monospace;
}
:global(.swagger-ui pre code),
:global(.swagger-ui .microlight code) {
background: transparent !important;
padding: 0;
}
/* Model definitions */
:global(.swagger-ui .model-container),
:global(.swagger-ui .model-box) {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.375rem;
padding: 1rem !important;
margin-bottom: 1rem;
color: var(--text-primary) !important;
}
:global(.swagger-ui .model-container .model-box-control) {
background: var(--bg-secondary) !important;
padding: 0.5rem 1rem !important;
}
:global(.swagger-ui .model-title),
:global(.swagger-ui .model-title__text),
:global(.swagger-ui .prop-name),
:global(.swagger-ui .prop) {
color: var(--text-primary) !important;
font-weight: 600;
}
:global(.swagger-ui .model-title__small),
:global(.swagger-ui .prop-format),
:global(.swagger-ui .prop-attr) {
color: var(--text-muted) !important;
}
:global(.swagger-ui .model-jump-to-path) {
color: var(--link-color);
}
:global(.swagger-ui .model-jump-to-path:hover) {
color: var(--link-hover);
}
:global(.swagger-ui .prop-type),
:global(.swagger-ui .prop-elem) {
color: var(--accent) !important;
font-family: 'IBM Plex Mono', monospace;
}
:global(.swagger-ui .model-box .model),
:global(.swagger-ui .model-box .property-row) {
padding: 0.75rem 1rem !important;
border-bottom: 1px solid var(--border-light) !important;
}
:global(.swagger-ui .model-box .property-row:hover) {
background: var(--bg-secondary) !important;
}
:global(.swagger-ui .model-container .model-toggle) {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
}
:global(.swagger-ui .model-container .model-toggle:hover) {
background: var(--bg-secondary) !important;
}
/* Tables */
:global(.swagger-ui table) {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.375rem;
width: 100%;
border-collapse: collapse;
margin: 0.5rem 0;
}
:global(.swagger-ui table thead),
:global(.swagger-ui table thead tr) {
background: var(--bg-secondary) !important;
}
:global(.swagger-ui table tbody),
:global(.swagger-ui table tbody tr) {
background: var(--card-bg) !important;
}
:global(.swagger-ui table tbody tr:hover) {
background: var(--bg-secondary) !important;
}
:global(.swagger-ui table thead th),
:global(.swagger-ui table tbody td),
:global(.swagger-ui table thead td),
:global(.swagger-ui .col_header),
:global(.swagger-ui .response-col_status),
:global(.swagger-ui .response-col_description),
:global(.swagger-ui .response-col_links),
:global(.swagger-ui .response-col_headers) {
color: var(--text-primary) !important;
padding: 0.75rem 1rem !important;
}
:global(.swagger-ui table thead th),
:global(.swagger-ui .col_header) {
font-weight: 600;
border-bottom: 2px solid var(--border-color);
background: var(--bg-secondary) !important;
}
:global(.swagger-ui table tbody tr) {
border-bottom: 1px solid var(--border-light);
}
/* Links in tables */
:global(.swagger-ui table a),
:global(.swagger-ui .response-col_links a),
:global(.swagger-ui .response a) {
color: var(--link-color) !important;
text-decoration: none;
}
:global(.swagger-ui table a:hover),
:global(.swagger-ui .response-col_links a:hover),
:global(.swagger-ui .response a:hover) {
color: var(--link-hover) !important;
text-decoration: underline;
}
/* Links and text elements */
:global(.swagger-ui a) {
color: var(--link-color);
text-decoration: none;
}
:global(.swagger-ui a:hover) {
color: var(--link-hover);
text-decoration: underline;
}
:global(.swagger-ui h1),
:global(.swagger-ui h2),
:global(.swagger-ui h3),
:global(.swagger-ui h4),
:global(.swagger-ui h5),
:global(.swagger-ui h6),
:global(.swagger-ui label),
:global(.swagger-ui .label),
:global(.swagger-ui p) {
color: var(--text-primary) !important;
}
/* Ensure all paragraphs have proper contrast */
:global(.swagger-ui .parameters-container p),
:global(.swagger-ui .opblock-body p),
:global(.swagger-ui .response p),
:global(.swagger-ui .model-box p) {
color: var(--text-primary) !important;
}
:global(.swagger-ui small) {
color: var(--text-muted) !important;
}
/* Loading and errors */
:global(.swagger-ui .loading-container) {
color: var(--text-primary);
}
:global(.swagger-ui .error-wrapper) {
background: var(--error-bg);
color: var(--error-text);
border: 1px solid var(--error-text);
border-radius: 0.375rem;
padding: 1rem; padding: 1rem;
}
/* Authorization */
:global(.swagger-ui .auth-container) {
background: var(--card-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: 0.375rem; border-radius: 0.375rem;
padding: 1.5rem !important;
}
:global(.swagger-ui .auth-container .auth-btn-wrapper) {
background: var(--bg-secondary) !important;
padding: 1rem !important;
}
:global(.swagger-ui .auth-btn-wrapper .btn-done) {
background: var(--accent);
color: var(--accent-text, #ffffff) !important;
}
:global(.swagger-ui .auth-btn-wrapper .btn-done:hover) {
background: var(--accent-hover);
}
/* Expand/collapse controls */
:global(.swagger-ui .expand-methods),
:global(.swagger-ui .expand-operation),
:global(.swagger-ui .opblock-summary-control) {
background: var(--bg-tertiary);
color: var(--text-primary) !important;
border: 1px solid var(--border-color);
}
:global(.swagger-ui .expand-methods:hover),
:global(.swagger-ui .expand-operation:hover),
:global(.swagger-ui .opblock-summary-control:hover) {
background: var(--bg-secondary);
color: var(--accent) !important;
}
/* All SVG icons in Swagger UI - make theme-aware */
:global(.swagger-ui svg),
:global(.swagger-ui svg path),
:global(.swagger-ui svg circle),
:global(.swagger-ui svg rect),
:global(.swagger-ui svg polygon),
:global(.swagger-ui svg line),
:global(.swagger-ui svg polyline),
:global(.swagger-ui svg g),
:global(.swagger-ui svg g path) {
fill: var(--text-primary) !important;
stroke: var(--text-primary) !important;
color: var(--text-primary) !important;
}
/* Image-based icons in Swagger UI (if any) */
:global(.swagger-ui img[src*="lock"]),
:global(.swagger-ui img[src*="chevron"]),
:global(.swagger-ui img[src*="arrow"]),
:global(.swagger-ui .authorize img),
:global(.swagger-ui button img),
:global(.swagger-ui .btn img) {
filter: var(--icon-filter, brightness(0) saturate(100%) invert(var(--icon-invert, 0))) !important;
opacity: 1 !important;
}
:global(.swagger-ui .opblock-summary-control svg),
:global(.swagger-ui .opblock-summary-control svg path),
:global(.swagger-ui .opblock-summary-control svg circle) {
fill: var(--text-primary) !important;
stroke: var(--text-primary) !important;
}
:global(.swagger-ui .opblock-summary-control:hover svg),
:global(.swagger-ui .opblock-summary-control:hover svg path),
:global(.swagger-ui .opblock-summary-control:hover svg circle) {
fill: var(--accent) !important;
stroke: var(--accent) !important;
}
/* Lock icon (authorize button) */
:global(.swagger-ui .authorize svg),
:global(.swagger-ui .authorize svg path),
:global(.swagger-ui .authorize svg circle),
:global(.swagger-ui .authorize svg rect),
:global(.swagger-ui .btn.authorize svg),
:global(.swagger-ui .btn.authorize svg path),
:global(.swagger-ui button.authorize svg),
:global(.swagger-ui button.authorize svg path) {
fill: var(--text-primary) !important;
stroke: var(--text-primary) !important;
color: var(--text-primary) !important;
}
/* Chevron/arrow icons */
:global(.swagger-ui .arrow svg),
:global(.swagger-ui .arrow svg path),
:global(.swagger-ui .arrow svg polyline),
:global(.swagger-ui .chevron svg),
:global(.swagger-ui .chevron svg path),
:global(.swagger-ui .chevron svg polyline),
:global(.swagger-ui [class*="chevron"] svg),
:global(.swagger-ui [class*="chevron"] svg path),
:global(.swagger-ui [class*="arrow"] svg),
:global(.swagger-ui [class*="arrow"] svg path) {
fill: var(--text-primary) !important;
stroke: var(--text-primary) !important;
}
/* Expand/collapse arrow icons */
:global(.swagger-ui .expand-methods svg),
:global(.swagger-ui .expand-operation svg),
:global(.swagger-ui .expand-methods svg path),
:global(.swagger-ui .expand-operation svg path) {
fill: var(--text-primary) !important;
stroke: var(--text-primary) !important;
}
/* Copy buttons */
:global(.swagger-ui .copy-to-clipboard) {
background: var(--bg-tertiary) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
:global(.swagger-ui .copy-to-clipboard:hover) {
background: var(--bg-secondary) !important;
}
:global(.swagger-ui .copy-to-clipboard button) {
background: transparent !important;
color: var(--text-primary) !important;
border: none !important;
}
/* Markdown and rendered content */
:global(.swagger-ui .markdown p),
:global(.swagger-ui .renderedMarkdown),
:global(.swagger-ui .renderedMarkdown p) {
color: var(--text-secondary) !important;
}
/* Ensure text-secondary is readable on bg-tertiary backgrounds */
:global(.swagger-ui .bg-tertiary .text-secondary),
:global(.swagger-ui [style*="background: var(--bg-tertiary)"] .text-secondary) {
color: var(--text-primary) !important; /* Use primary text for better contrast */
}
:global(.swagger-ui .markdown code),
:global(.swagger-ui .renderedMarkdown code) {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
}
:global(.swagger-ui .markdown pre) {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
}
/* Request/response bodies and examples */
:global(.swagger-ui .request-body),
:global(.swagger-ui .body-param) {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
padding: 1rem !important;
border-radius: 0.375rem;
margin: 0.5rem 0;
}
:global(.swagger-ui .body-param-content),
:global(.swagger-ui .body-param-content textarea) {
background: var(--input-bg) !important;
color: var(--text-primary) !important;
padding: 0.75rem !important;
}
:global(.swagger-ui .body-param-content textarea) {
border: 1px solid var(--input-border) !important;
}
:global(.swagger-ui .body-param-content textarea::placeholder) {
color: var(--input-placeholder, var(--text-muted)) !important;
}
/* Response content type selectors */
:global(.swagger-ui .response-content-type),
:global(.swagger-ui .response-content-type ul),
:global(.swagger-ui .response-content-type li) {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
padding: 0.5rem 0.75rem !important;
border-radius: 0.375rem;
}
:global(.swagger-ui .response-content-type li.active) {
background: var(--accent) !important;
color: var(--accent-text, #ffffff) !important;
}
:global(.swagger-ui .response-content-type li:hover) {
background: var(--bg-tertiary) !important;
}
/* Section headers and expanded states */
:global(.swagger-ui .opblock-section),
:global(.swagger-ui .opblock-section-header) {
background: transparent !important;
padding: 0.75rem 1rem !important;
}
:global(.swagger-ui .opblock.is-open) {
background: var(--card-bg) !important;
border-color: var(--border-color) !important;
}
:global(.swagger-ui .opblock.is-open .opblock-summary) {
background: var(--bg-secondary) !important;
}
/* Force override white backgrounds */
:global(.swagger-ui [style*="background: white"]),
:global(.swagger-ui [style*="background: #fff"]),
:global(.swagger-ui [style*="background: #ffffff"]) {
background: var(--card-bg) !important;
} }
</style> </style>

Loading…
Cancel
Save