tor-browser

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

Frames.css (4258B)

      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 .frames div[role="listbox"] {
      6  list-style: none;
      7  margin: 0;
      8  padding: 4px 0;
      9  outline-offset: -2px;
     10 }
     11 
     12 .frames div[role="listbox"] .frame {
     13  padding: 2px;
     14  overflow: hidden;
     15  display: flex;
     16  justify-content: space-between;
     17  column-gap: 0.5em;
     18  flex-direction: row;
     19  align-items: center;
     20  margin: 2px;
     21  max-width: 100%;
     22  flex-wrap: wrap;
     23  outline-offset: -2px;
     24 }
     25 
     26 .frames div[role="listbox"] .frame * {
     27  user-select: none;
     28 }
     29 
     30 .frames .badge {
     31  flex-shrink: 0;
     32  margin-inline-end: 10px;
     33 }
     34 
     35 .frames .location {
     36  font-weight: normal;
     37  color: var(--theme-comment);
     38  margin: 0;
     39  flex-grow: 1;
     40  max-width: 100%;
     41  overflow: hidden;
     42  white-space: nowrap;
     43  /* Trick to get the ellipsis at the start of the string */
     44  text-overflow: ellipsis;
     45  direction: rtl;
     46 }
     47 
     48 .call-stack-pane:dir(ltr) .frames .location {
     49  padding-right: 10px;
     50  text-align: right;
     51 }
     52 
     53 .call-stack-pane:dir(rtl) .frames .location {
     54  padding-left: 10px;
     55  text-align: left;
     56 }
     57 
     58 .call-stack-pane .location-async-cause {
     59  color: var(--theme-comment);
     60 }
     61 
     62 .frames .title {
     63  text-overflow: ellipsis;
     64  overflow: hidden;
     65  padding-inline-start: 20px;
     66 }
     67 
     68 .frames-group .title {
     69  padding-inline-start: 30px;
     70 }
     71 
     72 .frames div[role="listbox"] .frame:hover,
     73 .frames div[role="listbox"] .frame:focus {
     74  background-color: var(--theme-toolbar-background-alt);
     75 }
     76 
     77 .frames div[role="listbox"] .location-async-cause:hover,
     78 .frames div[role="listbox"] .location-async-cause:focus,
     79 .frames div[role="listbox"] .location-async-cause:hover .async-label,
     80 .frames div[role="listbox"] .location-async-cause:focus .async-label {
     81  background-color: var(--theme-body-background);
     82 }
     83 
     84 .frames div[role="listbox"] .frame:focus {
     85  box-shadow: none;
     86 }
     87 
     88 .frames div[role="listbox"] .frame.selected {
     89  background-color: var(--theme-selection-background);
     90  color: var(--theme-selection-color);
     91  outline-offset: 1px;
     92 }
     93 
     94 .frames div[role="listbox"] .frame.dead {
     95  color: var(--theme-text-color-inactive);
     96 }
     97 
     98 .frames div[role="listbox"] .frame.inactive,
     99 .frames div[role="listbox"] .frame.inactive.async-label {
    100  background-color: light-dark(var(--theme-toolbar-background-alt), var(--theme-body-alternate-emphasized-background));
    101 }
    102 
    103 .frames div[role="listbox"] .frame.selected i.annotation-logo svg path {
    104  fill: var(--theme-selection-color);
    105 }
    106 
    107 :root.theme-light .frames div[role="listbox"] .frame.selected .location,
    108 :root.theme-dark .frames div[role="listbox"] .frame.selected .location {
    109  color: var(--theme-selection-color);
    110 }
    111 
    112 .frames .show-more-container {
    113  display: flex;
    114  min-height: 24px;
    115  padding: 4px 0;
    116 }
    117 
    118 .frames .show-more {
    119  text-align: center;
    120  padding: 8px 0;
    121  margin: 7px 10px 7px 7px;
    122  border: 1px solid var(--theme-splitter-color);
    123  background-color: var(--theme-tab-toolbar-background);
    124  width: 100%;
    125  font-size: inherit;
    126  color: inherit;
    127 }
    128 
    129 .frames .show-more:hover {
    130  background-color: var(--theme-toolbar-background-hover);
    131 }
    132 
    133 .frames .dbg-img.annotation-logo {
    134  margin-inline-end: 4px;
    135  background-color: currentColor;
    136 }
    137 
    138 /*
    139 * We also show the library icon in locations, which are forced to RTL.
    140 */
    141 .frames .location .dbg-img.annotation-logo {
    142  margin-inline-start: 4px;
    143 }
    144 
    145 /* Some elements are added to the DOM only to be printed into the clipboard
    146   when the user copy some elements. We don't want those elements to mess with
    147   the layout so we put them outside of the screen
    148 */
    149 .frames .clipboard-only {
    150  position: absolute;
    151  left: -9999px;
    152 }
    153 
    154 .call-stack-pane .location-async-cause {
    155  --label-padding: 20px;
    156 
    157  color: var(--theme-text-color-alt);
    158  display: flex;
    159  align-items: center;
    160  padding-block: 2px;
    161  width: 100%;
    162  pointer-events: none;
    163 
    164  &::before,
    165  &::after {
    166    content: "";
    167    height: 1px;
    168    translate: 0 1px;
    169    background-color: var(--theme-splitter-color);
    170  }
    171 
    172  &::before {
    173    width: var(--label-padding);
    174  }
    175 
    176  &::after {
    177    flex: 1;
    178  }
    179 }
    180 
    181 .frames-group .location-async-cause {
    182  --label-padding: 50px;
    183 }
    184 
    185 .call-stack-pane .async-label {
    186  padding: 0 3px;
    187  display: inline-block;
    188  font-style: italic;
    189 }