tor-browser

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

reps.css (8476B)

      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 .theme-light {
      7  --number-color: var(--theme-highlight-green);
      8  --string-color: var(--theme-highlight-red);
      9  --null-color: var(--theme-comment);
     10  --object-color: var(--theme-highlight-blue);
     11  --caption-color: var(--theme-highlight-blue);
     12  --location-color: var(--theme-comment);
     13  --source-link-color: var(--theme-link-color);
     14  --node-color: var(--theme-highlight-purple);
     15  --reference-color: var(--theme-highlight-blue);
     16  --comment-node-color: var(--theme-comment);
     17 }
     18 
     19 /******************************************************************************/
     20 
     21 .inline {
     22  display: inline;
     23  white-space: normal;
     24 }
     25 
     26 .objectBox-object {
     27  font-weight: bold;
     28  color: var(--object-color);
     29  white-space: pre-wrap;
     30 }
     31 
     32 .objectBox-string,
     33 .objectBox-symbol,
     34 .objectBox-text,
     35 .objectBox-textNode,
     36 .objectBox-table {
     37  white-space: pre-wrap;
     38 }
     39 
     40 :is(.objectBox-string, .objectBox-textNode, .objectBox > .nodeName, .objectBox-node .tag-name, .objectBox-node .attrName).has-rtl-char {
     41  unicode-bidi: isolate;
     42 }
     43 
     44 .objectBox-number,
     45 .objectBox-styleRule,
     46 .objectBox-element,
     47 .objectBox-textNode,
     48 .objectBox-array > .length {
     49  color: var(--number-color);
     50 }
     51 
     52 .objectBox-json-number .parsed-value {
     53  border: 1px solid;
     54  border-radius: 4px;
     55  margin-inline-start: 8px;
     56  padding-inline: 2px;
     57  text-wrap: nowrap;
     58  font-size: 10px;
     59 }
     60 
     61 .objectBox-json-number .parsed-value .parsed-value-prefix {
     62  font-weight: bold;
     63  font-variant: small-caps;
     64  margin-inline-end: 2px;
     65 }
     66 
     67 .objectBox-textNode,
     68 .objectBox-string,
     69 .objectBox-symbol {
     70  color: var(--string-color);
     71 }
     72 
     73 .objectBox-empty-string {
     74  font-style: italic;
     75 }
     76 
     77 .objectBox-string a {
     78  word-break: break-all;
     79 }
     80 
     81 .objectBox-string a,
     82 .objectBox-string a:visited {
     83  color: currentColor;
     84  text-decoration: underline;
     85  text-decoration-skip-ink: none;
     86  cursor: pointer;
     87 }
     88 
     89 /* Visually hide the middle of "cropped" url */
     90 .objectBox-string a .cropped-url-middle {
     91  max-width: 0;
     92  max-height: 0;
     93  display: inline-block;
     94  overflow: hidden;
     95  vertical-align: bottom;
     96 }
     97 
     98 .objectBox-string a .cropped-url-end::before {
     99  content: "…";
    100 }
    101 
    102 .objectBox-function,
    103 .objectBox-profile {
    104  color: var(--object-color);
    105 }
    106 
    107 .objectBox-stackTrace.reps-custom-format,
    108 .objectBox-stackTrace.reps-custom-format > .objectBox-string {
    109  color: var(--error-color);
    110 }
    111 
    112 .objectBox-stackTrace-grid {
    113  display: inline-grid;
    114  grid-template-columns: auto auto;
    115  margin-top: 3px;
    116 }
    117 
    118 .objectBox-stackTrace-fn {
    119  color: var(--console-output-color);
    120  padding-inline-start: 17px;
    121  white-space: nowrap;
    122  overflow: hidden;
    123  text-overflow: ellipsis;
    124  margin-inline-end: 5px;
    125 }
    126 
    127 .objectBox-stackTrace-location {
    128  color: var(--theme-internal-link-color, currentColor);
    129  direction: rtl;
    130  white-space: nowrap;
    131  overflow: hidden;
    132  text-overflow: ellipsis;
    133  text-align: end;
    134 }
    135 
    136 .objectBox-stackTrace-location:hover {
    137  text-decoration: underline;
    138 }
    139 
    140 .objectBox-stackTrace-location {
    141  cursor: pointer;
    142 }
    143 
    144 .objectBox-Location,
    145 .location {
    146  color: var(--location-color);
    147 }
    148 
    149 .objectBox-null,
    150 .objectBox-undefined,
    151 .objectBox-hint,
    152 .objectBox-nan,
    153 .logRowHint {
    154  color: var(--null-color);
    155 }
    156 
    157 .objectBox-sourceLink {
    158  position: absolute;
    159  right: 4px;
    160  top: 2px;
    161  padding-left: 8px;
    162  font-weight: bold;
    163  color: var(--source-link-color);
    164 }
    165 
    166 .objectBox-failure {
    167  color: var(--string-color);
    168  border-width: 1px;
    169  border-style: solid;
    170  border-radius: 2px;
    171  font-size: 0.8em;
    172  padding: 0 2px;
    173 }
    174 
    175 .objectBox-accessible.clickable,
    176 .objectBox-node.clickable {
    177  cursor: pointer;
    178 }
    179 
    180 /* JsonML reps can be nested, though only the top-level rep needs layout
    181 * adjustments to align it with the toggle arrow and fit its width to its
    182 * contents. */
    183 .objectBox-jsonml-wrapper {
    184  display: inline-flex;
    185  flex-direction: column;
    186  width: fit-content;
    187  word-break: break-word;
    188  line-height: normal;
    189 }
    190 
    191 .objectBox-jsonml-wrapper[data-expandable="true"] {
    192  cursor: default;
    193 }
    194 
    195 .objectBox-jsonml-wrapper .jsonml-header-collapse-button {
    196  margin: 0 4px 2px 0;
    197  padding: 0;
    198  vertical-align: middle;
    199 }
    200 
    201 .objectBox-jsonml-wrapper .jsonml-header-collapse-button::before {
    202  content: "";
    203  display: block;
    204  width: 10px;
    205  height: 10px;
    206  background: url("chrome://devtools/skin/images/arrow.svg") no-repeat center;
    207  background-size: 10px;
    208  transform: rotate(-90deg);
    209  transition: transform 125ms ease;
    210  -moz-context-properties: fill;
    211  fill: var(--theme-icon-dimmed-color);
    212 }
    213 
    214 .objectBox-jsonml-wrapper .jsonml-header-collapse-button[aria-expanded="true"]::before {
    215  transform: rotate(0deg);
    216 }
    217 
    218 /******************************************************************************/
    219 
    220 .objectBox-event,
    221 .objectBox-eventLog,
    222 .objectBox-regexp,
    223 .objectBox-object {
    224  color: var(--object-color);
    225  white-space: pre-wrap;
    226 }
    227 
    228 .objectBox .Date {
    229  color: var(--string-color);
    230  white-space: pre-wrap;
    231 }
    232 
    233 /******************************************************************************/
    234 
    235 .objectBox.theme-comment {
    236  color: var(--comment-node-color);
    237 }
    238 
    239 .accessible-role,
    240 .tag-name {
    241  color: var(--object-color);
    242 }
    243 
    244 .attrName {
    245  color: var(--string-color);
    246 }
    247 
    248 .attrEqual,
    249 .objectEqual {
    250  color: var(--comment-node-color);
    251 }
    252 
    253 .attrValue,
    254 .attrValue.objectBox-string {
    255  color: var(--node-color);
    256 }
    257 
    258 .angleBracket {
    259  color: var(--theme-body-color);
    260 }
    261 
    262 /******************************************************************************/
    263 /* Length bubble for arraylikes and maplikes */
    264 
    265 .objectLengthBubble {
    266  color: var(--null-color);
    267 }
    268 
    269 /******************************************************************************/
    270 
    271 .objectLeftBrace,
    272 .objectRightBrace,
    273 .arrayLeftBracket,
    274 .arrayRightBracket {
    275  color: var(--object-color);
    276 }
    277 
    278 /******************************************************************************/
    279 /* Cycle reference */
    280 
    281 .objectBox-Reference {
    282  font-weight: bold;
    283  color: var(--reference-color);
    284 }
    285 
    286 [class*="objectBox"] > .objectTitle {
    287  color: var(--object-color);
    288 }
    289 
    290 .caption {
    291  color: var(--caption-color);
    292 }
    293 
    294 /******************************************************************************/
    295 /* Themes */
    296 
    297 .theme-dark .objectBox-null,
    298 .theme-dark .objectBox-undefined,
    299 .theme-light .objectBox-null,
    300 .theme-light .objectBox-undefined {
    301  font-style: normal;
    302 }
    303 
    304 .theme-dark .objectBox-object,
    305 .theme-light .objectBox-object {
    306  font-weight: normal;
    307  white-space: pre-wrap;
    308 }
    309 
    310 .theme-dark .caption,
    311 .theme-light .caption {
    312  font-weight: normal;
    313 }
    314 
    315 /******************************************************************************/
    316 /* Open DOMNode in inspector or Accessible in accessibility inspector button */
    317 
    318 :is(button, [role="button"]).open-accessibility-inspector {
    319  background: url("chrome://devtools/content/shared/components/reps/images/open-a11y.svg") no-repeat;
    320 }
    321 
    322 :is(button, [role="button"]).open-inspector {
    323  background: url("chrome://devtools/skin/images/open-inspector.svg") no-repeat;
    324 }
    325 
    326 :is(button, [role="button"]).highlight-node {
    327  background: url("chrome://devtools/skin/images/highlight-selector.svg") no-repeat;
    328 }
    329 
    330 :is(button, [role="button"]):is(.open-accessibility-inspector, .open-inspector, .highlight-node) {
    331  display: inline-block;
    332  vertical-align: top;
    333  height: 15px;
    334  width: 15px;
    335  margin: 0 4px;
    336  padding: 0;
    337  border: none;
    338  color: var(--theme-icon-color);
    339  fill: currentColor;
    340  cursor: pointer;
    341  -moz-context-properties: fill;
    342 }
    343 
    344 .objectBox-accessible:hover .open-accessibility-inspector,
    345 .objectBox-node:hover .open-inspector,
    346 .objectBox-textNode:hover .open-inspector,
    347 .open-accessibility-inspector:hover,
    348 .highlight-node:hover,
    349 .open-inspector:hover {
    350  color: var(--theme-icon-alternate-hover-color);
    351 }
    352 
    353 /******************************************************************************/
    354 /* Invoke getter button */
    355 
    356 button.invoke-getter {
    357  mask: url(chrome://devtools/content/shared/components/reps/images/input.svg) no-repeat;
    358  display: inline-block;
    359  background-color: var(--theme-icon-color);
    360  height: 10px;
    361  vertical-align: middle;
    362  border: none;
    363 }
    364 
    365 .invoke-getter:hover {
    366  background-color: var(--theme-icon-checked-color);
    367 }
    368 
    369 /******************************************************************************/
    370 /* "more…" ellipsis */
    371 .more-ellipsis {
    372  color: var(--comment-node-color);
    373 }
    374 
    375 /* function parameters */
    376 .objectBox-function .param {
    377  color: var(--theme-highlight-red);
    378 }