Skip to content

Commit fa06885

Browse files
burnashburnash
authored
Fix DocSearch v4 styles (#3338)
* Fix DocSearch v4 styles * Fix search input styles for light and dark modes
1 parent 7702f5c commit fa06885

File tree

1 file changed

+156
-16
lines changed

1 file changed

+156
-16
lines changed

‎docs/website/src/css/custom.css‎

Lines changed: 156 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,20 @@
99
:root {
1010
--ifm-color-primary: #4C4898;
1111
--ifm-menu-color: #191937;
12+
/* DocSearch v4 for light mode */
13+
--docsearch-primary-color: #4C4898 !important;
1214
--docsearch-searchbox-background: #191937 !important;
13-
--docsearch-text-color: #ffffff !important;
1415
--docsearch-searchbox-focus-background: #191937 !important;
15-
--docsearch-highlight-color:#191937 !important;
16-
--docsearch-hit-color: #191937 !important;
16+
--docsearch-text-color: #1c1e21 !important;
17+
--docsearch-secondary-text-color: #5a5e9a !important;
18+
--docsearch-highlight-color: #4C4898 !important;
19+
--docsearch-hit-color: #444950 !important;
20+
--docsearch-hit-background: #ffffff !important;
21+
--docsearch-hit-highlight-color: rgba(76, 72, 152, 0.15) !important;
22+
--docsearch-modal-background: #f5f6f7 !important;
23+
--docsearch-subtle-color: #d6d6e7 !important;
24+
--docsearch-icon-color: #5a5e9a !important;
25+
--docsearch-muted-color: #969faf !important;
1726
--doc-sidebar-width: 340px !important;
1827
}
1928

@@ -39,10 +48,22 @@
3948
--ifm-navbar-link-hover-color: var(--ifm-color-primary);
4049
--ifm-toc-link-color:#ffffff;
4150
--ifm-active-toc-link-color: var(--ifm-color-primary);
42-
--docsearch-highlight-color:#ffffff !important;
43-
--docsearch-hit-active-color: #191937 !important;
44-
--docsearch-hit-background: #191937 !important;
51+
/* DocSearch v4 for dark mode */
52+
--docsearch-primary-color: #C6D300 !important;
53+
--docsearch-searchbox-background: #ffffff !important;
54+
--docsearch-searchbox-focus-background: #ffffff !important;
55+
--docsearch-text-color: #191937 !important;
56+
--docsearch-secondary-text-color: #b6b7d5 !important;
57+
--docsearch-highlight-color: #C6D300 !important;
4558
--docsearch-hit-color: #ffffff !important;
59+
--docsearch-hit-background: #191937 !important;
60+
--docsearch-hit-highlight-color: rgba(198, 211, 0, 0.2) !important;
61+
--docsearch-modal-background: #15172a !important;
62+
--docsearch-container-background: rgba(9, 10, 17, 0.8) !important;
63+
--docsearch-subtle-color: #2c2e40 !important;
64+
--docsearch-icon-color: #b6b7d5 !important;
65+
--docsearch-muted-color: #7f8497 !important;
66+
--docsearch-footer-background: #000000a6 !important;
4667
--ifm-color-primary-light: var(--ifm-color-primary);
4768
--ifm-footer-background-color: #191937;
4869
--ifm-color-emphasis-200: #2e2e66 !important;
@@ -70,9 +91,15 @@
7091
color: var(--ifm-menu-color-active);
7192
}
7293

94+
/* DocSearch v4 selected hit styling */
7395
html[data-theme='dark'] .DocSearch-Hit[aria-selected=true] a {
74-
background: var(--ifm-color-primary);
75-
color: #191937 !important;
96+
background-color: var(--docsearch-hit-highlight-color) !important;
97+
}
98+
99+
html[data-theme='dark'] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,
100+
html[data-theme='dark'] .DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,
101+
html[data-theme='dark'] .DocSearch-Hit[aria-selected=true] mark {
102+
color: var(--docsearch-highlight-color) !important;
76103
}
77104

