Source code
Revision control
Copy as Markdown
Other Tools
$col4-header-line-height: 20;
$col4-header-font-size: 14;
.ds-onboarding-container,
.ds-card-grid .ds-card {
background: var(--newtab-background-color-secondary);
border-radius: 4px;
&:not(.placeholder) {
border-radius: $border-radius-new;
box-shadow: $shadow-card;
.img-wrapper .img {
img,
.placeholder-image {
border-radius: $border-radius-new $border-radius-new 0 0;
}
}
}
}
.ds-onboarding-container {
padding-inline-start: 16px;
padding-inline-end: 16px;
@media (min-width: $break-point-medium) {
padding-inline-end: 48px;
}
@media (min-width: $break-point-large) {
padding-inline-end: 56px;
}
margin-bottom: 24px;
// This is to position the dismiss button to the right most of this element.
position: relative;
.ds-onboarding {
position: static;
display: flex;
.ds-dismiss-button {
inset-inline-end: 8px;
top: 8px;
}
}
header {
@include dark-theme-only {
color: var(--newtab-background-color-primary);
}
display: flex;
margin: 32px 0 8px;
@media (min-width: $break-point-medium) {
margin: 16px 0 8px;
display: block;
height: 24px;
}
font-size: 17px;
line-height: 23.8px;
font-weight: 600;
color: $pocket-icon-fill;
}
p {
margin: 8px 0 16px;
font-size: 13px;
line-height: 19.5px;
}
.icon-pocket {
@include dark-theme-only {
@media (forced-colors: active) {
fill: CurrentColor;
}
fill: var(--newtab-text-primary-color);
}
@media (forced-colors: active) {
fill: CurrentColor;
}
fill: $pocket-icon-fill;
margin-top: 3px;
margin-inline-end: 8px;
height: 22px;
width: 22px;
background-image: url('chrome://global/skin/icons/pocket.svg');
@media (min-width: $break-point-medium) {
margin-top: -5px;
margin-inline-start: -2px;
margin-inline-end: 15px;
height: 30px;
width: 30px;
}
background-size: contain;
}
.ds-onboarding-graphic {
background-image: image-set(url('chrome://newtab/content/data/content/assets/pocket-onboarding.avif'), url('chrome://newtab/content/data/content/assets/pocket-onboarding@2x.avif') 2x);
border-radius: 8px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 120px;
width: 200px;
margin-top: 16px;
margin-bottom: 16px;
margin-inline-start: 54px;
flex-shrink: 0;
display: none;
@media (min-width: $break-point-large) {
display: block;
}
}
}
.ds-card-grid {
display: grid;
grid-gap: 24px;
&.ds-card-grid-compact {
grid-gap: 20px;
}
&.ad-sizing-variant-a,
&.ad-sizing-variant-b {
row-gap: 24px;
column-gap: 18px;
}
&.ds-card-grid-recent-saves {
.ds-card {
// Hide the second row orphan on narrow screens.
@media (min-width: $break-point-medium) and (max-width: $break-point-large) {
&:last-child:nth-child(2n - 1) {
display: none;
}
}
}
}
.ds-card-link:focus {
@include ds-focus;
transition: none;
border-radius: $border-radius-new;
}
// "2/3 width layout"
.ds-column-5 &,
.ds-column-6 &,
.ds-column-7 &,
.ds-column-8 & {
grid-template-columns: repeat(2, 1fr);
}
// "Full width layout"
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
grid-template-columns: repeat(1, 1fr);
@media (min-width: $break-point-medium) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $break-point-large) {
grid-template-columns: repeat(3, 1fr);
}
.title {
font-size: 17px;
line-height: 24px;
}
.excerpt {
@include limit-visible-lines(3, 24, 15);
}
}
&.empty {
grid-template-columns: auto;
}
@mixin small-cards {
.ds-card {
&.placeholder {
min-height: 247px;
}
.meta {
.story-footer {
margin-top: 8px;
}
.source,
.story-sponsored-label,
.status-message .story-context-label {
color: var(--newtab-text-secondary-color);
-webkit-line-clamp: 2;
}
.source,
.story-sponsored-label {
font-size: 13px;
}
.status-message .story-context-label {
font-size: 11.7px;
}
.story-badge-icon {
margin-inline-end: 2px;
margin-bottom: 2px;
height: 14px;
width: 14px;
background-size: 14px;
}
.title {
font-size: 14px;
line-height: 20px;
}
.info-wrap {
flex-grow: 0;
}
}
}
}
&.ds-card-grid-four-card-variant {
// "Full width layout"
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
grid-template-columns: repeat(1, 1fr);
@media (min-width: $break-point-medium) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $break-point-large) {
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: $break-point-widest) {
grid-template-columns: repeat(4, 1fr);
}
}
@include small-cards;
}
&.ds-card-grid-hybrid-layout {
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
grid-template-columns: repeat(1, 1fr);
@media (min-width: $break-point-medium) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $break-point-large) {
grid-template-columns: repeat(3, 1fr);
}
@media (height <= 1065px) {
.excerpt {
display: none;
}
}
@media (max-width: $break-point-widest) {
@include small-cards;
}
@media (min-width: $break-point-widest) and (height <= 964px) {
@include small-cards;
grid-template-columns: repeat(4, 1fr);
}
}
}
}
.outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card,
.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card {
&:not(.placeholder) {
box-shadow: none;
background: none;
.ds-card-link:focus {
box-shadow: none;
.img-wrapper .img img {
@include ds-focus;
}
}
.img-wrapper .img img {
border-radius: 8px;
box-shadow: $shadow-card;
}
.meta {
padding: 12px 0 0;
}
}
}
.ds-layout {
.ds-sub-header {
margin-top: 24px;
.section-title-container {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
display: flex;
}
.section-sub-link {
color: var(--newtab-primary-action-background);
font-size: 14px;
line-height: 16px;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:active {
color: var(--newtab-primary-element-active-color);
}
}
}
}