mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-09-16 15:17:14 +00:00
feat(frontend): TanStack Query + React Router migration & in-panel API docs (#4541)
* feat(frontend): introduce TanStack Query with status polling
Wires @tanstack/react-query into every entry and migrates useStatus to
useStatusQuery as the foundation for the multi-page MPA → SPA migration.
- QueryProvider wraps each entry inside ThemeProvider, with devtools gated
on import.meta.env.DEV
- Shared queryClient: 30s staleTime, refetchOnWindowFocus, 1 retry
- useStatusQuery preserves the { status, fetched, refresh } shape so
IndexPage swaps in without further changes
- refetchIntervalInBackground:false stops the 2s status poll when the
panel tab is hidden, cutting idle traffic against the server
* feat(frontend): collapse panel pages into a single React Router SPA
Replaces the 7-entry MPA shell (index/clients/inbounds/nodes/settings/
xray/api-docs HTML files) with one main.tsx + createBrowserRouter. The
Go backend now serves the same index.html for every authenticated
panel route; React Router reads the URL and mounts the page from cache
on subsequent navigation — no more full reloads between tabs.
Frontend
- main.tsx: single bootstrap (setupAxios, i18n, ThemeProvider,
QueryProvider, RouterProvider) replacing 7 near-duplicate entries
- routes.tsx: declarative router with lazy()-loaded pages, basename
derived from window.X_UI_BASE_PATH so panels at /secret/panel work
- layouts/PanelLayout.tsx: shell mount-point for the WS → queryClient
bridge so connection survives navigation
- api/websocketBridge.ts: subscribes the singleton WebSocketClient to
queryClient and dispatches invalidate/outbounds events to cached
queries (page-level useWebSocket handlers stay until Phase 3 hooks
migrate)
- AppSidebar: navigates via useNavigate + useLocation instead of
window.location.href; drops basePath/requestUri props
- Pages: drop the unused basePath/requestUri locals exposed only for
the old sidebar
Build
- vite.config: 9 rollup inputs → 3 (index, login, subpage). Dev proxy
bypass collapses /panel/* to index.html and skips API prefixes
- vendor-tanstack + vendor-router chunks added to manualChunks
Backend
- xui.go: 7 per-page HTML handlers → one panelSPA handler serving
index.html for /, /inbounds, /clients, /nodes, /settings, /xray,
/api-docs. The /panel/api, /panel/setting, /panel/xray sub-routers
are untouched
* feat(frontend): migrate useNodes to TanStack Query
Splits the hand-rolled useNodes hook into useNodesQuery (server data +
NodeRecord type + derived totals) and useNodeMutations (add/update/del/
setEnable/probe/test). Mutations invalidate ['nodes'] on success, so
the list refreshes without each call awaiting a manual refresh().
NodesPage drops useWebSocket({ nodes: applyNodesEvent }) — the
WebSocket → query bridge now forwards the 'nodes' push to
setQueryData(['nodes', 'list']) once at the SPA root.
InboundsPage and the inbound form/list components import NodeRecord
from its new home next to the query hook.
* feat(frontend): migrate useAllSetting to TanStack Query
Replaces the hand-rolled fetch + dirty-tracking hook with useAllSettings
backed by useQuery + useMutation. The draft (current edits) is kept in
local state and reset whenever query.data lands. saveAll posts the
draft via a mutation; on success, invalidating ['settings'] refetches
and the useEffect resets the draft so saveDisabled flips back to true.
staleTime: Infinity prevents refetchOnWindowFocus from clobbering
in-flight edits — settings only change in response to this user's own
save.
setSpinning stays as a pass-through to a local flag so the existing
restartPanel flow in SettingsPage keeps showing its spinner.
* feat(frontend): route useInbounds fetches through TanStack Query
Rewrites useInbounds so its four server fetches (slim list, default
settings, online clients, last-online map) live in useQuery with
staleTime: Infinity. The in-place WS merge logic for traffic and
client_stats is preserved — applyTrafficEvent / applyClientStatsEvent
still mutate the locally-mirrored dbInbounds so the panel doesn't
refetch every 1-2 seconds when stats stream in.
refresh() becomes a thin invalidateQueries on the three list keys,
which mutations in the page already call after add/edit/del.
The bridge now forwards the WebSocket 'inbounds' push to
setQueryData(['inbounds', 'slim']), and InboundsPage drops its
useEffect(fetchDefaultSettings → refresh) plus the invalidate /
inbounds wiring on useWebSocket — both are owned by the bridge now.
* feat(frontend): migrate useClients to TanStack Query
Replaces 12 hand-rolled mutation callbacks and a tangle of useState +
useRef + useEffect with one useQuery (paged list) + nine useMutation
wrappers. The list query uses keepPreviousData so paging/filter
changes don't blank the table mid-fetch.
The setQuery shallow-compare logic is preserved for backward
compatibility with ClientsPage's effect that rebuilds the params on
every render. Internally setQuery only updates state when the params
actually differ — Query's queryKey equality handles the rest.
WS-driven applyTrafficEvent / applyClientStatsEvent now mutate the
query cache via setQueryData(['clients', 'list', currentParams]) so
per-second stats updates skip a full refetch. applyInvalidate is gone
from the hook — the bridge owns coarse 'clients' invalidation.
ClientsPage drops the invalidate handler from its useWebSocket
subscription; auxiliary queries (inboundOptions, defaults, onlines)
load via TanStack Query and are shared with useInbounds via the same
query keys.
* feat(frontend): route useXraySetting fetches through TanStack Query
Keeps the bidirectional xraySetting ↔ templateSettings editor sync and
the 1s dirty-tracking interval intact (those are local editor state,
not server data). All seven server calls move:
- config + traffic → useQuery on ['xray', 'config'] and
['xray', 'outboundsTraffic']
- saveAll → useMutation that invalidates the config query
- resetOutboundsTraffic → useMutation that invalidates the traffic
query
- restartXray → useMutation (fires the restart, then reads the
result string)
- resetToDefault → useMutation (fetch default config, push it into
the editor via setTemplateSettings)
The WebSocket 'outbounds' event already lands in
keys.xray.outboundsTraffic() via the bridge, so XrayPage drops its
useWebSocket({ outbounds: applyOutboundsEvent }) wiring entirely and
the hook no longer exposes applyOutboundsEvent.
A useEffect seeds xraySetting / templateSettings / tags / test URL
from query data on first fetch and on every refetch, mirroring what
the original fetchAll() did.
* fix(frontend): restore per-route document titles in the SPA
When the multi-entry MPA collapsed into a single index.html, every
route inherited the static <title>3X-UI</title> from the shared shell,
so every panel page showed "hostname - 3X-UI" instead of the original
"hostname - Overview / Clients / Inbounds / ...".
usePageTitle reads the current pathname and rewrites document.title
on every navigation, matching the titles the deleted *.html files
used to carry. Mounted in PanelLayout so it covers all panel routes
without each page having to opt in.
The startup applyDocumentTitle() call in main.tsx is gone — the hook
sets the full "hostname - PageTitle" string itself.
* feat(api-docs): expose OpenAPI spec + render Swagger UI in panel
Replaces the hand-rolled API docs UI with industry-standard tooling so
external integrations (Postman, Insomnia, openapi-generator) can
consume the panel API without parsing endpoints.js by hand.
Generator
- frontend/scripts/build-openapi.mjs: walks the existing endpoints.js
(still the single source of truth) and emits an OpenAPI 3.0.3 spec
at frontend/public/openapi.json. Handles Gin :param → {param} path
translation, body / query / path parameter splits, 200 + error
response examples, and Bearer + cookie security schemes
- npm run build now runs gen:api before vite build, so the spec is
always in sync with what's documented
Backend
- web/controller/dist.go exposes ServeOpenAPISpec which streams the
embedded dist/openapi.json with a short Cache-Control. Public
endpoint (no auth) so Postman can fetch it without first logging in
- web/web.go wires GET /panel/api/openapi.json before the auth-gated
/panel/api router
Panel
- ApiDocsPage now renders swagger-ui-react fed by the basePath-aware
openapi.json URL. Dark mode is overridden via CSS targeting the
Swagger UI internals
- CodeBlock / EndpointRow / EndpointSection are gone; the swagger-ui
vendor chunk (134 KB gzipped) only loads on this lazy route, not on
every panel page
- vite.config: vendor-swagger manualChunk keeps the new dep out of
the main vendor bundle
For Postman: import http://<panel>/panel/api/openapi.json. Everything
from /login + /panel/api/* shows up with auth, params, and examples.
* style(api-docs): dark/ultra theme for Swagger UI
Override every visual surface Swagger does not theme on its own:
opblocks, tables, model boxes, form inputs, code blocks, modals,
Servers dropdown, per-endpoint padlocks and expand chevrons. Replaces
Swagger's default light-arrow chevron on selects with a light-fill SVG
positioned at the corner so the dark background-color is visible.
Also disables deepLinking to silence the noisy v4 underscore warning;
not used in our panel.
This commit is contained in:
Sanaei
@@ -8,11 +8,28 @@
|
||||
.api-docs-page.is-dark {
|
||||
--bg-page: #1a1b1f;
|
||||
--bg-card: #23252b;
|
||||
--sw-bg: #1f2026;
|
||||
--sw-bg-soft: #25272e;
|
||||
--sw-bg-input: #15161a;
|
||||
--sw-bg-code: #0d0e12;
|
||||
--sw-border: rgba(255, 255, 255, 0.08);
|
||||
--sw-border-strong: rgba(255, 255, 255, 0.15);
|
||||
--sw-text: rgba(255, 255, 255, 0.88);
|
||||
--sw-text-muted: rgba(255, 255, 255, 0.6);
|
||||
--sw-text-dim: rgba(255, 255, 255, 0.45);
|
||||
--sw-accent: #58a6ff;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark.is-ultra {
|
||||
--bg-page: #000;
|
||||
--bg-card: #101013;
|
||||
--sw-bg: #0a0a0d;
|
||||
--sw-bg-soft: #131316;
|
||||
--sw-bg-input: #050507;
|
||||
--sw-bg-code: #000;
|
||||
--sw-border: rgba(255, 255, 255, 0.06);
|
||||
--sw-border-strong: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.api-docs-page .content-shell {
|
||||
@@ -20,273 +37,396 @@
|
||||
}
|
||||
|
||||
.api-docs-page .content-area {
|
||||
padding: 24px;
|
||||
padding: 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.api-docs-page .content-area {
|
||||
padding: 16px 12px 12px;
|
||||
padding-top: 64px;
|
||||
padding: 8px;
|
||||
padding-top: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-wrapper {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.docs-header {
|
||||
margin-bottom: 20px;
|
||||
padding: 24px;
|
||||
.api-docs-page .docs-wrapper {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid rgba(128, 128, 128, 0.12);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.docs-title {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 8px;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.docs-lead {
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
line-height: 1.65;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.docs-lead code,
|
||||
.token-hint code {
|
||||
background: rgba(128, 128, 128, 0.12);
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.token-card,
|
||||
.curl-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.token-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.token-card-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.token-hint {
|
||||
margin: 10px 0 0;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.match-count {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toc-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 8px 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid rgba(128, 128, 128, 0.12);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid rgba(128, 128, 128, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toc-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
padding-top: 3px;
|
||||
flex-shrink: 0;
|
||||
.api-docs-page .swagger-ui {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.toc-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
/* ──────────────────────────────────────────────────────────────────
|
||||
Dark mode — Swagger UI does not ship a dark theme, so every visual
|
||||
surface needs an explicit override. Method-color chips (GET / POST /
|
||||
…) are left untouched because they carry meaning at a glance.
|
||||
────────────────────────────────────────────────────────────────── */
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui,
|
||||
.api-docs-page.is-dark .swagger-ui .info .title,
|
||||
.api-docs-page.is-dark .swagger-ui .info .title small pre,
|
||||
.api-docs-page.is-dark .swagger-ui .info p,
|
||||
.api-docs-page.is-dark .swagger-ui .info li,
|
||||
.api-docs-page.is-dark .swagger-ui .info table,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-tag,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-tag small,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock .opblock-summary-path,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock .opblock-summary-path__deprecated,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock .opblock-summary-description,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-description-wrapper p,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-external-docs-wrapper p,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-title_normal p,
|
||||
.api-docs-page.is-dark .swagger-ui table thead tr td,
|
||||
.api-docs-page.is-dark .swagger-ui table thead tr th,
|
||||
.api-docs-page.is-dark .swagger-ui table tbody tr td,
|
||||
.api-docs-page.is-dark .swagger-ui .parameter__name,
|
||||
.api-docs-page.is-dark .swagger-ui .parameter__type,
|
||||
.api-docs-page.is-dark .swagger-ui .parameter__in,
|
||||
.api-docs-page.is-dark .swagger-ui .parameter__extension,
|
||||
.api-docs-page.is-dark .swagger-ui .response-col_status,
|
||||
.api-docs-page.is-dark .swagger-ui .response-col_description,
|
||||
.api-docs-page.is-dark .swagger-ui .response-col_links,
|
||||
.api-docs-page.is-dark .swagger-ui .responses-inner h4,
|
||||
.api-docs-page.is-dark .swagger-ui .responses-inner h5,
|
||||
.api-docs-page.is-dark .swagger-ui label,
|
||||
.api-docs-page.is-dark .swagger-ui .tab li,
|
||||
.api-docs-page.is-dark .swagger-ui .tab li button,
|
||||
.api-docs-page.is-dark .swagger-ui .markdown,
|
||||
.api-docs-page.is-dark .swagger-ui .markdown p,
|
||||
.api-docs-page.is-dark .swagger-ui .markdown li,
|
||||
.api-docs-page.is-dark .swagger-ui .renderedmarkdown p,
|
||||
.api-docs-page.is-dark .swagger-ui .renderedmarkdown li,
|
||||
.api-docs-page.is-dark .swagger-ui .model-title,
|
||||
.api-docs-page.is-dark .swagger-ui .model,
|
||||
.api-docs-page.is-dark .swagger-ui .model-toggle:after,
|
||||
.api-docs-page.is-dark .swagger-ui section.models h4,
|
||||
.api-docs-page.is-dark .swagger-ui section.models h5,
|
||||
.api-docs-page.is-dark .swagger-ui .auth-container h4,
|
||||
.api-docs-page.is-dark .swagger-ui .auth-container h6,
|
||||
.api-docs-page.is-dark .swagger-ui .scopes h2,
|
||||
.api-docs-page.is-dark .swagger-ui .dialog-ux .modal-ux-header h3,
|
||||
.api-docs-page.is-dark .swagger-ui .dialog-ux .modal-ux-content h4,
|
||||
.api-docs-page.is-dark .swagger-ui .dialog-ux .modal-ux-content p,
|
||||
.api-docs-page.is-dark .swagger-ui .servers-title {
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
.toc-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12.5px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
background: rgba(128, 128, 128, 0.06);
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-tag small,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-summary-description,
|
||||
.api-docs-page.is-dark .swagger-ui .parameter__in,
|
||||
.api-docs-page.is-dark .swagger-ui .parameter__type,
|
||||
.api-docs-page.is-dark .swagger-ui .parameter__extension,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-title_normal small,
|
||||
.api-docs-page.is-dark .swagger-ui .servers > label,
|
||||
.api-docs-page.is-dark .swagger-ui .servers > label span,
|
||||
.api-docs-page.is-dark .swagger-ui .response-control-media-type__accept-message {
|
||||
color: var(--sw-text-muted);
|
||||
}
|
||||
|
||||
.toc-link:hover {
|
||||
background: rgba(22, 119, 255, 0.08);
|
||||
color: #1677ff;
|
||||
border-color: rgba(22, 119, 255, 0.2);
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-tag {
|
||||
border-bottom-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.toc-link.active {
|
||||
background: rgba(22, 119, 255, 0.12);
|
||||
color: #1677ff;
|
||||
border-color: rgba(22, 119, 255, 0.3);
|
||||
font-weight: 600;
|
||||
.api-docs-page.is-dark .swagger-ui .opblock {
|
||||
background: var(--sw-bg-soft);
|
||||
border-color: var(--sw-border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.toc-icon {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
.api-docs-page.is-dark .swagger-ui .opblock .opblock-section-header {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
box-shadow: inset 0 -1px 0 var(--sw-border);
|
||||
}
|
||||
|
||||
.toc-text {
|
||||
font-size: 12.5px;
|
||||
.api-docs-page.is-dark .swagger-ui .opblock .opblock-section-header h4,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock .opblock-section-header label {
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
.toc-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: 9px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
background: rgba(22, 119, 255, 0.12);
|
||||
color: #1677ff;
|
||||
line-height: 1;
|
||||
.api-docs-page.is-dark .swagger-ui .opblock .opblock-summary {
|
||||
border-bottom-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.toc-link.active .toc-badge {
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.dark .docs-title {
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-body pre.microlight,
|
||||
.api-docs-page.is-dark .swagger-ui .highlight-code,
|
||||
.api-docs-page.is-dark .swagger-ui .microlight,
|
||||
.api-docs-page.is-dark .swagger-ui pre.example,
|
||||
.api-docs-page.is-dark .swagger-ui code {
|
||||
background: var(--sw-bg-code);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
html[data-theme='ultra-dark'] .docs-title {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
body.dark .docs-header {
|
||||
background: #252526;
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html[data-theme='ultra-dark'] .docs-header {
|
||||
background: #0a0a0a;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
body.dark .docs-lead,
|
||||
body.dark .token-hint {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
html[data-theme='ultra-dark'] .docs-lead,
|
||||
html[data-theme='ultra-dark'] .token-hint {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
body.dark .docs-lead code,
|
||||
body.dark .token-hint code {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
html[data-theme='ultra-dark'] .docs-lead code,
|
||||
html[data-theme='ultra-dark'] .token-hint code {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
body.dark .toc-nav {
|
||||
background: #252526;
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html[data-theme='ultra-dark'] .toc-nav {
|
||||
background: #0a0a0a;
|
||||
border-color: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
body.dark .toc-label {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
html[data-theme='ultra-dark'] .toc-label {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
body.dark .toc-link {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
.api-docs-page.is-dark .swagger-ui .highlight-code .copy-to-clipboard {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
html[data-theme='ultra-dark'] .toc-link {
|
||||
.api-docs-page.is-dark .swagger-ui input[type=text],
|
||||
.api-docs-page.is-dark .swagger-ui input[type=password],
|
||||
.api-docs-page.is-dark .swagger-ui input[type=search],
|
||||
.api-docs-page.is-dark .swagger-ui input[type=email],
|
||||
.api-docs-page.is-dark .swagger-ui input[type=file],
|
||||
.api-docs-page.is-dark .swagger-ui textarea {
|
||||
background: var(--sw-bg-input);
|
||||
color: var(--sw-text);
|
||||
border-color: var(--sw-border-strong);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui select {
|
||||
background-color: var(--sw-bg-input);
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23b7bcbf' d='M13.418 7.859a.695.695 0 0 1 .978 0 .68.68 0 0 1 0 .969l-3.908 3.83a.697.697 0 0 1-.979 0l-3.908-3.83a.68.68 0 0 1 0-.969.695.695 0 0 1 .978 0L10 11z'/></svg>");
|
||||
background-position: right 10px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px;
|
||||
color: var(--sw-text);
|
||||
border-color: var(--sw-border-strong);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui select option {
|
||||
background-color: var(--sw-bg-input);
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui textarea {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui input::placeholder,
|
||||
.api-docs-page.is-dark .swagger-ui textarea::placeholder {
|
||||
color: var(--sw-text-dim);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .scheme-container {
|
||||
background: var(--sw-bg-soft);
|
||||
box-shadow: inset 0 -1px 0 var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .auth-wrapper .authorize {
|
||||
color: var(--sw-text);
|
||||
border-color: var(--sw-border-strong);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .auth-wrapper .authorize svg {
|
||||
fill: var(--sw-text);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .model-box,
|
||||
.api-docs-page.is-dark .swagger-ui section.models {
|
||||
background: var(--sw-bg-soft);
|
||||
border-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui section.models.is-open h4 {
|
||||
border-bottom-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui section.models .model-container {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui section.models .model-container:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
body.dark .toc-link:hover {
|
||||
background: rgba(88, 166, 255, 0.12);
|
||||
color: #58a6ff;
|
||||
border-color: rgba(88, 166, 255, 0.25);
|
||||
.api-docs-page.is-dark .swagger-ui .prop-type,
|
||||
.api-docs-page.is-dark .swagger-ui .prop-format {
|
||||
color: var(--sw-accent);
|
||||
}
|
||||
|
||||
body.dark .toc-link.active {
|
||||
background: rgba(88, 166, 255, 0.15);
|
||||
color: #58a6ff;
|
||||
border-color: rgba(88, 166, 255, 0.35);
|
||||
.api-docs-page.is-dark .swagger-ui .property.primitive {
|
||||
color: var(--sw-text-muted);
|
||||
}
|
||||
|
||||
body.dark .toc-badge {
|
||||
background: rgba(88, 166, 255, 0.15);
|
||||
color: #58a6ff;
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-title_normal h4 {
|
||||
color: var(--sw-text);
|
||||
border-bottom-color: var(--sw-border);
|
||||
}
|
||||
|
||||
body.dark .toc-link.active .toc-badge {
|
||||
background: #58a6ff;
|
||||
.api-docs-page.is-dark .swagger-ui table.parameters,
|
||||
.api-docs-page.is-dark .swagger-ui table.responses-table,
|
||||
.api-docs-page.is-dark .swagger-ui table thead tr {
|
||||
border-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui table tbody tr td {
|
||||
border-bottom-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui table thead tr {
|
||||
border-bottom-color: var(--sw-border-strong);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .response-col_status {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--sw-text);
|
||||
border-color: var(--sw-border-strong);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn.execute {
|
||||
background: var(--sw-accent);
|
||||
color: #0d1117;
|
||||
border-color: var(--sw-accent);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn.execute:hover {
|
||||
background: #79b9ff;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn.authorize {
|
||||
color: #52c41a;
|
||||
border-color: rgba(82, 196, 26, 0.4);
|
||||
background: rgba(82, 196, 26, 0.08);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn.authorize svg {
|
||||
fill: #52c41a;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .authorization__btn svg,
|
||||
.api-docs-page.is-dark .swagger-ui .expand-operation svg,
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-control-arrow svg {
|
||||
fill: var(--sw-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .authorization__btn .locked,
|
||||
.api-docs-page.is-dark .swagger-ui .authorization__btn .unlocked {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn.cancel {
|
||||
color: #ff7875;
|
||||
border-color: rgba(255, 120, 117, 0.4);
|
||||
background: rgba(255, 120, 117, 0.08);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn.btn-clear,
|
||||
.api-docs-page.is-dark .swagger-ui .btn-clear,
|
||||
.api-docs-page.is-dark .swagger-ui .try-out__btn {
|
||||
color: var(--sw-text);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border-color: var(--sw-border-strong);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .btn.btn-clear:hover,
|
||||
.api-docs-page.is-dark .swagger-ui .btn-clear:hover,
|
||||
.api-docs-page.is-dark .swagger-ui .try-out__btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .filter .operation-filter-input {
|
||||
background: var(--sw-bg-input);
|
||||
border-color: var(--sw-border-strong);
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .dialog-ux .modal-ux {
|
||||
background: var(--sw-bg);
|
||||
border-color: var(--sw-border-strong);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .dialog-ux .modal-ux-header {
|
||||
border-bottom-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .dialog-ux .modal-ux-content {
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .arrow,
|
||||
.api-docs-page.is-dark .swagger-ui svg.arrow {
|
||||
fill: var(--sw-text-muted);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-summary-control:focus {
|
||||
outline-color: var(--sw-accent);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui a,
|
||||
.api-docs-page.is-dark .swagger-ui .info a,
|
||||
.api-docs-page.is-dark .swagger-ui .info hgroup.main a,
|
||||
.api-docs-page.is-dark .swagger-ui .info .base-url,
|
||||
.api-docs-page.is-dark .swagger-ui .info__contact a,
|
||||
.api-docs-page.is-dark .swagger-ui .info__license a,
|
||||
.api-docs-page.is-dark .swagger-ui .info__tos a {
|
||||
color: var(--sw-accent);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui a:hover {
|
||||
color: #79b9ff;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .info .title small {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .info .title small pre {
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .response-control-media-type--accept-controller select {
|
||||
border-color: rgba(82, 196, 26, 0.5);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .loading-container .loading:before {
|
||||
border-color: var(--sw-accent) transparent transparent;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .json-schema-form-item input,
|
||||
.api-docs-page.is-dark .swagger-ui .json-schema-form-item select {
|
||||
background: var(--sw-bg-input);
|
||||
color: var(--sw-text);
|
||||
border-color: var(--sw-border-strong);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .topbar {
|
||||
background: var(--sw-bg);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .information-container {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .opblock-summary-method {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .auth-btn-wrapper {
|
||||
border-top-color: var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .servers .computed-url,
|
||||
.api-docs-page.is-dark .swagger-ui .computed-url {
|
||||
background: var(--sw-bg-code);
|
||||
color: var(--sw-text);
|
||||
border: 1px solid var(--sw-border);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .computed-url code,
|
||||
.api-docs-page.is-dark .swagger-ui .servers .computed-url code {
|
||||
background: transparent;
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .errors-wrapper {
|
||||
background: rgba(255, 77, 79, 0.08);
|
||||
border-color: rgba(255, 77, 79, 0.3);
|
||||
}
|
||||
|
||||
.api-docs-page.is-dark .swagger-ui .errors-wrapper .errors h4,
|
||||
.api-docs-page.is-dark .swagger-ui .errors-wrapper .errors small {
|
||||
color: var(--sw-text);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user