corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss
View File

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

2
browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
View File

@@ -43,7 +43,7 @@ export const DSSource = ({
refinedCardsLayout, refinedCardsLayout,
}) => { }) => {
// refinedCard styles will have a larger favicon size // 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. // First try to display sponsored label or time to read here.
if (newSponsoredLabel) { if (newSponsoredLabel) {

16
browser/extensions/newtab/css/activity-stream.css
View File

@@ -5421,7 +5421,7 @@ main section {
padding: var(--space-small); padding: var(--space-small);
} }
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta { .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); 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 { .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 { .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-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 { .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; display: block;
@@ -5749,7 +5749,7 @@ main section {
padding: var(--space-small); padding: var(--space-small);
} }
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta { .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); 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 { .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 { .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-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 { .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; display: block;
@@ -6078,7 +6078,7 @@ main section {
padding: var(--space-small); padding: var(--space-small);
} }
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta { .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); 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 { .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 { .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-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 { .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; display: block;
@@ -6406,7 +6406,7 @@ main section {
padding: var(--space-small); padding: var(--space-small);
} }
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta { .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); 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 { .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 { .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-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 { .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; display: block;

2
browser/extensions/newtab/data/content/activity-stream.bundle.js
View File

@@ -3508,7 +3508,7 @@ const DSSource = ({
refinedCardsLayout refinedCardsLayout
}) => { }) => {
// refinedCard styles will have a larger favicon size // 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. // First try to display sponsored label or time to read here.
if (newSponsoredLabel) { if (newSponsoredLabel) {