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

Theme:s Tooltip fixes (#23174)

Browse Source 
* LightTheme: Fixed tooltips background & text

* LightTheme: Fixed tooltips background & text
This commit is contained in:
Torkel Ödegaard 2020-03-30 16:31:53 +02:00 committed by GitHub
parent a75211ce0d
commit bdf5654837
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/grafana-ui/src/components/Tooltip/_Tooltip.scss
View File

@ -13,6 +13,11 @@ $popper-margin-from-ref: 5px;
background: darken($backgroundColor, 15%); background: darken($backgroundColor, 15%);
color: lighten($textColor, 20%); color: lighten($textColor, 20%);
} }
strong,
em {
color: lighten($textColor, 20%);
}
} }
.popper { .popper {
@ -25,7 +30,7 @@ $popper-margin-from-ref: 5px;
.popper__background { .popper__background {
background: $tooltipBackground; background: $tooltipBackground;
border-radius: $border-radius-sm; border-radius: $border-radius-sm;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); box-shadow: $tooltipShadow;
padding: $space-sm; padding: $space-sm;
color: $tooltipColor; color: $tooltipColor;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;

31
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -282,30 +282,29 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover // Tooltips and popovers
// -------------------------
$tooltipColor: $text-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$tooltipShadow: 0 0 10px black;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $gray15;
$tooltipColor: $text-color;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
$popover-bg: $dark-2; $popover-bg: $dark-2;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $dark-9; $popover-border-color: $dark-9;
$popover-header-bg: $dark-9; $popover-header-bg: $dark-9;
$popover-shadow: 0 0 20px black; $popover-shadow: 0 0 20px black;
$popover-help-bg: $btn-secondary-bg; $popover-help-bg: $tooltipBackground;
$popover-help-color: $gray-6; $popover-help-color: $text-color;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
// Tooltips and popovers
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $black;
$tooltipColor: $gray-4;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
// images // images
$checkboxImageUrl: '../img/checkbox.png'; $checkboxImageUrl: '../img/checkbox.png';

29
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -274,29 +274,26 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover // Tooltips and popovers
$tooltipBackground: $gray-1;
$tooltipColor: $gray-7;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
$tooltipShadow: 0 0 5px $gray60;
$graph-tooltip-bg: $gray-5;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($tooltipColor, 5%);
$popover-bg: $page-bg; $popover-bg: $page-bg;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $gray-5; $popover-border-color: $gray-5;
$popover-header-bg: $gray-5; $popover-header-bg: $gray-5;
$popover-shadow: 0 0 20px $white; $popover-shadow: 0 0 20px $white;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground;
// Tooltips and popovers $popover-help-color: $tooltipColor;
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($popover-help-color, 5%);
$graph-tooltip-bg: $gray-5;
$tooltipBackground: $gray-1;
$tooltipColor: $gray-7;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
// images // images
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';

31
public/sass/_variables.dark.generated.scss
View File

@ -285,30 +285,29 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover // Tooltips and popovers
// -------------------------
$tooltipColor: $text-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$tooltipShadow: 0 0 10px black;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $gray15;
$tooltipColor: $text-color;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
$popover-bg: $dark-2; $popover-bg: $dark-2;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $dark-9; $popover-border-color: $dark-9;
$popover-header-bg: $dark-9; $popover-header-bg: $dark-9;
$popover-shadow: 0 0 20px black; $popover-shadow: 0 0 20px black;
$popover-help-bg: $btn-secondary-bg; $popover-help-bg: $tooltipBackground;
$popover-help-color: $gray-6; $popover-help-color: $text-color;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
// Tooltips and popovers
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: $link-color;
$graph-tooltip-bg: $dark-1;
$tooltipBackground: $black;
$tooltipColor: $gray-4;
$tooltipArrowColor: $tooltipBackground;
$tooltipBackgroundError: $brand-danger;
// images // images
$checkboxImageUrl: '../img/checkbox.png'; $checkboxImageUrl: '../img/checkbox.png';

29
public/sass/_variables.light.generated.scss
View File

@ -277,29 +277,26 @@ $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade); $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade); $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover // Tooltips and popovers
$tooltipBackground: $gray-1;
$tooltipColor: $gray-7;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
$tooltipShadow: 0 0 5px $gray60;
$graph-tooltip-bg: $gray-5;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($tooltipColor, 5%);
$popover-bg: $page-bg; $popover-bg: $page-bg;
$popover-color: $text-color; $popover-color: $text-color;
$popover-border-color: $gray-5; $popover-border-color: $gray-5;
$popover-header-bg: $gray-5; $popover-header-bg: $gray-5;
$popover-shadow: 0 0 20px $white; $popover-shadow: 0 0 20px $white;
$popover-help-bg: $btn-secondary-bg;
$popover-help-color: $gray-6;
$popover-error-bg: $btn-danger-bg; $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground;
// Tooltips and popovers $popover-help-color: $tooltipColor;
// -------------------------
$tooltipColor: $popover-help-color;
$tooltipArrowWidth: 5px;
$tooltipLinkColor: lighten($popover-help-color, 5%);
$graph-tooltip-bg: $gray-5;
$tooltipBackground: $gray-1;
$tooltipColor: $gray-7;
$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
$tooltipBackgroundError: $brand-danger;
// images // images
$checkboxImageUrl: '../img/checkbox_white.png'; $checkboxImageUrl: '../img/checkbox_white.png';