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
// @nova-cleanup(merge-styles): Move to components/DiscoveryStreamComponents/CardSections/_CardSections.scss
.nova-enabled .ds-card-grid:not(.ds-section-grid) .ds-card {
&:not(.placeholder) {
box-shadow: var(--card-box-shadow);
}
&:hover,
&:active,
&:focus-within {
box-shadow: var(--card-box-shadow-hover);
}
.meta .excerpt {
display: none;
}
--nova-stp-inset: var(--space-medium);
@include nova-card-stp-controls; // defined in nova/_CardSections.scss
}
.nova-enabled .ds-card-grid:not(.ds-section-grid) .ds-card.ds-spoc {
.img-wrapper {
padding: var(--space-large) var(--space-large) 0;
}
.img img {
border-radius: var(--border-radius-medium);
}
.meta {
padding: var(--space-medium) var(--space-large) var(--space-medium);
.title {
font-size: var(--font-size-small);
}
}
}
.nova-enabled .ds-card-grid:not(.ds-section-grid) .ds-card:not(.ds-spoc, .ds-spoc-rectangle) {
&:not(.placeholder) {
.img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
}
}
.ds-card-link {
gap: var(--space-medium);
padding: var(--space-large) var(--space-large) var(--space-medium);
}
.meta {
padding: 0;
min-height: 72px;
gap: var(--space-small);
.info-wrap .title {
font-size: var(--font-size-small);
margin-block-end: 0;
}
.sections-card-footer {
margin-block-start: auto;
min-height: var(--size-item-medium);
padding-inline-end: var(--space-xxlarge);
}
}
}
.nova-enabled .ds-card.sections-card-ui {
.sections-card-footer .source-wrapper {
gap: calc(var(--space-xsmall) + var(--space-xxsmall));
max-width: none;
img {
width: var(--icon-size);
height: var(--icon-size);
margin-inline-end: 0;
border-radius: var(--border-radius-circle);
}
}
}
.nova-enabled .ds-card-grid,
.nova-enabled .ds-section-grid {
// Intentionally duplicated classname to match specificity of classic MREC rules
.ds-card.ds-spoc-rectangle.ds-spoc-rectangle {
.ds-card-link {
padding-block-start: var(--space-small);
}
.ds-image {
padding-block-start: 0;
height: var(--mrec-height);
width: var(--mrec-width);
margin-inline: auto;
}
.img-wrapper .ds-image img {
border-radius: 0;
}
.meta {
padding-block-start: 0;
.title {
font-size: var(--font-size-small);
margin-block-end: var(--space-xxsmall);
}
.excerpt {
display: none;
}
}
--nova-stp-inset: var(--space-xxsmall);
@include nova-card-stp-controls; // defined in nova/_CardSections.scss
}
}
// The shared selectors above lack the specificity to override the classic
// section-card-medium rule; .ds-section-grid.ds-card-grid matches it.
.nova-enabled .ds-card-grid,
.nova-enabled .ds-section-grid.ds-card-grid {
.ds-card.ds-spoc-rectangle.ds-spoc-rectangle {
.card-stp-button-hover-background .card-stp-button-position-wrapper {
inset-inline-end: var(--space-medium);
}
}
}
.nova-enabled .ds-card.ds-spoc {
.story-footer {
margin-block: 0;
height: unset;
.source-wrapper {
gap: var(--space-small);
margin-block-end: var(--space-xsmall);
}
.ds-spoc-separator {
width: 3px;
height: 3px;
border-radius: var(--border-radius-circle);
background-color: currentColor;
color: var(--text-color-deemphasized);
}
.ds-spoc-sponsored {
font-size: var(--font-size-small);
}
}
}