Просмотр исходного кода

changed color for label tooltips from blue/red-yellow gradient to black/white

ijin08 7 лет назад
Родитель
Сommit
2ec55d0650

+ 9 - 2
packages/grafana-ui/src/components/Tooltip/_Tooltip.scss

@@ -20,7 +20,13 @@ $popper-margin-from-ref: 5px;
   background: $tooltipBackground;
   background: $tooltipBackground;
   border-radius: $border-radius;
   border-radius: $border-radius;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 10px;
+  padding: 0px 8px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  //border: 1px #333333 solid;
+  color: $tooltipColor;
+  font-weight: 500;
 
 
   // Themes
   // Themes
   &.popper__background--error {
   &.popper__background--error {
@@ -29,7 +35,7 @@ $popper-margin-from-ref: 5px;
 
 
   &.popper__background--brand {
   &.popper__background--brand {
     @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
     @include popper-theme($tooltipBackgroundBrand, $tooltipBackgroundBrand);
-    @include gradient-vertical($red, $orange);
+    @include gradient-vertical($tooltipBackground, $tooltipBackground);
   }
   }
 }
 }
 
 
@@ -39,6 +45,7 @@ $popper-margin-from-ref: 5px;
   border-style: solid;
   border-style: solid;
   position: absolute;
   position: absolute;
   margin: 0px;
   margin: 0px;
+  display: none;
 }
 }
 
 
 .popper__arrow {
 .popper__arrow {

+ 2 - 0
public/sass/_variables.dark.scss

@@ -308,6 +308,8 @@ $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 $graph-tooltip-bg: $dark-1;
 
 
 $tooltipBackground: $popover-help-bg;
 $tooltipBackground: $popover-help-bg;
+$tooltipBackground:#e9edf2;
+$tooltipColor: #52545c;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipArrowColor: $tooltipBackground;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
 $tooltipBackgroundBrand: $brand-primary;

+ 2 - 0
public/sass/_variables.light.scss

@@ -312,6 +312,8 @@ $tooltipLinkColor: lighten($popover-help-color, 5%);
 $graph-tooltip-bg: $gray-5;
 $graph-tooltip-bg: $gray-5;
 
 
 $tooltipBackground: $popover-help-bg;
 $tooltipBackground: $popover-help-bg;
+$tooltipBackground: #09090b;
+$tooltipColor: #ececec;
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
 $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundError: $brand-danger;
 $tooltipBackgroundBrand: $brand-primary;
 $tooltipBackgroundBrand: $brand-primary;