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