tor-browser

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

fxview-tab-row.css (3077B)

      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 @import url("chrome://global/skin/design-system/text-and-typography.css");
      6 
      7 :host {
      8  --fxviewtabrow-element-background-hover: var(--button-background-color-ghost-hover);
      9  --fxviewtabrow-element-background-active: var(--button-background-color-ghost-active);
     10  display: grid;
     11  grid-template-columns: subgrid;
     12  grid-column: span 9;
     13  align-items: stretch;
     14  border-radius: var(--border-radius-small);
     15 }
     16 
     17 @media (forced-colors) {
     18  :host {
     19    --fxviewtabrow-element-background-hover: ButtonText;
     20    --fxviewtabrow-element-background-active: ButtonText;
     21    --fxviewtabrow-text-color-hover: ButtonFace;
     22  }
     23 }
     24 
     25 .fxview-tab-row-main {
     26  display: grid;
     27  grid-template-columns: subgrid;
     28  grid-column: span 6;
     29  gap: 16px;
     30  border-radius: var(--border-radius-small);
     31  align-items: center;
     32  padding: 4px 8px;
     33  user-select: none;
     34  cursor: pointer;
     35  text-decoration: none;
     36 
     37  :host([compact]) & {
     38    grid-template-columns: min-content auto;
     39  }
     40 
     41  &[disabled] {
     42    pointer-events: none;
     43    color: var(--text-color-disabled);
     44  }
     45 }
     46 
     47 .fxview-tab-row-main,
     48 .fxview-tab-row-main:visited,
     49 .fxview-tab-row-main:hover:active {
     50  color: inherit;
     51 }
     52 
     53 .fxview-tab-row-main:hover {
     54  background-color: var(--fxviewtabrow-element-background-hover);
     55  color: var(--fxviewtabrow-text-color-hover);
     56 }
     57 
     58 .fxview-tab-row-main:hover:active {
     59  background-color: var(--fxviewtabrow-element-background-active);
     60 }
     61 
     62 @media (forced-colors) {
     63  .fxview-tab-row-main,
     64  .fxview-tab-row-main:hover,
     65  .fxview-tab-row-main:active {
     66    background-color: transparent;
     67    border: 1px solid LinkText;
     68    color: LinkText;
     69  }
     70 
     71  .fxview-tab-row-main:visited,
     72  .fxview-tab-row-main:visited:hover {
     73    border: 1px solid VisitedText;
     74    color: VisitedText;
     75  }
     76 }
     77 
     78 .fxview-tab-row-favicon {
     79  background-size: cover;
     80  -moz-context-properties: fill;
     81  fill: currentColor;
     82  display: inline-block;
     83  min-height: 16px;
     84  min-width: 16px;
     85  position: relative;
     86 }
     87 
     88 .fxview-tab-row-title {
     89  text-align: match-parent;
     90 }
     91 
     92 .fxview-tab-row-url {
     93  color: var(--text-color-deemphasized);
     94  text-decoration-line: underline;
     95  direction: ltr;
     96  text-align: match-parent;
     97 }
     98 
     99 .fxview-tab-row-date,
    100 .fxview-tab-row-time {
    101  color: var(--text-color-deemphasized);
    102  white-space: nowrap;
    103 }
    104 
    105 .fxview-tab-row-url,
    106 .fxview-tab-row-time {
    107  font-weight: normal;
    108 }
    109 
    110 .fxview-tab-row-button::part(button) {
    111  color: var(--fxview-text-primary-color);
    112 }
    113 
    114 .fxview-tab-row-button[muted="true"]::part(button) {
    115  background-image: url("chrome://global/skin/media/audio-muted.svg");
    116 }
    117 
    118 .fxview-tab-row-button[soundplaying="true"]::part(button) {
    119  background-image: url("chrome://global/skin/media/audio.svg");
    120 }
    121 
    122 .fxview-tab-row-button.undo-button::part(button) {
    123  font-size: var(--font-size-small);
    124  font-weight: normal;
    125 }
    126 
    127 .fxview-tab-row-button.dismiss-button,
    128 .fxview-tab-row-button.undo-button {
    129  justify-self: end;
    130 }