Source code
Revision control
Copy as Markdown
Other Tools
.outer-wrapper {
color: var(--newtab-text-primary-color);
display: flex;
flex-grow: 1;
min-height: 100vh;
padding: ($section-spacing + $section-vertical-padding) $base-gutter $base-gutter;
&.ds-outer-wrapper-breakpoint-override {
padding: 30px 0 32px;
@media(min-width: $break-point-medium) {
padding: 30px 32px 32px;
}
}
&.only-search {
display: block;
padding-top: 134px;
}
a {
color: var(--newtab-primary-action-background);
}
}
main {
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
width: $wrapper-default-width;
padding: 0;
&.newtab-main {
min-width: min-content;
}
.vertical-center-wrapper {
margin: auto 0;
}
section {
margin-bottom: $section-spacing;
position: relative;
}
.hide-main & {
visibility: hidden;
}
@media (min-width: $break-point-medium) {
width: $wrapper-max-width-medium;
}
@media (min-width: $break-point-large) {
width: $wrapper-max-width-large;
}
@media (min-width: $break-point-widest) {
width: $wrapper-max-width-widest;
}
}
.ds-outer-wrapper-search-alignment {
main {
// This override is to ensure while Discovery Stream loads,
// the search bar does not jump around. (it sticks to the top)
margin: 0 auto;
}
}
.ds-outer-wrapper-breakpoint-override {
main {
width: 266px;
padding-bottom: 0;
@media (min-width: $break-point-medium) {
width: 510px;
}
@media (min-width: $break-point-large) {
width: 746px;
}
@media (min-width: $break-point-widest) {
width: 986px;
}
}
}
// the card section experiment layout
.layout-variant-a,
.layout-variant-b {
.ds-outer-wrapper-breakpoint-override main {
width: auto;
.ds-card {
width: 296px;
}
.ds-card-grid:not(.ds-section-grid) {
grid-gap: var(--space-large);
&.empty {
grid-template-columns: auto;
}
}
.body-wrapper {
width: 346px;
margin: 0 auto;
}
@media (min-width: $break-point-medium) {
width: auto;
.ds-card-grid:not(.ds-section-grid) {
grid-template-columns: repeat(1, 1fr);
}
.body-wrapper {
width: 346px;
}
}
@media (min-width: $break-point-layout-variant) {
width: auto;
.ds-card-grid:not(.ds-section-grid) {
grid-template-columns: repeat(2, 1fr);
}
.body-wrapper {
width: 659px;
}
}
@media (min-width: $break-point-widest) {
width: auto;
.ds-card-grid:not(.ds-section-grid) {
grid-template-columns: repeat(3, 1fr);
grid-gap: var(--space-xlarge);
}
.body-wrapper {
width: 989px;
}
}
@media (min-width: $break-point-ultra-wide) {
width: auto;
.body-wrapper {
display: flex;
flex-direction: column;
width: 1311px;
}
.ds-highlights .card-outer {
min-width: 216px;
}
.ds-card-grid:not(.ds-section-grid) {
grid-template-columns: repeat(4, 1fr);
}
}
}
}
.base-content-fallback {
// Make the error message be centered against the viewport
height: 100vh;
}
.body-wrapper {
// Hide certain elements so the page structure is fixed, e.g., placeholders,
// while avoiding flashes of changing content, e.g., icons and text
$selectors-to-hide: '.section-title, .sections-list .section:last-of-type, .topics';
#{$selectors-to-hide} {
opacity: 0;
}
&.on {
#{$selectors-to-hide} {
opacity: 1;
}
}
}
.non-collapsible-section {
padding: 0 $section-horizontal-padding;
.layout-variant-a &,
.layout-variant-b & {
padding: 0;
}
}
.prefs-button {
button {
background-color: transparent;
border: 0;
border-radius: 2px;
cursor: pointer;
inset-inline-end: 15px;
padding: 15px;
position: fixed;
top: 15px;
z-index: 1000;
&:hover,
&:focus {
background-color: var(--newtab-element-hover-color);
}
&:active {
background-color: var(--newtab-element-active-color);
}
}
}
.wallpaper-attribution {
padding: 0 $section-horizontal-padding;
font-size: 14px;
color: var(--newtab-contextual-text-primary-color);
// on vertical center of HNT page. If so, display the
// attribution at the bottom corner of the screen
.no-search .no-sections &,
.only-search &,
.only-topsites & {
@media (min-width: $break-point-large) {
position: absolute;
inset-block-end: var(--space-large);
inset-inline-start: 0;
}
}
// Contrast fix for users who have wallpapers set
@include wallpaper-contrast-fix;
&.theme-light {
display: inline-block;
@include dark-theme-only {
display: none;
}
}
&.theme-dark {
display: none;
@include dark-theme-only {
display: inline-block;
}
}
a {
color: inherit;
&:hover {
text-decoration: none;
}
}
}