diff options
Diffstat (limited to 'browser/components/newtab/css/activity-stream-windows.css')
| -rw-r--r-- | browser/components/newtab/css/activity-stream-windows.css | 4248 |
1 files changed, 4248 insertions, 0 deletions
diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css new file mode 100644 index 0000000000..69a2459268 --- /dev/null +++ b/browser/components/newtab/css/activity-stream-windows.css @@ -0,0 +1,4248 @@ +@charset "UTF-8"; +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +/* This is the windows variant */ +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +*::-moz-focus-inner { + border: 0; +} + +body { + margin: 0; +} + +button, +input { + background-color: inherit; + color: inherit; + font-family: inherit; + font-size: inherit; +} + +[hidden] { + display: none !important; +} + +:root { + --newtab-background-color: #F9F9FB; + --newtab-background-color-secondary: #FFF; + --newtab-text-primary-color: #15141a; + --newtab-primary-action-background: #0061e0; + --newtab-primary-action-background-pocket: #008078; + --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent); + --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000); + --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000); + --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent); + --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent); + --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent); + --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 90%, #000); + --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 90%, #000); + --newtab-primary-element-active-color: color-mix(in srgb, var(--newtab-primary-action-background) 80%, #000); + --newtab-primary-element-text-color: #FFF; + --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); + --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent); + --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000); + --newtab-wordmark-color: #20123A; + --newtab-status-success: #058B00; + --newtab-status-error: #D70022; + --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1); + --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent); + --newtab-textbox-focus-color: var(--newtab-primary-action-background); + --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3); + --newtab-button-secondary-color: inherit; +} +:root[lwt-newtab-brighttext] { + --newtab-background-color: #2B2A33; + --newtab-background-color-secondary: #42414d; + --newtab-text-primary-color: #fbfbfe; + --newtab-primary-action-background: #00ddff; + --newtab-primary-action-background-pocket: #00ddff; + --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent); + --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF); + --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 55%, #FFF); + --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 80%, #FFF); + --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 60%, #FFF); + --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent); + --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent); + --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent); + --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF); + --newtab-primary-element-text-color: #2b2a33; + --newtab-wordmark-color: #fbfbfe; + --newtab-status-success: #7C6; +} + +@media (prefers-contrast) { + :root { + --newtab-text-secondary-color: var(--newtab-text-primary-color); + } +} +.icon { + background-position: center center; + background-repeat: no-repeat; + background-size: 16px; + -moz-context-properties: fill; + display: inline-block; + color: var(--newtab-text-primary-color); + fill: currentColor; + height: 16px; + vertical-align: middle; + width: 16px; +} +.icon.icon-spacer { + margin-inline-end: 8px; +} +.icon.icon-small-spacer { + margin-inline-end: 6px; +} +.icon.icon-button-style { + fill: var(--newtab-text-secondary-color); + border: 0; +} +.icon.icon-button-style:focus, .icon.icon-button-style:hover { + fill: var(--newtab-text-primary-color); +} +.icon.icon-bookmark-added { + background-image: url("chrome://browser/skin/bookmark.svg"); +} +.icon.icon-bookmark-hollow { + background-image: url("chrome://browser/skin/bookmark-hollow.svg"); +} +.icon.icon-clear-input { + background-image: url("chrome://global/skin/icons/close-fill.svg"); +} +.icon.icon-delete { + background-image: url("chrome://global/skin/icons/delete.svg"); +} +.icon.icon-search { + background-image: url("chrome://global/skin/icons/search-glass.svg"); +} +.icon.icon-modal-delete { + flex-shrink: 0; + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-modal-delete-20.svg"); + background-size: 32px; + height: 32px; + width: 32px; +} +.icon.icon-mail { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-mail-16.svg"); +} +.icon.icon-dismiss { + background-image: url("chrome://global/skin/icons/close.svg"); +} +.icon.icon-info { + background-image: url("chrome://global/skin/icons/info.svg"); +} +.icon.icon-new-window { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-newWindow-16.svg"); +} +.icon.icon-new-window:dir(rtl) { + transform: scaleX(-1); +} +.icon.icon-new-window-private { + background-image: url("chrome://browser/skin/privateBrowsing.svg"); +} +.icon.icon-settings { + background-image: url("chrome://global/skin/icons/settings.svg"); +} +.icon.icon-pin { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pin-16.svg"); +} +.icon.icon-pin:dir(rtl) { + transform: scaleX(-1); +} +.icon.icon-unpin { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-unpin-16.svg"); +} +.icon.icon-unpin:dir(rtl) { + transform: scaleX(-1); +} +.icon.icon-edit { + background-image: url("chrome://global/skin/icons/edit.svg"); +} +.icon.icon-pocket { + background-image: url("chrome://global/skin/icons/pocket.svg"); +} +.icon.icon-pocket-save { + background-image: url("chrome://global/skin/icons/pocket.svg"); + fill: #FFF; +} +.icon.icon-pocket-delete { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg"); +} +.icon.icon-pocket-archive { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-archive-16.svg"); +} +.icon.icon-history-item { + background-image: url("chrome://browser/skin/history.svg"); +} +.icon.icon-trending { + background-image: url("chrome://browser/skin/trending.svg"); + transform: translateY(2px); +} +.icon.icon-now { + background-image: url("chrome://browser/skin/history.svg"); +} +.icon.icon-topsites { + background-image: url("chrome://browser/skin/topsites.svg"); +} +.icon.icon-pin-small { + background-image: url("chrome://browser/skin/pin-12.svg"); + background-size: 12px; + height: 12px; + width: 12px; +} +.icon.icon-pin-small:dir(rtl) { + transform: scaleX(-1); +} +.icon.icon-check { + background-image: url("chrome://global/skin/icons/check.svg"); +} +.icon.icon-download { + background-image: url("chrome://browser/skin/downloads/downloads.svg"); +} +.icon.icon-copy { + background-image: url("chrome://global/skin/icons/edit-copy.svg"); +} +.icon.icon-open-file { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-open-file-16.svg"); +} +.icon.icon-webextension { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg"); +} +.icon.icon-highlights { + background-image: url("chrome://global/skin/icons/highlights.svg"); +} +.icon.icon-arrowhead-down { + background-image: url("chrome://global/skin/icons/arrow-down.svg"); +} +.icon.icon-arrowhead-down-small { + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + background-size: 12px; + height: 12px; + width: 12px; +} +.icon.icon-arrowhead-forward-small { + background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); + background-size: 12px; + height: 12px; + width: 12px; +} +.icon.icon-arrowhead-forward-small:dir(rtl) { + background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); +} +.icon.icon-arrowhead-up { + background-image: url("chrome://global/skin/icons/arrow-up.svg"); +} +.icon.icon-add { + background-image: url("chrome://global/skin/icons/plus.svg"); +} +.icon.icon-minimize { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-minimize-16.svg"); +} +.icon.icon-maximize { + background-image: url("chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg"); +} +.icon.icon-arrow { + background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); +} + +html { + height: 100%; +} + +body, +#root { + min-height: 100vh; +} + +#root { + position: relative; +} + +body { + background-color: var(--newtab-background-color); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif; + font-size: 16px; +} + +.no-scroll { + overflow: hidden; +} + +h1, +h2 { + font-weight: normal; +} + +.inner-border { + border: 1px solid var(--newtab-border-color); + border-radius: 3px; + height: 100%; + left: 0; + pointer-events: none; + position: absolute; + top: 0; + width: 100%; + z-index: 100; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.show-on-init { + opacity: 0; + transition: opacity 0.2s ease-in; +} +.show-on-init.on { + animation: fadeIn 0.2s; + opacity: 1; +} + +.actions { + border-top: 1px solid var(--newtab-border-color); + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + margin: 0; + padding: 15px 25px 0; +} + +.button, +.actions button { + background-color: var(--newtab-button-secondary-color); + border: 1px solid var(--newtab-border-color); + border-radius: 4px; + color: inherit; + cursor: pointer; + margin-bottom: 15px; + padding: 10px 30px; + white-space: nowrap; +} +.button:hover:not(.dismiss), .button:focus:not(.dismiss), +.actions button:hover:not(.dismiss), +.actions button:focus:not(.dismiss) { + box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); + transition: box-shadow 150ms; +} +.button.dismiss, +.actions button.dismiss { + background-color: transparent; + border: 0; + padding: 0; + text-decoration: underline; +} +.button.primary, .button.done, +.actions button.primary, +.actions button.done { + background-color: var(--newtab-primary-action-background); + border: solid 1px var(--newtab-primary-action-background); + color: var(--newtab-primary-element-text-color); + margin-inline-start: auto; +} + +input[type=text], input[type=search] { + border-radius: 3px; +} + +.clamp { + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + word-break: break-word; +} + +.a11y-link-button { + border: 0; + padding: 0; + cursor: pointer; + text-align: unset; + color: var(--newtab-primary-action-background); +} +.a11y-link-button:hover, .a11y-link-button:focus { + text-decoration: underline; +} + +.outer-wrapper { + color: var(--newtab-text-primary-color); + display: flex; + flex-grow: 1; + min-height: 100vh; + padding: 30px 32px 32px; +} +.outer-wrapper.ds-outer-wrapper-breakpoint-override { + padding: 30px 0 32px; +} +@media (min-width: 610px) { + .outer-wrapper.ds-outer-wrapper-breakpoint-override { + padding: 30px 32px 32px; + } +} +.outer-wrapper.only-search { + display: block; + padding-top: 134px; +} +.outer-wrapper a { + color: var(--newtab-primary-action-background); +} + +main { + margin: auto; + width: 274px; + padding: 0; +} +main section { + margin-bottom: 20px; + position: relative; +} +.hide-main main { + visibility: hidden; +} +@media (min-width: 610px) { + main { + width: 530px; + } +} +@media (min-width: 866px) { + main { + width: 786px; + } +} +@media (min-width: 1122px) { + main { + width: 1042px; + } +} + +.ds-outer-wrapper-search-alignment main { + margin: 0 auto; +} + +.ds-outer-wrapper-breakpoint-override main { + width: 266px; + padding-bottom: 0; +} +@media (min-width: 610px) { + .ds-outer-wrapper-breakpoint-override main { + width: 510px; + } +} +@media (min-width: 866px) { + .ds-outer-wrapper-breakpoint-override main { + width: 746px; + } +} +@media (min-width: 1122px) { + .ds-outer-wrapper-breakpoint-override main { + width: 986px; + } +} + +.base-content-fallback { + height: 100vh; +} + +.body-wrapper .section-title, .body-wrapper .sections-list .section:last-of-type, .body-wrapper .topics { + opacity: 0; +} +.body-wrapper.on .section-title, .body-wrapper.on .sections-list .section:last-of-type, .body-wrapper.on .topics { + opacity: 1; +} + +.non-collapsible-section { + padding: 0 25px; +} + +.prefs-button button { + background-color: transparent; + border: 0; + border-radius: 2px; + cursor: pointer; + inset-inline-end: 15px; + padding: 15px; + position: fixed; + top: 15px; + z-index: 1000; +} +.prefs-button button:hover, .prefs-button button:focus { + background-color: var(--newtab-element-hover-color); +} +.prefs-button button:active { + background-color: var(--newtab-element-active-color); +} + +.as-error-fallback { + align-items: center; + border-radius: 3px; + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); + color: var(--newtab-text-secondary-color); + display: flex; + flex-direction: column; + font-size: 12px; + justify-content: center; + justify-items: center; + line-height: 1.5; +} +.as-error-fallback.borderless-error { + box-shadow: none; +} +.as-error-fallback a { + color: var(--newtab-text-secondary-color); + text-decoration: underline; +} + +/* stylelint-disable max-nesting-depth */ +.top-sites-list { + list-style: none; + margin: 0 -16px; + padding: 0; +} +.top-sites-list a { + text-decoration: none; +} +.top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { + background: var(--newtab-element-hover-color); +} +@media (max-width: 610px) { + .top-sites-list > :nth-child(2n+1) .context-menu { + margin-inline-end: auto; + margin-inline-start: auto; + inset-inline-end: auto; + inset-inline-start: -32px; + } + .top-sites-list > :nth-child(2n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 610px) and (max-width: 866px) { + .top-sites-list :nth-child(4n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 610px) and (max-width: 802px) { + .top-sites-list :nth-child(4n+3) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 866px) and (max-width: 1250px) { + .top-sites-list :nth-child(6n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 866px) and (max-width: 1058px) { + .top-sites-list :nth-child(6n+5) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 1122px) and (max-width: 1506px) { + .top-sites-list :nth-child(8n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 1122px) and (max-width: 1314px) { + .top-sites-list :nth-child(8n+7) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +.top-sites-list .hide-for-narrow { + display: none; +} +@media (min-width: 610px) { + .top-sites-list .hide-for-narrow { + display: inline-block; + } +} +@media (min-width: 866px) { + .top-sites-list .hide-for-narrow { + display: none; + } +} +@media (min-width: 1122px) { + .top-sites-list .hide-for-narrow { + display: inline-block; + } +} + +.top-site-outer { + width: 120px; + border-radius: 8px; + display: inline-block; + margin-block-end: 16px; +} +.top-site-outer .top-site-inner { + position: relative; +} +.top-site-outer .top-site-inner > a { + padding: 20px 16px 4px; + color: inherit; + display: block; + outline: none; +} +.top-site-outer:is(:hover) .context-menu-button { + opacity: 1; +} +.top-site-outer .context-menu-button { + background-image: url("chrome://global/skin/icons/more.svg"); + border: 0; + border-radius: 4px; + cursor: pointer; + fill: var(--newtab-text-primary-color); + -moz-context-properties: fill; + height: 20px; + width: 20px; + inset-inline-end: 3px; + opacity: 0; + position: absolute; + top: -20px; + transition: opacity 200ms; +} +.top-site-outer .context-menu-button:is(:active, :focus) { + outline: 0; + opacity: 1; + background-color: var(--newtab-element-hover-color); + fill: var(--newtab-primary-action-background); +} +.top-site-outer .tile { + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + background-color: var(--newtab-background-color-secondary); + justify-content: center; + margin: 0 auto; + height: 80px; + width: 80px; + cursor: pointer; + position: relative; + align-items: center; + color: var(--newtab-text-secondary-color); + display: flex; + font-size: 32px; + font-weight: 200; + text-transform: uppercase; +} +.top-site-outer .tile .icon-wrapper { + border-radius: 4px; + width: 48px; + height: 48px; + overflow: hidden; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} +.top-site-outer .tile .icon-wrapper.letter-fallback::before { + content: attr(data-fallback); + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: center; + font-size: 64px; + font-weight: 800; + transform: rotate(-10deg); + top: 6px; + position: relative; + color: #FFF; +} +.top-site-outer .top-site-icon { + background-color: var(--newtab-background-color-secondary); + background-position: center center; + background-repeat: no-repeat; + border-radius: 4px; + position: absolute; +} +.top-site-outer .rich-icon { + background-size: cover; + height: 100%; + inset-inline-start: 0; + top: 0; + width: 100%; +} +.top-site-outer .default-icon, +.top-site-outer .search-topsite { + background-size: 32px; + height: 32px; + width: 32px; + align-items: center; + display: flex; + font-size: 20px; + justify-content: center; +} +.top-site-outer .default-icon[data-fallback]::before, +.top-site-outer .search-topsite[data-fallback]::before { + content: attr(data-fallback); +} +.top-site-outer .search-topsite { + background-image: url("chrome://global/skin/icons/search-glass.svg"); + background-size: 16px; + background-color: var(--newtab-primary-action-background); + border-radius: 32px; + -moz-context-properties: fill; + fill: var(--newtab-primary-element-text-color); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + transition-duration: 150ms; + transition-property: background-size, bottom, inset-inline-end, height, width; + height: 32px; + width: 32px; + bottom: -6px; + inset-inline-end: -6px; +} +.top-site-outer.placeholder .tile { + box-shadow: 0 0 0 1px var(--newtab-inner-box-shadow-color); +} +.top-site-outer .title { + color: var(--newtab-text-primary-color); + padding-top: 8px; + font: caption; + text-align: center; + position: relative; +} +.top-site-outer .title .icon { + margin-inline-end: 2px; + fill: var(--newtab-text-primary-color); +} +.top-site-outer .title span { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.top-site-outer .title .sponsored-label { + color: var(--newtab-text-secondary-color); + font-size: 0.9em; +} +.top-site-outer .title:not(.sponsored) .sponsored-label { + visibility: hidden; +} +.top-site-outer.search-shortcut .rich-icon { + background-color: #FFF; +} +.top-site-outer .edit-button { + background-image: url("chrome://global/skin/icons/edit.svg"); +} +.top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before { + display: none; +} +.top-site-outer.dragged .title { + visibility: hidden; +} + +.edit-topsites-wrapper .top-site-inner > .top-site-button > .tile { + border: 1px solid var(--newtab-border-color); +} +.edit-topsites-wrapper .modal { + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); + left: 0; + margin: 0 auto; + max-height: calc(100% - 40px); + position: fixed; + right: 0; + top: 40px; + width: 274px; +} +@media (min-width: 610px) { + .edit-topsites-wrapper .modal { + width: 530px; + } +} +@media (min-width: 866px) { + .edit-topsites-wrapper .modal { + width: 786px; + } +} + +.topsite-form .section-title { + font-size: 16px; + margin: 0 0 16px; +} +.topsite-form .form-input-container { + max-width: 492px; + margin: 0 auto; + padding: 32px; +} +.topsite-form .form-input-container .top-site-outer { + pointer-events: none; +} +.topsite-form .search-shortcuts-container { + max-width: 700px; + margin: 0 auto; + padding: 32px; +} +.topsite-form .search-shortcuts-container > div { + margin-inline-end: -39px; +} +.topsite-form .search-shortcuts-container .top-site-outer { + margin-inline-start: 0; + margin-inline-end: 39px; +} +.topsite-form .top-site-outer { + padding: 0; + margin: 24px 0 0; + margin-inline-start: 32px; +} +.topsite-form .fields-and-preview { + display: flex; +} +.topsite-form label { + font-size: 17px; +} +.topsite-form .form-wrapper { + width: 100%; +} +.topsite-form .form-wrapper .field { + position: relative; +} +.topsite-form .form-wrapper .field .icon-clear-input { + position: absolute; + transform: translateY(-50%); + top: 50%; + inset-inline-end: 8px; +} +.topsite-form .form-wrapper .url input:dir(ltr) { + padding-right: 32px; +} +.topsite-form .form-wrapper .url input:dir(rtl) { + padding-left: 32px; +} +.topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) { + direction: ltr; + text-align: right; +} +.topsite-form .form-wrapper .enable-custom-image-input { + display: inline-block; + font-size: 13px; + margin-top: 4px; + cursor: pointer; +} +.topsite-form .form-wrapper .custom-image-input-container { + margin-top: 4px; +} +.topsite-form .form-wrapper .custom-image-input-container .loading-container { + width: 16px; + height: 16px; + overflow: hidden; + position: absolute; + transform: translateY(-50%); + top: 50%; + inset-inline-end: 8px; +} +.topsite-form .form-wrapper .custom-image-input-container .loading-animation { + width: 960px; + height: 16px; + -moz-context-properties: fill; + fill: var(--newtab-primary-action-background); + background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); + animation: tab-throbber-animation 1.05s steps(60) infinite; +} +@keyframes tab-throbber-animation { + 100% { + transform: translateX(-960px); + } +} +@keyframes tab-throbber-animation-rtl { + 100% { + transform: translateX(960px); + } +} +.topsite-form .form-wrapper .custom-image-input-container .loading-animation:dir(rtl) { + animation-name: tab-throbber-animation-rtl; +} +.topsite-form .form-wrapper input[type=text] { + background-color: var(--newtab-background-color-secondary); + border: 1px solid var(--newtab-border-color); + margin: 8px 0; + padding: 0 8px; + height: 32px; + width: 100%; + font-size: 15px; +} +.topsite-form .form-wrapper input[type=text][disabled] { + border: 1px solid var(--newtab-border-color); + box-shadow: none; + opacity: 0.4; +} +.topsite-form .form-wrapper .invalid input[type=text] { + border: 1px solid var(--newtab-status-error); + box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3); +} +.topsite-form .form-wrapper .error-tooltip { + animation: fade-up-tt 450ms; + background: var(--newtab-status-error); + border-radius: 2px; + color: #FFF; + inset-inline-start: 3px; + padding: 5px 12px; + position: absolute; + top: 44px; + z-index: 1; +} +.topsite-form .form-wrapper .error-tooltip::before { + background: var(--newtab-status-error); + bottom: -8px; + content: "."; + height: 16px; + inset-inline-start: 12px; + position: absolute; + text-indent: -999px; + top: -7px; + transform: rotate(45deg); + white-space: nowrap; + width: 16px; + z-index: -1; +} +.topsite-form .actions { + justify-content: flex-end; +} +.topsite-form .actions button { + margin-inline-start: 10px; + margin-inline-end: 0; +} +@media (max-width: 610px) { + .topsite-form .fields-and-preview { + flex-direction: column; + } + .topsite-form .fields-and-preview .top-site-outer { + margin-inline-start: 0; + } +} +.topsite-form .title { + user-select: none; +} +.topsite-form [type=checkbox]:not(:checked), +.topsite-form [type=checkbox]:checked { + inset-inline-start: -9999px; + position: absolute; +} +.topsite-form [type=checkbox]:not(:checked) + label, +.topsite-form [type=checkbox]:checked + label { + cursor: pointer; + display: block; + position: relative; +} +.topsite-form [type=checkbox]:not(:checked) + label::before, +.topsite-form [type=checkbox]:checked + label::before { + background: var(--newtab-background-color); + border: 1px solid var(--newtab-border-color); + border-radius: 3px; + content: ""; + height: 21px; + left: -8px; + position: absolute; + top: -8px; + width: 21px; + z-index: 1; +} +[dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::before, +[dir=rtl] .topsite-form [type=checkbox]:checked + label::before { + left: auto; + right: -8px; +} +.topsite-form [type=checkbox]:not(:checked) + label::after, +.topsite-form [type=checkbox]:checked + label::after { + background: url("chrome://global/skin/icons/check.svg") no-repeat center center; + content: ""; + height: 21px; + left: -8px; + position: absolute; + top: -8px; + width: 21px; + -moz-context-properties: fill; + fill: var(--newtab-primary-action-background); + z-index: 2; +} +[dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::after, +[dir=rtl] .topsite-form [type=checkbox]:checked + label::after { + left: auto; + right: -8px; +} +.topsite-form [type=checkbox]:checked + label .tile { + box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); +} +.topsite-form [type=checkbox]:not(:checked) + label::after { + opacity: 0; +} +.topsite-form [type=checkbox]:checked + label::after { + opacity: 1; +} +.topsite-form [type=checkbox]:checked:focus + label::before, +.topsite-form [type=checkbox]:not(:checked):focus + label::before { + border: 1px dotted var(--newtab-primary-action-background); +} + +@keyframes fade-up-tt { + 0% { + opacity: 0; + transform: translateY(15px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.topsite-impression-observer { + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.sections-list .section-list { + display: grid; + grid-gap: 32px; + grid-template-columns: repeat(auto-fit, 192px); + margin: 0; +} +@media (max-width: 610px) { + .sections-list .section-list .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 610px) and (max-width: 866px) { + .sections-list .section-list :nth-child(2n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 866px) and (max-width: 1250px) { + .sections-list .section-list :nth-child(3n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +@media (min-width: 1122px) and (max-width: 1506px) { + .sections-list .section-list :nth-child(3n) .context-menu, +.sections-list .section-list :nth-child(4n) .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; + } +} +.sections-list .section-empty-state { + border: 1px solid var(--newtab-border-color); + border-radius: 3px; + display: flex; + height: 266px; + width: 100%; +} +.sections-list .section-empty-state .empty-state { + margin: auto; + max-width: 350px; +} +.sections-list .section-empty-state .empty-state .empty-state-message { + color: var(--newtab-text-primary-color); + font-size: 13px; + margin-bottom: 0; + text-align: center; +} +@media (min-width: 1122px) { + .sections-list .section-empty-state { + height: 370px; + } +} + +.top-stories-bottom-container { + color: var(--newtab-text-primary-color); + font-size: 12px; + line-height: 1.6; + margin-top: 12px; + display: flex; + justify-content: space-between; +} +.top-stories-bottom-container a { + color: var(--newtab-primary-action-background); + font-weight: bold; +} +.top-stories-bottom-container a.more-recommendations { + font-weight: normal; + font-size: 13px; +} +@media (max-width: 865px) { + .top-stories-bottom-container .wrapper-topics, +.top-stories-bottom-container .wrapper-cta + .wrapper-more-recommendations { + display: none; + } +} +@media (max-width: 609px) { + .top-stories-bottom-container .wrapper-cta { + text-align: center; + } + .top-stories-bottom-container .wrapper-cta .pocket-logged-in-cta { + display: block; + margin-inline-end: 0; + } + .top-stories-bottom-container .wrapper-cta .pocket-logged-in-cta .pocket-cta-button { + max-width: none; + display: block; + margin-inline-end: 0; + margin: 5px 0 10px; + } + .top-stories-bottom-container .wrapper-more-recommendations { + width: 100%; + } + .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations { + justify-content: center; + } + .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations::after { + display: none; + } +} + +@media (min-width: 1122px) { + .sections-list .normal-cards .section-list { + grid-template-columns: repeat(auto-fit, 309px); + } +} +.topics ul { + margin: 0; + padding: 0; +} +@media (min-width: 866px) { + .topics ul { + display: inline; + padding-inline-start: 12px; + } +} +.topics ul li { + display: inline-block; +} +.topics ul li::after { + content: "•"; + padding: 8px; +} +.topics ul li:last-child::after { + content: none; +} + +.search-wrapper { + padding: 34px 0 38px; +} +.only-search .search-wrapper { + padding: 0 0 38px; +} +.search-wrapper .logo-and-wordmark { + align-items: center; + display: flex; + justify-content: center; + margin-bottom: 48px; +} +.search-wrapper .logo-and-wordmark .logo { + display: inline-block; + height: 82px; + width: 82px; + background: image-set(url("chrome://branding/content/about-logo.png"), url("chrome://branding/content/about-logo@2x.png") 2x) no-repeat center; + background-size: 82px; +} +.search-wrapper .logo-and-wordmark .wordmark { + background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; + background-size: 134px; + -moz-context-properties: fill; + display: inline-block; + fill: var(--newtab-wordmark-color); + height: 82px; + margin-inline-start: 16px; + width: 134px; +} +@media (max-width: 609px) { + .search-wrapper .logo-and-wordmark .logo { + background-size: 64px; + height: 64px; + width: 64px; + } + .search-wrapper .logo-and-wordmark .wordmark { + background-size: 100px; + height: 64px; + width: 100px; + margin-inline-start: 12px; + } +} +.search-wrapper .search-inner-wrapper { + cursor: default; + display: flex; + min-height: 52px; + margin: 0 auto; + position: relative; + width: 200px; +} +@media (min-width: 610px) { + .search-wrapper .search-inner-wrapper { + width: 360px; + } +} +@media (min-width: 866px) { + .search-wrapper .search-inner-wrapper { + width: 600px; + } +} +@media (min-width: 1122px) { + .search-wrapper .search-inner-wrapper { + width: 720px; + } +} +.search-wrapper .search-handoff-button, +.search-wrapper input { + background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat; + background-size: 24px; + padding-inline-start: 52px; + padding-inline-end: 10px; + padding-block: 0; + width: 100%; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + border: 1px solid transparent; + border-radius: 8px; + color: var(--newtab-text-primary-color); + -moz-context-properties: fill; + fill: var(--newtab-text-secondary-color); +} +.search-wrapper .search-handoff-button:dir(rtl), +.search-wrapper input:dir(rtl) { + background-position-x: right 16px; +} +.search-wrapper .search-inner-wrapper:active input, +.search-wrapper input:focus { + border: 1px solid var(--newtab-primary-action-background); + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); +} +.search-wrapper .search-button { + background: url("chrome://browser/skin/forward.svg") no-repeat center center; + background-size: 16px 16px; + border: 0; + border-radius: 0 3px 3px 0; + -moz-context-properties: fill; + fill: var(--newtab-text-secondary-color); + height: 100%; + inset-inline-end: 0; + position: absolute; + width: 48px; +} +.search-wrapper .search-button:focus, .search-wrapper .search-button:hover { + background-color: var(--newtab-element-hover-color); + cursor: pointer; +} +.search-wrapper .search-button:focus { + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); + border: 1px solid var(--newtab-primary-action-background); + border-radius: 0 8px 8px 0; +} +.search-wrapper .search-button:active { + background-color: var(--newtab-element-hover-color); +} +.search-wrapper .search-button:dir(rtl) { + transform: scaleX(-1); +} +.search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button { + border: 1px solid var(--newtab-primary-action-background); + box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); +} +.search-wrapper .search-handoff-button { + padding-inline-end: 15px; + color: var(--newtab-text-primary-color); + fill: var(--newtab-text-secondary-color); + -moz-context-properties: fill; +} +.search-wrapper .search-handoff-button .fake-caret { + top: 18px; + inset-inline-start: 52px; +} +.search-wrapper .search-handoff-button .fake-caret:dir(rtl) { + background-position-x: right 16px; +} +.search-wrapper.visible-logo .logo-and-wordmark .wordmark { + fill: var(--newtab-wordmark-color); +} + +@media (height <= 700px) { + .search-wrapper { + padding: 0 0 30px; + } +} +.search-handoff-button { + background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat; + background-size: 24px; + border: solid 1px transparent; + border-radius: 3px; + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15); + cursor: text; + font-size: 15px; + padding: 0; + padding-inline-end: 48px; + padding-inline-start: 46px; + opacity: 1; + width: 100%; +} +.search-handoff-button:dir(rtl) { + background-position-x: right 16px; +} +.fake-focus:not(.search-disabled) .search-handoff-button { + border: 1px solid var(--newtab-textbox-focus-color); + box-shadow: var(--newtab-textbox-focus-boxshadow); +} +.fake-focus:not(.search-disabled) .search-handoff-button .fake-caret { + display: block; +} +.search-disabled .search-handoff-button { + opacity: 0.5; + box-shadow: none; +} +.search-handoff-button .fake-editable:focus { + outline: none; + caret-color: transparent; +} +.search-handoff-button .fake-editable { + color: transparent; + height: 100%; + opacity: 0; + position: absolute; + inset: 0; +} +.search-handoff-button .fake-textbox { + opacity: 0.54; + text-align: start; +} +.search-handoff-button .fake-caret { + animation: caret-animation 1.3s steps(5, start) infinite; + background: var(--newtab-text-primary-color); + display: none; + inset-inline-start: 47px; + height: 17px; + position: absolute; + top: 16px; + width: 1px; +} +@keyframes caret-animation { + to { + visibility: hidden; + } +} + +@media (height > 700px) { + body:not(.inline-onboarding) .fixed-search main { + padding-top: 124px; + } + body:not(.inline-onboarding) .fixed-search.visible-logo main { + padding-top: 254px; + } + body:not(.inline-onboarding) .fixed-search .search-wrapper { + border-bottom: solid 1px var(--newtab-border-color); + padding: 27px 0; + background-color: var(--newtab-overlay-color); + min-height: 95px; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 9; + } + body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper { + min-height: 45px; + } + body:not(.inline-onboarding) .fixed-search .search-wrapper input { + background-position-x: 16px; + background-size: 24px; + } + body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) { + background-position-x: right 16px; + } + body:not(.inline-onboarding) .fixed-search .search-wrapper .search-handoff-button .fake-caret { + top: 14px; + } + body:not(.inline-onboarding) .fixed-search .search-wrapper .logo-and-wordmark { + display: none; + } + body:not(.inline-onboarding) .fixed-search .search-handoff-button { + background-position-x: 16px; + background-size: 24px; + } + body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) { + background-position-x: right 16px; + } + body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret { + top: 10px; + } +} +.contentSearchSuggestionTable { + border: 0; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2); + transform: translateY(4px); + background-color: var(--newtab-background-color); +} +.contentSearchSuggestionTable .contentSearchHeader { + color: var(--newtab-text-secondary-color); + background-color: var(--newtab-background-color-secondary); +} +.contentSearchSuggestionTable .contentSearchHeader, +.contentSearchSuggestionTable .contentSearchSettingsButton { + border-color: var(--newtab-border-color); +} +.contentSearchSuggestionTable .contentSearchSuggestionsList { + color: var(--newtab-text-primary-color); + border: 0; +} +.contentSearchSuggestionTable .contentSearchOneOffsTable { + border-top: solid 1px var(--newtab-border-color); + background-color: var(--newtab-background-color); +} +.contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText { + color: var(--newtab-text-primary-color); +} +.contentSearchSuggestionTable .contentSearchSuggestionRow.selected { + background: var(--newtab-element-hover-color); + color: var(--newtab-text-primary-color); +} +.contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active { + background: var(--newtab-element-active-color); +} +.contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { + fill: var(--newtab-text-secondary-color); +} +.contentSearchSuggestionTable .contentSearchOneOffItem { + background-image: none; + border-image: linear-gradient(transparent 18%, var(--newtab-border-color) 18%, var(--newtab-border-color) 82%, transparent 82%) 1; + border-inline-end: 1px solid; + position: relative; +} +.contentSearchSuggestionTable .contentSearchOneOffItem.selected { + background: var(--newtab-element-hover-color); +} +.contentSearchSuggestionTable .contentSearchOneOffItem:active { + background: var(--newtab-element-active-color); +} +.contentSearchSuggestionTable .contentSearchSettingsButton:hover { + background: var(--newtab-element-hover-color); + color: var(--newtab-text-primary-color); +} + +.contentSearchHeaderRow > td > img, +.contentSearchSuggestionRow > td > .historyIcon { + margin-inline-start: 7px; + margin-inline-end: 15px; +} + +/* stylelint-disable max-nesting-depth */ +.context-menu { + background: var(--newtab-background-color-secondary); + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2); + display: block; + font-size: 14px; + margin-inline-start: 5px; + inset-inline-start: 100%; + position: absolute; + top: 6.75px; + z-index: 8; +} +.context-menu > ul { + list-style: none; + margin: 0; + padding: 5px 0; +} +.context-menu > ul > li { + margin: 0; + width: 100%; +} +.context-menu > ul > li.separator { + border-bottom: 1px solid var(--newtab-border-color); + margin: 5px 0; +} +.context-menu > ul > li > a, +.context-menu > ul > li > button { + align-items: center; + color: inherit; + cursor: pointer; + display: flex; + width: 100%; + line-height: 16px; + outline: none; + border: 0; + padding: 3px 12px; + white-space: nowrap; +} +.context-menu > ul > li > a:is(:focus, :hover), +.context-menu > ul > li > button:is(:focus, :hover) { + background: var(--newtab-element-secondary-hover-color); +} +.context-menu > ul > li > a:active, +.context-menu > ul > li > button:active { + background: var(--newtab-element-secondary-active-color); +} +.context-menu > ul > li > a.disabled, +.context-menu > ul > li > button.disabled { + opacity: 0.4; + pointer-events: none; +} + +.confirmation-dialog .modal { + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); + left: 0; + margin: auto; + position: fixed; + right: 0; + top: 20%; + width: 400px; +} +.confirmation-dialog section { + margin: 0; +} +.confirmation-dialog .modal-message { + display: flex; + padding: 16px; + padding-bottom: 0; +} +.confirmation-dialog .modal-message p { + margin: 0; + margin-bottom: 16px; +} +.confirmation-dialog .actions { + border: 0; + display: flex; + flex-wrap: nowrap; + padding: 0 16px; +} +.confirmation-dialog .actions button { + margin-inline-end: 16px; + padding-inline-end: 18px; + padding-inline-start: 18px; + white-space: normal; + width: 50%; +} +.confirmation-dialog .actions button.done { + margin-inline-end: 0; + margin-inline-start: 0; +} +.confirmation-dialog .icon { + margin-inline-end: 16px; +} + +.modal-overlay { + background: var(--newtab-overlay-color); + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 11001; +} + +.modal { + background: var(--newtab-background-color-secondary); + border: 1px solid var(--newtab-border-color); + border-radius: 5px; + font-size: 15px; + z-index: 11002; +} + +@media (height < 700px) { + .personalize-button { + position: absolute; + top: 16px; + inset-inline-end: 16px; + } +} +@media (height >= 700px) { + .personalize-button { + position: fixed; + top: 16px; + inset-inline-end: 16px; + z-index: 1000; + } +} +.personalize-button { + border: 0; + border-radius: 4px; + background-color: transparent; + padding: 15px; +} +.personalize-button:hover { + background-color: var(--newtab-element-hover-color); +} +.personalize-button:active { + background-color: var(--newtab-element-active-color); +} +.personalize-button:focus-visible { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); +} +.personalize-button.personalize-animate-exit-done { + visibility: hidden; +} + +.customize-menu { + color: var(--newtab-text-primary-color); + background-color: var(--newtab-background-color-secondary); + width: 432px; + height: 100%; + position: fixed; + inset-block: 0; + inset-inline-end: 0; + z-index: 1001; + padding: 16px; + overflow: auto; + transform: translateX(435px); + visibility: hidden; + cursor: default; +} +@media (prefers-reduced-motion: no-preference) { + .customize-menu.customize-animate-enter, .customize-menu.customize-animate-exit, .customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-exit-done { + transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 250ms; + } +} +@media (forced-colors: active) { + .customize-menu { + border-inline-start: solid 1px; + } +} +.customize-menu:dir(rtl) { + transform: translateX(-435px); +} +.customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-enter-active { + box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); + visibility: visible; + transform: translateX(0); +} +.customize-menu.customize-animate-exit-active { + box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); +} +.customize-menu .close-button { + margin-inline-start: auto; + margin-bottom: 28px; + white-space: nowrap; + display: block; + background-color: var(--newtab-element-secondary-color); + padding: 8px 10px; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + color: var(--newtab-text-primary-color); + font-size: 13px; + font-weight: 600; +} +.customize-menu .close-button:hover { + background-color: var(--newtab-element-secondary-hover-color); +} +.customize-menu .close-button:hover:active { + background-color: var(--newtab-element-secondary-active-color); +} + +.grid-skip { + display: contents; +} + +.home-section { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(4, auto); + grid-row-gap: 32px; + padding: 0 16px; +} +.home-section .section moz-toggle { + margin-bottom: 10px; +} +.home-section .section .sponsored { + font-size: 14px; + margin-inline-start: 5px; +} +.home-section .section .check-wrapper { + position: relative; +} +.home-section .section .sponsored-checkbox { + margin-inline-start: 2px; + width: 16px; + height: 16px; + vertical-align: middle; + border: 1px solid rgba(0, 0, 0, 0.15); + box-sizing: border-box; + border-radius: 4px; + appearance: none; + background-color: var(--newtab-element-secondary-color); +} +.home-section .section .sponsored-checkbox:checked { + -moz-context-properties: fill; + fill: var(--newtab-primary-element-text-color); + background: url("chrome://global/skin/icons/check.svg") center no-repeat; + background-color: var(--newtab-primary-action-background); +} +@media (forced-colors: active) { + .home-section .section .sponsored-checkbox:checked { + fill: #000; + } +} +.home-section .section .sponsored-checkbox:active + .checkmark { + fill: var(--newtab-element-secondary-color); +} +.home-section .section .selector { + color: var(--newtab-text-primary-color); + width: 118px; + display: block; + border: 1px solid var(--newtab-border-color); + border-radius: 4px; + appearance: none; + padding-block: 7px; + padding-inline: 10px 13px; + margin-inline-start: 2px; + margin-bottom: 2px; + -moz-context-properties: fill; + fill: var(--newtab-text-primary-color); + background: url("chrome://global/skin/icons/arrow-down-12.svg") right no-repeat; + background-size: 8px; + background-origin: content-box; + background-color: var(--newtab-background-color-secondary); +} +.home-section .section .selector:dir(rtl) { + background-position-x: left; +} +.home-section .section .more-info-top-wrapper, +.home-section .section .more-info-pocket-wrapper { + margin-inline-start: -2px; + overflow: hidden; +} +.home-section .section .more-info-top-wrapper .more-information, +.home-section .section .more-info-pocket-wrapper .more-information { + position: relative; + transition: margin-top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895); +} +.home-section .section .more-info-top-wrapper .check-wrapper { + margin-top: 10px; +} +.home-section .divider { + border-top: 1px var(--newtab-border-color) solid; + margin: 0 -16px; +} +.home-section .external-link { + font-size: 14px; + cursor: pointer; + border: 1px solid transparent; + border-radius: 4px; + -moz-context-properties: fill; + fill: var(--newtab-text-primary-color); + background: url("chrome://global/skin/icons/settings.svg") left no-repeat; + background-size: 16px; + padding-inline-start: 21px; + margin-bottom: 20px; + text-decoration: underline; +} +@media (forced-colors: active) { + .home-section .external-link { + padding: 8px 10px; + padding-inline-start: 21px; + } +} +.home-section .external-link:dir(rtl) { + background-position-x: right; +} +.home-section .external-link:hover { + text-decoration: none; +} + +.home-section .section .sponsored-checkbox:focus-visible, +.selector:focus-visible, +.external-link:focus-visible, +.close-button:focus-visible { + border: 1px solid var(--newtab-primary-action-background); + outline: 0; + box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed); +} + +/* stylelint-disable max-nesting-depth */ +.card-outer { + background: var(--newtab-background-color-secondary); + border-radius: 8px; + display: inline-block; + height: 266px; + margin-inline-end: 32px; + position: relative; + width: 100%; +} +.card-outer .context-menu-button { + background-clip: padding-box; + background-color: var(--newtab-background-color-secondary); + background-image: url("chrome://global/skin/icons/more.svg"); + background-position: 55%; + border: 1px solid var(--newtab-border-color); + border-radius: 100%; + box-shadow: 0 2px rgba(12, 12, 13, 0.1); + cursor: pointer; + fill: var(--newtab-text-primary-color); + height: 27px; + inset-inline-end: -13.5px; + opacity: 0; + position: absolute; + top: -13.5px; + transform: scale(0.25); + transition-duration: 150ms; + transition-property: transform, opacity; + width: 27px; +} +.card-outer .context-menu-button:is(:active, :focus) { + opacity: 1; + transform: scale(1); +} +.card-outer:is(:focus):not(.placeholder) { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); + transition: none; +} +.card-outer:hover { + box-shadow: none; + transition: none; +} +.card-outer.placeholder { + background: transparent; +} +.card-outer.placeholder .card-preview-image-outer, +.card-outer.placeholder .card-context { + display: none; +} +.card-outer .card { + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + height: 100%; +} +.card-outer > a { + color: inherit; + display: block; + height: 100%; + outline: none; + position: absolute; + width: 100%; +} +.card-outer > a:is(:focus) .card { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); +} +.card-outer > a:is(.active, :focus) .card { + box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); + transition: box-shadow 150ms; +} +.card-outer > a:is(.active, :focus) .card-title { + color: var(--newtab-primary-action-background); +} +.card-outer:is(:hover, :focus, .active):not(.placeholder) { + outline: none; +} +.card-outer:is(:hover, :focus, .active):not(.placeholder) .context-menu-button { + opacity: 1; + transform: scale(1); + transition-delay: 333ms; +} +.card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title { + color: var(--newtab-primary-action-background); +} +.card-outer:is(:hover, :focus, .active):not(.placeholder) .alternate ~ .card-host-name { + display: none; +} +.card-outer:is(:hover, :focus, .active):not(.placeholder) .card-host-name.alternate { + display: block; +} +.card-outer .card-preview-image-outer { + background-color: var(--newtab-element-secondary-color); + border-radius: 8px 8px 0 0; + height: 122px; + overflow: hidden; + position: relative; +} +.card-outer .card-preview-image-outer::after { + border-bottom: 1px solid var(--newtab-card-hairline-color); + bottom: 0; + content: ""; + position: absolute; + width: 100%; +} +.card-outer .card-preview-image-outer .card-preview-image { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: 100%; + opacity: 0; + transition: opacity 1s cubic-bezier(0.07, 0.95, 0, 1); + width: 100%; +} +.card-outer .card-preview-image-outer .card-preview-image.loaded { + opacity: 1; +} +.card-outer .card-details { + padding: 15px 16px 12px; +} +.card-outer .card-text { + max-height: 78px; + overflow: hidden; +} +.card-outer .card-text.no-host-name, .card-outer .card-text.no-context { + max-height: 97px; +} +.card-outer .card-text.no-host-name.no-context { + max-height: 116px; +} +.card-outer .card-text:not(.no-description) .card-title { + max-height: 57px; + overflow: hidden; +} +.card-outer .card-host-name { + color: var(--newtab-text-secondary-color); + font-size: 10px; + overflow: hidden; + padding-bottom: 4px; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; +} +.card-outer .card-host-name.alternate { + display: none; +} +.card-outer .card-title { + font-size: 14px; + font-weight: 600; + line-height: 19px; + margin: 0 0 2px; + word-wrap: break-word; +} +.card-outer .card-description { + font-size: 12px; + line-height: 19px; + margin: 0; + overflow: hidden; + word-wrap: break-word; +} +.card-outer .card-context { + bottom: 0; + color: var(--newtab-text-secondary-color); + display: flex; + font-size: 11px; + inset-inline-start: 0; + padding: 9px 16px 9px 14px; + position: absolute; +} +.card-outer .card-context-icon { + fill: var(--newtab-text-secondary-color); + height: 22px; + margin-inline-end: 6px; +} +.card-outer .card-context-label { + flex-grow: 1; + line-height: 22px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@media (min-width: 1122px) { + .normal-cards .card-outer { + height: 370px; + } + .normal-cards .card-outer .card-preview-image-outer { + height: 155px; + } + .normal-cards .card-outer .card-details { + padding: 13px 16px 12px; + } + .normal-cards .card-outer .card-text { + max-height: 140px; + } + .normal-cards .card-outer .card-host-name { + font-size: 12px; + padding-bottom: 5px; + } + .normal-cards .card-outer .card-title { + font-size: 17px; + line-height: 23px; + margin-bottom: 0; + } + .normal-cards .card-outer .card-text:not(.no-description) .card-title { + max-height: 69px; + } + .normal-cards .card-outer .card-description { + font-size: 15px; + line-height: 23px; + } + .normal-cards .card-outer .card-context { + bottom: 4px; + font-size: 14px; + } +} + +.compact-cards .card-outer { + height: 160px; +} +.compact-cards .card-outer .card-preview-image-outer { + height: 108px; +} +.compact-cards .card-outer .card-details { + padding: 12px 16px; +} +.compact-cards .card-outer .card-host-name { + line-height: 10px; +} +.compact-cards .card-outer .card-text .card-title, .compact-cards .card-outer .card-text:not(.no-description) .card-title { + font-size: 12px; + line-height: 13px; + max-height: 17px; + overflow: hidden; + padding: 0 0 4px; + text-overflow: ellipsis; + white-space: nowrap; +} +.compact-cards .card-outer .card-description { + display: none; +} +.compact-cards .card-outer .card-context { + background-color: var(--newtab-background-color-secondary); + border-radius: 16px; + clip-path: inset(-1px -1px 4px); + height: 32px; + width: 32px; + padding: 8px; + top: 91px; + inset-inline-end: 12px; + inset-inline-start: auto; +} +.compact-cards .card-outer .card-context::after { + border: 1px solid var(--newtab-card-hairline-color); + border-bottom: 0; + border-radius: 17px 17px 0 0; + content: ""; + position: absolute; + height: 17px; + width: 34px; + top: -1px; + left: -1px; +} +.compact-cards .card-outer .card-context .card-context-icon { + margin-inline-end: 0; + height: 16px; + width: 16px; +} +.compact-cards .card-outer .card-context .card-context-icon.icon-bookmark-added { + fill: #0A84FF; +} +.compact-cards .card-outer .card-context .card-context-icon.icon-download { + fill: #12BC00; +} +.compact-cards .card-outer .card-context .card-context-icon.icon-pocket { + fill: #EF4056; +} +.compact-cards .card-outer .card-context .card-context-label { + display: none; +} +@media not all and (min-width: 1122px) { + .compact-cards .hide-for-narrow { + display: none; + } +} + +/* stylelint-disable max-nesting-depth */ +.collapsible-section { + padding: 10px 25px; +} +.collapsible-section .section-title-container { + margin: 0; +} +.collapsible-section .section-title-container.has-subtitle { + display: flex; + flex-direction: column; +} +@media (min-width: 866px) { + .collapsible-section .section-title-container.has-subtitle { + flex-direction: row; + align-items: baseline; + justify-content: space-between; + } +} +.collapsible-section .section-title { + font-size: 17px; + font-weight: 600; + color: var(--newtab-text-primary-color); +} +.collapsible-section .section-title.grey-title { + color: var(--newtab-text-primary-color); + display: inline-block; + fill: var(--newtab-text-primary-color); + vertical-align: middle; +} +.collapsible-section .section-title .section-title-contents { + vertical-align: top; +} +@media (max-width: 609px) { + .collapsible-section .section-title .section-title-contents { + display: block; + } + .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper { + display: block; + text-align: center; + } + .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper .learn-more-link { + margin-inline-start: 0; + } +} +.collapsible-section .section-sub-title { + font-size: 14px; + line-height: 16px; + color: var(--newtab-text-secondary-color); + opacity: 0.3; +} +.collapsible-section .section-top-bar { + min-height: 19px; + margin-bottom: 13px; + position: relative; +} +.collapsible-section.active { + background: var(--newtab-element-hover-color); + border-radius: 4px; +} +.collapsible-section .learn-more-link { + font-size: 13px; + margin-inline-start: 12px; +} +.collapsible-section .learn-more-link a { + color: var(--newtab-primary-action-background); +} +.collapsible-section .section-body-fallback { + height: 266px; +} +.collapsible-section .section-body { + margin: 0 -7px; + padding: 0 7px; +} +.collapsible-section .section-body.animating { + overflow: hidden; + pointer-events: none; +} +.collapsible-section[data-section-id=topsites] .section-top-bar { + display: none; +} +@media (min-width: 610px) and (max-width: 865px) { + .collapsible-section[data-section-id=topstories] .card-outer:first-child { + display: none; + } +} + +/* stylelint-disable max-nesting-depth */ +.discoverystream-admin-toggle { + position: fixed; + top: 50px; + inset-inline-end: 15px; + border: 0; + background: none; + z-index: 1; + border-radius: 2px; +} +.discoverystream-admin-toggle .icon-devtools { + background-image: url("chrome://global/skin/icons/developer.svg"); + padding: 15px; +} +.discoverystream-admin-toggle:dir(rtl) { + transform: scaleX(-1); +} +.discoverystream-admin-toggle:hover { + background: var(--newtab-element-hover-color); +} +.discoverystream-admin-toggle.expanded { + background: rgba(0, 0, 0, 0.2); +} + +.discoverystream-admin { + position: fixed; + top: 0; + inset-inline-start: 0; + width: 100%; + background: var(--newtab-background-color); + height: 100%; + overflow-y: scroll; + margin: 0 auto; + font-size: 14px; + padding-inline-start: 240px; + color: var(--newtab-text-primary-color); +} +.discoverystream-admin.collapsed { + display: none; +} +.discoverystream-admin .sidebar { + inset-inline-start: 0; + position: fixed; + width: 240px; + padding: 30px 20px; +} +.discoverystream-admin .sidebar ul { + margin: 0; + padding: 0; + list-style: none; +} +.discoverystream-admin .sidebar li a { + padding: 10px 34px; + display: block; + color: var(--lwt-sidebar-text-color); +} +.discoverystream-admin .sidebar li a:hover { + background: var(--newtab-background-color-secondary); +} +.discoverystream-admin h1 { + font-weight: 200; + font-size: 32px; +} +.discoverystream-admin h2 .button, +.discoverystream-admin p .button { + font-size: 14px; + padding: 6px 12px; + margin-inline-start: 5px; + margin-bottom: 0; +} +.discoverystream-admin .general-textarea { + direction: ltr; + width: 740px; + height: 500px; + overflow: auto; + resize: none; + border-radius: 4px; + display: flex; +} +.discoverystream-admin .wnp-textarea { + direction: ltr; + width: 740px; + height: 500px; + overflow: auto; + resize: none; + border-radius: 4px; + display: flex; +} +.discoverystream-admin .json-button { + display: inline-flex; + font-size: 10px; + padding: 4px 10px; + margin-bottom: 6px; + margin-inline-end: 4px; +} +.discoverystream-admin .json-button:hover { + background-color: var(--newtab-element-hover-color); + box-shadow: none; +} +.discoverystream-admin table { + border-collapse: collapse; + width: 100%; +} +.discoverystream-admin table.minimal-table { + border-collapse: collapse; + border: 1px solid var(--newtab-border-color); +} +.discoverystream-admin table.minimal-table td { + padding: 8px; +} +.discoverystream-admin table.minimal-table td:first-child { + width: 1%; + white-space: nowrap; +} +.discoverystream-admin table.minimal-table td:not(:first-child) { + font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; +} +.discoverystream-admin table.errorReporting tr { + border: 1px solid var(--newtab-background-color-secondary); +} +.discoverystream-admin table.errorReporting td { + padding: 4px; +} +.discoverystream-admin table.errorReporting td[rowspan] { + border: 1px solid var(--newtab-background-color-secondary); +} +.discoverystream-admin .sourceLabel { + background: var(--newtab-background-color-secondary); + padding: 2px 5px; + border-radius: 3px; +} +.discoverystream-admin .sourceLabel.isDisabled { + background: rgba(215, 0, 34, 0.3); + color: var(--newtab-status-error); +} +.discoverystream-admin .message-item:first-child td { + border-top: 1px solid var(--newtab-border-color); +} +.discoverystream-admin .message-item td { + vertical-align: top; + padding: 8px; + border-bottom: 1px solid var(--newtab-border-color); +} +.discoverystream-admin .message-item td.min { + width: 1%; + white-space: nowrap; +} +.discoverystream-admin .message-item td.message-summary { + width: 60%; +} +.discoverystream-admin .message-item td.button-column { + width: 15%; +} +.discoverystream-admin .message-item td:first-child { + border-inline-start: 1px solid var(--newtab-border-color); +} +.discoverystream-admin .message-item td:last-child { + border-inline-end: 1px solid var(--newtab-border-color); +} +.discoverystream-admin .message-item.blocked .message-id, +.discoverystream-admin .message-item.blocked .message-summary { + opacity: 0.5; +} +.discoverystream-admin .message-item.blocked .message-id { + opacity: 0.5; +} +.discoverystream-admin .message-item .message-id { + font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; + font-size: 12px; +} +.discoverystream-admin .providerUrl { + font-size: 12px; +} +.discoverystream-admin pre { + background: var(--newtab-background-color-secondary); + margin: 0; + padding: 8px; + font-size: 12px; + max-width: 750px; + overflow: auto; + font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; +} +.discoverystream-admin .errorState { + border: 1px solid var(--newtab-status-error); +} +.discoverystream-admin .helpLink { + padding: 10px; + display: flex; + background: rgba(0, 0, 0, 0.1); + border-radius: 3px; + align-items: center; +} +.discoverystream-admin .helpLink a { + text-decoration: underline; +} +.discoverystream-admin .helpLink .icon { + min-width: 18px; + min-height: 18px; +} +.discoverystream-admin .ds-component { + margin-bottom: 20px; +} +.discoverystream-admin .modalOverlayInner { + height: 80%; +} +.discoverystream-admin .clearButton { + border: 0; + padding: 4px; + border-radius: 4px; + display: flex; +} +.discoverystream-admin .clearButton:hover { + background: var(--newtab-element-hover-color); +} +.discoverystream-admin .collapsed { + display: none; +} +.discoverystream-admin .icon { + display: inline-table; + cursor: pointer; + width: 18px; + height: 18px; +} +.discoverystream-admin .button:disabled, .discoverystream-admin .button:disabled:active { + opacity: 0.5; + cursor: unset; + box-shadow: none; +} +.discoverystream-admin .impressions-section { + display: flex; + flex-direction: column; + gap: 16px; +} +.discoverystream-admin .impressions-section .impressions-item { + display: flex; + flex-flow: column nowrap; + padding: 8px; + border: 1px solid var(--newtab-border-color); + border-radius: 5px; +} +.discoverystream-admin .impressions-section .impressions-item .impressions-inner-box { + display: flex; + flex-flow: row nowrap; + gap: 8px; +} +.discoverystream-admin .impressions-section .impressions-item .impressions-category { + font-size: 1.15em; + white-space: nowrap; + flex-grow: 0.1; +} +.discoverystream-admin .impressions-section .impressions-item .impressions-buttons { + display: flex; + flex-direction: column; + gap: 8px; +} +.discoverystream-admin .impressions-section .impressions-item .impressions-buttons button { + margin: 0; +} +.discoverystream-admin .impressions-section .impressions-item .impressions-editor { + display: flex; + flex-grow: 1.5; +} +.discoverystream-admin .impressions-section .impressions-item .impressions-editor .general-textarea { + width: auto; + flex-grow: 1; +} + +.pocket-logged-in-cta { + font-size: 13px; + margin-inline-end: 20px; + display: flex; + align-items: flex-start; +} +.pocket-logged-in-cta .pocket-cta-button { + white-space: nowrap; + background: var(--newtab-primary-action-background); + letter-spacing: -0.34px; + color: #FFF; + border-radius: 4px; + cursor: pointer; + max-width: 130px; + margin-top: -1px; + min-height: 18px; + padding: 0 8px; + display: inline-flex; + justify-content: center; + align-items: center; + font-size: 11px; + margin-inline-end: 10px; +} +.pocket-logged-in-cta .cta-text { + font-weight: normal; + font-size: 13px; + line-height: 1.2307692308; +} +.pocket-logged-in-cta .pocket-cta-button, +.pocket-logged-in-cta .cta-text { + vertical-align: top; +} + +.more-recommendations { + display: flex; + align-items: center; + white-space: nowrap; + line-height: 1.2307692308; +} +.more-recommendations::after { + background: url("chrome://global/skin/icons/arrow-right-12.svg") no-repeat center center; + content: ""; + -moz-context-properties: fill; + display: inline-block; + fill: var(--newtab-primary-action-background); + height: 16px; + margin-inline-start: 5px; + vertical-align: top; + width: 12px; +} +.more-recommendations:dir(rtl)::after { + background-image: url("chrome://global/skin/icons/arrow-left-12.svg"); +} + +.discovery-stream.ds-layout { + --gridColumnGap: 48px; + --gridRowGap: 24px; + grid-template-columns: repeat(12, 1fr); + grid-column-gap: var(--gridColumnGap); + grid-row-gap: var(--gridRowGap); + margin: 0 auto; +} +.discovery-stream.ds-layout .ds-column-12 { + grid-column-start: auto; + grid-column-end: span 12; +} +.discovery-stream.ds-layout .ds-column-11 { + grid-column-start: auto; + grid-column-end: span 11; +} +.discovery-stream.ds-layout .ds-column-10 { + grid-column-start: auto; + grid-column-end: span 10; +} +.discovery-stream.ds-layout .ds-column-9 { + grid-column-start: auto; + grid-column-end: span 9; +} +.discovery-stream.ds-layout .ds-column-8 { + grid-column-start: auto; + grid-column-end: span 8; +} +.discovery-stream.ds-layout .ds-column-7 { + grid-column-start: auto; + grid-column-end: span 7; +} +.discovery-stream.ds-layout .ds-column-6 { + grid-column-start: auto; + grid-column-end: span 6; +} +.discovery-stream.ds-layout .ds-column-5 { + grid-column-start: auto; + grid-column-end: span 5; +} +.discovery-stream.ds-layout .ds-column-4 { + grid-column-start: auto; + grid-column-end: span 4; +} +.discovery-stream.ds-layout .ds-column-3 { + grid-column-start: auto; + grid-column-end: span 3; +} +.discovery-stream.ds-layout .ds-column-2 { + grid-column-start: auto; + grid-column-end: span 2; +} +.discovery-stream.ds-layout .ds-column-1 { + grid-column-start: auto; + grid-column-end: span 1; +} +.discovery-stream.ds-layout .ds-column-grid { + display: grid; + grid-row-gap: var(--gridRowGap); +} +.discovery-stream.ds-layout .ds-column-grid > div:empty { + display: none; +} + +.ds-header { + margin: 8px 0; +} +.ds-header .ds-context { + font-weight: 400; +} + +.ds-header, +.ds-layout .section-title span { + color: var(--newtab-text-primary-color); + font-size: 17px; + font-weight: 600; + line-height: 20px; +} +.ds-header .icon, +.ds-layout .section-title span .icon { + fill: var(--newtab-text-secondary-color); +} + +.collapsible-section.ds-layout { + margin: auto; +} +.collapsible-section.ds-layout .section-top-bar .learn-more-link a { + color: var(--newtab-primary-action-background); + font-weight: 500; +} +.collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { + text-decoration: none; +} + +.activity-stream.modal-open { + overflow: hidden; +} + +.modalOverlayOuter { + background: var(--newtab-overlay-color); + height: 100%; + position: fixed; + top: 0; + left: 0; + width: 100%; + display: none; + z-index: 1100; + overflow: auto; +} +.modalOverlayOuter.active { + display: flex; +} + +.modalOverlayInner { + min-width: min-content; + width: 100%; + max-width: 960px; + position: relative; + margin: auto; + background: var(--newtab-background-color-secondary); + box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); + border-radius: 4px; + display: none; + z-index: 1100; +} +@media (width <= 960px) { + .modalOverlayInner { + height: 100%; + top: 0; + left: 0; + box-shadow: none; + border-radius: 0; + } +} +.modalOverlayInner.active { + display: block; +} +.modalOverlayInner h2 { + color: var(--newtab-text-primary-color); + text-align: center; + font-weight: 200; + margin-top: 30px; + font-size: 28px; + line-height: 37px; + letter-spacing: -0.13px; +} +@media (width <= 960px) { + .modalOverlayInner h2 { + margin-top: 100px; + } +} +@media (width <= 850px) { + .modalOverlayInner h2 { + margin-top: 30px; + } +} +.modalOverlayInner .footer { + border-top: 1px solid var(--newtab-border-color); + border-radius: 4px; + height: 70px; + width: 100%; + position: absolute; + bottom: 0; + text-align: center; + background-color: #FFF; +} +@media (width <= 850px) and (height <= 730px) { + .modalOverlayInner .footer { + position: sticky; + } +} +@media (width <= 650px) and (height <= 600px) { + .modalOverlayInner .footer { + position: sticky; + } +} +.modalOverlayInner .footer .modalButton { + margin-top: 20px; + min-width: 150px; + height: 30px; + padding: 4px 30px 6px; + font-size: 15px; +} +.modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover { + box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); + transition: box-shadow 150ms; +} + +.ds-onboarding-container, +.ds-card-grid .ds-card { + background: #FFF; + border-radius: 4px; +} +[lwt-newtab-brighttext] .ds-onboarding-container, +[lwt-newtab-brighttext] .ds-card-grid .ds-card { + background: none; +} +.ds-onboarding-container:not(.placeholder), +.ds-card-grid .ds-card:not(.placeholder) { + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); +} +[lwt-newtab-brighttext] .ds-onboarding-container:not(.placeholder), +[lwt-newtab-brighttext] .ds-card-grid .ds-card:not(.placeholder) { + background: var(--newtab-background-color-secondary); +} +.ds-onboarding-container:not(.placeholder) .img-wrapper .img img, +.ds-onboarding-container:not(.placeholder) .img-wrapper .img .placeholder-image, +.ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img img, +.ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img .placeholder-image { + border-radius: 8px 8px 0 0; +} + +.ds-onboarding-container { + padding-inline-start: 16px; + padding-inline-end: 16px; + margin-bottom: 24px; + position: relative; +} +@media (min-width: 610px) { + .ds-onboarding-container { + padding-inline-end: 48px; + } +} +@media (min-width: 866px) { + .ds-onboarding-container { + padding-inline-end: 56px; + } +} +.ds-onboarding-container .ds-onboarding { + position: static; + display: flex; +} +.ds-onboarding-container .ds-onboarding .ds-dismiss-button { + inset-inline-end: 8px; + top: 8px; +} +.ds-onboarding-container header { + display: flex; + margin: 32px 0 8px; + font-size: 17px; + line-height: 23.8px; + font-weight: 600; + color: #EF4056; +} +[lwt-newtab-brighttext] .ds-onboarding-container header { + color: var(--newtab-background-color-primary); +} +@media (min-width: 610px) { + .ds-onboarding-container header { + margin: 16px 0 8px; + display: block; + height: 24px; + } +} +.ds-onboarding-container p { + margin: 8px 0 16px; + font-size: 13px; + line-height: 19.5px; +} +.ds-onboarding-container .icon-pocket { + fill: #EF4056; + margin-top: 3px; + margin-inline-end: 8px; + height: 22px; + width: 22px; + background-image: url("chrome://global/skin/icons/pocket.svg"); + background-size: contain; +} +[lwt-newtab-brighttext] .ds-onboarding-container .icon-pocket { + fill: var(--newtab-text-primary-color); +} +@media (forced-colors: active) { + [lwt-newtab-brighttext] .ds-onboarding-container .icon-pocket { + fill: CurrentColor; + } +} +@media (forced-colors: active) { + .ds-onboarding-container .icon-pocket { + fill: CurrentColor; + } +} +@media (min-width: 610px) { + .ds-onboarding-container .icon-pocket { + margin-top: -5px; + margin-inline-start: -2px; + margin-inline-end: 15px; + height: 30px; + width: 30px; + } +} +.ds-onboarding-container .ds-onboarding-graphic { + background-image: image-set(url("chrome://activity-stream/content/data/content/assets/pocket-onboarding.avif"), url("chrome://activity-stream/content/data/content/assets/pocket-onboarding@2x.avif") 2x); + border-radius: 8px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + height: 120px; + width: 200px; + margin-top: 16px; + margin-bottom: 16px; + margin-inline-start: 54px; + flex-shrink: 0; + display: none; +} +@media (min-width: 866px) { + .ds-onboarding-container .ds-onboarding-graphic { + display: block; + } +} + +.ds-card-grid { + display: grid; + grid-gap: 24px; +} +.ds-card-grid.ds-card-grid-compact { + grid-gap: 20px; +} +@media (min-width: 610px) and (max-width: 866px) { + .ds-card-grid.ds-card-grid-recent-saves .ds-card:last-child:nth-child(2n-1) { + display: none; + } +} +.ds-card-grid .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); + transition: none; + border-radius: 8px; +} +.ds-column-5 .ds-card-grid, .ds-column-6 .ds-card-grid, .ds-column-7 .ds-card-grid, .ds-column-8 .ds-card-grid { + grid-template-columns: repeat(2, 1fr); +} +.ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { + grid-template-columns: repeat(1, 1fr); +} +@media (min-width: 610px) { + .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 866px) { + .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid { + grid-template-columns: repeat(3, 1fr); + } +} +.ds-column-9 .ds-card-grid .title, .ds-column-10 .ds-card-grid .title, .ds-column-11 .ds-card-grid .title, .ds-column-12 .ds-card-grid .title { + font-size: 17px; + line-height: 24px; +} +.ds-column-9 .ds-card-grid .excerpt, .ds-column-10 .ds-card-grid .excerpt, .ds-column-11 .ds-card-grid .excerpt, .ds-column-12 .ds-card-grid .excerpt { + font-size: 15px; + -webkit-line-clamp: 3; + line-height: 24px; +} +.ds-card-grid.empty { + grid-template-columns: auto; +} +.ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant { + grid-template-columns: repeat(1, 1fr); +} +@media (min-width: 610px) { + .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant { + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 866px) { + .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant { + grid-template-columns: repeat(3, 1fr); + } +} +@media (min-width: 1122px) { + .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant { + grid-template-columns: repeat(4, 1fr); + } +} +.ds-card-grid.ds-card-grid-four-card-variant .ds-card.placeholder { + min-height: 247px; +} +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-footer { + margin-top: 8px; +} +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source, +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label, +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label { + color: var(--newtab-text-secondary-color); + -webkit-line-clamp: 2; +} +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source, +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label { + font-size: 13px; +} +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label { + font-size: 11.7px; +} +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-badge-icon { + margin-inline-end: 2px; + margin-bottom: 2px; + height: 14px; + width: 14px; + background-size: 14px; +} +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .title { + font-size: 14px; + line-height: 20px; +} +.ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .info-wrap { + flex-grow: 0; +} +.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout { + grid-template-columns: repeat(1, 1fr); +} +@media (min-width: 610px) { + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout { + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 866px) { + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout { + grid-template-columns: repeat(3, 1fr); + } +} +@media (height <= 1065px) { + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt { + display: none; + } +} +@media (max-width: 1122px) { + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder { + min-height: 247px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer { + margin-top: 8px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, +.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, +.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, +.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, +.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { + color: var(--newtab-text-secondary-color); + -webkit-line-clamp: 2; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label { + font-size: 13px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { + font-size: 11.7px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon { + margin-inline-end: 2px; + margin-bottom: 2px; + height: 14px; + width: 14px; + background-size: 14px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title { + font-size: 14px; + line-height: 20px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap { + flex-grow: 0; + } +} +@media (min-width: 1122px) and (height <= 964px) { + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout { + grid-template-columns: repeat(4, 1fr); + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder { + min-height: 247px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer { + margin-top: 8px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, +.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, +.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, +.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, +.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { + color: var(--newtab-text-secondary-color); + -webkit-line-clamp: 2; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source, +.ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label { + font-size: 13px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label { + font-size: 11.7px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon { + margin-inline-end: 2px; + margin-bottom: 2px; + height: 14px; + width: 14px; + background-size: 14px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title { + font-size: 14px; + line-height: 20px; + } + .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap { + flex-grow: 0; + } +} + +.outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder), +.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) { + box-shadow: none; + background: none; +} +.outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus, +.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus { + box-shadow: none; +} +.outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img, +.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); +} +.outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .img-wrapper .img img, +.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .img-wrapper .img img { + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); +} +.outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .meta, +.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .meta { + padding: 12px 0 0; +} + +.ds-layout .ds-sub-header { + margin-top: 24px; +} +.ds-layout .ds-sub-header .section-title-container { + flex-direction: row; + align-items: baseline; + justify-content: space-between; + display: flex; +} +.ds-layout .ds-sub-header .section-sub-link { + color: var(--newtab-primary-action-background); + font-size: 14px; + line-height: 16px; + cursor: pointer; +} +.ds-layout .ds-sub-header .section-sub-link:hover { + text-decoration: underline; +} +.ds-layout .ds-sub-header .section-sub-link:active { + color: var(--newtab-primary-element-active-color); +} + +.ds-dismiss.ds-dismiss-ds-collection .ds-dismiss-button { + margin: 15px 0 0; + inset-inline-end: 25px; +} +.ds-dismiss.ds-dismiss-ds-collection.hovering { + background: var(--newtab-element-hover-color); +} + +.ds-collection-card-grid { + padding: 10px 25px 25px; + margin: 0 0 20px; +} +.ds-collection-card-grid .story-footer { + display: none; +} +.ds-collection-card-grid .ds-header { + padding: 0 40px 0 0; + margin-bottom: 12px; +} +.ds-collection-card-grid .ds-header .title { + color: var(--newtab-text-primary-color); + font-weight: 600; + font-size: 17px; + line-height: 24px; +} +.ds-collection-card-grid .ds-header .ds-context { + color: var(--newtab-text-secondary-color); + font-weight: normal; + font-size: 13px; + line-height: 24px; +} + +/* stylelint-disable max-nesting-depth */ +.ds-highlights .section .section-list { + grid-gap: var(--gridRowGap); + grid-template-columns: repeat(1, 1fr); +} +@media (min-width: 610px) { + .ds-highlights .section .section-list { + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 866px) { + .ds-highlights .section .section-list { + grid-template-columns: repeat(4, 1fr); + } +} +.ds-highlights .section .section-list .card-outer { + height: 175px; +} +.ds-highlights .section .section-list .card-outer .card-host-name { + font-size: 13px; + line-height: 20px; + margin-bottom: 2px; + padding-bottom: 0; + text-transform: unset; +} +.ds-highlights .section .section-list .card-outer .card-title { + font-size: 14px; + font-weight: 600; + line-height: 20px; + max-height: 20px; +} +.ds-highlights .section .section-list .card-outer a { + text-decoration: none; +} +.ds-highlights .hide-for-narrow { + display: block; +} + +.ds-hr { + border: 0; + border-top: 1px solid #D7D7DB; + height: 0; +} +[lwt-newtab-brighttext] .ds-hr { + border-top: 1px solid #4A4A4F; +} + +/* stylelint-disable max-nesting-depth */ +.ds-navigation { + color: var(--newtab-text-primary-color); + font-size: 11.5px; + font-weight: 500; + line-height: 22px; + padding: 4px 0; +} +@media (min-width: 1122px) { + .ds-navigation { + line-height: 32px; + font-size: 14px; + } +} +.ds-navigation.ds-navigation-centered { + text-align: center; +} +.ds-navigation.ds-navigation-right-aligned { + text-align: end; +} +.ds-navigation ul { + display: inline; + margin: 0; + padding: 0; +} +.ds-navigation ul li { + display: inline-block; +} +.ds-navigation ul li::after { + content: "·"; + padding: 6px; +} +.ds-navigation ul li:last-child::after { + content: none; +} +.ds-navigation ul li a:hover, .ds-navigation ul li a:active { + text-decoration: none; +} +.ds-navigation ul li a:active { + color: var(--newtab-primary-element-active-color); +} +.ds-navigation .ds-navigation-header { + padding-inline-end: 6px; +} +.ds-navigation .ds-navigation-privacy { + padding-inline-start: 6px; + float: inline-end; +} +.ds-navigation .ds-navigation-privacy:hover { + text-decoration: none; +} +.ds-navigation.ds-navigation-new-topics { + display: block; + padding-top: 32px; +} +.ds-navigation.ds-navigation-new-topics .ds-navigation-header { + font-size: 14px; + line-height: 20px; + font-weight: 700; + display: inline-block; + margin-bottom: 8px; +} +.ds-navigation.ds-navigation-new-topics .ds-navigation-family { + text-align: center; + font-size: 14px; + line-height: 20px; + margin: 16px auto 28px; +} +.ds-navigation.ds-navigation-new-topics .ds-navigation-family span { + margin: 0 6px; +} +.ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo, +.ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo { + height: 20px; + width: 20px; + background-size: cover; +} +.ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo { + background-image: url("chrome://activity-stream/content/data/content/assets/firefox.svg"); +} +.ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo { + background-image: url("chrome://global/skin/icons/pocket.svg"); + fill: #EF4056; +} +.ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message { + font-weight: 400; + display: block; +} +@media (min-width: 610px) { + .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message { + display: inline; + } +} +@media (min-width: 610px) { + .ds-navigation.ds-navigation-new-topics .ds-navigation-family { + margin-top: 43px; + } +} +.ds-navigation.ds-navigation-new-topics ul { + display: grid; + grid-gap: 0 24px; + grid-auto-flow: column; + grid-template: repeat(8, 1fr)/repeat(1, 1fr); +} +.ds-navigation.ds-navigation-new-topics ul li { + border-top: 1px solid var(--newtab-border-color); + line-height: 24px; + font-size: 13px; + font-weight: 500; +} +.ds-navigation.ds-navigation-new-topics ul li::after { + content: ""; + padding: 0; +} +.ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) { + display: none; +} +.ds-navigation.ds-navigation-new-topics ul li:nth-last-child(1) { + border-bottom: 1px solid var(--newtab-border-color); +} +@media (min-width: 610px) { + .ds-navigation.ds-navigation-new-topics ul { + grid-template: repeat(3, 1fr)/repeat(2, 1fr); + } + .ds-navigation.ds-navigation-new-topics ul li:nth-child(3) { + border-bottom: 1px solid var(--newtab-border-color); + } +} +@media (min-width: 866px) { + .ds-navigation.ds-navigation-new-topics ul { + grid-template: repeat(2, 1fr)/repeat(3, 1fr); + } + .ds-navigation.ds-navigation-new-topics ul li:nth-child(odd) { + border-bottom: 0; + } + .ds-navigation.ds-navigation-new-topics ul li:nth-child(even) { + border-bottom: 1px solid var(--newtab-border-color); + } +} +@media (min-width: 1122px) { + .ds-navigation.ds-navigation-new-topics ul { + grid-template: repeat(2, 1fr)/repeat(4, 1fr); + } + .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) { + display: block; + } +} + +.ds-section-title { + text-align: center; + margin-top: 24px; +} +.ds-section-title .title { + color: var(--newtab-text-primary-color); + line-height: 48px; + font-size: 36px; + font-weight: 300; +} +.ds-section-title .subtitle { + line-height: 24px; + font-size: 14px; + color: var(--newtab-text-secondary-color); + margin-top: 4px; +} + +/* stylelint-disable max-nesting-depth */ +.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); +} +.outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner { + box-shadow: 0 0 0 5px var(--newtab-background-color-secondary); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; +} +.outer-wrapper .ds-top-sites .top-sites .top-sites-list { + margin: 0 -12px; +} + +.ds-column-5 .ds-top-sites .top-site-outer, +.ds-column-6 .ds-top-sites .top-site-outer, +.ds-column-7 .ds-top-sites .top-site-outer, +.ds-column-8 .ds-top-sites .top-site-outer { + padding: 0 10px; +} +.ds-column-5 .ds-top-sites .top-sites-list, +.ds-column-6 .ds-top-sites .top-sites-list, +.ds-column-7 .ds-top-sites .top-sites-list, +.ds-column-8 .ds-top-sites .top-sites-list { + margin: 0 -10px; +} +.ds-column-5 .ds-top-sites .top-site-inner, +.ds-column-6 .ds-top-sites .top-site-inner, +.ds-column-7 .ds-top-sites .top-site-inner, +.ds-column-8 .ds-top-sites .top-site-inner { + --leftPanelIconWidth: 84.67px; +} +.ds-column-5 .ds-top-sites .top-site-inner .tile, +.ds-column-6 .ds-top-sites .top-site-inner .tile, +.ds-column-7 .ds-top-sites .top-site-inner .tile, +.ds-column-8 .ds-top-sites .top-site-inner .tile { + width: var(--leftPanelIconWidth); + height: var(--leftPanelIconWidth); +} +.ds-column-5 .ds-top-sites .top-site-inner .title, +.ds-column-6 .ds-top-sites .top-site-inner .title, +.ds-column-7 .ds-top-sites .top-site-inner .title, +.ds-column-8 .ds-top-sites .top-site-inner .title { + width: var(--leftPanelIconWidth); +} + +.ds-column-1 .ds-top-sites .top-site-outer, +.ds-column-2 .ds-top-sites .top-site-outer, +.ds-column-3 .ds-top-sites .top-site-outer, +.ds-column-4 .ds-top-sites .top-site-outer { + padding: 0 8px; +} +.ds-column-1 .ds-top-sites .top-sites-list, +.ds-column-2 .ds-top-sites .top-sites-list, +.ds-column-3 .ds-top-sites .top-sites-list, +.ds-column-4 .ds-top-sites .top-sites-list { + margin: 0 -8px; +} +.ds-column-1 .ds-top-sites .top-site-inner, +.ds-column-2 .ds-top-sites .top-site-inner, +.ds-column-3 .ds-top-sites .top-site-inner, +.ds-column-4 .ds-top-sites .top-site-inner { + --rightPanelIconWidth: 82.67px; +} +.ds-column-1 .ds-top-sites .top-site-inner .tile, +.ds-column-2 .ds-top-sites .top-site-inner .tile, +.ds-column-3 .ds-top-sites .top-site-inner .tile, +.ds-column-4 .ds-top-sites .top-site-inner .tile { + width: var(--rightPanelIconWidth); + height: var(--rightPanelIconWidth); +} +.ds-column-1 .ds-top-sites .top-site-inner .title, +.ds-column-2 .ds-top-sites .top-site-inner .title, +.ds-column-3 .ds-top-sites .top-site-inner .title, +.ds-column-4 .ds-top-sites .top-site-inner .title { + width: var(--rightPanelIconWidth); +} + +.ds-card .context-menu-button, +.ds-signup .context-menu-button { + background-clip: padding-box; + background-color: var(--newtab-background-color-secondary); + background-image: url("chrome://global/skin/icons/more.svg"); + background-position: 55%; + border: 1px solid var(--newtab-border-color); + border-radius: 100%; + box-shadow: 0 2px rgba(12, 12, 13, 0.1); + cursor: pointer; + fill: var(--newtab-text-primary-color); + height: 27px; + inset-inline-end: -13.5px; + opacity: 0; + position: absolute; + top: -13.5px; + transform: scale(0.25); + transition-duration: 150ms; + transition-property: transform, opacity; + width: 27px; +} +.ds-card .context-menu-button:is(:active, :focus), +.ds-signup .context-menu-button:is(:active, :focus) { + opacity: 1; + transform: scale(1); +} +.ds-card .context-menu, +.ds-signup .context-menu { + opacity: 0; +} +.ds-card.active .context-menu, +.ds-signup.active .context-menu { + opacity: 1; +} +.ds-card.last-item .context-menu, +.ds-signup.last-item .context-menu { + margin-inline-end: 5px; + margin-inline-start: auto; + inset-inline-end: 0; + inset-inline-start: auto; +} +.ds-card.last-item .context-menu, +.ds-signup.last-item .context-menu { + opacity: 1; +} +.ds-card:is(:hover, :focus, .active), +.ds-signup:is(:hover, :focus, .active) { + outline: none; +} +.ds-card:is(:hover, :focus, .active) .context-menu-button, +.ds-signup:is(:hover, :focus, .active) .context-menu-button { + opacity: 1; + transform: scale(1); + transition-delay: 333ms; +} + +.ds-card { + display: flex; + flex-direction: column; + position: relative; +} +.ds-card.placeholder { + background: transparent; + box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color); + border-radius: 4px; + min-height: 300px; +} +.ds-card .img-wrapper { + width: 100%; + position: relative; +} +.ds-card .card-stp-button-hover-background { + opacity: 0; + width: 100%; + position: absolute; + top: 0; + height: 0; + transition: opacity; + transition-duration: 0s; + padding-top: 50%; + pointer-events: none; + background: rgba(0, 0, 0, 0.4); + border-radius: 8px 8px 0 0; +} +.ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper { + position: absolute; + inset-inline-end: 10px; + top: 10px; + display: flex; + justify-content: end; + align-items: center; +} +.ds-card .card-stp-button-hover-background .icon-pocket-save, +.ds-card .card-stp-button-hover-background .icon-pocket { + margin-inline-end: 4px; + height: 15px; + width: 15px; + background-size: 15px; + fill: #FFF; +} +.ds-card .card-stp-button-hover-background .context-menu-button { + position: static; + transition: none; + border-radius: 3px; +} +.ds-card .card-stp-button-hover-background .context-menu-position-container { + position: relative; +} +.ds-card .card-stp-button-hover-background .context-menu { + margin-inline-start: 18.5px; + inset-inline-start: auto; + position: absolute; + top: 20.25px; +} +.ds-card .card-stp-button-hover-background .card-stp-button { + display: flex; + margin-inline-end: 7px; + font-weight: 400; + font-size: 13px; + line-height: 16px; + background-color: #EF4056; + border: 0; + border-radius: 4px; + padding: 6px; + white-space: nowrap; + color: #FFF; +} +.ds-card .card-stp-button-hover-background button, +.ds-card .card-stp-button-hover-background .context-menu { + pointer-events: auto; +} +.ds-card .card-stp-button-hover-background button { + cursor: pointer; +} +.ds-card.last-item .card-stp-button-hover-background .context-menu { + margin-inline-start: auto; + margin-inline-end: 18.5px; +} +.ds-card.active .card-stp-button-hover-background, .ds-card:focus-within .card-stp-button-hover-background, .ds-card:hover .card-stp-button-hover-background { + display: block; + opacity: 1; + transition-duration: 0.3s; +} +.ds-card.active .card-stp-button-hover-background .context-menu-button, .ds-card:focus-within .card-stp-button-hover-background .context-menu-button, .ds-card:hover .card-stp-button-hover-background .context-menu-button { + opacity: 1; + transform: scale(1); +} +.ds-card .img { + height: 0; + padding-top: 50%; +} +.ds-card .img img { + border-radius: 4px; + box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); +} +.ds-card .ds-card-link { + height: 100%; + display: flex; + flex-direction: column; + text-decoration: none; +} +.ds-card .ds-card-link:hover header { + color: var(--newtab-primary-action-background); +} +.ds-card .ds-card-link:focus { + border: 0; + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); + transition: none; +} +.ds-card .ds-card-link:focus header { + color: var(--newtab-primary-action-background); +} +.ds-card .ds-card-link:active header { + color: var(--newtab-primary-element-active-color); +} +.ds-card .meta { + display: flex; + flex-direction: column; + padding: 12px 16px; + flex-grow: 1; +} +.ds-card .meta .info-wrap { + flex-grow: 1; +} +.ds-card .meta .title { + font-size: 17px; + -webkit-line-clamp: 3; + line-height: 24px; + font-weight: 600; +} +.ds-card .meta .excerpt { + font-size: 14px; + -webkit-line-clamp: 3; + line-height: 20px; +} +.ds-card .meta .source { + -webkit-line-clamp: 1; + margin-bottom: 2px; + font-size: 13px; + color: var(--newtab-text-secondary-color); +} +.ds-card .meta .source span { + display: inline-block; +} +.ds-card .meta .new-sponsored-label { + font-size: 13px; + margin-bottom: 2px; +} +.ds-card.ds-card-title-lines-2 .meta .title { + font-size: 17px; + -webkit-line-clamp: 2; + line-height: 24px; +} +.ds-card.ds-card-title-lines-1 .meta .title { + font-size: 17px; + -webkit-line-clamp: 1; + line-height: 24px; +} +.ds-card.ds-card-desc-lines-2 .meta .excerpt { + font-size: 14px; + -webkit-line-clamp: 2; + line-height: 20px; +} +.ds-card.ds-card-desc-lines-1 .meta .excerpt { + font-size: 14px; + -webkit-line-clamp: 1; + line-height: 20px; +} +.ds-card.ds-card-compact-image .img { + padding-top: 47%; +} +.ds-card.ds-card-image-gradient img { + mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black 40px); +} +.ds-card.ds-card-image-gradient .meta { + padding: 3px 15px 11px; +} +.ds-card.ds-card-cta-button.variant-a .img, .ds-card.ds-card-cta-button.variant-b .img { + padding-top: 52.4%; +} +.ds-card.ds-card-cta-button.variant-a .story-sponsored-label, .ds-card.ds-card-cta-button.variant-b .story-sponsored-label { + margin: var(--space-small) 0 0; +} +.ds-card.ds-card-cta-button.variant-a .source, .ds-card.ds-card-cta-button.variant-b .source { + text-decoration: underline; +} +.ds-card.ds-card-cta-button.variant-a .story-footer, .ds-card.ds-card-cta-button.variant-b .story-footer { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + column-gap: var(--space-small); + margin-top: 0; +} +.ds-card.ds-card-cta-button.variant-a .story-cta-button, .ds-card.ds-card-cta-button.variant-b .story-cta-button { + cursor: inherit; + background: var(--button-background-color); + border-radius: var(--border-radius-small); + border: none; + padding: var(--space-xsmall) 16px; + font-size: var(--font-size-small); + font-weight: var(--font-weight-bold); + min-height: var(--size-item-large); + min-width: 97px; + color: var(--newtab-text-primary-color); + margin-top: var(--space-small); +} +.ds-card.ds-card-cta-button.variant-a .story-cta-button:hover, .ds-card.ds-card-cta-button.variant-b .story-cta-button:hover { + background: var(--button-background-color-hover); +} +.ds-card.ds-card-cta-button.variant-a .cta-header, .ds-card.ds-card-cta-button.variant-b .cta-header { + background: var(--button-background-color); + font-size: var(--font-size-root); + font-weight: var(--font-weight-bold); + text-align: end; + padding: var(--space-xsmall) 16px; + color: var(--newtab-text-primary-color); + min-height: var(--size-item-large); +} +.ds-card header { + line-height: 24px; + font-size: 17px; + color: var(--newtab-text-primary-color); +} +.ds-card p { + font-size: 14px; + line-height: 20px; + color: var(--newtab-text-primary-color); + margin: 0; +} + +.story-footer { + color: var(--newtab-text-secondary-color); + inset-inline-start: 0; + margin-top: 12px; + position: relative; +} +.story-footer .story-sponsored-label span { + display: inline-block; +} +.story-footer .story-sponsored-label, +.story-footer .status-message { + -webkit-line-clamp: 1; + font-size: 13px; + line-height: 24px; + color: var(--newtab-text-secondary-color); +} +.story-footer .status-message { + display: flex; + align-items: center; + height: 24px; +} +.story-footer .status-message .story-badge-icon { + fill: var(--newtab-text-secondary-color); + height: 16px; + margin-inline-end: 6px; +} +.story-footer .status-message .story-badge-icon.icon-bookmark-removed { + background-image: url("chrome://activity-stream/content/data/content/assets/icon-removed-bookmark.svg"); +} +.story-footer .status-message .story-context-label { + color: var(--newtab-text-secondary-color); + flex-grow: 1; + font-size: 13px; + line-height: 24px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.story-animate-enter { + opacity: 0; +} + +.story-animate-enter-active { + opacity: 1; + transition: opacity 150ms ease-in 300ms; +} +.story-animate-enter-active .story-badge-icon, +.story-animate-enter-active .story-context-label { + animation: color 3s ease-out 0.3s; +} +@keyframes color { + 0% { + color: var(--newtab-status-success); + fill: var(--newtab-status-success); + } + 100% { + color: var(--newtab-text-secondary-color); + fill: var(--newtab-text-secondary-color); + } +} + +.story-animate-exit { + position: absolute; + top: 0; + opacity: 1; +} + +.story-animate-exit-active { + opacity: 0; + transition: opacity 250ms ease-in; +} + +.ds-image { + display: block; + position: relative; + opacity: 0; +} +.ds-image.use-transition { + transition: opacity 0.8s; +} +.ds-image.loaded { + opacity: 1; +} +.ds-image img, +.ds-image .placeholder-image, +.ds-image .broken-image { + background-color: var(--newtab-element-secondary-color); + position: absolute; + top: 0; + width: 100%; + height: 100%; + object-fit: cover; +} +.ds-image .placeholder-image { + overflow: hidden; + background-color: var(--placeholderBackgroundColor); +} +.ds-image .placeholder-image::before { + content: ""; + background-image: url("chrome://activity-stream/content/data/content/assets/pocket-swoosh.svg"); + background-repeat: no-repeat; + background-position: center; + transform: rotate(var(--placeholderBackgroundRotation)); + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + margin-left: var(--placeholderBackgroundOffsetx); + margin-top: var(--placeholderBackgroundOffsety); + background-size: var(--placeholderBackgroundScale); +} + +.ds-dismiss { + position: relative; + border-radius: 8px; + transition-duration: 250ms; + transition-property: background; +} +.ds-dismiss:hover .ds-dismiss-button { + opacity: 1; +} +.ds-dismiss .ds-dismiss-button { + border: 0; + cursor: pointer; + height: 32px; + width: 32px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + inset-inline-end: 0; + top: 0; + border-radius: 50%; + background-color: transparent; +} +.ds-dismiss .ds-dismiss-button .icon { + fill: var(--newtab-text-primary-color); +} +@media (forced-colors: active) { + .ds-dismiss .ds-dismiss-button .icon { + fill: CurrentColor; + } +} +.ds-dismiss .ds-dismiss-button:hover { + background: var(--newtab-element-hover-color); +} +.ds-dismiss .ds-dismiss-button:active { + background: var(--newtab-element-active-color); +} +.ds-dismiss .ds-dismiss-button:focus { + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); +} + +.ds-message { + margin: 8px 0 0; +} +.ds-message .title { + display: flex; + align-items: center; +} +.ds-message .title .glyph { + width: 16px; + height: 16px; + margin: 0 6px 0 0; + -moz-context-properties: fill; + fill: var(--newtab-text-secondary-color); + background-position: center center; + background-size: 16px; + background-repeat: no-repeat; +} +.ds-message .title .title-text { + line-height: 20px; + font-size: 13px; + color: var(--newtab-text-secondary-color); + font-weight: 600; + padding-right: 12px; +} +.ds-message .title .link { + line-height: 20px; + font-size: 13px; +} +.ds-message .title .link:hover, .ds-message .title .link:focus { + text-decoration: underline; +} + +.impression-observer { + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.section-empty-state { + border: 1px solid var(--newtab-border-color); + border-radius: 4px; + display: flex; + height: 160px; + width: 100%; +} +.section-empty-state .empty-state-message { + color: var(--newtab-text-secondary-color); + font-size: 14px; + line-height: 20px; + text-align: center; + margin: auto; + max-width: 936px; +} +.section-empty-state .try-again-button { + margin-top: 12px; + padding: 6px 32px; + border-radius: 2px; + border: 0; + background: var(--newtab-button-secondary-color); + color: var(--newtab-text-primary-color); + cursor: pointer; + position: relative; + transition: background 0.2s ease, color 0.2s ease; +} +.section-empty-state .try-again-button:not(.waiting):focus { + box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; +} +[lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):focus { + box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; +} +.section-empty-state .try-again-button:not(.waiting):hover { + box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); + transition: box-shadow 150ms; + border-radius: 4px; + outline: none; +} +.section-empty-state .try-again-button::after { + content: ""; + height: 20px; + width: 20px; + animation: spinner 1s linear infinite; + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + margin: -10px 0 0 -10px; + mask-image: url("chrome://activity-stream/content/data/content/assets/spinner.svg"); + mask-size: 20px; + background: var(--newtab-text-secondary-color); +} +.section-empty-state .try-again-button.waiting { + cursor: initial; + background: var(--newtab-element-secondary-color); + color: transparent; + transition: background 0.2s ease; +} +.section-empty-state .try-again-button.waiting::after { + transition: opacity 0.2s ease; + opacity: 1; +} +.section-empty-state h2 { + font-size: 15px; + font-weight: 600; + margin: 0; +} +.section-empty-state p { + margin: 0; +} + +@keyframes spinner { + to { + transform: rotate(360deg); + } +} +.ds-dismiss-ds-text-promo { + max-width: 744px; + margin: auto; + overflow: hidden; +} +.ds-dismiss-ds-text-promo.hovering { + background: var(--newtab-element-hover-color); +} +.ds-dismiss-ds-text-promo .ds-dismiss-button { + margin-inline: 0 18px; + margin-block: 18px 0; +} + +.ds-text-promo { + max-width: 640px; + margin: 0; + padding: 18px; +} +@media (min-width: 610px) { + .ds-text-promo { + display: flex; + margin: 18px 24px; + padding: 0 32px 0 0; + } +} +.ds-text-promo .ds-image { + width: 40px; + height: 40px; + flex-shrink: 0; + margin: 0 0 18px; +} +@media (min-width: 610px) { + .ds-text-promo .ds-image { + margin: 4px 12px 0 0; + } +} +.ds-text-promo .ds-image img { + border-radius: 4px; +} +.ds-text-promo .text { + line-height: 24px; +} +.ds-text-promo h3 { + color: var(--newtab-text-primary-color); + margin: 0; + font-weight: 600; + font-size: 15px; +} +.ds-text-promo .subtitle { + font-size: 13px; + margin: 0; + color: var(--newtab-text-primary-color); +} + +.ds-chevron-link { + color: var(--newtab-primary-action-background); + display: inline-block; + outline: 0; +} +.ds-chevron-link:hover { + text-decoration: underline; +} +.ds-chevron-link:active { + color: var(--newtab-primary-element-active-color); +} +.ds-chevron-link:active::after { + background-color: var(--newtab-primary-element-active-color); +} +.ds-chevron-link:focus { + box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); + border-radius: 2px; +} +.ds-chevron-link::after { + background-color: var(--newtab-primary-action-background); + content: " "; + mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat; + margin: 0 0 0 4px; + width: 5px; + height: 8px; + text-decoration: none; + display: inline-block; +} + +.ds-signup { + max-width: 300px; + margin: 0 auto; + padding: 8px; + position: relative; + text-align: center; + font-size: 17px; + font-weight: 600; +} +.ds-signup:hover { + background: var(--newtab-element-hover-color); + border-radius: 4px; +} +.ds-signup .icon-mail { + height: 40px; + width: 40px; + margin-inline-end: 8px; + fill: var(--newtab-text-secondary-color); + background-size: 30px; + flex-shrink: 0; +} +.ds-signup .ds-signup-content { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} +.ds-signup .ds-signup-content .ds-chevron-link { + margin-top: 4px; + box-shadow: none; + display: block; + white-space: nowrap; +} +@media (min-width: 866px) { + .ds-signup { + min-width: 756px; + width: max-content; + text-align: start; + } + .ds-signup .ds-signup-content { + flex-direction: row; + } + .ds-signup .ds-signup-content .ds-chevron-link { + margin-top: 0; + display: inline; + } +} + +.ds-privacy-modal .modal-link { + display: flex; + align-items: center; + margin: 0 0 8px; + border: 0; + padding: 0; + color: var(--newtab-primary-action-background); + width: max-content; +} +.ds-privacy-modal .modal-link:hover { + text-decoration: underline; + cursor: pointer; +} +.ds-privacy-modal .modal-link::before { + -moz-context-properties: fill; + fill: var(--newtab-primary-action-background); + content: ""; + display: inline-block; + width: 16px; + height: 16px; + margin: 0; + margin-inline-end: 8px; + background-position: center center; + background-repeat: no-repeat; + background-size: 16px; +} +.ds-privacy-modal .modal-link.modal-link-privacy::before { + background-image: url("chrome://global/skin/icons/info.svg"); +} +.ds-privacy-modal .modal-link.modal-link-manage::before { + background-image: url("chrome://global/skin/icons/settings.svg"); +} +.ds-privacy-modal p { + line-height: 24px; +} +.ds-privacy-modal .privacy-notice { + max-width: 572px; + padding: 40px; + margin: auto; +} + +.ds-privacy-link { + text-align: center; + font-size: 13px; + font-weight: 500; + line-height: 24px; +} +.ds-privacy-link a:hover { + text-decoration: none; +} + +/* stylelint-disable max-nesting-depth */ +.ds-topics-widget { + display: flex; + position: relative; + flex-direction: column; +} +.ds-topics-widget .ds-topics-widget-header { + font-size: 18px; + line-height: 20px; +} +.ds-topics-widget hr { + background-color: color-mix(in srgb, var(--newtab-border-color) 52%, transparent); + height: 1px; + border: 0; + margin: 10px 0 0; +} +.ds-topics-widget .ds-topics-widget-list-container { + flex-grow: 1; +} +.ds-topics-widget .ds-topics-widget-list-container ul { + margin: 14px 0 0; + padding: 0; + display: flex; + align-items: center; + grid-gap: 10px; + flex-wrap: wrap; +} +.ds-topics-widget .ds-topics-widget-list-container ul li { + display: flex; +} +.ds-topics-widget .ds-topics-widget-list-container ul li a { + font-size: 14px; + line-height: 16px; + text-decoration: none; + padding: 8px 15px; + background: var(--newtab-background-color-secondary); + border: 1px solid color-mix(in srgb, var(--newtab-border-color) 52%, transparent); + color: var(--newtab-text-primary-color); + border-radius: 8px; +} +.ds-topics-widget .ds-topics-widget-list-container ul li a:hover { + background: var(--newtab-element-hover-color); +} +.ds-topics-widget .ds-topics-widget-list-container ul li a:focus { + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background); + transition: box-shadow 150ms; +} +.ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item { + display: flex; +} +@media (min-width: 610px) { + .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item { + display: none; + } +} +@media (min-width: 1122px) { + .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item { + display: flex; + } +} +.ds-topics-widget .ds-topics-widget-button { + margin: 14px 0 0; + font-size: 16px; + line-height: 24px; + text-align: center; + padding: 8px; + border-radius: 4px; + background-color: var(--newtab-primary-action-background-pocket); + border: 0; +} +.ds-topics-widget .ds-topics-widget-button:hover { + background: var(--newtab-primary-element-hover-pocket-color); +} +.ds-topics-widget .ds-topics-widget-button:focus { + outline: 0; + box-shadow: 0 0 0 3px var(--newtab-primary-action-background-pocket-dimmed), 0 0 0 1px var(--newtab-primary-action-background-pocket); + transition: box-shadow 150ms; +} + +.ASRouterButton { + font-weight: 600; + font-size: 14px; + white-space: nowrap; + border-radius: 2px; + border: 0; + font-family: inherit; + padding: 8px 15px; + margin-inline-start: 12px; + color: inherit; + cursor: pointer; +} +.tall .ASRouterButton { + margin-inline-start: 20px; +} +.ASRouterButton.test-only { + width: 0; + height: 0; + overflow: hidden; + display: block; + visibility: hidden; +} +.ASRouterButton.primary { + border: 1px solid var(--newtab-primary-action-background); + background-color: var(--newtab-primary-action-background); + color: var(--newtab-primary-element-text-color); +} +.ASRouterButton.primary:hover { + background-color: var(--newtab-primary-element-hover-color); +} +.ASRouterButton.primary:active { + background-color: var(--newtab-primary-element-active-color); +} +.ASRouterButton.slim { + border: 1px solid var(--newtab-border-color); + margin-inline-start: 0; + font-size: 12px; + padding: 6px 12px; +} +.ASRouterButton.slim:hover, .ASRouterButton.slim:focus { + box-shadow: 0 0 0 5px var(--newtab-element-secondary-color); + transition: box-shadow 150ms; +} |