Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-08-18 13:17:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

sessions: reuse shared editor tab styles (#329547)

Browse Source 
* sessions: reuse shared editor tab styles

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* sessions: isolate shared tab styles

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Sandeep Somavarapu
2026-08-07 08:22:05 +00:00
committed by GitHub
co-authored by Copilot
parent b6b77233e9
commit a73436f3b2
12 changed files with 209 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/skills/sessions/SKILL.md
+2
View File
@@ -26,6 +26,8 @@ Then read the relevant spec for the area you are changing (see table below). If
## Common Pitfalls
- **Shared visual-module gates must not activate broader layout contracts**: the Agents window may opt into shared editor-tab styles through a tab-specific root class, but must not apply the broad `style-override` class unless it also loads every matching Modern UI layout module. Keep shared tab runtime metrics aware of both gates, and preserve structural behavior such as a sticky add-tab action when removing a Sessions-owned stylesheet.
- **Minimum-size activation across the Sessions/Editor split must be symmetric and layout-aware**: when either part is at minimum width, pointer or keyboard activation expands it by shrinking its sibling to minimum width. In single-pane layout, the Editor grid node's effective minimum includes the visible docked Auxiliary Bar width; using `editorPartView.minimumWidth` alone collapses Details.
- **Do not inject `ISessionsService` into editor-part construction**: the sessions service depends on editor parts through the sessions-part graph, so injecting it into `SinglePaneMainEditorPart` causes recursive service instantiation during startup. Prefer lower-level services such as `ILabelService` when the editor only needs resource presentation.
src/vs/sessions/LAYOUT.md
+2
View File
@@ -261,6 +261,8 @@ Editors open as modal overlays rather than occupying grid space. The configurati
When the editor part is shown in the grid (not as a modal), its title toolbar (`MenuId.EditorTitleLayout`, right of the tabs) hosts layout actions registered in `contrib/editor/browser/editor.contribution.ts`, ordered left-to-right as: open in modal editor, **maximize / restore editor area**, a single **Toggle Details** action for the auxiliary bar (labelled "Toggle Secondary Side Bar" in the non-single-pane layout), and **close editor area**. The auxiliary-bar toggle sits to the right of maximize/restore because it changes the right-hand side of the layout. It reuses the core `workbench.action.toggleAuxiliaryBar` command (already registered in the agents window by the workbench auxiliary bar part, and available in the Command Palette under **View**) surfaced through two `when`-gated menu items in `browser/layoutActions.ts` so the icon flips without rendering a checked/highlighted state: the `right-panel-show` codicon shows when the auxiliary bar is hidden (`AuxiliaryBarVisibleContext` negated, click to show) and the `right-panel-hide` codicon shows when it is visible (click to hide). In the Agents-window tab strip, the editor-actions side first shrinks down to 50px before the tab scroller starts shrinking. When tab actions are placed on the left, tabs retain trailing spacing consistent with the modern editor tab style.
The Agents workbench opts into the shared tab presentation through the tab-specific `modern-ui-tabs` root class and imports `workbench/contrib/styleOverrides/browser/media/tabs.css` directly from its editor contribution. It does not apply the broad `style-override` class, because that class also changes workbench-wide part metrics and requires the complete Modern UI module set. Editor tab DOM, interaction behavior, and presentation therefore stay aligned with the standard VS Code editor window; Sessions owns only the actions contributed to the shared tab strip. Do not copy shared editor-tab rules into a Sessions stylesheet: duplicated presentation immediately drifts when the common editor tab design changes. The shared add-tab host stretches across the tab row's actual hit-target height and remains sticky at the trailing edge so its icon stays aligned and available while tabs scroll.
When the auxiliary bar is hidden the editor becomes the rightmost card and expands into the freed space; the workbench's 10px right gutter still applies, and a `.noauxiliarybar` rule in `browser/media/style.css` restores the editor's right border and right corner radii so it keeps its card appearance.
The single-pane editor group renders its title actions from sessions-owned menus, which shadow the core `MenuId.EditorTitle`. So `editor/title` items contributed by **extensions** would otherwise be dropped. `EditorTitleMenuBridgeContribution` in `contrib/editor/browser/editor.contribution.ts` (active only when `isSinglePaneLayoutEnabled`) bridges them: it listens to `MenuRegistry.onDidChangeMenu(MenuId.EditorTitle)` and mirrors **only** the extension-contributed items into the right-side `Menus.SessionsEditorHeaderSecondary` menu. Extension `navigation` items map to the inline `extension/navigation` group; every other extension group maps to `secondary/extension/<original-group>` so it remains in `...` with its relative grouping preserved. Header actions receive the active editor's original URI as their forwarded argument, matching standard editor-title invocation. Extension items are identified two ways: command items by `item.command.source` (set by the `commands` extension point in `menusExtensionPoint.ts`), and submenu items by their `api:`-prefixed `submenu.id` (extension submenus are registered as `MenuId.for('api:<id>')` by the `submenus` extension point). Core items have neither and are not bridged (they are already dual-contributed where needed). The mirror is kept in sync (a `DisposableStore` is cleared and rebuilt on every menu change) so it tracks extensions registering/unregistering.
src/vs/sessions/browser/workbench.ts
+2
View File
@@ -101,6 +101,7 @@ export interface IWorkbenchOptions {
//#region Layout Classes
enum LayoutClasses {
MODERN_UI_TABS = 'modern-ui-tabs',
SIDEBAR_HIDDEN = 'nosidebar',
MAIN_EDITOR_AREA_HIDDEN = 'nomaineditorarea',
PANEL_HIDDEN = 'nopanel',
@@ -898,6 +899,7 @@ export class Workbench extends Disposable implements IAgentWorkbenchLayoutServic
const workbenchClasses = coalesce([
'monaco-workbench',
'agent-sessions-workbench',
LayoutClasses.MODERN_UI_TABS,
// LayoutClasses.SHELL_GRADIENT_BACKGROUND,
platformClass,
isWeb ? 'web' : undefined,
src/vs/sessions/contrib/editor/browser/editor.contribution.ts
+1 -1
View File
@@ -3,7 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import './media/editorTabs.css';
import '../../../../workbench/contrib/styleOverrides/browser/media/tabs.css';
import './media/editorBreadcrumbs.css';
import './media/editorHeader.css';
import './diffEditor.sessions.contribution.js';
src/vs/sessions/contrib/editor/browser/media/editorTabs.css
-115
View File
@@ -1,115 +0,0 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
/* Agents window editor tab strip styling: the tabs + add-tab ("+") control are
* contributed by the sessions editor contribution (see addTabActions.ts), so their
* appearance lives here next to that feature rather than in the shared editor part. */
.agent-sessions-workbench .part.editor .title.tabs {
background-color: transparent !important;
--editor-group-tab-height: 26px !important;
}
/* Editor tabs: match chat composite bar tab style */
.agent-sessions-workbench .part.editor .tabs-container > .tab {
background-color: transparent !important;
border-right: none !important;
border-radius: var(--vscode-cornerRadius-small);
font-size: var(--vscode-agents-fontSize-label1);
font-weight: var(--vscode-agents-fontWeight-semiBold);
box-shadow: none !important;
padding: var(--agent-sessions-editor-tab-padding, 0 0 0 4px) !important;
--tab-border-top-color: transparent !important;
}
.agent-sessions-workbench .part.editor .tabs-container > .tab.tab-actions-left:not(.sticky-compact) {
--agent-sessions-editor-tab-padding: 0 var(--vscode-spacing-size100) 0 0;
}
.agent-sessions-workbench .part.editor .tabs-container > .tab.cannot-close {
margin-right: var(--vscode-spacing-size40);
}
.agent-sessions-workbench .part.editor .tabs-container > .tab.cannot-close:not(.dirty):not(.sticky-compact) {
--agent-sessions-editor-tab-padding: 0 var(--vscode-spacing-size40);
}
/* Size tabs to their content and never shrink them, so that when more tabs
* exist than fit the container they overflow and the horizontal scrollbar
* appears (matching the default editor behaviour). The default `sizing-fit`
* rule sets `width: 120px; min-width: fit-content; flex-shrink: 0;` — pinning
* tabs at 120px. We instead let the width follow the label (`width: auto`)
* while keeping `flex-shrink: 0` so tabs keep their content width and the tab
* strip scrolls instead of squashing the tabs. */
.agent-sessions-workbench .part.editor .tabs-container > .tab.sizing-fit {
width: auto !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
.agent-sessions-workbench .part.editor .tabs-container > .tab.sizing-fit .monaco-icon-label,
.agent-sessions-workbench .part.editor .tabs-container > .tab.sizing-fit .monaco-icon-label > .monaco-icon-label-container {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Keep the close button reserved within the tab so it remains accessible when
* the tab shrinks. Without this the action sits in an `overflow: hidden`
* container that only reveals on hover, which combined with the smaller tab
* makes the close target hard to hit. */
.agent-sessions-workbench .part.editor .tabs-container > .tab > .tab-actions {
flex: 0 0 auto;
overflow: visible;
}
.agent-sessions-workbench .part.editor .tabs-container > .tabs-bar-add-tab {
position: sticky;
right: 0;
z-index: 9;
display: flex;
align-items: center;
/* Opaque background so tabs scrolling under this sticky button are occluded
* instead of bleeding through it (the tab strip sits on the editor card). */
background: var(--vscode-editor-background);
}
/* Match the "New Chat" (+) button in the session-header chat tab bar: a compact,
* centered, rounded icon button rather than a full-height plain glyph. */
.agent-sessions-workbench .part.editor .tabs-container > .tabs-bar-add-tab .action-label {
width: 22px;
height: 22px;
margin: 0 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--vscode-cornerRadius-small);
color: var(--chat-tab-inactive-foreground, currentColor);
}
.agent-sessions-workbench .part.editor .tabs-container > .tabs-bar-add-tab .action-label:not(.disabled):hover {
background-color: var(--vscode-toolbar-hoverBackground);
color: var(--chat-tab-active-foreground, currentColor);
}
.agent-sessions-workbench .part.editor .tabs-container > .tabs-bar-add-tab .action-label:focus-visible {
outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
outline-offset: calc(-1 * var(--vscode-strokeThickness));
}
.agent-sessions-workbench .part.editor .tabs-and-actions-container {
--tabs-border-bottom-color: transparent !important;
align-items: center;
padding: 4px;
}
.agent-sessions-workbench .part.editor .tabs-container > .tab.active {
background-color: color-mix(in srgb, var(--vscode-foreground) 5%, transparent) !important;
}
.agent-sessions-workbench .part.editor .tabs-container > .tab .tab-border-top-container,
.agent-sessions-workbench .part.editor .tabs-container > .tab .tab-border-bottom-container {
display: none !important;
}
src/vs/workbench/browser/layout.ts
+5 -3
View File
@@ -113,9 +113,10 @@ enum LayoutClasses {
// Presentation class for the Modern UI Update experiment, owned/toggled at
// runtime by `StyleOverridesContribution`. It is *also* applied here at render
// time (see `getLayoutClasses`) because parts read it back during layout (e.g.
// the 32px vs 35px part title height in `PartLayout`, and the editor tab
// height) via `.closest('.style-override')`.
STYLE_OVERRIDE = 'style-override'
// the 32px vs 35px part title height in `PartLayout`).
STYLE_OVERRIDE = 'style-override',
// Module-specific gate shared with the Agents workbench.
MODERN_UI_TABS = 'modern-ui-tabs'
}
interface IPathToOpen extends IPath {
@@ -1928,6 +1929,7 @@ export abstract class Layout extends Disposable implements IWorkbenchLayoutServi
this.isFloatingPanelsEnabled() ? LayoutClasses.FLOATING_PANELS : undefined,
// Also seed the style-override class here (see `LayoutClasses.STYLE_OVERRIDE`).
this.isFloatingPanelsEnabled() ? LayoutClasses.STYLE_OVERRIDE : undefined,
this.isFloatingPanelsEnabled() ? LayoutClasses.MODERN_UI_TABS : undefined,
`panel-position-${positionToString(this.getPanelPosition())}`,
`panel-alignment-${this.getPanelAlignment()}`
]);
src/vs/workbench/browser/parts/editor/editorTabsControl.ts
+7 -7
View File
@@ -103,11 +103,11 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC
private static readonly EDITOR_TAB_HEIGHT = {
normal: 35 as const,
compact: 22 as const,
// Style-override (Modern UI) multi-tab mode adds 4px top + 4px bottom padding to
// Modern UI multi-tab mode adds 4px top + 4px bottom padding to
// the tabs-and-actions-container (tabs.css), so the total title-bar height is the
// --editor-group-tab-height CSS value (24px / 20px) plus that 8px padding.
styleOverride: 32 as const, // 24px tab + 4px top + 4px bottom padding
styleOverrideCompact: 28 as const, // 20px tab + 4px top + 4px bottom padding (20px = minimum to fit 16px icon + 2px padding)
modernUI: 32 as const, // 24px tab + 4px top + 4px bottom padding
modernUICompact: 28 as const, // 20px tab + 4px top + 4px bottom padding (20px = minimum to fit 16px icon + 2px padding)
};
protected editorActionsToolbarContainer: HTMLElement | undefined;
@@ -580,12 +580,12 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC
protected get tabHeight() {
const isCompact = this.groupsView.partOptions.tabHeight === 'compact';
// In style-override multi-tab mode the tabs-and-actions-container gains extra
// In modern multi-tab mode the tabs-and-actions-container gains extra
// padding (tabs.css), so the total height differs from the base values.
// The `.tabs` class is present only when showTabs === 'multiple'; single-tab
// and no-tab modes are not affected by those CSS overrides.
if (this.parent.classList.contains('tabs') && this.parent.closest('.style-override')) {
return isCompact ? EditorTabsControl.EDITOR_TAB_HEIGHT.styleOverrideCompact : EditorTabsControl.EDITOR_TAB_HEIGHT.styleOverride;
if (this.parent.classList.contains('tabs') && this.parent.closest('.modern-ui-tabs')) {
return isCompact ? EditorTabsControl.EDITOR_TAB_HEIGHT.modernUICompact : EditorTabsControl.EDITOR_TAB_HEIGHT.modernUI;
}
return isCompact ? EditorTabsControl.EDITOR_TAB_HEIGHT.compact : EditorTabsControl.EDITOR_TAB_HEIGHT.normal;
}
@@ -605,7 +605,7 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC
protected updateTabHeight(): void {
this.parent.style.setProperty('--editor-group-tab-height', `${this.tabHeight}px`);
// Signal compact mode via a CSS class so the style-override rules in tabs.css
// Signal compact mode via a CSS class so the modern tab rules in tabs.css
// can apply a proportionally smaller --editor-group-tab-height value.
this.parent.classList.toggle('compact-height', this.groupsView.partOptions.tabHeight === 'compact');
}
src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts
+3 -3
View File
@@ -104,7 +104,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
shrink: 80 as const,
fit: 120 as const
};
private static readonly STYLE_OVERRIDE_COMPACT_PINNED_TAB_WIDTH = 28 as const;
private static readonly MODERN_UI_COMPACT_PINNED_TAB_WIDTH = 28 as const;
private static readonly DRAG_OVER_OPEN_TAB_THRESHOLD = 1500;
@@ -2243,11 +2243,11 @@ export class MultiEditorTabsControl extends EditorTabsControl {
}
private getStickyTabWidth(pinnedTabSizing: IEditorPartOptions['pinnedTabSizing']): number {
const hasStyleOverride = Boolean(this.parent.closest('.style-override'));
const hasModernUITabs = Boolean(this.parent.closest('.modern-ui-tabs'));
switch (pinnedTabSizing) {
case 'compact':
return hasStyleOverride ? MultiEditorTabsControl.STYLE_OVERRIDE_COMPACT_PINNED_TAB_WIDTH : MultiEditorTabsControl.TAB_WIDTH.compact;
return hasModernUITabs ? MultiEditorTabsControl.MODERN_UI_COMPACT_PINNED_TAB_WIDTH : MultiEditorTabsControl.TAB_WIDTH.compact;
case 'shrink':
return MultiEditorTabsControl.TAB_WIDTH.shrink;
default:
src/vs/workbench/contrib/styleOverrides/browser/media/tabs.css
+175 -167
View File
@@ -4,19 +4,18 @@
*--------------------------------------------------------------------------------------------*/
/*
* Style-override module: "Agents Window Tabs".
* Style-override module: "Tabs".
*
* Makes the editor tabs in the regular workbench look like the Agents window
* tabs: transparent, rounded, borderless pills with a subtle active highlight.
* Shared modern tab presentation used by the regular workbench and the Agents
* window: transparent, rounded, borderless pills with a subtle active highlight.
*
* All rules are gated behind the `.style-override` class, which the
* StyleOverridesContribution toggles onto the workbench container(s) when the
* `workbench.experimental.modernUI` (Modern UI Update) setting is enabled. Mirrors
* the Agents window styling defined in
* src/vs/sessions/browser/media/style.css.
* All rules are gated behind the tab-specific `.modern-ui-tabs` class.
* StyleOverridesContribution toggles it on regular workbench containers when
* `workbench.experimental.modernUI` is enabled, while the Agents workbench
* applies it independently of the broader Modern UI modules.
*/
.style-override.monaco-workbench {
.modern-ui-tabs.monaco-workbench {
/* Translucent so they blend with whatever surface they overlay (e.g. the composite bar). */
--modern-ui-tab-active-background: color-mix(in srgb, var(--vscode-foreground) 22%, transparent);
--modern-ui-tab-hover-background: color-mix(in srgb, var(--vscode-foreground) 8%, transparent);
@@ -24,14 +23,14 @@
--modern-ui-editor-tab-action-hover-background: color-mix(in srgb, var(--vscode-foreground) 8%, var(--vscode-editor-background));
}
.style-override.monaco-workbench.vs {
.modern-ui-tabs.monaco-workbench.vs {
--modern-ui-tab-active-background: color-mix(in srgb, var(--vscode-foreground) 16%, transparent);
--modern-ui-tab-hover-background: color-mix(in srgb, var(--vscode-foreground) 6%, transparent);
--modern-ui-editor-tab-action-active-background: color-mix(in srgb, var(--vscode-foreground) 16%, var(--vscode-editor-background));
--modern-ui-editor-tab-action-hover-background: color-mix(in srgb, var(--vscode-foreground) 6%, var(--vscode-editor-background));
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs {
background-color: transparent !important;
cursor: default;
--editor-group-tab-height: 24px !important;
@@ -39,11 +38,11 @@
/* Compact tab height: 20px tab + 4px top + 4px bottom padding = 28px total.
* 20px is the minimum to fit the tab action icons (16px codicon + 2px padding on each side). */
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs.compact-height {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs.compact-height {
--editor-group-tab-height: 20px !important;
}
.style-override .part.editor .tabs-container > .tab {
.modern-ui-tabs .part.editor .tabs-container > .tab {
background-color: transparent !important;
border-right: none !important;
border-radius: var(--vscode-cornerRadius-small);
@@ -54,20 +53,20 @@
--tab-border-top-color: transparent !important;
}
.style-override .part.editor .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child {
.modern-ui-tabs .part.editor .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child {
margin-right: calc(var(--last-tab-margin-right) + var(--vscode-spacing-size40)) !important;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab {
min-height: calc(var(--editor-group-tab-height) + var(--vscode-spacing-size20) * 2);
border-block: var(--vscode-spacing-size20) solid transparent;
}
.style-override .part.editor .tabs-and-actions-container.wrapping .tabs-container {
.modern-ui-tabs .part.editor .tabs-and-actions-container.wrapping .tabs-container {
row-gap: 0;
}
.style-override.monaco-workbench .part.editor .tabs-container > .tab > .tab-fill {
.modern-ui-tabs.monaco-workbench .part.editor .tabs-container > .tab > .tab-fill {
display: block;
position: absolute;
inset: 0 var(--vscode-spacing-size20);
@@ -77,17 +76,17 @@
pointer-events: none;
}
.style-override .part.editor .tabs-container > .tab > .tab-label {
.modern-ui-tabs .part.editor .tabs-container > .tab > .tab-label {
position: relative;
z-index: 1;
}
.style-override .part.editor .tabs-container > .tab > .tab-label > .monaco-icon-label-container {
.modern-ui-tabs .part.editor .tabs-container > .tab > .tab-label > .monaco-icon-label-container {
font-weight: var(--vscode-fontWeight-semiBold);
}
.style-override .part.editor .tabs-container > .tab.sticky-compact {
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky-compact {
justify-content: center;
padding: 0 !important;
width: 28px !important;
@@ -96,11 +95,11 @@
flex: 0 0 28px !important;
}
.style-override .part.editor .tabs-container > .tab.sticky-compact > .tab-label {
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky-compact > .tab-label {
flex: 0 1 auto;
}
.style-override .part.editor .tabs-container > .tab.sticky-compact.has-icon > .tab-label {
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky-compact.has-icon > .tab-label {
width: 16px;
min-width: 16px;
max-width: 16px;
@@ -108,46 +107,46 @@
transform: translateX(-1px);
}
.style-override .part.editor .tabs-container > .tab.sticky-compact.has-icon > .tab-label::before {
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky-compact.has-icon > .tab-label::before {
padding-right: 0;
}
.style-override .part.editor .tabs-container > .tab.sticky-compact.has-icon > .tab-label > .monaco-icon-label-container {
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky-compact.has-icon > .tab-label > .monaco-icon-label-container {
display: none;
}
.style-override .part.editor .tabs-container > .tab.sticky-compact.has-icon > .tab-label > .monaco-icon-label-iconpath {
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky-compact.has-icon > .tab-label > .monaco-icon-label-iconpath {
margin-right: 0;
}
.style-override .part.editor .tabs-container > .tab.tab-actions-left:not(.sticky-compact) {
.modern-ui-tabs .part.editor .tabs-container > .tab.tab-actions-left:not(.sticky-compact) {
flex-direction: row;
padding: 0 var(--vscode-spacing-size80) 0 var(--vscode-spacing-size40) !important;
}
.style-override .part.editor .tabs-container > .tab.close-action-off:not(.sticky-compact) {
.modern-ui-tabs .part.editor .tabs-container > .tab.close-action-off:not(.sticky-compact) {
padding: 0 var(--vscode-spacing-size80) 0 var(--vscode-spacing-size40) !important;
}
.style-override .part.editor .tabs-container > .tab.dirty:not(.sticky-compact):not(.tab-actions-left):not(.close-action-off.dirty-border-top),
.style-override .part.editor .tabs-container > .tab.sticky:not(.sticky-compact):not(.pinned-action-off):not(.tab-actions-left) {
.modern-ui-tabs .part.editor .tabs-container > .tab.dirty:not(.sticky-compact):not(.tab-actions-left):not(.close-action-off.dirty-border-top),
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky:not(.sticky-compact):not(.pinned-action-off):not(.tab-actions-left) {
padding-right: var(--vscode-spacing-size280) !important;
}
.style-override .part.editor .tabs-container > .tab.dirty.tab-actions-left:not(.sticky-compact),
.style-override .part.editor .tabs-container > .tab.sticky.tab-actions-left:not(.sticky-compact):not(.pinned-action-off) {
.modern-ui-tabs .part.editor .tabs-container > .tab.dirty.tab-actions-left:not(.sticky-compact),
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky.tab-actions-left:not(.sticky-compact):not(.pinned-action-off) {
padding-left: var(--vscode-spacing-size240) !important;
padding-right: var(--vscode-spacing-size80) !important;
}
.style-override .part.editor .tabs-container > .tab.sizing-fit:not(.sticky-compact) {
.modern-ui-tabs .part.editor .tabs-container > .tab.sizing-fit:not(.sticky-compact) {
width: auto !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
/* Center tabs vertically and strip the bottom border so the pills float. */
.style-override .part.editor .tabs-and-actions-container {
.modern-ui-tabs .part.editor .tabs-and-actions-container {
--tabs-border-bottom-color: transparent !important;
align-items: center;
padding: var(--vscode-spacing-size20) 0 0 var(--vscode-spacing-size20);
@@ -155,93 +154,102 @@
/* In two-tab-bars mode the border-block-width rules below own every vertical gutter, so the
* container must not add its own top padding to either the pinned or the unpinned row. */
.style-override .part.editor .title.two-tab-bars > .tabs-and-actions-container {
.modern-ui-tabs .part.editor .title.two-tab-bars > .tabs-and-actions-container {
padding-top: 0;
}
/* Move the bottom gutter into the scrollable element so the horizontal
* scrollbar sits below the tab pills without increasing total height. */
.style-override .part.editor .tabs-and-actions-container > .monaco-scrollable-element {
.modern-ui-tabs .part.editor .tabs-and-actions-container > .monaco-scrollable-element {
padding-bottom: var(--vscode-spacing-size40);
}
/* Grow the contiguous tab boxes around the fixed-height fills. Their transparent
* borders create visual gaps without introducing dead space between hit targets. */
.style-override.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) {
.modern-ui-tabs.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) {
padding-top: 0;
}
.style-override.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) > .monaco-scrollable-element {
.modern-ui-tabs.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) > .monaco-scrollable-element {
padding-bottom: 0;
}
.style-override.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) .tabs-container,
.style-override.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) .tabs-container > .tab {
.modern-ui-tabs.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) .tabs-container,
.modern-ui-tabs.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) .tabs-container > .tab {
min-height: calc(var(--editor-group-tab-height) + var(--vscode-spacing-size40) * 2);
}
.style-override.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) .tabs-container > .tab {
.modern-ui-tabs.monaco-workbench .part.editor .tabs-and-actions-container:not(.wrapping) .tabs-container > .tab {
border-block: var(--vscode-spacing-size40) solid transparent;
}
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tabs-bar-add-tab {
height: auto;
align-self: stretch;
position: sticky;
right: 0;
z-index: 9;
background: var(--vscode-editor-background);
}
/* Keep 24px fills inside 32px hit targets while avoiding an 8px double gutter
* between separate pinned and unpinned rows. */
.style-override.monaco-workbench .part.editor .title.two-tab-bars > .tabs-and-actions-container:first-child .tabs-container > .tab {
.modern-ui-tabs.monaco-workbench .part.editor .title.two-tab-bars > .tabs-and-actions-container:first-child .tabs-container > .tab {
border-block-width: var(--vscode-spacing-size60) var(--vscode-spacing-size20);
}
.style-override.monaco-workbench .part.editor .title.two-tab-bars > .tabs-and-actions-container:not(:first-child) .tabs-container > .tab {
.modern-ui-tabs.monaco-workbench .part.editor .title.two-tab-bars > .tabs-and-actions-container:not(:first-child) .tabs-container > .tab {
border-block-width: var(--vscode-spacing-size20) var(--vscode-spacing-size60);
}
.style-override .part.editor .tabs-container > .tab .tab-border-bottom-container {
.modern-ui-tabs .part.editor .tabs-container > .tab .tab-border-bottom-container {
display: none !important;
}
/* The fill shares the tab action button's opaque background so the two blend seamlessly. High
* contrast themes keep the fill transparent and communicate state through its stroke instead. */
.style-override.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab:hover:not(.selected):not(.active) > .tab-fill {
.modern-ui-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab:hover:not(.selected):not(.active) > .tab-fill {
background-color: var(--modern-ui-editor-tab-action-hover-background);
}
.style-override.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.selected:not(.active) > .tab-fill {
.modern-ui-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.selected:not(.active) > .tab-fill {
background-color: var(--vscode-tab-selectedBackground);
}
.style-override.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.active > .tab-fill {
.modern-ui-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.active > .tab-fill {
background-color: var(--modern-ui-editor-tab-action-active-background);
}
/* The selected / multi-selected stroke hugs the pill, so it lives on the fill rather than the
* full-height tab box. */
.style-override.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.selected:not(.active).tab-border-top > .tab-fill,
.style-override.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.active.multi-selected.tab-border-top > .tab-fill {
.modern-ui-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.selected:not(.active).tab-border-top > .tab-fill,
.modern-ui-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.active.multi-selected.tab-border-top > .tab-fill {
border: var(--vscode-strokeThickness) solid var(--tab-border-top-color);
}
.style-override.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.selected:not(.active).tab-border-top > .tab-fill {
.modern-ui-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.selected:not(.active).tab-border-top > .tab-fill {
--tab-border-top-color: var(--vscode-tab-selectedBorderTop) !important;
}
.style-override.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.active.multi-selected.tab-border-top > .tab-fill {
.modern-ui-tabs.monaco-workbench:not(:is(.hc-black, .hc-light)) .part.editor .tabs-container > .tab.active.multi-selected.tab-border-top > .tab-fill {
--tab-border-top-color: var(--vscode-tab-activeBorderTop, var(--vscode-tab-selectedBorderTop)) !important;
}
.style-override.monaco-workbench .part.editor .tabs-container > .tab:is(.sizing-shrink, .sizing-fixed) > .tab-label > .monaco-icon-label-container {
.modern-ui-tabs.monaco-workbench .part.editor .tabs-container > .tab:is(.sizing-shrink, .sizing-fixed) > .tab-label > .monaco-icon-label-container {
flex: 1 !important;
min-width: 0;
text-overflow: ellipsis !important;
}
.style-override.monaco-workbench .part.editor .tabs-container > .tab:is(.sizing-shrink, .sizing-fixed) > .tab-label > .monaco-icon-label-container::after {
.modern-ui-tabs.monaco-workbench .part.editor .tabs-container > .tab:is(.sizing-shrink, .sizing-fixed) > .tab-label > .monaco-icon-label-container::after {
display: none;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:is(.sizing-shrink, .sizing-fixed) > .tab-label {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:is(.sizing-shrink, .sizing-fixed) > .tab-label {
padding-right: 0;
}
.style-override.monaco-workbench .part.editor .tabs-container > .tab > .tab-fade-hider {
.modern-ui-tabs.monaco-workbench .part.editor .tabs-container > .tab > .tab-fade-hider {
display: none;
}
@@ -250,7 +258,7 @@
* column. The action surface inherits the tab background while revealed so
* label text and icons beneath it do not compete with the action glyph.
*/
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions {
position: absolute;
z-index: 7;
top: 0;
@@ -263,93 +271,93 @@
pointer-events: none;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions > .monaco-action-bar {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions > .monaco-action-bar {
width: 24px;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-left > .tab-actions {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-left > .tab-actions {
right: auto;
left: 0;
border-radius: var(--vscode-cornerRadius-small) 0 0 var(--vscode-cornerRadius-small);
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-actions {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-actions {
top: var(--vscode-spacing-size20);
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-actions {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-actions {
top: 0;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.close-action-off):hover > .tab-actions,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.close-action-off) > .tab-actions:focus-within {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.close-action-off):hover > .tab-actions,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.close-action-off) > .tab-actions:focus-within {
background-color: var(--modern-ui-editor-tab-action-hover-background);
pointer-events: auto;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:not(.close-action-off):hover > .tab-actions,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:not(.close-action-off) > .tab-actions:focus-within {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:not(.close-action-off):hover > .tab-actions,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:not(.close-action-off) > .tab-actions:focus-within {
background-color: var(--modern-ui-editor-tab-action-active-background);
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active):not(.close-action-off):hover > .tab-actions,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active):not(.close-action-off) > .tab-actions:focus-within {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active):not(.close-action-off):hover > .tab-actions,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active):not(.close-action-off) > .tab-actions:focus-within {
--tab-border-top-color: var(--vscode-tab-selectedBorderTop);
background-color: var(--vscode-tab-selectedBackground);
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected:not(.close-action-off):hover > .tab-actions,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected:not(.close-action-off) > .tab-actions:focus-within {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected:not(.close-action-off):hover > .tab-actions,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected:not(.close-action-off) > .tab-actions:focus-within {
--tab-border-top-color: var(--vscode-tab-activeBorderTop, var(--vscode-tab-selectedBorderTop));
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active).tab-border-top:not(.close-action-off):hover > .tab-actions,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active).tab-border-top:not(.close-action-off) > .tab-actions:focus-within,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected.tab-border-top:not(.close-action-off):hover > .tab-actions,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected.tab-border-top:not(.close-action-off) > .tab-actions:focus-within {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active).tab-border-top:not(.close-action-off):hover > .tab-actions,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active).tab-border-top:not(.close-action-off) > .tab-actions:focus-within,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected.tab-border-top:not(.close-action-off):hover > .tab-actions,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected.tab-border-top:not(.close-action-off) > .tab-actions:focus-within {
border-top: var(--vscode-strokeThickness) solid var(--tab-border-top-color);
border-right: var(--vscode-strokeThickness) solid var(--tab-border-top-color);
border-bottom: var(--vscode-strokeThickness) solid var(--tab-border-top-color);
box-sizing: border-box;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active).tab-border-top.tab-actions-left:not(.close-action-off):hover > .tab-actions,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active).tab-border-top.tab-actions-left:not(.close-action-off) > .tab-actions:focus-within,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected.tab-border-top.tab-actions-left:not(.close-action-off):hover > .tab-actions,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected.tab-border-top.tab-actions-left:not(.close-action-off) > .tab-actions:focus-within {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active).tab-border-top.tab-actions-left:not(.close-action-off):hover > .tab-actions,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active).tab-border-top.tab-actions-left:not(.close-action-off) > .tab-actions:focus-within,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected.tab-border-top.tab-actions-left:not(.close-action-off):hover > .tab-actions,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.multi-selected.tab-border-top.tab-actions-left:not(.close-action-off) > .tab-actions:focus-within {
border-right: 0;
border-left: var(--vscode-strokeThickness) solid var(--tab-border-top-color);
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.dirty):not(.sticky):not(:hover) > .tab-actions .action-label:not(:focus) {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.dirty):not(.sticky):not(:hover) > .tab-actions .action-label:not(:focus) {
opacity: 0;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky:not(.pinned-action-off) > .tab-actions .action-label,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.close-action-off):hover > .tab-actions .action-label,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions .action-label:focus {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky:not(.pinned-action-off) > .tab-actions .action-label,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.close-action-off):hover > .tab-actions .action-label,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions .action-label:focus {
opacity: 1;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty:not(.close-action-off):hover > .tab-actions .action-label.codicon-close::before,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label.codicon-close:focus::before {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty:not(.close-action-off):hover > .tab-actions .action-label.codicon-close::before,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label.codicon-close:focus::before {
content: var(--vscode-icon-close-content);
font-family: var(--vscode-icon-close-font-family);
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty:not(.close-action-off):hover > .tab-actions .action-label.codicon-pinned::before,
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label.codicon-pinned:focus::before {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty:not(.close-action-off):hover > .tab-actions .action-label.codicon-pinned::before,
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label.codicon-pinned:focus::before {
content: var(--vscode-icon-pinned-content);
font-family: var(--vscode-icon-pinned-font-family);
}
/* Keep scrolling tabs from showing through compact pinned pills and their spacing. */
.style-override .part.editor .tabs-container > .tab.sticky-compact {
.modern-ui-tabs .part.editor .tabs-container > .tab.sticky-compact {
background-color: transparent !important;
}
.style-override .part.editor .tabs-and-actions-container > .monaco-scrollable-element > .sticky-tabs-background {
.modern-ui-tabs .part.editor .tabs-and-actions-container > .monaco-scrollable-element > .sticky-tabs-background {
position: absolute;
top: 0;
left: 0;
@@ -360,15 +368,15 @@
pointer-events: none;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container > .monaco-scrollable-element .scrollbar {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container > .monaco-scrollable-element .scrollbar {
z-index: 11;
}
.style-override .part.editor .tabs-container > .tab .tab-border-top-container {
.modern-ui-tabs .part.editor .tabs-container > .tab .tab-border-top-container {
display: none !important;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty.dirty-border-top > .tab-border-top-container {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty.dirty-border-top > .tab-border-top-container {
display: block !important;
position: absolute;
z-index: 8;
@@ -382,11 +390,11 @@
pointer-events: none;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.drop-target-left:not(.last-in-row):not(:last-child)::after {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.drop-target-left:not(.last-in-row):not(:last-child)::after {
display: none;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.drop-target-left:not(.last-in-row) + .tab.drop-target-right::before {
.modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.drop-target-left:not(.last-in-row) + .tab.drop-target-right::before {
left: calc(-1 * var(--vscode-spacing-size20));
transform: translateX(-50%);
}
@@ -395,144 +403,144 @@
* Pane tabs (primary side bar, panel and auxiliary side bar) are text composite
* actions. Keep icon-only activity items on their existing treatment.
*/
.style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon),
.style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) {
.modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon),
.modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) {
text-transform: none !important;
padding: 0 8px;
border-radius: var(--vscode-cornerRadius-small);
}
.style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,
.style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label {
.modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label,
.modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon) .action-label {
font-size: var(--vscode-fontSize-body1);
font-weight: var(--vscode-fontWeight-semiBold);
line-height: 22px; /* keep consistent with other 22px title/control heights */
}
.style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon).checked,
.style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon).checked,
.style-override.monaco-workbench:not(.hc-black):not(.hc-light) .part.auxiliarybar > .header-or-footer > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon.checked:not(:active),
.style-override.monaco-workbench:not(.hc-black):not(.hc-light) .pane-composite-part.basepanel > .title > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon.checked:not(:active) {
.modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon).checked,
.modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon).checked,
.modern-ui-tabs.monaco-workbench:not(.hc-black):not(.hc-light) .part.auxiliarybar > .header-or-footer > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon.checked:not(:active),
.modern-ui-tabs.monaco-workbench:not(.hc-black):not(.hc-light) .pane-composite-part.basepanel > .title > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon.checked:not(:active) {
background-color: var(--modern-ui-tab-active-background) !important;
}
.style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon):not(.checked):hover,
.style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon):not(.checked):hover {
.modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon):not(.checked):hover,
.modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon):not(.checked):hover {
background-color: var(--modern-ui-tab-hover-background);
}
.style-override.monaco-workbench:not(.hc-black):not(.hc-light) .part.auxiliarybar > .header-or-footer > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon:not(.checked):not(:active):hover,
.style-override.monaco-workbench:not(.hc-black):not(.hc-light) .pane-composite-part.basepanel > .title > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon:not(.checked):not(:active):hover {
.modern-ui-tabs.monaco-workbench:not(.hc-black):not(.hc-light) .part.auxiliarybar > .header-or-footer > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon:not(.checked):not(:active):hover,
.modern-ui-tabs.monaco-workbench:not(.hc-black):not(.hc-light) .pane-composite-part.basepanel > .title > .composite-bar-container:not(.dragged-over):not(.dragged-over-head):not(.dragged-over-tail) > .composite-bar > .monaco-action-bar .action-item.icon:not(.checked):not(:active):hover {
background-color: var(--vscode-list-hoverBackground);
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab,
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.active,
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.selected,
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:hover {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.active,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.selected,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:hover {
background-color: transparent !important;
box-shadow: none !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:hover > .tab-actions,
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab > .tab-actions:focus-within {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:hover > .tab-actions,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab > .tab-actions:focus-within {
background-color: var(--vscode-editorGroupHeader-tabsBackground, var(--vscode-editor-background)) !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab > .tab-actions .action-label {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab > .tab-actions .action-label {
background-color: transparent !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:is(.active, .selected):hover > .tab-actions {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:is(.active, .selected):hover > .tab-actions {
border-top: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder);
border-right: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder);
border-bottom: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder);
box-sizing: border-box;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):not(.selected):hover > .tab-actions {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):not(.selected):hover > .tab-actions {
border-top: var(--vscode-strokeThickness) dashed var(--vscode-contrastActiveBorder);
border-right: var(--vscode-strokeThickness) dashed var(--vscode-contrastActiveBorder);
border-bottom: var(--vscode-strokeThickness) dashed var(--vscode-contrastActiveBorder);
box-sizing: border-box;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab > .tab-actions:focus-within {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab > .tab-actions:focus-within {
border-top: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
border-right: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
border-bottom: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
box-sizing: border-box;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:is(.active, .selected).tab-actions-left:hover > .tab-actions {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:is(.active, .selected).tab-actions-left:hover > .tab-actions {
border-right: 0;
border-left: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder);
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):not(.selected).tab-actions-left:hover > .tab-actions {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):not(.selected).tab-actions-left:hover > .tab-actions {
border-right: 0;
border-left: var(--vscode-strokeThickness) dashed var(--vscode-contrastActiveBorder);
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.tab-actions-left > .tab-actions:focus-within {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.tab-actions-left > .tab-actions:focus-within {
border-right: 0;
border-left: var(--vscode-strokeThickness) solid var(--vscode-focusBorder);
}
/* The stroke lives on the fill, so suppress the tab's own outline to avoid a second, full-height ring. */
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab {
outline: none !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:is(.active, .selected):not(:focus) > .tab-fill {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:is(.active, .selected):not(:focus) > .tab-fill {
border: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder) !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):not(.selected):not(:focus):hover > .tab-fill {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):not(.selected):not(:focus):hover > .tab-fill {
border: var(--vscode-strokeThickness) dashed var(--vscode-contrastActiveBorder) !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:focus > .tab-fill {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:focus > .tab-fill {
border: var(--vscode-strokeThickness) solid var(--vscode-focusBorder) !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):not(.selected):focus:hover {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.active):not(.selected):focus:hover {
background-color: transparent !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab .tab-label,
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab .tab-label a {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab .tab-label,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab .tab-label a {
outline: none !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.active > .tab-border-bottom-container {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.active > .tab-border-bottom-container {
display: none;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:hover > .tab-border-bottom-container {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:hover > .tab-border-bottom-container {
display: none;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.dirty):not(.sticky):not(:hover) > .tab-actions .action-label:not(:focus) {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:not(.dirty):not(.sticky):not(:hover) > .tab-actions .action-label:not(:focus) {
opacity: 0 !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.dirty > .tab-actions .action-label,
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.sticky:not(.pinned-action-off) > .tab-actions .action-label,
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:hover > .tab-actions .action-label,
:is(.hc-black, .hc-light).style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab > .tab-actions .action-label:focus {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.dirty > .tab-actions .action-label,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab.sticky:not(.pinned-action-off) > .tab-actions .action-label,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab:hover > .tab-actions .action-label,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-and-actions-container .tabs-container > .tab > .tab-actions .action-label:focus {
opacity: 1 !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item,
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item,
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator,
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator {
background-color: transparent !important;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon,
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon {
box-sizing: border-box;
flex: 0 0 24px;
width: 24px;
@@ -544,32 +552,32 @@
padding: 0;
}
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
:is(.hc-black, .hc-light).style-override.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label,
:is(.hc-black, .hc-light).modern-ui-tabs.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label {
outline: none !important;
}
:is(.hc-black, .hc-light).style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator:before,
:is(.hc-black, .hc-light).style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator:before {
:is(.hc-black, .hc-light).modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator:before,
:is(.hc-black, .hc-light).modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .active-item-indicator:before {
display: none !important;
}
:is(.hc-black, .hc-light).style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked:not(:focus),
:is(.hc-black, .hc-light).style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked:not(:focus) {
:is(.hc-black, .hc-light).modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked:not(:focus),
:is(.hc-black, .hc-light).modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked:not(:focus) {
outline: var(--vscode-strokeThickness) solid var(--vscode-contrastActiveBorder);
outline-offset: calc(-1 * var(--vscode-strokeThickness));
}
:is(.hc-black, .hc-light).style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):not(:focus):hover,
:is(.hc-black, .hc-light).style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):not(:focus):hover {
:is(.hc-black, .hc-light).modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):not(:focus):hover,
:is(.hc-black, .hc-light).modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):not(:focus):hover {
outline: var(--vscode-strokeThickness) dashed var(--vscode-contrastActiveBorder);
outline-offset: calc(-1 * var(--vscode-strokeThickness));
}
:is(.hc-black, .hc-light).style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus,
:is(.hc-black, .hc-light).style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus {
:is(.hc-black, .hc-light).modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus,
:is(.hc-black, .hc-light).modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:focus {
outline: var(--vscode-strokeThickness) solid var(--vscode-focusBorder) !important;
outline-offset: calc(-1 * var(--vscode-strokeThickness));
}
@@ -578,15 +586,15 @@
* Drop the checked underline in favour of the rounded background while retaining
* the base keyboard-focus indicator.
*/
.style-override .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon).checked:not(:focus) .active-item-indicator:before,
.style-override .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon).checked:not(:focus) .active-item-indicator:before {
.modern-ui-tabs .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon).checked:not(:focus) .active-item-indicator:before,
.modern-ui-tabs .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.icon).checked:not(:focus) .active-item-indicator:before {
border-top-color: transparent !important;
border-top-width: 0 !important;
border-bottom-color: transparent !important;
border-bottom-width: 0 !important;
}
.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a {
.modern-ui-tabs .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a {
font-size: var(--vscode-fontSize-body1);
font-weight: var(--vscode-fontWeight-semiBold);
}
@@ -600,22 +608,22 @@
* decoration colors still apply to the entire tab label (name + description),
* matching classic UI behavior. See https://github.com/microsoft/vscode/issues/325246
*/
.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.active) .tab-label:not([class*="monaco-decoration-itemColor"]) a {
.modern-ui-tabs .part.editor > .content .editor-group-container > .title .tabs-container > .tab:not(.active) .tab-label:not([class*="monaco-decoration-itemColor"]) a {
color: color-mix(in srgb, var(--vscode-foreground) 50%, transparent) !important;
}
.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active .tab-label:not([class*="monaco-decoration-itemColor"]) a {
.modern-ui-tabs .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active .tab-label:not([class*="monaco-decoration-itemColor"]) a {
color: var(--vscode-foreground) !important;
}
.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active) .tab-label:not([class*="monaco-decoration-itemColor"]) a {
.modern-ui-tabs .part.editor > .content .editor-group-container > .title .tabs-container > .tab.selected:not(.active) .tab-label:not([class*="monaco-decoration-itemColor"]) a {
color: var(--vscode-tab-selectedForeground) !important;
}
/* Ensure decoration color cascades to every part of the tab label. */
.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label[class*="monaco-decoration-itemColor"] a,
.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label[class*="monaco-decoration-itemColor"] .label-description,
.style-override .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label[class*="monaco-decoration-itemColor"] .monaco-highlighted-label {
.modern-ui-tabs .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label[class*="monaco-decoration-itemColor"] a,
.modern-ui-tabs .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label[class*="monaco-decoration-itemColor"] .label-description,
.modern-ui-tabs .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label[class*="monaco-decoration-itemColor"] .monaco-highlighted-label {
color: inherit !important;
}
@@ -626,7 +634,7 @@
* pill look as the editor and panel tabs: drop the underline, round the label
* and show a subtle background on the active (checked) tab.
*/
.style-override .settings-editor .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
.modern-ui-tabs .settings-editor .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
border-radius: var(--vscode-cornerRadius-small) !important;
border-bottom: none !important;
font-size: var(--vscode-fontSize-body1);
@@ -634,38 +642,38 @@
padding: 2px 8px !important;
}
.style-override .settings-editor .settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked {
.modern-ui-tabs .settings-editor .settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked {
background-color: color-mix(in srgb, var(--vscode-foreground) 10%, transparent) !important;
}
.style-override .settings-editor .settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked:not(:focus) {
.modern-ui-tabs .settings-editor .settings-tabs-widget > .monaco-action-bar .action-item .action-label.checked:not(:focus) {
border-bottom-color: transparent !important;
}
/* Drop the underline beneath the settings header controls row. */
.style-override .settings-editor > .settings-header > .settings-header-controls {
.modern-ui-tabs .settings-editor > .settings-header > .settings-header-controls {
border-bottom: none !important;
}
.style-override.monaco-workbench .pane-body.integrated-terminal .tabs-container.has-text .tabs-list .terminal-tabs-entry {
.modern-ui-tabs.monaco-workbench .pane-body.integrated-terminal .tabs-container.has-text .tabs-list .terminal-tabs-entry {
padding-left: 8px;
padding-right: 8px;
}
.style-override.monaco-workbench .pane-body.integrated-terminal .terminal-tabs-chat-entry {
.modern-ui-tabs.monaco-workbench .pane-body.integrated-terminal .terminal-tabs-chat-entry {
padding: 4px;
}
.style-override.monaco-workbench .pane-body.integrated-terminal .tabs-list .codicon {
.modern-ui-tabs.monaco-workbench .pane-body.integrated-terminal .tabs-list .codicon {
vertical-align: sub;
}
.style-override.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label,
.style-override.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
.modern-ui-tabs.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label,
.modern-ui-tabs.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label {
padding: 0;
line-height: 24px;
}
.style-override.monaco-workbench .pane-body.integrated-terminal .tabs-list-container:not(.drop-target) {
.modern-ui-tabs.monaco-workbench .pane-body.integrated-terminal .tabs-list-container:not(.drop-target) {
background-color: var(--vscode-panel-background);
}
src/vs/workbench/contrib/styleOverrides/browser/styleOverrides.contribution.ts
+3
View File
@@ -54,6 +54,7 @@ interface IStyleOverrideModule {
* as a group.
*/
const STYLE_OVERRIDE_CLASS = 'style-override';
const MODERN_UI_TABS_CLASS = 'modern-ui-tabs';
/**
* The fixed catalog of built-in style-override modules. The CSS for each module
@@ -148,6 +149,7 @@ export class StyleOverridesContribution extends Disposable implements IWorkbench
private applyTo(container: HTMLElement, enabled: boolean): void {
container.classList.toggle(STYLE_OVERRIDE_CLASS, enabled);
container.classList.toggle(MODERN_UI_TABS_CLASS, enabled);
}
private applyScrollbarSize(enabled: boolean): void {
@@ -166,6 +168,7 @@ export class StyleOverridesContribution extends Disposable implements IWorkbench
// Remove the class this contribution added so it leaves no DOM state behind.
for (const container of this.layoutService.containers) {
container.classList.remove(STYLE_OVERRIDE_CLASS);
container.classList.remove(MODERN_UI_TABS_CLASS);
}
setGlobalDefaultScrollbarSize(DEFAULT_SCROLLBAR_SIZE);
setNotificationRowHeight(DEFAULT_NOTIFICATION_ROW_HEIGHT);
src/vs/workbench/contrib/styleOverrides/test/browser/styleOverrides.contribution.test.ts
+8
View File
@@ -71,7 +71,9 @@ suite('StyleOverridesContribution', () => {
const startupState = {
mainEnabled: layoutService.mainContainer.classList.contains('style-override'),
mainTabsEnabled: layoutService.mainContainer.classList.contains('modern-ui-tabs'),
auxiliaryEnabled: auxiliaryContainer.classList.contains('style-override'),
auxiliaryTabsEnabled: auxiliaryContainer.classList.contains('modern-ui-tabs'),
paneHeaderSize: pane.minimumSize,
paneHeaderLineHeight: getWindow(pane.draggableElement!).getComputedStyle(pane.draggableElement!).lineHeight,
paneHeaderInlineLineHeight: pane.draggableElement!.style.lineHeight,
@@ -89,7 +91,9 @@ suite('StyleOverridesContribution', () => {
assert.deepStrictEqual({
startupState,
mainEnabledAfterToggle: layoutService.mainContainer.classList.contains('style-override'),
mainTabsEnabledAfterToggle: layoutService.mainContainer.classList.contains('modern-ui-tabs'),
auxiliaryEnabledAfterToggle: auxiliaryContainer.classList.contains('style-override'),
auxiliaryTabsEnabledAfterToggle: auxiliaryContainer.classList.contains('modern-ui-tabs'),
paneHeaderSizeAfterToggle: pane.minimumSize,
paneHeaderLineHeightAfterToggle: getWindow(pane.draggableElement!).getComputedStyle(pane.draggableElement!).lineHeight,
paneHeaderInlineLineHeightAfterToggle: pane.draggableElement!.style.lineHeight,
@@ -97,14 +101,18 @@ suite('StyleOverridesContribution', () => {
}, {
startupState: {
mainEnabled: true,
mainTabsEnabled: true,
auxiliaryEnabled: true,
auxiliaryTabsEnabled: true,
paneHeaderSize: 28,
paneHeaderLineHeight: '28px',
paneHeaderInlineLineHeight: '',
layoutCount: 0,
},
mainEnabledAfterToggle: false,
mainTabsEnabledAfterToggle: false,
auxiliaryEnabledAfterToggle: false,
auxiliaryTabsEnabledAfterToggle: false,
paneHeaderSizeAfterToggle: 22,
paneHeaderLineHeightAfterToggle: '22px',
paneHeaderInlineLineHeightAfterToggle: '',
src/vs/workbench/test/browser/componentFixtures/editor/editorTabBar.fixture.ts
+1 -1
View File
@@ -464,7 +464,7 @@ export function renderEditorTabBarFixture(ctx: ComponentFixtureContext, options:
const content = $('.content');
const groupContainer = $(isGroupActive ? '.editor-group-container.active' : '.editor-group-container');
const titleContainer = $('.title');
container.classList.toggle('style-override', options.modernUI);
container.classList.toggle('modern-ui-tabs', options.modernUI);
titleContainer.classList.toggle('tabs', partOptions.showTabs === 'multiple');
titleContainer.classList.toggle('show-file-icons', partOptions.showIcons);