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/. */
.lists {
@include newtab-card-style;
border-radius: var(--border-radius-large);
padding-block-start: var(--space-medium);
// @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));
// Classic layout (when Nova is disabled)
// @nova-cleanup(remove-conditional): Remove classic fixed-width/height styles after Nova ships
.classic-enabled & {
grid-column: span 1;
width: var(--newtab-card-grid-layout-width);
height: var(--newtab-card-height);
// Match the new card width if sections are enabled
.has-sections-grid & {
width: var(--newtab-card-width-medium);
}
}
position: relative;
display: flex;
flex-direction: column;
.confetti-canvas {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1; /* adjust as needed to sit above background but below UI */
}
.select-wrapper {
padding-inline: var(--space-medium);
display: flex;
justify-content: flex-start;
position: relative;
align-items: center;
gap: var(--space-medium);
moz-button {
visibility: hidden;
margin-inline-start: auto;
}
}
&:hover,
&:focus-within,
.select-wrapper panel-list[open] {
.select-wrapper moz-button {
visibility: visible;
}
}
.edit-list {
outline: var(--focus-outline);
}
.add-task-container {
margin-block: var(--space-small);
padding-inline: var(--space-medium);
position: relative;
.icon.icon-add {
position: absolute;
inset-block-start: 50%;
transform: translateY(-50%);
// Bug 1967304 - Custom alignment for absolutely positioned element
inset-inline-start: calc(var(--space-medium) + var(--space-small));
&.icon-disabled {
fill: var(--text-color-disabled);
}
}
.add-task-input {
background: var(--button-background-color);
padding-block: var(--space-small);
// Bug 1967304 - Custom alignment for absolutely positioned element
padding-inline-start: calc((var(--space-large) * 2) + var(--space-xsmall));
padding-inline-end: var(--space-large);
outline: none;
border: none;
border-radius: var(--border-radius-small);
width: 100%;
&:focus {
outline: var(--focus-outline);
}
&:focus::placeholder {
color: var(--newtab-text-primary-color);
}
&:disabled {
background-color: var(--button-background-color-ghost);
color: var(--text-color-disabled);
outline: var(--border-width) solid var(--border-color-interactive-disabled);
}
}
}
// Height necessary to vertically center empty state
.task-list-wrapper {
height: 100%;
padding-block-start: var(--space-xsmall);
}
fieldset {
margin: 0;
padding-block: 0;
padding-inline: var(--space-medium);
border: none;
overflow-y: auto;
max-height: 165px;
&:focus {
outline: var(--focus-outline);
}
}
.task-item {
align-items: center;
background: transparent;
border-radius: var(--border-radius-small);
display: flex;
justify-content: space-between;
transition: opacity 300ms ease;
margin-block-end: var(--space-xsmall);
// Spacing between uncompleted task and "Completed" list
&.task-type-tasks {
&:last-of-type {
margin-block-end: var(--space-small);
}
}
@media (prefers-reduced-motion: no-preference) {
&.exiting {
opacity: 0;
}
}
.checkbox-wrapper {
display: flex;
align-items: center;
flex-grow: 2;
padding-block: var(--space-small);
span {
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
white-space: normal;
max-width: 180px;
}
}
input[type='checkbox'] {
height: var(--size-item-small);
width: var(--size-item-small);
accent-color: var(--color-accent-primary);
margin-inline-start: var(--space-small);
padding: 0;
}
.task-label {
position: relative;
padding-inline-start: var(--space-small);
}
input:checked ~ .task-label {
color: var(--text-color-deemphasized);
text-decoration: line-through;
}
moz-button {
margin-inline-end: var(--space-xsmall);
visibility: hidden;
&:has(+ panel-list[open]) {
visibility: visible;
}
}
&:hover,
&:focus-visible,
&:focus-within {
background: var(--button-background-color);
moz-button {
visibility: visible;
}
}
panel-list[open] {
~ moz-button {
visibility: visible;
}
}
.edit-task {
margin-inline-start: var(--space-small);
max-width: 180px;
border: none;
border-radius: 0;
user-select: text;
&:focus {
outline: var(--focus-outline);
}
}
}
.empty-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-small);
height: 100%;
padding-block-end: var(--space-medium);
@include wallpaper-contrast-fix;
.empty-list-text {
margin: 0;
text-align: center;
color: var(--text-color-deemphasized);
font-size: var(--font-size-small);
padding-inline: var(--space-medium);
}
}
.completed-task-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-small);
}
.completed-task-wrapper summary {
list-style: none;
&:focus {
outline: var(--focus-outline);
}
.completed-title {
color: var(--text-color-deemphasized);
position: relative;
&::after {
content: '';
-moz-context-properties: fill;
fill: var(--button-icon-fill);
background-image: url('chrome://global/skin/icons/arrow-right.svg');
height: var(--icon-size-small);
width: var(--icon-size-small);
position: absolute;
inset-inline-end: calc(-1 * var(--space-xlarge));
inset-block-start: 50%;
transform: translateY(-50%);
}
&:dir(rtl)::after {
background-image: url('chrome://global/skin/icons/arrow-left.svg');
}
}
}
.completed-task-wrapper[open] .completed-title::after {
background-image: url('chrome://global/skin/icons/arrow-down.svg');
}
}