protections.css (25673B)
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 :root { 6 --card-padding: 24px; 7 --exit-icon-size: 12px; 8 --exit-icon-position: calc((var(--card-padding) - var(--exit-icon-size)) / 2); 9 --social-color: var(--color-violet-50); 10 --cookie-color: var(--color-blue-40); 11 --tracker-color: var(--color-cyan-30); 12 --fingerprinter-color: var(--color-orange-30); 13 --cryptominer-color: var(--color-gray-50); 14 15 /* Highlight colors for trackers */ 16 --social-highlight-color: var(--color-violet-60); 17 --cookie-highlight-color: var(--color-blue-50); 18 --tracker-highlight-color: var(--color-cyan-50); 19 --fingerprinter-highlight-color: var(--color-orange-50); 20 --cryptominer-highlight-color: var(--color-gray-60); 21 22 --tab-highlight: var(--social-color); /* start with social selected */ 23 --column-width: 16px; 24 --graph-empty: var(--color-gray-30); 25 --graph-curve: cubic-bezier(0.66, 0.75, 0.59, 0.91); 26 27 /* Colors for the loading indicator */ 28 --protection-report-loader-color-stop: oklch(from var(--color-gray-50) l c h / 24%); 29 --protection-report-loader-gradient-opacity: 0.95; 30 31 --gear-icon-fill: oklch(from var(--color-gray-100) l c h / 60%); 32 --hover-grey-link: var(--color-gray-80); 33 34 --block-background-color: var(--color-gray-70); 35 --breaches-background-color: var(--color-orange-30); 36 --feature-banner-color: var(--color-black-alpha-10); 37 } 38 39 body { 40 box-sizing: border-box; 41 } 42 43 *, 44 *:before, 45 *:after { 46 box-sizing: inherit; 47 } 48 49 body[focuseddatatype="social"] { 50 --tab-highlight: var(--social-color); 51 } 52 53 body[focuseddatatype="cookie"] { 54 --tab-highlight: var(--cookie-color); 55 } 56 57 body[focuseddatatype="tracker"] { 58 --tab-highlight: var(--tracker-color); 59 } 60 61 body[focuseddatatype="fingerprinter"] { 62 --tab-highlight: var(--fingerprinter-color); 63 } 64 65 body[focuseddatatype="cryptominer"] { 66 --tab-highlight: var(--cryptominer-color); 67 } 68 69 h2 { 70 font-weight: var(--heading-font-weight); 71 } 72 73 #report-title { 74 margin-block-end: 20px; 75 } 76 77 #report-summary { 78 color: var(--text-color-deemphasized); 79 line-height: 26px; 80 font-size: 16px; 81 margin: 0; 82 margin-bottom: 15px; 83 } 84 85 #report-content { 86 width: 763px; 87 margin: 0 auto; 88 margin-block: 40px 80px; 89 } 90 91 .card-header .wrapper, 92 .new-banner .wrapper { 93 display: grid; 94 grid-template-columns: repeat(7, 1fr); 95 align-items: center; 96 } 97 98 #manage-protections, 99 .card-header > button, 100 #save-passwords-button, 101 #get-proxy-extension-link, 102 #get-vpn-link, 103 #vpn-banner-link, 104 #manage-passwords-button, 105 #sign-up-for-monitor-link { 106 grid-area: 1 / 5 / 1 / -1; 107 margin: 0; 108 font-size: 0.95em; 109 cursor: pointer; 110 padding: 10px; 111 text-align: center; 112 line-height: initial; 113 } 114 115 #vpn-banner-link { 116 grid-area: 1 / 6 / 1 / -1; 117 } 118 119 .new-banner .wrapper div:nth-child(1) { 120 grid-area: 1 / 1 / 1 / 6; 121 padding-inline-end: 15px; 122 } 123 124 .lockwise-card.has-logins .wrapper div:nth-child(1) { 125 grid-area: 1 / 1 / 1 / 6; 126 } 127 128 .card:not(.has-logins) .wrapper div:nth-child(1), 129 .etp-card.custom-not-blocking .wrapper div:nth-child(1) { 130 grid-area: 1 / 1 / 1 / 5; 131 padding-inline-end: 15px; 132 } 133 134 .etp-card:not(.custom-not-blocking) .wrapper div:nth-child(1) { 135 grid-area: 1 / 1 / 1 / 8; 136 } 137 138 .card.has-logins .wrapper div:nth-child(1) { 139 grid-area: 1 / 1 / 1 / -1; 140 } 141 142 .vpn-card.subscribed .wrapper div:nth-child(1) { 143 padding-inline-end: 29px; 144 grid-area: 1 / 1 / 1 / 7; 145 } 146 147 /* We want to hide certain components depending on its state. */ 148 .no-logins .monitor-scanned-wrapper, 149 .etp-card.custom-not-blocking .card-body, 150 .etp-card.custom-not-blocking #protection-settings, 151 #manage-protections, 152 .etp-card .icon.dark, 153 .proxy-card .icon.dark, 154 a.hidden, 155 .loading .card-body, 156 .lockwise-card.hidden, 157 #lockwise-body-content .has-logins.hidden, 158 #lockwise-body-content .no-logins.hidden, 159 .lockwise-card.no-logins #lockwise-how-it-works, 160 .lockwise-card.no-logins .lockwise-scanned-wrapper, 161 .lockwise-card.no-logins #manage-passwords-button, 162 .lockwise-card.has-logins #save-passwords-button, 163 .monitor-card.hidden, 164 .monitor-card.no-logins .card-body, 165 .monitor-card.no-logins #monitor-header-content a, 166 .monitor-card.no-logins .monitor-scanned-text, 167 .monitor-card.no-logins .icon-small, 168 .monitor-card.no-logins .monitor-breaches-wrapper, 169 .monitor-card.no-logins .monitor-partial-breaches-wrapper, 170 .monitor-card .monitor-breaches-wrapper.hidden, 171 .monitor-card .monitor-partial-breaches-wrapper.hidden, 172 .monitor-card.has-logins #sign-up-for-monitor-link, 173 .loading a, 174 .loading button, 175 .loading .wrapper, 176 .proxy-card.hidden, 177 .vpn-card.hidden, 178 .card-body.hidden, 179 .hidden { 180 display: none; 181 } 182 183 .icon { 184 width: 64px; 185 height: 64px; 186 grid-column: 1; 187 margin: 0 auto; 188 z-index: 1; 189 } 190 191 .vpn-card .icon { 192 width: 56px; 193 height: 56px; 194 } 195 196 .new-banner .icon { 197 width: 50px; 198 height: 50px; 199 } 200 201 @media (prefers-color-scheme: dark) { 202 :root { 203 --social-highlight-color: var(--color-violet-50); 204 --cookie-highlight-color: var(--color-blue-40); 205 --tracker-highlight-color: var(--color-cyan-20); 206 --fingerprinter-highlight-color: var(--color-orange-30); 207 --cryptominer-highlight-color: var(--color-gray-50); 208 209 --gear-icon-fill: oklch(from var(--color-gray-05) l c h / 60%); 210 --hover-grey-link: var(--grey-30); 211 --feature-banner-color: var(--color-white-alpha-10); 212 } 213 214 .etp-card .icon.dark, 215 .proxy-card .icon.dark { 216 display: block; 217 } 218 219 .etp-card .icon.light, 220 .proxy-card .icon.light { 221 display: none; 222 } 223 } 224 225 .card { 226 display: grid; 227 grid-template-columns: 100%; 228 grid-template-rows: 20% auto; 229 padding: 0; 230 margin-block-end: 25px; 231 line-height: 1.3em; 232 } 233 234 .card-header, 235 .card-body { 236 display: grid; 237 grid-template-columns: 1fr 7fr; 238 padding: var(--card-padding); 239 grid-gap: var(--card-padding); 240 } 241 242 .card .card-title { 243 font-size: inherit; 244 line-height: 1.25; 245 margin: 0; 246 cursor: default; 247 } 248 249 .card .content { 250 margin-block: 5px 0; 251 font-size: 0.93em; 252 cursor: default; 253 color: var(--text-color-deemphasized); 254 } 255 256 .exit-icon { 257 position: absolute; 258 width: var(--exit-icon-size); 259 height: var(--exit-icon-size); 260 top: var(--exit-icon-position); 261 inset-inline-end: var(--exit-icon-position); 262 background-image: url(chrome://global/skin/icons/close.svg); 263 background-size: calc(var(--exit-icon-size) - 2px); 264 background-color: transparent; 265 background-position: center; 266 background-repeat: no-repeat; 267 -moz-context-properties: fill; 268 fill: currentColor; 269 270 /* Override margin, padding, min-height and min-width set in common-shared.css */ 271 padding: 0; 272 margin: 0; 273 min-width: 1px; 274 min-height: 1px; 275 } 276 277 .custom-not-blocking .content { 278 margin-block-end: 5px; 279 } 280 281 .custom-not-blocking #manage-protections { 282 display: initial; 283 } 284 285 #protection-settings { 286 -moz-context-properties: fill; 287 fill: var(--gear-icon-fill); 288 background: url("chrome://global/skin/icons/settings.svg") no-repeat 0; 289 cursor: pointer; 290 width: max-content; 291 color: var(--text-color-deemphasized); 292 margin-block: 6px 0; 293 font-size: 0.8em; 294 padding-block: 4px; 295 padding-inline: 24px 4px; 296 } 297 298 #protection-settings:dir(rtl) { 299 background-position-x: right; 300 } 301 302 #protection-settings:hover, 303 #protection-settings:focus { 304 text-decoration: underline; 305 color: var(--hover-grey-link); 306 fill: var(--hover-grey-link); 307 } 308 309 #protection-settings:hover:active { 310 text-decoration: none; 311 color: var(--text-color); 312 fill: var(--text-color); 313 } 314 315 #protection-settings:-moz-focusring { 316 outline: none; 317 } 318 319 .card .card-body { 320 border-block-start: 1px solid var(--border-color); 321 grid-column: span 2; 322 grid-row: 2; 323 position: relative; 324 } 325 326 .body-wrapper { 327 grid-column: 2; 328 } 329 330 #graph-week-summary, 331 #graph-total-summary { 332 font-size: 0.8em; 333 } 334 335 #graph-week-summary { 336 font-weight: var(--font-weight-bold); 337 } 338 339 #graph-wrapper { 340 width: 100%; 341 margin-block: 33px 25px; 342 } 343 344 #graph { 345 display: grid; 346 grid: repeat(10, 1fr) max-content / repeat(7, 1fr); 347 height: 130px; 348 margin-block-end: 10px; 349 } 350 351 #private-window-message { 352 border: 1px solid var(--border-color); 353 grid-area: 1 / 2 / 1 / 7; 354 background-color: var(--background-color-box-info); 355 padding: 13px 45px; 356 font-size: 13px; 357 margin-bottom: 25px; 358 text-align: center; 359 } 360 361 #graph:not(.private-window) #private-window-message { 362 display: none; 363 } 364 365 /* Graph Bars */ 366 .graph-bar { 367 grid-row: 2 / -2; 368 align-self: flex-end; 369 width: var(--column-width); 370 position: relative; 371 height: 0; 372 transition: height 500ms var(--graph-curve); 373 } 374 375 .graph-wrapper-bar { 376 height: 100%; 377 width: 100%; 378 border-radius: 2px; 379 overflow: hidden; 380 outline: 1px solid transparent; 381 } 382 383 .graph-bar:hover { 384 cursor: pointer; 385 } 386 387 .graph-bar.empty { 388 height: 0; 389 border: 1px var(--graph-empty) solid; 390 border-radius: var(--border-radius-small); 391 cursor: default; 392 } 393 394 .social-bar { 395 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 396 background-color: var(--social-color); 397 } 398 399 .hover-social .social-bar { 400 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 401 background-color: var(--social-highlight-color); 402 } 403 404 .cookie-bar { 405 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 406 background-color: var(--cookie-color); 407 } 408 409 .hover-cookie .cookie-bar { 410 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 411 background-color: var(--cookie-highlight-color); 412 } 413 414 .tracker-bar { 415 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 416 background-color: var(--tracker-color); 417 } 418 419 .hover-tracker .tracker-bar { 420 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 421 background-color: var(--tracker-highlight-color); 422 } 423 424 .fingerprinter-bar { 425 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 426 background-color: var(--fingerprinter-color); 427 } 428 429 .hover-fingerprinter .fingerprinter-bar { 430 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 431 background-color: var(--fingerprinter-highlight-color); 432 } 433 434 .cryptominer-bar { 435 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 436 background-color: var(--cryptominer-color); 437 } 438 439 .hover-cryptominer .cryptominer-bar { 440 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 441 background-color: var(--cryptominer-highlight-color); 442 } 443 444 .column-label { 445 margin-block-start: 5px; 446 font-size: 0.9em; 447 width: var(--column-width); 448 grid-row: -1; 449 } 450 451 .bar-count { 452 position: absolute; 453 top: -21px; 454 font-size: 0.8em; 455 opacity: 0; 456 transition: opacity 700ms; 457 pointer-events: none; 458 } 459 460 .bar-count.animate { 461 opacity: 1; 462 } 463 464 /* Legend */ 465 #graphLegendDescription { 466 position: absolute; 467 opacity: 0; 468 z-index: -1; 469 } 470 471 input[type="radio"] { 472 position: absolute; 473 inset-inline-start: -100px; 474 } 475 476 #legend input:focus + label { 477 outline: solid 1px; 478 outline-offset: -1px; 479 outline-color: var(--tab-highlight); 480 } 481 482 #legend { 483 display: grid; 484 grid-template-columns: repeat(7, 1fr); 485 grid-template-rows: auto auto; 486 grid-gap: 0; 487 position: relative; 488 overflow: hidden; 489 } 490 491 #highlight { 492 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 493 background: var(--tab-highlight); 494 position: absolute; 495 height: 3px; 496 width: 100%; 497 align-self: end; 498 grid-column: 1 / span 1; 499 grid-row: 1 / 1; 500 } 501 502 #highlight-hover { 503 position: absolute; 504 height: 4px; 505 width: 100%; 506 bottom: -1px; 507 align-self: end; 508 } 509 510 #legend label { 511 margin-block-end: -1px; 512 padding: 15px 0; 513 padding-inline-end: 5px; 514 border: 3px solid transparent; 515 -moz-context-properties: fill; 516 display: inline-block; 517 } 518 519 #legend label:-moz-focusring { 520 outline: none; 521 } 522 523 .icon-small { 524 width: 16px; 525 height: 16px; 526 display: inline-block; 527 vertical-align: middle; 528 -moz-context-properties: fill; 529 fill: currentColor; 530 margin-inline-end: 2px; 531 } 532 533 label span { 534 margin-inline-start: 1px; 535 display: inline-block; 536 } 537 538 label[data-type="social"] .icon-small { 539 fill: var(--social-color); 540 } 541 542 label[data-type="cookie"] .icon-small { 543 fill: var(--cookie-color); 544 } 545 546 label[data-type="tracker"] .icon-small { 547 fill: var(--tracker-color); 548 } 549 550 label[data-type="fingerprinter"] .icon-small { 551 fill: var(--fingerprinter-color); 552 } 553 554 label[data-type="cryptominer"] .icon-small { 555 fill: var(--cryptominer-color); 556 } 557 558 .hover-social label[for="tab-social"], 559 .hover-cookie label[for="tab-cookie"], 560 .hover-tracker label[for="tab-tracker"], 561 .hover-fingerprinter label[for="tab-fingerprinter"], 562 .hover-cryptominer label[for="tab-cryptominer"], 563 label:hover { 564 cursor: pointer; 565 } 566 567 .tab-content { 568 display: none; 569 padding: 22px 20px 20px; 570 border-block-start: 1px solid var(--tab-highlight); 571 background-color: var(--background-color-box-info); 572 font-size: 0.8em; 573 line-height: 1.75; 574 } 575 576 .tab-content .content-title { 577 font-weight: var(--font-weight-bold); 578 } 579 580 .tab-content p { 581 margin: 0; 582 } 583 584 .tab-content p:nth-of-type(2) { 585 color: var(--text-color-deemphasized); 586 } 587 588 #tab-social:checked ~ #social, 589 #tab-cookie:checked ~ #cookie, 590 #tab-tracker:checked ~ #tracker, 591 #tab-fingerprinter:checked ~ #fingerprinter, 592 #tab-cryptominer:checked ~ #cryptominer { 593 display: block; 594 grid-column: 1/ -1; 595 grid-row: 2; 596 } 597 598 input[data-type="social"]:checked ~ #highlight, 599 .hover-social label[for="tab-social"] ~ #highlight-hover, 600 label[for="tab-social"]:hover ~ #highlight-hover { 601 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 602 background-color: var(--social-color); 603 grid-area: social; 604 } 605 606 input[data-type="cookie"]:checked ~ #highlight, 607 .hover-cookie label[for="tab-cookie"] ~ #highlight-hover, 608 label[for="tab-cookie"]:hover ~ #highlight-hover { 609 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 610 background-color: var(--cookie-color); 611 grid-area: cookie; 612 } 613 614 input[data-type="tracker"]:checked ~ #highlight, 615 .hover-tracker label[for="tab-tracker"] ~ #highlight-hover, 616 label[for="tab-tracker"]:hover ~ #highlight-hover { 617 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 618 background-color: var(--tracker-color); 619 grid-area: tracker; 620 } 621 622 input[data-type="fingerprinter"]:checked ~ #highlight, 623 .hover-fingerprinter label[for="tab-fingerprinter"] ~ #highlight-hover, 624 label[for="tab-fingerprinter"]:hover ~ #highlight-hover { 625 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 626 background-color: var(--fingerprinter-color); 627 grid-area: fingerprinter; 628 } 629 630 input[data-type="cryptominer"]:checked ~ #highlight, 631 .hover-cryptominer label[for="tab-cryptominer"] ~ #highlight-hover, 632 label[for="tab-cryptominer"]:hover ~ #highlight-hover { 633 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 634 background-color: var(--cryptominer-color); 635 grid-area: cryptominer; 636 } 637 638 #mobile-hanger { 639 grid-column: 1; 640 grid-row: 3; 641 } 642 643 .etp-card { 644 margin-top: 31px; 645 grid-template-rows: auto auto auto; 646 } 647 648 /* Lockwise Card */ 649 650 #lockwise-body-content > .no-logins, 651 #lockwise-body-content > .has-logins, 652 #etp-mobile-content { 653 display: grid; 654 font-size: 0.875em; 655 align-items: center; 656 } 657 658 #lockwise-body-content > .no-logins, 659 #etp-mobile-content { 660 grid: 1fr / 1fr 6fr; 661 } 662 663 #lockwise-body-content > .has-logins { 664 grid: 1fr 1fr / minmax(70px, auto) 1fr; 665 grid-gap: 10px; 666 } 667 668 .mobile-app-icon { 669 height: 56px; 670 width: auto; 671 -moz-context-properties: fill; 672 fill: currentColor; 673 } 674 675 #lockwise-app-links, 676 #mobile-app-links { 677 display: block; 678 } 679 680 .block { 681 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 682 background-color: var(--block-background-color); 683 border-radius: var(--border-radius-small); 684 text-align: center; 685 font-size: 1.125em; 686 font-weight: var(--font-weight-bold); 687 color: #fff; 688 padding: 7px; 689 line-height: 18px; 690 } 691 692 #lockwise-body-content .has-logins a { 693 margin-inline-start: 10px; 694 } 695 696 .lockwise-scanned-wrapper { 697 display: grid; 698 grid-template-columns: 24px auto; 699 margin-block-start: 24px; 700 grid-area: 2 / 1 / 2 / 5; 701 padding-bottom: 1.7em; 702 } 703 704 #lockwise-scanned-text { 705 margin-inline-end: 15px; 706 } 707 708 #lockwise-scanned-icon { 709 margin-top: 5px; 710 } 711 712 #manage-passwords-button { 713 grid-area: 2 / 5 / 2 / 7; 714 margin-inline-end: 15px; 715 } 716 717 .vpn-card.subscribed #get-vpn-link { 718 display: none; 719 } 720 721 .vpn-card:not(.subscribed) .content.subscribed { 722 display: none; 723 } 724 725 .vpn-card.subscribed .content:not(.subscribed) { 726 display: none; 727 } 728 729 /* Monitor card */ 730 .monitor-info-wrapper { 731 display: grid; 732 grid: 1fr / 1fr 1fr 1fr; 733 grid-column-start: 1; 734 grid-column-end: 7; 735 } 736 737 .monitor-scanned-wrapper { 738 margin-block-start: 24px; 739 font-size: 0.85em; 740 display: block; 741 } 742 743 .monitor-breaches-wrapper { 744 display: grid; 745 grid-area: 2 / 1 / 2 / 8; 746 grid: 1fr auto / repeat(7, 1fr); 747 margin-bottom: 24px; 748 } 749 750 .monitor-partial-breaches-wrapper { 751 display: grid; 752 grid-area: 2 / 1 / 2 / 8; 753 grid-template-columns: repeat(7, 1fr); 754 margin-block: 24px; 755 } 756 757 .monitor-partial-breaches-header { 758 grid-area: 1 / 1 / 1 / 7; 759 margin-inline-end: 15px; 760 margin-block: 6px; 761 } 762 763 #monitor-partial-breaches-percentage { 764 font-size: 0.93em; 765 cursor: default; 766 color: var(--text-color-deemphasized); 767 float: inline-end; 768 } 769 770 .progress-bar { 771 grid-area: 2 / 1 / 2 / 7; 772 margin-inline-start: 15px; 773 border-radius: var(--border-radius-small); 774 height: 25px; 775 box-shadow: 0 0 0 1px rgba(202, 201, 213, 0.5); 776 border: none; 777 background: linear-gradient(-45deg, #0250bb 0%, #9059ff 100%); 778 direction: rtl; 779 } 780 781 .progress-bar:dir(rtl) { 782 direction: ltr; 783 background: linear-gradient(-45deg, #0250bb 0%, #9059ff 100%); 784 } 785 786 .progress-bar::-moz-progress-bar { 787 background: white; 788 border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0; 789 } 790 791 .monitor-partial-breaches-motivation-text { 792 grid-template-columns: repeat(7, 1fr); 793 grid-area: 3 / 1 / 3 / 8; 794 margin-top: 25px; 795 display: grid; 796 } 797 798 .monitor-partial-breaches-motivation-wrapper { 799 display: grid; 800 grid-template-columns: repeat(7, 1fr); 801 grid-area: 2 / 1 / 2 / 8; 802 } 803 804 #monitor-partial-breaches-motivation-title { 805 font-weight: var(--font-weight-bold); 806 grid-area: 1 / 1 / 1 / 7; 807 margin-inline-end: 15px; 808 } 809 810 #monitor-breaches-description, 811 #monitor-partial-breaches-motivation-desc { 812 grid-area: 1 / 1 / 1 / 5; 813 margin-block: auto; 814 margin-inline-end: 15px; 815 } 816 817 .monitor-breaches-header { 818 margin-top: 30px; 819 grid-area: 1 / 1 / 1 / 8; 820 } 821 822 .monitor-breaches-description-wrapper { 823 display: grid; 824 grid-template-columns: repeat(7, 1fr); 825 grid-area: 2 / 1 / 2 / 8; 826 } 827 828 #monitor-partial-breaches-icon, 829 #monitor-breaches-icon { 830 vertical-align: middle; 831 margin-inline-end: 2px; 832 } 833 834 #monitor-partial-breaches-title { 835 font-size: 0.93em; 836 } 837 838 #monitor-breaches-title { 839 font-weight: var(--font-weight-bold); 840 } 841 842 #monitor-breaches-title, 843 #monitor-partial-breaches-title, 844 #monitor-partial-breaches-motivation-title { 845 cursor: default; 846 } 847 848 .monitor-partial-breaches-link-wrapper, 849 .monitor-breaches-link-wrapper { 850 margin-block: auto; 851 grid-area: 1 / 5 / 1 / 7; 852 margin-inline: 0 15px; 853 font-size: 0.95em; 854 text-align: center; 855 display: flex; 856 } 857 858 #monitor-breaches-link, 859 #monitor-partial-breaches-link { 860 color: inherit; 861 outline: none; 862 text-decoration: none; 863 width: 157.267px; 864 padding: 9px; 865 } 866 867 .lockwise-card #lockwise-header-content > a, 868 .monitor-card #monitor-header-content > a { 869 display: block; 870 margin-block-start: 5px; 871 width: max-content; 872 } 873 874 .monitor-card.has-logins #monitor-body-content { 875 display: grid; 876 grid: 1fr auto / repeat(7, 1fr); 877 align-items: center; 878 } 879 880 .monitor-card .card-body { 881 padding-top: 0; 882 border-block-start: none; 883 } 884 885 .monitor-block { 886 display: flex; 887 flex-direction: column; 888 border-radius: var(--border-radius-small); 889 text-align: center; 890 margin-inline-end: 15px; 891 } 892 893 .monitor-block a { 894 outline: none; 895 color: #ffffff; 896 padding: 19px 0; 897 } 898 899 .monitor-block a:hover { 900 text-decoration: none; 901 color: #ffffff; 902 } 903 904 .email { 905 background: linear-gradient(162.33deg, #ab71ff 0%, #9059ff 100%); 906 grid-column: 1; 907 } 908 909 .email:hover { 910 background: linear-gradient(162.33deg, #7d43d1 0%, #7740e6 100%); 911 } 912 913 .email:dir(rtl) { 914 background: linear-gradient(197.67deg, #ab71ff 0%, #9059ff 100%); 915 } 916 917 .email:dir(rtl):hover { 918 background: linear-gradient(197.67deg, #7d43d1 0%, #7740e6 100%); 919 } 920 921 .breaches { 922 background: linear-gradient(162.33deg, #9059ff 0%, #7542e5 100%); 923 grid-column: 2; 924 } 925 926 .breaches:hover { 927 background: linear-gradient(162.33deg, #7740e6 0%, #4714b7 100%); 928 } 929 930 .breaches:dir(rtl) { 931 background: linear-gradient(197.67deg, #9059ff 0%, #7542e5 100%); 932 } 933 934 .breaches:dir(rtl):hover { 935 background: linear-gradient(197.67deg, #7740e6 0%, #4714b7 100%); 936 } 937 938 .passwords { 939 background: linear-gradient(162.33deg, #7542e5 0%, #592acb 100%); 940 grid-column: 3; 941 } 942 943 .passwords:hover { 944 background: linear-gradient(162.33deg, #4714b7 0%, #2b009d 100%); 945 } 946 947 .passwords:dir(rtl) { 948 background: linear-gradient(197.67deg, #7542e5 0%, #592acb 100%); 949 } 950 951 .passwords:dir(rtl):hover { 952 background: linear-gradient(197.67deg, #4714b7 0%, #2b009d 100%); 953 } 954 955 .monitor-stat { 956 display: flex; 957 font-size: 1.75em; 958 font-weight: var(--font-weight-bold); 959 margin-block-end: 5px; 960 word-break: break-all; 961 justify-content: center; 962 flex-wrap: wrap; 963 } 964 965 .monitor-icon { 966 margin-inline-end: 3px; 967 } 968 969 .icon-med { 970 width: 24px; 971 height: 24px; 972 -moz-context-properties: fill, fill-opacity; 973 fill: white; 974 fill-opacity: 0.65; 975 padding: 5px; 976 display: inline-block; 977 vertical-align: middle; 978 } 979 980 .info-text { 981 font-size: 0.75em; 982 line-height: 13px; 983 margin: 0 10px; 984 display: inline-block; 985 } 986 987 .number-of-breaches.block { 988 font-size: 1.45em; 989 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 990 background-color: var(--breaches-background-color); 991 padding: 15px; 992 grid-column: 1 / 2; 993 width: 70px; 994 height: 48px; 995 } 996 997 #manage-protections, 998 #sign-up-for-monitor-link, 999 #get-proxy-extension-link, 1000 #get-vpn-link, 1001 #vpn-banner-link, 1002 .monitor-partial-breaches-link-wrapper, 1003 .monitor-breaches-link-wrapper { 1004 background-color: var(--button-background-color-primary); 1005 border: var(--button-border); 1006 border-color: var(--button-border-color-primary); 1007 border-radius: var(--border-radius-small); 1008 text-decoration: none; 1009 color: var(--button-text-color-primary); 1010 font-weight: var(--font-weight-semibold); 1011 } 1012 1013 #manage-protections:hover, 1014 #sign-up-for-monitor-link:hover, 1015 #get-proxy-extension-link:hover, 1016 #get-vpn-link:hover, 1017 #vpn-banner-link:hover, 1018 #monitor-partial-breaches-link:hover, 1019 #monitor-breaches-link:hover { 1020 background-color: var(--button-background-color-primary-hover); 1021 color: var(--button-text-color-primary-hover); 1022 border-color: var(--button-border-color-hover); 1023 } 1024 1025 #manage-protections:hover:active, 1026 #sign-up-for-monitor-link:hover:active, 1027 #get-proxy-extension-link:hover:active, 1028 #get-vpn-link:hover:active, 1029 #vpn-banner-link:hover:active, 1030 #monitor-partial-breaches-link:hover:active, 1031 #monitor-breaches-link:hover:active { 1032 background-color: var(--button-background-color-primary-active); 1033 color: var(--button-text-color-primary-active); 1034 border-color: var(--button-border-color-active); 1035 } 1036 1037 #manage-protections:focus-visible, 1038 #sign-up-for-monitor-link:focus-visible, 1039 #get-proxy-extension-link:focus-visible, 1040 #get-vpn-link:focus-visible, 1041 #vpn-banner-link:focus-visible, 1042 #monitor-partial-breaches-link:focus-visible, 1043 .monitor-block > a:focus-visible, 1044 #monitor-breaches-link:focus-visible { 1045 outline: var(--focus-outline); 1046 outline-offset: var(--focus-outline-offset); 1047 } 1048 1049 .monitor-card.loading::after, 1050 .lockwise-card.loading::after { 1051 position: absolute; 1052 height: 110px; 1053 width: 765px; 1054 content: ""; 1055 background-image: linear-gradient( 1056 to right, 1057 var(--background-color-box) 0%, 1058 var(--protection-report-loader-color-stop) 30%, 1059 var(--background-color-box) 40%, 1060 var(--background-color-box) 100% 1061 ); 1062 background-repeat: no-repeat; 1063 animation-duration: 2s; 1064 animation-iteration-count: infinite; 1065 animation-name: loading; 1066 animation-timing-function: cubic-bezier(0.07, 0.95, 1, 1); 1067 background-size: 700px 100%; 1068 opacity: var(--protection-report-loader-gradient-opacity); 1069 } 1070 1071 .monitor-card.loading:dir(rtl)::after, 1072 .lockwise-card.loading:dir(rtl)::after { 1073 background-image: linear-gradient( 1074 to left, 1075 var(--background-color-box) 0%, 1076 var(--protection-report-loader-color-stop) 30%, 1077 var(--background-color-box) 40%, 1078 var(--background-color-box) 100% 1079 ); 1080 animation-name: loading-rtl; 1081 } 1082 1083 @keyframes loading { 1084 0% { 1085 background-position-x: -300px; 1086 } 1087 1088 100% { 1089 background-position-x: 700px; 1090 opacity: 0.02; 1091 } 1092 } 1093 1094 @keyframes loading-rtl { 1095 0% { 1096 background-position-x: right -300px; 1097 } 1098 1099 100% { 1100 background-position-x: right 700px; 1101 opacity: 0.02; 1102 } 1103 } 1104 1105 .new-banner { 1106 width: 100%; 1107 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 1108 background: var(--feature-banner-color); 1109 } 1110 1111 .banner-wrapper { 1112 width: 763px; 1113 display: grid; 1114 grid-template-columns: 1fr 7fr; 1115 grid-gap: var(--card-padding); 1116 line-height: 1.3em; 1117 margin: 0 auto; 1118 padding: 12px var(--card-padding); 1119 } 1120 1121 .new-banner .banner-title { 1122 margin: 0; 1123 line-height: 1.25; 1124 cursor: default; 1125 font-size: inherit; 1126 } 1127 1128 .new-banner .content { 1129 margin-block: 5px 0; 1130 font-size: 0.88em; 1131 cursor: default; 1132 color: var(--text-color-deemphasized); 1133 } 1134 1135 .new-banner .exit-icon { 1136 top: auto; 1137 inset-inline-end: 30px; 1138 } 1139 1140 .vpn-card .title-wrapper { 1141 display: grid; 1142 grid-template-columns: 24px auto; 1143 } 1144 1145 .vpn-card:not(.subscribed) .card-title { 1146 grid-area: 1 / 1 / 1 / -1; 1147 } 1148 1149 .vpn-card.subscribed .card-title { 1150 margin-inline-start: 3px; 1151 } 1152 1153 .vpn-card:not(.subscribed) #check-icon { 1154 display: none; 1155 }