tor-browser

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

options-panel.css (4397B)

      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 :root {
      5  user-select: none;
      6 }
      7 
      8 .theme-light {
      9  --experimental-background: #e0eeff;
     10  --experimental-color: #436286;
     11 }
     12 
     13 .theme-dark {
     14  --experimental-background: #436286;
     15  --experimental-color: #e0eeff;
     16 }
     17 
     18 #options-panel {
     19  display: block;
     20 }
     21 
     22 .options-vertical-pane {
     23  display: inline;
     24  float: inline-start;
     25 }
     26 
     27 .options-vertical-pane {
     28  margin: 5px;
     29  width: calc(100% / 3 - 10px);
     30  min-width: 320px;
     31  padding-inline-start: 5px;
     32  box-sizing: border-box;
     33 }
     34 
     35 /* Snap to 50% width once there is not room for 3 columns anymore.
     36   This prevents having 2 columns showing in a row, but taking up
     37   only ~66% of the available space. */
     38 @media (max-width: 1000px) {
     39  .options-vertical-pane {
     40    width: calc(100% / 2 - 10px);
     41  }
     42 }
     43 
     44 .options-vertical-pane fieldset {
     45  border: none;
     46  min-inline-size: auto;
     47 }
     48 
     49 .options-vertical-pane fieldset legend {
     50  font-size: 1.4rem;
     51  margin-inline-start: -15px;
     52  margin-bottom: 3px;
     53  cursor: default;
     54 }
     55 
     56 .options-vertical-pane fieldset + fieldset {
     57  margin-top: 1rem;
     58 }
     59 
     60 .options-groupbox {
     61  margin-inline-start: 15px;
     62  padding: 2px;
     63 }
     64 
     65 .options-groupbox label {
     66  display: flex;
     67  padding: 4px 0;
     68  align-items: center;
     69  width: max-content;
     70  max-width: 100%;
     71 }
     72 
     73 /* Add padding for label of select inputs in order to
     74   align it with surrounding checkboxes */
     75 .options-groupbox label span:first-child {
     76  padding-inline-start: 5px;
     77 }
     78 
     79 .options-groupbox label span + select {
     80  margin-inline-start: 4px;
     81 }
     82 
     83 .options-groupbox.horizontal-options-groupbox label {
     84  display: inline-flex;
     85  align-items: flex-end;
     86 }
     87 
     88 .options-groupbox.horizontal-options-groupbox label + label {
     89  margin-inline-start: 4px;
     90 }
     91 
     92 .options-groupbox > * {
     93  padding: 2px;
     94 }
     95 
     96 .options-citation-label {
     97  display: inline-block;
     98  font-size: 1rem;
     99  font-style: italic;
    100  /* To align it with the checkbox */
    101  padding: 4px 0 0;
    102  padding-inline-end: 4px;
    103 }
    104 
    105 label:has(.option-secondary-label) {
    106  display: grid;
    107  grid-template-areas:
    108    "input label"
    109    ".     secondary-label";
    110  grid-template-columns: auto 1fr;
    111 }
    112 
    113 .option-secondary-label {
    114  font-size: 0.9em;
    115  font-style: italic;
    116  grid-area: secondary-label;
    117  color: var(--theme-text-color-alt);
    118 }
    119 
    120 #devtools-sourceeditor-keybinding-select {
    121  min-width: 130px;
    122 }
    123 
    124 #devtools-sourceeditor-tabsize-select {
    125  min-width: 80px;
    126 }
    127 
    128 #screenshot-options legend::after {
    129  content: "";
    130  display: inline-block;
    131  background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
    132  width: 16px;
    133  height: 16px;
    134  vertical-align: sub;
    135  margin-inline-start: 5px;
    136  -moz-context-properties: fill;
    137  fill: var(--theme-toolbar-color);
    138  opacity: 0.6;
    139 }
    140 
    141 .deprecation-notice::before {
    142  background-image: url("chrome://devtools/skin/images/alert.svg");
    143  content: "";
    144  display: inline-block;
    145  flex-shrink: 0;
    146  height: 15px;
    147  margin-inline-end: 5px;
    148  width: 15px;
    149 }
    150 
    151 .deprecation-notice {
    152  align-items: center;
    153  background-color: var(--theme-warning-background);
    154  color: var(--theme-warning-color);
    155  display: flex;
    156  margin-inline-start: 8px;
    157  outline: var(--theme-warning-background) solid 4px;
    158 }
    159 
    160 .deprecation-notice a {
    161  color: currentColor;
    162 }
    163 .deprecation-notice a:hover {
    164  text-decoration: underline;
    165 }
    166 
    167 .experimental-notice::before {
    168  mask-image: url("chrome://devtools/skin/images/filter-small.svg");
    169  mask-size: 15px;
    170  transform: scaleY(-1);
    171  background-color: var(--experimental-color);
    172  display: inline-block;
    173  content: "";
    174  flex-shrink: 0;
    175  height: 15px;
    176  margin-inline-end: 5px;
    177  width: 15px;
    178 }
    179 
    180 .experimental-notice {
    181  background-color: var(--experimental-background);
    182  color: var(--experimental-color);
    183  outline: var(--experimental-background) solid 4px;
    184  align-items: center;
    185  display: flex;
    186  margin-inline-start: 8px;
    187 }
    188 
    189 .experimental-notice a {
    190  color: currentColor;
    191 }
    192 .experimental-notice a:hover {
    193  text-decoration: underline;
    194 }
    195 
    196 @keyframes highlight {
    197  0% {
    198    background-color: var(--theme-highlight-yellow);
    199  }
    200  100% {
    201    background-color: transparent;
    202  }
    203 }
    204 
    205 .options-panel-highlight {
    206  animation: highlight 8s;
    207  animation-timing-function: ease;
    208 }
    209 
    210 @media (prefers-reduced-motion) {
    211  .highlighted {
    212    animation-timing-function: steps(1, end);
    213  }
    214 }