diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 6172fc77515..6a44493a001 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -238,6 +238,7 @@ $navbarButtonBackgroundHighlight: $body-bg; $side-menu-bg: $black; $side-menu-item-hover-bg: $dark-2; $side-menu-shadow: 0 0 20px black; +$side-menu-link-color: $link-color; $breadcrumb-hover-hl: #111; // Menu dropdowns diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 621ec2a51a1..2360f6ff766 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -27,7 +27,7 @@ $gray-5: #ECECEC; $gray-6: #f4f5f8; $gray-7: #fbfbfb;*/ -$black: #000; +/*$black: #000; $dark-1: #121314; $dark-2: #1d1d1f; $dark-3: #272729; @@ -39,7 +39,22 @@ $gray-3: #b2b3b8; $gray-4: #d5d6db; $gray-5: #e9eaf0; $gray-6: #f4f5f8; -$gray-7: #fafbfc; +$gray-7: #fafbfc;*/ + +$black: #000; +$dark-1: #13161d; +$dark-2: #1e2028; +$dark-3: #303133; +$dark-4: #35373f; +$dark-5: #41444b; +$gray-1: #52545c; +$gray-2: #767980; +$gray-3: #acaeb6; +$gray-4: #ced0d8; +$gray-5: #dfe3eb; +//$gray-5: #dfe7eb; +$gray-6: #ebedf2; +$gray-7: #f7f8fa; $white: #fff; @@ -72,18 +87,21 @@ $critical: #EC2128; $body-bg: $white; $page-bg: $white; $body-color: $gray-1; -$text-color: $gray-1; +$text-color: $dark-4; $text-color-strong: $white; -$text-color-weak: $gray-3; +$text-color-weak: $gray-2; $text-color-faint: $gray-4; $text-color-emphasis: $dark-5; $text-shadow-strong: none; $text-shadow-faint: none; +$textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%); -$page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%); +//$page-gradient: linear-gradient(120deg, transparent 40%, darken($gray-6, 4%) 98%); +$page-gradient: linear-gradient(120deg, $gray-7 40%, $gray-6 98%); +//$page-gradient: $gray-7; // Links // ------------------------- @@ -110,7 +128,7 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-7; +$panel-bg: $white;//$gray-7; $panel-border-color: $gray-5; $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); @@ -130,12 +148,12 @@ $code-tag-bg: $gray-6; $code-tag-border: darken($code-tag-bg, 3%); // cards -$card-background: linear-gradient(135deg, $gray-5, $gray-6); +$card-background: linear-gradient(135deg, #ccd2d9, #dde4ed);//linear-gradient(135deg, $gray-4, $gray-5); $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1); // Lists -$list-item-bg: $card-background; +$list-item-bg: linear-gradient(135deg, #dde4ed, $gray-6);//$card-background; $list-item-hover-bg: darken($gray-5, 5%); $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; @@ -170,9 +188,9 @@ $btn-warning-bg-hl: darken($orange, 3%); $btn-danger-bg: lighten($red, 3%); $btn-danger-bg-hl: darken($red, 3%); -$btn-inverse-bg: $gray-5; -$btn-inverse-bg-hl: darken($gray-5, 5%); -$btn-inverse-text-color: $dark-4; +$btn-inverse-bg: #acb6bf;//#dae5f0;//$gray-5; +$btn-inverse-bg-hl: darken(#b8c2cc, 5%); +$btn-inverse-text-color: $gray-7;//$dark-4; $btn-link-color: $gray-1; @@ -184,24 +202,25 @@ $iconContainerBackground: $white; // Forms // ------------------------- -$input-bg: $gray-7; +$input-bg: $white; $input-bg-disabled: $gray-5; $input-color: $dark-3; -$input-border-color: $gray-5; +$input-border-color: #dde4ed;//$gray-4; $input-box-shadow: none; $input-border-focus: $blue !default; $input-box-shadow-focus: $blue !default; $input-color-placeholder: $gray-4 !default; -$input-label-bg: #eaebee; -$input-label-border-color: #e3e4e7; +$input-label-bg: #dde4ed;//#dfe7f0;//#dae5f0;//#d8dfed;//$gray-5;#dde6f0; +$input-label-border-color: #dde4ed;//#dfe7f0;//#dae5f0;//#d8dfed;//$gray-5;#dde6f0; $input-invalid-border-color: lighten($red, 5%); // Sidemenu // ------------------------- -$side-menu-bg: $gray-7; -$side-menu-item-hover-bg: $gray-5; -$side-menu-shadow: 0 0 5px #c2c2c2; +$side-menu-bg: $dark-3; +$side-menu-item-hover-bg: $gray-1; +$side-menu-shadow: 0 0 5px $dark-5;//0 0 5px #c2c2c2; +$side-menu-link-color: $gray-6; // Menu dropdowns // ------------------------- @@ -264,7 +283,7 @@ $wellBackground: $gray-3; // ------------------------- $navbarHeight: 52px; -$navbarBackgroundHighlight: white; +$navbarBackgroundHighlight: $white; $navbarBackground: $white; $navbarBorder: 1px solid $gray-4; $navbarShadow: 0 0 3px #c1c1c1; diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 2facca8dadc..fc9acc375d8 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -100,7 +100,7 @@ display: inline-block; .fa, .icon-gf, .gicon { - color: $link-color; + color: $side-menu-link-color; position: relative; opacity: .7; font-size: 130%; @@ -125,6 +125,7 @@ white-space: nowrap; background-color: $side-menu-item-hover-bg; font-size: 17px; + color: #ebedf2; } li.sidemenu-org-switcher { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index a13e703717d..5c9e9622e7f 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -144,7 +144,6 @@ line-height: 36px; padding: 0 7px 0 37px; @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); - //background:linear-gradient(#edeff2, #e3e4e7); position: relative; box-shadow: $card-shadow; @@ -166,13 +165,13 @@ &.active, &:hover { background: #fff;//#333; - background: linear-gradient($gray-4, darken($gray-4, 5%)); //linear-gradient(#333, #000); + background: linear-gradient(#dde4ed, darken(#dde4ed, 5%)); //linear-gradient(#333, #000); } &.active:after, &:hover:after { background: #fff;//#333; - background: linear-gradient(135deg, $gray-4,darken($gray-4, 5%));////linear-gradient(135deg, #333, #000); + background: linear-gradient(135deg, #dde4ed,darken(#dde4ed, 5%));////linear-gradient(135deg, #333, #000); } &:after {