diff --git a/src/app.css b/src/app.css index bc6e8f5..65fd4bd 100644 --- a/src/app.css +++ b/src/app.css @@ -30,6 +30,8 @@ } :root { + --color-sync-ahead: #e0a040; + --color-sync-behind: #7aacff; --app-color-scheme: dark; --app-bg: #222328; --app-button-bg: #32363d; @@ -743,8 +745,8 @@ .tb-sync-group { display: inline-flex; align-items: center; gap: 4px; min-width: max-content; } .tb-sync { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; flex-shrink: 0; } - .tb-sync.ahead { color: #e0a040; background: rgba(224,160,64,0.13); } - .tb-sync.behind { color: #7aacff; background: rgba(122,172,255,0.13); } + .tb-sync.ahead { color: var(--color-sync-ahead); background: color-mix(in srgb, var(--color-sync-ahead) 13%, transparent); } + .tb-sync.behind { color: var(--color-sync-behind); background: color-mix(in srgb, var(--color-sync-behind) 13%, transparent); } .tb-no-repo { color: var(--color-bar-muted); font-size: 12px; font-style: italic; } @@ -842,8 +844,8 @@ font-size: 9.5px; font-weight: 850; } - .repo-action-count.behind { color: #7aacff; } - .repo-action-count.ahead { color: #e0a040; } + .repo-action-count.behind { color: var(--color-sync-behind); } + .repo-action-count.ahead { color: var(--color-sync-ahead); } .repo-action.sync-primary.publish-local { color: #f0bd6b; background: linear-gradient(180deg, rgba(224,160,64,.1), rgba(224,160,64,.045)); @@ -1305,8 +1307,8 @@ font-style: normal; font-weight: 800; } - .repo-row-meta .ahead { color: #e0a040; background: rgba(224,160,64,0.13); } - .repo-row-meta .behind { color: #7aacff; background: rgba(122,172,255,0.13); } + .repo-row-meta .ahead { color: var(--color-sync-ahead); background: color-mix(in srgb, var(--color-sync-ahead) 13%, transparent); } + .repo-row-meta .behind { color: var(--color-sync-behind); background: color-mix(in srgb, var(--color-sync-behind) 13%, transparent); } .repo-row-icon { min-height: 36px; min-width: 36px; @@ -1823,8 +1825,8 @@ font-weight: 700; white-space: nowrap; } - .sync-stats strong:first-of-type { color: #e0a040; background: rgba(224,160,64,0.13); } - .sync-stats strong:last-of-type { color: #7aacff; background: rgba(122,172,255,0.13); } + .sync-stats strong:first-of-type { color: var(--color-sync-ahead); background: color-mix(in srgb, var(--color-sync-ahead) 13%, transparent); } + .sync-stats strong:last-of-type { color: var(--color-sync-behind); background: color-mix(in srgb, var(--color-sync-behind) 13%, transparent); } .sync-stats span { color: var(--color-ink-dim); background: rgba(94,110,156,0.13); } .sync-stats .sync-local-only { display: inline-flex; @@ -3362,12 +3364,13 @@ opacity: 0.08; } .graph-svg path.graph-segment-ahead { - stroke: #e0a040; - filter: drop-shadow(0 0 3px rgba(224,160,64,0.24)); + stroke: var(--color-sync-ahead); + filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-sync-ahead) 24%, transparent)); } .graph-svg path.graph-segment-behind { + stroke: var(--color-sync-behind); stroke-dasharray: 4 4; - filter: drop-shadow(0 0 3px rgba(122,172,255,0.2)); + filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-sync-behind) 20%, transparent)); } .graph-svg path.graph-ref-connector { opacity: 0.35; @@ -3391,12 +3394,12 @@ box-shadow: none; } .graph-dot.ahead { - background: #e0a040; - box-shadow: 0 0 0 1px rgba(224,160,64,0.42), 0 0 10px rgba(224,160,64,0.16); + background: var(--color-sync-ahead); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-sync-ahead) 42%, transparent), 0 0 10px color-mix(in srgb, var(--color-sync-ahead) 16%, transparent); } .graph-dot.behind { - background: var(--dot-color, #5a8cf8); - box-shadow: 0 0 0 1px var(--dot-color, #5a8cf8), 0 0 10px rgba(122,172,255,0.18); + background: var(--color-sync-behind); + box-shadow: 0 0 0 1px var(--color-sync-behind), 0 0 10px color-mix(in srgb, var(--color-sync-behind) 18%, transparent); } .graph-dot.tip { width: 14px; height: 14px; box-shadow: 0 0 0 1px var(--dot-color, #5a8cf8); } .graph-dot.merge { @@ -3455,10 +3458,10 @@ } .graph-row + .graph-row .commit-body { border-top: 1px solid rgba(226,232,240,0.075); } .graph-row.graph-ahead-row .commit-body { - box-shadow: inset 3px 0 0 rgba(224,160,64,0.72); + box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-sync-ahead) 72%, transparent); } .graph-row.graph-behind-row .commit-body { - box-shadow: inset 3px 0 0 rgba(122,172,255,0.72); + box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-sync-behind) 72%, transparent); } .graph-row:hover .commit-body { background: rgba(30,39,57,0.72); } .graph-row:hover .graph-svg path { opacity: 1; stroke-width: 2.65; } @@ -6739,8 +6742,8 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s .workspace-status-spacer { flex: 1 1 auto; } .workspace-health > span { width: 8px; height: 8px; border-radius: 50%; background: #d9891b; } .workspace-health.clean > span { background: #2da44e; } -.workspace-statusbar .ahead { color: #d9891b; } -.workspace-statusbar .behind { color: var(--color-primary); } +.workspace-statusbar .ahead { color: var(--color-sync-ahead); } +.workspace-statusbar .behind { color: var(--color-sync-behind); } .workspace-statusbar .workspace-local-only { padding: 2px 6px; border: 1px dashed rgba(224,160,64,.42); @@ -7793,11 +7796,11 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s } :root[data-theme="light"] .workspace-branch svg { color: #0b63e6; } :root[data-theme="light"] .workspace-statusbar .ahead { - color: #9a5200; + color: var(--color-sync-ahead); font-weight: 800; } :root[data-theme="light"] .workspace-statusbar .behind { - color: #0755c8; + color: var(--color-sync-behind); font-weight: 800; } :root[data-theme="light"] .repo-action.sync-primary.publish-local, @@ -9059,3 +9062,9 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s padding: 0; justify-content: center; } + +/* Shared sync colors keep every indicator consistent in the light theme. */ +:root[data-theme="light"] { + --color-sync-ahead: #9a5200; + --color-sync-behind: #0755c8; +} diff --git a/src/lib/components/RepositoryDashboard.svelte b/src/lib/components/RepositoryDashboard.svelte index 1f70a16..bdb2092 100644 --- a/src/lib/components/RepositoryDashboard.svelte +++ b/src/lib/components/RepositoryDashboard.svelte @@ -407,7 +407,7 @@ .dashboard-header{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:16px;padding:8px 20px;border-bottom:1px solid var(--color-border-subtle)}.dashboard-header h1{margin:0;font-size:18px;line-height:1.2;font-weight:700}.header-actions,.workspace-tools{display:flex;align-items:center;gap:8px}.header-actions button,.workspace-tools button{display:inline-flex;min-height:30px;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--color-border);background:var(--app-button-bg)}button.primary{border-color:var(--color-primary);background:var(--color-primary);color:#fff} .dashboard-toolbar{display:flex;min-height:48px;align-items:center;gap:8px;padding:8px 20px;border-bottom:1px solid var(--color-border-subtle)}.dashboard-search{display:flex;width:300px;height:30px;align-items:center;gap:8px;padding:0 9px;border:1px solid var(--color-border-input);border-radius:var(--ui-radius-sm);color:var(--color-ink-faint);background:var(--app-input-bg)}.dashboard-search:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 14%,transparent)}.dashboard-search :global(svg){flex:0 0 auto}.dashboard-search input{width:100%;min-width:0;height:100%;padding:0;border:0;border-radius:0;outline:0;color:var(--color-ink);background:transparent;box-shadow:none}.dashboard-search input:focus,.dashboard-search input:focus-visible{border:0;outline:0;box-shadow:none}.workspace-tools{margin-left:auto}.workspace-tools :global(.workspace-select){width:240px}.workspace-tools :global(.workspace-select .select-menu-trigger){height:30px;min-height:30px;padding:0 9px;border-color:var(--color-border-input);background:var(--app-input-bg);font-size:12px;font-weight:500}.workspace-tools .workspace-delete{width:30px;min-width:30px;padding:0;border-color:color-mix(in srgb,#df626b 55%,var(--color-border));color:#df747b;background:color-mix(in srgb,#c92f3a 8%,var(--app-button-bg))}.workspace-tools .workspace-delete:hover:not(:disabled){border-color:#df626b;color:#fff;background:#c93b45;box-shadow:0 0 0 2px color-mix(in srgb,#c92f3a 18%,transparent)} .dashboard-summary{padding:8px 20px;color:var(--color-ink-muted)}.dashboard-summary span{padding:0 6px;color:var(--color-ink-faint)}.dashboard-content{flex:1;min-height:0;overflow:auto;padding:0 20px 24px}.dashboard-section+.dashboard-section{margin-top:20px}.section-header{min-height:31px;margin-bottom:6px}.section-toggle{display:flex;width:100%;min-height:31px;align-items:center;justify-content:flex-start;gap:7px;padding:0;border:0;background:transparent;color:var(--color-ink);text-align:left}.section-toggle:hover:not(:disabled){border:0;background:transparent;color:var(--color-ink)}.section-toggle :global(svg){flex:0 0 auto;color:var(--color-ink-muted)}.section-toggle strong{font-size:13px;line-height:1.2;font-weight:750}.section-toggle span{color:var(--color-ink-faint);font-weight:400}.section-toggle i{height:1px;flex:1;background:var(--color-border-subtle)}.category-empty{margin:0;padding:9px 12px;border:1px solid var(--color-border-subtle);color:var(--color-ink-faint);background:var(--color-surface)} - .repo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.repo-card{position:relative;min-width:0;height:138px;border:1px solid var(--color-border);background:var(--color-surface)}.repo-card:hover,.repo-card:focus-within{border-color:var(--color-border-input);background:var(--color-surface-hover)}.card-main{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;gap:7px;padding:12px 104px 11px 14px;border:0;background:transparent;text-align:left}.card-main:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.card-title{display:flex;max-width:100%;align-items:center;gap:8px}.card-title strong{overflow:hidden;font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.card-branch,.card-status,.card-status>span{display:flex;align-items:center;gap:6px}.card-branch{max-width:100%;overflow:hidden;color:var(--color-ink-muted);text-overflow:ellipsis;white-space:nowrap}.card-status{flex-wrap:wrap;gap:8px 18px;margin-top:auto}.card-status :global(.filled){fill:currentColor}.changed,.behind{color:#eeb94e}.clean{color:#68c878}.ahead{color:var(--color-accent)}.muted{color:var(--color-ink-muted)} + .repo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.repo-card{position:relative;min-width:0;height:138px;border:1px solid var(--color-border);background:var(--color-surface)}.repo-card:hover,.repo-card:focus-within{border-color:var(--color-border-input);background:var(--color-surface-hover)}.card-main{display:flex;width:100%;height:100%;flex-direction:column;align-items:flex-start;gap:7px;padding:12px 104px 11px 14px;border:0;background:transparent;text-align:left}.card-main:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.card-title{display:flex;max-width:100%;align-items:center;gap:8px}.card-title strong{overflow:hidden;font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.card-branch,.card-status,.card-status>span{display:flex;align-items:center;gap:6px}.card-branch{max-width:100%;overflow:hidden;color:var(--color-ink-muted);text-overflow:ellipsis;white-space:nowrap}.card-status{flex-wrap:wrap;gap:8px 18px;margin-top:auto}.card-status :global(.filled){fill:currentColor}.changed{color:#eeb94e}.behind{color:var(--color-sync-behind)}.clean{color:#68c878}.ahead{color:var(--color-sync-ahead)}.muted{color:var(--color-ink-muted)} .card-actions{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:2px}.card-actions button{display:grid;width:26px;height:26px;place-items:center;padding:0;border:0;color:var(--color-ink-muted);background:transparent}.card-actions button:hover:not(:disabled){color:var(--color-ink);background:var(--color-surface-dim)}.card-actions button.active{color:var(--color-accent)}.card-actions button.active :global(svg){fill:color-mix(in srgb,var(--color-accent) 22%,transparent)}.card-actions .pr-badge{display:flex;width:auto;min-width:31px;grid-template-columns:none;align-items:center;justify-content:center;gap:4px;padding:0 5px;color:var(--color-ink-faint);font-size:11px}.card-actions .pr-badge:disabled{opacity:.72}.card-actions .pr-badge.has-open-prs{color:var(--color-accent)}.card-actions .pr-badge.pr-error{color:#e0a35b}.card-actions .pr-badge:hover:not(:disabled){color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 9%,transparent)} .dashboard-footer{display:flex;min-height:30px;align-items:center;padding:0 20px;border-top:1px solid var(--color-border-subtle);color:var(--color-ink-muted)} .workspace-dialog{width:min(420px,calc(100vw - 32px));margin:auto;padding:0;border:1px solid var(--color-border);color:var(--color-ink);background:var(--app-dialog-bg);box-shadow:var(--app-dialog-shadow);font-size:12px}.workspace-dialog::backdrop{background:var(--app-dialog-backdrop)}.workspace-dialog form>header,.workspace-dialog form>footer{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--app-dialog-chrome)}.workspace-dialog form>header{border-bottom:1px solid var(--color-border)}.workspace-dialog form>footer{justify-content:flex-end;gap:8px;border-top:1px solid var(--color-border)}.workspace-dialog h2{margin:0;font-size:13px}.workspace-dialog header button{width:26px;height:26px;padding:0;border:0;background:transparent}.workspace-dialog form>label,.workspace-dialog form>input,.workspace-dialog fieldset,.dialog-error{margin-right:12px;margin-left:12px}.workspace-dialog form>label{display:block;margin-top:12px;margin-bottom:5px;color:var(--color-ink-muted)}.workspace-dialog form>input{width:calc(100% - 24px);height:30px;padding:0 8px;border:1px solid var(--color-border-input);color:var(--color-ink);background:var(--app-input-bg)}.dialog-error{margin-top:7px;color:#ed9292}.workspace-dialog fieldset{margin-top:14px;margin-bottom:14px;padding:0;border:0}.workspace-dialog legend{margin-bottom:6px;color:var(--color-ink-muted)}.workspace-repos{max-height:190px;overflow:auto;border:1px solid var(--color-border-subtle)}.workspace-repos label{display:grid;grid-template-columns:auto minmax(100px,auto) 1fr;align-items:center;gap:8px;min-height:32px;padding:4px 8px;border-bottom:1px solid var(--color-border-subtle)}.workspace-repos label:last-child{border-bottom:0}.workspace-repos small{overflow:hidden;color:var(--color-ink-faint);text-overflow:ellipsis;white-space:nowrap}.workspace-dialog footer button{display:inline-flex;min-height:28px;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--color-border);background:var(--app-button-bg)}