/* App-local styles for Tasks. * * The app is built from @ecosystem/design components; what lives here is the * task row, the board card, and the detail panel — three shapes no existing * component covers. * * Per packages/design/README.md this file may consume semantic tokens but must * not redefine any .ds-* component, and must not reach for a primitive ramp. */ /* This app's accent lives in @ecosystem/design — css/app-themes.css, keyed on the `data-app` slug the shell puts on . It moved there when the accents started being DERIVED from each app's logo rather than chosen per app: the ramp, the contrast check and the logo are one decision now, and splitting them across six stylesheets is how they drift apart. Repointing a semantic token is still the supported extension point — that file is just where this particular repointing happens. */ /* --- Layout: list beside the detail panel --------------------------------- */ .workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5); align-items: start; } /* The panel sits BESIDE the list on a wide screen rather than replacing it. Losing your place is the tax a detail *page* charges, and a work list is opened too often to pay it. Below this width there is no room for two columns, so it stacks. */ @media (min-width: 64rem) { .workspace:has(.detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) 22rem; } .detail { position: sticky; top: var(--ds-space-4); } } .workspace__main { min-width: 0; } .detail { padding: var(--ds-space-4); background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); } .detail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-3); } .detail__title { margin: 0; font-size: var(--ds-text-base); font-weight: var(--ds-weight-semibold); } /* --- The row -------------------------------------------------------------- */ /* One task. A row rather than a card, because the whole value of the view is scanning a column of them — cards put a gutter between every line and make twelve tasks look like twelve things instead of one list. */ .task { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-bottom: var(--ds-border-width) solid var(--ds-border); } .task:last-child { border-bottom: none; } .task:hover { background: var(--ds-surface-hover); } .task--open { background: var(--ds-accent-subtle); } .task__check { /* Big enough to hit on a phone; the label is the whole row's business. */ width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; accent-color: var(--ds-accent); cursor: pointer; } /* The row's body is a button so the whole line opens the detail panel — a click target the width of the row, reachable by keyboard, with none of the nested-interactive problems of putting a handler on a div. */ .task__body { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; } .task__title { font-weight: var(--ds-weight-medium); overflow-wrap: anywhere; } /* A finished task stays legible rather than being struck through into noise: it is still a record of what happened. */ .task--done .task__title { color: var(--ds-text-muted); } .task__meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); align-items: center; font-size: var(--ds-text-sm); color: var(--ds-text-muted); } .task__notes { font-size: var(--ds-text-sm); color: var(--ds-text-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* The one thing on the row that should stop the eye. Colour alone would fail for anyone who cannot see it, so the date is prefixed with the word "Overdue" in the markup rather than being rendered red and left at that. */ .task__due--overdue { color: var(--ds-danger); font-weight: var(--ds-weight-medium); } .task__due--today { color: var(--ds-warning); font-weight: var(--ds-weight-medium); } /* Priority carries its own label (P1/P2/P3) as well as its colour, for the same reason: a red dot means nothing to a reader who cannot see red. */ .task__priority { flex: none; padding: 0 var(--ds-space-1); border-radius: var(--ds-radius-sm); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); letter-spacing: 0.02em; } .task__priority--3 { background: var(--ds-danger-subtle); color: var(--ds-danger); } .task__priority--2 { background: var(--ds-warning-subtle); color: var(--ds-warning); } .task__priority--1 { background: var(--ds-surface-sunken); color: var(--ds-text-muted); } .task__label { border: 0; cursor: pointer; font: inherit; font-size: var(--ds-text-xs); } .task__label:hover { background: var(--ds-accent-subtle); color: var(--ds-accent); } .task-list { border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); overflow: hidden; } /* --- The board ------------------------------------------------------------ */ .board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-4); align-items: start; } @media (max-width: 52rem) { /* Three columns below this width are three narrow strips. One column, and the headers keep the grouping legible. */ .board { grid-template-columns: minmax(0, 1fr); } } .board__column { background: var(--ds-surface-sunken); border-radius: var(--ds-radius-lg); padding: var(--ds-space-3); } .board__header { display: flex; align-items: center; gap: var(--ds-space-2); margin-bottom: var(--ds-space-3); } .board__title { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); } .board__cards { display: flex; flex-direction: column; gap: var(--ds-space-2); min-height: 4rem; border-radius: var(--ds-radius-md); transition: background var(--ds-duration-fast) var(--ds-ease); } /* The drop target has to be visible while a card is in the air, or dragging is a guess. */ .board__cards.is-over { background: var(--ds-accent-subtle); outline: 2px dashed var(--ds-accent); outline-offset: 2px; } .board__empty { margin: 0; padding: var(--ds-space-3); font-size: var(--ds-text-xs); color: var(--ds-text-subtle); } .card { background: var(--ds-surface); border: var(--ds-border-width) solid var(--ds-border); border-radius: var(--ds-radius-md); cursor: grab; } .card:hover { border-color: var(--ds-border-strong); } .card--open { border-color: var(--ds-accent); } .card.is-dragging { opacity: 0.4; cursor: grabbing; } .card__body { display: flex; flex-direction: column; gap: var(--ds-space-2); width: 100%; padding: var(--ds-space-3); border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; } .card__title { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); overflow-wrap: anywhere; } /* --- The composer --------------------------------------------------------- */ /* Sits above the list, always visible: adding a task has to cost nothing or the list stops being trusted as complete. */ .composer { display: flex; flex-direction: column; gap: var(--ds-space-3); } .composer__title { flex: 1 1 16rem; min-width: 0; } .composer__row { flex-wrap: wrap; } .composer__row > * { flex: 1 1 9rem; min-width: 0; } /* What the date parser read, echoed back before anything is saved. Tinted rather than muted, because it is a claim the app is making about what you meant and it should be noticed. */ .composer__parsed { margin: 0; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-md); background: var(--ds-accent-subtle); color: var(--ds-text); font-size: var(--ds-text-sm); } /* --- Chrome --------------------------------------------------------------- */ .list-head { min-height: 1.5rem; } .view-toggle { display: flex; gap: 2px; } .view-toggle [aria-pressed="true"] { background: var(--ds-accent-subtle); color: var(--ds-accent); } .search { width: min(18rem, 30vw); } @media (max-width: 30rem) { .search { width: 8rem; } } .ds-nav__empty { padding: var(--ds-space-1) var(--ds-space-2); margin: 0; font-size: var(--ds-text-xs); color: var(--ds-text-subtle); } .toast { position: fixed; inset-inline: auto var(--ds-space-4); inset-block-end: var(--ds-space-4); z-index: var(--ds-z-toast); max-width: 28rem; box-shadow: var(--ds-shadow-lg); }