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,
.lists {
grid-column: span 1;
width: var(--newtab-card-width-medium);
background: var(--newtab-background-card);
border-radius: var(--border-radius-large);
padding-block: var(--space-large);
max-height: var(--newtab-card-height);
.select-wrapper {
padding-inline: var(--space-large);
display: flex;
justify-content: space-between;
position: relative;
moz-button {
visibility: hidden;
}
}
&:hover, &:focus-within, .select-wrapper panel-list[open] {
.select-wrapper moz-button {
visibility: visible;
}
}
.add-task-container {
margin-block: var(--space-small);
padding-inline: var(--space-large);
position: relative;
.icon.icon-add {
position: absolute;
inset-block-start: 50%;
transform: translateY(-50%);
inset-inline-start: var(--space-xlarge);
}
.add-task-input {
background: var(--button-background-color);
padding-block: var(--space-small);
padding-inline: var(--space-xxlarge) 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);
}
}
}
fieldset {
padding: 0 var(--space-medium);
margin: 0 var(--space-xsmall);
border: none;
overflow-y: scroll;
max-height: 165px;
}
.task-item {
align-items: center;
background: transparent;
border-radius: var(--border-radius-small);
padding: var(--space-xsmall);
display: flex;
justify-content: space-between;
margin-block-end: var(--space-small);
.checkbox-wrapper {
display: flex;
align-items: center;
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(--space-large);
width: var(--space-large);
accent-color: var(--button-background-color-primary);
}
.task-label {
position: relative;
padding-inline-start: var(--space-small);
}
input:checked ~ .task-label {
color: var(--text-color-deemphasized);
}
input:checked ~ .task-label::after {
content: '';
position: absolute;
inset-inline-start: var(--space-small);
inset-block-start: 50%;
width: 100%;
height: var(--space-xxsmall);
background-color: var(--newtab-text-primary-color);
transform: translateY(-50%);
}
input:checked ~ .task-label.animate-strike::after {
width: 100%;
@media (prefers-reduced-motion: no-preference) {
animation: strike 0.25s ease-out forwards;
width: 0%;
}
}
@keyframes strike {
from {
width: 0%;
}
to {
width: 100%;
}
}
moz-button {
align-self: flex-start;
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;
}
}
}
.empty-list-text {
padding-inline: var(--space-large);
color: var(--text-color-deemphasized);
}
}