vitess.io/vitess@v0.16.2/web/vtadmin/src/components/charts/charts.scss (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  /*
    18   * Note that the $colors definition needs to go before the highcharts.scss import.
    19   * This is the easiest way to override the Highcharts colour palette when using styled mode;
    20   * see https://www.highcharts.com/docs/chart-design-and-style/custom-themes-in-styled-mode
    21   *
    22   * The limitation here is that we can't really toggle Highcharts palettes between
    23   * dark/light/other themes, which is not a huge deal, but worth mentioning in case
    24   * it matters later on.
    25   *
    26   * Gradient generated with the very useful https://colordesigner.io/gradient-generator
    27   */
    28  $colors: #8187ff #b17ff5 #d676e5 #f26fd1 #ff6bbb #ff6ca3 #ff738c #ff7e75 #ff8c60 #ff9b4e #ffab40;
    29  
    30  /*
    31  * We use Highcharts' "styled mode" to style chart components
    32  * (SVGs under the hood) with CSS. This lets us rely on our
    33  * standard CSS variables for consistent theming.
    34  *
    35  * See https://www.highcharts.com/docs/chart-design-and-style/style-by-css
    36  */
    37  @import 'highcharts/css/highcharts.scss';
    38  
    39  .highcharts-axis-labels {
    40      fill: var(--textColorSecondary);
    41  }
    42  
    43  .highcharts-axis-title {
    44      fill: var(--textColorSecondary);
    45  }
    46  
    47  .highcharts-background {
    48      fill: none;
    49  }
    50  
    51  .highcharts-grid-line {
    52      stroke: var(--backgroundPrimaryHighlight);
    53  }
    54  
    55  .highcharts-legend-item text {
    56      fill: var(--textColorPrimary);
    57  }
    58  
    59  .highcharts-line-series .highcharts-graph {
    60      stroke-width: 1px;
    61      transition: stroke-width 200ms; /* slow out */
    62  }
    63  
    64  .highcharts-loading-inner {
    65      color: var(--textColorSecondary);
    66      font-family: var(--fontFamilyPrimary);
    67      font-size: theme('fontSize.lg');
    68      font-weight: 500;
    69  }
    70  
    71  .highcharts-series-hover .highcharts-graph {
    72      transition: stroke-width 50ms ease-in-out; /* quick in */
    73  }
    74  
    75  .highcharts-line-series.highcharts-series-hover .highcharts-graph {
    76      stroke-width: 2px;
    77  }
    78  
    79  // Matches the root svg element of the chart. Use this to set styles
    80  // that should be inherited by all elements, like font-family or other text styles.
    81  .highcharts-root {
    82      font-family: var(--fontFamilyMonospace);
    83  }
    84  
    85  // Using Highcharts' built in `title` property is not recommended.
    86  // In most cases, using a regular heading element like <h2>
    87  // adjacent to the chart is more flexible and consistent,
    88  // since we can't apply layout-type rules like line-height or margin.
    89  .highcharts-title {
    90      font-family: var(--fontFamilyPrimary);
    91      font-weight: 700;
    92  }
    93  
    94  .highcharts-tooltip {
    95      stroke: none;
    96  
    97      text {
    98          fill: #fff;
    99      }
   100  }
   101  
   102  .highcharts-tooltip-box {
   103      fill: rgba(0, 0, 0, 0.85);
   104      fill-opacity: 0.95;
   105  }
   106  
   107  .highcharts-yaxis-grid .highcharts-grid-line {
   108      stroke-width: 1px;
   109  }
   110  
   111  .highcharts-xaxis-grid .highcharts-grid-line {
   112      stroke-width: 1px;
   113  }