tor-browser

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

RequestBlockingPanel.css (4341B)

      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 .request-blocking-panel {
      6  position: relative;
      7  display: flex;
      8  flex-direction: column;
      9  height: 100%;
     10  overflow: hidden;
     11 }
     12 
     13 /* Override the devtools-checkbox style to improve hit area and alignment */
     14 .request-blocking-panel .devtools-checkbox-label {
     15  display: inline-flex;
     16  align-items: center;
     17  gap: 4px;
     18  margin: 0;
     19  padding: 2px 4px;
     20  /* checkbox can be 13px, 14px or 16px depending on the platform */
     21  line-height: 16px;
     22  user-select: none;
     23  cursor: default;
     24 }
     25 
     26 .request-blocking-panel .devtools-checkbox-label > input {
     27  flex: none;
     28  margin: 0;
     29 }
     30 
     31 .request-blocking-label {
     32  flex: 1 1 auto;
     33  display: block;
     34  white-space: nowrap;
     35  overflow: hidden;
     36  text-overflow: ellipsis;
     37 }
     38 
     39 .request-blocking-editable-label {
     40  cursor: text;
     41 }
     42 
     43 /* The "Enable Blocking Requests" bar */
     44 .request-blocking-enable-bar {
     45  flex: none;
     46  background: var(--theme-tab-toolbar-background);
     47  height: calc(var(--theme-toolbar-height) + 1px);
     48  padding-block: 2px;
     49  padding-inline: 16px 4px;
     50  align-items: center;
     51  overflow: hidden;
     52  white-space: nowrap;
     53  border-bottom: 1px solid var(--theme-splitter-color);
     54 }
     55 
     56 .request-blocking-enable-form {
     57  flex-grow: 1;
     58 }
     59 
     60 .request-blocking-contents {
     61  flex: 0 1 auto;
     62  overflow-y: auto;
     63  border-bottom: 1px solid var(--theme-splitter-color);
     64 }
     65 
     66 /* Blocked request list */
     67 .request-blocking-list {
     68  margin: 0;
     69  padding: 4px 0;
     70 }
     71 
     72 .request-blocking-list.disabled {
     73  background-color: var(--theme-toolbar-hover);
     74  opacity: 0.6;
     75 }
     76 
     77 .request-blocking-list li {
     78  display: flex;
     79  align-items: center;
     80  min-height: 20px;
     81  padding-inline: 16px 8px;
     82 }
     83 
     84 .request-blocking-list li.request-blocking-edit-item {
     85  padding: 0;
     86  /* Text input is 24px but we want it to occupy the same space as our 20px rows */
     87  margin-block: -2px;
     88 }
     89 
     90 .request-blocking-list li.request-blocking-edit-item form {
     91  width: 100%;
     92 }
     93 
     94 .request-blocking-list .devtools-checkbox-label {
     95  flex: 1 1 auto;
     96  /* Can't seem to make the flex-shrink reduce the element's width when the
     97     content is a long URL, even if the URL container has text-overflow: ellipsis.
     98     DevTools shows that "the item was clamped to its minimum size" and the shrink
     99     part is thus ignored. So we're reserving 20px for the delete button. */
    100  max-width: calc(100% - 20px);
    101 }
    102 
    103 .request-blocking-remove-button {
    104  /* Visually hide but stay focusable in keyboard navigation */
    105  opacity: 0;
    106  flex: none;
    107  width: 20px;
    108  height: 20px;
    109  margin: 0;
    110  padding: 2px;
    111  border: none;
    112  outline: none;
    113  background-color: transparent;
    114 }
    115 
    116 .request-blocking-list li:hover .request-blocking-remove-button {
    117  opacity: 1;
    118 }
    119 
    120 .request-blocking-remove-button::before {
    121  content: "";
    122  display: block;
    123  width: 16px;
    124  height: 16px;
    125  border-radius: 2px;
    126  background: url("chrome://devtools/skin/images/close.svg") no-repeat center;
    127  background-size: 12px;
    128  -moz-context-properties: fill;
    129  fill: var(--theme-icon-color);
    130 }
    131 
    132 .request-blocking-remove-button:hover::before {
    133  fill: var(--theme-selection-color);
    134  background-color: var(--theme-selection-background);
    135 }
    136 
    137 /* Footer content, progressively pushed by pattern rows in the main list and
    138 * remaining "fixed" at the bottom when there is enough content to scroll,
    139 * thanks to the magic of flexbox */
    140 .request-blocking-footer {
    141  position: relative;
    142  flex: none;
    143 }
    144 
    145 /* Draw a border 1px below the form, so that it disappears out of view when
    146 * there are many pattern rows in the main container and the footer is pushed
    147 * to the bottom */
    148 .request-blocking-footer::after {
    149  content: "";
    150  position: absolute;
    151  left: 0;
    152  right: 0;
    153  top: 100%;
    154  border-bottom: 1px solid var(--theme-splitter-color);
    155 }
    156 
    157 /* Text input for the addition and edition forms */
    158 .request-blocking-add-form input,
    159 .request-blocking-edit-item input {
    160  width: calc(100% - 1px);
    161  height: 24px;
    162  padding-block: 4px;
    163  padding-inline: 20px 8px;
    164  background: none;
    165 }
    166 
    167 .request-blocking-list-empty-notice {
    168  margin: 0;
    169  flex: 1;
    170  overflow-x: hidden;
    171 }
    172 
    173 .request-blocking-notice-element {
    174  padding-top: 12px;
    175  padding-inline: 12px;
    176 }
    177 
    178 .request-blocking-notice-element::before {
    179  content: "• ";
    180 }