browser/components/profiles/content/profiles-theme-card.css

Propagation: 33.33%

Back to Home

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

:host {
  --theme-card-border-radius: 10px;
  --preview-image-border-radius: 9px;
  --theme-card-border-width: 2px;

  box-sizing: border-box;
  border-radius: var(--theme-card-border-radius);
}

moz-card {
  --card-padding: 0;
}

.theme-card {
  width: 120px;
  border-radius: var(--theme-card-border-radius);
  border: none;
  box-shadow: none;

  &:hover {
    background-color: var(--button-background-color-hover);
  }

  @media (forced-colors) {
    &:hover {
      border-color: SelectedItem;

      .theme-name {
        color: SelectedItem;
      }
    }

    :host([checked]) & {
      background-color: SelectedItem;
      border-color: SelectedItemText;
      color: SelectedItemText;

      .theme-name {
        color: SelectedItemText;
      }
    }
  }
}

.theme-content {
  display: flex;
  flex-direction: column;
}

.img-holder {
  width: 100%;
  height: 40px;

  border-top-left-radius: var(--preview-image-border-radius);
  border-top-right-radius: var(--preview-image-border-radius);

  > img {
    -moz-context-properties: fill, stroke, fill-opacity;
    width: 100%;

    border-top-left-radius: var(--preview-image-border-radius);
    border-top-right-radius: var(--preview-image-border-radius);
  }
}

.theme-name {
  display: block;
  padding: var(--space-small) var(--space-medium);

  border-inline-width: var(--theme-card-border-width);
  border-block-end-width: var(--theme-card-border-width);
  border-block-start: var(--card-border);

  font-size: var(--font-size-small);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  @media (forced-colors) {
    color: ButtonText;
  }
}

Back to Home