mirror of
https://github.com/aculix/negotium.git
synced 2026-09-11 07:28:17 +00:00
Aculix Technologies
6071dccec4
Rows stopped being vertically centred. Aligning them to flex-start so the controls stay on the first line of a wrapped task also let the 32px row buttons set the row height, which left the 24px checkbox and text sitting 4px above centre on every single-line row. Everything on the first line now occupies the same 32px band, so a single-line row centres and a wrapped one still puts its controls on the first line. A padding shorthand later in the same rule was quietly resetting the longhand that does it. The phone layout was spending 372px of an 812px screen, 46% of it, before the first task appeared. The header stacked into two rows because the wordmark and the controls could not share one: they need 422px and there are 343. The wordmark goes below 480px, since the logo carries the identity and an installed app already has its name under the icon, and it stays in the accessibility tree so the page keeps its h1. The heading and date share a line again rather than stacking unconditionally. That is 372 down to 261, 46% down to 32%. That left the rows themselves too tight, because both actions stay visible where there is no hover and were taking 44% of the row width, cutting the text to 21 characters a line. Tighter gaps and padding, and a smaller drawn button whose 44px target comes from the overlay underneath rather than its own box, bring that back to 24.
930 lines
19 KiB
CSS
930 lines
19 KiB
CSS
:root {
|
|
--bg-primary: #F8FAFB;
|
|
--bg-surface: #FFFFFF;
|
|
--text-primary: #1A1A1A;
|
|
--text-secondary: #666666;
|
|
--accent: #607afb;
|
|
/* Darker sibling of --accent for text. The brand blue reads 3.54:1 on the
|
|
light background, under the 4.5:1 needed for body-sized text. */
|
|
--accent-text: #4C5FD5;
|
|
--border: #E0E0E0;
|
|
--hover: #F5F5F5;
|
|
--completed-bg: #EEF1FF;
|
|
--completed-text: #4C5FD5;
|
|
--transition-speed: 300ms;
|
|
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
html.dark {
|
|
--bg-primary: #121212;
|
|
--bg-surface: #1E1E1E;
|
|
--text-primary: #E0E0E0;
|
|
--text-secondary: #999999;
|
|
--accent: #7B93FF;
|
|
--accent-text: #8FA5FF;
|
|
--border: #333333;
|
|
--hover: #2A2A2A;
|
|
--completed-bg: rgba(96, 122, 251, 0.15);
|
|
--completed-text: #8FA5FF;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
|
|
}
|
|
|
|
.app {
|
|
min-height: 100vh;
|
|
background-color: var(--bg-primary);
|
|
transition: background-color var(--transition-speed) ease;
|
|
}
|
|
|
|
.header {
|
|
background-color: var(--bg-surface);
|
|
border-bottom: 1px solid var(--border);
|
|
/* The extra top padding is the iOS status bar when the app is installed to
|
|
the home screen. Without it the header sits underneath the clock. */
|
|
padding: calc(24px + env(safe-area-inset-top)) 48px 24px;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
transition: all var(--transition-speed) ease;
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.app-title {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
transition: color var(--transition-speed) ease;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Both days are shown with the current one marked, so the control states
|
|
where you are and what the alternative is without being clicked. */
|
|
.day-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 3px;
|
|
gap: 2px;
|
|
height: 40px;
|
|
transition: border-color 200ms ease;
|
|
}
|
|
|
|
.day-option {
|
|
padding: 0 14px;
|
|
height: 100%;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: background-color 200ms ease, color 200ms ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.day-option:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.day-option.selected {
|
|
background-color: var(--hover);
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
html.dark .day-option.selected {
|
|
background-color: var(--hover);
|
|
}
|
|
|
|
.theme-toggle {
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 200ms ease;
|
|
font-size: 14px;
|
|
height: 40px;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
background-color: var(--hover);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.theme-toggle:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.theme-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
transition: transform 500ms ease;
|
|
}
|
|
|
|
.theme-icon.rotated {
|
|
transform: rotate(360deg);
|
|
}
|
|
|
|
.main {
|
|
padding: 40px 0 calc(40px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 0 32px;
|
|
}
|
|
|
|
.content-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
transition: color var(--transition-speed) ease;
|
|
}
|
|
|
|
.date-display {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: var(--accent-text);
|
|
}
|
|
|
|
.task-input-container {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.task-input {
|
|
width: 100%;
|
|
padding: 16px 20px;
|
|
font-size: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background-color: var(--bg-surface);
|
|
color: var(--text-primary);
|
|
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
.task-input:focus {
|
|
outline: none;
|
|
border: 1px solid var(--border);
|
|
background-color: var(--bg-primary);
|
|
box-shadow: 0 8px 24px rgba(96, 122, 251, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
|
|
transform: scale(1.01);
|
|
}
|
|
|
|
.task-input::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.task-stats {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
opacity: 0;
|
|
transition: opacity 300ms ease;
|
|
}
|
|
|
|
.task-stats.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.task-count {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.clear-completed {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
transition: all 200ms ease;
|
|
}
|
|
|
|
.clear-completed:hover {
|
|
color: var(--accent);
|
|
background-color: var(--hover);
|
|
}
|
|
|
|
.task-list {
|
|
min-height: 400px;
|
|
position: relative;
|
|
}
|
|
|
|
/* A real list, so screen readers announce item counts and position. */
|
|
.task-items {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.task-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 16px 20px;
|
|
background-color: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
cursor: grab;
|
|
transition: all 300ms ease;
|
|
position: relative;
|
|
}
|
|
|
|
.task-item:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* The lifted card. It stays fully opaque and sits above the list. The old
|
|
ghosted 0.4 opacity read as "this card is disabled" rather than "you are
|
|
holding this card". The gap that opens beneath it is the drop indicator. */
|
|
.task-item.dragging {
|
|
cursor: grabbing;
|
|
z-index: 20;
|
|
box-shadow:
|
|
0 12px 28px rgba(0, 0, 0, 0.18),
|
|
0 4px 8px rgba(0, 0, 0, 0.1);
|
|
border-color: var(--accent);
|
|
/* Only while a drag is in flight, so an ordinary touch still scrolls. */
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
|
|
html.dark .task-item.dragging {
|
|
box-shadow:
|
|
0 12px 28px rgba(0, 0, 0, 0.5),
|
|
0 4px 8px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
/* The released card easing back into its slot. It keeps the raised z-index so
|
|
it stays above its neighbours on the way down, and supplies the transition
|
|
that the lifted state deliberately withheld. */
|
|
.task-item.settling {
|
|
z-index: 20;
|
|
transition:
|
|
transform 240ms cubic-bezier(0.2, 0, 0, 1),
|
|
box-shadow 240ms ease,
|
|
border-color 240ms ease;
|
|
}
|
|
|
|
.task-item:hover {
|
|
background-color: var(--hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.task-items:has(.dragging) .task-item:not(.dragging):hover {
|
|
background-color: var(--bg-surface);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.task-item.completed {
|
|
background-color: var(--completed-bg);
|
|
}
|
|
|
|
.checkbox {
|
|
width: 24px;
|
|
height: 24px;
|
|
/* Pads the 24px box out to the 32px first-line band set by the row buttons. */
|
|
margin-block: 4px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
display: block;
|
|
transition: all 300ms ease;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.checkbox:hover {
|
|
border-color: var(--accent);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.checkbox.checked {
|
|
background-color: var(--accent);
|
|
border-color: var(--accent);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.checkbox.checked:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.checkmark {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: white;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.task-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: left;
|
|
background: transparent;
|
|
border: none;
|
|
padding-inline: 0;
|
|
/* Pads the 24px line box out to the 32px first-line band the row buttons
|
|
set, so the text centres against the checkbox. Declared as a longhand
|
|
because a `padding: 0` shorthand here would reset it. */
|
|
padding-block: 4px;
|
|
font-family: inherit;
|
|
cursor: text;
|
|
font-size: 16px;
|
|
/* 24px line box, the same height as the checkbox, so the two align on the
|
|
first line without nudging either. */
|
|
line-height: 1.5;
|
|
color: var(--text-primary);
|
|
transition: all 300ms ease;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.task-item.completed .task-text {
|
|
text-decoration: line-through;
|
|
color: var(--completed-text);
|
|
}
|
|
|
|
/* Sized and spaced to match .task-text exactly, so committing an edit does
|
|
not shift the row by a pixel. */
|
|
.task-edit {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-family: inherit;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
color: var(--text-primary);
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--accent);
|
|
border-radius: 6px;
|
|
padding: 0 6px;
|
|
margin: 0 -7px;
|
|
outline: none;
|
|
}
|
|
|
|
.row-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
position: relative;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: all 200ms ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.defer-btn:hover {
|
|
background-color: var(--hover);
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* focus-within matters as much as hover here: the button is opacity 0 by
|
|
default, so a keyboard user tabbing to it previously saw nothing at all:
|
|
the focus outline was drawn on an invisible element. */
|
|
.task-item:hover .row-btn,
|
|
.task-item:focus-within .row-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
.delete-btn:hover {
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
color: #f44336;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.row-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--text-secondary);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Replaces a 305 KB Lottie player that existed to draw this one picture.
|
|
Same 200px box, so the empty state keeps its original proportions. */
|
|
.empty-art {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 0 auto 24px;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.empty-art-box {
|
|
animation: empty-float 4s ease-in-out infinite;
|
|
}
|
|
|
|
.empty-art-motes path {
|
|
animation: empty-mote 4s ease-in-out infinite;
|
|
}
|
|
|
|
.empty-art-motes path:nth-child(2) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.empty-art-motes path:nth-child(3) {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes empty-float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
|
|
@keyframes empty-mote {
|
|
0%, 100% { opacity: 0.15; transform: translateY(0); }
|
|
50% { opacity: 0.6; transform: translateY(-6px); }
|
|
}
|
|
|
|
/* Decorative only, so respect a reduced-motion preference. */
|
|
/* Svelte's transitions run in JavaScript and never see this query, so
|
|
App.svelte checks the same preference and zeroes its durations. This half
|
|
covers everything driven by CSS. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.empty-art-box,
|
|
.empty-art-motes path {
|
|
animation: none;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
.empty-state p {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Deliberately quiet. Export and import get reached for once in a blue moon,
|
|
so they sit below the list in secondary text rather than taking a slot in
|
|
the header next to things you use constantly. */
|
|
.data-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 32px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border);
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.data-link {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 4px 6px;
|
|
margin: 0;
|
|
border-radius: 4px;
|
|
font-family: var(--font-family);
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: color 200ms ease, background-color 200ms ease;
|
|
}
|
|
|
|
.data-link:hover {
|
|
color: var(--accent);
|
|
background-color: var(--hover);
|
|
}
|
|
|
|
.data-sep {
|
|
color: var(--border);
|
|
}
|
|
|
|
.data-status {
|
|
margin-left: 4px;
|
|
opacity: 0;
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.data-status:not(:empty) {
|
|
opacity: 1;
|
|
}
|
|
|
|
.data-status.error {
|
|
color: #d14343;
|
|
}
|
|
|
|
html.dark .data-status.error {
|
|
color: #ff8a8a;
|
|
}
|
|
|
|
/* Touch devices.
|
|
*
|
|
* The delete button is revealed on hover, which does not exist here. Without
|
|
* this it stays at zero opacity and a task cannot be deleted on a phone at
|
|
* all, which is what the README told people to do.
|
|
*
|
|
* The rest widens hit areas to the 44px minimum. The overlays are positioned
|
|
* so nothing moves: the controls keep the size they were drawn at, they are
|
|
* just easier to hit. Kept behind the media query so a mouse still gets small,
|
|
* precise targets and the full row stays available to drag. */
|
|
@media (hover: none) {
|
|
.row-btn {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
/* Smaller drawn box, same 44px target from the overlay below, and the
|
|
margin keeps it in the 32px first-line band. */
|
|
.row-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-block: 2px;
|
|
}
|
|
|
|
.checkbox::after,
|
|
.row-btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 44px;
|
|
height: 44px;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* 46 rather than 44, because the switch's own padding and border eat into
|
|
the height its buttons actually get. The theme toggle follows so the two
|
|
stay level in the header. */
|
|
.day-switch {
|
|
height: 46px;
|
|
padding: 0;
|
|
}
|
|
|
|
.day-option {
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.theme-toggle {
|
|
height: 46px;
|
|
}
|
|
|
|
/* Grows the tappable area of the task text to 44px without moving the text
|
|
itself, so it stays aligned with the checkbox on the first line. */
|
|
.task-text {
|
|
padding-block: 10px;
|
|
margin-block: -6px;
|
|
}
|
|
|
|
.clear-completed,
|
|
.data-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header {
|
|
padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
|
|
}
|
|
|
|
/* One row rather than two. Stacking cost a whole row of height on the
|
|
screen with the least of it to spare. */
|
|
.header-content {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo-section {
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.header-actions {
|
|
margin-left: auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.main {
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
/* Wraps rather than stacking unconditionally, so the date only drops to
|
|
its own line when it genuinely cannot share one. */
|
|
.content-header {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 2px 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.task-input {
|
|
padding: 16px 18px;
|
|
}
|
|
|
|
/* Both row actions stay visible on touch because there is no hover to
|
|
reveal them, and at this width they were eating 44% of the row. Tighter
|
|
gaps and padding hand that back to the text. */
|
|
.task-item {
|
|
padding: 14px 16px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.task-input {
|
|
padding: 20px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.header {
|
|
padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
|
|
}
|
|
|
|
/* The wordmark is what stops the header fitting on one line here: it needs
|
|
422px of row and there are 343. The logo carries the identity, and the
|
|
installed app already has the name under its icon. Kept in the
|
|
accessibility tree so the page still has its h1. */
|
|
.app-title {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.task-item {
|
|
padding: 16px;
|
|
}
|
|
|
|
.task-input {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
/* Every control, listed once. The previous version named a handful by hand
|
|
and had already gone stale: it still pointed at .today-btn, which no
|
|
longer exists, while five newer controls had no focus ring at all. */
|
|
.checkbox:focus-visible,
|
|
.row-btn:focus-visible,
|
|
.task-text:focus-visible,
|
|
.task-edit:focus-visible,
|
|
.theme-toggle:focus-visible,
|
|
.day-option:focus-visible,
|
|
.clear-completed:focus-visible,
|
|
.data-link:focus-visible,
|
|
.undo-action:focus-visible,
|
|
.carried-dismiss:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Hidden controls cannot show a focus ring, so reveal them when tabbed to. */
|
|
.row-btn:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
|
|
/* Shown only after something is removed, and only long enough to act on.
|
|
It carries a real button because Cmd/Ctrl+Z does not exist on a phone,
|
|
so on touch this is the only way back. */
|
|
.undo-toast {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: calc(24px + env(safe-area-inset-bottom));
|
|
z-index: 200;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
max-width: calc(100vw - 32px);
|
|
padding: 12px 12px 12px 18px;
|
|
border-radius: 12px;
|
|
background-color: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
box-shadow:
|
|
0 12px 28px rgba(0, 0, 0, 0.16),
|
|
0 4px 8px rgba(0, 0, 0, 0.08);
|
|
font-size: 14px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
html.dark .undo-toast {
|
|
box-shadow:
|
|
0 12px 28px rgba(0, 0, 0, 0.55),
|
|
0 4px 8px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.undo-message {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.undo-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
padding: 6px 12px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--accent-text);
|
|
cursor: pointer;
|
|
transition: background-color 200ms ease;
|
|
}
|
|
|
|
.undo-action:hover {
|
|
background-color: var(--hover);
|
|
}
|
|
|
|
/* Teaching the shortcut is the point, so it only shows where one exists. */
|
|
.undo-key {
|
|
font-family: var(--font-family);
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.undo-key {
|
|
display: none;
|
|
}
|
|
|
|
.undo-action {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
|
|
/* Says out loud what rollover just did. Without it, opening the app after a
|
|
few days away looks like tasks appearing from nowhere. */
|
|
.carried-notice {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
padding: 10px 10px 10px 14px;
|
|
border-radius: 8px;
|
|
background-color: var(--completed-bg);
|
|
color: var(--completed-text);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.carried-notice span {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.carried-dismiss {
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
transition: opacity 200ms ease, background-color 200ms ease;
|
|
}
|
|
|
|
.carried-dismiss:hover {
|
|
opacity: 1;
|
|
background-color: var(--hover);
|
|
}
|
|
|
|
.carried-dismiss svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
.carried-dismiss {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
}
|