diff options
Diffstat (limited to 'browser/components/asrouter/content-src/styles')
3 files changed, 1076 insertions, 0 deletions
diff --git a/browser/components/asrouter/content-src/styles/_feature-callout-theme.scss b/browser/components/asrouter/content-src/styles/_feature-callout-theme.scss new file mode 100644 index 0000000000..657d4fa6a3 --- /dev/null +++ b/browser/components/asrouter/content-src/styles/_feature-callout-theme.scss @@ -0,0 +1,92 @@ +// 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/. + +// stylelint-disable color-hex-length, color-hex-case -- we want to preserve +// these values exactly, since they're drawn from other parts of the browser. + +@mixin light-theme { + --fc-background: var(--fc-background-light, #fff); + --fc-color: var(--fc-color-light, rgb(21, 20, 26)); + --fc-border: var(--fc-border-light, #CFCFD8); + --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224)); + --fc-button-background: var(--fc-button-background-light, #F0F0F4); + --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26)); + --fc-button-border: var(--fc-button-border-light, transparent); + --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6); + --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26)); + --fc-button-border-hover: var(--fc-button-border-hover-light, transparent); + --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8); + --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26)); + --fc-button-border-active: var(--fc-button-border-active-light, transparent); + --fc-primary-button-background: var(--fc-primary-button-background-light, #0061e0); + --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254)); + --fc-primary-button-border: var(--fc-primary-button-border-light, transparent); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250bb); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254)); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053e94); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254)); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent); + --fc-step-color: color-mix(in srgb, currentColor 50%, transparent); + --fc-link-color: var(--fc-link-color-light, #0061E0); + --fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB); + --fc-link-color-active: var(--fc-link-color-active-light, #053E94); +} + +@mixin dark-theme { + --fc-background: var(--fc-background-dark, rgb(43, 42, 51)); + --fc-color: var(--fc-color-dark, rgb(251, 251, 254)); + --fc-border: var(--fc-border-dark, #3A3944); + --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255)); + --fc-button-background: var(--fc-button-background-dark, #2B2A33); + --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254)); + --fc-button-border: var(--fc-button-border-dark, transparent); + --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E); + --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254)); + --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent); + --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66); + --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254)); + --fc-button-border-active: var(--fc-button-border-active-dark, transparent); + --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255)); + --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51)); + --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255)); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51)); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255)); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51)); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent); + --fc-link-color: var(--fc-link-color-dark, #00DDFF); + --fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF); + --fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF); +} + +@mixin hcm-theme { + --fc-background: var(--fc-background-hcm, -moz-dialog); + --fc-color: var(--fc-color-hcm, -moz-dialogtext); + --fc-border: var(--fc-border-hcm, -moz-dialogtext); + --fc-accent-color: var(--fc-accent-color-hcm, LinkText); + --fc-button-background: var(--fc-button-background-hcm, ButtonFace); + --fc-button-color: var(--fc-button-color-hcm, ButtonText); + --fc-button-border: var(--fc-button-border-hcm, ButtonText); + --fc-button-background-hover: var(--fc-button-background-hover-hcm, ButtonText); + --fc-button-color-hover: var(--fc-button-color-hover-hcm, ButtonFace); + --fc-button-border-hover: var(--fc-button-border-hover-hcm, ButtonText); + --fc-button-background-active: var(--fc-button-background-active-hcm, ButtonText); + --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace); + --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText); + --fc-primary-button-background: var(--fc-primary-button-background-hcm, ButtonText); + --fc-primary-button-color: var(--fc-primary-button-color-hcm, ButtonFace); + --fc-primary-button-border: var(--fc-primary-button-border-hcm, ButtonFace); + --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-hcm, SelectedItem); + --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-hcm, SelectedItemText); + --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-hcm, SelectedItemText); + --fc-primary-button-background-active: var(--fc-primary-button-background-active-hcm, SelectedItemText); + --fc-primary-button-color-active: var(--fc-primary-button-color-active-hcm, SelectedItem); + --fc-primary-button-border-active: var(--fc-primary-button-border-active-hcm, SelectedItem); + --fc-step-color: var(--fc-accent-color-hcm, LinkText); + --fc-link-color: var(--fc-link-color-hcm, LinkText); + --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText); + --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText); +} diff --git a/browser/components/asrouter/content-src/styles/_feature-callout.scss b/browser/components/asrouter/content-src/styles/_feature-callout.scss new file mode 100644 index 0000000000..66770c2238 --- /dev/null +++ b/browser/components/asrouter/content-src/styles/_feature-callout.scss @@ -0,0 +1,775 @@ +// 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'; + +/* stylelint-disable max-nesting-depth */ + +#feature-callout { + // See _feature-callout-theme.scss for the theme mixins and + // FeatureCallout.sys.mjs for the color values + @include light-theme; + + position: absolute; + z-index: 2147483647; + outline: none; + color: var(--fc-color); + accent-color: var(--fc-accent-color); + // Make sure HTML content uses non-native theming, even in chrome windows. + -moz-theme: non-native; + + @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 { + color-scheme: env(-moz-content-preferred-color-scheme); + + // TODO - replace 2 mixins with a single mixin with light-dark() values. + @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; + } + } + + // The desired width of the arrow (the triangle base). + --arrow-width: 33.9411px; + // The width/height of the square that, rotated 90deg, will become the arrow. + --arrow-square-size: calc(var(--arrow-width) / sqrt(2)); + // After rotating, the width is no longer the square width. It's now equal to + // the diagonal from corner to corner, i.e. √2 * the square width. We need to + // account for this extra width in some calculations. + --extra-width-from-rotation: calc(var(--arrow-width) - var(--arrow-square-size)); + // The height of the arrow, once rotated and cut in half. + --arrow-visible-height: calc(var(--arrow-width) / 2); + // Half the width/height of the square. Calculations on the arrow itself need + // to treat the arrow as a square, since they are operating on the element + // _before_ it is rotated. Calculations on other elements (like the panel + // margin that needs to make space for the arrow) should use the visible + // height that treats it as a triangle. + --arrow-visible-size: calc(var(--arrow-square-size) / 2); + --arrow-center-inset: calc(50% - var(--arrow-visible-size)); + // Move the arrow 1.5px closer to the callout to account for subpixel rounding + // differences, which might cause the corners of the arrow (which is actually + // a rotated square) to be visible. + --arrow-offset: calc(1.5px - var(--arrow-visible-size)); + // For positions like top-end, the arrow is 12px away from the corner. + --arrow-corner-distance: 12px; + --arrow-corner-inset: calc(var(--arrow-corner-distance) + (var(--extra-width-from-rotation) / 2)); + --arrow-overlap-magnitude: 5px; + + @at-root panel#{&} { + --panel-color: var(--fc-color); + --panel-shadow: none; + // Extra space around the panel for the shadow to be drawn in. The panel + // content can't overflow the XUL popup frame, so the frame must be extended. + --panel-shadow-margin: 6px; + // The panel needs more extra space on the side that the arrow is on, since + // the arrow is absolute positioned. This adds the visible height of the + // arrow to the margin and subtracts 1 since the arrow is inset by 1.5px + // (see --arrow-offset). + --panel-arrow-space: calc(var(--panel-shadow-margin) + var(--arrow-visible-height) - 1.5px); + // The callout starts with its edge aligned with the edge of the anchor. But + // we want the arrow to align to the anchor, not the callout edge. So we need + // to offset the callout by the arrow size and margin, as well as the margin + // of the entire callout (it has margins on all sides to make room for the + // shadow when displayed in a panel, which would normally cut off the shadow). + --panel-margin-offset: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-corner-distance) + (var(--arrow-width) / 2))); + } + + @at-root panel#{&}::part(content) { + width: initial; + border: 0; + border-radius: 0; + padding: 0; + margin: var(--panel-shadow-margin); + background: none; + color: inherit; + // stylelint-disable-next-line declaration-no-important + overflow: visible !important; + } + + @at-root div#{&} { + transition: opacity 0.5s ease; + + &.hidden { + opacity: 0; + pointer-events: none; + } + } + + .onboardingContainer, + .onboardingContainer .outer-wrapper { + // Override the element transitions from aboutwelcome.scss + --transition: none; + + // auto height to allow for arrow positioning based on height + height: auto; + } + + // use a different approach to flipping to avoid the fuzzy aliasing that + // transform causes. + &:dir(rtl) { + transform: none; + direction: ltr; + } + + & .outer-wrapper:dir(rtl) { + transform: none; + direction: rtl; + } + + .screen { + // override transform in about:welcome + &:dir(rtl) { + transform: none; + } + + &[pos='callout'] { + height: fit-content; + min-height: unset; + overflow: visible; + + &[layout='inline'] { + .section-main { + .main-content, + .main-content.no-steps { + width: 18em; + padding-inline: 16px; + padding-block: 0; + + .welcome-text { + // Same height as the dismiss button + height: 24px; + margin-block: 12px; + margin-inline: 0; + padding: 0; + white-space: nowrap; + } + } + + .dismiss-button { + height: 24px; + width: 24px; + min-height: 24px; + min-width: 24px; + margin: 0; + top: calc(50% - 12px); + inset-inline-end: 12px; + } + } + } + + .logo-container { + display: flex; + justify-content: center; + + .brand-logo { + margin: 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: 0; + padding: 0; + gap: 8px; + + h1, + h2 { + font-size: 0.813em; + margin: 0; + color: inherit; + } + + h1 { + font-weight: 600; + } + + .inline-icon-container { + display: flex; + flex-flow: row wrap; + align-items: center; + + .logo-container { + height: 16px; + width: 16px; + margin-inline-end: 6px; + box-sizing: border-box; + -moz-context-properties: fill; + fill: currentColor; + + img { + height: 16px; + width: 16px; + margin: 0; + } + } + + &[alignment='top'], + &[alignment='bottom'] { + flex-wrap: nowrap; + + .logo-container { + height: 1.5em; // match the title's line-height + align-items: center; + padding-bottom: 0.15em; + box-sizing: border-box; + } + } + + &[alignment='top'] { + align-items: start; + } + + &[alignment='bottom'] { + align-items: end; + } + } + + } + + .multi-select-container { + margin: 0; + font-size: 0.813em; + row-gap: 12px; + color: inherit; + overflow: visible; + + #multi-stage-multi-select-label { + font-size: inherit; + // There's a 12px gap that pushes the .multi-select-container down + // away from the .welcome-text. And there's an 8px gap between the h1 + // and h2 in the .welcome-text container. So subtract 4px to get the + // desired 8px margin, so spacing is the same as for `subtitle`. + margin: -4px 0 0; + color: inherit; + } + } + + .cta-link { + background: none; + text-decoration: underline; + cursor: pointer; + border: none; + padding: 0; + color: var(--fc-link-color); + order: -1; + margin-inline-end: auto; + margin-block: 8px; + + &:hover { + color: var(--fc-link-color-hover); + } + + &:active { + color: var(--fc-link-color-active); + } + } + + // 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: var(--callout-padding, 24px); + width: 25em; + gap: 16px; + background-color: var(--fc-background); + + .main-content-inner { + gap: 12px; + } + + .steps { + height: auto; + position: absolute; + // 24px is the callout's bottom padding. 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. 32/2 - 8/2 = 12. + bottom: calc(var(--callout-padding, 24px) + 12px); + 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); + } + } + + &:not(.progress-bar) { + flex-flow: row nowrap; + gap: 8px; + + .indicator { + margin: 0; + } + } + + & .indicator.current, + &.progress-bar .indicator.complete { + border-color: var(--fc-accent-color); + } + } + } + + .dismiss-button { + font-size: 1em; + inset-block: 0 auto; + inset-inline: auto 0; + margin-block: 16px 0; + margin-inline: 0 16px; + background-color: var(--fc-background); + + &[button-size='small'] { + height: 24px; + width: 24px; + min-height: 24px; + min-width: 24px; + } + } + } + + .action-buttons { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + justify-content: end; + gap: 10px; + // The Figma spec wants a 16px gap between major content blocks and the + // action buttons. But the action buttons are siblings with the minor + // content blocks, which want a 12px gap. So we use a 12px gap and just + // add 4px of margin to the action buttons. + margin-top: 4px; + + &[alignment='start'] { + justify-content: start; + } + + &[alignment='space-between'] { + justify-content: space-between; + } + + .secondary-cta { + font-size: inherit; + } + + .primary, + .secondary { + padding: 4px 16px; + margin: 0; + font-size: 0.813em; + font-weight: 600; + line-height: 16px; + min-height: 32px; + text-decoration: none; + cursor: default; + } + + .secondary { + background-color: var(--fc-button-background); + } + + .primary { + background-color: var(--fc-primary-button-background); + } + + .split-button-container { + align-items: stretch; + + &:not([hidden]) { + display: flex; + } + + .primary, + .secondary, + .additional-cta { + &:not(.submenu-button) { + border-start-end-radius: 0; + border-end-end-radius: 0; + margin-inline-end: 0; + } + + &:focus-visible { + z-index: 2; + } + } + + .submenu-button { + border-start-start-radius: 0; + border-end-start-radius: 0; + margin-inline-start: 1px; + padding: 8px; + min-width: 30px; + box-sizing: border-box; + background-image: url('chrome://global/skin/icons/arrow-down.svg'); + background-repeat: no-repeat; + background-size: 16px; + background-position: center; + -moz-context-properties: fill; + fill: currentColor; + } + } + } + + .action-buttons .primary, + .action-buttons .secondary, + .dismiss-button { + border-radius: 4px; + + &:focus-visible { + box-shadow: none; + outline: 2px solid var(--fc-accent-color); + outline-offset: 2px; + } + + &:disabled { + opacity: 0.4; + cursor: auto; + } + } + + .action-buttons .secondary, + .dismiss-button { + border: 1px solid var(--fc-button-border); + color: var(--fc-button-color); + + &:hover:not(:disabled), + &[open] { + 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); + } + } + } + + .action-buttons .primary { + border: 1px solid var(--fc-primary-button-border); + color: var(--fc-primary-button-color); + + &:hover:not(:disabled), + &[open] { + background-color: var(--fc-primary-button-background-hover); + color: var(--fc-primary-button-color-hover); + border: 1px solid var(--fc-primary-button-border-hover); + + &:active { + background-color: var(--fc-primary-button-background-active); + color: var(--fc-primary-button-color-active); + border: 1px solid var(--fc-primary-button-border-active); + } + } + } + } + } + + @at-root panel#{&}:is([side='top'], [side='bottom']):not([hide-arrow='permanent']) { + margin-inline: var(--panel-margin-offset); + } + + @at-root panel#{&}:is([side='left'], [side='right']):not([hide-arrow='permanent']) { + margin-block: var(--panel-margin-offset); + } + + @at-root panel#{&}::part(content) { + position: relative; + } + + // all visible callout arrow boxes. boxes are for rotating 45 degrees, arrows + // are for the actual arrow shape and are children of the boxes. + .arrow-box { + position: absolute; + overflow: visible; + transform: rotate(45deg); + // keep the border crisp under transformation + transform-style: preserve-3d; + } + + &:not([arrow-position]) .arrow-box, + &[hide-arrow] .arrow-box { + display: none; + } + + // both shadow arrow and background arrow + .arrow { + width: var(--arrow-square-size); + height: var(--arrow-square-size); + } + + // the arrow's shadow box + .shadow-arrow-box { + z-index: -1; + } + + // the arrow's shadow + .shadow-arrow { + background: transparent; + outline: 1px solid var(--fc-border); + box-shadow: 0 2px 6px rgba(0, 0, 0, 15%); + } + + // the 'filled' arrow box + .background-arrow-box { + z-index: 1; + // the background arrow technically can overlap the dismiss button. it + // doesn't visibly overlap it because of the clip-path rule below, but it + // can still be clicked. so we need to make sure it doesn't block inputs on + // the button. the visible part of the arrow can still catch clicks because + // we don't add this rule to .shadow-arrow-box. + pointer-events: none; + } + + // the 'filled' arrow + .background-arrow { + background-color: var(--fc-background); + clip-path: var(--fc-arrow-clip-path); + } + + // top (center) arrow positioning + &[arrow-position='top'] .arrow-box { + top: var(--arrow-offset); + inset-inline-start: var(--arrow-center-inset); + // the callout arrow is actually a diamond (a rotated square), with the + // lower half invisible. the part that appears in front of the callout has + // only a background, so that where it overlaps the callout's border, the + // border is not visible. the part that appears behind the callout has only + // a border/shadow, so that it can't be seen overlapping the callout. but + // because the background is the same color as the callout, that half of the + // diamond would visibly overlap any callout content that happens to be in + // the same place. so we clip it to a triangle, with a 2% extension on the + // bottom to account for any subpixel rounding differences. + --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); + } + + @at-root panel#{&}[arrow-position='top']::part(content) { + margin-top: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='top'] { + margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // bottom (center) arrow positioning + &[arrow-position='bottom'] .arrow-box { + bottom: var(--arrow-offset); + inset-inline-start: var(--arrow-center-inset); + --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); + } + + @at-root panel#{&}[arrow-position='bottom']::part(content) { + margin-bottom: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='bottom'] { + margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // end (center) arrow positioning + &[arrow-position='inline-end'] .arrow-box { + top: var(--arrow-center-inset); + inset-inline-end: var(--arrow-offset); + --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); + } + + @at-root panel#{&}[arrow-position='inline-end']::part(content) { + margin-inline-end: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='inline-end'] { + margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // start (center) arrow positioning + &[arrow-position='inline-start'] .arrow-box { + top: var(--arrow-center-inset); + inset-inline-start: var(--arrow-offset); + --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); + } + + @at-root panel#{&}[arrow-position='inline-start']::part(content) { + margin-inline-start: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='inline-start'] { + margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // top-end arrow positioning + &[arrow-position='top-end'] .arrow-box { + top: var(--arrow-offset); + inset-inline-end: var(--arrow-corner-inset); + --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); + } + + @at-root panel#{&}[arrow-position='top-end']::part(content) { + margin-top: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='top-end'] { + margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // top-start arrow positioning + &[arrow-position='top-start'] .arrow-box { + top: var(--arrow-offset); + inset-inline-start: var(--arrow-corner-inset); + --fc-arrow-clip-path: polygon(100% 0, 100% 2%, 2% 100%, 0 100%, 0 0); + } + + @at-root panel#{&}[arrow-position='top-start']::part(content) { + margin-top: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='top-start'] { + margin-top: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // bottom-end arrow positioning + &[arrow-position='bottom-end'] .arrow-box { + bottom: var(--arrow-offset); + inset-inline-end: var(--arrow-corner-inset); + --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); + } + + @at-root panel#{&}[arrow-position='bottom-end']::part(content) { + margin-bottom: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='bottom-end'] { + margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // bottom-start arrow positioning + &[arrow-position='bottom-start'] .arrow-box { + bottom: var(--arrow-offset); + inset-inline-start: var(--arrow-corner-inset); + --fc-arrow-clip-path: polygon(100% 0, 98% 0, 0 98%, 0 100%, 100% 100%); + } + + @at-root panel#{&}[arrow-position='bottom-start']::part(content) { + margin-bottom: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='bottom-start'] { + margin-bottom: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // inline-end-top arrow positioning + &[arrow-position='inline-end-top'] .arrow-box { + top: var(--arrow-corner-inset); + inset-inline-end: var(--arrow-offset); + --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); + } + + @at-root panel#{&}[arrow-position='inline-end-top']::part(content) { + margin-inline-end: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='inline-end-top'] { + margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // inline-end-bottom arrow positioning + &[arrow-position='inline-end-bottom'] .arrow-box { + bottom: var(--arrow-corner-inset); + inset-inline-end: var(--arrow-offset); + --fc-arrow-clip-path: polygon(100% 0, 100% 100%, 98% 100%, 0 2%, 0 0); + } + + @at-root panel#{&}[arrow-position='inline-end-bottom']::part(content) { + margin-inline-end: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='inline-end-bottom'] { + margin-inline-end: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // inline-start-top arrow positioning + &[arrow-position='inline-start-top'] .arrow-box { + top: var(--arrow-corner-inset); + inset-inline-start: var(--arrow-offset); + --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); + } + + @at-root panel#{&}[arrow-position='inline-start-top']::part(content) { + margin-inline-start: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='inline-start-top'] { + margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // inline-start-bottom arrow positioning + &[arrow-position='inline-start-bottom'] .arrow-box { + bottom: var(--arrow-corner-inset); + inset-inline-start: var(--arrow-offset); + --fc-arrow-clip-path: polygon(0 100%, 100% 100%, 100% 98%, 2% 0, 0 0); + } + + @at-root panel#{&}[arrow-position='inline-start-bottom']::part(content) { + margin-inline-start: var(--panel-arrow-space); + } + + @at-root panel#{&}[arrow-position='inline-start-bottom'] { + margin-inline-start: calc(-1 * (var(--panel-shadow-margin) + var(--arrow-overlap-magnitude))); + } + + // focus outline for the callout itself + &: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); + } + } + } + } + + .shadow-arrow { + outline: 2px solid var(--fc-accent-color); + } + } +} diff --git a/browser/components/asrouter/content-src/styles/_shopping.scss b/browser/components/asrouter/content-src/styles/_shopping.scss new file mode 100644 index 0000000000..218e996cb8 --- /dev/null +++ b/browser/components/asrouter/content-src/styles/_shopping.scss @@ -0,0 +1,209 @@ +// 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/. + +/* stylelint-disable max-nesting-depth */ + +.onboardingContainer.shopping { + height: auto; + + .outer-wrapper { + height: auto; + } +} + +.onboardingContainer.shopping .screen[pos='split'] { + height: auto; + margin: 0 auto; + min-height: fit-content; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(58, 57, 68, 20%); + overflow-x: auto; + + @media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + box-shadow: 0 2px 6px rgba(21, 20, 26, 100%); + } + + &::before { + display: none; + } + + .section-main { + width: auto; + height: auto; + margin: 0 auto; + + .main-content { + border-radius: 4px; + color: inherit; + font: menu; + + @media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) { + background-color: #52525E; + } + + &.no-steps { + padding: 16px 0 36px; + } + + .welcome-text { + text-align: start; + margin-block: 10px 12px; + + h1 { + width: auto; + font-weight: 400; + line-height: 1.5; + font-size: 1.7em; + } + + h2 { + color: inherit; + font-size: 1em; + } + } + + .action-buttons { + .primary, + .secondary { + min-width: auto; + } + + .primary { + font-weight: 400; + padding: 4px 16px; + } + + &.additional-cta-container { + align-items: center; + } + } + + .legal-paragraph { + font-size: 0.85em; + line-height: 1.5; + margin-block: 0 20px; + padding-inline: 30px; + text-align: start; + + a { + text-decoration: underline; + } + } + + .brand-logo { + width: 100%; + max-width: 294px; + max-height: 290px; + height: auto; + } + } + + .dismiss-button { + top: 0; + margin: 14px 10px; + } + } + + .section-secondary { + display: none; + } + + .info-text, .link-paragraph { + font-size: 1em; + margin: 10px auto; + line-height: 1.5; + } + + .link-paragraph { + margin-block: 0 10px; + padding-inline: 30px; + text-align: start; + + a { + text-decoration: underline; + } + } +} + +.onboardingContainer.shopping .screen[pos='split'][layout='survey'] { + .main-content { + padding: 12px; + + .main-content-inner { + min-height: auto; + align-items: initial; + + .welcome-text { + align-items: initial; + padding: 0; + margin-top: 0; + + h1, + h2 { + line-height: 20px; + } + + h1 { + font-size: 1em; + font-weight: 590; + margin: 0; + margin-inline-end: 28px; + } + + h2 { + color: inherit; + margin-block: 10px 0; + } + } + + .action-buttons { + .cta-link { + padding: 4px; + margin-block: -4px; + outline-offset: 0; + min-height: revert; + } + } + + .multi-select-container { + color: inherit; + padding: 0; + margin-block: 0 24px; + align-items: center; + overflow: visible; + font-size: 1em; + gap: 12px; + width: 100%; + + #multi-stage-multi-select-label { + color: inherit; + line-height: 20px; + margin-block: -2px 0; + font-size: 1em; + } + + .multi-select-item input { + margin-block: 0; + } + } + + .steps { + height: auto; + margin-bottom: 12px; + } + } + } + + .dismiss-button { + width: 24px; + height: 24px; + min-width: 24px; + min-height: 24px; + margin: 10px; + } +} + +.onboardingContainer.shopping shopping-message-bar { + font: menu; +} |