activity-stream.css (294452B)
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 html { 6 box-sizing: border-box; 7 } 8 9 *, 10 *::before, 11 *::after { 12 box-sizing: inherit; 13 } 14 15 body { 16 margin: 0; 17 } 18 19 button, 20 input { 21 background-color: inherit; 22 color: inherit; 23 font-family: inherit; 24 font-size: inherit; 25 } 26 27 [hidden] { 28 display: none !important; 29 } 30 31 :root { 32 --newtab-card-height: 282px; 33 --newtab-card-width-medium: 300px; 34 --newtab-card-grid-layout-width: 296px; 35 } 36 37 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 38 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 39 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 40 :root { 41 color-scheme: light; 42 --newtab-background-color: #F9F9FB; 43 --newtab-background-color-secondary: var(--color-white); 44 --newtab-text-primary-color: var(--text-color); 45 --newtab-background-card: color-mix(in srgb, var(--color-white) 85%, transparent); 46 --newtab-text-topic-label-color: var(--color-violet-70); 47 --newtab-text-secondary-text: var(--text-color-deemphasized); 48 --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), var(--text-color)); 49 --newtab-primary-action-background: light-dark(var(--color-accent-primary), var(--color-accent-primary)); 50 --newtab-primary-action-background-pocket: #008078; 51 --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent); 52 --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent); 53 --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 85%), rgba(66, 65, 77, 85%)); 54 --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000); 55 --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000); 56 --newtab-button-background: var(--button-background-color); 57 --newtab-button-focus-background: var(--newtab-button-background); 58 --newtab-button-focus-border: var(--focus-outline-color); 59 --newtab-button-hover-background: var(--button-background-color-hover); 60 --newtab-button-active-background: var(--button-background-color-active); 61 --newtab-button-text: var(--button-text-color); 62 --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33); 63 --newtab-button-static-focus-background: var(--newtab-button-static-background); 64 --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E); 65 --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66); 66 --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent); 67 --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent); 68 --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent); 69 --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 90%, #000); 70 --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 90%, #000); 71 --newtab-primary-element-active-color: color-mix(in srgb, var(--newtab-primary-action-background) 80%, #000); 72 --newtab-primary-element-text-color: var(--color-white); 73 --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); 74 --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent); 75 --newtab-wordmark-color: light-dark(#20123A, #fbfbfe); 76 --newtab-status-success: var(--color-green-50); 77 --newtab-status-error: var(--color-red-60); 78 --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1); 79 --newtab-section-card-box-shadow-color: rgba(58, 57, 68, 20%); 80 --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent); 81 --border-radius-large: 16px; 82 --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); 83 --newtab-button-secondary-color: inherit; 84 } 85 :root[lwt-newtab-brighttext] { 86 color-scheme: dark; 87 --newtab-background-color: #2B2A33; 88 --newtab-background-color-secondary: #42414d; 89 --newtab-text-primary-color: var(--text-color); 90 --newtab-background-card: rgba(66, 65, 77, 0.85); 91 --newtab-text-topic-label-color: var(--color-violet-30); 92 --newtab-text-secondary-text: #FBFBFEB0; 93 --newtab-contextual-text-primary-color: light-dark(var(--text-color), var(--newtab-text-primary-color)); 94 --newtab-primary-action-background-pocket: var(--color-accent-primary); 95 --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); 96 --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, var(--color-white)); 97 --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 55%, var(--color-white)); 98 --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 80%, var(--color-white)); 99 --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 60%, var(--color-white)); 100 --newtab-section-card-box-shadow-color: rgba(0, 0, 0, 80%); 101 --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent); 102 --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent); 103 --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent); 104 --newtab-primary-element-text-color: #2b2a33; 105 --newtab-status-success: var(--color-green-30); 106 } 107 108 @media (prefers-contrast) { 109 :root { 110 --newtab-text-secondary-color: var(--newtab-text-primary-color); 111 --newtab-text-topic-label-color: var(--color-violet-30); 112 color-scheme: light; 113 --newtab-text-secondary-text: #000; 114 } 115 } 116 @media (prefers-contrast) and (prefers-color-scheme: dark) { 117 :root { 118 color-scheme: dark; 119 --newtab-text-secondary-text: #FFF; 120 } 121 } 122 .icon { 123 background-position: center center; 124 background-repeat: no-repeat; 125 background-size: 16px; 126 -moz-context-properties: fill; 127 display: inline-block; 128 color: var(--icon-color); 129 fill: currentColor; 130 height: 16px; 131 vertical-align: middle; 132 width: 16px; 133 } 134 .icon.icon-spacer { 135 margin-inline-end: var(--space-small); 136 } 137 .icon.icon-small-spacer { 138 margin-inline-end: var(--space-xsmall); 139 } 140 .icon.icon-button-style { 141 fill: var(--newtab-text-secondary-color); 142 border: 0; 143 } 144 .icon.icon-button-style:focus, .icon.icon-button-style:hover { 145 fill: var(--newtab-text-primary-color); 146 } 147 .icon.icon-bookmark-added { 148 background-image: url("chrome://browser/skin/bookmark.svg"); 149 } 150 .icon.icon-bookmark-hollow { 151 background-image: url("chrome://browser/skin/bookmark-hollow.svg"); 152 } 153 .icon.icon-clear-input { 154 background-image: url("chrome://global/skin/icons/close-fill.svg"); 155 } 156 .icon.icon-delete { 157 background-image: url("chrome://global/skin/icons/delete.svg"); 158 } 159 .icon.icon-search { 160 background-image: url("chrome://global/skin/icons/search-glass.svg"); 161 } 162 .icon.icon-modal-delete { 163 flex-shrink: 0; 164 background-image: url("chrome://newtab/content/data/content/assets/glyph-modal-delete-20.svg"); 165 background-size: 32px; 166 height: 32px; 167 width: 32px; 168 } 169 .icon.icon-mail { 170 background-image: url("chrome://newtab/content/data/content/assets/glyph-mail-16.svg"); 171 } 172 .icon.icon-dismiss { 173 background-image: url("chrome://global/skin/icons/close.svg"); 174 } 175 .icon.icon-info { 176 background-image: url("chrome://global/skin/icons/info.svg"); 177 } 178 .icon.icon-info-critical { 179 background-image: url("chrome://newtab/content/data/content/assets/glyph-info-critical-16.svg"); 180 } 181 .icon.icon-info-warning { 182 background-image: url("chrome://global/skin/icons/warning.svg"); 183 fill: var(--icon-color-warning); 184 -moz-context-properties: fill; 185 } 186 .icon.icon-help { 187 background-image: url("chrome://global/skin/icons/help.svg"); 188 } 189 .icon.icon-new-window { 190 background-image: url("chrome://newtab/content/data/content/assets/glyph-newWindow-16.svg"); 191 } 192 .icon.icon-new-window:dir(rtl) { 193 transform: scaleX(-1); 194 } 195 .icon.icon-new-window-private { 196 background-image: url("chrome://browser/skin/privateBrowsing.svg"); 197 } 198 .icon.icon-settings { 199 background-image: url("chrome://global/skin/icons/settings.svg"); 200 } 201 .icon.icon-pin { 202 background-image: url("chrome://newtab/content/data/content/assets/glyph-pin-16.svg"); 203 } 204 .icon.icon-pin:dir(rtl) { 205 transform: scaleX(-1); 206 } 207 .icon.icon-unpin { 208 background-image: url("chrome://newtab/content/data/content/assets/glyph-unpin-16.svg"); 209 } 210 .icon.icon-unpin:dir(rtl) { 211 transform: scaleX(-1); 212 } 213 .icon.icon-edit { 214 background-image: url("chrome://global/skin/icons/edit.svg"); 215 } 216 .icon.icon-edit-outline { 217 background-image: url("chrome://global/skin/icons/edit-outline.svg"); 218 } 219 .icon.icon-pocket { 220 background-image: url("chrome://global/skin/icons/help.svg"); 221 } 222 .icon.icon-history-item { 223 background-image: url("chrome://browser/skin/history.svg"); 224 } 225 .icon.icon-newsfeed { 226 background-image: url("chrome://global/skin/icons/newsfeed.svg"); 227 } 228 .icon.icon-trending { 229 background-image: url("chrome://browser/skin/trending.svg"); 230 transform: translateY(2px); 231 } 232 .icon.icon-now { 233 background-image: url("chrome://browser/skin/history.svg"); 234 } 235 .icon.icon-topsites { 236 background-image: url("chrome://browser/skin/topsites.svg"); 237 } 238 .icon.icon-pin-small { 239 background-image: url("chrome://browser/skin/pin-12.svg"); 240 background-size: 12px; 241 height: 12px; 242 width: 12px; 243 } 244 .icon.icon-pin-small:dir(rtl) { 245 transform: scaleX(-1); 246 } 247 .icon.icon-check { 248 background-image: url("chrome://global/skin/icons/check.svg"); 249 } 250 .icon.icon-check-filled { 251 background-image: url("chrome://global/skin/icons/check-filled.svg"); 252 } 253 .icon.icon-download { 254 background-image: url("chrome://browser/skin/downloads/downloads.svg"); 255 } 256 .icon.icon-copy { 257 background-image: url("chrome://global/skin/icons/edit-copy.svg"); 258 } 259 .icon.icon-open-file { 260 background-image: url("chrome://newtab/content/data/content/assets/glyph-open-file-16.svg"); 261 } 262 .icon.icon-webextension { 263 background-image: url("chrome://newtab/content/data/content/assets/glyph-webextension-16.svg"); 264 } 265 .icon.icon-weather { 266 background-image: url("chrome://browser/skin/weather/sunny.svg"); 267 } 268 .icon.icon-highlights { 269 background-image: url("chrome://global/skin/icons/highlights.svg"); 270 } 271 .icon.icon-arrowhead-down { 272 background-image: url("chrome://global/skin/icons/arrow-down.svg"); 273 } 274 .icon.icon-arrowhead-down-small { 275 background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); 276 background-size: 12px; 277 height: 12px; 278 width: 12px; 279 } 280 .icon.icon-arrowhead-forward-small { 281 background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); 282 background-size: 12px; 283 height: 12px; 284 width: 12px; 285 } 286 .icon.icon-arrowhead-forward-small:dir(rtl) { 287 background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); 288 } 289 .icon.icon-arrowhead-up { 290 background-image: url("chrome://global/skin/icons/arrow-up.svg"); 291 } 292 .icon.icon-add { 293 background-image: url("chrome://global/skin/icons/plus.svg"); 294 } 295 .icon.icon-add-circle-fill { 296 background-image: url("chrome://newtab/content/data/content/assets/glyph-add-circle-fill-16.svg"); 297 } 298 .icon.icon-minimize { 299 background-image: url("chrome://newtab/content/data/content/assets/glyph-minimize-16.svg"); 300 } 301 .icon.icon-maximize { 302 background-image: url("chrome://newtab/content/data/content/assets/glyph-maximize-16.svg"); 303 } 304 .icon.icon-arrow { 305 background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); 306 } 307 .icon.icon-device-phone { 308 background-image: url("chrome://browser/skin/device-phone.svg"); 309 } 310 .icon.icon-arrow-trending { 311 background-image: url("chrome://global/skin/icons/trending.svg"); 312 } 313 314 :root { 315 font-size: var(--font-size-root); 316 height: 100%; 317 } 318 :root[lwt-newtab-brighttext] { 319 -moz-osx-font-smoothing: grayscale; 320 } 321 322 body, 323 #root { 324 min-height: 100vh; 325 } 326 327 #root { 328 position: relative; 329 } 330 331 body { 332 background-color: var(--newtab-background-color); 333 font-family: system-ui; 334 font-size: var(--font-size-root); 335 background-repeat: no-repeat; 336 background-size: cover; 337 background-position: var(--newtab-wallpaper-backgroundPosition); 338 background-attachment: fixed; 339 background-image: var(--newtab-wallpaper, ""), linear-gradient(to right, var(--newtab-wallpaper-color, ""), var(--newtab-wallpaper-color, "")); 340 } 341 342 .no-scroll { 343 overflow: hidden; 344 } 345 346 h1, 347 h2 { 348 font-weight: var(--font-weight); 349 } 350 351 .inner-border { 352 border: 1px solid var(--border-color); 353 border-radius: var(--border-radius-small); 354 height: 100%; 355 inset-inline-start: 0; 356 pointer-events: none; 357 position: absolute; 358 inset-block-start: 0; 359 width: 100%; 360 z-index: 100; 361 } 362 363 @keyframes fadeIn { 364 from { 365 opacity: 0; 366 } 367 to { 368 opacity: 1; 369 } 370 } 371 .show-on-init { 372 opacity: 0; 373 transition: opacity 0.2s ease-in; 374 } 375 .show-on-init.on { 376 animation: fadeIn 0.2s; 377 opacity: 1; 378 } 379 380 .actions { 381 border-block-start: 1px solid var(--border-color); 382 display: flex; 383 flex-direction: row; 384 flex-wrap: wrap; 385 justify-content: flex-start; 386 margin: 0; 387 padding: var(--space-large) var(--space-xlarge) 0; 388 } 389 390 .button, 391 .actions button { 392 background-color: var(--newtab-button-secondary-color); 393 border: 1px solid var(--border-color); 394 border-radius: var(--border-radius-small); 395 color: inherit; 396 cursor: pointer; 397 margin-block-end: var(--space-large); 398 padding: var(--space-small) var(--space-xxlarge); 399 white-space: nowrap; 400 } 401 .button:hover:not(.dismiss), .button:focus:not(.dismiss), 402 .actions button:hover:not(.dismiss), 403 .actions button:focus:not(.dismiss) { 404 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 405 transition: box-shadow 150ms; 406 } 407 .button.dismiss, 408 .actions button.dismiss { 409 background-color: transparent; 410 border: 0; 411 padding: 0; 412 text-decoration: underline; 413 } 414 .button.primary, .button.done, 415 .actions button.primary, 416 .actions button.done { 417 background-color: var(--newtab-primary-action-background); 418 border: solid 1px var(--newtab-primary-action-background); 419 color: var(--newtab-primary-element-text-color); 420 margin-inline-start: auto; 421 } 422 423 input[type=text], input[type=search] { 424 border-radius: var(--border-radius-small); 425 } 426 427 .clamp { 428 -webkit-box-orient: vertical; 429 display: -webkit-box; 430 overflow: hidden; 431 word-break: break-word; 432 } 433 434 .a11y-link-button { 435 border: 0; 436 padding: 0; 437 cursor: pointer; 438 text-align: unset; 439 color: var(--newtab-primary-action-background); 440 } 441 .a11y-link-button:hover, .a11y-link-button:focus { 442 text-decoration: underline; 443 } 444 445 .outer-wrapper { 446 color: var(--newtab-text-primary-color); 447 display: flex; 448 flex-grow: 1; 449 min-height: 100vh; 450 padding: var(--space-xxlarge); 451 } 452 .outer-wrapper.ds-outer-wrapper-breakpoint-override { 453 padding: var(--space-xxlarge) 0; 454 } 455 @media (min-width: 610px) { 456 .outer-wrapper.ds-outer-wrapper-breakpoint-override { 457 padding: var(--space-xxlarge); 458 } 459 } 460 .outer-wrapper.only-search { 461 display: block; 462 padding-block-start: calc(var(--space-xxlarge) * 4); 463 } 464 .outer-wrapper a { 465 color: var(--newtab-primary-action-background); 466 } 467 468 main { 469 margin: 0 auto; 470 display: flex; 471 flex-direction: column; 472 justify-content: center; 473 width: 274px; 474 padding: 0; 475 } 476 main.newtab-main { 477 min-width: min-content; 478 } 479 main .vertical-center-wrapper { 480 margin: auto 0; 481 } 482 main section { 483 margin-block-end: var(--space-medium); 484 position: relative; 485 } 486 .hide-main main { 487 visibility: hidden; 488 } 489 @media (min-width: 610px) { 490 main { 491 width: 530px; 492 } 493 } 494 @media (min-width: 866px) { 495 main { 496 width: 786px; 497 } 498 } 499 @media (min-width: 1122px) { 500 main { 501 width: 1042px; 502 } 503 } 504 505 .no-search main { 506 margin-block-start: var(--space-xxlarge); 507 } 508 509 .ds-outer-wrapper-search-alignment main { 510 margin: 0 auto; 511 } 512 513 .ds-outer-wrapper-breakpoint-override main { 514 width: auto; 515 padding-block-end: 0; 516 } 517 .ds-outer-wrapper-breakpoint-override main .ds-card { 518 width: var(--newtab-card-grid-layout-width); 519 } 520 .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { 521 grid-gap: var(--space-large); 522 } 523 .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid).empty { 524 grid-template-columns: auto; 525 } 526 .ds-outer-wrapper-breakpoint-override main .body-wrapper { 527 width: 346px; 528 margin: 0 auto; 529 } 530 @media (min-width: 610px) { 531 .ds-outer-wrapper-breakpoint-override main { 532 width: auto; 533 } 534 .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { 535 grid-template-columns: repeat(1, 1fr); 536 } 537 .ds-outer-wrapper-breakpoint-override main .body-wrapper { 538 width: 346px; 539 } 540 } 541 @media (min-width: 724px) { 542 .ds-outer-wrapper-breakpoint-override main { 543 width: auto; 544 } 545 .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { 546 grid-template-columns: repeat(2, 1fr); 547 } 548 .ds-outer-wrapper-breakpoint-override main .body-wrapper { 549 width: 659px; 550 } 551 } 552 @media (min-width: 1122px) { 553 .ds-outer-wrapper-breakpoint-override main { 554 width: auto; 555 } 556 .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { 557 grid-template-columns: repeat(3, 1fr); 558 grid-gap: var(--space-xlarge); 559 } 560 .ds-outer-wrapper-breakpoint-override main .body-wrapper { 561 width: 989px; 562 } 563 } 564 @media (min-width: 1698px) { 565 .ds-outer-wrapper-breakpoint-override main { 566 width: auto; 567 } 568 .ds-outer-wrapper-breakpoint-override main .body-wrapper { 569 display: flex; 570 flex-direction: column; 571 width: 1311px; 572 } 573 .ds-outer-wrapper-breakpoint-override main .ds-highlights .card-outer { 574 min-width: 216px; 575 } 576 .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { 577 grid-template-columns: repeat(4, 1fr); 578 } 579 } 580 581 .base-content-fallback { 582 height: 100vh; 583 } 584 585 .body-wrapper .section-title, .body-wrapper .sections-list .section:last-of-type, .body-wrapper .topics { 586 opacity: 0; 587 } 588 .body-wrapper.on .section-title, .body-wrapper.on .sections-list .section:last-of-type, .body-wrapper.on .topics { 589 opacity: 1; 590 } 591 592 .non-collapsible-section { 593 padding: 0; 594 } 595 596 .prefs-button button { 597 background-color: transparent; 598 border: 0; 599 border-radius: var(--button-border-radius); 600 cursor: pointer; 601 padding: var(--space-large); 602 position: fixed; 603 inset-inline-end: var(--space-large); 604 inset-block-start: var(--space-large); 605 z-index: 1000; 606 } 607 .prefs-button button:hover, .prefs-button button:focus { 608 background-color: var(--newtab-element-hover-color); 609 } 610 .prefs-button button:active { 611 background-color: var(--newtab-element-active-color); 612 } 613 614 .wallpaper-attribution { 615 padding: 0 var(--space-xlarge); 616 font-size: var(--font-size-small); 617 color: var(--newtab-contextual-text-primary-color); 618 position: absolute; 619 inset-block-end: var(--space-large); 620 inset-inline-start: 0; 621 } 622 .lightWallpaper .wallpaper-attribution { 623 color-scheme: light; 624 } 625 .darkWallpaper .wallpaper-attribution { 626 color-scheme: dark; 627 } 628 .wallpaper-attribution.theme-light { 629 display: inline-block; 630 } 631 [lwt-newtab-brighttext] .wallpaper-attribution.theme-light { 632 display: none; 633 } 634 .wallpaper-attribution.theme-dark { 635 display: none; 636 } 637 [lwt-newtab-brighttext] .wallpaper-attribution.theme-dark { 638 display: inline-block; 639 } 640 .wallpaper-attribution a { 641 color: inherit; 642 } 643 .wallpaper-attribution a:hover { 644 text-decoration: none; 645 } 646 647 .as-error-fallback { 648 align-items: center; 649 border-radius: var(--border-radius-medium); 650 box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); 651 color: var(--newtab-text-secondary-color); 652 display: flex; 653 flex-direction: column; 654 font-size: var(--font-size-small); 655 justify-content: center; 656 justify-items: center; 657 } 658 .as-error-fallback.borderless-error { 659 box-shadow: none; 660 } 661 .as-error-fallback a { 662 color: var(--newtab-text-secondary-color); 663 text-decoration: underline; 664 } 665 666 .logo-and-wordmark-wrapper { 667 margin-block: 0; 668 } 669 670 .logo-and-wordmark { 671 align-items: center; 672 display: flex; 673 justify-content: center; 674 margin-block-end: var(--space-xxlarge); 675 } 676 .no-recommended-stories .logo-and-wordmark { 677 margin-block-end: calc(var(--space-large) + var(--space-xlarge)); 678 } 679 .logo-and-wordmark .logo { 680 display: inline-block; 681 height: 64px; 682 width: 64px; 683 background: image-set(url("chrome://branding/content/about-logo.png"), url("chrome://branding/content/about-logo@2x.png") 2x) no-repeat center; 684 background-size: 64px; 685 } 686 .logo-and-wordmark .wordmark { 687 background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; 688 background-size: 105px; 689 -moz-context-properties: fill; 690 display: inline-block; 691 fill: var(--newtab-wordmark-color); 692 height: 64px; 693 margin-inline-start: var(--space-large); 694 width: 105px; 695 } 696 .lightWallpaper .logo-and-wordmark .wordmark { 697 color-scheme: light; 698 } 699 .darkWallpaper .logo-and-wordmark .wordmark { 700 color-scheme: dark; 701 } 702 @media (max-width: 609px) { 703 .logo-and-wordmark .logo { 704 background-size: 64px; 705 height: 64px; 706 width: 64px; 707 } 708 .logo-and-wordmark .wordmark { 709 background-size: 100px; 710 height: 64px; 711 width: 100px; 712 margin-inline-start: var(--space-medium); 713 } 714 } 715 716 /* stylelint-disable max-nesting-depth */ 717 .top-sites-list { 718 list-style: none; 719 margin: 0 calc(var(--space-large) * -1); 720 padding: 0; 721 display: grid; 722 grid-template-columns: repeat(3, auto); 723 justify-content: center; 724 row-gap: var(--space-small); 725 } 726 .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { 727 background: color-mix(in srgb, var(--button-text-color-hover) 14%, transparent); 728 } 729 .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { 730 color-scheme: light; 731 } 732 .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { 733 color-scheme: dark; 734 } 735 .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .tile { 736 box-shadow: 0 2px 8px 0 var(--newtab-section-card-box-shadow-color); 737 } 738 .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .icon-pin-small { 739 opacity: 1; 740 } 741 .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover), .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { 742 background: color-mix(in srgb, var(--button-text-color-hover) 14%, transparent); 743 } 744 @media (prefers-contrast) { 745 .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover), .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { 746 background-color: var(--background-color-box); 747 } 748 } 749 @media (min-width: 724px) { 750 .top-sites-list { 751 grid-template-columns: repeat(6, auto); 752 } 753 } 754 @media (min-width: 1122px) { 755 .top-sites-list { 756 grid-template-columns: repeat(8, auto); 757 } 758 } 759 .top-sites-list a { 760 text-decoration: none; 761 } 762 @media (max-width: 610px) { 763 .top-sites-list > :nth-child(2n+1) .context-menu { 764 margin-inline-end: auto; 765 margin-inline-start: auto; 766 inset-inline-end: auto; 767 inset-inline-start: calc(var(--space-xxlarge) * -1); 768 } 769 .top-sites-list > :nth-child(2n) .context-menu { 770 margin-inline-end: var(--space-xsmall); 771 margin-inline-start: auto; 772 inset-inline-end: 0; 773 inset-inline-start: auto; 774 } 775 } 776 @media (min-width: 610px) and (max-width: 866px) { 777 .top-sites-list :nth-child(4n) .context-menu { 778 margin-inline-end: var(--space-xsmall); 779 margin-inline-start: auto; 780 inset-inline-end: 0; 781 inset-inline-start: auto; 782 } 783 } 784 @media (min-width: 610px) and (max-width: 802px) { 785 .top-sites-list :nth-child(4n+3) .context-menu { 786 margin-inline-end: var(--space-xsmall); 787 margin-inline-start: auto; 788 inset-inline-end: 0; 789 inset-inline-start: auto; 790 } 791 } 792 @media (min-width: 866px) and (max-width: 1250px) { 793 .top-sites-list :nth-child(6n) .context-menu { 794 margin-inline-end: var(--space-xsmall); 795 margin-inline-start: auto; 796 inset-inline-end: 0; 797 inset-inline-start: auto; 798 } 799 } 800 @media (min-width: 866px) and (max-width: 1058px) { 801 .top-sites-list :nth-child(6n+5) .context-menu { 802 margin-inline-end: var(--space-xsmall); 803 margin-inline-start: auto; 804 inset-inline-end: 0; 805 inset-inline-start: auto; 806 } 807 } 808 @media (min-width: 1122px) and (max-width: 1506px) { 809 .top-sites-list :nth-child(8n) .context-menu { 810 margin-inline-end: var(--space-xsmall); 811 margin-inline-start: auto; 812 inset-inline-end: 0; 813 inset-inline-start: auto; 814 } 815 } 816 @media (min-width: 1122px) and (max-width: 1314px) { 817 .top-sites-list :nth-child(8n+7) .context-menu { 818 margin-inline-end: var(--space-xsmall); 819 margin-inline-start: auto; 820 inset-inline-end: 0; 821 inset-inline-start: auto; 822 } 823 } 824 .top-sites-list .hide-for-narrow { 825 display: none; 826 } 827 @media (min-width: 610px) { 828 .top-sites-list .hide-for-narrow { 829 display: none; 830 } 831 } 832 @media (min-width: 866px) { 833 .top-sites-list .hide-for-narrow { 834 display: none; 835 } 836 } 837 @media (min-width: 1122px) { 838 .top-sites-list .hide-for-narrow { 839 display: inline-block; 840 } 841 } 842 843 .discovery-stream.ds-layout.ds-layout-topsites { 844 display: flex; 845 justify-content: center; 846 } 847 .discovery-stream.ds-layout.ds-layout-topsites .top-sites-list { 848 padding-block-start: 0; 849 } 850 851 .top-site-outer { 852 width: 120px; 853 margin-block-end: var(--space-medium); 854 border-radius: var(--border-radius-large); 855 display: inline-block; 856 } 857 .top-site-outer .top-site-inner { 858 position: relative; 859 } 860 .top-site-outer .top-site-inner > a { 861 padding: var(--space-large) var(--space-large) var(--space-xsmall); 862 color: inherit; 863 display: block; 864 outline: none; 865 } 866 .top-site-outer:hover .context-menu-button, .top-site-outer:focus .context-menu-button { 867 opacity: 1; 868 transition: opacity 200ms; 869 } 870 .lightWallpaper .top-site-outer:hover .context-menu-button, .lightWallpaper .top-site-outer:focus .context-menu-button { 871 color-scheme: light; 872 } 873 .darkWallpaper .top-site-outer:hover .context-menu-button, .darkWallpaper .top-site-outer:focus .context-menu-button { 874 color-scheme: dark; 875 } 876 .top-site-outer:hover .tile, .top-site-outer:focus .tile { 877 background-color: var(--newtab-background-color-secondary); 878 } 879 .top-site-outer:hover .icon-pin-small, .top-site-outer:focus .icon-pin-small { 880 opacity: 1; 881 } 882 .lightWallpaper .top-site-outer:not(:hover, :active, .active) { 883 color-scheme: light; 884 } 885 .darkWallpaper .top-site-outer:not(:hover, :active, .active) { 886 color-scheme: dark; 887 } 888 .top-site-outer.active .context-menu-button { 889 opacity: 1; 890 background-color: var(--newtab-button-active-background); 891 } 892 .top-site-outer .tile { 893 background: var(--newtab-background-card); 894 border-radius: var(--border-radius-large); 895 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 896 height: calc(var(--size-item-large) * 2); 897 width: calc(var(--size-item-large) * 2); 898 margin: 0 auto; 899 position: relative; 900 display: flex; 901 align-items: center; 902 justify-content: center; 903 text-transform: uppercase; 904 font-size: var(--font-size-xxlarge); 905 color: var(--newtab-contextual-text-secondary-color); 906 cursor: pointer; 907 } 908 .top-site-outer .tile .icon-wrapper { 909 border-radius: var(--border-radius-small); 910 width: 40px; 911 height: 40px; 912 display: flex; 913 align-items: center; 914 justify-content: center; 915 overflow: hidden; 916 position: relative; 917 } 918 .top-site-outer .tile .icon-wrapper.letter-fallback { 919 border-radius: var(--border-radius-circle); 920 } 921 .top-site-outer .tile .icon-wrapper.letter-fallback::before { 922 content: attr(data-fallback); 923 font-size: var(--font-size-xlarge); 924 transform: none; 925 position: static; 926 } 927 .top-site-outer .tile .top-site-icon { 928 background-color: transparent; 929 border-radius: var(--border-radius-medium); 930 background-position: center; 931 background-repeat: no-repeat; 932 position: absolute; 933 } 934 .top-site-outer .context-menu-button { 935 background-image: url("chrome://global/skin/icons/more.svg"); 936 border: 0; 937 border-radius: var(--border-radius-small); 938 cursor: pointer; 939 fill: var(--newtab-button-text); 940 -moz-context-properties: fill; 941 height: var(--size-item-medium); 942 width: var(--size-item-medium); 943 inset-inline-end: 0; 944 inset-block-start: var(--space-medium); 945 position: absolute; 946 opacity: 0; 947 } 948 .top-site-outer .context-menu-button:hover { 949 background-color: var(--newtab-button-hover-background); 950 } 951 .top-site-outer .context-menu-button:hover:active { 952 background-color: var(--newtab-button-active-background); 953 } 954 .top-site-outer .context-menu-button:focus-visible { 955 background-color: var(--newtab-button-focus-background); 956 outline: var(--focus-outline); 957 opacity: 1; 958 } 959 .lightWallpaper .top-site-outer .context-menu-button:focus-visible::after, .darkWallpaper .top-site-outer .context-menu-button:focus-visible::after { 960 content: ""; 961 position: absolute; 962 inset: 0; 963 border-radius: var(--border-radius-small); 964 outline: var(--focus-outline); 965 color-scheme: initial; 966 } 967 .top-site-outer .context-menu { 968 inset-block-start: calc(var(--space-large) + var(--space-xlarge)); 969 } 970 .top-site-outer .icon-pin-small { 971 inset-block-start: var(--space-small); 972 inset-inline-start: var(--space-small); 973 opacity: 0; 974 position: absolute; 975 } 976 .top-site-outer .top-site-button { 977 padding: var(--space-large) var(--space-large) var(--space-small); 978 } 979 .top-site-outer .top-site-button:focus + div .context-menu-button { 980 opacity: 1; 981 } 982 .lightWallpaper .top-site-outer .top-site-button:focus .tile, .darkWallpaper .top-site-outer .top-site-button:focus .tile { 983 outline: var(--focus-outline); 984 color-scheme: initial; 985 } 986 .top-site-outer .title { 987 color: var(--newtab-contextual-text-primary-color); 988 padding-block-start: var(--space-small); 989 font: caption; 990 text-align: center; 991 position: relative; 992 } 993 .top-site-outer .title .icon { 994 margin-inline-end: var(--space-xxsmall); 995 fill: currentColor; 996 } 997 .top-site-outer .title .sponsored-label { 998 color: var(--newtab-contextual-text-secondary-color); 999 font-size: var(--font-size-xsmall); 1000 } 1001 .top-site-outer .title:not(.sponsored) .sponsored-label { 1002 display: none; 1003 } 1004 .top-site-outer .title .search-topsite { 1005 margin-inline-end: var(--space-xxsmall); 1006 fill: currentColor; 1007 background-size: var(--icon-size-xsmall); 1008 height: var(--icon-size-xsmall); 1009 width: var(--icon-size-xsmall); 1010 background-position: center; 1011 background-repeat: no-repeat; 1012 background-color: transparent; 1013 position: static; 1014 display: inline-block; 1015 color: var(--icon-color); 1016 box-shadow: none; 1017 } 1018 .top-site-outer .rich-icon { 1019 background-size: cover; 1020 height: 100%; 1021 width: 100%; 1022 position: absolute; 1023 inset-inline-start: 0; 1024 inset-block-start: 0; 1025 } 1026 .top-site-outer .default-icon, 1027 .top-site-outer .search-topsite { 1028 background-size: 40px; 1029 height: 40px; 1030 width: 40px; 1031 align-items: center; 1032 display: flex; 1033 justify-content: center; 1034 font-size: var(--font-size-xlarge); 1035 } 1036 .top-site-outer .default-icon[data-fallback]::before, 1037 .top-site-outer .search-topsite[data-fallback]::before { 1038 content: attr(data-fallback); 1039 } 1040 .top-site-outer .search-topsite { 1041 background-image: url("chrome://global/skin/icons/search-glass.svg"); 1042 background-size: 16px; 1043 background-color: var(--newtab-primary-action-background); 1044 border-radius: var(--border-radius-circle); 1045 -moz-context-properties: fill; 1046 fill: var(--newtab-primary-element-text-color); 1047 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 1048 transition: background-size 150ms, bottom 150ms, inset-inline-end 150ms, height 150ms, width 150ms; 1049 height: 32px; 1050 width: 32px; 1051 inset-block-end: -6px; 1052 inset-inline-end: -6px; 1053 } 1054 .top-site-outer.placeholder .tile { 1055 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 1056 cursor: default; 1057 } 1058 .top-site-outer.add-button .tile { 1059 background-color: var(--button-background-color); 1060 } 1061 .top-site-outer.add-button .tile .icon-wrapper { 1062 background-image: url("chrome://global/skin/icons/plus-20.svg"); 1063 background-size: cover; 1064 background-repeat: no-repeat; 1065 height: 20px; 1066 width: 20px; 1067 fill: var(--icon-color); 1068 -moz-context-properties: fill; 1069 } 1070 .top-site-outer.add-button:hover .tile { 1071 background-color: var(--newtab-background-color-secondary); 1072 color-scheme: initial; 1073 } 1074 .top-site-outer.search-shortcut .rich-icon { 1075 background-color: var(--color-white); 1076 } 1077 .top-site-outer .edit-button { 1078 background-image: url("chrome://global/skin/icons/edit.svg"); 1079 } 1080 .top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before { 1081 display: none; 1082 } 1083 .top-site-outer.dragged .title { 1084 visibility: hidden; 1085 } 1086 1087 .shortcuts-refresh .top-site-outer { 1088 margin-block-end: 0; 1089 } 1090 1091 .edit-topsites-wrapper .top-site-inner > .top-site-button > .tile { 1092 border: 1px solid var(--border-color); 1093 } 1094 .edit-topsites-wrapper .modal { 1095 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); 1096 inset-inline-start: 0; 1097 margin: 0 auto; 1098 max-height: calc(100% - 40px); 1099 position: fixed; 1100 inset-inline-end: 0; 1101 inset-block-start: var(--space-xxlarge); 1102 width: 274px; 1103 } 1104 @media (min-width: 610px) { 1105 .edit-topsites-wrapper .modal { 1106 width: 530px; 1107 } 1108 } 1109 @media (min-width: 866px) { 1110 .edit-topsites-wrapper .modal { 1111 width: 786px; 1112 } 1113 } 1114 1115 .topsite-form .section-title { 1116 font-size: inherit; 1117 margin: 0 0 var(--space-large); 1118 } 1119 .topsite-form .form-input-container { 1120 max-width: 492px; 1121 margin: 0 auto; 1122 padding: var(--space-xxlarge); 1123 } 1124 .topsite-form .form-input-container .top-site-outer { 1125 pointer-events: none; 1126 } 1127 .topsite-form .search-shortcuts-container { 1128 max-width: 700px; 1129 margin: 0 auto; 1130 padding: var(--space-xxlarge); 1131 } 1132 .topsite-form .search-shortcuts-container > div { 1133 margin-inline-end: calc(var(--space-xxlarge) * -1); 1134 } 1135 .topsite-form .search-shortcuts-container .top-site-outer { 1136 margin-inline-start: 0; 1137 margin-inline-end: var(--space-xxlarge); 1138 } 1139 .topsite-form .top-site-outer { 1140 padding: 0; 1141 margin: var(--space-xlarge) 0 0; 1142 margin-inline-start: var(--space-xxlarge); 1143 } 1144 .topsite-form .fields-and-preview { 1145 display: flex; 1146 } 1147 .topsite-form label { 1148 font-size: var(--font-size-large); 1149 } 1150 .topsite-form .form-wrapper { 1151 width: 100%; 1152 } 1153 .topsite-form .form-wrapper .field { 1154 position: relative; 1155 } 1156 .topsite-form .form-wrapper .field .icon-clear-input { 1157 position: absolute; 1158 transform: translateY(-50%); 1159 inset-block-start: 50%; 1160 inset-inline-end: var(--space-small); 1161 } 1162 .topsite-form .form-wrapper .url input:dir(ltr) { 1163 padding-inline-end: var(--space-xxlarge); 1164 } 1165 .topsite-form .form-wrapper .url input:dir(rtl) { 1166 padding-inline-start: var(--space-xxlarge); 1167 } 1168 .topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) { 1169 direction: ltr; 1170 text-align: end; 1171 } 1172 .topsite-form .form-wrapper .enable-custom-image-input { 1173 display: inline-block; 1174 font-size: var(--font-size-small); 1175 margin-block-start: var(--space-xsmall); 1176 cursor: pointer; 1177 } 1178 .topsite-form .form-wrapper .custom-image-input-container { 1179 margin-block-start: var(--space-xsmall); 1180 } 1181 .topsite-form .form-wrapper .custom-image-input-container .loading-container { 1182 width: 16px; 1183 height: 16px; 1184 overflow: hidden; 1185 position: absolute; 1186 transform: translateY(-50%); 1187 inset-block-start: 50%; 1188 inset-inline-end: var(--space-small); 1189 } 1190 .topsite-form .form-wrapper .custom-image-input-container .loading-animation { 1191 width: 960px; 1192 height: 16px; 1193 -moz-context-properties: fill; 1194 fill: var(--newtab-primary-action-background); 1195 background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); 1196 animation: tab-throbber-animation 1.05s steps(60) infinite; 1197 } 1198 @keyframes tab-throbber-animation { 1199 100% { 1200 transform: translateX(-960px); 1201 } 1202 } 1203 @keyframes tab-throbber-animation-rtl { 1204 100% { 1205 transform: translateX(960px); 1206 } 1207 } 1208 .topsite-form .form-wrapper .custom-image-input-container .loading-animation:dir(rtl) { 1209 animation-name: tab-throbber-animation-rtl; 1210 } 1211 .topsite-form .form-wrapper input[type=text] { 1212 background-color: var(--newtab-background-color-secondary); 1213 border: 1px solid var(--border-color-interactive); 1214 margin: var(--space-small) 0; 1215 padding: 0 var(--space-small); 1216 height: 32px; 1217 width: 100%; 1218 font-size: inherit; 1219 } 1220 .topsite-form .form-wrapper input[type=text][disabled] { 1221 border: 1px solid var(--border-color-interactive-disabled); 1222 box-shadow: none; 1223 opacity: 0.4; 1224 } 1225 .topsite-form .form-wrapper .invalid input[type=text] { 1226 border: 1px solid var(--outline-color-error); 1227 box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3); 1228 } 1229 .topsite-form .form-wrapper .error-tooltip { 1230 animation: fade-up-tt 450ms; 1231 background: var(--newtab-status-error); 1232 border-radius: var(--border-radius-small); 1233 color: var(--color-white); 1234 inset-inline-start: var(--space-xxsmall); 1235 padding: var(--space-xsmall) var(--space-medium); 1236 position: absolute; 1237 inset-block-start: var(--space-xxlarge); 1238 z-index: 1; 1239 } 1240 .topsite-form .form-wrapper .error-tooltip::before { 1241 background: var(--newtab-status-error); 1242 inset-block-end: calc(var(--space-small) * -1); 1243 content: "."; 1244 height: 16px; 1245 inset-inline-start: var(--space-medium); 1246 position: absolute; 1247 text-indent: -999px; 1248 inset-block-start: calc(var(--space-small) * -1); 1249 transform: rotate(45deg); 1250 white-space: nowrap; 1251 width: 16px; 1252 z-index: -1; 1253 } 1254 .topsite-form .actions { 1255 justify-content: flex-end; 1256 } 1257 .topsite-form .actions button { 1258 margin-inline-start: var(--space-small); 1259 margin-inline-end: 0; 1260 } 1261 @media (max-width: 610px) { 1262 .topsite-form .fields-and-preview { 1263 flex-direction: column; 1264 } 1265 .topsite-form .fields-and-preview .top-site-outer { 1266 margin-inline-start: 0; 1267 } 1268 } 1269 .topsite-form .title { 1270 user-select: none; 1271 } 1272 .topsite-form [type=checkbox]:not(:checked), 1273 .topsite-form [type=checkbox]:checked { 1274 inset-inline-start: -9999px; 1275 position: absolute; 1276 } 1277 .topsite-form [type=checkbox]:not(:checked) + label, 1278 .topsite-form [type=checkbox]:checked + label { 1279 cursor: pointer; 1280 display: block; 1281 position: relative; 1282 } 1283 .topsite-form [type=checkbox]:not(:checked) + label::before, 1284 .topsite-form [type=checkbox]:checked + label::before { 1285 background: var(--newtab-background-color); 1286 border: 1px solid var(--border-color); 1287 border-radius: var(--border-radius-small); 1288 content: ""; 1289 height: 21px; 1290 inset-inline-start: calc(var(--space-small) * -1); 1291 position: absolute; 1292 inset-block-start: calc(var(--space-small) * -1); 1293 width: 21px; 1294 z-index: 1; 1295 } 1296 [dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::before, 1297 [dir=rtl] .topsite-form [type=checkbox]:checked + label::before { 1298 inset-inline-start: auto; 1299 inset-inline-end: calc(var(--space-small) * -1); 1300 } 1301 .topsite-form [type=checkbox]:not(:checked) + label::after, 1302 .topsite-form [type=checkbox]:checked + label::after { 1303 background: url("chrome://global/skin/icons/check.svg") no-repeat center center; 1304 content: ""; 1305 height: 21px; 1306 inset-inline-start: calc(var(--space-small) * -1); 1307 position: absolute; 1308 inset-block-start: calc(var(--space-small) * -1); 1309 width: 21px; 1310 -moz-context-properties: fill; 1311 fill: var(--newtab-primary-action-background); 1312 z-index: 2; 1313 } 1314 [dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::after, 1315 [dir=rtl] .topsite-form [type=checkbox]:checked + label::after { 1316 inset-inline-start: auto; 1317 inset-inline-end: calc(var(--space-small) * -1); 1318 } 1319 .topsite-form [type=checkbox]:checked + label .tile { 1320 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 1321 } 1322 .topsite-form [type=checkbox]:not(:checked) + label::after { 1323 opacity: 0; 1324 } 1325 .topsite-form [type=checkbox]:checked + label::after { 1326 opacity: 1; 1327 } 1328 .topsite-form [type=checkbox]:checked:focus + label::before, 1329 .topsite-form [type=checkbox]:not(:checked):focus + label::before { 1330 border: 1px dotted var(--newtab-primary-action-background); 1331 } 1332 1333 .top-sites-list .top-site-outer .top-site-button, 1334 .fields-and-preview .top-site-outer .top-site-button { 1335 display: flex; 1336 flex-direction: column; 1337 justify-content: center; 1338 align-items: center; 1339 } 1340 .top-sites-list .top-site-outer .title .title-label, 1341 .fields-and-preview .top-site-outer .title .title-label { 1342 display: block; 1343 overflow: hidden; 1344 text-overflow: ellipsis; 1345 -webkit-line-clamp: 2; 1346 white-space: wrap; 1347 word-break: break-word; 1348 min-height: 2lh; 1349 width: 100px; 1350 padding: 0 var(--space-xsmall); 1351 } 1352 .top-sites-list .top-site-outer .title.sponsored .title-label, 1353 .fields-and-preview .top-site-outer .title.sponsored .title-label { 1354 -webkit-line-clamp: 1; 1355 min-height: 1lh; 1356 } 1357 1358 @keyframes fade-up-tt { 1359 0% { 1360 opacity: 0; 1361 transform: translateY(15px); 1362 } 1363 100% { 1364 opacity: 1; 1365 transform: translateY(0); 1366 } 1367 } 1368 .topsite-impression-observer { 1369 position: absolute; 1370 inset-block-start: 0; 1371 width: 100%; 1372 height: 100%; 1373 pointer-events: none; 1374 } 1375 1376 .sections-list .section-list { 1377 display: grid; 1378 grid-gap: var(--space-xxlarge); 1379 grid-template-columns: repeat(auto-fit, 192px); 1380 margin: 0; 1381 } 1382 @media (max-width: 610px) { 1383 .sections-list .section-list .context-menu { 1384 margin-inline-end: var(--space-xsmall); 1385 margin-inline-start: auto; 1386 inset-inline-end: 0; 1387 inset-inline-start: auto; 1388 } 1389 } 1390 @media (min-width: 610px) and (max-width: 866px) { 1391 .sections-list .section-list :nth-child(2n) .context-menu { 1392 margin-inline-end: var(--space-xsmall); 1393 margin-inline-start: auto; 1394 inset-inline-end: 0; 1395 inset-inline-start: auto; 1396 } 1397 } 1398 @media (min-width: 866px) and (max-width: 1250px) { 1399 .sections-list .section-list :nth-child(3n) .context-menu { 1400 margin-inline-end: var(--space-xsmall); 1401 margin-inline-start: auto; 1402 inset-inline-end: 0; 1403 inset-inline-start: auto; 1404 } 1405 } 1406 @media (min-width: 1122px) and (max-width: 1506px) { 1407 .sections-list .section-list :nth-child(3n) .context-menu, 1408 .sections-list .section-list :nth-child(4n) .context-menu { 1409 margin-inline-end: var(--space-xsmall); 1410 margin-inline-start: auto; 1411 inset-inline-end: 0; 1412 inset-inline-start: auto; 1413 } 1414 } 1415 .sections-list .section-empty-state { 1416 border: 1px solid var(--border-color); 1417 border-radius: var(--border-radius-small); 1418 display: flex; 1419 height: 266px; 1420 width: 100%; 1421 } 1422 .sections-list .section-empty-state .empty-state { 1423 margin: auto; 1424 max-width: 350px; 1425 } 1426 .sections-list .section-empty-state .empty-state .empty-state-message { 1427 color: var(--newtab-text-primary-color); 1428 font-size: var(--font-size-small); 1429 margin-block-end: 0; 1430 text-align: center; 1431 } 1432 @media (min-width: 1122px) { 1433 .sections-list .section-empty-state { 1434 height: 370px; 1435 } 1436 } 1437 1438 .top-stories-bottom-container { 1439 color: var(--newtab-text-primary-color); 1440 font-size: var(--font-size-small); 1441 margin-block-start: var(--space-medium); 1442 display: flex; 1443 justify-content: space-between; 1444 } 1445 .top-stories-bottom-container a { 1446 color: var(--newtab-primary-action-background); 1447 font-weight: var(--font-weight-semibold); 1448 } 1449 .top-stories-bottom-container a.more-recommendations { 1450 font-weight: var(--font-weight); 1451 font-size: var(--font-size-small); 1452 } 1453 @media (max-width: 865px) { 1454 .top-stories-bottom-container .wrapper-topics { 1455 display: none; 1456 } 1457 } 1458 @media (max-width: 609px) { 1459 .top-stories-bottom-container .wrapper-more-recommendations { 1460 width: 100%; 1461 } 1462 .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations { 1463 justify-content: center; 1464 } 1465 .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations::after { 1466 display: none; 1467 } 1468 } 1469 1470 @media (min-width: 1122px) { 1471 .sections-list .normal-cards .section-list { 1472 grid-template-columns: repeat(auto-fit, 309px); 1473 } 1474 } 1475 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 1476 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 1477 .search-wrapper { 1478 padding: 0; 1479 margin-block: var(--space-xxlarge); 1480 margin-block-start: 0; 1481 /** 1482 * @backward-compat { version 148 } 1483 * 1484 * Temporary dual implementation to support train hopping. The old handoff UI 1485 * is kept alongside the new contentSearchHandoffUI.mjs custom element until 1486 * the module lands on all channels. Controlled by the pref 1487 * browser.newtabpage.activity-stream.search.useHandoffComponent. 1488 * Remove the old implementation and the pref once this ships to Release. 1489 */ 1490 /** 1491 * @backward-compat { version 148 } 1492 * 1493 * Temporary dual implementation to support train hopping. The old handoff UI 1494 * is kept alongside the new contentSearchHandoffUI.mjs custom element until 1495 * the module lands on all channels. Controlled by the pref 1496 * browser.newtabpage.activity-stream.search.useHandoffComponent. 1497 * Remove the old implementation and the pref once this ships to Release. 1498 */ 1499 /** 1500 * @backward-compat { version 148 } 1501 * 1502 * Temporary dual implementation to support train hopping. The old handoff UI 1503 * is kept alongside the new contentSearchHandoffUI.mjs custom element until 1504 * the module lands on all channels. Controlled by the pref 1505 * browser.newtabpage.activity-stream.search.useHandoffComponent. 1506 * Remove the old implementation and the pref once this ships to Release. 1507 */ 1508 } 1509 .search-wrapper .logo-and-wordmark { 1510 margin-block-end: var(--space-xxlarge); 1511 } 1512 .search-wrapper .logo-and-wordmark-wrapper { 1513 margin-block-end: 0; 1514 } 1515 @media (height <= 700px) { 1516 .search-wrapper { 1517 padding: 0; 1518 margin-block-start: 0; 1519 } 1520 } 1521 @media (height > 700px) { 1522 .search-wrapper { 1523 padding: 0; 1524 } 1525 } 1526 .only-search .search-wrapper { 1527 padding-block-end: calc(var(--space-large) + var(--space-xlarge)); 1528 } 1529 .search-wrapper .search-inner-wrapper { 1530 cursor: default; 1531 display: flex; 1532 min-height: 52px; 1533 margin: 0 auto; 1534 position: relative; 1535 width: 304px; 1536 } 1537 @media (min-width: 610px) { 1538 .search-wrapper .search-inner-wrapper { 1539 width: 360px; 1540 } 1541 } 1542 @media (min-width: 866px) { 1543 .search-wrapper .search-inner-wrapper { 1544 width: 510px; 1545 } 1546 } 1547 @media (min-width: 1122px) { 1548 .search-wrapper .search-inner-wrapper { 1549 width: 720px; 1550 } 1551 } 1552 .search-wrapper .search-inner-wrapper:has(.trending-searches-pill-wrapper) { 1553 display: flex; 1554 flex-direction: column; 1555 } 1556 .search-wrapper .search-inner-wrapper:has(.trending-searches-pill-wrapper) .search-handoff-button { 1557 height: 52px; 1558 } 1559 .search-wrapper .search-handoff-button { 1560 background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat; 1561 background-size: 24px; 1562 padding-inline-start: 52px; 1563 padding-inline-end: var(--space-small); 1564 padding-block: 0; 1565 width: 100%; 1566 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 1567 border: 1px solid transparent; 1568 border-radius: var(--border-radius-medium); 1569 color: var(--newtab-text-primary-color); 1570 -moz-context-properties: fill; 1571 fill: var(--newtab-text-secondary-color); 1572 } 1573 .search-wrapper .search-handoff-button:dir(rtl) { 1574 background-position-x: right 16px; 1575 } 1576 .search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { 1577 border: 1px solid var(--newtab-primary-action-background); 1578 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 1579 } 1580 .search-wrapper .search-handoff-button { 1581 padding-inline-end: var(--space-large); 1582 color: var(--newtab-text-primary-color); 1583 fill: var(--newtab-text-secondary-color); 1584 -moz-context-properties: fill; 1585 } 1586 .search-wrapper .search-handoff-button .fake-caret { 1587 inset-block-start: var(--space-large); 1588 inset-inline-start: 52px; 1589 } 1590 .search-wrapper .search-handoff-button .fake-caret:dir(rtl) { 1591 background-position-x: right 16px; 1592 } 1593 .search-wrapper content-search-handoff-ui { 1594 --content-search-handoff-ui-background-color: var(--newtab-background-color-secondary); 1595 --content-search-handoff-ui-color: var(--newtab-text-primary-color); 1596 --content-search-handoff-ui-fill: var(--newtab-text-secondary-color); 1597 --content-search-handoff-ui-caret-color: var(--newtab-text-primary-color); 1598 --content-search-handoff-ui-fakefocus-border-color: var(--newtab-primary-action-background); 1599 --content-search-handoff-ui-fakefocus-box-shadow-inner: var(--newtab-primary-action-background-dimmed); 1600 --content-search-handoff-ui-fakefocus-box-shadow-outer: transparent; 1601 } 1602 .search-wrapper.visible-logo .logo-and-wordmark .wordmark { 1603 fill: var(--newtab-wordmark-color); 1604 } 1605 1606 .has-recommended-stories .outer-wrapper:not(.fixed-search) .search-wrapper { 1607 margin-block-start: var(--space-large); 1608 } 1609 .has-recommended-stories .logo-and-wordmark { 1610 position: absolute; 1611 inset-inline-start: var(--space-xxlarge); 1612 inset-block-start: var(--space-xxlarge); 1613 } 1614 @media (min-width: 724px) { 1615 .has-recommended-stories .logo-and-wordmark { 1616 inset-inline-start: var(--space-large); 1617 } 1618 } 1619 @media (min-width: 866px) { 1620 .has-recommended-stories .logo-and-wordmark { 1621 inset-inline-start: var(--space-xxlarge); 1622 } 1623 } 1624 .has-recommended-stories.no-search .body-wrapper { 1625 margin-block-start: 0; 1626 } 1627 @media (min-width: 866px) { 1628 .has-recommended-stories.no-search .body-wrapper { 1629 margin-block-start: calc(var(--space-xlarge) * 4); 1630 } 1631 } 1632 @media (min-width: 1698px) { 1633 .has-recommended-stories.no-search .body-wrapper { 1634 margin-block-start: 0; 1635 } 1636 } 1637 .has-recommended-stories.no-search.has-sections-grid .body-wrapper { 1638 margin-block-start: calc(var(--space-xlarge) * 4); 1639 } 1640 .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark { 1641 inset-inline-start: var(--space-large); 1642 } 1643 @media (min-width: 510px) { 1644 .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark { 1645 inset-inline-start: var(--space-xxlarge); 1646 } 1647 } 1648 @media (min-width: 724px) { 1649 .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark { 1650 inset-inline-start: var(--space-large); 1651 } 1652 } 1653 @media (min-width: 866px) { 1654 .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark { 1655 inset-inline-start: var(--space-xxlarge); 1656 } 1657 } 1658 .has-recommended-stories .search-inner-wrapper { 1659 width: 200px; 1660 } 1661 @media (min-width: 510px) { 1662 .has-recommended-stories .search-inner-wrapper { 1663 width: 300px; 1664 } 1665 } 1666 @media (min-width: 610px) { 1667 .has-recommended-stories .search-inner-wrapper { 1668 width: 350px; 1669 } 1670 } 1671 @media (min-width: 866px) { 1672 .has-recommended-stories .search-inner-wrapper { 1673 width: 410px; 1674 } 1675 } 1676 @media (min-width: 1122px) { 1677 .has-recommended-stories .search-inner-wrapper { 1678 width: 584px; 1679 } 1680 } 1681 @media (min-width: 1506px) { 1682 .has-recommended-stories .search-inner-wrapper { 1683 width: 720px; 1684 } 1685 } 1686 @media (min-width: 1122px) { 1687 .has-recommended-stories.has-mobile-download-promo .search-inner-wrapper { 1688 width: 497px; 1689 } 1690 } 1691 @media (min-width: 1506px) { 1692 .has-recommended-stories.has-mobile-download-promo .search-inner-wrapper { 1693 width: 720px; 1694 } 1695 } 1696 .has-recommended-stories .logo { 1697 width: 52px; 1698 height: 52px; 1699 background-size: 52px; 1700 } 1701 .has-recommended-stories .wordmark { 1702 display: none; 1703 height: 52px; 1704 } 1705 @media (min-width: 866px) { 1706 .has-recommended-stories .wordmark { 1707 display: block; 1708 } 1709 } 1710 1711 .search-handoff-button { 1712 background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat; 1713 background-size: 24px; 1714 border: solid 1px transparent; 1715 border-radius: var(--border-radius-small); 1716 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); 1717 cursor: text; 1718 font-size: inherit; 1719 padding: 0; 1720 padding-inline: calc(var(--space-xlarge) * 2); 1721 opacity: 1; 1722 width: 100%; 1723 } 1724 .search-handoff-button:dir(rtl) { 1725 background-position-x: right 16px; 1726 } 1727 .fake-focus:not(.search-disabled) .search-handoff-button { 1728 border: 1px solid var(--border-color-interactive); 1729 box-shadow: var(--newtab-textbox-focus-boxshadow); 1730 } 1731 .fake-focus:not(.search-disabled) .search-handoff-button .fake-caret { 1732 display: block; 1733 } 1734 .search-disabled .search-handoff-button { 1735 opacity: 0.5; 1736 box-shadow: none; 1737 } 1738 .search-handoff-button .fake-editable:focus { 1739 outline: none; 1740 caret-color: transparent; 1741 } 1742 .search-handoff-button .fake-editable { 1743 color: transparent; 1744 height: 100%; 1745 opacity: 0; 1746 position: absolute; 1747 inset: 0; 1748 } 1749 .search-handoff-button .fake-textbox { 1750 opacity: 0.54; 1751 text-align: start; 1752 -webkit-line-clamp: 1; 1753 overflow: hidden; 1754 } 1755 .search-handoff-button .fake-caret { 1756 /* To replicate the default caret blink rate of 567ms (https://searchfox.org/mozilla-central/source/widget/cocoa/nsLookAndFeel.mm#397): 1757 - Multiply the blink time by 2 to cover both the visible and hidden states. 1758 - Use steps(2, start) to divide the animation into 2 phases: 1759 1. First 567ms (Step 1) → Caret is visible 1760 2. Next 567ms (Step 2) → Caret is hidden 1761 This gives a sharp ON/OFF effect instead of a smooth transition. */ 1762 animation: caret-animation var(--caret-blink-time, 1134ms) steps(2, start) var(--caret-blink-count, infinite); 1763 background: var(--newtab-text-primary-color); 1764 display: none; 1765 inset-inline-start: calc(var(--space-xlarge) * 2); 1766 height: 17px; 1767 position: absolute; 1768 inset-block-start: var(--space-large); 1769 width: 1px; 1770 } 1771 @keyframes caret-animation { 1772 to { 1773 visibility: hidden; 1774 } 1775 } 1776 1777 @media (height > 700px) { 1778 .activity-stream .fixed-search .search-wrapper { 1779 border-block-end: solid 1px var(--border-color); 1780 padding: var(--space-xlarge) 0; 1781 background-color: var(--newtab-overlay-color); 1782 min-height: 95px; 1783 inset-inline-start: 0; 1784 position: fixed; 1785 inset-block-start: 0; 1786 width: 100%; 1787 z-index: 3; 1788 display: flex; 1789 align-items: center; 1790 } 1791 .activity-stream .fixed-search .search-wrapper .search-inner-wrapper { 1792 min-height: 52px; 1793 } 1794 .activity-stream .fixed-search .search-wrapper .search-handoff-button .fake-caret { 1795 inset-block-start: var(--space-large); 1796 } 1797 .activity-stream .fixed-search .search-wrapper .logo-and-wordmark { 1798 display: none; 1799 } 1800 .activity-stream .fixed-search .search-handoff-button { 1801 background-position-x: var(--space-large); 1802 background-size: 24px; 1803 } 1804 .activity-stream .fixed-search .search-handoff-button:dir(rtl) { 1805 background-position-x: right var(--space-large); 1806 } 1807 .activity-stream .fixed-search .search-handoff-button .fake-caret { 1808 inset-block-start: var(--space-small); 1809 } 1810 } 1811 /* stylelint-disable max-nesting-depth */ 1812 .context-menu { 1813 background: var(--newtab-background-color-secondary); 1814 border-radius: var(--border-radius-small); 1815 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2); 1816 display: block; 1817 font-size: inherit; 1818 margin-inline-start: var(--space-xsmall); 1819 inset-inline-start: 100%; 1820 position: absolute; 1821 inset-block-start: var(--space-small); 1822 z-index: 2; 1823 } 1824 .context-menu > ul { 1825 list-style: none; 1826 margin: 0; 1827 padding: var(--space-xsmall) 0; 1828 } 1829 .context-menu > ul > li { 1830 margin: 0; 1831 width: 100%; 1832 } 1833 .context-menu > ul > li.separator { 1834 border-block-end: 1px solid var(--border-color); 1835 margin: var(--space-xsmall) 0; 1836 } 1837 .context-menu > ul > li > a, 1838 .context-menu > ul > li > button { 1839 align-items: center; 1840 color: inherit; 1841 cursor: pointer; 1842 display: flex; 1843 width: 100%; 1844 outline: none; 1845 border: 0; 1846 padding: var(--space-xsmall) var(--space-medium); 1847 white-space: nowrap; 1848 } 1849 .context-menu > ul > li > a:is(:focus, :hover), 1850 .context-menu > ul > li > button:is(:focus, :hover) { 1851 background: var(--newtab-element-secondary-hover-color); 1852 } 1853 .context-menu > ul > li > a:active, 1854 .context-menu > ul > li > button:active { 1855 background: var(--newtab-element-secondary-active-color); 1856 } 1857 .context-menu > ul > li > a.disabled, 1858 .context-menu > ul > li > button.disabled { 1859 opacity: 0.4; 1860 pointer-events: none; 1861 } 1862 1863 .confirmation-dialog { 1864 border: 1px solid var(--border-color); 1865 border-radius: var(--border-radius-small); 1866 padding: 0; 1867 width: 400px; 1868 box-shadow: var(--box-shadow-popup); 1869 background: var(--newtab-background-color-secondary); 1870 } 1871 .confirmation-dialog::backdrop { 1872 background: var(--newtab-overlay-color); 1873 } 1874 .confirmation-dialog section { 1875 margin: 0; 1876 } 1877 .confirmation-dialog .modal-message { 1878 display: flex; 1879 padding: var(--space-large); 1880 padding-block-end: 0; 1881 } 1882 .confirmation-dialog .modal-message p { 1883 margin: 0; 1884 margin-block-end: var(--space-large); 1885 } 1886 .confirmation-dialog .button-group { 1887 border: 0; 1888 padding: var(--space-large); 1889 } 1890 .confirmation-dialog .icon { 1891 margin-inline-end: var(--space-large); 1892 } 1893 1894 .personalizeButtonWrapper { 1895 margin: 0; 1896 padding: 0; 1897 z-index: 5; 1898 position: fixed; 1899 inset-block-end: var(--space-xlarge); 1900 inset-inline-end: var(--space-xlarge); 1901 } 1902 1903 .personalize-button { 1904 border: 0; 1905 border-radius: var(--border-radius-small); 1906 background-color: var(--button-background-color, rgba(21, 20, 26, 0.07)); 1907 box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 0.2); 1908 padding: calc(5 * var(--space-xxsmall)); 1909 position: relative; 1910 background-size: var(--icon-size-medium); 1911 background-position: center; 1912 display: flex; 1913 align-items: center; 1914 overflow: hidden; 1915 transition: background-color 0.3s ease; 1916 } 1917 .lightWallpaper .personalize-button, .darkWallpaper .personalize-button { 1918 background-color: var(--newtab-weather-background-color); 1919 } 1920 @media (prefers-contrast) { 1921 .lightWallpaper .personalize-button, .darkWallpaper .personalize-button { 1922 background-color: var(--background-color-box); 1923 } 1924 } 1925 .personalize-button:hover { 1926 background-color: var(--newtab-button-static-hover-background); 1927 } 1928 .personalize-button:active { 1929 background-color: var(--newtab-button-static-active-background); 1930 } 1931 .personalize-button:focus-visible { 1932 border: 0; 1933 outline: var(--focus-outline); 1934 background-color: var(--newtab-button-static-active-background); 1935 } 1936 .personalize-button.personalize-animate-exit-done { 1937 visibility: hidden; 1938 } 1939 .personalize-button > div { 1940 width: var(--icon-size-medium); 1941 height: var(--icon-size-medium); 1942 display: flex; 1943 align-items: center; 1944 justify-content: center; 1945 flex-shrink: 0; 1946 } 1947 .personalize-button > div > img { 1948 -moz-context-properties: fill; 1949 display: inline-block; 1950 color: var(--icon-color); 1951 fill: currentColor; 1952 height: 100%; 1953 object-fit: contain; 1954 vertical-align: middle; 1955 width: 100%; 1956 } 1957 .personalize-button > label { 1958 margin-inline-end: 0; 1959 opacity: 0; 1960 white-space: nowrap; 1961 overflow: hidden; 1962 max-width: 0; 1963 transition: opacity 0.3s ease, margin 0.3s ease, max-width 0.3s ease; 1964 } 1965 1966 .personalize-button:hover > label, 1967 .personalize-button:focus-visible > label { 1968 opacity: 1; 1969 margin-inline-end: var(--space-medium); 1970 max-width: 30ch; 1971 } 1972 1973 .customize-menu-animate-wrapper { 1974 color: var(--newtab-text-primary-color); 1975 background-color: var(--newtab-background-color-secondary); 1976 width: 432px; 1977 height: 100%; 1978 display: none; 1979 position: fixed; 1980 inset-block: 0; 1981 inset-inline-end: 0; 1982 z-index: 1001; 1983 padding-block: 0 var(--space-large); 1984 padding-inline: var(--space-large); 1985 transform: translateX(435px); 1986 visibility: hidden; 1987 cursor: default; 1988 } 1989 .customize-menu-animate-wrapper.customize-animate-enter, .customize-menu-animate-wrapper.customize-animate-exit, .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-exit-done { 1990 display: block; 1991 } 1992 @media (prefers-reduced-motion: no-preference) { 1993 .customize-menu-animate-wrapper.customize-animate-enter, .customize-menu-animate-wrapper.customize-animate-exit, .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-exit-done { 1994 transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 250ms; 1995 } 1996 } 1997 @media (forced-colors: active) { 1998 .customize-menu-animate-wrapper { 1999 border-inline-start: solid 1px; 2000 } 2001 } 2002 .customize-menu-animate-wrapper:dir(rtl) { 2003 transform: translateX(-435px); 2004 } 2005 .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-enter-active { 2006 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 2007 visibility: visible; 2008 transform: translateX(0); 2009 } 2010 .customize-menu-animate-wrapper.customize-animate-exit-active { 2011 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 2012 } 2013 2014 .customize-menu { 2015 overflow: auto; 2016 height: 100%; 2017 } 2018 .customize-menu.subpanel-open { 2019 overflow: clip; 2020 } 2021 .customize-menu .close-button-wrapper { 2022 position: sticky; 2023 inset-block-start: 0; 2024 padding-block-start: var(--space-large); 2025 background-color: var(--newtab-background-color-secondary); 2026 z-index: 1; 2027 } 2028 .customize-menu .close-button-wrapper moz-button { 2029 margin-inline-start: auto; 2030 margin-inline-end: var(--space-large); 2031 display: block; 2032 } 2033 .customize-menu *:focus-visible { 2034 outline: var(--focus-outline); 2035 } 2036 2037 .grid-skip { 2038 display: contents; 2039 } 2040 2041 .home-section { 2042 display: grid; 2043 grid-template-columns: 1fr; 2044 grid-template-rows: repeat(4, auto); 2045 grid-row-gap: var(--space-xxlarge); 2046 padding-block: var(--space-xsmall) var(--space-large); 2047 padding-inline: var(--space-large); 2048 } 2049 .home-section .wallpapers-section h2 { 2050 font-size: inherit; 2051 } 2052 .home-section .widgets-section h2 { 2053 font-size: inherit; 2054 margin-block-start: 0; 2055 font-weight: var(--heading-font-weight); 2056 } 2057 .home-section .settings-widgets, 2058 .home-section .settings-toggles { 2059 display: flex; 2060 flex-direction: column; 2061 gap: var(--space-xlarge); 2062 } 2063 .home-section .settings-widgets { 2064 gap: var(--space-large); 2065 } 2066 .home-section .settings-widgets .divider { 2067 margin-block-start: var(--space-large); 2068 } 2069 .home-section [slot=nested] { 2070 margin-block-start: 0; 2071 } 2072 .home-section .section .customize-menu-checkbox-label { 2073 font-size: inherit; 2074 margin-inline-start: var(--space-xsmall); 2075 } 2076 .home-section .section .check-wrapper { 2077 position: relative; 2078 display: flex; 2079 } 2080 .home-section .section .customize-menu-checkbox { 2081 margin-inline-start: var(--space-xxsmall); 2082 width: 16px; 2083 height: 16px; 2084 vertical-align: middle; 2085 border: 1px solid rgba(0, 0, 0, 0.15); 2086 box-sizing: border-box; 2087 border-radius: var(--border-radius-small); 2088 appearance: none; 2089 background-color: var(--newtab-element-secondary-color); 2090 flex-shrink: 0; 2091 } 2092 .home-section .section .customize-menu-checkbox:hover { 2093 background-color: var(--newtab-element-secondary-hover-color); 2094 } 2095 .home-section .section .customize-menu-checkbox:checked { 2096 -moz-context-properties: fill; 2097 fill: var(--newtab-primary-element-text-color); 2098 background: url("chrome://global/skin/icons/check.svg") center no-repeat; 2099 background-color: var(--newtab-primary-action-background); 2100 } 2101 .home-section .section .customize-menu-checkbox:checked:hover { 2102 background-color: var(--newtab-primary-element-hover-color); 2103 } 2104 .home-section .section .customize-menu-checkbox:checked:active { 2105 background-color: var(--newtab-primary-element-active-color); 2106 } 2107 @media (forced-colors: active) { 2108 .home-section .section .customize-menu-checkbox:checked { 2109 fill: #000; 2110 } 2111 } 2112 .home-section .section .customize-menu-checkbox:active + .checkmark { 2113 fill: var(--newtab-element-secondary-color); 2114 } 2115 .home-section .section .selector { 2116 color: var(--newtab-text-primary-color); 2117 width: 118px; 2118 display: block; 2119 border: 1px solid var(--border-color); 2120 border-radius: var(--border-radius-small); 2121 appearance: none; 2122 padding-block: var(--space-small); 2123 padding-inline: var(--space-small) var(--space-medium); 2124 margin-inline-start: var(--space-xxsmall); 2125 margin-block-end: var(--space-xxsmall); 2126 -moz-context-properties: fill; 2127 fill: var(--newtab-text-primary-color); 2128 background: url("chrome://global/skin/icons/arrow-down-12.svg") right no-repeat; 2129 background-size: 8px; 2130 background-origin: content-box; 2131 background-color: var(--newtab-background-color-secondary); 2132 } 2133 .home-section .section .selector:hover { 2134 background-color: var(--newtab-element-secondary-hover-color); 2135 } 2136 .home-section .section .selector:dir(rtl) { 2137 background-position-x: left; 2138 } 2139 .home-section .section .more-info-top-wrapper, 2140 .home-section .section .more-info-pocket-wrapper { 2141 margin-inline-start: calc(var(--space-xxsmall) * -1); 2142 overflow: hidden; 2143 } 2144 .home-section .section .more-info-top-wrapper .more-information, 2145 .home-section .section .more-info-pocket-wrapper .more-information { 2146 position: relative; 2147 transition: margin-block-start 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895); 2148 } 2149 .home-section .section .more-info-pocket-wrapper .more-information { 2150 position: static; 2151 } 2152 .home-section .section .more-info-pocket-wrapper .check-wrapper { 2153 margin-block-end: var(--space-small); 2154 } 2155 .home-section .section .more-info-pocket-wrapper:has(moz-box-button:focus-within) { 2156 overflow: visible; 2157 } 2158 .home-section .section .more-info-top-wrapper .check-wrapper { 2159 margin-block-start: var(--space-large); 2160 } 2161 .home-section .sponsored-content-info { 2162 display: flex; 2163 gap: var(--space-small); 2164 font-size: var(--font-size-small); 2165 border-radius: var(--border-radius-medium); 2166 background-color: var(--newtab-element-secondary-color); 2167 padding: var(--space-small) var(--space-large); 2168 } 2169 .home-section .sponsored-content-info .icon-help { 2170 flex-shrink: 0; 2171 color: var(--color-accent-primary); 2172 height: 20px; 2173 } 2174 .home-section .sponsored-content-info a { 2175 color: var(--newtab-primary-action-background); 2176 } 2177 .home-section .divider { 2178 border-block-start: 1px var(--border-color) solid; 2179 margin: 0 calc(var(--space-large) * -1); 2180 } 2181 .home-section .external-link { 2182 -moz-context-properties: fill; 2183 background: url("chrome://global/skin/icons/settings.svg") left no-repeat; 2184 background-size: 16px; 2185 border: 1px solid transparent; 2186 border-radius: var(--border-radius-small); 2187 color: var(--link-color); 2188 cursor: pointer; 2189 fill: var(--link-color); 2190 font-size: var(--font-size-small); 2191 margin-block-end: var(--space-large); 2192 padding-inline-start: var(--space-xlarge); 2193 text-decoration: underline; 2194 } 2195 .home-section .external-link:hover { 2196 color: var(--link-color-hover); 2197 text-decoration: none; 2198 } 2199 .home-section .external-link:active { 2200 color: var(--link-color-active); 2201 } 2202 @media (forced-colors: active) { 2203 .home-section .external-link { 2204 padding: var(--space-small) var(--space-medium); 2205 padding-inline-start: var(--space-xlarge); 2206 } 2207 } 2208 .home-section .external-link:dir(rtl) { 2209 background-position-x: right; 2210 } 2211 .home-section .external-link:hover { 2212 text-decoration: none; 2213 } 2214 2215 .external-link:focus-visible, 2216 .close-button:focus-visible { 2217 border: 1px solid var(--newtab-primary-action-background); 2218 outline: 0; 2219 box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); 2220 } 2221 2222 .home-section .section .customize-menu-checkbox, .home-section .section .selector { 2223 outline: 0; 2224 box-shadow: 0 0 0 2px light-dark(var(--newtab-background-color), var(--newtab-background-color-dark)); 2225 } 2226 2227 .home-section .section .selector { 2228 margin-block-start: var(--space-xxsmall); 2229 } 2230 2231 .home-section .section .customize-menu-checkbox:is(:focus-visible), .home-section .section .selector:is(:focus-visible) { 2232 box-shadow: 0 0 0 2px var(--color-accent-primary); 2233 outline: var(--focus-outline); 2234 } 2235 .home-section .section .customize-menu-checkbox:is(:active), .home-section .section .selector:is(:active) { 2236 box-shadow: 0 0 0 2px var(--color-accent-primary-active); 2237 outline: 0; 2238 } 2239 2240 .sections-mgmt-panel { 2241 height: 100%; 2242 inset-inline-start: var(--space-xlarge); 2243 position: absolute; 2244 inset-block-start: 0; 2245 width: 380px; 2246 z-index: 2; 2247 transform: translateX(100%); 2248 margin-block: var(--space-large) 0; 2249 padding: 0; 2250 background-color: var(--newtab-background-color-secondary); 2251 overflow-y: auto; 2252 } 2253 .sections-mgmt-panel:dir(rtl) { 2254 transform: translateX(-100%); 2255 } 2256 @media (prefers-reduced-motion: no-preference) { 2257 .sections-mgmt-panel.sections-mgmt-panel-enter, .sections-mgmt-panel.sections-mgmt-panel-exit, .sections-mgmt-panel.sections-mgmt-panel-enter-done, .sections-mgmt-panel.sections-mgmt-panel-exit-done { 2258 transition: transform 300ms; 2259 } 2260 } 2261 .sections-mgmt-panel.sections-mgmt-panel-enter-done, .sections-mgmt-panel.sections-mgmt-panel-enter-active { 2262 transform: translateX(0); 2263 } 2264 .sections-mgmt-panel h3 { 2265 font-size: inherit; 2266 margin-block: 0 var(--space-small); 2267 } 2268 .sections-mgmt-panel .topic-list { 2269 list-style: none; 2270 display: flex; 2271 flex-direction: column; 2272 gap: var(--space-small); 2273 margin-block: 0 var(--space-xxlarge); 2274 padding-inline: 0; 2275 width: 100%; 2276 } 2277 .sections-mgmt-panel .topic-list li { 2278 display: flex; 2279 justify-content: space-between; 2280 align-items: center; 2281 } 2282 .sections-mgmt-panel .topic-list-empty-state { 2283 display: block; 2284 margin-block-end: var(--space-xxlarge); 2285 color: var(--text-color-deemphasized); 2286 } 2287 .sections-mgmt-panel .arrow-button { 2288 background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat left center; 2289 border: none; 2290 cursor: pointer; 2291 margin-block-end: var(--space-xlarge); 2292 padding-inline-start: var(--space-xlarge); 2293 -moz-context-properties: fill; 2294 fill: currentColor; 2295 min-height: var(--size-item-small); 2296 margin-inline-start: var(--space-xsmall); 2297 margin-block-start: var(--space-xsmall); 2298 } 2299 .sections-mgmt-panel .arrow-button:dir(rtl) { 2300 background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat right center; 2301 } 2302 .sections-mgmt-panel .arrow-button h1 { 2303 font-size: var(--font-size-root); 2304 margin-block: 0; 2305 font-weight: var(--button-font-weight); 2306 } 2307 .sections-mgmt-panel .section-block .section-button-blocked-text, 2308 .sections-mgmt-panel .section-block .section-button-following-text, 2309 .sections-mgmt-panel .section-follow .section-button-blocked-text, 2310 .sections-mgmt-panel .section-follow .section-button-following-text { 2311 display: none; 2312 } 2313 .sections-mgmt-panel .section-block .section-button-unblock-text, 2314 .sections-mgmt-panel .section-block .section-button-unfollow-text, 2315 .sections-mgmt-panel .section-follow .section-button-unblock-text, 2316 .sections-mgmt-panel .section-follow .section-button-unfollow-text { 2317 display: none; 2318 } 2319 .sections-mgmt-panel .section-block.following .section-button-follow-text, 2320 .sections-mgmt-panel .section-follow.following .section-button-follow-text { 2321 display: none; 2322 } 2323 .sections-mgmt-panel .section-block.following .section-button-following-text, 2324 .sections-mgmt-panel .section-follow.following .section-button-following-text { 2325 display: block; 2326 } 2327 .sections-mgmt-panel .section-block.following:not(:hover) moz-button, 2328 .sections-mgmt-panel .section-follow.following:not(:hover) moz-button { 2329 --button-background-color-destructive: var(--button-background-color); 2330 --button-text-color-destructive: var(--button-text-color); 2331 --button-border-color-destructive: var(--button-border-color); 2332 } 2333 .sections-mgmt-panel .section-block.following:hover .section-button-following-text, 2334 .sections-mgmt-panel .section-follow.following:hover .section-button-following-text { 2335 display: none; 2336 } 2337 .sections-mgmt-panel .section-block.following:hover .section-button-unfollow-text, 2338 .sections-mgmt-panel .section-follow.following:hover .section-button-unfollow-text { 2339 display: block; 2340 } 2341 .sections-mgmt-panel .section-block.blocked .section-button-block-text, 2342 .sections-mgmt-panel .section-follow.blocked .section-button-block-text { 2343 display: none; 2344 } 2345 .sections-mgmt-panel .section-block.blocked .section-button-blocked-text, 2346 .sections-mgmt-panel .section-follow.blocked .section-button-blocked-text { 2347 display: block; 2348 } 2349 .sections-mgmt-panel .section-block.blocked:hover .section-button-blocked-text, 2350 .sections-mgmt-panel .section-follow.blocked:hover .section-button-blocked-text { 2351 display: none; 2352 } 2353 .sections-mgmt-panel .section-block.blocked:hover .section-button-unblock-text, 2354 .sections-mgmt-panel .section-follow.blocked:hover .section-button-unblock-text { 2355 display: block; 2356 } 2357 2358 .category-list { 2359 border: none; 2360 display: grid; 2361 gap: calc(var(--space-xlarge) * 2) var(--space-large); 2362 grid-auto-rows: 86px; 2363 grid-template-columns: 1fr 1fr 1fr; 2364 margin-block-end: var(--space-large); 2365 padding: 0; 2366 } 2367 .category-list label { 2368 display: inline-block; 2369 font-size: var(--font-size-small); 2370 text-align: center; 2371 width: 100%; 2372 } 2373 2374 .category-header { 2375 display: flex; 2376 justify-content: space-between; 2377 } 2378 .category-header .wallpapers-reset { 2379 margin: unset; 2380 } 2381 2382 .arrow-button { 2383 background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat left center; 2384 border: none; 2385 cursor: pointer; 2386 margin-block-end: var(--space-xlarge); 2387 padding-inline-start: var(--space-xlarge); 2388 -moz-context-properties: fill; 2389 fill: currentColor; 2390 min-height: 1rem; 2391 margin-inline-start: var(--space-xsmall); 2392 margin-block-start: var(--space-xsmall); 2393 } 2394 .arrow-button:dir(rtl) { 2395 background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat right center; 2396 } 2397 2398 .wallpaper-input { 2399 appearance: none; 2400 background-clip: content-box; 2401 background-repeat: no-repeat; 2402 background-size: cover; 2403 border-radius: var(--border-radius-medium); 2404 border: none; 2405 box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); 2406 cursor: pointer; 2407 height: 86px; 2408 margin: 0; 2409 outline: 2px solid transparent; 2410 padding: 0; 2411 width: 100%; 2412 } 2413 .wallpaper-input:checked, .wallpaper-input.selected { 2414 box-shadow: inset 0 0 0 3px var(--color-accent-primary); 2415 } 2416 .wallpaper-input.theme-custom-wallpaper { 2417 border: 2px dashed var(--border-color-default, #CFCFD8); 2418 box-shadow: none; 2419 position: relative; 2420 } 2421 .wallpaper-input.theme-custom-wallpaper::after { 2422 content: ""; 2423 -moz-context-properties: fill; 2424 fill: var(--icon-color); 2425 width: calc(var(--icon-size) * 1.25); 2426 height: calc(var(--icon-size) * 1.25); 2427 display: block; 2428 position: absolute; 2429 inset-block-start: 50%; 2430 inset-inline-start: 50%; 2431 transform: translate(-50%, -50%); 2432 } 2433 .wallpaper-input.theme-custom-wallpaper:focus { 2434 outline-color: var(--focus-outline-color); 2435 outline-offset: var(--focus-outline-offset); 2436 } 2437 .wallpaper-input.theme-custom-wallpaper::after { 2438 background: url("chrome://global/skin/icons/plus-20.svg") center no-repeat; 2439 } 2440 .wallpaper-input.dark-landscape { 2441 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-landscape.avif"); 2442 } 2443 .wallpaper-input.dark-color { 2444 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-color.avif"); 2445 } 2446 .wallpaper-input.dark-mountain { 2447 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-mountain.avif"); 2448 } 2449 .wallpaper-input.dark-panda { 2450 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-panda.avif"); 2451 } 2452 .wallpaper-input.dark-sky { 2453 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-sky.avif"); 2454 } 2455 .wallpaper-input.dark-beach { 2456 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-beach.avif"); 2457 } 2458 .wallpaper-input.light-beach { 2459 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-beach.avif"); 2460 } 2461 .wallpaper-input.light-color { 2462 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-color.avif"); 2463 } 2464 .wallpaper-input.light-landscape { 2465 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-landscape.avif"); 2466 } 2467 .wallpaper-input.light-mountain { 2468 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-mountain.avif"); 2469 } 2470 .wallpaper-input.light-panda { 2471 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-panda.avif"); 2472 } 2473 .wallpaper-input.light-sky { 2474 background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-sky.avif"); 2475 } 2476 .wallpaper-input:focus-visible { 2477 outline-offset: var(--focus-outline-offset); 2478 } 2479 .wallpaper-input:hover { 2480 filter: brightness(55%); 2481 outline-color: transparent; 2482 } 2483 2484 .theme-custom-color-picker { 2485 background-color: var(--newtab-background-color-secondary); 2486 background-clip: content-box; 2487 border-radius: var(--border-radius-medium); 2488 outline: 2px dashed var(--border-color-default, #CFCFD8); 2489 outline-offset: 2px; 2490 position: relative; 2491 } 2492 .theme-custom-color-picker .wallpaper-input { 2493 box-shadow: none; 2494 } 2495 .theme-custom-color-picker .wallpaper-input:focus { 2496 outline-color: var(--focus-outline-color); 2497 outline-offset: 6px; 2498 } 2499 .theme-custom-color-picker.default-color-set #solid-color-picker { 2500 opacity: 0; 2501 } 2502 @media (prefers-color-scheme: dark) { 2503 .theme-custom-color-picker.default-color-set::after { 2504 color-scheme: dark; 2505 } 2506 } 2507 .theme-custom-color-picker.custom-color-dark::after { 2508 color-scheme: dark; 2509 } 2510 .theme-custom-color-picker.is-dark::after { 2511 color-scheme: dark; 2512 } 2513 @media (prefers-color-scheme: dark) { 2514 .theme-custom-color-picker.is-dark::after { 2515 color: #FBFBFE; 2516 } 2517 } 2518 .theme-custom-color-picker::after { 2519 background: url("chrome://global/skin/icons/color-picker-20.svg") center no-repeat; 2520 content: ""; 2521 -moz-context-properties: fill; 2522 fill: var(--icon-color); 2523 width: calc(var(--icon-size) * 1.25); 2524 height: calc(var(--icon-size) * 1.25); 2525 display: block; 2526 position: absolute; 2527 inset-block-start: 50%; 2528 inset-inline-start: 50%; 2529 transform: translate(-50%, -50%); 2530 pointer-events: none; 2531 cursor: pointer; 2532 color-scheme: light; 2533 } 2534 .theme-custom-color-picker label { 2535 display: inline-block; 2536 font-size: var(--font-size-small); 2537 text-align: center; 2538 width: 100%; 2539 } 2540 .theme-custom-color-picker ::-moz-color-swatch { 2541 border-color: transparent; 2542 border-radius: var(--border-radius-medium); 2543 } 2544 2545 .wallpaper-list { 2546 display: grid; 2547 gap: var(--space-large); 2548 grid-template-columns: 1fr 1fr 1fr; 2549 grid-auto-rows: 86px; 2550 margin: var(--space-large) 0; 2551 padding: 0; 2552 border: none; 2553 } 2554 .wallpaper-list.category { 2555 --wallpaper-panel-width: 430px; 2556 background-color: var(--newtab-background-color-secondary); 2557 color: var(--newtab-text-primary-color); 2558 display: unset; 2559 gap: unset; 2560 grid-auto-rows: unset; 2561 grid-template-columns: unset; 2562 height: 100%; 2563 padding: var(--space-xlarge); 2564 position: absolute; 2565 inset-block-start: 0; 2566 inset-inline-start: 100%; 2567 width: var(--wallpaper-panel-width); 2568 z-index: 2; 2569 overflow-y: auto; 2570 } 2571 .wallpaper-list.category fieldset { 2572 border: none; 2573 display: grid; 2574 gap: var(--space-large); 2575 grid-auto-rows: 86px; 2576 grid-template-columns: 1fr 1fr 1fr; 2577 } 2578 @media (prefers-reduced-motion: no-preference) { 2579 .wallpaper-list.category.wallpaper-list-enter, .wallpaper-list.category.wallpaper-list-exit, .wallpaper-list.category.wallpaper-list-enter-done, .wallpaper-list.category.wallpaper-list-exit-done { 2580 transition: inset-inline-start 300ms; 2581 } 2582 } 2583 .wallpaper-list.category.wallpaper-list-enter-done, .wallpaper-list.category.wallpaper-list-enter-active { 2584 inset-inline-start: calc(100% - var(--wallpaper-panel-width)); 2585 } 2586 .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { 2587 display: inline-block; 2588 } 2589 [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { 2590 display: none; 2591 } 2592 .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { 2593 display: none; 2594 } 2595 [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { 2596 display: inline-block; 2597 } 2598 .wallpaper-list .sr-only { 2599 opacity: 0; 2600 overflow: hidden; 2601 position: absolute; 2602 pointer-events: none; 2603 } 2604 2605 .wallpapers-reset { 2606 background: none; 2607 border: none; 2608 text-decoration: underline; 2609 margin-inline: auto; 2610 display: block; 2611 font-size: var(--font-size-small); 2612 color: var(--newtab-text-primary-color); 2613 cursor: pointer; 2614 } 2615 .wallpapers-reset:hover { 2616 text-decoration: none; 2617 } 2618 .wallpapers-reset:focus-visible { 2619 outline-offset: -2px; 2620 } 2621 2622 .custom-wallpaper-error { 2623 padding-block-start: var(--space-xlarge); 2624 font-size: var(--font-size-small); 2625 display: flex; 2626 gap: var(--space-small); 2627 align-items: center; 2628 } 2629 .custom-wallpaper-error .icon { 2630 width: var(--button-size-icon-small); 2631 height: var(--button-size-icon-small); 2632 fill: var(--icon-color-critical); 2633 } 2634 2635 :root { 2636 --newtab-weather-content-font-size: var(--font-size-small); 2637 --newtab-weather-sponsor-font-size: 8px; 2638 } 2639 2640 .weather { 2641 font-size: inherit; 2642 display: inline-block; 2643 margin-inline-start: 0; 2644 position: absolute; 2645 inset-inline-end: var(--space-xxlarge); 2646 inset-block-start: var(--space-xxlarge); 2647 margin-block-start: 0; 2648 z-index: 1; 2649 } 2650 @media (min-width: 724px) { 2651 .weather { 2652 inset-inline-end: var(--space-large); 2653 } 2654 } 2655 @media (min-width: 866px) { 2656 .weather { 2657 inset-inline-end: var(--space-xxlarge); 2658 } 2659 } 2660 .weather.section-weather { 2661 position: initial; 2662 margin-inline-start: var(--space-medium); 2663 } 2664 .weather.section-weather .weatherInfoLink { 2665 max-width: unset; 2666 } 2667 .no-search .weather { 2668 position: absolute; 2669 inset-block-start: var(--space-xxlarge); 2670 margin-block-start: 0; 2671 margin-inline-start: 0; 2672 inset-inline-end: var(--space-large); 2673 } 2674 @media (min-width: 510px) { 2675 .no-search .weather { 2676 inset-inline-end: var(--space-xxlarge); 2677 } 2678 } 2679 @media (min-width: 724px) { 2680 .no-search .weather { 2681 inset-inline-end: var(--space-large); 2682 } 2683 } 2684 @media (min-width: 866px) { 2685 .no-search .weather { 2686 inset-inline-end: var(--space-xxlarge); 2687 } 2688 } 2689 .weather .context-menu { 2690 inset-inline-end: 100%; 2691 inset-inline-start: auto; 2692 margin-inline-end: var(--space-xsmall); 2693 } 2694 2695 .weather-placeholder { 2696 width: 240px; 2697 height: 98px; 2698 padding: var(--space-small) var(--space-medium); 2699 border-radius: var(--border-radius-medium); 2700 background: var(--newtab-background-color-secondary); 2701 display: flex; 2702 overflow: hidden; 2703 } 2704 .weather-placeholder .placeholder-image { 2705 height: 100%; 2706 width: 80px; 2707 margin-inline-end: var(--space-medium); 2708 flex-shrink: 0; 2709 } 2710 .weather-placeholder .placeholder-context { 2711 width: 100%; 2712 display: flex; 2713 flex-direction: column; 2714 } 2715 .weather-placeholder .placeholder-header { 2716 height: 45px; 2717 width: 100%; 2718 margin-block-end: var(--space-small); 2719 } 2720 .weather-placeholder .placeholder-description { 2721 flex-grow: 1; 2722 width: 100%; 2723 } 2724 .weather-placeholder .placeholder-fill { 2725 color: var(--newtab-text-primary-color); 2726 background: var(--newtab-button-active-background); 2727 border-radius: var(--border-radius-small); 2728 } 2729 .weather-placeholder.placeholder-seen::before { 2730 content: ""; 2731 display: block; 2732 position: absolute; 2733 inset-block-start: 0; 2734 inset-inline-start: -100%; 2735 height: 100%; 2736 width: 100%; 2737 background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%); 2738 z-index: 2; 2739 } 2740 @media (prefers-reduced-motion: no-preference) { 2741 .weather-placeholder.placeholder-seen::before { 2742 animation: loading 1.5s infinite; 2743 } 2744 } 2745 @keyframes loading { 2746 0% { 2747 inset-inline-start: -100%; 2748 } 2749 50%, 100% { 2750 inset-inline-start: 100%; 2751 } 2752 } 2753 2754 .has-mobile-download-promo { 2755 --mobile-download-promo-width: var(--space-xxlarge); 2756 } 2757 @media (min-width: 610px) { 2758 .has-mobile-download-promo .weather { 2759 inset-inline-end: calc(var(--mobile-download-promo-width) + var(--space-medium)); 2760 } 2761 } 2762 @media (min-width: 724px) { 2763 .has-mobile-download-promo .weather { 2764 inset-inline-end: calc(var(--space-xxlarge) + var(--mobile-download-promo-width) + var(--space-medium)); 2765 } 2766 } 2767 @media (min-width: 866px) { 2768 .has-mobile-download-promo.no-search .weather { 2769 inset-inline-end: calc(var(--space-xxlarge) + var(--mobile-download-promo-width) + var(--space-medium)); 2770 } 2771 } 2772 2773 .has-weather.has-search .weatherDetailedSummaryRow { 2774 display: block; 2775 } 2776 @media (min-width: 610px) { 2777 .has-weather.has-search .weatherDetailedSummaryRow { 2778 display: none; 2779 } 2780 } 2781 @media (min-width: 866px) { 2782 .has-weather.has-search .weatherDetailedSummaryRow { 2783 display: block; 2784 } 2785 } 2786 .has-weather.has-search .weatherIconCol { 2787 display: flex; 2788 } 2789 @media (min-width: 610px) { 2790 .has-weather.has-search .weatherIconCol { 2791 display: none; 2792 } 2793 } 2794 @media (min-width: 866px) { 2795 .has-weather.has-search .weatherIconCol { 2796 display: flex; 2797 } 2798 } 2799 2800 .weatherNotAvailable { 2801 font-size: var(--newtab-weather-content-font-size); 2802 align-items: center; 2803 border-radius: var(--border-radius-medium); 2804 height: 52px; 2805 max-width: 205px; 2806 display: none; 2807 } 2808 @media (min-width: 866px) { 2809 .weatherNotAvailable { 2810 display: flex; 2811 } 2812 } 2813 .weatherNotAvailable:hover { 2814 background-color: var(--button-background-color-ghost-hover); 2815 } 2816 .weatherNotAvailable:active { 2817 background-color: var(--button-background-color-ghost-active); 2818 } 2819 .weatherNotAvailable .icon { 2820 margin-inline-start: var(--space-small); 2821 min-width: var(--size-item-small); 2822 } 2823 .weatherNotAvailable p { 2824 margin-inline-start: var(--space-small); 2825 } 2826 .weatherNotAvailable .weatherButtonContextMenuWrapper { 2827 align-self: stretch; 2828 padding-inline: var(--space-small); 2829 } 2830 .lightWallpaper .weatherNotAvailable, .darkWallpaper .weatherNotAvailable { 2831 background-color: var(--newtab-weather-background-color); 2832 } 2833 @media (prefers-contrast) { 2834 .lightWallpaper .weatherNotAvailable, .darkWallpaper .weatherNotAvailable { 2835 background-color: var(--background-color-box); 2836 } 2837 } 2838 2839 .weatherCard { 2840 margin-block-end: var(--space-xsmall); 2841 display: flex; 2842 flex-wrap: nowrap; 2843 align-items: stretch; 2844 border-radius: var(--border-radius-medium); 2845 } 2846 .weatherCard:hover ~ .weatherSponsorText, .weatherCard:focus-within ~ .weatherSponsorText { 2847 visibility: visible; 2848 } 2849 .weatherCard:has(.staticWeatherInfo):hover { 2850 box-shadow: none; 2851 } 2852 .weatherCard:has(.staticWeatherInfo):hover ~ .weatherSponsorText { 2853 visibility: hidden; 2854 } 2855 .weatherCard:hover { 2856 box-shadow: var(--box-shadow-card); 2857 } 2858 .weatherCard a { 2859 color: var(--text-color); 2860 } 2861 2862 .weatherSponsorText { 2863 visibility: hidden; 2864 font-size: var(--newtab-weather-sponsor-font-size); 2865 color: var(--newtab-contextual-text-primary-color); 2866 float: inline-end; 2867 } 2868 .lightWallpaper .weatherSponsorText { 2869 color-scheme: light; 2870 } 2871 .darkWallpaper .weatherSponsorText { 2872 color-scheme: dark; 2873 } 2874 .weatherSponsorText span { 2875 color: var(--text-color-deemphasized); 2876 inset-inline-end: 0; 2877 } 2878 2879 .weatherOptIn { 2880 position: absolute; 2881 inset-block-end: calc(var(--space-medium) * -1.5); 2882 inset-inline-start: calc(var(--space-xxlarge) * -9); 2883 } 2884 .weatherOptIn dialog { 2885 background: var(--newtab-background-color-secondary); 2886 border: 1px solid var(--border-color-card); 2887 border-radius: var(--border-radius-medium); 2888 box-shadow: var(--box-shadow-card); 2889 display: flex; 2890 width: 332px; 2891 } 2892 .weatherOptIn dialog .weatherOptInImg { 2893 -webkit-mask: url("chrome://browser/skin/weather/mostly-sunny.svg") no-repeat center; 2894 mask: url("chrome://browser/skin/weather/mostly-sunny.svg") no-repeat center; 2895 background-color: var(--button-icon-fill); 2896 mask-size: cover; 2897 margin-inline-end: var(--space-medium); 2898 height: var(--icon-size-xlarge); 2899 width: var(--icon-size-xlarge); 2900 } 2901 .weatherOptIn dialog:focus-visible { 2902 outline: var(--focus-outline); 2903 } 2904 .weatherOptIn dialog:focus-visible::after { 2905 border-block-end: var(--focus-outline); 2906 border-inline-end: var(--focus-outline); 2907 } 2908 .weatherOptIn dialog .weatherOptInContent { 2909 display: flex; 2910 flex-direction: column; 2911 justify-content: space-between; 2912 } 2913 .weatherOptIn dialog .weatherOptInContent h3 { 2914 font-size: var(--button-font-size); 2915 font-weight: var(--heading-font-weight); 2916 margin-block: 0 var(--space-medium); 2917 } 2918 .weatherOptIn dialog .weatherOptInContent moz-button-group { 2919 align-self: flex-end; 2920 } 2921 .weatherOptIn dialog .weatherOptInContent moz-button-group moz-button:first-of-type { 2922 margin-inline-end: var(--space-small); 2923 } 2924 @media (min-width: 866px) { 2925 .weatherOptIn { 2926 inset-block-end: calc(var(--space-medium) * -1); 2927 inset-inline-start: calc(var(--space-xxlarge) * -5.5); 2928 } 2929 } 2930 2931 dialog::after { 2932 content: ""; 2933 position: absolute; 2934 inset-block-start: -9%; 2935 inset-inline-end: 5%; 2936 transform: translateX(-50%) rotate(225deg); 2937 height: 16px; 2938 width: 16px; 2939 background: var(--newtab-background-color-secondary); 2940 box-shadow: 4px 4px 6px -2px var(--box-shadow-card); 2941 border-inline-end: 1px solid var(--border-color-card); 2942 border-block-end: 1px solid var(--border-color-card); 2943 } 2944 dialog:dir(rtl)::after { 2945 border-inline-start: 1px solid var(--border-color-card); 2946 border-block-end: 1px solid var(--border-color-card); 2947 border-inline-end: none; 2948 inset-inline-end: 10%; 2949 } 2950 2951 .weatherInfoLink, .weatherButtonContextMenuWrapper { 2952 appearance: none; 2953 background-color: var(--background-color-ghost); 2954 border: 0; 2955 padding: var(--space-small); 2956 cursor: pointer; 2957 } 2958 .weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover { 2959 background-color: var(--newtab-background-color-secondary); 2960 } 2961 .weatherInfoLink:hover::after, .weatherButtonContextMenuWrapper:hover::after { 2962 background-color: transparent; 2963 } 2964 .weatherInfoLink:hover:active, .weatherButtonContextMenuWrapper:hover:active { 2965 background-color: var(--button-background-color-ghost-active); 2966 } 2967 .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper { 2968 background-color: var(--newtab-weather-background-color); 2969 } 2970 .lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover { 2971 background-color: var(--newtab-button-static-hover-background); 2972 } 2973 .lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active { 2974 background-color: var(--newtab-button-static-active-background); 2975 } 2976 @media (prefers-contrast) { 2977 .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper { 2978 background-color: var(--background-color-box); 2979 } 2980 } 2981 2982 .weatherInfoLink { 2983 display: flex; 2984 gap: var(--space-medium); 2985 padding: var(--space-small) var(--space-medium); 2986 border-start-start-radius: var(--border-radius-medium); 2987 border-start-end-radius: 0; 2988 border-end-end-radius: 0; 2989 border-end-start-radius: var(--border-radius-medium); 2990 text-decoration: none; 2991 color: var(--text-color); 2992 min-width: 130px; 2993 max-width: 190px; 2994 text-overflow: ellipsis; 2995 } 2996 @media (min-width: 610px) { 2997 .weatherInfoLink { 2998 min-width: unset; 2999 } 3000 } 3001 .weatherInfoLink:hover ~ .weatherButtonContextMenuWrapper::after { 3002 background-color: transparent; 3003 } 3004 .weatherInfoLink:focus-visible { 3005 border-radius: var(--border-radius-medium); 3006 outline: var(--focus-outline); 3007 z-index: 1; 3008 } 3009 .weatherInfoLink:focus-visible ~ .weatherButtonContextMenuWrapper::after { 3010 background-color: transparent; 3011 } 3012 3013 .weatherInfoLink.staticWeatherInfo .weatherIcon { 3014 filter: opacity(60%); 3015 } 3016 .weatherInfoLink.staticWeatherInfo .weatherText { 3017 color: var(--text-color-disabled); 3018 } 3019 .weatherInfoLink.staticWeatherInfo:hover, .weatherInfoLink.staticWeatherInfo:active { 3020 box-shadow: none; 3021 cursor: default; 3022 background-color: var(--newtab-weather-background-color); 3023 } 3024 3025 .weatherButtonContextMenuWrapper { 3026 position: relative; 3027 cursor: pointer; 3028 border-start-start-radius: 0; 3029 border-start-end-radius: var(--border-radius-medium); 3030 border-end-end-radius: var(--border-radius-medium); 3031 border-end-start-radius: 0; 3032 display: flex; 3033 align-items: stretch; 3034 width: 50px; 3035 padding: 0; 3036 } 3037 .weatherButtonContextMenuWrapper::after { 3038 content: ""; 3039 inset-inline-start: 0; 3040 inset-block-start: var(--space-small); 3041 height: calc(100% - 20px); 3042 width: 1px; 3043 background-color: var(--newtab-button-static-background); 3044 display: block; 3045 position: absolute; 3046 z-index: 0; 3047 } 3048 .weatherButtonContextMenuWrapper:hover::after { 3049 background-color: transparent; 3050 } 3051 .weatherButtonContextMenuWrapper:has(:focus-visible) { 3052 border-radius: var(--border-radius-medium); 3053 outline: var(--focus-outline); 3054 } 3055 .weatherButtonContextMenuWrapper:has(:focus-visible)::after { 3056 background-color: transparent; 3057 } 3058 3059 .weatherButtonContextMenu { 3060 background-image: url("chrome://global/skin/icons/more.svg"); 3061 background-repeat: no-repeat; 3062 background-size: var(--size-item-small) auto; 3063 background-position: center; 3064 background-color: transparent; 3065 cursor: pointer; 3066 fill: var(--icon-color); 3067 -moz-context-properties: fill; 3068 width: 100%; 3069 height: 100%; 3070 border: 0; 3071 appearance: none; 3072 min-width: var(--size-item-large); 3073 } 3074 .weatherButtonContextMenu:focus { 3075 outline: none; 3076 } 3077 3078 .weatherText { 3079 height: min-content; 3080 } 3081 3082 .weatherCityRow, .weatherForecastRow, .weatherDetailedSummaryRow { 3083 display: flex; 3084 justify-content: space-between; 3085 align-items: center; 3086 gap: var(--space-small); 3087 } 3088 3089 .weatherForecastRow { 3090 text-transform: uppercase; 3091 font-weight: var(--font-weight-semibold); 3092 } 3093 3094 .weatherCityRow { 3095 color: var(--text-color-deemphasized); 3096 } 3097 3098 .weatherCity { 3099 -webkit-line-clamp: 1; 3100 text-overflow: ellipsis; 3101 overflow: hidden; 3102 word-break: break-word; 3103 font-size: var(--font-size-small); 3104 } 3105 3106 .weatherCityRow + .weatherDetailedSummaryRow { 3107 margin-block-start: var(--space-xsmall); 3108 } 3109 3110 .weatherDetailedSummaryRow { 3111 font-size: var(--newtab-weather-content-font-size); 3112 gap: var(--space-large); 3113 } 3114 3115 .weatherHighLowTemps { 3116 display: inline-flex; 3117 gap: var(--space-xxsmall); 3118 text-transform: uppercase; 3119 word-spacing: var(--space-xxsmall); 3120 margin-inline-end: var(--space-small); 3121 } 3122 3123 .weatherTextSummary { 3124 display: inline; 3125 text-align: center; 3126 max-width: 90px; 3127 } 3128 3129 .weatherTemperature { 3130 font-size: var(--font-size-large); 3131 } 3132 3133 .weatherIconCol { 3134 width: var(--size-item-large); 3135 height: var(--size-item-large); 3136 aspect-ratio: 1; 3137 display: flex; 3138 align-items: center; 3139 justify-content: center; 3140 align-self: center; 3141 } 3142 3143 .weatherIcon { 3144 width: var(--size-item-large); 3145 height: auto; 3146 vertical-align: middle; 3147 } 3148 @media (prefers-contrast) { 3149 .weatherIcon { 3150 -moz-context-properties: fill, stroke; 3151 fill: currentColor; 3152 stroke: currentColor; 3153 } 3154 } 3155 .weatherIcon.iconId1 { 3156 content: url("chrome://browser/skin/weather/sunny.svg"); 3157 } 3158 .weatherIcon.iconId2 { 3159 content: url("chrome://browser/skin/weather/mostly-sunny.svg"); 3160 } 3161 .weatherIcon:is(.iconId3, .iconId4, .iconId6) { 3162 content: url("chrome://browser/skin/weather/partly-sunny.svg"); 3163 } 3164 .weatherIcon.iconId5 { 3165 content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); 3166 } 3167 .weatherIcon:is(.iconId7, .iconId8) { 3168 content: url("chrome://browser/skin/weather/cloudy.svg"); 3169 } 3170 .weatherIcon.iconId11 { 3171 content: url("chrome://browser/skin/weather/fog.svg"); 3172 } 3173 .weatherIcon.iconId12 { 3174 content: url("chrome://browser/skin/weather/showers.svg"); 3175 } 3176 .weatherIcon:is(.iconId13, .iconId14) { 3177 content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); 3178 } 3179 .weatherIcon.iconId15 { 3180 content: url("chrome://browser/skin/weather/thunderstorms.svg"); 3181 } 3182 .weatherIcon:is(.iconId16, .iconId17) { 3183 content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); 3184 } 3185 .weatherIcon.iconId18 { 3186 content: url("chrome://browser/skin/weather/rain.svg"); 3187 } 3188 .weatherIcon:is(.iconId19, .iconId20, .iconId25) { 3189 content: url("chrome://browser/skin/weather/flurries.svg"); 3190 } 3191 .weatherIcon.iconId21 { 3192 content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); 3193 } 3194 .weatherIcon:is(.iconId22, .iconId23) { 3195 content: url("chrome://browser/skin/weather/snow.svg"); 3196 } 3197 .weatherIcon:is(.iconId24, .iconId31) { 3198 content: url("chrome://browser/skin/weather/ice.svg"); 3199 } 3200 .weatherIcon:is(.iconId26, .iconId29) { 3201 content: url("chrome://browser/skin/weather/freezing-rain.svg"); 3202 } 3203 .weatherIcon.iconId30 { 3204 content: url("chrome://browser/skin/weather/hot.svg"); 3205 } 3206 .weatherIcon.iconId32 { 3207 content: url("chrome://browser/skin/weather/windy.svg"); 3208 } 3209 .weatherIcon.iconId33 { 3210 content: url("chrome://browser/skin/weather/night-clear.svg"); 3211 } 3212 .weatherIcon:is(.iconId34, .iconId35, .iconId36, .iconId38) { 3213 content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); 3214 } 3215 .weatherIcon.iconId37 { 3216 content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); 3217 } 3218 .weatherIcon:is(.iconId39, .iconId40) { 3219 content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); 3220 height: var(--size-item-large); 3221 } 3222 .weatherIcon:is(.iconId41, .iconId42) { 3223 content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); 3224 } 3225 .weatherIcon:is(.iconId43, .iconId44) { 3226 content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg"); 3227 } 3228 3229 .location-input-wrapper { 3230 background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary)); 3231 color: var(--newtab-text-primary-color); 3232 border-radius: var(--border-radius-medium); 3233 padding: var(--space-small); 3234 position: relative; 3235 } 3236 .lightWallpaper .location-input-wrapper, .darkWallpaper .location-input-wrapper { 3237 background-color: var(--newtab-weather-background-color); 3238 } 3239 .lightWallpaper .location-input-wrapper:hover, .darkWallpaper .location-input-wrapper:hover { 3240 background-color: var(--newtab-button-static-hover-background); 3241 } 3242 .lightWallpaper .location-input-wrapper:hover:active, .darkWallpaper .location-input-wrapper:hover:active { 3243 background-color: var(--newtab-button-static-active-background); 3244 } 3245 @media (prefers-contrast) { 3246 .lightWallpaper .location-input-wrapper, .darkWallpaper .location-input-wrapper { 3247 background-color: var(--background-color-box); 3248 } 3249 } 3250 .location-input-wrapper .search-icon { 3251 content: url("chrome://global/skin/icons/search-glass.svg"); 3252 -moz-context-properties: fill; 3253 fill: var(--icon-color); 3254 position: absolute; 3255 inset-block-start: 50%; 3256 transform: translateY(-50%); 3257 inset-inline-start: var(--space-large); 3258 } 3259 .location-input-wrapper .close-icon { 3260 position: absolute; 3261 inset-block-start: 50%; 3262 transform: translateY(-50%); 3263 inset-inline-end: var(--space-medium); 3264 } 3265 .location-input-wrapper .close-icon:focus-visible { 3266 outline: var(--focus-outline); 3267 } 3268 .location-input-wrapper input { 3269 border-radius: var(--border-radius-medium); 3270 background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary)); 3271 padding: var(--space-small) var(--space-xxlarge); 3272 border: 1px solid var(--border-color); 3273 } 3274 .location-input-wrapper input:focus-visible { 3275 outline: var(--focus-outline); 3276 } 3277 3278 .has-weather.has-search .weatherCityRow, 3279 .has-weather.has-search .weatherButtonContextMenuWrapper, 3280 .has-weather .weatherCityRow, 3281 .has-weather .weatherButtonContextMenuWrapper { 3282 display: none; 3283 } 3284 @media (min-width: 866px) { 3285 .has-weather.has-search .weatherCityRow, 3286 .has-weather.has-search .weatherButtonContextMenuWrapper, 3287 .has-weather .weatherCityRow, 3288 .has-weather .weatherButtonContextMenuWrapper { 3289 display: flex; 3290 } 3291 } 3292 .has-weather.has-search .weatherIconCol, 3293 .has-weather .weatherIconCol { 3294 display: none; 3295 } 3296 @media (min-width: 1122px) { 3297 .has-weather.has-search .weatherIconCol, 3298 .has-weather .weatherIconCol { 3299 display: flex; 3300 } 3301 } 3302 .has-weather.has-search .weatherDetailedSummaryRow, 3303 .has-weather .weatherDetailedSummaryRow { 3304 display: none; 3305 } 3306 @media (min-width: 1122px) { 3307 .has-weather.has-search .weatherDetailedSummaryRow, 3308 .has-weather .weatherDetailedSummaryRow { 3309 display: block; 3310 } 3311 } 3312 .has-weather.has-search .weatherCard, 3313 .has-weather .weatherCard { 3314 min-height: 55px; 3315 } 3316 .has-weather.has-search .weatherInfoLink, 3317 .has-weather .weatherInfoLink { 3318 min-width: auto; 3319 max-width: none; 3320 } 3321 @media (min-width: 1122px) { 3322 .has-weather.has-search .weatherInfoLink, 3323 .has-weather .weatherInfoLink { 3324 min-width: 130px; 3325 max-width: 190px; 3326 } 3327 } 3328 .has-weather.has-search .weatherForecastRow, 3329 .has-weather .weatherForecastRow { 3330 margin-block: var(--space-small); 3331 } 3332 @media (min-width: 866px) { 3333 .has-weather.has-search .weatherForecastRow, 3334 .has-weather .weatherForecastRow { 3335 margin-block: unset; 3336 } 3337 } 3338 .has-weather.has-search .weatherSponsorText, 3339 .has-weather .weatherSponsorText { 3340 position: relative; 3341 } 3342 .has-weather.has-search .weatherSponsorText span, 3343 .has-weather .weatherSponsorText span { 3344 position: absolute; 3345 white-space: nowrap; 3346 inset-block-start: var(--space-small); 3347 } 3348 @media (min-width: 866px) { 3349 .has-weather.has-search .weatherSponsorText span, 3350 .has-weather .weatherSponsorText span { 3351 inset-block-start: unset; 3352 position: relative; 3353 } 3354 } 3355 3356 .mobileDownloadPromoWrapper { 3357 display: none; 3358 height: 55px; 3359 } 3360 @media (min-width: 1122px) { 3361 .mobileDownloadPromoWrapper.is-tall { 3362 height: 74px; 3363 } 3364 } 3365 @media (min-width: 610px) { 3366 .mobileDownloadPromoWrapper { 3367 display: flex; 3368 align-items: center; 3369 justify-content: center; 3370 position: absolute; 3371 inset-inline-start: auto; 3372 inset-block-start: var(--space-xxlarge); 3373 inset-inline-end: var(--space-medium); 3374 margin-block-start: 0; 3375 margin-inline-start: 0; 3376 z-index: 1; 3377 } 3378 } 3379 @media (min-width: 724px) { 3380 .mobileDownloadPromoWrapper { 3381 inset-inline-end: var(--space-xxlarge); 3382 } 3383 } 3384 .no-search .mobileDownloadPromoWrapper { 3385 display: none; 3386 } 3387 @media (min-width: 866px) { 3388 .no-search .mobileDownloadPromoWrapper { 3389 display: flex; 3390 inset-block-start: var(--space-xxlarge); 3391 inset-inline-start: auto; 3392 inset-inline-end: var(--space-xxlarge); 3393 } 3394 } 3395 3396 .mobile-download-promo { 3397 width: 32px; 3398 height: 32px; 3399 appearance: none; 3400 border: 0; 3401 border-radius: var(--border-radius-small); 3402 padding: 0; 3403 cursor: pointer; 3404 } 3405 .mobile-download-promo:hover { 3406 background-color: var(--button-background-color-ghost-hover); 3407 } 3408 .mobile-download-promo:hover:active { 3409 background-color: var(--button-background-color-ghost-active); 3410 } 3411 .mobile-download-promo.is-active { 3412 background-color: var(--button-background-color-ghost-active); 3413 } 3414 .lightWallpaper .mobile-download-promo, .darkWallpaper .mobile-download-promo { 3415 background-color: var(--newtab-weather-background-color); 3416 } 3417 @media (prefers-contrast) { 3418 .lightWallpaper .mobile-download-promo, .darkWallpaper .mobile-download-promo { 3419 background-color: var(--background-color-box); 3420 } 3421 } 3422 3423 /* stylelint-disable max-nesting-depth */ 3424 .card-outer { 3425 background: var(--newtab-background-color-secondary); 3426 border-radius: var(--border-radius-medium); 3427 display: inline-block; 3428 height: 266px; 3429 margin-inline-end: var(--space-xxlarge); 3430 position: relative; 3431 width: 100%; 3432 } 3433 .card-outer .context-menu-button { 3434 background-clip: padding-box; 3435 background-color: var(--newtab-button-background); 3436 background-image: url("chrome://global/skin/icons/more.svg"); 3437 background-position: 50.1%; 3438 border: 0; 3439 outline: 1px solid var(--border-color); 3440 outline-width: 0; 3441 border-radius: var(--border-radius-circle); 3442 cursor: pointer; 3443 color: var(--button-text-color); 3444 fill: var(--newtab-button-text); 3445 height: 27px; 3446 inset-inline-end: calc(var(--space-medium) * -1); 3447 opacity: 0; 3448 position: absolute; 3449 inset-block-start: calc(var(--space-medium) * -1); 3450 transform: scale(0.25); 3451 transition-duration: 150ms; 3452 transition-property: transform, opacity; 3453 width: 27px; 3454 } 3455 .card-outer .context-menu-button:is(:active, :focus-visible, :hover) { 3456 opacity: 1; 3457 transform: scale(1); 3458 } 3459 .card-outer .context-menu-button:is(:hover) { 3460 background-color: var(--newtab-button-hover-background); 3461 } 3462 .card-outer .context-menu-button:is(:focus-visible) { 3463 outline-color: var(--newtab-button-focus-border); 3464 background-color: var(--newtab-button-focus-background); 3465 outline-width: 4px; 3466 } 3467 .card-outer .context-menu-button:is(:active) { 3468 background-color: var(--newtab-button-active-background); 3469 } 3470 .card-outer:is(:focus):not(.placeholder) { 3471 border: 0; 3472 outline: var(--focus-outline); 3473 transition: none; 3474 } 3475 .card-outer:hover { 3476 box-shadow: none; 3477 transition: none; 3478 } 3479 .card-outer.placeholder { 3480 background: transparent; 3481 } 3482 .card-outer.placeholder .card-preview-image-outer, 3483 .card-outer.placeholder .card-context { 3484 display: none; 3485 } 3486 .card-outer .card { 3487 border-radius: var(--border-radius-medium); 3488 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 3489 height: 100%; 3490 } 3491 .card-outer > a { 3492 color: inherit; 3493 display: block; 3494 height: 100%; 3495 outline: none; 3496 position: absolute; 3497 width: 100%; 3498 } 3499 .card-outer > a:is(:focus) .card { 3500 border: 0; 3501 outline: var(--focus-outline); 3502 } 3503 .card-outer > a:is(.active, :focus) .card { 3504 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 3505 transition: box-shadow 150ms; 3506 } 3507 .card-outer > a:is(.active, :focus) .card-title { 3508 color: var(--newtab-primary-action-background); 3509 } 3510 .card-outer:is(:hover, :focus, .active):not(.placeholder) { 3511 outline: none; 3512 } 3513 .card-outer:is(:hover, :focus, .active):not(.placeholder) .context-menu-button { 3514 opacity: 1; 3515 transform: scale(1); 3516 transition-delay: 333ms; 3517 } 3518 .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title { 3519 color: var(--newtab-primary-action-background); 3520 } 3521 .card-outer:is(:hover, :focus, .active):not(.placeholder) .alternate ~ .card-host-name { 3522 display: none; 3523 } 3524 .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-host-name.alternate { 3525 display: block; 3526 } 3527 .card-outer .card-preview-image-outer { 3528 background-color: var(--newtab-element-secondary-color); 3529 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 3530 height: 122px; 3531 overflow: hidden; 3532 position: relative; 3533 } 3534 .card-outer .card-preview-image-outer::after { 3535 border-block-end: 1px solid var(--newtab-card-hairline-color); 3536 inset-block-end: 0; 3537 content: ""; 3538 position: absolute; 3539 width: 100%; 3540 } 3541 .card-outer .card-preview-image-outer .card-preview-image { 3542 background-position: center; 3543 background-repeat: no-repeat; 3544 background-size: cover; 3545 height: 100%; 3546 opacity: 0; 3547 transition: opacity 1s cubic-bezier(0.07, 0.95, 0, 1); 3548 width: 100%; 3549 } 3550 .card-outer .card-preview-image-outer .card-preview-image.loaded { 3551 opacity: 1; 3552 } 3553 .card-outer .card-details { 3554 padding: var(--space-large) var(--space-large) var(--space-medium); 3555 } 3556 .card-outer .card-text { 3557 max-height: 78px; 3558 overflow: hidden; 3559 } 3560 .card-outer .card-text.no-host-name, .card-outer .card-text.no-context { 3561 max-height: 97px; 3562 } 3563 .card-outer .card-text.no-host-name.no-context { 3564 max-height: 116px; 3565 } 3566 .card-outer .card-text:not(.no-description) .card-title { 3567 max-height: 57px; 3568 overflow: hidden; 3569 } 3570 .card-outer .card-host-name { 3571 color: var(--newtab-text-secondary-color); 3572 font-size: var(--font-size-small); 3573 overflow: hidden; 3574 padding-block-end: var(--space-xsmall); 3575 text-overflow: ellipsis; 3576 text-transform: uppercase; 3577 white-space: nowrap; 3578 } 3579 .card-outer .card-host-name.alternate { 3580 display: none; 3581 } 3582 .card-outer .card-title { 3583 font-size: inherit; 3584 font-weight: var(--heading-font-weight); 3585 line-height: 19px; 3586 margin: 0 0 var(--space-xxsmall); 3587 word-wrap: break-word; 3588 } 3589 .card-outer .card-description { 3590 font-size: var(--font-size-small); 3591 line-height: 19px; 3592 margin: 0; 3593 overflow: hidden; 3594 word-wrap: break-word; 3595 } 3596 .card-outer .card-context { 3597 inset-block-end: 0; 3598 color: var(--newtab-text-secondary-color); 3599 display: flex; 3600 font-size: var(--font-size-small); 3601 inset-inline-start: 0; 3602 padding: var(--space-small) var(--space-large); 3603 position: absolute; 3604 } 3605 .card-outer .card-context-icon { 3606 fill: var(--newtab-text-secondary-color); 3607 height: 22px; 3608 margin-inline-end: var(--space-xsmall); 3609 } 3610 .card-outer .card-context-label { 3611 flex-grow: 1; 3612 line-height: 22px; 3613 overflow: hidden; 3614 text-overflow: ellipsis; 3615 white-space: nowrap; 3616 } 3617 3618 @media (min-width: 1122px) { 3619 .normal-cards .card-outer { 3620 height: 370px; 3621 } 3622 .normal-cards .card-outer .card-preview-image-outer { 3623 height: 155px; 3624 } 3625 .normal-cards .card-outer .card-details { 3626 padding: var(--space-medium) var(--space-large); 3627 } 3628 .normal-cards .card-outer .card-text { 3629 max-height: 140px; 3630 } 3631 .normal-cards .card-outer .card-host-name { 3632 font-size: var(--font-size-small); 3633 padding-block-end: var(--space-xsmall); 3634 } 3635 .normal-cards .card-outer .card-title { 3636 font-size: var(--font-size-large); 3637 line-height: 23px; 3638 margin-block-end: 0; 3639 } 3640 .normal-cards .card-outer .card-text:not(.no-description) .card-title { 3641 max-height: 69px; 3642 } 3643 .normal-cards .card-outer .card-description { 3644 font-size: inherit; 3645 line-height: 23px; 3646 } 3647 .normal-cards .card-outer .card-context { 3648 inset-block-end: var(--space-xsmall); 3649 font-size: inherit; 3650 line-height: 23px; 3651 } 3652 } 3653 3654 .compact-cards .card-outer { 3655 height: 160px; 3656 } 3657 .compact-cards .card-outer .card-preview-image-outer { 3658 height: 108px; 3659 } 3660 .compact-cards .card-outer .card-details { 3661 padding: var(--space-medium) var(--space-large); 3662 } 3663 .compact-cards .card-outer .card-host-name { 3664 line-height: 10px; 3665 } 3666 .compact-cards .card-outer .card-text .card-title, .compact-cards .card-outer .card-text:not(.no-description) .card-title { 3667 font-size: var(--font-size-small); 3668 line-height: calc(var(--font-size-small) + 1px); 3669 max-height: calc(var(--font-size-small) + 5px); 3670 overflow: hidden; 3671 padding: 0 0 var(--space-xsmall); 3672 text-overflow: ellipsis; 3673 white-space: nowrap; 3674 } 3675 .compact-cards .card-outer .card-description { 3676 display: none; 3677 } 3678 .compact-cards .card-outer .card-context { 3679 background-color: var(--newtab-background-color-secondary); 3680 border-radius: var(--border-radius-medium); 3681 clip-path: inset(-1px -1px 4px); 3682 height: 32px; 3683 width: 32px; 3684 padding: var(--space-small); 3685 inset-block-start: 91px; 3686 inset-inline-end: var(--space-medium); 3687 inset-inline-start: auto; 3688 } 3689 .compact-cards .card-outer .card-context::after { 3690 border: 1px solid var(--newtab-card-hairline-color); 3691 border-block-end: 0; 3692 border-radius: var(--border-radius-medium); 3693 content: ""; 3694 position: absolute; 3695 height: 17px; 3696 width: 34px; 3697 inset-block-start: calc(var(--space-xxsmall) * -1); 3698 inset-inline-start: calc(var(--space-xxsmall) * -1); 3699 } 3700 .compact-cards .card-outer .card-context .card-context-icon { 3701 margin-inline-end: 0; 3702 height: 16px; 3703 width: 16px; 3704 } 3705 .compact-cards .card-outer .card-context .card-context-icon.icon-bookmark-added { 3706 fill: var(--color-blue-40); 3707 } 3708 .compact-cards .card-outer .card-context .card-context-icon.icon-download { 3709 fill: var(--color-green-40); 3710 } 3711 .compact-cards .card-outer .card-context .card-context-icon.icon-pocket { 3712 fill: #EF4056; 3713 } 3714 .compact-cards .card-outer .card-context .card-context-label { 3715 display: none; 3716 } 3717 @media not all and (min-width: 1122px) { 3718 .compact-cards .hide-for-narrow { 3719 display: none; 3720 } 3721 } 3722 3723 /* stylelint-disable max-nesting-depth */ 3724 .collapsible-section { 3725 padding: 0 var(--space-xlarge); 3726 margin-block-end: var(--space-xxlarge); 3727 } 3728 .collapsible-section .section-title-container { 3729 margin: 0; 3730 } 3731 .collapsible-section .section-title-container.has-subtitle { 3732 display: flex; 3733 flex-direction: column; 3734 } 3735 @media (min-width: 866px) { 3736 .collapsible-section .section-title-container.has-subtitle { 3737 flex-direction: row; 3738 align-items: baseline; 3739 justify-content: space-between; 3740 } 3741 } 3742 .collapsible-section .section-title { 3743 font-size: var(--font-size-large); 3744 font-weight: var(--heading-font-weight); 3745 color: var(--newtab-text-primary-color); 3746 } 3747 .collapsible-section .section-title.grey-title { 3748 color: var(--newtab-text-primary-color); 3749 display: inline-block; 3750 fill: var(--newtab-text-primary-color); 3751 vertical-align: middle; 3752 } 3753 .collapsible-section .section-title .section-title-contents { 3754 vertical-align: top; 3755 } 3756 @media (max-width: 609px) { 3757 .collapsible-section .section-title .section-title-contents { 3758 display: block; 3759 } 3760 .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper { 3761 display: block; 3762 text-align: center; 3763 } 3764 .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper .learn-more-link { 3765 margin-inline-start: 0; 3766 } 3767 } 3768 .collapsible-section .section-sub-title { 3769 font-size: inherit; 3770 color: var(--newtab-text-secondary-color); 3771 opacity: 0.3; 3772 } 3773 .collapsible-section .section-top-bar { 3774 min-height: 19px; 3775 margin-block-end: var(--space-medium); 3776 position: relative; 3777 display: flex; 3778 justify-content: space-between; 3779 align-items: center; 3780 } 3781 @media (max-width: 609px) { 3782 .collapsible-section .section-top-bar { 3783 flex-direction: column; 3784 gap: var(--space-small); 3785 align-items: flex-start; 3786 } 3787 } 3788 .collapsible-section.active { 3789 background: var(--newtab-element-hover-color); 3790 border-radius: var(--border-radius-small); 3791 } 3792 .collapsible-section .learn-more-link { 3793 font-size: var(--font-size-small); 3794 margin-inline-start: var(--space-medium); 3795 } 3796 .collapsible-section .learn-more-link a { 3797 color: var(--newtab-primary-action-background); 3798 } 3799 .collapsible-section .section-body-fallback { 3800 height: 266px; 3801 } 3802 .collapsible-section .section-body { 3803 margin: 0 calc(var(--space-xsmall) * -1); 3804 padding: 0 var(--space-small); 3805 } 3806 .collapsible-section .section-body.animating { 3807 overflow: hidden; 3808 pointer-events: none; 3809 } 3810 .collapsible-section[data-section-id=topsites] .section-top-bar { 3811 display: none; 3812 } 3813 @media (min-width: 610px) and (max-width: 865px) { 3814 .collapsible-section[data-section-id=topstories] .card-outer:first-child { 3815 display: none; 3816 } 3817 } 3818 .collapsible-section .button-topic-selection { 3819 display: none; 3820 } 3821 @media (min-width: 724px) { 3822 .collapsible-section .button-topic-selection { 3823 display: block; 3824 } 3825 } 3826 .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button), .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button) { 3827 background-color: var(--newtab-weather-background-color); 3828 } 3829 .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover, .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover { 3830 background-color: var(--newtab-button-static-hover-background); 3831 } 3832 .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover:active, .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover:active { 3833 background-color: var(--newtab-button-static-active-background); 3834 } 3835 @media (prefers-contrast) { 3836 .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button), .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button) { 3837 background-color: var(--background-color-box); 3838 } 3839 } 3840 3841 /* stylelint-disable max-nesting-depth */ 3842 .discoverystream-admin-toggle { 3843 position: fixed; 3844 inset-block-end: calc(var(--button-size-icon) + var(--space-xxlarge) + var(--space-small)); 3845 inset-inline-end: var(--space-xlarge); 3846 border: 0; 3847 background: none; 3848 z-index: 4; 3849 border-radius: var(--border-radius-small); 3850 } 3851 .discoverystream-admin-toggle .icon-devtools { 3852 background-color: var(--button-background-color, rgba(21, 20, 26, 0.07)); 3853 background-image: url("chrome://global/skin/icons/developer.svg"); 3854 background-size: var(--icon-size-medium); 3855 box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 0.2); 3856 padding: calc(5 * var(--space-xsmall)); 3857 } 3858 .discoverystream-admin-toggle:dir(rtl) { 3859 transform: scaleX(-1); 3860 } 3861 .discoverystream-admin-toggle:hover { 3862 background: var(--newtab-element-hover-color); 3863 } 3864 .discoverystream-admin-toggle.expanded { 3865 background: rgba(0, 0, 0, 0.2); 3866 } 3867 3868 .discoverystream-admin { 3869 position: fixed; 3870 inset-block-start: 0; 3871 inset-inline-start: 0; 3872 width: 100%; 3873 background: var(--newtab-background-color); 3874 height: 100%; 3875 overflow-y: scroll; 3876 margin: 0 auto; 3877 color: var(--newtab-text-primary-color); 3878 z-index: 3; 3879 } 3880 .discoverystream-admin.collapsed { 3881 display: none; 3882 } 3883 .discoverystream-admin h1 { 3884 font-size: var(--font-size-xxlarge); 3885 } 3886 .discoverystream-admin h2 .button, 3887 .discoverystream-admin p .button { 3888 font-size: inherit; 3889 padding: var(--space-xsmall) var(--space-medium); 3890 margin-inline-start: var(--space-xsmall); 3891 margin-block-end: 0; 3892 } 3893 .discoverystream-admin .toggle-wrapper { 3894 margin-block: var(--space-large); 3895 width: 200px; 3896 } 3897 .discoverystream-admin .details-section { 3898 margin-block: var(--space-large); 3899 } 3900 .discoverystream-admin .details-section summary { 3901 font-size: var(--font-size-large); 3902 } 3903 .discoverystream-admin table { 3904 border-collapse: collapse; 3905 width: 100%; 3906 } 3907 .discoverystream-admin table.minimal-table { 3908 border-collapse: collapse; 3909 border: 1px solid var(--border-color); 3910 } 3911 .discoverystream-admin table.minimal-table td { 3912 padding: var(--space-small); 3913 } 3914 .discoverystream-admin table.minimal-table td:first-child { 3915 width: 1%; 3916 white-space: nowrap; 3917 } 3918 .discoverystream-admin table.minimal-table td:not(:first-child) { 3919 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; 3920 } 3921 .discoverystream-admin table.errorReporting tr { 3922 border: 1px solid var(--newtab-background-color-secondary); 3923 } 3924 .discoverystream-admin table.errorReporting td { 3925 padding: var(--space-xsmall); 3926 } 3927 .discoverystream-admin table.errorReporting td[rowspan] { 3928 border: 1px solid var(--newtab-background-color-secondary); 3929 } 3930 .discoverystream-admin .large-data-container { 3931 max-height: 500px; 3932 overflow-y: scroll; 3933 } 3934 .discoverystream-admin .message-item:first-child td { 3935 border-block-start: 1px solid var(--border-color); 3936 } 3937 .discoverystream-admin .message-item td { 3938 vertical-align: top; 3939 padding: var(--space-small); 3940 border-block-end: 1px solid var(--border-color); 3941 } 3942 .discoverystream-admin .message-item td.min { 3943 width: 1%; 3944 white-space: nowrap; 3945 } 3946 .discoverystream-admin .message-item td.message-summary { 3947 width: 60%; 3948 } 3949 .discoverystream-admin .message-item td.button-column { 3950 width: 15%; 3951 } 3952 .discoverystream-admin .message-item td:first-child { 3953 border-inline-start: 1px solid var(--border-color); 3954 } 3955 .discoverystream-admin .message-item td:last-child { 3956 border-inline-end: 1px solid var(--border-color); 3957 } 3958 .discoverystream-admin .message-item.blocked .message-id, 3959 .discoverystream-admin .message-item.blocked .message-summary { 3960 opacity: 0.5; 3961 } 3962 .discoverystream-admin .message-item.blocked .message-id { 3963 opacity: 0.5; 3964 } 3965 .discoverystream-admin .message-item .message-id { 3966 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; 3967 font-size: var(--font-size-small); 3968 } 3969 .discoverystream-admin pre { 3970 background: var(--newtab-background-color-secondary); 3971 margin: 0; 3972 padding: var(--space-small); 3973 font-size: var(--font-size-small); 3974 max-width: 750px; 3975 overflow: auto; 3976 font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; 3977 } 3978 .discoverystream-admin .helpLink { 3979 padding: var(--space-medium); 3980 display: flex; 3981 background: rgba(0, 0, 0, 0.1); 3982 border-radius: var(--border-radius-small); 3983 align-items: center; 3984 } 3985 .discoverystream-admin .helpLink a { 3986 text-decoration: underline; 3987 } 3988 .discoverystream-admin .helpLink .icon { 3989 min-width: 18px; 3990 min-height: 18px; 3991 } 3992 .discoverystream-admin .ds-component { 3993 margin-block-end: var(--space-large); 3994 } 3995 .discoverystream-admin .collapsed { 3996 display: none; 3997 } 3998 .discoverystream-admin .icon { 3999 display: inline-table; 4000 width: 18px; 4001 height: 18px; 4002 } 4003 .discoverystream-admin .button:disabled, .discoverystream-admin .button:disabled:active { 4004 opacity: 0.5; 4005 cursor: unset; 4006 box-shadow: none; 4007 } 4008 .discoverystream-admin .weather-section { 4009 margin-block-end: var(--space-xlarge); 4010 } 4011 .discoverystream-admin .weather-section form { 4012 display: flex; 4013 } 4014 .discoverystream-admin .weather-section form label { 4015 margin-inline-end: var(--space-medium); 4016 } 4017 4018 .more-recommendations { 4019 display: flex; 4020 align-items: center; 4021 white-space: nowrap; 4022 line-height: 1.2307692308; 4023 } 4024 .more-recommendations::after { 4025 background: url("chrome://global/skin/icons/arrow-right-12.svg") no-repeat center center; 4026 content: ""; 4027 -moz-context-properties: fill; 4028 display: inline-block; 4029 fill: var(--newtab-primary-action-background); 4030 height: 16px; 4031 margin-inline-start: var(--space-xsmall); 4032 vertical-align: top; 4033 width: var(--icon-size-xsmall); 4034 } 4035 .more-recommendations:dir(rtl)::after { 4036 background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); 4037 } 4038 4039 .discovery-stream.ds-layout { 4040 --gridColumnGap: 48px; 4041 --gridRowGap: 24px; 4042 grid-template-columns: repeat(12, 1fr); 4043 grid-column-gap: var(--gridColumnGap); 4044 grid-row-gap: var(--gridRowGap); 4045 margin: 0 auto; 4046 } 4047 .discovery-stream.ds-layout .ds-column-12 { 4048 grid-column-start: auto; 4049 grid-column-end: span 12; 4050 } 4051 .discovery-stream.ds-layout .ds-column-11 { 4052 grid-column-start: auto; 4053 grid-column-end: span 11; 4054 } 4055 .discovery-stream.ds-layout .ds-column-10 { 4056 grid-column-start: auto; 4057 grid-column-end: span 10; 4058 } 4059 .discovery-stream.ds-layout .ds-column-9 { 4060 grid-column-start: auto; 4061 grid-column-end: span 9; 4062 } 4063 .discovery-stream.ds-layout .ds-column-8 { 4064 grid-column-start: auto; 4065 grid-column-end: span 8; 4066 } 4067 .discovery-stream.ds-layout .ds-column-7 { 4068 grid-column-start: auto; 4069 grid-column-end: span 7; 4070 } 4071 .discovery-stream.ds-layout .ds-column-6 { 4072 grid-column-start: auto; 4073 grid-column-end: span 6; 4074 } 4075 .discovery-stream.ds-layout .ds-column-5 { 4076 grid-column-start: auto; 4077 grid-column-end: span 5; 4078 } 4079 .discovery-stream.ds-layout .ds-column-4 { 4080 grid-column-start: auto; 4081 grid-column-end: span 4; 4082 } 4083 .discovery-stream.ds-layout .ds-column-3 { 4084 grid-column-start: auto; 4085 grid-column-end: span 3; 4086 } 4087 .discovery-stream.ds-layout .ds-column-2 { 4088 grid-column-start: auto; 4089 grid-column-end: span 2; 4090 } 4091 .discovery-stream.ds-layout .ds-column-1 { 4092 grid-column-start: auto; 4093 grid-column-end: span 1; 4094 } 4095 .discovery-stream.ds-layout .ds-column-grid { 4096 display: flex; 4097 flex-direction: column; 4098 grid-row-gap: var(--gridRowGap); 4099 } 4100 .discovery-stream.ds-layout .ds-column-grid > div:empty { 4101 display: none; 4102 } 4103 4104 .ds-header { 4105 margin: var(--space-small) 0; 4106 } 4107 .ds-header .ds-context { 4108 font-weight: var(--font-weight); 4109 } 4110 4111 .ds-header, 4112 .ds-layout .section-title span { 4113 color: var(--newtab-contextual-text-primary-color); 4114 font-size: var(--font-size-large); 4115 font-weight: var(--heading-font-weight); 4116 } 4117 .lightWallpaper .ds-header, 4118 .lightWallpaper .ds-layout .section-title span { 4119 color-scheme: light; 4120 } 4121 .darkWallpaper .ds-header, 4122 .darkWallpaper .ds-layout .section-title span { 4123 color-scheme: dark; 4124 } 4125 .ds-header .icon, 4126 .ds-layout .section-title span .icon { 4127 fill: var(--newtab-text-secondary-color); 4128 } 4129 4130 .collapsible-section.ds-layout { 4131 margin: auto; 4132 } 4133 .lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link { 4134 color-scheme: light; 4135 } 4136 .darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link { 4137 color-scheme: dark; 4138 } 4139 .collapsible-section.ds-layout .section-top-bar .learn-more-link a { 4140 color: var(--newtab-primary-action-background); 4141 font-weight: var(--font-weight-semibold); 4142 } 4143 .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { 4144 text-decoration: none; 4145 } 4146 4147 .activity-stream.modal-open { 4148 overflow: hidden; 4149 } 4150 4151 .modalOverlayOuter { 4152 background: var(--newtab-overlay-color); 4153 height: 100%; 4154 position: fixed; 4155 inset-block-start: 0; 4156 inset-inline-start: 0; 4157 width: 100%; 4158 display: none; 4159 z-index: 1100; 4160 overflow: auto; 4161 } 4162 .modalOverlayOuter.active { 4163 display: flex; 4164 } 4165 4166 .modalOverlayInner { 4167 min-width: min-content; 4168 width: 100%; 4169 max-width: 960px; 4170 position: relative; 4171 margin: auto; 4172 background: var(--newtab-background-color-secondary); 4173 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 4174 border-radius: var(--border-radius-small); 4175 display: none; 4176 z-index: 1100; 4177 } 4178 @media (width <= 960px) { 4179 .modalOverlayInner { 4180 height: 100%; 4181 inset-block-start: 0; 4182 inset-inline-start: 0; 4183 box-shadow: none; 4184 border-radius: 0; 4185 } 4186 } 4187 .modalOverlayInner.active { 4188 display: block; 4189 } 4190 .modalOverlayInner h2 { 4191 color: var(--newtab-text-primary-color); 4192 text-align: center; 4193 margin-block-start: var(--space-xxlarge); 4194 font-size: var(--font-size-xxlarge); 4195 } 4196 @media (width <= 960px) { 4197 .modalOverlayInner h2 { 4198 margin-block-start: calc(var(--space-xlarge) * 4); 4199 } 4200 } 4201 @media (width <= 850px) { 4202 .modalOverlayInner h2 { 4203 margin-block-start: var(--space-xxlarge); 4204 } 4205 } 4206 .modalOverlayInner .footer { 4207 border-block-start: 1px solid var(--border-color); 4208 border-radius: var(--border-radius-small); 4209 height: 70px; 4210 width: 100%; 4211 position: absolute; 4212 inset-block-end: 0; 4213 text-align: center; 4214 background-color: var(--color-white); 4215 } 4216 @media (width <= 850px) and (height <= 730px) { 4217 .modalOverlayInner .footer { 4218 position: sticky; 4219 } 4220 } 4221 @media (width <= 650px) and (height <= 600px) { 4222 .modalOverlayInner .footer { 4223 position: sticky; 4224 } 4225 } 4226 .modalOverlayInner .footer .modalButton { 4227 margin-block-start: var(--space-large); 4228 min-width: 150px; 4229 height: 30px; 4230 padding: var(--space-xsmall) var(--space-xxlarge); 4231 font-size: inherit; 4232 } 4233 .modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover { 4234 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 4235 transition: box-shadow 150ms; 4236 } 4237 4238 .notification-wrapper { 4239 position: fixed; 4240 inset-inline-end: var(--space-medium); 4241 inset-block-end: var(--space-medium); 4242 z-index: 10; 4243 } 4244 4245 .notification-feed-item { 4246 position: relative; 4247 animation: toastSlideInSlideOut 4s ease-in-out forwards; 4248 } 4249 4250 @keyframes toastSlideInSlideOut { 4251 0%, 100% { 4252 opacity: 0; 4253 inset-block-start: 50%; 4254 } 4255 15%, 85% { 4256 opacity: 1; 4257 inset-block-start: 0; 4258 } 4259 } 4260 /* This Source Code Form is subject to the terms of the Mozilla Public 4261 * License, v. 2.0. If a copy of the MPL was not distributed with this file, 4262 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4263 .discovery-stream.ds-layout.ds-layout-widgets { 4264 margin-inline: 0; 4265 } 4266 4267 .widgets-wrapper { 4268 margin-inline: auto; 4269 padding-block-end: var(--space-large); 4270 max-width: max-content; 4271 } 4272 4273 .widgets-section-container { 4274 padding-block: var(--space-xsmall) var(--space-large); 4275 padding-inline: var(--space-large); 4276 background-color: var(--button-background-color); 4277 border-radius: var(--border-radius-large); 4278 } 4279 .lightWallpaper .widgets-section-container, .darkWallpaper .widgets-section-container { 4280 background-color: var(--newtab-weather-background-color); 4281 } 4282 @media (prefers-contrast) { 4283 .lightWallpaper .widgets-section-container, .darkWallpaper .widgets-section-container { 4284 background-color: var(--background-color-box); 4285 } 4286 } 4287 .widgets-section-container .widgets-title-container { 4288 display: flex; 4289 justify-content: flex-end; 4290 align-items: center; 4291 gap: var(--space-medium); 4292 } 4293 .widgets-section-container .widgets-title-container h1 { 4294 margin-inline-end: auto; 4295 } 4296 @media (min-width: 1122px) { 4297 .widgets-section-container { 4298 padding-block-end: var(--space-xlarge); 4299 padding-inline: var(--space-xlarge); 4300 } 4301 } 4302 @media (min-width: 1122px) { 4303 .has-sections-grid .widgets-section-container { 4304 padding-block-end: var(--space-large); 4305 padding-inline: var(--space-large); 4306 } 4307 } 4308 .widgets-section-container h1 { 4309 font-size: var(--font-size-large); 4310 font-weight: var(--font-weight-bold); 4311 } 4312 4313 .widgets-container { 4314 --widgets-card-width: var(--newtab-card-grid-layout-width); 4315 --widgets-max-cols: 2; 4316 --widgets-grid-gap: var(--space-large); 4317 } 4318 .has-sections-grid .widgets-container { 4319 --widgets-card-width: var(--newtab-card-width-medium); 4320 } 4321 .widgets-container:has(.lists), .widgets-container:has(.focus-timer) { 4322 display: grid; 4323 grid-template-columns: repeat(auto-fit, var(--widgets-card-width)); 4324 gap: var(--widgets-grid-gap); 4325 } 4326 @media (min-width: 610px) { 4327 .widgets-container:has(.lists), .widgets-container:has(.focus-timer) { 4328 max-width: calc(var(--widgets-max-cols) * var(--widgets-card-width) + (var(--widgets-max-cols) - 1) * var(--widgets-grid-gap)); 4329 justify-content: center; 4330 } 4331 } 4332 @media (min-width: 1122px) { 4333 .widgets-container:has(.lists), .widgets-container:has(.focus-timer) { 4334 --widgets-grid-gap: var(--space-xlarge); 4335 } 4336 } 4337 @media (min-width: 1122px) { 4338 .has-sections-grid .widgets-container:has(.lists), .has-sections-grid .widgets-container:has(.focus-timer) { 4339 --widgets-grid-gap: var(--space-large); 4340 } 4341 } 4342 4343 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper { 4344 width: auto; 4345 border-radius: var(--border-radius-medium); 4346 } 4347 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .content-wrapper { 4348 margin: 0; 4349 padding: var(--space-medium); 4350 } 4351 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight img { 4352 border-radius: var(--border-radius-medium); 4353 margin-block-end: var(--space-small); 4354 } 4355 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight h3 { 4356 margin-block: 0 var(--space-xsmall); 4357 font-size: var(--font-size-root); 4358 } 4359 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight p { 4360 margin-block: 0; 4361 font-size: var(--font-size-root); 4362 } 4363 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .message-icon { 4364 display: none; 4365 } 4366 .feature-highlight .feature-highlight-modal.widget-highlight-wrapper moz-button { 4367 position: absolute; 4368 inset-inline-end: var(--space-medium); 4369 inset-block-start: var(--space-medium); 4370 } 4371 4372 /* This Source Code Form is subject to the terms of the Mozilla Public 4373 * License, v. 2.0. If a copy of the MPL was not distributed with this file, 4374 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4375 .lists { 4376 background: var(--newtab-background-card); 4377 transition: opacity 0.2s ease; 4378 grid-column: span 1; 4379 width: var(--newtab-card-grid-layout-width); 4380 border-radius: var(--border-radius-large); 4381 padding-block-start: var(--space-medium); 4382 height: var(--newtab-card-height); 4383 box-shadow: var(--box-shadow-card); 4384 position: relative; 4385 display: flex; 4386 flex-direction: column; 4387 } 4388 .lists:hover { 4389 background: var(--newtab-background-color-secondary); 4390 } 4391 .has-sections-grid .lists { 4392 width: var(--newtab-card-width-medium); 4393 } 4394 .lists .confetti-canvas { 4395 position: absolute; 4396 inset-block-start: 0; 4397 inset-inline-start: 0; 4398 width: 100%; 4399 height: 100%; 4400 pointer-events: none; 4401 z-index: 1; 4402 /* adjust as needed to sit above background but below UI */ 4403 } 4404 .lists .select-wrapper { 4405 padding-inline: var(--space-medium); 4406 display: flex; 4407 justify-content: flex-start; 4408 position: relative; 4409 align-items: center; 4410 gap: var(--space-medium); 4411 } 4412 .lists .select-wrapper moz-button { 4413 visibility: hidden; 4414 margin-inline-start: auto; 4415 } 4416 .lists:hover .select-wrapper moz-button, .lists:focus-within .select-wrapper moz-button, 4417 .lists .select-wrapper panel-list[open] .select-wrapper moz-button { 4418 visibility: visible; 4419 } 4420 .lists .edit-list { 4421 outline: var(--focus-outline); 4422 } 4423 .lists .add-task-container { 4424 margin-block: var(--space-small); 4425 padding-inline: var(--space-medium); 4426 position: relative; 4427 } 4428 .lists .add-task-container .icon.icon-add { 4429 position: absolute; 4430 inset-block-start: 50%; 4431 transform: translateY(-50%); 4432 inset-inline-start: calc(var(--space-medium) + var(--space-small)); 4433 } 4434 .lists .add-task-container .icon.icon-add.icon-disabled { 4435 fill: var(--text-color-disabled); 4436 } 4437 .lists .add-task-container .add-task-input { 4438 background: var(--button-background-color); 4439 padding-block: var(--space-small); 4440 padding-inline-start: calc(var(--space-large) * 2 + var(--space-xsmall)); 4441 padding-inline-end: var(--space-large); 4442 outline: none; 4443 border: none; 4444 border-radius: var(--border-radius-small); 4445 width: 100%; 4446 } 4447 .lists .add-task-container .add-task-input:focus { 4448 outline: var(--focus-outline); 4449 } 4450 .lists .add-task-container .add-task-input:focus::placeholder { 4451 color: var(--newtab-text-primary-color); 4452 } 4453 .lists .add-task-container .add-task-input:disabled { 4454 background-color: var(--button-background-color-ghost); 4455 color: var(--text-color-disabled); 4456 outline: var(--border-width) solid var(--border-color-interactive-disabled); 4457 } 4458 .lists .task-list-wrapper { 4459 height: 100%; 4460 padding-block-start: var(--space-xsmall); 4461 } 4462 .lists fieldset { 4463 margin: 0; 4464 padding-block: 0; 4465 padding-inline: var(--space-medium); 4466 border: none; 4467 overflow-y: auto; 4468 max-height: 165px; 4469 } 4470 .lists fieldset:focus { 4471 outline: var(--focus-outline); 4472 } 4473 .lists .task-item { 4474 align-items: center; 4475 background: transparent; 4476 border-radius: var(--border-radius-small); 4477 display: flex; 4478 justify-content: space-between; 4479 transition: opacity 300ms ease; 4480 margin-block-end: var(--space-xsmall); 4481 } 4482 .lists .task-item.task-type-tasks:last-of-type { 4483 margin-block-end: var(--space-small); 4484 } 4485 @media (prefers-reduced-motion: no-preference) { 4486 .lists .task-item.exiting { 4487 opacity: 0; 4488 } 4489 } 4490 .lists .task-item .checkbox-wrapper { 4491 display: flex; 4492 align-items: center; 4493 flex-grow: 2; 4494 padding-block: var(--space-small); 4495 } 4496 .lists .task-item .checkbox-wrapper span { 4497 -webkit-line-clamp: 3; 4498 overflow: hidden; 4499 text-overflow: ellipsis; 4500 word-break: break-word; 4501 white-space: normal; 4502 max-width: 180px; 4503 } 4504 .lists .task-item input[type=checkbox] { 4505 height: var(--size-item-small); 4506 width: var(--size-item-small); 4507 accent-color: var(--color-accent-primary); 4508 margin-inline-start: var(--space-small); 4509 padding: 0; 4510 } 4511 .lists .task-item .task-label { 4512 position: relative; 4513 padding-inline-start: var(--space-small); 4514 } 4515 .lists .task-item input:checked ~ .task-label { 4516 color: var(--text-color-deemphasized); 4517 text-decoration: line-through; 4518 } 4519 .lists .task-item moz-button { 4520 margin-inline-end: var(--space-xsmall); 4521 visibility: hidden; 4522 } 4523 .lists .task-item moz-button:has(+ panel-list[open]) { 4524 visibility: visible; 4525 } 4526 .lists .task-item:hover, .lists .task-item:focus-visible, .lists .task-item:focus-within { 4527 background: var(--button-background-color); 4528 } 4529 .lists .task-item:hover moz-button, .lists .task-item:focus-visible moz-button, .lists .task-item:focus-within moz-button { 4530 visibility: visible; 4531 } 4532 .lists .task-item panel-list[open] ~ moz-button { 4533 visibility: visible; 4534 } 4535 .lists .task-item .edit-task { 4536 margin-inline-start: var(--space-small); 4537 max-width: 180px; 4538 border: none; 4539 border-radius: 0; 4540 user-select: text; 4541 } 4542 .lists .task-item .edit-task:focus { 4543 outline: var(--focus-outline); 4544 } 4545 .lists .empty-list { 4546 display: flex; 4547 flex-direction: column; 4548 justify-content: center; 4549 align-items: center; 4550 gap: var(--space-small); 4551 height: 100%; 4552 padding-block-end: var(--space-medium); 4553 } 4554 .lightWallpaper .lists .empty-list { 4555 color-scheme: light; 4556 } 4557 .darkWallpaper .lists .empty-list { 4558 color-scheme: dark; 4559 } 4560 .lists .empty-list .empty-list-text { 4561 margin: 0; 4562 text-align: center; 4563 color: var(--text-color-deemphasized); 4564 font-size: var(--font-size-small); 4565 padding-inline: var(--space-medium); 4566 } 4567 .lists .completed-task-wrapper { 4568 display: flex; 4569 flex-direction: column; 4570 gap: var(--space-small); 4571 } 4572 .lists .completed-task-wrapper summary { 4573 list-style: none; 4574 } 4575 .lists .completed-task-wrapper summary:focus { 4576 outline: var(--focus-outline); 4577 } 4578 .lists .completed-task-wrapper summary .completed-title { 4579 color: var(--text-color-deemphasized); 4580 position: relative; 4581 } 4582 .lists .completed-task-wrapper summary .completed-title::after { 4583 content: ""; 4584 -moz-context-properties: fill; 4585 fill: var(--button-icon-fill); 4586 background-image: url("chrome://global/skin/icons/arrow-right.svg"); 4587 height: var(--icon-size-small); 4588 width: var(--icon-size-small); 4589 position: absolute; 4590 inset-inline-end: calc(-1 * var(--space-xlarge)); 4591 inset-block-start: 50%; 4592 transform: translateY(-50%); 4593 } 4594 .lists .completed-task-wrapper summary .completed-title:dir(rtl)::after { 4595 background-image: url("chrome://global/skin/icons/arrow-left.svg"); 4596 } 4597 .lists .completed-task-wrapper[open] .completed-title::after { 4598 background-image: url("chrome://global/skin/icons/arrow-down.svg"); 4599 } 4600 4601 /* This Source Code Form is subject to the terms of the Mozilla Public 4602 * License, v. 2.0. If a copy of the MPL was not distributed with this file, 4603 * You can obtain one at http://mozilla.org/MPL/2.0/. */ 4604 .focus-timer { 4605 background: var(--newtab-background-card); 4606 transition: opacity 0.2s ease; 4607 grid-column: span 1; 4608 width: var(--newtab-card-grid-layout-width); 4609 border-radius: var(--border-radius-large); 4610 padding-block: var(--space-medium); 4611 height: var(--newtab-card-height); 4612 display: flex; 4613 flex-direction: column; 4614 align-items: center; 4615 box-shadow: var(--box-shadow-card); 4616 } 4617 .focus-timer:hover { 4618 background: var(--newtab-background-color-secondary); 4619 } 4620 .has-sections-grid .focus-timer { 4621 width: var(--newtab-card-width-medium); 4622 } 4623 4624 .focus-timer-tabs { 4625 display: flex; 4626 margin-block-end: var(--space-medium); 4627 position: relative; 4628 width: 100%; 4629 padding-inline: var(--space-medium); 4630 } 4631 4632 .focus-timer-tabs-buttons { 4633 display: flex; 4634 gap: var(--space-xxsmall); 4635 justify-content: center; 4636 flex-grow: 1; 4637 } 4638 .focus-timer-tabs-buttons moz-button { 4639 flex-grow: 1; 4640 } 4641 .focus-timer-tabs-buttons moz-button:first-of-type::part(button) { 4642 border-end-end-radius: 0; 4643 border-start-end-radius: 0; 4644 } 4645 .focus-timer-tabs-buttons moz-button:last-of-type::part(button) { 4646 border-start-start-radius: 0; 4647 border-end-start-radius: 0; 4648 } 4649 4650 .newtab-widget-timer-notification-title-wrapper { 4651 display: flex; 4652 justify-content: space-between; 4653 align-items: center; 4654 width: 100%; 4655 padding-inline: var(--space-medium); 4656 margin-block-end: var(--space-medium); 4657 } 4658 .newtab-widget-timer-notification-title-wrapper h3 { 4659 font-size: var(--button-font-size); 4660 font-weight: var(--heading-font-weight); 4661 margin-block: 0; 4662 } 4663 4664 .focus-timer-context-menu-wrapper { 4665 opacity: 0; 4666 pointer-events: none; 4667 } 4668 4669 .focus-timer:hover .focus-timer-context-menu-wrapper, .focus-timer:focus-within .focus-timer-context-menu-wrapper { 4670 opacity: 1; 4671 pointer-events: auto; 4672 } 4673 4674 .progress-circle-wrapper { 4675 /* Colours for the main timer */ 4676 --timer-red: var(--color-red-50); 4677 --timer-orange: var(--color-orange-30); 4678 /* Colours for the break timer */ 4679 --timer-blue: var(--color-blue-20); 4680 --timer-violet: var(--color-violet-20); 4681 /* Complete timer */ 4682 --timer-green: var(--color-green-20); 4683 min-height: 138px; 4684 position: relative; 4685 width: 138px; 4686 overflow: hidden; 4687 margin-block-end: var(--space-small); 4688 /* main timer colours */ 4689 /* break timer colours */ 4690 /* timer turns green when complete */ 4691 } 4692 .progress-circle-wrapper.is-small { 4693 min-height: 114px; 4694 width: 114px; 4695 } 4696 .progress-circle-wrapper.is-small .progress-circle-label { 4697 font-size: var(--font-size-xxlarge); 4698 } 4699 .progress-circle-wrapper .progress-circle-background, 4700 .progress-circle-wrapper .progress-circle-background-break, 4701 .progress-circle-wrapper .progress-circle, 4702 .progress-circle-wrapper .progress-circle-complete { 4703 --thickness: var(--space-small); 4704 border-radius: var(--border-radius-circle); 4705 inset: 0; 4706 mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black calc(100% - var(--thickness))); 4707 position: absolute; 4708 } 4709 .progress-circle-wrapper .progress-circle, 4710 .progress-circle-wrapper .progress-circle-complete { 4711 background-color: var(--border-color-interactive); 4712 } 4713 .progress-circle-wrapper .progress-circle-background { 4714 background: conic-gradient(var(--timer-orange) 0deg, var(--timer-red) 150deg, var(--timer-red) 210deg, var(--timer-orange) 360deg); 4715 } 4716 .progress-circle-wrapper .progress-circle-background-break { 4717 background: conic-gradient(var(--timer-violet) 0deg, var(--timer-blue) 150deg, var(--timer-blue) 210deg, var(--timer-violet) 360deg); 4718 } 4719 .progress-circle-wrapper .progress-circle-complete { 4720 background: var(--timer-green); 4721 opacity: 0; 4722 transition: opacity 1.5s ease-in-out; 4723 z-index: 2; 4724 } 4725 .progress-circle-wrapper .progress-circle-complete.visible { 4726 opacity: 1; 4727 } 4728 .progress-circle-wrapper .focus-hidden { 4729 opacity: 0; 4730 pointer-events: none; 4731 } 4732 .progress-circle-wrapper .focus-visible { 4733 opacity: 1; 4734 } 4735 .progress-circle-wrapper .break-hidden { 4736 opacity: 0; 4737 pointer-events: none; 4738 } 4739 .progress-circle-wrapper .break-visible { 4740 opacity: 1; 4741 } 4742 .progress-circle-wrapper .progress-circle-label { 4743 align-items: center; 4744 color: var(--text-color); 4745 display: flex; 4746 font-size: calc(var(--font-size-large) * 2); 4747 font-weight: var(--font-weight-semibold); 4748 font-variant-numeric: tabular-nums; 4749 height: 100%; 4750 inset-block-start: 0; 4751 inset-inline-start: 0; 4752 justify-content: center; 4753 position: absolute; 4754 width: 100%; 4755 z-index: 2; 4756 } 4757 4758 .timer-set-minutes:focus, 4759 .timer-set-seconds:focus { 4760 outline: var(--focus-outline); 4761 } 4762 4763 .focus-timer-controls { 4764 display: flex; 4765 flex-direction: row; 4766 align-items: center; 4767 gap: var(--space-medium); 4768 } 4769 4770 .timer-notification-status { 4771 color: var(--text-color-deemphasized); 4772 font-size: var(--font-size-small); 4773 margin-block-start: var(--space-small); 4774 } 4775 4776 .weather-forecast-widget { 4777 background: var(--newtab-background-card); 4778 transition: opacity 0.2s ease; 4779 grid-column: span 1; 4780 width: var(--newtab-card-grid-layout-width); 4781 border-radius: var(--border-radius-large); 4782 padding: var(--space-medium); 4783 height: var(--newtab-card-height); 4784 display: flex; 4785 flex-direction: column; 4786 box-shadow: var(--box-shadow-card); 4787 --weather-sunny-background-color: light-dark(var(--color-yellow-0), var(--color-yellow-90)); 4788 --weather-cloudy-background-color: light-dark(var(--color-gray-20), var(--color-gray-80)); 4789 --weather-rainy-background-color: light-dark(var(--color-blue-0), var(--color-blue-90)); 4790 --weather-snowy-background-color: light-dark(var(--color-violet-0), var(--color-violet-90)); 4791 --weather-hot-background-color: light-dark(var(--color-orange-0), var(--color-orange-90)); 4792 } 4793 .weather-forecast-widget:hover { 4794 background: var(--newtab-background-color-secondary); 4795 } 4796 .has-sections-grid .weather-forecast-widget { 4797 width: var(--newtab-card-width-medium); 4798 } 4799 .weather-forecast-widget .city-wrapper { 4800 display: flex; 4801 align-items: center; 4802 } 4803 .weather-forecast-widget .city-wrapper h3 { 4804 margin-block: 0; 4805 font-weight: var(--font-weight-semibold); 4806 } 4807 .weather-forecast-widget .current-weather-wrapper { 4808 display: flex; 4809 align-items: center; 4810 margin-block: var(--space-small); 4811 padding: var(--space-medium); 4812 border-radius: var(--border-radius-medium); 4813 width: 100%; 4814 } 4815 .weather-forecast-widget .current-weather-wrapper:has(.iconId1, .iconId2, .iconId3, .iconId4, .iconId5, .iconId6, .iconId33) { 4816 background-color: var(--weather-sunny-background-color); 4817 } 4818 .weather-forecast-widget .current-weather-wrapper:has(.iconId7, .iconId8, .iconI11, .iconId32, .iconId34, .iconId35, .iconId36, .iconId37, .iconId38) { 4819 background-color: var(--weather-cloudy-background-color); 4820 } 4821 .weather-forecast-widget .current-weather-wrapper:has(.iconId12, .iconId13, .iconId14, .iconId15, .iconId16, .iconId17, .iconId18, .iconId39, .iconId40, .iconId41, .iconId42) { 4822 background-color: var(--weather-rainy-background-color); 4823 } 4824 .weather-forecast-widget .current-weather-wrapper:has(.iconId19, .iconId20, .iconId21, .iconId22, .iconId23, .iconId24, .iconId25, .iconId26, .iconId29, .iconId31, .iconId43, .iconId44) { 4825 background-color: var(--weather-snowy-background-color); 4826 } 4827 .weather-forecast-widget .current-weather-wrapper:has(.iconId30) { 4828 background-color: var(--weather-hot-background-color); 4829 } 4830 .weather-forecast-widget .weather-icon-column { 4831 width: var(--size-item-large); 4832 height: var(--size-item-large); 4833 display: flex; 4834 align-items: center; 4835 justify-content: center; 4836 align-self: center; 4837 } 4838 .weather-forecast-widget .weather-icon { 4839 width: var(--size-item-large); 4840 height: auto; 4841 vertical-align: middle; 4842 } 4843 @media (prefers-contrast) { 4844 .weather-forecast-widget .weather-icon { 4845 -moz-context-properties: fill, stroke; 4846 fill: currentColor; 4847 stroke: currentColor; 4848 } 4849 } 4850 .weather-forecast-widget .weather-icon.iconId1 { 4851 content: url("chrome://browser/skin/weather/sunny.svg"); 4852 } 4853 .weather-forecast-widget .weather-icon.iconId2 { 4854 content: url("chrome://browser/skin/weather/mostly-sunny.svg"); 4855 } 4856 .weather-forecast-widget .weather-icon:is(.iconId3, .iconId4, .iconId6) { 4857 content: url("chrome://browser/skin/weather/partly-sunny.svg"); 4858 } 4859 .weather-forecast-widget .weather-icon.iconId5 { 4860 content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); 4861 } 4862 .weather-forecast-widget .weather-icon:is(.iconId7, .iconId8) { 4863 content: url("chrome://browser/skin/weather/cloudy.svg"); 4864 } 4865 .weather-forecast-widget .weather-icon.iconId11 { 4866 content: url("chrome://browser/skin/weather/fog.svg"); 4867 } 4868 .weather-forecast-widget .weather-icon.iconId12 { 4869 content: url("chrome://browser/skin/weather/showers.svg"); 4870 } 4871 .weather-forecast-widget .weather-icon:is(.iconId13, .iconId14) { 4872 content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); 4873 } 4874 .weather-forecast-widget .weather-icon.iconId15 { 4875 content: url("chrome://browser/skin/weather/thunderstorms.svg"); 4876 } 4877 .weather-forecast-widget .weather-icon:is(.iconId16, .iconId17) { 4878 content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); 4879 } 4880 .weather-forecast-widget .weather-icon.iconId18 { 4881 content: url("chrome://browser/skin/weather/rain.svg"); 4882 } 4883 .weather-forecast-widget .weather-icon:is(.iconId19, .iconId20, .iconId25) { 4884 content: url("chrome://browser/skin/weather/flurries.svg"); 4885 } 4886 .weather-forecast-widget .weather-icon.iconId21 { 4887 content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); 4888 } 4889 .weather-forecast-widget .weather-icon:is(.iconId22, .iconId23) { 4890 content: url("chrome://browser/skin/weather/snow.svg"); 4891 } 4892 .weather-forecast-widget .weather-icon:is(.iconId24, .iconId31) { 4893 content: url("chrome://browser/skin/weather/ice.svg"); 4894 } 4895 .weather-forecast-widget .weather-icon:is(.iconId26, .iconId29) { 4896 content: url("chrome://browser/skin/weather/freezing-rain.svg"); 4897 } 4898 .weather-forecast-widget .weather-icon.iconId30 { 4899 content: url("chrome://browser/skin/weather/hot.svg"); 4900 } 4901 .weather-forecast-widget .weather-icon.iconId32 { 4902 content: url("chrome://browser/skin/weather/windy.svg"); 4903 } 4904 .weather-forecast-widget .weather-icon.iconId33 { 4905 content: url("chrome://browser/skin/weather/night-clear.svg"); 4906 } 4907 .weather-forecast-widget .weather-icon:is(.iconId34, .iconId35, .iconId36, .iconId38) { 4908 content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); 4909 } 4910 .weather-forecast-widget .weather-icon.iconId37 { 4911 content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); 4912 } 4913 .weather-forecast-widget .weather-icon:is(.iconId39, .iconId40) { 4914 content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); 4915 height: var(--size-item-large); 4916 } 4917 .weather-forecast-widget .weather-icon:is(.iconId41, .iconId42) { 4918 content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); 4919 } 4920 .weather-forecast-widget .weather-icon:is(.iconId43, .iconId44) { 4921 content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg"); 4922 } 4923 4924 .weather-info-column { 4925 display: flex; 4926 flex-direction: column; 4927 margin-inline: var(--space-medium); 4928 } 4929 .weather-info-column .temperature-unit { 4930 text-transform: uppercase; 4931 font-weight: var(--font-weight-semibold); 4932 } 4933 .weather-info-column .temperature-description { 4934 font-size: var(--font-size-small); 4935 color: var(--text-color-deemphasized); 4936 } 4937 4938 .high-low-column { 4939 display: flex; 4940 align-items: flex-end; 4941 align-self: flex-start; 4942 margin-inline-start: auto; 4943 color: var(--text-color-deemphasized); 4944 } 4945 .high-low-column .high-temperature { 4946 margin-inline-end: var(--space-small); 4947 } 4948 .high-low-column .arrow-icon { 4949 display: inline-block; 4950 width: var(--size-item-xsmall); 4951 height: var(--size-item-xsmall); 4952 background-size: contain; 4953 background-repeat: no-repeat; 4954 background-position: center; 4955 -moz-context-properties: fill, fill-opacity; 4956 fill: currentColor; 4957 } 4958 .high-low-column .arrow-icon.arrow-up { 4959 background-image: url("chrome://global/skin/icons/shaft-arrow-up.svg"); 4960 } 4961 .high-low-column .arrow-icon.arrow-down { 4962 background-image: url("chrome://global/skin/icons/shaft-arrow-down.svg"); 4963 } 4964 4965 hr { 4966 border: 0; 4967 border-block-start: 1px solid var(--border-color); 4968 width: 100%; 4969 } 4970 4971 .forecast-row .today-forecast { 4972 margin-block-start: 0; 4973 font-weight: var(--font-weight-semibold); 4974 } 4975 .forecast-row .forecast-row-items { 4976 list-style: none; 4977 display: flex; 4978 justify-content: center; 4979 padding: 0; 4980 margin-block-start: var(--space-small); 4981 } 4982 .forecast-row .forecast-row-items li { 4983 background: var(--newtab-background-color); 4984 border-radius: var(--border-radius-small); 4985 display: flex; 4986 flex-direction: column; 4987 align-items: center; 4988 margin-inline: var(--space-xsmall); 4989 padding-inline: var(--space-small); 4990 padding-block: var(--space-xsmall); 4991 font-size: var(--font-size-small); 4992 } 4993 4994 .weather-forecast-footer { 4995 display: flex; 4996 align-items: center; 4997 justify-content: space-between; 4998 margin-block-start: auto; 4999 } 5000 .weather-forecast-footer a { 5001 font-size: var(--font-size-small); 5002 } 5003 .weather-forecast-footer span { 5004 font-size: var(--font-size-xsmall); 5005 } 5006 5007 .ds-card-grid .ds-card { 5008 background: var(--newtab-background-color-secondary); 5009 border-radius: var(--border-radius-small); 5010 } 5011 .ds-card-grid .ds-card:not(.placeholder) { 5012 border-radius: var(--border-radius-medium); 5013 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 5014 } 5015 .ds-card-grid .ds-card:not(.placeholder) img, 5016 .ds-card-grid .ds-card:not(.placeholder) .placeholder-image { 5017 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 5018 } 5019 5020 .ds-card.refined-cards:not(.placeholder) .img-wrapper .img { 5021 height: 160px; 5022 width: 100%; 5023 } 5024 5025 .ds-card-grid { 5026 display: grid; 5027 grid-gap: var(--space-xlarge); 5028 position: relative; 5029 } 5030 .ds-card-grid.ds-card-grid-compact { 5031 grid-gap: var(--space-large); 5032 } 5033 .ds-card-grid.ad-sizing-variant-a, .ds-card-grid.ad-sizing-variant-b { 5034 row-gap: var(--space-xlarge); 5035 column-gap: var(--space-large); 5036 } 5037 .ds-card-grid .ds-card-link:focus { 5038 border: 0; 5039 outline: var(--focus-outline); 5040 transition: none; 5041 border-radius: var(--border-radius-medium); 5042 } 5043 .ds-column-5 .ds-card-grid, .ds-column-6 .ds-card-grid, .ds-column-7 .ds-card-grid, .ds-column-8 .ds-card-grid { 5044 grid-template-columns: repeat(2, 1fr); 5045 } 5046 .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { 5047 grid-template-columns: repeat(1, 1fr); 5048 } 5049 @media (min-width: 610px) { 5050 .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { 5051 grid-template-columns: repeat(2, 1fr); 5052 } 5053 } 5054 @media (min-width: 866px) { 5055 .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { 5056 grid-template-columns: repeat(3, 1fr); 5057 } 5058 } 5059 .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 { 5060 font-size: var(--font-size-large); 5061 } 5062 .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 { 5063 font-size: 15; 5064 -webkit-line-clamp: 3; 5065 line-height: 24; 5066 } 5067 .ds-card-grid.empty { 5068 grid-template-columns: auto; 5069 } 5070 .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 { 5071 grid-template-columns: repeat(1, 1fr); 5072 } 5073 @media (min-width: 610px) { 5074 .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 { 5075 grid-template-columns: repeat(2, 1fr); 5076 } 5077 } 5078 @media (min-width: 866px) { 5079 .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 { 5080 grid-template-columns: repeat(3, 1fr); 5081 } 5082 } 5083 @media (min-width: 1122px) { 5084 .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 { 5085 grid-template-columns: repeat(4, 1fr); 5086 } 5087 } 5088 .ds-card-grid.ds-card-grid-four-card-variant .ds-card.placeholder { 5089 min-height: 247px; 5090 } 5091 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-footer { 5092 margin-block-start: var(--space-small); 5093 } 5094 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source, 5095 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label, 5096 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label { 5097 color: var(--newtab-text-secondary-color); 5098 -webkit-line-clamp: 2; 5099 } 5100 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source, 5101 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label { 5102 font-size: var(--font-size-small); 5103 } 5104 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label { 5105 font-size: var(--font-size-small); 5106 } 5107 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-badge-icon { 5108 margin-inline-end: var(--space-xxsmall); 5109 margin-block-end: var(--space-xxsmall); 5110 height: 14px; 5111 width: 14px; 5112 background-size: 14px; 5113 } 5114 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .title { 5115 font-size: inherit; 5116 } 5117 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .info-wrap { 5118 flex-grow: 0; 5119 } 5120 .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 { 5121 grid-template-columns: repeat(1, 1fr); 5122 } 5123 @media (min-width: 610px) { 5124 .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 { 5125 grid-template-columns: repeat(2, 1fr); 5126 } 5127 } 5128 @media (min-width: 866px) { 5129 .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 { 5130 grid-template-columns: repeat(3, 1fr); 5131 } 5132 } 5133 @media (height <= 1065px) { 5134 .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 { 5135 display: none; 5136 } 5137 } 5138 @media (max-width: 1122px) { 5139 .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 { 5140 min-height: 247px; 5141 } 5142 .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 { 5143 margin-block-start: var(--space-small); 5144 } 5145 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 5146 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 5147 .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, 5148 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 5149 .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, 5150 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 5151 .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, 5152 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 5153 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { 5154 color: var(--newtab-text-secondary-color); 5155 -webkit-line-clamp: 2; 5156 } 5157 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 5158 .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, 5159 .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, 5160 .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, 5161 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label { 5162 font-size: var(--font-size-small); 5163 } 5164 .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 { 5165 font-size: var(--font-size-small); 5166 } 5167 .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 { 5168 margin-inline-end: var(--space-xxsmall); 5169 margin-block-end: var(--space-xxsmall); 5170 height: 14px; 5171 width: 14px; 5172 background-size: 14px; 5173 } 5174 .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 { 5175 font-size: inherit; 5176 } 5177 .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 { 5178 flex-grow: 0; 5179 } 5180 } 5181 @media (min-width: 1122px) and (height <= 964px) { 5182 .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 { 5183 grid-template-columns: repeat(4, 1fr); 5184 } 5185 .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 { 5186 min-height: 247px; 5187 } 5188 .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 { 5189 margin-block-start: var(--space-small); 5190 } 5191 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 5192 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 5193 .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, 5194 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 5195 .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, 5196 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 5197 .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, 5198 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, 5199 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { 5200 color: var(--newtab-text-secondary-color); 5201 -webkit-line-clamp: 2; 5202 } 5203 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, 5204 .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, 5205 .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, 5206 .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, 5207 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label { 5208 font-size: var(--font-size-small); 5209 } 5210 .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 { 5211 font-size: var(--font-size-small); 5212 } 5213 .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 { 5214 margin-inline-end: var(--space-xxsmall); 5215 margin-block-end: var(--space-xxsmall); 5216 height: 14px; 5217 width: 14px; 5218 background-size: 14px; 5219 } 5220 .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 { 5221 font-size: inherit; 5222 } 5223 .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 { 5224 flex-grow: 0; 5225 } 5226 } 5227 5228 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder), 5229 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) { 5230 box-shadow: none; 5231 background: none; 5232 } 5233 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus, 5234 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus { 5235 box-shadow: none; 5236 } 5237 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img, 5238 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img { 5239 border: 0; 5240 outline: var(--focus-outline); 5241 } 5242 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .img-wrapper .img img, 5243 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .img-wrapper .img img { 5244 border-radius: var(--border-radius-medium); 5245 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 5246 } 5247 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .meta, 5248 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .meta { 5249 padding: var(--space-medium) 0 0; 5250 } 5251 5252 .ds-layout .ds-sub-header { 5253 margin-block-start: var(--space-xlarge); 5254 } 5255 .ds-layout .ds-sub-header .section-title-container { 5256 flex-direction: row; 5257 align-items: baseline; 5258 justify-content: space-between; 5259 display: flex; 5260 } 5261 .ds-layout .ds-sub-header .section-sub-link { 5262 color: var(--newtab-primary-action-background); 5263 font-size: inherit; 5264 cursor: pointer; 5265 } 5266 .ds-layout .ds-sub-header .section-sub-link:hover { 5267 text-decoration: underline; 5268 } 5269 .ds-layout .ds-sub-header .section-sub-link:active { 5270 color: var(--newtab-primary-element-active-color); 5271 } 5272 5273 .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites { 5274 position: relative; 5275 } 5276 .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .top-sites-list-wrapper { 5277 margin-inline: auto; 5278 width: 100%; 5279 } 5280 .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow { 5281 display: none; 5282 } 5283 @media (min-width: 866px) { 5284 .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow { 5285 display: none; 5286 } 5287 } 5288 @media (min-width: 1122px) { 5289 .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow { 5290 display: inline-block; 5291 } 5292 } 5293 5294 .has-sections-grid .ds-outer-wrapper-breakpoint-override main { 5295 width: auto; 5296 } 5297 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .ds-card { 5298 width: 100%; 5299 height: 100%; 5300 } 5301 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { 5302 width: 346px; 5303 margin: 0 auto; 5304 } 5305 @media (min-width: 610px) { 5306 .has-sections-grid .ds-outer-wrapper-breakpoint-override main { 5307 width: auto; 5308 } 5309 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { 5310 width: 346px; 5311 } 5312 } 5313 @media (min-width: 724px) { 5314 .has-sections-grid .ds-outer-wrapper-breakpoint-override main { 5315 width: auto; 5316 } 5317 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { 5318 width: 659px; 5319 } 5320 } 5321 @media (min-width: 1122px) { 5322 .has-sections-grid .ds-outer-wrapper-breakpoint-override main { 5323 width: auto; 5324 } 5325 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { 5326 width: 989px; 5327 } 5328 } 5329 @media (min-width: 1390px) { 5330 .has-sections-grid .ds-outer-wrapper-breakpoint-override main { 5331 width: auto; 5332 } 5333 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { 5334 display: flex; 5335 flex-direction: column; 5336 width: 1311px; 5337 } 5338 .has-sections-grid .ds-outer-wrapper-breakpoint-override main .ds-highlights .card-outer { 5339 min-width: 216px; 5340 } 5341 } 5342 5343 .ds-section-wrapper { 5344 padding-inline: 0; 5345 position: relative; 5346 } 5347 .ds-section-wrapper .ds-section { 5348 padding-block-end: var(--space-medium); 5349 } 5350 .ds-section-wrapper .ds-section:last-child { 5351 padding-block-end: 0; 5352 } 5353 .ds-section-wrapper .ds-section .section-heading { 5354 display: flex; 5355 justify-content: space-between; 5356 align-items: center; 5357 margin-block: var(--space-small) var(--space-medium); 5358 } 5359 .ds-section-wrapper .ds-section .section-heading .section-heading-inline-start { 5360 display: flex; 5361 flex-direction: row; 5362 align-items: flex-start; 5363 } 5364 .ds-section-wrapper .ds-section .section-title { 5365 font-weight: var(--heading-font-weight); 5366 font-size: var(--font-size-xlarge); 5367 color: var(--newtab-contextual-text-primary-color); 5368 margin-block: 0; 5369 } 5370 .lightWallpaper .ds-section-wrapper .ds-section .section-title { 5371 color-scheme: light; 5372 } 5373 .darkWallpaper .ds-section-wrapper .ds-section .section-title { 5374 color-scheme: dark; 5375 } 5376 @media (min-width: 724px) { 5377 .ds-section-wrapper .ds-section .section-title { 5378 font-size: var(--font-size-xxlarge); 5379 } 5380 } 5381 .ds-section-wrapper .ds-section .section-subtitle { 5382 color: var(--newtab-contextual-text-primary-color); 5383 margin-block: var(--space-xsmall) 0; 5384 font-size: var(--font-size-root); 5385 } 5386 .lightWallpaper .ds-section-wrapper .ds-section .section-subtitle { 5387 color-scheme: light; 5388 } 5389 .darkWallpaper .ds-section-wrapper .ds-section .section-subtitle { 5390 color-scheme: dark; 5391 } 5392 .ds-section-wrapper .section-context-wrapper { 5393 display: flex; 5394 justify-content: space-between; 5395 align-items: center; 5396 column-gap: var(--space-small); 5397 } 5398 .lightWallpaper .ds-section-wrapper .section-context-wrapper { 5399 color-scheme: light; 5400 } 5401 .darkWallpaper .ds-section-wrapper .section-context-wrapper { 5402 color-scheme: dark; 5403 } 5404 .ds-section-wrapper .section-follow { 5405 position: relative; 5406 } 5407 .ds-section-wrapper .section-follow .section-button-following-text { 5408 display: none; 5409 } 5410 .ds-section-wrapper .section-follow .section-button-unfollow-text { 5411 display: none; 5412 } 5413 .ds-section-wrapper .section-follow.following .section-button-follow-text { 5414 display: none; 5415 } 5416 .ds-section-wrapper .section-follow.following .section-button-following-text { 5417 display: block; 5418 } 5419 .ds-section-wrapper .section-follow.following:hover .section-button-following-text { 5420 display: none; 5421 } 5422 .ds-section-wrapper .section-follow.following:hover .section-button-unfollow-text { 5423 display: block; 5424 } 5425 5426 .ds-section-grid.ds-card-grid { 5427 grid-gap: var(--space-large); 5428 grid-template-columns: repeat(1, 300px); 5429 } 5430 .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-3, .ds-section-grid.ds-card-grid .ds-image.image-4 { 5431 display: none; 5432 } 5433 .ds-section-grid.ds-card-grid .ds-image.image-1 { 5434 display: block; 5435 } 5436 @media (min-width: 610px) { 5437 .ds-section-grid.ds-card-grid .col-1-position-0 { 5438 order: 0; 5439 } 5440 .ds-section-grid.ds-card-grid .col-1-position-1 { 5441 order: 1; 5442 } 5443 .ds-section-grid.ds-card-grid .col-1-position-2 { 5444 order: 2; 5445 } 5446 .ds-section-grid.ds-card-grid .col-1-position-3 { 5447 order: 3; 5448 } 5449 .ds-section-grid.ds-card-grid .col-1-position-4 { 5450 order: 4; 5451 } 5452 .ds-section-grid.ds-card-grid .col-1-position-5 { 5453 order: 5; 5454 } 5455 .ds-section-grid.ds-card-grid .col-1-position-6 { 5456 order: 6; 5457 } 5458 .ds-section-grid.ds-card-grid .col-1-position-7 { 5459 order: 7; 5460 } 5461 .ds-section-grid.ds-card-grid .col-1-position-8 { 5462 order: 8; 5463 } 5464 .ds-section-grid.ds-card-grid .col-1-position-9 { 5465 order: 9; 5466 } 5467 .ds-section-grid.ds-card-grid .col-1-position-10 { 5468 order: 10; 5469 } 5470 .ds-section-grid.ds-card-grid .col-1-position-11 { 5471 order: 11; 5472 } 5473 .ds-section-grid.ds-card-grid .col-1-position-12 { 5474 order: 12; 5475 } 5476 .ds-section-grid.ds-card-grid .col-1-position-13 { 5477 order: 13; 5478 } 5479 .ds-section-grid.ds-card-grid .col-1-position-14 { 5480 order: 14; 5481 } 5482 .ds-section-grid.ds-card-grid .col-1-position-15 { 5483 order: 15; 5484 } 5485 .ds-section-grid.ds-card-grid .col-1-position-16 { 5486 order: 16; 5487 } 5488 .ds-section-grid.ds-card-grid .col-1-small { 5489 grid-row: span 1; 5490 grid-column: span 1; 5491 padding: var(--space-large); 5492 } 5493 .ds-section-grid.ds-card-grid .col-1-small.refined-cards.ds-card.sections-card-ui { 5494 box-shadow: var(--box-shadow-card); 5495 } 5496 .ds-section-grid.ds-card-grid .col-1-small.refined-cards.ds-card.sections-card-ui:hover { 5497 box-shadow: var(--box-shadow-card-hover); 5498 } 5499 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .ds-card-link { 5500 padding: var(--space-small); 5501 flex-grow: 0; 5502 } 5503 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .img-wrapper { 5504 width: 110px; 5505 height: 117px; 5506 } 5507 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta { 5508 padding: 0; 5509 min-height: 117px; 5510 } 5511 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .info-wrap { 5512 flex-grow: 1; 5513 } 5514 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .sections-card-footer { 5515 max-width: 114px; 5516 min-height: unset; 5517 position: initial; 5518 margin-block-start: auto; 5519 } 5520 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .sections-card-footer .source { 5521 word-break: normal; 5522 width: 114px; 5523 } 5524 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .card-stp-button-hover-background { 5525 background: transparent; 5526 } 5527 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .card-stp-button-position-wrapper { 5528 inset-inline-end: var(--space-small); 5529 inset-block-end: var(--space-small); 5530 } 5531 .ds-section-grid.ds-card-grid .col-1-small.refined-cards .context-menu-position-container .context-menu-button { 5532 height: 32px; 5533 width: 32px; 5534 } 5535 .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui { 5536 padding: unset; 5537 } 5538 .ds-section-grid.ds-card-grid .col-1-small .ds-card-link { 5539 display: flex; 5540 flex-direction: row; 5541 position: relative; 5542 align-items: center; 5543 gap: var(--space-medium); 5544 padding: var(--space-large); 5545 } 5546 .ds-section-grid.ds-card-grid .col-1-small .img-wrapper { 5547 width: 100px; 5548 flex-shrink: 0; 5549 flex-grow: 0; 5550 aspect-ratio: 5/6; 5551 } 5552 .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img { 5553 width: 100%; 5554 height: 100%; 5555 padding-block-start: 0; 5556 min-width: 100%; 5557 } 5558 .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img img { 5559 width: 100%; 5560 height: 100%; 5561 border-radius: var(--border-radius-medium) var(--border-radius-medium); 5562 object-fit: cover; 5563 } 5564 .ds-section-grid.ds-card-grid .col-1-small:not(.placeholder) .img-wrapper > .ds-image.img > img { 5565 width: 100%; 5566 border-radius: var(--border-radius-medium) var(--border-radius-medium); 5567 } 5568 .ds-section-grid.ds-card-grid .col-1-small .meta { 5569 padding: 0; 5570 align-self: flex-start; 5571 min-height: 125px; 5572 } 5573 .ds-section-grid.ds-card-grid .col-1-small .meta .info-wrap .title { 5574 font-size: var(--font-size-small); 5575 margin-block: 0; 5576 -webkit-line-clamp: 4; 5577 } 5578 .ds-section-grid.ds-card-grid .col-1-small .meta .sections-card-footer { 5579 margin-block-start: var(--space-xxsmall); 5580 } 5581 .ds-section-grid.ds-card-grid .col-1-small .card-stp-button-hover-background { 5582 padding-block-start: unset; 5583 } 5584 .ds-section-grid.ds-card-grid .col-1-small .card-stp-button-position-wrapper { 5585 inset-inline-end: var(--space-small); 5586 } 5587 .ds-section-grid.ds-card-grid .col-1-medium { 5588 grid-row: span 2; 5589 grid-column: span 1; 5590 flex-direction: column; 5591 padding: 0; 5592 align-items: initial; 5593 gap: initial; 5594 } 5595 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.ds-card.sections-card-ui { 5596 height: unset; 5597 box-shadow: var(--box-shadow-card); 5598 } 5599 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.ds-card.sections-card-ui:hover { 5600 box-shadow: var(--box-shadow-card-hover); 5601 } 5602 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .ds-card-link { 5603 padding: unset; 5604 flex-grow: 1; 5605 } 5606 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .img-wrapper { 5607 width: 100%; 5608 height: 160px; 5609 } 5610 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.ds-spoc-rectangle .img-wrapper { 5611 height: 250px; 5612 } 5613 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta { 5614 padding: var(--space-large) var(--space-large) var(--space-small); 5615 min-height: unset; 5616 } 5617 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta .info-wrap { 5618 flex-grow: initial; 5619 } 5620 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta .sections-card-footer { 5621 max-width: 225px; 5622 inset-inline-end: initial; 5623 inset-block-end: initial; 5624 min-height: 28px; 5625 } 5626 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta .sections-card-footer .source-wrapper { 5627 max-width: 245px; 5628 } 5629 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta .sections-card-footer .source { 5630 width: 217px; 5631 } 5632 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .sections-card-footer { 5633 display: none; 5634 } 5635 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .story-footer { 5636 margin-block: auto 0; 5637 } 5638 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .context-menu-position-container .context-menu-button { 5639 height: 32px; 5640 width: 32px; 5641 } 5642 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .card-stp-button-position-wrapper { 5643 inset-inline-end: var(--space-large); 5644 inset-block-end: var(--space-small); 5645 } 5646 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .card-stp-button-hover-background { 5647 background: transparent; 5648 } 5649 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.active .meta .source-wrapper { 5650 max-width: 175px; 5651 } 5652 .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium.refined-cards.active .meta .source-wrapper .source { 5653 display: block; 5654 width: unset; 5655 } 5656 .ds-section-grid.ds-card-grid .col-1-medium .card-stp-button-position-wrapper { 5657 inset-inline-end: var(--space-small); 5658 } 5659 .ds-section-grid.ds-card-grid .col-1-medium .card-stp-button-hover-background { 5660 background: transparent; 5661 } 5662 .ds-section-grid.ds-card-grid .col-1-medium .ds-card-link { 5663 display: flex; 5664 flex-direction: column; 5665 gap: 0; 5666 padding: 0; 5667 } 5668 .ds-section-grid.ds-card-grid .col-1-medium .img-wrapper { 5669 width: 100%; 5670 position: relative; 5671 flex-grow: 0; 5672 flex-shrink: 0; 5673 aspect-ratio: initial; 5674 } 5675 .ds-section-grid.ds-card-grid .col-1-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { 5676 border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; 5677 } 5678 .ds-section-grid.ds-card-grid .col-1-medium .meta { 5679 padding: var(--space-medium) var(--space-large); 5680 } 5681 .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap { 5682 flex-grow: initial; 5683 } 5684 .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap .title { 5685 -webkit-line-clamp: 3; 5686 margin-block: 0 var(--space-small); 5687 font-size: var(--font-size-root); 5688 } 5689 .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap .excerpt { 5690 display: block; 5691 -webkit-line-clamp: 3; 5692 } 5693 .ds-section-grid.ds-card-grid .col-1-medium .meta .sections-card-footer { 5694 margin-block-start: auto; 5695 } 5696 .ds-section-grid.ds-card-grid .col-1-large { 5697 grid-row: span 2; 5698 grid-column: span 2; 5699 } 5700 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui { 5701 box-shadow: var(--box-shadow-card); 5702 } 5703 } 5704 @media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) { 5705 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .ds-card-link { 5706 gap: var(--space-large); 5707 padding: var(--space-large); 5708 } 5709 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta { 5710 padding: 0; 5711 color: var(--newtab-text-primary-color); 5712 } 5713 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt { 5714 color: var(--text-color-deemphasized); 5715 } 5716 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer { 5717 max-width: 334px; 5718 } 5719 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper { 5720 max-width: 245px; 5721 } 5722 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper { 5723 inset-inline-end: var(--space-large); 5724 inset-block-end: var(--space-large); 5725 } 5726 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source { 5727 display: block; 5728 } 5729 } 5730 @media (min-width: 610px) { 5731 .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:hover { 5732 box-shadow: var(--box-shadow-card-hover); 5733 } 5734 } 5735 @media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) { 5736 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui { 5737 align-content: flex-start; 5738 justify-content: center; 5739 } 5740 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-card-link { 5741 flex-direction: row; 5742 gap: var(--space-xlarge); 5743 padding: var(--space-xxlarge); 5744 flex-grow: 0; 5745 } 5746 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .img-wrapper { 5747 width: 190px; 5748 height: 250px; 5749 } 5750 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img { 5751 aspect-ratio: 1/1; 5752 width: 100%; 5753 height: 100%; 5754 } 5755 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img img { 5756 border-radius: var(--border-radius-medium); 5757 } 5758 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta { 5759 padding: 0; 5760 min-height: 220px; 5761 } 5762 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .title { 5763 -webkit-line-clamp: 3; 5764 font-size: var(--font-size-large); 5765 font-weight: var(--heading-font-weight); 5766 margin-block: 0 var(--space-small); 5767 } 5768 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .excerpt { 5769 -webkit-line-clamp: 4; 5770 font-size: var(--font-size-root); 5771 } 5772 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .sections-card-footer { 5773 margin-block-start: auto; 5774 } 5775 .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .card-stp-button-hover-background { 5776 background: transparent; 5777 inset-inline-start: 0; 5778 } 5779 } 5780 @media (min-width: 610px) { 5781 .ds-section-grid.ds-card-grid .col-1-show-excerpt .meta .info-wrap .excerpt { 5782 display: block; 5783 } 5784 } 5785 @media (min-width: 610px) { 5786 .ds-section-grid.ds-card-grid .col-1-hide-excerpt .meta .info-wrap .excerpt { 5787 display: none; 5788 } 5789 } 5790 @media (min-width: 724px) { 5791 .ds-section-grid.ds-card-grid { 5792 grid-template-columns: repeat(2, 300px); 5793 } 5794 .ds-section-grid.ds-card-grid .col-2-position-0 { 5795 order: 0; 5796 } 5797 .ds-section-grid.ds-card-grid .col-2-position-1 { 5798 order: 1; 5799 } 5800 .ds-section-grid.ds-card-grid .col-2-position-2 { 5801 order: 2; 5802 } 5803 .ds-section-grid.ds-card-grid .col-2-position-3 { 5804 order: 3; 5805 } 5806 .ds-section-grid.ds-card-grid .col-2-position-4 { 5807 order: 4; 5808 } 5809 .ds-section-grid.ds-card-grid .col-2-position-5 { 5810 order: 5; 5811 } 5812 .ds-section-grid.ds-card-grid .col-2-position-6 { 5813 order: 6; 5814 } 5815 .ds-section-grid.ds-card-grid .col-2-position-7 { 5816 order: 7; 5817 } 5818 .ds-section-grid.ds-card-grid .col-2-position-8 { 5819 order: 8; 5820 } 5821 .ds-section-grid.ds-card-grid .col-2-position-9 { 5822 order: 9; 5823 } 5824 .ds-section-grid.ds-card-grid .col-2-position-10 { 5825 order: 10; 5826 } 5827 .ds-section-grid.ds-card-grid .col-2-position-11 { 5828 order: 11; 5829 } 5830 .ds-section-grid.ds-card-grid .col-2-position-12 { 5831 order: 12; 5832 } 5833 .ds-section-grid.ds-card-grid .col-2-position-13 { 5834 order: 13; 5835 } 5836 .ds-section-grid.ds-card-grid .col-2-position-14 { 5837 order: 14; 5838 } 5839 .ds-section-grid.ds-card-grid .col-2-position-15 { 5840 order: 15; 5841 } 5842 .ds-section-grid.ds-card-grid .col-2-position-16 { 5843 order: 16; 5844 } 5845 .ds-section-grid.ds-card-grid .col-2-small { 5846 grid-row: span 1; 5847 grid-column: span 1; 5848 padding: var(--space-large); 5849 } 5850 .ds-section-grid.ds-card-grid .col-2-small.refined-cards.ds-card.sections-card-ui { 5851 box-shadow: var(--box-shadow-card); 5852 } 5853 .ds-section-grid.ds-card-grid .col-2-small.refined-cards.ds-card.sections-card-ui:hover { 5854 box-shadow: var(--box-shadow-card-hover); 5855 } 5856 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .ds-card-link { 5857 padding: var(--space-small); 5858 flex-grow: 0; 5859 } 5860 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .img-wrapper { 5861 width: 110px; 5862 height: 117px; 5863 } 5864 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta { 5865 padding: 0; 5866 min-height: 117px; 5867 } 5868 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .info-wrap { 5869 flex-grow: 1; 5870 } 5871 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .sections-card-footer { 5872 max-width: 114px; 5873 min-height: unset; 5874 position: initial; 5875 margin-block-start: auto; 5876 } 5877 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .sections-card-footer .source { 5878 word-break: normal; 5879 width: 114px; 5880 } 5881 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .card-stp-button-hover-background { 5882 background: transparent; 5883 } 5884 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .card-stp-button-position-wrapper { 5885 inset-inline-end: var(--space-small); 5886 inset-block-end: var(--space-small); 5887 } 5888 .ds-section-grid.ds-card-grid .col-2-small.refined-cards .context-menu-position-container .context-menu-button { 5889 height: 32px; 5890 width: 32px; 5891 } 5892 .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui { 5893 padding: unset; 5894 } 5895 .ds-section-grid.ds-card-grid .col-2-small .ds-card-link { 5896 display: flex; 5897 flex-direction: row; 5898 position: relative; 5899 align-items: center; 5900 gap: var(--space-medium); 5901 padding: var(--space-large); 5902 } 5903 .ds-section-grid.ds-card-grid .col-2-small .img-wrapper { 5904 width: 100px; 5905 flex-shrink: 0; 5906 flex-grow: 0; 5907 aspect-ratio: 5/6; 5908 } 5909 .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img { 5910 width: 100%; 5911 height: 100%; 5912 padding-block-start: 0; 5913 min-width: 100%; 5914 } 5915 .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img img { 5916 width: 100%; 5917 height: 100%; 5918 border-radius: var(--border-radius-medium) var(--border-radius-medium); 5919 object-fit: cover; 5920 } 5921 .ds-section-grid.ds-card-grid .col-2-small:not(.placeholder) .img-wrapper > .ds-image.img > img { 5922 width: 100%; 5923 border-radius: var(--border-radius-medium) var(--border-radius-medium); 5924 } 5925 .ds-section-grid.ds-card-grid .col-2-small .meta { 5926 padding: 0; 5927 align-self: flex-start; 5928 min-height: 125px; 5929 } 5930 .ds-section-grid.ds-card-grid .col-2-small .meta .info-wrap .title { 5931 font-size: var(--font-size-small); 5932 margin-block: 0; 5933 -webkit-line-clamp: 4; 5934 } 5935 .ds-section-grid.ds-card-grid .col-2-small .meta .sections-card-footer { 5936 margin-block-start: var(--space-xxsmall); 5937 } 5938 .ds-section-grid.ds-card-grid .col-2-small .card-stp-button-hover-background { 5939 padding-block-start: unset; 5940 } 5941 .ds-section-grid.ds-card-grid .col-2-small .card-stp-button-position-wrapper { 5942 inset-inline-end: var(--space-small); 5943 } 5944 .ds-section-grid.ds-card-grid .col-2-medium { 5945 grid-row: span 2; 5946 grid-column: span 1; 5947 flex-direction: column; 5948 padding: 0; 5949 align-items: initial; 5950 gap: initial; 5951 } 5952 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.ds-card.sections-card-ui { 5953 height: unset; 5954 box-shadow: var(--box-shadow-card); 5955 } 5956 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.ds-card.sections-card-ui:hover { 5957 box-shadow: var(--box-shadow-card-hover); 5958 } 5959 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .ds-card-link { 5960 padding: unset; 5961 flex-grow: 1; 5962 } 5963 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .img-wrapper { 5964 width: 100%; 5965 height: 160px; 5966 } 5967 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.ds-spoc-rectangle .img-wrapper { 5968 height: 250px; 5969 } 5970 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta { 5971 padding: var(--space-large) var(--space-large) var(--space-small); 5972 min-height: unset; 5973 } 5974 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta .info-wrap { 5975 flex-grow: initial; 5976 } 5977 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta .sections-card-footer { 5978 max-width: 225px; 5979 inset-inline-end: initial; 5980 inset-block-end: initial; 5981 min-height: 28px; 5982 } 5983 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta .sections-card-footer .source-wrapper { 5984 max-width: 245px; 5985 } 5986 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta .sections-card-footer .source { 5987 width: 217px; 5988 } 5989 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .sections-card-footer { 5990 display: none; 5991 } 5992 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .story-footer { 5993 margin-block: auto 0; 5994 } 5995 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .context-menu-position-container .context-menu-button { 5996 height: 32px; 5997 width: 32px; 5998 } 5999 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .card-stp-button-position-wrapper { 6000 inset-inline-end: var(--space-large); 6001 inset-block-end: var(--space-small); 6002 } 6003 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .card-stp-button-hover-background { 6004 background: transparent; 6005 } 6006 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.active .meta .source-wrapper { 6007 max-width: 175px; 6008 } 6009 .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium.refined-cards.active .meta .source-wrapper .source { 6010 display: block; 6011 width: unset; 6012 } 6013 .ds-section-grid.ds-card-grid .col-2-medium .card-stp-button-position-wrapper { 6014 inset-inline-end: var(--space-small); 6015 } 6016 .ds-section-grid.ds-card-grid .col-2-medium .card-stp-button-hover-background { 6017 background: transparent; 6018 } 6019 .ds-section-grid.ds-card-grid .col-2-medium .ds-card-link { 6020 display: flex; 6021 flex-direction: column; 6022 gap: 0; 6023 padding: 0; 6024 } 6025 .ds-section-grid.ds-card-grid .col-2-medium .img-wrapper { 6026 width: 100%; 6027 position: relative; 6028 flex-grow: 0; 6029 flex-shrink: 0; 6030 aspect-ratio: initial; 6031 } 6032 .ds-section-grid.ds-card-grid .col-2-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { 6033 border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; 6034 } 6035 .ds-section-grid.ds-card-grid .col-2-medium .meta { 6036 padding: var(--space-medium) var(--space-large); 6037 } 6038 .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap { 6039 flex-grow: initial; 6040 } 6041 .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap .title { 6042 -webkit-line-clamp: 3; 6043 margin-block: 0 var(--space-small); 6044 font-size: var(--font-size-root); 6045 } 6046 .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap .excerpt { 6047 display: block; 6048 -webkit-line-clamp: 3; 6049 } 6050 .ds-section-grid.ds-card-grid .col-2-medium .meta .sections-card-footer { 6051 margin-block-start: auto; 6052 } 6053 .ds-section-grid.ds-card-grid .col-2-large { 6054 grid-row: span 2; 6055 grid-column: span 2; 6056 } 6057 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui { 6058 box-shadow: var(--box-shadow-card); 6059 } 6060 } 6061 @media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) { 6062 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .ds-card-link { 6063 gap: var(--space-large); 6064 padding: var(--space-large); 6065 } 6066 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta { 6067 padding: 0; 6068 color: var(--newtab-text-primary-color); 6069 } 6070 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt { 6071 color: var(--text-color-deemphasized); 6072 } 6073 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer { 6074 max-width: 334px; 6075 } 6076 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper { 6077 max-width: 245px; 6078 } 6079 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper { 6080 inset-inline-end: var(--space-large); 6081 inset-block-end: var(--space-large); 6082 } 6083 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source { 6084 display: block; 6085 } 6086 } 6087 @media (min-width: 724px) { 6088 .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:hover { 6089 box-shadow: var(--box-shadow-card-hover); 6090 } 6091 } 6092 @media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) { 6093 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui { 6094 align-content: flex-start; 6095 justify-content: center; 6096 } 6097 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link { 6098 flex-direction: row; 6099 gap: var(--space-xlarge); 6100 padding: var(--space-xxlarge); 6101 flex-grow: 0; 6102 } 6103 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .img-wrapper { 6104 width: 190px; 6105 height: 250px; 6106 } 6107 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img { 6108 aspect-ratio: 1/1; 6109 width: 100%; 6110 height: 100%; 6111 } 6112 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img img { 6113 border-radius: var(--border-radius-medium); 6114 } 6115 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta { 6116 padding: 0; 6117 min-height: 220px; 6118 } 6119 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .title { 6120 -webkit-line-clamp: 3; 6121 font-size: var(--font-size-large); 6122 font-weight: var(--heading-font-weight); 6123 margin-block: 0 var(--space-small); 6124 } 6125 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .excerpt { 6126 -webkit-line-clamp: 4; 6127 font-size: var(--font-size-root); 6128 } 6129 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .sections-card-footer { 6130 margin-block-start: auto; 6131 } 6132 .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .card-stp-button-hover-background { 6133 background: transparent; 6134 inset-inline-start: 0; 6135 } 6136 } 6137 @media (min-width: 724px) { 6138 .ds-section-grid.ds-card-grid .col-2-show-excerpt .meta .info-wrap .excerpt { 6139 display: block; 6140 } 6141 } 6142 @media (min-width: 724px) { 6143 .ds-section-grid.ds-card-grid .col-2-hide-excerpt .meta .info-wrap .excerpt { 6144 display: none; 6145 } 6146 } 6147 @media (min-width: 724px) { 6148 .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-3, .ds-section-grid.ds-card-grid .ds-image.image-4 { 6149 display: none; 6150 } 6151 .ds-section-grid.ds-card-grid .ds-image.image-2 { 6152 display: block; 6153 } 6154 } 6155 @media (min-width: 1122px) { 6156 .ds-section-grid.ds-card-grid { 6157 grid-template-columns: repeat(3, 300px); 6158 gap: var(--space-large); 6159 } 6160 .ds-section-grid.ds-card-grid .col-3-position-0 { 6161 order: 0; 6162 } 6163 .ds-section-grid.ds-card-grid .col-3-position-1 { 6164 order: 1; 6165 } 6166 .ds-section-grid.ds-card-grid .col-3-position-2 { 6167 order: 2; 6168 } 6169 .ds-section-grid.ds-card-grid .col-3-position-3 { 6170 order: 3; 6171 } 6172 .ds-section-grid.ds-card-grid .col-3-position-4 { 6173 order: 4; 6174 } 6175 .ds-section-grid.ds-card-grid .col-3-position-5 { 6176 order: 5; 6177 } 6178 .ds-section-grid.ds-card-grid .col-3-position-6 { 6179 order: 6; 6180 } 6181 .ds-section-grid.ds-card-grid .col-3-position-7 { 6182 order: 7; 6183 } 6184 .ds-section-grid.ds-card-grid .col-3-position-8 { 6185 order: 8; 6186 } 6187 .ds-section-grid.ds-card-grid .col-3-position-9 { 6188 order: 9; 6189 } 6190 .ds-section-grid.ds-card-grid .col-3-position-10 { 6191 order: 10; 6192 } 6193 .ds-section-grid.ds-card-grid .col-3-position-11 { 6194 order: 11; 6195 } 6196 .ds-section-grid.ds-card-grid .col-3-position-12 { 6197 order: 12; 6198 } 6199 .ds-section-grid.ds-card-grid .col-3-position-13 { 6200 order: 13; 6201 } 6202 .ds-section-grid.ds-card-grid .col-3-position-14 { 6203 order: 14; 6204 } 6205 .ds-section-grid.ds-card-grid .col-3-position-15 { 6206 order: 15; 6207 } 6208 .ds-section-grid.ds-card-grid .col-3-position-16 { 6209 order: 16; 6210 } 6211 .ds-section-grid.ds-card-grid .col-3-small { 6212 grid-row: span 1; 6213 grid-column: span 1; 6214 padding: var(--space-large); 6215 } 6216 .ds-section-grid.ds-card-grid .col-3-small.refined-cards.ds-card.sections-card-ui { 6217 box-shadow: var(--box-shadow-card); 6218 } 6219 .ds-section-grid.ds-card-grid .col-3-small.refined-cards.ds-card.sections-card-ui:hover { 6220 box-shadow: var(--box-shadow-card-hover); 6221 } 6222 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .ds-card-link { 6223 padding: var(--space-small); 6224 flex-grow: 0; 6225 } 6226 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .img-wrapper { 6227 width: 110px; 6228 height: 117px; 6229 } 6230 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta { 6231 padding: 0; 6232 min-height: 117px; 6233 } 6234 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .info-wrap { 6235 flex-grow: 1; 6236 } 6237 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .sections-card-footer { 6238 max-width: 114px; 6239 min-height: unset; 6240 position: initial; 6241 margin-block-start: auto; 6242 } 6243 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .sections-card-footer .source { 6244 word-break: normal; 6245 width: 114px; 6246 } 6247 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .card-stp-button-hover-background { 6248 background: transparent; 6249 } 6250 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .card-stp-button-position-wrapper { 6251 inset-inline-end: var(--space-small); 6252 inset-block-end: var(--space-small); 6253 } 6254 .ds-section-grid.ds-card-grid .col-3-small.refined-cards .context-menu-position-container .context-menu-button { 6255 height: 32px; 6256 width: 32px; 6257 } 6258 .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui { 6259 padding: unset; 6260 } 6261 .ds-section-grid.ds-card-grid .col-3-small .ds-card-link { 6262 display: flex; 6263 flex-direction: row; 6264 position: relative; 6265 align-items: center; 6266 gap: var(--space-medium); 6267 padding: var(--space-large); 6268 } 6269 .ds-section-grid.ds-card-grid .col-3-small .img-wrapper { 6270 width: 100px; 6271 flex-shrink: 0; 6272 flex-grow: 0; 6273 aspect-ratio: 5/6; 6274 } 6275 .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img { 6276 width: 100%; 6277 height: 100%; 6278 padding-block-start: 0; 6279 min-width: 100%; 6280 } 6281 .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img img { 6282 width: 100%; 6283 height: 100%; 6284 border-radius: var(--border-radius-medium) var(--border-radius-medium); 6285 object-fit: cover; 6286 } 6287 .ds-section-grid.ds-card-grid .col-3-small:not(.placeholder) .img-wrapper > .ds-image.img > img { 6288 width: 100%; 6289 border-radius: var(--border-radius-medium) var(--border-radius-medium); 6290 } 6291 .ds-section-grid.ds-card-grid .col-3-small .meta { 6292 padding: 0; 6293 align-self: flex-start; 6294 min-height: 125px; 6295 } 6296 .ds-section-grid.ds-card-grid .col-3-small .meta .info-wrap .title { 6297 font-size: var(--font-size-small); 6298 margin-block: 0; 6299 -webkit-line-clamp: 4; 6300 } 6301 .ds-section-grid.ds-card-grid .col-3-small .meta .sections-card-footer { 6302 margin-block-start: var(--space-xxsmall); 6303 } 6304 .ds-section-grid.ds-card-grid .col-3-small .card-stp-button-hover-background { 6305 padding-block-start: unset; 6306 } 6307 .ds-section-grid.ds-card-grid .col-3-small .card-stp-button-position-wrapper { 6308 inset-inline-end: var(--space-small); 6309 } 6310 .ds-section-grid.ds-card-grid .col-3-medium { 6311 grid-row: span 2; 6312 grid-column: span 1; 6313 flex-direction: column; 6314 padding: 0; 6315 align-items: initial; 6316 gap: initial; 6317 } 6318 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.ds-card.sections-card-ui { 6319 height: unset; 6320 box-shadow: var(--box-shadow-card); 6321 } 6322 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.ds-card.sections-card-ui:hover { 6323 box-shadow: var(--box-shadow-card-hover); 6324 } 6325 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .ds-card-link { 6326 padding: unset; 6327 flex-grow: 1; 6328 } 6329 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .img-wrapper { 6330 width: 100%; 6331 height: 160px; 6332 } 6333 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.ds-spoc-rectangle .img-wrapper { 6334 height: 250px; 6335 } 6336 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta { 6337 padding: var(--space-large) var(--space-large) var(--space-small); 6338 min-height: unset; 6339 } 6340 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta .info-wrap { 6341 flex-grow: initial; 6342 } 6343 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta .sections-card-footer { 6344 max-width: 225px; 6345 inset-inline-end: initial; 6346 inset-block-end: initial; 6347 min-height: 28px; 6348 } 6349 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta .sections-card-footer .source-wrapper { 6350 max-width: 245px; 6351 } 6352 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta .sections-card-footer .source { 6353 width: 217px; 6354 } 6355 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .sections-card-footer { 6356 display: none; 6357 } 6358 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .story-footer { 6359 margin-block: auto 0; 6360 } 6361 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .context-menu-position-container .context-menu-button { 6362 height: 32px; 6363 width: 32px; 6364 } 6365 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .card-stp-button-position-wrapper { 6366 inset-inline-end: var(--space-large); 6367 inset-block-end: var(--space-small); 6368 } 6369 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .card-stp-button-hover-background { 6370 background: transparent; 6371 } 6372 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.active .meta .source-wrapper { 6373 max-width: 175px; 6374 } 6375 .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium.refined-cards.active .meta .source-wrapper .source { 6376 display: block; 6377 width: unset; 6378 } 6379 .ds-section-grid.ds-card-grid .col-3-medium .card-stp-button-position-wrapper { 6380 inset-inline-end: var(--space-small); 6381 } 6382 .ds-section-grid.ds-card-grid .col-3-medium .card-stp-button-hover-background { 6383 background: transparent; 6384 } 6385 .ds-section-grid.ds-card-grid .col-3-medium .ds-card-link { 6386 display: flex; 6387 flex-direction: column; 6388 gap: 0; 6389 padding: 0; 6390 } 6391 .ds-section-grid.ds-card-grid .col-3-medium .img-wrapper { 6392 width: 100%; 6393 position: relative; 6394 flex-grow: 0; 6395 flex-shrink: 0; 6396 aspect-ratio: initial; 6397 } 6398 .ds-section-grid.ds-card-grid .col-3-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { 6399 border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; 6400 } 6401 .ds-section-grid.ds-card-grid .col-3-medium .meta { 6402 padding: var(--space-medium) var(--space-large); 6403 } 6404 .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap { 6405 flex-grow: initial; 6406 } 6407 .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap .title { 6408 -webkit-line-clamp: 3; 6409 margin-block: 0 var(--space-small); 6410 font-size: var(--font-size-root); 6411 } 6412 .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap .excerpt { 6413 display: block; 6414 -webkit-line-clamp: 3; 6415 } 6416 .ds-section-grid.ds-card-grid .col-3-medium .meta .sections-card-footer { 6417 margin-block-start: auto; 6418 } 6419 .ds-section-grid.ds-card-grid .col-3-large { 6420 grid-row: span 2; 6421 grid-column: span 2; 6422 } 6423 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui { 6424 box-shadow: var(--box-shadow-card); 6425 } 6426 } 6427 @media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) { 6428 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .ds-card-link { 6429 gap: var(--space-large); 6430 padding: var(--space-large); 6431 } 6432 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta { 6433 padding: 0; 6434 color: var(--newtab-text-primary-color); 6435 } 6436 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt { 6437 color: var(--text-color-deemphasized); 6438 } 6439 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer { 6440 max-width: 334px; 6441 } 6442 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper { 6443 max-width: 245px; 6444 } 6445 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper { 6446 inset-inline-end: var(--space-large); 6447 inset-block-end: var(--space-large); 6448 } 6449 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source { 6450 display: block; 6451 } 6452 } 6453 @media (min-width: 1122px) { 6454 .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:hover { 6455 box-shadow: var(--box-shadow-card-hover); 6456 } 6457 } 6458 @media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) { 6459 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui { 6460 align-content: flex-start; 6461 justify-content: center; 6462 } 6463 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link { 6464 flex-direction: row; 6465 gap: var(--space-xlarge); 6466 padding: var(--space-xxlarge); 6467 flex-grow: 0; 6468 } 6469 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .img-wrapper { 6470 width: 190px; 6471 height: 250px; 6472 } 6473 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img { 6474 aspect-ratio: 1/1; 6475 width: 100%; 6476 height: 100%; 6477 } 6478 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img img { 6479 border-radius: var(--border-radius-medium); 6480 } 6481 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta { 6482 padding: 0; 6483 min-height: 220px; 6484 } 6485 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .title { 6486 -webkit-line-clamp: 3; 6487 font-size: var(--font-size-large); 6488 font-weight: var(--heading-font-weight); 6489 margin-block: 0 var(--space-small); 6490 } 6491 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .excerpt { 6492 -webkit-line-clamp: 4; 6493 font-size: var(--font-size-root); 6494 } 6495 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .sections-card-footer { 6496 margin-block-start: auto; 6497 } 6498 .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .card-stp-button-hover-background { 6499 background: transparent; 6500 inset-inline-start: 0; 6501 } 6502 } 6503 @media (min-width: 1122px) { 6504 .ds-section-grid.ds-card-grid .col-3-show-excerpt .meta .info-wrap .excerpt { 6505 display: block; 6506 } 6507 } 6508 @media (min-width: 1122px) { 6509 .ds-section-grid.ds-card-grid .col-3-hide-excerpt .meta .info-wrap .excerpt { 6510 display: none; 6511 } 6512 } 6513 @media (min-width: 1122px) { 6514 .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-4 { 6515 display: none; 6516 } 6517 .ds-section-grid.ds-card-grid .ds-image.image-3 { 6518 display: block; 6519 } 6520 } 6521 @media (min-width: 1390px) { 6522 .ds-section-grid.ds-card-grid { 6523 grid-template-columns: repeat(4, 300px); 6524 } 6525 .ds-section-grid.ds-card-grid .col-4-position-0 { 6526 order: 0; 6527 } 6528 .ds-section-grid.ds-card-grid .col-4-position-1 { 6529 order: 1; 6530 } 6531 .ds-section-grid.ds-card-grid .col-4-position-2 { 6532 order: 2; 6533 } 6534 .ds-section-grid.ds-card-grid .col-4-position-3 { 6535 order: 3; 6536 } 6537 .ds-section-grid.ds-card-grid .col-4-position-4 { 6538 order: 4; 6539 } 6540 .ds-section-grid.ds-card-grid .col-4-position-5 { 6541 order: 5; 6542 } 6543 .ds-section-grid.ds-card-grid .col-4-position-6 { 6544 order: 6; 6545 } 6546 .ds-section-grid.ds-card-grid .col-4-position-7 { 6547 order: 7; 6548 } 6549 .ds-section-grid.ds-card-grid .col-4-position-8 { 6550 order: 8; 6551 } 6552 .ds-section-grid.ds-card-grid .col-4-position-9 { 6553 order: 9; 6554 } 6555 .ds-section-grid.ds-card-grid .col-4-position-10 { 6556 order: 10; 6557 } 6558 .ds-section-grid.ds-card-grid .col-4-position-11 { 6559 order: 11; 6560 } 6561 .ds-section-grid.ds-card-grid .col-4-position-12 { 6562 order: 12; 6563 } 6564 .ds-section-grid.ds-card-grid .col-4-position-13 { 6565 order: 13; 6566 } 6567 .ds-section-grid.ds-card-grid .col-4-position-14 { 6568 order: 14; 6569 } 6570 .ds-section-grid.ds-card-grid .col-4-position-15 { 6571 order: 15; 6572 } 6573 .ds-section-grid.ds-card-grid .col-4-position-16 { 6574 order: 16; 6575 } 6576 .ds-section-grid.ds-card-grid .col-4-small { 6577 grid-row: span 1; 6578 grid-column: span 1; 6579 padding: var(--space-large); 6580 } 6581 .ds-section-grid.ds-card-grid .col-4-small.refined-cards.ds-card.sections-card-ui { 6582 box-shadow: var(--box-shadow-card); 6583 } 6584 .ds-section-grid.ds-card-grid .col-4-small.refined-cards.ds-card.sections-card-ui:hover { 6585 box-shadow: var(--box-shadow-card-hover); 6586 } 6587 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .ds-card-link { 6588 padding: var(--space-small); 6589 flex-grow: 0; 6590 } 6591 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .img-wrapper { 6592 width: 110px; 6593 height: 117px; 6594 } 6595 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta { 6596 padding: 0; 6597 min-height: 117px; 6598 } 6599 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .info-wrap { 6600 flex-grow: 1; 6601 } 6602 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .sections-card-footer { 6603 max-width: 114px; 6604 min-height: unset; 6605 position: initial; 6606 margin-block-start: auto; 6607 } 6608 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .sections-card-footer .source { 6609 word-break: normal; 6610 width: 114px; 6611 } 6612 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .card-stp-button-hover-background { 6613 background: transparent; 6614 } 6615 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .card-stp-button-position-wrapper { 6616 inset-inline-end: var(--space-small); 6617 inset-block-end: var(--space-small); 6618 } 6619 .ds-section-grid.ds-card-grid .col-4-small.refined-cards .context-menu-position-container .context-menu-button { 6620 height: 32px; 6621 width: 32px; 6622 } 6623 .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui { 6624 padding: unset; 6625 } 6626 .ds-section-grid.ds-card-grid .col-4-small .ds-card-link { 6627 display: flex; 6628 flex-direction: row; 6629 position: relative; 6630 align-items: center; 6631 gap: var(--space-medium); 6632 padding: var(--space-large); 6633 } 6634 .ds-section-grid.ds-card-grid .col-4-small .img-wrapper { 6635 width: 100px; 6636 flex-shrink: 0; 6637 flex-grow: 0; 6638 aspect-ratio: 5/6; 6639 } 6640 .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img { 6641 width: 100%; 6642 height: 100%; 6643 padding-block-start: 0; 6644 min-width: 100%; 6645 } 6646 .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img img { 6647 width: 100%; 6648 height: 100%; 6649 border-radius: var(--border-radius-medium) var(--border-radius-medium); 6650 object-fit: cover; 6651 } 6652 .ds-section-grid.ds-card-grid .col-4-small:not(.placeholder) .img-wrapper > .ds-image.img > img { 6653 width: 100%; 6654 border-radius: var(--border-radius-medium) var(--border-radius-medium); 6655 } 6656 .ds-section-grid.ds-card-grid .col-4-small .meta { 6657 padding: 0; 6658 align-self: flex-start; 6659 min-height: 125px; 6660 } 6661 .ds-section-grid.ds-card-grid .col-4-small .meta .info-wrap .title { 6662 font-size: var(--font-size-small); 6663 margin-block: 0; 6664 -webkit-line-clamp: 4; 6665 } 6666 .ds-section-grid.ds-card-grid .col-4-small .meta .sections-card-footer { 6667 margin-block-start: var(--space-xxsmall); 6668 } 6669 .ds-section-grid.ds-card-grid .col-4-small .card-stp-button-hover-background { 6670 padding-block-start: unset; 6671 } 6672 .ds-section-grid.ds-card-grid .col-4-small .card-stp-button-position-wrapper { 6673 inset-inline-end: var(--space-small); 6674 } 6675 .ds-section-grid.ds-card-grid .col-4-medium { 6676 grid-row: span 2; 6677 grid-column: span 1; 6678 flex-direction: column; 6679 padding: 0; 6680 align-items: initial; 6681 gap: initial; 6682 } 6683 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.ds-card.sections-card-ui { 6684 height: unset; 6685 box-shadow: var(--box-shadow-card); 6686 } 6687 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.ds-card.sections-card-ui:hover { 6688 box-shadow: var(--box-shadow-card-hover); 6689 } 6690 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .ds-card-link { 6691 padding: unset; 6692 flex-grow: 1; 6693 } 6694 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .img-wrapper { 6695 width: 100%; 6696 height: 160px; 6697 } 6698 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.ds-spoc-rectangle .img-wrapper { 6699 height: 250px; 6700 } 6701 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta { 6702 padding: var(--space-large) var(--space-large) var(--space-small); 6703 min-height: unset; 6704 } 6705 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta .info-wrap { 6706 flex-grow: initial; 6707 } 6708 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta .sections-card-footer { 6709 max-width: 225px; 6710 inset-inline-end: initial; 6711 inset-block-end: initial; 6712 min-height: 28px; 6713 } 6714 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta .sections-card-footer .source-wrapper { 6715 max-width: 245px; 6716 } 6717 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta .sections-card-footer .source { 6718 width: 217px; 6719 } 6720 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .sections-card-footer { 6721 display: none; 6722 } 6723 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta:has(.story-footer .story-sponsored-label) .story-footer { 6724 margin-block: auto 0; 6725 } 6726 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .context-menu-position-container .context-menu-button { 6727 height: 32px; 6728 width: 32px; 6729 } 6730 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .card-stp-button-position-wrapper { 6731 inset-inline-end: var(--space-large); 6732 inset-block-end: var(--space-small); 6733 } 6734 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .card-stp-button-hover-background { 6735 background: transparent; 6736 } 6737 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.active .meta .source-wrapper { 6738 max-width: 175px; 6739 } 6740 .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium.refined-cards.active .meta .source-wrapper .source { 6741 display: block; 6742 width: unset; 6743 } 6744 .ds-section-grid.ds-card-grid .col-4-medium .card-stp-button-position-wrapper { 6745 inset-inline-end: var(--space-small); 6746 } 6747 .ds-section-grid.ds-card-grid .col-4-medium .card-stp-button-hover-background { 6748 background: transparent; 6749 } 6750 .ds-section-grid.ds-card-grid .col-4-medium .ds-card-link { 6751 display: flex; 6752 flex-direction: column; 6753 gap: 0; 6754 padding: 0; 6755 } 6756 .ds-section-grid.ds-card-grid .col-4-medium .img-wrapper { 6757 width: 100%; 6758 position: relative; 6759 flex-grow: 0; 6760 flex-shrink: 0; 6761 aspect-ratio: initial; 6762 } 6763 .ds-section-grid.ds-card-grid .col-4-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { 6764 border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; 6765 } 6766 .ds-section-grid.ds-card-grid .col-4-medium .meta { 6767 padding: var(--space-medium) var(--space-large); 6768 } 6769 .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap { 6770 flex-grow: initial; 6771 } 6772 .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap .title { 6773 -webkit-line-clamp: 3; 6774 margin-block: 0 var(--space-small); 6775 font-size: var(--font-size-root); 6776 } 6777 .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap .excerpt { 6778 display: block; 6779 -webkit-line-clamp: 3; 6780 } 6781 .ds-section-grid.ds-card-grid .col-4-medium .meta .sections-card-footer { 6782 margin-block-start: auto; 6783 } 6784 .ds-section-grid.ds-card-grid .col-4-large { 6785 grid-row: span 2; 6786 grid-column: span 2; 6787 } 6788 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui { 6789 box-shadow: var(--box-shadow-card); 6790 } 6791 } 6792 @media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) { 6793 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .ds-card-link { 6794 gap: var(--space-large); 6795 padding: var(--space-large); 6796 } 6797 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta { 6798 padding: 0; 6799 color: var(--newtab-text-primary-color); 6800 } 6801 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt { 6802 color: var(--text-color-deemphasized); 6803 } 6804 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer { 6805 max-width: 334px; 6806 } 6807 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper { 6808 max-width: 245px; 6809 } 6810 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper { 6811 inset-inline-end: var(--space-large); 6812 inset-block-end: var(--space-large); 6813 } 6814 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source { 6815 display: block; 6816 } 6817 } 6818 @media (min-width: 1390px) { 6819 .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:hover { 6820 box-shadow: var(--box-shadow-card-hover); 6821 } 6822 } 6823 @media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) { 6824 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui { 6825 align-content: flex-start; 6826 justify-content: center; 6827 } 6828 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link { 6829 flex-direction: row; 6830 gap: var(--space-xlarge); 6831 padding: var(--space-xxlarge); 6832 flex-grow: 0; 6833 } 6834 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .img-wrapper { 6835 width: 190px; 6836 height: 250px; 6837 } 6838 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img { 6839 aspect-ratio: 1/1; 6840 width: 100%; 6841 height: 100%; 6842 } 6843 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img img { 6844 border-radius: var(--border-radius-medium); 6845 } 6846 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta { 6847 padding: 0; 6848 min-height: 220px; 6849 } 6850 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .title { 6851 -webkit-line-clamp: 3; 6852 font-size: var(--font-size-large); 6853 font-weight: var(--heading-font-weight); 6854 margin-block: 0 var(--space-small); 6855 } 6856 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .excerpt { 6857 -webkit-line-clamp: 4; 6858 font-size: var(--font-size-root); 6859 } 6860 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .sections-card-footer { 6861 margin-block-start: auto; 6862 } 6863 .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .card-stp-button-hover-background { 6864 background: transparent; 6865 inset-inline-start: 0; 6866 } 6867 } 6868 @media (min-width: 1390px) { 6869 .ds-section-grid.ds-card-grid .col-4-show-excerpt .meta .info-wrap .excerpt { 6870 display: block; 6871 } 6872 } 6873 @media (min-width: 1390px) { 6874 .ds-section-grid.ds-card-grid .col-4-hide-excerpt .meta .info-wrap .excerpt { 6875 display: none; 6876 } 6877 } 6878 @media (min-width: 1390px) { 6879 .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-3 { 6880 display: none; 6881 } 6882 .ds-section-grid.ds-card-grid .ds-image.image-4 { 6883 display: block; 6884 } 6885 } 6886 6887 /* stylelint-disable max-nesting-depth */ 6888 .ds-highlights .section .section-list { 6889 grid-gap: var(--gridRowGap); 6890 grid-template-columns: repeat(1, 1fr); 6891 } 6892 @media (min-width: 610px) { 6893 .ds-highlights .section .section-list { 6894 grid-template-columns: repeat(2, 1fr); 6895 } 6896 } 6897 @media (min-width: 866px) { 6898 .ds-highlights .section .section-list { 6899 grid-template-columns: repeat(4, 1fr); 6900 } 6901 } 6902 .ds-highlights .section .section-list .card-outer { 6903 height: 175px; 6904 } 6905 .ds-highlights .section .section-list .card-outer .card-host-name { 6906 font-size: var(--font-size-small); 6907 line-height: 20px; 6908 padding-block-end: 0; 6909 margin-block-end: var(--space-xxsmall); 6910 text-transform: unset; 6911 } 6912 .ds-highlights .section .section-list .card-outer .card-title { 6913 font-size: var(--font-size-small); 6914 font-weight: var(--heading-font-weight); 6915 line-height: 20px; 6916 max-height: 20px; 6917 } 6918 .ds-highlights .section .section-list .card-outer a { 6919 text-decoration: none; 6920 } 6921 .ds-highlights .section .section-list .card-outer .context-menu-button { 6922 background-color: var(--newtab-button-static-background); 6923 } 6924 .ds-highlights .section .section-list .card-outer .context-menu-button:hover { 6925 background-color: var(--newtab-button-static-hover-background); 6926 } 6927 .ds-highlights .section .section-list .card-outer .context-menu-button:hover:active { 6928 background-color: var(--newtab-button-static-active-background); 6929 } 6930 .ds-highlights .section .section-list .card-outer .context-menu-button:focus-visible { 6931 background-color: var(--newtab-button-static-focus-background); 6932 } 6933 .ds-highlights .hide-for-narrow { 6934 display: block; 6935 } 6936 6937 .ds-hr { 6938 border: 0; 6939 border-block-start: 1px solid #D7D7DB; 6940 height: 0; 6941 } 6942 [lwt-newtab-brighttext] .ds-hr { 6943 border-block-start: 1px solid #4A4A4F; 6944 } 6945 6946 /* stylelint-disable max-nesting-depth */ 6947 .ds-navigation { 6948 color: var(--newtab-contextual-text-primary-color); 6949 font-size: var(--font-size-small); 6950 font-weight: var(--font-weight-semibold); 6951 padding: var(--space-xsmall) 0; 6952 } 6953 @media (min-width: 1122px) { 6954 .ds-navigation { 6955 line-height: 32px; 6956 } 6957 } 6958 .ds-navigation.ds-navigation-centered { 6959 text-align: center; 6960 } 6961 .ds-navigation.ds-navigation-right-aligned { 6962 text-align: end; 6963 } 6964 .lightWallpaper .ds-navigation { 6965 color-scheme: light; 6966 } 6967 .darkWallpaper .ds-navigation { 6968 color-scheme: dark; 6969 } 6970 .ds-navigation ul { 6971 display: inline; 6972 margin: 0; 6973 padding: 0; 6974 } 6975 .ds-navigation ul li { 6976 display: inline-block; 6977 } 6978 .ds-navigation ul li::after { 6979 content: "·"; 6980 padding: var(--space-xsmall); 6981 } 6982 .ds-navigation ul li:last-child::after { 6983 content: none; 6984 } 6985 .ds-navigation ul li a:hover, .ds-navigation ul li a:active { 6986 text-decoration: none; 6987 } 6988 .ds-navigation ul li a:active { 6989 color: var(--newtab-primary-element-active-color); 6990 } 6991 .ds-navigation .ds-navigation-header { 6992 padding-inline-end: var(--space-xsmall); 6993 } 6994 .ds-navigation .ds-navigation-privacy { 6995 padding-inline-start: var(--space-xsmall); 6996 float: inline-end; 6997 } 6998 .ds-navigation .ds-navigation-privacy:hover { 6999 text-decoration: none; 7000 } 7001 .ds-navigation.ds-navigation-new-topics { 7002 display: block; 7003 padding-block-start: var(--space-xxlarge); 7004 } 7005 .ds-navigation.ds-navigation-new-topics .ds-navigation-header { 7006 font-size: var(--font-size-small); 7007 font-weight: var(--heading-font-weight); 7008 display: inline-block; 7009 margin-block-end: var(--space-small); 7010 } 7011 .ds-navigation.ds-navigation-new-topics .ds-navigation-family { 7012 text-align: center; 7013 font-size: var(--font-size-small); 7014 margin: var(--space-large) auto var(--space-xlarge); 7015 } 7016 .ds-navigation.ds-navigation-new-topics .ds-navigation-family span { 7017 margin: 0 var(--space-small); 7018 } 7019 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo, 7020 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo { 7021 height: 20px; 7022 width: 20px; 7023 background-size: cover; 7024 } 7025 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo { 7026 background-image: url("chrome://newtab/content/data/content/assets/firefox.svg"); 7027 } 7028 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo { 7029 background-image: url("chrome://global/skin/icons/help.svg"); 7030 fill: #EF4056; 7031 } 7032 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message { 7033 display: block; 7034 } 7035 @media (min-width: 610px) { 7036 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message { 7037 display: inline; 7038 } 7039 } 7040 @media (min-width: 610px) { 7041 .ds-navigation.ds-navigation-new-topics .ds-navigation-family { 7042 margin-block-start: calc(var(--space-large) + var(--space-xlarge)); 7043 } 7044 } 7045 .ds-navigation.ds-navigation-new-topics ul { 7046 display: grid; 7047 grid-gap: 0 var(--space-xlarge); 7048 grid-auto-flow: column; 7049 grid-template: repeat(8, 1fr)/repeat(1, 1fr); 7050 } 7051 .ds-navigation.ds-navigation-new-topics ul li { 7052 border-block-start: 1px solid var(--border-color); 7053 line-height: 24px; 7054 font-size: var(--font-size-small); 7055 font-weight: var(--font-weight-semibold); 7056 } 7057 .ds-navigation.ds-navigation-new-topics ul li::after { 7058 content: ""; 7059 padding: 0; 7060 } 7061 .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) { 7062 display: none; 7063 } 7064 .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(1) { 7065 border-block-end: 1px solid var(--border-color); 7066 } 7067 @media (min-width: 610px) { 7068 .ds-navigation.ds-navigation-new-topics ul { 7069 grid-template: repeat(3, 1fr)/repeat(2, 1fr); 7070 } 7071 .ds-navigation.ds-navigation-new-topics ul li:nth-child(3) { 7072 border-block-end: 1px solid var(--border-color); 7073 } 7074 } 7075 @media (min-width: 866px) { 7076 .ds-navigation.ds-navigation-new-topics ul { 7077 grid-template: repeat(2, 1fr)/repeat(3, 1fr); 7078 } 7079 .ds-navigation.ds-navigation-new-topics ul li:nth-child(odd) { 7080 border-block-end: 0; 7081 } 7082 .ds-navigation.ds-navigation-new-topics ul li:nth-child(even) { 7083 border-block-end: 1px solid var(--border-color); 7084 } 7085 } 7086 @media (min-width: 1122px) { 7087 .ds-navigation.ds-navigation-new-topics ul { 7088 grid-template: repeat(2, 1fr)/repeat(4, 1fr); 7089 } 7090 .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) { 7091 display: block; 7092 } 7093 } 7094 7095 .ds-section-title { 7096 text-align: center; 7097 margin-block-start: var(--space-xlarge); 7098 } 7099 .ds-section-title .title { 7100 color: var(--newtab-text-primary-color); 7101 font-size: var(--font-size-xxlarge); 7102 font-weight: var(--font-weight); 7103 } 7104 .ds-section-title .subtitle { 7105 font-size: inherit; 7106 color: var(--newtab-text-secondary-color); 7107 margin-block-start: var(--space-xsmall); 7108 } 7109 7110 /* stylelint-disable max-nesting-depth */ 7111 .outer-wrapper .ds-top-sites .collapsible-section { 7112 margin-block-end: var(--space-large); 7113 } 7114 .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { 7115 border: 0; 7116 outline: var(--focus-outline); 7117 } 7118 .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .icon-pin-small { 7119 opacity: 1; 7120 } 7121 .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { 7122 box-shadow: 0 0 0 5px var(--newtab-background-color-secondary); 7123 transition: box-shadow 150ms; 7124 border-radius: var(--border-radius-small); 7125 outline: none; 7126 } 7127 .outer-wrapper .ds-top-sites .top-sites .top-sites-list { 7128 width: fit-content; 7129 margin: 0 auto; 7130 } 7131 7132 .ds-column-5 .ds-top-sites .top-site-outer, 7133 .ds-column-6 .ds-top-sites .top-site-outer, 7134 .ds-column-7 .ds-top-sites .top-site-outer, 7135 .ds-column-8 .ds-top-sites .top-site-outer { 7136 padding: 0 var(--space-small); 7137 } 7138 .ds-column-5 .ds-top-sites .top-sites-list, 7139 .ds-column-6 .ds-top-sites .top-sites-list, 7140 .ds-column-7 .ds-top-sites .top-sites-list, 7141 .ds-column-8 .ds-top-sites .top-sites-list { 7142 margin: 0 calc(var(--space-small) * -1); 7143 } 7144 .ds-column-5 .ds-top-sites .top-site-inner, 7145 .ds-column-6 .ds-top-sites .top-site-inner, 7146 .ds-column-7 .ds-top-sites .top-site-inner, 7147 .ds-column-8 .ds-top-sites .top-site-inner { 7148 --leftPanelIconWidth: 84.67px; 7149 } 7150 .ds-column-5 .ds-top-sites .top-site-inner .tile, 7151 .ds-column-6 .ds-top-sites .top-site-inner .tile, 7152 .ds-column-7 .ds-top-sites .top-site-inner .tile, 7153 .ds-column-8 .ds-top-sites .top-site-inner .tile { 7154 width: var(--leftPanelIconWidth); 7155 height: var(--leftPanelIconWidth); 7156 } 7157 .ds-column-5 .ds-top-sites .top-site-inner .title, 7158 .ds-column-6 .ds-top-sites .top-site-inner .title, 7159 .ds-column-7 .ds-top-sites .top-site-inner .title, 7160 .ds-column-8 .ds-top-sites .top-site-inner .title { 7161 width: var(--leftPanelIconWidth); 7162 } 7163 7164 .ds-column-1 .ds-top-sites .top-site-outer, 7165 .ds-column-2 .ds-top-sites .top-site-outer, 7166 .ds-column-3 .ds-top-sites .top-site-outer, 7167 .ds-column-4 .ds-top-sites .top-site-outer { 7168 padding: 0 var(--space-small); 7169 } 7170 .ds-column-1 .ds-top-sites .top-sites-list, 7171 .ds-column-2 .ds-top-sites .top-sites-list, 7172 .ds-column-3 .ds-top-sites .top-sites-list, 7173 .ds-column-4 .ds-top-sites .top-sites-list { 7174 margin: 0 calc(var(--space-small) * -1); 7175 } 7176 .ds-column-1 .ds-top-sites .top-site-inner, 7177 .ds-column-2 .ds-top-sites .top-site-inner, 7178 .ds-column-3 .ds-top-sites .top-site-inner, 7179 .ds-column-4 .ds-top-sites .top-site-inner { 7180 --rightPanelIconWidth: 82.67px; 7181 } 7182 .ds-column-1 .ds-top-sites .top-site-inner .tile, 7183 .ds-column-2 .ds-top-sites .top-site-inner .tile, 7184 .ds-column-3 .ds-top-sites .top-site-inner .tile, 7185 .ds-column-4 .ds-top-sites .top-site-inner .tile { 7186 width: var(--rightPanelIconWidth); 7187 height: var(--rightPanelIconWidth); 7188 } 7189 .ds-column-1 .ds-top-sites .top-site-inner .title, 7190 .ds-column-2 .ds-top-sites .top-site-inner .title, 7191 .ds-column-3 .ds-top-sites .top-site-inner .title, 7192 .ds-column-4 .ds-top-sites .top-site-inner .title { 7193 width: var(--rightPanelIconWidth); 7194 } 7195 7196 .ds-card .context-menu-button { 7197 background-clip: padding-box; 7198 background-color: var(--newtab-button-background); 7199 background-image: url("chrome://global/skin/icons/more.svg"); 7200 background-position: 50.1%; 7201 border: 0; 7202 outline: 1px solid var(--border-color); 7203 outline-width: 0; 7204 border-radius: var(--border-radius-circle); 7205 cursor: pointer; 7206 color: var(--button-text-color); 7207 fill: var(--newtab-button-text); 7208 height: 27px; 7209 inset-inline-end: calc(var(--space-medium) * -1); 7210 opacity: 0; 7211 position: absolute; 7212 inset-block-start: calc(var(--space-medium) * -1); 7213 transform: scale(0.25); 7214 transition-duration: 150ms; 7215 transition-property: transform, opacity; 7216 width: 27px; 7217 } 7218 .ds-card .context-menu-button:is(:active, :focus-visible, :hover) { 7219 opacity: 1; 7220 transform: scale(1); 7221 } 7222 .ds-card .context-menu-button:is(:hover) { 7223 background-color: var(--newtab-button-hover-background); 7224 } 7225 .ds-card .context-menu-button:is(:focus-visible) { 7226 outline-color: var(--newtab-button-focus-border); 7227 background-color: var(--newtab-button-focus-background); 7228 outline-width: 4px; 7229 } 7230 .ds-card .context-menu-button:is(:active) { 7231 background-color: var(--newtab-button-active-background); 7232 } 7233 .ds-card .context-menu { 7234 opacity: 0; 7235 } 7236 .ds-card.active .context-menu { 7237 opacity: 1; 7238 } 7239 .ds-card.last-item .context-menu { 7240 margin-inline-end: var(--space-xsmall); 7241 margin-inline-start: auto; 7242 inset-inline-end: 0; 7243 inset-inline-start: auto; 7244 } 7245 .ds-card.last-item .context-menu { 7246 opacity: 1; 7247 } 7248 .ds-card:is(:hover, :focus, .active) { 7249 outline: none; 7250 } 7251 .ds-card:is(:hover, :focus, .active) .context-menu-button { 7252 opacity: 1; 7253 transform: scale(1); 7254 transition-delay: 333ms; 7255 } 7256 7257 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 7258 /* stylelint-disable-next-line stylelint-plugin-mozilla/no-non-semantic-token-usage */ 7259 .ds-card { 7260 display: flex; 7261 flex-direction: column; 7262 position: relative; 7263 z-index: auto; 7264 } 7265 .ds-card.placeholder { 7266 display: flex; 7267 flex-direction: column; 7268 gap: var(--space-small); 7269 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 7270 border-radius: var(--border-radius-medium); 7271 position: relative; 7272 overflow: hidden; 7273 } 7274 .ds-card.placeholder .placeholder-fill { 7275 background: var(--newtab-button-active-background); 7276 border-radius: var(--border-radius-small); 7277 } 7278 .ds-card.placeholder .placeholder-image { 7279 width: 100%; 7280 height: 140px; 7281 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 7282 } 7283 .ds-card.placeholder .placeholder-label { 7284 width: 40%; 7285 height: var(--size-item-small); 7286 margin-block-end: var(--space-small); 7287 margin-inline: var(--space-large); 7288 } 7289 .ds-card.placeholder .placeholder-header { 7290 width: 80%; 7291 height: 20px; 7292 margin-inline: var(--space-large); 7293 } 7294 .ds-card.placeholder .placeholder-description { 7295 height: 60px; 7296 margin-inline: var(--space-large); 7297 margin-block-end: var(--space-large); 7298 } 7299 .ds-card.placeholder.refined-cards .placeholder-image { 7300 height: 150px; 7301 } 7302 .ds-card.placeholder.refined-cards .placeholder-description { 7303 margin-block-end: var(--space-small); 7304 } 7305 .ds-card.placeholder.refined-cards .placeholder-header { 7306 width: initial; 7307 margin-block-end: var(--space-large); 7308 } 7309 .ds-card.placeholder-seen::before { 7310 content: ""; 7311 display: block; 7312 position: absolute; 7313 inset-block-start: 0; 7314 inset-inline-start: -100%; 7315 height: 100%; 7316 width: 100%; 7317 background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%); 7318 z-index: 2; 7319 } 7320 @media (prefers-reduced-motion: no-preference) { 7321 .ds-card.placeholder-seen::before { 7322 animation: loading 1.5s infinite; 7323 } 7324 } 7325 @keyframes loading { 7326 0% { 7327 inset-inline-start: -100%; 7328 } 7329 50%, 100% { 7330 inset-inline-start: 100%; 7331 } 7332 } 7333 .ds-card .img-wrapper { 7334 width: 100%; 7335 position: relative; 7336 } 7337 .ds-card .card-stp-button-hover-background { 7338 opacity: 0; 7339 width: 100%; 7340 position: absolute; 7341 inset-block-start: 0; 7342 transition: opacity; 7343 transition-duration: 0s; 7344 padding-block-start: 50%; 7345 pointer-events: none; 7346 background: rgba(0, 0, 0, 0.4); 7347 border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; 7348 } 7349 .ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper { 7350 position: absolute; 7351 inset-inline-end: var(--space-small); 7352 inset-block-start: var(--space-small); 7353 display: flex; 7354 justify-content: end; 7355 align-items: center; 7356 } 7357 .ds-card .card-stp-button-hover-background .context-menu-position-container { 7358 position: relative; 7359 } 7360 .ds-card .card-stp-button-hover-background .context-menu { 7361 margin-inline-start: var(--space-large); 7362 inset-inline-start: auto; 7363 position: absolute; 7364 inset-block-start: calc(var(--space-xsmall) + var(--space-large)); 7365 } 7366 .ds-card .card-stp-button-hover-background button, 7367 .ds-card .card-stp-button-hover-background .context-menu { 7368 pointer-events: auto; 7369 } 7370 .ds-card .card-stp-button-hover-background button { 7371 cursor: pointer; 7372 } 7373 .ds-card .context-menu-button { 7374 position: static; 7375 transition: none; 7376 border-radius: var(--border-radius-small); 7377 background-color: var(--newtab-button-static-background); 7378 } 7379 .ds-card .context-menu-button:hover { 7380 background-color: var(--newtab-button-static-hover-background); 7381 } 7382 .ds-card .context-menu-button:hover:active { 7383 background-color: var(--newtab-button-static-active-background); 7384 } 7385 .ds-card .context-menu-button:focus-visible { 7386 outline: 2px solid var(--newtab-button-focus-border); 7387 background-color: var(--newtab-button-static-focus-background); 7388 } 7389 .ds-card.last-item .card-stp-button-hover-background .context-menu { 7390 margin-inline-start: auto; 7391 margin-inline-end: var(--space-large); 7392 } 7393 .ds-card.active .card-stp-button-hover-background, .ds-card:focus-within .card-stp-button-hover-background, .ds-card:hover .card-stp-button-hover-background { 7394 display: block; 7395 opacity: 1; 7396 transition-duration: 0.3s; 7397 } 7398 .ds-card.active .card-stp-button-hover-background .context-menu-button, .ds-card:focus-within .card-stp-button-hover-background .context-menu-button, .ds-card:hover .card-stp-button-hover-background .context-menu-button { 7399 opacity: 1; 7400 transform: scale(1); 7401 } 7402 .ds-card.active h3, .ds-card:focus-within h3, .ds-card:hover h3 { 7403 color: var(--newtab-primary-action-background); 7404 } 7405 .ds-card:active h3 { 7406 color: var(--newtab-primary-element-active-color); 7407 } 7408 .ds-card .img { 7409 aspect-ratio: 2/1; 7410 } 7411 .ds-card .img img { 7412 border-radius: var(--border-radius-small); 7413 box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); 7414 } 7415 .ds-card .ds-card-link { 7416 display: flex; 7417 flex-direction: column; 7418 align-items: initial; 7419 text-decoration: none; 7420 grid-template-columns: auto 1fr; 7421 gap: inherit; 7422 flex-grow: 1; 7423 } 7424 .ds-card .ds-card-link:focus { 7425 border: 0; 7426 outline: var(--focus-outline); 7427 transition: none; 7428 } 7429 .ds-card .ds-card-topic { 7430 position: absolute; 7431 z-index: 1; 7432 background: light-dark(#F0F0F4, var(--newtab-background-color-secondary)); 7433 border-radius: var(--border-radius-small); 7434 color: var(--newtab-text-primary-color); 7435 padding: var(--space-small); 7436 margin: var(--space-small); 7437 font-size: var(--font-size-small); 7438 } 7439 .ds-card .meta { 7440 display: flex; 7441 justify-content: space-between; 7442 flex-direction: column; 7443 padding: var(--space-medium) var(--space-large); 7444 flex-grow: 1; 7445 } 7446 .ds-card .meta .info-wrap { 7447 flex-grow: 1; 7448 } 7449 .ds-card .meta .title { 7450 font-size: var(--font-size-large); 7451 -webkit-line-clamp: 3; 7452 line-height: normal; 7453 margin-block: 0; 7454 font-weight: var(--heading-font-weight); 7455 } 7456 .ds-card .meta .excerpt { 7457 font-size: var(--font-size-small); 7458 -webkit-line-clamp: 3; 7459 line-height: normal; 7460 } 7461 .ds-card .meta .source-wrapper { 7462 color: var(--newtab-text-secondary-text); 7463 display: flex; 7464 margin-block-end: var(--space-xxsmall); 7465 align-items: center; 7466 } 7467 .ds-card .meta .source-wrapper img { 7468 border-radius: var(--border-radius-small); 7469 margin-inline-end: var(--space-small); 7470 } 7471 .ds-card .meta .source { 7472 -webkit-line-clamp: 1; 7473 font-size: var(--font-size-small); 7474 color: var(--newtab-text-secondary-color); 7475 } 7476 .ds-card .meta .source span { 7477 display: inline-block; 7478 } 7479 .ds-card .meta .new-sponsored-label { 7480 font-size: var(--font-size-small); 7481 margin-block-end: var(--space-xxsmall); 7482 } 7483 .ds-card.ds-card-title-lines-2 .meta .title { 7484 font-size: var(--font-size-large); 7485 -webkit-line-clamp: 2; 7486 line-height: normal; 7487 } 7488 .ds-card.ds-card-title-lines-1 .meta .title { 7489 font-size: var(--font-size-large); 7490 -webkit-line-clamp: 1; 7491 line-height: normal; 7492 } 7493 .ds-card.ds-card-desc-lines-2 .meta .excerpt { 7494 font-size: var(--font-size-small); 7495 -webkit-line-clamp: 2; 7496 line-height: normal; 7497 } 7498 .ds-card.ds-card-desc-lines-1 .meta .excerpt { 7499 font-size: var(--font-size-small); 7500 -webkit-line-clamp: 1; 7501 line-height: normal; 7502 } 7503 .ds-card.ds-card-compact-image .img { 7504 padding-block-start: 47%; 7505 } 7506 .ds-card.ds-card-image-gradient img { 7507 mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black 40px); 7508 } 7509 .ds-card.ds-card-image-gradient .meta { 7510 padding: var(--space-xxsmall) var(--space-large) var(--space-medium); 7511 } 7512 .ds-card.ds-card-cta-button.variant-a .img, .ds-card.ds-card-cta-button.variant-b .img { 7513 padding-block-start: 52.4%; 7514 } 7515 .ds-card.ds-card-cta-button.variant-a .story-sponsored-label, .ds-card.ds-card-cta-button.variant-b .story-sponsored-label { 7516 margin: var(--space-small) 0 0; 7517 } 7518 .ds-card.ds-card-cta-button.variant-a .source, .ds-card.ds-card-cta-button.variant-b .source { 7519 text-decoration: underline; 7520 } 7521 .ds-card.ds-card-cta-button.variant-a .story-footer, .ds-card.ds-card-cta-button.variant-b .story-footer { 7522 display: flex; 7523 flex-wrap: wrap; 7524 justify-content: space-between; 7525 align-items: center; 7526 gap: 0 var(--space-small); 7527 margin-block-start: 0; 7528 } 7529 .ds-card.ds-card-cta-button.variant-a .story-cta-button, .ds-card.ds-card-cta-button.variant-b .story-cta-button { 7530 cursor: inherit; 7531 background: var(--button-background-color); 7532 border-radius: var(--border-radius-small); 7533 border: none; 7534 padding: var(--space-xsmall) var(--space-large); 7535 font-size: var(--font-size-small); 7536 font-weight: var(--font-weight-semibold); 7537 min-height: var(--size-item-large); 7538 min-width: 97px; 7539 color: var(--newtab-text-primary-color); 7540 margin-block-start: var(--space-small); 7541 } 7542 .ds-card.ds-card-cta-button.variant-a .story-cta-button:hover, .ds-card.ds-card-cta-button.variant-b .story-cta-button:hover { 7543 background: var(--button-background-color-hover); 7544 } 7545 .ds-card.ds-card-cta-button.variant-a .cta-header, .ds-card.ds-card-cta-button.variant-b .cta-header { 7546 background: var(--button-background-color); 7547 font-size: var(--font-size-root); 7548 font-weight: var(--heading-font-weight); 7549 text-align: end; 7550 padding: var(--space-xsmall) var(--space-large); 7551 color: var(--newtab-text-primary-color); 7552 min-height: var(--size-item-large); 7553 } 7554 .ds-card h3 { 7555 font-size: var(--font-size-large); 7556 color: var(--newtab-text-primary-color); 7557 } 7558 .ds-card p { 7559 font-size: var(--font-size-small); 7560 color: var(--newtab-text-primary-color); 7561 margin: 0; 7562 } 7563 7564 .sections-card-ui.placeholder { 7565 box-shadow: 0 2px 6px #15141A24; 7566 border-radius: var(--border-radius-large); 7567 } 7568 .ds-card-grid .sections-card-ui { 7569 background: var(--newtab-background-card); 7570 transition: opacity 0.2s ease; 7571 } 7572 .ds-card-grid .sections-card-ui:hover { 7573 background: var(--newtab-background-color-secondary); 7574 } 7575 .ds-card-grid .sections-card-ui:not(.placeholder) { 7576 box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2); 7577 border-radius: var(--border-radius-large); 7578 } 7579 .ds-card-grid .sections-card-ui:not(.placeholder).active, .ds-card-grid .sections-card-ui:not(.placeholder):focus-within, .ds-card-grid .sections-card-ui:not(.placeholder):hover { 7580 box-shadow: 0 2px 14px 0 var(--newtab-section-card-box-shadow-color); 7581 z-index: 1; 7582 } 7583 .ds-card-grid .sections-card-ui:not(.placeholder).active { 7584 z-index: 2; 7585 } 7586 .ds-card-grid .sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img { 7587 border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; 7588 } 7589 @media (forced-colors: active) { 7590 .ds-card-grid .sections-card-ui:not(.placeholder) { 7591 border: var(--border-width) solid var(--border-color-card); 7592 } 7593 .ds-card-grid .sections-card-ui:not(.placeholder):hover { 7594 --newtab-background-color-secondary: SelectedItemText; 7595 --newtab-text-secondary-color: SelectedItem; 7596 color: SelectedItem; 7597 border-color: var(--border-color-interactive-hover); 7598 } 7599 .ds-card-grid .sections-card-ui:not(.placeholder):hover .meta .title { 7600 color: var(--link-color-hover); 7601 } 7602 .ds-card-grid .sections-card-ui .meta .title { 7603 text-decoration: underline; 7604 color: var(--link-color); 7605 } 7606 } 7607 .ds-card-grid .sections-card-ui .meta { 7608 padding: var(--space-large); 7609 } 7610 .ds-card-grid .sections-card-ui .meta .title { 7611 -webkit-line-clamp: 3; 7612 font-size: var(--font-size-root); 7613 margin-block-end: var(--space-small); 7614 font-weight: var(--heading-font-weight); 7615 } 7616 .ds-card-grid .sections-card-ui .meta .excerpt { 7617 -webkit-line-clamp: 3; 7618 font-size: var(--font-size-small); 7619 } 7620 .ds-card-grid .sections-card-ui .meta .source { 7621 -webkit-line-clamp: 1; 7622 font-size: var(--font-size-small); 7623 } 7624 .ds-card-grid .sections-card-ui .meta .story-footer { 7625 justify-content: flex-start; 7626 display: grid; 7627 height: 28px; 7628 align-content: center; 7629 margin-block-start: var(--space-small); 7630 } 7631 .ds-card-grid .sections-card-ui .meta .story-sponsored-label { 7632 line-height: unset; 7633 font-size: var(--font-size-small); 7634 } 7635 .ds-card-grid .sections-card-ui .sections-card-footer { 7636 margin-block-start: var(--space-small); 7637 position: relative; 7638 min-height: 28px; 7639 } 7640 .ds-card-grid .sections-card-ui .ds-card-topic { 7641 display: grid; 7642 align-content: center; 7643 height: 28px; 7644 font-size: var(--font-size-small); 7645 color: var(--newtab-text-topic-label-color); 7646 margin: initial; 7647 padding: initial; 7648 background-color: initial; 7649 } 7650 .ds-card-grid .sections-card-ui .card-stp-button-hover-background { 7651 border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; 7652 background-color: var(--button-background-color-ghost); 7653 } 7654 .ds-card-grid .sections-card-ui .ds-card-link:focus { 7655 border-radius: var(--border-radius-large); 7656 } 7657 7658 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle, 7659 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle { 7660 box-shadow: none; 7661 background: none; 7662 } 7663 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .ds-image, 7664 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .ds-image { 7665 padding-block-start: 83.4%; 7666 } 7667 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background, 7668 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background { 7669 padding-block-start: 83.4%; 7670 } 7671 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .img-wrapper .ds-image img, 7672 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .img-wrapper .ds-image img { 7673 border-radius: var(--border-radius-medium); 7674 } 7675 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta, 7676 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta { 7677 padding-inline: 0; 7678 padding-block: var(--space-medium); 7679 } 7680 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .title, 7681 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .title { 7682 text-transform: uppercase; 7683 font-size: var(--font-size-small); 7684 font-weight: var(--font-weight); 7685 color: var(--newtab-text-secondary-color); 7686 } 7687 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .excerpt, 7688 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .excerpt { 7689 display: none; 7690 } 7691 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background, 7692 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background { 7693 border-radius: var(--border-radius-medium); 7694 } 7695 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui .img-wrapper .ds-image img, 7696 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui .img-wrapper .ds-image img { 7697 border-radius: var(--border-radius-large); 7698 } 7699 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui:hover, 7700 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui:hover { 7701 box-shadow: none; 7702 } 7703 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui:hover .img-wrapper .ds-image img, 7704 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui:hover .img-wrapper .ds-image img { 7705 box-shadow: 0 2px 14px 0 var(--newtab-section-card-box-shadow-color); 7706 } 7707 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards, 7708 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards { 7709 background: var(--newtab-background-card); 7710 transition: opacity 0.2s ease; 7711 } 7712 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover, 7713 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover { 7714 background: var(--newtab-background-color-secondary); 7715 } 7716 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img, 7717 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img { 7718 border-end-start-radius: 0; 7719 border-end-end-radius: 0; 7720 } 7721 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img, 7722 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover .img-wrapper .ds-image img { 7723 box-shadow: none; 7724 } 7725 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .meta, 7726 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .meta { 7727 padding: var(--space-small) var(--space-large); 7728 padding-block-end: 0; 7729 } 7730 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .info-wrap, 7731 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .info-wrap { 7732 margin-block-start: auto; 7733 } 7734 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .meta .title, 7735 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .meta .title { 7736 text-transform: none; 7737 } 7738 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .sections-card-footer, 7739 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .sections-card-footer { 7740 display: none; 7741 } 7742 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper, 7743 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper { 7744 z-index: 10; 7745 inset-block-end: 0; 7746 position: absolute; 7747 } 7748 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper .context-menu-position-container, 7749 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .card-stp-button-position-wrapper .context-menu-position-container { 7750 align-self: flex-start; 7751 padding-block-start: var(--space-medium); 7752 } 7753 7754 .ds-card-grid .refined-cards .meta { 7755 color: var(--newtab-text-primary-color); 7756 padding: var(--space-small) var(--space-large); 7757 } 7758 .ds-card-grid .refined-cards .meta .excerpt { 7759 display: none; 7760 } 7761 .ds-card-grid .refined-cards .sections-card-footer { 7762 display: flex; 7763 justify-content: space-between; 7764 pointer-events: none; 7765 max-width: 230px; 7766 margin-block-start: var(--space-xsmall); 7767 } 7768 .ds-card-grid .refined-cards .sections-card-footer .source-wrapper { 7769 margin-block-end: 0; 7770 margin-inline-end: var(--space-xxsmall); 7771 max-width: 175px; 7772 } 7773 .ds-card-grid .refined-cards:has(.story-footer .story-sponsored-label) .sections-card-footer { 7774 display: none; 7775 } 7776 .ds-card-grid .refined-cards:has(.story-footer .story-sponsored-label) .card-stp-button-position-wrapper { 7777 inset-block-end: var(--space-small); 7778 } 7779 .ds-card-grid .refined-cards .story-footer { 7780 margin-block: 0 var(--space-xsmall); 7781 } 7782 .ds-card-grid .refined-cards .card-stp-button-hover-background { 7783 height: 100%; 7784 padding-block-start: 0; 7785 background: transparent; 7786 } 7787 .ds-card-grid .refined-cards .card-stp-button-hover-background .card-stp-button-position-wrapper { 7788 inset-block-start: unset; 7789 inset-block-end: var(--space-medium); 7790 inset-inline-end: var(--space-large); 7791 background: var(--button-background-color-ghost); 7792 } 7793 .ds-card-grid .refined-cards .context-menu-button { 7794 background-color: var(--button-background-color-ghost); 7795 } 7796 @media (forced-colors: active) { 7797 .ds-card-grid .refined-cards .context-menu-button { 7798 border: var(--border-width) solid var(--button-border-color-ghost); 7799 } 7800 } 7801 .ds-card-grid .refined-cards:hover h3, .ds-card-grid .refined-cards.active h3 { 7802 color: var(--color-accent-primary); 7803 } 7804 .ds-card-grid .refined-cards:hover .context-menu-button:hover, .ds-card-grid .refined-cards.active .context-menu-button:hover { 7805 background-color: var(--button-background-color-ghost-hover); 7806 } 7807 @media (forced-colors: active) { 7808 .ds-card-grid .refined-cards:hover .context-menu-button:hover, .ds-card-grid .refined-cards.active .context-menu-button:hover { 7809 border-color: var(--button-border-color-ghost-hover); 7810 fill: var(--button-text-color-ghost-hover); 7811 } 7812 } 7813 .ds-card-grid .refined-cards:hover .context-menu-button:hover:active, .ds-card-grid .refined-cards.active .context-menu-button:hover:active { 7814 background-color: var(--button-background-color-ghost-active); 7815 } 7816 .ds-card-grid .refined-cards:hover .context-menu-button:focus-visible, .ds-card-grid .refined-cards.active .context-menu-button:focus-visible { 7817 outline: 2px solid var(--newtab-button-focus-border); 7818 background-color: var(--newtab-button-static-focus-background); 7819 } 7820 .ds-card-grid .refined-cards .sections-card-footer .source { 7821 display: block; 7822 } 7823 7824 .story-footer { 7825 color: var(--newtab-text-secondary-color); 7826 inset-inline-start: 0; 7827 margin-block-start: var(--space-medium); 7828 display: flex; 7829 gap: var(--space-large); 7830 position: relative; 7831 pointer-events: none; 7832 } 7833 .story-footer .story-sponsored-label span { 7834 display: inline-block; 7835 } 7836 .story-footer .story-sponsored-label, 7837 .story-footer .status-message { 7838 -webkit-line-clamp: 1; 7839 font-size: var(--font-size-small); 7840 color: var(--newtab-text-secondary-color); 7841 } 7842 .story-footer .status-message { 7843 display: flex; 7844 align-items: center; 7845 height: 24px; 7846 } 7847 .story-footer .status-message .story-badge-icon { 7848 fill: var(--newtab-text-secondary-color); 7849 height: 16px; 7850 margin-inline-end: var(--space-small); 7851 } 7852 .story-footer .status-message .story-badge-icon.icon-bookmark-removed { 7853 background-image: url("chrome://newtab/content/data/content/assets/icon-removed-bookmark.svg"); 7854 } 7855 .story-footer .status-message .story-context-label { 7856 color: var(--newtab-text-secondary-color); 7857 flex-grow: 1; 7858 font-size: var(--font-size-small); 7859 overflow: hidden; 7860 text-overflow: ellipsis; 7861 white-space: nowrap; 7862 } 7863 7864 .story-animate-enter { 7865 opacity: 0; 7866 } 7867 7868 .story-animate-enter-active { 7869 opacity: 1; 7870 transition: opacity 150ms ease-in 300ms; 7871 } 7872 .story-animate-enter-active .story-badge-icon, 7873 .story-animate-enter-active .story-context-label { 7874 animation: color 3s ease-out 0.3s; 7875 } 7876 @keyframes color { 7877 0% { 7878 color: var(--newtab-status-success); 7879 fill: var(--newtab-status-success); 7880 } 7881 100% { 7882 color: var(--newtab-text-secondary-color); 7883 fill: var(--newtab-text-secondary-color); 7884 } 7885 } 7886 7887 .story-animate-exit { 7888 position: absolute; 7889 inset-block-start: 0; 7890 opacity: 1; 7891 } 7892 7893 .story-animate-exit-active { 7894 opacity: 0; 7895 transition: opacity 250ms ease-in; 7896 } 7897 7898 .ds-image { 7899 display: block; 7900 position: relative; 7901 opacity: 0; 7902 } 7903 .ds-image.use-transition { 7904 transition: opacity 0.8s; 7905 } 7906 .ds-image.loaded { 7907 opacity: 1; 7908 } 7909 .ds-image img, 7910 .ds-image .placeholder-image, 7911 .ds-image .broken-image { 7912 background-color: var(--newtab-element-secondary-color); 7913 position: absolute; 7914 inset-block-start: 0; 7915 width: 100%; 7916 height: 100%; 7917 object-fit: cover; 7918 border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; 7919 } 7920 .ds-image .placeholder-image { 7921 overflow: hidden; 7922 background-color: var(--placeholderBackgroundColor); 7923 } 7924 .ds-image .placeholder-image::before { 7925 content: ""; 7926 background-image: url("chrome://newtab/content/data/content/assets/pocket-swoosh.svg"); 7927 background-repeat: no-repeat; 7928 background-position: center; 7929 transform: rotate(var(--placeholderBackgroundRotation)); 7930 position: absolute; 7931 inset-block-start: -50%; 7932 inset-inline-start: -50%; 7933 width: 200%; 7934 height: 200%; 7935 margin-inline-start: var(--placeholderBackgroundOffsetx); 7936 margin-block-start: var(--placeholderBackgroundOffsety); 7937 background-size: var(--placeholderBackgroundScale); 7938 } 7939 7940 .ds-message { 7941 margin: var(--space-small) 0 0; 7942 } 7943 .ds-message .title { 7944 display: flex; 7945 align-items: center; 7946 } 7947 .ds-message .title .glyph { 7948 width: 16px; 7949 height: 16px; 7950 margin: 0 var(--space-small) 0 0; 7951 -moz-context-properties: fill; 7952 fill: var(--newtab-text-secondary-color); 7953 background-position: center center; 7954 background-size: 16px; 7955 background-repeat: no-repeat; 7956 } 7957 .ds-message .title .title-text { 7958 font-size: var(--font-size-small); 7959 color: var(--newtab-text-secondary-color); 7960 font-weight: var(--heading-font-weight); 7961 padding-inline-end: var(--space-medium); 7962 } 7963 .ds-message .title .link { 7964 font-size: var(--font-weight-small); 7965 } 7966 .ds-message .title .link:hover, .ds-message .title .link:focus { 7967 text-decoration: underline; 7968 } 7969 7970 .impression-observer { 7971 position: absolute; 7972 inset-block-start: 0; 7973 inset-inline-end: 0; 7974 width: 100%; 7975 height: 100%; 7976 pointer-events: none; 7977 } 7978 7979 .section-empty-state { 7980 border: 1px solid var(--border-color); 7981 border-radius: var(--border-radius-small); 7982 display: flex; 7983 height: 160px; 7984 width: 100%; 7985 } 7986 @media (min-width: 1390px) { 7987 .section-empty-state { 7988 width: 936px; 7989 } 7990 } 7991 .section-empty-state .empty-state-message { 7992 color: var(--newtab-text-secondary-color); 7993 font-size: var(--font-size-small); 7994 text-align: center; 7995 margin: auto; 7996 max-width: 936px; 7997 } 7998 .section-empty-state .try-again-button { 7999 margin-block-start: var(--space-medium); 8000 padding: var(--space-small) var(--space-xxlarge); 8001 border-radius: var(--border-radius-small); 8002 border: 0; 8003 background: var(--newtab-button-secondary-color); 8004 color: var(--newtab-text-primary-color); 8005 cursor: pointer; 8006 position: relative; 8007 transition: background 0.2s ease, color 0.2s ease; 8008 } 8009 .section-empty-state .try-again-button:not(.waiting):focus { 8010 box-shadow: 0 0 0 5px oklch(from var(--color-blue-50)/lch 30%); 8011 transition: box-shadow 150ms; 8012 border-radius: var(--border-radius-small); 8013 outline: none; 8014 } 8015 [lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):focus { 8016 box-shadow: 0 0 0 5px oklch(from var(--color-blue-40)/lch 40%); 8017 transition: box-shadow 150ms; 8018 border-radius: var(--border-radius-small); 8019 outline: none; 8020 } 8021 .section-empty-state .try-again-button:not(.waiting):hover { 8022 box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); 8023 transition: box-shadow 150ms; 8024 border-radius: var(--border-radius-small); 8025 outline: none; 8026 } 8027 .section-empty-state .try-again-button::after { 8028 content: ""; 8029 height: 20px; 8030 width: 20px; 8031 animation: spinner 1s linear infinite; 8032 opacity: 0; 8033 position: absolute; 8034 inset-block-start: 50%; 8035 inset-inline-start: 50%; 8036 margin: calc(var(--space-small) * -1) 0 0 calc(var(--space-small) * -1); 8037 mask-image: url("chrome://newtab/content/data/content/assets/spinner.svg"); 8038 mask-size: 20px; 8039 background: var(--newtab-text-secondary-color); 8040 } 8041 .section-empty-state .try-again-button.waiting { 8042 cursor: initial; 8043 background: var(--newtab-element-secondary-color); 8044 color: transparent; 8045 transition: background 0.2s ease; 8046 } 8047 .section-empty-state .try-again-button.waiting::after { 8048 transition: opacity 0.2s ease; 8049 opacity: 1; 8050 } 8051 .section-empty-state h2 { 8052 font-size: inherit; 8053 font-weight: var(--heading-font-weight); 8054 margin: 0; 8055 } 8056 .section-empty-state p { 8057 margin: 0; 8058 } 8059 8060 @keyframes spinner { 8061 to { 8062 transform: rotate(360deg); 8063 } 8064 } 8065 .ds-privacy-link { 8066 text-align: center; 8067 font-size: var(--font-size-small); 8068 font-weight: var(--font-weight-semibold); 8069 } 8070 .ds-privacy-link a:hover { 8071 text-decoration: none; 8072 } 8073 8074 /* stylelint-disable max-nesting-depth */ 8075 .ds-topics-widget { 8076 display: flex; 8077 position: relative; 8078 flex-direction: column; 8079 } 8080 .ds-topics-widget .ds-topics-widget-header { 8081 font-size: var(--font-size-large); 8082 } 8083 .ds-topics-widget hr { 8084 background-color: var(--border-color-deemphasized); 8085 height: 1px; 8086 border: 0; 8087 margin: var(--space-small) 0 0; 8088 } 8089 .ds-topics-widget .ds-topics-widget-list-container { 8090 flex-grow: 1; 8091 } 8092 .ds-topics-widget .ds-topics-widget-list-container ul { 8093 margin: var(--space-large) 0 0; 8094 padding: 0; 8095 display: flex; 8096 align-items: center; 8097 grid-gap: var(--space-small); 8098 flex-wrap: wrap; 8099 } 8100 .ds-topics-widget .ds-topics-widget-list-container ul li { 8101 display: flex; 8102 } 8103 .ds-topics-widget .ds-topics-widget-list-container ul li a { 8104 font-size: var(--font-size-small); 8105 text-decoration: none; 8106 padding: var(--space-small) var(--space-medium); 8107 background: var(--newtab-background-color-secondary); 8108 border: 1px solid var(--border-color-deemphasized); 8109 color: var(--newtab-text-primary-color); 8110 border-radius: var(--border-radius-medium); 8111 } 8112 .ds-topics-widget .ds-topics-widget-list-container ul li a:hover { 8113 background: var(--newtab-element-hover-color); 8114 } 8115 .ds-topics-widget .ds-topics-widget-list-container ul li a:focus { 8116 outline: 0; 8117 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); 8118 transition: box-shadow 150ms; 8119 } 8120 .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item { 8121 display: flex; 8122 } 8123 @media (min-width: 610px) { 8124 .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item { 8125 display: none; 8126 } 8127 } 8128 @media (min-width: 1122px) { 8129 .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item { 8130 display: flex; 8131 } 8132 } 8133 .ds-topics-widget .ds-topics-widget-button { 8134 margin: var(--space-large) 0 0; 8135 font-size: inherit; 8136 text-align: center; 8137 padding: var(--space-small); 8138 border-radius: var(--border-radius-small); 8139 background-color: var(--newtab-primary-action-background-pocket); 8140 border: 0; 8141 } 8142 .ds-topics-widget .ds-topics-widget-button:hover { 8143 background: var(--newtab-primary-element-hover-pocket-color); 8144 } 8145 .ds-topics-widget .ds-topics-widget-button:focus { 8146 outline: 0; 8147 box-shadow: 0 0 0 3px var(--newtab-primary-action-background-pocket-dimmed), 0 0 0 1px var(--newtab-primary-action-background-pocket); 8148 transition: box-shadow 150ms; 8149 } 8150 8151 .feature-highlight { 8152 position: relative; 8153 pointer-events: auto; 8154 z-index: 1; 8155 } 8156 .feature-highlight .feature-highlight-modal { 8157 position: absolute; 8158 display: flex; 8159 opacity: 0; 8160 visibility: hidden; 8161 cursor: default; 8162 justify-content: space-between; 8163 border-radius: var(--border-radius-small); 8164 background: var(--newtab-background-color-secondary); 8165 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 8166 width: 298px; 8167 transition: opacity 0.3s, visibility 0.3s; 8168 } 8169 .feature-highlight .feature-highlight-modal > moz-button { 8170 margin-inline-start: var(--space-xsmall); 8171 z-index: 1; 8172 } 8173 .feature-highlight .feature-highlight-modal .message-icon { 8174 margin-block: var(--space-large); 8175 margin-inline: var(--space-large) var(--space-medium); 8176 } 8177 .feature-highlight .feature-highlight-modal.opened { 8178 opacity: 1; 8179 visibility: visible; 8180 } 8181 .feature-highlight .feature-highlight-modal::after { 8182 content: ""; 8183 position: absolute; 8184 height: 24px; 8185 width: 24px; 8186 background: var(--newtab-background-color-secondary); 8187 box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.15); 8188 } 8189 .feature-highlight .feature-highlight-modal.inset-block-start { 8190 inset-block-end: 100%; 8191 margin-block-end: var(--space-xlarge); 8192 } 8193 .feature-highlight .feature-highlight-modal.inset-block-start::after { 8194 inset-block-end: calc(var(--space-medium) * -1); 8195 transform: rotate(45deg); 8196 } 8197 .feature-highlight .feature-highlight-modal.inset-block-start:dir(rtl)::after { 8198 transform: rotate(225deg); 8199 } 8200 .feature-highlight .feature-highlight-modal.inset-block-end { 8201 inset-block-start: 100%; 8202 margin-block-start: var(--space-xlarge); 8203 } 8204 .feature-highlight .feature-highlight-modal.inset-block-end::after { 8205 inset-block-start: calc(var(--space-medium) * -1); 8206 transform: rotate(225deg); 8207 } 8208 .feature-highlight .feature-highlight-modal.inset-inline-start { 8209 inset-inline-end: calc(var(--space-xxlarge) * -1); 8210 } 8211 .feature-highlight .feature-highlight-modal.inset-inline-start::after { 8212 inset-inline-end: calc(var(--space-xxlarge) - var(--space-medium)); 8213 } 8214 .feature-highlight .feature-highlight-modal.inset-inline-center { 8215 transform: translateX(-50%); 8216 inset-inline-start: 50%; 8217 } 8218 .feature-highlight .feature-highlight-modal.inset-inline-center:dir(rtl) { 8219 transform: translateX(50%); 8220 } 8221 .feature-highlight .feature-highlight-modal.inset-inline-end { 8222 inset-inline-start: calc(var(--space-xxlarge) * -1); 8223 } 8224 .feature-highlight .feature-highlight-modal.inset-inline-end::after { 8225 inset-inline-start: calc(var(--space-xxlarge) - var(--space-medium)); 8226 } 8227 .feature-highlight .feature-highlight-modal.arrow-inline-start::after { 8228 content: ""; 8229 position: absolute; 8230 inset-block-start: 50%; 8231 inset-inline-end: calc(var(--space-small) * -1); 8232 transform: translateY(-50%) rotate(225deg); 8233 height: 16px; 8234 width: 16px; 8235 background: var(--newtab-background-color-secondary); 8236 box-shadow: -4px 4px 6px -2px rgba(0, 0, 0, 0.15); 8237 } 8238 .feature-highlight .feature-highlight-modal.arrow-inline-end::after { 8239 content: ""; 8240 position: absolute; 8241 inset-block-start: 50%; 8242 inset-inline-start: calc(var(--space-small) * -1); 8243 transform: translateY(-50%) rotate(135deg); 8244 height: 16px; 8245 width: 16px; 8246 background: var(--newtab-background-color-secondary); 8247 box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.15); 8248 } 8249 .feature-highlight .feature-highlight-modal.arrow-top-center::after { 8250 inset-block-start: calc(var(--space-small) * -1); 8251 inset-inline-start: 50%; 8252 transform: translateX(-50%) rotate(225deg); 8253 height: 16px; 8254 width: 16px; 8255 } 8256 .feature-highlight .feature-highlight-modal p { 8257 font-size: var(--font-size-small); 8258 font-weight: var(--font-weight); 8259 margin: var(--space-large) 0; 8260 flex-grow: 1; 8261 } 8262 .feature-highlight .toggle-button { 8263 border: none; 8264 padding: 0; 8265 } 8266 .feature-highlight .toggle-button.isHidden { 8267 display: none; 8268 } 8269 8270 .download-firefox-feature-highlight .icon.icon-dismiss { 8271 background: transparent url("chrome://global/skin/icons/close.svg"); 8272 background-size: var(--size-item-small); 8273 height: var(--size-item-small); 8274 width: var(--size-item-small); 8275 position: absolute; 8276 margin: 0; 8277 inset-block-start: calc(var(--space-medium) + 2px); 8278 inset-inline-end: calc(var(--space-medium) + 2px); 8279 } 8280 @media (prefers-color-scheme: dark) { 8281 .download-firefox-feature-highlight .icon.icon-dismiss { 8282 --dark-icon-color: var(--color-gray-70); 8283 color: var(--dark-icon-color); 8284 } 8285 } 8286 .download-firefox-feature-highlight .icon.icon-dismiss:hover { 8287 --dark-icon-hover: var(--color-gray-60); 8288 color: var(--dark-icon-hover); 8289 } 8290 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal { 8291 --arrow-size: 24px; 8292 padding: var(--space-large); 8293 width: 271px; 8294 } 8295 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper { 8296 margin-block: 0; 8297 } 8298 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper img { 8299 display: block; 8300 margin: 0 auto var(--space-large); 8301 } 8302 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .message-icon { 8303 display: none; 8304 } 8305 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end { 8306 margin-block-start: var(--space-xxlarge); 8307 } 8308 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end { 8309 inset-inline-start: calc(var(--arrow-size) * -2); 8310 } 8311 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end::after { 8312 inset-inline-start: calc(var(--space-xxlarge) - 14px); 8313 } 8314 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start { 8315 inset-inline-end: calc(var(--arrow-size) / 2 * -1 - 6px); 8316 } 8317 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start::after { 8318 inset-inline-end: calc(var(--space-xxlarge) - 12px); 8319 } 8320 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal::after { 8321 height: var(--arrow-size); 8322 width: var(--arrow-size); 8323 box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 0.15); 8324 transform: rotate(-45deg); 8325 pointer-events: none; 8326 } 8327 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal p { 8328 margin: 0; 8329 padding: 0; 8330 } 8331 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .title { 8332 font-weight: var(--heading-font-weight); 8333 margin-block: var(--space-small); 8334 } 8335 .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .subtitle { 8336 margin-block: 0; 8337 } 8338 8339 .follow-section-button-highlight .feature-highlight-modal { 8340 padding: var(--space-large); 8341 width: auto; 8342 } 8343 .follow-section-button-highlight .feature-highlight-modal p { 8344 margin: 0; 8345 } 8346 .follow-section-button-highlight .feature-highlight-modal .message-icon { 8347 display: none; 8348 } 8349 .follow-section-button-highlight .feature-highlight-modal .icon-dismiss { 8350 margin-block-start: 0; 8351 margin-inline-end: 0; 8352 } 8353 .follow-section-button-highlight .feature-highlight-modal > moz-button { 8354 position: absolute; 8355 inset-inline-end: var(--space-large); 8356 inset-block-start: var(--space-large); 8357 } 8358 @media (prefers-color-scheme: dark) { 8359 .follow-section-button-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button { 8360 --button-icon-fill: var(--color-gray-70); 8361 } 8362 } 8363 .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start { 8364 inset-block-start: calc(100% + var(--space-large)); 8365 inset-inline-start: 50%; 8366 transform: translateX(-50%); 8367 } 8368 .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start::after { 8369 inset-block-start: calc(var(--space-small) * -1); 8370 inset-inline-end: 50%; 8371 transform: translateX(50%) rotate(135deg); 8372 } 8373 @media (min-width: 724px) { 8374 .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start { 8375 min-width: auto; 8376 inset-inline-start: auto; 8377 inset-inline-end: calc(100% + var(--space-large)); 8378 inset-block-start: 50%; 8379 transform: translateY(-50%); 8380 } 8381 .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start::after { 8382 inset-block-start: 50%; 8383 inset-inline-end: calc(var(--space-small) * -1); 8384 transform: translateY(-50%) rotate(225deg); 8385 } 8386 } 8387 .follow-section-button-highlight .inset-block-center { 8388 position: absolute; 8389 height: 100%; 8390 width: 100%; 8391 } 8392 .follow-section-button-highlight .follow-section-button-highlight-content { 8393 display: flex; 8394 flex-direction: column; 8395 gap: var(--space-medium); 8396 } 8397 .follow-section-button-highlight .follow-section-button-highlight-copy { 8398 font-size: var(--font-size-small); 8399 } 8400 .follow-section-button-highlight .follow-section-button-highlight-copy .title { 8401 font-weight: var(--heading-font-weight); 8402 margin-block-end: var(--space-xsmall); 8403 } 8404 8405 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal { 8406 --arrow-size: 24px; 8407 width: auto; 8408 padding: var(--space-large); 8409 } 8410 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper { 8411 margin-block: 0; 8412 } 8413 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .message-icon { 8414 display: none; 8415 } 8416 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end { 8417 inset-inline-start: 0; 8418 } 8419 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end::after { 8420 inset-inline-start: 0; 8421 } 8422 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start { 8423 inset-inline-end: calc(var(--space-xxlarge) * 2); 8424 } 8425 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start::after { 8426 inset-inline-end: calc(var(--arrow-size) / 2 * -1); 8427 } 8428 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end { 8429 margin-block-start: 0; 8430 } 8431 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end::after { 8432 inset-block-start: 0; 8433 } 8434 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-start { 8435 inset-block-end: 0; 8436 margin-block-end: calc(-4 * var(--space-xsmall)); 8437 } 8438 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-start::after { 8439 inset-block-end: calc(var(--arrow-size) - var(--space-xxsmall)); 8440 } 8441 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .title { 8442 font-weight: var(--heading-font-weight); 8443 margin-block: var(--space-medium); 8444 } 8445 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .subtitle { 8446 margin-block: 0 var(--space-medium); 8447 } 8448 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .button-wrapper { 8449 display: block; 8450 text-align: end; 8451 } 8452 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal::after { 8453 height: var(--arrow-size); 8454 width: var(--arrow-size); 8455 box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 0.15); 8456 pointer-events: none; 8457 } 8458 .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal > moz-button { 8459 position: absolute; 8460 inset-inline-end: var(--space-large); 8461 inset-block-start: var(--space-large); 8462 } 8463 @media (prefers-color-scheme: dark) { 8464 .wallpaper-feature-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button { 8465 --button-icon-fill: var(--color-gray-70); 8466 } 8467 } 8468 8469 .shortcut-feature-highlight .feature-highlight-modal { 8470 padding: var(--space-large); 8471 width: auto; 8472 } 8473 .shortcut-feature-highlight .feature-highlight-modal p { 8474 margin: 0; 8475 padding-block-start: 0; 8476 } 8477 .shortcut-feature-highlight .feature-highlight-modal p, .shortcut-feature-highlight .feature-highlight-modal p:hover { 8478 color: inherit; 8479 } 8480 .shortcut-feature-highlight .feature-highlight-modal .message-icon { 8481 display: none; 8482 } 8483 .shortcut-feature-highlight .feature-highlight-modal.inset-block-end { 8484 margin-block-start: var(--space-large); 8485 inset-inline-end: var(--space-xlarge); 8486 } 8487 .shortcut-feature-highlight .feature-highlight-modal > moz-button { 8488 position: absolute; 8489 inset-inline-end: var(--space-large); 8490 inset-block-start: var(--space-large); 8491 } 8492 @media (prefers-color-scheme: dark) { 8493 .shortcut-feature-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button { 8494 --button-icon-fill: var(--color-gray-70); 8495 } 8496 } 8497 .shortcut-feature-highlight .shortcut-feature-highlight-content { 8498 display: flex; 8499 flex-direction: column; 8500 gap: var(--space-medium); 8501 } 8502 .shortcut-feature-highlight .shortcut-feature-highlight-copy { 8503 font-size: var(--font-size-small); 8504 } 8505 .shortcut-feature-highlight .shortcut-feature-highlight-copy .title { 8506 font-weight: var(--heading-font-weight); 8507 margin-block-end: var(--space-xsmall); 8508 text-align: inherit; 8509 } 8510 8511 /* stylelint-disable max-nesting-depth */ 8512 .modalOverlayOuter.active:has(.topic-selection-container) { 8513 background-color: rgba(21, 20, 26, 0.5); 8514 } 8515 8516 .topic-selection-container { 8517 --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate; 8518 position: relative; 8519 border-radius: var(--border-radius-medium); 8520 box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); 8521 padding: var(--space-xxlarge); 8522 max-width: 745px; 8523 height: auto; 8524 } 8525 .topic-selection-container .dismiss-button { 8526 position: absolute; 8527 appearance: none; 8528 border: none; 8529 z-index: 2; 8530 inset-block-start: 0; 8531 inset-inline: auto 0; 8532 border-radius: var(--border-radius-small); 8533 padding: 0; 8534 margin: var(--space-small); 8535 display: block; 8536 float: inline-end; 8537 background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px; 8538 height: var(--size-item-large); 8539 width: var(--size-item-large); 8540 align-self: end; 8541 min-height: var(--size-item-large); 8542 min-width: var(--size-item-large); 8543 -moz-context-properties: fill; 8544 fill: currentColor; 8545 transition: var(--transition); 8546 } 8547 .topic-selection-container .dismiss-button:hover { 8548 background-color: var(--button-background-color-hover); 8549 } 8550 .topic-selection-container .dismiss-button:hover:active { 8551 background-color: var(--button-background-color-active); 8552 } 8553 .topic-selection-container .title { 8554 text-align: center; 8555 font-size: var(--font-size-xlarge); 8556 font-weight: var(--heading-font-weight); 8557 margin-block-end: var(--space-small); 8558 } 8559 .topic-selection-container .subtitle { 8560 text-align: center; 8561 margin-block: 0 var(--space-xlarge); 8562 } 8563 .topic-selection-container .modal-footer { 8564 display: flex; 8565 justify-content: space-between; 8566 align-items: center; 8567 } 8568 .topic-selection-container .modal-footer > a { 8569 color: var(--link-color); 8570 } 8571 .topic-selection-container .modal-footer > a:hover { 8572 color: var(--link-color-hover); 8573 } 8574 .topic-selection-container .modal-footer > a:hover:active { 8575 color: var(--link-color-active); 8576 } 8577 .topic-selection-container .modal-footer > a:visited { 8578 color: var(--link-color-visited); 8579 } 8580 .topic-selection-container .modal-footer .button-group { 8581 gap: var(--space-medium); 8582 display: flex; 8583 } 8584 8585 .topic-list { 8586 list-style: none; 8587 display: flex; 8588 flex-wrap: wrap; 8589 gap: var(--space-large); 8590 margin: var(--space-xxlarge) auto; 8591 justify-content: center; 8592 width: fit-content; 8593 } 8594 .topic-list .topic-item { 8595 align-items: center; 8596 border-radius: var(--border-radius-circle); 8597 border: var(--border-width) solid var(--border-color-interactive); 8598 display: flex; 8599 justify-self: center; 8600 max-width: fit-content; 8601 padding-block: var(--space-xsmall); 8602 padding-inline: var(--space-xsmall) var(--space-large); 8603 position: relative; 8604 } 8605 .topic-list .topic-item:hover { 8606 cursor: pointer; 8607 background-color: var(--button-background-color-hover); 8608 } 8609 .topic-list .topic-item:active { 8610 background-color: var(--button-background-color-active); 8611 } 8612 .topic-list .topic-item:has(input:checked) { 8613 /** 8614 * @backward-compat { version 147 } 8615 * 8616 * Replace this with `--border-color-selected` once 147 hits release. 8617 */ 8618 border-color: var(--color-accent-primary); 8619 } 8620 .topic-list .topic-item:focus-within { 8621 outline-offset: 2px; 8622 /** 8623 * @backward-compat { version 147 } 8624 * 8625 * Replace this with `--border-color-selected` once 147 hits release. 8626 */ 8627 outline: 2px solid var(--color-accent-primary); 8628 } 8629 .topic-list .topic-item .topic-item-label { 8630 margin-inline-end: var(--space-small); 8631 } 8632 .topic-list .topic-item .topic-custom-checkbox { 8633 display: flex; 8634 justify-content: center; 8635 align-items: center; 8636 width: 42px; 8637 height: 42px; 8638 border-radius: var(--border-radius-circle); 8639 background-color: var(--newtab-button-static-background); 8640 margin-inline-end: var(--space-large); 8641 } 8642 .topic-list .topic-item .topic-custom-checkbox .topic-icon { 8643 font-size: var(--font-size-xlarge); 8644 } 8645 .topic-list .topic-item .topic-custom-checkbox .topic-checked { 8646 display: none; 8647 } 8648 .topic-list .topic-item input[type=checkbox] { 8649 height: 100%; 8650 opacity: 0; 8651 position: absolute; 8652 width: 90%; 8653 } 8654 .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox { 8655 background-color: var(--color-accent-primary); 8656 position: relative; 8657 } 8658 .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox .topic-icon { 8659 display: none; 8660 } 8661 .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox .topic-checked { 8662 color: var(--color-white); 8663 -moz-context-properties: fill; 8664 display: block; 8665 fill: currentColor; 8666 background: url("chrome://global/skin/icons/check.svg"); 8667 background-size: cover; 8668 width: 26px; 8669 height: 26px; 8670 } 8671 8672 .ad-banner-wrapper { 8673 --banner-padding: var(--space-large); 8674 --billboard-width: 970px; 8675 --billboard-container-width: calc( var(--billboard-width) + ( var(--banner-padding) * 2 )); 8676 --billboard-height: 250px; 8677 --leaderboard-width: 728px; 8678 --leaderboard-container-width: calc(var(--leaderboard-width) + ( var(--banner-padding) * 2 )); 8679 --leaderboard-height: 90px; 8680 position: relative; 8681 display: flex; 8682 justify-content: space-around; 8683 grid-column: 1/-1; 8684 width: 100%; 8685 inset-inline-start: 50%; 8686 transform: translate3d(-50%, 0, 0); 8687 margin-block-start: var(--space-medium); 8688 margin-block-end: var(--space-xlarge); 8689 } 8690 @media (min-width: 1390px) { 8691 .ad-banner-wrapper.promo-card { 8692 justify-content: space-between; 8693 } 8694 } 8695 .ad-banner-wrapper:has(.ad-banner-inner.billboard) { 8696 min-width: var(--billboard-container-width); 8697 } 8698 @media (width <= 1015px) { 8699 .ad-banner-wrapper:has(.ad-banner-inner.billboard) { 8700 min-width: auto; 8701 } 8702 } 8703 .ad-banner-wrapper:has(.ad-banner-inner.leaderboard) { 8704 min-width: var(--leaderboard-container-width); 8705 } 8706 @media (width <= 758px) { 8707 .ad-banner-wrapper:has(.ad-banner-inner.leaderboard) { 8708 min-width: auto; 8709 } 8710 } 8711 .ad-banner-wrapper .ad-banner-inner { 8712 background: var(--newtab-background-card); 8713 transition: opacity 0.2s ease; 8714 position: relative; 8715 box-shadow: var(--box-shadow-card); 8716 border-radius: var(--border-radius-large); 8717 } 8718 .ad-banner-wrapper .ad-banner-inner:hover { 8719 background: var(--newtab-background-color-secondary); 8720 } 8721 .ad-banner-wrapper .ad-banner-inner:hover { 8722 box-shadow: var(--box-shadow-card-hover); 8723 } 8724 .ad-banner-wrapper .ad-banner-inner .ad-banner-link { 8725 text-decoration: none; 8726 padding-block-start: var(--banner-padding); 8727 padding-inline: var(--banner-padding); 8728 display: inline-block; 8729 } 8730 .ad-banner-wrapper .ad-banner-inner .ad-banner-link:focus { 8731 outline: var(--focus-outline); 8732 border-radius: var(--border-radius-large); 8733 } 8734 .ad-banner-wrapper .ad-banner-inner .ad-banner-link:hover + .ad-banner-hover-background, .ad-banner-wrapper .ad-banner-inner .ad-banner-link:focus + .ad-banner-hover-background { 8735 opacity: 1; 8736 } 8737 .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background { 8738 opacity: 0; 8739 position: absolute; 8740 inset-block-start: 0; 8741 pointer-events: none; 8742 height: 100%; 8743 } 8744 .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background:hover, .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background:focus-within { 8745 opacity: 1; 8746 } 8747 .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background .ads-context-menu-wrapper { 8748 pointer-events: auto; 8749 } 8750 .ad-banner-wrapper .ad-banner-inner.leaderboard { 8751 max-width: var(--leaderboard-container-width); 8752 } 8753 .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-content { 8754 height: var(--leaderboard-height); 8755 width: var(--leaderboard-width); 8756 } 8757 .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-hover-background { 8758 width: var(--leaderboard-container-width); 8759 } 8760 .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-sponsored { 8761 width: var(--leaderboard-width); 8762 } 8763 @media (width <= 758px) { 8764 .ad-banner-wrapper .ad-banner-inner.leaderboard { 8765 display: none; 8766 } 8767 } 8768 .ad-banner-wrapper .ad-banner-inner.billboard { 8769 width: var(--billboard-container-width); 8770 } 8771 .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-content { 8772 height: var(--billboard-height); 8773 width: var(--billboard-width); 8774 } 8775 .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-hover-background { 8776 width: var(--billboard-container-width); 8777 } 8778 .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-sponsored { 8779 width: var(--billboard-width); 8780 } 8781 @media (width <= 1015px) { 8782 .ad-banner-wrapper .ad-banner-inner.billboard { 8783 display: none; 8784 } 8785 } 8786 .ad-banner-wrapper .ad-banner-inner .ad-banner-sponsored { 8787 height: 32px; 8788 display: flex; 8789 align-items: center; 8790 } 8791 .ad-banner-wrapper .ad-banner-inner .ad-banner-sponsored span { 8792 font-size: var(--font-size-small); 8793 color: var(--newtab-contextual-text-secondary-color); 8794 } 8795 .ad-banner-wrapper.active { 8796 z-index: 1; 8797 } 8798 .ad-banner-wrapper.active .ad-banner-hover-background { 8799 opacity: 1; 8800 } 8801 8802 .ads-context-menu-wrapper { 8803 text-align: end; 8804 } 8805 8806 .ads-context-menu { 8807 z-index: 10; 8808 position: absolute; 8809 inset-inline-end: var(--space-large); 8810 inset-block-end: 0; 8811 } 8812 .ads-context-menu .context-menu { 8813 /* Position the menu just under and to the right of the context menu button */ 8814 inset-inline-end: 100%; 8815 inset-inline-start: auto; 8816 margin-inline-end: calc(-0.98 * var(--size-item-large)); 8817 inset-block-start: calc(2.25 * var(--size-item-small)); 8818 } 8819 .ads-context-menu > moz-button::part(button) { 8820 background-color: transparent; 8821 } 8822 .ads-context-menu > moz-button::part(button):hover { 8823 background-color: var(--button-background-color-hover); 8824 } 8825 .ads-context-menu > moz-button::part(button):active { 8826 background-color: var(--button-background-color-active); 8827 } 8828 8829 .context-menu-open > moz-button::part(button) { 8830 background-color: var(--button-background-color); 8831 } 8832 8833 .promo-card-wrapper { 8834 background: var(--newtab-background-card); 8835 transition: opacity 0.2s ease; 8836 display: none; 8837 box-shadow: var(--box-shadow-card); 8838 border-radius: var(--border-radius-large); 8839 height: 298px; 8840 width: 228px; 8841 position: relative; 8842 padding: var(--space-large); 8843 } 8844 .promo-card-wrapper:hover { 8845 background: var(--newtab-background-color-secondary); 8846 } 8847 .promo-card-wrapper .promo-card-title { 8848 display: block; 8849 font-size: var(--font-size-medium); 8850 font-weight: var(--heading-font-weight); 8851 margin-block: var(--space-medium); 8852 } 8853 .promo-card-wrapper .promo-card-title::before { 8854 content: ""; 8855 display: inline-block; 8856 width: var(--icon-size); 8857 height: var(--icon-size); 8858 background-image: url("chrome://branding/content/icon32.png"); 8859 background-size: contain; 8860 background-repeat: no-repeat; 8861 margin-inline-end: var(--space-small); 8862 vertical-align: middle; 8863 } 8864 .promo-card-wrapper .promo-card-body { 8865 display: block; 8866 margin-block: 0 var(--space-medium); 8867 } 8868 .promo-card-wrapper .promo-card-dismiss-button { 8869 position: absolute; 8870 inset-block-start: var(--space-small); 8871 inset-inline-end: var(--space-small); 8872 margin: 0; 8873 } 8874 .promo-card-wrapper .promo-card-cta-wrapper { 8875 display: flex; 8876 width: 100%; 8877 justify-content: end; 8878 } 8879 .promo-card-wrapper .img-wrapper { 8880 height: 132px; 8881 width: 196px; 8882 } 8883 8884 @media (min-width: 1698px) { 8885 .ds-card-grid .promo-card-wrapper { 8886 display: block; 8887 } 8888 } 8889 8890 @media (min-width: 1390px) { 8891 .ds-section-wrapper .promo-card-wrapper { 8892 display: block; 8893 } 8894 } 8895 8896 .section-context-menu { 8897 position: relative; 8898 } 8899 .section-context-menu .context-menu { 8900 /* Fix the context menu width */ 8901 width: calc(4 * var(--size-item-large)); 8902 /* Position the context menu on top of the card grid, below the menu button. */ 8903 inset-block-start: calc(2.5 * var(--size-item-small)); 8904 inset-inline-start: calc(-6.25 * var(--size-item-small)); 8905 } 8906 8907 .inline-selection-wrapper.ds-section .section-heading { 8908 margin-block: var(--space-medium); 8909 } 8910 .inline-selection-wrapper.ds-section .section-subtitle { 8911 color: var(--newtab-contextual-text-primary-color); 8912 } 8913 .inline-selection-wrapper.ds-section .learn-more-copy { 8914 margin-block-end: 0; 8915 } 8916 .lightWallpaper .inline-selection-wrapper.ds-section .learn-more-copy { 8917 color-scheme: light; 8918 } 8919 .darkWallpaper .inline-selection-wrapper.ds-section .learn-more-copy { 8920 color-scheme: dark; 8921 } 8922 .inline-selection-wrapper.ds-section .learn-more-copy a:focus-visible { 8923 outline: var(--focus-outline); 8924 outline-offset: var(--focus-outline-offset); 8925 } 8926 .inline-selection-wrapper.ds-section .topic-list { 8927 list-style: none; 8928 display: flex; 8929 flex-wrap: wrap; 8930 row-gap: calc(1.25 * var(--space-small)); 8931 column-gap: var(--space-small); 8932 justify-content: flex-start; 8933 margin: var(--space-small) 0; 8934 padding-inline-start: 0; 8935 width: fit-content; 8936 } 8937 .inline-selection-wrapper.ds-section .topic-list li { 8938 align-items: center; 8939 display: flex; 8940 justify-self: flex-start; 8941 max-width: fit-content; 8942 position: relative; 8943 } 8944 .inline-selection-wrapper.ds-section .topic-list li > label { 8945 background-color: var(--newtab-background-card); 8946 border: var(--border-width) solid var(--border-color-interactive); 8947 border-radius: var(--border-radius-circle); 8948 color: var(--newtab-text-primary-color); 8949 padding: var(--space-small) calc(1.25 * var(--space-small)) var(--space-small) var(--space-xsmall); 8950 } 8951 .inline-selection-wrapper.ds-section .topic-list li > label input[type=checkbox] { 8952 outline: none; 8953 appearance: none; 8954 } 8955 .inline-selection-wrapper.ds-section .topic-list li > label .topic-item-icon { 8956 -moz-context-properties: fill; 8957 color: var(--newtab-text-primary-color); 8958 fill: currentColor; 8959 margin-inline-start: var(--space-small); 8960 margin-block-start: calc(-0.75 * var(--space-xsmall)); 8961 } 8962 .inline-selection-wrapper.ds-section .topic-list li > label:hover { 8963 background-color: var(--newtab-button-static-hover-background); 8964 cursor: pointer; 8965 } 8966 .inline-selection-wrapper.ds-section .topic-list li > label:hover:active { 8967 background-color: var(--newtab-button-static-active-background); 8968 } 8969 .inline-selection-wrapper.ds-section .topic-list li > label:has(input:checked) { 8970 background-color: var(--color-accent-primary); 8971 /** 8972 * @backward-compat { version 147 } 8973 * 8974 * Replace this with `--border-color-selected` once 147 hits release. 8975 */ 8976 border-color: var(--color-accent-primary); 8977 color: var(--button-text-color-primary); 8978 } 8979 .inline-selection-wrapper.ds-section .topic-list li > label:has(input:checked) .topic-item-icon { 8980 color: var(--button-text-color-primary); 8981 } 8982 .inline-selection-wrapper.ds-section .topic-list li > label:has(input:focus-visible) { 8983 outline-offset: var(--focus-outline-offset); 8984 outline: var(--focus-outline); 8985 } 8986 8987 .report-content-form { 8988 width: 500px; 8989 height: 270px; 8990 box-shadow: var(--box-shadow-level-4); 8991 border-radius: var(--border-radius-medium); 8992 border: 1px solid var(--border-color); 8993 /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ 8994 background-color: var(--newtab-background-color-secondary); 8995 } 8996 .report-content-form form { 8997 height: 100%; 8998 display: flex; 8999 flex-direction: column; 9000 } 9001 .report-content-form form moz-radio-group { 9002 height: 100%; 9003 } 9004 .report-content-form::backdrop { 9005 background: rgba(0, 0, 0, 0.25); 9006 } 9007 9008 .personalized-card-wrapper { 9009 background-color: var(--background-color-canvas); 9010 border: 2px solid var(--border-color-card); 9011 color: var(--text-color); 9012 padding: var(--space-xxlarge); 9013 border-radius: var(--border-radius-large); 9014 margin: var(--space-xlarge) 0; 9015 position: relative; 9016 } 9017 .personalized-card-wrapper .personalized-card-dismiss { 9018 position: absolute; 9019 inset-inline-end: var(--space-medium); 9020 inset-block-start: var(--space-medium); 9021 } 9022 .personalized-card-wrapper .personalized-card-inner { 9023 display: grid; 9024 grid-template-columns: 0.5fr 1fr 1fr 1fr; 9025 align-items: start; 9026 } 9027 .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper { 9028 display: flex; 9029 flex-direction: column; 9030 gap: var(--space-medium); 9031 } 9032 .personalized-card-wrapper .personalized-card-inner img { 9033 max-width: 200px; 9034 max-height: 200px; 9035 object-fit: contain; 9036 justify-self: center; 9037 align-self: start; 9038 } 9039 .personalized-card-wrapper .personalized-card-inner h2, .personalized-card-wrapper .personalized-card-inner p { 9040 margin-block-start: 0; 9041 } 9042 .personalized-card-wrapper .personalized-card-inner h2 { 9043 font-size: var(--font-size-xxlarge); 9044 font-weight: var(--heading-font-weight); 9045 } 9046 .personalized-card-wrapper .personalized-card-inner .personalized-card-link { 9047 color: var(--link-color); 9048 font-size: var(--font-size-small); 9049 } 9050 @media (max-width: 724px) { 9051 .personalized-card-wrapper .personalized-card-inner { 9052 grid-template-columns: 1fr; 9053 gap: var(--space-large); 9054 } 9055 .personalized-card-wrapper .personalized-card-inner img { 9056 width: 100px; 9057 justify-self: initial; 9058 } 9059 .personalized-card-wrapper .personalized-card-inner h2 { 9060 margin-block-end: var(--space-xsmall); 9061 } 9062 } 9063 @media (min-width: 724px) { 9064 .personalized-card-wrapper .personalized-card-inner { 9065 grid-template-columns: 0.2fr 1fr 1.2fr; 9066 gap: var(--space-large); 9067 } 9068 .personalized-card-wrapper .personalized-card-inner img { 9069 width: 130px; 9070 align-self: end; 9071 grid-row: 1/span 2; 9072 } 9073 .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper { 9074 align-items: center; 9075 display: grid; 9076 grid-template-columns: subgrid; 9077 grid-row: 2; 9078 grid-column: 2/span 2; 9079 padding-block-end: var(--space-xxlarge); 9080 } 9081 .personalized-card-wrapper .personalized-card-inner p { 9082 width: 210px; 9083 margin: 0; 9084 } 9085 .personalized-card-wrapper .personalized-card-inner h2 { 9086 margin: 0; 9087 } 9088 } 9089 @media (min-width: 1122px) { 9090 .personalized-card-wrapper .personalized-card-inner { 9091 grid-template-columns: 0.2fr 1.2fr 0.8fr 1fr; 9092 gap: var(--space-large); 9093 } 9094 .personalized-card-wrapper .personalized-card-inner img { 9095 width: 100px; 9096 align-self: end; 9097 } 9098 .personalized-card-wrapper .personalized-card-inner h2 { 9099 grid-column: 2; 9100 grid-row: 1; 9101 width: initial; 9102 } 9103 .personalized-card-wrapper .personalized-card-inner p { 9104 grid-column: 3; 9105 grid-row: 1; 9106 width: 400px; 9107 } 9108 .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper { 9109 grid-column: 4; 9110 grid-row: 1; 9111 display: flex; 9112 flex-direction: column; 9113 justify-self: end; 9114 gap: var(--space-medium); 9115 width: max-content; 9116 margin-inline-end: var(--space-medium); 9117 } 9118 .personalized-card-wrapper .personalized-card-inner .personalized-card-cta { 9119 align-self: baseline; 9120 } 9121 } 9122 @media (min-width: 1122px) and (max-width: 1390px) { 9123 .personalized-card-wrapper .personalized-card-inner { 9124 grid-template-columns: 0.2fr 1fr 1fr 1fr; 9125 } 9126 .personalized-card-wrapper .personalized-card-inner h2 { 9127 max-width: 200px; 9128 } 9129 .personalized-card-wrapper .personalized-card-inner p { 9130 width: 300px; 9131 } 9132 } 9133 @media (min-width: 724px) { 9134 .personalized-card-wrapper { 9135 padding-block-end: 0; 9136 } 9137 }