From a9af02a69700226b71c907d56c70a012f1607c5e Mon Sep 17 00:00:00 2001 From: Christoph Brandau Date: Thu, 17 Sep 2026 18:15:55 +0200 Subject: [PATCH] feat(repository-dashboard): add compact PR badge styles with hover/focus and error state 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. --- src/lib/components/RepositoryDashboard.svelte | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/lib/components/RepositoryDashboard.svelte b/src/lib/components/RepositoryDashboard.svelte index 6652248..7b70906 100644 --- a/src/lib/components/RepositoryDashboard.svelte +++ b/src/lib/components/RepositoryDashboard.svelte @@ -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}