@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/. */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; } button, input { background-color: inherit; color: inherit; font-family: inherit; font-size: inherit; } [hidden] { display: none !important; } :root { --newtab-card-height: 282px; --newtab-card-width-medium: 300px; --newtab-card-grid-layout-width: 296px; --newtab-card-height-small: 133px; } :root { color-scheme: light; --newtab-background-color: #F9F9FB; --newtab-background-color-secondary: var(--color-white); --newtab-text-primary-color: var(--text-color); --newtab-background-card: color-mix(in srgb, var(--color-white) 85%, transparent); --newtab-text-topic-label-color: var(--color-violet-70); --newtab-text-secondary-text: var(--text-color-deemphasized); --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), var(--text-color)); --newtab-primary-action-background: light-dark(var(--color-accent-primary), var(--color-accent-primary)); --newtab-primary-action-background-pocket: #008078; --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent); --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent); --newtab-weather-background-color: light-dark(rgba(255, 255, 255, 85%), rgba(66, 65, 77, 85%)); --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-button-background: var(--button-background-color); --newtab-button-focus-background: var(--newtab-button-background); --newtab-button-focus-border: var(--focus-outline-color); --newtab-button-hover-background: var(--button-background-color-hover); --newtab-button-active-background: var(--button-background-color-active); --newtab-button-text: var(--button-text-color); --newtab-button-static-background: light-dark(#F0F0F4, #2B2A33); --newtab-button-static-focus-background: var(--newtab-button-static-background); --newtab-button-static-hover-background: light-dark(#E0E0E6, #52525E); --newtab-button-static-active-background: light-dark(#CFCFD8, #5B5B66); --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: var(--color-white); --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-wordmark-color: light-dark(#20123A, #fbfbfe); --newtab-status-success: var(--color-green-50); --newtab-status-error: var(--color-red-60); --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1); --newtab-section-card-box-shadow-color: rgba(58, 57, 68, 20%); --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent); --border-radius-large: 16px; --newtab-button-secondary-color: inherit; } :root[lwt-newtab-brighttext] { color-scheme: dark; --newtab-background-color: #2B2A33; --newtab-background-color-secondary: #42414d; --newtab-text-primary-color: var(--text-color); --newtab-background-card: rgba(66, 65, 77, 0.85); --newtab-text-topic-label-color: var(--color-violet-30); --newtab-text-secondary-text: #FBFBFEB0; --newtab-contextual-text-primary-color: light-dark(var(--text-color), var(--newtab-text-primary-color)); --newtab-primary-action-background-pocket: var(--color-accent-primary); --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%, var(--color-white)); --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 55%, var(--color-white)); --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 80%, var(--color-white)); --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 60%, var(--color-white)); --newtab-section-card-box-shadow-color: rgba(0, 0, 0, 80%); --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-primary-element-text-color: #2b2a33; --newtab-status-success: var(--color-green-30); } @media (prefers-contrast) { :root { --newtab-text-secondary-color: var(--newtab-text-primary-color); --newtab-text-topic-label-color: var(--color-violet-30); color-scheme: light; --newtab-text-secondary-text: #000; } } @media (prefers-contrast) and (prefers-color-scheme: dark) { :root { color-scheme: dark; --newtab-text-secondary-text: #FFF; } } .icon { background-position: center center; background-repeat: no-repeat; background-size: 16px; -moz-context-properties: fill; display: inline-block; color: var(--icon-color); fill: currentColor; height: 16px; vertical-align: middle; width: 16px; } .icon.icon-spacer { margin-inline-end: var(--space-small); } .icon.icon-small-spacer { margin-inline-end: var(--space-xsmall); } .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://newtab/content/data/content/assets/glyph-modal-delete-20.svg"); background-size: 32px; height: 32px; width: 32px; } .icon.icon-mail { background-image: url("chrome://newtab/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-info-critical { background-image: url("chrome://newtab/content/data/content/assets/glyph-info-critical-16.svg"); } .icon.icon-info-warning { background-image: url("chrome://global/skin/icons/warning.svg"); fill: var(--icon-color-warning); -moz-context-properties: fill; } .icon.icon-help { background-image: url("chrome://global/skin/icons/help.svg"); } .icon.icon-new-window { background-image: url("chrome://newtab/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://newtab/content/data/content/assets/glyph-pin-16.svg"); } .icon.icon-pin:dir(rtl) { transform: scaleX(-1); } .icon.icon-unpin { background-image: url("chrome://newtab/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-edit-outline { background-image: url("chrome://global/skin/icons/edit-outline.svg"); } .icon.icon-pocket { background-image: url("chrome://global/skin/icons/help.svg"); } .icon.icon-history-item { background-image: url("chrome://browser/skin/history.svg"); } .icon.icon-newsfeed { background-image: url("chrome://global/skin/icons/newsfeed.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-check-filled { background-image: url("chrome://global/skin/icons/check-filled.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://newtab/content/data/content/assets/glyph-open-file-16.svg"); } .icon.icon-webextension { background-image: url("chrome://newtab/content/data/content/assets/glyph-webextension-16.svg"); } .icon.icon-weather { background-image: url("chrome://browser/skin/weather/sunny.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-add-circle-fill { background-image: url("chrome://newtab/content/data/content/assets/glyph-add-circle-fill-16.svg"); } .icon.icon-minimize { background-image: url("chrome://newtab/content/data/content/assets/glyph-minimize-16.svg"); } .icon.icon-maximize { background-image: url("chrome://newtab/content/data/content/assets/glyph-maximize-16.svg"); } .icon.icon-arrow { background-image: url("chrome://global/skin/icons/arrow-right-12.svg"); } .icon.icon-device-phone { background-image: url("chrome://browser/skin/device-phone.svg"); } .icon.icon-arrow-trending { background-image: url("chrome://global/skin/icons/trending.svg"); } :root { font-size: var(--font-size-root); height: 100%; } :root[lwt-newtab-brighttext] { -moz-osx-font-smoothing: grayscale; } body, #root { min-height: 100vh; } #root { position: relative; } body { background-color: var(--newtab-background-color); font-family: system-ui; font-size: var(--font-size-root); background-repeat: no-repeat; background-size: cover; background-position: var(--newtab-wallpaper-backgroundPosition); background-attachment: fixed; background-image: var(--newtab-wallpaper, ""), linear-gradient(to right, var(--newtab-wallpaper-color, ""), var(--newtab-wallpaper-color, "")); overflow-y: scroll; } h1, h2 { font-weight: var(--font-weight); } .inner-border { border: 1px solid var(--border-color); border-radius: var(--border-radius-small); height: 100%; inset-inline-start: 0; pointer-events: none; position: absolute; inset-block-start: 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-block-start: 1px solid var(--border-color); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: var(--space-large) var(--space-xlarge) 0; } .button, .actions button { background-color: var(--newtab-button-secondary-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-small); color: inherit; cursor: pointer; margin-block-end: var(--space-large); padding: var(--space-small) var(--space-xxlarge); 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: var(--border-radius-small); } .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: var(--space-xxlarge); } .outer-wrapper.ds-outer-wrapper-breakpoint-override { padding: var(--space-xxlarge) 0; } @media (min-width: 610px) { .outer-wrapper.ds-outer-wrapper-breakpoint-override { padding: var(--space-xxlarge); } } .outer-wrapper.only-search { display: block; padding-block-start: calc(var(--space-xxlarge) * 4); } .outer-wrapper a { color: var(--newtab-primary-action-background); } main { margin: 0 auto; display: flex; flex-direction: column; justify-content: center; width: 274px; padding: 0; } main.newtab-main { min-width: min-content; } main .vertical-center-wrapper { margin: auto 0; } main section { margin-block-end: var(--space-medium); 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; } } .no-search main { margin-block-start: var(--space-xxlarge); } .ds-outer-wrapper-search-alignment main { margin: 0 auto; } .ds-outer-wrapper-breakpoint-override main { width: auto; padding-block-end: 0; } .ds-outer-wrapper-breakpoint-override main .ds-card { width: var(--newtab-card-grid-layout-width); } .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { grid-gap: var(--space-large); } .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid).empty { grid-template-columns: auto; } .ds-outer-wrapper-breakpoint-override main .body-wrapper { width: 346px; margin: 0 auto; } @media (min-width: 610px) { .ds-outer-wrapper-breakpoint-override main { width: auto; } .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { grid-template-columns: repeat(1, 1fr); } .ds-outer-wrapper-breakpoint-override main .body-wrapper { width: 346px; } } @media (min-width: 724px) { .ds-outer-wrapper-breakpoint-override main { width: auto; } .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { grid-template-columns: repeat(2, 1fr); } .ds-outer-wrapper-breakpoint-override main .body-wrapper { width: 659px; } } @media (min-width: 1122px) { .ds-outer-wrapper-breakpoint-override main { width: auto; } .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { grid-template-columns: repeat(3, 1fr); grid-gap: var(--space-xlarge); } .ds-outer-wrapper-breakpoint-override main .body-wrapper { width: 989px; } } @media (min-width: 1698px) { .ds-outer-wrapper-breakpoint-override main { width: auto; } .ds-outer-wrapper-breakpoint-override main .body-wrapper { display: flex; flex-direction: column; width: 1311px; } .ds-outer-wrapper-breakpoint-override main .ds-highlights .card-outer { min-width: 216px; } .ds-outer-wrapper-breakpoint-override main .ds-card-grid:not(.ds-section-grid) { grid-template-columns: repeat(4, 1fr); } } .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; } .prefs-button button { background-color: transparent; border: 0; border-radius: var(--button-border-radius); cursor: pointer; padding: var(--space-large); position: fixed; inset-inline-end: var(--space-large); inset-block-start: var(--space-large); 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); } .wallpaper-attribution { padding: 0 var(--space-xlarge); font-size: var(--font-size-small); color: var(--newtab-contextual-text-primary-color); position: absolute; inset-block-end: var(--space-large); inset-inline-start: 0; } .lightWallpaper .wallpaper-attribution { color-scheme: light; } .darkWallpaper .wallpaper-attribution { color-scheme: dark; } .wallpaper-attribution.theme-light { display: inline-block; } [lwt-newtab-brighttext] .wallpaper-attribution.theme-light { display: none; } .wallpaper-attribution.theme-dark { display: none; } [lwt-newtab-brighttext] .wallpaper-attribution.theme-dark { display: inline-block; } .wallpaper-attribution a { color: inherit; } .wallpaper-attribution a:hover { text-decoration: none; } .asrouter-newtab-message-wrapper { background-color: var(--background-color-canvas); border: 2px solid var(--border-color-card); color: var(--text-color); padding: var(--space-large); border-radius: var(--border-radius-medium); margin-block: 0 var(--space-xlarge); margin-inline: auto; overflow: hidden; /** * Bug 2021914 - this is temporary until we get the Nova grid rules more * proliferated on New Tab. */ max-width: 960px; } /** * Nova Grid System * * Layout structure: * .container (full grid) * ├── .sidebar-inline-start (148px - left sidebar for logo/navigation) * ├── .content (flexible - fills remaining space with 74px columns) * └── .sidebar-inline-end (148px - right sidebar for mini widgets) * * Column width: * 1 column = 1/4 of an IAB Medium Rectangle (MREC) = 300px ÷ 4 = 75px */ :root { --mrec-width: 300px; --col-width: calc(var(--mrec-width) / 4); --side-col-width: calc(2 * var(--col-width)); --content-col-width: minmax(calc((4 * var(--col-width)) + 34px), 1fr); } .container { display: grid; grid-template-columns: var(--side-col-width) var(--content-col-width) var(--side-col-width); gap: var(--space-medium); margin-inline: auto; } .content { container-type: inline-size; container-name: content-grid; display: grid; grid-template-columns: repeat(auto-fill, var(--col-width)); gap: var(--space-medium); justify-content: center; padding-block-start: calc(var(--space-large) * 7); } .content > * { grid-column: 1/-1; container-type: inline-size; container-name: component; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; } .col-18 { grid-column: span 18; } .col-26 { grid-column: span 26; } .as-error-fallback { align-items: center; border-radius: var(--border-radius-medium); 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: var(--font-size-small); justify-content: center; justify-items: center; } .as-error-fallback.borderless-error { box-shadow: none; } .as-error-fallback a { color: var(--newtab-text-secondary-color); text-decoration: underline; } .logo-and-wordmark-wrapper { margin-block: 0; } .logo-and-wordmark { align-items: center; display: flex; justify-content: center; margin-block-end: var(--space-xxlarge); } .no-recommended-stories .logo-and-wordmark { margin-block-end: calc(var(--space-large) + var(--space-xlarge)); } .logo-and-wordmark .logo { display: inline-block; height: 64px; width: 64px; background: image-set(url("chrome://branding/content/about-logo.png"), url("chrome://branding/content/about-logo@2x.png") 2x) no-repeat center; background-size: 64px; } .logo-and-wordmark .wordmark { background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center; background-size: 105px; -moz-context-properties: fill; display: inline-block; fill: var(--newtab-wordmark-color); height: 64px; margin-inline-start: var(--space-large); width: 105px; } .lightWallpaper .logo-and-wordmark .wordmark { color-scheme: light; } .darkWallpaper .logo-and-wordmark .wordmark { color-scheme: dark; } @media (max-width: 609px) { .logo-and-wordmark .logo { background-size: 64px; height: 64px; width: 64px; } .logo-and-wordmark .wordmark { background-size: 100px; height: 64px; width: 100px; margin-inline-start: var(--space-medium); } } /* stylelint-disable max-nesting-depth */ .top-sites-list { list-style: none; margin: 0 calc(var(--space-large) * -1); padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; row-gap: var(--space-small); } .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { background: color-mix(in srgb, var(--button-text-color-hover) 14%, transparent); } .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { color-scheme: light; } .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { color-scheme: dark; } .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .tile { box-shadow: 0 2px 8px 0 var(--newtab-section-card-box-shadow-color); } .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) .icon-pin-small { opacity: 1; } .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover), .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { background: color-mix(in srgb, var(--button-text-color-hover) 14%, transparent); } @media (prefers-contrast) { .lightWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover), .darkWallpaper .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) { background-color: var(--background-color-box); } } @media (min-width: 724px) { .top-sites-list { grid-template-columns: repeat(6, auto); } } @media (min-width: 1122px) { .top-sites-list { grid-template-columns: repeat(8, auto); } } .top-sites-list a { text-decoration: none; } @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: calc(var(--space-xxlarge) * -1); } .top-sites-list > :nth-child(2n) .context-menu { margin-inline-end: var(--space-xsmall); 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: var(--space-xsmall); 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: var(--space-xsmall); 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: var(--space-xsmall); 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: var(--space-xsmall); 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: var(--space-xsmall); 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: var(--space-xsmall); 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: none; } } @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; } } .discovery-stream.ds-layout.ds-layout-topsites { display: flex; justify-content: center; } .discovery-stream.ds-layout.ds-layout-topsites .top-sites-list { padding-block-start: 0; } .top-site-outer { width: 120px; margin-block-end: var(--space-medium); border-radius: var(--border-radius-large); display: inline-block; } .top-site-outer .top-site-inner { position: relative; } .top-site-outer .top-site-inner > a { padding: var(--space-large) var(--space-large) var(--space-xsmall); color: inherit; display: block; outline: none; } .top-site-outer:hover .context-menu-button, .top-site-outer:focus .context-menu-button { opacity: 1; transition: opacity 200ms; } .lightWallpaper .top-site-outer:hover .context-menu-button, .lightWallpaper .top-site-outer:focus .context-menu-button { color-scheme: light; } .darkWallpaper .top-site-outer:hover .context-menu-button, .darkWallpaper .top-site-outer:focus .context-menu-button { color-scheme: dark; } .top-site-outer:hover .tile, .top-site-outer:focus .tile { background-color: var(--newtab-background-color-secondary); } .top-site-outer:hover .icon-pin-small, .top-site-outer:focus .icon-pin-small { opacity: 1; } .lightWallpaper .top-site-outer:not(:hover, :active, .active) { color-scheme: light; } .darkWallpaper .top-site-outer:not(:hover, :active, .active) { color-scheme: dark; } .top-site-outer.active .context-menu-button { opacity: 1; background-color: var(--newtab-button-active-background); } .top-site-outer .tile { background: var(--newtab-background-card); border-radius: var(--border-radius-large); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); height: calc(var(--size-item-large) * 2); width: calc(var(--size-item-large) * 2); margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-size: var(--font-size-xxlarge); color: var(--newtab-contextual-text-secondary-color); cursor: pointer; } .top-site-outer .tile .icon-wrapper { border-radius: var(--border-radius-small); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .top-site-outer .tile .icon-wrapper.letter-fallback { border-radius: var(--border-radius-circle); } .top-site-outer .tile .icon-wrapper.letter-fallback::before { content: attr(data-fallback); font-size: var(--font-size-xlarge); transform: none; position: static; } .top-site-outer .tile .top-site-icon { background-color: transparent; border-radius: var(--border-radius-medium); background-position: center; background-repeat: no-repeat; position: absolute; } .top-site-outer .context-menu-button { background-image: url("chrome://global/skin/icons/more.svg"); border: 0; border-radius: var(--border-radius-small); cursor: pointer; fill: var(--newtab-button-text); -moz-context-properties: fill; height: var(--size-item-medium); width: var(--size-item-medium); inset-inline-end: 0; inset-block-start: var(--space-medium); position: absolute; opacity: 0; } .top-site-outer .context-menu-button:hover { background-color: var(--newtab-button-hover-background); } .top-site-outer .context-menu-button:hover:active { background-color: var(--newtab-button-active-background); } .top-site-outer .context-menu-button:focus-visible { background-color: var(--newtab-button-focus-background); outline: var(--focus-outline); opacity: 1; } .lightWallpaper .top-site-outer .context-menu-button:focus-visible::after, .darkWallpaper .top-site-outer .context-menu-button:focus-visible::after { content: ""; position: absolute; inset: 0; border-radius: var(--border-radius-small); outline: var(--focus-outline); color-scheme: initial; } .top-site-outer .context-menu { inset-block-start: calc(var(--space-large) + var(--space-xlarge)); } .top-site-outer .icon-pin-small { inset-block-start: var(--space-small); inset-inline-start: var(--space-small); opacity: 0; position: absolute; } .top-site-outer .top-site-button { padding: var(--space-large) var(--space-large) var(--space-small); } .top-site-outer .top-site-button:focus + div .context-menu-button { opacity: 1; } .lightWallpaper .top-site-outer .top-site-button:focus .tile, .darkWallpaper .top-site-outer .top-site-button:focus .tile { outline: var(--focus-outline); color-scheme: initial; } .top-site-outer .title { color: var(--newtab-contextual-text-primary-color); padding-block-start: var(--space-small); font: caption; text-align: center; position: relative; } .top-site-outer .title .icon { margin-inline-end: var(--space-xxsmall); fill: currentColor; } .top-site-outer .title .sponsored-label { color: var(--newtab-contextual-text-secondary-color); font-size: var(--font-size-xsmall); } .top-site-outer .title:not(.sponsored) .sponsored-label { display: none; } .top-site-outer .title .search-topsite { margin-inline-end: var(--space-xxsmall); fill: currentColor; background-size: var(--icon-size-xsmall); height: var(--icon-size-xsmall); width: var(--icon-size-xsmall); background-position: center; background-repeat: no-repeat; background-color: transparent; position: static; display: inline-block; color: var(--icon-color); box-shadow: none; } .top-site-outer .rich-icon { background-size: cover; height: 100%; width: 100%; position: absolute; inset-inline-start: 0; inset-block-start: 0; } .top-site-outer .default-icon, .top-site-outer .search-topsite { background-size: 40px; height: 40px; width: 40px; align-items: center; display: flex; justify-content: center; font-size: var(--font-size-xlarge); } .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: var(--border-radius-circle); -moz-context-properties: fill; fill: var(--newtab-primary-element-text-color); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: background-size 150ms, bottom 150ms, inset-inline-end 150ms, height 150ms, width 150ms; height: 32px; width: 32px; inset-block-end: -6px; inset-inline-end: -6px; } .top-site-outer.placeholder .tile { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); cursor: default; } .top-site-outer.add-button .tile { background-color: var(--button-background-color); } .top-site-outer.add-button .tile .icon-wrapper { background-image: url("chrome://global/skin/icons/plus-20.svg"); background-size: cover; background-repeat: no-repeat; height: 20px; width: 20px; fill: var(--icon-color); -moz-context-properties: fill; } .top-site-outer.add-button:hover .tile { background-color: var(--newtab-background-color-secondary); color-scheme: initial; } .top-site-outer.search-shortcut .rich-icon { background-color: var(--color-white); } .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; } .shortcuts-refresh .top-site-outer { margin-block-end: 0; } .edit-topsites-wrapper .top-site-inner > .top-site-button > .tile { border: 1px solid var(--border-color); } .edit-topsites-wrapper .modal { border: 0; min-height: fit-content; inset-block-start: var(--space-xxlarge); } @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: inherit; margin: 0 0 var(--space-large); } .topsite-form .form-input-container { max-width: 492px; margin: 0 auto; padding: var(--space-xxlarge); } .topsite-form .form-input-container .top-site-outer { pointer-events: none; } .topsite-form .search-shortcuts-container { max-width: 700px; margin: 0 auto; padding: var(--space-xxlarge); } .topsite-form .search-shortcuts-container > div { margin-inline-end: calc(var(--space-xxlarge) * -1); } .topsite-form .search-shortcuts-container .top-site-outer { margin-inline-start: 0; margin-inline-end: var(--space-xxlarge); } .topsite-form .top-site-outer { padding: 0; margin: var(--space-xlarge) 0 0; margin-inline-start: var(--space-xxlarge); } .topsite-form .fields-and-preview { display: flex; } .topsite-form label { font-size: var(--font-size-large); } .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%); inset-block-start: 50%; inset-inline-end: var(--space-small); } .topsite-form .form-wrapper .url input:dir(ltr) { padding-inline-end: var(--space-xxlarge); } .topsite-form .form-wrapper .url input:dir(rtl) { padding-inline-start: var(--space-xxlarge); } .topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) { direction: ltr; text-align: end; } .topsite-form .form-wrapper .enable-custom-image-input { display: inline-block; font-size: var(--font-size-small); margin-block-start: var(--space-xsmall); cursor: pointer; } .topsite-form .form-wrapper .custom-image-input-container { margin-block-start: var(--space-xsmall); } .topsite-form .form-wrapper .custom-image-input-container .loading-container { width: 16px; height: 16px; overflow: hidden; position: absolute; transform: translateY(-50%); inset-block-start: 50%; inset-inline-end: var(--space-small); } .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(--border-color-interactive); margin: var(--space-small) 0; padding: 0 var(--space-small); height: 32px; width: 100%; font-size: inherit; } .topsite-form .form-wrapper input[type=text][disabled] { border: 1px solid var(--border-color-interactive-disabled); box-shadow: none; opacity: 0.4; } .topsite-form .form-wrapper .invalid input[type=text] { border: 1px solid var(--outline-color-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: var(--border-radius-small); color: var(--color-white); inset-inline-start: var(--space-xxsmall); padding: var(--space-xsmall) var(--space-medium); position: absolute; inset-block-start: var(--space-xxlarge); z-index: 1; } .topsite-form .form-wrapper .error-tooltip::before { background: var(--newtab-status-error); inset-block-end: calc(var(--space-small) * -1); content: "."; height: 16px; inset-inline-start: var(--space-medium); position: absolute; text-indent: -999px; inset-block-start: calc(var(--space-small) * -1); transform: rotate(45deg); white-space: nowrap; width: 16px; z-index: -1; } .topsite-form .actions { justify-content: flex-end; padding: var(--space-large) var(--space-xlarge); } @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(--border-color); border-radius: var(--border-radius-small); content: ""; height: 21px; inset-inline-start: calc(var(--space-small) * -1); position: absolute; inset-block-start: calc(var(--space-small) * -1); width: 21px; z-index: 1; } [dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::before, [dir=rtl] .topsite-form [type=checkbox]:checked + label::before { inset-inline-start: auto; inset-inline-end: calc(var(--space-small) * -1); } .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; inset-inline-start: calc(var(--space-small) * -1); position: absolute; inset-block-start: calc(var(--space-small) * -1); 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 { inset-inline-start: auto; inset-inline-end: calc(var(--space-small) * -1); } .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); } .top-sites-list .top-site-outer .top-site-button, .fields-and-preview .top-site-outer .top-site-button { display: flex; flex-direction: column; justify-content: center; align-items: center; } .top-sites-list .top-site-outer .title .title-label, .fields-and-preview .top-site-outer .title .title-label { display: block; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; white-space: wrap; word-break: break-word; min-height: 2lh; width: 100px; padding: 0 var(--space-xsmall); } .top-sites-list .top-site-outer .title.sponsored .title-label, .fields-and-preview .top-site-outer .title.sponsored .title-label { -webkit-line-clamp: 1; min-height: 1lh; } @keyframes fade-up-tt { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } .topsite-impression-observer { position: absolute; inset-block-start: 0; width: 100%; height: 100%; pointer-events: none; } .sections-list .section-list { display: grid; grid-gap: var(--space-xxlarge); grid-template-columns: repeat(auto-fit, 192px); margin: 0; } @media (max-width: 610px) { .sections-list .section-list .context-menu { margin-inline-end: var(--space-xsmall); 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: var(--space-xsmall); 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: var(--space-xsmall); 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: var(--space-xsmall); margin-inline-start: auto; inset-inline-end: 0; inset-inline-start: auto; } } .sections-list .section-empty-state { border: 1px solid var(--border-color); border-radius: var(--border-radius-small); 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: var(--font-size-small); margin-block-end: 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: var(--font-size-small); margin-block-start: var(--space-medium); display: flex; justify-content: space-between; } .top-stories-bottom-container a { color: var(--newtab-primary-action-background); font-weight: var(--font-weight-semibold); } .top-stories-bottom-container a.more-recommendations { font-weight: var(--font-weight); font-size: var(--font-size-small); } @media (max-width: 865px) { .top-stories-bottom-container .wrapper-topics { display: none; } } @media (max-width: 609px) { .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); } } .search-wrapper { padding: 0; margin-block: var(--space-xxlarge); margin-block-start: 0; } .search-wrapper .logo-and-wordmark { margin-block-end: var(--space-xxlarge); } .search-wrapper .logo-and-wordmark-wrapper { margin-block-end: 0; } @media (height <= 700px) { .search-wrapper { padding: 0; margin-block-start: 0; } } @media (height > 700px) { .search-wrapper { padding: 0; } } .only-search .search-wrapper { padding-block-end: calc(var(--space-large) + var(--space-xlarge)); } .search-wrapper .search-inner-wrapper { cursor: default; display: flex; min-height: 52px; margin: 0 auto; position: relative; width: 304px; } @media (min-width: 610px) { .search-wrapper .search-inner-wrapper { width: 360px; } } @media (min-width: 866px) { .search-wrapper .search-inner-wrapper { width: 510px; } } @media (min-width: 1122px) { .search-wrapper .search-inner-wrapper { width: 720px; } } .search-wrapper content-search-handoff-ui { --content-search-handoff-ui-background-color: var(--newtab-background-color-secondary); --content-search-handoff-ui-color: var(--newtab-text-primary-color); --content-search-handoff-ui-fill: var(--newtab-text-secondary-color); --content-search-handoff-ui-caret-color: var(--newtab-text-primary-color); --content-search-handoff-ui-fakefocus-border-color: var(--newtab-primary-action-background); --content-search-handoff-ui-fakefocus-box-shadow-inner: var(--newtab-primary-action-background-dimmed); --content-search-handoff-ui-fakefocus-box-shadow-outer: transparent; } .search-wrapper.visible-logo .logo-and-wordmark .wordmark { fill: var(--newtab-wordmark-color); } .has-recommended-stories .outer-wrapper:not(.fixed-search) .search-wrapper { margin-block-start: var(--space-large); } .has-recommended-stories .logo-and-wordmark { position: absolute; inset-inline-start: var(--space-xxlarge); inset-block-start: var(--space-xxlarge); } @media (min-width: 724px) { .has-recommended-stories .logo-and-wordmark { inset-inline-start: var(--space-large); } } @media (min-width: 866px) { .has-recommended-stories .logo-and-wordmark { inset-inline-start: var(--space-xxlarge); } } .has-recommended-stories.no-search .body-wrapper { margin-block-start: 0; } @media (min-width: 866px) { .has-recommended-stories.no-search .body-wrapper { margin-block-start: calc(var(--space-xlarge) * 4); } } @media (min-width: 1698px) { .has-recommended-stories.no-search .body-wrapper { margin-block-start: 0; } } .has-recommended-stories.no-search.has-sections-grid .body-wrapper { margin-block-start: calc(var(--space-xlarge) * 4); } .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark { inset-inline-start: var(--space-large); } @media (min-width: 510px) { .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark { inset-inline-start: var(--space-xxlarge); } } @media (min-width: 724px) { .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark { inset-inline-start: var(--space-large); } } @media (min-width: 866px) { .has-recommended-stories.no-search.has-sections-grid .logo-and-wordmark { inset-inline-start: var(--space-xxlarge); } } .has-recommended-stories .search-inner-wrapper { width: 200px; } @media (min-width: 510px) { .has-recommended-stories .search-inner-wrapper { width: 300px; } } @media (min-width: 610px) { .has-recommended-stories .search-inner-wrapper { width: 350px; } } @media (min-width: 866px) { .has-recommended-stories .search-inner-wrapper { width: 410px; } } @media (min-width: 1122px) { .has-recommended-stories .search-inner-wrapper { width: 584px; } } @media (min-width: 1506px) { .has-recommended-stories .search-inner-wrapper { width: 720px; } } @media (min-width: 1122px) { .has-recommended-stories.has-mobile-download-promo .search-inner-wrapper { width: 497px; } } @media (min-width: 1506px) { .has-recommended-stories.has-mobile-download-promo .search-inner-wrapper { width: 720px; } } .has-recommended-stories .logo { width: 52px; height: 52px; background-size: 52px; } .has-recommended-stories .wordmark { display: none; height: 52px; } @media (min-width: 866px) { .has-recommended-stories .wordmark { display: block; } } @media (height > 700px) { .activity-stream .fixed-search .search-wrapper { border-block-end: solid 1px var(--border-color); padding: var(--space-xlarge) 0; background-color: var(--newtab-overlay-color); min-height: 95px; inset-inline-start: 0; position: fixed; inset-block-start: 0; width: 100%; z-index: 3; display: flex; align-items: center; } .activity-stream .fixed-search .search-wrapper .search-inner-wrapper { min-height: 52px; } .activity-stream .fixed-search .search-wrapper .logo-and-wordmark { display: none; } } /* stylelint-disable max-nesting-depth */ .context-menu { background: var(--newtab-background-color-secondary); border-radius: var(--border-radius-small); 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: inherit; margin-inline-start: var(--space-xsmall); inset-inline-start: 100%; position: absolute; inset-block-start: var(--space-small); z-index: 2; } .context-menu > ul { list-style: none; margin: 0; padding: var(--space-xsmall) 0; } .context-menu > ul > li { margin: 0; width: 100%; } .context-menu > ul > li.separator { border-block-end: 1px solid var(--border-color); margin: var(--space-xsmall) 0; } .context-menu > ul > li > a, .context-menu > ul > li > button { align-items: center; color: inherit; cursor: pointer; display: flex; width: 100%; outline: none; border: 0; padding: var(--space-xsmall) var(--space-medium); 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 { border: 1px solid var(--border-color); border-radius: var(--border-radius-small); padding: 0; width: 400px; box-shadow: var(--box-shadow-popup); background: var(--newtab-background-color-secondary); } .confirmation-dialog::backdrop { background: var(--newtab-overlay-color); } .confirmation-dialog section { margin: 0; } .confirmation-dialog .modal-message { display: flex; padding: var(--space-large); padding-block-end: 0; } .confirmation-dialog .modal-message p { margin: 0; margin-block-end: var(--space-large); } .confirmation-dialog .button-group { border: 0; padding: var(--space-large); } .confirmation-dialog .icon { margin-inline-end: var(--space-large); } .personalizeButtonWrapper { margin: 0; padding: 0; z-index: 5; position: fixed; inset-block-end: var(--space-xlarge); inset-inline-end: var(--space-xlarge); } .personalize-button { border: 0; border-radius: var(--border-radius-small); background-color: var(--button-background-color, rgba(21, 20, 26, 0.07)); box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 0.2); padding: calc(5 * var(--space-xxsmall)); position: relative; background-size: var(--icon-size-medium); background-position: center; display: flex; align-items: center; overflow: hidden; transition: background-color 0.3s ease; } .lightWallpaper .personalize-button, .darkWallpaper .personalize-button { background-color: var(--newtab-weather-background-color); } @media (prefers-contrast) { .lightWallpaper .personalize-button, .darkWallpaper .personalize-button { background-color: var(--background-color-box); } } .personalize-button:hover { background-color: var(--newtab-button-static-hover-background); } .personalize-button:active { background-color: var(--newtab-button-static-active-background); } .personalize-button:focus-visible { border: 0; outline: var(--focus-outline); background-color: var(--newtab-button-static-active-background); } .personalize-button.personalize-animate-exit-done { visibility: hidden; } .personalize-button > div { width: var(--icon-size-medium); height: var(--icon-size-medium); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .personalize-button > div > img { -moz-context-properties: fill; display: inline-block; color: var(--icon-color); fill: currentColor; height: 100%; object-fit: contain; vertical-align: middle; width: 100%; } .personalize-button > label { margin-inline-end: 0; opacity: 0; white-space: nowrap; overflow: hidden; max-width: 0; transition: opacity 0.3s ease, margin 0.3s ease, max-width 0.3s ease; } .personalize-button:hover > label, .personalize-button:focus-visible > label, .personalize-button.activation-window-variant-a > label, .personalize-button.activation-window-variant-b > label { opacity: 1; margin-inline-end: var(--space-medium); max-width: 30ch; } .customize-menu-animate-wrapper { color: var(--newtab-text-primary-color); background-color: var(--newtab-background-color-secondary); width: 432px; height: 100%; display: none; position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 1001; padding-block: 0 var(--space-large); padding-inline: var(--space-large); transform: translateX(435px); visibility: hidden; cursor: default; } .customize-menu-animate-wrapper.customize-animate-enter, .customize-menu-animate-wrapper.customize-animate-exit, .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-exit-done { display: block; } @media (prefers-reduced-motion: no-preference) { .customize-menu-animate-wrapper.customize-animate-enter, .customize-menu-animate-wrapper.customize-animate-exit, .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-exit-done { transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 250ms; } } @media (forced-colors: active) { .customize-menu-animate-wrapper { border-inline-start: solid 1px; } } .customize-menu-animate-wrapper:dir(rtl) { transform: translateX(-435px); } .customize-menu-animate-wrapper.customize-animate-enter-done, .customize-menu-animate-wrapper.customize-animate-enter-active { box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); visibility: visible; transform: translateX(0); } .customize-menu-animate-wrapper.customize-animate-exit-active { box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2); } .customize-menu { overflow: auto; height: 100%; } .customize-menu.subpanel-open { overflow: clip; } .customize-menu .close-button-wrapper { position: sticky; inset-block-start: 0; padding-block-start: var(--space-large); background-color: var(--newtab-background-color-secondary); z-index: 1; } .customize-menu .close-button-wrapper moz-button { margin-inline-start: auto; margin-inline-end: var(--space-large); display: block; } .customize-menu *:focus-visible { outline: var(--focus-outline); } .grid-skip { display: contents; } .home-section { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); grid-row-gap: var(--space-xxlarge); padding-block: var(--space-xsmall) var(--space-large); padding-inline: var(--space-large); } .home-section .wallpapers-section h2 { font-size: inherit; } .home-section .widgets-section h2 { font-size: inherit; margin-block-start: 0; font-weight: var(--font-weight-heading); } .home-section .settings-widgets, .home-section .settings-toggles { display: flex; flex-direction: column; gap: var(--space-xlarge); } .home-section .settings-widgets { gap: var(--space-large); } .home-section .settings-widgets .divider { margin-block-start: var(--space-large); } .home-section [slot=nested] { margin-block-start: 0; } .home-section .section .customize-menu-checkbox-label { font-size: inherit; margin-inline-start: var(--space-xsmall); } .home-section .section .check-wrapper { position: relative; display: flex; } .home-section .section .customize-menu-checkbox { margin-inline-start: var(--space-xxsmall); width: 16px; height: 16px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, 0.15); box-sizing: border-box; border-radius: var(--border-radius-small); appearance: none; background-color: var(--newtab-element-secondary-color); flex-shrink: 0; } .home-section .section .customize-menu-checkbox:hover { background-color: var(--newtab-element-secondary-hover-color); } .home-section .section .customize-menu-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); } .home-section .section .customize-menu-checkbox:checked:hover { background-color: var(--newtab-primary-element-hover-color); } .home-section .section .customize-menu-checkbox:checked:active { background-color: var(--newtab-primary-element-active-color); } @media (forced-colors: active) { .home-section .section .customize-menu-checkbox:checked { fill: #000; } } .home-section .section .customize-menu-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(--border-color); border-radius: var(--border-radius-small); appearance: none; padding-block: var(--space-small); padding-inline: var(--space-small) var(--space-medium); margin-inline-start: var(--space-xxsmall); margin-block-end: var(--space-xxsmall); -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:hover { background-color: var(--newtab-element-secondary-hover-color); } .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: calc(var(--space-xxsmall) * -1); overflow: hidden; } .home-section .section .more-info-top-wrapper .more-information, .home-section .section .more-info-pocket-wrapper .more-information { position: relative; transition: margin-block-start 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895); } .home-section .section .more-info-pocket-wrapper .more-information { position: static; } .home-section .section .more-info-pocket-wrapper .check-wrapper { margin-block-end: var(--space-small); } .home-section .section .more-info-pocket-wrapper:has(moz-box-button:focus-within) { overflow: visible; } .home-section .section .more-info-top-wrapper .check-wrapper { margin-block-start: var(--space-large); } .home-section .sponsored-content-info { display: flex; gap: var(--space-small); font-size: var(--font-size-small); border-radius: var(--border-radius-medium); background-color: var(--newtab-element-secondary-color); padding: var(--space-small) var(--space-large); } .home-section .sponsored-content-info .icon-help { flex-shrink: 0; color: var(--color-accent-primary); height: 20px; } .home-section .sponsored-content-info a { color: var(--newtab-primary-action-background); } .home-section .divider { border-block-start: 1px var(--border-color) solid; margin: 0 calc(var(--space-large) * -1); } .home-section .external-link { -moz-context-properties: fill; background: url("chrome://global/skin/icons/settings.svg") left no-repeat; background-size: 16px; border: 1px solid transparent; border-radius: var(--border-radius-small); color: var(--link-color); cursor: pointer; fill: var(--link-color); font-size: var(--font-size-small); margin-block-end: var(--space-large); padding-inline-start: var(--space-xlarge); text-decoration: underline; } .home-section .external-link:hover { color: var(--link-color-hover); text-decoration: none; } .home-section .external-link:active { color: var(--link-color-active); } @media (forced-colors: active) { .home-section .external-link { padding: var(--space-small) var(--space-medium); padding-inline-start: var(--space-xlarge); } } .home-section .external-link:dir(rtl) { background-position-x: right; } .home-section .external-link:hover { text-decoration: none; } .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); } .home-section .section .customize-menu-checkbox, .home-section .section .selector { outline: 0; box-shadow: 0 0 0 2px light-dark(var(--newtab-background-color), var(--newtab-background-color-dark)); } .home-section .section .selector { margin-block-start: var(--space-xxsmall); } .home-section .section .customize-menu-checkbox:is(:focus-visible), .home-section .section .selector:is(:focus-visible) { box-shadow: 0 0 0 2px var(--color-accent-primary); outline: var(--focus-outline); } .home-section .section .customize-menu-checkbox:is(:active), .home-section .section .selector:is(:active) { box-shadow: 0 0 0 2px var(--color-accent-primary-active); outline: 0; } .sections-mgmt-panel { height: 100%; inset-inline-start: var(--space-xlarge); position: absolute; inset-block-start: 0; width: 380px; z-index: 2; transform: translateX(100%); margin-block: var(--space-large) 0; padding: 0; background-color: var(--newtab-background-color-secondary); overflow-y: auto; } .sections-mgmt-panel:dir(rtl) { transform: translateX(-100%); } @media (prefers-reduced-motion: no-preference) { .sections-mgmt-panel.sections-mgmt-panel-enter, .sections-mgmt-panel.sections-mgmt-panel-exit, .sections-mgmt-panel.sections-mgmt-panel-enter-done, .sections-mgmt-panel.sections-mgmt-panel-exit-done { transition: transform 300ms; } } .sections-mgmt-panel.sections-mgmt-panel-enter-done, .sections-mgmt-panel.sections-mgmt-panel-enter-active { transform: translateX(0); } .sections-mgmt-panel h3 { font-size: inherit; margin-block: 0 var(--space-small); } .sections-mgmt-panel .topic-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-small); margin-block: 0 var(--space-xxlarge); padding-inline: 0; width: 100%; } .sections-mgmt-panel .topic-list li { display: flex; justify-content: space-between; align-items: center; } .sections-mgmt-panel .topic-list-empty-state { display: block; margin-block-end: var(--space-xxlarge); color: var(--text-color-deemphasized); } .sections-mgmt-panel .arrow-button { background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat left center; border: none; cursor: pointer; margin-block-end: var(--space-xlarge); padding-inline-start: var(--space-xlarge); -moz-context-properties: fill; fill: currentColor; min-height: var(--size-item-small); margin-inline-start: var(--space-xsmall); margin-block-start: var(--space-xsmall); } .sections-mgmt-panel .arrow-button:dir(rtl) { background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat right center; } .sections-mgmt-panel .arrow-button h1 { font-size: var(--font-size-root); margin-block: 0; font-weight: var(--button-font-weight); } .sections-mgmt-panel .section-block .section-button-blocked-text, .sections-mgmt-panel .section-block .section-button-following-text, .sections-mgmt-panel .section-follow .section-button-blocked-text, .sections-mgmt-panel .section-follow .section-button-following-text { display: none; } .sections-mgmt-panel .section-block .section-button-unblock-text, .sections-mgmt-panel .section-block .section-button-unfollow-text, .sections-mgmt-panel .section-follow .section-button-unblock-text, .sections-mgmt-panel .section-follow .section-button-unfollow-text { display: none; } .sections-mgmt-panel .section-block.following .section-button-follow-text, .sections-mgmt-panel .section-follow.following .section-button-follow-text { display: none; } .sections-mgmt-panel .section-block.following .section-button-following-text, .sections-mgmt-panel .section-follow.following .section-button-following-text { display: block; } .sections-mgmt-panel .section-block.following:not(:hover) moz-button, .sections-mgmt-panel .section-follow.following:not(:hover) moz-button { --button-background-color-destructive: var(--button-background-color); --button-text-color-destructive: var(--button-text-color); --button-border-color-destructive: var(--button-border-color); } .sections-mgmt-panel .section-block.following:hover .section-button-following-text, .sections-mgmt-panel .section-follow.following:hover .section-button-following-text { display: none; } .sections-mgmt-panel .section-block.following:hover .section-button-unfollow-text, .sections-mgmt-panel .section-follow.following:hover .section-button-unfollow-text { display: block; } .sections-mgmt-panel .section-block.blocked .section-button-block-text, .sections-mgmt-panel .section-follow.blocked .section-button-block-text { display: none; } .sections-mgmt-panel .section-block.blocked .section-button-blocked-text, .sections-mgmt-panel .section-follow.blocked .section-button-blocked-text { display: block; } .sections-mgmt-panel .section-block.blocked:hover .section-button-blocked-text, .sections-mgmt-panel .section-follow.blocked:hover .section-button-blocked-text { display: none; } .sections-mgmt-panel .section-block.blocked:hover .section-button-unblock-text, .sections-mgmt-panel .section-follow.blocked:hover .section-button-unblock-text { display: block; } .category-list { border: none; display: grid; gap: calc(var(--space-xlarge) * 2) var(--space-large); grid-auto-rows: 86px; grid-template-columns: 1fr 1fr 1fr; margin-block-end: var(--space-large); padding: 0; } .category-list label { display: inline-block; font-size: var(--font-size-small); text-align: center; width: 100%; } .category-header { display: flex; justify-content: space-between; } .category-header .wallpapers-reset { margin: unset; } .arrow-button { background: url("chrome://global/skin/icons/arrow-left.svg") no-repeat left center; border: none; cursor: pointer; margin-block-end: var(--space-xlarge); padding-inline-start: var(--space-xlarge); -moz-context-properties: fill; fill: currentColor; min-height: 1rem; margin-inline-start: var(--space-xsmall); margin-block-start: var(--space-xsmall); } .arrow-button:dir(rtl) { background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat right center; } .wallpaper-input { appearance: none; background-clip: content-box; background-repeat: no-repeat; background-size: cover; border-radius: var(--border-radius-medium); border: none; box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2); cursor: pointer; height: 86px; margin: 0; outline: 2px solid transparent; padding: 0; width: 100%; } .wallpaper-input:checked, .wallpaper-input.selected { box-shadow: inset 0 0 0 3px var(--color-accent-primary); } .wallpaper-input.theme-custom-wallpaper { border: 2px dashed var(--border-color-default, #CFCFD8); box-shadow: none; position: relative; } .wallpaper-input.theme-custom-wallpaper::after { content: ""; -moz-context-properties: fill; fill: var(--icon-color); width: calc(var(--icon-size) * 1.25); height: calc(var(--icon-size) * 1.25); display: block; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); } .wallpaper-input.theme-custom-wallpaper:focus { outline-color: var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } .wallpaper-input.theme-custom-wallpaper::after { background: url("chrome://global/skin/icons/plus-20.svg") center no-repeat; } .wallpaper-input.dark-landscape { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-landscape.avif"); } .wallpaper-input.dark-color { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-color.avif"); } .wallpaper-input.dark-mountain { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-mountain.avif"); } .wallpaper-input.dark-panda { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-panda.avif"); } .wallpaper-input.dark-sky { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-sky.avif"); } .wallpaper-input.dark-beach { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/dark-beach.avif"); } .wallpaper-input.light-beach { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-beach.avif"); } .wallpaper-input.light-color { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-color.avif"); } .wallpaper-input.light-landscape { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-landscape.avif"); } .wallpaper-input.light-mountain { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-mountain.avif"); } .wallpaper-input.light-panda { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-panda.avif"); } .wallpaper-input.light-sky { background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-sky.avif"); } .wallpaper-input:focus-visible { outline-offset: var(--focus-outline-offset); } .wallpaper-input:hover { filter: brightness(55%); outline-color: transparent; } .theme-custom-color-picker { background-color: var(--newtab-background-color-secondary); background-clip: content-box; border-radius: var(--border-radius-medium); outline: 2px dashed var(--border-color-default, #CFCFD8); outline-offset: 2px; position: relative; } .theme-custom-color-picker .wallpaper-input { box-shadow: none; } .theme-custom-color-picker .wallpaper-input:focus { outline-color: var(--focus-outline-color); outline-offset: 6px; } .theme-custom-color-picker.default-color-set #solid-color-picker { opacity: 0; } @media (prefers-color-scheme: dark) { .theme-custom-color-picker.default-color-set::after { color-scheme: dark; } } .theme-custom-color-picker.custom-color-dark::after { color-scheme: dark; } .theme-custom-color-picker.is-dark::after { color-scheme: dark; } @media (prefers-color-scheme: dark) { .theme-custom-color-picker.is-dark::after { color: #FBFBFE; } } .theme-custom-color-picker::after { background: url("chrome://global/skin/icons/color-picker-20.svg") center no-repeat; content: ""; -moz-context-properties: fill; fill: var(--icon-color); width: calc(var(--icon-size) * 1.25); height: calc(var(--icon-size) * 1.25); display: block; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); pointer-events: none; cursor: pointer; color-scheme: light; } .theme-custom-color-picker label { display: inline-block; font-size: var(--font-size-small); text-align: center; width: 100%; } .theme-custom-color-picker ::-moz-color-swatch { border-color: transparent; border-radius: var(--border-radius-medium); } .wallpaper-list { display: grid; gap: var(--space-large); grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 86px; margin: var(--space-large) 0; padding: 0; border: none; } .wallpaper-list.category { --wallpaper-panel-width: 430px; background-color: var(--newtab-background-color-secondary); color: var(--newtab-text-primary-color); display: unset; gap: unset; grid-auto-rows: unset; grid-template-columns: unset; height: 100%; padding: var(--space-xlarge); position: absolute; inset-block-start: 0; inset-inline-start: 100%; width: var(--wallpaper-panel-width); z-index: 2; overflow-y: auto; } .wallpaper-list.category fieldset { border: none; display: grid; gap: var(--space-large); grid-auto-rows: 86px; grid-template-columns: 1fr 1fr 1fr; } @media (prefers-reduced-motion: no-preference) { .wallpaper-list.category.wallpaper-list-enter, .wallpaper-list.category.wallpaper-list-exit, .wallpaper-list.category.wallpaper-list-enter-done, .wallpaper-list.category.wallpaper-list-exit-done { transition: inset-inline-start 300ms; } } .wallpaper-list.category.wallpaper-list-enter-done, .wallpaper-list.category.wallpaper-list-enter-active { inset-inline-start: calc(100% - var(--wallpaper-panel-width)); } .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { display: inline-block; } [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-light, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-light { display: none; } .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { display: none; } [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .wallpaper-input.theme-dark, [lwt-newtab-brighttext] .wallpaper-list:not(.ignore-color-mode) .sr-only.theme-dark { display: inline-block; } .wallpaper-list .sr-only { opacity: 0; overflow: hidden; position: absolute; pointer-events: none; } .wallpapers-reset { background: none; border: none; text-decoration: underline; margin-inline: auto; display: block; font-size: var(--font-size-small); color: var(--newtab-text-primary-color); cursor: pointer; } .wallpapers-reset:hover { text-decoration: none; } .wallpapers-reset:focus-visible { outline-offset: -2px; } .custom-wallpaper-error { padding-block-start: var(--space-xlarge); font-size: var(--font-size-small); display: flex; gap: var(--space-small); align-items: center; } .custom-wallpaper-error .icon { width: var(--button-size-icon-small); height: var(--button-size-icon-small); fill: var(--icon-color-critical); } :root { --newtab-weather-content-font-size: var(--font-size-small); --newtab-weather-sponsor-font-size: 8px; } .weather { font-size: inherit; display: inline-block; margin-inline-start: 0; position: absolute; inset-inline-end: var(--space-xxlarge); inset-block-start: var(--space-xxlarge); margin-block-start: 0; z-index: 1; } @media (min-width: 724px) { .weather { inset-inline-end: var(--space-large); } } @media (min-width: 866px) { .weather { inset-inline-end: var(--space-xxlarge); } } .no-search .weather { position: absolute; inset-block-start: var(--space-xxlarge); margin-block-start: 0; margin-inline-start: 0; inset-inline-end: var(--space-large); } @media (min-width: 510px) { .no-search .weather { inset-inline-end: var(--space-xxlarge); } } @media (min-width: 724px) { .no-search .weather { inset-inline-end: var(--space-large); } } @media (min-width: 866px) { .no-search .weather { inset-inline-end: var(--space-xxlarge); } } .weather-placeholder { width: 240px; height: 98px; padding: var(--space-small) var(--space-medium); border-radius: var(--border-radius-medium); background: var(--newtab-background-color-secondary); display: flex; overflow: hidden; } .weather-placeholder .placeholder-image { height: 100%; width: 80px; margin-inline-end: var(--space-medium); flex-shrink: 0; } .weather-placeholder .placeholder-context { width: 100%; display: flex; flex-direction: column; } .weather-placeholder .placeholder-header { height: 45px; width: 100%; margin-block-end: var(--space-small); } .weather-placeholder .placeholder-description { flex-grow: 1; width: 100%; } .weather-placeholder .placeholder-fill { color: var(--newtab-text-primary-color); background: var(--newtab-button-active-background); border-radius: var(--border-radius-small); } .weather-placeholder.placeholder-seen::before { content: ""; display: block; position: absolute; inset-block-start: 0; inset-inline-start: -100%; height: 100%; width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%); z-index: 2; } @media (prefers-reduced-motion: no-preference) { .weather-placeholder.placeholder-seen::before { animation: loading 1.5s infinite; } } @keyframes loading { 0% { inset-inline-start: -100%; } 50%, 100% { inset-inline-start: 100%; } } .has-mobile-download-promo { --mobile-download-promo-width: var(--space-xxlarge); } @media (min-width: 610px) { .has-mobile-download-promo .weather { inset-inline-end: calc(var(--mobile-download-promo-width) + var(--space-medium)); } } @media (min-width: 724px) { .has-mobile-download-promo .weather { inset-inline-end: calc(var(--space-xxlarge) + var(--mobile-download-promo-width) + var(--space-medium)); } } @media (min-width: 866px) { .has-mobile-download-promo.no-search .weather { inset-inline-end: calc(var(--space-xxlarge) + var(--mobile-download-promo-width) + var(--space-medium)); } } .has-weather.has-search .weatherDetailedSummaryRow { display: block; } @media (min-width: 610px) { .has-weather.has-search .weatherDetailedSummaryRow { display: none; } } @media (min-width: 866px) { .has-weather.has-search .weatherDetailedSummaryRow { display: block; } } .has-weather.has-search .weatherIconCol { display: flex; } @media (min-width: 610px) { .has-weather.has-search .weatherIconCol { display: none; } } @media (min-width: 866px) { .has-weather.has-search .weatherIconCol { display: flex; } } .weatherNotAvailable { font-size: var(--newtab-weather-content-font-size); align-items: center; border-radius: var(--border-radius-medium); height: 52px; max-width: 205px; display: none; } @media (min-width: 866px) { .weatherNotAvailable { display: flex; } } .weatherNotAvailable:hover { background-color: var(--button-background-color-ghost-hover); } .weatherNotAvailable:active { background-color: var(--button-background-color-ghost-active); } .weatherNotAvailable .icon { margin-inline-start: var(--space-small); min-width: var(--size-item-small); } .weatherNotAvailable p { margin-inline-start: var(--space-small); } .weatherNotAvailable .weatherButtonContextMenuWrapper { align-self: stretch; padding-inline: var(--space-small); } .lightWallpaper .weatherNotAvailable, .darkWallpaper .weatherNotAvailable { background-color: var(--newtab-weather-background-color); } @media (prefers-contrast) { .lightWallpaper .weatherNotAvailable, .darkWallpaper .weatherNotAvailable { background-color: var(--background-color-box); } } .weatherCard { margin-block-end: var(--space-xsmall); display: flex; flex-wrap: nowrap; align-items: stretch; border-radius: var(--border-radius-medium); } .weatherCard:hover ~ .weatherSponsorText, .weatherCard:focus-within ~ .weatherSponsorText { visibility: visible; } .weatherCard:has(.staticWeatherInfo):hover { box-shadow: none; } .weatherCard:has(.staticWeatherInfo):hover ~ .weatherSponsorText { visibility: hidden; } .weatherCard:hover { box-shadow: var(--box-shadow-card); } .weatherCard a { color: var(--text-color); } .weatherSponsorText { visibility: hidden; font-size: var(--newtab-weather-sponsor-font-size); color: var(--newtab-contextual-text-primary-color); float: inline-end; } .lightWallpaper .weatherSponsorText { color-scheme: light; } .darkWallpaper .weatherSponsorText { color-scheme: dark; } .weatherSponsorText span { color: var(--text-color-deemphasized); inset-inline-end: 0; } .weatherOptIn { position: absolute; inset-block-end: calc(var(--space-medium) * -1.5); inset-inline-start: calc(var(--space-xxlarge) * -9); } .weatherOptIn dialog { background: var(--newtab-background-color-secondary); border: 1px solid var(--border-color-card); border-radius: var(--border-radius-medium); box-shadow: var(--box-shadow-card); display: flex; width: 332px; } .weatherOptIn dialog .weatherOptInImg { -webkit-mask: url("chrome://browser/skin/weather/mostly-sunny.svg") no-repeat center; mask: url("chrome://browser/skin/weather/mostly-sunny.svg") no-repeat center; background-color: var(--button-icon-fill); mask-size: cover; margin-inline-end: var(--space-medium); height: var(--icon-size-xlarge); width: var(--icon-size-xlarge); } .weatherOptIn dialog:focus-visible { outline: var(--focus-outline); } .weatherOptIn dialog:focus-visible::after { border-block-end: var(--focus-outline); border-inline-end: var(--focus-outline); } .weatherOptIn dialog .weatherOptInContent { display: flex; flex-direction: column; justify-content: space-between; } .weatherOptIn dialog .weatherOptInContent h3 { font-size: var(--button-font-size); font-weight: var(--font-weight-heading); margin-block: 0 var(--space-medium); } .weatherOptIn dialog .weatherOptInContent moz-button-group { align-self: flex-end; } .weatherOptIn dialog .weatherOptInContent moz-button-group moz-button:first-of-type { margin-inline-end: var(--space-small); } @media (min-width: 866px) { .weatherOptIn { inset-block-end: calc(var(--space-medium) * -1); inset-inline-start: calc(var(--space-xxlarge) * -5.5); } } dialog::after { content: ""; position: absolute; inset-block-start: -9%; inset-inline-end: 5%; transform: translateX(-50%) rotate(225deg); height: 16px; width: 16px; background: var(--newtab-background-color-secondary); box-shadow: 4px 4px 6px -2px var(--box-shadow-card); border-inline-end: 1px solid var(--border-color-card); border-block-end: 1px solid var(--border-color-card); } dialog:dir(rtl)::after { border-inline-start: 1px solid var(--border-color-card); border-block-end: 1px solid var(--border-color-card); border-inline-end: none; inset-inline-end: 10%; } .weatherInfoLink, .weatherButtonContextMenuWrapper { appearance: none; background-color: var(--background-color-ghost); border: 0; padding: var(--space-small); cursor: pointer; } .weatherInfoLink:hover, .weatherButtonContextMenuWrapper:hover { background-color: var(--newtab-background-color-secondary); } .weatherInfoLink:hover::after, .weatherButtonContextMenuWrapper:hover::after { background-color: transparent; } .weatherInfoLink:hover:active, .weatherButtonContextMenuWrapper:hover:active { background-color: var(--button-background-color-ghost-active); } .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper { background-color: var(--newtab-weather-background-color); } .lightWallpaper .weatherInfoLink:hover, .darkWallpaper .weatherInfoLink:hover, .lightWallpaper .weatherButtonContextMenuWrapper:hover, .darkWallpaper .weatherButtonContextMenuWrapper:hover { background-color: var(--newtab-button-static-hover-background); } .lightWallpaper .weatherInfoLink:hover:active, .darkWallpaper .weatherInfoLink:hover:active, .lightWallpaper .weatherButtonContextMenuWrapper:hover:active, .darkWallpaper .weatherButtonContextMenuWrapper:hover:active { background-color: var(--newtab-button-static-active-background); } @media (prefers-contrast) { .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper { background-color: var(--background-color-box); } } .weatherInfoLink { display: flex; gap: var(--space-medium); padding: var(--space-small) var(--space-medium); border-radius: var(--border-radius-medium); text-decoration: none; color: var(--text-color); min-width: 130px; max-width: 190px; text-overflow: ellipsis; } @media (min-width: 610px) { .weatherInfoLink { min-width: unset; } } @media (min-width: 866px) { .weatherInfoLink { border-start-end-radius: 0; border-end-end-radius: 0; } } .weatherInfoLink:hover ~ .weatherButtonContextMenuWrapper::after { background-color: transparent; } .weatherInfoLink:focus-visible { border-radius: var(--border-radius-medium); outline: var(--focus-outline); z-index: 1; } .weatherInfoLink:focus-visible ~ .weatherButtonContextMenuWrapper::after { background-color: transparent; } .weatherInfoLink.staticWeatherInfo .weatherIcon { filter: opacity(60%); } .weatherInfoLink.staticWeatherInfo .weatherText { color: var(--text-color-disabled); } .weatherInfoLink.staticWeatherInfo:hover, .weatherInfoLink.staticWeatherInfo:active { box-shadow: none; cursor: default; background-color: var(--newtab-weather-background-color); } .weatherButtonContextMenuWrapper { position: relative; cursor: pointer; border-start-start-radius: 0; border-start-end-radius: var(--border-radius-medium); border-end-end-radius: var(--border-radius-medium); border-end-start-radius: 0; display: flex; align-items: stretch; width: 50px; padding: 0; } .weatherButtonContextMenuWrapper::after { content: ""; inset-inline-start: 0; inset-block-start: var(--space-small); height: calc(100% - 20px); width: 1px; background-color: var(--newtab-button-static-background); display: block; position: absolute; z-index: 0; } .weatherButtonContextMenuWrapper:hover::after { background-color: transparent; } .weatherButtonContextMenuWrapper:has(:focus-visible) { border-radius: var(--border-radius-medium); outline: var(--focus-outline); } .weatherButtonContextMenuWrapper:has(:focus-visible)::after { background-color: transparent; } .weatherButtonContextMenu { background-image: url("chrome://global/skin/icons/more.svg"); background-repeat: no-repeat; background-size: var(--size-item-small) auto; background-position: center; background-color: transparent; cursor: pointer; fill: var(--icon-color); -moz-context-properties: fill; width: 100%; height: 100%; border: 0; appearance: none; min-width: var(--size-item-large); } .weatherButtonContextMenu:focus { outline: none; } .weatherText { height: min-content; } .weatherCityRow, .weatherForecastRow, .weatherDetailedSummaryRow { display: flex; justify-content: space-between; align-items: center; gap: var(--space-small); } .weatherForecastRow { text-transform: uppercase; font-weight: var(--font-weight-semibold); } .weatherCityRow { color: var(--text-color-deemphasized); } .weatherCity { -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; word-break: break-word; font-size: var(--font-size-small); } .weatherCityRow + .weatherDetailedSummaryRow { margin-block-start: var(--space-xsmall); } .weatherDetailedSummaryRow { font-size: var(--newtab-weather-content-font-size); gap: var(--space-large); } .weatherHighLowTemps { display: inline-flex; gap: var(--space-xxsmall); text-transform: uppercase; word-spacing: var(--space-xxsmall); margin-inline-end: var(--space-small); } .weatherTextSummary { display: inline; text-align: center; max-width: 90px; } .weatherTemperature { font-size: var(--font-size-large); } .weatherIconCol { width: var(--size-item-large); height: var(--size-item-large); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; align-self: center; } .weatherIcon { width: var(--size-item-large); height: auto; vertical-align: middle; } @media (prefers-contrast) { .weatherIcon { -moz-context-properties: fill, stroke; fill: currentColor; stroke: currentColor; } } .weatherIcon.iconId1 { content: url("chrome://browser/skin/weather/sunny.svg"); } .weatherIcon.iconId2 { content: url("chrome://browser/skin/weather/mostly-sunny.svg"); } .weatherIcon:is(.iconId3, .iconId4, .iconId6) { content: url("chrome://browser/skin/weather/partly-sunny.svg"); } .weatherIcon.iconId5 { content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); } .weatherIcon:is(.iconId7, .iconId8) { content: url("chrome://browser/skin/weather/cloudy.svg"); } .weatherIcon.iconId11 { content: url("chrome://browser/skin/weather/fog.svg"); } .weatherIcon.iconId12 { content: url("chrome://browser/skin/weather/showers.svg"); } .weatherIcon:is(.iconId13, .iconId14) { content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); } .weatherIcon.iconId15 { content: url("chrome://browser/skin/weather/thunderstorms.svg"); } .weatherIcon:is(.iconId16, .iconId17) { content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); } .weatherIcon.iconId18 { content: url("chrome://browser/skin/weather/rain.svg"); } .weatherIcon:is(.iconId19, .iconId20, .iconId25) { content: url("chrome://browser/skin/weather/flurries.svg"); } .weatherIcon.iconId21 { content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); } .weatherIcon:is(.iconId22, .iconId23) { content: url("chrome://browser/skin/weather/snow.svg"); } .weatherIcon:is(.iconId24, .iconId31) { content: url("chrome://browser/skin/weather/ice.svg"); } .weatherIcon:is(.iconId26, .iconId29) { content: url("chrome://browser/skin/weather/freezing-rain.svg"); } .weatherIcon.iconId30 { content: url("chrome://browser/skin/weather/hot.svg"); } .weatherIcon.iconId32 { content: url("chrome://browser/skin/weather/windy.svg"); } .weatherIcon.iconId33 { content: url("chrome://browser/skin/weather/night-clear.svg"); } .weatherIcon:is(.iconId34, .iconId35, .iconId36, .iconId38) { content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); } .weatherIcon.iconId37 { content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); } .weatherIcon:is(.iconId39, .iconId40) { content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); height: var(--size-item-large); } .weatherIcon:is(.iconId41, .iconId42) { content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); } .weatherIcon:is(.iconId43, .iconId44) { content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg"); } .location-input-wrapper { background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary)); color: var(--newtab-text-primary-color); border-radius: var(--border-radius-medium); padding: var(--space-small); position: relative; } .lightWallpaper .location-input-wrapper, .darkWallpaper .location-input-wrapper { background-color: var(--newtab-weather-background-color); } .lightWallpaper .location-input-wrapper:hover, .darkWallpaper .location-input-wrapper:hover { background-color: var(--newtab-button-static-hover-background); } .lightWallpaper .location-input-wrapper:hover:active, .darkWallpaper .location-input-wrapper:hover:active { background-color: var(--newtab-button-static-active-background); } @media (prefers-contrast) { .lightWallpaper .location-input-wrapper, .darkWallpaper .location-input-wrapper { background-color: var(--background-color-box); } } .location-input-wrapper .search-icon { content: url("chrome://global/skin/icons/search-glass.svg"); -moz-context-properties: fill; fill: var(--icon-color); position: absolute; inset-block-start: 50%; transform: translateY(-50%); inset-inline-start: var(--space-large); } .location-input-wrapper .close-icon { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inset-inline-end: var(--space-medium); } .location-input-wrapper .close-icon:focus-visible { outline: var(--focus-outline); } .location-input-wrapper input { border-radius: var(--border-radius-medium); background-color: light-dark(var(--color-white), var(--newtab-background-color-secondary)); padding: var(--space-small) var(--space-xxlarge); border: 1px solid var(--border-color); } .location-input-wrapper input:focus-visible { outline: var(--focus-outline); } .has-weather.has-search .weatherCityRow, .has-weather.has-search .weatherButtonContextMenuWrapper, .has-weather .weatherCityRow, .has-weather .weatherButtonContextMenuWrapper { display: none; } @media (min-width: 866px) { .has-weather.has-search .weatherCityRow, .has-weather.has-search .weatherButtonContextMenuWrapper, .has-weather .weatherCityRow, .has-weather .weatherButtonContextMenuWrapper { display: flex; } } .has-weather.has-search .weatherIconCol, .has-weather .weatherIconCol { display: none; } @media (min-width: 1122px) { .has-weather.has-search .weatherIconCol, .has-weather .weatherIconCol { display: flex; } } .has-weather.has-search .weatherDetailedSummaryRow, .has-weather .weatherDetailedSummaryRow { display: none; } @media (min-width: 1122px) { .has-weather.has-search .weatherDetailedSummaryRow, .has-weather .weatherDetailedSummaryRow { display: block; } } .has-weather.has-search .weatherCard, .has-weather .weatherCard { min-height: 55px; } .has-weather.has-search .weatherInfoLink, .has-weather .weatherInfoLink { min-width: auto; max-width: none; } @media (min-width: 1122px) { .has-weather.has-search .weatherInfoLink, .has-weather .weatherInfoLink { min-width: 130px; max-width: 190px; } } .has-weather.has-search .weatherForecastRow, .has-weather .weatherForecastRow { margin-block: var(--space-small); } @media (min-width: 866px) { .has-weather.has-search .weatherForecastRow, .has-weather .weatherForecastRow { margin-block: unset; } } .has-weather.has-search .weatherSponsorText, .has-weather .weatherSponsorText { position: relative; } .has-weather.has-search .weatherSponsorText span, .has-weather .weatherSponsorText span { position: absolute; white-space: nowrap; inset-block-start: var(--space-small); } @media (min-width: 866px) { .has-weather.has-search .weatherSponsorText span, .has-weather .weatherSponsorText span { inset-block-start: unset; position: relative; } } .mobileDownloadPromoWrapper { display: none; height: 55px; } @media (min-width: 1122px) { .mobileDownloadPromoWrapper.is-tall { height: 74px; } } @media (min-width: 610px) { .mobileDownloadPromoWrapper { display: flex; align-items: center; justify-content: center; position: absolute; inset-inline-start: auto; inset-block-start: var(--space-xxlarge); inset-inline-end: var(--space-medium); margin-block-start: 0; margin-inline-start: 0; z-index: 1; } } @media (min-width: 724px) { .mobileDownloadPromoWrapper { inset-inline-end: var(--space-xxlarge); } } .no-search .mobileDownloadPromoWrapper { display: none; } @media (min-width: 866px) { .no-search .mobileDownloadPromoWrapper { display: flex; inset-block-start: var(--space-xxlarge); inset-inline-start: auto; inset-inline-end: var(--space-xxlarge); } } .mobile-download-promo { width: 32px; height: 32px; appearance: none; border: 0; border-radius: var(--border-radius-small); padding: 0; cursor: pointer; } .mobile-download-promo:hover { background-color: var(--button-background-color-ghost-hover); } .mobile-download-promo:hover:active { background-color: var(--button-background-color-ghost-active); } .mobile-download-promo.is-active { background-color: var(--button-background-color-ghost-active); } .lightWallpaper .mobile-download-promo, .darkWallpaper .mobile-download-promo { background-color: var(--newtab-weather-background-color); } @media (prefers-contrast) { .lightWallpaper .mobile-download-promo, .darkWallpaper .mobile-download-promo { background-color: var(--background-color-box); } } /* stylelint-disable max-nesting-depth */ .card-outer { background: var(--newtab-background-color-secondary); border-radius: var(--border-radius-medium); display: inline-block; height: 266px; margin-inline-end: var(--space-xxlarge); position: relative; width: 100%; } .card-outer .context-menu-button { background-clip: padding-box; background-color: var(--newtab-button-background); background-image: url("chrome://global/skin/icons/more.svg"); background-position: 50.1%; border: 0; outline: 1px solid var(--border-color); outline-width: 0; border-radius: var(--border-radius-circle); cursor: pointer; color: var(--button-text-color); fill: var(--newtab-button-text); height: 27px; inset-inline-end: calc(var(--space-medium) * -1); opacity: 0; position: absolute; inset-block-start: calc(var(--space-medium) * -1); transform: scale(0.25); transition-duration: 150ms; transition-property: transform, opacity; width: 27px; } .card-outer .context-menu-button:is(:active, :focus-visible, :hover) { opacity: 1; transform: scale(1); } .card-outer .context-menu-button:is(:hover) { background-color: var(--newtab-button-hover-background); } .card-outer .context-menu-button:is(:focus-visible) { outline-color: var(--newtab-button-focus-border); background-color: var(--newtab-button-focus-background); outline-width: 4px; } .card-outer .context-menu-button:is(:active) { background-color: var(--newtab-button-active-background); } .card-outer:is(:focus):not(.placeholder) { border: 0; outline: var(--focus-outline); 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: var(--border-radius-medium); 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: var(--focus-outline); } .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: var(--border-radius-medium) var(--border-radius-medium) 0 0; height: 122px; overflow: hidden; position: relative; } .card-outer .card-preview-image-outer::after { border-block-end: 1px solid var(--newtab-card-hairline-color); inset-block-end: 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: var(--space-large) var(--space-large) var(--space-medium); } .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: var(--font-size-small); overflow: hidden; padding-block-end: var(--space-xsmall); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .card-outer .card-host-name.alternate { display: none; } .card-outer .card-title { font-size: inherit; font-weight: var(--font-weight-heading); line-height: 19px; margin: 0 0 var(--space-xxsmall); word-wrap: break-word; } .card-outer .card-description { font-size: var(--font-size-small); line-height: 19px; margin: 0; overflow: hidden; word-wrap: break-word; } .card-outer .card-context { inset-block-end: 0; color: var(--newtab-text-secondary-color); display: flex; font-size: var(--font-size-small); inset-inline-start: 0; padding: var(--space-small) var(--space-large); position: absolute; } .card-outer .card-context-icon { fill: var(--newtab-text-secondary-color); height: 22px; margin-inline-end: var(--space-xsmall); } .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: var(--space-medium) var(--space-large); } .normal-cards .card-outer .card-text { max-height: 140px; } .normal-cards .card-outer .card-host-name { font-size: var(--font-size-small); padding-block-end: var(--space-xsmall); } .normal-cards .card-outer .card-title { font-size: var(--font-size-large); line-height: 23px; margin-block-end: 0; } .normal-cards .card-outer .card-text:not(.no-description) .card-title { max-height: 69px; } .normal-cards .card-outer .card-description { font-size: inherit; line-height: 23px; } .normal-cards .card-outer .card-context { inset-block-end: var(--space-xsmall); font-size: inherit; line-height: 23px; } } .compact-cards .card-outer { height: 160px; } .compact-cards .card-outer .card-preview-image-outer { height: 108px; } .compact-cards .card-outer .card-details { padding: var(--space-medium) var(--space-large); } .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: var(--font-size-small); line-height: calc(var(--font-size-small) + 1px); max-height: calc(var(--font-size-small) + 5px); overflow: hidden; padding: 0 0 var(--space-xsmall); 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: var(--border-radius-medium); clip-path: inset(-1px -1px 4px); height: 32px; width: 32px; padding: var(--space-small); inset-block-start: 91px; inset-inline-end: var(--space-medium); inset-inline-start: auto; } .compact-cards .card-outer .card-context::after { border: 1px solid var(--newtab-card-hairline-color); border-block-end: 0; border-radius: var(--border-radius-medium); content: ""; position: absolute; height: 17px; width: 34px; inset-block-start: calc(var(--space-xxsmall) * -1); inset-inline-start: calc(var(--space-xxsmall) * -1); } .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: var(--color-blue-40); } .compact-cards .card-outer .card-context .card-context-icon.icon-download { fill: var(--color-green-40); } .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: 0 var(--space-xlarge); margin-block-end: var(--space-xxlarge); } .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: var(--font-size-large); font-weight: var(--font-weight-heading); 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: inherit; color: var(--newtab-text-secondary-color); opacity: 0.3; } .collapsible-section .section-top-bar { min-height: 19px; margin-block-end: var(--space-medium); position: relative; display: flex; justify-content: space-between; align-items: center; } @media (max-width: 609px) { .collapsible-section .section-top-bar { flex-direction: column; gap: var(--space-small); align-items: flex-start; } } .collapsible-section.active { background: var(--newtab-element-hover-color); border-radius: var(--border-radius-small); } .collapsible-section .learn-more-link { font-size: var(--font-size-small); margin-inline-start: var(--space-medium); } .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 calc(var(--space-xsmall) * -1); padding: 0 var(--space-small); } .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; } } .collapsible-section .button-topic-selection { display: none; } @media (min-width: 724px) { .collapsible-section .button-topic-selection { display: block; } } .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button), .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button) { background-color: var(--newtab-weather-background-color); } .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover, .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover { background-color: var(--newtab-button-static-hover-background); } .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover:active, .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button):hover:active { background-color: var(--newtab-button-static-active-background); } @media (prefers-contrast) { .lightWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button), .darkWallpaper .collapsible-section .button-topic-selection moz-button[type=default]::part(button) { background-color: var(--background-color-box); } } /* stylelint-disable max-nesting-depth */ .discoverystream-admin-toggle { position: fixed; inset-block-end: calc(var(--button-size-icon) + var(--space-xxlarge) + var(--space-small)); inset-inline-end: var(--space-xlarge); appearance: none; border: 0; border-radius: var(--border-radius-small); background-color: var(--button-background-color, rgba(21, 20, 26, 0.07)); box-shadow: 0 0.8px 1.6px 0 rgba(58, 57, 68, 0.2); padding: calc(5 * var(--space-xxsmall)); z-index: 4; display: flex; align-items: center; } .lightWallpaper .discoverystream-admin-toggle, .darkWallpaper .discoverystream-admin-toggle { background-color: var(--newtab-weather-background-color); } @media (prefers-contrast) { .lightWallpaper .discoverystream-admin-toggle, .darkWallpaper .discoverystream-admin-toggle { background-color: var(--background-color-box); } } .discoverystream-admin-toggle:hover { background-color: var(--newtab-button-static-hover-background); } .discoverystream-admin-toggle:active { background-color: var(--newtab-button-static-active-background); } .discoverystream-admin-toggle:focus-visible { border: 0; outline: var(--focus-outline); background-color: var(--newtab-button-static-active-background); } .discoverystream-admin-toggle:dir(rtl) { transform: scaleX(-1); } .discoverystream-admin-toggle > div { width: var(--icon-size-medium); height: var(--icon-size-medium); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .discoverystream-admin-toggle > div > img { -moz-context-properties: fill; display: inline-block; color: var(--icon-color); fill: currentColor; height: 100%; object-fit: contain; vertical-align: middle; width: 100%; } .discoverystream-admin { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 100%; background: var(--newtab-background-color); height: 100%; overflow-y: scroll; margin: 0 auto; color: var(--newtab-text-primary-color); z-index: 3; } .discoverystream-admin .personalization-data { padding-block-end: var(--space-xlarge); } .discoverystream-admin.collapsed { display: none; } .discoverystream-admin h1 { font-size: var(--font-size-xxlarge); } .discoverystream-admin h2 .button, .discoverystream-admin p .button { font-size: inherit; padding: var(--space-xsmall) var(--space-medium); margin-inline-start: var(--space-xsmall); margin-block-end: 0; } .discoverystream-admin .toggle-wrapper { margin-block: var(--space-large); width: 200px; } .discoverystream-admin .inferred-personalization-overrides { margin-block: var(--space-large); } .discoverystream-admin .inferred-overrides-header { display: flex; align-items: center; gap: var(--space-medium); } .discoverystream-admin .inferred-overrides-title { margin: 0; } .discoverystream-admin .inferred-overrides-actions { display: flex; align-items: center; gap: var(--space-medium); } .discoverystream-admin .inferred-overrides-actions .button { margin: 0; } .discoverystream-admin .inferred-overrides-toggle-row td:first-child { font-weight: var(--font-weight-bold); } .discoverystream-admin .inferred-overrides-last-refreshed { display: flex; align-items: center; gap: var(--space-small); font-size: var(--font-size-small); margin-block: var(--space-small) var(--space-medium); padding-inline-start: var(--space-small); } .discoverystream-admin .inferred-overrides-last-refreshed-label { font-weight: var(--font-weight-bold); } .discoverystream-admin .inferred-vectors-row { display: flex; align-items: stretch; gap: var(--space-xlarge); margin-block-start: var(--space-xlarge); } .discoverystream-admin .inferred-vector-column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-small); } .discoverystream-admin .inferred-vector-panel { border: 1px solid var(--border-color); padding: var(--space-small); flex: 1; display: flex; flex-direction: column; } .discoverystream-admin .inferred-vector-panel pre { margin-block-start: 0; flex: 1; overflow: auto; } .discoverystream-admin .inferred-vector-title { font-weight: var(--font-weight-bold); } .discoverystream-admin .inferred-overrides-table-header td { font-weight: var(--font-weight-bold); } .discoverystream-admin .inferred-score-col { width: 1%; white-space: nowrap; text-align: center; padding-inline: 0; } .discoverystream-admin .inferred-overrides-toggle-row td { vertical-align: middle; } .discoverystream-admin .inferred-override-controls { display: flex; align-items: center; gap: var(--space-medium); } .discoverystream-admin .inferred-override-slider { width: 160px; } .discoverystream-admin .inferred-override-value { min-width: 2ch; text-align: end; } .discoverystream-admin .details-section { margin-block: var(--space-large); } .discoverystream-admin .details-section summary { font-size: var(--font-size-large); } .discoverystream-admin table { border-collapse: collapse; width: 100%; } .discoverystream-admin table.minimal-table { border-collapse: collapse; border: 1px solid var(--border-color); } .discoverystream-admin table.minimal-table td { padding: var(--space-small); } .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: var(--space-xsmall); } .discoverystream-admin table.errorReporting td[rowspan] { border: 1px solid var(--newtab-background-color-secondary); } .discoverystream-admin .large-data-container { max-height: 500px; overflow-y: scroll; } .discoverystream-admin .message-item:first-child td { border-block-start: 1px solid var(--border-color); } .discoverystream-admin .message-item td { vertical-align: top; padding: var(--space-small); border-block-end: 1px solid var(--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(--border-color); } .discoverystream-admin .message-item td:last-child { border-inline-end: 1px solid var(--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: var(--font-size-small); } .discoverystream-admin pre { background: var(--newtab-background-color-secondary); margin: 0; padding: var(--space-small); font-size: var(--font-size-small); max-width: 750px; overflow: auto; font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace; } .discoverystream-admin .helpLink { padding: var(--space-medium); display: flex; background: rgba(0, 0, 0, 0.1); border-radius: var(--border-radius-small); 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-block-end: var(--space-large); } .discoverystream-admin .collapsed { display: none; } .discoverystream-admin .icon { display: inline-table; width: 18px; height: 18px; } .discoverystream-admin .button:disabled, .discoverystream-admin .button:disabled:active { opacity: 0.5; cursor: unset; box-shadow: none; } .discoverystream-admin .weather-section { margin-block-end: var(--space-xlarge); } .discoverystream-admin .weather-section form { display: flex; } .discoverystream-admin .weather-section form label { margin-inline-end: var(--space-medium); } .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: var(--space-xsmall); vertical-align: top; width: var(--icon-size-xsmall); } .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; } .nova-enabled .discovery-stream.ds-layout { display: grid; } .nova-enabled .discovery-stream.ds-layout.ds-layout-widgets { grid-template-columns: subgrid; } .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: flex; flex-direction: column; grid-row-gap: var(--gridRowGap); } .discovery-stream.ds-layout .ds-column-grid > div:empty { display: none; } .ds-header { margin: var(--space-small) 0; } .ds-header .ds-context { font-weight: var(--font-weight); } .ds-header, .ds-layout .section-title span { color: var(--newtab-contextual-text-primary-color); font-size: var(--font-size-large); font-weight: var(--font-weight-heading); } .lightWallpaper .ds-header, .lightWallpaper .ds-layout .section-title span { color-scheme: light; } .darkWallpaper .ds-header, .darkWallpaper .ds-layout .section-title span { color-scheme: dark; } .ds-header .icon, .ds-layout .section-title span .icon { fill: var(--newtab-text-secondary-color); } .collapsible-section.ds-layout { margin: auto; } .lightWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link { color-scheme: light; } .darkWallpaper .collapsible-section.ds-layout .section-top-bar .learn-more-link { color-scheme: dark; } .collapsible-section.ds-layout .section-top-bar .learn-more-link a { color: var(--newtab-primary-action-background); font-weight: var(--font-weight-semibold); } .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) { text-decoration: none; } .nova-enabled .content .discovery-stream.ds-layout { display: contents; grid-column: 1/-1; } .nova-enabled .content .ds-section-wrapper { display: contents; } .nova-enabled .ds-layout-widgets { grid-column: 1/-1; display: contents; } .nova-enabled .ds-layout-widgets .ds-column { display: contents; } .nova-enabled .ds-layout-widgets .ds-column-grid { display: contents; } .nova-enabled .ds-layout-widgets .ds-column-grid > div { display: contents; } .modalOverlayOuter { border: none; box-shadow: var(--box-shadow-popup); padding: 0; border-radius: var(--border-radius-medium); } .modalOverlayOuter::backdrop { background: var(--newtab-overlay-color); } .notification-wrapper { position: fixed; inset-inline-end: var(--space-medium); inset-block-end: var(--space-medium); z-index: 10; } .notification-feed-item { position: relative; animation: toastSlideInSlideOut 4s ease-in-out forwards; } @keyframes toastSlideInSlideOut { 0%, 100% { opacity: 0; inset-block-start: 50%; } 15%, 85% { opacity: 1; inset-block-start: 0; } } /* 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/. */ .discovery-stream.ds-layout.ds-layout-widgets { margin-inline: 0; } .widgets-wrapper { margin-inline: auto; padding-block-end: var(--space-large); } .classic-enabled .widgets-wrapper { max-width: max-content; } .nova-enabled .widgets-wrapper { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; } .classic-enabled .widgets-section-container { padding-block: var(--space-xsmall) var(--space-large); padding-inline: var(--space-large); background-color: var(--button-background-color); border-radius: var(--border-radius-large); } .lightWallpaper .classic-enabled .widgets-section-container, .darkWallpaper .classic-enabled .widgets-section-container { background-color: var(--newtab-weather-background-color); } @media (prefers-contrast) { .lightWallpaper .classic-enabled .widgets-section-container, .darkWallpaper .classic-enabled .widgets-section-container { background-color: var(--background-color-box); } } .nova-enabled .widgets-section-container { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; } .widgets-section-container .widgets-title-container { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-medium); } .nova-enabled .widgets-section-container .widgets-title-container { grid-column: 1/-1; } .widgets-section-container .widgets-title-container .widgets-title-container-text { display: inline-block; margin-inline-end: auto; position: relative; } .widgets-section-container h1 { font-size: var(--font-size-large); font-weight: var(--font-weight-bold); } @media (min-width: 1122px) { .classic-enabled .widgets-section-container { padding-block-end: var(--space-xlarge); padding-inline: var(--space-xlarge); } } @media (min-width: 1122px) { .has-sections-grid .classic-enabled .widgets-section-container { padding-block-end: var(--space-large); padding-inline: var(--space-large); } } .nova-enabled .widgets-container { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; gap: var(--space-medium); } .classic-enabled .widgets-container { --widgets-card-width: var(--newtab-card-grid-layout-width); --widgets-max-cols: 3; --widgets-grid-gap: var(--space-large); --widgets-small-card-height: var(--newtab-card-height-small); } .classic-enabled .widgets-container:has(.lists), .classic-enabled .widgets-container:has(.focus-timer) { display: grid; grid-template-columns: repeat(auto-fit, var(--widgets-card-width)); gap: var(--widgets-grid-gap); } @media (min-width: 610px) { .classic-enabled .widgets-container:has(.lists), .classic-enabled .widgets-container:has(.focus-timer) { max-width: calc(var(--widgets-max-cols) * var(--widgets-card-width) + (var(--widgets-max-cols) - 1) * var(--widgets-grid-gap)); justify-content: center; } } @media (min-width: 1122px) { .classic-enabled .widgets-container:has(.lists), .classic-enabled .widgets-container:has(.focus-timer) { --widgets-grid-gap: var(--space-xlarge); } } .classic-enabled .widgets-container .small-widget { height: var(--widgets-small-card-height); } .classic-enabled .has-sections-grid .widgets-container { --widgets-card-width: var(--newtab-card-width-medium); } @media (min-width: 1122px) { .classic-enabled .has-sections-grid .widgets-container:has(.lists), .classic-enabled .has-sections-grid .widgets-container:has(.focus-timer) { --widgets-grid-gap: var(--space-large); } } .widgets-feedback-link { display: inline-block; margin-block-start: var(--space-medium); font-size: var(--font-size-small); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper { width: auto; max-width: min-content; border-radius: var(--border-radius-medium); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper.inset-block-end { margin-block-start: var(--space-large); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .content-wrapper { margin: 0; padding: var(--space-medium); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight img { border-radius: var(--border-radius-medium); margin-block-end: var(--space-small); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight h3 { margin-block: 0 var(--space-xsmall); font-size: var(--font-size-root); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .widget-highlight p { margin-block: 0; font-size: var(--font-size-root); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper .message-icon { display: none; } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper moz-button { position: absolute; inset-inline-end: var(--space-medium); inset-block-start: var(--space-medium); --button-icon-fill: var(--color-gray-05); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper.no-image { min-width: 370px; padding-block-start: var(--space-small); } .feature-highlight .feature-highlight-modal.widget-highlight-wrapper.no-image moz-button { --button-icon-fill: var(--icon-color); } /* 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/. */ .lists { background: var(--newtab-background-card); transition: opacity 0.2s ease; border-radius: var(--border-radius-large); padding-block-start: var(--space-medium); box-shadow: var(--box-shadow-card); position: relative; display: flex; flex-direction: column; } .lists:hover { background: var(--newtab-background-color-secondary); } .classic-enabled .lists { grid-column: span 1; width: var(--newtab-card-grid-layout-width); height: var(--newtab-card-height); } .has-sections-grid .classic-enabled .lists { width: var(--newtab-card-width-medium); } .lists .confetti-canvas { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; /* adjust as needed to sit above background but below UI */ } .lists .select-wrapper { padding-inline: var(--space-medium); display: flex; justify-content: flex-start; position: relative; align-items: center; gap: var(--space-medium); } .lists .select-wrapper moz-button { visibility: hidden; margin-inline-start: auto; } .lists:hover .select-wrapper moz-button, .lists:focus-within .select-wrapper moz-button, .lists .select-wrapper panel-list[open] .select-wrapper moz-button { visibility: visible; } .lists .edit-list { outline: var(--focus-outline); } .lists .add-task-container { margin-block: var(--space-small); padding-inline: var(--space-medium); position: relative; } .lists .add-task-container .icon.icon-add { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inset-inline-start: calc(var(--space-medium) + var(--space-small)); } .lists .add-task-container .icon.icon-add.icon-disabled { fill: var(--text-color-disabled); } .lists .add-task-container .add-task-input { background: var(--button-background-color); padding-block: var(--space-small); padding-inline-start: calc(var(--space-large) * 2 + var(--space-xsmall)); padding-inline-end: var(--space-large); outline: none; border: none; border-radius: var(--border-radius-small); width: 100%; } .lists .add-task-container .add-task-input:focus { outline: var(--focus-outline); } .lists .add-task-container .add-task-input:focus::placeholder { color: var(--newtab-text-primary-color); } .lists .add-task-container .add-task-input:disabled { background-color: var(--button-background-color-ghost); color: var(--text-color-disabled); outline: var(--border-width) solid var(--border-color-interactive-disabled); } .lists .task-list-wrapper { height: 100%; padding-block-start: var(--space-xsmall); } .lists fieldset { margin: 0; padding-block: 0; padding-inline: var(--space-medium); border: none; overflow-y: auto; max-height: 165px; } .lists fieldset:focus { outline: var(--focus-outline); } .lists .task-item { align-items: center; background: transparent; border-radius: var(--border-radius-small); display: flex; justify-content: space-between; transition: opacity 300ms ease; margin-block-end: var(--space-xsmall); } .lists .task-item.task-type-tasks:last-of-type { margin-block-end: var(--space-small); } @media (prefers-reduced-motion: no-preference) { .lists .task-item.exiting { opacity: 0; } } .lists .task-item .checkbox-wrapper { display: flex; align-items: center; flex-grow: 2; padding-block: var(--space-small); } .lists .task-item .checkbox-wrapper span { -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: normal; max-width: 180px; } .lists .task-item input[type=checkbox] { height: var(--size-item-small); width: var(--size-item-small); accent-color: var(--color-accent-primary); margin-inline-start: var(--space-small); padding: 0; } .lists .task-item .task-label { position: relative; padding-inline-start: var(--space-small); } .lists .task-item input:checked ~ .task-label { color: var(--text-color-deemphasized); text-decoration: line-through; } .lists .task-item moz-button { margin-inline-end: var(--space-xsmall); visibility: hidden; } .lists .task-item moz-button:has(+ panel-list[open]) { visibility: visible; } .lists .task-item:hover, .lists .task-item:focus-visible, .lists .task-item:focus-within { background: var(--button-background-color); } .lists .task-item:hover moz-button, .lists .task-item:focus-visible moz-button, .lists .task-item:focus-within moz-button { visibility: visible; } .lists .task-item panel-list[open] ~ moz-button { visibility: visible; } .lists .task-item .edit-task { margin-inline-start: var(--space-small); max-width: 180px; border: none; border-radius: 0; user-select: text; } .lists .task-item .edit-task:focus { outline: var(--focus-outline); } .lists .empty-list { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-small); height: 100%; padding-block-end: var(--space-medium); } .lightWallpaper .lists .empty-list { color-scheme: light; } .darkWallpaper .lists .empty-list { color-scheme: dark; } .lists .empty-list .empty-list-text { margin: 0; text-align: center; color: var(--text-color-deemphasized); font-size: var(--font-size-small); padding-inline: var(--space-medium); } .lists .completed-task-wrapper { display: flex; flex-direction: column; gap: var(--space-small); } .lists .completed-task-wrapper summary { list-style: none; } .lists .completed-task-wrapper summary:focus { outline: var(--focus-outline); } .lists .completed-task-wrapper summary .completed-title { color: var(--text-color-deemphasized); position: relative; } .lists .completed-task-wrapper summary .completed-title::after { content: ""; -moz-context-properties: fill; fill: var(--button-icon-fill); background-image: url("chrome://global/skin/icons/arrow-right.svg"); height: var(--icon-size-small); width: var(--icon-size-small); position: absolute; inset-inline-end: calc(-1 * var(--space-xlarge)); inset-block-start: 50%; transform: translateY(-50%); } .lists .completed-task-wrapper summary .completed-title:dir(rtl)::after { background-image: url("chrome://global/skin/icons/arrow-left.svg"); } .lists .completed-task-wrapper[open] .completed-title::after { background-image: url("chrome://global/skin/icons/arrow-down.svg"); } /* 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/. */ .focus-timer { background: var(--newtab-background-card); transition: opacity 0.2s ease; border-radius: var(--border-radius-large); padding-block: var(--space-medium); display: flex; flex-direction: column; align-items: center; box-shadow: var(--box-shadow-card); } .focus-timer:hover { background: var(--newtab-background-color-secondary); } .classic-enabled .focus-timer { grid-column: span 1; width: var(--newtab-card-grid-layout-width); height: var(--newtab-card-height); } .has-sections-grid .classic-enabled .focus-timer { width: var(--newtab-card-width-medium); } .focus-timer-tabs { display: flex; margin-block-end: var(--space-medium); position: relative; width: 100%; padding-inline: var(--space-medium); } .focus-timer-tabs-buttons { display: flex; gap: var(--space-xxsmall); justify-content: center; flex-grow: 1; } .focus-timer-tabs-buttons moz-button { flex-grow: 1; } .focus-timer-tabs-buttons moz-button:first-of-type::part(button) { border-end-end-radius: 0; border-start-end-radius: 0; } .focus-timer-tabs-buttons moz-button:last-of-type::part(button) { border-start-start-radius: 0; border-end-start-radius: 0; } .newtab-widget-timer-notification-title-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-inline: var(--space-medium); margin-block-end: var(--space-medium); } .newtab-widget-timer-notification-title-wrapper h3 { font-size: var(--button-font-size); font-weight: var(--font-weight-heading); margin-block: 0; } .focus-timer-context-menu-wrapper { opacity: 0; pointer-events: none; } .focus-timer:hover .focus-timer-context-menu-wrapper, .focus-timer:focus-within .focus-timer-context-menu-wrapper { opacity: 1; pointer-events: auto; } .progress-circle-wrapper { /* Colours for the main timer */ --timer-red: var(--color-red-50); --timer-orange: var(--color-orange-30); /* Colours for the break timer */ --timer-blue: var(--color-blue-20); --timer-violet: var(--color-violet-20); /* Complete timer */ --timer-green: var(--color-green-20); min-height: 138px; position: relative; width: 138px; overflow: hidden; margin-block-end: var(--space-small); /* main timer colours */ /* break timer colours */ /* timer turns green when complete */ } .progress-circle-wrapper.is-small { min-height: 114px; width: 114px; } .progress-circle-wrapper.is-small .progress-circle-label { font-size: var(--font-size-xxlarge); } .progress-circle-wrapper .progress-circle-background, .progress-circle-wrapper .progress-circle-background-break, .progress-circle-wrapper .progress-circle, .progress-circle-wrapper .progress-circle-complete { --thickness: var(--space-small); border-radius: var(--border-radius-circle); inset: 0; mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), black calc(100% - var(--thickness))); position: absolute; } .progress-circle-wrapper .progress-circle, .progress-circle-wrapper .progress-circle-complete { background-color: var(--border-color-interactive); } .progress-circle-wrapper .progress-circle-background { background: conic-gradient(var(--timer-orange) 0deg, var(--timer-red) 150deg, var(--timer-red) 210deg, var(--timer-orange) 360deg); } .progress-circle-wrapper .progress-circle-background-break { background: conic-gradient(var(--timer-violet) 0deg, var(--timer-blue) 150deg, var(--timer-blue) 210deg, var(--timer-violet) 360deg); } .progress-circle-wrapper .progress-circle-complete { background: var(--timer-green); opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 2; } .progress-circle-wrapper .progress-circle-complete.visible { opacity: 1; } .progress-circle-wrapper .focus-hidden { opacity: 0; pointer-events: none; } .progress-circle-wrapper .focus-visible { opacity: 1; } .progress-circle-wrapper .break-hidden { opacity: 0; pointer-events: none; } .progress-circle-wrapper .break-visible { opacity: 1; } .progress-circle-wrapper .progress-circle-label { align-items: center; color: var(--text-color); display: flex; font-size: calc(var(--font-size-large) * 2); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; height: 100%; inset-block-start: 0; inset-inline-start: 0; justify-content: center; position: absolute; width: 100%; z-index: 2; } .timer-set-minutes:focus, .timer-set-seconds:focus { outline: var(--focus-outline); } .focus-timer-controls { display: flex; flex-direction: row; align-items: center; gap: var(--space-medium); } .timer-notification-status { color: var(--text-color-deemphasized); font-size: var(--font-size-small); margin-block-start: var(--space-small); } .weather-forecast-widget { background: var(--newtab-background-card); transition: opacity 0.2s ease; position: relative; text-decoration: none; border-radius: var(--border-radius-large); padding: var(--space-medium); box-shadow: var(--box-shadow-card); display: flex; flex-direction: column; --weather-sunny-background-color: light-dark(var(--color-yellow-0), var(--color-yellow-90)); --weather-cloudy-background-color: light-dark(var(--color-gray-20), var(--color-gray-80)); --weather-rainy-background-color: light-dark(var(--color-blue-0), var(--color-blue-90)); --weather-snowy-background-color: light-dark(var(--color-violet-0), var(--color-violet-90)); --weather-hot-background-color: light-dark(var(--color-orange-0), var(--color-orange-90)); } .weather-forecast-widget:hover { background: var(--newtab-background-color-secondary); } .classic-enabled .weather-forecast-widget { grid-column: span 1; width: var(--newtab-card-grid-layout-width); height: var(--newtab-card-height); } .has-sections-grid .classic-enabled .weather-forecast-widget { width: var(--newtab-card-width-medium); } .weather-forecast-widget .city-wrapper { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-xsmall); } .weather-forecast-widget .city-wrapper .city-name { width: 100%; } .weather-forecast-widget .city-wrapper h3 { margin-block: 0; font-weight: var(--font-weight); font-size: var(--font-size-root); } .weather-forecast-widget .city-wrapper .location-input-wrapper { padding-block: 0; } .weather-forecast-widget .city-wrapper .location-input-wrapper input { width: 100%; } .weather-forecast-widget .forecast-anchor { position: absolute; inset: 0; z-index: 0; border-radius: var(--border-radius-large); text-decoration: none; } .weather-forecast-widget .weather-forecast-context-menu-wrapper { position: relative; z-index: 1; opacity: 0; pointer-events: none; } .weather-forecast-widget:hover { background: var(--newtab-background-card); } .weather-forecast-widget:hover .sponsored-text { visibility: visible; } .weather-forecast-widget:hover .full-forecast { text-decoration: underline; color: var(--newtab-primary-action-background); } .weather-forecast-widget:hover .weather-forecast-context-menu-wrapper, .weather-forecast-widget:focus-within .weather-forecast-context-menu-wrapper { opacity: 1; pointer-events: auto; } .weather-forecast-widget .current-weather-wrapper { display: flex; align-items: center; margin-block: var(--space-small); padding: var(--space-medium); border-radius: var(--border-radius-medium); width: 100%; } .weather-forecast-widget .current-weather-wrapper:has(.iconId1, .iconId2, .iconId3, .iconId4, .iconId5, .iconId6, .iconId33), .weather-forecast-widget.small-widget .forecast-row-items > li:first-of-type:has(.iconId1, .iconId2, .iconId3, .iconId4, .iconId5, .iconId6, .iconId33) { background-color: var(--weather-sunny-background-color); } .weather-forecast-widget .current-weather-wrapper:has(.iconId7, .iconId8, .iconId11, .iconId32, .iconId34, .iconId35, .iconId36, .iconId37, .iconId38), .weather-forecast-widget.small-widget .forecast-row-items > li:first-of-type:has(.iconId7, .iconId8, .iconId11, .iconId32, .iconId34, .iconId35, .iconId36, .iconId37, .iconId38) { background-color: var(--weather-cloudy-background-color); } .weather-forecast-widget .current-weather-wrapper:has(.iconId12, .iconId13, .iconId14, .iconId15, .iconId16, .iconId17, .iconId18, .iconId39, .iconId40, .iconId41, .iconId42), .weather-forecast-widget.small-widget .forecast-row-items > li:first-of-type:has(.iconId12, .iconId13, .iconId14, .iconId15, .iconId16, .iconId17, .iconId18, .iconId39, .iconId40, .iconId41, .iconId42) { background-color: var(--weather-rainy-background-color); } .weather-forecast-widget .current-weather-wrapper:has(.iconId19, .iconId20, .iconId21, .iconId22, .iconId23, .iconId24, .iconId25, .iconId26, .iconId29, .iconId31, .iconId43, .iconId44), .weather-forecast-widget.small-widget .forecast-row-items > li:first-of-type:has(.iconId19, .iconId20, .iconId21, .iconId22, .iconId23, .iconId24, .iconId25, .iconId26, .iconId29, .iconId31, .iconId43, .iconId44) { background-color: var(--weather-snowy-background-color); } .weather-forecast-widget .current-weather-wrapper:has(.iconId30), .weather-forecast-widget.small-widget .forecast-row-items > li:first-of-type:has(.iconId30) { background-color: var(--weather-hot-background-color); } .weather-forecast-widget.forecast-error-state .full-forecast { display: none; } .weather-forecast-widget .forecast-error { display: flex; align-items: center; flex-direction: column; justify-content: space-evenly; margin-block-start: auto; } .weather-forecast-widget .forecast-error p { font-size: var(--font-size-small); color: var(--text-color-deemphasized); } .weather-forecast-widget .weather-icon-column { display: flex; align-items: center; justify-content: center; align-self: center; } .weather-forecast-widget .weather-icon-column .weather-icon { width: var(--size-item-large); } .weather-forecast-widget .weather-icon { width: var(--size-item-medium); height: auto; vertical-align: middle; } @media (prefers-contrast) { .weather-forecast-widget .weather-icon { -moz-context-properties: fill, stroke; fill: currentColor; stroke: currentColor; } } .weather-forecast-widget .weather-icon.iconId1 { content: url("chrome://browser/skin/weather/sunny.svg"); } .weather-forecast-widget .weather-icon.iconId2 { content: url("chrome://browser/skin/weather/mostly-sunny.svg"); } .weather-forecast-widget .weather-icon:is(.iconId3, .iconId4, .iconId6) { content: url("chrome://browser/skin/weather/partly-sunny.svg"); } .weather-forecast-widget .weather-icon.iconId5 { content: url("chrome://browser/skin/weather/hazy-sunshine.svg"); } .weather-forecast-widget .weather-icon:is(.iconId7, .iconId8) { content: url("chrome://browser/skin/weather/cloudy.svg"); } .weather-forecast-widget .weather-icon.iconId11 { content: url("chrome://browser/skin/weather/fog.svg"); } .weather-forecast-widget .weather-icon.iconId12 { content: url("chrome://browser/skin/weather/showers.svg"); } .weather-forecast-widget .weather-icon:is(.iconId13, .iconId14) { content: url("chrome://browser/skin/weather/mostly-cloudy-with-showers.svg"); } .weather-forecast-widget .weather-icon.iconId15 { content: url("chrome://browser/skin/weather/thunderstorms.svg"); } .weather-forecast-widget .weather-icon:is(.iconId16, .iconId17) { content: url("chrome://browser/skin/weather/mostly-cloudy-with-thunderstorms.svg"); } .weather-forecast-widget .weather-icon.iconId18 { content: url("chrome://browser/skin/weather/rain.svg"); } .weather-forecast-widget .weather-icon:is(.iconId19, .iconId20, .iconId25) { content: url("chrome://browser/skin/weather/flurries.svg"); } .weather-forecast-widget .weather-icon.iconId21 { content: url("chrome://browser/skin/weather/partly-sunny-with-flurries.svg"); } .weather-forecast-widget .weather-icon:is(.iconId22, .iconId23) { content: url("chrome://browser/skin/weather/snow.svg"); } .weather-forecast-widget .weather-icon:is(.iconId24, .iconId31) { content: url("chrome://browser/skin/weather/ice.svg"); } .weather-forecast-widget .weather-icon:is(.iconId26, .iconId29) { content: url("chrome://browser/skin/weather/freezing-rain.svg"); } .weather-forecast-widget .weather-icon.iconId30 { content: url("chrome://browser/skin/weather/hot.svg"); } .weather-forecast-widget .weather-icon.iconId32 { content: url("chrome://browser/skin/weather/windy.svg"); } .weather-forecast-widget .weather-icon.iconId33 { content: url("chrome://browser/skin/weather/night-clear.svg"); } .weather-forecast-widget .weather-icon:is(.iconId34, .iconId35, .iconId36, .iconId38) { content: url("chrome://browser/skin/weather/night-mostly-clear.svg"); } .weather-forecast-widget .weather-icon.iconId37 { content: url("chrome://browser/skin/weather/night-hazy-moonlight.svg"); } .weather-forecast-widget .weather-icon:is(.iconId39, .iconId40) { content: url("chrome://browser/skin/weather/night-partly-cloudy-with-showers.svg"); height: var(--size-item-large); } .weather-forecast-widget .weather-icon:is(.iconId41, .iconId42) { content: url("chrome://browser/skin/weather/night-partly-cloudy-with-thunderstorms.svg"); } .weather-forecast-widget .weather-icon:is(.iconId43, .iconId44) { content: url("chrome://browser/skin/weather/night-mostly-cloudy-with-flurries.svg"); } .weather-info-column { display: flex; flex-direction: column; margin-inline: var(--space-medium); } .weather-info-column .temperature-unit { text-transform: uppercase; font-weight: var(--font-weight-semibold); } .weather-info-column .temperature-description { font-size: var(--font-size-small); color: var(--text-color-deemphasized); } .high-low-column { display: flex; align-items: flex-end; align-self: flex-start; margin-inline-start: auto; color: var(--text-color-deemphasized); } .high-low-column .high-temperature { margin-inline-end: var(--space-small); } .high-low-column .arrow-icon { display: inline-block; width: var(--size-item-xsmall); height: var(--size-item-xsmall); background-size: contain; background-repeat: no-repeat; background-position: center; -moz-context-properties: fill, fill-opacity; fill: currentColor; } .high-low-column .arrow-icon.arrow-up { background-image: url("chrome://global/skin/icons/shaft-arrow-up.svg"); } .high-low-column .arrow-icon.arrow-down { background-image: url("chrome://global/skin/icons/shaft-arrow-down.svg"); } hr { border: 0; border-block-start: 1px solid var(--border-color); width: 100%; } .forecast-row .today-forecast { margin-block-start: var(--space-small); font-weight: var(--font-weight-semibold); } .forecast-row .forecast-row-items { list-style: none; display: flex; justify-content: space-between; padding: 0; margin-block: var(--space-xxsmall); } .forecast-row .forecast-row-items li { background: var(--newtab-background-color); border-radius: var(--border-radius-small); display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-inline: var(--space-xxsmall); padding: var(--space-small) var(--space-medium); font-size: var(--font-size-small); } .forecast-row .forecast-row-items li:first-of-type { margin-inline-start: 0; } .forecast-row .forecast-row-items li:last-of-type { margin-inline-end: 0; } .forecast-footer { display: flex; align-items: center; justify-content: space-between; margin-block-start: auto; } .forecast-footer span { font-size: var(--font-size-xsmall); } .forecast-footer .sponsored-text { visibility: hidden; } .small-widget { height: 100%; padding: var(--space-small); } .small-widget .forecast-error { flex-direction: row; justify-content: flex-start; } .small-widget .forecast-error span { margin-inline-end: var(--space-small); } .small-widget .forecast-row-items li { padding: var(--space-xsmall) var(--space-medium); } .small-widget .forecast-footer { margin-block-start: auto; } .small-widget .forecast-footer .full-forecast { display: none; } .small-widget:has(.location-search) .forecast-row-items { display: none; } .ds-card-grid .ds-card { background: var(--newtab-background-color-secondary); border-radius: var(--border-radius-small); } .ds-card-grid .ds-card:not(.placeholder) { border-radius: var(--border-radius-medium); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .ds-card-grid .ds-card:not(.placeholder) img, .ds-card-grid .ds-card:not(.placeholder) .placeholder-image { border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; } .ds-card:not(.placeholder) .img-wrapper .img { height: 160px; width: 100%; } .ds-card-grid { display: grid; grid-gap: var(--space-xlarge); position: relative; } .ds-card-grid.ds-card-grid-compact { grid-gap: var(--space-large); } .ds-card-grid.ad-sizing-variant-a, .ds-card-grid.ad-sizing-variant-b { row-gap: var(--space-xlarge); column-gap: var(--space-large); } .ds-card-grid .ds-card-link:focus { border: 0; outline: var(--focus-outline); transition: none; border-radius: var(--border-radius-medium); } .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: var(--font-size-large); } .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: 15; -webkit-line-clamp: 3; line-height: 24; } .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-block-start: var(--space-small); } .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: var(--font-size-small); } .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label { font-size: var(--font-size-small); } .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-badge-icon { margin-inline-end: var(--space-xxsmall); margin-block-end: var(--space-xxsmall); height: 14px; width: 14px; background-size: 14px; } .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .title { font-size: inherit; } .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-block-start: var(--space-small); } .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: var(--font-size-small); } .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: var(--font-size-small); } .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: var(--space-xxsmall); margin-block-end: var(--space-xxsmall); 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: inherit; } .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-block-start: var(--space-small); } .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: var(--font-size-small); } .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: var(--font-size-small); } .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: var(--space-xxsmall); margin-block-end: var(--space-xxsmall); 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: inherit; } .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: var(--focus-outline); } .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: var(--border-radius-medium); 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: var(--space-medium) 0 0; } .ds-layout .ds-sub-header { margin-block-start: var(--space-xlarge); } .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: inherit; 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); } .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites { position: relative; } .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .top-sites-list-wrapper { margin-inline: auto; width: 100%; } .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow { display: none; } @media (min-width: 866px) { .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow { display: none; } } @media (min-width: 1122px) { .has-sections-grid .ds-outer-wrapper-breakpoint-override .ds-layout-topsites .hide-for-narrow { display: inline-block; } } .has-sections-grid .ds-outer-wrapper-breakpoint-override main { width: auto; } .has-sections-grid .ds-outer-wrapper-breakpoint-override main .ds-card { width: 100%; height: 100%; } .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { width: 346px; margin: 0 auto; } @media (min-width: 610px) { .has-sections-grid .ds-outer-wrapper-breakpoint-override main { width: auto; } .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { width: 346px; } } @media (min-width: 724px) { .has-sections-grid .ds-outer-wrapper-breakpoint-override main { width: auto; } .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { width: 659px; } } @media (min-width: 1122px) { .has-sections-grid .ds-outer-wrapper-breakpoint-override main { width: auto; } .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { width: 989px; } } @media (min-width: 1390px) { .has-sections-grid .ds-outer-wrapper-breakpoint-override main { width: auto; } .has-sections-grid .ds-outer-wrapper-breakpoint-override main .body-wrapper { display: flex; flex-direction: column; width: 1311px; } .has-sections-grid .ds-outer-wrapper-breakpoint-override main .ds-highlights .card-outer { min-width: 216px; } } .ds-section-wrapper { padding-inline: 0; position: relative; } .ds-section-wrapper .ds-section { padding-block-end: var(--space-medium); } .ds-section-wrapper .ds-section:last-child { padding-block-end: 0; } .ds-section-wrapper .ds-section .section-heading { display: flex; justify-content: space-between; align-items: center; margin-block: var(--space-small) var(--space-medium); } .ds-section-wrapper .ds-section .section-title { font-weight: var(--font-weight-heading); font-size: var(--font-size-xlarge); color: var(--newtab-contextual-text-primary-color); margin-block: 0; } .lightWallpaper .ds-section-wrapper .ds-section .section-title { color-scheme: light; } .darkWallpaper .ds-section-wrapper .ds-section .section-title { color-scheme: dark; } @media (min-width: 724px) { .ds-section-wrapper .ds-section .section-title { font-size: var(--font-size-xxlarge); } } .ds-section-wrapper .ds-section .section-subtitle { color: var(--newtab-contextual-text-primary-color); margin-block: var(--space-xsmall) 0; font-size: var(--font-size-root); } .lightWallpaper .ds-section-wrapper .ds-section .section-subtitle { color-scheme: light; } .darkWallpaper .ds-section-wrapper .ds-section .section-subtitle { color-scheme: dark; } .ds-section-wrapper .section-context-wrapper { display: flex; justify-content: space-between; align-items: center; column-gap: var(--space-small); } .lightWallpaper .ds-section-wrapper .section-context-wrapper { color-scheme: light; } .darkWallpaper .ds-section-wrapper .section-context-wrapper { color-scheme: dark; } .ds-section-wrapper .section-follow { position: relative; } .ds-section-wrapper .section-follow .section-button-following-text { display: none; } .ds-section-wrapper .section-follow .section-button-unfollow-text { display: none; } .ds-section-wrapper .section-follow.following .section-button-follow-text { display: none; } .ds-section-wrapper .section-follow.following .section-button-following-text { display: block; } .ds-section-wrapper .section-follow.following:hover .section-button-following-text { display: none; } .ds-section-wrapper .section-follow.following:hover .section-button-unfollow-text { display: block; } .ds-section-grid.ds-card-grid { grid-gap: var(--space-large); grid-template-columns: repeat(1, 300px); } .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-3, .ds-section-grid.ds-card-grid .ds-image.image-4 { display: none; } .ds-section-grid.ds-card-grid .ds-image.image-1 { display: block; } @media (max-width: 724px) { .ds-section-grid.ds-card-grid .col-1-position-0 { order: 0; } .ds-section-grid.ds-card-grid .col-1-position-1 { order: 1; } .ds-section-grid.ds-card-grid .col-1-position-2 { order: 2; } .ds-section-grid.ds-card-grid .col-1-position-3 { order: 3; } .ds-section-grid.ds-card-grid .col-1-position-4 { order: 4; } .ds-section-grid.ds-card-grid .col-1-position-5 { order: 5; } .ds-section-grid.ds-card-grid .col-1-position-6 { order: 6; } .ds-section-grid.ds-card-grid .col-1-position-7 { order: 7; } .ds-section-grid.ds-card-grid .col-1-position-8 { order: 8; } .ds-section-grid.ds-card-grid .col-1-position-9 { order: 9; } .ds-section-grid.ds-card-grid .col-1-position-10 { order: 10; } .ds-section-grid.ds-card-grid .col-1-position-11 { order: 11; } .ds-section-grid.ds-card-grid .col-1-position-12 { order: 12; } .ds-section-grid.ds-card-grid .col-1-position-13 { order: 13; } .ds-section-grid.ds-card-grid .col-1-position-14 { order: 14; } .ds-section-grid.ds-card-grid .col-1-position-15 { order: 15; } .ds-section-grid.ds-card-grid .col-1-position-16 { order: 16; } .ds-section-grid.ds-card-grid .col-1-small { grid-row: span 1; grid-column: span 1; padding: var(--space-large); } .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui { padding: unset; box-shadow: var(--box-shadow-card); } .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-medium); } .ds-section-grid.ds-card-grid .col-1-small .meta { display: flex; flex-direction: column; padding: 0; align-self: flex-start; min-height: 125px; } .ds-section-grid.ds-card-grid .col-1-small .meta .info-wrap { flex-grow: 0; max-width: 150px; margin-block-start: var(--space-xsmall); } .ds-section-grid.ds-card-grid .col-1-small .meta .info-wrap .title { font-size: var(--font-size-small); margin-block: 0; -webkit-line-clamp: 4; } .ds-section-grid.ds-card-grid .col-1-small .meta .sections-card-footer { margin-block-start: auto; margin-block-end: var(--space-small); max-width: 150px; min-width: auto; min-height: unset; position: initial; } .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-inline-end: var(--space-xsmall); } .ds-section-grid.ds-card-grid .col-1-small .context-menu-position-container .context-menu-button { height: 32px; width: 32px; } .ds-section-grid.ds-card-grid .col-1-small .ds-card-link { display: flex; flex-direction: row; flex-grow: 0; position: relative; align-items: center; gap: var(--space-medium); padding: var(--space-xsmall) var(--space-small); } .ds-section-grid.ds-card-grid .col-1-small .img-wrapper { width: 110px; height: 117px; flex-shrink: 0; flex-grow: 0; aspect-ratio: 5/6; } .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img { width: 100%; height: 100%; padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img img { width: 100%; height: 100%; border-radius: var(--border-radius-medium); object-fit: cover; } .ds-section-grid.ds-card-grid .col-1-small .card-stp-button-hover-background { background: transparent; padding-block-start: unset; } .ds-section-grid.ds-card-grid .col-1-medium { grid-row: span 2; grid-column: span 1; flex-direction: column; padding: 0; align-items: initial; gap: initial; } .ds-section-grid.ds-card-grid .col-1-medium.ds-card.sections-card-ui { height: unset; box-shadow: var(--box-shadow-card); } .ds-section-grid.ds-card-grid .col-1-medium.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } .ds-section-grid.ds-card-grid .col-1-medium .img-wrapper { width: 100%; height: 160px; position: relative; flex-grow: 0; flex-shrink: 0; aspect-ratio: initial; } .ds-section-grid.ds-card-grid .col-1-medium.ds-spoc-rectangle .img-wrapper { height: 250px; } .ds-section-grid.ds-card-grid .col-1-medium .meta { display: flex; flex-direction: column; padding: var(--space-large) var(--space-large) var(--space-small); min-height: unset; } .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap { flex-grow: initial; max-width: unset; } .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap .title { -webkit-line-clamp: 3; margin-block: 0 var(--space-small); font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-1-medium .meta .info-wrap .excerpt { display: block; -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-1-medium .meta .sections-card-footer { margin-block-start: auto; margin-block-end: unset; inset-inline-end: initial; min-height: 28px; } .ds-section-grid.ds-card-grid .col-1-medium .meta .sections-card-footer .source { width: 217px; } .ds-section-grid.ds-card-grid .col-1-medium .meta:has(.story-footer .story-sponsored-label) .sections-card-footer { display: none; } .ds-section-grid.ds-card-grid .col-1-medium .meta:has(.story-footer .story-sponsored-label) .story-footer { margin-block: auto 0; } .ds-section-grid.ds-card-grid .col-1-medium .context-menu-position-container .context-menu-button { height: 32px; width: 32px; } .ds-section-grid.ds-card-grid .col-1-medium.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-inline-end: var(--space-small); } .ds-section-grid.ds-card-grid .col-1-medium .card-stp-button-hover-background { background: transparent; } .ds-section-grid.ds-card-grid .col-1-medium:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-1-medium.active .meta .source-wrapper { max-width: 175px; } .ds-section-grid.ds-card-grid .col-1-medium:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-medium.active .meta .source-wrapper .source { display: block; width: unset; } .ds-section-grid.ds-card-grid .col-1-medium .ds-card-link { display: flex; flex-direction: column; gap: 0; padding: 0; } .ds-section-grid.ds-card-grid .col-1-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; } .ds-section-grid.ds-card-grid .col-1-large { grid-row: span 2; grid-column: span 2; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui { box-shadow: var(--box-shadow-card); } } @media (max-width: 724px) and (724px <= width < 1122px), (max-width: 724px) and (min-width: 1390px) { .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-card-link { gap: var(--space-large); padding: var(--space-large); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta { padding: 0; color: var(--newtab-text-primary-color); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .info-wrap .excerpt { color: var(--text-color-deemphasized); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .sections-card-footer { max-width: 334px; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper { max-width: 245px; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .card-stp-button-position-wrapper { inset-inline-end: var(--space-large); inset-block-end: var(--space-large); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui.active .meta .source-wrapper .source { display: block; } } @media (max-width: 724px) { .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } } @media (max-width: 724px) and (min-width: 724px) { .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui { align-content: flex-start; justify-content: center; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-card-link { flex-direction: row; gap: var(--space-large); padding: var(--space-large); flex-grow: 0; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .img-wrapper { width: 190px; height: 250px; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img { aspect-ratio: 1/1; width: 100%; height: 100%; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img img { border-radius: var(--border-radius-medium); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta { padding: 0; min-height: 220px; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); font-weight: var(--font-weight-heading); margin-block: 0 var(--space-small); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .excerpt { -webkit-line-clamp: 4; font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .meta .sections-card-footer { max-width: 380px; margin-block-start: auto; margin-block-end: var(--space-xxsmall); display: flex; align-items: center; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; inset-inline-start: 0; } .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-block-end: var(--space-large); } } @media (max-width: 724px) { .ds-section-grid.ds-card-grid .col-1-show-excerpt .meta .info-wrap .excerpt { display: block; } } @media (max-width: 724px) { .ds-section-grid.ds-card-grid .col-1-hide-excerpt .meta .info-wrap .excerpt { display: none; } } @media (724px <= width < 1122px) { .ds-section-grid.ds-card-grid { grid-template-columns: repeat(2, 300px); } .ds-section-grid.ds-card-grid .col-2-position-0 { order: 0; } .ds-section-grid.ds-card-grid .col-2-position-1 { order: 1; } .ds-section-grid.ds-card-grid .col-2-position-2 { order: 2; } .ds-section-grid.ds-card-grid .col-2-position-3 { order: 3; } .ds-section-grid.ds-card-grid .col-2-position-4 { order: 4; } .ds-section-grid.ds-card-grid .col-2-position-5 { order: 5; } .ds-section-grid.ds-card-grid .col-2-position-6 { order: 6; } .ds-section-grid.ds-card-grid .col-2-position-7 { order: 7; } .ds-section-grid.ds-card-grid .col-2-position-8 { order: 8; } .ds-section-grid.ds-card-grid .col-2-position-9 { order: 9; } .ds-section-grid.ds-card-grid .col-2-position-10 { order: 10; } .ds-section-grid.ds-card-grid .col-2-position-11 { order: 11; } .ds-section-grid.ds-card-grid .col-2-position-12 { order: 12; } .ds-section-grid.ds-card-grid .col-2-position-13 { order: 13; } .ds-section-grid.ds-card-grid .col-2-position-14 { order: 14; } .ds-section-grid.ds-card-grid .col-2-position-15 { order: 15; } .ds-section-grid.ds-card-grid .col-2-position-16 { order: 16; } .ds-section-grid.ds-card-grid .col-2-small { grid-row: span 1; grid-column: span 1; padding: var(--space-large); } .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui { padding: unset; box-shadow: var(--box-shadow-card); } .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-medium); } .ds-section-grid.ds-card-grid .col-2-small .meta { display: flex; flex-direction: column; padding: 0; align-self: flex-start; min-height: 125px; } .ds-section-grid.ds-card-grid .col-2-small .meta .info-wrap { flex-grow: 0; max-width: 150px; margin-block-start: var(--space-xsmall); } .ds-section-grid.ds-card-grid .col-2-small .meta .info-wrap .title { font-size: var(--font-size-small); margin-block: 0; -webkit-line-clamp: 4; } .ds-section-grid.ds-card-grid .col-2-small .meta .sections-card-footer { margin-block-start: auto; margin-block-end: var(--space-small); max-width: 150px; min-width: auto; min-height: unset; position: initial; } .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-inline-end: var(--space-xsmall); } .ds-section-grid.ds-card-grid .col-2-small .context-menu-position-container .context-menu-button { height: 32px; width: 32px; } .ds-section-grid.ds-card-grid .col-2-small .ds-card-link { display: flex; flex-direction: row; flex-grow: 0; position: relative; align-items: center; gap: var(--space-medium); padding: var(--space-xsmall) var(--space-small); } .ds-section-grid.ds-card-grid .col-2-small .img-wrapper { width: 110px; height: 117px; flex-shrink: 0; flex-grow: 0; aspect-ratio: 5/6; } .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img { width: 100%; height: 100%; padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img img { width: 100%; height: 100%; border-radius: var(--border-radius-medium); object-fit: cover; } .ds-section-grid.ds-card-grid .col-2-small .card-stp-button-hover-background { background: transparent; padding-block-start: unset; } .ds-section-grid.ds-card-grid .col-2-medium { grid-row: span 2; grid-column: span 1; flex-direction: column; padding: 0; align-items: initial; gap: initial; } .ds-section-grid.ds-card-grid .col-2-medium.ds-card.sections-card-ui { height: unset; box-shadow: var(--box-shadow-card); } .ds-section-grid.ds-card-grid .col-2-medium.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } .ds-section-grid.ds-card-grid .col-2-medium .img-wrapper { width: 100%; height: 160px; position: relative; flex-grow: 0; flex-shrink: 0; aspect-ratio: initial; } .ds-section-grid.ds-card-grid .col-2-medium.ds-spoc-rectangle .img-wrapper { height: 250px; } .ds-section-grid.ds-card-grid .col-2-medium .meta { display: flex; flex-direction: column; padding: var(--space-large) var(--space-large) var(--space-small); min-height: unset; } .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap { flex-grow: initial; max-width: unset; } .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap .title { -webkit-line-clamp: 3; margin-block: 0 var(--space-small); font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-2-medium .meta .info-wrap .excerpt { display: block; -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-2-medium .meta .sections-card-footer { margin-block-start: auto; margin-block-end: unset; inset-inline-end: initial; min-height: 28px; } .ds-section-grid.ds-card-grid .col-2-medium .meta .sections-card-footer .source { width: 217px; } .ds-section-grid.ds-card-grid .col-2-medium .meta:has(.story-footer .story-sponsored-label) .sections-card-footer { display: none; } .ds-section-grid.ds-card-grid .col-2-medium .meta:has(.story-footer .story-sponsored-label) .story-footer { margin-block: auto 0; } .ds-section-grid.ds-card-grid .col-2-medium .context-menu-position-container .context-menu-button { height: 32px; width: 32px; } .ds-section-grid.ds-card-grid .col-2-medium.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-inline-end: var(--space-small); } .ds-section-grid.ds-card-grid .col-2-medium .card-stp-button-hover-background { background: transparent; } .ds-section-grid.ds-card-grid .col-2-medium:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-2-medium.active .meta .source-wrapper { max-width: 175px; } .ds-section-grid.ds-card-grid .col-2-medium:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-medium.active .meta .source-wrapper .source { display: block; width: unset; } .ds-section-grid.ds-card-grid .col-2-medium .ds-card-link { display: flex; flex-direction: column; gap: 0; padding: 0; } .ds-section-grid.ds-card-grid .col-2-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; } .ds-section-grid.ds-card-grid .col-2-large { grid-row: span 2; grid-column: span 2; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui { box-shadow: var(--box-shadow-card); } } @media (724px <= width < 1122px) and (724px <= width < 1122px), (724px <= width < 1122px) and (min-width: 1390px) { .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link { gap: var(--space-large); padding: var(--space-large); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta { padding: 0; color: var(--newtab-text-primary-color); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .info-wrap .excerpt { color: var(--text-color-deemphasized); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .sections-card-footer { max-width: 334px; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper { max-width: 245px; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .card-stp-button-position-wrapper { inset-inline-end: var(--space-large); inset-block-end: var(--space-large); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui.active .meta .source-wrapper .source { display: block; } } @media (724px <= width < 1122px) { .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } } @media (724px <= width < 1122px) and (min-width: 724px) { .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui { align-content: flex-start; justify-content: center; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link { flex-direction: row; gap: var(--space-large); padding: var(--space-large); flex-grow: 0; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .img-wrapper { width: 190px; height: 250px; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img { aspect-ratio: 1/1; width: 100%; height: 100%; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img img { border-radius: var(--border-radius-medium); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta { padding: 0; min-height: 220px; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); font-weight: var(--font-weight-heading); margin-block: 0 var(--space-small); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .excerpt { -webkit-line-clamp: 4; font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .sections-card-footer { max-width: 380px; margin-block-start: auto; margin-block-end: var(--space-xxsmall); display: flex; align-items: center; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; inset-inline-start: 0; } .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-block-end: var(--space-large); } } @media (724px <= width < 1122px) { .ds-section-grid.ds-card-grid .col-2-show-excerpt .meta .info-wrap .excerpt { display: block; } } @media (724px <= width < 1122px) { .ds-section-grid.ds-card-grid .col-2-hide-excerpt .meta .info-wrap .excerpt { display: none; } } @media (724px <= width < 1122px) { .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-3, .ds-section-grid.ds-card-grid .ds-image.image-4 { display: none; } .ds-section-grid.ds-card-grid .ds-image.image-2 { display: block; } } @media (724px <= width < 1122px) { .ds-section-grid.ds-card-grid .col-2-small .meta .info-wrap { max-width: 150px; } .ds-section-grid.ds-card-grid .col-2-small .meta .sections-card-footer { max-width: 150px; min-width: unset; } } @media (1122px <= width < 1390px) { .ds-section-grid.ds-card-grid { grid-template-columns: repeat(3, 300px); gap: var(--space-large); } .ds-section-grid.ds-card-grid .col-3-position-0 { order: 0; } .ds-section-grid.ds-card-grid .col-3-position-1 { order: 1; } .ds-section-grid.ds-card-grid .col-3-position-2 { order: 2; } .ds-section-grid.ds-card-grid .col-3-position-3 { order: 3; } .ds-section-grid.ds-card-grid .col-3-position-4 { order: 4; } .ds-section-grid.ds-card-grid .col-3-position-5 { order: 5; } .ds-section-grid.ds-card-grid .col-3-position-6 { order: 6; } .ds-section-grid.ds-card-grid .col-3-position-7 { order: 7; } .ds-section-grid.ds-card-grid .col-3-position-8 { order: 8; } .ds-section-grid.ds-card-grid .col-3-position-9 { order: 9; } .ds-section-grid.ds-card-grid .col-3-position-10 { order: 10; } .ds-section-grid.ds-card-grid .col-3-position-11 { order: 11; } .ds-section-grid.ds-card-grid .col-3-position-12 { order: 12; } .ds-section-grid.ds-card-grid .col-3-position-13 { order: 13; } .ds-section-grid.ds-card-grid .col-3-position-14 { order: 14; } .ds-section-grid.ds-card-grid .col-3-position-15 { order: 15; } .ds-section-grid.ds-card-grid .col-3-position-16 { order: 16; } .ds-section-grid.ds-card-grid .col-3-small { grid-row: span 1; grid-column: span 1; padding: var(--space-large); } .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui { padding: unset; box-shadow: var(--box-shadow-card); } .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-medium); } .ds-section-grid.ds-card-grid .col-3-small .meta { display: flex; flex-direction: column; padding: 0; align-self: flex-start; min-height: 125px; } .ds-section-grid.ds-card-grid .col-3-small .meta .info-wrap { flex-grow: 0; max-width: 150px; margin-block-start: var(--space-xsmall); } .ds-section-grid.ds-card-grid .col-3-small .meta .info-wrap .title { font-size: var(--font-size-small); margin-block: 0; -webkit-line-clamp: 4; } .ds-section-grid.ds-card-grid .col-3-small .meta .sections-card-footer { margin-block-start: auto; margin-block-end: var(--space-small); max-width: 150px; min-width: auto; min-height: unset; position: initial; } .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-inline-end: var(--space-xsmall); } .ds-section-grid.ds-card-grid .col-3-small .context-menu-position-container .context-menu-button { height: 32px; width: 32px; } .ds-section-grid.ds-card-grid .col-3-small .ds-card-link { display: flex; flex-direction: row; flex-grow: 0; position: relative; align-items: center; gap: var(--space-medium); padding: var(--space-xsmall) var(--space-small); } .ds-section-grid.ds-card-grid .col-3-small .img-wrapper { width: 110px; height: 117px; flex-shrink: 0; flex-grow: 0; aspect-ratio: 5/6; } .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img { width: 100%; height: 100%; padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img img { width: 100%; height: 100%; border-radius: var(--border-radius-medium); object-fit: cover; } .ds-section-grid.ds-card-grid .col-3-small .card-stp-button-hover-background { background: transparent; padding-block-start: unset; } .ds-section-grid.ds-card-grid .col-3-medium { grid-row: span 2; grid-column: span 1; flex-direction: column; padding: 0; align-items: initial; gap: initial; } .ds-section-grid.ds-card-grid .col-3-medium.ds-card.sections-card-ui { height: unset; box-shadow: var(--box-shadow-card); } .ds-section-grid.ds-card-grid .col-3-medium.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } .ds-section-grid.ds-card-grid .col-3-medium .img-wrapper { width: 100%; height: 160px; position: relative; flex-grow: 0; flex-shrink: 0; aspect-ratio: initial; } .ds-section-grid.ds-card-grid .col-3-medium.ds-spoc-rectangle .img-wrapper { height: 250px; } .ds-section-grid.ds-card-grid .col-3-medium .meta { display: flex; flex-direction: column; padding: var(--space-large) var(--space-large) var(--space-small); min-height: unset; } .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap { flex-grow: initial; max-width: unset; } .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap .title { -webkit-line-clamp: 3; margin-block: 0 var(--space-small); font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap .excerpt { display: block; -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-3-medium .meta .sections-card-footer { margin-block-start: auto; margin-block-end: unset; inset-inline-end: initial; min-height: 28px; } .ds-section-grid.ds-card-grid .col-3-medium .meta .sections-card-footer .source { width: 217px; } .ds-section-grid.ds-card-grid .col-3-medium .meta:has(.story-footer .story-sponsored-label) .sections-card-footer { display: none; } .ds-section-grid.ds-card-grid .col-3-medium .meta:has(.story-footer .story-sponsored-label) .story-footer { margin-block: auto 0; } .ds-section-grid.ds-card-grid .col-3-medium .context-menu-position-container .context-menu-button { height: 32px; width: 32px; } .ds-section-grid.ds-card-grid .col-3-medium.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-inline-end: var(--space-small); } .ds-section-grid.ds-card-grid .col-3-medium .card-stp-button-hover-background { background: transparent; } .ds-section-grid.ds-card-grid .col-3-medium:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-3-medium.active .meta .source-wrapper { max-width: 175px; } .ds-section-grid.ds-card-grid .col-3-medium:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-medium.active .meta .source-wrapper .source { display: block; width: unset; } .ds-section-grid.ds-card-grid .col-3-medium .ds-card-link { display: flex; flex-direction: column; gap: 0; padding: 0; } .ds-section-grid.ds-card-grid .col-3-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; } .ds-section-grid.ds-card-grid .col-3-large { grid-row: span 2; grid-column: span 2; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui { box-shadow: var(--box-shadow-card); } } @media (1122px <= width < 1390px) and (724px <= width < 1122px), (1122px <= width < 1390px) and (min-width: 1390px) { .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link { gap: var(--space-large); padding: var(--space-large); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta { padding: 0; color: var(--newtab-text-primary-color); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .info-wrap .excerpt { color: var(--text-color-deemphasized); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .sections-card-footer { max-width: 334px; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper { max-width: 245px; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .card-stp-button-position-wrapper { inset-inline-end: var(--space-large); inset-block-end: var(--space-large); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui.active .meta .source-wrapper .source { display: block; } } @media (1122px <= width < 1390px) { .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } } @media (1122px <= width < 1390px) and (min-width: 724px) { .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui { align-content: flex-start; justify-content: center; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link { flex-direction: row; gap: var(--space-large); padding: var(--space-large); flex-grow: 0; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .img-wrapper { width: 190px; height: 250px; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img { aspect-ratio: 1/1; width: 100%; height: 100%; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img img { border-radius: var(--border-radius-medium); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta { padding: 0; min-height: 220px; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); font-weight: var(--font-weight-heading); margin-block: 0 var(--space-small); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .excerpt { -webkit-line-clamp: 4; font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .sections-card-footer { max-width: 380px; margin-block-start: auto; margin-block-end: var(--space-xxsmall); display: flex; align-items: center; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; inset-inline-start: 0; } .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-block-end: var(--space-large); } } @media (1122px <= width < 1390px) { .ds-section-grid.ds-card-grid .col-3-show-excerpt .meta .info-wrap .excerpt { display: block; } } @media (1122px <= width < 1390px) { .ds-section-grid.ds-card-grid .col-3-hide-excerpt .meta .info-wrap .excerpt { display: none; } } @media (1122px <= width < 1390px) { .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-4 { display: none; } .ds-section-grid.ds-card-grid .ds-image.image-3 { display: block; } } @media (min-width: 1122px) { .ds-section-grid.ds-card-grid .col-3-small .meta .info-wrap { max-width: 150px; } .ds-section-grid.ds-card-grid .col-3-medium .meta .info-wrap { max-width: unset; } } @media (min-width: 1390px) { .ds-section-grid.ds-card-grid { grid-template-columns: repeat(4, 300px); } .ds-section-grid.ds-card-grid .col-4-position-0 { order: 0; } .ds-section-grid.ds-card-grid .col-4-position-1 { order: 1; } .ds-section-grid.ds-card-grid .col-4-position-2 { order: 2; } .ds-section-grid.ds-card-grid .col-4-position-3 { order: 3; } .ds-section-grid.ds-card-grid .col-4-position-4 { order: 4; } .ds-section-grid.ds-card-grid .col-4-position-5 { order: 5; } .ds-section-grid.ds-card-grid .col-4-position-6 { order: 6; } .ds-section-grid.ds-card-grid .col-4-position-7 { order: 7; } .ds-section-grid.ds-card-grid .col-4-position-8 { order: 8; } .ds-section-grid.ds-card-grid .col-4-position-9 { order: 9; } .ds-section-grid.ds-card-grid .col-4-position-10 { order: 10; } .ds-section-grid.ds-card-grid .col-4-position-11 { order: 11; } .ds-section-grid.ds-card-grid .col-4-position-12 { order: 12; } .ds-section-grid.ds-card-grid .col-4-position-13 { order: 13; } .ds-section-grid.ds-card-grid .col-4-position-14 { order: 14; } .ds-section-grid.ds-card-grid .col-4-position-15 { order: 15; } .ds-section-grid.ds-card-grid .col-4-position-16 { order: 16; } .ds-section-grid.ds-card-grid .col-4-small { grid-row: span 1; grid-column: span 1; padding: var(--space-large); } .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui { padding: unset; box-shadow: var(--box-shadow-card); } .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-medium); } .ds-section-grid.ds-card-grid .col-4-small .meta { display: flex; flex-direction: column; padding: 0; align-self: flex-start; min-height: 125px; } .ds-section-grid.ds-card-grid .col-4-small .meta .info-wrap { flex-grow: 0; max-width: 150px; margin-block-start: var(--space-xsmall); } .ds-section-grid.ds-card-grid .col-4-small .meta .info-wrap .title { font-size: var(--font-size-small); margin-block: 0; -webkit-line-clamp: 4; } .ds-section-grid.ds-card-grid .col-4-small .meta .sections-card-footer { margin-block-start: auto; margin-block-end: var(--space-small); max-width: 150px; min-width: auto; min-height: unset; position: initial; } .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-inline-end: var(--space-xsmall); } .ds-section-grid.ds-card-grid .col-4-small .context-menu-position-container .context-menu-button { height: 32px; width: 32px; } .ds-section-grid.ds-card-grid .col-4-small .ds-card-link { display: flex; flex-direction: row; flex-grow: 0; position: relative; align-items: center; gap: var(--space-medium); padding: var(--space-xsmall) var(--space-small); } .ds-section-grid.ds-card-grid .col-4-small .img-wrapper { width: 110px; height: 117px; flex-shrink: 0; flex-grow: 0; aspect-ratio: 5/6; } .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img { width: 100%; height: 100%; padding-block-start: 0; min-width: 100%; } .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img img { width: 100%; height: 100%; border-radius: var(--border-radius-medium); object-fit: cover; } .ds-section-grid.ds-card-grid .col-4-small .card-stp-button-hover-background { background: transparent; padding-block-start: unset; } .ds-section-grid.ds-card-grid .col-4-medium { grid-row: span 2; grid-column: span 1; flex-direction: column; padding: 0; align-items: initial; gap: initial; } .ds-section-grid.ds-card-grid .col-4-medium.ds-card.sections-card-ui { height: unset; box-shadow: var(--box-shadow-card); } .ds-section-grid.ds-card-grid .col-4-medium.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } .ds-section-grid.ds-card-grid .col-4-medium .img-wrapper { width: 100%; height: 160px; position: relative; flex-grow: 0; flex-shrink: 0; aspect-ratio: initial; } .ds-section-grid.ds-card-grid .col-4-medium.ds-spoc-rectangle .img-wrapper { height: 250px; } .ds-section-grid.ds-card-grid .col-4-medium .meta { display: flex; flex-direction: column; padding: var(--space-large) var(--space-large) var(--space-small); min-height: unset; } .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap { flex-grow: initial; max-width: unset; } .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap .title { -webkit-line-clamp: 3; margin-block: 0 var(--space-small); font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-4-medium .meta .info-wrap .excerpt { display: block; -webkit-line-clamp: 3; } .ds-section-grid.ds-card-grid .col-4-medium .meta .sections-card-footer { margin-block-start: auto; margin-block-end: unset; inset-inline-end: initial; min-height: 28px; } .ds-section-grid.ds-card-grid .col-4-medium .meta .sections-card-footer .source { width: 217px; } .ds-section-grid.ds-card-grid .col-4-medium .meta:has(.story-footer .story-sponsored-label) .sections-card-footer { display: none; } .ds-section-grid.ds-card-grid .col-4-medium .meta:has(.story-footer .story-sponsored-label) .story-footer { margin-block: auto 0; } .ds-section-grid.ds-card-grid .col-4-medium .context-menu-position-container .context-menu-button { height: 32px; width: 32px; } .ds-section-grid.ds-card-grid .col-4-medium.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-inline-end: var(--space-small); } .ds-section-grid.ds-card-grid .col-4-medium .card-stp-button-hover-background { background: transparent; } .ds-section-grid.ds-card-grid .col-4-medium:hover .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium:active .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium:focus-within .meta .source-wrapper, .ds-section-grid.ds-card-grid .col-4-medium.active .meta .source-wrapper { max-width: 175px; } .ds-section-grid.ds-card-grid .col-4-medium:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium:focus-within .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-medium.active .meta .source-wrapper .source { display: block; width: unset; } .ds-section-grid.ds-card-grid .col-4-medium .ds-card-link { display: flex; flex-direction: column; gap: 0; padding: 0; } .ds-section-grid.ds-card-grid .col-4-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; } .ds-section-grid.ds-card-grid .col-4-large { grid-row: span 2; grid-column: span 2; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui { box-shadow: var(--box-shadow-card); } } @media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) { .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link { gap: var(--space-large); padding: var(--space-large); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta { padding: 0; color: var(--newtab-text-primary-color); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .info-wrap .excerpt { color: var(--text-color-deemphasized); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .sections-card-footer { max-width: 334px; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .sections-card-footer .source-wrapper { max-width: 245px; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .card-stp-button-position-wrapper { inset-inline-end: var(--space-large); inset-block-end: var(--space-large); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui.active .meta .source-wrapper .source { display: block; } } @media (min-width: 1390px) { .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui:hover { box-shadow: var(--box-shadow-card-hover); } } @media (min-width: 1390px) and (min-width: 724px) { .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui { align-content: flex-start; justify-content: center; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link { flex-direction: row; gap: var(--space-large); padding: var(--space-large); flex-grow: 0; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .img-wrapper { width: 190px; height: 250px; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img { aspect-ratio: 1/1; width: 100%; height: 100%; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img img { border-radius: var(--border-radius-medium); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta { padding: 0; min-height: 220px; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-large); font-weight: var(--font-weight-heading); margin-block: 0 var(--space-small); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .excerpt { -webkit-line-clamp: 4; font-size: var(--font-size-root); } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .sections-card-footer { max-width: 380px; margin-block-start: auto; margin-block-end: var(--space-xxsmall); display: flex; align-items: center; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .card-stp-button-hover-background { background: transparent; inset-inline-start: 0; } .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-block-end: var(--space-large); } } @media (min-width: 1390px) { .ds-section-grid.ds-card-grid .col-4-show-excerpt .meta .info-wrap .excerpt { display: block; } } @media (min-width: 1390px) { .ds-section-grid.ds-card-grid .col-4-hide-excerpt .meta .info-wrap .excerpt { display: none; } } @media (min-width: 1390px) { .ds-section-grid.ds-card-grid .ds-image.image-1, .ds-section-grid.ds-card-grid .ds-image.image-2, .ds-section-grid.ds-card-grid .ds-image.image-3 { display: none; } .ds-section-grid.ds-card-grid .ds-image.image-4 { display: block; } } @media (min-width: 1390px) { .ds-section-grid.ds-card-grid .col-4-small .meta .info-wrap { max-width: 150px; } .ds-section-grid.ds-card-grid .col-4-small .meta .sections-card-footer { max-width: 150px; min-width: unset; } } /* 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: var(--font-size-small); line-height: 20px; padding-block-end: 0; margin-block-end: var(--space-xxsmall); text-transform: unset; } .ds-highlights .section .section-list .card-outer .card-title { font-size: var(--font-size-small); font-weight: var(--font-weight-heading); line-height: 20px; max-height: 20px; } .ds-highlights .section .section-list .card-outer a { text-decoration: none; } .ds-highlights .section .section-list .card-outer .context-menu-button { background-color: var(--newtab-button-static-background); } .ds-highlights .section .section-list .card-outer .context-menu-button:hover { background-color: var(--newtab-button-static-hover-background); } .ds-highlights .section .section-list .card-outer .context-menu-button:hover:active { background-color: var(--newtab-button-static-active-background); } .ds-highlights .section .section-list .card-outer .context-menu-button:focus-visible { background-color: var(--newtab-button-static-focus-background); } .ds-highlights .hide-for-narrow { display: block; } .ds-hr { border: 0; border-block-start: 1px solid #D7D7DB; height: 0; } [lwt-newtab-brighttext] .ds-hr { border-block-start: 1px solid #4A4A4F; } /* stylelint-disable max-nesting-depth */ .ds-navigation { color: var(--newtab-contextual-text-primary-color); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); padding: var(--space-xsmall) 0; } @media (min-width: 1122px) { .ds-navigation { line-height: 32px; } } .ds-navigation.ds-navigation-centered { text-align: center; } .ds-navigation.ds-navigation-right-aligned { text-align: end; } .lightWallpaper .ds-navigation { color-scheme: light; } .darkWallpaper .ds-navigation { color-scheme: dark; } .ds-navigation ul { display: inline; margin: 0; padding: 0; } .ds-navigation ul li { display: inline-block; } .ds-navigation ul li::after { content: "·"; padding: var(--space-xsmall); } .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: var(--space-xsmall); } .ds-navigation .ds-navigation-privacy { padding-inline-start: var(--space-xsmall); float: inline-end; } .ds-navigation .ds-navigation-privacy:hover { text-decoration: none; } .ds-navigation.ds-navigation-new-topics { display: block; padding-block-start: var(--space-xxlarge); } .ds-navigation.ds-navigation-new-topics .ds-navigation-header { font-size: var(--font-size-small); font-weight: var(--font-weight-heading); display: inline-block; margin-block-end: var(--space-small); } .ds-navigation.ds-navigation-new-topics .ds-navigation-family { text-align: center; font-size: var(--font-size-small); margin: var(--space-large) auto var(--space-xlarge); } .ds-navigation.ds-navigation-new-topics .ds-navigation-family span { margin: 0 var(--space-small); } .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://newtab/content/data/content/assets/firefox.svg"); } .ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo { background-image: url("chrome://global/skin/icons/help.svg"); fill: #EF4056; } .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message { 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-block-start: calc(var(--space-large) + var(--space-xlarge)); } } .ds-navigation.ds-navigation-new-topics ul { display: grid; grid-gap: 0 var(--space-xlarge); grid-auto-flow: column; grid-template: repeat(8, 1fr)/repeat(1, 1fr); } .ds-navigation.ds-navigation-new-topics ul li { border-block-start: 1px solid var(--border-color); line-height: 24px; font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); } .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-block-end: 1px solid var(--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-block-end: 1px solid var(--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-block-end: 0; } .ds-navigation.ds-navigation-new-topics ul li:nth-child(even) { border-block-end: 1px solid var(--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-block-start: var(--space-xlarge); } .ds-section-title .title { color: var(--newtab-text-primary-color); font-size: var(--font-size-xxlarge); font-weight: var(--font-weight); } .ds-section-title .subtitle { font-size: inherit; color: var(--newtab-text-secondary-color); margin-block-start: var(--space-xsmall); } /* stylelint-disable max-nesting-depth */ .outer-wrapper .ds-top-sites .collapsible-section { margin-block-end: var(--space-large); } .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile { border: 0; outline: var(--focus-outline); } .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .icon-pin-small { opacity: 1; } .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: var(--border-radius-small); outline: none; } .outer-wrapper .ds-top-sites .top-sites .top-sites-list { width: fit-content; margin: 0 auto; } .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 var(--space-small); } .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 calc(var(--space-small) * -1); } .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 var(--space-small); } .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 calc(var(--space-small) * -1); } .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 { background-clip: padding-box; background-color: var(--newtab-button-background); background-image: url("chrome://global/skin/icons/more.svg"); background-position: 50.1%; border: 0; outline: 1px solid var(--border-color); outline-width: 0; border-radius: var(--border-radius-circle); cursor: pointer; color: var(--button-text-color); fill: var(--newtab-button-text); height: 27px; inset-inline-end: calc(var(--space-medium) * -1); opacity: 0; position: absolute; inset-block-start: calc(var(--space-medium) * -1); transform: scale(0.25); transition-duration: 150ms; transition-property: transform, opacity; width: 27px; } .ds-card .context-menu-button:is(:active, :focus-visible, :hover) { opacity: 1; transform: scale(1); } .ds-card .context-menu-button:is(:hover) { background-color: var(--newtab-button-hover-background); } .ds-card .context-menu-button:is(:focus-visible) { outline-color: var(--newtab-button-focus-border); background-color: var(--newtab-button-focus-background); outline-width: 4px; } .ds-card .context-menu-button:is(:active) { background-color: var(--newtab-button-active-background); } .ds-card .context-menu { opacity: 0; } .ds-card.active .context-menu { opacity: 1; } .ds-card.last-item .context-menu { margin-inline-end: var(--space-xsmall); margin-inline-start: auto; inset-inline-end: 0; inset-inline-start: auto; } .ds-card.last-item .context-menu { opacity: 1; } .ds-card:is(:hover, :focus, .active) { outline: none; } .ds-card:is(:hover, :focus, .active) .context-menu-button { opacity: 1; transform: scale(1); transition-delay: 333ms; } .ds-card { display: flex; flex-direction: column; position: relative; z-index: auto; } .ds-card.placeholder { display: flex; flex-direction: column; gap: var(--space-small); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); border-radius: var(--border-radius-medium); position: relative; overflow: hidden; } .ds-card.placeholder .placeholder-fill { background: var(--newtab-button-active-background); border-radius: var(--border-radius-small); } .ds-card.placeholder .placeholder-image { width: 100%; height: 150px; border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; } .ds-card.placeholder .placeholder-label { width: 40%; height: var(--size-item-small); margin-block-end: var(--space-small); margin-inline: var(--space-large); } .ds-card.placeholder .placeholder-header { width: 80%; height: 20px; margin-inline: var(--space-large); } .ds-card.placeholder .placeholder-description { height: 60px; margin-inline: var(--space-large); margin-block-end: var(--space-small); } .ds-card.placeholder .placeholder-header { width: initial; margin-block-end: var(--space-large); } .ds-card.placeholder-seen::before { content: ""; display: block; position: absolute; inset-block-start: 0; inset-inline-start: -100%; height: 100%; width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--newtab-background-color-secondary) 50%, rgba(255, 255, 255, 0) 100%); z-index: 2; } @media (prefers-reduced-motion: no-preference) { .ds-card.placeholder-seen::before { animation: loading 1.5s infinite; } } @keyframes loading { 0% { inset-inline-start: -100%; } 50%, 100% { inset-inline-start: 100%; } } .ds-card .img-wrapper { width: 100%; position: relative; } .ds-card .card-stp-button-hover-background { opacity: 0; width: 100%; position: absolute; inset-block-start: 0; transition: opacity; transition-duration: 0s; padding-block-start: 50%; pointer-events: none; background: rgba(0, 0, 0, 0.4); border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; } .ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper { position: absolute; inset-inline-end: var(--space-small); inset-block-start: var(--space-small); display: flex; justify-content: end; align-items: center; } .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: var(--space-large); inset-inline-start: auto; position: absolute; inset-block-start: calc(var(--space-xsmall) + var(--space-large)); } .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 .context-menu-button { position: static; transition: none; border-radius: var(--border-radius-small); background-color: var(--newtab-button-static-background); } .ds-card .context-menu-button:hover { background-color: var(--newtab-button-static-hover-background); } .ds-card .context-menu-button:hover:active { background-color: var(--newtab-button-static-active-background); } .ds-card .context-menu-button:focus-visible { outline: 2px solid var(--newtab-button-focus-border); background-color: var(--newtab-button-static-focus-background); } .ds-card.last-item .card-stp-button-hover-background .context-menu { margin-inline-start: auto; margin-inline-end: var(--space-large); } .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.active h3, .ds-card:focus-within h3, .ds-card:hover h3 { color: var(--newtab-primary-action-background); } .ds-card:active h3 { color: var(--newtab-primary-element-active-color); } .ds-card .img { aspect-ratio: 2/1; } .ds-card .img img { border-radius: var(--border-radius-small); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); } .ds-card .ds-card-link { display: flex; flex-direction: column; align-items: initial; text-decoration: none; grid-template-columns: auto 1fr; gap: inherit; flex-grow: 1; } .ds-card .ds-card-link:focus { border: 0; outline: var(--focus-outline); transition: none; } .ds-card .ds-card-topic { position: absolute; z-index: 1; background: light-dark(#F0F0F4, var(--newtab-background-color-secondary)); border-radius: var(--border-radius-small); color: var(--newtab-text-primary-color); padding: var(--space-small); margin: var(--space-small); font-size: var(--font-size-small); } .ds-card .ds-card-daily-brief-topic { position: absolute; inset-block-end: var(--space-xsmall); inset-inline-start: var(--space-xsmall); background: var(--background-color-canvas); border-radius: var(--border-radius-small); color: var(--newtab-text-primary-color); padding: var(--space-xsmall); font-size: var(--font-size-small); } .ds-card .meta { display: flex; justify-content: space-between; flex-direction: column; padding: var(--space-medium) var(--space-large); flex-grow: 1; } .ds-card .meta .info-wrap { flex-grow: 1; } .ds-card .meta .title { font-size: var(--font-size-large); -webkit-line-clamp: 3; line-height: normal; margin-block: 0; font-weight: var(--font-weight-heading); } .ds-card .meta .excerpt { font-size: var(--font-size-small); -webkit-line-clamp: 3; line-height: normal; } .ds-card .meta .source-wrapper { color: var(--newtab-text-secondary-text); display: flex; margin-block-end: var(--space-xxsmall); align-items: center; } .ds-card .meta .source-wrapper img { border-radius: var(--border-radius-small); margin-inline-end: var(--space-small); } .ds-card .meta .source { -webkit-line-clamp: 1; font-size: var(--font-size-small); color: var(--newtab-text-secondary-color); } .ds-card .meta .source span { display: inline-block; } .ds-card .meta .new-sponsored-label { font-size: var(--font-size-small); margin-block-end: var(--space-xxsmall); } .ds-card.ds-card-title-lines-2 .meta .title { font-size: var(--font-size-large); -webkit-line-clamp: 2; line-height: normal; } .ds-card.ds-card-title-lines-1 .meta .title { font-size: var(--font-size-large); -webkit-line-clamp: 1; line-height: normal; } .ds-card.ds-card-desc-lines-2 .meta .excerpt { font-size: var(--font-size-small); -webkit-line-clamp: 2; line-height: normal; } .ds-card.ds-card-desc-lines-1 .meta .excerpt { font-size: var(--font-size-small); -webkit-line-clamp: 1; line-height: normal; } .ds-card.ds-card-compact-image .img { padding-block-start: 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: var(--space-xxsmall) var(--space-large) var(--space-medium); } .ds-card.ds-card-cta-button.variant-a .img, .ds-card.ds-card-cta-button.variant-b .img { padding-block-start: 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; gap: 0 var(--space-small); margin-block-start: 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) var(--space-large); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); min-height: var(--size-item-large); min-width: 97px; color: var(--newtab-text-primary-color); margin-block-start: 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-heading); text-align: end; padding: var(--space-xsmall) var(--space-large); color: var(--newtab-text-primary-color); min-height: var(--size-item-large); } .ds-card h3 { font-size: var(--font-size-large); color: var(--newtab-text-primary-color); } .ds-card p { font-size: var(--font-size-small); color: var(--newtab-text-primary-color); margin: 0; } .sections-card-ui.placeholder { box-shadow: 0 2px 6px #15141A24; border-radius: var(--border-radius-large); } .ds-card-grid .sections-card-ui { background: var(--newtab-background-card); transition: opacity 0.2s ease; } .ds-card-grid .sections-card-ui:hover { background: var(--newtab-background-color-secondary); } .ds-card-grid .sections-card-ui:not(.placeholder) { box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2); border-radius: var(--border-radius-large); } .ds-card-grid .sections-card-ui:not(.placeholder).active, .ds-card-grid .sections-card-ui:not(.placeholder):focus-within, .ds-card-grid .sections-card-ui:not(.placeholder):hover { box-shadow: 0 2px 14px 0 var(--newtab-section-card-box-shadow-color); z-index: 1; } .ds-card-grid .sections-card-ui:not(.placeholder).active { z-index: 2; } .ds-card-grid .sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; } @media (forced-colors: active) { .ds-card-grid .sections-card-ui:not(.placeholder) { border: var(--border-width) solid var(--border-color-card); } .ds-card-grid .sections-card-ui:not(.placeholder):hover { --newtab-background-color-secondary: SelectedItemText; --newtab-text-secondary-color: SelectedItem; color: SelectedItem; border-color: var(--border-color-interactive-hover); } .ds-card-grid .sections-card-ui:not(.placeholder):hover .meta .title { color: var(--link-color-hover); } .ds-card-grid .sections-card-ui .meta .title { text-decoration: underline; color: var(--link-color); } } .ds-card-grid .sections-card-ui .meta { padding: var(--space-large); } .ds-card-grid .sections-card-ui .meta .title { -webkit-line-clamp: 3; font-size: var(--font-size-root); margin-block-end: var(--space-small); font-weight: var(--font-weight-heading); } .ds-card-grid .sections-card-ui .meta .excerpt { -webkit-line-clamp: 3; font-size: var(--font-size-small); } .ds-card-grid .sections-card-ui .meta .source { -webkit-line-clamp: 1; font-size: var(--font-size-small); } .ds-card-grid .sections-card-ui .meta .story-footer { justify-content: flex-start; display: grid; height: 28px; align-content: center; margin-block-start: var(--space-small); } .ds-card-grid .sections-card-ui .meta .story-sponsored-label { line-height: unset; font-size: var(--font-size-small); } .ds-card-grid .sections-card-ui .sections-card-footer { margin-block-start: var(--space-small); position: relative; min-height: 28px; display: flex; align-items: center; } .ds-card-grid .sections-card-ui .ds-card-topic { display: grid; align-content: center; height: 28px; font-size: var(--font-size-small); color: var(--newtab-text-topic-label-color); margin: initial; padding: initial; background-color: initial; } .ds-card-grid .sections-card-ui .card-stp-button-hover-background { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; background-color: var(--button-background-color-ghost); } .ds-card-grid .sections-card-ui .ds-card-link:focus { border-radius: var(--border-radius-large); } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle { box-shadow: none; background: none; background: var(--newtab-background-card); transition: opacity 0.2s ease; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .ds-image, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .ds-image { padding-block-start: 83.4%; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background { padding-block-start: 83.4%; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .img-wrapper .ds-image img { border-radius: var(--border-radius-medium); } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta { padding: var(--space-small) var(--space-large); padding-block-end: 0; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .title, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .title { font-size: var(--font-size-small); font-weight: var(--font-weight); color: var(--newtab-text-secondary-color); } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .excerpt, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .meta .excerpt { display: none; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-hover-background { border-radius: var(--border-radius-medium); } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.sections-card-ui .img-wrapper .ds-image img { border-radius: var(--border-radius-large); border-end-start-radius: 0; border-end-end-radius: 0; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle:hover, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle:hover { background: var(--newtab-background-color-secondary); } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .img-wrapper .ds-image img { border-end-start-radius: 0; border-end-end-radius: 0; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle:hover .img-wrapper .ds-image img, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle:hover .img-wrapper .ds-image img { box-shadow: none; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .info-wrap, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .info-wrap { margin-block-start: auto; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .sections-card-footer, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .sections-card-footer { display: none; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-position-wrapper, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-position-wrapper { z-index: 10; inset-block-end: 0; position: absolute; } .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-position-wrapper .context-menu-position-container, .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle .card-stp-button-position-wrapper .context-menu-position-container { align-self: flex-start; padding-block-start: var(--space-medium); } .ds-card-grid .ds-card .meta { color: var(--newtab-text-primary-color); padding: var(--space-small) var(--space-large); } .ds-card-grid .ds-card .meta .excerpt { display: none; } .ds-card-grid .ds-card .sections-card-footer { display: flex; justify-content: space-between; pointer-events: none; margin-block-start: var(--space-xsmall); padding-inline-end: var(--space-large); } .ds-card-grid .ds-card .sections-card-footer .source-wrapper { margin-block-end: 0; margin-inline-end: var(--space-xxsmall); min-width: 0; max-width: min(170px, 100%); } .ds-card-grid .ds-card .sections-card-footer .card-stp-button-hover-background { position: static; width: auto; padding-block-start: 0; background: transparent; border-radius: 0; } .ds-card-grid .ds-card .sections-card-footer .card-stp-button-position-wrapper { position: static; inset: auto; } .ds-card-grid .ds-card:has(.story-footer .story-sponsored-label) .sections-card-footer { display: none; } .ds-card-grid .ds-card:has(.story-footer .story-sponsored-label) .card-stp-button-position-wrapper { inset-block-end: var(--space-small); } .ds-card-grid .ds-card .story-footer { margin-block: 0 var(--space-xsmall); } .ds-card-grid .ds-card .card-stp-button-hover-background { height: 100%; padding-block-start: 0; background: transparent; } .ds-card-grid .ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper { inset-block-start: unset; inset-block-end: var(--space-xsmall); inset-inline-end: var(--space-large); background: var(--button-background-color-ghost); } .ds-card-grid .ds-card .context-menu-button { background-color: var(--button-background-color-ghost); } @media (forced-colors: active) { .ds-card-grid .ds-card .context-menu-button { border: var(--border-width) solid var(--button-border-color-ghost); } } .ds-card-grid .ds-card:hover h3, .ds-card-grid .ds-card.active h3 { color: var(--color-accent-primary); } .ds-card-grid .ds-card:hover .context-menu-button:hover, .ds-card-grid .ds-card.active .context-menu-button:hover { background-color: var(--button-background-color-ghost-hover); } @media (forced-colors: active) { .ds-card-grid .ds-card:hover .context-menu-button:hover, .ds-card-grid .ds-card.active .context-menu-button:hover { border-color: var(--button-border-color-ghost-hover); fill: var(--button-text-color-ghost-hover); } } .ds-card-grid .ds-card:hover .context-menu-button:hover:active, .ds-card-grid .ds-card.active .context-menu-button:hover:active { background-color: var(--button-background-color-ghost-active); } .ds-card-grid .ds-card:hover .context-menu-button:focus-visible, .ds-card-grid .ds-card.active .context-menu-button:focus-visible { outline: 2px solid var(--newtab-button-focus-border); background-color: var(--newtab-button-static-focus-background); } .ds-card-grid .ds-card .sections-card-footer .source { display: block; } .story-footer { color: var(--newtab-text-secondary-color); inset-inline-start: 0; margin-block-start: var(--space-medium); display: flex; gap: var(--space-large); position: relative; pointer-events: none; } .story-footer .story-sponsored-label span { display: inline-block; } .story-footer .story-sponsored-label, .story-footer .status-message { -webkit-line-clamp: 1; font-size: var(--font-size-small); 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: var(--space-small); } .story-footer .status-message .story-badge-icon.icon-bookmark-removed { background-image: url("chrome://newtab/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: var(--font-size-small); 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; inset-block-start: 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; inset-block-start: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; } .ds-image .placeholder-image { overflow: hidden; background-color: var(--placeholderBackgroundColor); } .ds-image .placeholder-image::before { content: ""; background-image: url("chrome://newtab/content/data/content/assets/pocket-swoosh.svg"); background-repeat: no-repeat; background-position: center; transform: rotate(var(--placeholderBackgroundRotation)); position: absolute; inset-block-start: -50%; inset-inline-start: -50%; width: 200%; height: 200%; margin-inline-start: var(--placeholderBackgroundOffsetx); margin-block-start: var(--placeholderBackgroundOffsety); background-size: var(--placeholderBackgroundScale); } .impression-observer { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 100%; height: 100%; pointer-events: none; } .section-empty-state { border: 1px solid var(--border-color); border-radius: var(--border-radius-small); display: flex; height: 160px; width: 100%; } @media (min-width: 1390px) { .section-empty-state { width: 936px; } } .section-empty-state .empty-state-message { color: var(--newtab-text-secondary-color); font-size: var(--font-size-small); text-align: center; margin: auto; max-width: 936px; } .section-empty-state .try-again-button { margin-block-start: var(--space-medium); padding: var(--space-small) var(--space-xxlarge); border-radius: var(--border-radius-small); 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 oklch(from var(--color-blue-50)/lch 30%); transition: box-shadow 150ms; border-radius: var(--border-radius-small); outline: none; } [lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):focus { box-shadow: 0 0 0 5px oklch(from var(--color-blue-40)/lch 40%); transition: box-shadow 150ms; border-radius: var(--border-radius-small); 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: var(--border-radius-small); outline: none; } .section-empty-state .try-again-button::after { content: ""; height: 20px; width: 20px; animation: spinner 1s linear infinite; opacity: 0; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; margin: calc(var(--space-small) * -1) 0 0 calc(var(--space-small) * -1); mask-image: url("chrome://newtab/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: inherit; font-weight: var(--font-weight-heading); margin: 0; } .section-empty-state p { margin: 0; } @keyframes spinner { to { transform: rotate(360deg); } } .ds-privacy-link { text-align: center; font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); } .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: var(--font-size-large); } .ds-topics-widget hr { background-color: var(--border-color-deemphasized); height: 1px; border: 0; margin: var(--space-small) 0 0; } .ds-topics-widget .ds-topics-widget-list-container { flex-grow: 1; } .ds-topics-widget .ds-topics-widget-list-container ul { margin: var(--space-large) 0 0; padding: 0; display: flex; align-items: center; grid-gap: var(--space-small); 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: var(--font-size-small); text-decoration: none; padding: var(--space-small) var(--space-medium); background: var(--newtab-background-color-secondary); border: 1px solid var(--border-color-deemphasized); color: var(--newtab-text-primary-color); border-radius: var(--border-radius-medium); } .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: var(--space-large) 0 0; font-size: inherit; text-align: center; padding: var(--space-small); border-radius: var(--border-radius-small); 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; } .feature-highlight { position: relative; pointer-events: auto; z-index: 2; } .feature-highlight .feature-highlight-modal { position: absolute; display: flex; opacity: 0; visibility: hidden; cursor: default; justify-content: space-between; border-radius: var(--border-radius-small); background: var(--newtab-background-color-secondary); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); width: 298px; transition: opacity 0.3s, visibility 0.3s; } .feature-highlight .feature-highlight-modal > moz-button { margin-inline-start: var(--space-xsmall); z-index: 1; } .feature-highlight .feature-highlight-modal .message-icon { margin-block: var(--space-large); margin-inline: var(--space-large) var(--space-medium); } .feature-highlight .feature-highlight-modal.opened { opacity: 1; visibility: visible; } .feature-highlight .feature-highlight-modal::after { content: ""; position: absolute; height: 24px; width: 24px; background: var(--newtab-background-color-secondary); box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.15); } .feature-highlight .feature-highlight-modal.inset-block-start { inset-block-end: 100%; margin-block-end: var(--space-xlarge); } .feature-highlight .feature-highlight-modal.inset-block-start::after { inset-block-end: calc(var(--space-medium) * -1); transform: rotate(45deg); } .feature-highlight .feature-highlight-modal.inset-block-start:dir(rtl)::after { transform: rotate(225deg); } .feature-highlight .feature-highlight-modal.inset-block-end { inset-block-start: 100%; margin-block-start: var(--space-xlarge); } .feature-highlight .feature-highlight-modal.inset-block-end::after { inset-block-start: calc(var(--space-medium) * -1); transform: rotate(225deg); } .feature-highlight .feature-highlight-modal.inset-inline-start { inset-inline-end: calc(var(--space-xxlarge) * -1); } .feature-highlight .feature-highlight-modal.inset-inline-start::after { inset-inline-end: calc(var(--space-xxlarge) - var(--space-medium)); } .feature-highlight .feature-highlight-modal.inset-inline-center { transform: translateX(-50%); inset-inline-start: 50%; } .feature-highlight .feature-highlight-modal.inset-inline-center:dir(rtl) { transform: translateX(50%); } .feature-highlight .feature-highlight-modal.inset-inline-end { inset-inline-start: calc(var(--space-xxlarge) * -1); } .feature-highlight .feature-highlight-modal.inset-inline-end::after { inset-inline-start: calc(var(--space-xxlarge) - var(--space-medium)); } .feature-highlight .feature-highlight-modal.arrow-inline-start::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: calc(var(--space-small) * -1); transform: translateY(-50%) rotate(225deg); height: 16px; width: 16px; background: var(--newtab-background-color-secondary); box-shadow: -4px 4px 6px -2px rgba(0, 0, 0, 0.15); } .feature-highlight .feature-highlight-modal.arrow-inline-end::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(var(--space-small) * -1); transform: translateY(-50%) rotate(135deg); height: 16px; width: 16px; background: var(--newtab-background-color-secondary); box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.15); } .feature-highlight .feature-highlight-modal.arrow-top-center::after { inset-block-start: calc(var(--space-small) * -1); inset-inline-start: 50%; transform: translateX(-50%) rotate(225deg); height: 16px; width: 16px; } .feature-highlight .feature-highlight-modal.arrow-top-start::after { inset-block-start: calc(var(--space-small) * -1); inset-inline-start: calc(var(--space-xlarge) * 2); transform: translateX(-50%) rotate(225deg); height: 16px; width: 16px; } .feature-highlight .feature-highlight-modal p { font-size: var(--font-size-small); font-weight: var(--font-weight); margin: var(--space-large) 0; flex-grow: 1; } .feature-highlight .toggle-button { border: none; padding: 0; } .feature-highlight .toggle-button.isHidden { display: none; } .download-firefox-feature-highlight .icon.icon-dismiss { background: transparent url("chrome://global/skin/icons/close.svg"); background-size: var(--size-item-small); height: var(--size-item-small); width: var(--size-item-small); position: absolute; margin: 0; inset-block-start: calc(var(--space-medium) + 2px); inset-inline-end: calc(var(--space-medium) + 2px); } @media (prefers-color-scheme: dark) { .download-firefox-feature-highlight .icon.icon-dismiss { --dark-icon-color: var(--color-gray-70); color: var(--dark-icon-color); } } .download-firefox-feature-highlight .icon.icon-dismiss:hover { --dark-icon-hover: var(--color-gray-60); color: var(--dark-icon-hover); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal { --arrow-size: 24px; padding: var(--space-large); width: 271px; } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper { margin-block: 0; } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper img { display: block; margin: 0 auto var(--space-large); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .message-icon { display: none; } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end { margin-block-start: var(--space-xxlarge); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end { inset-inline-start: calc(var(--arrow-size) * -2); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end::after { inset-inline-start: calc(var(--space-xxlarge) - 14px); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start { inset-inline-end: calc(var(--arrow-size) / 2 * -1 - 6px); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start::after { inset-inline-end: calc(var(--space-xxlarge) - 12px); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal::after { height: var(--arrow-size); width: var(--arrow-size); box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 0.15); transform: rotate(-45deg); pointer-events: none; } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal p { margin: 0; padding: 0; } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .title { font-weight: var(--font-weight-heading); margin-block: var(--space-small); } .download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .subtitle { margin-block: 0; } .follow-section-button-highlight .feature-highlight-modal { padding: var(--space-large); width: auto; } .follow-section-button-highlight .feature-highlight-modal p { margin: 0; } .follow-section-button-highlight .feature-highlight-modal .message-icon { display: none; } .follow-section-button-highlight .feature-highlight-modal .icon-dismiss { margin-block-start: 0; margin-inline-end: 0; } .follow-section-button-highlight .feature-highlight-modal > moz-button { position: absolute; inset-inline-end: var(--space-large); inset-block-start: var(--space-large); } @media (prefers-color-scheme: dark) { .follow-section-button-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button { --button-icon-fill: var(--color-gray-70); } } .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start { inset-block-start: calc(100% + var(--space-large)); inset-inline-start: 50%; transform: translateX(-50%); } .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start::after { inset-block-start: calc(var(--space-small) * -1); inset-inline-end: 50%; transform: translateX(50%) rotate(135deg); } @media (min-width: 724px) { .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start { min-width: auto; inset-inline-start: auto; inset-inline-end: calc(100% + var(--space-large)); inset-block-start: 50%; transform: translateY(-50%); } .follow-section-button-highlight .feature-highlight-modal.arrow-inline-start::after { inset-block-start: 50%; inset-inline-end: calc(var(--space-small) * -1); transform: translateY(-50%) rotate(225deg); } } .follow-section-button-highlight .inset-block-center { position: absolute; height: 100%; width: 100%; } .follow-section-button-highlight .follow-section-button-highlight-content { display: flex; flex-direction: column; gap: var(--space-medium); } .follow-section-button-highlight .follow-section-button-highlight-copy { font-size: var(--font-size-small); } .follow-section-button-highlight .follow-section-button-highlight-copy .title { font-weight: var(--font-weight-heading); margin-block-end: var(--space-xsmall); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal { --arrow-size: 24px; width: auto; padding: var(--space-large); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .content-wrapper { margin-block: 0; } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .message-icon { display: none; } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end { inset-inline-start: 0; } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-end::after { inset-inline-start: 0; } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start { inset-inline-end: calc(var(--space-xxlarge) * 2); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-inline-start::after { inset-inline-end: calc(var(--arrow-size) / 2 * -1); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end { margin-block-start: 0; } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-end::after { inset-block-start: 0; } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-start { inset-block-end: 0; margin-block-end: calc(-4 * var(--space-xsmall)); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal.inset-block-start::after { inset-block-end: calc(var(--arrow-size) - var(--space-xxsmall)); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .title { font-weight: var(--font-weight-heading); margin-block: var(--space-medium); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .subtitle { margin-block: 0 var(--space-medium); } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .button-wrapper { display: block; text-align: end; } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal::after { height: var(--arrow-size); width: var(--arrow-size); box-shadow: 4px -4px 6px -2px rgba(0, 0, 0, 0.15); pointer-events: none; } .wallpaper-feature-highlight .feature-highlight .feature-highlight-modal > moz-button { position: absolute; inset-inline-end: var(--space-large); inset-block-start: var(--space-large); } @media (prefers-color-scheme: dark) { .wallpaper-feature-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button { --button-icon-fill: var(--color-gray-70); } } .shortcut-feature-highlight .feature-highlight-modal { padding: var(--space-large); width: auto; } .shortcut-feature-highlight .feature-highlight-modal p { margin: 0; padding-block-start: 0; } .shortcut-feature-highlight .feature-highlight-modal p, .shortcut-feature-highlight .feature-highlight-modal p:hover { color: inherit; } .shortcut-feature-highlight .feature-highlight-modal .message-icon { display: none; } .shortcut-feature-highlight .feature-highlight-modal.inset-block-end { margin-block-start: var(--space-large); inset-inline-end: var(--space-xlarge); } .shortcut-feature-highlight .feature-highlight-modal > moz-button { position: absolute; inset-inline-end: var(--space-large); inset-block-start: var(--space-large); } @media (prefers-color-scheme: dark) { .shortcut-feature-highlight.is-inverted-dark-dismiss-button .feature-highlight-modal > moz-button { --button-icon-fill: var(--color-gray-70); } } .shortcut-feature-highlight .shortcut-feature-highlight-content { display: flex; flex-direction: column; gap: var(--space-medium); } .shortcut-feature-highlight .shortcut-feature-highlight-copy { font-size: var(--font-size-small); } .shortcut-feature-highlight .shortcut-feature-highlight-copy .title { font-weight: var(--font-weight-heading); margin-block-end: var(--space-xsmall); text-align: inherit; } /* stylelint-disable max-nesting-depth */ .topic-selection-container { --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate; position: relative; padding: var(--space-xxlarge); max-width: 745px; height: auto; } .topic-selection-container .dismiss-button { position: absolute; appearance: none; border: none; z-index: 2; inset-block-start: 0; inset-inline: auto 0; border-radius: var(--border-radius-small); padding: 0; margin: var(--space-small); display: block; float: inline-end; background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px; height: var(--size-item-large); width: var(--size-item-large); align-self: end; min-height: var(--size-item-large); min-width: var(--size-item-large); -moz-context-properties: fill; fill: currentColor; transition: var(--transition); } .topic-selection-container .dismiss-button:hover { background-color: var(--button-background-color-hover); } .topic-selection-container .dismiss-button:hover:active { background-color: var(--button-background-color-active); } .topic-selection-container .title { text-align: center; font-size: var(--font-size-xlarge); font-weight: var(--font-weight-heading); margin-block-end: var(--space-small); } .topic-selection-container .subtitle { text-align: center; margin-block: 0 var(--space-xlarge); } .topic-selection-container .modal-footer { display: flex; justify-content: space-between; align-items: center; } .topic-selection-container .modal-footer .button-group { gap: var(--space-medium); display: flex; } .topic-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-large); margin: var(--space-xxlarge) auto; justify-content: center; width: fit-content; } .topic-list .topic-item { align-items: center; border-radius: var(--border-radius-circle); border: var(--border-width) solid var(--border-color-interactive); display: flex; justify-self: center; max-width: fit-content; padding-block: var(--space-xsmall); padding-inline: var(--space-xsmall) var(--space-large); position: relative; } .topic-list .topic-item:hover { cursor: pointer; background-color: var(--button-background-color-hover); } .topic-list .topic-item:active { background-color: var(--button-background-color-active); } .topic-list .topic-item:has(input:checked) { border-color: var(--border-color-selected); } .topic-list .topic-item:focus-within { outline-offset: 2px; outline: 2px solid var(--border-color-selected); } .topic-list .topic-item .topic-item-label { margin-inline-end: var(--space-small); } .topic-list .topic-item .topic-custom-checkbox { display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; border-radius: var(--border-radius-circle); background-color: var(--newtab-button-static-background); margin-inline-end: var(--space-large); } .topic-list .topic-item .topic-custom-checkbox .topic-icon { font-size: var(--font-size-xlarge); } .topic-list .topic-item .topic-custom-checkbox .topic-checked { display: none; } .topic-list .topic-item input[type=checkbox] { height: 100%; opacity: 0; position: absolute; width: 90%; } .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox { background-color: var(--color-accent-primary); position: relative; } .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox .topic-icon { display: none; } .topic-list .topic-item input[type=checkbox]:checked ~ .topic-custom-checkbox .topic-checked { color: var(--color-white); -moz-context-properties: fill; display: block; fill: currentColor; background: url("chrome://global/skin/icons/check.svg"); background-size: cover; width: 26px; height: 26px; } .ad-banner-wrapper { --banner-padding: var(--space-large); --billboard-width: 970px; --billboard-container-width: calc( var(--billboard-width) + ( var(--banner-padding) * 2 )); --billboard-height: 250px; --leaderboard-width: 728px; --leaderboard-container-width: calc(var(--leaderboard-width) + ( var(--banner-padding) * 2 )); --leaderboard-height: 90px; position: relative; display: flex; justify-content: space-around; grid-column: 1/-1; width: 100%; inset-inline-start: 50%; transform: translate3d(-50%, 0, 0); margin-block-start: var(--space-medium); margin-block-end: var(--space-xlarge); } @media (min-width: 1390px) { .ad-banner-wrapper.promo-card { justify-content: space-between; } } .ad-banner-wrapper:has(.ad-banner-inner.billboard) { min-width: var(--billboard-container-width); } @media (width <= 1015px) { .ad-banner-wrapper:has(.ad-banner-inner.billboard) { min-width: auto; } } .ad-banner-wrapper:has(.ad-banner-inner.leaderboard) { min-width: var(--leaderboard-container-width); } @media (width <= 758px) { .ad-banner-wrapper:has(.ad-banner-inner.leaderboard) { min-width: auto; } } .ad-banner-wrapper .ad-banner-inner { background: var(--newtab-background-card); transition: opacity 0.2s ease; position: relative; box-shadow: var(--box-shadow-card); border-radius: var(--border-radius-large); } .ad-banner-wrapper .ad-banner-inner:hover { background: var(--newtab-background-color-secondary); } .ad-banner-wrapper .ad-banner-inner:hover { box-shadow: var(--box-shadow-card-hover); } .ad-banner-wrapper .ad-banner-inner .ad-banner-link { text-decoration: none; padding-block-start: var(--banner-padding); padding-inline: var(--banner-padding); display: inline-block; } .ad-banner-wrapper .ad-banner-inner .ad-banner-link:focus { outline: var(--focus-outline); border-radius: var(--border-radius-large); } .ad-banner-wrapper .ad-banner-inner .ad-banner-link:hover + .ad-banner-hover-background, .ad-banner-wrapper .ad-banner-inner .ad-banner-link:focus + .ad-banner-hover-background { opacity: 1; } .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background { opacity: 0; position: absolute; inset-block-start: 0; pointer-events: none; height: 100%; } .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background:hover, .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background:focus-within { opacity: 1; } .ad-banner-wrapper .ad-banner-inner .ad-banner-hover-background .ads-context-menu-wrapper { pointer-events: auto; } .ad-banner-wrapper .ad-banner-inner.leaderboard { max-width: var(--leaderboard-container-width); } .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-content { height: var(--leaderboard-height); width: var(--leaderboard-width); } .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-hover-background { width: var(--leaderboard-container-width); } .ad-banner-wrapper .ad-banner-inner.leaderboard .ad-banner-sponsored { width: var(--leaderboard-width); } @media (width <= 758px) { .ad-banner-wrapper .ad-banner-inner.leaderboard { display: none; } } .ad-banner-wrapper .ad-banner-inner.billboard { width: var(--billboard-container-width); } .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-content { height: var(--billboard-height); width: var(--billboard-width); } .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-hover-background { width: var(--billboard-container-width); } .ad-banner-wrapper .ad-banner-inner.billboard .ad-banner-sponsored { width: var(--billboard-width); } @media (width <= 1015px) { .ad-banner-wrapper .ad-banner-inner.billboard { display: none; } } .ad-banner-wrapper .ad-banner-inner .ad-banner-sponsored { height: 32px; display: flex; align-items: center; } .ad-banner-wrapper .ad-banner-inner .ad-banner-sponsored span { font-size: var(--font-size-small); color: var(--newtab-contextual-text-secondary-color); } .ad-banner-wrapper.active { z-index: 1; } .ad-banner-wrapper.active .ad-banner-hover-background { opacity: 1; } .ads-context-menu-wrapper { text-align: end; } .ads-context-menu { z-index: 10; position: absolute; inset-inline-end: var(--space-large); inset-block-end: 0; } .ads-context-menu .context-menu { /* Position the menu just under and to the right of the context menu button */ inset-inline-end: 100%; inset-inline-start: auto; margin-inline-end: calc(-0.98 * var(--size-item-large)); inset-block-start: calc(2.25 * var(--size-item-small)); } .ads-context-menu > moz-button::part(button) { background-color: transparent; } .ads-context-menu > moz-button::part(button):hover { background-color: var(--button-background-color-hover); } .ads-context-menu > moz-button::part(button):active { background-color: var(--button-background-color-active); } .context-menu-open > moz-button::part(button) { background-color: var(--button-background-color); } .promo-card-wrapper { background: var(--newtab-background-card); transition: opacity 0.2s ease; display: none; box-shadow: var(--box-shadow-card); border-radius: var(--border-radius-large); height: 298px; width: 228px; position: relative; padding: var(--space-large); } .promo-card-wrapper:hover { background: var(--newtab-background-color-secondary); } .promo-card-wrapper .promo-card-title { display: block; font-size: var(--font-size-medium); font-weight: var(--font-weight-heading); margin-block: var(--space-medium); } .promo-card-wrapper .promo-card-title::before { content: ""; display: inline-block; width: var(--icon-size); height: var(--icon-size); background-image: url("chrome://branding/content/icon32.png"); background-size: contain; background-repeat: no-repeat; margin-inline-end: var(--space-small); vertical-align: middle; } .promo-card-wrapper .promo-card-body { display: block; margin-block: 0 var(--space-medium); } .promo-card-wrapper .promo-card-dismiss-button { position: absolute; inset-block-start: var(--space-small); inset-inline-end: var(--space-small); margin: 0; } .promo-card-wrapper .promo-card-cta-wrapper { display: flex; width: 100%; justify-content: end; } .promo-card-wrapper .img-wrapper { height: 132px; width: 196px; } @media (min-width: 1698px) { .ds-card-grid .promo-card-wrapper { display: block; } } @media (min-width: 1390px) { .ds-section-wrapper .promo-card-wrapper { display: block; } } .section-context-menu { position: relative; } .section-context-menu .context-menu { /* Fix the context menu width */ width: calc(4 * var(--size-item-large)); /* Position the context menu on top of the card grid, below the menu button. */ inset-block-start: calc(2.5 * var(--size-item-small)); inset-inline-start: calc(-6.25 * var(--size-item-small)); } .inline-selection-wrapper.ds-section .section-heading { margin-block: var(--space-medium); } .inline-selection-wrapper.ds-section .section-subtitle { color: var(--newtab-contextual-text-primary-color); } .inline-selection-wrapper.ds-section .learn-more-copy { margin-block-end: 0; } .lightWallpaper .inline-selection-wrapper.ds-section .learn-more-copy { color-scheme: light; } .darkWallpaper .inline-selection-wrapper.ds-section .learn-more-copy { color-scheme: dark; } .inline-selection-wrapper.ds-section .learn-more-copy a:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .inline-selection-wrapper.ds-section .topic-list { list-style: none; display: flex; flex-wrap: wrap; row-gap: calc(1.25 * var(--space-small)); column-gap: var(--space-small); justify-content: flex-start; margin: var(--space-small) 0; padding-inline-start: 0; width: fit-content; } .inline-selection-wrapper.ds-section .topic-list li { align-items: center; display: flex; justify-self: flex-start; max-width: fit-content; position: relative; } .inline-selection-wrapper.ds-section .topic-list li > label { background-color: var(--newtab-background-card); border: var(--border-width) solid var(--border-color-interactive); border-radius: var(--border-radius-circle); color: var(--newtab-text-primary-color); padding: var(--space-small) calc(1.25 * var(--space-small)) var(--space-small) var(--space-xsmall); } .inline-selection-wrapper.ds-section .topic-list li > label input[type=checkbox] { outline: none; appearance: none; } .inline-selection-wrapper.ds-section .topic-list li > label .topic-item-icon { -moz-context-properties: fill; color: var(--newtab-text-primary-color); fill: currentColor; margin-inline-start: var(--space-small); margin-block-start: calc(-0.75 * var(--space-xsmall)); } .inline-selection-wrapper.ds-section .topic-list li > label:hover { background-color: var(--newtab-button-static-hover-background); cursor: pointer; } .inline-selection-wrapper.ds-section .topic-list li > label:hover:active { background-color: var(--newtab-button-static-active-background); } .inline-selection-wrapper.ds-section .topic-list li > label:has(input:checked) { background-color: var(--color-accent-primary); border-color: var(--border-color-selected); color: var(--button-text-color-primary); } .inline-selection-wrapper.ds-section .topic-list li > label:has(input:checked) .topic-item-icon { color: var(--button-text-color-primary); } .inline-selection-wrapper.ds-section .topic-list li > label:has(input:focus-visible) { outline-offset: var(--focus-outline-offset); outline: var(--focus-outline); } .report-content-form { width: 500px; height: 270px; box-shadow: var(--box-shadow-level-4); border-radius: var(--border-radius-medium); border: 1px solid var(--border-color); /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */ background-color: var(--newtab-background-color-secondary); } .report-content-form form { height: 100%; display: flex; flex-direction: column; } .report-content-form form moz-radio-group { height: 100%; } .report-content-form::backdrop { background: rgba(0, 0, 0, 0.25); } .personalized-card-wrapper { background-color: var(--background-color-canvas); border: 2px solid var(--border-color-card); color: var(--text-color); padding: var(--space-xxlarge); border-radius: var(--border-radius-large); margin: var(--space-xlarge) 0; position: relative; } .personalized-card-wrapper .personalized-card-dismiss { position: absolute; inset-inline-end: var(--space-medium); inset-block-start: var(--space-medium); } .personalized-card-wrapper .personalized-card-inner { display: grid; grid-template-columns: 0.5fr 1fr 1fr 1fr; align-items: start; } .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper { display: flex; flex-direction: column; gap: var(--space-medium); } .personalized-card-wrapper .personalized-card-inner img { max-width: 200px; max-height: 200px; object-fit: contain; justify-self: center; align-self: start; } .personalized-card-wrapper .personalized-card-inner h2, .personalized-card-wrapper .personalized-card-inner p { margin-block-start: 0; } .personalized-card-wrapper .personalized-card-inner h2 { font-size: var(--font-size-xxlarge); font-weight: var(--font-weight-heading); } .personalized-card-wrapper .personalized-card-inner .personalized-card-link { color: var(--link-color); font-size: var(--font-size-small); } @media (max-width: 724px) { .personalized-card-wrapper .personalized-card-inner { grid-template-columns: 1fr; gap: var(--space-large); } .personalized-card-wrapper .personalized-card-inner img { width: 100px; justify-self: initial; } .personalized-card-wrapper .personalized-card-inner h2 { margin-block-end: var(--space-xsmall); } } @media (min-width: 724px) { .personalized-card-wrapper .personalized-card-inner { grid-template-columns: 0.2fr 1fr 1.2fr; gap: var(--space-large); } .personalized-card-wrapper .personalized-card-inner img { width: 130px; align-self: end; grid-row: 1/span 2; } .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper { align-items: center; display: grid; grid-template-columns: subgrid; grid-row: 2; grid-column: 2/span 2; padding-block-end: var(--space-xxlarge); } .personalized-card-wrapper .personalized-card-inner p { width: 210px; margin: 0; } .personalized-card-wrapper .personalized-card-inner h2 { margin: 0; } } @media (min-width: 1122px) { .personalized-card-wrapper .personalized-card-inner { grid-template-columns: 0.2fr 1.2fr 0.8fr 1fr; gap: var(--space-large); } .personalized-card-wrapper .personalized-card-inner img { width: 100px; align-self: end; } .personalized-card-wrapper .personalized-card-inner h2 { grid-column: 2; grid-row: 1; width: initial; } .personalized-card-wrapper .personalized-card-inner p { grid-column: 3; grid-row: 1; width: 400px; } .personalized-card-wrapper .personalized-card-inner .personalized-card-cta-wrapper { grid-column: 4; grid-row: 1; display: flex; flex-direction: column; justify-self: end; gap: var(--space-medium); width: max-content; margin-inline-end: var(--space-medium); } .personalized-card-wrapper .personalized-card-inner .personalized-card-cta { align-self: baseline; } } @media (min-width: 1122px) and (max-width: 1390px) { .personalized-card-wrapper .personalized-card-inner { grid-template-columns: 0.2fr 1fr 1fr 1fr; } .personalized-card-wrapper .personalized-card-inner h2 { max-width: 200px; } .personalized-card-wrapper .personalized-card-inner p { width: 300px; } } @media (min-width: 724px) { .personalized-card-wrapper { padding-block-end: 0; } }