Skip to content

Commit 9e7accd

Browse files
xames3xames3
committed
style: add style to override docsearch
Signed-off-by: Akshay Mestry <[email protected]>
1 parent e3759c4 commit 9e7accd

File tree

3 files changed

+148
-127
lines changed

3 files changed

+148
-127
lines changed

‎theme/__init__.py

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@
3232
3333
[1] Override styles for `sphinx_design` extension by using a
3434
custom CSS.
35+
[2] Override styles for `sphinx_docsearch` extension by using a
36+
custom CSS.
3537
"""
3638

3739
from __future__ import annotations
@@ -142,6 +144,7 @@ def setup(app: Sphinx) -> dict[str, str | bool]:
142144
setattr(config, default_name, getattr(config, new_name))
143145
app.add_html_theme(theme_name, theme_path)
144146
app.add_css_file("sphinx-design.css", priority=900)
147+
app.add_css_file("doc-search.css", priority=900)
145148
app.add_js_file("theme.js", loading_method="defer")
146149
app.add_js_file("smart.js", loading_method="defer")
147150
for role in inspect.getmembers(roles, inspect.isfunction):

‎theme/base/static/doc-search.css

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
:root {
2+
--docsearch-primary-color: hsl(var(--primary));
3+
--docsearch-muted-color: hsl(var(--muted-foreground));
4+
--docsearch-key-gradient: transparent;
5+
--docsearch-key-shadow: transparent;
6+
--docsearch-text-color: hsl(var(--popover-foreground));
7+
--docsearch-modal-width: 760px;
8+
--docsearch-modal-background: hsl(var(--popover));
9+
--docsearch-footer-background: hsl(var(--popover));
10+
--docsearch-searchbox-focus-background: hsl(var(--popover));
11+
--docsearch-container-background: hsl(var(--background)/0.8);
12+
--docsearch-spacing: 0.5rem;
13+
--docsearch-hit-active-color: hsl(var(--accent-foreground));
14+
--docsearch-hit-background: transparent;
15+
--docsearch-searchbox-shadow: none;
16+
--docsearch-hit-shadow: none;
17+
--docsearch-modal-shadow: none;
18+
--docsearch-footer-shadow: none
19+
}
20+
21+
.DocSearch-Button {
22+
background-color: transparent;
23+
border: 1px solid hsl(var(--input));
24+
border-radius: 24px;
25+
display: flex;
26+
font-size: .875rem;
27+
line-height: 1.25rem;
28+
width: 90%;
29+
--tw-ring-offset-color: hsl(var(--background));
30+
transition-duration: .15s;
31+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
32+
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
33+
}
34+
35+
.DocSearch-Button:hover {
36+
--tw-shadow: 0 0 #0000;
37+
--tw-shadow-colored: 0 0 #0000;
38+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
39+
}
40+
41+
.DocSearch-Button:focus,
42+
.DocSearch-Button:hover {
43+
box-shadow: none;
44+
background-color: hsl(var(--light-accent));
45+
color: hsl(var(--muted-foreground))
46+
}
47+
48+
.DocSearch-Button:focus-visible {
49+
outline: 2px solid transparent;
50+
outline-offset: 2px;
51+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
52+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
53+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
54+
--tw-ring-color: hsl(var(--ring));
55+
--tw-ring-offset-width: 2px
56+
}
57+
58+
.DocSearch-Button-Placeholder {
59+
display: block;
60+
font-size: .875rem;
61+
font-weight: 500;
62+
line-height: 1.25rem
63+
}
64+
65+
.DocSearch-Button-Key {
66+
box-shadow: none;
67+
background: none;
68+
background-color: hsl(var(--pre-shadow));
69+
border: none;
70+
border-radius: 4px;
71+
color: hsl(var(--muted-foreground));
72+
font-size: 12px
73+
}
74+
75+
.DocSearch-Container {
76+
position: fixed;
77+
--tw-backdrop-blur: blur(8px);
78+
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
79+
}
80+
81+
.DocSearch-Modal {
82+
background: hsl(var(--background));
83+
border: 1px solid hsl(var(--border));
84+
box-shadow: none;
85+
border-radius: var(--radius)
86+
}
87+
88+
.DocSearch-SearchBar {
89+
border-bottom: 0;
90+
border-color: hsl(var(--input));
91+
border-top-left-radius: var(--radius);
92+
border-top-right-radius: var(--radius);
93+
padding: 0
94+
}
95+
96+
.DocSearch-Form {
97+
background-color: transparent;
98+
border-bottom-left-radius: 0;
99+
border-bottom-right-radius: 0;
100+
border-top-left-radius: var(--radius);
101+
border-top-right-radius: var(--radius)
102+
}
103+
104+
.DocSearch-Cancel {
105+
color: hsl(var(--muted-foreground));
106+
font-size: .875rem;
107+
line-height: 1.25rem;
108+
padding-left: .5rem;
109+
padding-right: .5rem
110+
}
111+
112+
.DocSearch-MagnifierLabel,
113+
.DocSearch-Search-Icon {
114+
stroke-width: 2;
115+
opacity: .5
116+
}
117+
118+
.DocSearch-Hit-source {
119+
background-color: transparent;
120+
color: hsl(var(--muted-foreground))
121+
}
122+
123+
.DocSearch-Hit,
124+
.DocSearch-Hit a {
125+
border-radius: calc(var(--radius) - 4px)
126+
}
127+
128+
.DocSearch-Hit a:focus-visible {
129+
outline-offset: -2px
130+
}
131+
132+
.DocSearch-Hit[aria-selected=true] a {
133+
background-color: gray;
134+
color: hsl(var(--accent-foreground))
135+
}
136+
137+
.DocSearch-Commands {
138+
display: none
139+
}
140+
141+
.DocSearch-Footer {
142+
background: transparent;
143+
box-shadow: none;
144+
border: none
145+
}

‎theme/base/static/smart.css

Lines changed: 0 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -398,133 +398,6 @@ i {
398398
color: hsl(142, 76%, 36%)
399399
}
400400

401-
/* --- Algolia DocSearch --- */
402-
.DocSearch-Button {
403-
background-color: transparent !important;
404-
border: 1px solid hsl(var(--input)) !important;
405-
transition-duration: .15s;
406-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
407-
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
408-
}
409-
410-
.DocSearch-Button:focus,
411-
.DocSearch-Button:hover,
412-
.DocSearch-Button:focus-visible {
413-
box-shadow: none !important;
414-
background-color: hsl(var(--light-accent)) !important;
415-
color: hsl(var(--muted-foreground)) !important
416-
}
417-
418-
.DocSearch-MagnifierLabel,
419-
.DocSearch-Search-Icon {
420-
stroke-width: 2 !important;
421-
width: 14px;
422-
height: 14px;
423-
opacity: 0.5;
424-
color: hsl(var(--foreground)) !important
425-
}
426-
427-
.DocSearch-Button-Placeholder {
428-
display: block;
429-
font-size: 14px !important;
430-
font-weight: 500;
431-
color: hsl(var(--muted-foreground)) !important;
432-
opacity: 0.7;
433-
margin-right: 3rem !important;
434-
line-height: 1rem
435-
}
436-
437-
.DocSearch-Button-Keys {
438-
min-width: calc(22px + 0.8em) !important
439-
}
440-
441-
.DocSearch-Button-Key {
442-
box-shadow: none !important;
443-
background: none !important;
444-
background-color: hsl(var(--border)) !important;
445-
border: 1px solid hsl(var(--border)) !important;
446-
color: hsl(var(--muted-foreground)) !important;
447-
margin-right: -0.5em !important;
448-
font-size: 12px
449-
}
450-
451-
.DocSearch-Container {
452-
position: fixed;
453-
--tw-backdrop-blur: blur(8px);
454-
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
455-
}
456-
457-
.DocSearch-Modal {
458-
background: hsl(var(--background)) !important;
459-
border: 1px solid hsl(var(--border)) !important;
460-
box-shadow: none !important;
461-
border-radius: var(--radius) !important
462-
}
463-
464-
.DocSearch-SearchBar {
465-
border: none !important;
466-
padding: 0
467-
}
468-
469-
.DocSearch-Form {
470-
background-color: hsl(var(--light-accent)) !important;
471-
color: hsl(var(--muted-foreground)) !important;
472-
box-shadow: none !important;
473-
border-radius: var(--radius) !important
474-
}
475-
476-
.DocSearch-Footer {
477-
background: hsl(var(--background)) !important;
478-
box-shadow: none !important;
479-
border: none !important
480-
}
481-
482-
.DocSearch-Commands-Key {
483-
border-radius: 6px !important;
484-
box-shadow: none !important;
485-
background-color: hsl(var(--border)) !important;
486-
border: 1px solid hsl(var(--border)) !important;
487-
color: hsl(var(--muted-foreground)) !important
488-
}
489-
490-
.DocSearch-Input {
491-
color: hsl(var(--accent-foreground)) !important
492-
}
493-
494-
.DocSearch-Cancel {
495-
color: hsl(var(--muted-foreground));
496-
font-size: .875rem;
497-
line-height: 1.25rem;
498-
padding-left: .5rem;
499-
padding-right: .5rem
500-
}
501-
502-
.DocSearch-Hit-source {
503-
margin: 10px 0 0 0 !important;
504-
background-color: hsl(var(--muted)) !important;
505-
color: hsl(var(--accent-foreground)) !important
506-
}
507-
508-
.DocSearch-Hit,
509-
.DocSearch-Hit a {
510-
box-shadow: none !important;
511-
border-radius: 0 !important
512-
}
513-
514-
.DocSearch-Hit a:focus-visible {
515-
outline-offset: 0 !important
516-
}
517-
518-
.DocSearch-Hit[aria-selected=true] a {
519-
background-color: hsl(var(--pre-shadow)) !important;
520-
color: hsl(var(--accent-foreground)) !important
521-
}
522-
523-
.DocSearch-Commands {
524-
display: none
525-
}
526-
527-
/* --- Sphinx Carousel --- */
528401
.scbs-carousel-indicators [data-bs-target] {
529402
box-sizing: border-box !important;
530403
width: 10px !important;

0 commit comments

Comments
 (0)