Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases 46 Wiki Activity

refactor(ui): centralize sync colors into CSS variables

Browse Source 
Introduce --color-sync-ahead and --color-sync-behind and update sync
indicators to use those variables. Replace hardcoded sync colors with
var() and color-mix() to unify backgrounds, shadows, and graph accents
across themes, and add light-theme overrides to preserve contrast.

- Add theme-level variables for ahead/behind sync colors
- Replace literal color values with var() and color-mix() usages
- Update dashboard styles to reference the new sync variables
This commit is contained in:
Christoph
2026-09-08 07:45:20 +02:00
parent 82a5f16a0c
commit 5aa9d291b6
2 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+30 -21
View File
@@ -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;
}