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:
+20
-2
@@ -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);
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user