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;
}
@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