Skip to content

Commit a038dcb

Browse files
JesusValeraDevJesusValeraDev
committed
Improve search bar and search result design
1 parent c54329c commit a038dcb

File tree

4 files changed

+136
-14
lines changed

4 files changed

+136
-14
lines changed

‎css/components/dark-mode.css‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,26 @@
155155
color: var(--color-dark-text-muted);
156156
}
157157

158+
/* Dark mode clear button */
159+
.dark #search::-webkit-search-cancel-button {
160+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
161+
opacity: 0.7;
162+
}
163+
164+
.dark #search::-webkit-search-cancel-button:hover {
165+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
166+
opacity: 1;
167+
}
168+
169+
/* Dark search results scrollbar */
170+
.dark .search-results::-webkit-scrollbar-thumb {
171+
background: var(--color-dark-border);
172+
}
173+
174+
.dark .search-results::-webkit-scrollbar-thumb:hover {
175+
background: var(--color-dark-border-subtle);
176+
}
177+
158178
/* Dark action buttons */
159179
.dark .site-header__actions {
160180
color: var(--color-dark-text-primary);
@@ -560,12 +580,44 @@
560580
border-bottom-color: var(--color-dark-border);
561581
}
562582

583+
.dark .search-result-link {
584+
color: var(--color-dark-text-primary);
585+
}
586+
563587
.dark .search-results__item:hover {
564588
background: var(--color-dark-surface-hover);
565589
}
566590

591+
.dark .result-type-badge--api {
592+
background: rgba(99, 102, 241, 0.3);
593+
color: #b0b3ff;
594+
border: 1px solid rgba(99, 102, 241, 0.5);
595+
}
596+
597+
.dark .result-type-badge--docs {
598+
background: rgba(14, 165, 233, 0.3);
599+
color: #7dd3fc;
600+
border: 1px solid rgba(14, 165, 233, 0.5);
601+
}
602+
603+
.dark .search-results__item .fn-name {
604+
color: var(--color-phel-accent);
605+
}
606+
607+
.dark .search-results__item .fn-signature {
608+
color: var(--color-phel-accent);
609+
}
610+
611+
.dark .search-results__item strong {
612+
color: var(--color-phel-accent);
613+
}
614+
615+
.dark .search-results__item .title {
616+
color: var(--color-dark-text-primary);
617+
}
618+
567619
.dark .search-results__item .desc {
568-
color: var(--color-dark-text-secondary);
620+
color: var(--color-dark-text-primary);
569621
}
570622

571623
.dark .search-results__item mark {

‎css/components/header.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,25 @@
256256
color: var(--color-gray-light);
257257
}
258258

