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

Bug 1970206 - Newtab update sections images sizes. r=maxx a=dmeehan DONTBUILD

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D253238
This commit is contained in:
scottdowne
2025-06-11 20:07:25 +00:00
committed by dmeehan@mozilla.com
parent 73e27a9fae
commit 4fd153bf54
5 changed files with 93 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
View File

@@ -16,7 +16,7 @@
.ds-card.refined-cards:not(.placeholder) { .ds-card.refined-cards:not(.placeholder) {
.img-wrapper .img { .img-wrapper .img {
height: 172px; height: 162px;
width: 100%; width: 100%;
} }
} }

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

@@ -15,19 +15,13 @@
&.refined-cards { &.refined-cards {
.ds-card-link { .ds-card-link {
padding: var(--space-xsmall) var(--space-small); padding: var(--space-medium);
flex-grow: 0; flex-grow: 0;
} }
.img-wrapper {
width: 110px;
height: 117px;
}
.meta { .meta {
padding-inline: 0; padding: 0;
padding-block: 0 var(--space-xsmall); min-height: 110px;
min-height: 125px;
.info-wrap { .info-wrap {
flex-grow: 1 flex-grow: 1
@@ -53,8 +47,7 @@
.card-stp-button-position-wrapper { .card-stp-button-position-wrapper {
// context menu should match the padding for the parent // context menu should match the padding for the parent
inset-inline-end: var(--space-large); inset-inline-end: var(--space-large);
inset-block-end: var(--space-small); inset-block-end: var(--space-medium);
} }
.context-menu-position-container .context-menu-button { .context-menu-position-container .context-menu-button {
@@ -103,10 +96,10 @@
} }
.img-wrapper { .img-wrapper {
width: 100px; width: 110px;
height: 110px;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
aspect-ratio: 5/6;
.ds-image.img { .ds-image.img {
width: 100%; width: 100%;
@@ -185,7 +178,7 @@
.img-wrapper { .img-wrapper {
width: 100%; width: 100%;
height: 172px; height: 162px;
} }
.meta { .meta {
@@ -268,6 +261,10 @@
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
aspect-ratio: initial; aspect-ratio: initial;
.img {
aspect-ratio: 2/1;
}
} }
&:not(.placeholder) { &:not(.placeholder) {
@@ -312,7 +309,7 @@
(min-width: $break-point-sections-variant) { (min-width: $break-point-sections-variant) {
.ds-card-link { .ds-card-link {
gap: var(--space-small); gap: var(--space-small);
padding: var(--space-small); padding: var(--space-large);
} }
.meta { .meta {
@@ -334,7 +331,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-small); inset-block-end: var(--space-large);
} }
&:hover, &:hover,
@@ -356,16 +353,18 @@
@media ($break-point-layout-variant <=width < $break-point-widest), @media ($break-point-layout-variant <=width < $break-point-widest),
(min-width: $break-point-sections-variant) { (min-width: $break-point-sections-variant) {
align-content: flex-start; align-content: flex-start;
justify-content: center;
.ds-card-link { .ds-card-link {
flex-direction: row; flex-direction: row;
gap: var(--space-xlarge); gap: var(--space-xlarge);
padding: var(--space-xxlarge); padding: var(--space-xxlarge);
flex-grow: 0;
} }
.img-wrapper { .img-wrapper {
width: 265px; width: 190px;
height: 100%; height: 250px;
} }
.ds-image.img { .ds-image.img {

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

@@ -305,16 +305,16 @@ export class _DSCard extends React.PureComponent {
this.sectionsCardImagesSizes = { this.sectionsCardImagesSizes = {
small: { small: {
width: 100, width: 110,
height: 120, height: 110,
}, },
medium: { medium: {
width: 300, width: 300,
height: refinedCardsLayout ? 172 : 150, height: refinedCardsLayout ? 162 : 150,
}, },
large: { large: {
width: 265, width: 190,
height: 265, height: 250,
}, },
}; };

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

@@ -4639,7 +4639,7 @@ main section {
} }
.ds-card.refined-cards:not(.placeholder) .img-wrapper .img { .ds-card.refined-cards:not(.placeholder) .img-wrapper .img {
height: 172px; height: 162px;
width: 100%; width: 100%;
} }
@@ -5208,17 +5208,12 @@ main section {
box-shadow: var(--box-shadow-card-hover); box-shadow: var(--box-shadow-card-hover);
} }
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .ds-card-link { .ds-section-grid.ds-card-grid .col-1-small.refined-cards .ds-card-link {
padding: var(--space-xsmall) var(--space-small); padding: var(--space-medium);
flex-grow: 0; flex-grow: 0;
} }
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .img-wrapper {
width: 110px;
height: 117px;
}
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta { .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta {
padding-inline: 0; padding: 0;
padding-block: 0 var(--space-xsmall); min-height: 110px;
min-height: 125px;
} }
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .info-wrap { .ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .info-wrap {
flex-grow: 1; flex-grow: 1;
@@ -5238,7 +5233,7 @@ main section {
} }
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .card-stp-button-position-wrapper { .ds-section-grid.ds-card-grid .col-1-small.refined-cards .card-stp-button-position-wrapper {
inset-inline-end: var(--space-large); inset-inline-end: var(--space-large);
inset-block-end: var(--space-small); inset-block-end: var(--space-medium);
} }
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .context-menu-position-container .context-menu-button { .ds-section-grid.ds-card-grid .col-1-small.refined-cards .context-menu-position-container .context-menu-button {
height: 32px; height: 32px;
@@ -5268,10 +5263,10 @@ main section {
padding: var(--space-large); padding: var(--space-large);
} }
.ds-section-grid.ds-card-grid .col-1-small .img-wrapper { .ds-section-grid.ds-card-grid .col-1-small .img-wrapper {
width: 100px; width: 110px;
height: 110px;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
aspect-ratio: 5/6;
} }
.ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img { .ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img {
width: 100%; width: 100%;
@@ -5332,7 +5327,7 @@ main section {
} }
.ds-section-grid.ds-card-grid .col-1-medium.refined-cards .img-wrapper { .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .img-wrapper {
width: 100%; width: 100%;
height: 172px; height: 162px;
} }
.ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta { .ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta {
padding: var(--space-small) var(--space-large); padding: var(--space-small) var(--space-large);
@@ -5389,6 +5384,9 @@ main section {
flex-shrink: 0; flex-shrink: 0;
aspect-ratio: initial; aspect-ratio: initial;
} }
.ds-section-grid.ds-card-grid .col-1-medium .img-wrapper .img {
aspect-ratio: 2/1;
}
.ds-section-grid.ds-card-grid .col-1-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { .ds-section-grid.ds-card-grid .col-1-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
} }
@@ -5421,7 +5419,7 @@ main section {
@media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) { @media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .ds-card-link { .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
gap: var(--space-small); gap: var(--space-small);
padding: var(--space-small); padding: var(--space-large);
} }
.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) 0; padding: var(--space-large) var(--space-small) 0;
@@ -5438,7 +5436,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-small); inset-block-end: var(--space-large);
} }
.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;
@@ -5452,15 +5450,17 @@ main section {
@media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) { @media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui { .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui {
align-content: flex-start; align-content: flex-start;
justify-content: center;
} }
.ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-card-link { .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-card-link {
flex-direction: row; flex-direction: row;
gap: var(--space-xlarge); gap: var(--space-xlarge);
padding: var(--space-xxlarge); padding: var(--space-xxlarge);
flex-grow: 0;
} }
.ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .img-wrapper { .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .img-wrapper {
width: 265px; width: 190px;
height: 100%; height: 250px;
} }
.ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img { .ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img {
aspect-ratio: 1/1; aspect-ratio: 1/1;
@@ -5539,17 +5539,12 @@ main section {
box-shadow: var(--box-shadow-card-hover); box-shadow: var(--box-shadow-card-hover);
} }
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .ds-card-link { .ds-section-grid.ds-card-grid .col-2-small.refined-cards .ds-card-link {
padding: var(--space-xsmall) var(--space-small); padding: var(--space-medium);
flex-grow: 0; flex-grow: 0;
} }
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .img-wrapper {
width: 110px;
height: 117px;
}
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta { .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta {
padding-inline: 0; padding: 0;
padding-block: 0 var(--space-xsmall); min-height: 110px;
min-height: 125px;
} }
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .info-wrap { .ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .info-wrap {
flex-grow: 1; flex-grow: 1;
@@ -5569,7 +5564,7 @@ main section {
} }
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .card-stp-button-position-wrapper { .ds-section-grid.ds-card-grid .col-2-small.refined-cards .card-stp-button-position-wrapper {
inset-inline-end: var(--space-large); inset-inline-end: var(--space-large);
inset-block-end: var(--space-small); inset-block-end: var(--space-medium);
} }
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .context-menu-position-container .context-menu-button { .ds-section-grid.ds-card-grid .col-2-small.refined-cards .context-menu-position-container .context-menu-button {
height: 32px; height: 32px;
@@ -5599,10 +5594,10 @@ main section {
padding: var(--space-large); padding: var(--space-large);
} }
.ds-section-grid.ds-card-grid .col-2-small .img-wrapper { .ds-section-grid.ds-card-grid .col-2-small .img-wrapper {
width: 100px; width: 110px;
height: 110px;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
aspect-ratio: 5/6;
} }
.ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img { .ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img {
width: 100%; width: 100%;
@@ -5663,7 +5658,7 @@ main section {
} }
.ds-section-grid.ds-card-grid .col-2-medium.refined-cards .img-wrapper { .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .img-wrapper {
width: 100%; width: 100%;
height: 172px; height: 162px;
} }
.ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta { .ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta {
padding: var(--space-small) var(--space-large); padding: var(--space-small) var(--space-large);
@@ -5720,6 +5715,9 @@ main section {
flex-shrink: 0; flex-shrink: 0;
aspect-ratio: initial; aspect-ratio: initial;
} }
.ds-section-grid.ds-card-grid .col-2-medium .img-wrapper .img {
aspect-ratio: 2/1;
}
.ds-section-grid.ds-card-grid .col-2-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { .ds-section-grid.ds-card-grid .col-2-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
} }
@@ -5752,7 +5750,7 @@ main section {
@media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) { @media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .ds-card-link { .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
gap: var(--space-small); gap: var(--space-small);
padding: var(--space-small); padding: var(--space-large);
} }
.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) 0; padding: var(--space-large) var(--space-small) 0;
@@ -5769,7 +5767,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-small); inset-block-end: var(--space-large);
} }
.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;
@@ -5783,15 +5781,17 @@ main section {
@media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) { @media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui { .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui {
align-content: flex-start; align-content: flex-start;
justify-content: center;
} }
.ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link { .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link {
flex-direction: row; flex-direction: row;
gap: var(--space-xlarge); gap: var(--space-xlarge);
padding: var(--space-xxlarge); padding: var(--space-xxlarge);
flex-grow: 0;
} }
.ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .img-wrapper { .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .img-wrapper {
width: 265px; width: 190px;
height: 100%; height: 250px;
} }
.ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img { .ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img {
aspect-ratio: 1/1; aspect-ratio: 1/1;
@@ -5871,17 +5871,12 @@ main section {
box-shadow: var(--box-shadow-card-hover); box-shadow: var(--box-shadow-card-hover);
} }
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .ds-card-link { .ds-section-grid.ds-card-grid .col-3-small.refined-cards .ds-card-link {
padding: var(--space-xsmall) var(--space-small); padding: var(--space-medium);
flex-grow: 0; flex-grow: 0;
} }
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .img-wrapper {
width: 110px;
height: 117px;
}
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta { .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta {
padding-inline: 0; padding: 0;
padding-block: 0 var(--space-xsmall); min-height: 110px;
min-height: 125px;
} }
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .info-wrap { .ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .info-wrap {
flex-grow: 1; flex-grow: 1;
@@ -5901,7 +5896,7 @@ main section {
} }
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .card-stp-button-position-wrapper { .ds-section-grid.ds-card-grid .col-3-small.refined-cards .card-stp-button-position-wrapper {
inset-inline-end: var(--space-large); inset-inline-end: var(--space-large);
inset-block-end: var(--space-small); inset-block-end: var(--space-medium);
} }
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .context-menu-position-container .context-menu-button { .ds-section-grid.ds-card-grid .col-3-small.refined-cards .context-menu-position-container .context-menu-button {
height: 32px; height: 32px;
@@ -5931,10 +5926,10 @@ main section {
padding: var(--space-large); padding: var(--space-large);
} }
.ds-section-grid.ds-card-grid .col-3-small .img-wrapper { .ds-section-grid.ds-card-grid .col-3-small .img-wrapper {
width: 100px; width: 110px;
height: 110px;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
aspect-ratio: 5/6;
} }
.ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img { .ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img {
width: 100%; width: 100%;
@@ -5995,7 +5990,7 @@ main section {
} }
.ds-section-grid.ds-card-grid .col-3-medium.refined-cards .img-wrapper { .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .img-wrapper {
width: 100%; width: 100%;
height: 172px; height: 162px;
} }
.ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta { .ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta {
padding: var(--space-small) var(--space-large); padding: var(--space-small) var(--space-large);
@@ -6052,6 +6047,9 @@ main section {
flex-shrink: 0; flex-shrink: 0;
aspect-ratio: initial; aspect-ratio: initial;
} }
.ds-section-grid.ds-card-grid .col-3-medium .img-wrapper .img {
aspect-ratio: 2/1;
}
.ds-section-grid.ds-card-grid .col-3-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { .ds-section-grid.ds-card-grid .col-3-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
} }
@@ -6084,7 +6082,7 @@ main section {
@media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) { @media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .ds-card-link { .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
gap: var(--space-small); gap: var(--space-small);
padding: var(--space-small); padding: var(--space-large);
} }
.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) 0; padding: var(--space-large) var(--space-small) 0;
@@ -6101,7 +6099,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-small); inset-block-end: var(--space-large);
} }
.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;
@@ -6115,15 +6113,17 @@ main section {
@media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) { @media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui { .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui {
align-content: flex-start; align-content: flex-start;
justify-content: center;
} }
.ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link { .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link {
flex-direction: row; flex-direction: row;
gap: var(--space-xlarge); gap: var(--space-xlarge);
padding: var(--space-xxlarge); padding: var(--space-xxlarge);
flex-grow: 0;
} }
.ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .img-wrapper { .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .img-wrapper {
width: 265px; width: 190px;
height: 100%; height: 250px;
} }
.ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img { .ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img {
aspect-ratio: 1/1; aspect-ratio: 1/1;
@@ -6202,17 +6202,12 @@ main section {
box-shadow: var(--box-shadow-card-hover); box-shadow: var(--box-shadow-card-hover);
} }
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .ds-card-link { .ds-section-grid.ds-card-grid .col-4-small.refined-cards .ds-card-link {
padding: var(--space-xsmall) var(--space-small); padding: var(--space-medium);
flex-grow: 0; flex-grow: 0;
} }
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .img-wrapper {
width: 110px;
height: 117px;
}
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta { .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta {
padding-inline: 0; padding: 0;
padding-block: 0 var(--space-xsmall); min-height: 110px;
min-height: 125px;
} }
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .info-wrap { .ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .info-wrap {
flex-grow: 1; flex-grow: 1;
@@ -6232,7 +6227,7 @@ main section {
} }
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .card-stp-button-position-wrapper { .ds-section-grid.ds-card-grid .col-4-small.refined-cards .card-stp-button-position-wrapper {
inset-inline-end: var(--space-large); inset-inline-end: var(--space-large);
inset-block-end: var(--space-small); inset-block-end: var(--space-medium);
} }
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .context-menu-position-container .context-menu-button { .ds-section-grid.ds-card-grid .col-4-small.refined-cards .context-menu-position-container .context-menu-button {
height: 32px; height: 32px;
@@ -6262,10 +6257,10 @@ main section {
padding: var(--space-large); padding: var(--space-large);
} }
.ds-section-grid.ds-card-grid .col-4-small .img-wrapper { .ds-section-grid.ds-card-grid .col-4-small .img-wrapper {
width: 100px; width: 110px;
height: 110px;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
aspect-ratio: 5/6;
} }
.ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img { .ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img {
width: 100%; width: 100%;
@@ -6326,7 +6321,7 @@ main section {
} }
.ds-section-grid.ds-card-grid .col-4-medium.refined-cards .img-wrapper { .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .img-wrapper {
width: 100%; width: 100%;
height: 172px; height: 162px;
} }
.ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta { .ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta {
padding: var(--space-small) var(--space-large); padding: var(--space-small) var(--space-large);
@@ -6383,6 +6378,9 @@ main section {
flex-shrink: 0; flex-shrink: 0;
aspect-ratio: initial; aspect-ratio: initial;
} }
.ds-section-grid.ds-card-grid .col-4-medium .img-wrapper .img {
aspect-ratio: 2/1;
}
.ds-section-grid.ds-card-grid .col-4-medium:not(.placeholder) .img-wrapper > .ds-image.img > img { .ds-section-grid.ds-card-grid .col-4-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
} }
@@ -6415,7 +6413,7 @@ main section {
@media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) { @media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .ds-card-link { .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
gap: var(--space-small); gap: var(--space-small);
padding: var(--space-small); padding: var(--space-large);
} }
.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) 0; padding: var(--space-large) var(--space-small) 0;
@@ -6432,7 +6430,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-small); inset-block-end: var(--space-large);
} }
.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;
@@ -6446,15 +6444,17 @@ main section {
@media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) { @media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui { .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui {
align-content: flex-start; align-content: flex-start;
justify-content: center;
} }
.ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link { .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link {
flex-direction: row; flex-direction: row;
gap: var(--space-xlarge); gap: var(--space-xlarge);
padding: var(--space-xxlarge); padding: var(--space-xxlarge);
flex-grow: 0;
} }
.ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .img-wrapper { .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .img-wrapper {
width: 265px; width: 190px;
height: 100%; height: 250px;
} }
.ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img { .ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img {
aspect-ratio: 1/1; aspect-ratio: 1/1;

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

@@ -3705,16 +3705,16 @@ class _DSCard extends (external_React_default()).PureComponent {
}]; }];
this.sectionsCardImagesSizes = { this.sectionsCardImagesSizes = {
small: { small: {
width: 100, width: 110,
height: 120 height: 110
}, },
medium: { medium: {
width: 300, width: 300,
height: refinedCardsLayout ? 172 : 150 height: refinedCardsLayout ? 162 : 150
}, },
large: { large: {
width: 265, width: 190,
height: 265 height: 250
} }
}; };
this.sectionsColumnMediaMatcher = { this.sectionsColumnMediaMatcher = {