style(ui): refine tab and dialog close button visuals
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:
+46
-12
@@ -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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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); }
|
||||||
|
|||||||
Reference in New Issue
Block a user