browser/components/urlbar/content/quicksuggestOnboarding.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /**
   6  * When making changes, follow the example of the AboutWelcome messaging surface for font sizes, line heights,
   7  * etc. See: https://searchfox.org/mozilla-central/source/browser/components/aboutwelcome/content-src/aboutwelcome.scss
   8  */
   9
  10 :root {
  11   --introduction-magglass-logo-height: 128px;
  12   --introduction-firefox-logo-height: 72px;
  13   --introduction-image-height: 224px;
  14   --main-magglass-logo-height: 64px;
  15   --main-firefox-logo-height: 50px;
  16   --x-large-margin: 40px;
  17   --large-margin: 24px;
  18   --large-margin-const: 24px;
  19   --small-margin: 16px;
  20   --small-margin-const: 16px;
  21   --x-small-margin-const: 8px;
  22   --section-vertical-padding: 32px;
  23   --section-horizontal-padding: 64px;
  24 }
  25
  26 body.compact {
  27   --introduction-image-height: 183px;
  28   --main-magglass-logo-height: 48px;
  29   --main-firefox-logo-height: 32px;
  30   --x-large-margin: 20px;
  31   --large-margin: 12px;
  32   --small-margin: 8px;
  33   --section-vertical-padding: 16px;
  34   --section-horizontal-padding: 32px;
  35
  36   /* 15px is the non-compact font-size. */
  37   font-size: 13px;
  38 }
  39
  40 body,
  41 section {
  42   width: 536px;
  43 }
  44
  45 section {
  46   display: flex;
  47   align-items: stretch;
  48   justify-content: center;
  49   flex-direction: column;
  50   text-align: center;
  51   padding: var(--section-vertical-padding) var(--section-horizontal-padding);
  52   /* This is the largest approximate natural height of the main section across
  53      platforms and dialog variations, erring on the side of being slightly
  54      larger than necessary. If you change this, also update COMPACT_MODE_HEIGHT
  55      in the JS. */
  56   min-height: 650px;
  57 }
  58
  59 body.compact section {
  60   /* This is the largest approximate natural height of the main section across
  61      platforms and dialog variations in compact mode, erring on the side of
  62      being slightly larger than necessary. */
  63   min-height: 510px;
  64 }
  65
  66 a {
  67   cursor: pointer;
  68   font-weight: normal;
  69 }
  70
  71 .title {
  72   font-size: 1.6em;
  73   font-weight: 600;
  74   line-height: 1.5;
  75   white-space: pre-line;
  76 }
  77
  78 .logo {
  79   background-repeat: no-repeat;
  80   background-position: center;
  81   background-size: contain;
  82   border: none;
  83 }
  84
  85 .description-section {
  86   /* The effective visual margin between the description and first option should
  87      be --large-margin-const. Each child in the description has a bottom margin
  88      of --small-margin, so subtract it from --large-margin-const. */
  89   margin-block: 0 calc(var(--large-margin-const) - var(--small-margin));
  90 }
  91
  92 .description {
  93   font-size: 1.1em;
  94   font-weight: 400;
  95   line-height: 1.6;
  96   margin-block: 0 var(--small-margin);
  97   white-space: pre-line;
  98 }
  99
 100 .privacy-first {
 101   font-size: 1.1em;
 102   font-weight: 700;
 103   margin-block: 0 var(--small-margin);
 104 }
 105
 106 .pager > span {
 107   display: inline-block;
 108   border-radius: 3px;
 109   width: 6px;
 110   height: 6px;
 111   background-color: var(--in-content-border-color);
 112   margin-inline: 4px;
 113 }
 114
 115 .pager > .current {
 116   background-color: var(--in-content-primary-button-background);
 117 }
 118
 119 #introduction-section .logo {
 120   background-image: url("quicksuggestOnboarding_magglass.svg");
 121   height: var(--introduction-magglass-logo-height);
 122   margin-block-end: var(--large-margin);
 123 }
 124
 125 #introduction-section .logo.firefox {
 126   background-image: url("chrome://branding/content/about-logo.svg");
 127   height: var(--introduction-firefox-logo-height);
 128 }
 129
 130 @media (prefers-reduced-motion: no-preference) {
 131   #introduction-section .logo {
 132     background-image: url("quicksuggestOnboarding_magglass_animation.svg");
 133   }
 134 }
 135
 136 #introduction-section .title {
 137   margin-block-end: var(--x-large-margin);
 138 }
 139
 140 #introduction-image {
 141   height: var(--introduction-image-height);
 142   background-image: url("suggest-example.svg");
 143   background-size: contain;
 144   background-repeat: no-repeat;
 145   background-position: center;
 146   margin-block: var(--large-margin);
 147 }
 148
 149 /* fx100 layout */
 150 #introduction-section.layout-100 .logo {
 151   height: var(--main-firefox-logo-height);
 152 }
 153
 154 #introduction-section.layout-100 .title {
 155   margin-block: 0 var(--small-margin);
 156 }
 157
 158 #introduction-section:not(.layout-100) .description-section {
 159   display: none;
 160 }
 161
 162 #onboardingClose {
 163   position: absolute;
 164   top: 0;
 165   inset-inline-end: 0;
 166   margin: 16px;
 167   padding: 0;
 168   line-height: 0;
 169   min-width: 20px;
 170   min-height: 20px;
 171 }
 172
 173 #onboardingClose img {
 174   -moz-context-properties: fill;
 175   fill: currentColor;
 176 }
 177
 178 #main-section:not(.active) {
 179   display: none;
 180 }
 181
 182 #main-section .logo {
 183   background-image: url("quicksuggestOnboarding_magglass.svg");
 184   height: var(--main-magglass-logo-height);
 185   margin-block-end: var(--large-margin);
 186 }
 187
 188 #main-section .logo.firefox {
 189   background-image: url("chrome://branding/content/about-logo.svg");
 190   height: var(--main-firefox-logo-height);
 191 }
 192
 193 #main-section .title {
 194   margin-block: 0 var(--small-margin);
 195 }
 196
 197 #main-section .privacy-first:not(.active) {
 198   display: none;
 199 }
 200
 201 #main-section .option {
 202   border-radius: 4px;
 203   border: 2px solid var(--in-content-box-info-background);
 204   display: flex;
 205   text-align: start;
 206   /* Use --small-margin-const for the horizontal padding to make the option's
 207      horizontal padding larger than the vertical padding in compact mode. The
 208      radio button and text are too close to the left and right edges of the
 209      option's border otherwise. */
 210   padding: var(--small-margin) var(--small-margin-const);
 211   flex-direction: row;
 212 }
 213
 214 #main-section .option.selected {
 215   border-color: var(--in-content-primary-button-background);
 216 }
 217
 218 #main-section .option.accept {
 219   margin-block-end: var(--small-margin);
 220 }
 221
 222 #main-section .option.reject {
 223   margin-block-end: var(--large-margin-const);
 224 }
 225
 226 #main-section .option > label {
 227   /* Make the whole option area selectable for the radio button. 22px is the
 228      width of the radio button and its inline margin. */
 229   padding-block: var(--small-margin);
 230   padding-inline-start: calc(22px + var(--small-margin-const));
 231   padding-inline-end: var(--small-margin-const);
 232   margin-block: calc(-1 * var(--small-margin));
 233   margin-inline-start: calc(-1 * (22px + var(--small-margin-const)));
 234   margin-inline-end: calc(-1 * var(--small-margin-const));
 235 }
 236
 237 body:not(.compact) #main-section .option > input {
 238   /* Vertically align the radio button with the .option-label. */
 239   margin-block-start: 0.25em;
 240 }
 241
 242 #main-section .option-label {
 243   font-size: 1.1em;
 244   font-weight: 600;
 245   margin-block-end: 2px;
 246 }
 247
 248 #main-section .option-description {
 249   font-size: 1em;
 250 }
 251
 252 .buttonBox {
 253   display: flex;
 254   flex-direction: column;
 255   align-items: center;
 256 }
 257
 258 button {
 259   margin-block-end: var(--large-margin);
 260 }
 261
 262 #onboardingSkipLink {
 263   margin-block-end: var(--x-small-margin-const);
 264 }
 265
 266 /* transition from introduction to main */
 267 #introduction-section.inactive {
 268   /* Avoid including this section size */
 269   position: fixed;
 270   pointer-events: none;
 271   animation: fadeout 0.3s forwards;
 272 }
 273
 274 #main-section.active {
 275   animation: fadein 0.3s forwards;
 276 }
 277
 278 @keyframes fadeout {
 279   0% {
 280     opacity: 1;
 281   }
 282   100% {
 283     visibility: hidden;
 284     opacity: 0;
 285   }
 286 }
 287
 288 @keyframes fadein {
 289   0% {
 290     opacity: 0;
 291   }
 292   100% {
 293     pointer-events: initial;
 294     opacity: 1;
 295   }
 296 }
 297
 298 /* Show main only without transition */
 299 body.skip-introduction #introduction-section.inactive {
 300   animation: none;
 301   display: none;
 302 }
 303
 304 body.skip-introduction #main-section.active {
 305   animation: none;
 306   pointer-events: initial;
 307 }
 308
 309 body.skip-introduction .pager {
 310   display: none;
 311 }