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

feat(repository-dashboard): add compact PR badge styles with hover/focus and error state

Browse Source 
Add CSS rules for the PR badge in RepositoryDashboard.svelte to provide a compact, padded hit area and a soft outlined hover/focus treatment (using color-mix) instead of a hard filled block. Sizes are tuned for list- and tiles-view, transitions are added for color/border/background, and a .pr-error hover variant applies an error accent. This is a purely presentational change.
This commit is contained in:
Christoph
2026-09-17 18:15:55 +02:00
parent f71a07ab11
commit a9af02a697
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/RepositoryDashboard.svelte
+9
View File
@@ -320,4 +320,13 @@
.tiles-view .favorite-category .card-title{padding-right:30px}
.list-view .card-status .changed,.list-view .card-status .clean{color:var(--color-ink-muted)}
.list-view .card-status .changed>:global(svg){color:#eeb94e}.list-view .card-status .clean>:global(svg){color:#68c878}
/* PR badge: compact, padded hit area with a soft outlined hover instead of a hard filled block. */
.card-actions .pr-badge{box-sizing:border-box;border:1px solid transparent;border-radius:4px;transition:color 120ms ease,background-color 120ms ease,border-color 120ms ease}
.card-actions .pr-badge:hover:not(:disabled){border-color:color-mix(in srgb,var(--color-accent) 28%,transparent);background:color-mix(in srgb,var(--color-accent) 7%,transparent)}
.card-actions .pr-badge:focus-visible{outline:none;border-color:color-mix(in srgb,var(--color-accent) 55%,transparent)}
.list-view .card-actions .pr-badge{min-width:0;height:26px;margin-left:-7px;padding:0 7px;gap:7px}
.list-view .card-actions .pr-badge span{transition:border-color 120ms ease,color 120ms ease}
.list-view .card-actions .pr-badge:hover:not(:disabled) span{border-color:color-mix(in srgb,var(--color-accent) 35%,transparent);color:var(--color-ink)}
.tiles-view .card-actions .pr-badge{width:auto;min-width:42px;padding:0 6px}
.card-actions .pr-badge.pr-error:hover:not(:disabled){border-color:color-mix(in srgb,#e0a35b 30%,transparent);background:color-mix(in srgb,#e0a35b 8%,transparent);color:#e0a35b}
</style>