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

styling changes for light theme

Browse Source
This commit is contained in:
Patrick O'Carroll 2017-11-28 11:27:29 +01:00
parent 852218e834
commit b19b68df08
3 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@ $theme-name: light;
$black: #000;
// -------------------------
$black: #000;
/*$black: #000;
$dark-1: #141414;
$dark-2: #1d1d1f;
$dark-3: #262628;
@ -25,7 +25,21 @@ $gray-3: #b3b3b3;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;
$gray-6: #f4f5f8;
$gray-7: #fbfbfb;
$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;
$white: #fff;
@ -185,8 +199,8 @@ $input-invalid-border-color: lighten($red, 5%);
// Sidemenu
// -------------------------
$side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6;
$side-menu-bg: $gray-7;
$side-menu-item-hover-bg: $gray-5;
$side-menu-shadow: 0 0 5px #c2c2c2;
// Menu dropdowns
@ -198,7 +212,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
// 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;
@ -250,8 +264,8 @@ $wellBackground: $gray-3;
// -------------------------
$navbarHeight: 52px;
$navbarBackgroundHighlight: #f8f8f8;
$navbarBackground: #f2f3f7;
$navbarBackgroundHighlight: white;
$navbarBackground: $white;
$navbarBorder: 1px solid $gray-4;
$navbarShadow: 0 0 3px #c1c1c1;

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

@ -17,7 +17,8 @@
tbody {
tr:nth-child(odd) {
background: $dark-2;
//background: $dark-2;
background: $gray-6;
}
}
@ -34,7 +35,8 @@
padding: $table-cell-padding;
line-height: 30px;
height: 30px;
border-bottom: 1px solid black;
//border-bottom: 1px solid black;
border-bottom: 1px solid #ECECEC;
white-space: nowrap;
&.filter-table__switch-cell {

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

@ -144,6 +144,7 @@
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;
@ -164,14 +165,14 @@
&.active,
&:hover {
background: #333;
background: linear-gradient(#333, #000);
background: #fff;//#333;
background: linear-gradient($gray-4, darken($gray-4, 5%)); //linear-gradient(#333, #000);
}
&.active:after,
&:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
background: #fff;//#333;
background: linear-gradient(135deg, $gray-4,darken($gray-4, 5%));////linear-gradient(135deg, #333, #000);
}
&:after {
@ -192,7 +193,7 @@
background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
// stylish arrow design using box shadow
box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
box-shadow: 2px -2px 0 2px rgb(250, 250, 250), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
// 5px - for rounded arrows and
// 50px - to prevent hover glitches on the border created using shadows*/