diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /browser/components/urlbar/content/quicksuggestOnboarding.css | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/urlbar/content/quicksuggestOnboarding.css')
-rw-r--r-- | browser/components/urlbar/content/quicksuggestOnboarding.css | 311 |
1 files changed, 311 insertions, 0 deletions
diff --git a/browser/components/urlbar/content/quicksuggestOnboarding.css b/browser/components/urlbar/content/quicksuggestOnboarding.css new file mode 100644 index 0000000000..6ed8454398 --- /dev/null +++ b/browser/components/urlbar/content/quicksuggestOnboarding.css @@ -0,0 +1,311 @@ +/* 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/. */ + +/** + * When making changes, follow the example of the AboutWelcome messaging surface for font sizes, line heights, + * etc. See: https://searchfox.org/mozilla-central/source/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss + */ + +:root { + --introduction-magglass-logo-height: 128px; + --introduction-firefox-logo-height: 72px; + --introduction-image-height: 224px; + --main-magglass-logo-height: 64px; + --main-firefox-logo-height: 50px; + --x-large-margin: 40px; + --large-margin: 24px; + --large-margin-const: 24px; + --small-margin: 16px; + --small-margin-const: 16px; + --x-small-margin-const: 8px; + --section-vertical-padding: 32px; + --section-horizontal-padding: 64px; +} + +body.compact { + --introduction-image-height: 183px; + --main-magglass-logo-height: 48px; + --main-firefox-logo-height: 32px; + --x-large-margin: 20px; + --large-margin: 12px; + --small-margin: 8px; + --section-vertical-padding: 16px; + --section-horizontal-padding: 32px; + + /* 15px is the non-compact font-size. */ + font-size: 13px; +} + +body, +section { + width: 536px; +} + +section { + display: flex; + align-items: stretch; + justify-content: center; + flex-direction: column; + text-align: center; + padding: var(--section-vertical-padding) var(--section-horizontal-padding); + /* This is the largest approximate natural height of the main section across + platforms and dialog variations, erring on the side of being slightly + larger than necessary. If you change this, also update COMPACT_MODE_HEIGHT + in the JS. */ + min-height: 650px; +} + +body.compact section { + /* This is the largest approximate natural height of the main section across + platforms and dialog variations in compact mode, erring on the side of + being slightly larger than necessary. */ + min-height: 510px; +} + +a { + cursor: pointer; + font-weight: normal; +} + +.title { + font-size: 1.6em; + font-weight: 600; + line-height: 1.5; + white-space: pre-line; +} + +.logo { + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: none; +} + +.description-section { + /* The effective visual margin between the description and first option should + be --large-margin-const. Each child in the description has a bottom margin + of --small-margin, so subtract it from --large-margin-const. */ + margin-block: 0 calc(var(--large-margin-const) - var(--small-margin)); +} + +.description { + font-size: 1.1em; + font-weight: 400; + line-height: 1.6; + margin-block: 0 var(--small-margin); + white-space: pre-line; +} + +.privacy-first { + font-size: 1.1em; + font-weight: 700; + margin-block: 0 var(--small-margin); +} + +.pager > span { + display: inline-block; + border-radius: 3px; + width: 6px; + height: 6px; + background-color: var(--in-content-border-color); + margin-inline: 4px; +} + +.pager > .current { + background-color: var(--in-content-primary-button-background); +} + +#introduction-section .logo { + background-image: url("quicksuggestOnboarding_magglass.svg"); + height: var(--introduction-magglass-logo-height); + margin-block-end: var(--large-margin); +} + +#introduction-section .logo.firefox { + background-image: url("chrome://branding/content/about-logo.svg"); + height: var(--introduction-firefox-logo-height); +} + +@media (prefers-reduced-motion: no-preference) { + #introduction-section .logo { + background-image: url("quicksuggestOnboarding_magglass_animation.svg"); + } +} + +#introduction-section .title { + margin-block-end: var(--x-large-margin); +} + +#introduction-image { + height: var(--introduction-image-height); + background-image: url("suggest-example.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin-block: var(--large-margin); +} + +/* fx100 layout */ +#introduction-section.layout-100 .logo { + height: var(--main-firefox-logo-height); +} + +#introduction-section.layout-100 .title { + margin-block: 0 var(--small-margin); +} + +#introduction-section:not(.layout-100) .description-section { + display: none; +} + +#onboardingClose { + position: absolute; + top: 0; + inset-inline-end: 0; + margin: 16px; + padding: 0; + line-height: 0; + min-width: 20px; + min-height: 20px; +} + +#onboardingClose img { + -moz-context-properties: fill; + fill: currentColor; +} + +#main-section:not(.active) { + display: none; +} + +#main-section .logo { + background-image: url("quicksuggestOnboarding_magglass.svg"); + height: var(--main-magglass-logo-height); + margin-block-end: var(--large-margin); +} + +#main-section .logo.firefox { + background-image: url("chrome://branding/content/about-logo.svg"); + height: var(--main-firefox-logo-height); +} + +#main-section .title { + margin-block: 0 var(--small-margin); +} + +#main-section .privacy-first:not(.active) { + display: none; +} + +#main-section .option { + border-radius: 4px; + border: 2px solid var(--in-content-box-info-background); + display: flex; + text-align: start; + /* Use --small-margin-const for the horizontal padding to make the option's + horizontal padding larger than the vertical padding in compact mode. The + radio button and text are too close to the left and right edges of the + option's border otherwise. */ + padding: var(--small-margin) var(--small-margin-const); + flex-direction: row; +} + +#main-section .option.selected { + border-color: var(--in-content-primary-button-background); +} + +#main-section .option.accept { + margin-block-end: var(--small-margin); +} + +#main-section .option.reject { + margin-block-end: var(--large-margin-const); +} + +#main-section .option > label { + /* Make the whole option area selectable for the radio button. 22px is the + width of the radio button and its inline margin. */ + padding-block: var(--small-margin); + padding-inline-start: calc(22px + var(--small-margin-const)); + padding-inline-end: var(--small-margin-const); + margin-block: calc(-1 * var(--small-margin)); + margin-inline-start: calc(-1 * (22px + var(--small-margin-const))); + margin-inline-end: calc(-1 * var(--small-margin-const)); +} + +body:not(.compact) #main-section .option > input { + /* Vertically align the radio button with the .option-label. */ + margin-block-start: 0.25em; +} + +#main-section .option-label { + font-size: 1.1em; + font-weight: 600; + margin-block-end: 2px; +} + +#main-section .option-description { + font-size: 1em; +} + +.buttonBox { + display: flex; + flex-direction: column; + align-items: center; +} + +button { + margin-block-end: var(--large-margin); +} + +#onboardingSkipLink { + margin-block-end: var(--x-small-margin-const); +} + +/* transition from introduction to main */ +#introduction-section.inactive { + /* Avoid including this section size */ + position: fixed; + pointer-events: none; + animation: fadeout 0.3s forwards; +} + +#main-section.active { + animation: fadein 0.3s forwards; +} + +@keyframes fadeout { + 0% { + opacity: 1; + } + 100% { + visibility: hidden; + opacity: 0; + } +} + +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + pointer-events: initial; + opacity: 1; + } +} + +/* Show main only without transition */ +body.skip-introduction #introduction-section.inactive { + animation: none; + display: none; +} + +body.skip-introduction #main-section.active { + animation: none; + pointer-events: initial; +} + +body.skip-introduction .pager { + display: none; +} |