Skip to content

Instantly share code, notes, and snippets.

@ayamflow
Created July 13, 2014 11:12
Show Gist options
  • Save ayamflow/b4e3261a0a18526cad88 to your computer and use it in GitHub Desktop.
Save ayamflow/b4e3261a0a18526cad88 to your computer and use it in GitHub Desktop.
Sublime Text-like tab bar for Atom Editor
// Custom styles - ayamflow
.tab-bar {
height: 33px !important;
line-height: 33px !important;
background-image: -webkit-linear-gradient(#2b2b2b, #353535) !important;
&:active {
background-color: #424242;
border-top: 1px solid #2E2E2E;
border-bottom: 1px solid #3B3B3B;
}
&:after {
background-color: #444444;
border-bottom: 1px solid #3b3b3b;
border-top: 1px solid #585858;
}
}
.tab {
height: 23px !important;
line-height: 23px !important;
max-width: 110px !important;
background-image: -webkit-linear-gradient(#454545, #3d3d3d) !important;
&:after, &:before {
background-image: -webkit-linear-gradient(#454545, #3d3d3d) !important;
}
&:after {
border-top-right-radius: 5px !important;
-webkit-transform: skew(20deg) !important;
}
&:before {
border-top-left-radius: 5px !important;
-webkit-transform: skew(-20deg) !important;
}
&.active {
background-color: #444444 !important;
&:after, &:before {
background-color: #444 !important;
}
max-width: 110px !important;
height: 27px !important;
line-height: 21px !important;
}
}
.focusable-panel {
background: #1e1e1e;
}
.editor .cursor {
border-width: 2px;
margin-left: -1px;
}
// Make the scrollbar visible (fix for some themes)
::-webkit-scrollbar {
width: 8px;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background: rgba(255,255,255, 0.1);
}
::-webkit-scrollbar-track {
background: rgba(255,255,255, 0.02);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment