Source code
Revision control
Copy as Markdown
Other Tools
// @nova-cleanup(merge-styles): Merge nova/_TopSites.scss back to TopSites/_TopSites.scss after ship
.nova-enabled .top-sites {
display: contents;
}
.nova-enabled .top-sites-list-wrapper,
.nova-enabled .edit-topsites-wrapper {
grid-column: 1 / -1;
}
.nova-enabled .top-sites-list {
grid-template-columns: repeat(6, auto);
column-gap: var(--space-medium);
row-gap: var(--space-large);
.nova-hide-for-xs,
.nova-hide-for-s {
display: none;
}
@include at-content-cols(8) {
grid-template-columns: repeat(8, auto);
.nova-hide-for-xs {
display: inline-block;
}
}
@include at-content-cols(12) {
grid-template-columns: repeat(var(--top-sites-max-per-row, 8), auto);
.nova-hide-for-s {
display: inline-block;
}
}
}
// @nova-cleanup(remove-conditional): Nova gets rid of outer hover background
.nova-enabled .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus-within, :hover) {
background: none;
}
.nova-enabled .top-site-outer {
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
width: var(--col-width);
margin-block-end: 0;
.top-site-button {
padding: 0;
justify-content: flex-end;
}
.tile {
box-shadow: none; // @nova-cleanup(remove-conditional): Nova gets rid of box shadow at rest
margin-block-start: var(--space-medium);
transition: width 100ms ease-out, height 100ms ease-out, margin-block-start 100ms ease-out;
}
&:is(:hover, :focus-within, .active) {
.tile {
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
width: var(--col-width);
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
height: var(--col-width);
margin-block-start: 0;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
box-shadow: var(--card-box-shadow, var(--box-shadow-card));
}
.icon-pin-small,
.context-menu-button {
opacity: 1;
transition: opacity 100ms ease-out 50ms;
}
}
.top-site-inner > a:focus .tile {
outline: var(--focus-outline);
}
.title {
@include wallpaper-contrast-fix;
}
.context-menu {
inset-block-start: var(--space-xlarge);
}
.context-menu-button {
inset-inline-end: var(--space-xxsmall);
inset-block-start: var(--space-xxsmall);
border-radius: var(--border-radius-circle);
.lightWallpaper &,
.darkWallpaper & {
color-scheme: light dark; // @nova-cleanup(remove-conditional): mixin no longer needed
&:focus-visible::after {
content: none; // @nova-cleanup(remove-conditional): ::after no longer needed
}
}
}
.icon-pin-small {
inset-block-start: calc(var(--space-xsmall) + var(--space-xxsmall));
inset-inline-start: calc(var(--space-xsmall) + var(--space-xxsmall));
.lightWallpaper &,
.darkWallpaper & {
color-scheme: light dark; // @nova-cleanup(remove-conditional): mixin no longer needed
}
}
.title .title-label {
font-weight: var(--font-weight-semibold);
padding: 0;
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
width: var(--col-width);
}
}