style(ui): refine tab and dialog close button visuals
publish / Build and publish Ubuntu AppImage (release) Successful in 9m31s
publish / Build and publish Windows installer (release) Successful in 10m28s
publish / Build and publish AUR packages (release) Successful in 19m9s

Adjust spacing and sizing for repo tabs and close controls. Add
transitions, larger hit areas, and updated hover/focus styles. Introduce
theme-aware variants and neutral dialog close styling for consistency.
Also update help overlay close to match the new behavior.

- increase close button size and tweak padding for alignment
- add transitions and inset focus/hover visuals with themes
- normalize dialog and help close appearance for consistency
This commit is contained in:
2026-08-31 11:14:56 +02:00
parent 7950edb145
commit 8bec7dfc9a
2 changed files with 48 additions and 13 deletions
+46 -12
View File
@@ -8843,7 +8843,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
.repo-tab { .repo-tab {
min-height: 35px; min-height: 35px;
height: 35px; height: 35px;
padding: 0 31px 0 15px; padding: 0 34px 0 15px;
gap: 6px; gap: 6px;
font-size: 12.5px; font-size: 12.5px;
font-weight: 650; font-weight: 650;
@@ -8869,19 +8869,21 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
.repo-tab-close { .repo-tab-close {
position: absolute; position: absolute;
top: 8px; top: 6px;
right: 6px; right: 5px;
width: 19px; width: 23px;
min-width: 19px; min-width: 23px;
max-width: 19px; max-width: 23px;
height: 19px; height: 23px;
min-height: 19px; min-height: 23px;
max-height: 19px; max-height: 23px;
margin: 0; margin: 0;
border-radius: 2px; border-radius: 3px;
color: var(--color-ink-faint); color: var(--color-ink-faint);
background: transparent; background: transparent;
box-shadow: none;
opacity: 0.62; opacity: 0.62;
transition: opacity 120ms ease, color 120ms ease, background 120ms ease, box-shadow 120ms ease;
} }
.repo-tab-wrap.active .repo-tab-close { opacity: 0.72; } .repo-tab-wrap.active .repo-tab-close { opacity: 0.72; }
@@ -8889,8 +8891,16 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
.repo-tab-wrap:focus-within .repo-tab-close { opacity: 1; } .repo-tab-wrap:focus-within .repo-tab-close { opacity: 1; }
.repo-tab-close:hover:not(:disabled), .repo-tab-close:hover:not(:disabled),
.repo-tab-close:focus-visible:not(:disabled) { .repo-tab-close:focus-visible:not(:disabled) {
color: #e1848b; color: #ffffff;
background: transparent; background: #d93641;
box-shadow: inset 0 0 0 1px #f0646d;
}
:root[data-theme="light"] .repo-tab-close:hover:not(:disabled),
:root[data-theme="light"] .repo-tab-close:focus-visible:not(:disabled) {
color: #ffffff;
background: #c92f3a;
box-shadow: inset 0 0 0 1px #a9212b;
} }
.repo-tab-add { .repo-tab-add {
@@ -8939,3 +8949,27 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
:root:not([data-theme="light"]) .repo-tab.management.active > svg { :root:not([data-theme="light"]) .repo-tab.management.active > svg {
color: #d7dae0; color: #d7dae0;
} }
/* Keep every dialog close action neutral until it is intentionally targeted. */
:root .dialog-close:hover:not(:disabled),
:root .dialog-close:focus-visible:not(:disabled),
:root .dialog-icon-button:hover:not(:disabled),
:root .dialog-icon-button:focus-visible:not(:disabled),
:root .cred-close:hover:not(:disabled),
:root .cred-close:focus-visible:not(:disabled) {
color: #ffffff;
border-color: #f0646d;
background: #d93641;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
:root[data-theme="light"] .dialog-close:hover:not(:disabled),
:root[data-theme="light"] .dialog-close:focus-visible:not(:disabled),
:root[data-theme="light"] .dialog-icon-button:hover:not(:disabled),
:root[data-theme="light"] .dialog-icon-button:focus-visible:not(:disabled),
:root[data-theme="light"] .cred-close:hover:not(:disabled),
:root[data-theme="light"] .cred-close:focus-visible:not(:disabled) {
color: #ffffff;
border-color: #a9212b;
background: #c92f3a;
}
+2 -1
View File
@@ -2116,7 +2116,8 @@
.help-search-icon { position: absolute; left: 12px; display: grid; color: var(--color-ink-faint); pointer-events: none; } .help-search-icon { position: absolute; left: 12px; display: grid; color: var(--color-ink-faint); pointer-events: none; }
.help-search input { width: 100%; height: 40px; padding: 0 68px 0 39px; border-color: var(--color-border-input); border-radius: 8px; background: var(--app-input-bg); color: var(--color-ink); font-size: 12.5px; } .help-search input { width: 100%; height: 40px; padding: 0 68px 0 39px; border-color: var(--color-border-input); border-radius: 8px; background: var(--app-input-bg); color: var(--color-ink); font-size: 12.5px; }
.help-search kbd { position: absolute; right: 8px; } .help-search kbd { position: absolute; right: 8px; }
.help-close { justify-self: end; width: 36px; min-height: 36px; padding: 0; border-color: transparent; border-radius: 7px; background: transparent; color: var(--color-ink-muted); } .help-close { justify-self: end; width: 36px; min-height: 36px; padding: 0; border-color: transparent; border-radius: 7px; background: transparent; color: var(--color-ink-muted); transition: color 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease; }
.help-close:hover:not(:disabled), .help-close:focus-visible:not(:disabled) { color: #fff; border-color: #f0646d; background: #d93641; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.help-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; } .help-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; }
.help-nav { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px 12px; border-right: 1px solid var(--color-border); background: var(--color-surface-dim); } .help-nav { display: flex; flex-direction: column; min-height: 0; padding: 14px 10px 12px; border-right: 1px solid var(--color-border); background: var(--color-surface-dim); }