tor-browser

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

opentabs-tab-row.css (3166B)

      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 .fxview-tab-row-favicon-wrapper {
      6  height: 16px;
      7  position: relative;
      8  display: block;
      9 
     10  .fxview-tab-row-favicon::after,
     11  .fxview-tab-row-button::after,
     12  &.pinned .fxview-tab-row-pinned-media-button {
     13    display: block;
     14    content: "";
     15    background-size: 12px;
     16    background-position: center;
     17    background-repeat: no-repeat;
     18    position: relative;
     19    height: 12px;
     20    width: 12px;
     21    -moz-context-properties: fill, stroke;
     22    fill: currentColor;
     23    stroke: var(--fxview-background-color-secondary);
     24  }
     25 
     26  &:is(.pinnedOnNewTab, .bookmark):not(.attention) .fxview-tab-row-favicon::after {
     27    inset-block-start: 9px;
     28    inset-inline-end: -6px;
     29  }
     30 
     31  &.pinnedOnNewTab .fxview-tab-row-favicon::after,
     32  &.pinnedOnNewTab .fxview-tab-row-button::after {
     33    background-image: url("chrome://browser/skin/pin-12.svg");
     34  }
     35 
     36  &.bookmark .fxview-tab-row-favicon::after,
     37  &.bookmark .fxview-tab-row-button::after {
     38    background-image: url("chrome://browser/skin/bookmark-12.svg");
     39    fill: var(--fxview-primary-action-background);
     40  }
     41 
     42  &.attention .fxview-tab-row-favicon::after,
     43  &.attention .fxview-tab-row-button::after {
     44    background-image: radial-gradient(circle, var(--attention-dot-color), var(--attention-dot-color) 2px, transparent 2px);
     45    height: 4px;
     46    width: 100%;
     47    inset-block-start: 20px;
     48  }
     49 
     50  &.pinned .fxview-tab-row-pinned-media-button {
     51    inset-block-start: -5px;
     52    inset-inline-end: 1px;
     53    border: var(--button-border);
     54    border-radius: var(--border-radius-circle);
     55    background-color: var(--fxview-background-color-secondary);
     56    padding: 6px;
     57    min-width: 0;
     58    min-height: 0;
     59    position: absolute;
     60 
     61    &[muted="true"] {
     62      background-image: url("chrome://global/skin/media/audio-muted.svg");
     63    }
     64 
     65    &[soundplaying="true"] {
     66      background-image: url("chrome://global/skin/media/audio.svg");
     67    }
     68 
     69    &:active,
     70    &:hover:active {
     71      background-color: var(--button-background-color-active);
     72    }
     73  }
     74 }
     75 
     76 .fxview-tab-row-container-indicator {
     77  height: 16px;
     78  width: 16px;
     79  background-image: var(--identity-icon);
     80  background-size: cover;
     81  -moz-context-properties: fill;
     82  fill: var(--identity-icon-color);
     83 }
     84 
     85 .fxview-tab-row-main {
     86  :host(.pinned) & {
     87    padding: var(--space-small);
     88    min-width: unset;
     89    margin: 0;
     90  }
     91 }
     92 
     93 button.fxview-tab-row-main:hover {
     94  & .fxview-tab-row-favicon-wrapper .fxview-tab-row-favicon::after {
     95    stroke: var(--fxview-indicator-stroke-color-hover);
     96  }
     97 }
     98 
     99 @media (prefers-contrast) {
    100  button.fxview-tab-row-main {
    101    border: 1px solid ButtonText;
    102    color: ButtonText;
    103  }
    104 
    105  button.fxview-tab-row-main:enabled:hover {
    106    border: 1px solid SelectedItem;
    107    color: SelectedItem;
    108  }
    109 
    110  button.fxview-tab-row-main:enabled:active {
    111    color: SelectedItem;
    112  }
    113 
    114  button.fxview-tab-row-main:enabled,
    115  button.fxview-tab-row-main:enabled:hover,
    116  button.fxview-tab-row-main:enabled:active {
    117    background-color: ButtonFace;
    118  }
    119 }