IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

fixed grey colors in light-theme, added new variables, played a bit with blue

Browse Source
This commit is contained in:
Patrick O'Carroll 2017-12-05 12:48:16 +01:00
parent a16cfb4b3b
commit df5fd3cd1d
6 changed files with 51 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/sass/_variables.dark.scss
View File

@ -139,6 +139,8 @@ $table-bg-accent: $dark-3; // for striping
$table-bg-hover: $dark-4; // for hover $table-bg-hover: $dark-4; // for hover
$table-border: $dark-3; // table and cell border $table-border: $dark-3; // table and cell border
$table-bg-odd: $dark-2;
// Buttons // Buttons
// ------------------------- // -------------------------
@ -160,6 +162,7 @@ $btn-danger-bg-hl: darken($red, 8%);
$btn-inverse-bg: $dark-3; $btn-inverse-bg: $dark-3;
$btn-inverse-bg-hl: lighten($dark-3, 4%); $btn-inverse-bg-hl: lighten($dark-3, 4%);
$btn-inverse-text-color: $link-color; $btn-inverse-text-color: $link-color;
$btn-inverse-text-shadow: 0px 1px 0 rgba(0,0,0,.1);
$btn-link-color: $gray-3; $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-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: $gray-1 !default; $input-color-placeholder: $gray-1 !default;
$input-label-bg: $gray-blue; $input-label-bg: $gray-blue;
$input-label-border-color: transparent; $input-label-border-color: $gray-blue;
$input-invalid-border-color: lighten($red, 5%); $input-invalid-border-color: lighten($red, 5%);
// Search // Search
@ -241,6 +244,8 @@ $navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg;
$navbarButtonBackground: $navbarBackground; $navbarButtonBackground: $navbarBackground;
$navbarButtonBackgroundHighlight: $body-bg; $navbarButtonBackgroundHighlight: $body-bg;
$navbar-button-border: #151515;
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
$side-menu-bg: $black; $side-menu-bg: $black;
@ -262,6 +267,9 @@ $page-nav-bg: $black;
$page-nav-shadow: 5px 5px 20px -5px $black; $page-nav-shadow: 5px 5px 20px -5px $black;
$page-nav-breadcrumb-color: $gray-3; $page-nav-breadcrumb-color: $gray-3;
// Tabs
// -------------------------
$tab-border-color: $dark-4;
// Pagination // Pagination
// ------------------------- // -------------------------

95
public/sass/_variables.light.scss
View File

