tor-browser

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

splitview.css (3185B)

      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 .theme-dark {
      6  --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
      7  --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
      8 }
      9 .theme-light {
     10  --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
     11  --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
     12 }
     13 
     14 box,
     15 .splitview-nav {
     16  flex: 1;
     17  flex-direction: column;
     18  min-width: 0;
     19  min-height: 0;
     20 }
     21 
     22 .splitview-nav {
     23  list-style: none;
     24  padding: 0;
     25  margin: 0;
     26  background-color: var(--theme-sidebar-background);
     27 
     28  display: flex;
     29  overflow-x: hidden;
     30  overflow-y: auto;
     31 }
     32 
     33 .splitview-nav > li {
     34  padding-inline-end: 8px;
     35  align-items: center;
     36  outline: 0;
     37  vertical-align: bottom;
     38  border-bottom: 1px solid var(--theme-splitter-color);
     39 }
     40 
     41 .placeholder {
     42  flex: 1;
     43  text-align: center;
     44 }
     45 
     46 .splitview-nav > li.splitview-active {
     47  background-color: var(--theme-selection-background);
     48  color: var(--theme-selection-color);
     49  background-image: var(--sidemenu-selected-arrow);
     50  background-repeat: no-repeat;
     51  background-position: center right;
     52 }
     53 
     54 .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
     55  background-image: var(--sidemenu-selected-arrow-rtl);
     56  background-position: center left;
     57 }
     58 
     59 .splitview-nav > li:not(.splitview-active):where(:hover, :focus-within) {
     60  background-color: var(--theme-selection-background-hover);
     61 }
     62 
     63 /* Toolbars */
     64 
     65 .splitview-main > .devtools-toolbar {
     66  height: 29px;
     67 }
     68 
     69 .splitview-main > toolbar,
     70 .loading .splitview-nav-container {
     71  border-inline-end: 1px solid var(--theme-splitter-color);
     72 }
     73 
     74 .splitview-nav-container {
     75  justify-content: center;
     76 }
     77 
     78 .loading .splitview-nav-container > .placeholder {
     79  display: none !important;
     80 }
     81 
     82 .splitview-controller,
     83 .splitview-main {
     84  flex: none;
     85 }
     86 
     87 .splitview-controller {
     88  min-height: 3em;
     89  max-height: 14em;
     90  max-width: 400px;
     91  min-width: 200px;
     92 }
     93 
     94 .splitview-side-details > * {
     95  display: none;
     96  min-width: 0;
     97  min-height: 0;
     98 }
     99 
    100 /* only the active details pane is shown */
    101 .splitview-side-details > .splitview-active {
    102  display: flex;
    103 }
    104 
    105 /* filtered items are hidden */
    106 ol.splitview-nav > li.splitview-filtered {
    107  display: none;
    108 }
    109 
    110 /* "empty list" and "all filtered" placeholders are hidden */
    111 .splitview-nav:empty,
    112 .splitview-nav.splitview-all-filtered,
    113 .splitview-nav + .splitview-nav.placeholder {
    114  display: none;
    115 }
    116 .splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
    117 .splitview-nav:empty ~ .splitview-nav.placeholder.empty {
    118  display: flex;
    119 }
    120 
    121 @media (width >= 700px) {
    122  .splitview-root {
    123    flex-direction: row;
    124  }
    125  .splitview-controller {
    126    max-height: none;
    127    /* Override the potential splitter-set height */
    128    height: auto !important;
    129  }
    130  .splitview-details {
    131    display: none;
    132  }
    133  .splitview-details.splitview-active {
    134    display: flex;
    135  }
    136 }
    137 
    138 /* portrait mode */
    139 @media (width < 700px) {
    140  .splitview-controller {
    141    max-width: none;
    142    /* Override the potential splitter-set width */
    143    width: auto !important;
    144  }
    145 }