adding dark theme focused

This commit is contained in:
Jon Rohan
2013-02-01 19:15:39 -05:00
parent e54c3d8fbb
commit a004433edd
2 changed files with 68 additions and 21 deletions

View File

@@ -6,7 +6,7 @@
margin-bottom: 1px;
}
.tab {
.is-focused .tab {
cursor: default;
padding: 2px 21px 2px 9px;
background-image: -webkit-linear-gradient(#444, #3d3d3d);
@@ -16,6 +16,42 @@
box-shadow: inset 0 0 5px #383838, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a, inset 1px 0 0 #4a4a4a;
}
.is-focused .tab:first-child {
box-shadow: inset 0 0 5px #383838, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a;
}
.is-focused .tab.active,
.is-focused .tab.active:hover {
border-top: 1px solid #4a4a4a;
box-shadow: inset -1px 0 0 #595959, inset 1px 0 0 #595959;
border-bottom-color: #424242;
background-image: -webkit-linear-gradient(#555555, #424242);
}
.tab {
cursor: default;
padding: 2px 21px 2px 9px;
background-color: #555;
background-image: none;
border-top: 1px solid #383838;
border-right: 1px solid #2e2e2e;
border-bottom: 1px solid #2e2e2e;
box-shadow: inset 0 0 5px #555, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a, inset 1px 0 0 #4a4a4a;
}
.tab:first-child {
box-shadow: inset 0 0 5px #555, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a;
}
.tab.active,
.tab.active:hover {
border-top: 1px solid #4a4a4a;
box-shadow: inset -1px 0 0 #595959, inset 1px 0 0 #595959;
border-bottom-color: #424242;
background-image: none;
background-color: #424242;
}
.tab,
.tab .close-icon {
color: #aaa;
@@ -25,9 +61,9 @@
border-color: #aaa;
}
.tab.active,
.tab.active:hover,
.tab.active .close-icon {
.is-focused .tab.active,
.is-focused .tab.active:hover,
.is-focused .tab.active .close-icon {
color: #e6e6e6;
}
@@ -49,23 +85,11 @@
content: "";
}
.tab:first-child {
box-shadow: inset 0 0 5px #383838, 0 1px 0 #585858, inset -1px 0 0 #4a4a4a;
}
.tab.active:first-child,
.tab.active:first-child:hover {
.is-focused .tab.active:first-child,
.is-focused .tab.active:first-child:hover {
box-shadow: inset -1px 0 0 #595959;
}
.tab.active,
.tab.active:hover {
border-top: 1px solid #4a4a4a;
box-shadow: inset -1px 0 0 #595959, inset 1px 0 0 #595959;
border-bottom-color: #424242;
background-image: -webkit-linear-gradient(#555555, #424242);
}
.tab.active:before,
.tab.active:after {
position: absolute;
@@ -76,6 +100,19 @@
z-index: 3;
border: 1px solid #595959;
}
.is-focused .tab.active:before {
border-bottom-right-radius: 4px;
border-width: 0 1px 1px 0;
box-shadow: 2px 2px 0 #424242;
left: -4px;
}
.is-focused .tab.active:after {
right: -4px;
border-bottom-left-radius: 4px;
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #424242;
}
.tab.active:before {
border-bottom-right-radius: 4px;
border-width: 0 1px 1px 0;
@@ -88,7 +125,7 @@
border-width: 0 0 1px 1px;
box-shadow: -2px 2px 0 #424242;
}
.tab.active:first-child:before {
.is-focused .tab.active:first-child:before {
display: none;
}

View File

@@ -1,8 +1,13 @@
.tree-view {
.is-focused .tree-view {
background: #1e1e1e;
border-right: 1px solid #191919;
}
.tree-view {
background: #2e2e2e;
border-right: 1px solid #191919;
}
.tree-view .entry {
text-shadow: 0 -1px 0 #000;
}
@@ -20,10 +25,15 @@
color: #d2d2d2;
}
.tree-view .selected > .highlight {
.is-focused .tree-view .selected > .highlight {
background-image: -webkit-linear-gradient(#4e4e4e, #434343);
}
.tree-view .selected > .highlight {
background-image: none;
background-color: #6e6e6e;
}
.tree-view:focus .selected > .highlight {
background-image: -webkit-linear-gradient(#7e7e7e, #737373);
}