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
+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 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-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-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); }