browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.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 @import url("chrome://global/skin/in-content/info-pages.css");
   6
   7 @media not (prefers-contrast) {
   8 html.private {
   9   --in-content-page-color: white;
  10   --in-content-text-color: white;
  11   --in-content-page-background: #25003e;
  12   --link-color: white;
  13   --link-color-hover: white;
  14   --link-color-active: white;
  15   --in-content-banner-background: #f9f9fe;
  16   --in-content-banner-text-color: #0c0c0d;
  17   --in-content-button-background-hover: rgba(12,12,13,.1);
  18   --in-content-button-background-active: rgba(12,12,13,.15);
  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 center;
  67   background-size: 96px;
  68   display: inline-block;
  69   height: 96px;
  70   width: 96px;
  71 }
  72
  73 .wordmark {
  74   display: inline-block;
  75   background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
  76   background-size: 172px;
  77   margin-inline-start: 15px;
  78   -moz-context-properties: fill;
  79   fill: currentColor;
  80   height: 96px;
  81   width: 172px;
  82 }
  83
  84 .search-inner-wrapper {
  85   display: flex;
  86   height: 48px;
  87   padding: 0 22px;
  88   min-width: 70vw;
  89 }
  90
  91 /* stylelint-disable-next-line media-query-no-invalid */
  92 @media (-moz-bool-pref: "browser.privatebrowsing.felt-privacy-v1") {
  93   .search-inner-wrapper {
  94     height: 52px;
  95     padding: 0;
  96   }
  97 }
  98
  99 .promo-image-large {
 100   margin-inline-end: 6px;
 101   min-width: 160px;
 102 }
 103
 104 .promo-image-small {
 105   display: none;
 106 }
 107
 108 .promo.top {
 109   background: rgba(255, 255, 255, .2);
 110   position: absolute;
 111   top: 0;
 112   left: 0;
 113   right: 0;
 114   border-bottom: 1px solid rgba(255, 255, 255, .3);
 115 }
 116
 117 .promo.top .promo-image-large {
 118   min-width: 100px;
 119   margin-inline: 6px;
 120 }
 121
 122 .promo.top ~ .container {
 123   margin-top: 120px;
 124 }
 125
 126 @media (min-width: 764px) {
 127   .search-inner-wrapper {
 128     min-width: 680px;
 129   }
 130
 131   .promo-image-large {
 132     margin-inline-end: 36px;
 133     min-width: 200px;
 134   }
 135
 136   .promo-image-small {
 137     display: block;
 138   }
 139
 140   .promo.top {
 141     padding: 10px 22%;
 142   }
 143
 144   .promo.top .promo-image-large {
 145     min-width: 120px;
 146   }
 147
 148   .promo.top .vpn-promo {
 149     margin: 10px 0;
 150   }
 151 }
 152
 153 @media (max-height: 780px) {
 154   /* On screens with not enough height we need to push down the content
 155    * to make room for the banner */
 156   .promo.top ~ .container {
 157     margin-top: 140px;
 158   }
 159 }
 160
 161 .search-handoff-button,
 162 .search-handoff-button:active,
 163 .search-handoff-button:enabled:hover:active {
 164   background: #fff var(--newtab-search-icon) 12px center no-repeat;
 165   background-size: 24px;
 166   border: solid 1px rgba(249, 249, 250, 0.2);
 167   border-radius: 3px;
 168   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
 169   cursor: text;
 170   font-size: 15px;
 171   font-weight: normal;
 172   margin: 0;
 173   padding-block: 0;
 174   padding-inline: 46px 48px;
 175   position: relative;
 176   opacity: 1;
 177   width: 100%;
 178   -moz-context-properties: fill;
 179   fill: rgba(12, 12, 13, 0.4);
 180 }
 181
 182 .search-handoff-button.focused:not(.disabled) {
 183   border: solid 1px #0060df;
 184   box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3);
 185 }
 186
 187 .search-handoff-button.disabled {
 188   opacity: 0.5;
 189   box-shadow: none;
 190 }
 191
 192 .search-handoff-button:dir(rtl),
 193 .search-handoff-button:active:dir(rtl),
 194 .search-handoff-button:enabled:hover:active:dir(rtl) {
 195   background-position-x: right 12px;
 196 }
 197
 198 .search-inner-wrapper .search-handoff-button:hover,
 199 .search-inner-wrapper .search-handoff-button:hover:active {
 200   background-color: #fff;
 201   color: inherit;
 202 }
 203
 204 .search-handoff-button.focused:not(.disabled) .fake-caret {
 205   display: block;
 206 }
 207
 208 .fake-editable:focus {
 209   outline: none;
 210   caret-color: transparent;
 211 }
 212
 213 .fake-editable {
 214   border: 0;
 215   height: 100%;
 216   top: 0;
 217   inset-inline-start: 0;
 218   opacity: 0;
 219   padding: 0;
 220   position: absolute;
 221   width: 100%;
 222 }
 223
 224 .fake-textbox {
 225   color: rgb(12, 12, 13);
 226   opacity: 0.54;
 227   text-align: start;
 228 }
 229
 230 @keyframes caret-animation {
 231   to {
 232     visibility: hidden;
 233   }
 234 }
 235
 236 .fake-caret {
 237   animation: caret-animation 1.3s steps(5, start) infinite;
 238   background-color: rgb(12, 12, 13);
 239   display: none;
 240   inset-inline-start: 47px;
 241   height: 17px;
 242   position: absolute;
 243   top: 16px;
 244   width: 1px;
 245 }
 246
 247 @media (prefers-contrast) {
 248   .fake-caret {
 249     background-color: ButtonText;
 250   }
 251 }
 252
 253 /* stylelint-disable-next-line media-query-no-invalid */
 254 @media (-moz-bool-pref: "browser.privatebrowsing.felt-privacy-v1") {
 255   .search-handoff-button,
 256   .search-handoff-button:hover:not(.focused),
 257   .search-handoff-button:active,
 258   .search-handoff-button:enabled:hover:active {
 259     border: 3px solid ButtonText;
 260     border-radius: 6px;
 261     box-shadow: none;
 262
 263     @media not (prefers-contrast) {
 264       border-color: #952bb9;
 265     }
 266   }
 267
 268   .search-handoff-button,
 269   .search-handoff-button:hover:not(.focused),
 270   .search-handoff-button:active,
 271   .search-handoff-button:enabled:hover:active,
 272   .search-inner-wrapper .search-handoff-button:hover,
 273   .search-inner-wrapper .search-handoff-button:hover:active {
 274     background-color: ButtonFace;
 275     background-image: url(chrome://global/skin/icons/search-glass.svg);
 276     background-repeat: no-repeat;
 277     background-size: 16px;
 278     fill: ButtonText;
 279
 280     @media (prefers-contrast) {
 281       border-color: ButtonText;
 282       color: ButtonText;
 283     }
 284
 285     @media not (prefers-contrast) {
 286       background-color: #321c64;
 287       fill: rgb(251, 251, 254);
 288     }
 289   }
 290
 291   .search-handoff-button.focused:not(.disabled) {
 292     border-width: 3px;
 293
 294     @media (prefers-contrast) {
 295       outline: 2px solid SelectedItem;
 296     }
 297   }
 298
 299   .fake-textbox {
 300     color: ButtonText;
 301     font-size: 0.87em;
 302     opacity: 1;
 303
 304     @media not (prefers-contrast) {
 305       color: #fbfbfe;
 306     }
 307   }
 308
 309   @media not (prefers-contrast) {
 310     .fake-caret {
 311       background-color: #fbfbfe;
 312     }
 313   }
 314 }
 315
 316 .search-banner {
 317   width: 100%;
 318   background-color: var(--in-content-banner-background);
 319   color: var(--in-content-banner-text-color);
 320 }
 321
 322 .banner-body {
 323   margin: auto;
 324   width: max-content;
 325   background-image: url("chrome://global/skin/icons/settings.svg");
 326   background-position: left 0 top 50px;
 327   background-repeat: no-repeat;
 328   background-size: 32px;
 329   letter-spacing: -.2px;
 330   padding: 50px 0;
 331   padding-inline-start: 44px;
 332 }
 333
 334 .banner-body:dir(rtl) {
 335   background-position-x: right;
 336 }
 337
 338 .banner-body h1 {
 339   font-size: 18px;
 340   font-weight: bold;
 341   color: var(--in-content-banner-text-color);
 342   line-height: 1em;
 343   margin: 7px 0;
 344 }
 345
 346 .banner-body p {
 347   font-size: 15px;
 348   line-height: 1em;
 349   margin: 4px 0;
 350 }
 351
 352 .info {
 353   margin-top: 64px;
 354   background-color: rgba(0, 0, 0, 0.2);
 355   background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
 356   background-position: left 32px top 20px;
 357   background-repeat: no-repeat;
 358   background-size: 32px;
 359   border: 1px solid transparent;
 360   border-radius: 6px;
 361   letter-spacing: -0.2px;
 362   padding: 20px;
 363   padding-inline-start: 76px;
 364 }
 365
 366 .info:dir(rtl) {
 367   background-position-x: right 32px;
 368 }
 369
 370 .info h1,
 371 .promo h1 {
 372   font-size: 18px;
 373   font-weight: bold;
 374   line-height: 28px;
 375 }
 376
 377 .info p {
 378   margin-top: 0;
 379   line-height: 1.67;
 380 }
 381
 382 .info #info-title:not([hidden]) + p {
 383   margin-top: 15px;
 384 }
 385
 386 /* stylelint-disable-next-line media-query-no-invalid */
 387 @media (-moz-bool-pref: "browser.privatebrowsing.felt-privacy-v1") {
 388   .info-border {
 389     border-radius: 8px;
 390     margin-top: 64px;
 391     padding: 17px;
 392
 393     @media not (prefers-contrast) {
 394       box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.20);
 395       background: rgba(149, 43, 185, 0.5);
 396     }
 397   }
 398
 399   .info {
 400     background-image: none;
 401     border-radius: 6px;
 402     font-size: 0.93em;
 403     margin: 0;
 404     padding-inline-start: 20px;
 405     padding-block-end: 25px;
 406
 407     @media not (prefers-contrast) {
 408       background-color: #321c64;
 409       box-shadow: 0 2px 6px 0 rgba(58, 57, 68, 0.20);
 410     }
 411   }
 412
 413   #info-title:not([hidden]) + #info-body {
 414     margin-block: 0;
 415   }
 416
 417   #info-title {
 418     font-size: 1em;
 419     margin-block: 0;
 420   }
 421 }
 422
 423 .search-banner-close-button {
 424   float: inline-end;
 425   /* min-width and min-height override values set on button elements. */
 426   min-width: 28px;
 427   min-height: 28px;
 428   /* Forcing height and line-height ensure the button hover is displayed correctly
 429      as a square box (and focus box). No text gets displayed here so that's ok. */
 430   height: 28px;
 431   line-height: 0;
 432   margin: 16px;
 433   padding: 0;
 434   background-color: inherit;
 435   border: 0;
 436 }
 437
 438 .search-banner-close-image {
 439   -moz-context-properties: fill;
 440   fill: currentColor;
 441   width: 22px;
 442 }
 443
 444 .promo {
 445   text-align: center;
 446   align-items: center;
 447 }
 448
 449 .promo-visible {
 450   display: flex;
 451   border: 1px solid transparent;
 452   border-radius: 6px;
 453   background-color: rgba(0, 0, 0, 0.2);
 454 }
 455
 456 .promo-dismiss {
 457   padding: 10px;
 458   min-width: 28px;
 459   min-height: 28px;
 460   display: inline flow-root;
 461   background: url("chrome://global/skin/icons/close.svg") center no-repeat;
 462   cursor: pointer;
 463   -moz-context-properties: fill;
 464   fill: currentColor;
 465   position: relative;
 466   align-self: start;
 467   top: -11px;
 468   inset-inline-end: -11px;
 469
 470   @media not (prefers-contrast) {
 471     opacity: 0.6;
 472
 473     &:hover {
 474       background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
 475     }
 476
 477     &:hover:active {
 478       background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
 479     }
 480   }
 481 }
 482
 483 .promo-content {
 484   width: 100%;
 485 }
 486
 487 .promo-image-large img {
 488   width: 100%;
 489 }
 490
 491 .promo-cta {
 492   display: flex;
 493   justify-content: space-between;
 494   align-items: center;
 495 }
 496
 497 /* The colors for .promo-cta .primary must be kept in sync with the dark mode
 498    primary button colors from common-shared.cs */
 499 .promo-cta .primary {
 500   padding: 0.54em 1.15em;
 501   margin: 8px 0;
 502   font-weight: 600;
 503   cursor: pointer;
 504   background-color: rgb(0,221,255);
 505   color: rgb(43,42,51);
 506 }
 507
 508 .promo-cta .primary:focus-visible {
 509   outline-color: rgb(0,221,255);
 510 }
 511
 512 .promo-cta .primary:hover {
 513   background-color: rgb(128,235,255) !important;
 514   color: rgb(43,42,51) !important;
 515 }
 516
 517 .promo-cta .primary:hover:active {
 518   background-color: rgb(170,242,255) !important;
 519   color: rgb(43,42,51) !important;
 520 }
 521
 522 @media (prefers-contrast) {
 523   .promo-cta .primary {
 524     background-color: ButtonText;
 525     color: ButtonFace;
 526     border-color: ButtonFace;
 527   }
 528
 529   .promo-cta .primary:focus-visible {
 530     outline-color: -moz-DialogText;
 531   }
 532
 533   .promo-cta .primary:hover {
 534     background-color: SelectedItem !important;
 535     color: SelectedItemText !important;
 536     border-color: SelectedItemText;
 537   }
 538
 539   .promo-cta .primary:hover:active {
 540     background-color: SelectedItemText !important;
 541     color: SelectedItem !important;
 542     border-color: SelectedItem;
 543   }
 544 }
 545
 546 .promo.bottom .promo-cta {
 547   display: unset;
 548 }
 549
 550 .promo.bottom h1 {
 551   margin-bottom: 1em;
 552 }
 553
 554 .promo a {
 555   color: inherit;
 556   text-decoration: underline;
 557   flex: 1;
 558 }
 559
 560 .promo.top a,
 561 .promo.below-search a {
 562   flex: unset;
 563 }
 564
 565 .promo.top,
 566 .promo.below-search {
 567   text-align: start;
 568 }
 569
 570 .promo.below-search {
 571   padding: 22px;
 572   margin-top: 25px;
 573
 574   #promo-header {
 575     margin-block: 0 1em;
 576   }
 577
 578   #private-browsing-promo-text {
 579     margin-block: 0;
 580   }
 581
 582   #private-browsing-promo-link:not(.text-link) {
 583     margin-block: 1.5em 0;
 584   }
 585 }
 586
 587 .promo.bottom {
 588   margin-top: 30px;
 589 }
 590
 591 .promo.bottom .promo-image-small {
 592   margin-top: 40px;
 593 }
 594
 595 .promo.bottom .promo-image-small img {
 596   height: 40px;
 597 }
 598
 599 .promo.top > .promo-content {
 600   padding: 10px 6px;
 601 }
 602
 603 .promo-link {
 604   margin: 0;
 605 }
 606
 607 /* stylelint-disable-next-line media-query-no-invalid */
 608 @media (-moz-bool-pref: "browser.privatebrowsing.felt-privacy-v1") {
 609   .promo.below-search.promo-visible {
 610     margin-block: 0 25px;
 611
 612     @media not (prefers-contrast) {
 613       background-color: #321c64;
 614     }
 615   }
 616
 617   @media not (prefers-contrast) {
 618     html.private {
 619       background: linear-gradient(45deg, #722291 0%, #45278D 50%, #393473 100%);
 620     }
 621   }
 622 }