diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitle.css b/src/vs/workbench/browser/parts/editor/media/tabstitle.css index 94495a3b6af3aa8d2cff6cd5f7ea444bf30bcb39..799f39e5d95ec5cb31743e7ef3ec2e798f3bd63f 100644 --- a/src/vs/workbench/browser/parts/editor/media/tabstitle.css +++ b/src/vs/workbench/browser/parts/editor/media/tabstitle.css @@ -86,23 +86,6 @@ height: 16px; /* tweak the icon size of the editor labels when icons are enabled */ } -.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label { - opacity: 0.7 !important; -} - -.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label { - opacity: 0.5 !important; -} - -.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.active .tab-label, -.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.dropfeedback .tab-label { - opacity: 1 !important; -} - -.hc-black .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label { - opacity: 1 !important; -} - /* Tab Close */ .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab > .tab-close { diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css index 123ac6a9d4e9e8e42479ba4559cfec31c3911d23..5a150ed4368cb5dbb47d0b60b684f76d537fb0e2 100644 --- a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css @@ -104,26 +104,4 @@ .vs-dark .monaco-workbench .show-group-editors-action, .hc-black .monaco-workbench .show-group-editors-action { background: url('stackview-inverse.svg') center center no-repeat; -} - -/* TODO@theme */ - -.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-label a, -.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label a { - color: rgba(51, 51, 51, 0.5); -} - -.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .title-label a, -.vs .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab .tab-label a { - color: #333333; -} - -.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-label a, -.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label a { - color: rgba(255, 255, 255, 0.5); -} - -.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .title-label a, -.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.active .tabs-container > .tab .tab-label a { - color: white; } \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts index c9f7d2f5c69129e2cf3ebf5f2b6186e1a8c9ebe7..08f811aef29b03302ab01f2ca0ac013745ac962e 100644 --- a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts @@ -12,6 +12,7 @@ import DOM = require('vs/base/browser/dom'); import { TitleControl } from 'vs/workbench/browser/parts/editor/titleControl'; import { EditorLabel } from 'vs/workbench/browser/labels'; import { Verbosity } from 'vs/platform/editor/common/editor'; +import { ACTIVE_TAB_INACTIVE_GROUP_FOREGROUND, ACTIVE_TAB_ACTIVE_GROUP_FOREGROUND } from 'vs/workbench/common/theme'; export class NoTabsTitleControl extends TitleControl { private titleContainer: HTMLElement; @@ -125,6 +126,11 @@ export class NoTabsTitleControl extends TitleControl { } this.editorLabel.setLabel({ name, description, resource }, { title, italic: !isPinned, extraClasses: ['title-label'] }); + if (isActive) { + this.editorLabel.element.style.color = this.getColor(ACTIVE_TAB_ACTIVE_GROUP_FOREGROUND); + } else { + this.editorLabel.element.style.color = this.getColor(ACTIVE_TAB_INACTIVE_GROUP_FOREGROUND); + } // Update Editor Actions Toolbar this.updateEditorActionsToolbar(); diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index b707d2a420b1c5937ef1ca90acd905a29ca40410..69aeb83529c6c16217ab5d6655767d411de166f2 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -41,7 +41,7 @@ import { LinkedMap } from 'vs/base/common/map'; import { DelegatingWorkbenchEditorService } from 'vs/workbench/services/editor/browser/editorService'; import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { INACTIVE_TAB_BACKGROUND, ACTIVE_TAB_BACKGROUND } from 'vs/workbench/common/theme'; +import { INACTIVE_TAB_BACKGROUND, ACTIVE_TAB_BACKGROUND, ACTIVE_TAB_ACTIVE_GROUP_FOREGROUND, ACTIVE_TAB_INACTIVE_GROUP_FOREGROUND, INACTIVE_TAB_ACTIVE_GROUP_FOREGROUND, INACTIVE_TAB_INACTIVE_GROUP_FOREGROUND } from 'vs/workbench/common/theme'; interface IEditorInputLabel { editor: IEditorInput; @@ -223,8 +223,8 @@ export class TabsTitleControl extends TitleControl { const group = this.context; // Tabs container activity state - const isActive = this.stacks.isActive(group); - if (isActive) { + const isGroupActive = this.stacks.isActive(group); + if (isGroupActive) { DOM.addClass(this.titleContainer, 'active'); } else { DOM.removeClass(this.titleContainer, 'active'); @@ -239,7 +239,7 @@ export class TabsTitleControl extends TitleControl { const tabContainer = this.tabsContainer.children[index]; if (tabContainer instanceof HTMLElement) { const isPinned = group.isPinned(index); - const isActive = group.isActive(editor); + const isTabActive = group.isActive(editor); const isDirty = editor.isDirty(); const label = labels[index]; @@ -261,15 +261,18 @@ export class TabsTitleControl extends TitleControl { tabLabel.setLabel({ name, description, resource: toResource(editor, { supportSideBySide: true }) }, { extraClasses: ['tab-label'], italic: !isPinned }); // Active state - if (isActive) { + if (isTabActive) { DOM.addClass(tabContainer, 'active'); tabContainer.setAttribute('aria-selected', 'true'); tabContainer.style.backgroundColor = this.getColor(ACTIVE_TAB_BACKGROUND); + tabLabel.element.style.color = this.getColor(isGroupActive ? ACTIVE_TAB_ACTIVE_GROUP_FOREGROUND : ACTIVE_TAB_INACTIVE_GROUP_FOREGROUND); + this.activeTab = tabContainer; } else { DOM.removeClass(tabContainer, 'active'); tabContainer.setAttribute('aria-selected', 'false'); tabContainer.style.backgroundColor = this.getColor(INACTIVE_TAB_BACKGROUND); + tabLabel.element.style.color = this.getColor(isGroupActive ? INACTIVE_TAB_ACTIVE_GROUP_FOREGROUND : INACTIVE_TAB_INACTIVE_GROUP_FOREGROUND); } // Dirty State diff --git a/src/vs/workbench/browser/parts/media/compositepart.css b/src/vs/workbench/browser/parts/media/compositepart.css index dc8948537b20ed50c39df4d2b37e192fd6438e0a..75895952fec421cceea9f0b7020c37d95f8e3c2e 100644 --- a/src/vs/workbench/browser/parts/media/compositepart.css +++ b/src/vs/workbench/browser/parts/media/compositepart.css @@ -14,22 +14,4 @@ .monaco-workbench > .part > .composite.title > .title-actions { flex: 1; padding-left: 5px; -} - -.monaco-workbench > .part > .composite.title > .title-label span { - text-transform: uppercase; -} - -/* TODO@theme */ - -.monaco-workbench > .part > .composite.title > .title-label span { - color: #6f6f6f; -} - -.vs-dark .monaco-workbench > .part > .composite.title > .title-label span { - color: #bbbbbb; -} - -.hc-black .monaco-workbench > .part > .composite.title > .title-label span { - color: #fff; -} +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css index e87ae703413f593124423f2dd534e4e4961b9000..9e7162ad31604ecc1428d9377c058e9cba6ee22a 100644 --- a/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css +++ b/src/vs/workbench/browser/parts/sidebar/media/sidebarpart.css @@ -20,6 +20,10 @@ border-left: 1px solid; } +.monaco-workbench > .part > .sidebar.title > .title-label span { + text-transform: uppercase; +} + .monaco-workbench .viewlet .collapsible.header .title { overflow: hidden; text-overflow: ellipsis; @@ -62,6 +66,18 @@ /* TODO@theme */ +.vs .monaco-workbench > .part > .sidebar.title > .title-label span { + color: #6f6f6f; +} + +.vs-dark .monaco-workbench > .part > .sidebar.title > .title-label span { + color: #bbbbbb; +} + +.hc-black .monaco-workbench > .part > .sidebar.title > .title-label span { + color: #fff; +} + .vs .monaco-workbench > .sidebar > .title > .title-actions { background-color: #f3f3f3; } diff --git a/src/vs/workbench/common/theme.ts b/src/vs/workbench/common/theme.ts index 65f408dc8eea4ee28c51be44e27a9bfe3929c22b..978a18c87abece0b37c9986f1eb987c200fc6e77 100644 --- a/src/vs/workbench/common/theme.ts +++ b/src/vs/workbench/common/theme.ts @@ -15,13 +15,38 @@ export const ACTIVE_TAB_BACKGROUND = registerColor('activeTabBackground', { dark: editorBackground, light: editorBackground, hc: editorBackground -}, nls.localize('activeTabBackground', "Active Tab background color. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group.")); +}, nls.localize('activeTabBackground', "Active 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 INACTIVE_TAB_BACKGROUND = registerColor('inactiveTabBackground', { dark: '#2D2D2D', light: '#ECECEC', hc: Color.transparent -}, nls.localize('inactiveTabBackground', "Inactive Tab background color. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group.")); +}, nls.localize('inactiveTabBackground', "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 ACTIVE_TAB_ACTIVE_GROUP_FOREGROUND = registerColor('activeTabActiveGroupForeground', { + dark: Color.white, + light: Color.fromRGBA(new RGBA(51, 51, 51)), + hc: Color.white +}, nls.localize('activeTabActiveGroupForeground', "Active tab foreground color in an active 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 ACTIVE_TAB_INACTIVE_GROUP_FOREGROUND = registerColor('activeTabInactiveGroupForeground', { + dark: Color.white.transparent(0.5), + light: Color.fromRGBA(new RGBA(51, 51, 51)).transparent(0.7), + hc: Color.white +}, nls.localize('activeTabInactiveGroupForeground', "Active tab foreground color in an inactive 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 INACTIVE_TAB_ACTIVE_GROUP_FOREGROUND = registerColor('inactiveTabActiveGroupForeground', { + dark: Color.white.transparent(0.5), + light: Color.fromRGBA(new RGBA(51, 51, 51)).transparent(0.5), + hc: Color.white +}, nls.localize('inactiveTabActiveGroupForeground', "Inactive tab foreground color in an active 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 INACTIVE_TAB_INACTIVE_GROUP_FOREGROUND = registerColor('inactiveTabInactiveGroupForeground', { + dark: Color.fromRGBA(new RGBA(255, 255, 255)).transparent(0.5).transparent(0.5), + light: Color.fromRGBA(new RGBA(51, 51, 51)).transparent(0.5).transparent(0.7), + hc: Color.white +}, nls.localize('inactiveTabInactiveGroupForeground', "Inactive tab foreground color in an inactive 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.")); + // < --- Panels --- > @@ -39,6 +64,7 @@ export const PANEL_BORDER_TOP_COLOR = registerColor('panelBorderTopColor', { }, nls.localize('panelBorderTopColor', "Panel border color on the top separating to the editor. Panels are shown below the editor area and contain views like output and integrated terminal.")); + // < --- Status --- > export const STATUS_BAR_FOREGROUND = registerColor('statusBarForeground', {