style(repo-tabs): refine close button layout and focus state

Improve sizing and interaction of the repository tab close button. The
control now has a consistent 24px circular hit area. Hover and
focus-visible states use a subtle accent color for clarity. Icon size
is reduced to better center the glyph inside the control.

- Make the close button a 24px circular, grid-centered element.
- Add focus-visible and hover color with a subtle accent background.
- Reduce the close icon to 11px to improve visual balance.
This commit is contained in:
2026-08-15 18:51:01 +02:00
parent a7558e457d
commit c8247f2b2a
2 changed files with 21 additions and 3 deletions
+20 -2
View File
@@ -1112,10 +1112,28 @@
background: transparent; background: transparent;
color: var(--color-ink-faint); color: var(--color-ink-faint);
} }
.repo-tab-close { opacity: 0.58; transition: opacity 120ms ease, color 120ms ease, background 120ms ease; } .repo-tab-close {
display: grid;
place-items: center;
align-self: center;
min-width: 24px;
width: 24px;
min-height: 24px;
height: 24px;
flex: 0 0 24px;
aspect-ratio: 1;
margin-right: 6px;
border-radius: 50%;
opacity: 0.58;
transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.repo-tab-wrap:hover .repo-tab-close, .repo-tab-wrap:hover .repo-tab-close,
.repo-tab-wrap.active .repo-tab-close { opacity: 1; } .repo-tab-wrap.active .repo-tab-close { opacity: 1; }
.repo-tab-close:hover:not(:disabled) { color: var(--color-ink); background: var(--color-surface-hover); } .repo-tab-close:hover:not(:disabled),
.repo-tab-close:focus-visible:not(:disabled) {
color: #ff6673;
background: rgba(255, 90, 103, 0.13);
}
.repo-tab-add { .repo-tab-add {
min-width: 44px; min-width: 44px;
border-left: 1px solid var(--color-border-subtle); border-left: 1px solid var(--color-border-subtle);
+1 -1
View File
@@ -58,7 +58,7 @@
aria-label={language === "de" ? `${repo.name} schließen` : `Close ${repo.name}`} aria-label={language === "de" ? `${repo.name} schließen` : `Close ${repo.name}`}
title={language === "de" ? "Repository-Tab schließen" : "Close repository tab"} title={language === "de" ? "Repository-Tab schließen" : "Close repository tab"}
> >
<X size={13} aria-hidden="true" /> <X size={11} aria-hidden="true" />
</button> </button>
</div> </div>
{/each} {/each}