devtools/client/themes/chart.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* Chart */
   6
   7 .generic-chart-container {
   8   /* Hack: force hardware acceleration */
   9   transform: translateZ(1px);
  10 }
  11
  12 .theme-dark .generic-chart-container {
  13   color: var(--theme-selection-color);
  14 }
  15
  16 .theme-light .generic-chart-container {
  17   color: var(--theme-text-color-alt);
  18 }
  19
  20 .chart-colored-blob {
  21   fill: var(--theme-body-color);
  22   background: var(--theme-body-color);
  23 }
  24
  25 /* Chart: Pie */
  26
  27 .pie-chart-slice {
  28   stroke-width: 1px;
  29   cursor: pointer;
  30 }
  31
  32 .theme-dark .pie-chart-slice {
  33   stroke: rgba(0,0,0,0.2);
  34 }
  35
  36 .theme-light .pie-chart-slice {
  37   stroke: rgba(255,255,255,0.8);
  38 }
  39
  40 .theme-dark .pie-chart-slice[largest] {
  41   stroke-width: 2px;
  42   stroke: #fff;
  43 }
  44
  45 .theme-light .pie-chart-slice[largest] {
  46   stroke: #000;
  47 }
  48
  49 .pie-chart-label {
  50   text-anchor: middle;
  51   dominant-baseline: middle;
  52   pointer-events: none;
  53 }
  54
  55 .theme-dark .pie-chart-label {
  56   fill: #000;
  57 }
  58
  59 .theme-light .pie-chart-label {
  60   fill: #fff;
  61 }
  62
  63 .pie-chart-container[slices="1"] > .pie-chart-slice {
  64   stroke-width: 0px;
  65 }
  66
  67 .pie-chart-slice,
  68 .pie-chart-label {
  69   transition: all 0.1s ease-out;
  70 }
  71
  72 .pie-chart-slice:not(:hover, [focused]),
  73 .pie-chart-slice:not(:hover, [focused]) + .pie-chart-label {
  74   transform: none !important;
  75 }
  76
  77 /* Chart: Table */
  78
  79 .table-chart-title {
  80   padding-bottom: 10px;
  81   font-size: 120%;
  82   font-weight: 600;
  83 }
  84
  85 .table-chart-row {
  86   margin-top: 1px;
  87   cursor: pointer;
  88 }
  89
  90 .table-chart-grid:hover .table-chart-row {
  91   transition: opacity 0.1s ease-in-out;
  92 }
  93
  94 .table-chart-grid:not(:hover) .table-chart-row {
  95   transition: opacity 0.2s ease-in-out;
  96 }
  97
  98 .generic-chart-container:hover > .table-chart-grid:hover .table-chart-row:not(:hover),
  99 .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid .table-chart-row:not([focused]) {
 100   opacity: 0.4;
 101 }
 102
 103 .table-chart-row-box {
 104   width: 8px;
 105   height: 1.5em;
 106   margin-inline-end: 10px;
 107 }
 108
 109 .table-chart-row-label {
 110   width: 8em;
 111   padding-inline-end: 6px;
 112   cursor: inherit;
 113 }
 114
 115 .table-chart-totals {
 116   margin-top: 8px;
 117   padding-top: 6px;
 118 }
 119
 120 .table-chart-totals {
 121   border-top: 1px solid var(--theme-splitter-color);
 122 }
 123
 124 .table-chart-summary-label {
 125   font-weight: 600;
 126   padding: 1px 0px;
 127 }
 128
 129 .theme-dark .table-chart-summary-label {
 130   color: var(--theme-selection-color);
 131 }
 132
 133 .theme-light .table-chart-summary-label {
 134   color: var(--theme-body-color);
 135 }