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

Color tweaks

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-02-11 14:58:11 +01:00
parent 56b35354c7
commit 962815169e
7 changed files with 25 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
View File

@ -37,7 +37,7 @@
.panel-options-group__add-circle {
@include gradientBar($btn-primary-bg, $btn-primary-bg-hl, #fff);
@include gradientBar($btn-secondary-bg, $btn-secondary-bg-hl, #fff);
border-radius: 50px;
width: 20px;

2
packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
View File

@ -21,7 +21,7 @@
}
.thresholds-row-add-button {
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl, #fff);
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl, #fff);
align-self: center;
margin-right: 5px;

6
public/app/features/dashboard/components/TimePicker/template.html
View File

@ -48,7 +48,7 @@
<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
<button class="btn gf-form-btn btn-secondary" type="button" ng-click="openFromPicker=!openFromPicker">
<i class="fa fa-calendar"></i>
</button>
</div>
@ -65,7 +65,7 @@
<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
<button class="btn gf-form-btn btn-secondary" type="button" ng-click="openToPicker=!openToPicker">
<i class="fa fa-calendar"></i>
</button>
</div>
@ -81,7 +81,7 @@
<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
</div>
<div class="gf-form">
<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
<button type="submit" class="btn gf-form-btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
</div>
</div>
</form>

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

@ -6,7 +6,7 @@ $theme-name: dark;
// New Colors
// -------------------------
$sapphire-faint: #041126;
$sapphire-bright: #5794F2;
$sapphire-light: #5794F2;
$sapphire-base: #3274D9;
$sapphire-shade: #1F60C4;
$lobster-base: #E02F44;
@ -96,7 +96,7 @@ $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
$link-color: darken($white, 11%);
$link-color-disabled: darken($link-color, 30%);
$link-hover-color: $white;
$external-link-color: $sapphire-bright;
$external-link-color: $sapphire-light;
// Typography
// -------------------------
@ -159,14 +159,11 @@ $table-bg-hover: $dark-3;
// Buttons
// -------------------------
$btn-primary-bg: $green-base;
$btn-primary-bg-hl: $green-shade;
$btn-primary-bg: $sapphire-base;
$btn-primary-bg-hl: $sapphire-shade;
$btn-secondary-bg-hl: $sapphire-base;
$btn-secondary-bg: $sapphire-shade;
$btn-secondary-bg: $sapphire-base;
$btn-secondary-bg-hl: $sapphire-shade;
$btn-secondary-bg: $green-base;
$btn-secondary-bg-hl: $green-shade;
$btn-danger-bg: $lobster-base;
$btn-danger-bg-hl: $lobster-shade;
@ -270,7 +267,6 @@ $toolbar-bg: $input-black;
$warning-text-color: $warn;
$error-text-color: #e84d4d;
$success-text-color: $forest-light;
//$info-text-color: $blue-dark;
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
@ -347,7 +343,7 @@ $diff-json-changed-num: $text-color;
$diff-json-icon: $gray-7;
//Submenu
$variable-option-bg: $sapphire-shade;
$variable-option-bg: $dropdownLinkBackgroundHover;
//Switch Slider
// -------------------------
@ -370,12 +366,12 @@ $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-5;
$panel-editor-viz-item-border: 1px solid $dark-5;
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-shade;
$panel-editor-viz-item-border-hover: 1px solid $sapphire-shade;
$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-bg: $input-black;
$panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($blue, 47%);
$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-blue;

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

@ -155,11 +155,11 @@ $table-bg-hover: $gray-5;
// Buttons
// -------------------------
$btn-primary-bg: $green-base;
$btn-primary-bg-hl: $green-shade;
$btn-secondary-bg: $green-base;
$btn-secondary-bg-hl: $green-shade;
$btn-secondary-bg: $sapphire-base;
$btn-secondary-bg-hl: $sapphire-shade;
$btn-primary-bg: $sapphire-base;
$btn-primary-bg-hl: $sapphire-shade;
$btn-danger-bg: $lobster-base;
$btn-danger-bg-hl: $lobster-shade;
@ -263,7 +263,6 @@ $toolbar-bg: white;
$warning-text-color: lighten($orange, 10%);
$error-text-color: $lobster-shade;
$success-text-color: lighten($green, 10%);
$info-text-color: $sapphire-shade;
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
@ -340,7 +339,7 @@ $diff-json-changed-num: $gray-4;
$diff-json-icon: $gray-4;
//Submenu
$variable-option-bg: $sapphire-light;
$variable-option-bg: $dropdownLinkBackgroundHover;
//Switch Slider
// -------------------------
@ -363,14 +362,11 @@ $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-viz-item-bg-hover: lighten($blue, 62%);
$panel-options-group-border: none;
$panel-editor-viz-item-bg-hover: lighten($blue, 62%);$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-5;
$panel-grid-placeholder-bg: $sapphire-faint;

8
public/sass/base/_type.scss
View File

@ -59,14 +59,6 @@ a.text-error:focus {
color: darken($error-text-color, 10%);
}
/*.text-info {
color: $info-text-color;
}
a.text-info:hover,
a.text-info:focus {
color: darken($info-text-color, 10%);
}*/
.text-success {
color: $success-text-color;
}

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

@ -83,9 +83,11 @@
// Set the backgrounds
// -------------------------
.btn-success,
.btn-primary {
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
}
.btn-secondary {
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
}