style(header): session tabs follow the titlebar tab design language

Uniform compact tabs (h-7, 6px radius, 13px medium) that share the strip
width and shrink before scrolling, thin separators between inactive
neighbours that disappear around the active or hovered tab, a
hover-revealed menu button anchored to the tab's end, a soft selection
pill for the active tab, and hidden scrollbars with fade edges. The
active tab is single-line: the project/branch meta row stays only in the
VS Code header, which keeps the plain title.
This commit is contained in:
Bohdan Triapitsyn
2026-08-24 17:41:34 +03:00
parent a3813f57e9
commit 447e43eac5
3 changed files with 47 additions and 35 deletions
+22
View File
@@ -1781,3 +1781,25 @@ html.desktop-runtime [class*="cursor-pointer"] {
html.desktop-runtime .markdown-content [data-openchamber-file-link="true"] {
cursor: default;
}
/* Header session tabs: thin separators between inactive neighbours, hidden
around the active or hovered tab (mirrors the titlebar tab language). */
.session-tab-slot {
position: relative;
}
.session-tab-slot:not(:first-child):not([data-active='true'])::before {
content: '';
position: absolute;
top: 8px;
inset-inline-start: -2.75px;
width: 1.5px;
height: 12px;
border-radius: 9999px;
background: var(--border);
opacity: 0.6;
}
.session-tab-slot[data-active='true'] + .session-tab-slot::before,
.session-tab-slot:not([data-active='true']):hover::before,
.session-tab-slot:not([data-active='true']):hover + .session-tab-slot::before {
display: none;
}