The Node.js® Website
keii.dev
1.searchBoxModalContainer {
2 @apply fixed
3 inset-0
4 z-50
5 flex
6 items-center
7 justify-center
8 bg-neutral-900
9 bg-opacity-90
10 dark:bg-neutral-900
11 dark:bg-opacity-90;
12}
13
14.searchBoxModalPanel {
15 @apply fixed
16 h-screen
17 w-full
18 bg-neutral-100
19 dark:bg-neutral-950
20 md:h-[450px]
21 md:max-w-3xl
22 md:rounded-xl
23 md:shadow-lg;
24}
25
26.searchBoxInnerPanel {
27 @apply pt-12
28 text-neutral-800
29 dark:text-neutral-400
30 md:pt-2;
31}
32
33.searchBoxMagnifyingGlassIcon {
34 @apply absolute
35 top-[10px]
36 hidden
37 size-6
38 md:block;
39}
40
41.searchBoxBackIconContainer {
42 @apply block
43 md:hidden;
44}
45
46.searchBoxBackIcon {
47 @apply absolute
48 top-[7px]
49 block
50 size-6
51 md:hidden;
52}
53
54.searchBoxInputContainer {
55 @apply relative
56 px-2
57 md:px-4;
58}
59
60.searchBoxInput {
61 @apply w-full
62 rounded-b-none
63 border-b
64 border-neutral-300
65 bg-transparent
66 py-2
67 pl-8
68 pr-4
69 focus:outline-none
70 dark:border-neutral-900
71 dark:text-neutral-300
72 dark:placeholder-neutral-300;
73}
74
75.fulltextResultsContainer {
76 @apply h-80
77 overflow-auto
78 md:px-4;
79}
80
81.fulltextSearchResult {
82 @apply flex
83 flex-col
84 rounded-md
85 p-2
86 text-left
87 text-sm
88 hover:bg-neutral-300
89 dark:hover:bg-neutral-900;
90}
91
92.fulltextSearchResultTitle {
93 @apply text-neutral-800
94 dark:text-neutral-300;
95}
96
97.fulltextSearchResultBreadcrumb {
98 @apply mt-1
99 text-xs
100 capitalize
101 text-neutral-800
102 dark:text-neutral-600;
103}
104
105.fulltextSearchSections {
106 @apply mb-1
107 mt-2
108 flex
109 gap-2
110 overflow-x-auto
111 p-2
112 text-xs
113 font-semibold
114 text-neutral-700
115 dark:text-neutral-600
116 md:px-4;
117}
118
119.fulltextSearchSection {
120 @apply rounded-lg
121 border-b
122 border-transparent
123 px-2
124 py-1
125 capitalize
126 hover:bg-neutral-200
127 dark:border-neutral-900
128 dark:border-b-transparent
129 dark:hover:bg-neutral-900;
130}
131
132.fulltextSearchSectionSelected {
133 @apply rounded-b-none
134 border-neutral-700
135 text-neutral-900
136 dark:border-neutral-700
137 dark:text-neutral-300;
138}
139
140.fulltextSearchSectionCount {
141 @apply ml-1
142 text-neutral-500
143 dark:text-neutral-800;
144}
145
146.seeAllFulltextSearchResults {
147 @apply m-auto
148 mb-2
149 mt-4
150 w-full
151 text-center
152 text-sm
153 text-neutral-700
154 hover:underline
155 dark:text-neutral-600;
156}
157
158.poweredBy {
159 @apply flex
160 text-xs
161 text-neutral-950
162 dark:text-neutral-200;
163}
164
165.poweredByLogo {
166 @apply ml-2
167 w-16;
168}
169
170.emptyStateContainer {
171 @apply flex
172 h-[80%]
173 w-full
174 flex-col
175 items-center
176 justify-center
177 text-center
178 text-sm
179 text-neutral-600
180 dark:text-neutral-500;
181}
182
183.noResultsContainer {
184 @apply flex
185 h-[80%]
186 w-full
187 items-center
188 justify-center
189 text-center
190 text-sm
191 text-neutral-600
192 dark:text-neutral-500;
193}
194
195.noResultsTerm {
196 @apply font-semibold;
197}
198
199.searchErrorContainer {
200 @apply flex
201 h-[80%]
202 w-full
203 items-center
204 justify-center
205 text-center
206 text-sm
207 text-neutral-600
208 dark:text-neutral-500;
209}
210
211.fulltextSearchFooter {
212 @apply flex
213 w-full
214 justify-end
215 rounded-b-xl
216 border-t
217 border-neutral-300
218 bg-neutral-100
219 p-4
220 dark:border-neutral-900
221 dark:bg-neutral-950;
222}