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

refactor(BranchPanel): add per-group accent styling to branch group headers

Browse Source 
Add local/remote classes to the group header buttons and introduce a
--group-accent CSS variable used with color-mix for background, text tint,
hover state, and an inset accent shadow. Local headers use --color-info and
remote headers use --color-accent.

This is a visual-only change (no toggle/behavior changes): group headers now
have a subtle, distinct accent for local vs. remote sections instead of a
uniform muted surface.
This commit is contained in:
Christoph
2026-09-18 20:41:53 +02:00
parent 96f7c9f2df
commit 216b552e61
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/BranchPanel.svelte
+8 -4
View File
@@ -695,7 +695,7 @@
<div class="bp-scroll" bind:this={scrollElement} role="tree" aria-label={t("branches.listLabel")}> <div class="bp-scroll" bind:this={scrollElement} role="tree" aria-label={t("branches.listLabel")}>
<div class="bp-group"> <div class="bp-group">
<button <button
class="bp-group-head" class="bp-group-head local"
type="button" type="button"
onclick={() => { if (!filtering) localOpen = !localOpen; }} onclick={() => { if (!filtering) localOpen = !localOpen; }}
aria-expanded={showLocal} aria-expanded={showLocal}
@@ -717,7 +717,7 @@
<div class="bp-group"> <div class="bp-group">
<button <button
class="bp-group-head" class="bp-group-head remote"
type="button" type="button"
onclick={() => { if (!filtering) remoteOpen = !remoteOpen; }} onclick={() => { if (!filtering) remoteOpen = !remoteOpen; }}
aria-expanded={showRemote} aria-expanded={showRemote}
@@ -932,7 +932,8 @@
border: 0; border: 0;
border-bottom: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
border-radius: 0; border-radius: 0;
background: var(--color-surface); background: color-mix(in srgb, var(--group-accent) 7%, var(--color-surface));
box-shadow: inset 2px 0 color-mix(in srgb, var(--group-accent) 55%, transparent);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
color: var(--color-ink-faint); color: var(--color-ink-faint);
font-size: 10px; font-size: 10px;
@@ -941,7 +942,10 @@
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;
} }
.bp-group-head:hover:not(:disabled) { color: var(--color-ink-muted); background: var(--color-surface); } .bp-group-head.local { --group-accent: var(--color-info); }
.bp-group-head.remote { --group-accent: var(--color-accent); }
.bp-group-head { color: color-mix(in srgb, var(--group-accent) 65%, var(--color-ink-muted)); }
.bp-group-head:hover:not(:disabled) { color: var(--group-accent); background: color-mix(in srgb, var(--group-accent) 12%, var(--color-surface)); }
.bp-group-count { .bp-group-count {
color: var(--color-ink-faint); color: var(--color-ink-faint);
font-size: 10px; font-size: 10px;