Skip to content

Commit d7d4d2f

Browse files
guimachiavelliguimachiavelli
authored
Mintlify: Implement light mode and theme switcher (#3240)
1 parent 6e1939a commit d7d4d2f

File tree

4 files changed

+230
-123
lines changed

4 files changed

+230
-123
lines changed

‎docs.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
}
2121
},
2222
"appearance": {
23-
"default": "dark",
24-
"strict": true
23+
"default": "dark"
2524
},
2625
"navbar": {
2726
"primary": {

‎meilisearch-search-bar.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
.meilisearch-bar-container {
2+
max-width: 480px;
3+
width: 100%;
4+
margin: 0 auto;
5+
padding: 0 10px;
6+
}
7+
8+
.meilisearch-search-bar {
9+
background-color: white;
10+
color: rgba(25, 25, 25, 0.7);
11+
border: 1px solid rgba(255, 255, 255, 0.1);
12+
display: flex;
13+
align-items: center;
14+
border-radius: 12px;
15+
padding: 8px 16px;
16+
cursor: pointer;
17+
width: 100%;
18+
transition: all 0.2s ease;
19+
backdrop-filter: blur(8px);
20+
font-size: 14px;
21+
}
22+
23+
.dark .meilisearch-search-bar {
24+
background-color: rgba(25, 17, 53, 0.5);
25+
color: rgba(255, 255, 255, 0.7);
26+
border: 1px solid rgba(255, 255, 255, 0.1);
27+
}
28+
29+
.meilisearch-search-bar__text {
30+
flex-grow: 1;
31+
}
32+
33+
.meilisearch-search-bar__shortcut {
34+
opacity: 0.7;
35+
font-size: 12px;
36+
}
37+
38+
.meilisearch-flexwrapper {
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
width: 100%;
43+
}
44+
45+
.meilisearch-modal-overlay {
46+
position: fixed;
47+
top: 0;
48+
left: 0;
49+
width: 100%;
50+
height: 100%;
51+
backdrop-filter: blur(8px);
52+
background-color: rgba(0, 0, 0, 0.4);
53+
z-index: 9999;
54+
display: none;
55+
align-items: flex-start; /* Align to top */
56+
justify-content: center;
57+
padding-top: 0;
58+
box-sizing: border-box;
59+
}
60+
61+
.meilisearch-modal {
62+
background-color: #fff;
63+
border: 1px solid rgba(0, 0, 0, 0.5);
64+
width: 600px;
65+
max-width: 90%;
66+
max-height: 80vh;
67+
margin-top: 70px; /* Fixed distance from top */
68+
border-radius: 12px;
69+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
70+
display: flex;
71+
flex-direction: column;
72+
overflow: hidden;
73+
}
74+
75+
.dark .meilisearch-modal {
76+
background-color: #1a1033;
77+
border: 1px solid rgba(255, 255, 255, 0.1);
78+
}
79+
80+
.meilisearch-modal__input-container {
81+
display: flex;
82+
align-items: center;
83+
padding: 16px 20px;
84+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
85+
}
86+
87+
.dark .meilisearch-modal__input-container {
88+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
89+
}
90+
91+
.meilisearch-modal__input {
92+
background: transparent;
93+
border: none;
94+
font-size: 16px;
95+
outline: none;
96+
width: 100%;
97+
margin-right: 10px;
98+
color: rgb(var(--gray-700));
99+
}
100+
101+
.dark .meilisearch-modal__input {
102+
color: rgb(var(--gray-100));
103+
}
104+
105+
.meilisearch-modal__escape {
106+
font-size: 12px;
107+
padding: 4px 8px;
108+
border-radius: 4px;
109+
margin-left: auto;
110+
background-color: rgba(0, 0, 0, 0.1);
111+
}
112+
113+
.dark .meilisearch-modal__escape {
114+
color: rgba(255, 255, 255, 0.5);
115+
background-color: rgba(255, 255, 255, 0.1);
116+
}
117+
118+
.meilisearch-modal__results {
119+
flex-grow: 1;
120+
overflow-y: auto;
121+
padding: 0;
122+
}
123+
124+
.meilisearch-modal__indicator {
125+
padding: 20px;
126+
text-align: center;
127+
}
128+
129+
.dark .meilisearch-modal__indicator {
130+
color: rgba(255, 255, 255, 0.7);
131+
}
132+
133+
.meilisearch-modal__result {
134+
display: block;
135+
padding: 12px 20px;
136+
text-decoration: none;
137+
border-left: 3px solid transparent;
138+
transition: background-color 0.2s, border-color 0.2s;
139+
}
140+
141+
.dark .meilisearch-modal__result {
142+
color: white;
143+
}
144+
145+
.meilisearch-modal__result:hover {
146+
background-color: rgba(0, 0, 0, 0.05);
147+
border-left-color: #f472b6;
148+
}
149+
150+
.dark .meilisearch-modal__result:hover {
151+
background-color: rgba(255, 255, 255, 0.05);
152+
}
153+
154+
.meilisearch-modal__category-header {
155+
padding: 12px 20px 8px;
156+
font-size: 14px;
157+
font-weight: 600;
158+
text-transform: uppercase;
159+
color: rgba(0, 0, 0, 0.45);
160+
}
161+
162+
.dark .meilisearch-modal__category-header {
163+
color: rgba(255, 255, 255, 0.5);
164+
}
165+
166+
.meilisearch-modal__result-heading {
167+
font-weight: 500;
168+
margin-bottom: 4px;
169+
}
170+
171+
.meilisearch-modal__result-content {
172+
font-size: 13px;
173+
color: rgba(0, 0, 0, 0.45);
174+
}
175+
176+
.dark .meilisearch-modal__result-content {
177+
color: rgba(255, 255, 255, 0.6);
178+
}
179+
180+
.meilisearch-modal__category-em {
181+
font-style: normal;
182+
color: #f472b6;
183+
font-weight: bold;
184+
}
185+
186+
.meilisearch-modal__error {
187+
padding: 20px;
188+
text-align: center;
189+
color: #f87171;
190+
}

0 commit comments

Comments
 (0)