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
@import url("chrome://global/skin/in-content/common.css");
:root {
/* override --in-content-page-background from common-shared.css */
background-color: transparent;
--fxview-background-color: var(--newtab-background-color, var(--in-content-page-background));
--fxview-background-color-secondary: var(--newtab-background-color-secondary, #FFFFFF);
--fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 90%, currentColor);
--fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor);
--fxview-text-primary-color: var(--newtab-text-primary-color, var(--in-content-page-color));
--fxview-text-secondary-color: color-mix(in srgb, currentColor 70%, transparent);
--fxview-text-color-hover: var(--newtab-text-primary-color);
--fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0);
--fxview-border: var(--fc-border-light, #CFCFD8);
--fxview-indicator-stroke-color-hover: #DEDDDE;
/* ensure utility button hover states match those of the rest of the page */
--in-content-button-background-hover: var(--fxview-element-background-hover);
--in-content-button-background-active: var(--fxview-element-background-active);
--in-content-button-text-color-hover: var(--fxview-text-color-hover);
--fxview-sidebar-width: 288px;
--fxview-margin-top: 72px;
--fxview-card-padding-inline: 4px;
/* copy over newtab background color from activity-stream-[os].css files */
--newtab-background-color: #F9F9FB;
--fxview-card-header-font-weight: 500;
}
@media (prefers-color-scheme: dark) {
:root {
--fxview-element-background-hover: color-mix(in srgb, var(--fxview-background-color) 80%, white);
--fxview-element-background-active: color-mix(in srgb, var(--fxview-background-color) 60%, white);
--fxview-border: #8F8F9D;
--fxview-indicator-stroke-color-hover:#5D5C66;
/* copy over newtab colors from activity-stream-[os].css files */
--newtab-background-color: #2B2A33;
--newtab-background-color-secondary: #42414d;
--newtab-primary-action-background: #00ddff;
}
}
@media (forced-colors) {
:root {
--fxview-element-background-hover: ButtonText;
--fxview-element-background-active: ButtonText;
--fxview-text-color-hover: ButtonFace;
--fxview-border: var(--fc-border-hcm, -moz-dialogtext);
--newtab-primary-action-background: LinkText;
--newtab-background-color: Canvas;
--newtab-background-color-secondary: Canvas;
}
}
@media (prefers-contrast) {
:root {
--fxview-border: var(--border-color);
}
}
@media (max-width: 52rem) {
:root {
--fxview-sidebar-width: 82px;
}
}
body {
display: grid;
gap: 12px;
grid-template-columns: var(--fxview-sidebar-width) 1fr;
background-color: var(--fxview-background-color);
color: var(--fxview-text-primary-color);
@media (max-width: 52rem) {
display: flex;
}
}
.main-container {
width: 90%;
margin: 0 auto;
min-width: 43rem;
max-width: 71rem;
}
@media (min-width: 120rem) {
.main-container {
margin-inline-start: 148px;
}
}
.page-header {
margin: 0;
}
.sticky-container {
position: sticky;
top: 0;
padding-block: var(--fxview-margin-top) 33px;
z-index: 1;
display: flex;
flex-direction: column;
gap: 35px;
}
.sticky-container.bottom-fade {
/*
* padding-inline is doubled to allow for the negative margin below to offset the
* container so that the box-shadows on the cards are hidden as they pass underneath.
*/
padding-inline: calc(var(--fxview-card-padding-inline) * 2);
margin: 0 calc(var(--fxview-card-padding-inline) * -1);
background:
linear-gradient(
to bottom,
var(--fxview-background-color) 0%,
var(--fxview-background-color) 95%,
transparent 100%
);
/* When you use HCM or set custom colors, you can't use a gradient. */
@media (forced-colors) {
background: var(--fxview-background-color);
}
}
.cards-container {
padding-inline: var(--fxview-card-padding-inline);
}
view-opentabs-contextmenu {
display: contents;
}
/* This should be supported within panel-{item,list} rather than modifying it */
panel-item::part(button) {
padding-inline-start: 12px;
cursor: pointer;
}
panel-item::part(button):hover {
background-color: var(--fxview-element-background-hover);
color: var(--fxview-text-color-hover);
}
panel-item::part(button):hover:active {
background-color: var(--fxview-element-background-active);
}
fxview-empty-state {
&:not([isSelectedTab]) button[slot="primary-action"] {
margin-inline-start: 0;
}
/* these illustrations need a larger width otherwise they look too small */
&.synced-tabs::part(image-container) {
min-width: 250px;
}
/* center align the empty state image */
&.recentlyclosed::part(image-container) {
margin-inline-start: 50px;
}
/* align empty state text with synced tabs on recent browsing page */
&.recentlyclosed::part(main) {
padding-inline-start: 50px;
}
}