tor-browser

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

Dropdown.css (2015B)

      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 .dropdown {
      6  background: var(--theme-popup-background);
      7  color: var(--theme-popup-color);
      8  border: 1px solid var(--theme-popup-border-color);
      9  border-radius: 4px;
     10  box-shadow: 0 4px 4px 0 var(--search-overlays-semitransparent);
     11  max-height: 300px;
     12  position: absolute;
     13  top: 24px;
     14  width: 150px;
     15  z-index: 1000;
     16  overflow: auto;
     17 }
     18 
     19 [dir="ltr"] .dropdown {
     20  right: 2px;
     21 }
     22 
     23 [dir="rtl"] .dropdown {
     24  left: 2px;
     25 }
     26 
     27 .dropdown-block {
     28  position: relative;
     29  align-self: center;
     30  height: 100%;
     31 }
     32 
     33 /* cover the reserved space at the end of .source-tabs */
     34 .source-tabs + .dropdown-block {
     35  margin-inline-start: -28px;
     36 }
     37 
     38 .dropdown-button {
     39  color: var(--theme-comment);
     40  background: none;
     41  border: none;
     42  padding: 4px 6px;
     43  font-weight: 100;
     44  font-size: 14px;
     45  height: 100%;
     46  width: 28px;
     47  outline-offset: -2px;
     48 }
     49 
     50 .dropdown-button .dbg-img {
     51  display: block;
     52 }
     53 
     54 .dropdown ul {
     55  margin: 0;
     56  padding: 4px 0;
     57  list-style: none;
     58 }
     59 
     60 .dropdown li {
     61  display: flex;
     62  align-items: center;
     63  padding: 6px 8px;
     64  font-size: 12px;
     65  line-height: calc(16 / 12);
     66 
     67  &:hover {
     68    background-color: var(--theme-popup-hover-background);
     69    color: var(--theme-popup-hover-color);
     70 
     71    .dropdown-icon {
     72      fill: currentColor;
     73    }
     74 
     75    .dbg-img-prettyPrint.dropdown-icon,
     76    .dbg-img-blackBox.dropdown-icon {
     77      background-color: currentColor;
     78    }
     79  }
     80 }
     81 
     82 .dropdown-icon {
     83  margin-inline-end: 4px;
     84  mask-size: 13px 13px;
     85 }
     86 
     87 .dropdown-label {
     88  display: block;
     89  overflow: hidden;
     90  text-overflow: ellipsis;
     91  white-space: nowrap;
     92 }
     93 
     94 .dbg-img-prettyPrint.dropdown-icon,
     95 .dbg-img-blackBox.dropdown-icon {
     96  background-color: var(--theme-highlight-blue);
     97 }
     98 
     99 .dropdown-mask {
    100  position: fixed;
    101  width: 100%;
    102  height: 100%;
    103  background: transparent;
    104  z-index: 999;
    105  left: 0;
    106  top: 0;
    107 }