Skip to content

Commit 302ca19

Browse files
dineshpintodineshpinto
committed
fix(src): scope openapi, update footer and social links
1 parent 999dcdd commit 302ca19

File tree

9 files changed

+472
-466
lines changed

9 files changed

+472
-466
lines changed

‎src/components/OpenApiDoc/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
44
import { useColorMode } from "@docusaurus/theme-common";
55
import "swagger-ui-react/swagger-ui.css";
66

7+
import styles from "./styles.module.css";
8+
79
const SwaggerUI = React.lazy(() => import("swagger-ui-react"));
810

911
export default function OpenApiDoc({ url }: { url: string }) {
1012
const { colorMode } = useColorMode();
1113
const resolvedUrl = useBaseUrl(url);
1214

1315
return (
14-
<div className="swagger-container" data-theme={colorMode}>
16+
<div className={styles.root} data-theme={colorMode}>
1517
<BrowserOnly fallback={<div>Loading API docs…</div>}>
1618
{() => (
1719
<Suspense fallback={<div>Loading API docs…</div>}>

‎src/components/OpenApiDoc/styles.module.css‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
.root {
2+
width: 100%;
3+
}
4+
5+
.root :global(.swagger-ui) {
6+
font-family: var(--ifm-font-family-base);
7+
}
8+
9+
/* ----------------------------
10+
Theme-scoped typography
11+
----------------------------- */
12+
13+
.root[data-theme="dark"] :global(.swagger-ui) {
14+
color: var(--ifm-swagger-heading-light);
15+
}
16+
17+
.root[data-theme="light"] :global(.swagger-ui) {
18+
color: var(--ifm-swagger-heading-dark);
19+
}
20+
21+
.root[data-theme="dark"] :global(.swagger-ui .info .title),
22+
.root[data-theme="dark"] :global(.swagger-ui .opblock-tag),
23+
.root[data-theme="dark"]
24+
:global(.swagger-ui .opblock .opblock-section-header h4),
25+
.root[data-theme="dark"] :global(.swagger-ui .parameter__name),
26+
.root[data-theme="dark"] :global(.swagger-ui .response-col_status),
27+
.root[data-theme="dark"] :global(.swagger-ui .response-col_links),
28+
.root[data-theme="dark"] :global(.swagger-ui .model-title),
29+
.root[data-theme="dark"] :global(.swagger-ui section.models h4 span),
30+
.root[data-theme="dark"] :global(.swagger-ui .model) {
31+
color: var(--ifm-swagger-heading-light);
32+
}
33+
34+
.root[data-theme="light"] :global(.swagger-ui .info .title),
35+
.root[data-theme="light"] :global(.swagger-ui .opblock-tag),
36+
.root[data-theme="light"]
37+
:global(.swagger-ui .opblock .opblock-section-header h4),
38+
.root[data-theme="light"] :global(.swagger-ui .parameter__name),
39+
.root[data-theme="light"] :global(.swagger-ui .response-col_status),
40+
.root[data-theme="light"] :global(.swagger-ui .response-col_links),
41+
.root[data-theme="light"] :global(.swagger-ui .model-title),
42+
.root[data-theme="light"] :global(.swagger-ui section.models h4 span),
43+
.root[data-theme="light"] :global(.swagger-ui .model) {
44+
color: var(--ifm-swagger-heading-dark);
45+
}
46+
47+
.root[data-theme="dark"] :global(.swagger-ui .info p),
48+
.root[data-theme="dark"] :global(.swagger-ui .opblock-description-wrapper p) {
49+
color: var(--ifm-swagger-heading-light) !important;
50+
}
51+
52+
.root[data-theme="light"] :global(.swagger-ui .info p),
53+
.root[data-theme="light"] :global(.swagger-ui .opblock-description-wrapper p) {
54+
color: var(--ifm-swagger-heading-dark) !important;
55+
}
56+
57+
/* ----------------------------
58+
Scheme container
59+
----------------------------- */
60+
61+
.root[data-theme="dark"] :global(.swagger-ui .scheme-container) {
62+
background-color: #000;
63+
box-shadow: none;
64+
}
65+
66+
.root[data-theme="light"] :global(.swagger-ui .scheme-container) {
67+
background-color: #fff;
68+
box-shadow: none;
69+
}
70+
71+
/* ----------------------------
72+
Section headers
73+
----------------------------- */
74+
75+
.root :global(.swagger-ui .opblock .opblock-section-header) {
76+
background: none !important;
77+
}
78+
79+
/* ----------------------------
80+
Tables
81+
----------------------------- */
82+
83+
.root[data-theme="dark"] :global(.swagger-ui table thead tr th),
84+
.root[data-theme="dark"] :global(.swagger-ui table thead tr td) {
85+
color: var(--ifm-swagger-heading-light);
86+
}
87+
88+
.root[data-theme="light"] :global(.swagger-ui table thead tr th),
89+
.root[data-theme="light"] :global(.swagger-ui table thead tr td) {
90+
color: var(--ifm-swagger-heading-dark);
91+
}
92+
93+
.root :global(.swagger-ui table thead tr th),
94+
.root :global(.swagger-ui table thead tr td) {
95+
padding: 10px !important;
96+
}
97+
98+
.root :global(.swagger-ui table tbody tr td) {
99+
padding: 10px 10px 0 !important;
100+
}
101+
102+
/* ----------------------------
103+
Links + icons
104+
----------------------------- */
105+
106+
.root[data-theme="dark"] :global(.swagger-ui a.nostyle),
107+
.root[data-theme="dark"] :global(.swagger-ui a.nostyle:visited) {
108+
color: var(--ifm-swagger-heading-light);
109+
}
110+
111+
.root[data-theme="light"] :global(.swagger-ui a.nostyle),
112+
.root[data-theme="light"] :global(.swagger-ui a.nostyle:visited) {
113+
color: var(--ifm-swagger-heading-dark);
114+
}
115+
116+
.root[data-theme="dark"] :global(.swagger-ui svg:not(:root)),
117+
.root[data-theme="dark"] :global(.swagger-ui .authorization__btn .unlocked) {
118+
fill: var(--ifm-swagger-heading-light);
119+
}
120+
121+
.root[data-theme="light"] :global(.swagger-ui svg:not(:root)),
122+
.root[data-theme="light"] :global(.swagger-ui .authorization__btn .unlocked) {
123+
fill: var(--ifm-swagger-heading-dark);
124+
}
125+
126+
/* ----------------------------
127+
Models section
128+
----------------------------- */
129+
130+
.root[data-theme="dark"] :global(.swagger-ui section.models .model-container) {
131+
background: var(--ifm-swagger-heading-dark);
132+
}
133+
134+
.root[data-theme="dark"]
135+
:global(.swagger-ui section.models .model-container:hover) {
136+
background: #181a1d;
137+
}
138+
139+
.root :global(.swagger-ui .info .title small pre) {
140+
background: none;
141+
font-weight: 700;
142+
}
143+
144+
.root[data-theme="dark"] :global(.swagger-ui .model-toggle:after) {
145+
filter: invert(1) grayscale(100%) contrast(100%);
146+
}
147+
148+
.root[data-theme="light"] :global(.swagger-ui .model-toggle:after) {
149+
filter: invert(0) grayscale(100%) contrast(100%);
150+
}
151+
152+
/* ----------------------------
153+
Inputs (ensure readable text)
154+
----------------------------- */
155+
156+
.root :global(.swagger-ui input[type="email"]),
157+
.root :global(.swagger-ui input[type="file"]),
158+
.root :global(.swagger-ui input[type="password"]),
159+
.root :global(.swagger-ui input[type="search"]),
160+
.root :global(.swagger-ui input[type="text"]),
161+
.root :global(.swagger-ui textarea) {
162+
color: var(--ifm-swagger-heading-dark) !important;
163+
}

‎src/css/custom.css‎

Lines changed: 1 addition & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ div[class^="announcementBar"] {
224224
}
225225

226226
.header-github-link:hover::before {
227-
background-color: var(--ifm-navbar-link-hover-color);
227+
background-color: var(--ifm-color-primary-light);
228228
}
229229

230230
.github-logo-sidebar {
@@ -508,204 +508,3 @@ tr:last-child td {
508508
padding: 6px 10px;
509509
}
510510
}
511-
512-
/* --- Swagger UI Customization --- */
513-
/* NOTE: Swagger UI styles can be fragile. `!important` might be necessary in some cases */
514-
/* due to high specificity or inline styles in Swagger itself. Minimize where possible. */
515-
516-
[data-theme="dark"] .swagger-ui {
517-
color: var(--ifm-swagger-heading-light);
518-
}
519-
520-
[data-theme="light"] .swagger-ui {
521-
color: var(--ifm-swagger-heading-dark);
522-
}
523-
524-
[data-theme="dark"] .swagger-ui .info .title {
525-
color: var(--ifm-swagger-heading-light);
526-
}
527-
528-
[data-theme="light"] .swagger-ui .info .title {
529-
color: var(--ifm-swagger-heading-dark);
530-
}
531-
532-
[data-theme="dark"] .swagger-ui .info p {
533-
color: var(--ifm-swagger-heading-light) !important;
534-
}
535-
536-
[data-theme="light"] .swagger-ui .info p {
537-
color: var(--ifm-swagger-heading-dark) !important;
538-
}
539-
540-
[data-theme="dark"] .swagger-ui .scheme-container {
541-
background-color: black;
542-
box-shadow: none;
543-
}
544-
545-
[data-theme="light"] .swagger-ui .scheme-container {
546-
background-color: white;
547-
box-shadow: none;
548-
}
549-
550-
[data-theme="dark"] .swagger-ui .opblock-tag {
551-
color: var(--ifm-swagger-heading-light);
552-
}
553-
554-
[data-theme="light"] .swagger-ui .opblock-tag {
555-
color: var(--ifm-swagger-heading-dark);
556-
}
557-
558-
[data-theme="dark"] .swagger-ui .opblock-description-wrapper p {
559-
color: var(--ifm-swagger-heading-light);
560-
}
561-
562-
[data-theme="light"] .swagger-ui .opblock-description-wrapper p {
563-
color: var(--ifm-swagger-heading-dark);
564-
}
565-
566-
.swagger-ui .opblock .opblock-section-header {
567-
background: none !important;
568-
}
569-
570-
[data-theme="dark"] .swagger-ui .opblock .opblock-section-header h4 {
571-
color: var(--ifm-swagger-heading-light);
572-
}
573-
574-
[data-theme="light"] .swagger-ui .opblock .opblock-section-header h4 {
575-
color: var(--ifm-swagger-heading-dark);
576-
}
577-
578-
[data-theme="dark"] .swagger-ui table thead tr th {
579-
color: var(--ifm-swagger-heading-light);
580-
}
581-
582-
[data-theme="light"] .swagger-ui table thead tr th {
583-
color: var(--ifm-swagger-heading-dark);
584-
}
585-
586-
[data-theme="dark"] .swagger-ui .parameter__name {
587-
color: var(--ifm-swagger-heading-light);
588-
}
589-
590-
[data-theme="light"] .swagger-ui .parameter__name {
591-
color: var(--ifm-swagger-heading-dark);
592-
}
593-
594-
[data-theme="dark"] .swagger-ui table thead tr td,
595-
.swagger-ui table thead tr th {
596-
color: var(--ifm-swagger-heading-light);
597-
}
598-
599-
[data-theme="light"] .swagger-ui table thead tr td,
600-
.swagger-ui table thead tr th {
601-
color: var(--ifm-swagger-heading-dark);
602-
}
603-
604-
[data-theme="dark"] .swagger-ui .response-col_status {
605-
color: var(--ifm-swagger-heading-light);
606-
}
607-
608-
[data-theme="light"] .swagger-ui .response-col_status {
609-
color: var(--ifm-swagger-heading-dark);
610-
}
611-
612-
[data-theme="dark"] .swagger-ui .response-col_links {
613-
color: var(--ifm-swagger-heading-light);
614-
}
615-
616-
[data-theme="light"] .swagger-ui .response-col_links {
617-
color: var(--ifm-swagger-heading-dark);
618-
}
619-
620-
[data-theme="dark"] .swagger-ui a.nostyle,
621-
.swagger-ui a.nostyle:visited {
622-
color: var(--ifm-swagger-heading-light);
623-
}
624-
625-
[data-theme="light"] .swagger-ui a.nostyle,
626-
.swagger-ui a.nostyle:visited {
627-
color: var(--ifm-swagger-heading-dark);
628-
}
629-
630-
[data-theme="dark"] .swagger-ui svg:not(:root) {
631-
fill: var(--ifm-swagger-heading-light);
632-
}
633-
634-
[data-theme="light"] .swagger-ui svg:not(:root) {
635-
fill: var(--ifm-swagger-heading-dark);
636-
}
637-
638-
[data-theme="dark"] .swagger-ui .authorization__btn .unlocked {
639-
fill: var(--ifm-swagger-heading-light);
640-
}
641-
642-
[data-theme="light"] .swagger-ui .authorization__btn .unlocked {
643-
fill: var(--ifm-swagger-heading-dark);
644-
}
645-
646-
[data-theme="dark"] .swagger-ui section.models .model-container {
647-
background: var(--ifm-swagger-heading-dark);
648-
}
649-
650-
[data-theme="dark"] .swagger-ui section.models .model-container:hover {
651-
background: #181a1d;
652-
}
653-
654-
.swagger-ui .info .title small pre {
655-
background: none;
656-
font-weight: bold;
657-
}
658-
659-
[data-theme="dark"] .swagger-ui section.models h4 span {
660-
color: var(--ifm-swagger-heading-light);
661-
}
662-
663-
[data-theme="light"] .swagger-ui section.models h4 span {
664-
color: var(--ifm-swagger-heading-dark);
665-
}
666-
667-
[data-theme="dark"] .swagger-ui .model-title {
668-
color: var(--ifm-swagger-heading-light);
669-
}
670-
671-
[data-theme="light"] .swagger-ui .model-title {
672-
color: var(--ifm-swagger-heading-dark);
673-
}
674-
675-
.swagger-ui table thead tr td,
676-
.swagger-ui table thead tr th {
677-
padding: 10px !important;
678-
}
679-
680-
.swagger-ui table tbody tr td {
681-
padding: 10px 10px 0 !important;
682-
}
683-
684-
[data-theme="dark"] .swagger-ui .model-toggle:after {
685-
filter: invert(1) grayscale(100%) contrast(100%);
686-
}
687-
688-
[data-theme="light"] .swagger-ui .model-toggle:after {
689-
filter: invert(0) grayscale(100%) contrast(100%);
690-
}
691-
692-
[data-theme="dark"] .swagger-ui .model {
693-
color: var(--ifm-swagger-heading-light);
694-
}
695-
696-
[data-theme="light"] .swagger-ui .model {
697-
color: var(--ifm-swagger-heading-dark);
698-
}
699-
700-
[data-theme="light"] .swagger-ui input[type="text"] {
701-
color: var(--ifm-swagger-heading-dark);
702-
}
703-
704-
.swagger-ui input[type="email"],
705-
.swagger-ui input[type="file"],
706-
.swagger-ui input[type="password"],
707-
.swagger-ui input[type="search"],
708-
.swagger-ui input[type="text"],
709-
.swagger-ui textarea {
710-
color: var(--ifm-swagger-heading-dark) !important;
711-
}

0 commit comments

Comments
 (0)