path: root/browser/components/newtab/content-src/styles/_feature-callout.scss

// 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/.

@import 'feature-callout-theme';

$max-z-index: 2147483647;

.onboardingContainer.featureCallout {
  // See _feature-callout-theme.scss for the theme mixins and
  // FeatureCallout.sys.mjs for the color values
  @include light-theme;

  position: absolute;
  transition: opacity 0.5s ease;
  z-index: $max-z-index - 2;
  outline: none;
  color: var(--fc-color);

  @media (prefers-color-scheme: dark) {
    @include dark-theme;
  }

  @media (prefers-contrast) {
    @include hcm-theme;
  }

  // Account for feature callouts that may be rendered in the chrome but
  // displayed on top of content. Each context has its own color scheme, so they
  // may not match. In that case, we use the special media query below.
  &.simulateContent {
    @media (-moz-content-prefers-color-scheme: light) {
      @include light-theme;
    }

    @media (-moz-content-prefers-color-scheme: dark) {
      @include dark-theme;
    }

    @media (prefers-contrast) {
      @include hcm-theme;
    }
  }

  &.hidden {
    opacity: 0;
    pointer-events: none;
  }

  &,
  & .outer-wrapper {
    // auto height to allow for arrow positioning based on height
    height: auto;
  }

  .screen {
    // override transform in about:welcome
    &:dir(rtl) {
      transform: none;
    }

    &[pos='callout'] {
      height: fit-content;
      min-height: unset;
      overflow: visible;

      .logo-container {
        display: flex;
        justify-content: center;

        .brand-logo {
          margin: 30px 45px 0;

          // This may not work for all future messages, so we may want to make
          // flipping the logo image in RTL mode configurable
          &:dir(rtl) {
            transform: rotateY(180deg);
          }
        }
      }

      .welcome-text {
        align-items: baseline;
        text-align: start;
        margin-inline: 30px;
        padding: 20px 0 0;

        h1,
        h2 {
          font-size: 0.8em;
          margin: 0;
          color: inherit;
        }

        h1 {
          font-weight: bold;
        }

        h2 {
          margin-block: 10px;
        }
      }

      // Secondary section is not included in callouts
      .section-secondary {
        display: none;
      }

      .section-main {
        height: fit-content;
        width: fit-content;

        .main-content {
          position: relative;
          overflow: hidden;
          border: 1px solid var(--fc-border);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
          border-radius: 4px;
          padding-top: 0;
          // Subtract 4px, the block margin of buttons
          padding-bottom: 30px - 4px;
          width: 25em;
          background-color: var(--fc-background);

          .steps {
            height: auto;
            position: absolute;
            // 30px is the margin of the CTAs from the bottom. The CTAs are 32px
            // tall, and the steps are 8px tall. So we need to offset the steps
            // by half the difference in order to center them. = 36px
            bottom: 30px + math.div(32px, 2) - math.div(8px, 2);
            margin: 0 30px;
            padding-block: 0;

            .indicator {
              // using border will show up in Windows High Contrast Mode to improve accessibility.
              border: 4px solid var(--fc-step-color);

              &.current {
                border-color: var(--fc-accent-color);
              }
            }

            & .indicator.current,
            &.progress-bar .indicator.complete {
              border-color: var(--fc-accent-color);
            }
          }
        }

        .dismiss-button {
          font-size: 1em;
          top: 0;
          margin-block: 15px 0;
          margin-inline: 0 15px;
          z-index: $max-z-index;
          background-color: var(--fc-background);
        }
      }

      .action-buttons {
        .primary,
        .secondary-cta .secondary {
          padding: 4px 16px;
          font-size: 0.8em;
          height: 2em;
          background-color: var(--fc-button-background);
        }

        .primary {
          font-weight: bold;
          float: inline-end;
          margin-inline: 10px 30px;
          padding: 4px 16px;
          font-size: 0.8em;
          line-height: 16px;
          min-height: 32px;
        }

        .secondary-cta {
          float: inline-end;
        }
      }

      .action-buttons .primary,
      .action-buttons .secondary-cta .secondary,
      .dismiss-button {
        border-radius: 4px;
        border: 1px solid var(--fc-button-border);
        cursor: pointer;
        color: var(--fc-button-color);

        &:hover {
          background-color: var(--fc-button-background-hover);
          color: var(--fc-button-color-hover);
          border: 1px solid var(--fc-button-border-hover);

          &:active {
            background-color: var(--fc-button-background-active);
            color: var(--fc-button-color-active);
            border: 1px solid var(--fc-button-border-active);
          }
        }

        &:focus-visible {
          box-shadow: none;
          outline: 2px solid var(--fc-accent-color);
          outline-offset: 2px;
        }
      }
    }
  }

  $arrow-size: 24px;
  $arrow-inset-size: math.div($arrow-size, 2);
  // the arrow already overlaps the callout by 12px (see above), but to account
  // for different pixel scaling factors, we can overlap by 1px more, since the
  // border is drawn underneath the callout (on ::after). this is either added
  // to or subtracted from absolute coordinates, depending on the direction.
  $arrow-overlap-inset: -$arrow-inset-size + 1px;

  // applied to all callout arrow foreground and background
  &.callout-arrow::before,
  &.callout-arrow::after {
    content: '';
    position: absolute;
    width: $arrow-size;
    height: $arrow-size;
    transform: rotate(45deg);
    // keep the border crisp under transformation
    transform-style: preserve-3d;
  }

  // color for all arrow foreground
  &.callout-arrow::before {
    z-index: $max-z-index;
    background-color: var(--fc-background);
  }

  // styles for all arrow backgrounds
  &.callout-arrow::after {
    background: transparent;
    outline: 1px solid var(--fc-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
    z-index: -1;
  }

  // up arrow positioning
  &.arrow-top::before,
  &.arrow-top::after {
    top: $arrow-overlap-inset;
    inset-inline-start: calc(50% - $arrow-inset-size);
  }

  // down arrow positioning
  &.arrow-bottom::before,
  &.arrow-bottom::after {
    bottom: $arrow-overlap-inset;
    inset-inline-start: calc(50% - $arrow-inset-size);
  }

  // end arrow positioning
  &.arrow-inline-end::before,
  &.arrow-inline-end::after {
    top: calc(50% - $arrow-inset-size);
    inset-inline-end: $arrow-overlap-inset;
  }

  // start arrow positioning
  &.arrow-inline-start::before,
  &.arrow-inline-start::after {
    top: calc(50% - $arrow-inset-size);
    inset-inline-start: $arrow-overlap-inset;
  }

  // top-end arrow positioning
  &.arrow-top-end::before,
  &.arrow-top-end::after {
    top: $arrow-overlap-inset;
    inset-inline-end: $arrow-inset-size;
  }

  // top-start arrow positioning
  &.arrow-top-start::before,
  &.arrow-top-start::after {
    top: $arrow-overlap-inset;
    inset-inline-start: $arrow-inset-size;
  }

  // hidden arrow display
  &.hidden-arrow::before,
  &.hidden-arrow::after {
    display: none;
  }

  &:focus-visible {
    .screen {
      &[pos='callout'] {
        .section-main .main-content {
          outline: 2px solid var(--fc-accent-color);
          border-color: transparent;

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

    &.callout-arrow::after {
      outline: 2px solid var(--fc-accent-color);
    }
  }
}