rnhmjoj/solarized-dark-ui
1
0
Fork 0
mirror of https://github.com/Rnhmjoj/solarized-dark-ui synced 2025-01-10 09:24:21 +01:00
Code Issues Releases Wiki Activity

&:before woes

Browse Source
This commit is contained in:
Matt Graham 2013-11-06 13:17:17 -05:00
parent ed069869ac
commit 2f5866aeff
4 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
stylesheets/atom.less
View File

@ -1,5 +1,9 @@
@import "ui-variables"; @import "ui-variables";
* {
box-sizing: border-box;
}
#root-view { #root-view {
font: caption; font: caption;
background-color: @app-background-color; background-color: @app-background-color;

5
stylesheets/panels.less
View File

@ -29,11 +29,6 @@
position: relative; position: relative;
background-color: @inset-panel-background-color; background-color: @inset-panel-background-color;
border-radius: @component-border-radius; border-radius: @component-border-radius;
border: 1px solid @inset-panel-border-color;
box-shadow:
inset 0 1px 3px fadeout(@inset-panel-border-color, 40%),
inset 0 -1px 3px fadeout(@background-color-highlight, 3%);
} }
.is-blurred { .is-blurred {

24
stylesheets/tabs.less
View File

@ -8,9 +8,10 @@
.tab-bar { .tab-bar {
height: @tab-height + @tab-top-padding + 5px; height: @tab-height + @tab-top-padding + 5px;
background-image: -webkit-linear-gradient(top, @tab-bar-background-color, lighten(@tab-bar-background-color, 9%)); background: tab-bar-background-color;
box-shadow: inset 0 -8px 8px -4px rgba(0,0,0, .15); box-shadow: inset 0 -8px 8px -4px rgba(0,0,0, .15);
padding: 0 10px; padding: 0 10px;
box-sizing: border-box;
&:after { &:after {
content: ""; content: "";
@ -20,7 +21,6 @@
left: 0px; left: 0px;
width: 100%; width: 100%;
background-color: @tab-background-color-active; background-color: @tab-background-color-active;
border-bottom: 1px solid @tab-bar-border-color;
border-top: 1px solid @tab-border-color; border-top: 1px solid @tab-border-color;
} }
@ -37,24 +37,23 @@
box-shadow: inset -1px -1px 1px rgba(0,0,0, .05); box-shadow: inset -1px -1px 1px rgba(0,0,0, .05);
-webkit-transform: skewX(@tab-skew); -webkit-transform: skewX(@tab-skew);
transition: color .1s ease-in; transition: color .1s ease-in;
box-shadow: inset -1px 1px 0 @tab-border-color;
&, &:before { &, &:before {
background-image: -webkit-linear-gradient(top, @tab-background-color, darken(@tab-background-color, 6%)); background-image: -webkit-linear-gradient(top, lighten(#333, 7%), #333);
border-top: @tab-border;
} }
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0px; top: 0;
left: -18px; left: -18px;
height: @tab-height; height: @tab-height;
width: 34px; width: 40px;
border-top-left-radius: @tab-radius; border-top-left-radius: @tab-radius;
border-left: @tab-border; border-left: @tab-border;
box-shadow: inset 1px -1px 1px rgba(0,0,0, .05);
-webkit-transform: skewX(133deg); -webkit-transform: skewX(133deg);
border-top: none; box-shadow: inset 1px 1px 0 @tab-border-color;
} }
.close-icon { .close-icon {
@ -76,8 +75,10 @@
.tab.active { .tab.active {
z-index: 10; z-index: 10;
line-height: @tab-height - 2px; line-height: @tab-height - 4px;
color: @text-color-highlight; color: @text-color-highlight;
box-shadow: inset -1px -1px 0 @tab-border-color;
border: none;
.title{ .title{
position: relative; position: relative;
@ -89,9 +90,10 @@
} }
&, &:before { &, &:before {
background: @tab-background-color-active; background-image: -webkit-linear-gradient(top, lighten(@tab-background-color-active, 7%), @tab-background-color-active);
height: @tab-height + 1px; height: @tab-height + 1px;
box-shadow: none; box-shadow: inset 1px 1px 0 @tab-border-color;
border: none;
} }
} }

8
stylesheets/ui-variables.less
View File

@ -45,11 +45,11 @@
@button-background-color-selected: #5c6064; @button-background-color-selected: #5c6064;
@button-border-color: @base-border-color; @button-border-color: @base-border-color;
@tab-bar-background-color: @inset-panel-background-color; @tab-bar-background-color: #222;
@tab-bar-border-color: darken(@tab-background-color-active, 10%); @tab-bar-border-color: darken(@tab-background-color-active, 10%);
@tab-background-color: #292c2f; @tab-background-color: #333;
@tab-background-color-active: @panel-heading-background-color; @tab-background-color-active: #222;
@tab-border-color: transparent; @tab-border-color: red;
@tree-view-background-color: @tool-panel-background-color; @tree-view-background-color: @tool-panel-background-color;
@tree-view-border-color: @tool-panel-border-color; @tree-view-border-color: @tool-panel-border-color;