github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-04-28 03:01:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

ui light tab styles

Browse Source
This commit is contained in:
Justin Palmer
2013-02-06 08:54:49 -08:00
parent b66b4ac213
commit 63a4dbdeb2
2 changed files with 31 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/tabs.css
View File

@@ -7,7 +7,6 @@
.tab {
cursor: default;
padding: 2px 21px 2px 9px;
-webkit-box-flex: 2;
position: relative;
width: 175px;
@@ -16,6 +15,7 @@
box-sizing: border-box;
text-shadow: -1px -1px 0 #000;
font-size: 11px;
padding: 5px 10px;
}
.tab.active {

95
themes/atom-light-ui/tabs.css
View File

@@ -1,84 +1,49 @@
.tabs {
background: #e3e3e3;
border-bottom: 4px solid #e5e5e5;
box-shadow: inset 0 -1px 0 #959595, 0 1px 0 #989898;
background: #cccccc;
border: none;
border-bottom: 4px solid #aaa;
box-shadow: inset 0 -1px 0 #666;
}
.tab {
background-image: -webkit-linear-gradient(#e0e0e0, #bfbfbf);
border-top: none;
border-right: 1px solid #959595;
border-bottom: 1px solid #959595;
box-shadow: inset 0 0 5px #eee, 0 1px 0 #eee, inset -1px 0 0 #e0e0e0, inset 1px 0 0 #e0e0e0;
margin: 0 0 1px 0;
background-image: -webkit-linear-gradient(#bbb, #999);
color: #444;
text-shadow: 1px 1px rgba(255, 255, 255, 0.1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5), /* top hightlight */
inset 1px 0 0 rgba(255, 255, 255, 0.3), /* left highlight */
inset 0 -1px 0 rgba(255, 255, 255, 0.2), /* bottom shadow */
inset -1px 0 0 rgba(0, 0, 0, 0.2), /* right shadow */
inset -2px 0 0 rgba(255, 255, 255, 0.1); /* right hightlight */
}
.tab.active {
background-image: -webkit-linear-gradient(#f7f7f7, #ccc);
color: #323232;
text-shadow: 1px 1px rgba(255, 255, 255, 0.5);
box-shadow:
inset -1px 0 0 rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(255, 255, 255, 1);
}
.tab:hover {
background-image: -webkit-linear-gradient(#e2e2e2, #e0e0e0);
background-image: -webkit-linear-gradient(#e2e2e2, #ddd);
}
.tab .close-icon {
color: rgba(0,0,0,0.3);
}
.tab.active,
.tab.active:hover {
.tab.active {
color: #010101;
}
.tab.active:first-child,
.tab.active:first-child:hover {
box-shadow: none;
}
.tab.file-modified.active .close-icon {
border-color: #aaa;
}
.tab:hover .close-icon {
color: #c8c8c8;
border-color: #c8c8c8;
.tab .close-icon {
color: #323232;
}
.tab.file-modified .close-icon {
border: 3px solid #777;
border-radius: 10px;
border-color: #1965d0;
}
.tab.active,
.tab.active:hover {
border-bottom-color: #e5e5e5;
box-shadow: inset -1px 0 0 #e0e0e0, inset 1px 0 0 #e0e0e0;
background-image: -webkit-linear-gradient(#fefefe, #e7e6e7);
}
.tab.active:before,
.tab.active:after {
border: 1px solid #959595;
}
.tab.active:before {
left: -5px;
border-bottom-right-radius: 4px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #e5e5e5;
}
.tab.active:after {
right: -5px;
border-bottom-left-radius: 4px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #e5e5e5;
}
.tab:hover {
background-image: -webkit-linear-gradient(#e2e2e2, #e0e0e0);
}
.tab .file-name {
text-shadow: 0 1px 0 #e0e0e0;
}
.tab .close-icon:hover {
color: #aaa;
.tab.file-modified:hover .close-icon:before {
color: #1965d0;
}