zzstoatzz.io
+36
-16
frontend/src/lib/components/SearchModal.svelte
+36
-16
frontend/src/lib/components/SearchModal.svelte
···
217
217
.search-backdrop {
218
218
position: fixed;
219
219
inset: 0;
220
-
background: rgba(0, 0, 0, 0.6);
220
+
background: color-mix(in srgb, var(--bg-primary) 60%, transparent);
221
221
backdrop-filter: blur(4px);
222
222
-webkit-backdrop-filter: blur(4px);
223
223
z-index: 9999;
···
230
230
.search-modal {
231
231
width: 100%;
232
232
max-width: 560px;
233
-
background: rgba(18, 18, 20, 0.85);
233
+
background: color-mix(in srgb, var(--bg-secondary) 95%, transparent);
234
234
backdrop-filter: blur(20px) saturate(180%);
235
235
-webkit-backdrop-filter: blur(20px) saturate(180%);
236
-
border: 1px solid rgba(255, 255, 255, 0.08);
236
+
border: 1px solid var(--border-subtle);
237
237
border-radius: 16px;
238
238
box-shadow:
239
-
0 24px 80px rgba(0, 0, 0, 0.5),
240
-
0 0 1px rgba(255, 255, 255, 0.1) inset;
239
+
0 24px 80px color-mix(in srgb, var(--bg-primary) 50%, transparent),
240
+
0 0 1px var(--border-subtle) inset;
241
241
overflow: hidden;
242
242
margin: 0 1rem;
243
243
}
···
247
247
align-items: center;
248
248
gap: 0.75rem;
249
249
padding: 1rem 1.25rem;
250
-
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
251
-
background: rgba(255, 255, 255, 0.02);
250
+
border-bottom: 1px solid var(--border-subtle);
251
+
background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
252
252
}
253
253
254
254
.search-icon {
···
273
273
.search-shortcut {
274
274
font-size: 0.7rem;
275
275
padding: 0.25rem 0.5rem;
276
-
background: rgba(255, 255, 255, 0.06);
277
-
border: 1px solid rgba(255, 255, 255, 0.08);
276
+
background: var(--bg-tertiary);
277
+
border: 1px solid var(--border-default);
278
278
border-radius: 5px;
279
279
color: var(--text-muted);
280
280
font-family: inherit;
···
299
299
max-height: 400px;
300
300
overflow-y: auto;
301
301
padding: 0.5rem;
302
+
scrollbar-width: thin;
303
+
scrollbar-color: var(--border-default) transparent;
304
+
}
305
+
306
+
.search-results::-webkit-scrollbar {
307
+
width: 8px;
308
+
}
309
+
310
+
.search-results::-webkit-scrollbar-track {
311
+
background: transparent;
312
+
border-radius: 4px;
313
+
}
314
+
315
+
.search-results::-webkit-scrollbar-thumb {
316
+
background: var(--border-default);
317
+
border-radius: 4px;
318
+
}
319
+
320
+
.search-results::-webkit-scrollbar-thumb:hover {
321
+
background: var(--border-emphasis);
302
322
}
303
323
304
324
.search-result {
···
319
339
320
340
.search-result:hover,
321
341
.search-result.selected {
322
-
background: rgba(255, 255, 255, 0.06);
342
+
background: var(--bg-hover);
323
343
}
324
344
325
345
.search-result.selected {
326
-
background: rgba(255, 255, 255, 0.08);
327
-
box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 255, 107, 107), 0.3) inset;
346
+
background: var(--bg-hover);
347
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset;
328
348
}
329
349
330
350
.result-icon {
···
333
353
display: flex;
334
354
align-items: center;
335
355
justify-content: center;
336
-
background: rgba(255, 255, 255, 0.05);
356
+
background: var(--bg-tertiary);
337
357
border-radius: 8px;
338
358
font-size: 0.9rem;
339
359
flex-shrink: 0;
···
407
427
letter-spacing: 0.03em;
408
428
color: var(--text-muted);
409
429
padding: 0.2rem 0.45rem;
410
-
background: rgba(255, 255, 255, 0.04);
430
+
background: var(--bg-tertiary);
411
431
border-radius: 4px;
412
432
flex-shrink: 0;
413
433
}
···
447
467
.hint-shortcuts kbd {
448
468
font-size: 0.65rem;
449
469
padding: 0.15rem 0.35rem;
450
-
background: rgba(255, 255, 255, 0.05);
451
-
border: 1px solid rgba(255, 255, 255, 0.08);
470
+
background: var(--bg-tertiary);
471
+
border: 1px solid var(--border-default);
452
472
border-radius: 4px;
453
473
font-family: inherit;
454
474
}