Skip to content

Commit 84ff070

Browse files
alegaussalegauss
committed
Refactor search CSS and remove shell option
Remove shell: true from execFileSync call in scripts/gen-pdf.mjs to avoid spawning through a shell and improve security/consistency. Large overhaul of src/css/custom.css: refactors and modernizes the navbar search styles — introduces design-system CSS variables, updates selectors to .navbar__search and related classes, implements pill-shaped inputs, custom SVG icons as background-images, focused/hover states, dark-theme variants, dropdown/result item styling, keyboard shortcut hints, and improved mobile search styling. Overall aims to unify visuals, accessibility, and theming for the search UI.
1 parent 0ab4108 commit 84ff070

2 files changed

Lines changed: 236 additions & 31 deletions

File tree

‎scripts/gen-pdf.mjs‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@ function generateDocs() {
107107
execFileSync('npx', args, {
108108
cwd: ROOT,
109109
stdio: 'inherit',
110-
shell: true,
111110
timeout: 300_000, // 5 min max
112111
});
113112

‎src/css/custom.css‎

Lines changed: 236 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -186,68 +186,274 @@ a {
186186
margin-left: auto;
187187
}
188188

189-
/* ── Search bar in navbar ── */
189+
/* ── Search — Design-system tokens ── */
190+
:root {
191+
--search-local-modal-background: #ffffff;
192+
--search-local-modal-shadow: 0 12px 40px -4px rgba(15, 23, 42, 0.12),
193+
0 4px 12px -2px rgba(15, 23, 42, 0.06);
194+
--search-local-modal-width: 520px;
195+
--search-local-hit-background: #ffffff;
196+
--search-local-hit-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06);
197+
--search-local-hit-color: #1e293b;
198+
--search-local-hit-height: 54px;
199+
--search-local-hit-active-color: #ffffff;
200+
--search-local-highlight-color: var(--color-brand, #C2410C);
201+
--search-local-muted-color: #94a3b8;
202+
--search-local-spacing: 10px;
203+
--search-local-icon-stroke-width: 1.6;
204+
}
205+
[data-theme="dark"] {
206+
--search-local-modal-background: #1e293b;
207+
--search-local-modal-shadow: 0 12px 40px -4px rgba(0, 0, 0, 0.45),
208+
0 4px 12px -2px rgba(0, 0, 0, 0.3);
209+
--search-local-hit-background: #0f172a;
210+
--search-local-hit-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
211+
--search-local-hit-color: #e2e8f0;
212+
--search-local-highlight-color: #F97316;
213+
--search-local-muted-color: #64748b;
214+
}
215+
216+
/* ── Search bar wrapper in navbar ── */
190217
.nav-search {
191218
display: flex;
192219
align-items: center;
193220
}
194221

195-
.nav-search .searchBar_node_modules-\@easyops-cn-docusaurus-search-local-dist-client-client-theme-SearchBar-index-module,
196-
.nav-search [class*="searchBar_"] {
222+
.nav-search .navbar__search {
223+
position: relative;
224+
}
225+
226+
.nav-search [class*="searchBar_"],
227+
.nav-search [class*="searchBarContainer"] {
197228
margin: 0;
198229
}
199230

200-
/* Compact search input styling */
231+
/* ── Search input — pill shape ── */
201232
.nav-search input[type="search"],
202-
.nav-search .aa-Input,
203-
.nav-search [class*="searchInput"] {
204-
font-size: 0.875rem;
205-
padding: 0.35rem 0.75rem;
206-
border-radius: 0.5rem;
207-
border: 1px solid var(--ifm-color-emphasis-300);
208-
background: var(--ifm-background-surface-color);
209-
color: var(--ifm-font-color-base);
210-
width: 200px;
211-
transition: width 0.2s ease, border-color 0.2s ease;
233+
.nav-search .navbar__search-input {
234+
font-family: inherit;
235+
font-size: 0.8125rem;
236+
font-weight: 500;
237+
padding: 0.4rem 2.8rem 0.4rem 2.2rem;
238+
border-radius: 9999px;
239+
border: 1px solid var(--color-border, #e2e8f0);
240+
background: var(--color-secondary, #f1f5f9);
241+
color: var(--color-foreground, #0f172a);
242+
width: 210px;
243+
height: 36px;
244+
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
245+
border-color 0.2s ease,
246+
background-color 0.2s ease,
247+
box-shadow 0.2s ease;
248+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
249+
background-repeat: no-repeat;
250+
background-position: 0.7rem center;
251+
background-size: 15px 15px;
252+
}
253+
254+
.nav-search input[type="search"]::placeholder,
255+
.nav-search .navbar__search-input::placeholder {
256+
color: #94a3b8;
257+
font-weight: 400;
258+
opacity: 1;
259+
}
260+
261+
.nav-search input[type="search"]:hover,
262+
.nav-search .navbar__search-input:hover {
263+
border-color: var(--color-brand-border, #FED7AA);
264+
background-color: #ffffff;
212265
}
213266

214267
.nav-search input[type="search"]:focus,
215-
.nav-search .aa-Input:focus,
216-
.nav-search [class*="searchInput"]:focus {
217-
width: 260px;
218-
border-color: var(--ifm-color-primary);
268+
.nav-search .navbar__search-input:focus {
269+
width: 280px;
270+
border-color: var(--color-brand, #C2410C);
271+
background-color: #ffffff;
272+
box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.1);
219273
outline: none;
220274
}
221275

276+
/* Dark mode input */
222277
[data-theme="dark"] .nav-search input[type="search"],
223-
[data-theme="dark"] .nav-search .aa-Input {
224-
background: #1e293b;
278+
[data-theme="dark"] .nav-search .navbar__search-input {
279+
background-color: rgba(30, 41, 59, 0.6);
225280
border-color: #334155;
226281
color: #e2e8f0;
282+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
283+
}
284+
285+
[data-theme="dark"] .nav-search input[type="search"]::placeholder {
286+
color: #64748b;
287+
}
288+
289+
[data-theme="dark"] .nav-search input[type="search"]:hover {
290+
border-color: #475569;
291+
background-color: #1e293b;
227292
}
228293

229-
/* Mobile search */
294+
[data-theme="dark"] .nav-search input[type="search"]:focus {
295+
border-color: #F97316;
296+
background-color: #1e293b;
297+
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
298+
}
299+
300+
/* ── Keyboard shortcut hints (ctrl K) ── */
301+
.nav-search [class*="searchHintContainer"] {
302+
right: 8px;
303+
gap: 2px;
304+
}
305+
306+
.nav-search [class*="searchHint"] {
307+
font-family: inherit;
308+
font-size: 0.625rem;
309+
font-weight: 600;
310+
letter-spacing: 0.03em;
311+
min-width: 20px;
312+
height: 18px;
313+
line-height: 18px;
314+
padding: 0 4px;
315+
border-radius: 4px;
316+
border: 1px solid var(--color-border, #e2e8f0);
317+
background: #ffffff;
318+
color: #64748b;
319+
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
320+
text-align: center;
321+
}
322+
323+
[data-theme="dark"] .nav-search [class*="searchHint"] {
324+
background: #0f172a;
325+
border-color: #475569;
326+
color: #94a3b8;
327+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
328+
}
329+
330+
/* ── Search results dropdown ── */
331+
.nav-search [class*="dropdownMenu"] {
332+
border-radius: 16px !important;
333+
border: 1px solid var(--color-border, #e2e8f0);
334+
padding: 8px !important;
335+
margin-top: 6px;
336+
overflow: hidden;
337+
-webkit-backdrop-filter: blur(12px);
338+
backdrop-filter: blur(12px);
339+
}
340+
341+
[data-theme="dark"] .nav-search [class*="dropdownMenu"] {
342+
border-color: #334155;
343+
}
344+
345+
/* Search result items */
346+
.nav-search [class*="suggestion"] {
347+
border-radius: 10px !important;
348+
padding: 0 12px !important;
349+
transition: background-color 0.15s ease, transform 0.15s ease;
350+
}
351+
352+
.nav-search [class*="suggestion"]:hover {
353+
transform: translateX(2px);
354+
}
355+
356+
.nav-search [class*="suggestion"][class*="cursor"] {
357+
background-color: var(--color-brand, #C2410C) !important;
358+
box-shadow: 0 2px 8px rgba(194, 65, 12, 0.25);
359+
}
360+
361+
[data-theme="dark"] .nav-search [class*="suggestion"][class*="cursor"] {
362+
background-color: #F97316 !important;
363+
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
364+
}
365+
366+
/* Hit title and path text */
367+
.nav-search [class*="hitTitle"] {
368+
font-weight: 600;
369+
font-size: 0.85em;
370+
}
371+
372+
.nav-search [class*="hitPath"] {
373+
font-size: 0.7em;
374+
opacity: 0.7;
375+
}
376+
377+
/* Highlight matching text */
378+
.nav-search [class*="hitWrapper"] mark {
379+
font-weight: 700;
380+
}
381+
382+
/* No results state */
383+
.nav-search [class*="noResults"] {
384+
padding: 24px 12px;
385+
color: #94a3b8;
386+
font-size: 0.875rem;
387+
}
388+
389+
/* Footer (search powered by) */
390+
.nav-search [class*="hitFooter"] {
391+
font-size: 0.75em;
392+
color: #94a3b8;
393+
padding-top: 8px;
394+
border-top: 1px solid var(--color-border, #e2e8f0);
395+
margin-top: 8px;
396+
}
397+
398+
.nav-search [class*="hitFooter"] a {
399+
color: var(--color-brand, #C2410C);
400+
text-decoration: none;
401+
font-weight: 600;
402+
}
403+
404+
[data-theme="dark"] .nav-search [class*="hitFooter"] {
405+
border-top-color: #334155;
406+
}
407+
408+
[data-theme="dark"] .nav-search [class*="hitFooter"] a {
409+
color: #F97316;
410+
}
411+
412+
/* ── Mobile search ── */
230413
.nav-mobile-search {
231-
padding: 0.5rem 0.25rem;
232-
border-bottom: 1px solid var(--ifm-color-emphasis-200);
414+
padding: 0.75rem;
415+
border-bottom: 1px solid var(--color-border, #e2e8f0);
233416
margin-bottom: 0.25rem;
234417
}
235418

236419
.nav-mobile-search input[type="search"],
237-
.nav-mobile-search [class*="searchInput"] {
420+
.nav-mobile-search .navbar__search-input {
238421
width: 100%;
422+
font-family: inherit;
239423
font-size: 0.875rem;
240-
padding: 0.5rem 0.75rem;
241-
border-radius: 0.5rem;
242-
border: 1px solid var(--ifm-color-emphasis-300);
243-
background: var(--ifm-background-surface-color);
244-
color: var(--ifm-font-color-base);
424+
font-weight: 500;
425+
padding: 0.55rem 1rem 0.55rem 2.4rem;
426+
border-radius: 12px;
427+
border: 1px solid var(--color-border, #e2e8f0);
428+
background: var(--color-secondary, #f1f5f9);
429+
color: var(--color-foreground, #0f172a);
430+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
431+
background-repeat: no-repeat;
432+
background-position: 0.75rem center;
433+
background-size: 16px 16px;
434+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
435+
}
436+
437+
.nav-mobile-search input[type="search"]:focus {
438+
border-color: var(--color-brand, #C2410C);
439+
box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.1);
440+
outline: none;
441+
}
442+
443+
[data-theme="dark"] .nav-mobile-search {
444+
border-bottom-color: #334155;
245445
}
246446

247447
[data-theme="dark"] .nav-mobile-search input[type="search"] {
248-
background: #1e293b;
448+
background-color: #0f172a;
249449
border-color: #334155;
250450
color: #e2e8f0;
451+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
452+
}
453+
454+
[data-theme="dark"] .nav-mobile-search input[type="search"]:focus {
455+
border-color: #F97316;
456+
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
251457
}
252458

253459
/* ── Logo ── */

0 commit comments

Comments
 (0)