feat(history): enhance commit history UI with richer styling
The commit history panel now renders a more structured commit header, including an avatar, kind badge, and clearer metadata layout. The git graph visuals were also refined with smoother paths and improved hover effects to make the history easier to scan. - Add commit kind/root/merge badges and author initials - Improve graph rendering with curved paths and hover emphasis - Update CSS for commit cards, ref chips, and graph styling
This commit is contained in:
Christoph Brandau
+210
-16
@@ -1427,19 +1427,161 @@
|
||||
.commit-line strong { display: block; overflow: hidden; color: var(--color-ink); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.commit-line span { display: block; overflow: hidden; margin-top: 3px; color: var(--color-ink-dim); font-family: var(--font-mono); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.ref-list { display: flex; flex-wrap: wrap; gap: 4px; }
|
||||
.ref-list span { max-width: 100%; overflow: hidden; padding: 2px 7px; border-radius: 999px; color: var(--color-accent); background: rgba(106,154,255,0.13); border: 1px solid rgba(106,154,255,0.22); font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.commit-card-head {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
.commit-avatar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid rgba(122,172,255,0.28);
|
||||
border-radius: 10px;
|
||||
color: #dce8ff;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(122,172,255,0.2), rgba(65,209,255,0.08)),
|
||||
rgba(18, 22, 38, 0.84);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.16);
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.commit-card-main { display: grid; gap: 4px; min-width: 0; }
|
||||
.commit-title-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
.commit-summary {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
color: #f6f8ff;
|
||||
font-size: 13.5px;
|
||||
font-weight: 800;
|
||||
line-height: 1.28;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.commit-kind {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
padding: 2px 7px;
|
||||
border: 1px solid rgba(94,110,156,0.24);
|
||||
border-radius: 999px;
|
||||
color: var(--color-ink-dim);
|
||||
background: rgba(255,255,255,0.035);
|
||||
font-size: 10px;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.commit-kind.merge { color: #f09de2; border-color: rgba(208,96,192,0.32); background: rgba(208,96,192,0.12); }
|
||||
.commit-kind.root { color: #e0b45c; border-color: rgba(224,180,92,0.3); background: rgba(224,180,92,0.11); }
|
||||
.commit-meta-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
color: var(--color-ink-faint);
|
||||
font-size: 11px;
|
||||
}
|
||||
.commit-meta-line > * { min-width: 0; }
|
||||
.commit-hash {
|
||||
flex: 0 0 auto;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(65,209,255,0.16);
|
||||
border-radius: 6px;
|
||||
color: var(--color-accent);
|
||||
background: rgba(65,209,255,0.075);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.commit-author {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.commit-files { display: grid; gap: 5px; }
|
||||
.commit-files-toggle { justify-content: flex-start; gap: 5px; min-height: 24px; padding: 0 7px; border-color: transparent; background: transparent; color: var(--color-ink-dim); font-size: 11.5px; font-weight: 700; }
|
||||
.ref-list { display: flex; flex-wrap: wrap; gap: 4px; }
|
||||
.ref-list .ref-chip {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
color: var(--color-accent);
|
||||
background: rgba(106,154,255,0.13);
|
||||
border: 1px solid rgba(106,154,255,0.22);
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ref-list .ref-chip.head {
|
||||
color: #061021;
|
||||
border-color: rgba(65,209,255,0.48);
|
||||
background: linear-gradient(135deg, #41d1ff, #7c6cff);
|
||||
box-shadow: 0 0 14px rgba(65,209,255,0.2);
|
||||
}
|
||||
.ref-list .ref-chip.branch { color: #55d886; background: rgba(78,202,118,0.12); border-color: rgba(78,202,118,0.26); }
|
||||
.ref-list .ref-chip.remote { color: #9aa7ff; background: rgba(124,108,255,0.12); border-color: rgba(124,108,255,0.26); }
|
||||
.ref-list .ref-chip.tag { color: #e0b45c; background: rgba(224,180,92,0.12); border-color: rgba(224,180,92,0.28); }
|
||||
|
||||
.commit-files {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
padding: 6px;
|
||||
border: 1px solid rgba(94,110,156,0.14);
|
||||
border-radius: 8px;
|
||||
background: rgba(7,8,16,0.16);
|
||||
}
|
||||
.commit-files-toggle {
|
||||
justify-content: flex-start;
|
||||
gap: 6px;
|
||||
min-height: 26px;
|
||||
padding: 0 8px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--color-ink-dim);
|
||||
font-size: 11.5px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.commit-files-toggle:hover:not(:disabled) { border-color: var(--color-border-subtle); background: var(--color-surface-hover); color: var(--color-ink); }
|
||||
|
||||
.commit-file-list { display: grid; gap: 4px; }
|
||||
.commit-file-button { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; width: 100%; min-height: 28px; padding: 4px 7px; text-align: left; border-color: var(--color-border-subtle); background: rgba(255,255,255,0.025); }
|
||||
.commit-file-button {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
justify-content: stretch;
|
||||
width: 100%;
|
||||
min-height: 30px;
|
||||
padding: 4px 7px;
|
||||
text-align: left;
|
||||
border-color: rgba(94,110,156,0.16);
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
.commit-file-button:hover:not(:disabled) { border-color: rgba(65,209,255,0.22); background: rgba(65,209,255,0.055); }
|
||||
.commit-file-button strong { overflow: hidden; color: var(--color-ink-muted); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.commit-actions { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
|
||||
.commit-actions time { min-width: 0; overflow: hidden; color: var(--color-ink-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.commit-actions time,
|
||||
.commit-time {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--color-ink-faint);
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.commit-action-buttons { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
|
||||
.commit-action-buttons button { flex: 0 0 auto; white-space: nowrap; }
|
||||
.file-history-head { align-items: flex-start; }
|
||||
@@ -1551,29 +1693,81 @@
|
||||
|
||||
/* --- Git graph --- */
|
||||
|
||||
.graph-list { padding: 0; }
|
||||
.graph-list {
|
||||
padding: 0;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(65,209,255,0.04), transparent 22%),
|
||||
var(--color-surface-dim);
|
||||
}
|
||||
|
||||
.graph-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: none; border-radius: 0; background: none; }
|
||||
.graph-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 0;
|
||||
min-height: 86px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
}
|
||||
.graph-row + .graph-row { margin-top: 0; }
|
||||
|
||||
.graph-gutter { position: relative; align-self: stretch; background: var(--color-surface); }
|
||||
.graph-gutter {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
border-right: 1px solid rgba(94,110,156,0.18);
|
||||
background:
|
||||
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.055), transparent 34%),
|
||||
linear-gradient(90deg, rgba(8,10,18,0.48), rgba(22,22,36,0.9));
|
||||
box-shadow: inset -10px 0 16px rgba(0,0,0,0.12);
|
||||
}
|
||||
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
|
||||
.graph-svg path {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
opacity: 0.78;
|
||||
transition: opacity 120ms ease, stroke-width 120ms ease;
|
||||
}
|
||||
.graph-dot {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 999px;
|
||||
background: var(--dot-color, #5a8cf8);
|
||||
border: 2px solid var(--color-surface);
|
||||
box-shadow: 0 0 0 1px var(--dot-color, #5a8cf8);
|
||||
border: 2px solid #111321;
|
||||
box-shadow: 0 0 0 1px var(--dot-color, #5a8cf8), 0 0 14px rgba(65,209,255,0.14);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: transform 120ms ease, box-shadow 120ms ease;
|
||||
}
|
||||
.graph-dot.merge { width: 12px; height: 12px; background: var(--color-surface); border-color: var(--dot-color, #5a8cf8); }
|
||||
.graph-dot.merge { width: 16px; height: 16px; background: var(--color-surface-alt); border-color: var(--dot-color, #5a8cf8); box-shadow: 0 0 0 2px rgba(255,255,255,0.08), 0 0 16px rgba(208,96,192,0.24); }
|
||||
|
||||
.commit-body { display: grid; gap: 7px; min-width: 0; padding: 10px 12px; }
|
||||
.commit-body {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255,255,255,0.035), transparent 34%),
|
||||
rgba(28,29,48,0.55);
|
||||
transition: background 120ms ease;
|
||||
}
|
||||
.graph-row + .graph-row .commit-body { border-top: 1px solid var(--color-border-subtle); }
|
||||
.graph-row:hover .commit-body { background: var(--color-surface-hover); }
|
||||
.graph-row:hover .commit-body {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(65,209,255,0.075), transparent 36%),
|
||||
var(--color-surface-hover);
|
||||
}
|
||||
.graph-row:hover .graph-svg path { opacity: 1; stroke-width: 2.6; }
|
||||
.graph-row:hover .graph-dot { transform: translate(-50%, -50%) scale(1.08); }
|
||||
.graph-row.merge-row .commit-body {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(208,96,192,0.095), transparent 34%),
|
||||
rgba(28,29,48,0.62);
|
||||
}
|
||||
|
||||
/* --- Compare panel --- */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user