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