Skip to content

N
nexpie-grafana-theme
Commit 2414074c by Torkel Ödegaard
Options

Merge branch 'develop-light-theme' into develop

parents 8e8c3d2e 80851821
Showing with 80 additions and 56 deletions
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
// -------------------------
......
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;
......
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;
......
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;
......
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 {
......
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 {
......
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 {
......
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;
}
......
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment