IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 19:00:54 -06:00
Code Issues Packages Projects Releases Wiki Activity

new grays for light theme

Browse Source
This commit is contained in:
Patrick O'Carroll 2017-12-04 13:12:32 +01:00
parent b19b68df08
commit 5fb3ce1be7
4 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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;

3
public/sass/components/_sidemenu.scss
View File

@ -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 {

5
public/sass/layout/_page.scss
View File

@ -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 {