Skip to content

Commit 2867ec5

Browse files
lpolishlpolish
committed
Fix CSS overrides to directly target Just the Docs classes
- Replace CSS variables with direct class overrides - Target actual Just the Docs CSS classes (.site-header, .nav-list-link, etc.) - Apply Genko colors with important to override remote theme - Update theme selector styles to use direct colors instead of variables
1 parent 3e9688f commit 2867ec5

File tree

1 file changed

+187
-62
lines changed

1 file changed

+187
-62
lines changed

‎assets/css/custom.css‎

Lines changed: 187 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,208 @@
11
/* Custom theme colors to match Next.js project styling */
22
/* Based on the Genkō healthcare platform color scheme */
33

4-
/* Light mode colors (default) */
5-
:root {
6-
--color-primary: #3b82f6 !important; /* Vibrant blue (220 100% 50%) */
7-
--color-primary-dark: #2563eb !important; /* Darker blue for hover states */
8-
--color-secondary: #a855f7 !important; /* Vibrant purple (280 80% 60%) */
9-
--color-accent: #14b8a6 !important; /* Vibrant teal (175 100% 50%) */
10-
--color-background: #ffffff !important; /* White */
11-
--color-foreground: #0f172a !important; /* Dark gray (222 60% 10%) */
12-
--color-muted: #f1f5f9 !important; /* Light gray (210 40% 96%) */
13-
--color-border: #e2e8f0 !important; /* Light border (210 40% 90%) */
14-
--color-code-background: #0f172a !important; /* Dark background for code blocks */
15-
--color-code-foreground: #f1f5f9 !important; /* Light text for code */
16-
}
17-
18-
/* Dark mode colors */
19-
[data-theme="dark"] {
20-
--color-primary: #60a5fa !important; /* Bright blue (220 100% 60%) */
21-
--color-primary-dark: #3b82f6 !important; /* Darker blue for hover states */
22-
--color-secondary: #a78bfa !important; /* Bright purple (280 80% 50%) */
23-
--color-accent: #2dd4bf !important; /* More subdued teal (175 70% 35%) */
24-
--color-background: #0a0a0a !important; /* Deep purple-black (240 50% 8%) */
25-
--color-foreground: #f1f5f9 !important; /* Light gray (210 40% 98%) */
26-
--color-muted: #1e293b !important; /* Dark muted (240 30% 18%) */
27-
--color-border: #334155 !important; /* Dark border (240 30% 25%) */
28-
--color-code-background: #0f172a !important; /* Keep code blocks dark */
29-
--color-code-foreground: #f1f5f9 !important; /* Light text for code */
30-
}
31-
32-
/* Force apply colors to Just the Docs elements */
4+
/* Direct class overrides for Just the Docs theme */
5+
6+
/* Body and main background */
337
body {
34-
background-color: var(--color-background) !important;
35-
color: var(--color-foreground) !important;
8+
background-color: #ffffff !important;
9+
color: #0f172a !important;
10+
}
11+
12+
[data-theme="dark"] body {
13+
background-color: #0a0a0a !important;
14+
color: #f1f5f9 !important;
3615
}
3716

17+
/* Site header */
3818
.site-header {
39-
background-color: var(--color-background) !important;
40-
border-bottom: 1px solid var(--color-border) !important;
19+
background-color: #ffffff !important;
20+
border-bottom: 1px solid #e2e8f0 !important;
21+
}
22+
23+
[data-theme="dark"] .site-header {
24+
background-color: #0a0a0a !important;
25+
border-bottom-color: #334155 !important;
4126
}
4227

28+
/* Navigation sidebar */
4329
.site-nav {
44-
background-color: var(--color-muted) !important;
30+
background-color: #f1f5f9 !important;
31+
}
32+
33+
[data-theme="dark"] .site-nav {
34+
background-color: #1e293b !important;
35+
}
36+
37+
/* Navigation links */
38+
.nav-list-link {
39+
color: #0f172a !important;
4540
}
4641

