diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index a4e4123492c..ec1dc230277 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -14,8 +14,9 @@ $gray-darker: lighten(#000, 11.5%); // #222 $gray-dark: lighten(#000, 20%); // #333 $gray: lighten(#000, 33.5%); // #555 $gray-light: lighten(#000, 60%); // #999 -$gray-lighter: lighten(#000, 97.5%); // #eee -$gray-lightest: lighten(#000, 98.5%); // #eee +$gray-light2: lighten(#000, 70%); // #999 +$gray-lighter: lighten(#000, 96.5%); // #eee +$gray-lightest: lighten(#000, 98%); // #eee $white: #fff; @@ -45,16 +46,16 @@ $critical: #EC2128; // Scaffolding // ------------------------- -$body-bg: #EFEFEF; -$page-bg: $gray-lightest; +$body-bg: $white; +$page-bg: $white; $body-color: $gray; $text-color: $gray; // Links // ------------------------- $link-color: $gray; -$link-color-disabled: lighten($link-color,30%); -$link-hover-color: darken($link-color, 20%); +$link-color-disabled: lighten($link-color,30%); +$link-hover-color: darken($link-color, 20%); // Typography // ------------------------- @@ -74,8 +75,8 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-lighter; -$panel-border: solid 1px #ddd; +$panel-bg: $gray-lightest; +$panel-border: solid 1px $gray-lighter; $divider-border-color: $gray-light; @@ -84,7 +85,7 @@ $submenuBackground: rgb(218, 217, 217); $submenuBorder: $white; // Graphite Target Editor -$tight-form-border: #ddd; +$tight-form-border: #ddd; $tight-form-bg: #efefef; $tight-form-func-bg: darken($tight-form-bg, 5%); @@ -162,7 +163,7 @@ $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; $input-border-focus: #66afe9 !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: #999 !default; -$input-label-bg: #f8f8f8; +$input-label-bg: #f8f8f8; // Sidemenu // ------------------------- diff --git a/public/sass/components/_gfbox.scss b/public/sass/components/_gfbox.scss index 50f64cde6a6..4dadfcf9e14 100644 --- a/public/sass/components/_gfbox.scss +++ b/public/sass/components/_gfbox.scss @@ -1,6 +1,6 @@ .gf-box { margin: 10px 5px; - background-color: $panel-bg; + background-color: $page-bg; position: relative; border: 1px solid $tight-form-func-bg; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 410d5f509dc..05853ec0afb 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -33,17 +33,18 @@ } .page-header { - padding: $spacer 0 $spacer * 2.5; + padding: $spacer 0; display: flex; justify-content: space-between; align-items: center; - display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ - display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ - display: -ms-flexbox; /* TWEENER - IE 10 */ - display: -webkit-flex; /* NEW - Chrome */ flex-wrap: wrap-reverse; - background: transparent url(../img/page_header_line.png) no-repeat left 60px; + border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); + border-image-slice: 1; + border-top: 0; + border-right: 0; + border-left: 0; + border-bottom: 4px solid transparent; h1 { font-style: italic; diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss index cc74a0b2c3e..15070fe6ef8 100644 --- a/public/sass/mixins/_buttons.scss +++ b/public/sass/mixins/_buttons.scss @@ -5,8 +5,6 @@ // gradientBar will set the background to a pleasing blend of these, to support IE<=9 @include gradientBar($startColor, $endColor, $text-color, $textShadow); - box-shadow: inset 0 -4px rgba(0,0,0,0.3); - // in these cases the gradient won't cover the background, so we override &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { color: $text-color; @@ -20,6 +18,8 @@ @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; + box-shadow: inset 0 (-$padding-y/2) rgba(0,0,0,0.2); + @include border-radius($border-radius); }