tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

chart.css (2493B)

      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  color: light-dark(var(--theme-text-color-alt), var(--theme-text-color-strong));
     11 }
     12 
     13 .chart-colored-blob {
     14  fill: var(--theme-body-color);
     15  background: var(--theme-body-color);
     16 }
     17 
     18 /* Chart: Pie */
     19 
     20 .pie-chart-slice {
     21  stroke-width: 1px;
     22  cursor: pointer;
     23  stroke: light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.2));
     24 
     25  &[largest] {
     26    stroke: light-dark(#000, #fff);
     27  }
     28 }
     29 
     30 .theme-dark .pie-chart-slice[largest] {
     31  stroke-width: 2px;
     32 }
     33 
     34 .pie-chart-label {
     35  text-anchor: middle;
     36  dominant-baseline: middle;
     37  pointer-events: none;
     38  fill: light-dark(#fff, #000);
     39 }
     40 
     41 .pie-chart-container[slices="1"] > .pie-chart-slice {
     42  stroke-width: 0;
     43 }
     44 
     45 .pie-chart-slice,
     46 .pie-chart-label {
     47  transition: all 0.1s ease-out;
     48 }
     49 
     50 .pie-chart-slice:not(:hover, [focused]),
     51 .pie-chart-slice:not(:hover, [focused]) + .pie-chart-label {
     52  transform: none !important;
     53 }
     54 
     55 /* Chart: Table */
     56 
     57 .table-chart-title {
     58  padding-bottom: 10px;
     59  font-size: 120%;
     60  font-weight: 600;
     61 }
     62 
     63 .table-chart-row {
     64  margin-top: 1px;
     65  cursor: pointer;
     66 }
     67 
     68 /* Only adjust opacity when not in high Contrast Mode */
     69 :root:not([forced-colors-active]) {
     70  .table-chart-grid:hover .table-chart-row {
     71    transition: opacity 0.1s ease-in-out;
     72  }
     73 
     74  .table-chart-grid:not(:hover) .table-chart-row {
     75    transition: opacity 0.2s ease-in-out;
     76  }
     77 
     78  .generic-chart-container:hover > .table-chart-grid:hover .table-chart-row:not(:hover),
     79  .generic-chart-container:hover ~ .table-chart-container > .table-chart-grid .table-chart-row:not([focused]) {
     80    opacity: 0.4;
     81  }
     82 }
     83 
     84 /* Add specific hover style for High Contrast Mode */
     85 :root[forced-colors-active] tbody .table-chart-row:hover {
     86  outline: 1px solid SelectedItem;
     87  outline-offset: 2px;
     88 }
     89 
     90 .table-chart-row-box {
     91  width: 8px;
     92  height: 1.5em;
     93  margin-inline-end: 10px;
     94 }
     95 
     96 .table-chart-row-label {
     97  width: 8em;
     98  padding-inline-end: 6px;
     99  cursor: inherit;
    100 }
    101 
    102 .table-chart-totals {
    103  margin-top: 8px;
    104  padding-top: 6px;
    105 }
    106 
    107 .table-chart-totals {
    108  border-top: 1px solid var(--theme-splitter-color);
    109 }
    110 
    111 .table-chart-summary-label {
    112  font-weight: 600;
    113  padding: 1px 0;
    114  color: light-dark(var(--theme-body-color), var(--theme-text-color-strong));
    115 }