Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
.discovery-stream.ds-layout.ds-layout-widgets {
margin-inline: 0;
}
.widgets-wrapper {
margin-inline: auto;
padding-block-end: var(--space-large);
// Classic layout
// @nova-cleanup(remove-conditional): Remove classic max-width after Nova ships
.classic-enabled & {
max-width: max-content;
}
// Nova layout
// @nova-cleanup(remove-conditional): Make Nova grid default, remove .nova-enabled selector
.nova-enabled & {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
}
.widgets-section-container {
// Classic layout
// @nova-cleanup(remove-conditional): Remove classic padding/background styles after Nova ships
.classic-enabled & {
padding-block: var(--space-xsmall) var(--space-large);
padding-inline: var(--space-large);
background-color: var(--button-background-color);
border-radius: var(--border-radius-large);
// Bug 1908010 - This overwrites the design system color because of a
// known transparency issue with color-mix syntax when a wallpaper is set
.lightWallpaper &,
.darkWallpaper & {
background-color: var(--newtab-weather-background-color); // stylelint-disable-line stylelint-plugin-mozilla/use-design-tokens
@media (prefers-contrast) {
background-color: var(--background-color-box);
}
}
}
// Nova layout
// @nova-cleanup(remove-conditional): Make Nova grid default, remove .nova-enabled selector
.nova-enabled & {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
}
.widgets-title-container {
// @nova-cleanup(remove-conditional): Make grid-column default, remove .nova-enabled selector
.nova-enabled & {
grid-column: 1 / -1;
}
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space-medium);
// Helper class around the <h1> element to position the FeatureHighlight message
.widgets-title-container-text {
display: inline-block;
margin-inline-end: auto;
position: relative;
}
}
h1 {
font-size: var(--font-size-large);
font-weight: var(--font-weight-bold);
}
}
// Classic layout padding (when Nova is disabled)
// @nova-cleanup(remove-conditional): Remove classic layout styles after Nova ships
.classic-enabled .widgets-section-container {
// Mirrors the grid-gap spacing used on
// .ds-outer-wrapper-breakpoint-override .ds-card-grid
@media(min-width: $break-point-widest) {
padding-block-end: var(--space-xlarge);
padding-inline: var(--space-xlarge);
}
// Sections Layout Override
.has-sections-grid & {
@media(min-width: $break-point-widest) {
padding-block-end: var(--space-large);
padding-inline: var(--space-large);
}
}
}
// Bug 1996308: This layout is somewhat brittle as the design dictates the parent container (.widgets-wrapper)
// be only as wide as the width of this container (.widgets-container) while still being responsive.
// Once we have four widgets, we can revert most of this logic as the container will be 100%.
.widgets-container {
// Nova layout
// @nova-cleanup(remove-conditional): Make Nova grid default, remove .nova-enabled selector
.nova-enabled & {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
gap: var(--space-medium);
}
// Classic layout (when Nova is disabled)
// @nova-cleanup(remove-conditional): Remove classic fixed-width card layout after Nova ships
.classic-enabled & {
--widgets-card-width: var(--newtab-card-grid-layout-width);
// This is the maximum number of widgets the Widgets row can support
--widgets-max-cols: 3;
--widgets-grid-gap: var(--space-large);
--widgets-small-card-height: var(--newtab-card-height-small);
&:has(.lists),
&:has(.focus-timer) {
display: grid;
grid-template-columns: repeat(auto-fit, var(--widgets-card-width));
gap: var(--widgets-grid-gap);
// The max-width logic is only necessary when displaying more than one column
@media(min-width: $break-point-medium) {
max-width: calc(var(--widgets-max-cols) * var(--widgets-card-width) + (var(--widgets-max-cols) - 1) * var(--widgets-grid-gap));
justify-content: center;
}
// Mirrors the grid-gap spacing used on
// .ds-outer-wrapper-breakpoint-override .ds-card-grid
@media(min-width: $break-point-widest) {
--widgets-grid-gap: var(--space-xlarge);
}
}
.small-widget {
height: var(--widgets-small-card-height);
}
}
}
// Classic layout: Sections grid overrides
// @nova-cleanup(remove-conditional): Remove after Nova ships
.classic-enabled .has-sections-grid .widgets-container {
--widgets-card-width: var(--newtab-card-width-medium);
&:has(.lists),
&:has(.focus-timer) {
@media(min-width: $break-point-widest) {
--widgets-grid-gap: var(--space-large);
}
}
}
.widgets-feedback-link {
display: inline-block;
margin-block-start: var(--space-medium);
font-size: var(--font-size-small);
}
.feature-highlight .feature-highlight-modal.widget-highlight-wrapper {
width: auto;
max-width: min-content;
border-radius: var(--border-radius-medium);
// Custom Positioning
&.inset-block-end {
margin-block-start: var(--space-large);
}
.content-wrapper {
margin: 0;
padding: var(--space-medium);
}
.widget-highlight {
img {
border-radius: var(--border-radius-medium);
margin-block-end: var(--space-small);
}
h3 {
margin-block: 0 var(--space-xsmall);
font-size: var(--font-size-root);
}
p {
margin-block: 0;
font-size: var(--font-size-root);
}
}
.message-icon {
display: none;
}
// The "X" dismiss button overlays the image in the message
moz-button {
position: absolute;
inset-inline-end: var(--space-medium);
inset-block-start: var(--space-medium);
// Custom contrast override
--button-icon-fill: var(--color-gray-05);
}
// If not image is not included, use the default icon color to maintain proper viz contrast
&.no-image {
min-width: 370px;
padding-block-start: var(--space-small);
moz-button {
--button-icon-fill: var(--icon-color);
}
}
}