detached fed5f0c

fix(homepage-shell): replace dynamic variables with shadcn tokens for UI consistency

commit
fed5f0c1e0ded0a785317c8e1a4ff898cd4ea2e3
author
brice · · 2025-12-16 22:57 UTC
committer
brice · · 2025-12-16 20:19 UTC
parent
faeaea7
signature
unsigned
5 files · +178 -140
Unified
UnifiedSplit
M webui/src/pages/homepage.ts +1 -1
@@ -1,5 +1,5 @@
11 import { mount } from "svelte";
2-import "../styles/tailwind.css";
2+import "../styles/app.css";
33 import Homepage from "./Homepage.svelte";
44
55 // Proactively unregister any Service Workers and clear caches that may have been
@@ -1,5 +1,5 @@
1 import { mount } from "svelte";1 import { mount } from "svelte";
2-import "../styles/tailwind.css";2+import "../styles/app.css";
3 import Homepage from "./Homepage.svelte";3 import Homepage from "./Homepage.svelte";
4 4
5 // Proactively unregister any Service Workers and clear caches that may have been5 // Proactively unregister any Service Workers and clear caches that may have been
M webui/src/pages/homepage/shell/CommandPalette.svelte +42 -34
@@ -368,10 +368,12 @@
368368 margin: 0 1rem;
369369 display: flex;
370370 flex-direction: column;
371- background: var(--dynamic-surface);
372- border: 1px solid var(--dynamic-border);
371+ background: var(--card);
372+ border-width: 1px;
373+ border-style: solid;
374+ border-color: var(--border);
373375 box-shadow:
374- 0 0 0 1px color-mix(in srgb, var(--dynamic-border) 30%, transparent),
376+ 0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent),
375377 0 32px 64px -16px rgb(0 0 0 / 0.7);
376378 animation: palette-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
377379 }
@@ -386,8 +388,8 @@
386388 /* Header */
387389 .palette-header {
388390 padding: 0;
389- border-bottom: 1px solid var(--dynamic-border);
390- background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);
391+ border-bottom: 1px solid var(--border);
392+ background: color-mix(in srgb, var(--background) 70%, transparent);
391393 }
392394
393395 .search-row {
@@ -399,7 +401,7 @@
399401
400402 .search-icon {
401403 font-size: 1rem;
402- color: var(--dynamic-accent, #4ade80);
404+ color: var(--primary, #4ade80);
403405 flex-shrink: 0;
404406 }
405407
@@ -410,12 +412,12 @@
410412 outline: none;
411413 font-size: 0.95rem;
412414 font-family: inherit;
413- color: var(--dynamic-text);
414- caret-color: var(--dynamic-accent, #4ade80);
415+ color: var(--foreground);
416+ caret-color: var(--primary, #4ade80);
415417 }
416418
417419 .search-input::placeholder {
418- color: var(--dynamic-muted);
420+ color: var(--muted-foreground);
419421 opacity: 0.7;
420422 }
421423
@@ -428,16 +430,18 @@
428430
429431 .result-count {
430432 font-size: 0.7rem;
431- color: var(--dynamic-muted);
433+ color: var(--muted-foreground);
432434 letter-spacing: 0.05em;
433435 }
434436
435437 .esc-hint {
436438 padding: 0.2rem 0.4rem;
437439 font-size: 0.65rem;
438- color: var(--dynamic-muted);
439- background: var(--dynamic-bg);
440- border: 1px solid var(--dynamic-border);
440+ color: var(--muted-foreground);
441+ background: var(--background);
442+ border-width: 1px;
443+ border-style: solid;
444+ border-color: var(--border);
441445 }
442446
443447 /* Results */
@@ -454,7 +458,7 @@
454458 justify-content: center;
455459 gap: 0.5rem;
456460 padding: 2.5rem 1rem;
457- color: var(--dynamic-muted);
461+ color: var(--muted-foreground);
458462 }
459463
460464 .empty-icon {
@@ -475,7 +479,7 @@
475479 padding: 0.7rem 1rem;
476480 background: transparent;
477481 border: none;
478- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);
482+ border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
479483 cursor: pointer;
480484 text-align: left;
481485 transition: background 80ms ease;
@@ -486,24 +490,24 @@
486490 }
487491
488492 .result-item:hover {
489- background: color-mix(in srgb, var(--dynamic-surface) 80%, var(--dynamic-bg) 20%);
493+ background: color-mix(in srgb, var(--card) 80%, var(--background) 20%);
490494 }
491495
492496 .result-item.selected {
493- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 12%, transparent);
494- box-shadow: inset 2px 0 0 var(--dynamic-accent, #4ade80);
497+ background: color-mix(in srgb, var(--primary, #4ade80) 12%, transparent);
498+ box-shadow: inset 2px 0 0 var(--primary, #4ade80);
495499 }
496500
497501 .item-icon {
498502 font-size: 1rem;
499- color: var(--dynamic-muted);
503+ color: var(--muted-foreground);
500504 flex-shrink: 0;
501505 width: 1.5rem;
502506 text-align: center;
503507 }
504508
505509 .result-item.selected .item-icon {
506- color: var(--dynamic-accent, #4ade80);
510+ color: var(--primary, #4ade80);
507511 }
508512
509513 .item-content {
@@ -516,7 +520,7 @@
516520
517521 .item-label {
518522 font-size: 0.85rem;
519- color: var(--dynamic-text);
523+ color: var(--foreground);
520524 white-space: nowrap;
521525 overflow: hidden;
522526 text-overflow: ellipsis;
@@ -524,7 +528,7 @@
524528
525529 .item-description {
526530 font-size: 0.72rem;
527- color: var(--dynamic-muted);
531+ color: var(--muted-foreground);
528532 white-space: nowrap;
529533 overflow: hidden;
530534 text-overflow: ellipsis;
@@ -533,15 +537,17 @@
533537 .item-shortcut {
534538 padding: 0.2rem 0.45rem;
535539 font-size: 0.65rem;
536- color: var(--dynamic-muted);
537- background: var(--dynamic-bg);
538- border: 1px solid var(--dynamic-border);
540+ color: var(--muted-foreground);
541+ background: var(--background);
542+ border-width: 1px;
543+ border-style: solid;
544+ border-color: var(--border);
539545 flex-shrink: 0;
540546 }
541547
542548 .result-item.selected .item-shortcut {
543- border-color: color-mix(in srgb, var(--dynamic-accent, #4ade80) 40%, var(--dynamic-border) 60%);
544- color: var(--dynamic-text);
549+ border-color: color-mix(in srgb, var(--primary, #4ade80) 40%, var(--border) 60%);
550+ color: var(--foreground);
545551 }
546552
547553 /* Footer */
@@ -551,8 +557,8 @@
551557 justify-content: center;
552558 gap: 1.5rem;
553559 padding: 0.65rem 1rem;
554- border-top: 1px solid var(--dynamic-border);
555- background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);
560+ border-top: 1px solid var(--border);
561+ background: color-mix(in srgb, var(--background) 70%, transparent);
556562 }
557563
558564 .hint-group {
@@ -560,14 +566,16 @@
560566 align-items: center;
561567 gap: 0.35rem;
562568 font-size: 0.68rem;
563- color: var(--dynamic-muted);
569+ color: var(--muted-foreground);
564570 }
565571
566572 .hint-group kbd {
567573 padding: 0.15rem 0.35rem;
568574 font-size: 0.62rem;
569- background: var(--dynamic-bg);
570- border: 1px solid var(--dynamic-border);
575+ background: var(--background);
576+ border-width: 1px;
577+ border-style: solid;
578+ border-color: var(--border);
571579 }
572580
573581 /* Scrollbar */
@@ -580,11 +588,11 @@
580588 }
581589
582590 .palette-results::-webkit-scrollbar-thumb {
583- background: var(--dynamic-border);
591+ background: var(--border);
584592 }
585593
586594 .palette-results::-webkit-scrollbar-thumb:hover {
587- background: var(--dynamic-muted);
595+ background: var(--muted-foreground);
588596 }
589597
590598 @media (max-width: 480px) {
@@ -368,10 +368,12 @@
368 margin: 0 1rem;368 margin: 0 1rem;
369 display: flex;369 display: flex;
370 flex-direction: column;370 flex-direction: column;
371- background: var(--dynamic-surface);371+ background: var(--card);
372- border: 1px solid var(--dynamic-border);372+ border-width: 1px;
373+ border-style: solid;
374+ border-color: var(--border);
373 box-shadow:375 box-shadow:
374- 0 0 0 1px color-mix(in srgb, var(--dynamic-border) 30%, transparent),376+ 0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent),
375 0 32px 64px -16px rgb(0 0 0 / 0.7);377 0 32px 64px -16px rgb(0 0 0 / 0.7);
376 animation: palette-in 200ms cubic-bezier(0.16, 1, 0.3, 1);378 animation: palette-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
377 }379 }
@@ -386,8 +388,8 @@
386 /* Header */388 /* Header */
387 .palette-header {389 .palette-header {
388 padding: 0;390 padding: 0;
389- border-bottom: 1px solid var(--dynamic-border);391+ border-bottom: 1px solid var(--border);
390- background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);392+ background: color-mix(in srgb, var(--background) 70%, transparent);
391 }393 }
392 394
393 .search-row {395 .search-row {
@@ -399,7 +401,7 @@
399 401
400 .search-icon {402 .search-icon {
401 font-size: 1rem;403 font-size: 1rem;
402- color: var(--dynamic-accent, #4ade80);404+ color: var(--primary, #4ade80);
403 flex-shrink: 0;405 flex-shrink: 0;
404 }406 }
405 407
@@ -410,12 +412,12 @@
410 outline: none;412 outline: none;
411 font-size: 0.95rem;413 font-size: 0.95rem;
412 font-family: inherit;414 font-family: inherit;
413- color: var(--dynamic-text);415+ color: var(--foreground);
414- caret-color: var(--dynamic-accent, #4ade80);416+ caret-color: var(--primary, #4ade80);
415 }417 }
416 418
417 .search-input::placeholder {419 .search-input::placeholder {
418- color: var(--dynamic-muted);420+ color: var(--muted-foreground);
419 opacity: 0.7;421 opacity: 0.7;
420 }422 }
421 423
@@ -428,16 +430,18 @@
428 430
429 .result-count {431 .result-count {
430 font-size: 0.7rem;432 font-size: 0.7rem;
431- color: var(--dynamic-muted);433+ color: var(--muted-foreground);
432 letter-spacing: 0.05em;434 letter-spacing: 0.05em;
433 }435 }
434 436
435 .esc-hint {437 .esc-hint {
436 padding: 0.2rem 0.4rem;438 padding: 0.2rem 0.4rem;
437 font-size: 0.65rem;439 font-size: 0.65rem;
438- color: var(--dynamic-muted);440+ color: var(--muted-foreground);
439- background: var(--dynamic-bg);441+ background: var(--background);
440- border: 1px solid var(--dynamic-border);442+ border-width: 1px;
443+ border-style: solid;
444+ border-color: var(--border);
441 }445 }
442 446
443 /* Results */447 /* Results */
@@ -454,7 +458,7 @@
454 justify-content: center;458 justify-content: center;
455 gap: 0.5rem;459 gap: 0.5rem;
456 padding: 2.5rem 1rem;460 padding: 2.5rem 1rem;
457- color: var(--dynamic-muted);461+ color: var(--muted-foreground);
458 }462 }
459 463
460 .empty-icon {464 .empty-icon {
@@ -475,7 +479,7 @@
475 padding: 0.7rem 1rem;479 padding: 0.7rem 1rem;
476 background: transparent;480 background: transparent;
477 border: none;481 border: none;
478- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 40%, transparent);482+ border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
479 cursor: pointer;483 cursor: pointer;
480 text-align: left;484 text-align: left;
481 transition: background 80ms ease;485 transition: background 80ms ease;
@@ -486,24 +490,24 @@
486 }490 }
487 491
488 .result-item:hover {492 .result-item:hover {
489- background: color-mix(in srgb, var(--dynamic-surface) 80%, var(--dynamic-bg) 20%);493+ background: color-mix(in srgb, var(--card) 80%, var(--background) 20%);
490 }494 }
491 495
492 .result-item.selected {496 .result-item.selected {
493- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 12%, transparent);497+ background: color-mix(in srgb, var(--primary, #4ade80) 12%, transparent);
494- box-shadow: inset 2px 0 0 var(--dynamic-accent, #4ade80);498+ box-shadow: inset 2px 0 0 var(--primary, #4ade80);
495 }499 }
496 500
497 .item-icon {501 .item-icon {
498 font-size: 1rem;502 font-size: 1rem;
499- color: var(--dynamic-muted);503+ color: var(--muted-foreground);
500 flex-shrink: 0;504 flex-shrink: 0;
501 width: 1.5rem;505 width: 1.5rem;
502 text-align: center;506 text-align: center;
503 }507 }
504 508
505 .result-item.selected .item-icon {509 .result-item.selected .item-icon {
506- color: var(--dynamic-accent, #4ade80);510+ color: var(--primary, #4ade80);
507 }511 }
508 512
509 .item-content {513 .item-content {
@@ -516,7 +520,7 @@
516 520
517 .item-label {521 .item-label {
518 font-size: 0.85rem;522 font-size: 0.85rem;
519- color: var(--dynamic-text);523+ color: var(--foreground);
520 white-space: nowrap;524 white-space: nowrap;
521 overflow: hidden;525 overflow: hidden;
522 text-overflow: ellipsis;526 text-overflow: ellipsis;
@@ -524,7 +528,7 @@
524 528
525 .item-description {529 .item-description {
526 font-size: 0.72rem;530 font-size: 0.72rem;
527- color: var(--dynamic-muted);531+ color: var(--muted-foreground);
528 white-space: nowrap;532 white-space: nowrap;
529 overflow: hidden;533 overflow: hidden;
530 text-overflow: ellipsis;534 text-overflow: ellipsis;
@@ -533,15 +537,17 @@
533 .item-shortcut {537 .item-shortcut {
534 padding: 0.2rem 0.45rem;538 padding: 0.2rem 0.45rem;
535 font-size: 0.65rem;539 font-size: 0.65rem;
536- color: var(--dynamic-muted);540+ color: var(--muted-foreground);
537- background: var(--dynamic-bg);541+ background: var(--background);
538- border: 1px solid var(--dynamic-border);542+ border-width: 1px;
543+ border-style: solid;
544+ border-color: var(--border);
539 flex-shrink: 0;545 flex-shrink: 0;
540 }546 }
541 547
542 .result-item.selected .item-shortcut {548 .result-item.selected .item-shortcut {
543- border-color: color-mix(in srgb, var(--dynamic-accent, #4ade80) 40%, var(--dynamic-border) 60%);549+ border-color: color-mix(in srgb, var(--primary, #4ade80) 40%, var(--border) 60%);
544- color: var(--dynamic-text);550+ color: var(--foreground);
545 }551 }
546 552
547 /* Footer */553 /* Footer */
@@ -551,8 +557,8 @@
551 justify-content: center;557 justify-content: center;
552 gap: 1.5rem;558 gap: 1.5rem;
553 padding: 0.65rem 1rem;559 padding: 0.65rem 1rem;
554- border-top: 1px solid var(--dynamic-border);560+ border-top: 1px solid var(--border);
555- background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);561+ background: color-mix(in srgb, var(--background) 70%, transparent);
556 }562 }
557 563
558 .hint-group {564 .hint-group {
@@ -560,14 +566,16 @@
560 align-items: center;566 align-items: center;
561 gap: 0.35rem;567 gap: 0.35rem;
562 font-size: 0.68rem;568 font-size: 0.68rem;
563- color: var(--dynamic-muted);569+ color: var(--muted-foreground);
564 }570 }
565 571
566 .hint-group kbd {572 .hint-group kbd {
567 padding: 0.15rem 0.35rem;573 padding: 0.15rem 0.35rem;
568 font-size: 0.62rem;574 font-size: 0.62rem;
569- background: var(--dynamic-bg);575+ background: var(--background);
570- border: 1px solid var(--dynamic-border);576+ border-width: 1px;
577+ border-style: solid;
578+ border-color: var(--border);
571 }579 }
572 580
573 /* Scrollbar */581 /* Scrollbar */
@@ -580,11 +588,11 @@
580 }588 }
581 589
582 .palette-results::-webkit-scrollbar-thumb {590 .palette-results::-webkit-scrollbar-thumb {
583- background: var(--dynamic-border);591+ background: var(--border);
584 }592 }
585 593
586 .palette-results::-webkit-scrollbar-thumb:hover {594 .palette-results::-webkit-scrollbar-thumb:hover {
587- background: var(--dynamic-muted);595+ background: var(--muted-foreground);
588 }596 }
589 597
590 @media (max-width: 480px) {598 @media (max-width: 480px) {
M webui/src/pages/homepage/shell/HomepageShell.svelte +62 -46
@@ -94,8 +94,8 @@
9494 <meta name="description" content="Dumber Browser - Homepage" />
9595 {@html `<style>
9696 html, body { margin: 0; padding: 0; }
97- html { background: var(--dynamic-bg, #0a0a0a); }
98- body { background: var(--dynamic-bg, #0a0a0a); color: var(--dynamic-text, #e5e5e5); }
97+ html { background: var(--background, #0a0a0a); }
98+ body { background: var(--background, #0a0a0a); color: var(--foreground, #e5e5e5); }
9999 /* Disable GTK/WebKit default focus rings - we handle focus styling ourselves */
100100 *:focus { outline: none !important; }
101101 *:focus-visible { outline: none !important; }
@@ -270,8 +270,8 @@
270270 flex-direction: column;
271271 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
272272 line-height: 1.5;
273- color: var(--dynamic-text);
274- background: var(--dynamic-bg);
273+ color: var(--foreground);
274+ background: var(--background);
275275 overflow: hidden;
276276 }
277277
@@ -281,7 +281,7 @@
281281 grid-template-rows: auto 1fr auto;
282282 width: 100%;
283283 height: 100%;
284- background: color-mix(in srgb, var(--dynamic-surface) 60%, var(--dynamic-bg) 40%);
284+ background: color-mix(in srgb, var(--card) 60%, var(--background) 40%);
285285 }
286286
287287 /* Dark mode: subtle shadow */
@@ -296,8 +296,8 @@
296296 justify-content: space-between;
297297 gap: 1rem;
298298 padding: 0.75rem 1rem;
299- border-bottom: 1px solid var(--dynamic-border);
300- background: color-mix(in srgb, var(--dynamic-bg) 90%, var(--dynamic-surface) 10%);
299+ border-bottom: 1px solid var(--border);
300+ background: color-mix(in srgb, var(--background) 90%, var(--card) 10%);
301301 position: sticky;
302302 top: 0;
303303 z-index: 5;
@@ -312,7 +312,7 @@
312312 .terminal-path {
313313 font-size: 0.8rem;
314314 font-weight: 600;
315- color: var(--dynamic-accent, #4ade80);
315+ color: var(--primary, #4ade80);
316316 letter-spacing: 0.05em;
317317 }
318318
@@ -329,7 +329,7 @@
329329 font-size: 0.7rem;
330330 font-weight: 500;
331331 letter-spacing: 0.1em;
332- color: var(--dynamic-muted);
332+ color: var(--muted-foreground);
333333 background: transparent;
334334 border: 1px solid transparent;
335335 cursor: pointer;
@@ -337,20 +337,20 @@
337337 }
338338
339339 .tab-button:hover {
340- color: var(--dynamic-text);
341- background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);
340+ color: var(--foreground);
341+ background: color-mix(in srgb, var(--card) 50%, transparent);
342342 }
343343
344344 .tab-button:focus-visible {
345- color: var(--dynamic-text);
346- border-color: var(--dynamic-accent, #4ade80);
347- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 15%, transparent);
345+ color: var(--foreground);
346+ border-color: var(--primary, #4ade80);
347+ background: color-mix(in srgb, var(--primary, #4ade80) 15%, transparent);
348348 }
349349
350350 .tab-button.active {
351- color: var(--dynamic-text);
352- background: var(--dynamic-surface);
353- border-color: var(--dynamic-border);
351+ color: var(--foreground);
352+ background: var(--card);
353+ border-color: var(--border);
354354 }
355355
356356 .header-right {
@@ -367,27 +367,31 @@
367367 font-size: 0.7rem;
368368 font-weight: 500;
369369 letter-spacing: 0.08em;
370- color: var(--dynamic-muted);
370+ color: var(--muted-foreground);
371371 background: transparent;
372- border: 1px solid var(--dynamic-border);
372+ border-width: 1px;
373+ border-style: solid;
374+ border-color: var(--border);
373375 cursor: pointer;
374376 transition: all 120ms ease;
375377 }
376378
377379 .action-button:hover,
378380 .action-button:focus-visible {
379- color: var(--dynamic-text);
380- border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
381- background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);
381+ color: var(--foreground);
382+ border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 50%);
383+ background: color-mix(in srgb, var(--card) 30%, transparent);
382384 outline: none;
383385 }
384386
385387 .kbd-hint {
386388 padding: 0.15rem 0.35rem;
387389 font-size: 0.65rem;
388- color: var(--dynamic-muted);
389- background: var(--dynamic-bg);
390- border: 1px solid var(--dynamic-border);
390+ color: var(--muted-foreground);
391+ background: var(--background);
392+ border-width: 1px;
393+ border-style: solid;
394+ border-color: var(--border);
391395 margin-left: 0.25rem;
392396 }
393397
@@ -397,17 +401,19 @@
397401 justify-content: center;
398402 width: 2.25rem;
399403 height: 2.25rem;
400- color: var(--dynamic-muted);
404+ color: var(--muted-foreground);
401405 background: transparent;
402- border: 1px solid var(--dynamic-border);
406+ border-width: 1px;
407+ border-style: solid;
408+ border-color: var(--border);
403409 cursor: pointer;
404410 transition: all 120ms ease;
405411 }
406412
407413 .theme-toggle:hover,
408414 .theme-toggle:focus-visible {
409- color: var(--dynamic-text);
410- border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
415+ color: var(--foreground);
416+ border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 50%);
411417 outline: none;
412418 }
413419
@@ -421,7 +427,7 @@
421427 flex-direction: column;
422428 min-height: 0;
423429 overflow: hidden;
424- background: var(--dynamic-bg);
430+ background: var(--background);
425431 }
426432
427433 .terminal-body.scrollable {
@@ -436,12 +442,12 @@
436442 align-items: center;
437443 justify-content: center;
438444 gap: 0.5rem;
439- color: var(--dynamic-muted);
445+ color: var(--muted-foreground);
440446 font-size: 1.25rem;
441447 }
442448
443449 .shell-prompt {
444- color: var(--dynamic-accent, #4ade80);
450+ color: var(--primary, #4ade80);
445451 }
446452
447453 .shell-cursor {
@@ -473,8 +479,10 @@
473479 width: 100%;
474480 max-width: 420px;
475481 margin: 1rem;
476- background: var(--dynamic-surface);
477- border: 1px solid var(--dynamic-border);
482+ background: var(--card);
483+ border-width: 1px;
484+ border-style: solid;
485+ border-color: var(--border);
478486 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
479487 animation: modal-in 200ms ease;
480488 }
@@ -491,8 +499,10 @@
491499 align-items: center;
492500 gap: 0.6rem;
493501 padding: 0.85rem 1rem;
494- border-bottom: 1px solid var(--dynamic-border);
495- background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);
502+ border-bottom-width: 1px;
503+ border-bottom-style: solid;
504+ border-bottom-color: var(--border);
505+ background: color-mix(in srgb, var(--background) 80%, transparent);
496506 }
497507
498508 .modal-icon {
@@ -504,14 +514,14 @@
504514 font-size: 0.75rem;
505515 font-weight: 600;
506516 letter-spacing: 0.1em;
507- color: var(--dynamic-text);
517+ color: var(--foreground);
508518 }
509519
510520 .modal-message {
511521 margin: 0;
512522 padding: 1.25rem 1rem;
513523 font-size: 0.85rem;
514- color: var(--dynamic-text);
524+ color: var(--foreground);
515525 line-height: 1.6;
516526 }
517527
@@ -519,8 +529,10 @@
519529 display: flex;
520530 gap: 0.5rem;
521531 padding: 0.85rem 1rem;
522- border-top: 1px solid var(--dynamic-border);
523- background: color-mix(in srgb, var(--dynamic-bg) 50%, transparent);
532+ border-top-width: 1px;
533+ border-top-style: solid;
534+ border-top-color: var(--border);
535+ background: color-mix(in srgb, var(--background) 50%, transparent);
524536 }
525537
526538 .modal-btn {
@@ -533,7 +545,9 @@
533545 font-size: 0.72rem;
534546 font-weight: 500;
535547 letter-spacing: 0.08em;
536- border: 1px solid var(--dynamic-border);
548+ border-width: 1px;
549+ border-style: solid;
550+ border-color: var(--border);
537551 cursor: pointer;
538552 transition: all 120ms ease;
539553 }
@@ -541,19 +555,21 @@
541555 .modal-btn kbd {
542556 padding: 0.1rem 0.3rem;
543557 font-size: 0.6rem;
544- background: var(--dynamic-bg);
545- border: 1px solid var(--dynamic-border);
558+ background: var(--background);
559+ border-width: 1px;
560+ border-style: solid;
561+ border-color: var(--border);
546562 opacity: 0.7;
547563 }
548564
549565 .modal-btn-cancel {
550- color: var(--dynamic-muted);
566+ color: var(--muted-foreground);
551567 background: transparent;
552568 }
553569
554570 .modal-btn-cancel:hover {
555- color: var(--dynamic-text);
556- background: color-mix(in srgb, var(--dynamic-surface) 40%, transparent);
571+ color: var(--foreground);
572+ background: color-mix(in srgb, var(--card) 40%, transparent);
557573 }
558574
559575 .modal-btn-confirm {
@@ -94,8 +94,8 @@
94 <meta name="description" content="Dumber Browser - Homepage" />94 <meta name="description" content="Dumber Browser - Homepage" />
95 {@html `<style>95 {@html `<style>
96 html, body { margin: 0; padding: 0; }96 html, body { margin: 0; padding: 0; }
97- html { background: var(--dynamic-bg, #0a0a0a); }97+ html { background: var(--background, #0a0a0a); }
98- body { background: var(--dynamic-bg, #0a0a0a); color: var(--dynamic-text, #e5e5e5); }98+ body { background: var(--background, #0a0a0a); color: var(--foreground, #e5e5e5); }
99 /* Disable GTK/WebKit default focus rings - we handle focus styling ourselves */99 /* Disable GTK/WebKit default focus rings - we handle focus styling ourselves */
100 *:focus { outline: none !important; }100 *:focus { outline: none !important; }
101 *:focus-visible { outline: none !important; }101 *:focus-visible { outline: none !important; }
@@ -270,8 +270,8 @@
270 flex-direction: column;270 flex-direction: column;
271 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;271 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
272 line-height: 1.5;272 line-height: 1.5;
273- color: var(--dynamic-text);273+ color: var(--foreground);
274- background: var(--dynamic-bg);274+ background: var(--background);
275 overflow: hidden;275 overflow: hidden;
276 }276 }
277 277
@@ -281,7 +281,7 @@
281 grid-template-rows: auto 1fr auto;281 grid-template-rows: auto 1fr auto;
282 width: 100%;282 width: 100%;
283 height: 100%;283 height: 100%;
284- background: color-mix(in srgb, var(--dynamic-surface) 60%, var(--dynamic-bg) 40%);284+ background: color-mix(in srgb, var(--card) 60%, var(--background) 40%);
285 }285 }
286 286
287 /* Dark mode: subtle shadow */287 /* Dark mode: subtle shadow */
@@ -296,8 +296,8 @@
296 justify-content: space-between;296 justify-content: space-between;
297 gap: 1rem;297 gap: 1rem;
298 padding: 0.75rem 1rem;298 padding: 0.75rem 1rem;
299- border-bottom: 1px solid var(--dynamic-border);299+ border-bottom: 1px solid var(--border);
300- background: color-mix(in srgb, var(--dynamic-bg) 90%, var(--dynamic-surface) 10%);300+ background: color-mix(in srgb, var(--background) 90%, var(--card) 10%);
301 position: sticky;301 position: sticky;
302 top: 0;302 top: 0;
303 z-index: 5;303 z-index: 5;
@@ -312,7 +312,7 @@
312 .terminal-path {312 .terminal-path {
313 font-size: 0.8rem;313 font-size: 0.8rem;
314 font-weight: 600;314 font-weight: 600;
315- color: var(--dynamic-accent, #4ade80);315+ color: var(--primary, #4ade80);
316 letter-spacing: 0.05em;316 letter-spacing: 0.05em;
317 }317 }
318 318
@@ -329,7 +329,7 @@
329 font-size: 0.7rem;329 font-size: 0.7rem;
330 font-weight: 500;330 font-weight: 500;
331 letter-spacing: 0.1em;331 letter-spacing: 0.1em;
332- color: var(--dynamic-muted);332+ color: var(--muted-foreground);
333 background: transparent;333 background: transparent;
334 border: 1px solid transparent;334 border: 1px solid transparent;
335 cursor: pointer;335 cursor: pointer;
@@ -337,20 +337,20 @@
337 }337 }
338 338
339 .tab-button:hover {339 .tab-button:hover {
340- color: var(--dynamic-text);340+ color: var(--foreground);
341- background: color-mix(in srgb, var(--dynamic-surface) 50%, transparent);341+ background: color-mix(in srgb, var(--card) 50%, transparent);
342 }342 }
343 343
344 .tab-button:focus-visible {344 .tab-button:focus-visible {
345- color: var(--dynamic-text);345+ color: var(--foreground);
346- border-color: var(--dynamic-accent, #4ade80);346+ border-color: var(--primary, #4ade80);
347- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 15%, transparent);347+ background: color-mix(in srgb, var(--primary, #4ade80) 15%, transparent);
348 }348 }
349 349
350 .tab-button.active {350 .tab-button.active {
351- color: var(--dynamic-text);351+ color: var(--foreground);
352- background: var(--dynamic-surface);352+ background: var(--card);
353- border-color: var(--dynamic-border);353+ border-color: var(--border);
354 }354 }
355 355
356 .header-right {356 .header-right {
@@ -367,27 +367,31 @@
367 font-size: 0.7rem;367 font-size: 0.7rem;
368 font-weight: 500;368 font-weight: 500;
369 letter-spacing: 0.08em;369 letter-spacing: 0.08em;
370- color: var(--dynamic-muted);370+ color: var(--muted-foreground);
371 background: transparent;371 background: transparent;
372- border: 1px solid var(--dynamic-border);372+ border-width: 1px;
373+ border-style: solid;
374+ border-color: var(--border);
373 cursor: pointer;375 cursor: pointer;
374 transition: all 120ms ease;376 transition: all 120ms ease;
375 }377 }
376 378
377 .action-button:hover,379 .action-button:hover,
378 .action-button:focus-visible {380 .action-button:focus-visible {
379- color: var(--dynamic-text);381+ color: var(--foreground);
380- border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);382+ border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 50%);
381- background: color-mix(in srgb, var(--dynamic-surface) 30%, transparent);383+ background: color-mix(in srgb, var(--card) 30%, transparent);
382 outline: none;384 outline: none;
383 }385 }
384 386
385 .kbd-hint {387 .kbd-hint {
386 padding: 0.15rem 0.35rem;388 padding: 0.15rem 0.35rem;
387 font-size: 0.65rem;389 font-size: 0.65rem;
388- color: var(--dynamic-muted);390+ color: var(--muted-foreground);
389- background: var(--dynamic-bg);391+ background: var(--background);
390- border: 1px solid var(--dynamic-border);392+ border-width: 1px;
393+ border-style: solid;
394+ border-color: var(--border);
391 margin-left: 0.25rem;395 margin-left: 0.25rem;
392 }396 }
393 397
@@ -397,17 +401,19 @@
397 justify-content: center;401 justify-content: center;
398 width: 2.25rem;402 width: 2.25rem;
399 height: 2.25rem;403 height: 2.25rem;
400- color: var(--dynamic-muted);404+ color: var(--muted-foreground);
401 background: transparent;405 background: transparent;
402- border: 1px solid var(--dynamic-border);406+ border-width: 1px;
407+ border-style: solid;
408+ border-color: var(--border);
403 cursor: pointer;409 cursor: pointer;
404 transition: all 120ms ease;410 transition: all 120ms ease;
405 }411 }
406 412
407 .theme-toggle:hover,413 .theme-toggle:hover,
408 .theme-toggle:focus-visible {414 .theme-toggle:focus-visible {
409- color: var(--dynamic-text);415+ color: var(--foreground);
410- border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);416+ border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 50%);
411 outline: none;417 outline: none;
412 }418 }
413 419
@@ -421,7 +427,7 @@
421 flex-direction: column;427 flex-direction: column;
422 min-height: 0;428 min-height: 0;
423 overflow: hidden;429 overflow: hidden;
424- background: var(--dynamic-bg);430+ background: var(--background);
425 }431 }
426 432
427 .terminal-body.scrollable {433 .terminal-body.scrollable {
@@ -436,12 +442,12 @@
436 align-items: center;442 align-items: center;
437 justify-content: center;443 justify-content: center;
438 gap: 0.5rem;444 gap: 0.5rem;
439- color: var(--dynamic-muted);445+ color: var(--muted-foreground);
440 font-size: 1.25rem;446 font-size: 1.25rem;
441 }447 }
442 448
443 .shell-prompt {449 .shell-prompt {
444- color: var(--dynamic-accent, #4ade80);450+ color: var(--primary, #4ade80);
445 }451 }
446 452
447 .shell-cursor {453 .shell-cursor {
@@ -473,8 +479,10 @@
473 width: 100%;479 width: 100%;
474 max-width: 420px;480 max-width: 420px;
475 margin: 1rem;481 margin: 1rem;
476- background: var(--dynamic-surface);482+ background: var(--card);
477- border: 1px solid var(--dynamic-border);483+ border-width: 1px;
484+ border-style: solid;
485+ border-color: var(--border);
478 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);486 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
479 animation: modal-in 200ms ease;487 animation: modal-in 200ms ease;
480 }488 }
@@ -491,8 +499,10 @@
491 align-items: center;499 align-items: center;
492 gap: 0.6rem;500 gap: 0.6rem;
493 padding: 0.85rem 1rem;501 padding: 0.85rem 1rem;
494- border-bottom: 1px solid var(--dynamic-border);502+ border-bottom-width: 1px;
495- background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);503+ border-bottom-style: solid;
504+ border-bottom-color: var(--border);
505+ background: color-mix(in srgb, var(--background) 80%, transparent);
496 }506 }
497 507
498 .modal-icon {508 .modal-icon {
@@ -504,14 +514,14 @@
504 font-size: 0.75rem;514 font-size: 0.75rem;
505 font-weight: 600;515 font-weight: 600;
506 letter-spacing: 0.1em;516 letter-spacing: 0.1em;
507- color: var(--dynamic-text);517+ color: var(--foreground);
508 }518 }
509 519
510 .modal-message {520 .modal-message {
511 margin: 0;521 margin: 0;
512 padding: 1.25rem 1rem;522 padding: 1.25rem 1rem;
513 font-size: 0.85rem;523 font-size: 0.85rem;
514- color: var(--dynamic-text);524+ color: var(--foreground);
515 line-height: 1.6;525 line-height: 1.6;
516 }526 }
517 527
@@ -519,8 +529,10 @@
519 display: flex;529 display: flex;
520 gap: 0.5rem;530 gap: 0.5rem;
521 padding: 0.85rem 1rem;531 padding: 0.85rem 1rem;
522- border-top: 1px solid var(--dynamic-border);532+ border-top-width: 1px;
523- background: color-mix(in srgb, var(--dynamic-bg) 50%, transparent);533+ border-top-style: solid;
534+ border-top-color: var(--border);
535+ background: color-mix(in srgb, var(--background) 50%, transparent);
524 }536 }
525 537
526 .modal-btn {538 .modal-btn {
@@ -533,7 +545,9 @@
533 font-size: 0.72rem;545 font-size: 0.72rem;
534 font-weight: 500;546 font-weight: 500;
535 letter-spacing: 0.08em;547 letter-spacing: 0.08em;
536- border: 1px solid var(--dynamic-border);548+ border-width: 1px;
549+ border-style: solid;
550+ border-color: var(--border);
537 cursor: pointer;551 cursor: pointer;
538 transition: all 120ms ease;552 transition: all 120ms ease;
539 }553 }
@@ -541,19 +555,21 @@
541 .modal-btn kbd {555 .modal-btn kbd {
542 padding: 0.1rem 0.3rem;556 padding: 0.1rem 0.3rem;
543 font-size: 0.6rem;557 font-size: 0.6rem;
544- background: var(--dynamic-bg);558+ background: var(--background);
545- border: 1px solid var(--dynamic-border);559+ border-width: 1px;
560+ border-style: solid;
561+ border-color: var(--border);
546 opacity: 0.7;562 opacity: 0.7;
547 }563 }
548 564
549 .modal-btn-cancel {565 .modal-btn-cancel {
550- color: var(--dynamic-muted);566+ color: var(--muted-foreground);
551 background: transparent;567 background: transparent;
552 }568 }
553 569
554 .modal-btn-cancel:hover {570 .modal-btn-cancel:hover {
555- color: var(--dynamic-text);571+ color: var(--foreground);
556- background: color-mix(in srgb, var(--dynamic-surface) 40%, transparent);572+ background: color-mix(in srgb, var(--card) 40%, transparent);
557 }573 }
558 574
559 .modal-btn-confirm {575 .modal-btn-confirm {
M webui/src/pages/homepage/shell/KeyboardHints.svelte +36 -28
@@ -244,8 +244,10 @@
244244 margin: 1rem;
245245 display: flex;
246246 flex-direction: column;
247- background: var(--dynamic-surface);
248- border: 1px solid var(--dynamic-border);
247+ background: var(--card);
248+ border-width: 1px;
249+ border-style: solid;
250+ border-color: var(--border);
249251 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
250252 animation: panel-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
251253 overflow: hidden;
@@ -264,13 +266,13 @@
264266 align-items: center;
265267 gap: 0.6rem;
266268 padding: 0.85rem 1rem;
267- border-bottom: 1px solid var(--dynamic-border);
268- background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);
269+ border-bottom: 1px solid var(--border);
270+ background: color-mix(in srgb, var(--background) 80%, transparent);
269271 }
270272
271273 .hints-icon {
272274 font-size: 1rem;
273- color: var(--dynamic-accent, #4ade80);
275+ color: var(--primary, #4ade80);
274276 }
275277
276278 .hints-title {
@@ -278,7 +280,7 @@
278280 font-size: 0.75rem;
279281 font-weight: 600;
280282 letter-spacing: 0.1em;
281- color: var(--dynamic-text);
283+ color: var(--foreground);
282284 }
283285
284286 .hints-close {
@@ -288,16 +290,18 @@
288290 width: 1.75rem;
289291 height: 1.75rem;
290292 font-size: 1.25rem;
291- color: var(--dynamic-muted);
293+ color: var(--muted-foreground);
292294 background: transparent;
293- border: 1px solid var(--dynamic-border);
295+ border-width: 1px;
296+ border-style: solid;
297+ border-color: var(--border);
294298 cursor: pointer;
295299 transition: all 120ms ease;
296300 }
297301
298302 .hints-close:hover {
299- color: var(--dynamic-text);
300- border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);
303+ color: var(--foreground);
304+ border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 50%);
301305 }
302306
303307 /* Body */
@@ -318,8 +322,8 @@
318322
319323 .hints-section.panel-specific {
320324 padding: 0.75rem;
321- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 8%, transparent);
322- border: 1px solid color-mix(in srgb, var(--dynamic-accent, #4ade80) 25%, var(--dynamic-border) 75%);
325+ background: color-mix(in srgb, var(--primary, #4ade80) 8%, transparent);
326+ border: 1px solid color-mix(in srgb, var(--primary, #4ade80) 25%, var(--border) 75%);
323327 }
324328
325329 .section-title {
@@ -331,16 +335,16 @@
331335 font-weight: 600;
332336 text-transform: uppercase;
333337 letter-spacing: 0.1em;
334- color: var(--dynamic-text);
338+ color: var(--foreground);
335339 }
336340
337341 .section-icon {
338342 font-size: 0.85rem;
339- color: var(--dynamic-muted);
343+ color: var(--muted-foreground);
340344 }
341345
342346 .panel-specific .section-icon {
343- color: var(--dynamic-accent, #4ade80);
347+ color: var(--primary, #4ade80);
344348 }
345349
346350 .hints-grid {
@@ -354,8 +358,8 @@
354358 align-items: center;
355359 gap: 0.6rem;
356360 padding: 0.4rem 0.6rem;
357- background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);
358- border: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
361+ background: color-mix(in srgb, var(--background) 60%, transparent);
362+ border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
359363 }
360364
361365 .hint-keys {
@@ -369,22 +373,24 @@
369373 padding: 0.2rem 0.4rem;
370374 font-size: 0.68rem;
371375 font-family: inherit;
372- color: var(--dynamic-text);
373- background: var(--dynamic-bg);
374- border: 1px solid var(--dynamic-border);
376+ color: var(--foreground);
377+ background: var(--background);
378+ border-width: 1px;
379+ border-style: solid;
380+ border-color: var(--border);
375381 min-width: 1.4rem;
376382 text-align: center;
377383 }
378384
379385 .key-sep {
380386 font-size: 0.6rem;
381- color: var(--dynamic-muted);
387+ color: var(--muted-foreground);
382388 opacity: 0.6;
383389 }
384390
385391 .hint-desc {
386392 font-size: 0.72rem;
387- color: var(--dynamic-muted);
393+ color: var(--muted-foreground);
388394 white-space: nowrap;
389395 overflow: hidden;
390396 text-overflow: ellipsis;
@@ -395,21 +401,23 @@
395401 display: flex;
396402 justify-content: center;
397403 padding: 0.65rem 1rem;
398- border-top: 1px solid var(--dynamic-border);
399- background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);
404+ border-top: 1px solid var(--border);
405+ background: color-mix(in srgb, var(--background) 70%, transparent);
400406 }
401407
402408 .footer-hint {
403409 font-size: 0.68rem;
404- color: var(--dynamic-muted);
410+ color: var(--muted-foreground);
405411 letter-spacing: 0.05em;
406412 }
407413
408414 .footer-hint kbd {
409415 padding: 0.15rem 0.35rem;
410416 font-size: 0.62rem;
411- background: var(--dynamic-bg);
412- border: 1px solid var(--dynamic-border);
417+ background: var(--background);
418+ border-width: 1px;
419+ border-style: solid;
420+ border-color: var(--border);
413421 margin: 0 0.25rem;
414422 }
415423
@@ -423,7 +431,7 @@
423431 }
424432
425433 .hints-body::-webkit-scrollbar-thumb {
426- background: var(--dynamic-border);
434+ background: var(--border);
427435 }
428436
429437 /* Responsive */
@@ -244,8 +244,10 @@
244 margin: 1rem;244 margin: 1rem;
245 display: flex;245 display: flex;
246 flex-direction: column;246 flex-direction: column;
247- background: var(--dynamic-surface);247+ background: var(--card);
248- border: 1px solid var(--dynamic-border);248+ border-width: 1px;
249+ border-style: solid;
250+ border-color: var(--border);
249 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);251 box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
250 animation: panel-in 200ms cubic-bezier(0.16, 1, 0.3, 1);252 animation: panel-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
251 overflow: hidden;253 overflow: hidden;
@@ -264,13 +266,13 @@
264 align-items: center;266 align-items: center;
265 gap: 0.6rem;267 gap: 0.6rem;
266 padding: 0.85rem 1rem;268 padding: 0.85rem 1rem;
267- border-bottom: 1px solid var(--dynamic-border);269+ border-bottom: 1px solid var(--border);
268- background: color-mix(in srgb, var(--dynamic-bg) 80%, transparent);270+ background: color-mix(in srgb, var(--background) 80%, transparent);
269 }271 }
270 272
271 .hints-icon {273 .hints-icon {
272 font-size: 1rem;274 font-size: 1rem;
273- color: var(--dynamic-accent, #4ade80);275+ color: var(--primary, #4ade80);
274 }276 }
275 277
276 .hints-title {278 .hints-title {
@@ -278,7 +280,7 @@
278 font-size: 0.75rem;280 font-size: 0.75rem;
279 font-weight: 600;281 font-weight: 600;
280 letter-spacing: 0.1em;282 letter-spacing: 0.1em;
281- color: var(--dynamic-text);283+ color: var(--foreground);
282 }284 }
283 285
284 .hints-close {286 .hints-close {
@@ -288,16 +290,18 @@
288 width: 1.75rem;290 width: 1.75rem;
289 height: 1.75rem;291 height: 1.75rem;
290 font-size: 1.25rem;292 font-size: 1.25rem;
291- color: var(--dynamic-muted);293+ color: var(--muted-foreground);
292 background: transparent;294 background: transparent;
293- border: 1px solid var(--dynamic-border);295+ border-width: 1px;
296+ border-style: solid;
297+ border-color: var(--border);
294 cursor: pointer;298 cursor: pointer;
295 transition: all 120ms ease;299 transition: all 120ms ease;
296 }300 }
297 301
298 .hints-close:hover {302 .hints-close:hover {
299- color: var(--dynamic-text);303+ color: var(--foreground);
300- border-color: color-mix(in srgb, var(--dynamic-border) 50%, var(--dynamic-text) 50%);304+ border-color: color-mix(in srgb, var(--border) 50%, var(--foreground) 50%);
301 }305 }
302 306
303 /* Body */307 /* Body */
@@ -318,8 +322,8 @@
318 322
319 .hints-section.panel-specific {323 .hints-section.panel-specific {
320 padding: 0.75rem;324 padding: 0.75rem;
321- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 8%, transparent);325+ background: color-mix(in srgb, var(--primary, #4ade80) 8%, transparent);
322- border: 1px solid color-mix(in srgb, var(--dynamic-accent, #4ade80) 25%, var(--dynamic-border) 75%);326+ border: 1px solid color-mix(in srgb, var(--primary, #4ade80) 25%, var(--border) 75%);
323 }327 }
324 328
325 .section-title {329 .section-title {
@@ -331,16 +335,16 @@
331 font-weight: 600;335 font-weight: 600;
332 text-transform: uppercase;336 text-transform: uppercase;
333 letter-spacing: 0.1em;337 letter-spacing: 0.1em;
334- color: var(--dynamic-text);338+ color: var(--foreground);
335 }339 }
336 340
337 .section-icon {341 .section-icon {
338 font-size: 0.85rem;342 font-size: 0.85rem;
339- color: var(--dynamic-muted);343+ color: var(--muted-foreground);
340 }344 }
341 345
342 .panel-specific .section-icon {346 .panel-specific .section-icon {
343- color: var(--dynamic-accent, #4ade80);347+ color: var(--primary, #4ade80);
344 }348 }
345 349
346 .hints-grid {350 .hints-grid {
@@ -354,8 +358,8 @@
354 align-items: center;358 align-items: center;
355 gap: 0.6rem;359 gap: 0.6rem;
356 padding: 0.4rem 0.6rem;360 padding: 0.4rem 0.6rem;
357- background: color-mix(in srgb, var(--dynamic-bg) 60%, transparent);361+ background: color-mix(in srgb, var(--background) 60%, transparent);
358- border: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);362+ border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
359 }363 }
360 364
361 .hint-keys {365 .hint-keys {
@@ -369,22 +373,24 @@
369 padding: 0.2rem 0.4rem;373 padding: 0.2rem 0.4rem;
370 font-size: 0.68rem;374 font-size: 0.68rem;
371 font-family: inherit;375 font-family: inherit;
372- color: var(--dynamic-text);376+ color: var(--foreground);
373- background: var(--dynamic-bg);377+ background: var(--background);
374- border: 1px solid var(--dynamic-border);378+ border-width: 1px;
379+ border-style: solid;
380+ border-color: var(--border);
375 min-width: 1.4rem;381 min-width: 1.4rem;
376 text-align: center;382 text-align: center;
377 }383 }
378 384
379 .key-sep {385 .key-sep {
380 font-size: 0.6rem;386 font-size: 0.6rem;
381- color: var(--dynamic-muted);387+ color: var(--muted-foreground);
382 opacity: 0.6;388 opacity: 0.6;
383 }389 }
384 390
385 .hint-desc {391 .hint-desc {
386 font-size: 0.72rem;392 font-size: 0.72rem;
387- color: var(--dynamic-muted);393+ color: var(--muted-foreground);
388 white-space: nowrap;394 white-space: nowrap;
389 overflow: hidden;395 overflow: hidden;
390 text-overflow: ellipsis;396 text-overflow: ellipsis;
@@ -395,21 +401,23 @@
395 display: flex;401 display: flex;
396 justify-content: center;402 justify-content: center;
397 padding: 0.65rem 1rem;403 padding: 0.65rem 1rem;
398- border-top: 1px solid var(--dynamic-border);404+ border-top: 1px solid var(--border);
399- background: color-mix(in srgb, var(--dynamic-bg) 70%, transparent);405+ background: color-mix(in srgb, var(--background) 70%, transparent);
400 }406 }
401 407
402 .footer-hint {408 .footer-hint {
403 font-size: 0.68rem;409 font-size: 0.68rem;
404- color: var(--dynamic-muted);410+ color: var(--muted-foreground);
405 letter-spacing: 0.05em;411 letter-spacing: 0.05em;
406 }412 }
407 413
408 .footer-hint kbd {414 .footer-hint kbd {
409 padding: 0.15rem 0.35rem;415 padding: 0.15rem 0.35rem;
410 font-size: 0.62rem;416 font-size: 0.62rem;
411- background: var(--dynamic-bg);417+ background: var(--background);
412- border: 1px solid var(--dynamic-border);418+ border-width: 1px;
419+ border-style: solid;
420+ border-color: var(--border);
413 margin: 0 0.25rem;421 margin: 0 0.25rem;
414 }422 }
415 423
@@ -423,7 +431,7 @@
423 }431 }
424 432
425 .hints-body::-webkit-scrollbar-thumb {433 .hints-body::-webkit-scrollbar-thumb {
426- background: var(--dynamic-border);434+ background: var(--border);
427 }435 }
428 436
429 /* Responsive */437 /* Responsive */
M webui/src/pages/homepage/shell/StatusBar.svelte +37 -31
@@ -175,9 +175,9 @@
175175 font-size: 0.68rem;
176176 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
177177 letter-spacing: 0.05em;
178- border-top: 1px solid var(--dynamic-border);
179- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);
180- color: var(--dynamic-muted);
178+ border-top: 1px solid var(--border);
179+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
180+ color: var(--muted-foreground);
181181 }
182182
183183 /* Sections */
@@ -211,8 +211,10 @@
211211 align-items: center;
212212 gap: 0.35rem;
213213 padding: 0.25rem 0.5rem;
214- background: color-mix(in srgb, var(--dynamic-surface) 60%, transparent);
215- border: 1px solid var(--dynamic-border);
214+ background: color-mix(in srgb, var(--card) 60%, transparent);
215+ border-width: 1px;
216+ border-style: solid;
217+ border-color: var(--border);
216218 }
217219
218220 .chip-icon {
@@ -227,20 +229,20 @@
227229
228230 /* Mode chip colors */
229231 .mode-chip[data-color="accent"] {
230- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 15%, transparent);
231- border-color: color-mix(in srgb, var(--dynamic-accent, #4ade80) 40%, var(--dynamic-border) 60%);
232- color: var(--dynamic-accent, #4ade80);
232+ background: color-mix(in srgb, var(--primary, #4ade80) 15%, transparent);
233+ border-color: color-mix(in srgb, var(--primary, #4ade80) 40%, var(--border) 60%);
234+ color: var(--primary, #4ade80);
233235 }
234236
235237 .mode-chip[data-color="warning"] {
236238 background: color-mix(in srgb, #fbbf24 15%, transparent);
237- border-color: color-mix(in srgb, #fbbf24 40%, var(--dynamic-border) 60%);
239+ border-color: color-mix(in srgb, #fbbf24 40%, var(--border) 60%);
238240 color: #fbbf24;
239241 }
240242
241243 .mode-chip[data-color="info"] {
242244 background: color-mix(in srgb, #60a5fa 15%, transparent);
243- border-color: color-mix(in srgb, #60a5fa 40%, var(--dynamic-border) 60%);
245+ border-color: color-mix(in srgb, #60a5fa 40%, var(--border) 60%);
244246 color: #60a5fa;
245247 }
246248
@@ -251,7 +253,7 @@
251253
252254 .prefix-chip[data-color="warning"] {
253255 background: color-mix(in srgb, #fbbf24 15%, transparent);
254- border-color: color-mix(in srgb, #fbbf24 50%, var(--dynamic-border) 50%);
256+ border-color: color-mix(in srgb, #fbbf24 50%, var(--border) 50%);
255257 color: #fbbf24;
256258 }
257259
@@ -260,7 +262,7 @@
260262 font-weight: 700;
261263 padding: 0.1rem 0.25rem;
262264 background: color-mix(in srgb, #fbbf24 25%, transparent);
263- border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--dynamic-border) 60%);
265+ border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--border) 60%);
264266 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
265267 }
266268
@@ -271,7 +273,7 @@
271273 }
272274
273275 @keyframes pulse-border {
274- 0%, 100% { border-color: color-mix(in srgb, #fbbf24 50%, var(--dynamic-border) 50%); }
276+ 0%, 100% { border-color: color-mix(in srgb, #fbbf24 50%, var(--border) 50%); }
275277 50% { border-color: #fbbf24; }
276278 }
277279
@@ -281,23 +283,23 @@
281283 }
282284
283285 .panel-chip {
284- color: var(--dynamic-text);
286+ color: var(--foreground);
285287 }
286288
287289 .panel-chip .chip-icon {
288- color: var(--dynamic-accent, #4ade80);
290+ color: var(--primary, #4ade80);
289291 }
290292
291293 /* Loading */
292294 .loading-chip {
293- color: var(--dynamic-muted);
295+ color: var(--muted-foreground);
294296 }
295297
296298 .loading-spinner {
297299 width: 0.7rem;
298300 height: 0.7rem;
299- border: 1.5px solid var(--dynamic-border);
300- border-top-color: var(--dynamic-accent, #4ade80);
301+ border: 1.5px solid var(--border);
302+ border-top-color: var(--primary, #4ade80);
301303 border-radius: 50%;
302304 animation: spin 0.8s linear infinite;
303305 }
@@ -315,16 +317,16 @@
315317
316318 .stats-count {
317319 font-weight: 600;
318- color: var(--dynamic-text);
320+ color: var(--foreground);
319321 font-variant-numeric: tabular-nums;
320322 }
321323
322324 .stats-count.filtered {
323- color: var(--dynamic-accent, #4ade80);
325+ color: var(--primary, #4ade80);
324326 }
325327
326328 .stats-label {
327- color: var(--dynamic-muted);
329+ color: var(--muted-foreground);
328330 }
329331
330332 .position-group {
@@ -332,22 +334,24 @@
332334 align-items: center;
333335 gap: 0.15rem;
334336 padding: 0.2rem 0.45rem;
335- background: var(--dynamic-bg);
336- border: 1px solid var(--dynamic-border);
337+ background: var(--background);
338+ border-width: 1px;
339+ border-style: solid;
340+ border-color: var(--border);
337341 font-variant-numeric: tabular-nums;
338342 }
339343
340344 .position-current {
341345 font-weight: 600;
342- color: var(--dynamic-text);
346+ color: var(--foreground);
343347 }
344348
345349 .position-sep {
346- color: var(--dynamic-border);
350+ color: var(--border);
347351 }
348352
349353 .position-total {
350- color: var(--dynamic-muted);
354+ color: var(--muted-foreground);
351355 }
352356
353357 /* Hints */
@@ -355,15 +359,17 @@
355359 display: flex;
356360 align-items: center;
357361 gap: 0.25rem;
358- color: var(--dynamic-muted);
362+ color: var(--muted-foreground);
359363 }
360364
361365 .hint-item kbd {
362366 padding: 0.1rem 0.3rem;
363367 font-size: 0.6rem;
364- background: var(--dynamic-bg);
365- border: 1px solid var(--dynamic-border);
366- color: var(--dynamic-text);
368+ background: var(--background);
369+ border-width: 1px;
370+ border-style: solid;
371+ border-color: var(--border);
372+ color: var(--foreground);
367373 }
368374
369375 .hint-item span {
@@ -389,7 +395,7 @@
389395 width: 100%;
390396 justify-content: center;
391397 padding-bottom: 0.35rem;
392- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);
398+ border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
393399 }
394400
395401 .hint-item span {
@@ -175,9 +175,9 @@
175 font-size: 0.68rem;175 font-size: 0.68rem;
176 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;176 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
177 letter-spacing: 0.05em;177 letter-spacing: 0.05em;
178- border-top: 1px solid var(--dynamic-border);178+ border-top: 1px solid var(--border);
179- background: color-mix(in srgb, var(--dynamic-bg) 92%, var(--dynamic-surface) 8%);179+ background: color-mix(in srgb, var(--background) 92%, var(--card) 8%);
180- color: var(--dynamic-muted);180+ color: var(--muted-foreground);
181 }181 }
182 182
183 /* Sections */183 /* Sections */
@@ -211,8 +211,10 @@
211 align-items: center;211 align-items: center;
212 gap: 0.35rem;212 gap: 0.35rem;
213 padding: 0.25rem 0.5rem;213 padding: 0.25rem 0.5rem;
214- background: color-mix(in srgb, var(--dynamic-surface) 60%, transparent);214+ background: color-mix(in srgb, var(--card) 60%, transparent);
215- border: 1px solid var(--dynamic-border);215+ border-width: 1px;
216+ border-style: solid;
217+ border-color: var(--border);
216 }218 }
217 219
218 .chip-icon {220 .chip-icon {
@@ -227,20 +229,20 @@
227 229
228 /* Mode chip colors */230 /* Mode chip colors */
229 .mode-chip[data-color="accent"] {231 .mode-chip[data-color="accent"] {
230- background: color-mix(in srgb, var(--dynamic-accent, #4ade80) 15%, transparent);232+ background: color-mix(in srgb, var(--primary, #4ade80) 15%, transparent);
231- border-color: color-mix(in srgb, var(--dynamic-accent, #4ade80) 40%, var(--dynamic-border) 60%);233+ border-color: color-mix(in srgb, var(--primary, #4ade80) 40%, var(--border) 60%);
232- color: var(--dynamic-accent, #4ade80);234+ color: var(--primary, #4ade80);
233 }235 }
234 236
235 .mode-chip[data-color="warning"] {237 .mode-chip[data-color="warning"] {
236 background: color-mix(in srgb, #fbbf24 15%, transparent);238 background: color-mix(in srgb, #fbbf24 15%, transparent);
237- border-color: color-mix(in srgb, #fbbf24 40%, var(--dynamic-border) 60%);239+ border-color: color-mix(in srgb, #fbbf24 40%, var(--border) 60%);
238 color: #fbbf24;240 color: #fbbf24;
239 }241 }
240 242
241 .mode-chip[data-color="info"] {243 .mode-chip[data-color="info"] {
242 background: color-mix(in srgb, #60a5fa 15%, transparent);244 background: color-mix(in srgb, #60a5fa 15%, transparent);
243- border-color: color-mix(in srgb, #60a5fa 40%, var(--dynamic-border) 60%);245+ border-color: color-mix(in srgb, #60a5fa 40%, var(--border) 60%);
244 color: #60a5fa;246 color: #60a5fa;
245 }247 }
246 248
@@ -251,7 +253,7 @@
251 253
252 .prefix-chip[data-color="warning"] {254 .prefix-chip[data-color="warning"] {
253 background: color-mix(in srgb, #fbbf24 15%, transparent);255 background: color-mix(in srgb, #fbbf24 15%, transparent);
254- border-color: color-mix(in srgb, #fbbf24 50%, var(--dynamic-border) 50%);256+ border-color: color-mix(in srgb, #fbbf24 50%, var(--border) 50%);
255 color: #fbbf24;257 color: #fbbf24;
256 }258 }
257 259
@@ -260,7 +262,7 @@
260 font-weight: 700;262 font-weight: 700;
261 padding: 0.1rem 0.25rem;263 padding: 0.1rem 0.25rem;
262 background: color-mix(in srgb, #fbbf24 25%, transparent);264 background: color-mix(in srgb, #fbbf24 25%, transparent);
263- border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--dynamic-border) 60%);265+ border: 1px solid color-mix(in srgb, #fbbf24 40%, var(--border) 60%);
264 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;266 font-family: ui-monospace, 'Fira Code', 'Cascadia Code', Menlo, Monaco, Consolas, monospace;
265 }267 }
266 268
@@ -271,7 +273,7 @@
271 }273 }
272 274
273 @keyframes pulse-border {275 @keyframes pulse-border {
274- 0%, 100% { border-color: color-mix(in srgb, #fbbf24 50%, var(--dynamic-border) 50%); }276+ 0%, 100% { border-color: color-mix(in srgb, #fbbf24 50%, var(--border) 50%); }
275 50% { border-color: #fbbf24; }277 50% { border-color: #fbbf24; }
276 }278 }
277 279
@@ -281,23 +283,23 @@
281 }283 }
282 284
283 .panel-chip {285 .panel-chip {
284- color: var(--dynamic-text);286+ color: var(--foreground);
285 }287 }
286 288
287 .panel-chip .chip-icon {289 .panel-chip .chip-icon {
288- color: var(--dynamic-accent, #4ade80);290+ color: var(--primary, #4ade80);
289 }291 }
290 292
291 /* Loading */293 /* Loading */
292 .loading-chip {294 .loading-chip {
293- color: var(--dynamic-muted);295+ color: var(--muted-foreground);
294 }296 }
295 297
296 .loading-spinner {298 .loading-spinner {
297 width: 0.7rem;299 width: 0.7rem;
298 height: 0.7rem;300 height: 0.7rem;
299- border: 1.5px solid var(--dynamic-border);301+ border: 1.5px solid var(--border);
300- border-top-color: var(--dynamic-accent, #4ade80);302+ border-top-color: var(--primary, #4ade80);
301 border-radius: 50%;303 border-radius: 50%;
302 animation: spin 0.8s linear infinite;304 animation: spin 0.8s linear infinite;
303 }305 }
@@ -315,16 +317,16 @@
315 317
316 .stats-count {318 .stats-count {
317 font-weight: 600;319 font-weight: 600;
318- color: var(--dynamic-text);320+ color: var(--foreground);
319 font-variant-numeric: tabular-nums;321 font-variant-numeric: tabular-nums;
320 }322 }
321 323
322 .stats-count.filtered {324 .stats-count.filtered {
323- color: var(--dynamic-accent, #4ade80);325+ color: var(--primary, #4ade80);
324 }326 }
325 327
326 .stats-label {328 .stats-label {
327- color: var(--dynamic-muted);329+ color: var(--muted-foreground);
328 }330 }
329 331
330 .position-group {332 .position-group {
@@ -332,22 +334,24 @@
332 align-items: center;334 align-items: center;
333 gap: 0.15rem;335 gap: 0.15rem;
334 padding: 0.2rem 0.45rem;336 padding: 0.2rem 0.45rem;
335- background: var(--dynamic-bg);337+ background: var(--background);
336- border: 1px solid var(--dynamic-border);338+ border-width: 1px;
339+ border-style: solid;
340+ border-color: var(--border);
337 font-variant-numeric: tabular-nums;341 font-variant-numeric: tabular-nums;
338 }342 }
339 343
340 .position-current {344 .position-current {
341 font-weight: 600;345 font-weight: 600;
342- color: var(--dynamic-text);346+ color: var(--foreground);
343 }347 }
344 348
345 .position-sep {349 .position-sep {
346- color: var(--dynamic-border);350+ color: var(--border);
347 }351 }
348 352
349 .position-total {353 .position-total {
350- color: var(--dynamic-muted);354+ color: var(--muted-foreground);
351 }355 }
352 356
353 /* Hints */357 /* Hints */
@@ -355,15 +359,17 @@
355 display: flex;359 display: flex;
356 align-items: center;360 align-items: center;
357 gap: 0.25rem;361 gap: 0.25rem;
358- color: var(--dynamic-muted);362+ color: var(--muted-foreground);
359 }363 }
360 364
361 .hint-item kbd {365 .hint-item kbd {
362 padding: 0.1rem 0.3rem;366 padding: 0.1rem 0.3rem;
363 font-size: 0.6rem;367 font-size: 0.6rem;
364- background: var(--dynamic-bg);368+ background: var(--background);
365- border: 1px solid var(--dynamic-border);369+ border-width: 1px;
366- color: var(--dynamic-text);370+ border-style: solid;
371+ border-color: var(--border);
372+ color: var(--foreground);
367 }373 }
368 374
369 .hint-item span {375 .hint-item span {
@@ -389,7 +395,7 @@
389 width: 100%;395 width: 100%;
390 justify-content: center;396 justify-content: center;
391 padding-bottom: 0.35rem;397 padding-bottom: 0.35rem;
392- border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent);398+ border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
393 }399 }
394 400
395 .hint-item span {401 .hint-item span {

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 8

Tags 42

↑↓ moveenter openesc close