tor-browser

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

TreeView.css (4989B)

      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 @import url("chrome://devtools/content/shared/components/reps/reps.css");
      6 
      7 /******************************************************************************/
      8 /* TreeView Colors */
      9 
     10 :root {
     11  --tree-header-background: #c8d2dc;
     12  --tree-header-sorted-background: #aac3dc;
     13 }
     14 
     15 /******************************************************************************/
     16 /* TreeView Table*/
     17 
     18 .treeTable {
     19  color: var(--theme-highlight-blue);
     20 }
     21 
     22 .treeTable .treeLabelCell,
     23 .treeTable .treeValueCell {
     24  padding: 2px 0;
     25  padding-inline-start: 4px;
     26  line-height: 16px; /* make rows 20px tall */
     27  vertical-align: top;
     28  overflow: hidden;
     29 }
     30 
     31 .treeTable .treeLabelCell {
     32  white-space: nowrap;
     33  cursor: default;
     34  padding-inline-start: var(--tree-label-cell-indent);
     35 }
     36 
     37 .treeTable .treeLabelCell::after {
     38  content: ":";
     39  color: var(--theme-comment);
     40 }
     41 
     42 .treeTable .treeValueCell.inputEnabled {
     43  padding-block: 0;
     44 }
     45 
     46 .treeTable .treeValueCell.inputEnabled input {
     47  width: 100%;
     48  height: 20px;
     49  margin: 0;
     50  margin-inline-start: -2px;
     51  border: solid 1px transparent;
     52  outline: none;
     53  box-shadow: none;
     54  padding: 0 1px;
     55  color: var(--theme-text-color-strong);
     56  background: var(--theme-sidebar-background);
     57 }
     58 
     59 .treeTable .treeValueCell.inputEnabled input:focus {
     60  transition: all 150ms ease-in-out;
     61 }
     62 
     63 .treeTable .treeValueCell > [aria-labelledby],
     64 .treeTable .treeLabelCell > .treeLabel {
     65  unicode-bidi: plaintext;
     66  text-align: match-parent;
     67 }
     68 
     69 /* No padding if there is actually no label */
     70 .treeTable .treeLabel:empty {
     71  padding-inline-start: 0;
     72 }
     73 
     74 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeLabel:hover {
     75  cursor: pointer;
     76 }
     77 
     78 /* :not(.selected) is used because row selection styles should have
     79   more precedence than row hovering. */
     80 .treeTable .treeRow:not(.selected):hover {
     81  background-color: var(--theme-selection-background-hover) !important;
     82 }
     83 
     84 .treeTable .treeRow.selected {
     85  background-color: var(--theme-selection-background);
     86 }
     87 
     88 .treeTable .treeRow.selected :where(:not(.objectBox-jsonml)),
     89 .treeTable .treeRow.selected .treeLabelCell::after {
     90  color: var(--theme-selection-color);
     91  fill: currentColor;
     92 }
     93 
     94 /* Invert text selection color in selected rows */
     95 .treeTable .treeRow.selected :not(input, textarea)::selection {
     96  color: var(--theme-selection-background);
     97  background-color: var(--theme-selection-color);
     98 }
     99 
    100 /* Filtering */
    101 .treeTable .treeRow.hidden {
    102  display: none !important;
    103 }
    104 
    105 .treeTable .treeValueCellDivider {
    106  display: flex;
    107  flex-wrap: wrap;
    108  justify-content: space-between;
    109 }
    110 
    111 /* Learn More link */
    112 .treeTable .treeValueCell .learn-more-link {
    113  user-select: none;
    114  color: var(--theme-link-color);
    115  cursor: pointer;
    116  margin: 0 5px;
    117 }
    118 
    119 .treeTable .treeValueCell .learn-more-link:hover {
    120  text-decoration: underline;
    121 }
    122 
    123 /******************************************************************************/
    124 /* Toggle Icon */
    125 
    126 .treeTable .treeRow .treeIcon {
    127  box-sizing: content-box;
    128  height: 14px;
    129  width: 14px;
    130  padding: 1px;
    131  /* Set the size of loading spinner (see .devtools-throbber) */
    132  font-size: 10px;
    133  line-height: 14px;
    134  display: inline-block;
    135  vertical-align: bottom;
    136  /* Use a total width of 20px (margins + padding + width) */
    137  margin-inline: 3px 1px;
    138 }
    139 
    140 /* All expanded/collapsed styles need to apply on immediate children
    141   since there might be nested trees within a tree. */
    142 .treeTable .treeRow.hasChildren > .treeLabelCell > .treeIcon {
    143  cursor: pointer;
    144  background-repeat: no-repeat;
    145 }
    146 
    147 /******************************************************************************/
    148 /* Header */
    149 
    150 .treeTable .treeHeaderRow {
    151  height: 18px;
    152 }
    153 
    154 .treeTable .treeHeaderCell {
    155  cursor: pointer;
    156  user-select: none;
    157  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    158  padding: 0 !important;
    159  background:
    160    linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05)),
    161    radial-gradient(1px 60% at right, rgba(0, 0, 0, 0.8) 0%, transparent 80%) repeat-x var(--tree-header-background);
    162  color: var(--theme-body-color);
    163  white-space: nowrap;
    164 }
    165 
    166 .treeTable .treeHeaderCellBox {
    167  padding-block: 2px;
    168  padding-inline: 10px 14px;
    169 }
    170 
    171 .treeTable .treeHeaderRow > .treeHeaderCell:first-child > .treeHeaderCellBox {
    172  padding: 0;
    173 }
    174 
    175 .treeTable .treeHeaderSorted {
    176  background-color: var(--tree-header-sorted-background);
    177 }
    178 
    179 .treeTable .treeHeaderSorted > .treeHeaderCellBox {
    180  background: url(chrome://devtools/skin/images/sort-descending-arrow.svg) no-repeat calc(100% - 4px);
    181 }
    182 
    183 .treeTable .treeHeaderSorted.sortedAscending > .treeHeaderCellBox {
    184  background-image: url(chrome://devtools/skin/images/sort-ascending-arrow.svg);
    185 }
    186 
    187 .treeTable .treeHeaderCell:hover:active {
    188  background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent), radial-gradient(1px 60% at right, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
    189 }