tor-browser

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

profiles-theme-card.css (1653B)

      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 moz-card {
      6  --card-padding: 0;
      7 }
      8 
      9 .theme-card {
     10  width: 120px;
     11  border: none;
     12  box-shadow: none;
     13  border-radius: var(--visual-picker-item-child-border-radius);
     14 
     15  &:hover {
     16    background-color: var(--button-background-color-hover);
     17  }
     18 
     19  @media (forced-colors) {
     20    &:hover {
     21      .theme-name {
     22        color: SelectedItem;
     23      }
     24    }
     25 
     26    :host([checked]) & {
     27      background-color: SelectedItem;
     28      color: SelectedItemText;
     29 
     30      .theme-name {
     31        color: SelectedItemText;
     32      }
     33    }
     34  }
     35 }
     36 
     37 .theme-content {
     38  display: flex;
     39  flex-direction: column;
     40 }
     41 
     42 .img-holder {
     43  width: 100%;
     44  height: 40px;
     45 
     46  border-radius: var(--visual-picker-item-child-border-radius) var(--visual-picker-item-child-border-radius) 0 0;
     47 
     48  /*
     49   * We set the background color here in case the
     50   * ProfilesThemeCard.theme.contentColor doesn't exist. For example, when the
     51   * theme card is a theme from AMO and not one of the default themes.
     52   */
     53  background-color: var(--newtab-background-color, var(--background-color-canvas));
     54 
     55  > img {
     56    -moz-context-properties: fill, stroke, fill-opacity;
     57    width: 100%;
     58    border-radius: inherit;
     59  }
     60 }
     61 
     62 .theme-name {
     63  display: block;
     64  padding: var(--space-small) var(--space-medium);
     65 
     66  border-block-start: var(--card-border);
     67 
     68  font-size: var(--font-size-small);
     69  white-space: nowrap;
     70  overflow: hidden;
     71  text-overflow: ellipsis;
     72 
     73  @media (forced-colors) {
     74    color: ButtonText;
     75  }
     76 }