Skip to content

Instantly share code, notes, and snippets.

@donysukardi
Last active January 14, 2024 22:57
Show Gist options
  • Save donysukardi/e65b7c3391b0a365debe0b11faf9ea65 to your computer and use it in GitHub Desktop.
Save donysukardi/e65b7c3391b0a365debe0b11faf9ea65 to your computer and use it in GitHub Desktop.
Rounded VS Code Tabs
.tabs-container {
padding-left: 22px;
}
.tabs-container > .tab {
transform: skewX(25deg);
border-radius: 5px 5px 0 0;
height: 28px;
}
.tabs-container > .tab + .tab {
margin-left: 16px;
}
.tabs-container > .tab:before {
content: "";
position: absolute;
left: -18px;
top: -1px;
transform: skewX(140deg);
border-right: 0;
margin: 0;
padding: 0;
width: 30px;
border-radius: 5px 0 0 0;
height: 28px;
border-left-color: rgb(37, 37, 38);
border-right-color: rgb(37, 37, 38);
background-color: rgb(45, 45, 45);
}
.tabs-container > .tab:before {
background-color: #161a1b;
}
.tabs-container > .tab.active:before {
background-color: rgb(28, 32, 34);
}
.tabs-container > .tab.active {
z-index: 1;
}
.tabs-container > .tab .tab-label,
.monaco-workbench
> .part.editor
> .content
> .one-editor-silo
> .container
> .title
.title-label {
transform: skewX(-25deg);
position: relative;
left: -16px;
}
.tabs-container > .tab > .tab-close {
transform: skewX(-25deg);
position: relative;
left: -4px;
}
.tabs-and-actions-container {
height: 27px !important;
}
.tabs-container,
.tabs-container > .tab {
height: 28px !important;
}
.tabs-container > .tab .tab-label a {
font-size: 12px !important;
position: relative;
top: -1px;
}
@carlca
Copy link

carlca commented Oct 20, 2017

Hi Dony. Thanks for posting this! I've tried adding this to Insiders VS Code on the Apple Mac. My Settings.json has the following lines in it:

"vscode_custom_css.imports": ["file:///Users/carlca/.vscode-insiders/custom.css"],

The custom.css file is just as you had it but with the additional line at the start:

canvas.decorationsOverviewRuler {
    display: none !important;
}

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container {
  padding-left: 22px;
}

etc, etc...

That additional line was part of previous changes I made to get rid off unwanted screen marks in Zen Mode.

My tabs remain resolutely sharp cornered. Any ideas? Thanks!

@donysukardi
Copy link
Author

donysukardi commented Oct 22, 2017

@carlca did you try running Reload Custom CSS and JS command from command palette (⌘cmd + shift + p) ?
I just tried it on Insiders and here's what I got

image

@carlca
Copy link

carlca commented Oct 25, 2017

Sorry for the slow response. I've just tried your suggestion and it works! There's just a slight color issue concerning the tab icons, as shown in the attached image:
screen shot 2017-10-25 at 13 33 54

Otherwise it looks really good. Thanks!

@carlca
Copy link

carlca commented Oct 25, 2017

I'm assuming it's the RGB settings in this part of the CSS:

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab:before {
  content: '';
  position: absolute;
  left: -18px;
  top: -1px;
  transform: skewX(140deg);
  border-right: 0;
  margin: 0;
  padding: 0;
  width: 30px;
  border-radius: 5px 0 0 0;
  height: 28px;
  border-left-color: rgb(37, 37, 38);
  border-right-color: rgb(37, 37, 38);
  background-color: rgb(22, 26, 27);
}

.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active:before {
  background-color: rgb(28, 32, 34);
}

I might just have a play around myself, but any clues from your good self would be welcome as well, of course! Thanks!

@donysukardi
Copy link
Author

Sorry, I just saw your replies @carlca. You gotta update the colour to your theme colours manually. The values used in the gist are particular to my theme.

@imcyruskw
Copy link

Does this still work today?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment