alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from '$app/paths';
3 import Search from '$icon/search';
4
5 interface Props {
6 class?: string;
7 }
8
9 let { class: className = '' }: Props = $props();
10
11 const appPath = (path: string) => resolve(path as '/');
12</script>
13
14<form action={appPath('/search')} method="GET" class={`relative hidden md:block ${className}`}>
15 <label class="sr-only" for="topbar-search">Search</label>
16 <div class="search-box">
17 <Search class="size-4 shrink-0 text-fg-faint" aria-hidden="true" />
18 <input id="topbar-search" name="q" type="search" placeholder="Search..." class="search-input" />
19 <kbd class="search-kbd">Ctrl+K</kbd>
20 </div>
21</form>
22
23<style>
24 .search-box {
25 --topbar-search-surface: #ffffff;
26 --topbar-search-fg: #1f2937;
27 --topbar-search-placeholder: #9ca3af;
28 --topbar-search-kbd-fg: #9ca3af;
29 --topbar-search-kbd-border: #e5e7eb;
30 position: relative;
31 display: flex;
32 max-height: 30px;
33 width: 20rem;
34 align-items: center;
35 gap: 0.5rem;
36 border: 1px solid var(--color-border);
37 border-radius: 0.25rem;
38 background: var(--topbar-search-surface);
39 padding: 1rem 0.375rem 1rem 0.5rem;
40 }
41
42 @media (prefers-color-scheme: dark) {
43 .search-box {
44 --topbar-search-surface: #111827;
45 --topbar-search-fg: #e5e7eb;
46 --topbar-search-placeholder: #4b5563;
47 --topbar-search-kbd-fg: #6b7280;
48 --topbar-search-kbd-border: #4b5563;
49 }
50 }
51
52 @media (min-width: 1024px) {
53 .search-box {
54 width: 24rem;
55 }
56 }
57
58 .search-box:focus-within {
59 z-index: 51;
60 outline: 2px solid var(--color-ring);
61 outline-offset: 1px;
62 }
63
64 .search-input {
65 min-width: 0;
66 flex: 1;
67 border: 0;
68 border-radius: 0;
69 background: transparent;
70 padding: 0;
71 color: var(--topbar-search-fg);
72 font-size: 0.875rem;
73 line-height: 1.25rem;
74 outline: none;
75 }
76
77 .search-input:focus {
78 box-shadow: none;
79 outline: none;
80 }
81
82 .search-input::placeholder {
83 color: var(--topbar-search-placeholder);
84 }
85
86 .search-kbd {
87 display: flex;
88 align-items: center;
89 border: 1px solid var(--topbar-search-kbd-border);
90 border-bottom-width: 2px;
91 border-radius: 0.25rem;
92 padding: 0 0.25rem;
93 font-family: var(--font-sans);
94 color: var(--topbar-search-kbd-fg);
95 font-size: 0.75rem;
96 line-height: 1.25rem;
97 pointer-events: none;
98 }
99
100 .search-input:focus + .search-kbd,
101 .search-box:focus-within .search-kbd,
102 .search-input:not(:placeholder-shown) + .search-kbd {
103 display: none;
104 }
105</style>