Bug 1970074- Update footer spacing on large cards and favicon size for all cards. a=dmeehan DONTBUILD

Original Revision: https://phabricator.services.mozilla.com/D252410

Differential Revision: https://phabricator.services.mozilla.com/D252542
This commit is contained in:
Maxx Crawford
2025-06-05 11:50:29 +00:00
committed by dmeehan@mozilla.com
parent d926600e5a
commit 8fc29e67d2
4 changed files with 12 additions and 12 deletions

View File

@@ -312,7 +312,7 @@
}
.meta {
padding: var(--space-large) var(--space-small);
padding: var(--space-large) var(--space-small) 0;
color: var(--newtab-text-primary-color);
.info-wrap .excerpt {
@@ -330,7 +330,7 @@
.card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-xlarge);
inset-block-end: var(--space-small);
}
&:hover,

View File

@@ -43,7 +43,7 @@ export const DSSource = ({
refinedCardsLayout,
}) => {
// refinedCard styles will have a larger favicon size
const faviconSize = refinedCardsLayout ? 24 : 16;
const faviconSize = refinedCardsLayout ? 20 : 16;
// First try to display sponsored label or time to read here.
if (newSponsoredLabel) {

View File

@@ -5421,7 +5421,7 @@ main section {
padding: var(--space-small);
}
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta {
padding: var(--space-large) var(--space-small);
padding: var(--space-large) var(--space-small) 0;
color: var(--newtab-text-primary-color);
}
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt {
@@ -5435,7 +5435,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-xlarge);
inset-block-end: var(--space-small);
}
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
display: block;
@@ -5749,7 +5749,7 @@ main section {
padding: var(--space-small);
}
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta {
padding: var(--space-large) var(--space-small);
padding: var(--space-large) var(--space-small) 0;
color: var(--newtab-text-primary-color);
}
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt {
@@ -5763,7 +5763,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-xlarge);
inset-block-end: var(--space-small);
}
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
display: block;
@@ -6078,7 +6078,7 @@ main section {
padding: var(--space-small);
}
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta {
padding: var(--space-large) var(--space-small);
padding: var(--space-large) var(--space-small) 0;
color: var(--newtab-text-primary-color);
}
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt {
@@ -6092,7 +6092,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-xlarge);
inset-block-end: var(--space-small);
}
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
display: block;
@@ -6406,7 +6406,7 @@ main section {
padding: var(--space-small);
}
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta {
padding: var(--space-large) var(--space-small);
padding: var(--space-large) var(--space-small) 0;
color: var(--newtab-text-primary-color);
}
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta .info-wrap .excerpt {
@@ -6420,7 +6420,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-xlarge);
inset-block-end: var(--space-small);
}
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
display: block;

View File

@@ -3508,7 +3508,7 @@ const DSSource = ({
refinedCardsLayout
}) => {
// refinedCard styles will have a larger favicon size
const faviconSize = refinedCardsLayout ? 24 : 16;
const faviconSize = refinedCardsLayout ? 20 : 16;
// First try to display sponsored label or time to read here.
if (newSponsoredLabel) {