mirror of
https://github.com/grafana/grafana.git
synced 2025-02-09 23:16:16 -06:00
updated colors in light, dark and theme files, in template file basic colors uses variables from dark/light files, also changed to -basic in some files
This commit is contained in:
ijin08
parent
5f4f559d19
commit
a9c5fe5be1
@ -17,7 +17,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
background-color: $green;
|
||||
background-color: $green-base;
|
||||
}
|
||||
|
||||
.add-mapping-row-label {
|
||||
|
||||
@ -12,36 +12,35 @@ $theme-name: dark;
|
||||
|
||||
// New Colors
|
||||
// -------------------------
|
||||
$sapphire-faint: #041126;
|
||||
$sapphire-light: #5794f2;
|
||||
$sapphire-base: #3274d9;
|
||||
$sapphire-shade: #1f60c4;
|
||||
$lobster-base: #e02f44;
|
||||
$lobster-shade: #c4162a;
|
||||
$forest-light: #96d98d;
|
||||
$green-base: #299c46;
|
||||
$green-shade: #23843b;
|
||||
$blue-faint: ${theme.colors.blueFaint};
|
||||
$blue-light: ${theme.colors.blueLight};
|
||||
$blue-base: ${theme.colors.blueBase};
|
||||
$blue-shade: ${theme.colors.blueShade};
|
||||
$red-base: ${theme.colors.redBase};
|
||||
$red-shade: ${theme.colors.redShade};
|
||||
$green-base: ${theme.colors.greenBase};
|
||||
$green-shade: ${theme.colors.greenShade};
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000;
|
||||
$dark-1: #141414;
|
||||
$dark-2: #161719;
|
||||
$dark-3: #1f1f20;
|
||||
$dark-4: #212124;
|
||||
$dark-5: #222426;
|
||||
$dark-6: #262628;
|
||||
$dark-7: #292a2d;
|
||||
$dark-8: #2f2f32;
|
||||
$dark-9: #343436;
|
||||
$dark-10: #424345;
|
||||
$gray-1: #555555;
|
||||
$gray-2: #8e8e8e;
|
||||
$gray-3: #b3b3b3;
|
||||
$gray-4: #d8d9da;
|
||||
$gray-5: #ececec;
|
||||
$black: ${theme.colors.black};
|
||||
$dark-1: ${theme.colors.dark1};
|
||||
$dark-2: ${theme.colors.dark2};
|
||||
$dark-3: ${theme.colors.dark3};
|
||||
$dark-4: ${theme.colors.dark4};
|
||||
$dark-5: ${theme.colors.dark5};
|
||||
$dark-6: ${theme.colors.dark6};
|
||||
$dark-7: ${theme.colors.dark7};
|
||||
$dark-8: ${theme.colors.dark8};
|
||||
$dark-9:${theme.colors.dark9};
|
||||
$dark-10: ${theme.colors.dark10};
|
||||
$gray-1: ${theme.colors.gray1};
|
||||
$gray-2: ${theme.colors.gray2};
|
||||
$gray-3: ${theme.colors.gray3};
|
||||
$gray-4: ${theme.colors.gray4};
|
||||
$gray-5: ${theme.colors.gray5};
|
||||
|
||||
$gray-blue: #212327;
|
||||
$gray-blue: ${theme.colors.grayBlue};
|
||||
$input-black: #09090b;
|
||||
|
||||
$white: ${theme.colors.white};
|
||||
@ -49,20 +48,19 @@ $white: ${theme.colors.white};
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
$blue: ${theme.colors.blue};
|
||||
$green: #299c46;
|
||||
$red: $lobster-base;
|
||||
$yellow: #ecbb13;
|
||||
$purple: #9933cc;
|
||||
$variable: #32d1df;
|
||||
$orange: #eb7b18;
|
||||
$red: $red-base;
|
||||
$yellow: ${theme.colors.yellow};
|
||||
$orange: ${theme.colors.orange};
|
||||
$purple: ${theme.colors.purple};
|
||||
$variable: ${theme.colors.variable};
|
||||
|
||||
$brand-primary: $orange;
|
||||
$brand-success: $green-base;
|
||||
$brand-warning: $brand-primary;
|
||||
$brand-danger: $lobster-base;
|
||||
$brand-danger: $red-base;
|
||||
|
||||
$query-red: $lobster-base;
|
||||
$query-green: $forest-light;
|
||||
$query-red: $red-base;
|
||||
$query-green: #74e680;
|
||||
$query-purple: #fe85fc;
|
||||
$query-keyword: #66d9ef;
|
||||
$query-orange: $orange;
|
||||
@ -71,7 +69,7 @@ $query-orange: $orange;
|
||||
// -------------------------
|
||||
$online: $green-base;
|
||||
$warn: #f79520;
|
||||
$critical: $lobster-base;
|
||||
$critical: $red-base;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@ -104,7 +102,7 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
|
||||
$link-color: darken($white, 11%);
|
||||
$link-color-disabled: darken($link-color, 30%);
|
||||
$link-hover-color: $white;
|
||||
$external-link-color: $sapphire-light;
|
||||
$external-link-color: $blue-light;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@ -164,8 +162,8 @@ $table-bg-hover: $dark-6;
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
$btn-secondary-bg: $sapphire-base;
|
||||
$btn-secondary-bg-hl: $sapphire-shade;
|
||||
$btn-secondary-bg: $blue-base;
|
||||
$btn-secondary-bg-hl: $blue-shade;
|
||||
|
||||
$btn-primary-bg: $green-base;
|
||||
$btn-primary-bg-hl: $green-shade;
|
||||
@ -173,8 +171,8 @@ $btn-primary-bg-hl: $green-shade;
|
||||
$btn-success-bg: $green-base;
|
||||
$btn-success-bg-hl: $green-shade;
|
||||
|
||||
$btn-danger-bg: $lobster-base;
|
||||
$btn-danger-bg-hl: $lobster-shade;
|
||||
$btn-danger-bg: $red-base;
|
||||
$btn-danger-bg-hl: $red-shade;
|
||||
|
||||
$btn-inverse-bg: $dark-6;
|
||||
$btn-inverse-bg-hl: lighten($dark-6, 4%);
|
||||
@ -199,7 +197,7 @@ $input-color: $gray-4;
|
||||
$input-border-color: $dark-6;
|
||||
$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
|
||||
$input-border-focus: $dark-6 !default;
|
||||
$input-box-shadow-focus: $sapphire-light !default;
|
||||
$input-box-shadow-focus: $blue-light !default;
|
||||
$input-color-placeholder: $gray-1 !default;
|
||||
$input-label-bg: $gray-blue;
|
||||
$input-label-border-color: $dark-6;
|
||||
@ -271,12 +269,12 @@ $toolbar-bg: $input-black;
|
||||
// -------------------------
|
||||
$warning-text-color: $warn;
|
||||
$error-text-color: #e84d4d;
|
||||
$success-text-color: $forest-light;
|
||||
$success-text-color: #12d95a;
|
||||
|
||||
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
|
||||
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
|
||||
$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
|
||||
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
|
||||
|
||||
// popover
|
||||
$popover-bg: $dark-2;
|
||||
@ -305,7 +303,7 @@ $tooltipBackgroundError: $brand-danger;
|
||||
$checkboxImageUrl: '../img/checkbox.png';
|
||||
|
||||
// info box
|
||||
$info-box-border-color: $sapphire-base;
|
||||
$info-box-border-color: $blue-base;
|
||||
|
||||
// footer
|
||||
$footer-link-color: $gray-2;
|
||||
@ -336,8 +334,8 @@ $diff-arrow-color: $white;
|
||||
$diff-json-bg: $dark-9;
|
||||
$diff-json-fg: $gray-5;
|
||||
|
||||
$diff-json-added: $sapphire-shade;
|
||||
$diff-json-deleted: $lobster-shade;
|
||||
$diff-json-added: $blue-shade;
|
||||
$diff-json-deleted: $red-shade;
|
||||
|
||||
$diff-json-old: #a04338;
|
||||
$diff-json-new: #457740;
|
||||
@ -371,18 +369,18 @@ $panel-editor-shadow: 0 0 20px black;
|
||||
$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
|
||||
$panel-editor-viz-item-shadow: 0 0 8px $dark-10;
|
||||
$panel-editor-viz-item-border: 1px solid $dark-10;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $blue-light;
|
||||
$panel-editor-viz-item-bg: $input-black;
|
||||
$panel-editor-tabs-line-color: #e3e3e3;
|
||||
|
||||
$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%);
|
||||
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
|
||||
|
||||
$panel-options-group-border: none;
|
||||
$panel-options-group-header-bg: $gray-blue;
|
||||
|
||||
$panel-grid-placeholder-bg: $sapphire-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade;
|
||||
$panel-grid-placeholder-bg: $blue-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
|
||||
|
||||
// logs
|
||||
$logs-color-unkown: $gray-2;
|
||||
|
||||
@ -12,58 +12,56 @@ $theme-name: light;
|
||||
|
||||
// New Colors
|
||||
// -------------------------
|
||||
$sapphire-faint: #f5f9ff;
|
||||
$sapphire-light: #5794f2;
|
||||
$sapphire-base: #3274d9;
|
||||
$sapphire-shade: #1f60c4;
|
||||
$lobster-base: #e02f44;
|
||||
$lobster-shade: #c4162a;
|
||||
$green-base: #3eb15b;
|
||||
$green-shade: #369b4f;
|
||||
$purple-shade: #8f3bb8;
|
||||
$yellow-base: #f2cc0c;
|
||||
$blue-faint: ${theme.colors.blueFaint};
|
||||
$blue-light: ${theme.colors.blueLight};
|
||||
$blue-base: ${theme.colors.blueBase};
|
||||
$blue-shade: ${theme.colors.blueShade};
|
||||
$red-base: ${theme.colors.redBase};
|
||||
$red-shade: ${theme.colors.redShade};
|
||||
$green-base: ${theme.colors.greenBase};
|
||||
$green-shade: ${theme.colors.greenShade};
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000;
|
||||
$dark-2: #1e2028;
|
||||
$dark-5: #41444b;
|
||||
$gray-1: #52545c;
|
||||
$gray-2: #767980;
|
||||
$gray-3: #acb6bf;
|
||||
$gray-4: #c7d0d9;
|
||||
$gray-5: #dde4ed;
|
||||
$gray-6: #e9edf2;
|
||||
$gray-7: #f7f8fa;
|
||||
$black: ${theme.colors.black};
|
||||
|
||||
$dark-1: ${theme.colors.dark1};
|
||||
$dark-2: ${theme.colors.dark2};
|
||||
$gray-1: ${theme.colors.gray1};
|
||||
$gray-2: ${theme.colors.gray2};
|
||||
$gray-3: ${theme.colors.gray3};
|
||||
$gray-4: ${theme.colors.gray4};
|
||||
$gray-5: ${theme.colors.gray5};
|
||||
$gray-6: ${theme.colors.gray6};
|
||||
$gray-7: ${theme.colors.gray7};
|
||||
|
||||
$white: ${theme.colors.white};
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
$blue: ${theme.colors.blue};
|
||||
$green: #3aa655;
|
||||
$red: $lobster-base;
|
||||
$yellow: #ff851b;
|
||||
$orange: #ff7941;
|
||||
$purple: #9954bb;
|
||||
$variable: $purple-shade;
|
||||
$red: $red-base;
|
||||
$yellow: ${theme.colors.yellow};
|
||||
$orange: ${theme.colors.orange};
|
||||
$purple: ${theme.colors.purple};
|
||||
$variable: ${theme.colors.variable};
|
||||
|
||||
$brand-primary: $orange;
|
||||
$brand-success: $green;
|
||||
$brand-success: $green-base;
|
||||
$brand-warning: $orange;
|
||||
$brand-danger: $lobster-base;
|
||||
$brand-danger: $red-base;
|
||||
|
||||
$query-red: $lobster-base;
|
||||
$query-green: $green;
|
||||
$query-red: $red-base;
|
||||
$query-green: $green-base;
|
||||
$query-purple: $purple;
|
||||
$query-orange: $orange;
|
||||
$query-keyword: $sapphire-base;
|
||||
$query-keyword: $blue-base;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: $green-shade;
|
||||
$warn: #f79520;
|
||||
$critical: $lobster-shade;
|
||||
$critical: $red-shade;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@ -72,10 +70,10 @@ $page-bg: $gray-7;
|
||||
|
||||
$body-color: $gray-1;
|
||||
$text-color: $gray-1;
|
||||
$text-color-strong: $dark-2;
|
||||
$text-color-strong: $dark-1;
|
||||
$text-color-weak: $gray-2;
|
||||
$text-color-faint: $gray-4;
|
||||
$text-color-emphasis: $dark-5;
|
||||
$text-color-emphasis: $dark-2;
|
||||
|
||||
$text-shadow-faint: none;
|
||||
|
||||
@ -90,7 +88,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
|
||||
$link-color: $gray-1;
|
||||
$link-color-disabled: lighten($link-color, 30%);
|
||||
$link-hover-color: darken($link-color, 20%);
|
||||
$external-link-color: $sapphire-shade;
|
||||
$external-link-color: $blue-shade;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@ -153,14 +151,14 @@ $table-bg-hover: $gray-5;
|
||||
$btn-primary-bg: $green-base;
|
||||
$btn-primary-bg-hl: $green-shade;
|
||||
|
||||
$btn-secondary-bg: $sapphire-base;
|
||||
$btn-secondary-bg-hl: $sapphire-shade;
|
||||
$btn-secondary-bg: $blue-base;
|
||||
$btn-secondary-bg-hl: $blue-shade;
|
||||
|
||||
$btn-success-bg: $green-base;
|
||||
$btn-success-bg-hl: $green-shade;
|
||||
|
||||
$btn-danger-bg: $lobster-base;
|
||||
$btn-danger-bg-hl: $lobster-shade;
|
||||
$btn-danger-bg: $red-base;
|
||||
$btn-danger-bg-hl: $red-shade;
|
||||
|
||||
$btn-inverse-bg: $gray-5;
|
||||
$btn-inverse-bg-hl: darken($gray-5, 5%);
|
||||
@ -182,11 +180,11 @@ $btn-drag-image: '../img/grab_light.svg';
|
||||
$input-bg: $white;
|
||||
$input-bg-disabled: $gray-5;
|
||||
|
||||
$input-color: $dark-5;
|
||||
$input-color: $dark-2;
|
||||
$input-border-color: $gray-5;
|
||||
$input-box-shadow: none;
|
||||
$input-border-focus: $gray-5 !default;
|
||||
$input-box-shadow-focus: $sapphire-light !default;
|
||||
$input-box-shadow-focus: $blue-light !default;
|
||||
$input-color-placeholder: $gray-4 !default;
|
||||
$input-label-bg: $gray-5;
|
||||
$input-label-border-color: $gray-5;
|
||||
@ -211,7 +209,7 @@ $dropdownBorder: $gray-4;
|
||||
$dropdownDividerTop: $gray-6;
|
||||
$dropdownDividerBottom: $white;
|
||||
|
||||
$dropdownLinkColor: $dark-5;
|
||||
$dropdownLinkColor: $dark-2;
|
||||
$dropdownLinkColorHover: $link-color;
|
||||
$dropdownLinkColorActive: $link-color;
|
||||
|
||||
@ -235,7 +233,7 @@ $navbar-button-border: $gray-4;
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$side-menu-bg: $dark-2;
|
||||
$side-menu-bg: $dark-1;
|
||||
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
|
||||
$side-menu-item-hover-bg: $gray-1;
|
||||
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
|
||||
@ -257,13 +255,13 @@ $toolbar-bg: white;
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$warning-text-color: lighten($orange, 10%);
|
||||
$error-text-color: $lobster-shade;
|
||||
$success-text-color: lighten($green, 10%);
|
||||
$error-text-color: $red-shade;
|
||||
$success-text-color: lighten($green-base, 10%);
|
||||
|
||||
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
|
||||
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
|
||||
$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
|
||||
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
|
||||
|
||||
// popover
|
||||
$popover-bg: $page-bg;
|
||||
@ -292,39 +290,39 @@ $tooltipBackgroundError: $brand-danger;
|
||||
$checkboxImageUrl: '../img/checkbox_white.png';
|
||||
|
||||
// info box
|
||||
$info-box-border-color: $sapphire-base;
|
||||
$info-box-border-color: $blue-base;
|
||||
|
||||
// footer
|
||||
$footer-link-color: $gray-3;
|
||||
$footer-link-hover: $dark-5;
|
||||
$footer-link-hover: $dark-2;
|
||||
|
||||
// json explorer
|
||||
$json-explorer-default-color: black;
|
||||
$json-explorer-string-color: green;
|
||||
$json-explorer-number-color: $sapphire-base;
|
||||
$json-explorer-boolean-color: $lobster-base;
|
||||
$json-explorer-number-color: $blue-base;
|
||||
$json-explorer-boolean-color: $red-base;
|
||||
$json-explorer-null-color: #855a00;
|
||||
$json-explorer-undefined-color: rgb(202, 11, 105);
|
||||
$json-explorer-function-color: #ff20ed;
|
||||
$json-explorer-rotate-time: 100ms;
|
||||
$json-explorer-toggler-opacity: 0.6;
|
||||
$json-explorer-bracket-color: $sapphire-base;
|
||||
$json-explorer-bracket-color: $blue-base;
|
||||
$json-explorer-key-color: #00008b;
|
||||
$json-explorer-url-color: $sapphire-base;
|
||||
$json-explorer-url-color: $blue-base;
|
||||
|
||||
// Changelog and diff
|
||||
// -------------------------
|
||||
$diff-label-bg: $gray-7;
|
||||
$diff-label-fg: $gray-2;
|
||||
|
||||
$diff-arrow-color: $dark-5;
|
||||
$diff-arrow-color: $dark-2;
|
||||
$diff-group-bg: $gray-6;
|
||||
|
||||
$diff-json-bg: $gray-6;
|
||||
$diff-json-fg: $gray-1;
|
||||
|
||||
$diff-json-added: $sapphire-shade;
|
||||
$diff-json-deleted: $lobster-shade;
|
||||
$diff-json-added: $blue-shade;
|
||||
$diff-json-deleted: $red-shade;
|
||||
|
||||
$diff-json-old: #5a372a;
|
||||
$diff-json-new: #664e33;
|
||||
@ -343,7 +341,7 @@ $switch-bg: $white;
|
||||
$switch-slider-color: $gray-7;
|
||||
$switch-slider-off-bg: $gray-5;
|
||||
$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
|
||||
$switch-slider-shadow: 0 0 3px $dark-5;
|
||||
$switch-slider-shadow: 0 0 3px $dark-2;
|
||||
|
||||
//Checkbox
|
||||
// -------------------------
|
||||
@ -358,18 +356,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3;
|
||||
$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
|
||||
$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
|
||||
$panel-editor-viz-item-border: 1px solid $gray-3;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $blue-light;
|
||||
$panel-editor-viz-item-bg: $white;
|
||||
$panel-editor-tabs-line-color: $dark-5;
|
||||
$panel-editor-tabs-line-color: $dark-2;
|
||||
|
||||
$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%);
|
||||
$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
|
||||
|
||||
$panel-options-group-border: none;
|
||||
$panel-options-group-header-bg: $gray-5;
|
||||
|
||||
$panel-grid-placeholder-bg: $sapphire-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light;
|
||||
$panel-grid-placeholder-bg: $blue-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
|
||||
|
||||
// logs
|
||||
$logs-color-unkown: $gray-5;
|
||||
|
||||
@ -6,25 +6,34 @@ const basicColors = {
|
||||
black: '#000000',
|
||||
white: '#ffffff',
|
||||
dark1: '#141414',
|
||||
dark2: '#1f1f20',
|
||||
dark3: '#262628',
|
||||
dark4: '#333333',
|
||||
dark5: '#444444',
|
||||
dark2: '#161719',
|
||||
dark3: '#1f1f20',
|
||||
dark4: '#212124',
|
||||
dark5: '#222426',
|
||||
dark6: '#262628',
|
||||
dark7: '#292a2d',
|
||||
dark8: '#2f2f32',
|
||||
dark9: '#343436',
|
||||
dark10: '#424345',
|
||||
gray1: '#555555',
|
||||
gray2: '#8e8e8e',
|
||||
gray3: '#b3b3b3',
|
||||
gray4: '#d8d9da',
|
||||
gray5: '#ececec',
|
||||
gray6: '#f4f5f8',
|
||||
gray7: '#fbfbfb',
|
||||
gray6: '#f4f5f8', // not used in dark theme
|
||||
gray7: '#fbfbfb', // not used in dark theme
|
||||
grayBlue: '#212327',
|
||||
blueBase: '#3274d9',
|
||||
blueShade: '#1f60c4',
|
||||
blueLight: '#5794f2',
|
||||
blueFaint: '#041126',
|
||||
redBase: '#e02f44',
|
||||
redShade: '#c4162a',
|
||||
greenBase: '#299c46',
|
||||
greenShade: '#23843b',
|
||||
blue: '#33b5e5',
|
||||
blueDark: '#005f81',
|
||||
blueLight: '#00a8e6', // not used in dark theme
|
||||
green: '#299c46',
|
||||
red: '#d44a3a',
|
||||
yellow: '#ecbb13',
|
||||
pink: '#ff4444',
|
||||
purple: '#9933cc',
|
||||
variable: '#32d1df',
|
||||
orange: '#eb7b18',
|
||||
@ -37,14 +46,14 @@ const darkTheme: GrafanaTheme = {
|
||||
colors: {
|
||||
...basicColors,
|
||||
inputBlack: '#09090b',
|
||||
queryRed: '#e24d42',
|
||||
queryRed: basicColors.redBase,
|
||||
queryGreen: '#74e680',
|
||||
queryPurple: '#fe85fc',
|
||||
queryKeyword: '#66d9ef',
|
||||
queryOrange: 'eb7b18',
|
||||
online: '#10a345',
|
||||
queryOrange: basicColors.orange,
|
||||
online: basicColors.greenBase,
|
||||
warn: '#f79520',
|
||||
critical: '#ed2e18',
|
||||
critical: basicColors.redBase,
|
||||
bodyBg: '#171819',
|
||||
pageBg: '#161719',
|
||||
bodyColor: basicColors.gray4,
|
||||
@ -61,8 +70,8 @@ const darkTheme: GrafanaTheme = {
|
||||
},
|
||||
background: {
|
||||
dropdown: basicColors.dark3,
|
||||
scrollbar: '#aeb5df',
|
||||
scrollbar2: '#3a3a3a',
|
||||
scrollbar: basicColors.dark9,
|
||||
scrollbar2: basicColors.dark9,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -5,11 +5,16 @@ import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
|
||||
const basicColors = {
|
||||
black: '#000000',
|
||||
white: '#ffffff',
|
||||
dark1: '#13161d',
|
||||
dark2: '#1e2028',
|
||||
dark3: '#303133',
|
||||
dark4: '#35373f',
|
||||
dark5: '#41444b',
|
||||
dark1: '#1e2028',
|
||||
dark2: '#41444b',
|
||||
dark3: '#303133', // not used in light theme
|
||||
dark4: '#35373f', // not used in light theme
|
||||
dark5: '#41444b', // not used in light theme
|
||||
dark6: '#41444b', // not used in light theme
|
||||
dark7: '#41444b', // not used in light theme
|
||||
dark8: '#2f2f32', // not used in light theme
|
||||
dark9: '#343436', // not used in light theme
|
||||
dark10: '#424345', // not used in light theme
|
||||
gray1: '#52545c',
|
||||
gray2: '#767980',
|
||||
gray3: '#acb6bf',
|
||||
@ -18,15 +23,19 @@ const basicColors = {
|
||||
gray6: '#e9edf2',
|
||||
gray7: '#f7f8fa',
|
||||
grayBlue: '#212327', // not used in light theme
|
||||
blueBase: '#3274d9',
|
||||
blueShade: '#1f60c4',
|
||||
blueLight: '#5794f2',
|
||||
blueFaint: '#f5f9ff',
|
||||
redBase: '#e02f44',
|
||||
redShade: '#c4162a',
|
||||
greenBase: '#3eb15b',
|
||||
greenShade: '#369b4f',
|
||||
blue: '#0083b3',
|
||||
blueDark: '#005f81',
|
||||
blueLight: '#00a8e6',
|
||||
green: '#3aa655',
|
||||
red: '#d44939',
|
||||
yellow: '#ff851b',
|
||||
pink: '#e671b8',
|
||||
purple: '#9954bb',
|
||||
variable: '#0083b3',
|
||||
variable: '#007580',
|
||||
orange: '#ff7941',
|
||||
};
|
||||
|
||||
@ -39,13 +48,13 @@ const lightTheme: GrafanaTheme = {
|
||||
variable: basicColors.blue,
|
||||
inputBlack: '#09090b',
|
||||
queryRed: basicColors.red,
|
||||
queryGreen: basicColors.green,
|
||||
queryGreen: basicColors.greenBase,
|
||||
queryPurple: basicColors.purple,
|
||||
queryKeyword: basicColors.blue,
|
||||
queryOrange: basicColors.orange,
|
||||
online: '#01a64f',
|
||||
online: basicColors.greenShade,
|
||||
warn: '#f79520',
|
||||
critical: '#ec2128',
|
||||
critical: basicColors.redShade,
|
||||
bodyBg: basicColors.gray7,
|
||||
pageBg: basicColors.gray7,
|
||||
bodyColor: basicColors.gray1,
|
||||
|
||||
@ -78,6 +78,11 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
|
||||
dark3: string;
|
||||
dark4: string;
|
||||
dark5: string;
|
||||
dark6: string;
|
||||
dark7: string;
|
||||
dark8: string;
|
||||
dark9: string;
|
||||
dark10: string;
|
||||
gray1: string;
|
||||
gray2: string;
|
||||
gray3: string;
|
||||
@ -90,12 +95,16 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
|
||||
|
||||
// Accent colors
|
||||
blue: string;
|
||||
blueBase: string;
|
||||
blueShade: string;
|
||||
blueLight: string;
|
||||
blueDark: string;
|
||||
green: string;
|
||||
blueFaint: string;
|
||||
redBase: string;
|
||||
redShade: string;
|
||||
greenBase: string;
|
||||
greenShade: string;
|
||||
red: string;
|
||||
yellow: string;
|
||||
pink: string;
|
||||
purple: string;
|
||||
variable: string;
|
||||
orange: string;
|
||||
|
||||
@ -15,19 +15,18 @@ $theme-name: dark;
|
||||
|
||||
// New Colors
|
||||
// -------------------------
|
||||
$sapphire-faint: #041126;
|
||||
$sapphire-light: #5794f2;
|
||||
$sapphire-base: #3274d9;
|
||||
$sapphire-shade: #1f60c4;
|
||||
$lobster-base: #e02f44;
|
||||
$lobster-shade: #c4162a;
|
||||
$forest-light: #96d98d;
|
||||
$blue-faint: #041126;
|
||||
$blue-light: #5794f2;
|
||||
$blue-base: #3274d9;
|
||||
$blue-shade: #1f60c4;
|
||||
$red-base: #e02f44;
|
||||
$red-shade: #c4162a;
|
||||
$green-base: #299c46;
|
||||
$green-shade: #23843b;
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000;
|
||||
$black: #000000;
|
||||
$dark-1: #141414;
|
||||
$dark-2: #161719;
|
||||
$dark-3: #1f1f20;
|
||||
@ -52,20 +51,19 @@ $white: #ffffff;
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
$blue: #33b5e5;
|
||||
$green: #299c46;
|
||||
$red: $lobster-base;
|
||||
$red: $red-base;
|
||||
$yellow: #ecbb13;
|
||||
$orange: #eb7b18;
|
||||
$purple: #9933cc;
|
||||
$variable: #32d1df;
|
||||
$orange: #eb7b18;
|
||||
|
||||
$brand-primary: $orange;
|
||||
$brand-success: $green-base;
|
||||
$brand-warning: $brand-primary;
|
||||
$brand-danger: $lobster-base;
|
||||
$brand-danger: $red-base;
|
||||
|
||||
$query-red: $lobster-base;
|
||||
$query-green: $forest-light;
|
||||
$query-red: $red-base;
|
||||
$query-green: #74e680;
|
||||
$query-purple: #fe85fc;
|
||||
$query-keyword: #66d9ef;
|
||||
$query-orange: $orange;
|
||||
@ -74,7 +72,7 @@ $query-orange: $orange;
|
||||
// -------------------------
|
||||
$online: $green-base;
|
||||
$warn: #f79520;
|
||||
$critical: $lobster-base;
|
||||
$critical: $red-base;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@ -107,7 +105,7 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
|
||||
$link-color: darken($white, 11%);
|
||||
$link-color-disabled: darken($link-color, 30%);
|
||||
$link-hover-color: $white;
|
||||
$external-link-color: $sapphire-light;
|
||||
$external-link-color: $blue-light;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@ -167,8 +165,8 @@ $table-bg-hover: $dark-6;
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
$btn-secondary-bg: $sapphire-base;
|
||||
$btn-secondary-bg-hl: $sapphire-shade;
|
||||
$btn-secondary-bg: $blue-base;
|
||||
$btn-secondary-bg-hl: $blue-shade;
|
||||
|
||||
$btn-primary-bg: $green-base;
|
||||
$btn-primary-bg-hl: $green-shade;
|
||||
@ -176,8 +174,8 @@ $btn-primary-bg-hl: $green-shade;
|
||||
$btn-success-bg: $green-base;
|
||||
$btn-success-bg-hl: $green-shade;
|
||||
|
||||
$btn-danger-bg: $lobster-base;
|
||||
$btn-danger-bg-hl: $lobster-shade;
|
||||
$btn-danger-bg: $red-base;
|
||||
$btn-danger-bg-hl: $red-shade;
|
||||
|
||||
$btn-inverse-bg: $dark-6;
|
||||
$btn-inverse-bg-hl: lighten($dark-6, 4%);
|
||||
@ -202,7 +200,7 @@ $input-color: $gray-4;
|
||||
$input-border-color: $dark-6;
|
||||
$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
|
||||
$input-border-focus: $dark-6 !default;
|
||||
$input-box-shadow-focus: $sapphire-light !default;
|
||||
$input-box-shadow-focus: $blue-light !default;
|
||||
$input-color-placeholder: $gray-1 !default;
|
||||
$input-label-bg: $gray-blue;
|
||||
$input-label-border-color: $dark-6;
|
||||
@ -274,12 +272,12 @@ $toolbar-bg: $input-black;
|
||||
// -------------------------
|
||||
$warning-text-color: $warn;
|
||||
$error-text-color: #e84d4d;
|
||||
$success-text-color: $forest-light;
|
||||
$success-text-color: #12d95a;
|
||||
|
||||
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
|
||||
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
|
||||
$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
|
||||
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
|
||||
|
||||
// popover
|
||||
$popover-bg: $dark-2;
|
||||
@ -308,7 +306,7 @@ $tooltipBackgroundError: $brand-danger;
|
||||
$checkboxImageUrl: '../img/checkbox.png';
|
||||
|
||||
// info box
|
||||
$info-box-border-color: $sapphire-base;
|
||||
$info-box-border-color: $blue-base;
|
||||
|
||||
// footer
|
||||
$footer-link-color: $gray-2;
|
||||
@ -339,8 +337,8 @@ $diff-arrow-color: $white;
|
||||
$diff-json-bg: $dark-9;
|
||||
$diff-json-fg: $gray-5;
|
||||
|
||||
$diff-json-added: $sapphire-shade;
|
||||
$diff-json-deleted: $lobster-shade;
|
||||
$diff-json-added: $blue-shade;
|
||||
$diff-json-deleted: $red-shade;
|
||||
|
||||
$diff-json-old: #a04338;
|
||||
$diff-json-new: #457740;
|
||||
@ -374,18 +372,18 @@ $panel-editor-shadow: 0 0 20px black;
|
||||
$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
|
||||
$panel-editor-viz-item-shadow: 0 0 8px $dark-10;
|
||||
$panel-editor-viz-item-border: 1px solid $dark-10;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $blue-light;
|
||||
$panel-editor-viz-item-bg: $input-black;
|
||||
$panel-editor-tabs-line-color: #e3e3e3;
|
||||
|
||||
$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%);
|
||||
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
|
||||
|
||||
$panel-options-group-border: none;
|
||||
$panel-options-group-header-bg: $gray-blue;
|
||||
|
||||
$panel-grid-placeholder-bg: $sapphire-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade;
|
||||
$panel-grid-placeholder-bg: $blue-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
|
||||
|
||||
// logs
|
||||
$logs-color-unkown: $gray-2;
|
||||
|
||||
@ -15,22 +15,21 @@ $theme-name: light;
|
||||
|
||||
// New Colors
|
||||
// -------------------------
|
||||
$sapphire-faint: #f5f9ff;
|
||||
$sapphire-light: #5794f2;
|
||||
$sapphire-base: #3274d9;
|
||||
$sapphire-shade: #1f60c4;
|
||||
$lobster-base: #e02f44;
|
||||
$lobster-shade: #c4162a;
|
||||
$blue-faint: #f5f9ff;
|
||||
$blue-light: #5794f2;
|
||||
$blue-base: #3274d9;
|
||||
$blue-shade: #1f60c4;
|
||||
$red-base: #e02f44;
|
||||
$red-shade: #c4162a;
|
||||
$green-base: #3eb15b;
|
||||
$green-shade: #369b4f;
|
||||
$purple-shade: #8f3bb8;
|
||||
$yellow-base: #f2cc0c;
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000;
|
||||
$dark-2: #1e2028;
|
||||
$dark-5: #41444b;
|
||||
$black: #000000;
|
||||
|
||||
$dark-1: #1e2028;
|
||||
$dark-2: #41444b;
|
||||
$gray-1: #52545c;
|
||||
$gray-2: #767980;
|
||||
$gray-3: #acb6bf;
|
||||
@ -44,29 +43,28 @@ $white: #ffffff;
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
$blue: #0083b3;
|
||||
$green: #3aa655;
|
||||
$red: $lobster-base;
|
||||
$red: $red-base;
|
||||
$yellow: #ff851b;
|
||||
$orange: #ff7941;
|
||||
$purple: #9954bb;
|
||||
$variable: $purple-shade;
|
||||
$variable: #0083b3;
|
||||
|
||||
$brand-primary: $orange;
|
||||
$brand-success: $green;
|
||||
$brand-success: $green-base;
|
||||
$brand-warning: $orange;
|
||||
$brand-danger: $lobster-base;
|
||||
$brand-danger: $red-base;
|
||||
|
||||
$query-red: $lobster-base;
|
||||
$query-green: $green;
|
||||
$query-red: $red-base;
|
||||
$query-green: $green-base;
|
||||
$query-purple: $purple;
|
||||
$query-orange: $orange;
|
||||
$query-keyword: $sapphire-base;
|
||||
$query-keyword: $blue-base;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: $green-shade;
|
||||
$warn: #f79520;
|
||||
$critical: $lobster-shade;
|
||||
$critical: $red-shade;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@ -75,10 +73,10 @@ $page-bg: $gray-7;
|
||||
|
||||
$body-color: $gray-1;
|
||||
$text-color: $gray-1;
|
||||
$text-color-strong: $dark-2;
|
||||
$text-color-strong: $dark-1;
|
||||
$text-color-weak: $gray-2;
|
||||
$text-color-faint: $gray-4;
|
||||
$text-color-emphasis: $dark-5;
|
||||
$text-color-emphasis: $dark-2;
|
||||
|
||||
$text-shadow-faint: none;
|
||||
|
||||
@ -93,7 +91,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
|
||||
$link-color: $gray-1;
|
||||
$link-color-disabled: lighten($link-color, 30%);
|
||||
$link-hover-color: darken($link-color, 20%);
|
||||
$external-link-color: $sapphire-shade;
|
||||
$external-link-color: $blue-shade;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@ -156,14 +154,14 @@ $table-bg-hover: $gray-5;
|
||||
$btn-primary-bg: $green-base;
|
||||
$btn-primary-bg-hl: $green-shade;
|
||||
|
||||
$btn-secondary-bg: $sapphire-base;
|
||||
$btn-secondary-bg-hl: $sapphire-shade;
|
||||
$btn-secondary-bg: $blue-base;
|
||||
$btn-secondary-bg-hl: $blue-shade;
|
||||
|
||||
$btn-success-bg: $green-base;
|
||||
$btn-success-bg-hl: $green-shade;
|
||||
|
||||
$btn-danger-bg: $lobster-base;
|
||||
$btn-danger-bg-hl: $lobster-shade;
|
||||
$btn-danger-bg: $red-base;
|
||||
$btn-danger-bg-hl: $red-shade;
|
||||
|
||||
$btn-inverse-bg: $gray-5;
|
||||
$btn-inverse-bg-hl: darken($gray-5, 5%);
|
||||
@ -185,11 +183,11 @@ $btn-drag-image: '../img/grab_light.svg';
|
||||
$input-bg: $white;
|
||||
$input-bg-disabled: $gray-5;
|
||||
|
||||
$input-color: $dark-5;
|
||||
$input-color: $dark-2;
|
||||
$input-border-color: $gray-5;
|
||||
$input-box-shadow: none;
|
||||
$input-border-focus: $gray-5 !default;
|
||||
$input-box-shadow-focus: $sapphire-light !default;
|
||||
$input-box-shadow-focus: $blue-light !default;
|
||||
$input-color-placeholder: $gray-4 !default;
|
||||
$input-label-bg: $gray-5;
|
||||
$input-label-border-color: $gray-5;
|
||||
@ -214,7 +212,7 @@ $dropdownBorder: $gray-4;
|
||||
$dropdownDividerTop: $gray-6;
|
||||
$dropdownDividerBottom: $white;
|
||||
|
||||
$dropdownLinkColor: $dark-5;
|
||||
$dropdownLinkColor: $dark-2;
|
||||
$dropdownLinkColorHover: $link-color;
|
||||
$dropdownLinkColorActive: $link-color;
|
||||
|
||||
@ -238,7 +236,7 @@ $navbar-button-border: $gray-4;
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$side-menu-bg: $dark-2;
|
||||
$side-menu-bg: $dark-1;
|
||||
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
|
||||
$side-menu-item-hover-bg: $gray-1;
|
||||
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
|
||||
@ -260,13 +258,13 @@ $toolbar-bg: white;
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$warning-text-color: lighten($orange, 10%);
|
||||
$error-text-color: $lobster-shade;
|
||||
$success-text-color: lighten($green, 10%);
|
||||
$error-text-color: $red-shade;
|
||||
$success-text-color: lighten($green-base, 10%);
|
||||
|
||||
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
|
||||
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
|
||||
$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
|
||||
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
|
||||
|
||||
// popover
|
||||
$popover-bg: $page-bg;
|
||||
@ -295,39 +293,39 @@ $tooltipBackgroundError: $brand-danger;
|
||||
$checkboxImageUrl: '../img/checkbox_white.png';
|
||||
|
||||
// info box
|
||||
$info-box-border-color: $sapphire-base;
|
||||
$info-box-border-color: $blue-base;
|
||||
|
||||
// footer
|
||||
$footer-link-color: $gray-3;
|
||||
$footer-link-hover: $dark-5;
|
||||
$footer-link-hover: $dark-2;
|
||||
|
||||
// json explorer
|
||||
$json-explorer-default-color: black;
|
||||
$json-explorer-string-color: green;
|
||||
$json-explorer-number-color: $sapphire-base;
|
||||
$json-explorer-boolean-color: $lobster-base;
|
||||
$json-explorer-number-color: $blue-base;
|
||||
$json-explorer-boolean-color: $red-base;
|
||||
$json-explorer-null-color: #855a00;
|
||||
$json-explorer-undefined-color: rgb(202, 11, 105);
|
||||
$json-explorer-function-color: #ff20ed;
|
||||
$json-explorer-rotate-time: 100ms;
|
||||
$json-explorer-toggler-opacity: 0.6;
|
||||
$json-explorer-bracket-color: $sapphire-base;
|
||||
$json-explorer-bracket-color: $blue-base;
|
||||
$json-explorer-key-color: #00008b;
|
||||
$json-explorer-url-color: $sapphire-base;
|
||||
$json-explorer-url-color: $blue-base;
|
||||
|
||||
// Changelog and diff
|
||||
// -------------------------
|
||||
$diff-label-bg: $gray-7;
|
||||
$diff-label-fg: $gray-2;
|
||||
|
||||
$diff-arrow-color: $dark-5;
|
||||
$diff-arrow-color: $dark-2;
|
||||
$diff-group-bg: $gray-6;
|
||||
|
||||
$diff-json-bg: $gray-6;
|
||||
$diff-json-fg: $gray-1;
|
||||
|
||||
$diff-json-added: $sapphire-shade;
|
||||
$diff-json-deleted: $lobster-shade;
|
||||
$diff-json-added: $blue-shade;
|
||||
$diff-json-deleted: $red-shade;
|
||||
|
||||
$diff-json-old: #5a372a;
|
||||
$diff-json-new: #664e33;
|
||||
@ -346,7 +344,7 @@ $switch-bg: $white;
|
||||
$switch-slider-color: $gray-7;
|
||||
$switch-slider-off-bg: $gray-5;
|
||||
$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
|
||||
$switch-slider-shadow: 0 0 3px $dark-5;
|
||||
$switch-slider-shadow: 0 0 3px $dark-2;
|
||||
|
||||
//Checkbox
|
||||
// -------------------------
|
||||
@ -361,18 +359,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3;
|
||||
$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
|
||||
$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
|
||||
$panel-editor-viz-item-border: 1px solid $gray-3;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
|
||||
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
|
||||
$panel-editor-viz-item-border-hover: 1px solid $blue-light;
|
||||
$panel-editor-viz-item-bg: $white;
|
||||
$panel-editor-tabs-line-color: $dark-5;
|
||||
$panel-editor-tabs-line-color: $dark-2;
|
||||
|
||||
$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%);
|
||||
$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
|
||||
|
||||
$panel-options-group-border: none;
|
||||
$panel-options-group-header-bg: $gray-5;
|
||||
|
||||
$panel-grid-placeholder-bg: $sapphire-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light;
|
||||
$panel-grid-placeholder-bg: $blue-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
|
||||
|
||||
// logs
|
||||
$logs-color-unkown: $gray-5;
|
||||
|
||||
@ -415,7 +415,7 @@ select.gf-form-input ~ .gf-form-help-icon {
|
||||
padding: 1.5rem;
|
||||
background-color: $empty-list-cta-bg;
|
||||
margin-bottom: 2rem;
|
||||
border-top: 3px solid $green;
|
||||
border-top: 3px solid $green-base;
|
||||
}
|
||||
|
||||
.cta-form__close {
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
.confirm-modal-icon {
|
||||
padding-top: 41px;
|
||||
font-size: 280%;
|
||||
color: $green;
|
||||
color: $green-base;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
}
|
||||
|
||||
.search-filter-box__header {
|
||||
border-bottom: 1px solid $dark-5;
|
||||
border-bottom: 1px solid $hr-border-color;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
|
||||
@ -196,7 +196,7 @@ select:-webkit-autofill:focus {
|
||||
white-space: nowrap;
|
||||
padding-top: 3px;
|
||||
color: darken($text-color, 20%);
|
||||
border-top: 3px solid $red;
|
||||
border-top: 3px solid $red-base;
|
||||
|
||||
&.password-strength-ok {
|
||||
width: 40%;
|
||||
@ -205,7 +205,7 @@ select:-webkit-autofill:focus {
|
||||
|
||||
&.password-strength-good {
|
||||
width: 100%;
|
||||
border-top: 3px solid lighten($green, 10%);
|
||||
border-top: 3px solid lighten($green-base, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user