@ -13,34 +13,6 @@ $theme-name: light;
$black: #000; $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;*/
/*$black: #000;
$dark-1: #121314;
$dark-2: #1d1d1f;
$dark-3: #272729;
$dark-4: #38383b;
$dark-5: #444547;
$gray-1: #525357;
$gray-2: #7a7c80;
$gray-3: #b2b3b8;
$gray-4: #d5d6db;
$gray-5: #e9eaf0;
$gray-6: #f4f5f8;
$gray-7: #fafbfc;*/
$black: #000; $black: #000;
$dark-1: #13161d; $dark-1: #13161d;
$dark-2: #1e2028; $dark-2: #1e2028;
@ -49,18 +21,17 @@ $dark-4: #35373f;
$dark-5: #41444b; $dark-5: #41444b;
$gray-1: #52545c; $gray-1: #52545c;
$gray-2: #767980; $gray-2: #767980;
$gray-3: #acaeb6; $gray-3: #acb6bf;
$gray-4: #ced0d8; $gray-4: #c7d0d9;
$gray-5: #dfe3eb; $gray-5: #dde4ed;
//$gray-5: #dfe7eb; $gray-6: #e9edf2;
$gray-6: #ebedf2;
$gray-7: #f7f8fa; $gray-7: #f7f8fa;
$white: #fff; $white: #fff;
// Accent colors // Accent colors
// ------------------------- // -------------------------
$blue: #2AB2E4; $blue: #1ca4d6;
$blue-dark: #3CAAD6; $blue-dark: #3CAAD6;
$green: #3aa655; $green: #3aa655;
$red: #d44939; $red: #d44939;
@ -68,7 +39,7 @@ $yellow: #FF851B;
$orange: #Ff7941; $orange: #Ff7941;
$pink: #E671B8; $pink: #E671B8;
$purple: #9954BB; $purple: #9954BB;
$variable: #2AB2E4; $variable: $blue;
$brand-primary: $orange; $brand-primary: $orange;
$brand-success: $green; $brand-success: $green;
@ -84,8 +55,8 @@ $critical: #EC2128;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: $white; $body-bg: $gray-7;
$page-bg: $white; $page-bg: $gray-7;
$body-color: $gray-1; $body-color: $gray-1;
$text-color: $dark-4; $text-color: $dark-4;
$text-color-strong: $white; $text-color-strong: $white;
@ -99,11 +70,7 @@ $textShadow: none;
// gradients // 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%); $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(120deg, transparent 40%, darken($gray-6, 4%) 98%); $page-gradient: linear-gradient(-60deg, transparent 70%, $gray-7 98%);
$page-gradient: linear-gradient(120deg, $gray-7 40%, $gray-6 98%);
//$page-gradient: $gray-7;
// $page-gradient: linear-gradient(-60deg, transparent 70%, darken($page-bg, 4%) 98%);
$page-header-bg: linear-gradient(90deg, #292a2d, black);
// Links // Links
// ------------------------- // -------------------------
@ -130,7 +97,7 @@ $component-active-bg: $brand-primary !default;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: $white;//$gray-7; $panel-bg: $white;
$panel-border-color: $gray-5; $panel-border-color: $gray-5;
$panel-border: solid 1px $panel-border-color; $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); $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
@ -138,9 +105,9 @@ $panel-header-hover-bg: $gray-6;
$panel-header-menu-hover-bg: $gray-4; $panel-header-menu-hover-bg: $gray-4;
// Page header // Page header
$page-header-bg: linear-gradient(90deg, #292a2d, black); $page-header-bg: linear-gradient(90deg, $white, $gray-7);
$page-header-shadow: inset 0px -4px 14px $dark-2; $page-header-shadow: inset 0px -3px 10px $gray-6;
$page-header-border-color: $dark-4; $page-header-border-color: $gray-4;
$divider-border-color: $gray-2; $divider-border-color: $gray-2;
@ -155,12 +122,12 @@ $code-tag-bg: $gray-6;
$code-tag-border: darken($code-tag-bg, 3%); $code-tag-border: darken($code-tag-bg, 3%);
// cards // cards
$card-background: linear-gradient(135deg, #ccd2d9, #dde4ed);//linear-gradient(135deg, $gray-4, $gray-5); $card-background: linear-gradient(135deg, $gray-4, $gray-5);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7); $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); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
// Lists // Lists
$list-item-bg: linear-gradient(135deg, #dde4ed, $gray-6);//$card-background; $list-item-bg: linear-gradient(135deg, $gray-5, $gray-6);//$card-background;
$list-item-hover-bg: darken($gray-5, 5%); $list-item-hover-bg: darken($gray-5, 5%);
$list-item-link-color: $text-color; $list-item-link-color: $text-color;
$list-item-shadow: $card-shadow; $list-item-shadow: $card-shadow;
@ -173,6 +140,8 @@ $table-bg-hover: $gray-5; // for hover
$table-bg-active: $table-bg-hover !default; $table-bg-active: $table-bg-hover !default;
$table-border: $gray-3; // table and cell border $table-border: $gray-3; // table and cell border
$table-bg-odd: $gray-5;
// Scrollbars // Scrollbars
$scrollbarBackground: $gray-5; $scrollbarBackground: $gray-5;
$scrollbarBackground2: $gray-5; $scrollbarBackground2: $gray-5;
@ -195,9 +164,10 @@ $btn-warning-bg-hl: darken($orange, 3%);
$btn-danger-bg: lighten($red, 3%); $btn-danger-bg: lighten($red, 3%);
$btn-danger-bg-hl: darken($red, 3%); $btn-danger-bg-hl: darken($red, 3%);
$btn-inverse-bg: #acb6bf;//#dae5f0;//$gray-5; $btn-inverse-bg: $gray-6;
$btn-inverse-bg-hl: darken(#b8c2cc, 5%); $btn-inverse-bg-hl: darken($gray-6, 5%);
$btn-inverse-text-color: $gray-7;//$dark-4; $btn-inverse-text-color: $gray-1;
$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
$btn-link-color: $gray-1; $btn-link-color: $gray-1;
@ -213,28 +183,28 @@ $input-bg: $white;
$input-bg-disabled: $gray-5; $input-bg-disabled: $gray-5;
$input-color: $dark-3; $input-color: $dark-3;
$input-border-color: #dde4ed;//$gray-4; $input-border-color: $gray-5;
$input-box-shadow: none; $input-box-shadow: none;
$input-border-focus: $blue !default; $input-border-focus: $blue !default;
$input-box-shadow-focus: $blue !default; $input-box-shadow-focus: $blue !default;
$input-color-placeholder: $gray-4 !default; $input-color-placeholder: $gray-4 !default;
$input-label-bg: #dde4ed;//#dfe7f0;//#dae5f0;//#d8dfed;//$gray-5;#dde6f0; $input-label-bg: $gray-5;
$input-label-border-color: #dde4ed;//#dfe7f0;//#dae5f0;//#d8dfed;//$gray-5;#dde6f0; $input-label-border-color: $gray-5;
$input-invalid-border-color: lighten($red, 5%); $input-invalid-border-color: lighten($red, 5%);
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
$side-menu-bg: $dark-3; $side-menu-bg: $dark-3;
$side-menu-item-hover-bg: $gray-1; $side-menu-item-hover-bg: $gray-1;
$side-menu-shadow: 0 0 5px $dark-5;//0 0 5px #c2c2c2; $side-menu-shadow: 5px 0px 10px -5px $gray-1;
$side-menu-link-color: $gray-6; $side-menu-link-color: $gray-6;
// Menu dropdowns // Menu dropdowns
// ------------------------- // -------------------------
$menu-dropdown-bg: $white; $menu-dropdown-bg: $gray-7;
$menu-dropdown-hover-bg: $gray-6; $menu-dropdown-hover-bg: $gray-6;
$menu-dropdown-border-color: $gray-4; $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 // Breadcrumb
// ------------------------- // -------------------------
@ -243,9 +213,13 @@ $page-nav-shadow: 5px 5px 20px -5px $gray-4;
$page-nav-breadcrumb-color: $black; $page-nav-breadcrumb-color: $black;
$breadcrumb-hover-hl: #d9dadd; $breadcrumb-hover-hl: #d9dadd;
// Tabs
// -------------------------
$tab-border-color: $gray-5;
// search // search
$search-shadow: 0 5px 30px 0 $gray-4; $search-shadow: 0 5px 30px 0 $gray-4;
$search-filter-box-bg: $gray-4; $search-filter-box-bg: $gray-7;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
@ -309,6 +283,8 @@ $navbarBrandColor: $navbarLinkColor;
$navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackground: lighten($navbarBackground, 3%);
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
$navbar-button-border: $gray-4;
// Pagination // Pagination
// ------------------------- // -------------------------
@ -352,7 +328,8 @@ $graph-tooltip-bg: $gray-5;
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';
// info box // 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
$footer-link-color: $gray-3; $footer-link-color: $gray-3;

2
public/sass/components/_buttons.scss
View File

@ -95,7 +95,7 @@
} }
// Inverse appears as dark gray // Inverse appears as dark gray
.btn-inverse { .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; //background: $card-background;
box-shadow: $card-shadow; box-shadow: $card-shadow;
//border: 1px solid $tight-form-func-highlight-bg; //border: 1px solid $tight-form-func-highlight-bg;

3
public/sass/components/_filter-table.scss
View File

@ -17,8 +17,7 @@
tbody { tbody {
tr:nth-child(odd) { tr:nth-child(odd) {
//background: $dark-2; background: $table-bg-odd;
background: $gray-6;
} }
} }

6
public/sass/components/_navbar.scss
View File

@ -74,15 +74,15 @@
} }
.navbar-button { .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; display: inline-block;
font-weight: $btn-font-weight; font-weight: $btn-font-weight;
padding: 8px 11px; padding: 8px 11px;
line-height: 16px; line-height: 16px;
color: $text-muted; color: $text-muted;
border: 1px solid #151515; border: 1px solid $navbar-button-border;
margin-right: 1px; margin-right: 3px;
white-space: nowrap; white-space: nowrap;
.gicon { .gicon {

2
public/sass/components/_tabs.scss
View File

@ -31,7 +31,7 @@
&.active, &.active,
&.active:hover, &.active:hover,
&.active:focus { &.active:focus {
border-color: $orange $dark-4 transparent; border-color: $orange $tab-border-color transparent;
background: $page-bg; background: $page-bg;
color: $link-color; color: $link-color;
} }