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 a8ceebf..71496bb 100644 --- a/stylesheets/panels.less +++ b/stylesheets/panels.less @@ -28,18 +28,11 @@ .inset-panel { 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 { .tool-panel, .inset-panel { - opacity: 0.6; } } diff --git a/stylesheets/tabs.less b/stylesheets/tabs.less index e2f9e16..62c38a1 100644 --- a/stylesheets/tabs.less +++ b/stylesheets/tabs.less @@ -1,65 +1,123 @@ @import "ui-variables"; -@import "ui-mixins"; +@tab-radius: 3px; +@modified-icon-width: 8px; +@tab-skew: 30deg; +@tab-top-padding: 5px; +@tab-bottom-border-height: 8px; +@tab-border: 1px solid @tab-border-color; +@tab-bar-bottom-border-color: #111; .tab-bar { - height: @tab-height + 6px; - border-bottom: 4px solid @tab-bar-border-color; - box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5); - margin-bottom: 1px; - background-color: @tab-bar-background-color; -} + height: @tab-height + @tab-top-padding + @tab-bottom-border-height; + background: @tab-bar-background-color; + box-shadow: inset 0 -8px 8px -4px rgba(0,0,0, .15); + padding: 0 13px 0 10px; + box-sizing: border-box; -.tab { - height: @tab-height; - line-height: @tab-height; - color: @text-color; - margin: 0; - background-image: -webkit-linear-gradient(@tab-background-color, darken(@tab-background-color, 10%)); - box-shadow: - inset 0 2px 0 rgba(255, 255, 255, 0.1), - inset 0 1px 0 rgba(0, 0, 0, 1), - inset 1px 0 0 @background-color-highlight, - inset -1px 0 0 @background-color-highlight; -} - -.tab:hover { - color: @text-color-highlight; -} - -.tab.active { - height: @tab-height + 1px; - background-image: -webkit-linear-gradient(@tab-background-color-active, @tab-bar-border-color); - color: @text-color-highlight; - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); - z-index: 2; - box-shadow: - inset 0 1px 0 rgba(0, 0, 0, 0.5), - inset 0 2px 0 rgba(255, 255, 255, 0.1), - inset 1px 0 0 rgba(255, 255, 255, 0.1), - inset -1px 0 0 rgba(255, 255, 255, 0.1) -} - -.tab.active:hover .close-icon { - color: @text-color-highlight; -} - -// Bootstrap nav tabs. -.nav.nav-tabs { - border-bottom-color: @tab-background-color-active; - - > li { - margin-bottom: 0; + &:after { + content: ""; + position: absolute; + bottom: 0; + height: @tab-bottom-border-height; + left: 0px; + width: 100%; + background-color: @tab-background-color-active; + border-top: 1px solid @tab-border-color; + border-bottom: 1px solid @tab-bar-bottom-border-color; } - > li > a { + .tab { + position: relative; + top: @tab-top-padding; + height: @tab-height; + line-height: @tab-height; + color: @text-color; + padding-left: 0; + margin-left: 15px; + border-top-right-radius: @tab-radius; + 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, 4px 0px 4px rgba(0,0,0,.1); border: none; + + &, &:before { + background-image: -webkit-linear-gradient(top, lighten(#333, 7%), #333); + } + + &:before { + content: ''; + position: absolute; + top: 0; + left: -18px; + height: @tab-height; + width: 40px; + border-top-left-radius: @tab-radius; + -webkit-transform: skewX(133deg); + box-shadow: inset 1px 1px 0 @tab-border-color, -4px 0px 4px rgba(0,0,0,.1); + border: none; + } + + .close-icon { + z-index: 3; + line-height: @tab-height; + -webkit-transform: skewX(-@tab-skew); + } + &.modified:not(:hover) .close-icon { + top: @tab-height/2 - @modified-icon-width/2 + 1px; + right: 14px; + width: @modified-icon-width; + height: @modified-icon-width; + } + + .title{ + -webkit-transform: skewX(-@tab-skew); + } + + &:first-child { + margin-left: 20px; + } } - > li.active > a { - .text(highlight); + .tab.active { + z-index: 10; + line-height: @tab-height - 3px; + color: @text-color-highlight; + box-shadow: inset -1px 1px 0 @tab-border-color, 4px -4px 4px rgba(0,0,0,.1); border: none; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - background-color: @background-color-highlight; + + .title{ + position: relative; + top: 1px; + } + + .close-icon { + line-height: @tab-height - 1px; + } + + &, &:before { + background-image: -webkit-linear-gradient(top, lighten(@tab-background-color-active, 7%), @tab-background-color-active); + height: @tab-height + 1px; + } + + &:before { + border: none; + box-shadow: inset 1px 1px 0 @tab-border-color, -4px -4px 4px rgba(0,0,0,.1); + } + } + + .tab:hover { + color: @text-color-highlight; + } + + .tab.active:hover .close-icon { + color: @text-color-highlight; + } + + .placeholder { + height: @tab-height + @tab-top-padding + @tab-bottom-border-height; + &:after { + top: @tab-height + @tab-top-padding + @tab-bottom-border-height; + } } } diff --git a/stylesheets/ui-variables.less b/stylesheets/ui-variables.less index 919ffb3..5847a0d 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: #484848; @tree-view-background-color: @tool-panel-background-color; @tree-view-border-color: @tool-panel-border-color; @@ -63,7 +63,7 @@ // Sizes -@font-size: 12px; +@font-size: 11px; @disclosure-arrow-size: 12px;