diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 1567d8c5d61..c0d1757dae7 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -139,6 +139,8 @@ $table-bg-accent: $dark-3; // for striping $table-bg-hover: $dark-4; // for hover $table-border: $dark-3; // table and cell border +$table-bg-odd: $dark-2; + // Buttons // ------------------------- @@ -160,6 +162,7 @@ $btn-danger-bg-hl: darken($red, 8%); $btn-inverse-bg: $dark-3; $btn-inverse-bg-hl: lighten($dark-3, 4%); $btn-inverse-text-color: $link-color; +$btn-inverse-text-shadow: 0px 1px 0 rgba(0,0,0,.1); $btn-link-color: $gray-3; @@ -182,7 +185,7 @@ $input-border-focus: $input-border-color !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: $gray-1 !default; $input-label-bg: $gray-blue; -$input-label-border-color: transparent; +$input-label-border-color: $gray-blue; $input-invalid-border-color: lighten($red, 5%); // Search @@ -241,11 +244,14 @@ $navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg; $navbarButtonBackground: $navbarBackground; $navbarButtonBackgroundHighlight: $body-bg; +$navbar-button-border: #151515; + // Sidemenu // ------------------------- $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 @@ -261,6 +267,9 @@ $page-nav-bg: $black; $page-nav-shadow: 5px 5px 20px -5px $black; $page-nav-breadcrumb-color: $gray-3; +// Tabs +// ------------------------- +$tab-border-color: $dark-4; // Pagination // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 78c0ba3bf61..f6512aed3c4 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -14,24 +14,24 @@ $black: #000; // ------------------------- $black: #000; -$dark-1: #141414; -$dark-2: #1d1d1f; -$dark-3: #262628; -$dark-4: #373737; -$dark-5: #444444; -$gray-1: #555555; -$gray-2: #7B7B7B; -$gray-3: #b3b3b3; -$gray-4: #D8D9DA; -$gray-5: #ECECEC; -$gray-6: #f4f5f8; -$gray-7: #fbfbfb; +$dark-1: #13161d; +$dark-2: #1e2028; +$dark-3: #303133; +$dark-4: #35373f; +$dark-5: #41444b; +$gray-1: #52545c; +$gray-2: #767980; +$gray-3: #acb6bf; +$gray-4: #c7d0d9; +$gray-5: #dde4ed; +$gray-6: #e9edf2; +$gray-7: #f7f8fa; $white: #fff; // Accent colors // ------------------------- -$blue: #2AB2E4; +$blue: #1ca4d6; $blue-dark: #3CAAD6; $green: #3aa655; $red: #d44939; @@ -39,7 +39,7 @@ $yellow: #FF851B; $orange: #Ff7941; $pink: #E671B8; $purple: #9954BB; -$variable: #2AB2E4; +$variable: $blue; $brand-primary: $orange; $brand-success: $green; @@ -55,22 +55,22 @@ $critical: #EC2128; // Scaffolding // ------------------------- -$body-bg: $white; -$page-bg: $white; +$body-bg: $gray-7; +$page-bg: $gray-7; $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-header-bg: linear-gradient(90deg, #292a2d, black); +$page-gradient: linear-gradient(-60deg, transparent 70%, $gray-7 98%); // Links // ------------------------- @@ -97,7 +97,7 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-7; +$panel-bg: $white; $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); @@ -105,9 +105,9 @@ $panel-header-hover-bg: $gray-6; $panel-header-menu-hover-bg: $gray-4; // Page header -$page-header-bg: linear-gradient(90deg, #292a2d, black); -$page-header-shadow: inset 0px -4px 14px $dark-2; -$page-header-border-color: $dark-4; +$page-header-bg: linear-gradient(90deg, $white, $gray-7); +$page-header-shadow: inset 0px -3px 10px $gray-6; +$page-header-border-color: $gray-4; $divider-border-color: $gray-2; @@ -122,12 +122,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-hover: linear-gradient(135deg, $gray-6, $gray-7); +$card-background: linear-gradient(135deg, $gray-6, $gray-5); +$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); $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, $gray-5, $gray-6);//$card-background; $list-item-hover-bg: darken($gray-5, 5%); $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; @@ -140,6 +140,8 @@ $table-bg-hover: $gray-5; // for hover $table-bg-active: $table-bg-hover !default; $table-border: $gray-3; // table and cell border +$table-bg-odd: $gray-5; + // Scrollbars $scrollbarBackground: $gray-5; $scrollbarBackground2: $gray-5; @@ -162,9 +164,10 @@ $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: $gray-6; +$btn-inverse-bg-hl: darken($gray-6, 5%); +$btn-inverse-text-color: $gray-1; +$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, .4); $btn-link-color: $gray-1; @@ -176,7 +179,7 @@ $iconContainerBackground: $white; // Forms // ------------------------- -$input-bg: $gray-7; +$input-bg: $white; $input-bg-disabled: $gray-5; $input-color: $dark-3; @@ -185,33 +188,38 @@ $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: $gray-5; +$input-label-border-color: $gray-5; $input-invalid-border-color: lighten($red, 5%); // Sidemenu // ------------------------- -$side-menu-bg: $body-bg; -$side-menu-item-hover-bg: $gray-6; -$side-menu-shadow: 0 0 5px #c2c2c2; +$side-menu-bg: $dark-2; +$side-menu-item-hover-bg: $gray-1; +$side-menu-shadow: 5px 0px 10px -5px $gray-1; +$side-menu-link-color: $gray-6; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $white; +$menu-dropdown-bg: $gray-7; $menu-dropdown-hover-bg: $gray-6; $menu-dropdown-border-color: $gray-4; -$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4; +$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; // Breadcrumb // ------------------------- -$page-nav-bg: #eaebee; +$page-nav-bg: $gray-5; $page-nav-shadow: 5px 5px 20px -5px $gray-4; $page-nav-breadcrumb-color: $black; $breadcrumb-hover-hl: #d9dadd; +// Tabs +// ------------------------- +$tab-border-color: $gray-5; + // search $search-shadow: 0 5px 30px 0 $gray-4; -$search-filter-box-bg: $gray-4; +$search-filter-box-bg: $gray-7; // Dropdowns // ------------------------- @@ -257,8 +265,8 @@ $wellBackground: $gray-3; // ------------------------- $navbarHeight: 52px; -$navbarBackgroundHighlight: #f8f8f8; -$navbarBackground: #f2f3f7; +$navbarBackgroundHighlight: $white; +$navbarBackground: $white; $navbarBorder: 1px solid $gray-4; $navbarShadow: 0 0 3px #c1c1c1; @@ -275,6 +283,8 @@ $navbarBrandColor: $navbarLinkColor; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); +$navbar-button-border: $gray-4; + // Pagination // ------------------------- @@ -318,7 +328,8 @@ $graph-tooltip-bg: $gray-5; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff); +// $info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff); +$info-box-background: linear-gradient(135deg, $blue, $blue-dark); // footer $footer-link-color: $gray-3; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 62091acdab5..bb4645504aa 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -75,7 +75,7 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: 30px !default; -$enable-flex: false; +$enable-flex: true; // Typography // ------------------------- @@ -224,7 +224,7 @@ $btn-padding-y-lg: 11px !default; $btn-padding-x-xl: 21px !default; $btn-padding-y-xl: 11px !default; -$btn-border-radius: 3px; +$btn-border-radius: 2px; // sidemenu $side-menu-width: 60px; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 391acdc5e87..a53d35fc1da 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -106,7 +106,7 @@ } // Inverse appears as dark gray .btn-inverse { - @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow); //background: $card-background; box-shadow: $card-shadow; //border: 1px solid $tight-form-func-highlight-bg; diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss index 5b6f8695a31..074286fad80 100644 --- a/public/sass/components/_filter-table.scss +++ b/public/sass/components/_filter-table.scss @@ -17,7 +17,7 @@ tbody { tr:nth-child(odd) { - background: $dark-2; + background: $table-bg-odd; } } @@ -34,7 +34,6 @@ padding: $table-cell-padding; line-height: 30px; height: 30px; - border-bottom: 1px solid black; white-space: nowrap; &.filter-table__switch-cell { diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index c6416421be4..25d7c6ffa82 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -74,15 +74,15 @@ } .navbar-button { - @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow); display: inline-block; font-weight: $btn-font-weight; padding: 8px 11px; line-height: 16px; color: $text-muted; - border: 1px solid #151515; - margin-right: 1px; + border: 1px solid $navbar-button-border; + margin-right: 3px; white-space: nowrap; .gicon { diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index ee5ee39f7d5..605b15dd5bc 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -110,7 +110,7 @@ display: inline-block; .fa, .icon-gf, .gicon { - color: $link-color; + color: $side-menu-link-color; position: relative; opacity: .7; font-size: 130%; @@ -135,6 +135,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/components/_tabs.scss b/public/sass/components/_tabs.scss index fee6d2cb7b8..80874241b79 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -31,7 +31,7 @@ &.active, &.active:hover, &.active:focus { - border-color: $orange $dark-4 transparent; + border-color: $orange $tab-border-color transparent; background: $page-bg; color: $link-color; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 19a4fb1b8e1..35371cc35a9 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -15,8 +15,12 @@ } .page-container { - @extend .container; - padding: 0 $spacer * 2; + margin-left: auto; + margin-right: auto; + padding-left: $spacer*2; + padding-right: $spacer*2; + max-width: 980px; + @include clearfix(); } .scroll-canvas {