diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 157d3cdb7715f4691aee93a40a2e155f23157ef6..343b62a71a9373fe2b76c33c421aa7a3dd84b129 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -40,7 +40,7 @@ import { extractResources } from 'vs/workbench/browser/editor'; import { getOrSet } from 'vs/base/common/map'; import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection'; import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; -import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER } from 'vs/workbench/common/theme'; +import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER } from 'vs/workbench/common/theme'; import { activeContrastBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { IFileService } from 'vs/platform/files/common/files'; import { IWorkspacesService } from 'vs/platform/workspaces/common/workspaces'; @@ -281,7 +281,9 @@ export class TabsTitleControl extends TitleControl { const isGroupActive = this.stacks.isActive(group); if (isGroupActive) { DOM.addClass(this.titleContainer, 'active'); + DOM.removeClass(this.titleContainer, 'inactive'); } else { + DOM.addClass(this.titleContainer, 'inactive'); DOM.removeClass(this.titleContainer, 'active'); } @@ -958,4 +960,42 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { } `); } -}); \ No newline at end of file + + // Hover Background + const tabHoverBackground = theme.getColor(TAB_HOVER_BACKGROUND); + if (tabHoverBackground) { + collector.addRule(` + .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab:hover { + background: ${tabHoverBackground} !important; + } + `); + } + + const tabUnfocusedHoverBackground = theme.getColor(TAB_UNFOCUSED_HOVER_BACKGROUND); + if (tabUnfocusedHoverBackground) { + collector.addRule(` + .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.inactive .tabs-container > .tab:hover { + background: ${tabUnfocusedHoverBackground} !important; + } + `); + } + + // Hover Border + const tabHoverBorder = theme.getColor(TAB_HOVER_BORDER); + if (tabHoverBorder) { + collector.addRule(` + .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab:hover { + box-shadow: ${tabHoverBorder} 0 -1px inset !important; + } + `); + } + + const tabUnfocusedHoverBorder = theme.getColor(TAB_UNFOCUSED_HOVER_BORDER); + if (tabUnfocusedHoverBorder) { + collector.addRule(` + .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.inactive .tabs-container > .tab:hover { + box-shadow: ${tabUnfocusedHoverBorder} 0 -1px inset !important; + } + `); + } +}); diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 77887fd950d4632c14b9d9a4941e065d781762d3..5ea4917d2248a3172c937c3f45dc1f136a12d143 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -23,6 +23,18 @@ export const TAB_INACTIVE_BACKGROUND = registerColor('tab.inactiveBackground', { hc: null }, nls.localize('tabInactiveBackground', "Inactive tab background color. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); +export const TAB_HOVER_BACKGROUND = registerColor('tab.hoverBackground', { + dark: null, + light: null, + hc: null +}, nls.localize('tabHoverBackground', "Tab background color when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); + +export const TAB_UNFOCUSED_HOVER_BACKGROUND = registerColor('tab.unfocusedHoverBackground', { + dark: transparent(TAB_HOVER_BACKGROUND, 0.5), + light: transparent(TAB_HOVER_BACKGROUND, 0.7), + hc: null +}, nls.localize('tabUnfocusedHoverBackground', "Tab background color in an unfocused group when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); + export const TAB_BORDER = registerColor('tab.border', { dark: '#252526', light: '#F3F3F3', @@ -41,6 +53,18 @@ export const TAB_UNFOCUSED_ACTIVE_BORDER = registerColor('tab.unfocusedActiveBor hc: null }, nls.localize('tabActiveUnfocusedBorder', "Border to highlight active tabs in an unfocused group. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); +export const TAB_HOVER_BORDER = registerColor('tab.hoverBorder', { + dark: null, + light: null, + hc: null +}, nls.localize('tabHoverBorder', "Border to highlight tabs when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); + +export const TAB_UNFOCUSED_HOVER_BORDER = registerColor('tab.unfocusedHoverBorder', { + dark: transparent(TAB_HOVER_BORDER, 0.5), + light: transparent(TAB_HOVER_BORDER, 0.7), + hc: null +}, nls.localize('tabUnfocusedHoverBorder', "Border to highlight tabs in an unfocused group when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.")); + export const TAB_ACTIVE_FOREGROUND = registerColor('tab.activeForeground', { dark: Color.white, light: '#333333',