1@charset "UTF-8"; 2/* This Source Code Form is subject to the terms of the Mozilla Public 3 * License, v. 2.0. If a copy of the MPL was not distributed with this 4 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 5/* This is the windows variant */ 6html { 7 box-sizing: border-box; 8} 9 10*, 11*::before, 12*::after { 13 box-sizing: inherit; 14} 15 16*::-moz-focus-inner { 17 border: 0; 18} 19 20body { 21 margin: 0; 22} 23 24button, 25input { 26 background-color: inherit; 27 color: inherit; 28 font-family: inherit; 29 font-size: inherit; 30} 31 32[hidden] { 33 display: none !important; 34} 35 36body { 37 --newtab-background-color: #F9F9FB; 38 --newtab-background-color-secondary: #FFF; 39 --newtab-text-primary-color: #15141a; 40 --newtab-primary-action-background: #0061e0; 41 --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 80%, transparent); 42 --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 95%, #000); 43 --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000); 44 --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent); 45 --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent); 46 --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent); 47 --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 90%, #000); 48 --newtab-primary-element-active-color: color-mix(in srgb, var(--newtab-primary-action-background) 80%, #000); 49 --newtab-primary-element-text-color: #FFF; 50 --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); 51 --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000); 52 --newtab-wordmark-color: #20123A; 53 --newtab-status-success: #058B00; 54 --newtab-status-error: #D70022; 55 --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1); 56 --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent); 57 --newtab-text-emphasis-background: #FFE900; 58 --newtab-text-emphasis-text-color: #0C0C0D; 59 --newtab-textbox-focus-color: var(--newtab-primary-action-background); 60 --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3); 61 --newtab-button-secondary-color: inherit; 62} 63body[lwt-newtab-brighttext] { 64 --newtab-background-color: #2B2A33; 65 --newtab-background-color-secondary: #42414d; 66 --newtab-text-primary-color: #fbfbfe; 67 --newtab-primary-action-background: #00ddff; 68 --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 95%, #FFF); 69 --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 90%, #FFF); 70 --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent); 71 --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent); 72 --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent); 73 --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF); 74 --newtab-primary-element-text-color: #2b2a33; 75 --newtab-wordmark-color: #fbfbfe; 76 --newtab-status-success: #7C6; 77} 78 79.icon { 80 background-position: center center; 81 background-repeat: no-repeat; 82 background-size: 16px; 83 -moz-context-properties: fill; 84 display: inline-block; 85 color: var(--newtab-text-primary-color); 86 fill: currentColor; 87 height: 16px; 88 vertical-align: middle; 89 width: 16px; 90} 91.icon.icon-spacer { 92 margin-inline-end: 8px; 93} 94.icon.icon-small-spacer { 95 margin-inline-end: 6px; 96} 97.icon.icon-button-style { 98 fill: var(--newtab-text-secondary-color); 99 border: 0; 100} 101.icon.icon-button-style:focus, .icon.icon-button-style:hover { 102 fill: var(--newtab-text-primary-color); 103} 104.icon.icon-bookmark-added { 105 background-image: url("chrome://browser/skin/bookmark.svg"); 106} 107.icon.icon-bookmark-hollow { 108 background-image: url("chrome://browser/skin/bookmark-hollow.svg"); 109} 110.icon.icon-clear-input { 111 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-cancel-16.svg"); 112} 113.icon.icon-delete { 114 background-image: url("chrome://global/skin/icons/delete.svg"); 115} 116.icon.icon-search { 117 background-image: url("chrome://global/skin/icons/search-glass.svg"); 118} 119.icon.icon-modal-delete { 120 flex-shrink: 0; 121 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-modal-delete-32.svg"); 122 background-size: 32px; 123 height: 32px; 124 width: 32px; 125} 126.icon.icon-mail { 127 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-mail-16.svg"); 128} 129.icon.icon-dismiss { 130 background-image: url("chrome://global/skin/icons/close.svg"); 131} 132.icon.icon-info { 133 background-image: url("chrome://global/skin/icons/info.svg"); 134} 135.icon.icon-new-window { 136 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-newWindow-16.svg"); 137} 138.icon.icon-new-window:dir(rtl) { 139 transform: scaleX(-1); 140} 141.icon.icon-new-window-private { 142 background-image: url("chrome://browser/skin/privateBrowsing.svg"); 143} 144.icon.icon-settings { 145 background-image: url("chrome://global/skin/icons/settings.svg"); 146} 147.icon.icon-pin { 148 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pin-16.svg"); 149} 150.icon.icon-pin:dir(rtl) { 151 transform: scaleX(-1); 152} 153.icon.icon-unpin { 154 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-unpin-16.svg"); 155} 156.icon.icon-unpin:dir(rtl) { 157 transform: scaleX(-1); 158} 159.icon.icon-edit { 160 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); 161} 162.icon.icon-pocket { 163 background-image: url("chrome://global/skin/icons/pocket.svg"); 164} 165.icon.icon-pocket-save { 166 background-image: url("chrome://global/skin/icons/pocket-outline.svg"); 167} 168.icon.icon-pocket-delete { 169 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg"); 170} 171.icon.icon-pocket-archive { 172 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-archive-16.svg"); 173} 174.icon.icon-history-item { 175 background-image: url("chrome://browser/skin/history.svg"); 176} 177.icon.icon-trending { 178 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-trending-16.svg"); 179 transform: translateY(2px); 180} 181.icon.icon-now { 182 background-image: url("chrome://browser/skin/history.svg"); 183} 184.icon.icon-topsites { 185 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-topsites-16.svg"); 186} 187.icon.icon-pin-small { 188 background-image: url("chrome://browser/skin/pin-12.svg"); 189 background-size: 12px; 190 height: 12px; 191 width: 12px; 192} 193.icon.icon-pin-small:dir(rtl) { 194 transform: scaleX(-1); 195} 196.icon.icon-check { 197 background-image: url("chrome://global/skin/icons/check.svg"); 198} 199.icon.icon-download { 200 background-image: url("chrome://browser/skin/downloads/downloads.svg"); 201} 202.icon.icon-copy { 203 background-image: url("chrome://global/skin/icons/edit-copy.svg"); 204} 205.icon.icon-open-file { 206 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-open-file-16.svg"); 207} 208.icon.icon-webextension { 209 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg"); 210} 211.icon.icon-highlights { 212 background-image: url("chrome://global/skin/icons/highlights.svg"); 213} 214.icon.icon-arrowhead-down { 215 background-image: url("chrome://global/skin/icons/arrow-down.svg"); 216} 217.icon.icon-arrowhead-down-small { 218 background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); 219 background-size: 12px; 220 height: 12px; 221 width: 12px; 222} 223.icon.icon-arrowhead-forward-small { 224 background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); 225 background-size: 12px; 226 height: 12px; 227 width: 12px; 228} 229.icon.icon-arrowhead-forward-small:dir(rtl) { 230 background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); 231} 232.icon.icon-arrowhead-up { 233 background-image: url("chrome://global/skin/icons/arrow-up.svg"); 234} 235.icon.icon-add { 236 background-image: url("chrome://global/skin/icons/plus.svg"); 237} 238.icon.icon-minimize { 239 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-minimize-16.svg"); 240} 241.icon.icon-maximize { 242 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg"); 243} 244.icon.icon-arrow { 245 background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); 246} 247 248html { 249 height: 100%; 250} 251 252body, 253#root { 254 min-height: 100vh; 255} 256 257#root { 258 position: relative; 259} 260 261body { 262 background-color: var(--newtab-background-color); 263 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Helvetica Neue", sans-serif; 264 font-size: 16px; 265} 266 267.no-scroll { 268 overflow: hidden; 269} 270 271h1, 272h2 { 273 font-weight: normal; 274} 275 276a { 277 text-decoration: none; 278} 279 280.inner-border { 281 border: 1px solid var(--newtab-border-color); 282 border-radius: 3px; 283 height: 100%; 284 left: 0; 285 pointer-events: none; 286 position: absolute; 287 top: 0; 288 width: 100%; 289 z-index: 100; 290} 291 292@keyframes fadeIn { 293 from { 294 opacity: 0; 295 } 296 to { 297 opacity: 1; 298 } 299} 300.show-on-init { 301 opacity: 0; 302 transition: opacity 0.2s ease-in; 303} 304.show-on-init.on { 305 animation: fadeIn 0.2s; 306 opacity: 1; 307} 308 309.actions { 310 border-top: 1px solid var(--newtab-border-color); 311 display: flex; 312 flex-direction: row; 313 flex-wrap: wrap; 314 justify-content: flex-start; 315 margin: 0; 316 padding: 15px 25px 0; 317} 318 319.button, 320.actions button { 321 background-color: var(--newtab-button-secondary-color); 322 border: 1px solid var(--newtab-border-color); 323 border-radius: 4px; 324 color: inherit; 325 cursor: pointer; 326 margin-bottom: 15px; 327 padding: 10px 30px; 328 white-space: nowrap; 329} 330.button:hover:not(.dismiss), .button:focus:not(.dismiss), 331.actions button:hover:not(.dismiss), 332.actions button:focus:not(.dismiss) { 333 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 334 transition: box-shadow 150ms; 335} 336.button.dismiss, 337.actions button.dismiss { 338 background-color: transparent; 339 border: 0; 340 padding: 0; 341 text-decoration: underline; 342} 343.button.primary, .button.done, 344.actions button.primary, 345.actions button.done { 346 background-color: var(--newtab-primary-action-background); 347 border: solid 1px var(--newtab-primary-action-background); 348 color: var(--newtab-primary-element-text-color); 349 margin-inline-start: auto; 350} 351 352input[type=text], input[type=search] { 353 border-radius: 3px; 354} 355 356.clamp { 357 -webkit-box-orient: vertical; 358 display: -webkit-box; 359 overflow: hidden; 360 word-break: break-word; 361} 362 363.a11y-link-button { 364 border: 0; 365 padding: 0; 366 cursor: pointer; 367 text-align: unset; 368 color: var(--newtab-primary-action-background); 369} 370.a11y-link-button:hover, .a11y-link-button:focus { 371 text-decoration: underline; 372} 373 374.outer-wrapper { 375 color: var(--newtab-text-primary-color); 376 display: flex; 377 flex-grow: 1; 378 min-height: 100vh; 379 padding: 30px 32px 32px; 380} 381.outer-wrapper.ds-outer-wrapper-breakpoint-override { 382 padding: 30px 0 32px; 383} 384@media (min-width: 610px) { 385 .outer-wrapper.ds-outer-wrapper-breakpoint-override { 386 padding: 30px 32px 32px; 387 } 388} 389.outer-wrapper.only-search { 390 display: block; 391 padding-top: 134px; 392} 393.outer-wrapper a { 394 color: var(--newtab-primary-action-background); 395} 396 397main { 398 margin: auto; 399 width: 274px; 400 padding: 0; 401} 402main section { 403 margin-bottom: 20px; 404 position: relative; 405} 406.hide-main main { 407 visibility: hidden; 408} 409@media (min-width: 610px) { 410 main { 411 width: 530px; 412 } 413} 414@media (min-width: 866px) { 415 main { 416 width: 786px; 417 } 418} 419@media (min-width: 1122px) { 420 main { 421 width: 1042px; 422 } 423} 424main.has-snippet { 425 padding-bottom: 68px; 426} 427 428.below-search-snippet.withButton { 429 margin: auto; 430 width: 100%; 431} 432 433.ds-outer-wrapper-search-alignment main { 434 margin: 0 auto; 435} 436 437.ds-outer-wrapper-breakpoint-override main { 438 width: 266px; 439 padding-bottom: 0; 440} 441@media (min-width: 610px) { 442 .ds-outer-wrapper-breakpoint-override main { 443 width: 510px; 444 } 445} 446@media (min-width: 866px) { 447 .ds-outer-wrapper-breakpoint-override main { 448 width: 746px; 449 } 450} 451@media (min-width: 1122px) { 452 .ds-outer-wrapper-breakpoint-override main { 453 width: 986px; 454 } 455} 456.ds-outer-wrapper-breakpoint-override main.has-snippet { 457 padding-bottom: 68px; 458} 459 460.base-content-fallback { 461 height: 100vh; 462} 463 464.body-wrapper .section-title, .body-wrapper .sections-list .section:last-of-type, .body-wrapper .topics { 465 opacity: 0; 466} 467.body-wrapper.on .section-title, .body-wrapper.on .sections-list .section:last-of-type, .body-wrapper.on .topics { 468 opacity: 1; 469} 470 471.non-collapsible-section { 472 padding: 0 25px; 473} 474 475.prefs-button button { 476 background-color: transparent; 477 border: 0; 478 border-radius: 2px; 479 cursor: pointer; 480 inset-inline-end: 15px; 481 padding: 15px; 482 position: fixed; 483 top: 15px; 484 z-index: 1000; 485} 486.prefs-button button:hover, .prefs-button button:focus { 487 background-color: var(--newtab-element-hover-color); 488} 489.prefs-button button:active { 490 background-color: var(--newtab-element-active-color); 491} 492 493.as-error-fallback { 494 align-items: center; 495 border-radius: 3px; 496 box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); 497 color: var(--newtab-text-secondary-color); 498 display: flex; 499 flex-direction: column; 500 font-size: 12px; 501 justify-content: center; 502 justify-items: center; 503 line-height: 1.5; 504} 505.as-error-fallback.borderless-error { 506 box-shadow: none; 507} 508.as-error-fallback a { 509 color: var(--newtab-text-secondary-color); 510 text-decoration: underline; 511} 512 513.top-sites-list { 514 list-style: none; 515 margin: 0 -16px; 516 padding: 0; 517} 518.top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { 519 background: var(--newtab-element-hover-color); 520} 521@media (max-width: 610px) { 522 .top-sites-list > :nth-child(2n+1) .context-menu { 523 margin-inline-end: auto; 524 margin-inline-start: auto; 525 inset-inline-end: auto; 526 inset-inline-start: -32px; 527 } 528 .top-sites-list > :nth-child(2n) .context-menu { 529 margin-inline-end: 5px; 530 margin-inline-start: auto; 531 inset-inline-end: 0; 532 inset-inline-start: auto; 533 } 534} 535@media (min-width: 610px) and (max-width: 866px) { 536 .top-sites-list :nth-child(4n) .context-menu { 537 margin-inline-end: 5px; 538 margin-inline-start: auto; 539 inset-inline-end: 0; 540 inset-inline-start: auto; 541 } 542} 543@media (min-width: 610px) and (max-width: 802px) { 544 .top-sites-list :nth-child(4n+3) .context-menu { 545 margin-inline-end: 5px; 546 margin-inline-start: auto; 547 inset-inline-end: 0; 548 inset-inline-start: auto; 549 } 550} 551@media (min-width: 866px) and (max-width: 1250px) { 552 .top-sites-list :nth-child(6n) .context-menu { 553 margin-inline-end: 5px; 554 margin-inline-start: auto; 555 inset-inline-end: 0; 556 inset-inline-start: auto; 557 } 558} 559@media (min-width: 866px) and (max-width: 1058px) { 560 .top-sites-list :nth-child(6n+5) .context-menu { 561 margin-inline-end: 5px; 562 margin-inline-start: auto; 563 inset-inline-end: 0; 564 inset-inline-start: auto; 565 } 566} 567@media (min-width: 1122px) and (max-width: 1506px) { 568 .top-sites-list :nth-child(8n) .context-menu { 569 margin-inline-end: 5px; 570 margin-inline-start: auto; 571 inset-inline-end: 0; 572 inset-inline-start: auto; 573 } 574} 575@media (min-width: 1122px) and (max-width: 1314px) { 576 .top-sites-list :nth-child(8n+7) .context-menu { 577 margin-inline-end: 5px; 578 margin-inline-start: auto; 579 inset-inline-end: 0; 580 inset-inline-start: auto; 581 } 582} 583.top-sites-list .hide-for-narrow { 584 display: none; 585} 586@media (min-width: 610px) { 587 .top-sites-list .hide-for-narrow { 588 display: inline-block; 589 } 590} 591@media (min-width: 866px) { 592 .top-sites-list .hide-for-narrow { 593 display: none; 594 } 595} 596@media (min-width: 1122px) { 597 .top-sites-list .hide-for-narrow { 598 display: inline-block; 599 } 600} 601 602.top-site-outer { 603 width: 120px; 604 padding: 20px 16px 4px; 605 border-radius: 8px; 606 display: inline-block; 607} 608.top-site-outer .top-site-inner { 609 position: relative; 610} 611.top-site-outer .top-site-inner > a { 612 color: inherit; 613 display: block; 614 outline: none; 615} 616.top-site-outer:is(:hover) .context-menu-button { 617 opacity: 1; 618} 619.top-site-outer .context-menu-button { 620 background-image: url("chrome://global/skin/icons/more.svg"); 621 border: 0; 622 border-radius: 4px; 623 cursor: pointer; 624 fill: var(--newtab-text-primary-color); 625 -moz-context-properties: fill; 626 height: 20px; 627 width: 20px; 628 inset-inline-end: -9px; 629 opacity: 0; 630 position: absolute; 631 top: -20px; 632 transition: opacity 200ms; 633} 634.top-site-outer .context-menu-button:is(:active, :focus) { 635 outline: 0; 636 opacity: 1; 637 background-color: var(--newtab-element-hover-color); 638 fill: var(--newtab-primary-action-background); 639} 640.top-site-outer .tile { 641 border-radius: 8px; 642 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 643 background-color: var(--newtab-background-color-secondary); 644 justify-content: center; 645 margin: 0 auto; 646 height: 80px; 647 width: 80px; 648 cursor: pointer; 649 position: relative; 650 align-items: center; 651 color: var(--newtab-text-secondary-color); 652 display: flex; 653 font-size: 32px; 654 font-weight: 200; 655 text-transform: uppercase; 656} 657.top-site-outer .tile .icon-wrapper { 658 border-radius: 4px; 659 width: 48px; 660 height: 48px; 661 overflow: hidden; 662 position: relative; 663 display: flex; 664 align-items: center; 665 justify-content: center; 666} 667.top-site-outer .tile .icon-wrapper.letter-fallback::before { 668 content: attr(data-fallback); 669 text-transform: uppercase; 670 display: flex; 671 align-items: center; 672 justify-content: center; 673 font-size: 64px; 674 font-weight: 800; 675 transform: rotate(-10deg); 676 top: 6px; 677 position: relative; 678 color: #FFF; 679} 680.top-site-outer .top-site-icon { 681 background-color: var(--newtab-background-color-secondary); 682 background-position: center center; 683 background-repeat: no-repeat; 684 border-radius: 4px; 685 position: absolute; 686} 687.top-site-outer .rich-icon { 688 background-size: cover; 689 height: 100%; 690 inset-inline-start: 0; 691 top: 0; 692 width: 100%; 693} 694.top-site-outer .default-icon, 695.top-site-outer .search-topsite { 696 background-size: 32px; 697 height: 32px; 698 width: 32px; 699 align-items: center; 700 display: flex; 701 font-size: 20px; 702 justify-content: center; 703} 704.top-site-outer .default-icon[data-fallback]::before, 705.top-site-outer .search-topsite[data-fallback]::before { 706 content: attr(data-fallback); 707} 708.top-site-outer .search-topsite { 709 background-image: url("chrome://global/skin/icons/search-glass.svg"); 710 background-size: 16px; 711 background-color: var(--newtab-primary-action-background); 712 border-radius: 32px; 713 -moz-context-properties: fill; 714 fill: var(--newtab-primary-element-text-color); 715 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 716 transition-duration: 150ms; 717 transition-property: background-size, bottom, inset-inline-end, height, width; 718 height: 32px; 719 width: 32px; 720 bottom: -6px; 721 inset-inline-end: -6px; 722} 723.top-site-outer.placeholder .tile { 724 box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); 725} 726.top-site-outer .title { 727 color: var(--newtab-text-primary-color); 728 padding-top: 8px; 729 font: caption; 730 text-align: center; 731 position: relative; 732} 733.top-site-outer .title .icon { 734 margin-inline-end: 2px; 735 fill: var(--newtab-text-primary-color); 736} 737.top-site-outer .title span { 738 display: block; 739 overflow: hidden; 740 text-overflow: ellipsis; 741 white-space: nowrap; 742} 743.top-site-outer .title .sponsored-label { 744 color: var(--newtab-text-secondary-color); 745 font-size: 0.9em; 746} 747.top-site-outer .title:not(.sponsored) .sponsored-label { 748 visibility: hidden; 749} 750.top-site-outer.search-shortcut .rich-icon { 751 background-color: #FFF; 752} 753.top-site-outer .edit-button { 754 background-image: url("chrome://activity-stream/content/data/content/assets/glyph-edit-16.svg"); 755} 756.top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before { 757 display: none; 758} 759.top-site-outer.dragged .title { 760 visibility: hidden; 761} 762 763.edit-topsites-wrapper .top-site-inner > .top-site-button > .tile { 764 border: 1px solid var(--newtab-border-color); 765} 766.edit-topsites-wrapper .modal { 767 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); 768 left: 0; 769 margin: 0 auto; 770 max-height: calc(100% - 40px); 771 position: fixed; 772 right: 0; 773 top: 40px; 774 width: 274px; 775} 776@media (min-width: 610px) { 777 .edit-topsites-wrapper .modal { 778 width: 530px; 779 } 780} 781@media (min-width: 866px) { 782 .edit-topsites-wrapper .modal { 783 width: 786px; 784 } 785} 786 787.topsite-form .section-title { 788 font-size: 16px; 789 margin: 0 0 16px; 790} 791.topsite-form .form-input-container { 792 max-width: 492px; 793 margin: 0 auto; 794 padding: 32px; 795} 796.topsite-form .form-input-container .top-site-outer { 797 pointer-events: none; 798} 799.topsite-form .search-shortcuts-container { 800 max-width: 700px; 801 margin: 0 auto; 802 padding: 32px; 803} 804.topsite-form .search-shortcuts-container > div { 805 margin-inline-end: -39px; 806} 807.topsite-form .search-shortcuts-container .top-site-outer { 808 margin-inline-start: 0; 809 margin-inline-end: 39px; 810} 811.topsite-form .top-site-outer { 812 padding: 0; 813 margin: 24px 0 0; 814 margin-inline-start: 32px; 815} 816.topsite-form .fields-and-preview { 817 display: flex; 818} 819.topsite-form label { 820 font-size: 17px; 821} 822.topsite-form .form-wrapper { 823 width: 100%; 824} 825.topsite-form .form-wrapper .field { 826 position: relative; 827} 828.topsite-form .form-wrapper .field .icon-clear-input { 829 position: absolute; 830 transform: translateY(-50%); 831 top: 50%; 832 inset-inline-end: 8px; 833} 834.topsite-form .form-wrapper .url input:dir(ltr) { 835 padding-right: 32px; 836} 837.topsite-form .form-wrapper .url input:dir(rtl) { 838 padding-left: 32px; 839} 840.topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) { 841 direction: ltr; 842 text-align: right; 843} 844.topsite-form .form-wrapper .enable-custom-image-input { 845 display: inline-block; 846 font-size: 13px; 847 margin-top: 4px; 848 cursor: pointer; 849} 850.topsite-form .form-wrapper .custom-image-input-container { 851 margin-top: 4px; 852} 853.topsite-form .form-wrapper .custom-image-input-container .loading-container { 854 width: 16px; 855 height: 16px; 856 overflow: hidden; 857 position: absolute; 858 transform: translateY(-50%); 859 top: 50%; 860 inset-inline-end: 8px; 861} 862.topsite-form .form-wrapper .custom-image-input-container .loading-animation { 863 width: 960px; 864 height: 16px; 865 -moz-context-properties: fill; 866 fill: var(--newtab-primary-action-background); 867 background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); 868 animation: tab-throbber-animation 1.05s steps(60) infinite; 869} 870@keyframes tab-throbber-animation { 871 100% { 872 transform: translateX(-960px); 873 } 874} 875@keyframes tab-throbber-animation-rtl { 876 100% { 877 transform: translateX(960px); 878 } 879} 880.topsite-form .form-wrapper .custom-image-input-container .loading-animation:dir(rtl) { 881 animation-name: tab-throbber-animation-rtl; 882} 883.topsite-form .form-wrapper input[type=text] { 884 background-color: var(--newtab-background-color-secondary); 885 border: 1px solid var(--newtab-border-color); 886 margin: 8px 0; 887 padding: 0 8px; 888 height: 32px; 889 width: 100%; 890 font-size: 15px; 891} 892.topsite-form .form-wrapper input[type=text][disabled] { 893 border: 1px solid var(--newtab-border-color); 894 box-shadow: none; 895 opacity: 0.4; 896} 897.topsite-form .form-wrapper .invalid input[type=text] { 898 border: 1px solid var(--newtab-status-error); 899 box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3); 900} 901.topsite-form .form-wrapper .error-tooltip { 902 animation: fade-up-tt 450ms; 903 background: var(--newtab-status-error); 904 border-radius: 2px; 905 color: #FFF; 906 inset-inline-start: 3px; 907 padding: 5px 12px; 908 position: absolute; 909 top: 44px; 910 z-index: 1; 911} 912.topsite-form .form-wrapper .error-tooltip::before { 913 background: var(--newtab-status-error); 914 bottom: -8px; 915 content: "."; 916 height: 16px; 917 inset-inline-start: 12px; 918 position: absolute; 919 text-indent: -999px; 920 top: -7px; 921 transform: rotate(45deg); 922 white-space: nowrap; 923 width: 16px; 924 z-index: -1; 925} 926.topsite-form .actions { 927 justify-content: flex-end; 928} 929.topsite-form .actions button { 930 margin-inline-start: 10px; 931 margin-inline-end: 0; 932} 933@media (max-width: 610px) { 934 .topsite-form .fields-and-preview { 935 flex-direction: column; 936 } 937 .topsite-form .fields-and-preview .top-site-outer { 938 margin-inline-start: 0; 939 } 940} 941.topsite-form .title { 942 user-select: none; 943} 944.topsite-form [type=checkbox]:not(:checked), 945.topsite-form [type=checkbox]:checked { 946 inset-inline-start: -9999px; 947 position: absolute; 948} 949.topsite-form [type=checkbox]:not(:checked) + label, 950.topsite-form [type=checkbox]:checked + label { 951 cursor: pointer; 952 display: block; 953 position: relative; 954} 955.topsite-form [type=checkbox]:not(:checked) + label::before, 956.topsite-form [type=checkbox]:checked + label::before { 957 background: var(--newtab-background-color); 958 border: 1px solid var(--newtab-border-color); 959 border-radius: 3px; 960 content: ""; 961 height: 21px; 962 left: -8px; 963 position: absolute; 964 top: -8px; 965 width: 21px; 966 z-index: 1; 967} 968[dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::before, 969[dir=rtl] .topsite-form [type=checkbox]:checked + label::before { 970 left: auto; 971 right: -8px; 972} 973.topsite-form [type=checkbox]:not(:checked) + label::after, 974.topsite-form [type=checkbox]:checked + label::after { 975 background: url("chrome://global/skin/icons/check.svg") no-repeat center center; 976 content: ""; 977 height: 21px; 978 left: -8px; 979 position: absolute; 980 top: -8px; 981 width: 21px; 982 -moz-context-properties: fill; 983 fill: var(--newtab-primary-action-background); 984 z-index: 2; 985} 986[dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::after, 987[dir=rtl] .topsite-form [type=checkbox]:checked + label::after { 988 left: auto; 989 right: -8px; 990} 991.topsite-form [type=checkbox]:checked + label .tile { 992 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 993} 994.topsite-form [type=checkbox]:not(:checked) + label::after { 995 opacity: 0; 996} 997.topsite-form [type=checkbox]:checked + label::after { 998 opacity: 1; 999} 1000.topsite-form [type=checkbox]:checked:focus + label::before, 1001.topsite-form [type=checkbox]:not(:checked):focus + label::before { 1002 border: 1px dotted var(--newtab-primary-action-background); 1003} 1004 1005@keyframes fade-up-tt { 1006 0% { 1007 opacity: 0; 1008 transform: translateY(15px); 1009 } 1010 100% { 1011 opacity: 1; 1012 transform: translateY(0); 1013 } 1014} 1015.topsite-impression-observer { 1016 position: absolute; 1017 top: 0; 1018 width: 100%; 1019 height: 100%; 1020 pointer-events: none; 1021} 1022 1023.sections-list .section-list { 1024 display: grid; 1025 grid-gap: 32px; 1026 grid-template-columns: repeat(auto-fit, 192px); 1027 margin: 0; 1028} 1029@media (max-width: 610px) { 1030 .sections-list .section-list .context-menu { 1031 margin-inline-end: 5px; 1032 margin-inline-start: auto; 1033 inset-inline-end: 0; 1034 inset-inline-start: auto; 1035 } 1036} 1037@media (min-width: 610px) and (max-width: 866px) { 1038 .sections-list .section-list :nth-child(2n) .context-menu { 1039 margin-inline-end: 5px; 1040 margin-inline-start: auto; 1041 inset-inline-end: 0; 1042 inset-inline-start: auto; 1043 } 1044} 1045@media (min-width: 866px) and (max-width: 1250px) { 1046 .sections-list .section-list :nth-child(3n) .context-menu { 1047 margin-inline-end: 5px; 1048 margin-inline-start: auto; 1049 inset-inline-end: 0; 1050 inset-inline-start: auto; 1051 } 1052} 1053@media (min-width: 1122px) and (max-width: 1506px) { 1054 .sections-list .section-list :nth-child(3n) .context-menu, 1055.sections-list .section-list :nth-child(4n) .context-menu { 1056 margin-inline-end: 5px; 1057 margin-inline-start: auto; 1058 inset-inline-end: 0; 1059 inset-inline-start: auto; 1060 } 1061} 1062.sections-list .section-empty-state { 1063 border: 1px solid var(--newtab-border-color); 1064 border-radius: 3px; 1065 display: flex; 1066 height: 266px; 1067 width: 100%; 1068} 1069.sections-list .section-empty-state .empty-state { 1070 margin: auto; 1071 max-width: 350px; 1072} 1073.sections-list .section-empty-state .empty-state .empty-state-message { 1074 color: var(--newtab-text-primary-color); 1075 font-size: 13px; 1076 margin-bottom: 0; 1077 text-align: center; 1078} 1079@media (min-width: 1122px) { 1080 .sections-list .section-empty-state { 1081 height: 370px; 1082 } 1083} 1084 1085.top-stories-bottom-container { 1086 color: var(--newtab-text-primary-color); 1087 font-size: 12px; 1088 line-height: 1.6; 1089 margin-top: 12px; 1090 display: flex; 1091 justify-content: space-between; 1092} 1093.top-stories-bottom-container a { 1094 color: var(--newtab-primary-action-background); 1095 font-weight: bold; 1096} 1097.top-stories-bottom-container a.more-recommendations { 1098 font-weight: normal; 1099 font-size: 13px; 1100} 1101@media (max-width: 865px) { 1102 .top-stories-bottom-container .wrapper-topics, 1103.top-stories-bottom-container .wrapper-cta + .wrapper-more-recommendations { 1104 display: none; 1105 } 1106} 1107@media (max-width: 609px) { 1108 .top-stories-bottom-container .wrapper-cta { 1109 text-align: center; 1110 } 1111 .top-stories-bottom-container .wrapper-cta .pocket-logged-in-cta { 1112 display: block; 1113 margin-inline-end: 0; 1114 } 1115 .top-stories-bottom-container .wrapper-cta .pocket-logged-in-cta .pocket-cta-button { 1116 max-width: none; 1117 display: block; 1118 margin-inline-end: 0; 1119 margin: 5px 0 10px; 1120 } 1121 .top-stories-bottom-container .wrapper-more-recommendations { 1122 width: 100%; 1123 } 1124 .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations { 1125 justify-content: center; 1126 } 1127 .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations::after { 1128 display: none; 1129 } 1130} 1131 1132@media (min-width: 1122px) { 1133 .sections-list .normal-cards .section-list { 1134 grid-template-columns: repeat(auto-fit, 309px); 1135 } 1136} 1137.topics ul { 1138 margin: 0; 1139 padding: 0; 1140} 1141@media (min-width: 866px) { 1142 .topics ul { 1143 display: inline; 1144 padding-inline-start: 12px; 1145 } 1146} 1147.topics ul li { 1148 display: inline-block; 1149} 1150.topics ul li::after { 1151 content: "•"; 1152 padding: 8px; 1153} 1154.topics ul li:last-child::after { 1155 content: none; 1156} 1157 1158.search-wrapper { 1159 padding: 34px 0 38px; 1160} 1161.only-search .search-wrapper { 1162 padding: 0 0 38px; 1163} 1164.search-wrapper .logo-and-wordmark { 1165 align-items: center; 1166 display: flex; 1167 justify-content: center; 1168 margin-bottom: 48px; 1169} 1170.search-wrapper .logo-and-wordmark .logo { 1171 background: url("chrome://branding/content/about-logo.png") no-repeat center; 1172 background-size: 82px; 1173 display: inline-block; 1174 height: 82px; 1175 width: 82px; 1176} 1177@media (min-resolution: 2x) { 1178 .search-wrapper .logo-and-wordmark .logo { 1179 background-image: url("chrome://branding/content/about-logo@2x.png"); 1180 } 1181} 1182.search-wrapper .logo-and-wordmark .wordmark { 1183 background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; 1184 background-size: 134px; 1185 -moz-context-properties: fill; 1186 display: inline-block; 1187 fill: var(--newtab-wordmark-color); 1188 height: 82px; 1189 margin-inline-start: 16px; 1190 width: 134px; 1191} 1192@media (max-width: 609px) { 1193 .search-wrapper .logo-and-wordmark .logo { 1194 background-size: 64px; 1195 height: 64px; 1196 width: 64px; 1197 } 1198 .search-wrapper .logo-and-wordmark .wordmark { 1199 background-size: 100px; 1200 height: 64px; 1201 width: 100px; 1202 margin-inline-start: 12px; 1203 } 1204} 1205.search-wrapper .search-inner-wrapper { 1206 cursor: default; 1207 display: flex; 1208 min-height: 52px; 1209 margin: 0 auto; 1210 position: relative; 1211 width: 200px; 1212} 1213@media (min-width: 610px) { 1214 .search-wrapper .search-inner-wrapper { 1215 width: 360px; 1216 } 1217} 1218@media (min-width: 866px) { 1219 .search-wrapper .search-inner-wrapper { 1220 width: 600px; 1221 } 1222} 1223@media (min-width: 1122px) { 1224 .search-wrapper .search-inner-wrapper { 1225 width: 720px; 1226 } 1227} 1228.search-wrapper .search-handoff-button, 1229.search-wrapper input { 1230 background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat; 1231 background-size: 24px; 1232 padding-inline-start: 52px; 1233 padding-inline-end: 10px; 1234 padding-block: 0; 1235 width: 100%; 1236 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 1237 border: 1px solid transparent; 1238 border-radius: 8px; 1239 color: var(--newtab-text-primary-color); 1240 -moz-context-properties: fill; 1241 fill: var(--newtab-text-secondary-color); 1242} 1243.search-wrapper .search-handoff-button:dir(rtl), 1244.search-wrapper input:dir(rtl) { 1245 background-position-x: right 16px; 1246} 1247.search-wrapper .search-inner-wrapper:active input, 1248.search-wrapper input:focus { 1249 border: 1px solid var(--newtab-primary-action-background); 1250 outline: 0; 1251 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 1252} 1253.search-wrapper .search-button { 1254 background: url("chrome://browser/skin/forward.svg") no-repeat center center; 1255 background-size: 16px 16px; 1256 border: 0; 1257 border-radius: 0 3px 3px 0; 1258 -moz-context-properties: fill; 1259 fill: var(--newtab-text-secondary-color); 1260 height: 100%; 1261 inset-inline-end: 0; 1262 position: absolute; 1263 width: 48px; 1264} 1265.search-wrapper .search-button:focus, .search-wrapper .search-button:hover { 1266 background-color: var(--newtab-element-hover-color); 1267 cursor: pointer; 1268} 1269.search-wrapper .search-button:focus { 1270 outline: 0; 1271 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 1272 border: 1px solid var(--newtab-primary-action-background); 1273 border-radius: 0 8px 8px 0; 1274} 1275.search-wrapper .search-button:active { 1276 background-color: var(--newtab-element-hover-color); 1277} 1278.search-wrapper .search-button:dir(rtl) { 1279 transform: scaleX(-1); 1280} 1281.search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { 1282 border: 1px solid var(--newtab-primary-action-background); 1283 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 1284} 1285.search-wrapper .search-handoff-button { 1286 padding-inline-end: 15px; 1287 color: var(--newtab-text-primary-color); 1288 fill: var(--newtab-text-secondary-color); 1289 -moz-context-properties: fill; 1290} 1291.search-wrapper .search-handoff-button .fake-caret { 1292 top: 18px; 1293 inset-inline-start: 52px; 1294} 1295.search-wrapper .search-handoff-button .fake-caret:dir(rtl) { 1296 background-position-x: right 16px; 1297} 1298.search-wrapper.visible-logo .logo-and-wordmark .wordmark { 1299 fill: var(--newtab-wordmark-color); 1300} 1301 1302.non-collapsible-section + .below-search-snippet-wrapper { 1303 margin-top: -48px; 1304} 1305 1306@media (max-height: 700px) { 1307 .search-wrapper { 1308 padding: 0 0 30px; 1309 } 1310 1311 .non-collapsible-section + .below-search-snippet-wrapper { 1312 margin-top: -14px; 1313 } 1314 1315 .below-search-snippet-wrapper { 1316 min-height: 0; 1317 } 1318} 1319.search-handoff-button { 1320 background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat; 1321 background-size: 24px; 1322 border: solid 1px transparent; 1323 border-radius: 3px; 1324 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); 1325 cursor: text; 1326 font-size: 15px; 1327 padding: 0; 1328 padding-inline-end: 48px; 1329 padding-inline-start: 46px; 1330 opacity: 1; 1331 width: 100%; 1332} 1333.search-handoff-button:dir(rtl) { 1334 background-position-x: right 16px; 1335} 1336.fake-focus:not(.search-disabled) .search-handoff-button { 1337 border: 1px solid var(--newtab-textbox-focus-color); 1338 box-shadow: var(--newtab-textbox-focus-boxshadow); 1339} 1340.fake-focus:not(.search-disabled) .search-handoff-button .fake-caret { 1341 display: block; 1342} 1343.search-disabled .search-handoff-button { 1344 opacity: 0.5; 1345 box-shadow: none; 1346} 1347.search-handoff-button .fake-editable:focus { 1348 outline: none; 1349 caret-color: transparent; 1350} 1351.search-handoff-button .fake-editable { 1352 color: transparent; 1353 height: 100%; 1354 opacity: 0; 1355 position: absolute; 1356 top: 0; 1357 left: 0; 1358 right: 0; 1359 bottom: 0; 1360} 1361.search-handoff-button .fake-textbox { 1362 opacity: 0.54; 1363 text-align: start; 1364} 1365.search-handoff-button .fake-caret { 1366 animation: caret-animation 1.3s steps(5, start) infinite; 1367 background: var(--newtab-text-primary-color); 1368 display: none; 1369 inset-inline-start: 47px; 1370 height: 17px; 1371 position: absolute; 1372 top: 16px; 1373 width: 1px; 1374} 1375@keyframes caret-animation { 1376 to { 1377 visibility: hidden; 1378 } 1379} 1380 1381@media (min-height: 701px) { 1382 body:not(.inline-onboarding) .fixed-search main { 1383 padding-top: 124px; 1384 } 1385 body:not(.inline-onboarding) .fixed-search.visible-logo main { 1386 padding-top: 254px; 1387 } 1388 body:not(.inline-onboarding) .fixed-search .search-wrapper { 1389 border-bottom: solid 1px var(--newtab-border-color); 1390 padding: 27px 0; 1391 background-color: var(--newtab-overlay-color); 1392 min-height: 95px; 1393 left: 0; 1394 position: fixed; 1395 top: 0; 1396 width: 100%; 1397 z-index: 9; 1398 } 1399 body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper { 1400 min-height: 45px; 1401 } 1402 body:not(.inline-onboarding) .fixed-search .search-wrapper input { 1403 background-position-x: 16px; 1404 background-size: 24px; 1405 } 1406 body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) { 1407 background-position-x: right 16px; 1408 } 1409 body:not(.inline-onboarding) .fixed-search .search-wrapper .search-handoff-button .fake-caret { 1410 top: 14px; 1411 } 1412 body:not(.inline-onboarding) .fixed-search .search-wrapper .logo-and-wordmark { 1413 display: none; 1414 } 1415 body:not(.inline-onboarding) .fixed-search .search-handoff-button { 1416 background-position-x: 16px; 1417 background-size: 24px; 1418 } 1419 body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) { 1420 background-position-x: right 16px; 1421 } 1422 body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret { 1423 top: 10px; 1424 } 1425} 1426.contentSearchSuggestionTable { 1427 border: 0; 1428 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2); 1429 transform: translateY(4px); 1430 background-color: var(--newtab-background-color); 1431} 1432.contentSearchSuggestionTable .contentSearchHeader { 1433 color: var(--newtab-text-secondary-color); 1434 background-color: var(--newtab-background-color-secondary); 1435} 1436.contentSearchSuggestionTable .contentSearchHeader, 1437.contentSearchSuggestionTable .contentSearchSettingsButton { 1438 border-color: var(--newtab-border-color); 1439} 1440.contentSearchSuggestionTable .contentSearchSuggestionsList { 1441 color: var(--newtab-text-primary-color); 1442 border: 0; 1443} 1444.contentSearchSuggestionTable .contentSearchOneOffsTable { 1445 border-top: solid 1px var(--newtab-border-color); 1446 background-color: var(--newtab-background-color); 1447} 1448.contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText { 1449 color: var(--newtab-text-primary-color); 1450} 1451.contentSearchSuggestionTable .contentSearchSuggestionRow.selected { 1452 background: var(--newtab-element-hover-color); 1453 color: var(--newtab-text-primary-color); 1454} 1455.contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active { 1456 background: var(--newtab-element-active-color); 1457} 1458.contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { 1459 fill: var(--newtab-text-secondary-color); 1460} 1461.contentSearchSuggestionTable .contentSearchOneOffItem { 1462 background-image: none; 1463 border-image: linear-gradient(transparent 18%, var(--newtab-border-color) 18%, var(--newtab-border-color) 82%, transparent 82%) 1; 1464 border-inline-end: 1px solid; 1465 position: relative; 1466} 1467.contentSearchSuggestionTable .contentSearchOneOffItem.selected { 1468 background: var(--newtab-element-hover-color); 1469} 1470.contentSearchSuggestionTable .contentSearchOneOffItem:active { 1471 background: var(--newtab-element-active-color); 1472} 1473.contentSearchSuggestionTable .contentSearchSettingsButton:hover { 1474 background: var(--newtab-element-hover-color); 1475 color: var(--newtab-text-primary-color); 1476} 1477 1478.contentSearchHeaderRow > td > img, 1479.contentSearchSuggestionRow > td > .historyIcon { 1480 margin-inline-start: 7px; 1481 margin-inline-end: 15px; 1482} 1483 1484.context-menu { 1485 background: var(--newtab-background-color-secondary); 1486 border-radius: 5px; 1487 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2); 1488 display: block; 1489 font-size: 14px; 1490 margin-inline-start: 5px; 1491 inset-inline-start: 100%; 1492 position: absolute; 1493 top: 6.75px; 1494 z-index: 8; 1495} 1496.context-menu > ul { 1497 list-style: none; 1498 margin: 0; 1499 padding: 5px 0; 1500} 1501.context-menu > ul > li { 1502 margin: 0; 1503 width: 100%; 1504} 1505.context-menu > ul > li.separator { 1506 border-bottom: 1px solid var(--newtab-border-color); 1507 margin: 5px 0; 1508} 1509.context-menu > ul > li > a, 1510.context-menu > ul > li > button { 1511 align-items: center; 1512 color: inherit; 1513 cursor: pointer; 1514 display: flex; 1515 width: 100%; 1516 line-height: 16px; 1517 outline: none; 1518 border: 0; 1519 padding: 3px 12px; 1520 white-space: nowrap; 1521} 1522.context-menu > ul > li > a:is(:focus, :hover), 1523.context-menu > ul > li > button:is(:focus, :hover) { 1524 background: var(--newtab-element-secondary-hover-color); 1525} 1526.context-menu > ul > li > a:active, 1527.context-menu > ul > li > button:active { 1528 background: var(--newtab-element-secondary-active-color); 1529} 1530.context-menu > ul > li > a.disabled, 1531.context-menu > ul > li > button.disabled { 1532 opacity: 0.4; 1533 pointer-events: none; 1534} 1535 1536.confirmation-dialog .modal { 1537 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); 1538 left: 0; 1539 margin: auto; 1540 position: fixed; 1541 right: 0; 1542 top: 20%; 1543 width: 400px; 1544} 1545.confirmation-dialog section { 1546 margin: 0; 1547} 1548.confirmation-dialog .modal-message { 1549 display: flex; 1550 padding: 16px; 1551 padding-bottom: 0; 1552} 1553.confirmation-dialog .modal-message p { 1554 margin: 0; 1555 margin-bottom: 16px; 1556} 1557.confirmation-dialog .actions { 1558 border: 0; 1559 display: flex; 1560 flex-wrap: nowrap; 1561 padding: 0 16px; 1562} 1563.confirmation-dialog .actions button { 1564 margin-inline-end: 16px; 1565 padding-inline-end: 18px; 1566 padding-inline-start: 18px; 1567 white-space: normal; 1568 width: 50%; 1569} 1570.confirmation-dialog .actions button.done { 1571 margin-inline-end: 0; 1572 margin-inline-start: 0; 1573} 1574.confirmation-dialog .icon { 1575 margin-inline-end: 16px; 1576} 1577 1578.modal-overlay { 1579 background: var(--newtab-overlay-color); 1580 height: 100%; 1581 left: 0; 1582 position: fixed; 1583 top: 0; 1584 width: 100%; 1585 z-index: 11001; 1586} 1587 1588.modal { 1589 background: var(--newtab-background-color-secondary); 1590 border: 1px solid var(--newtab-border-color); 1591 border-radius: 5px; 1592 font-size: 15px; 1593 z-index: 11002; 1594} 1595 1596@media (max-height: 701px) { 1597 .personalize-button { 1598 position: absolute; 1599 top: 16px; 1600 inset-inline-end: 16px; 1601 } 1602} 1603@media (min-height: 700px) { 1604 .personalize-button { 1605 position: fixed; 1606 top: 16px; 1607 inset-inline-end: 16px; 1608 z-index: 1000; 1609 } 1610} 1611.personalize-button { 1612 border: 0; 1613 border-radius: 4px; 1614 background-color: transparent; 1615 padding: 15px; 1616} 1617.personalize-button:hover { 1618 background-color: var(--newtab-element-hover-color); 1619} 1620.personalize-button:active { 1621 background-color: var(--newtab-element-active-color); 1622} 1623.personalize-button:focus-visible { 1624 border: 0; 1625 outline: 0; 1626 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); 1627} 1628.personalize-button.personalize-animate-exit-done { 1629 visibility: hidden; 1630} 1631 1632.customize-menu { 1633 color: var(--newtab-text-primary-color); 1634 background-color: var(--newtab-background-color-secondary); 1635 width: 432px; 1636 height: 100%; 1637 position: fixed; 1638 inset-block: 0; 1639 inset-inline-end: 0; 1640 z-index: 1001; 1641 padding: 16px; 1642 transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 250ms; 1643 overflow: auto; 1644 transform: translateX(435px); 1645 visibility: hidden; 1646 cursor: default; 1647} 1648@media (forced-colors: active) { 1649 .customize-menu { 1650 border-inline-start: solid 1px; 1651 } 1652} 1653.customize-menu:dir(rtl) { 1654 transform: translateX(-435px); 1655} 1656.customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-enter-active { 1657 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 1658 visibility: visible; 1659 transform: translateX(0); 1660} 1661.customize-menu.customize-animate-exit-active { 1662 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 1663} 1664.customize-menu .close-button { 1665 margin-inline-start: auto; 1666 margin-bottom: 28px; 1667 white-space: nowrap; 1668 display: block; 1669 background-color: var(--newtab-element-secondary-color); 1670 padding: 8px 10px; 1671 border: 1px solid rgba(0, 0, 0, 0.15); 1672 border-radius: 4px; 1673 color: var(--newtab-text-primary-color); 1674 font-size: 13px; 1675 font-weight: 600; 1676} 1677.customize-menu .close-button:hover { 1678 background-color: var(--newtab-element-secondary-hover-color); 1679} 1680.customize-menu .close-button:hover:active { 1681 background-color: var(--newtab-element-secondary-active-color); 1682} 1683 1684.grid-skip { 1685 display: contents; 1686} 1687 1688.home-section { 1689 display: grid; 1690 grid-template-columns: 1fr; 1691 grid-template-rows: repeat(4, auto); 1692 grid-row-gap: 32px; 1693 padding: 0 16px; 1694} 1695.home-section .section { 1696 display: grid; 1697 grid-template-rows: auto; 1698 grid-template-columns: auto 26px; 1699} 1700.home-section .section > div { 1701 grid-area: 1; 1702} 1703.home-section .section .title { 1704 grid-column: 1/-1; 1705 margin: 0; 1706 font-weight: 600; 1707 font-size: 16px; 1708 margin-bottom: 10px; 1709} 1710.home-section .section .subtitle { 1711 margin: 0; 1712 font-size: 14px; 1713} 1714.home-section .section .sponsored { 1715 font-size: 14px; 1716 margin-inline-start: 5px; 1717} 1718.home-section .section .check-wrapper { 1719 position: relative; 1720} 1721.home-section .section .sponsored-checkbox { 1722 margin-inline-start: 2px; 1723 width: 16px; 1724 height: 16px; 1725 vertical-align: middle; 1726 border: 1px solid rgba(0, 0, 0, 0.15); 1727 box-sizing: border-box; 1728 border-radius: 4px; 1729 appearance: none; 1730 background-color: var(--newtab-element-secondary-color); 1731} 1732.home-section .section .sponsored-checkbox:checked { 1733 -moz-context-properties: fill; 1734 fill: var(--newtab-primary-element-text-color); 1735 background: url("chrome://global/skin/icons/check.svg") center no-repeat; 1736 background-color: var(--newtab-primary-action-background); 1737} 1738@media (forced-colors: active) { 1739 .home-section .section .sponsored-checkbox:checked { 1740 fill: #000; 1741 } 1742} 1743.home-section .section .sponsored-checkbox:active + .checkmark { 1744 fill: var(--newtab-element-secondary-color); 1745} 1746.home-section .section .selector { 1747 color: var(--newtab-text-primary-color); 1748 width: 118px; 1749 display: block; 1750 border: 1px solid var(--newtab-border-color); 1751 border-radius: 4px; 1752 appearance: none; 1753 padding-block: 7px; 1754 padding-inline: 10px 13px; 1755 margin-inline-start: 2px; 1756 margin-bottom: 2px; 1757 -moz-context-properties: fill; 1758 fill: var(--newtab-text-primary-color); 1759 background: url("chrome://global/skin/icons/arrow-down-12.svg") right no-repeat; 1760 background-size: 8px; 1761 background-origin: content-box; 1762 background-color: var(--newtab-background-color-secondary); 1763} 1764.home-section .section .selector:dir(rtl) { 1765 background-position-x: left; 1766} 1767.home-section .section .switch { 1768 position: relative; 1769 display: inline-block; 1770 width: 26px; 1771 height: 16px; 1772 grid-column: 2; 1773 margin-top: 2px; 1774} 1775.home-section .section .switch input { 1776 opacity: 0; 1777 width: 0; 1778 height: 0; 1779} 1780.home-section .section .slider { 1781 position: absolute; 1782 inset: 0; 1783 transition: transform 250ms; 1784 border-radius: 13px; 1785 border: 1px solid rgba(0, 0, 0, 0.15); 1786 background-color: var(--newtab-element-secondary-color); 1787} 1788.home-section .section .slider::before { 1789 position: absolute; 1790 content: ""; 1791 height: 8px; 1792 width: 8px; 1793 inset-inline-start: 3px; 1794 bottom: 3px; 1795 background-color: var(--newtab-primary-element-text-color); 1796 transition: transform 250ms; 1797 border-radius: 50%; 1798 outline: 1px solid rgba(0, 0, 0, 0.15); 1799} 1800.home-section .section .switch input:focus-visible + .slider { 1801 outline: 0; 1802 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 1803} 1804.home-section .section .switch input:not(:checked):focus-visible + .slider { 1805 border: 1px solid var(--newtab-primary-action-background); 1806} 1807.home-section .section input:checked + .slider { 1808 background-color: var(--newtab-primary-action-background); 1809} 1810.home-section .section input:checked + .slider::before { 1811 transform: translateX(10px); 1812} 1813.home-section .section input:checked + .slider:dir(rtl)::before { 1814 transform: translateX(-10px); 1815} 1816.home-section .section .more-info-top-wrapper, 1817.home-section .section .more-info-pocket-wrapper { 1818 margin-inline-start: -2px; 1819 overflow: hidden; 1820 transition: max-height 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895); 1821} 1822.home-section .section .more-info-top-wrapper.shrink, 1823.home-section .section .more-info-pocket-wrapper.shrink { 1824 max-height: 0; 1825} 1826.home-section .section .more-info-top-wrapper .more-information, 1827.home-section .section .more-info-pocket-wrapper .more-information { 1828 padding-top: 12px; 1829 position: relative; 1830 transition: top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895); 1831} 1832.home-section .section .more-info-top-wrapper .more-information.expand, 1833.home-section .section .more-info-pocket-wrapper .more-information.expand { 1834 top: 0; 1835} 1836.home-section .section .more-info-top-wrapper { 1837 max-height: 78px; 1838} 1839.home-section .section .more-info-top-wrapper .more-information { 1840 top: -77px; 1841} 1842.home-section .section .more-info-top-wrapper .check-wrapper { 1843 margin-top: 10px; 1844} 1845.home-section .section .more-info-pocket-wrapper { 1846 max-height: 35px; 1847} 1848.home-section .section .more-info-pocket-wrapper .more-information { 1849 top: -35px; 1850} 1851.home-section .divider { 1852 border-top: 1px var(--newtab-border-color) solid; 1853 margin: 0 -16px; 1854} 1855.home-section .external-link { 1856 font-size: 14px; 1857 cursor: pointer; 1858 border: 1px solid transparent; 1859 border-radius: 4px; 1860 -moz-context-properties: fill; 1861 fill: var(--newtab-text-primary-color); 1862 background: url("chrome://global/skin/icons/settings.svg") left no-repeat; 1863 background-size: 16px; 1864 padding-inline-start: 21px; 1865 margin-bottom: 20px; 1866} 1867@media (forced-colors: active) { 1868 .home-section .external-link { 1869 padding: 8px 10px; 1870 padding-inline-start: 21px; 1871 } 1872} 1873.home-section .external-link:dir(rtl) { 1874 background-position-x: right; 1875} 1876.home-section .external-link:hover { 1877 text-decoration: underline; 1878} 1879 1880.home-section .section .sponsored-checkbox:focus-visible, 1881.selector:focus-visible, 1882.external-link:focus-visible, 1883.close-button:focus-visible { 1884 border: 1px solid var(--newtab-primary-action-background); 1885 outline: 0; 1886 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 1887} 1888 1889.card-outer { 1890 background: var(--newtab-background-color-secondary); 1891 border-radius: 8px; 1892 display: inline-block; 1893 height: 266px; 1894 margin-inline-end: 32px; 1895 position: relative; 1896 width: 100%; 1897} 1898.card-outer .context-menu-button { 1899 background-clip: padding-box; 1900 background-color: var(--newtab-background-color-secondary); 1901 background-image: url("chrome://global/skin/icons/more.svg"); 1902 background-position: 55%; 1903 border: 1px solid var(--newtab-border-color); 1904 border-radius: 100%; 1905 box-shadow: 0 2px rgba(12, 12, 13, 0.1); 1906 cursor: pointer; 1907 fill: var(--newtab-text-primary-color); 1908 height: 27px; 1909 inset-inline-end: -13.5px; 1910 opacity: 0; 1911 position: absolute; 1912 top: -13.5px; 1913 transform: scale(0.25); 1914 transition-duration: 150ms; 1915 transition-property: transform, opacity; 1916 width: 27px; 1917} 1918.card-outer .context-menu-button:is(:active, :focus) { 1919 opacity: 1; 1920 transform: scale(1); 1921} 1922.card-outer:is(:focus):not(.placeholder) { 1923 border: 0; 1924 outline: 0; 1925 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); 1926 transition: none; 1927} 1928.card-outer:hover { 1929 box-shadow: none; 1930 transition: none; 1931} 1932.card-outer.placeholder { 1933 background: transparent; 1934} 1935.card-outer.placeholder .card-preview-image-outer, 1936.card-outer.placeholder .card-context { 1937 display: none; 1938} 1939.card-outer .card { 1940 border-radius: 8px; 1941 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 1942 height: 100%; 1943} 1944.card-outer > a { 1945 color: inherit; 1946 display: block; 1947 height: 100%; 1948 outline: none; 1949 position: absolute; 1950 width: 100%; 1951} 1952.card-outer > a:is(:focus) .card { 1953 border: 0; 1954 outline: 0; 1955 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); 1956} 1957.card-outer > a:is(.active, :focus) .card { 1958 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 1959 transition: box-shadow 150ms; 1960} 1961.card-outer > a:is(.active, :focus) .card-title { 1962 color: var(--newtab-primary-action-background); 1963} 1964.card-outer:is(:hover, :focus, .active):not(.placeholder) { 1965 outline: none; 1966} 1967.card-outer:is(:hover, :focus, .active):not(.placeholder) .context-menu-button { 1968 opacity: 1; 1969 transform: scale(1); 1970 transition-delay: 333ms; 1971} 1972.card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title { 1973 color: var(--newtab-primary-action-background); 1974} 1975.card-outer:is(:hover, :focus, .active):not(.placeholder) .alternate ~ .card-host-name { 1976 display: none; 1977} 1978.card-outer:is(:hover, :focus, .active):not(.placeholder) .card-host-name.alternate { 1979 display: block; 1980} 1981.card-outer .card-preview-image-outer { 1982 background-color: var(--newtab-element-secondary-color); 1983 border-radius: 8px 8px 0 0; 1984 height: 122px; 1985 overflow: hidden; 1986 position: relative; 1987} 1988.card-outer .card-preview-image-outer::after { 1989 border-bottom: 1px solid var(--newtab-card-hairline-color); 1990 bottom: 0; 1991 content: ""; 1992 position: absolute; 1993 width: 100%; 1994} 1995.card-outer .card-preview-image-outer .card-preview-image { 1996 background-position: center; 1997 background-repeat: no-repeat; 1998 background-size: cover; 1999 height: 100%; 2000 opacity: 0; 2001 transition: opacity 1s cubic-bezier(0.07, 0.95, 0, 1); 2002 width: 100%; 2003} 2004.card-outer .card-preview-image-outer .card-preview-image.loaded { 2005 opacity: 1; 2006} 2007.card-outer .card-details { 2008 padding: 15px 16px 12px; 2009} 2010.card-outer .card-text { 2011 max-height: 78px; 2012 overflow: hidden; 2013} 2014.card-outer .card-text.no-host-name, .card-outer .card-text.no-context { 2015 max-height: 97px; 2016} 2017.card-outer .card-text.no-host-name.no-context { 2018 max-height: 116px; 2019} 2020.card-outer .card-text:not(.no-description) .card-title { 2021 max-height: 57px; 2022 overflow: hidden; 2023} 2024.card-outer .card-host-name { 2025 color: var(--newtab-text-secondary-color); 2026 font-size: 10px; 2027 overflow: hidden; 2028 padding-bottom: 4px; 2029 text-overflow: ellipsis; 2030 text-transform: uppercase; 2031 white-space: nowrap; 2032} 2033.card-outer .card-host-name.alternate { 2034 display: none; 2035} 2036.card-outer .card-title { 2037 font-size: 14px; 2038 font-weight: 600; 2039 line-height: 19px; 2040 margin: 0 0 2px; 2041 word-wrap: break-word; 2042} 2043.card-outer .card-description { 2044 font-size: 12px; 2045 line-height: 19px; 2046 margin: 0; 2047 overflow: hidden; 2048 word-wrap: break-word; 2049} 2050.card-outer .card-context { 2051 bottom: 0; 2052 color: var(--newtab-text-secondary-color); 2053 display: flex; 2054 font-size: 11px; 2055 inset-inline-start: 0; 2056 padding: 9px 16px 9px 14px; 2057 position: absolute; 2058} 2059.card-outer .card-context-icon { 2060 fill: var(--newtab-text-secondary-color); 2061 height: 22px; 2062 margin-inline-end: 6px; 2063} 2064.card-outer .card-context-label { 2065 flex-grow: 1; 2066 line-height: 22px; 2067 overflow: hidden; 2068 text-overflow: ellipsis; 2069 white-space: nowrap; 2070} 2071 2072@media (min-width: 1122px) { 2073 .normal-cards .card-outer { 2074 height: 370px; 2075 } 2076 .normal-cards .card-outer .card-preview-image-outer { 2077 height: 155px; 2078 } 2079 .normal-cards .card-outer .card-details { 2080 padding: 13px 16px 12px; 2081 } 2082 .normal-cards .card-outer .card-text { 2083 max-height: 140px; 2084 } 2085 .normal-cards .card-outer .card-host-name { 2086 font-size: 12px; 2087 padding-bottom: 5px; 2088 } 2089 .normal-cards .card-outer .card-title { 2090 font-size: 17px; 2091 line-height: 23px; 2092 margin-bottom: 0; 2093 } 2094 .normal-cards .card-outer .card-text:not(.no-description) .card-title { 2095 max-height: 69px; 2096 } 2097 .normal-cards .card-outer .card-description { 2098 font-size: 15px; 2099 line-height: 23px; 2100 } 2101 .normal-cards .card-outer .card-context { 2102 bottom: 4px; 2103 font-size: 14px; 2104 } 2105} 2106 2107.compact-cards .card-outer { 2108 height: 160px; 2109} 2110.compact-cards .card-outer .card-preview-image-outer { 2111 height: 108px; 2112} 2113.compact-cards .card-outer .card-details { 2114 padding: 12px 16px; 2115} 2116.compact-cards .card-outer .card-host-name { 2117 line-height: 10px; 2118} 2119.compact-cards .card-outer .card-text .card-title, .compact-cards .card-outer .card-text:not(.no-description) .card-title { 2120 font-size: 12px; 2121 line-height: 13px; 2122 max-height: 17px; 2123 overflow: hidden; 2124 padding: 0 0 4px; 2125 text-overflow: ellipsis; 2126 white-space: nowrap; 2127} 2128.compact-cards .card-outer .card-description { 2129 display: none; 2130} 2131.compact-cards .card-outer .card-context { 2132 background-color: var(--newtab-background-color-secondary); 2133 border-radius: 16px; 2134 clip-path: inset(-1px -1px 4px); 2135 height: 32px; 2136 width: 32px; 2137 padding: 8px; 2138 top: 91px; 2139 inset-inline-end: 12px; 2140 inset-inline-start: auto; 2141} 2142.compact-cards .card-outer .card-context::after { 2143 border: 1px solid var(--newtab-card-hairline-color); 2144 border-bottom: 0; 2145 border-radius: 17px 17px 0 0; 2146 content: ""; 2147 position: absolute; 2148 height: 17px; 2149 width: 34px; 2150 top: -1px; 2151 left: -1px; 2152} 2153.compact-cards .card-outer .card-context .card-context-icon { 2154 margin-inline-end: 0; 2155 height: 16px; 2156 width: 16px; 2157} 2158.compact-cards .card-outer .card-context .card-context-icon.icon-bookmark-added { 2159 fill: #0A84FF; 2160} 2161.compact-cards .card-outer .card-context .card-context-icon.icon-download { 2162 fill: #12BC00; 2163} 2164.compact-cards .card-outer .card-context .card-context-icon.icon-pocket { 2165 fill: #EF4056; 2166} 2167.compact-cards .card-outer .card-context .card-context-label { 2168 display: none; 2169} 2170@media not all and (min-width: 1122px) { 2171 .compact-cards .hide-for-narrow { 2172 display: none; 2173 } 2174} 2175 2176.collapsible-section { 2177 padding: 10px 25px; 2178} 2179.collapsible-section .section-title-container { 2180 margin: 0; 2181} 2182.collapsible-section .section-title-container.has-subtitle { 2183 display: flex; 2184 flex-direction: column; 2185} 2186@media (min-width: 866px) { 2187 .collapsible-section .section-title-container.has-subtitle { 2188 flex-direction: row; 2189 align-items: baseline; 2190 justify-content: space-between; 2191 } 2192} 2193.collapsible-section .section-title { 2194 font-size: 17px; 2195 font-weight: 600; 2196 color: var(--newtab-text-primary-color); 2197} 2198.collapsible-section .section-title.grey-title { 2199 color: var(--newtab-text-primary-color); 2200 display: inline-block; 2201 fill: var(--newtab-text-primary-color); 2202 vertical-align: middle; 2203} 2204.collapsible-section .section-title .section-title-contents { 2205 vertical-align: top; 2206} 2207@media (max-width: 609px) { 2208 .collapsible-section .section-title .section-title-contents { 2209 display: block; 2210 } 2211 .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper { 2212 display: block; 2213 text-align: center; 2214 } 2215 .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper .learn-more-link { 2216 margin-inline-start: 0; 2217 } 2218} 2219.collapsible-section .section-sub-title { 2220 font-size: 14px; 2221 line-height: 16px; 2222 color: var(--newtab-text-secondary-color); 2223 opacity: 0.3; 2224} 2225.collapsible-section .section-top-bar { 2226 min-height: 19px; 2227 margin-bottom: 13px; 2228 position: relative; 2229} 2230.collapsible-section.active { 2231 background: var(--newtab-element-hover-color); 2232 border-radius: 4px; 2233} 2234.collapsible-section .learn-more-link { 2235 font-size: 13px; 2236 margin-inline-start: 12px; 2237} 2238.collapsible-section .learn-more-link a { 2239 color: var(--newtab-primary-action-background); 2240} 2241.collapsible-section .section-body-fallback { 2242 height: 266px; 2243} 2244.collapsible-section .section-body { 2245 margin: 0 -7px; 2246 padding: 0 7px; 2247} 2248.collapsible-section .section-body.animating { 2249 overflow: hidden; 2250 pointer-events: none; 2251} 2252.collapsible-section[data-section-id=topsites] .section-top-bar { 2253 display: none; 2254} 2255@media (min-width: 610px) and (max-width: 865px) { 2256 .collapsible-section[data-section-id=topstories] .card-outer:first-child { 2257 display: none; 2258 } 2259} 2260 2261.asrouter-toggle { 2262 position: fixed; 2263 top: 50px; 2264 inset-inline-end: 15px; 2265 border: 0; 2266 background: none; 2267 z-index: 1; 2268 border-radius: 2px; 2269} 2270.asrouter-toggle .icon-devtools { 2271 background-image: url("chrome://global/skin/icons/developer.svg"); 2272 padding: 15px; 2273} 2274.asrouter-toggle:dir(rtl) { 2275 transform: scaleX(-1); 2276} 2277.asrouter-toggle:hover { 2278 background: var(--newtab-element-hover-color); 2279} 2280.asrouter-toggle.expanded { 2281 background: rgba(0, 0, 0, 0.2); 2282} 2283 2284.asrouter-admin { 2285 position: fixed; 2286 top: 0; 2287 inset-inline-start: 0; 2288 width: 100%; 2289 background: var(--newtab-background-color); 2290 height: 100%; 2291 overflow-y: scroll; 2292 margin: 0 auto; 2293 font-size: 14px; 2294 padding-inline-start: 240px; 2295 color: var(--newtab-text-primary-color); 2296} 2297.asrouter-admin.collapsed { 2298 display: none; 2299} 2300.asrouter-admin .sidebar { 2301 inset-inline-start: 0; 2302 position: fixed; 2303 width: 240px; 2304 padding: 30px 20px; 2305} 2306.asrouter-admin .sidebar ul { 2307 margin: 0; 2308 padding: 0; 2309 list-style: none; 2310} 2311.asrouter-admin .sidebar li a { 2312 padding: 10px 34px; 2313 display: block; 2314 color: var(--lwt-sidebar-text-color); 2315} 2316.asrouter-admin .sidebar li a:hover { 2317 background: var(--newtab-background-color-secondary); 2318} 2319.asrouter-admin h1 { 2320 font-weight: 200; 2321 font-size: 32px; 2322} 2323.asrouter-admin h2 .button, 2324.asrouter-admin p .button { 2325 font-size: 14px; 2326 padding: 6px 12px; 2327 margin-inline-start: 5px; 2328 margin-bottom: 0; 2329} 2330.asrouter-admin .general-textarea { 2331 direction: ltr; 2332 width: 740px; 2333 height: 500px; 2334 overflow: auto; 2335 resize: none; 2336 border-radius: 4px; 2337 display: flex; 2338} 2339.asrouter-admin .wnp-textarea { 2340 direction: ltr; 2341 width: 740px; 2342 height: 500px; 2343 overflow: auto; 2344 resize: none; 2345 border-radius: 4px; 2346 display: flex; 2347} 2348.asrouter-admin .json-button { 2349 display: inline-flex; 2350 font-size: 10px; 2351 padding: 4px 10px; 2352 margin-bottom: 6px; 2353 margin-inline-end: 4px; 2354} 2355.asrouter-admin .json-button:hover { 2356 background-color: var(--newtab-element-hover-color); 2357 box-shadow: none; 2358} 2359.asrouter-admin table { 2360 border-collapse: collapse; 2361 width: 100%; 2362} 2363.asrouter-admin table.minimal-table { 2364 border-collapse: collapse; 2365 border: 1px solid var(--newtab-border-color); 2366} 2367.asrouter-admin table.minimal-table td { 2368 padding: 8px; 2369} 2370.asrouter-admin table.minimal-table td:first-child { 2371 width: 1%; 2372 white-space: nowrap; 2373} 2374.asrouter-admin table.minimal-table td:not(:first-child) { 2375 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; 2376} 2377.asrouter-admin table.errorReporting tr { 2378 border: 1px solid var(--newtab-background-color-secondary); 2379} 2380.asrouter-admin table.errorReporting td { 2381 padding: 4px; 2382} 2383.asrouter-admin table.errorReporting td[rowspan] { 2384 border: 1px solid var(--newtab-background-color-secondary); 2385} 2386.asrouter-admin .sourceLabel { 2387 background: var(--newtab-background-color-secondary); 2388 padding: 2px 5px; 2389 border-radius: 3px; 2390} 2391.asrouter-admin .sourceLabel.isDisabled { 2392 background: rgba(215, 0, 34, 0.3); 2393 color: var(--newtab-status-error); 2394} 2395.asrouter-admin .message-item:first-child td { 2396 border-top: 1px solid var(--newtab-border-color); 2397} 2398.asrouter-admin .message-item td { 2399 vertical-align: top; 2400 padding: 8px; 2401 border-bottom: 1px solid var(--newtab-border-color); 2402} 2403.asrouter-admin .message-item td.min { 2404 width: 1%; 2405 white-space: nowrap; 2406} 2407.asrouter-admin .message-item td.message-summary { 2408 width: 60%; 2409} 2410.asrouter-admin .message-item td.button-column { 2411 width: 15%; 2412} 2413.asrouter-admin .message-item td:first-child { 2414 border-inline-start: 1px solid var(--newtab-border-color); 2415} 2416.asrouter-admin .message-item td:last-child { 2417 border-inline-end: 1px solid var(--newtab-border-color); 2418} 2419.asrouter-admin .message-item.blocked .message-id, 2420.asrouter-admin .message-item.blocked .message-summary { 2421 opacity: 0.5; 2422} 2423.asrouter-admin .message-item.blocked .message-id { 2424 opacity: 0.5; 2425} 2426.asrouter-admin .message-item .message-id { 2427 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; 2428 font-size: 12px; 2429} 2430.asrouter-admin .providerUrl { 2431 font-size: 12px; 2432} 2433.asrouter-admin pre { 2434 background: var(--newtab-background-color-secondary); 2435 margin: 0; 2436 padding: 8px; 2437 font-size: 12px; 2438 max-width: 750px; 2439 overflow: auto; 2440 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; 2441} 2442.asrouter-admin .errorState { 2443 border: 1px solid var(--newtab-status-error); 2444} 2445.asrouter-admin .helpLink { 2446 padding: 10px; 2447 display: flex; 2448 background: rgba(0, 0, 0, 0.1); 2449 border-radius: 3px; 2450} 2451.asrouter-admin .helpLink a { 2452 text-decoration: underline; 2453} 2454.asrouter-admin .ds-component { 2455 margin-bottom: 20px; 2456} 2457.asrouter-admin .modalOverlayInner { 2458 height: 80%; 2459} 2460.asrouter-admin .clearButton { 2461 border: 0; 2462 padding: 4px; 2463 border-radius: 4px; 2464 display: flex; 2465} 2466.asrouter-admin .clearButton:hover { 2467 background: var(--newtab-element-hover-color); 2468} 2469.asrouter-admin .collapsed { 2470 display: none; 2471} 2472.asrouter-admin .icon { 2473 display: inline-table; 2474 cursor: pointer; 2475 width: 18px; 2476 height: 18px; 2477} 2478 2479.pocket-logged-in-cta { 2480 font-size: 13px; 2481 margin-inline-end: 20px; 2482 display: flex; 2483 align-items: flex-start; 2484} 2485.pocket-logged-in-cta .pocket-cta-button { 2486 white-space: nowrap; 2487 background: var(--newtab-primary-action-background); 2488 letter-spacing: -0.34px; 2489 color: #FFF; 2490 border-radius: 4px; 2491 cursor: pointer; 2492 max-width: 130px; 2493 margin-top: -1px; 2494 min-height: 18px; 2495 padding: 0 8px; 2496 display: inline-flex; 2497 justify-content: center; 2498 align-items: center; 2499 font-size: 11px; 2500 margin-inline-end: 10px; 2501} 2502.pocket-logged-in-cta .cta-text { 2503 font-weight: normal; 2504 font-size: 13px; 2505 line-height: 1.230769231; 2506} 2507.pocket-logged-in-cta .pocket-cta-button, 2508.pocket-logged-in-cta .cta-text { 2509 vertical-align: top; 2510} 2511 2512.more-recommendations { 2513 display: flex; 2514 align-items: center; 2515 white-space: nowrap; 2516 line-height: 1.230769231; 2517} 2518.more-recommendations::after { 2519 background: url("chrome://global/skin/icons/arrow-right-12.svg") no-repeat center center; 2520 content: ""; 2521 -moz-context-properties: fill; 2522 display: inline-block; 2523 fill: var(--newtab-primary-action-background); 2524 height: 16px; 2525 margin-inline-start: 5px; 2526 vertical-align: top; 2527 width: 12px; 2528} 2529.more-recommendations:dir(rtl)::after { 2530 background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); 2531} 2532 2533.discovery-stream.ds-layout { 2534 --gridColumnGap: 48px; 2535 --gridRowGap: 24px; 2536 grid-template-columns: repeat(12, 1fr); 2537 grid-column-gap: var(--gridColumnGap); 2538 grid-row-gap: var(--gridRowGap); 2539 margin: 0 auto; 2540} 2541.discovery-stream.ds-layout .ds-column-12 { 2542 grid-column-start: auto; 2543 grid-column-end: span 12; 2544} 2545.discovery-stream.ds-layout .ds-column-11 { 2546 grid-column-start: auto; 2547 grid-column-end: span 11; 2548} 2549.discovery-stream.ds-layout .ds-column-10 { 2550 grid-column-start: auto; 2551 grid-column-end: span 10; 2552} 2553.discovery-stream.ds-layout .ds-column-9 { 2554 grid-column-start: auto; 2555 grid-column-end: span 9; 2556} 2557.discovery-stream.ds-layout .ds-column-8 { 2558 grid-column-start: auto; 2559 grid-column-end: span 8; 2560} 2561.discovery-stream.ds-layout .ds-column-7 { 2562 grid-column-start: auto; 2563 grid-column-end: span 7; 2564} 2565.discovery-stream.ds-layout .ds-column-6 { 2566 grid-column-start: auto; 2567 grid-column-end: span 6; 2568} 2569.discovery-stream.ds-layout .ds-column-5 { 2570 grid-column-start: auto; 2571 grid-column-end: span 5; 2572} 2573.discovery-stream.ds-layout .ds-column-4 { 2574 grid-column-start: auto; 2575 grid-column-end: span 4; 2576} 2577.discovery-stream.ds-layout .ds-column-3 { 2578 grid-column-start: auto; 2579 grid-column-end: span 3; 2580} 2581.discovery-stream.ds-layout .ds-column-2 { 2582 grid-column-start: auto; 2583 grid-column-end: span 2; 2584} 2585.discovery-stream.ds-layout .ds-column-1 { 2586 grid-column-start: auto; 2587 grid-column-end: span 1; 2588} 2589.discovery-stream.ds-layout .ds-column-grid { 2590 display: grid; 2591 grid-row-gap: var(--gridRowGap); 2592} 2593.discovery-stream.ds-layout .ds-column-grid > div:empty { 2594 display: none; 2595} 2596 2597.ds-header { 2598 margin: 8px 0; 2599} 2600.ds-header .ds-context { 2601 font-weight: 400; 2602} 2603 2604.ds-header, 2605.ds-layout .section-title span { 2606 color: var(--newtab-text-primary-color); 2607 font-size: 17px; 2608 font-weight: 600; 2609 line-height: 20px; 2610} 2611.ds-header .icon, 2612.ds-layout .section-title span .icon { 2613 fill: var(--newtab-text-secondary-color); 2614} 2615 2616.collapsible-section.ds-layout { 2617 margin: auto; 2618} 2619.collapsible-section.ds-layout .section-top-bar .learn-more-link a { 2620 color: var(--newtab-primary-action-background); 2621 font-weight: 500; 2622} 2623.collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { 2624 text-decoration: underline; 2625} 2626 2627.ds-card-grid { 2628 display: grid; 2629 grid-gap: 24px; 2630} 2631.ds-card-grid.ds-card-grid-compact { 2632 grid-gap: 20px; 2633} 2634.ds-card-grid .ds-card { 2635 background: #FFF; 2636 border-radius: 4px; 2637} 2638[lwt-newtab-brighttext] .ds-card-grid .ds-card { 2639 background: none; 2640} 2641.ds-card-grid .ds-sub-header { 2642 grid-column: 1/-1; 2643 margin-bottom: -7px; 2644} 2645@media (min-width: 866px) { 2646 .ds-column-12 .ds-card-grid.ds-card-grid-hero { 2647 grid-template-columns: repeat(12, 1fr); 2648 } 2649 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(1) { 2650 grid-column-start: 1; 2651 grid-column-end: span 6; 2652 grid-row-start: 1; 2653 grid-row-end: span 2; 2654 } 2655 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(1) .excerpt { 2656 -webkit-line-clamp: 4; 2657 } 2658 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(2), 2659.ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(4) { 2660 grid-column-start: 7; 2661 grid-column-end: span 3; 2662 } 2663 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(3), 2664.ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(5) { 2665 grid-column-start: 10; 2666 grid-column-end: span 3; 2667 } 2668 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) .excerpt { 2669 display: none; 2670 } 2671 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) .meta { 2672 padding: 8px; 2673 } 2674 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) .meta .title { 2675 font-size: 13px; 2676 line-height: 19px; 2677 } 2678 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) .meta .story-sponsored-label { 2679 -webkit-line-clamp: none; 2680 line-height: 19px; 2681 } 2682 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+6) { 2683 grid-column-start: auto; 2684 grid-column-end: span 4; 2685 } 2686} 2687@media (min-width: 1122px) { 2688 .ds-column-12 .ds-card-grid.ds-card-grid-hero .ds-card:nth-child(n+2):nth-child(-n+5) { 2689 min-height: 222px; 2690 } 2691} 2692.ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { 2693 border-radius: 8px; 2694 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 2695} 2696[lwt-newtab-brighttext] .ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) { 2697 background: var(--newtab-background-color-secondary); 2698} 2699.ds-card-grid.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { 2700 border-radius: 8px 8px 0 0; 2701} 2702.ds-card-grid.ds-card-grid-no-border .ds-card { 2703 background: none; 2704} 2705.ds-card-grid.ds-card-grid-no-border .ds-card .meta { 2706 padding: 12px 0; 2707} 2708.ds-card-grid .ds-card-link:focus { 2709 border: 0; 2710 outline: 0; 2711 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); 2712 transition: none; 2713 border-radius: 8px; 2714} 2715.ds-column-5 .ds-card-grid, .ds-column-6 .ds-card-grid, .ds-column-7 .ds-card-grid, .ds-column-8 .ds-card-grid { 2716 grid-template-columns: repeat(2, 1fr); 2717} 2718.ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { 2719 grid-template-columns: repeat(1, 1fr); 2720} 2721@media (min-width: 610px) { 2722 .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { 2723 grid-template-columns: repeat(2, 1fr); 2724 } 2725} 2726@media (min-width: 866px) { 2727 .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { 2728 grid-template-columns: repeat(3, 1fr); 2729 } 2730} 2731.ds-column-9 .ds-card-grid .title, .ds-column-10 .ds-card-grid .title, .ds-column-11 .ds-card-grid .title, .ds-column-12 .ds-card-grid .title { 2732 font-size: 17px; 2733 line-height: 24px; 2734} 2735.ds-column-9 .ds-card-grid .excerpt, .ds-column-10 .ds-card-grid .excerpt, .ds-column-11 .ds-card-grid .excerpt, .ds-column-12 .ds-card-grid .excerpt { 2736 font-size: 15px; 2737 -webkit-line-clamp: 3; 2738 line-height: 24px; 2739} 2740.ds-card-grid.empty { 2741 grid-template-columns: auto; 2742} 2743.ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant { 2744 grid-template-columns: repeat(1, 1fr); 2745} 2746@media (min-width: 610px) { 2747 .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant { 2748 grid-template-columns: repeat(2, 1fr); 2749 } 2750} 2751@media (min-width: 866px) { 2752 .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant { 2753 grid-template-columns: repeat(3, 1fr); 2754 } 2755} 2756@media (min-width: 1122px) { 2757 .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant { 2758 grid-template-columns: repeat(4, 1fr); 2759 } 2760} 2761.ds-card-grid.ds-card-grid-four-card-variant .ds-card.placeholder { 2762 min-height: 247px; 2763} 2764.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-footer { 2765 margin-top: 8px; 2766} 2767.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source, 2768.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .ds-last-card-desc, 2769.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label, 2770.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label { 2771 color: var(--newtab-text-secondary-color); 2772 -webkit-line-clamp: 2; 2773} 2774.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source, 2775.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .ds-last-card-desc, 2776.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label { 2777 font-size: 13px; 2778} 2779.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label { 2780 font-size: 11.7px; 2781} 2782.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-badge-icon { 2783 margin-inline-end: 2px; 2784 margin-bottom: 2px; 2785 height: 14px; 2786 width: 14px; 2787 background-size: 14px; 2788} 2789.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .title { 2790 font-size: 14px; 2791 line-height: 20px; 2792} 2793.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .info-wrap { 2794 flex-grow: 0; 2795} 2796.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout { 2797 grid-template-columns: repeat(1, 1fr); 2798} 2799@media (min-width: 610px) { 2800 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout { 2801 grid-template-columns: repeat(2, 1fr); 2802 } 2803} 2804@media (min-width: 866px) { 2805 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout { 2806 grid-template-columns: repeat(3, 1fr); 2807 } 2808} 2809@media (max-height: 1065px) { 2810 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt { 2811 display: none; 2812 } 2813} 2814@media (max-width: 1122px) { 2815 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder { 2816 min-height: 247px; 2817 } 2818 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer { 2819 margin-top: 8px; 2820 } 2821 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2822.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2823.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 2824.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2825.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2826.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 2827.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2828.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2829.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 2830.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2831.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2832.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 2833.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { 2834 color: var(--newtab-text-secondary-color); 2835 -webkit-line-clamp: 2; 2836 } 2837 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2838.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2839.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2840.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2841.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2842.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2843.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2844.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2845.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label { 2846 font-size: 13px; 2847 } 2848 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { 2849 font-size: 11.7px; 2850 } 2851 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon { 2852 margin-inline-end: 2px; 2853 margin-bottom: 2px; 2854 height: 14px; 2855 width: 14px; 2856 background-size: 14px; 2857 } 2858 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title { 2859 font-size: 14px; 2860 line-height: 20px; 2861 } 2862 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap { 2863 flex-grow: 0; 2864 } 2865} 2866@media (min-width: 1122px) and (max-height: 964px) { 2867 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout { 2868 grid-template-columns: repeat(4, 1fr); 2869 } 2870 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder { 2871 min-height: 247px; 2872 } 2873 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer { 2874 margin-top: 8px; 2875 } 2876 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2877.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2878.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 2879.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2880.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2881.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 2882.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2883.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2884.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 2885.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2886.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2887.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 2888.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { 2889 color: var(--newtab-text-secondary-color); 2890 -webkit-line-clamp: 2; 2891 } 2892 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2893.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2894.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2895.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2896.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2897.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2898.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 2899.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .ds-last-card-desc, 2900.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label { 2901 font-size: 13px; 2902 } 2903 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { 2904 font-size: 11.7px; 2905 } 2906 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon { 2907 margin-inline-end: 2px; 2908 margin-bottom: 2px; 2909 height: 14px; 2910 width: 14px; 2911 background-size: 14px; 2912 } 2913 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title { 2914 font-size: 14px; 2915 line-height: 20px; 2916 } 2917 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap { 2918 flex-grow: 0; 2919 } 2920} 2921 2922.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder), 2923.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) { 2924 box-shadow: none; 2925 background: none; 2926} 2927.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .ds-card-link:focus, 2928.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .ds-card-link:focus { 2929 box-shadow: none; 2930} 2931.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img, 2932.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img { 2933 border: 0; 2934 outline: 0; 2935 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); 2936} 2937.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img, 2938.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img { 2939 border-radius: 8px; 2940 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 2941} 2942.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img.last-card-message-image, 2943.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .img-wrapper .img img.last-card-message-image { 2944 background: transparent; 2945 box-shadow: none; 2946 object-fit: contain; 2947} 2948.outer-wrapper .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .meta, 2949.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background.ds-card-grid-border .ds-card:not(.placeholder) .meta { 2950 padding: 12px 0 0; 2951} 2952 2953.ds-layout .ds-card-grid-load-more-button { 2954 display: block; 2955 margin: 32px auto 0; 2956 font-size: 13px; 2957 line-height: 16px; 2958 border-radius: 4px; 2959} 2960 2961.ds-dismiss.ds-dismiss-ds-collection .ds-dismiss-button { 2962 margin: 15px 0 0; 2963 inset-inline-end: 25px; 2964} 2965.ds-dismiss.ds-dismiss-ds-collection.hovering { 2966 background: var(--newtab-element-hover-color); 2967} 2968 2969.ds-collection-card-grid { 2970 padding: 10px 25px 25px; 2971 margin: 0 0 20px; 2972} 2973.ds-collection-card-grid .story-footer { 2974 display: none; 2975} 2976.ds-collection-card-grid .ds-header { 2977 padding: 0 40px 0 0; 2978 margin-bottom: 12px; 2979} 2980.ds-collection-card-grid .ds-header .title { 2981 color: var(--newtab-text-primary-color); 2982 font-weight: 600; 2983 font-size: 17px; 2984 line-height: 24px; 2985} 2986.ds-collection-card-grid .ds-header .ds-context { 2987 color: var(--newtab-text-secondary-color); 2988 font-weight: normal; 2989 font-size: 13px; 2990 line-height: 24px; 2991} 2992 2993.ds-highlights .section .section-list { 2994 grid-gap: var(--gridRowGap); 2995 grid-template-columns: repeat(1, 1fr); 2996} 2997@media (min-width: 610px) { 2998 .ds-highlights .section .section-list { 2999 grid-template-columns: repeat(2, 1fr); 3000 } 3001} 3002@media (min-width: 866px) { 3003 .ds-highlights .section .section-list { 3004 grid-template-columns: repeat(4, 1fr); 3005 } 3006} 3007.ds-highlights .section .section-list .card-outer { 3008 height: 175px; 3009} 3010.ds-highlights .section .section-list .card-outer .card-host-name { 3011 font-size: 13px; 3012 line-height: 20px; 3013 margin-bottom: 2px; 3014 padding-bottom: 0; 3015 text-transform: unset; 3016} 3017.ds-highlights .section .section-list .card-outer .card-title { 3018 font-size: 14px; 3019 font-weight: 600; 3020 line-height: 20px; 3021 max-height: 20px; 3022} 3023.ds-highlights .hide-for-narrow { 3024 display: block; 3025} 3026 3027.ds-hr { 3028 border: 0; 3029 border-top: 1px solid #D7D7DB; 3030 height: 0; 3031} 3032[lwt-newtab-brighttext] .ds-hr { 3033 border-top: 1px solid #4A4A4F; 3034} 3035 3036.ds-navigation { 3037 color: var(--newtab-text-primary-color); 3038 font-size: 11.5px; 3039 font-weight: 500; 3040 line-height: 22px; 3041 padding: 4px 0; 3042} 3043@media (min-width: 1122px) { 3044 .ds-navigation { 3045 line-height: 32px; 3046 font-size: 14px; 3047 } 3048} 3049.ds-navigation.ds-navigation-centered { 3050 text-align: center; 3051} 3052.ds-navigation.ds-navigation-right-aligned { 3053 text-align: end; 3054} 3055.ds-navigation ul { 3056 display: inline; 3057 margin: 0; 3058 padding: 0; 3059} 3060.ds-navigation ul li { 3061 display: inline-block; 3062} 3063.ds-navigation ul li::after { 3064 content: "·"; 3065 padding: 6px; 3066} 3067.ds-navigation ul li:last-child::after { 3068 content: none; 3069} 3070.ds-navigation ul li a:hover, .ds-navigation ul li a:active { 3071 text-decoration: underline; 3072} 3073.ds-navigation ul li a:active { 3074 color: var(--newtab-primary-element-active-color); 3075} 3076.ds-navigation .ds-navigation-header { 3077 padding-inline-end: 6px; 3078} 3079.ds-navigation .ds-navigation-privacy { 3080 padding-inline-start: 6px; 3081 float: inline-end; 3082} 3083.ds-navigation .ds-navigation-privacy:hover { 3084 text-decoration: underline; 3085} 3086.ds-navigation.ds-navigation-new-topics { 3087 display: block; 3088 padding-top: 32px; 3089} 3090.ds-navigation.ds-navigation-new-topics .ds-navigation-header { 3091 font-size: 14px; 3092 line-height: 20px; 3093 font-weight: 700; 3094 display: inline-block; 3095 margin-bottom: 8px; 3096} 3097.ds-navigation.ds-navigation-new-topics .ds-navigation-family { 3098 text-align: center; 3099 font-size: 14px; 3100 line-height: 20px; 3101 margin: 16px auto 28px; 3102} 3103.ds-navigation.ds-navigation-new-topics .ds-navigation-family span { 3104 margin: 0 6px; 3105} 3106.ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo, 3107.ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo { 3108 height: 20px; 3109 width: 20px; 3110 background-size: cover; 3111} 3112.ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo { 3113 background-image: url("chrome://activity-stream/content/data/content/assets/firefox.svg"); 3114} 3115.ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo { 3116 background-image: url("chrome://global/skin/icons/pocket.svg"); 3117 fill: #EF4056; 3118} 3119.ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message { 3120 font-weight: 400; 3121 display: block; 3122} 3123@media (min-width: 610px) { 3124 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message { 3125 display: inline; 3126 } 3127} 3128@media (min-width: 610px) { 3129 .ds-navigation.ds-navigation-new-topics .ds-navigation-family { 3130 margin-top: 43px; 3131 } 3132} 3133.ds-navigation.ds-navigation-new-topics ul { 3134 display: grid; 3135 grid-gap: 0 24px; 3136 grid-auto-flow: column; 3137 grid-template: repeat(8, 1fr)/repeat(1, 1fr); 3138} 3139.ds-navigation.ds-navigation-new-topics ul li { 3140 border-top: 1px solid var(--newtab-border-color); 3141 line-height: 24px; 3142 font-size: 13px; 3143 font-weight: 500; 3144} 3145.ds-navigation.ds-navigation-new-topics ul li::after { 3146 content: ""; 3147 padding: 0; 3148} 3149.ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) { 3150 display: none; 3151} 3152.ds-navigation.ds-navigation-new-topics ul li:nth-last-child(1) { 3153 border-bottom: 1px solid var(--newtab-border-color); 3154} 3155@media (min-width: 610px) { 3156 .ds-navigation.ds-navigation-new-topics ul { 3157 grid-template: repeat(3, 1fr)/repeat(2, 1fr); 3158 } 3159 .ds-navigation.ds-navigation-new-topics ul li:nth-child(3) { 3160 border-bottom: 1px solid var(--newtab-border-color); 3161 } 3162} 3163@media (min-width: 866px) { 3164 .ds-navigation.ds-navigation-new-topics ul { 3165 grid-template: repeat(2, 1fr)/repeat(3, 1fr); 3166 } 3167 .ds-navigation.ds-navigation-new-topics ul li:nth-child(odd) { 3168 border-bottom: 0; 3169 } 3170 .ds-navigation.ds-navigation-new-topics ul li:nth-child(even) { 3171 border-bottom: 1px solid var(--newtab-border-color); 3172 } 3173} 3174@media (min-width: 1122px) { 3175 .ds-navigation.ds-navigation-new-topics ul { 3176 grid-template: repeat(2, 1fr)/repeat(4, 1fr); 3177 } 3178 .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) { 3179 display: block; 3180 } 3181} 3182 3183.ds-section-title { 3184 text-align: center; 3185 margin-top: 24px; 3186} 3187.ds-section-title .title { 3188 color: var(--newtab-text-primary-color); 3189 line-height: 48px; 3190 font-size: 36px; 3191 font-weight: 300; 3192} 3193.ds-section-title .subtitle { 3194 line-height: 24px; 3195 font-size: 14px; 3196 color: var(--newtab-text-secondary-color); 3197 margin-top: 4px; 3198} 3199 3200.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { 3201 border: 0; 3202 outline: 0; 3203 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); 3204} 3205.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { 3206 box-shadow: 0 0 0 5px var(--newtab-background-color-secondary); 3207 transition: box-shadow 150ms; 3208 border-radius: 4px; 3209 outline: none; 3210} 3211.outer-wrapper .ds-top-sites .top-sites .top-sites-list { 3212 margin: 0 -12px; 3213} 3214 3215.ds-column-5 .ds-top-sites .top-site-outer, 3216.ds-column-6 .ds-top-sites .top-site-outer, 3217.ds-column-7 .ds-top-sites .top-site-outer, 3218.ds-column-8 .ds-top-sites .top-site-outer { 3219 padding: 0 10px; 3220} 3221.ds-column-5 .ds-top-sites .top-sites-list, 3222.ds-column-6 .ds-top-sites .top-sites-list, 3223.ds-column-7 .ds-top-sites .top-sites-list, 3224.ds-column-8 .ds-top-sites .top-sites-list { 3225 margin: 0 -10px; 3226} 3227.ds-column-5 .ds-top-sites .top-site-inner, 3228.ds-column-6 .ds-top-sites .top-site-inner, 3229.ds-column-7 .ds-top-sites .top-site-inner, 3230.ds-column-8 .ds-top-sites .top-site-inner { 3231 --leftPanelIconWidth: 84.67px; 3232} 3233.ds-column-5 .ds-top-sites .top-site-inner .tile, 3234.ds-column-6 .ds-top-sites .top-site-inner .tile, 3235.ds-column-7 .ds-top-sites .top-site-inner .tile, 3236.ds-column-8 .ds-top-sites .top-site-inner .tile { 3237 width: var(--leftPanelIconWidth); 3238 height: var(--leftPanelIconWidth); 3239} 3240.ds-column-5 .ds-top-sites .top-site-inner .title, 3241.ds-column-6 .ds-top-sites .top-site-inner .title, 3242.ds-column-7 .ds-top-sites .top-site-inner .title, 3243.ds-column-8 .ds-top-sites .top-site-inner .title { 3244 width: var(--leftPanelIconWidth); 3245} 3246 3247.ds-column-1 .ds-top-sites .top-site-outer, 3248.ds-column-2 .ds-top-sites .top-site-outer, 3249.ds-column-3 .ds-top-sites .top-site-outer, 3250.ds-column-4 .ds-top-sites .top-site-outer { 3251 padding: 0 8px; 3252} 3253.ds-column-1 .ds-top-sites .top-sites-list, 3254.ds-column-2 .ds-top-sites .top-sites-list, 3255.ds-column-3 .ds-top-sites .top-sites-list, 3256.ds-column-4 .ds-top-sites .top-sites-list { 3257 margin: 0 -8px; 3258} 3259.ds-column-1 .ds-top-sites .top-site-inner, 3260.ds-column-2 .ds-top-sites .top-site-inner, 3261.ds-column-3 .ds-top-sites .top-site-inner, 3262.ds-column-4 .ds-top-sites .top-site-inner { 3263 --rightPanelIconWidth: 82.67px; 3264} 3265.ds-column-1 .ds-top-sites .top-site-inner .tile, 3266.ds-column-2 .ds-top-sites .top-site-inner .tile, 3267.ds-column-3 .ds-top-sites .top-site-inner .tile, 3268.ds-column-4 .ds-top-sites .top-site-inner .tile { 3269 width: var(--rightPanelIconWidth); 3270 height: var(--rightPanelIconWidth); 3271} 3272.ds-column-1 .ds-top-sites .top-site-inner .title, 3273.ds-column-2 .ds-top-sites .top-site-inner .title, 3274.ds-column-3 .ds-top-sites .top-site-inner .title, 3275.ds-column-4 .ds-top-sites .top-site-inner .title { 3276 width: var(--rightPanelIconWidth); 3277} 3278 3279.ds-card .context-menu-button, 3280.ds-signup .context-menu-button { 3281 background-clip: padding-box; 3282 background-color: var(--newtab-background-color-secondary); 3283 background-image: url("chrome://global/skin/icons/more.svg"); 3284 background-position: 55%; 3285 border: 1px solid var(--newtab-border-color); 3286 border-radius: 100%; 3287 box-shadow: 0 2px rgba(12, 12, 13, 0.1); 3288 cursor: pointer; 3289 fill: var(--newtab-text-primary-color); 3290 height: 27px; 3291 inset-inline-end: -13.5px; 3292 opacity: 0; 3293 position: absolute; 3294 top: -13.5px; 3295 transform: scale(0.25); 3296 transition-duration: 150ms; 3297 transition-property: transform, opacity; 3298 width: 27px; 3299} 3300.ds-card .context-menu-button:is(:active, :focus), 3301.ds-signup .context-menu-button:is(:active, :focus) { 3302 opacity: 1; 3303 transform: scale(1); 3304} 3305.ds-card .context-menu, 3306.ds-signup .context-menu { 3307 opacity: 0; 3308} 3309.ds-card.active .context-menu, 3310.ds-signup.active .context-menu { 3311 opacity: 1; 3312} 3313.ds-card.last-item .context-menu, 3314.ds-signup.last-item .context-menu { 3315 margin-inline-end: 5px; 3316 margin-inline-start: auto; 3317 inset-inline-end: 0; 3318 inset-inline-start: auto; 3319} 3320.ds-card.last-item .context-menu, 3321.ds-signup.last-item .context-menu { 3322 opacity: 1; 3323} 3324.ds-card:is(:hover, :focus, .active), 3325.ds-signup:is(:hover, :focus, .active) { 3326 outline: none; 3327} 3328.ds-card:is(:hover, :focus, .active) .context-menu-button, 3329.ds-signup:is(:hover, :focus, .active) .context-menu-button { 3330 opacity: 1; 3331 transform: scale(1); 3332 transition-delay: 333ms; 3333} 3334.ds-card:is(:hover, :focus, .active).ds-card-grid-border, 3335.ds-signup:is(:hover, :focus, .active).ds-card-grid-border { 3336 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 3337 transition: box-shadow 150ms; 3338} 3339 3340.ds-card { 3341 display: flex; 3342 flex-direction: column; 3343 position: relative; 3344} 3345.ds-card .playhead { 3346 background: var(--newtab-primary-action-background) url("chrome://activity-stream/content/data/content/assets/glyph-playhead.svg") no-repeat 12px center; 3347 border-radius: 20px; 3348 bottom: -16px; 3349 color: color-mix(in srgb, var(--newtab-primary-element-text-color) 0%, transparent); 3350 display: flex; 3351 flex-direction: column; 3352 height: 40px; 3353 justify-content: center; 3354 left: 16px; 3355 min-width: 40px; 3356 padding: 0 0 0 40px; 3357 position: absolute; 3358 transition: padding 100ms ease-in-out 0ms, color 100ms linear 100ms; 3359} 3360.ds-card .playhead:hover { 3361 color: var(--newtab-primary-element-text-color); 3362 padding: 0 20px 0 40px; 3363} 3364.ds-card .playhead span { 3365 display: none; 3366} 3367.ds-card .playhead:hover span { 3368 display: inline; 3369 font-style: normal; 3370 font-weight: 600; 3371 font-size: 13px; 3372} 3373.ds-card.placeholder { 3374 background: transparent; 3375 box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); 3376 border-radius: 4px; 3377 min-height: 300px; 3378} 3379.ds-card .img-wrapper { 3380 width: 100%; 3381 position: relative; 3382} 3383.ds-card .card-stp-button-hover-background { 3384 opacity: 0; 3385 width: 100%; 3386 position: absolute; 3387 top: 0; 3388 height: 0; 3389 transition: opacity; 3390 transition-duration: 0s; 3391 padding-top: 50%; 3392 pointer-events: none; 3393 background: rgba(0, 0, 0, 0.4); 3394 border-radius: 8px; 3395} 3396.ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper { 3397 position: absolute; 3398 margin-top: -16px; 3399 left: 0; 3400 right: 0; 3401 top: 50%; 3402 display: flex; 3403 justify-content: center; 3404 align-items: center; 3405} 3406.ds-card .card-stp-button-hover-background .icon-pocket-save, 3407.ds-card .card-stp-button-hover-background .icon-pocket { 3408 margin-inline-end: 4px; 3409 height: 15px; 3410 width: 15px; 3411 background-size: 15px; 3412} 3413.ds-card .card-stp-button-hover-background .icon-pocket { 3414 fill: #EF4056; 3415} 3416.ds-card .card-stp-button-hover-background .context-menu-button { 3417 position: static; 3418 transition: none; 3419} 3420.ds-card .card-stp-button-hover-background .context-menu-position-container { 3421 position: relative; 3422} 3423.ds-card .card-stp-button-hover-background .context-menu { 3424 margin-inline-start: 18.5px; 3425 inset-inline-start: auto; 3426 position: absolute; 3427 top: 20.25px; 3428} 3429.ds-card .card-stp-button-hover-background .card-stp-button { 3430 display: flex; 3431 margin-inline-end: 12px; 3432 font-weight: 400; 3433 font-size: 13px; 3434 line-height: 16px; 3435 background-color: var(--newtab-background-color-secondary); 3436 border: 0; 3437 border-radius: 4px; 3438 padding: 8px; 3439 white-space: nowrap; 3440} 3441.ds-card .card-stp-button-hover-background .card-stp-button:hover .icon-pocket-save { 3442 fill: #EF4056; 3443} 3444.ds-card .card-stp-button-hover-background button, 3445.ds-card .card-stp-button-hover-background .context-menu { 3446 pointer-events: auto; 3447} 3448.ds-card .card-stp-button-hover-background button { 3449 cursor: pointer; 3450} 3451.ds-card.last-item .card-stp-button-hover-background .context-menu { 3452 margin-inline-start: auto; 3453 margin-inline-end: 18.5px; 3454} 3455.ds-card:hover .card-stp-button-hover-background, .ds-card.active .card-stp-button-hover-background { 3456 display: block; 3457 opacity: 1; 3458 transition-duration: 0.3s; 3459} 3460.ds-card .img { 3461 height: 0; 3462 padding-top: 50%; 3463} 3464.ds-card .img img { 3465 border-radius: 4px; 3466 box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); 3467} 3468.ds-card .ds-card-link { 3469 height: 100%; 3470 display: flex; 3471 flex-direction: column; 3472} 3473.ds-card .ds-card-link:hover header { 3474 color: var(--newtab-primary-action-background); 3475} 3476.ds-card .ds-card-link:focus { 3477 border: 0; 3478 outline: 0; 3479 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); 3480 transition: none; 3481} 3482.ds-card .ds-card-link:focus header { 3483 color: var(--newtab-primary-action-background); 3484} 3485.ds-card .ds-card-link:active header { 3486 color: var(--newtab-primary-element-active-color); 3487} 3488.ds-card.video-card .meta { 3489 margin-top: 4px; 3490} 3491.ds-card.last-card-message .ds-last-card-desc { 3492 font-size: 13px; 3493 color: var(--newtab-text-secondary-color); 3494} 3495.ds-card.last-card-message .ds-last-card-desc, 3496.ds-card.last-card-message .title { 3497 text-align: center; 3498} 3499.ds-card.last-card-message .last-card-message-image { 3500 object-fit: contain; 3501 background: transparent; 3502 box-shadow: none; 3503} 3504.ds-card .meta { 3505 display: flex; 3506 flex-direction: column; 3507 padding: 12px 16px; 3508 flex-grow: 1; 3509} 3510.ds-card .meta .info-wrap { 3511 flex-grow: 1; 3512} 3513.ds-card .meta .title { 3514 font-size: 17px; 3515 -webkit-line-clamp: 3; 3516 line-height: 24px; 3517 font-weight: 600; 3518} 3519.ds-card .meta .excerpt { 3520 font-size: 14px; 3521 -webkit-line-clamp: 3; 3522 line-height: 20px; 3523} 3524.ds-card .meta .source { 3525 -webkit-line-clamp: 1; 3526 margin-bottom: 2px; 3527 font-size: 13px; 3528 color: var(--newtab-text-secondary-color); 3529} 3530.ds-card .meta .new-sponsored-label { 3531 font-size: 13px; 3532 margin-bottom: 2px; 3533} 3534.ds-card .meta .cta-button { 3535 background-color: var(--newtab-button-secondary-color); 3536 width: 100%; 3537 margin: 12px 0 4px; 3538 box-shadow: none; 3539 border-radius: 4px; 3540 height: 32px; 3541 font-size: 14px; 3542 font-weight: 600; 3543 padding: 5px 8px 7px; 3544 border: 1px solid var(--newtab-border-color); 3545} 3546.ds-card .meta .cta-button:active { 3547 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 3548} 3549.ds-card .meta .cta-link { 3550 color: var(--newtab-primary-action-background); 3551 fill: var(--newtab-primary-action-background); 3552 font-size: 15px; 3553 font-weight: 600; 3554 line-height: 24px; 3555 height: 24px; 3556 width: auto; 3557 background-size: auto; 3558 background-position: right 1.5px; 3559 padding-right: 9px; 3560} 3561.ds-card .meta .cta-link:focus { 3562 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 3563 border-radius: 4px; 3564 outline: 0; 3565} 3566.ds-card .meta .cta-link:active { 3567 color: var(--newtab-primary-element-active-color); 3568 fill: var(--newtab-primary-element-active-color); 3569 box-shadow: none; 3570} 3571.ds-card .meta .cta-link:hover { 3572 text-decoration: underline; 3573} 3574.ds-card.ds-card-title-lines-2 .meta .title { 3575 font-size: 17px; 3576 -webkit-line-clamp: 2; 3577 line-height: 24px; 3578} 3579.ds-card.ds-card-title-lines-1 .meta .title { 3580 font-size: 17px; 3581 -webkit-line-clamp: 1; 3582 line-height: 24px; 3583} 3584.ds-card.ds-card-desc-lines-2 .meta .excerpt { 3585 font-size: 14px; 3586 -webkit-line-clamp: 2; 3587 line-height: 20px; 3588} 3589.ds-card.ds-card-desc-lines-1 .meta .excerpt { 3590 font-size: 14px; 3591 -webkit-line-clamp: 1; 3592 line-height: 20px; 3593} 3594.ds-card.ds-card-compact-image .img { 3595 padding-top: 47%; 3596} 3597.ds-card.ds-card-image-gradient img { 3598 mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black 40px); 3599} 3600.ds-card.ds-card-image-gradient .meta { 3601 padding: 3px 15px 11px; 3602} 3603.ds-card header { 3604 line-height: 24px; 3605 font-size: 17px; 3606 color: var(--newtab-text-primary-color); 3607} 3608.ds-card p { 3609 font-size: 14px; 3610 line-height: 20px; 3611 color: var(--newtab-text-primary-color); 3612 margin: 0; 3613} 3614 3615.story-footer { 3616 color: var(--newtab-text-secondary-color); 3617 inset-inline-start: 0; 3618 margin-top: 12px; 3619 position: relative; 3620} 3621.story-footer .story-sponsored-label, 3622.story-footer .story-view-count, 3623.story-footer .status-message { 3624 -webkit-line-clamp: 1; 3625 font-size: 13px; 3626 line-height: 24px; 3627 color: var(--newtab-text-secondary-color); 3628} 3629.story-footer .status-message { 3630 display: flex; 3631 align-items: center; 3632 height: 24px; 3633} 3634.story-footer .status-message .story-badge-icon { 3635 fill: var(--newtab-text-secondary-color); 3636 height: 16px; 3637 margin-inline-end: 6px; 3638} 3639.story-footer .status-message .story-badge-icon.icon-bookmark-removed { 3640 background-image: url("chrome://activity-stream/content/data/content/assets/icon-removed-bookmark.svg"); 3641} 3642.story-footer .status-message .story-context-label { 3643 color: var(--newtab-text-secondary-color); 3644 flex-grow: 1; 3645 font-size: 13px; 3646 line-height: 24px; 3647 overflow: hidden; 3648 text-overflow: ellipsis; 3649 white-space: nowrap; 3650} 3651 3652.story-animate-enter { 3653 opacity: 0; 3654} 3655 3656.story-animate-enter-active { 3657 opacity: 1; 3658 transition: opacity 150ms ease-in 300ms; 3659} 3660.story-animate-enter-active .story-badge-icon, 3661.story-animate-enter-active .story-context-label { 3662 animation: color 3s ease-out 0.3s; 3663} 3664@keyframes color { 3665 0% { 3666 color: var(--newtab-status-success); 3667 fill: var(--newtab-status-success); 3668 } 3669 100% { 3670 color: var(--newtab-text-secondary-color); 3671 fill: var(--newtab-text-secondary-color); 3672 } 3673} 3674 3675.story-animate-exit { 3676 position: absolute; 3677 top: 0; 3678 opacity: 1; 3679} 3680 3681.story-animate-exit-active { 3682 opacity: 0; 3683 transition: opacity 250ms ease-in; 3684} 3685 3686.ds-image { 3687 display: block; 3688 position: relative; 3689 opacity: 0; 3690} 3691.ds-image.use-transition { 3692 transition: opacity 0.8s; 3693} 3694.ds-image.loaded { 3695 opacity: 1; 3696} 3697.ds-image img, 3698.ds-image .broken-image { 3699 background-color: var(--newtab-element-secondary-color); 3700 position: absolute; 3701 top: 0; 3702 width: 100%; 3703 height: 100%; 3704 object-fit: cover; 3705} 3706 3707.ds-dismiss { 3708 position: relative; 3709 border-radius: 8px; 3710 transition-duration: 250ms; 3711 transition-property: background; 3712} 3713.ds-dismiss:hover .ds-dismiss-button { 3714 opacity: 1; 3715} 3716.ds-dismiss .ds-dismiss-button { 3717 border: 0; 3718 cursor: pointer; 3719 height: 32px; 3720 width: 32px; 3721 padding: 0; 3722 display: flex; 3723 align-items: center; 3724 justify-content: center; 3725 position: absolute; 3726 inset-inline-end: 0; 3727 top: 0; 3728 border-radius: 50%; 3729 background-color: transparent; 3730} 3731.ds-dismiss .ds-dismiss-button .icon { 3732 fill: var(--newtab-text-primary-color); 3733} 3734.ds-dismiss .ds-dismiss-button:hover { 3735 background: var(--newtab-element-hover-color); 3736} 3737.ds-dismiss .ds-dismiss-button:active { 3738 background: var(--newtab-element-active-color); 3739} 3740.ds-dismiss .ds-dismiss-button:focus { 3741 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); 3742} 3743 3744.ds-message { 3745 margin: 8px 0 0; 3746} 3747.ds-message .title { 3748 display: flex; 3749 align-items: center; 3750} 3751.ds-message .title .glyph { 3752 width: 16px; 3753 height: 16px; 3754 margin: 0 6px 0 0; 3755 -moz-context-properties: fill; 3756 fill: var(--newtab-text-secondary-color); 3757 background-position: center center; 3758 background-size: 16px; 3759 background-repeat: no-repeat; 3760} 3761.ds-message .title .title-text { 3762 line-height: 20px; 3763 font-size: 13px; 3764 color: var(--newtab-text-secondary-color); 3765 font-weight: 600; 3766 padding-right: 12px; 3767} 3768.ds-message .title .link { 3769 line-height: 20px; 3770 font-size: 13px; 3771} 3772.ds-message .title .link:hover, .ds-message .title .link:focus { 3773 text-decoration: underline; 3774} 3775 3776.impression-observer { 3777 position: absolute; 3778 top: 0; 3779 width: 100%; 3780 height: 100%; 3781 pointer-events: none; 3782} 3783 3784.section-empty-state { 3785 border: 1px solid var(--newtab-border-color); 3786 border-radius: 4px; 3787 display: flex; 3788 height: 160px; 3789 width: 100%; 3790} 3791.section-empty-state .empty-state-message { 3792 color: var(--newtab-text-secondary-color); 3793 font-size: 14px; 3794 line-height: 20px; 3795 text-align: center; 3796 margin: auto; 3797 max-width: 936px; 3798} 3799.section-empty-state .try-again-button { 3800 margin-top: 12px; 3801 padding: 6px 32px; 3802 border-radius: 2px; 3803 border: 0; 3804 background: var(--newtab-button-secondary-color); 3805 color: var(--newtab-text-primary-color); 3806 cursor: pointer; 3807 position: relative; 3808 transition: background 0.2s ease, color 0.2s ease; 3809} 3810.section-empty-state .try-again-button:not(.waiting):focus { 3811 box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); 3812 transition: box-shadow 150ms; 3813 border-radius: 4px; 3814 outline: none; 3815} 3816[lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):focus { 3817 box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); 3818 transition: box-shadow 150ms; 3819 border-radius: 4px; 3820 outline: none; 3821} 3822.section-empty-state .try-again-button:not(.waiting):hover { 3823 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 3824 transition: box-shadow 150ms; 3825 border-radius: 4px; 3826 outline: none; 3827} 3828.section-empty-state .try-again-button::after { 3829 content: ""; 3830 height: 20px; 3831 width: 20px; 3832 animation: spinner 1s linear infinite; 3833 opacity: 0; 3834 position: absolute; 3835 top: 50%; 3836 left: 50%; 3837 margin: -10px 0 0 -10px; 3838 mask-image: url("chrome://activity-stream/content/data/content/assets/spinner.svg"); 3839 mask-size: 20px; 3840 background: var(--newtab-text-secondary-color); 3841} 3842.section-empty-state .try-again-button.waiting { 3843 cursor: initial; 3844 background: var(--newtab-element-secondary-color); 3845 color: transparent; 3846 transition: background 0.2s ease; 3847} 3848.section-empty-state .try-again-button.waiting::after { 3849 transition: opacity 0.2s ease; 3850 opacity: 1; 3851} 3852.section-empty-state h2 { 3853 font-size: 15px; 3854 font-weight: 600; 3855 margin: 0; 3856} 3857.section-empty-state p { 3858 margin: 0; 3859} 3860 3861@keyframes spinner { 3862 to { 3863 transform: rotate(360deg); 3864 } 3865} 3866.ds-dismiss-ds-text-promo { 3867 max-width: 744px; 3868 margin: auto; 3869 overflow: hidden; 3870} 3871.ds-dismiss-ds-text-promo.hovering { 3872 background: var(--newtab-element-hover-color); 3873} 3874.ds-dismiss-ds-text-promo .ds-dismiss-button { 3875 margin-inline: 0 18px; 3876 margin-block: 18px 0; 3877} 3878 3879.ds-text-promo { 3880 max-width: 640px; 3881 margin: 0; 3882 padding: 18px; 3883} 3884@media (min-width: 610px) { 3885 .ds-text-promo { 3886 display: flex; 3887 margin: 18px 24px; 3888 padding: 0 32px 0 0; 3889 } 3890} 3891.ds-text-promo .ds-image { 3892 width: 40px; 3893 height: 40px; 3894 flex-shrink: 0; 3895 margin: 0 0 18px; 3896} 3897@media (min-width: 610px) { 3898 .ds-text-promo .ds-image { 3899 margin: 4px 12px 0 0; 3900 } 3901} 3902.ds-text-promo .ds-image img { 3903 border-radius: 4px; 3904} 3905.ds-text-promo .text { 3906 line-height: 24px; 3907} 3908.ds-text-promo h3 { 3909 color: var(--newtab-text-primary-color); 3910 margin: 0; 3911 font-weight: 600; 3912 font-size: 15px; 3913} 3914.ds-text-promo .subtitle { 3915 font-size: 13px; 3916 margin: 0; 3917 color: var(--newtab-text-primary-color); 3918} 3919 3920.ds-chevron-link { 3921 color: var(--newtab-primary-action-background); 3922 display: inline-block; 3923 outline: 0; 3924} 3925.ds-chevron-link:hover { 3926 text-decoration: underline; 3927} 3928.ds-chevron-link:active { 3929 color: var(--newtab-primary-element-active-color); 3930} 3931.ds-chevron-link:active::after { 3932 background-color: var(--newtab-primary-element-active-color); 3933} 3934.ds-chevron-link:focus { 3935 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); 3936 border-radius: 2px; 3937} 3938.ds-chevron-link::after { 3939 background-color: var(--newtab-primary-action-background); 3940 content: " "; 3941 mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat; 3942 margin: 0 0 0 4px; 3943 width: 5px; 3944 height: 8px; 3945 text-decoration: none; 3946 display: inline-block; 3947} 3948 3949.ds-signup { 3950 max-width: 300px; 3951 margin: 0 auto; 3952 padding: 8px; 3953 position: relative; 3954 text-align: center; 3955 font-size: 17px; 3956 font-weight: 600; 3957} 3958.ds-signup:hover { 3959 background: var(--newtab-element-hover-color); 3960 border-radius: 4px; 3961} 3962.ds-signup .icon-mail { 3963 height: 40px; 3964 width: 40px; 3965 margin-inline-end: 8px; 3966 fill: var(--newtab-text-secondary-color); 3967 background-size: 30px; 3968 flex-shrink: 0; 3969} 3970.ds-signup .ds-signup-content { 3971 display: flex; 3972 align-items: center; 3973 justify-content: center; 3974 flex-direction: column; 3975} 3976.ds-signup .ds-signup-content .ds-chevron-link { 3977 margin-top: 4px; 3978 box-shadow: none; 3979 display: block; 3980 white-space: nowrap; 3981} 3982@media (min-width: 866px) { 3983 .ds-signup { 3984 min-width: 756px; 3985 width: max-content; 3986 text-align: start; 3987 } 3988 .ds-signup .ds-signup-content { 3989 flex-direction: row; 3990 } 3991 .ds-signup .ds-signup-content .ds-chevron-link { 3992 margin-top: 0; 3993 display: inline; 3994 } 3995} 3996 3997.ds-privacy-modal .modal-link { 3998 display: flex; 3999 align-items: center; 4000 margin: 0 0 8px; 4001 border: 0; 4002 padding: 0; 4003 color: var(--newtab-primary-action-background); 4004 width: max-content; 4005} 4006.ds-privacy-modal .modal-link:hover { 4007 text-decoration: underline; 4008 cursor: pointer; 4009} 4010.ds-privacy-modal .modal-link::before { 4011 -moz-context-properties: fill; 4012 fill: var(--newtab-primary-action-background); 4013 content: ""; 4014 display: inline-block; 4015 width: 16px; 4016 height: 16px; 4017 margin: 0; 4018 margin-inline-end: 8px; 4019 background-position: center center; 4020 background-repeat: no-repeat; 4021 background-size: 16px; 4022} 4023.ds-privacy-modal .modal-link.modal-link-privacy::before { 4024 background-image: url("chrome://global/skin/icons/info.svg"); 4025} 4026.ds-privacy-modal .modal-link.modal-link-manage::before { 4027 background-image: url("chrome://global/skin/icons/settings.svg"); 4028} 4029.ds-privacy-modal p { 4030 line-height: 24px; 4031} 4032.ds-privacy-modal .privacy-notice { 4033 max-width: 572px; 4034 padding: 40px; 4035 margin: auto; 4036} 4037 4038.ds-privacy-link { 4039 text-align: center; 4040 font-size: 13px; 4041 font-weight: 500; 4042 line-height: 24px; 4043} 4044.ds-privacy-link a:hover { 4045 text-decoration: underline; 4046} 4047 4048.ASRouterButton { 4049 font-weight: 600; 4050 font-size: 14px; 4051 white-space: nowrap; 4052 border-radius: 2px; 4053 border: 0; 4054 font-family: inherit; 4055 padding: 8px 15px; 4056 margin-inline-start: 12px; 4057 color: inherit; 4058 cursor: pointer; 4059} 4060.tall .ASRouterButton { 4061 margin-inline-start: 20px; 4062} 4063.ASRouterButton.test-only { 4064 width: 0; 4065 height: 0; 4066 overflow: hidden; 4067 display: block; 4068 visibility: hidden; 4069} 4070.ASRouterButton.primary { 4071 border: 1px solid var(--newtab-primary-action-background); 4072 background-color: var(--newtab-primary-action-background); 4073 color: var(--newtab-primary-element-text-color); 4074} 4075.ASRouterButton.primary:hover { 4076 background-color: var(--newtab-primary-element-hover-color); 4077} 4078.ASRouterButton.primary:active { 4079 background-color: var(--newtab-primary-element-active-color); 4080} 4081.ASRouterButton.slim { 4082 border: 1px solid var(--newtab-border-color); 4083 margin-inline-start: 0; 4084 font-size: 12px; 4085 padding: 6px 12px; 4086} 4087.ASRouterButton.slim:hover, .ASRouterButton.slim:focus { 4088 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 4089 transition: box-shadow 150ms; 4090} 4091 4092.SnippetBaseContainer { 4093 position: fixed; 4094 z-index: 2; 4095 bottom: 0; 4096 left: 0; 4097 right: 0; 4098 background-color: var(--newtab-background-color-secondary); 4099 color: var(--newtab-text-primary-color); 4100 font-size: 14px; 4101 line-height: 20px; 4102 border-top: 1px solid transparent; 4103 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); 4104 display: flex; 4105 align-items: center; 4106} 4107.SnippetBaseContainer a { 4108 cursor: pointer; 4109 color: var(--newtab-primary-action-background); 4110} 4111.SnippetBaseContainer a:hover { 4112 text-decoration: underline; 4113} 4114[lwt-newtab-brighttext] .SnippetBaseContainer a { 4115 font-weight: bold; 4116} 4117.SnippetBaseContainer input[type=checkbox] { 4118 margin-inline-start: 0; 4119} 4120.SnippetBaseContainer .innerWrapper { 4121 margin: 0 auto; 4122 display: flex; 4123 align-items: center; 4124 padding: 12px 25px; 4125 padding-inline-end: 36px; 4126 max-width: 836px; 4127} 4128@media (min-width: 866px) { 4129 .SnippetBaseContainer .innerWrapper { 4130 padding-inline-end: 25px; 4131 } 4132} 4133@media (min-width: 1122px) { 4134 .SnippetBaseContainer .innerWrapper { 4135 max-width: 1092px; 4136 } 4137} 4138.SnippetBaseContainer .blockButton { 4139 display: none; 4140 background: none; 4141 border: 0; 4142 position: absolute; 4143 top: 20px; 4144 inset-inline-end: 12px; 4145 height: 16px; 4146 width: 16px; 4147 background-image: url("chrome://global/skin/icons/close.svg"); 4148 -moz-context-properties: fill; 4149 color: inherit; 4150 fill: currentColor; 4151 opacity: 0.5; 4152 margin-top: -8px; 4153 padding: 0; 4154 cursor: pointer; 4155} 4156.SnippetBaseContainer:hover .blockButton { 4157 display: block; 4158} 4159.SnippetBaseContainer .icon { 4160 height: 42px; 4161 width: 42px; 4162 margin-inline-end: 12px; 4163 flex-shrink: 0; 4164} 4165 4166.snippets-preview-banner { 4167 font-size: 15px; 4168 line-height: 42px; 4169 color: var(--newtab-text-primary-color); 4170 background: var(--newtab-background-color-secondary); 4171 text-align: center; 4172 position: absolute; 4173 top: 0; 4174 width: 100%; 4175} 4176.snippets-preview-banner span { 4177 vertical-align: middle; 4178} 4179 4180body:not([lwt-newtab-brighttext]) .icon-dark-theme, 4181body:not([lwt-newtab-brighttext]) .icon.icon-dark-theme, 4182body:not([lwt-newtab-brighttext]) .scene2Icon .icon-dark-theme { 4183 display: none; 4184} 4185body[lwt-newtab-brighttext] .icon-light-theme, 4186body[lwt-newtab-brighttext] .icon.icon-light-theme, 4187body[lwt-newtab-brighttext] .scene2Icon .icon-light-theme { 4188 display: none; 4189} 4190 4191.activity-stream.modal-open { 4192 overflow: hidden; 4193} 4194 4195.modalOverlayOuter { 4196 background: var(--newtab-overlay-color); 4197 height: 100%; 4198 position: fixed; 4199 top: 0; 4200 left: 0; 4201 width: 100%; 4202 display: none; 4203 z-index: 1100; 4204 overflow: auto; 4205} 4206.modalOverlayOuter.active { 4207 display: flex; 4208} 4209 4210.modalOverlayInner { 4211 min-width: min-content; 4212 width: 100%; 4213 max-width: 960px; 4214 position: relative; 4215 margin: auto; 4216 background: var(--newtab-background-color-secondary); 4217 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 4218 border-radius: 4px; 4219 display: none; 4220 z-index: 1100; 4221} 4222@media (max-width: 960px) { 4223 .modalOverlayInner { 4224 height: 100%; 4225 top: 0; 4226 left: 0; 4227 box-shadow: none; 4228 border-radius: 0; 4229 } 4230} 4231.modalOverlayInner.active { 4232 display: block; 4233} 4234.modalOverlayInner h2 { 4235 color: var(--newtab-text-primary-color); 4236 text-align: center; 4237 font-weight: 200; 4238 margin-top: 30px; 4239 font-size: 28px; 4240 line-height: 37px; 4241 letter-spacing: -0.13px; 4242} 4243@media (max-width: 960px) { 4244 .modalOverlayInner h2 { 4245 margin-top: 100px; 4246 } 4247} 4248@media (max-width: 850px) { 4249 .modalOverlayInner h2 { 4250 margin-top: 30px; 4251 } 4252} 4253.modalOverlayInner .footer { 4254 border-top: 1px solid var(--newtab-border-color); 4255 border-radius: 4px; 4256 height: 70px; 4257 width: 100%; 4258 position: absolute; 4259 bottom: 0; 4260 text-align: center; 4261 background-color: #FFF; 4262} 4263@media (max-width: 850px) and (max-height: 730px) { 4264 .modalOverlayInner .footer { 4265 position: sticky; 4266 } 4267} 4268@media (max-width: 650px) and (max-height: 600px) { 4269 .modalOverlayInner .footer { 4270 position: sticky; 4271 } 4272} 4273.modalOverlayInner .footer .modalButton { 4274 margin-top: 20px; 4275 min-width: 150px; 4276 height: 30px; 4277 padding: 4px 30px 6px; 4278 font-size: 15px; 4279} 4280.modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover { 4281 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 4282 transition: box-shadow 150ms; 4283} 4284 4285.below-search-snippet { 4286 margin: 0 auto 16px; 4287} 4288.below-search-snippet.withButton { 4289 margin: auto; 4290 min-height: 60px; 4291 background-color: transparent; 4292} 4293.below-search-snippet.withButton .snippet-hover-wrapper { 4294 min-height: 60px; 4295 border-radius: 4px; 4296} 4297.below-search-snippet.withButton .snippet-hover-wrapper:hover { 4298 background-color: var(--newtab-element-hover-color); 4299} 4300.below-search-snippet.withButton .snippet-hover-wrapper:hover .blockButton { 4301 display: block; 4302 opacity: 1; 4303} 4304 4305.SimpleBelowSearchSnippet { 4306 background-color: transparent; 4307 border: 0; 4308 box-shadow: none; 4309 position: relative; 4310 margin: auto; 4311 z-index: auto; 4312} 4313@media (min-width: 866px) { 4314 .SimpleBelowSearchSnippet { 4315 width: 736px; 4316 } 4317} 4318.SimpleBelowSearchSnippet.active { 4319 background-color: var(--newtab-element-hover-color); 4320 border-radius: 4px; 4321} 4322.SimpleBelowSearchSnippet .innerWrapper { 4323 align-items: center; 4324 background-color: transparent; 4325 border-radius: 4px; 4326 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 4327 flex-direction: column; 4328 padding: 16px; 4329 text-align: center; 4330 width: 100%; 4331} 4332@media (min-width: 610px) { 4333 .SimpleBelowSearchSnippet .innerWrapper { 4334 align-items: flex-start; 4335 background-color: transparent; 4336 border-radius: 4px; 4337 box-shadow: none; 4338 flex-direction: row; 4339 padding: 0; 4340 text-align: inherit; 4341 width: 696px; 4342 } 4343} 4344@media (max-width: 865px) { 4345 .SimpleBelowSearchSnippet .innerWrapper { 4346 margin-inline-start: 0; 4347 } 4348} 4349@media (max-width: 609px) { 4350 .SimpleBelowSearchSnippet .innerWrapper { 4351 margin: auto; 4352 } 4353} 4354.SimpleBelowSearchSnippet .blockButton { 4355 display: block; 4356 inset-inline-end: 10px; 4357 opacity: 1; 4358 top: 50%; 4359} 4360.SimpleBelowSearchSnippet .blockButton:focus { 4361 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 4362 border-radius: 2px; 4363} 4364.SimpleBelowSearchSnippet .title { 4365 font-size: inherit; 4366 margin: 0; 4367} 4368.SimpleBelowSearchSnippet .title-inline { 4369 display: inline; 4370} 4371.SimpleBelowSearchSnippet .textContainer { 4372 margin: 10px; 4373 margin-inline-start: 0; 4374 padding-inline-end: 20px; 4375} 4376.SimpleBelowSearchSnippet .icon { 4377 margin-top: 8px; 4378 margin-inline-start: 12px; 4379 height: 32px; 4380 width: 32px; 4381} 4382@media (min-width: 610px) { 4383 .SimpleBelowSearchSnippet .icon { 4384 height: 24px; 4385 width: 24px; 4386 } 4387} 4388@media (max-width: 610px) { 4389 .SimpleBelowSearchSnippet .icon { 4390 margin: auto; 4391 } 4392} 4393.SimpleBelowSearchSnippet.withButton { 4394 line-height: 20px; 4395 margin-bottom: 10px; 4396 min-height: 60px; 4397 background-color: transparent; 4398} 4399@media (max-width: 1123px) { 4400 .SimpleBelowSearchSnippet.withButton .innerWrapper { 4401 margin: 0 40px; 4402 } 4403} 4404.SimpleBelowSearchSnippet.withButton .blockButton { 4405 display: block; 4406 inset-inline-end: -10%; 4407 opacity: 0; 4408 margin: auto; 4409 top: unset; 4410} 4411.SimpleBelowSearchSnippet.withButton .blockButton:focus { 4412 opacity: 1; 4413 box-shadow: none; 4414} 4415@media (max-width: 1123px) { 4416 .SimpleBelowSearchSnippet.withButton .blockButton { 4417 inset-inline-end: 2%; 4418 } 4419} 4420.SimpleBelowSearchSnippet.withButton .icon { 4421 width: 42px; 4422 height: 42px; 4423 flex-shrink: 0; 4424 margin: auto 0; 4425 margin-inline-end: 10px; 4426} 4427@media (max-width: 610px) { 4428 .SimpleBelowSearchSnippet.withButton .icon { 4429 margin: auto; 4430 } 4431} 4432.SimpleBelowSearchSnippet.withButton .buttonContainer { 4433 margin: auto; 4434 margin-inline-end: 0; 4435} 4436@media (max-width: 610px) { 4437 .SimpleBelowSearchSnippet.withButton .buttonContainer { 4438 margin: auto; 4439 } 4440} 4441@media (max-width: 610px) { 4442 .SimpleBelowSearchSnippet button { 4443 margin: auto; 4444 } 4445} 4446.SimpleBelowSearchSnippet .body { 4447 display: inline; 4448 position: sticky; 4449 transform: translateY(-50%); 4450 margin: 8px 0 0; 4451} 4452@media (min-width: 610px) { 4453 .SimpleBelowSearchSnippet .body { 4454 margin: 12px 0; 4455 } 4456} 4457.SimpleBelowSearchSnippet .body a { 4458 font-weight: 600; 4459} 4460 4461.SimpleSnippet.tall { 4462 padding: 27px 0; 4463} 4464.SimpleSnippet p em { 4465 color: var(--newtab-text-emphasis-text-color); 4466 font-style: normal; 4467 background: var(--newtab-text-emphasis-background); 4468} 4469.SimpleSnippet.bold .donation-form-url, 4470.SimpleSnippet.bold .donation-amount, .SimpleSnippet.takeover .donation-form-url, 4471.SimpleSnippet.takeover .donation-amount { 4472 padding-top: 8px; 4473 padding-bottom: 8px; 4474} 4475.SimpleSnippet.bold { 4476 height: 176px; 4477} 4478.SimpleSnippet.bold .body { 4479 font-size: 14px; 4480 line-height: 20px; 4481 margin-bottom: 20px; 4482} 4483.SimpleSnippet.bold .icon { 4484 width: 71px; 4485 height: 71px; 4486} 4487.SimpleSnippet.takeover { 4488 height: 344px; 4489} 4490.SimpleSnippet.takeover .body { 4491 font-size: 16px; 4492 line-height: 24px; 4493 margin-bottom: 35px; 4494} 4495.SimpleSnippet.takeover .icon { 4496 width: 79px; 4497 height: 79px; 4498} 4499.SimpleSnippet .title { 4500 font-size: inherit; 4501 margin: 0; 4502} 4503.SimpleSnippet .title-inline { 4504 display: inline; 4505} 4506.SimpleSnippet .titleIcon { 4507 background-repeat: no-repeat; 4508 background-size: 14px; 4509 background-position: center; 4510 height: 16px; 4511 width: 16px; 4512 margin-top: 2px; 4513 margin-inline-end: 2px; 4514 display: inline-block; 4515 vertical-align: top; 4516} 4517.SimpleSnippet .body { 4518 display: inline; 4519 margin: 0; 4520} 4521.SimpleSnippet.tall .icon { 4522 margin-inline-end: 20px; 4523} 4524.SimpleSnippet.takeover .icon, .SimpleSnippet.bold .icon { 4525 margin-inline-end: 20px; 4526} 4527.SimpleSnippet .icon { 4528 align-self: flex-start; 4529} 4530.SimpleSnippet.has-section-header .innerWrapper { 4531 flex-wrap: wrap; 4532 padding-top: 7px; 4533} 4534.SimpleSnippet .innerContentWrapper { 4535 align-items: center; 4536 display: flex; 4537} 4538.SimpleSnippet .section-header { 4539 flex: 0 0 100%; 4540 margin-bottom: 10px; 4541} 4542.SimpleSnippet .section-title { 4543 color: var(--newtab-text-primary-color); 4544 display: inline-block; 4545 font-size: 13px; 4546 font-weight: bold; 4547 margin: 0; 4548} 4549.SimpleSnippet .section-title a { 4550 color: var(--newtab-text-primary-color); 4551 font-weight: inherit; 4552 text-decoration: none; 4553} 4554.SimpleSnippet .section-title .icon { 4555 height: 16px; 4556 margin-inline-end: 6px; 4557 margin-top: -2px; 4558 width: 16px; 4559} 4560 4561.SubmitFormSnippet { 4562 flex-direction: column; 4563 flex: 1 1 100%; 4564 width: 100%; 4565} 4566.SubmitFormSnippet .disclaimerText { 4567 margin: 5px 0 0; 4568 font-size: 12px; 4569 color: var(--newtab-text-secondary-color); 4570} 4571.SubmitFormSnippet p { 4572 margin: 0; 4573} 4574.SubmitFormSnippet.send_to_device_snippet { 4575 text-align: center; 4576} 4577.SubmitFormSnippet.send_to_device_snippet .message { 4578 font-size: 16px; 4579 margin-bottom: 20px; 4580} 4581.SubmitFormSnippet.send_to_device_snippet .scene2Title { 4582 font-size: 24px; 4583 display: block; 4584} 4585.SubmitFormSnippet .ASRouterButton.primary { 4586 flex: 1 1 0; 4587} 4588.SubmitFormSnippet .scene2Icon { 4589 width: 100%; 4590 margin-bottom: 20px; 4591} 4592.SubmitFormSnippet .scene2Icon img { 4593 width: 98px; 4594 display: inline-block; 4595} 4596.SubmitFormSnippet .scene2Title { 4597 font-size: inherit; 4598 margin: 0 0 10px; 4599 font-weight: bold; 4600 display: inline; 4601} 4602.SubmitFormSnippet form { 4603 display: flex; 4604 flex-direction: column; 4605 width: 100%; 4606} 4607.SubmitFormSnippet .message { 4608 font-size: 14px; 4609 align-self: stretch; 4610 flex: 0 0 100%; 4611 margin-bottom: 10px; 4612} 4613.SubmitFormSnippet .privacyNotice { 4614 font-size: 12px; 4615 color: var(--newtab-text-secondary-color); 4616 margin-top: 10px; 4617 display: flex; 4618 flex: 0 0 100%; 4619} 4620.SubmitFormSnippet .innerWrapper { 4621 max-width: 736px; 4622 flex-wrap: wrap; 4623 justify-items: center; 4624 padding-top: 40px; 4625 padding-bottom: 40px; 4626} 4627.SubmitFormSnippet .footer { 4628 width: 100%; 4629 margin: 0 auto; 4630 text-align: right; 4631 background-color: var(--newtab-background-color); 4632 padding: 10px 0; 4633} 4634.SubmitFormSnippet .footer .footer-content { 4635 margin: 0 auto; 4636 max-width: 768px; 4637 width: 100%; 4638 text-align: right; 4639} 4640[dir=rtl] .SubmitFormSnippet .footer .footer-content { 4641 text-align: left; 4642} 4643.SubmitFormSnippet input.mainInput { 4644 border-radius: 2px; 4645 background-color: var(--newtab-background-color-secondary); 4646 border: 1px solid var(--newtab-border-color); 4647 padding: 0 8px; 4648 height: 100%; 4649 font-size: 14px; 4650 width: 50%; 4651} 4652.SubmitFormSnippet input.mainInput.clean:invalid, .SubmitFormSnippet input.mainInput.clean:required { 4653 box-shadow: none; 4654} 4655.SubmitFormSnippet input.mainInput:focus { 4656 border: 1px solid var(--newtab-textbox-focus-color); 4657 box-shadow: var(--newtab-textbox-focus-boxshadow); 4658} 4659.SubmitFormSnippet.scene2Alt { 4660 text-align: start; 4661} 4662.SubmitFormSnippet.scene2Alt .scene2Icon { 4663 flex: 1; 4664 margin-bottom: 0; 4665} 4666.SubmitFormSnippet.scene2Alt .message { 4667 flex: 5; 4668 margin-bottom: 0; 4669} 4670.SubmitFormSnippet.scene2Alt .message p { 4671 margin-bottom: 10px; 4672} 4673.SubmitFormSnippet.scene2Alt .section-header { 4674 width: 100%; 4675} 4676.SubmitFormSnippet.scene2Alt .section-header .icon { 4677 width: 16px; 4678 height: 16px; 4679} 4680.SubmitFormSnippet.scene2Alt .section-title { 4681 font-size: 13px; 4682} 4683.SubmitFormSnippet.scene2Alt .section-title a { 4684 color: var(--newtab-text-primary-color); 4685 font-weight: inherit; 4686 text-decoration: none; 4687} 4688.SubmitFormSnippet.scene2Alt .innerWrapper { 4689 padding: 0 0 16px; 4690} 4691 4692.submissionStatus { 4693 text-align: center; 4694 font-size: 14px; 4695 padding: 20px 0; 4696} 4697.submissionStatus .submitStatusTitle { 4698 font-size: 20px; 4699} 4700 4701.EOYSnippetForm { 4702 margin: 10px 0 8px; 4703 align-self: start; 4704 font-size: 14px; 4705 display: flex; 4706 align-items: center; 4707} 4708.EOYSnippetForm .donation-amount, 4709.EOYSnippetForm .donation-form-url { 4710 white-space: nowrap; 4711 font-size: 14px; 4712 padding: 8px 20px; 4713 border-radius: 2px; 4714} 4715.EOYSnippetForm .donation-amount { 4716 color: var(--newtab-text-primary-color); 4717 margin-inline-end: 18px; 4718 border: 1px solid var(--newtab-border-color); 4719 padding: 5px 14px; 4720 background: var(--newtab-background-color-secondary); 4721 cursor: pointer; 4722} 4723.EOYSnippetForm input[type=radio] { 4724 opacity: 0; 4725 margin-inline-end: -18px; 4726} 4727.EOYSnippetForm input[type=radio]:checked + .donation-amount { 4728 background: var(--newtab-text-secondary-color); 4729 color: var(--newtab-background-color-secondary); 4730 border: 1px solid var(--newtab-border-color); 4731} 4732.EOYSnippetForm input[type=radio]:checked:focus + .donation-amount, .EOYSnippetForm input[type=radio]:not(:checked):focus + .donation-amount { 4733 border: 1px dotted var(--newtab-primary-action-background); 4734} 4735.EOYSnippetForm .monthly-checkbox-container { 4736 display: flex; 4737 width: 100%; 4738} 4739.EOYSnippetForm .donation-form-url { 4740 margin-inline-start: 18px; 4741 align-self: flex-end; 4742 display: flex; 4743} 4744