diff --git a/stylesheets/atom.less b/stylesheets/atom.less index f868642..54c444d 100644 --- a/stylesheets/atom.less +++ b/stylesheets/atom.less @@ -1,5 +1,9 @@ @import "ui-variables"; +* { + box-sizing: border-box; +} + #root-view { font: caption; background-color: @app-background-color; diff --git a/stylesheets/panels.less b/stylesheets/panels.less index d5c5743..8355b98 100644 --- a/stylesheets/panels.less +++ b/stylesheets/panels.less @@ -29,11 +29,6 @@ position: relative; background-color: @inset-panel-background-color; 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 { diff --git a/stylesheets/tabs.less b/stylesheets/tabs.less index 8924791..aff1dd9 100644 --- a/stylesheets/tabs.less +++ b/stylesheets/tabs.less @@ -8,9 +8,10 @@ .tab-bar { 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); padding: 0 10px; + box-sizing: border-box; &:after { content: ""; @@ -20,7 +21,6 @@ left: 0px; width: 100%; background-color: @tab-background-color-active; - border-bottom: 1px solid @tab-bar-border-color; border-top: 1px solid @tab-border-color; } @@ -37,24 +37,23 @@ box-shadow: inset -1px -1px 1px rgba(0,0,0, .05); -webkit-transform: skewX(@tab-skew); transition: color .1s ease-in; + box-shadow: inset -1px 1px 0 @tab-border-color; &, &:before { - background-image: -webkit-linear-gradient(top, @tab-background-color, darken(@tab-background-color, 6%)); - border-top: @tab-border; + background-image: -webkit-linear-gradient(top, lighten(#333, 7%), #333); } &:before { content: ''; position: absolute; - top: 0px; + top: 0; left: -18px; height: @tab-height; - width: 34px; + width: 40px; border-top-left-radius: @tab-radius; border-left: @tab-border; - box-shadow: inset 1px -1px 1px rgba(0,0,0, .05); -webkit-transform: skewX(133deg); - border-top: none; + box-shadow: inset 1px 1px 0 @tab-border-color; } .close-icon { @@ -76,8 +75,10 @@ .tab.active { z-index: 10; - line-height: @tab-height - 2px; + line-height: @tab-height - 4px; color: @text-color-highlight; + box-shadow: inset -1px -1px 0 @tab-border-color; + border: none; .title{ position: relative; @@ -89,9 +90,10 @@ } &, &: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; - box-shadow: none; + box-shadow: inset 1px 1px 0 @tab-border-color; + border: none; } } diff --git a/stylesheets/ui-variables.less b/stylesheets/ui-variables.less index 8b8ab87..bc2554f 100644 --- a/stylesheets/ui-variables.less +++ b/stylesheets/ui-variables.less @@ -45,11 +45,11 @@ @button-background-color-selected: #5c6064; @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-background-color: #292c2f; -@tab-background-color-active: @panel-heading-background-color; -@tab-border-color: transparent; +@tab-background-color: #333; +@tab-background-color-active: #222; +@tab-border-color: red; @tree-view-background-color: @tool-panel-background-color; @tree-view-border-color: @tool-panel-border-color;