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 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