tor-browser

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

Tree.css (2238B)

      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 /* We can remove the outline since we do add our own focus style on nodes */
      6 .tree:focus {
      7  outline: none;
      8 }
      9 
     10 .tree.inline {
     11  display: inline-block;
     12 }
     13 
     14 .tree.nowrap {
     15  white-space: nowrap;
     16 }
     17 
     18 .tree.noselect {
     19  user-select: none;
     20 }
     21 
     22 .tree .tree-node {
     23  display: flex;
     24 }
     25 
     26 .tree-indent {
     27  display: inline-block;
     28  width: 12px;
     29  margin-inline-start: 3px;
     30  border-inline-start: 1px solid #a2d1ff;
     31  flex-shrink: 0;
     32  height: 0;
     33 }
     34 
     35 .tree-node[data-expandable="false"] .tree-last-indent {
     36  /* The 13px value is taken from the total width and margins of the arrow
     37  element of expandables nodes (10px width + 3px margins). That way the
     38  node's text are indented the same for both expandable and non-expandable
     39  nodes */
     40  margin-inline-end: 13px;
     41 }
     42 
     43 .tree .tree-node[data-expandable="true"] {
     44  cursor: default;
     45 }
     46 
     47 /* add a grey background when hovering any line of the tree */
     48 .tree .tree-node:not(.focused):hover {
     49  background-color: var(--theme-toolbar-background-hover);
     50 }
     51 
     52 /* In the webconsole object inspector, it is styled as a button */
     53 .tree .theme-twisty {
     54  background-color: transparent;
     55  border: none;
     56  font-family: inherit;
     57  font-size: inherit;
     58 }
     59 
     60 /* avoid distinct background when hovering the arrow*/
     61 .tree .theme-twisty:hover {
     62  background-color: var(--theme-toolbar-background-hover);
     63 }
     64 
     65 .tree .tree-node.focused {
     66  color: var(--theme-selection-color);
     67  background-color: var(--theme-selection-background);
     68 
     69  /* Make folder/file icons white on dark focused background */
     70  .img {
     71    background-color: var(--theme-selection-color);
     72    fill: var(--theme-selection-color);
     73  }
     74  /* also toggle the color of the expand arrows */
     75  .theme-twisty {
     76    fill: var(--theme-selection-color);
     77 
     78    /* avoid distinct background when hovering the arrow */
     79    &:hover {
     80      background-color: var(--theme-selection-background);
     81    }
     82  }
     83 
     84  /* Invert text selection color in selected rows */
     85  ::selection {
     86    color: var(--theme-selection-background);
     87    background-color: var(--theme-selection-color);
     88  }
     89 }