aboutPrivateBrowsing.css (11018B)
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 @import url("chrome://global/skin/in-content/info-pages.css"); 6 7 @media not (prefers-contrast) { 8 html.private { 9 --background-color-canvas: #25003e; 10 --link-color: white; 11 --link-color-hover: white; 12 --link-color-active: white; 13 --in-content-banner-background: #f9f9fe; 14 --in-content-banner-text-color: #0c0c0d; 15 --button-background-color-hover: rgba(12, 12, 13, 0.1); 16 --button-background-color-active: rgba(12, 12, 13, 0.15); 17 18 color-scheme: dark; 19 } 20 } 21 22 /** 23 * When the showBanner class is applied, the banner is displayed at the top 24 * of the page, and we need to adjust the padding, so that the banner is 25 * spread across the full page width. 26 */ 27 body.showBanner { 28 padding: 0 0 40px; 29 min-height: 0; 30 } 31 32 .showBanner > .showPrivate { 33 padding: 40px 48px 0; 34 } 35 36 a:link, 37 .text-link { 38 color: inherit; 39 text-decoration: underline; 40 41 &:hover { 42 color: inherit; 43 44 &:active { 45 text-decoration: none; 46 } 47 } 48 } 49 50 .container { 51 max-width: 768px; 52 } 53 54 p { 55 line-height: 1.5em; 56 } 57 58 .logo-and-wordmark { 59 align-items: center; 60 display: flex; 61 justify-content: center; 62 margin-bottom: 50px; 63 } 64 65 .logo { 66 background: image-set(url("chrome://branding/content/about-logo-private.png"), url("chrome://branding/content/about-logo-private@2x.png") 2x) no-repeat center 67 center; 68 background-size: 96px; 69 display: inline-block; 70 height: 96px; 71 width: 96px; 72 } 73 74 .wordmark { 75 display: inline-block; 76 background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; 77 background-size: 172px; 78 margin-inline-start: 15px; 79 -moz-context-properties: fill; 80 fill: currentColor; 81 height: 96px; 82 width: 172px; 83 } 84 85 .search-inner-wrapper { 86 display: flex; 87 height: var(--size-item-xlarge); 88 padding: 0 22px; 89 min-width: 70vw; 90 } 91 92 /* stylelint-disable-next-line media-query-no-invalid */ 93 @media -moz-pref("browser.privatebrowsing.felt-privacy-v1") { 94 .search-inner-wrapper { 95 height: 52px; 96 padding: 0; 97 } 98 } 99 100 .promo-image-large { 101 margin-inline-end: 6px; 102 min-width: 160px; 103 } 104 105 .promo-image-small { 106 display: none; 107 } 108 109 .promo.top { 110 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 111 background: var(--color-white-alpha-20); 112 position: absolute; 113 top: 0; 114 left: 0; 115 right: 0; 116 border-bottom: 1px solid rgba(255, 255, 255, 0.3); 117 } 118 119 .promo.top .promo-image-large { 120 min-width: 100px; 121 margin-inline: 6px; 122 } 123 124 .promo.top ~ .container { 125 margin-top: 120px; 126 } 127 128 @media (min-width: 764px) { 129 .search-inner-wrapper { 130 min-width: 680px; 131 } 132 133 .promo-image-large { 134 margin-inline-end: 36px; 135 min-width: 200px; 136 } 137 138 .promo-image-small { 139 display: block; 140 } 141 142 .promo.top { 143 padding: 10px 22%; 144 } 145 146 .promo.top .promo-image-large { 147 min-width: 120px; 148 } 149 150 .promo.top .vpn-promo { 151 margin: 10px 0; 152 } 153 } 154 155 @media (max-height: 780px) { 156 /* On screens with not enough height we need to push down the content 157 * to make room for the banner */ 158 .promo.top ~ .container { 159 margin-top: 140px; 160 } 161 } 162 163 content-search-handoff-ui { 164 --content-search-handoff-ui-background-color: white; 165 --content-search-handoff-ui-color: rgb(12, 12, 13); 166 --content-search-handoff-ui-fill: rgba(12, 12, 13, 0.4); 167 --content-search-handoff-ui-caret-color: rgb(12, 12, 13); 168 --content-search-handoff-ui-fakefocus-border-color: #0060df; 169 --content-search-handoff-ui-fakefocus-box-shadow-inner: #0060df; 170 --content-search-handoff-ui-fakefocus-box-shadow-outer: rgba(0, 96, 223, 0.3); 171 172 /* stylelint-disable-next-line media-query-no-invalid */ 173 @media -moz-pref("browser.privatebrowsing.felt-privacy-v1") { 174 --content-search-handoff-ui-background-color: #321c64; 175 --content-search-handoff-ui-color: #fbfbfe; 176 --content-search-handoff-ui-fill: rgb(251, 251, 254); 177 --content-search-handoff-ui-caret-color: #fbfbfe; 178 --content-search-handoff-ui-border-width: 3px; 179 --content-search-handoff-ui-unfocused-border-color: rgb(149, 43, 185); 180 --content-search-handoff-ui-fakefocus-border-color: #0060df; 181 --content-search-handoff-ui-fakefocus-box-shadow-inner: #0060df; 182 --content-search-handoff-ui-fakefocus-box-shadow-outer: rgba(0, 96, 223, 0.3); 183 } 184 185 @media (forced-colors) { 186 --content-search-handoff-ui-background-color: ButtonFace; 187 --content-search-handoff-ui-color: ButtonText; 188 --content-search-handoff-ui-fill: ButtonText; 189 --content-search-handoff-ui-caret-color: ButtonText; 190 --content-search-handoff-ui-fakefocus-border-color: ButtonText; 191 } 192 } 193 194 .search-banner { 195 width: 100%; 196 background-color: var(--in-content-banner-background); 197 color: var(--in-content-banner-text-color); 198 } 199 200 .banner-body { 201 margin: auto; 202 width: max-content; 203 background-image: url("chrome://global/skin/icons/settings.svg"); 204 background-position: left 0 top 50px; 205 background-repeat: no-repeat; 206 background-size: 32px; 207 letter-spacing: -0.2px; 208 padding: 50px 0; 209 padding-inline-start: 44px; 210 } 211 212 .banner-body:dir(rtl) { 213 background-position-x: right; 214 } 215 216 .banner-body h1 { 217 font-size: 18px; 218 font-weight: var(--font-weight-bold); 219 color: var(--in-content-banner-text-color); 220 line-height: 1em; 221 margin: 7px 0; 222 } 223 224 .banner-body p { 225 font-size: 15px; 226 line-height: 1em; 227 margin: 4px 0; 228 } 229 230 .info { 231 margin-top: 64px; 232 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 233 background-color: var(--color-black-alpha-20); 234 background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg"); 235 background-position: left 32px top 20px; 236 background-repeat: no-repeat; 237 background-size: 32px; 238 border: 1px solid transparent; 239 border-radius: var(--border-radius-small); 240 letter-spacing: -0.2px; 241 padding: 20px; 242 padding-inline-start: 76px; 243 } 244 245 .info:dir(rtl) { 246 background-position-x: right 32px; 247 } 248 249 .info h1, 250 .promo h1 { 251 font-size: 18px; 252 font-weight: var(--font-weight-bold); 253 line-height: 28px; 254 } 255 256 .info p { 257 margin-top: 0; 258 line-height: 1.67; 259 } 260 261 .info #info-title:not([hidden]) + p { 262 margin-top: 15px; 263 } 264 265 /* stylelint-disable-next-line media-query-no-invalid */ 266 @media -moz-pref("browser.privatebrowsing.felt-privacy-v1") { 267 .info-border { 268 border-radius: var(--border-radius-medium); 269 margin-top: 64px; 270 padding: 17px; 271 272 @media not (prefers-contrast) { 273 box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.2); 274 background: rgba(149, 43, 185, 0.5); 275 } 276 } 277 278 .info { 279 background-image: none; 280 border-radius: var(--border-radius-small); 281 font-size: 0.93em; 282 margin: 0; 283 padding-inline-start: 20px; 284 padding-block-end: 25px; 285 286 @media not (prefers-contrast) { 287 background-color: #321c64; 288 box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.2); 289 } 290 } 291 292 #info-title:not([hidden]) + #info-body { 293 margin-block: 0; 294 } 295 296 #info-title { 297 font-size: 1em; 298 margin-block: 0; 299 } 300 } 301 302 .search-banner-close-button { 303 float: inline-end; 304 /* min-width and min-height override values set on button elements. */ 305 min-width: 28px; 306 min-height: 28px; 307 /* Forcing height and line-height ensure the button hover is displayed correctly 308 as a square box (and focus box). No text gets displayed here so that's ok. */ 309 height: 28px; 310 line-height: 0; 311 margin: 16px; 312 padding: 0; 313 background-color: inherit; 314 border: 0; 315 } 316 317 .search-banner-close-image { 318 -moz-context-properties: fill; 319 fill: currentColor; 320 width: 22px; 321 } 322 323 .promo { 324 text-align: center; 325 align-items: center; 326 } 327 328 .promo-visible { 329 display: flex; 330 border: 1px solid transparent; 331 border-radius: var(--border-radius-small); 332 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 333 background-color: var(--color-black-alpha-20); 334 } 335 336 .promo-dismiss { 337 padding: 10px; 338 min-width: 28px; 339 min-height: 28px; 340 display: inline flow-root; 341 background: url("chrome://global/skin/icons/close.svg") center no-repeat; 342 cursor: pointer; 343 -moz-context-properties: fill; 344 fill: currentColor; 345 position: relative; 346 align-self: start; 347 top: -11px; 348 inset-inline-end: -11px; 349 350 @media not (prefers-contrast) { 351 opacity: 0.6; 352 353 &:hover { 354 background-color: color-mix(in srgb, currentColor 10%, transparent) !important; 355 } 356 357 &:hover:active { 358 background-color: color-mix(in srgb, currentColor 20%, transparent) !important; 359 } 360 } 361 } 362 363 .promo-content { 364 width: 100%; 365 } 366 367 .promo-image-large img { 368 width: 100%; 369 } 370 371 .promo-cta { 372 display: flex; 373 justify-content: space-between; 374 align-items: center; 375 } 376 377 /* The colors for .promo-cta .primary must be kept in sync with the dark mode 378 primary button colors from common-shared.cs */ 379 .promo-cta .primary { 380 padding: 0.54em 1.15em; 381 margin: 8px 0; 382 font-weight: var(--font-weight-semibold); 383 cursor: pointer; 384 background-color: rgb(0, 221, 255); 385 color: rgb(43, 42, 51); 386 } 387 388 .promo-cta .primary:focus-visible { 389 outline-color: rgb(0, 221, 255); 390 } 391 392 .promo-cta .primary:hover { 393 background-color: rgb(128, 235, 255) !important; 394 color: rgb(43, 42, 51) !important; 395 } 396 397 .promo-cta .primary:hover:active { 398 background-color: rgb(170, 242, 255) !important; 399 color: rgb(43, 42, 51) !important; 400 } 401 402 @media (prefers-contrast) { 403 .promo-cta .primary { 404 background-color: ButtonText; 405 color: ButtonFace; 406 border-color: ButtonFace; 407 } 408 409 .promo-cta .primary:focus-visible { 410 outline-color: -moz-DialogText; 411 } 412 413 .promo-cta .primary:hover { 414 background-color: SelectedItem !important; 415 color: SelectedItemText !important; 416 border-color: SelectedItemText; 417 } 418 419 .promo-cta .primary:hover:active { 420 background-color: SelectedItemText !important; 421 color: SelectedItem !important; 422 border-color: SelectedItem; 423 } 424 } 425 426 .promo.bottom .promo-cta { 427 display: unset; 428 } 429 430 .promo.bottom h1 { 431 margin-bottom: 1em; 432 } 433 434 .promo a { 435 color: inherit; 436 text-decoration: underline; 437 flex: 1; 438 } 439 440 .promo.top a, 441 .promo.below-search a { 442 flex: unset; 443 } 444 445 .promo.top, 446 .promo.below-search { 447 text-align: start; 448 } 449 450 .promo.below-search { 451 padding: 22px; 452 margin-top: 25px; 453 454 #promo-header { 455 margin-block: 0 1em; 456 } 457 458 #private-browsing-promo-text { 459 margin-block: 0; 460 } 461 462 #private-browsing-promo-link:not(.text-link) { 463 margin-block: 1.5em 0; 464 } 465 } 466 467 .promo.bottom { 468 margin-top: 30px; 469 } 470 471 .promo.bottom .promo-image-small { 472 margin-top: 40px; 473 } 474 475 .promo.bottom .promo-image-small img { 476 height: 40px; 477 } 478 479 .promo.top > .promo-content { 480 padding: 10px 6px; 481 } 482 483 .promo-link { 484 margin: 0; 485 } 486 487 /* stylelint-disable-next-line media-query-no-invalid */ 488 @media -moz-pref("browser.privatebrowsing.felt-privacy-v1") { 489 .promo.below-search.promo-visible { 490 margin-block: 0 25px; 491 492 @media not (prefers-contrast) { 493 background-color: #321c64; 494 } 495 } 496 497 @media not (prefers-contrast) { 498 html.private { 499 background: linear-gradient(45deg, #722291 0%, #45278d 50%, #393473 100%); 500 } 501 } 502 }