browser/components/sidebar/sidebar-pins-promo.css

Propagation: 92.86%

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 https://mozilla.org/MPL/2.0/. */

:host {
  --promo-light-background: var(--color-violet-10);
  --promo-dark-background: var(--color-violet-60);
  --promo-light-text: var(--color-violet-70);
  --promo-dark-text: var(--color-violet-0);
  --promo-light-icon-border: var(--color-violet-50);
  --promo-dark-icon-border: var(--color-violet-0);
}

.promo-card {
  --card-box-shadow: none;
  position: relative;
  container-type: inline-size;
  margin: var(--space-small) var(--space-small) 0;
  outline: 1px dashed light-dark(var(--promo-light-icon-border), var(--promo-dark-icon-border));

  @media not (prefers-contrast) {
    background-color: light-dark(var(--promo-light-background), var(--promo-dark-background));
    color: light-dark(var(--promo-light-text), var(--promo-dark-text));
  }

  @media (prefers-contrast) {
    outline-color: var(--border-color);
  }

  &[dragactive] {
    outline-style: solid;
  }
}

.promo-text {
  font-size: var(--font-size-large);
  text-align: center;
  margin-block: var(--space-xlarge);
}

.icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-medium);

  @container (max-width: 160px) {
    display: none;
  }
}

.icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  border: var(--border-width) dashed light-dark(var(--promo-light-icon-border), var(--promo-dark-icon-border));
  border-radius: var(--border-radius-medium);

  @media (prefers-contrast) {
    border-color: var(--border-color);
  }

  &.foxylight {
    display: flex;

    @media (prefers-color-scheme: dark) {
      display: none;
    }
  }

  &.foxydark {
    display: none;

    @media (prefers-color-scheme: dark) {
      display: flex;
    }
  }

  > img {
    -moz-context-properties: fill;
    fill: light-dark(#9059ff, #f4f0ff);

    @media (prefers-contrast) {
      fill: currentColor;
    }
  }
}

.close-button {
  --icon-size: var(--icon-size-xsmall);
  position: absolute;
  inset-block-start: var(--space-medium);
  inset-inline-end: var(--space-medium);

  @media not (prefers-contrast) {
    color: light-dark(var(--promo-light-text), var(--promo-dark-text));
  }
}

Back to Home