Bug 2033045 - Remove design token newtab train-hop compatibility shims for newtab. r=home-newtab-reviewers,ini

Differential Revision: https://phabricator.services.mozilla.com/D296386
This commit is contained in:
Mike Conley
2026-04-29 22:05:17 +00:00
committed by mconley@mozilla.com
parent b0e3561a0c
commit c574e9052d
28 changed files with 248 additions and 300 deletions
@@ -8,8 +8,7 @@
--image-size-large: 120px;
background-color: var(--background-color-canvas);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
padding: var(--space-large);
border-radius: var(--border-radius-medium);
@@ -62,8 +61,7 @@
h2 {
margin: 0;
font-size: var(--font-size-large);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
p {
@@ -238,8 +238,7 @@ main.newtab-main {
.asrouter-newtab-message-wrapper {
background-color: var(--background-color-canvas);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
border-radius: var(--border-radius-medium);
margin-block: 0 var(--space-xlarge);
@@ -149,8 +149,7 @@
.card-title {
font-size: inherit;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: $card-text-line-height;
margin: 0 0 var(--space-xxsmall);
word-wrap: break-word;
@@ -22,8 +22,7 @@
.section-title {
font-size: $section-title-font-size;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--newtab-text-primary-color);
&.grey-title {
@@ -8,8 +8,7 @@
border-radius: var(--border-radius-small);
padding: 0;
width: 400px;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--popup-box-shadow, var(--box-shadow-popup));
box-shadow: var(--popup-box-shadow);
background: var(--newtab-background-color-secondary);
&::backdrop {
@@ -315,8 +315,7 @@
.widgets-section h2 {
font-size: inherit;
margin-block-start: 0;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.settings-widgets,
@@ -53,8 +53,7 @@ $ds-width: 936px;
.ds-layout .section-title span {
color: var(--newtab-contextual-text-primary-color);
font-size: $section-title-font-size;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
// Contrast fix for users who have wallpapers set
@include wallpaper-contrast-fix;
@@ -48,13 +48,11 @@
@include newtab-card-style;
position: relative;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
border-radius: var(--border-radius-large);
&:hover {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ad-banner-link {
@@ -2,8 +2,7 @@
@include newtab-card-style;
border-radius: var(--border-radius-medium);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
padding: var(--space-large);
display: flex;
flex-direction: column;
@@ -47,8 +46,7 @@
.briefing-card-title {
font-size: var(--font-size-root);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--text-color);
margin: 0;
margin-block-start: var(--space-xxsmall);
@@ -113,8 +111,7 @@ hr {
.briefing-card-headline-title {
font-size: var(--font-size-small);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--text-color);
-webkit-line-clamp: 2;
overflow: hidden;
@@ -7,12 +7,10 @@
&.ds-card.sections-card-ui {
padding: unset;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
&:hover {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
&:not(.placeholder) .img-wrapper>.ds-image.img>img {
@@ -109,12 +107,10 @@
&.ds-card.sections-card-ui {
height: unset;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
&:hover {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@@ -224,8 +220,7 @@
grid-column: span 2;
&.ds-card.sections-card-ui {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
@media ($break-point-layout-variant <=width < $break-point-widest),
(min-width: $break-point-sections-variant) {
@@ -267,8 +262,7 @@
}
&:hover {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@@ -306,8 +300,7 @@
.title {
-webkit-line-clamp: 3;
font-size: var(--font-size-large);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
@@ -438,8 +431,7 @@
.section-title {
@include wallpaper-contrast-fix;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
font-size: var(--font-size-xlarge);
color: var(--newtab-contextual-text-primary-color);
margin-block: 0;
@@ -259,8 +259,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
@include limit-visible-lines(3, $header-line-height, $header-font-size);
margin-block: 0;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.excerpt {
@@ -376,8 +375,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
.cta-header {
background: var(--button-background-color);
font-size: var(--font-size-root);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
text-align: end;
padding: var(--space-xsmall) var(--space-large);
color: var(--newtab-text-primary-color);
@@ -433,8 +431,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
@media (forced-colors: active) {
&:not(.placeholder) {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
border: var(--border-width) solid var(--card-border-color, var(--border-color-card));
border: var(--border-width) solid var(--card-border-color);
}
&:not(.placeholder):hover {
@@ -463,8 +460,7 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
-webkit-line-clamp: 3;
font-size: var(--font-size-root);
margin-block-end: var(--space-small);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.excerpt {
@@ -72,8 +72,7 @@
h2 {
font-size: inherit;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin: 0;
}
@@ -82,8 +82,7 @@
}
.title {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: var(--space-small);
}
@@ -81,8 +81,7 @@
font-size: var(--font-size-small);
.title {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-xsmall);
}
}
@@ -54,8 +54,7 @@
font-size: var(--font-size-small);
.title {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-xsmall);
text-align: inherit;
}
@@ -44,8 +44,7 @@
}
.title {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: var(--space-medium);
}
@@ -33,8 +33,7 @@
.card-title {
font-size: var(--font-size-small);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: $line-height;
max-height: $line-height;
}
@@ -90,12 +89,11 @@
@include wallpaper-contrast-fix;
grid-column: 1 / -1;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-size: var(--font-size-heading-large, var(--font-size-xlarge));
font-weight: var(--font-weight-heading);
font-size: var(--font-size-heading-large);
@include at-content-cols(12) {
font-size: var(--font-size-heading-xlarge, var(--font-size-xxlarge));
font-size: var(--font-size-heading-xlarge);
}
color: var(--newtab-contextual-text-primary-color);
@@ -90,8 +90,7 @@
.ds-navigation-header {
font-size: var(--font-size-small);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
display: inline-block;
margin-block-end: var(--space-small);
}
@@ -119,9 +119,8 @@
.personalized-card-wrapper {
background-color: var(--newtab-background-card);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
// @nova-cleanup(merge-styles): Nova removed the border
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
border-radius: var(--border-radius-large);
padding-block-start: var(--space-xxlarge);
@@ -156,9 +155,8 @@
}
h2 {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-size: var(--font-size-heading-large, var(--font-size-xlarge));
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-size: var(--font-size-heading-large);
font-weight: var(--font-weight-heading);
}
}
@@ -2,8 +2,7 @@
@include newtab-card-style;
display: none; // hidden by default
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
border-radius: var(--border-radius-large);
height: 298px;
width: 228px;
@@ -49,7 +48,7 @@
display: block;
font-size: var(--font-size-root, 15px);
font-style: normal;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: normal;
overflow: hidden;
text-overflow: ellipsis;
@@ -44,8 +44,7 @@
.title {
text-align: center;
font-size: var(--font-size-xlarge);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-small);
}
@@ -1,7 +1,6 @@
.modalOverlayOuter {
border: none;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--popup-box-shadow, var(--box-shadow-popup));
box-shadow: var(--popup-box-shadow);
padding: 0;
border-radius: var(--border-radius-medium);
@@ -235,8 +235,7 @@
}
&:hover {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
a {
@@ -267,11 +266,9 @@
dialog {
background: var(--newtab-background-color-secondary);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
border: 1px solid var(--card-border-color, var(--border-color-card));
border: 1px solid var(--card-border-color);
border-radius: var(--border-radius-medium);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
display: flex;
width: 332px;
@@ -302,8 +299,7 @@
h3 {
font-size: var(--button-font-size);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-medium);
}
@@ -333,19 +329,14 @@ dialog {
height: 16px;
width: 16px;
background: var(--newtab-background-color-secondary);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: 4px 4px 6px -2px var(--card-box-shadow, var(--box-shadow-card));
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
border-inline-end: 1px solid var(--card-border-color, var(--border-color-card));
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
border-block-end: 1px solid var(--card-border-color, var(--border-color-card));
box-shadow: 4px 4px 6px -2px var(--card-box-shadow);
border-inline-end: 1px solid var(--card-border-color);
border-block-end: 1px solid var(--card-border-color);
}
&:dir(rtl)::after {
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
border-inline-start: 1px solid var(--card-border-color, var(--border-color-card));
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
border-block-end: 1px solid var(--card-border-color, var(--border-color-card));
border-inline-start: 1px solid var(--card-border-color);
border-block-end: 1px solid var(--card-border-color);
border-inline-end: none;
inset-inline-end: 10%;
}
@@ -27,9 +27,7 @@
grid-column: span 1;
width: var(--newtab-card-grid-layout-width);
height: var(--newtab-card-height);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
// Match the new card width if sections are enabled
.has-sections-grid & {
@@ -83,9 +83,7 @@
grid-column: span 1;
width: var(--newtab-card-grid-layout-width);
height: var(--newtab-card-height);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
// Match the new card width if sections are enabled
.has-sections-grid & {
@@ -5,8 +5,7 @@
text-decoration: none;
border-radius: var(--border-radius-large);
padding: var(--space-medium);
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
display: flex;
flex-direction: column;
+102 -102
View File
@@ -438,7 +438,7 @@ panel-item::part(button) {
--image-size-medium: 90px;
--image-size-large: 120px;
background-color: var(--background-color-canvas);
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
padding: var(--space-large);
border-radius: var(--border-radius-medium);
@@ -490,7 +490,7 @@ panel-item::part(button) {
.activation-window-message .activation-window-message-inner h2 {
margin: 0;
font-size: var(--font-size-large);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.activation-window-message .activation-window-message-inner p {
margin-block: var(--space-medium) 0;
@@ -738,7 +738,7 @@ main.newtab-main section {
.asrouter-newtab-message-wrapper {
background-color: var(--background-color-canvas);
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
border-radius: var(--border-radius-medium);
margin-block: 0 var(--space-xlarge);
@@ -2007,7 +2007,7 @@ main.newtab-main section {
border-radius: var(--border-radius-small);
padding: 0;
width: 400px;
box-shadow: var(--popup-box-shadow, var(--box-shadow-popup));
box-shadow: var(--popup-box-shadow);
background: var(--newtab-background-color-secondary);
}
.confirmation-dialog::backdrop {
@@ -2301,7 +2301,7 @@ main.newtab-main section {
.home-section .widgets-section h2 {
font-size: inherit;
margin-block-start: 0;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.home-section .settings-widgets,
.home-section .settings-toggles {
@@ -3166,7 +3166,7 @@ button.arrow-button:dir(rtl) {
visibility: hidden;
}
.weatherCard:hover {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.weatherCard a {
color: var(--text-color);
@@ -3196,9 +3196,9 @@ button.arrow-button:dir(rtl) {
}
.weatherOptIn dialog {
background: var(--newtab-background-color-secondary);
border: 1px solid var(--card-border-color, var(--border-color-card));
border: 1px solid var(--card-border-color);
border-radius: var(--border-radius-medium);
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
display: flex;
width: 332px;
}
@@ -3225,7 +3225,7 @@ button.arrow-button:dir(rtl) {
}
.weatherOptIn dialog .weatherOptInContent h3 {
font-size: var(--button-font-size);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-medium);
}
.weatherOptIn dialog .weatherOptInContent moz-button-group {
@@ -3250,13 +3250,13 @@ dialog::after {
height: 16px;
width: 16px;
background: var(--newtab-background-color-secondary);
box-shadow: 4px 4px 6px -2px var(--card-box-shadow, var(--box-shadow-card));
border-inline-end: 1px solid var(--card-border-color, var(--border-color-card));
border-block-end: 1px solid var(--card-border-color, var(--border-color-card));
box-shadow: 4px 4px 6px -2px var(--card-box-shadow);
border-inline-end: 1px solid var(--card-border-color);
border-block-end: 1px solid var(--card-border-color);
}
dialog:dir(rtl)::after {
border-inline-start: 1px solid var(--card-border-color, var(--border-color-card));
border-block-end: 1px solid var(--card-border-color, var(--border-color-card));
border-inline-start: 1px solid var(--card-border-color);
border-block-end: 1px solid var(--card-border-color);
border-inline-end: none;
inset-inline-end: 10%;
}
@@ -3911,7 +3911,7 @@ dialog:dir(rtl)::after {
}
.card-outer .card-title {
font-size: inherit;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: 19px;
margin: 0 0 var(--space-xxsmall);
word-wrap: break-word;
@@ -4071,7 +4071,7 @@ dialog:dir(rtl)::after {
}
.collapsible-section .section-title {
font-size: var(--font-size-large);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--newtab-text-primary-color);
}
.collapsible-section .section-title.grey-title {
@@ -4584,7 +4584,7 @@ dialog:dir(rtl)::after {
.ds-layout .section-title span {
color: var(--newtab-contextual-text-primary-color);
font-size: var(--font-size-large);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.lightWallpaper .ds-header,
.lightWallpaper .ds-layout .section-title span {
@@ -4663,7 +4663,7 @@ dialog:dir(rtl)::after {
.modalOverlayOuter {
border: none;
box-shadow: var(--popup-box-shadow, var(--box-shadow-popup));
box-shadow: var(--popup-box-shadow);
padding: 0;
border-radius: var(--border-radius-medium);
}
@@ -5036,7 +5036,7 @@ dialog:dir(rtl)::after {
grid-column: span 1;
width: var(--newtab-card-grid-layout-width);
height: var(--newtab-card-height);
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.has-sections-grid .classic-enabled .lists {
width: var(--newtab-card-width-medium);
@@ -5819,7 +5819,7 @@ dialog:dir(rtl)::after {
grid-column: span 1;
width: var(--newtab-card-grid-layout-width);
height: var(--newtab-card-height);
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.has-sections-grid .classic-enabled .focus-timer {
width: var(--newtab-card-width-medium);
@@ -6627,7 +6627,7 @@ dialog:dir(rtl)::after {
text-decoration: none;
border-radius: var(--border-radius-large);
padding: var(--space-medium);
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
display: flex;
flex-direction: column;
--weather-sunny-background-color: light-dark(var(--color-yellow-0), var(--color-yellow-90));
@@ -7309,7 +7309,7 @@ hr {
margin-block: var(--space-small) var(--space-medium);
}
.ds-section-wrapper .ds-section .section-title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
font-size: var(--font-size-xlarge);
color: var(--newtab-contextual-text-primary-color);
margin-block: 0;
@@ -7456,10 +7456,10 @@ hr {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
@@ -7538,10 +7538,10 @@ hr {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-medium .img-wrapper {
width: 100%;
@@ -7616,7 +7616,7 @@ hr {
grid-column: span 2;
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
}
@media (max-width: 724px) and (724px <= width < 1122px), (max-width: 724px) and (min-width: 1390px) {
@@ -7647,7 +7647,7 @@ hr {
}
@media (max-width: 724px) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@media (max-width: 724px) and (min-width: 724px) {
@@ -7680,7 +7680,7 @@ hr {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-large.ds-card.sections-card-ui .meta .excerpt {
@@ -7774,10 +7774,10 @@ hr {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
@@ -7856,10 +7856,10 @@ hr {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-medium .img-wrapper {
width: 100%;
@@ -7934,7 +7934,7 @@ hr {
grid-column: span 2;
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
}
@media (724px <= width < 1122px) and (724px <= width < 1122px), (724px <= width < 1122px) and (min-width: 1390px) {
@@ -7965,7 +7965,7 @@ hr {
}
@media (724px <= width < 1122px) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@media (724px <= width < 1122px) and (min-width: 724px) {
@@ -7998,7 +7998,7 @@ hr {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-large.ds-card.sections-card-ui .meta .excerpt {
@@ -8110,10 +8110,10 @@ hr {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
@@ -8192,10 +8192,10 @@ hr {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-medium .img-wrapper {
width: 100%;
@@ -8270,7 +8270,7 @@ hr {
grid-column: span 2;
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
}
@media (1122px <= width < 1390px) and (724px <= width < 1122px), (1122px <= width < 1390px) and (min-width: 1390px) {
@@ -8301,7 +8301,7 @@ hr {
}
@media (1122px <= width < 1390px) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@media (1122px <= width < 1390px) and (min-width: 724px) {
@@ -8334,7 +8334,7 @@ hr {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-large.ds-card.sections-card-ui .meta .excerpt {
@@ -8444,10 +8444,10 @@ hr {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
@@ -8526,10 +8526,10 @@ hr {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-medium .img-wrapper {
width: 100%;
@@ -8604,7 +8604,7 @@ hr {
grid-column: span 2;
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
}
@media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) {
@@ -8635,7 +8635,7 @@ hr {
}
@media (min-width: 1390px) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@media (min-width: 1390px) and (min-width: 724px) {
@@ -8668,7 +8668,7 @@ hr {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-large.ds-card.sections-card-ui .meta .excerpt {
@@ -8785,10 +8785,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .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);
@@ -8867,10 +8867,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-medium .img-wrapper {
width: 100%;
@@ -8950,10 +8950,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-large .img-wrapper {
width: 100%;
@@ -9091,10 +9091,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .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);
@@ -9173,10 +9173,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-medium .img-wrapper {
width: 100%;
@@ -9251,7 +9251,7 @@ hr {
grid-column: span 2;
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
@media (724px <= width < 1122px), (min-width: 1390px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link {
@@ -9280,7 +9280,7 @@ hr {
}
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
@media (min-width: 724px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui {
@@ -9312,7 +9312,7 @@ hr {
.nova-enabled .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .excerpt {
@@ -9410,10 +9410,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .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);
@@ -9492,10 +9492,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-medium .img-wrapper {
width: 100%;
@@ -9570,7 +9570,7 @@ hr {
grid-column: span 2;
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
@media (724px <= width < 1122px), (min-width: 1390px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link {
@@ -9599,7 +9599,7 @@ hr {
}
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
@media (min-width: 724px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui {
@@ -9631,7 +9631,7 @@ hr {
.nova-enabled .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .excerpt {
@@ -9729,10 +9729,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .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);
@@ -9811,10 +9811,10 @@ hr {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-medium .img-wrapper {
width: 100%;
@@ -9889,7 +9889,7 @@ hr {
grid-column: span 2;
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
@media (724px <= width < 1122px), (min-width: 1390px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link {
@@ -9918,7 +9918,7 @@ hr {
}
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
@media (min-width: 724px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui {
@@ -9950,7 +9950,7 @@ hr {
.nova-enabled .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .excerpt {
@@ -10019,7 +10019,7 @@ hr {
}
.ds-highlights .section .section-list .card-outer .card-title {
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: 20px;
max-height: 20px;
}
@@ -10060,8 +10060,8 @@ hr {
}
.nova-enabled .ds-highlights .ds-highlights-title {
grid-column: 1/-1;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-size: var(--font-size-heading-large, var(--font-size-xlarge));
font-weight: var(--font-weight-heading);
font-size: var(--font-size-heading-large);
color: var(--newtab-contextual-text-primary-color);
margin-block: var(--space-small) 0;
}
@@ -10073,7 +10073,7 @@ hr {
}
@container content-grid (inline-size >= calc(12 * 75px + 11 * 0.75rem)) {
.nova-enabled .ds-highlights .ds-highlights-title {
font-size: var(--font-size-heading-xlarge, var(--font-size-xxlarge));
font-size: var(--font-size-heading-xlarge);
}
}
.nova-enabled .ds-highlights .section {
@@ -10179,7 +10179,7 @@ hr {
}
.ds-navigation.ds-navigation-new-topics .ds-navigation-header {
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
display: inline-block;
margin-block-end: var(--space-small);
}
@@ -10628,7 +10628,7 @@ hr {
-webkit-line-clamp: 3;
line-height: normal;
margin-block: 0;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.ds-card .meta .excerpt {
font-size: var(--font-size-small);
@@ -10722,7 +10722,7 @@ hr {
.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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
text-align: end;
padding: var(--space-xsmall) var(--space-large);
color: var(--newtab-text-primary-color);
@@ -10765,7 +10765,7 @@ hr {
}
@media (forced-colors: active) {
.ds-card-grid .sections-card-ui:not(.placeholder) {
border: var(--border-width) solid var(--card-border-color, var(--border-color-card));
border: var(--border-width) solid var(--card-border-color);
}
.ds-card-grid .sections-card-ui:not(.placeholder):hover {
--newtab-background-color-secondary: SelectedItemText;
@@ -10788,7 +10788,7 @@ hr {
-webkit-line-clamp: 3;
font-size: var(--font-size-root);
margin-block-end: var(--space-small);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.ds-card-grid .sections-card-ui .meta .excerpt {
-webkit-line-clamp: 3;
@@ -11198,7 +11198,7 @@ hr {
}
.section-empty-state h2 {
font-size: inherit;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin: 0;
}
.section-empty-state p {
@@ -11484,7 +11484,7 @@ hr {
padding: 0;
}
.download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: var(--space-small);
}
.download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .subtitle {
@@ -11553,7 +11553,7 @@ hr {
font-size: var(--font-size-small);
}
.follow-section-button-highlight .follow-section-button-highlight-copy .title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-xsmall);
}
@@ -11590,7 +11590,7 @@ hr {
inset-block-end: calc(var(--space-xlarge) - var(--space-xxsmall));
}
.wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: var(--space-medium);
}
.wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .subtitle {
@@ -11747,7 +11747,7 @@ hr {
font-size: var(--font-size-small);
}
.shortcut-feature-highlight .shortcut-feature-highlight-copy .title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-xsmall);
text-align: inherit;
}
@@ -11791,7 +11791,7 @@ hr {
.topic-selection-container .title {
text-align: center;
font-size: var(--font-size-xlarge);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-small);
}
.topic-selection-container .subtitle {
@@ -11928,14 +11928,14 @@ hr {
background: var(--newtab-background-card);
transition: opacity 0.2s ease;
position: relative;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
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(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ad-banner-wrapper .ad-banner-inner .ad-banner-link {
text-decoration: none;
@@ -12070,7 +12070,7 @@ hr {
background: var(--newtab-background-card);
transition: opacity 0.2s ease;
display: none;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
border-radius: var(--border-radius-large);
height: 298px;
width: 228px;
@@ -12114,7 +12114,7 @@ hr {
display: block;
font-size: var(--font-size-root, 15px);
font-style: normal;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: normal;
overflow: hidden;
text-overflow: ellipsis;
@@ -12204,7 +12204,7 @@ hr {
background: var(--newtab-background-card);
transition: opacity 0.2s ease;
border-radius: var(--border-radius-medium);
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
padding: var(--space-large);
display: flex;
flex-direction: column;
@@ -12246,7 +12246,7 @@ hr {
.briefing-card-title {
font-size: var(--font-size-root);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--text-color);
margin: 0;
margin-block-start: var(--space-xxsmall);
@@ -12305,7 +12305,7 @@ hr {
.briefing-card-headline-title {
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--text-color);
-webkit-line-clamp: 2;
overflow: hidden;
@@ -12476,7 +12476,7 @@ hr {
.personalized-card-wrapper {
background-color: var(--newtab-background-card);
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
border-radius: var(--border-radius-large);
padding-block-start: var(--space-xxlarge);
@@ -12507,8 +12507,8 @@ hr {
margin: 0;
}
.personalized-card-wrapper .personalized-card-message-wrapper h2 {
font-size: var(--font-size-heading-large, var(--font-size-xlarge));
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-size: var(--font-size-heading-large);
font-weight: var(--font-weight-heading);
}
.personalized-card-wrapper .personalized-card-cta-wrapper {
display: flex;
@@ -728,7 +728,7 @@ input[type=text], input[type=search] {
--image-size-medium: 90px;
--image-size-large: 120px;
background-color: var(--background-color-canvas);
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
padding: var(--space-large);
border-radius: var(--border-radius-medium);
@@ -780,7 +780,7 @@ input[type=text], input[type=search] {
.activation-window-message .activation-window-message-inner h2 {
margin: 0;
font-size: var(--font-size-large);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.activation-window-message .activation-window-message-inner p {
margin-block: var(--space-medium) 0;
@@ -1017,7 +1017,7 @@ main.newtab-main section {
.asrouter-newtab-message-wrapper {
background-color: var(--background-color-canvas);
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
border-radius: var(--border-radius-medium);
margin-block: 0 var(--space-xlarge);
@@ -2286,7 +2286,7 @@ main.newtab-main section {
border-radius: var(--border-radius-small);
padding: 0;
width: 400px;
box-shadow: var(--popup-box-shadow, var(--box-shadow-popup));
box-shadow: var(--popup-box-shadow);
background: var(--newtab-background-color-secondary);
}
.confirmation-dialog::backdrop {
@@ -2580,7 +2580,7 @@ main.newtab-main section {
.home-section .widgets-section h2 {
font-size: inherit;
margin-block-start: 0;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.home-section .settings-widgets,
.home-section .settings-toggles {
@@ -3464,7 +3464,7 @@ button.arrow-button:dir(rtl) {
}
.card-outer .card-title {
font-size: inherit;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: 19px;
margin: 0 0 var(--space-xxsmall);
word-wrap: break-word;
@@ -3624,7 +3624,7 @@ button.arrow-button:dir(rtl) {
}
.collapsible-section .section-title {
font-size: var(--font-size-large);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--newtab-text-primary-color);
}
.collapsible-section .section-title.grey-title {
@@ -4137,7 +4137,7 @@ button.arrow-button:dir(rtl) {
.ds-layout .section-title span {
color: var(--newtab-contextual-text-primary-color);
font-size: var(--font-size-large);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.lightWallpaper .ds-header,
.lightWallpaper .ds-layout .section-title span {
@@ -4216,7 +4216,7 @@ button.arrow-button:dir(rtl) {
.modalOverlayOuter {
border: none;
box-shadow: var(--popup-box-shadow, var(--box-shadow-popup));
box-shadow: var(--popup-box-shadow);
padding: 0;
border-radius: var(--border-radius-medium);
}
@@ -4589,7 +4589,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 1;
width: var(--newtab-card-grid-layout-width);
height: var(--newtab-card-height);
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.has-sections-grid .classic-enabled .lists {
width: var(--newtab-card-width-medium);
@@ -5372,7 +5372,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 1;
width: var(--newtab-card-grid-layout-width);
height: var(--newtab-card-height);
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.has-sections-grid .classic-enabled .focus-timer {
width: var(--newtab-card-width-medium);
@@ -6536,7 +6536,7 @@ button.arrow-button:dir(rtl) {
margin-block: var(--space-small) var(--space-medium);
}
.ds-section-wrapper .ds-section .section-title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
font-size: var(--font-size-xlarge);
color: var(--newtab-contextual-text-primary-color);
margin-block: 0;
@@ -6683,10 +6683,10 @@ button.arrow-button:dir(rtl) {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
@@ -6765,10 +6765,10 @@ button.arrow-button:dir(rtl) {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-medium .img-wrapper {
width: 100%;
@@ -6843,7 +6843,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 2;
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
}
@media (max-width: 724px) and (724px <= width < 1122px), (max-width: 724px) and (min-width: 1390px) {
@@ -6874,7 +6874,7 @@ button.arrow-button:dir(rtl) {
}
@media (max-width: 724px) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@media (max-width: 724px) and (min-width: 724px) {
@@ -6907,7 +6907,7 @@ button.arrow-button:dir(rtl) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-1-large.ds-card.sections-card-ui .meta .excerpt {
@@ -7001,10 +7001,10 @@ button.arrow-button:dir(rtl) {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
@@ -7083,10 +7083,10 @@ button.arrow-button:dir(rtl) {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-medium .img-wrapper {
width: 100%;
@@ -7161,7 +7161,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 2;
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
}
@media (724px <= width < 1122px) and (724px <= width < 1122px), (724px <= width < 1122px) and (min-width: 1390px) {
@@ -7192,7 +7192,7 @@ button.arrow-button:dir(rtl) {
}
@media (724px <= width < 1122px) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@media (724px <= width < 1122px) and (min-width: 724px) {
@@ -7225,7 +7225,7 @@ button.arrow-button:dir(rtl) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-2-large.ds-card.sections-card-ui .meta .excerpt {
@@ -7337,10 +7337,10 @@ button.arrow-button:dir(rtl) {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
@@ -7419,10 +7419,10 @@ button.arrow-button:dir(rtl) {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-medium .img-wrapper {
width: 100%;
@@ -7497,7 +7497,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 2;
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
}
@media (1122px <= width < 1390px) and (724px <= width < 1122px), (1122px <= width < 1390px) and (min-width: 1390px) {
@@ -7528,7 +7528,7 @@ button.arrow-button:dir(rtl) {
}
@media (1122px <= width < 1390px) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@media (1122px <= width < 1390px) and (min-width: 724px) {
@@ -7561,7 +7561,7 @@ button.arrow-button:dir(rtl) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-3-large.ds-card.sections-card-ui .meta .excerpt {
@@ -7671,10 +7671,10 @@ button.arrow-button:dir(rtl) {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-small.ds-card.sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
@@ -7753,10 +7753,10 @@ button.arrow-button:dir(rtl) {
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-medium .img-wrapper {
width: 100%;
@@ -7831,7 +7831,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 2;
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
}
@media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) {
@@ -7862,7 +7862,7 @@ button.arrow-button:dir(rtl) {
}
@media (min-width: 1390px) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
}
@media (min-width: 1390px) and (min-width: 724px) {
@@ -7895,7 +7895,7 @@ button.arrow-button:dir(rtl) {
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.ds-section-grid.ds-card-grid:not(.nova-enabled *) .col-4-large.ds-card.sections-card-ui .meta .excerpt {
@@ -8012,10 +8012,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .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);
@@ -8094,10 +8094,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-medium .img-wrapper {
width: 100%;
@@ -8177,10 +8177,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-1-large .img-wrapper {
width: 100%;
@@ -8318,10 +8318,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .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);
@@ -8400,10 +8400,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-medium .img-wrapper {
width: 100%;
@@ -8478,7 +8478,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 2;
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
@media (724px <= width < 1122px), (min-width: 1390px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link {
@@ -8507,7 +8507,7 @@ button.arrow-button:dir(rtl) {
}
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
@media (min-width: 724px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui {
@@ -8539,7 +8539,7 @@ button.arrow-button:dir(rtl) {
.nova-enabled .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .meta .excerpt {
@@ -8637,10 +8637,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .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);
@@ -8719,10 +8719,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-medium .img-wrapper {
width: 100%;
@@ -8797,7 +8797,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 2;
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
@media (724px <= width < 1122px), (min-width: 1390px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link {
@@ -8826,7 +8826,7 @@ button.arrow-button:dir(rtl) {
}
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
@media (min-width: 724px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui {
@@ -8858,7 +8858,7 @@ button.arrow-button:dir(rtl) {
.nova-enabled .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .meta .excerpt {
@@ -8956,10 +8956,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui {
padding: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-small.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .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);
@@ -9038,10 +9038,10 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-medium.ds-card.sections-card-ui {
height: unset;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-medium.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-medium .img-wrapper {
width: 100%;
@@ -9116,7 +9116,7 @@ button.arrow-button:dir(rtl) {
grid-column: span 2;
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui {
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
}
@media (724px <= width < 1122px), (min-width: 1390px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link {
@@ -9145,7 +9145,7 @@ button.arrow-button:dir(rtl) {
}
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui:hover {
box-shadow: var(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
@media (min-width: 724px) {
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui {
@@ -9177,7 +9177,7 @@ button.arrow-button:dir(rtl) {
.nova-enabled .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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: 0 var(--space-small);
}
.nova-enabled .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .meta .excerpt {
@@ -9246,7 +9246,7 @@ button.arrow-button:dir(rtl) {
}
.ds-highlights .section .section-list .card-outer .card-title {
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: 20px;
max-height: 20px;
}
@@ -9287,8 +9287,8 @@ button.arrow-button:dir(rtl) {
}
.nova-enabled .ds-highlights .ds-highlights-title {
grid-column: 1/-1;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-size: var(--font-size-heading-large, var(--font-size-xlarge));
font-weight: var(--font-weight-heading);
font-size: var(--font-size-heading-large);
color: var(--newtab-contextual-text-primary-color);
margin-block: var(--space-small) 0;
}
@@ -9300,7 +9300,7 @@ button.arrow-button:dir(rtl) {
}
@container content-grid (inline-size >= calc(12 * 75px + 11 * 0.75rem)) {
.nova-enabled .ds-highlights .ds-highlights-title {
font-size: var(--font-size-heading-xlarge, var(--font-size-xxlarge));
font-size: var(--font-size-heading-xlarge);
}
}
.nova-enabled .ds-highlights .section {
@@ -9406,7 +9406,7 @@ button.arrow-button:dir(rtl) {
}
.ds-navigation.ds-navigation-new-topics .ds-navigation-header {
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
display: inline-block;
margin-block-end: var(--space-small);
}
@@ -9855,7 +9855,7 @@ button.arrow-button:dir(rtl) {
-webkit-line-clamp: 3;
line-height: normal;
margin-block: 0;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.ds-card .meta .excerpt {
font-size: var(--font-size-small);
@@ -9949,7 +9949,7 @@ button.arrow-button:dir(rtl) {
.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, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
text-align: end;
padding: var(--space-xsmall) var(--space-large);
color: var(--newtab-text-primary-color);
@@ -9992,7 +9992,7 @@ button.arrow-button:dir(rtl) {
}
@media (forced-colors: active) {
.ds-card-grid .sections-card-ui:not(.placeholder) {
border: var(--border-width) solid var(--card-border-color, var(--border-color-card));
border: var(--border-width) solid var(--card-border-color);
}
.ds-card-grid .sections-card-ui:not(.placeholder):hover {
--newtab-background-color-secondary: SelectedItemText;
@@ -10015,7 +10015,7 @@ button.arrow-button:dir(rtl) {
-webkit-line-clamp: 3;
font-size: var(--font-size-root);
margin-block-end: var(--space-small);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
}
.ds-card-grid .sections-card-ui .meta .excerpt {
-webkit-line-clamp: 3;
@@ -10425,7 +10425,7 @@ button.arrow-button:dir(rtl) {
}
.section-empty-state h2 {
font-size: inherit;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin: 0;
}
.section-empty-state p {
@@ -10711,7 +10711,7 @@ button.arrow-button:dir(rtl) {
padding: 0;
}
.download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: var(--space-small);
}
.download-firefox-feature-highlight .feature-highlight .feature-highlight-modal .subtitle {
@@ -10780,7 +10780,7 @@ button.arrow-button:dir(rtl) {
font-size: var(--font-size-small);
}
.follow-section-button-highlight .follow-section-button-highlight-copy .title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-xsmall);
}
@@ -10817,7 +10817,7 @@ button.arrow-button:dir(rtl) {
inset-block-end: calc(var(--space-xlarge) - var(--space-xxsmall));
}
.wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block: var(--space-medium);
}
.wallpaper-feature-highlight .feature-highlight .feature-highlight-modal .subtitle {
@@ -10974,7 +10974,7 @@ button.arrow-button:dir(rtl) {
font-size: var(--font-size-small);
}
.shortcut-feature-highlight .shortcut-feature-highlight-copy .title {
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-xsmall);
text-align: inherit;
}
@@ -11018,7 +11018,7 @@ button.arrow-button:dir(rtl) {
.topic-selection-container .title {
text-align: center;
font-size: var(--font-size-xlarge);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
margin-block-end: var(--space-small);
}
.topic-selection-container .subtitle {
@@ -11155,14 +11155,14 @@ button.arrow-button:dir(rtl) {
background: var(--newtab-background-card);
transition: opacity 0.2s ease;
position: relative;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
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(--card-box-shadow-hover, var(--box-shadow-card-hover));
box-shadow: var(--card-box-shadow-hover);
}
.ad-banner-wrapper .ad-banner-inner .ad-banner-link {
text-decoration: none;
@@ -11297,7 +11297,7 @@ button.arrow-button:dir(rtl) {
background: var(--newtab-background-card);
transition: opacity 0.2s ease;
display: none;
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
border-radius: var(--border-radius-large);
height: 298px;
width: 228px;
@@ -11341,7 +11341,7 @@ button.arrow-button:dir(rtl) {
display: block;
font-size: var(--font-size-root, 15px);
font-style: normal;
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
line-height: normal;
overflow: hidden;
text-overflow: ellipsis;
@@ -11431,7 +11431,7 @@ button.arrow-button:dir(rtl) {
background: var(--newtab-background-card);
transition: opacity 0.2s ease;
border-radius: var(--border-radius-medium);
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
box-shadow: var(--card-box-shadow);
padding: var(--space-large);
display: flex;
flex-direction: column;
@@ -11473,7 +11473,7 @@ button.arrow-button:dir(rtl) {
.briefing-card-title {
font-size: var(--font-size-root);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--text-color);
margin: 0;
margin-block-start: var(--space-xxsmall);
@@ -11532,7 +11532,7 @@ hr {
.briefing-card-headline-title {
font-size: var(--font-size-small);
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-weight: var(--font-weight-heading);
color: var(--text-color);
-webkit-line-clamp: 2;
overflow: hidden;
@@ -11703,7 +11703,7 @@ hr {
.personalized-card-wrapper {
background-color: var(--newtab-background-card);
border: 2px solid var(--card-border-color, var(--border-color-card));
border: 2px solid var(--card-border-color);
color: var(--text-color);
border-radius: var(--border-radius-large);
padding-block-start: var(--space-xxlarge);
@@ -11734,8 +11734,8 @@ hr {
margin: 0;
}
.personalized-card-wrapper .personalized-card-message-wrapper h2 {
font-size: var(--font-size-heading-large, var(--font-size-xlarge));
font-weight: var(--font-weight-heading, var(--heading-font-weight));
font-size: var(--font-size-heading-large);
font-weight: var(--font-weight-heading);
}
.personalized-card-wrapper .personalized-card-cta-wrapper {
display: flex;