78105
.menu {
@@ -194,26 +221,139 @@ html[data-theme='dark'] .footer__link-item {
194221
}
195222

196223

224+
/* DocSearch should match Docusaurus border radius */
225+
.DocSearch-Button {
226+
border-radius: var(--ifm-global-radius) !important;
227+
}
228+
197229
.DocSearch-Form {
198-
border-radius: 28px !important;
230+
border-radius: var(--ifm-global-radius) !important;
231+
}
232+
233+
.DocSearch-Modal {
234+
border-radius: var(--ifm-global-radius) !important;
235+
}
236+
237+
.DocSearch-Hit a {
238+
border-radius: var(--ifm-global-radius) !important;
239+
}
240+
241+
/* Search box icons should be white in light mode */
242+
.DocSearch-Form .DocSearch-Reset svg path {
243+
stroke: #ffffff !important;
199244
}
200245

246+
.DocSearch-Form .DocSearch-MagnifierLabel>svg {
247+
color: #ffffff !important;
248+
}
249+
250+
.DocSearch-Form input {
251+
color: #ffffff !important;
252+
}
253+
254+
/* Clear button should be light in light mode */
255+
.DocSearch-Clear {
256+
color: rgba(255, 255, 255, 0.8) !important;
257+
}
258+
259+
.DocSearch-Clear:hover {
260+
color: #ffffff !important;
261+
}
262+
263+
/* Fix search results input background and borders */
264+
input[type="search"][name="q"],
265+
input[type="search"][aria-label="Search"] {
266+
background: #ffffff !important;
267+
color: #1c1e21 !important;
268+
border: 1px solid #d6d6e7 !important;
269+
}
270+
271+
input[type="search"][name="q"]::placeholder,
272+
input[type="search"][aria-label="Search"]::placeholder {
273+
color: #969faf !important;
274+
}
275+
276+
/* Search results page - dark mode */
277+
html[data-theme='dark'] input[type="search"][name="q"],
278+
html[data-theme='dark'] input[type="search"][aria-label="Search"] {
279+
background: #191937 !important;
280+
color: #ffffff !important;
281+
border: 1px solid #2c2e40 !important;
282+
}
201283

202-
.DocSearch-Reset svg path {
203-
stroke: #ffffff;
284+
html[data-theme='dark'] input[type="search"][name="q"]::placeholder,
285+
html[data-theme='dark'] input[type="search"][aria-label="Search"]::placeholder {
286+
color: rgba(255, 255, 255, 0.6) !important;
204287
}
205288

206-
.DocSearch-MagnifierLabel>svg {
207-
color: #ffffff !important
289+
html[data-theme='dark'] .DocSearch-Form .DocSearch-Reset svg > path {
290+
stroke: #191937 !important;
208291
}
209292

210-
html[data-theme='dark'] .DocSearch-Reset svg > path {
211-
stroke: #191937;
293+
html[data-theme='dark'] .DocSearch-Form .DocSearch-MagnifierLabel>svg {
294+
color: #191937 !important;
212295
}
213296

214-
html[data-theme='dark'] .DocSearch-MagnifierLabel>svg {
297+
html[data-theme='dark'] .DocSearch-Form input {
215298
color: #191937 !important;
216299
}
300+
301+
html[data-theme='dark'] .DocSearch-Clear {
302+
color: #5a5e9a !important;
303+
}
304+
305+
html[data-theme='dark'] .DocSearch-Clear:hover {
306+
color: #4C4898 !important;
307+
}
308+
309+
html[data-theme='dark'] .DocSearch-Container {
310+
background-color: var(--docsearch-container-background) !important;
311+
}
312+
313+
html[data-theme='dark'] .DocSearch-Modal {
314+
background: var(--docsearch-modal-background) !important;
315+
}
316+
317+
html[data-theme='dark'] .DocSearch-Dropdown {
318+
background: var(--docsearch-modal-background) !important;
319+
}
320+
321+
html[data-theme='dark'] .DocSearch-Dropdown-Container {
322+
background: var(--docsearch-modal-background) !important;
323+
}
324+
325+
html[data-theme='dark'] .DocSearch-Hit-source {
326+
background: var(--docsearch-modal-background) !important;
327+
color: var(--docsearch-hit-color) !important;
328+
}
329+
330+
html[data-theme='dark'] .DocSearch-Hit a {
331+
background: var(--docsearch-hit-background) !important;
332+
}
333+
334+
html[data-theme='dark'] .DocSearch-Hit-title {
335+
color: var(--docsearch-hit-color) !important;
336+
}
337+
338+
html[data-theme='dark'] .DocSearch-Hit-path {
339+
color: var(--docsearch-secondary-text-color) !important;
340+
}
341+
342+
html[data-theme='dark'] .DocSearch-Label {
343+
color: var(--docsearch-hit-color) !important;
344+
}
345+
346+
html[data-theme='dark'] .DocSearch-Title {
347+
color: var(--docsearch-hit-color) !important;
348+
}
349+
350+
html[data-theme='dark'] .DocSearch-Footer {
351+
background: var(--docsearch-footer-background) !important;
352+
}
353+
354+
html[data-theme='dark'] .DocSearch-Hit-icon {
355+
color: var(--docsearch-icon-color) !important;
356+
}
217357
.footer__item a {
218358
color: #191937 !important;
219359
}

0 commit comments

Comments
 (0)