259+
/* Custom clear button for search input */
260+
#search::-webkit-search-cancel-button {
261+
-webkit-appearance: none;
262+
appearance: none;
263+
height: 18px;
264+
width: 18px;
265+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
266+
background-size: 18px 18px;
267+
background-repeat: no-repeat;
268+
background-position: center;
269+
cursor: pointer;
270+
opacity: 0.6;
271+
transition: opacity var(--duration-fast) var(--ease-out);
272+
}
273+
274+
#search::-webkit-search-cancel-button:hover {
275+
opacity: 1;
276+
}
277+
259278
/* Mobile search adjustments */
260279
@media (max-width: 1039px) {
261280
.site-header__search {
@@ -267,7 +286,7 @@
267286
}
268287

269288
#search {
270-
font-size: var(--text-sm);
289+
font-size: max(var(--text-sm), 16px);
271290
padding: var(--space-sm) var(--space-md);
272291
padding-left: 36px;
273292
background-size: 16px;

‎css/components/search.css‎

Lines changed: 54 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,27 +74,73 @@
7474

7575
/* Individual search result item */
7676
@utility search-results__item {
77+
display: flex;
78+
align-items: flex-start;
79+
justify-content: space-between;
80+
gap: var(--space-md);
7781
padding: var(--space-lg);
7882
margin: var(--space-xs) 0;
7983
border-radius: var(--radius-lg);
80-
transition: all var(--duration-fast) var(--ease-out);
84+
transition: background-color var(--duration-fast) var(--ease-out);
8185
cursor: pointer;
8286
border-bottom: none;
8387
}
8488

8589
.search-results__item:hover {
8690
background: var(--color-light-surface-hover);
87-
transform: translateX(4px);
8891
}
8992

90-
.search-results__item a {
93+
.search-result-link {
9194
display: block;
9295
text-decoration: none;
93-
color: inherit;
96+
color: var(--color-light-text-primary);
9497
}
9598

96-
.search-results__item a::after {
97-
display: none;
99+
.search-results__content {
100+
flex: 1;
101+
min-width: 0;
102+
}
103+
104+
.result-type-badge {
105+
display: inline-flex;
106+
align-items: center;
107+
padding: 3px 8px;
108+
font-size: 0.65rem;
109+
font-weight: 600;
110+
border-radius: var(--radius-full);
111+
white-space: nowrap;
112+
flex-shrink: 0;
113+
text-transform: uppercase;
114+
letter-spacing: 0.05em;
115+
line-height: 1.2;
116+
}
117+
118+
.result-type-badge--api {
119+
background: var(--color-phel-primary);
120+
color: white;
121+
}
122+
123+
.result-type-badge--docs {
124+
background: var(--color-phel-accent);
125+
color: white;
126+
}
127+
128+
.search-results__item .fn-name {
129+
color: var(--color-phel-primary);
130+
font-weight: 600;
131+
font-size: var(--text-base);
132+
}
133+
134+
.search-results__item .fn-signature {
135+
color: var(--color-phel-primary);
136+
font-size: var(--text-xs);
137+
font-weight: 400;
138+
}
139+
140+
.search-results__item strong {
141+
color: var(--color-phel-primary);
142+
font-weight: 600;
143+
font-size: var(--text-base);
98144
}
99145

100146
.search-results__item .title {
@@ -106,10 +152,11 @@
106152
}
107153

108154
.search-results__item .desc {
109-
color: var(--color-light-text-secondary);
155+
color: var(--color-light-text-primary);
110156
font-size: var(--text-sm);
111157
line-height: 1.5;
112158
display: block;
159+
margin-top: var(--space-xs);
113160
}
114161

115162
/* Highlight matched text */

‎static/search.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -276,19 +276,23 @@ function createMenuItem(result, index) {
276276

277277
function formatSearchResultItem(item) {
278278
if (item.type === "documentation") {
279-
return `<a href="${item.url}">`
279+
return `<a class="search-result-link" href="${item.url}">`
280280
+ `<div class="search-results__item">`
281-
+ `<span class="result-type">Documentation: </span>`
281+
+ `<div class="search-results__content">`
282282
+ `<strong>${item.title}</strong>`
283283
+ `<span class="desc">${item.content}</span>`
284+
+ `</div>`
285+
+ `<span class="result-type-badge result-type-badge--docs">Docs</span>`
284286
+ `</div></a>`;
285287
} else {
286-
return `<a href="/documentation/api/#${item.anchor}">`
288+
return `<a class="search-result-link" href="/documentation/api/#${item.anchor}">`
287289
+ `<div class="search-results__item">`
288-
+ `<span class="result-type">API: </span>`
289-
+ `${item.name} `
290+
+ `<div class="search-results__content">`
291+
+ `<span class="fn-name">${item.name}</span> `
290292
+ `<small class="fn-signature">${item.signature}</small>`
291293
+ `<span class="desc">${item.desc}</span>`
294+
+ `</div>`
295+
+ `<span class="result-type-badge result-type-badge--api">API</span>`
292296
+ `</div></a>`;
293297
}
294298
}

0 commit comments

Comments
 (0)