tor-browser

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

breadcrumbs.css (3994B)

      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 :root {
      6  --breadcrumb-id-class-color: light-dark(#909090, var(--theme-text-color-strong));
      7  --breadcrumb-tag-color: light-dark(var(--theme-body-color), var(--theme-contrast-color));
      8 
      9  &[forced-colors-active] {
     10    --breadcrumb-id-class-color: ButtonText;
     11    --breadcrumb-tag-color: ButtonText;
     12  }
     13 }
     14 
     15 /* Inspector HTMLBreadcrumbs */
     16 
     17 .breadcrumbs-widget-container {
     18  margin-right: 3px;
     19  max-height: 24px; /* Set max-height for proper sizing on linux */
     20  height: 24px; /* Set height to prevent starting small waiting for content */
     21 }
     22 
     23 .breadcrumbs-widget-container:-moz-locale-dir(rtl) {
     24  margin-right: 0;
     25  margin-left: 3px;
     26 }
     27 
     28 .scrollbutton-up,
     29 .scrollbutton-down {
     30  appearance: none;
     31  background: transparent;
     32  box-shadow: none;
     33  border: none;
     34  list-style-image: none;
     35  margin: 0;
     36  padding: 0;
     37  visibility: collapse;
     38 }
     39 
     40 .scrollbutton-up > .toolbarbutton-icon,
     41 .scrollbutton-down > .toolbarbutton-icon {
     42  appearance: none;
     43  width: 20px;
     44  height: 16px;
     45  background-size: 16px;
     46  background-position: center;
     47  background-repeat: no-repeat;
     48  background-image: url("images/breadcrumbs-scrollbutton.svg");
     49  list-style-image: none;
     50  padding: 0;
     51 
     52  -moz-context-properties: fill;
     53  fill: var(--theme-toolbar-color);
     54 }
     55 
     56 .scrollbutton-up:not([disabled]):active:hover,
     57 .scrollbutton-down:not([disabled]):active:hover {
     58  background-color: var(--theme-toolbar-hover);
     59 }
     60 
     61 .scrollbutton-up[disabled] > .toolbarbutton-icon,
     62 .scrollbutton-down[disabled] > .toolbarbutton-icon {
     63  opacity: 0.5;
     64 }
     65 
     66 /* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
     67 .scrollbutton-up {
     68  border-right: solid 1px var(--theme-splitter-color);
     69  border-left: solid 1px transparent;
     70  box-shadow: 3px 0 3px -3px var(--theme-sidebar-background);
     71 }
     72 
     73 .scrollbutton-down {
     74  border-right: solid 1px transparent;
     75  border-left: solid 1px var(--theme-splitter-color);
     76  box-shadow: -3px 0 3px -3px var(--theme-sidebar-background);
     77 }
     78 
     79 .scrollbutton-up[disabled],
     80 .scrollbutton-down[disabled] {
     81  box-shadow: none;
     82  border-color: transparent;
     83 }
     84 
     85 .scrollbutton-down > .toolbarbutton-icon {
     86  transform: scaleX(-1);
     87 }
     88 
     89 .breadcrumbs-widget-item {
     90  --separator-width: 8px;
     91  --inline-padding: 6px;
     92  background: none;
     93  border: none;
     94  padding: 0 var(--inline-padding);
     95 
     96  &[aria-pressed="true"] {
     97    color: var(--theme-highlight-blue);
     98 
     99    .breadcrumbs-widget-item-id {
    100      color: var(--theme-highlight-purple);
    101    }
    102 
    103    :is(.breadcrumbs-widget-item-tag, .breadcrumbs-widget-item-pseudo-classes, .breadcrumbs-widget-item-classes) {
    104      color: currentColor;
    105    }
    106 
    107    :root[forced-colors-active] & {
    108      background-color: SelectedItem;
    109      color: SelectedItemText;
    110    }
    111  }
    112 }
    113 
    114 /* We display a separator before all items except the first one */
    115 .breadcrumbs-widget-item:not(:first-child) {
    116  /* We don't want the separator to be part of the button visually, so
    117     we'll move it "between" the items */
    118  margin-inline-start: var(--separator-width);
    119  padding-inline-start: 0;
    120 
    121  &::before {
    122    content: url(chrome://devtools/skin/images/breadcrumbs-divider.svg);
    123    background: none;
    124    display: inline-block;
    125    text-align: center;
    126    width: var(--separator-width);
    127    /* move the separator "out" of the breadcrumb item */
    128    margin-inline-start: calc(-1 * var(--separator-width));
    129    /* and add margin after to simulate padding for the "inside" of the button */
    130    margin-inline-end: var(--inline-padding);
    131    -moz-context-properties: fill;
    132    fill: var(--theme-icon-disabled-color);
    133  }
    134 }
    135 
    136 .breadcrumbs-widget-item-tag {
    137  color: var(--breadcrumb-tag-color);
    138 }
    139 
    140 .breadcrumbs-widget-item-id,
    141 .breadcrumbs-widget-item-classes {
    142  color: var(--breadcrumb-id-class-color);
    143 }
    144 
    145 .breadcrumbs-widget-item-pseudo-classes {
    146  color: var(--pseudo-class-text-color);
    147 }