diff options
Diffstat (limited to 'browser/components/newtab/content-src/styles/_feature-callout.scss')
| -rw-r--r-- | browser/components/newtab/content-src/styles/_feature-callout.scss | 314 |
1 files changed, 314 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/styles/_feature-callout.scss b/browser/components/newtab/content-src/styles/_feature-callout.scss new file mode 100644 index 0000000000..aa0ba0ed1e --- /dev/null +++ b/browser/components/newtab/content-src/styles/_feature-callout.scss @@ -0,0 +1,314 @@ +// 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); + } + } +} |