Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tab color refinements #8238

Closed
wants to merge 8 commits into from
+78 −17
Closed

Tab color refinements #8238

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
717acfe
Tab well matches viewlet. Active tab blends editor
bgashler1 Jun 23, 2016
9e173ca
Added line only on active tabs and horziontal line
bgashler1 Jun 27, 2016
f915127
Using mix-blend-mode on tabs to enable theming.
bgashler1 Jun 28, 2016
77a5242
Merge remote-tracking branch 'origin' into bgashler1/color-a
bgashler1 Jun 28, 2016
7828de7
Merge remote-tracking branch 'origin' into bgashler1/color-a
bgashler1 Jun 28, 2016
4b97973
Forcing tab to have a full border on high contrast
bgashler1 Jun 29, 2016
659b490
Add divisions between tabs
bgashler1 Jun 30, 2016
eecde9e
Differentiate tab well color; theme for light tabs
bgashler1 Jun 30, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 78 additions & 17 deletions src/vs/workbench/browser/parts/editor/media/tabstitle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,49 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

.monaco-editor.vs .scroll-decoration {
box-shadow: #fff 0 6px 6px -6px inset; /* TODO: use a CSS custom property of the theme's `.monaco-editor-background` color here to blend better */
}

.monaco-editor.vs-dark .scroll-decoration {
box-shadow: #1E1E1E 0 6px 6px -6px inset; /* TODO: use a CSS custom property of the theme's `.monaco-editor-background` color here to blend better */
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bpasero are these the scroll styles I changed that you mentioned in the PR? I changed these so that they would match the editor background color so that it creates a fake gradual mask over text when you've scrolled. That way the active tab, which has the same background color of the editor, will not appear to abruptly chop off text in the editor while also not creating a shadow (as it used to) which would make the tab appear on a different plane than the text.

Unfortunately, I had to hard-code these values, so in other themes than the just the default Dark and Light, it looks weird. We could just hide these display: none, until we can get CSS custom property to give us the theme's editor base color. I'll leave that up to you.


/* Tabs Container */
.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title::before {
display: block;
content: '';
position: absolute;
top: 34px;
width: 100%;
border-top:1px solid #DDDDDD;
}

.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title::before {
display: block;
content: '';
position: absolute;
top: 34px;
width: 100%;
border-top:1px solid #403F3F;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title > .monaco-scrollable-element {
flex: 1;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container {
display: flex;
background-color: rgba(128, 128, 128, 0.2);
height: 35px;
}

.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title {
background: linear-gradient(to bottom, #ECECEC 0%,#F3F3F3 100%);
mix-blend-mode: luminosity;
}

.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title {
background: linear-gradient(to bottom, #333333 0%,#252526 100%);
mix-blend-mode: luminosity;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container.scroll {
Expand All @@ -25,39 +58,68 @@

/* Tab */

.vs .monaco-workbench .tab.monaco-editor-background:not(.active),
.vs-dark .monaco-workbench .tab.monaco-editor-background:not(.active) {
background-color: transparent;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab {
display: flex;
width: 120px;
min-width: fit-content;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
border-left: 1px solid rgba(128, 128, 128, 0.2);
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
box-sizing: border-box;
padding-left: 10px;
}

.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab,
.hc-black .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab {
.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab .tab-label,
.hc-black .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab .tab-label {
opacity: 0.7 !important;
}

.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab {
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab .tab-label {
opacity: 0.5 !important;
}

.hc-black .monaco-workbench > .part.editor > .content > .one-editor-container > .title.active .tabs-container > .tab.active {
border: 1px solid #f38518;
.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab.active .tab-label,
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab.dropfeedback .tab-label {
opacity: 1 !important;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab:first-child {
border-left: 0;
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab {
border: 1px solid transparent;
height: 36px;
}

.monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab.active {
border-bottom-color: transparent;
opacity: 1 !important;
.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab {
border-left-color: #DDDDDD;
}

.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab:last-child {
border-right-color: #DDDDDD;
}

.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab {
border-left-color: #403F3F;
}

.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab:last-child {
border-right-color: #403F3F;
}

.hc-black .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab {
height: 35px;
}

.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab:first-child,
.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab:first-child {
border-left-color: transparent;
}

.hc-black .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab.active {
border: 1px solid #f38518;
}

.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container.dropfeedback {
Expand All @@ -66,7 +128,6 @@

.vs .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container > .tab.dropfeedback {
background-color: rgba(187, 230, 255, 0.5);
opacity: 1 !important;
}

.vs-dark .monaco-workbench > .part.editor > .content > .one-editor-container > .title .tabs-container.dropfeedback,
Expand Down Expand Up @@ -159,5 +220,5 @@
.monaco-workbench > .part.editor > .content > .one-editor-container > .title .group-actions {
flex: initial;
padding-left: 4px;
background-color: rgba(128, 128, 128, 0.2);
}
}