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

feat(ui): enhance workspace status and diff styling

Browse Source 
This commit updates several UI components to improve visual consistency and readability across various themes. It adds necessary class names to the Git branch display component and significantly refines the CSS for diff markers and general workspace status elements. These changes ensure that semantic colors are maintained on hover states and that key indicators remain highly visible in light mode.

- Updated styling for diff marker focus/hover states
- Improved visual feedback for line patch buttons (stage, unstage, discard)
- Added specific light theme styles for branch indicator and status counters
This commit is contained in:
Christoph Brandau
2026-07-12 23:46:44 +02:00
parent cc805e04bf
commit bad1263dcf
2 changed files with 54 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+53 -4
View File
@@ -5862,6 +5862,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
border-radius: 2px;
transform: translateY(-50%);
box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
appearance: none;
}
.diff-overview-marker.add { color: var(--code-add-strong); background: var(--code-add-strong); }
.diff-overview-marker.delete { color: var(--code-delete-strong); background: var(--code-delete-strong); }
@@ -5871,9 +5872,57 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
}
.diff-overview-marker:hover:not(:disabled),
.diff-overview-marker:focus-visible {
width: 13px;
left: 1px;
filter: brightness(1.18);
outline: 1px solid var(--color-ink);
outline-offset: 1px;
outline: 0;
box-shadow: 0 0 0 1px currentColor, 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
/* Preserve semantic diff colors against global button hover rules. */
.diff-overview .diff-overview-marker.add:hover:not(:disabled),
.diff-overview .diff-overview-marker.add:focus-visible {
border: 0 !important;
color: var(--code-add-strong) !important;
background-color: var(--code-add-strong) !important;
background-image: none !important;
}
.diff-overview .diff-overview-marker.delete:hover:not(:disabled),
.diff-overview .diff-overview-marker.delete:focus-visible {
border: 0 !important;
color: var(--code-delete-strong) !important;
background-color: var(--code-delete-strong) !important;
background-image: none !important;
}
.diff-overview .diff-overview-marker.mixed:hover:not(:disabled),
.diff-overview .diff-overview-marker.mixed:focus-visible {
border: 0 !important;
color: var(--color-accent) !important;
background-color: transparent !important;
background-image: linear-gradient(90deg, var(--code-delete-strong) 0 48%, var(--code-add-strong) 52% 100%) !important;
}
.line-patch-hunk-button.stage:hover:not(:disabled),
.line-patch-hunk-button.unstage:hover:not(:disabled) {
border-color: var(--code-add-strong);
color: var(--code-add-strong);
background: var(--code-add-bg);
}
.line-patch-hunk-button.discard:hover:not(:disabled) {
border-color: var(--code-delete-strong);
color: var(--code-delete-strong);
background: var(--code-delete-bg);
}
/* Footer status must stay readable on the bright theme. */
:root[data-theme="light"] .workspace-statusbar { color: #526078; }
:root[data-theme="light"] .workspace-branch {
color: #172033;
font-weight: 750;
}
:root[data-theme="light"] .workspace-branch svg { color: #0b63e6; }
:root[data-theme="light"] .workspace-statusbar .ahead {
color: #9a5200;
font-weight: 800;
}
:root[data-theme="light"] .workspace-statusbar .behind {
color: #0755c8;
font-weight: 800;
}