47-
.site-nav a {
48-
color: var(--color-foreground) !important;
42+
.nav-list-link:hover {
43+
color: #3b82f6 !important;
4944
}
5045

51-
.site-nav a:hover {
52-
color: var(--color-primary) !important;
46+
[data-theme="dark"] .nav-list-link {
47+
color: #f1f5f9 !important;
5348
}
5449

50+
[data-theme="dark"] .nav-list-link:hover {
51+
color: #60a5fa !important;
52+
}
53+
54+
/* Main content area */
5555
.main-content {
56-
background-color: var(--color-background) !important;
56+
background-color: #ffffff !important;
5757
}
5858

59-
h1, h2, h3, h4, h5, h6 {
60-
color: var(--color-foreground) !important;
59+
[data-theme="dark"] .main-content {
60+
background-color: #0a0a0a !important;
6161
}
6262

63+
/* Links */
6364
a {
64-
color: var(--color-primary) !important;
65+
color: #3b82f6 !important;
6566
}
6667

6768
a:hover {
68-
color: var(--color-primary-dark) !important;
69+
color: #2563eb !important;
6970
}
7071

71-
.btn-primary {
72-
background-color: var(--color-primary) !important;
73-
border-color: var(--color-primary) !important;
72+
[data-theme="dark"] a {
73+
color: #60a5fa !important;
7474
}
7575

76-
.btn-primary:hover {
77-
background-color: var(--color-primary-dark) !important;
78-
border-color: var(--color-primary-dark) !important;
76+
[data-theme="dark"] a:hover {
77+
color: #3b82f6 !important;
7978
}
8079

80+
/* Headings */
81+
h1, h2, h3, h4, h5, h6 {
82+
color: #0f172a !important;
83+
}
84+
85+
[data-theme="dark"] h1,
86+
[data-theme="dark"] h2,
87+
[data-theme="dark"] h3,
88+
[data-theme="dark"] h4,
89+
[data-theme="dark"] h5,
90+
[data-theme="dark"] h6 {
91+
color: #f1f5f9 !important;
92+
}
93+
94+
/* Code blocks */
8195
code {
82-
background-color: var(--color-muted) !important;
83-
color: var(--color-foreground) !important;
96+
background-color: #f1f5f9 !important;
97+
color: #0f172a !important;
8498
}
8599

86100
pre {
87-
background-color: var(--color-code-background) !important;
88-
color: var(--color-code-foreground) !important;
101+
background-color: #0f172a !important;
102+
color: #f1f5f9 !important;
103+
}
104+
105+
[data-theme="dark"] code {
106+
background-color: #1e293b !important;
107+
color: #f1f5f9 !important;
108+
}
109+
110+
[data-theme="dark"] pre {
111+
background-color: #0f172a !important;
112+
color: #f1f5f9 !important;
89113
}
90114

115+
/* Search input */
91116
.search-input {
92-
background-color: var(--color-background) !important;
93-
border: 1px solid var(--color-border) !important;
94-
color: var(--color-foreground) !important;
117+
background-color: #ffffff !important;
118+
border: 1px solid #e2e8f0 !important;
119+
color: #0f172a !important;
95120
}
96121

97122
.search-input:focus {
98-
border-color: var(--color-primary) !important;
123+
border-color: #3b82f6 !important;
124+
}
125+
126+
[data-theme="dark"] .search-input {
127+
background-color: #0a0a0a !important;
128+
border-color: #334155 !important;
129+
color: #f1f5f9 !important;
130+
}
131+
132+
[data-theme="dark"] .search-input:focus {
133+
border-color: #60a5fa !important;
134+
}
135+
136+
/* Buttons */
137+
.btn-primary {
138+
background-color: #3b82f6 !important;
139+
color: #ffffff !important;
140+
}
141+
142+
.btn-primary:hover {
143+
background-color: #2563eb !important;
144+
}
145+
146+
[data-theme="dark"] .btn-primary {
147+
background-color: #60a5fa !important;
148+
}
149+
150+
[data-theme="dark"] .btn-primary:hover {
151+
background-color: #3b82f6 !important;
152+
}
153+
154+
/* Tables */
155+
table {
156+
background-color: #ffffff !important;
157+
border-color: #e2e8f0 !important;
158+
}
159+
160+
table th,
161+
table td {
162+
border-color: #e2e8f0 !important;
163+
}
164+
165+
[data-theme="dark"] table {
166+
background-color: #0a0a0a !important;
167+
border-color: #334155 !important;
168+
}
169+
170+
[data-theme="dark"] table th,
171+
[data-theme="dark"] table td {
172+
border-color: #334155 !important;
173+
}
174+
175+
/* Callouts */
176+
.callout {
177+
border-left-color: #3b82f6 !important;
178+
}
179+
180+
.callout-important {
181+
border-left-color: #a855f7 !important;
182+
}
183+
184+
.callout-warning {
185+
border-left-color: #f59e0b !important;
186+
}
187+
188+
.callout-danger {
189+
border-left-color: #ef4444 !important;
190+
}
191+
192+
[data-theme="dark"] .callout {
193+
border-left-color: #60a5fa !important;
194+
}
195+
196+
[data-theme="dark"] .callout-important {
197+
border-left-color: #a78bfa !important;
198+
}
199+
200+
[data-theme="dark"] .callout-warning {
201+
border-left-color: #fbbf24 !important;
202+
}
203+
204+
[data-theme="dark"] .callout-danger {
205+
border-left-color: #f87171 !important;
99206
}
100207

101208
/* Theme selector styles */
@@ -104,13 +211,18 @@ pre {
104211
top: 20px !important;
105212
right: 20px !important;
106213
z-index: 1000 !important;
107-
background: var(--color-background) !important;
108-
border: 1px solid var(--color-border) !important;
214+
background: #ffffff !important;
215+
border: 1px solid #e2e8f0 !important;
109216
border-radius: 8px !important;
110217
padding: 8px !important;
111218
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
112219
}
113220

221+
[data-theme="dark"] .theme-selector {
222+
background: #0a0a0a !important;
223+
border-color: #334155 !important;
224+
}
225+
114226
.theme-selector button {
115227
background: none !important;
116228
border: none !important;
@@ -120,15 +232,28 @@ pre {
120232
cursor: pointer !important;
121233
font-size: 18px !important;
122234
transition: all 0.2s ease !important;
235+
color: #0f172a !important;
236+
}
237+
238+
[data-theme="dark"] .theme-selector button {
239+
color: #f1f5f9 !important;
123240
}
124241

125242
.theme-selector button:hover {
126-
background: var(--color-muted) !important;
243+
background: #f1f5f9 !important;
244+
}
245+
246+
[data-theme="dark"] .theme-selector button:hover {
247+
background: #1e293b !important;
127248
}
128249

129250
.theme-selector button.active {
130-
background: var(--color-primary) !important;
131-
color: white !important;
251+
background: #3b82f6 !important;
252+
color: #ffffff !important;
253+
}
254+
255+
[data-theme="dark"] .theme-selector button.active {
256+
background: #60a5fa !important;
132257
}
133258

134259
/* Smooth transitions for theme changes */

0 commit comments

Comments
 (0)