mirrors/dbx
0
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-10-28 09:45:37 +08:00
Code Activity

fix(tabs): clarify the active group in horizontal tab layouts (#13675)

Browse Source 
* fix(tabs): distinguish the active two-row group

* fix(tabs): apply group focus styling to single-row headers

* fix(tabs): retain faint group rails and outline collapsed counts

* fix(tabs): soften collapsed group count outline

---------

Co-authored-by: zipg <4047349+zipg@users.noreply.github.com>
This commit is contained in:
zipgandzipg authored and GitHub committed 2026-10-27 20:18:37 +08:00
1 parent 8c5a4f2eb6
commit c09662d78e
1 file changed
+50
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/components/layout/appTabBar.css
+50
View File
@@ -1516,6 +1516,56 @@ html.dbx-legacy-webview .vertical-tab-layout .app-tab-pill:not(.tab-group-tab)[d
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab-group-color) 28%, transparent);
}
/* Horizontal group headers share the same focus treatment in both row modes:
* reserve the colored fill and strong underline for the active group while
* retaining a small identity marker and faint underline on peers. */
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) {
color: var(--muted-foreground);
font-weight: 500;
}
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-header-content {
background: transparent;
box-shadow: none;
}
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active):hover .tab-group-header-content {
color: var(--foreground);
background: var(--muted);
}
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active)::after {
opacity: 0.3;
}
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-marker {
opacity: 0.35;
}
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-database-icon {
filter: grayscale(1);
opacity: 0.7;
}
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-count {
color: var(--muted-foreground);
background: color-mix(in srgb, var(--muted-foreground) 12%, transparent);
}
/* A colored ring distinguishes a collapsed group's hidden-tab count. */
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header--collapsed .tab-group-count {
box-shadow: inset 0 0 0 0.6px var(--tab-group-color);
}
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-chevron {
color: inherit;
}
.app-tab-bar:not(.vertical-tab-layout) .tab-group-header--active::after {
height: 2.5px;
opacity: 1;
}
/* Vertical bars use the same neutral-label rule for the active group header. */
.vertical-tab-layout .tab-group-header,
.vertical-tab-layout .tab-group-header--active {