tor-browser

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

sidebar-pins-promo.css (3071B)

      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 https://mozilla.org/MPL/2.0/. */
      4 
      5 :host {
      6  --promo-light-background: var(--color-violet-10);
      7  --promo-dark-background: var(--color-violet-60);
      8  --promo-light-text: var(--color-violet-70);
      9  --promo-dark-text: var(--color-violet-0);
     10  --promo-light-icon-border: var(--color-violet-50);
     11  --promo-dark-icon-border: var(--color-violet-0);
     12  --icon-height: 52px;
     13 }
     14 
     15 .promo-card {
     16  --card-box-shadow: none;
     17  position: relative;
     18  container-type: inline-size;
     19  margin: var(--space-small) var(--space-small) 0;
     20  outline: 1px dashed light-dark(var(--promo-light-icon-border), var(--promo-dark-icon-border));
     21 
     22  @media not (prefers-contrast) {
     23    background-color: light-dark(var(--promo-light-background), var(--promo-dark-background));
     24    color: light-dark(var(--promo-light-text), var(--promo-dark-text));
     25  }
     26 
     27  @media (prefers-contrast) {
     28    outline-color: var(--border-color);
     29  }
     30 
     31  @media (forced-colors) {
     32    background-color: ButtonFace;
     33    color: ButtonText;
     34    outline-color: ButtonText;
     35  }
     36 
     37  &[dragactive] {
     38    outline-style: solid;
     39  }
     40 }
     41 
     42 .promo-text {
     43  font-size: var(--font-size-large);
     44  text-align: center;
     45  margin-block: var(--space-xlarge);
     46 }
     47 
     48 .icon-row {
     49  display: flex;
     50  align-items: center;
     51  justify-content: center;
     52  gap: var(--space-medium);
     53 }
     54 
     55 .icon-cell {
     56  display: flex;
     57  align-items: center;
     58  justify-content: center;
     59  box-sizing: border-box;
     60  flex: 1;
     61  height: calc(var(--icon-height) + (2 * var(--border-width)));
     62  border: var(--border-width) dashed light-dark(var(--promo-light-icon-border), var(--promo-dark-icon-border));
     63  border-radius: var(--border-radius-medium);
     64 
     65  @media (prefers-contrast) {
     66    border-color: var(--border-color);
     67  }
     68 
     69  > img {
     70    -moz-context-properties: fill;
     71    fill: light-dark(#9059ff, #f4f0ff);
     72 
     73    @media (prefers-contrast) {
     74      fill: currentColor;
     75    }
     76  }
     77 
     78  /* Start hiding icons as the sidebar width shrinks. */
     79  &.icon-slack {
     80    @container (max-width: 220px) {
     81      display: none;
     82    }
     83  }
     84 
     85  &.icon-gmail {
     86    @container (max-width: 180px) {
     87      display: none;
     88    }
     89  }
     90 
     91  &.icon-firefox {
     92    @container (max-width: 140px) {
     93      display: none;
     94    }
     95  }
     96 }
     97 
     98 .icon-foxy {
     99  > img {
    100    -moz-context-properties: fill, stroke;
    101    fill: light-dark(#c7b2ff, #623ac3);
    102    stroke: light-dark(#9059ff, #7844f0);
    103  }
    104 
    105  @media not (prefers-contrast) {
    106    background-color: light-dark(#c7b2ff, #623ac3);
    107  }
    108 }
    109 
    110 .close-button {
    111  --icon-size: var(--icon-size-xsmall);
    112  position: absolute;
    113  inset-block-start: var(--space-medium);
    114  inset-inline-end: var(--space-medium);
    115 
    116  @media not (prefers-contrast) {
    117    color: light-dark(var(--promo-light-text), var(--promo-dark-text));
    118  }
    119 
    120  @media (forced-colors) {
    121    background-color: ButtonFace;
    122    color: ButtonText;
    123  }
    124 
    125  &:hover {
    126    @media (forced-colors) {
    127      background-color: SelectedItem;
    128      color: SelectedItemText;
    129    }
    130  }
    131 }