@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.24.0

package/src/pixel-paper.css

@@ -13,11 +13,17 @@
 
 /* anchors land 16px clear of the sticky top bar, at the height TopBar measures it to be
    however it wraps; without Foldkit, at one line's height. A status bar along the bottom is
-   kept clear the same way: the page ends above it, and so does a scrolled-to anchor */
+   kept clear the same way: the page ends above it, and so does a scrolled-to anchor. The
+   measured heights are written inline on <html>, over these */
+:root {
+  --topbar-h: 48px;
+  --statusbar-h: 0px;
+}
+
 html {
   height: 100%;
-  scroll-padding-top: calc(var(--topbar-h, 48px) + 16px);
-  scroll-padding-bottom: var(--statusbar-h, 0px);
+  scroll-padding-top: calc(var(--topbar-h) + 16px);
+  scroll-padding-bottom: var(--statusbar-h);
 }
 
 :root:has(footer.statusbar) {
@@ -26,7 +32,7 @@ html {
 
 body {
   min-height: 100%;
-  padding-bottom: var(--statusbar-h, 0px);
+  padding-bottom: var(--statusbar-h);
   font-family: var(--font-body);
   font-size: var(--type-body);
   line-height: 1.45;
@@ -40,10 +46,6 @@ fieldset {
   min-width: 0;
 }
 
-legend {
-  padding: 0;
-}
-
 ::selection {
   background: var(--ink);
   color: var(--paper);
@@ -93,7 +95,6 @@ kbd {
   position: absolute;
   width: 1px;
   height: 1px;
-  padding: 0;
   margin: -1px;
   overflow: hidden;
   clip-path: inset(50%);
@@ -129,8 +130,8 @@ kbd {
    keeps its look and takes the pointer over an invisible 24px square centred on it */
 :is(
   .nav.tabs button,
-  .switch > :is(a, button),
-  :is(button, a, label).fchip,
+  .switch > button,
+  :is(button, label).fchip,
   button.glyph,
   button.mark,
   button.tag:has(> span),
@@ -143,8 +144,8 @@ kbd {
 
 :is(
   .nav.tabs button,
-  .switch > :is(a, button),
-  :is(button, a, label).fchip,
+  .switch > button,
+  :is(button, label).fchip,
   button.glyph,
   button.mark,
   button.tag:has(> span),
@@ -340,7 +341,6 @@ button.tag > span {
   font-size: var(--type-wordmark);
   font-weight: 400;
   letter-spacing: -0.02em;
-  margin: 0;
   color: inherit;
   text-decoration: none;
   white-space: nowrap;
@@ -378,8 +378,8 @@ button.tag > span {
   flex: 1;
 }
 
-/* the right-hand tools wrap as one group, never one control per line */
-/* a bar of tools wider than the window wraps onto lines of its own, at the right */
+/* the right-hand tools wrap as one group, never one control per line; a group wider than the
+   window wraps onto lines of its own, at the right */
 .topbar-tools {
   display: flex;
   flex-wrap: wrap;
@@ -456,7 +456,6 @@ a.textbtn {
 }
 
 /* tabs at the top of a flush panel sit inside its padding */
-.panel > .nav.tabs,
 .panel > .tabbed > .nav.tabs {
   margin: var(--pad) var(--pad) 0;
 }
@@ -498,7 +497,6 @@ a.textbtn {
   color: var(--on-head);
 }
 
-.nav.tabs a,
 .nav.tabs button {
   padding: 4px 12px;
   font-size: var(--type-state);
@@ -607,7 +605,7 @@ a.textbtn {
 
 .places li:has(> [aria-current]) :is(.place-count, .iconbtn.quiet) {
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 .places li:has(> [aria-current]) :focus-visible {
@@ -798,8 +796,6 @@ a.textbtn {
 .menu {
   position: absolute;
   z-index: 200;
-  margin: 0;
-  padding: 0;
   min-width: 148px;
   max-width: calc(100vw - 24px);
   color: var(--ink);
@@ -875,7 +871,7 @@ a.textbtn {
 
 .menu :is([aria-current="page"], [role="menuitemradio"][aria-checked="true"]) .key-hint {
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 .menu .menu-check {
@@ -952,7 +948,7 @@ a.textbtn {
   margin-left: auto;
   font-size: var(--type-state);
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 .panel-body {
@@ -983,6 +979,19 @@ a.textbtn {
   flex: 1 1 100%;
 }
 
+/* the shelf: a strip on the head tint under the bar, for a field that picks what the body
+   shows */
+.panel-shelf {
+  padding: 10px 12px 12px;
+  background: var(--head);
+  border-bottom: var(--hair) solid var(--rule);
+}
+
+/* on the head tint a field's label takes on-head: muted misses AA there */
+.panel-shelf :is(.field > label:not(.choice), .field-label) {
+  color: var(--on-head);
+}
+
 /* ---------- the panel's title-bar lead and actions ---------- */
 
 /* small buttons and icon buttons at the bar's right end, and an icon button before the
@@ -1046,14 +1055,12 @@ a.textbtn {
   color: var(--paper);
   background: var(--ink);
   border-color: var(--paper);
-  opacity: 0.6;
+  opacity: var(--fade-held);
 }
 
 /* a quiet icon button prints in paper, and a hover cannot darken it to the ink of the bar */
 .panel-lead .iconbtn.quiet,
-.panel-acts .iconbtn.quiet,
-.panel-lead .iconbtn.quiet:hover,
-.panel-acts .iconbtn.quiet:hover {
+.panel-acts .iconbtn.quiet {
   color: inherit;
 }
 
@@ -1087,7 +1094,6 @@ a.textbtn {
   flex: none;
 }
 
-.switch a,
 .switch button {
   width: 26px;
   height: 22px;
@@ -1100,12 +1106,11 @@ a.textbtn {
   cursor: pointer;
 }
 
-.switch > :is(a, button) + :is(a, button) {
+.switch > button + button {
   border-left: var(--line) solid var(--ink);
 }
 
-.switch [aria-pressed="true"],
-.switch [aria-current="page"] {
+.switch [aria-pressed="true"] {
   background: var(--ink);
   color: var(--paper);
 }
@@ -1159,11 +1164,6 @@ button.fchip:active {
   color: inherit;
 }
 
-a.fchip {
-  cursor: pointer;
-  text-decoration: none;
-}
-
 .fchip.query {
   cursor: text;
   isolation: isolate;
@@ -1407,12 +1407,6 @@ button.glyph {
   margin: -4px;
 }
 
-/* an inline edit in a row shows its focus as its caret and its rule, thickened below, not a
-   ring */
-.row .grow input.inline-input:focus-visible {
-  outline: none;
-}
-
 /* the title opens the record; the pencil renames */
 .row .title {
   font: inherit;
@@ -1510,10 +1504,13 @@ button.glyph {
   outline-offset: -4px;
 }
 
-/* the row you are on (its link is aria-current) prints inverted, as a place and a board's
-   cursor card do: hover adds nothing, a dot's border takes the paper, what prints muted on
-   paper prints in paper at 0.75, and lateness takes a red slip */
-.row.linked:has(.grow a[aria-current]) {
+/* the row you are on (its link is aria-current) and a board's cursor card print inverted, as
+   a place does and as the system marks the one current thing: hover adds nothing, what prints
+   muted on paper prints in paper at --fade-on-ink, as a title bar's meta does, chips, marks
+   and buttons keep their own fills, and a ring inside prints in paper. Each selector is
+   written out, not joined in :is(), so each keeps its own specificity */
+.row.linked:has(.grow a[aria-current]),
+.board-card[aria-current="true"] {
   background-color: var(--ink);
   color: var(--paper);
 }
@@ -1522,16 +1519,20 @@ button.glyph {
   border-color: var(--paper);
 }
 
-.row.linked:has(.grow a[aria-current]) :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
+.row.linked:has(.grow a[aria-current]) :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet),
+.board-card[aria-current="true"] :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
-.row.linked:has(.grow a[aria-current]) .tag {
+.row.linked:has(.grow a[aria-current]) .tag,
+.board-card[aria-current="true"] .tag {
   border-color: currentColor;
 }
 
-.row.linked:has(.grow a[aria-current]) :is(.due.late, .age.stale) {
+/* lateness cannot be red on ink: it takes a red slip, drawn by a spread so nothing moves */
+.row.linked:has(.grow a[aria-current]) :is(.due.late, .age.stale),
+.board-card[aria-current="true"] :is(.due.late, .age.stale) {
   opacity: 1;
   background: var(--red);
   color: var(--on-red);
@@ -1539,7 +1540,8 @@ button.glyph {
 }
 
 .row.linked:has(.grow a[aria-current]) :focus-visible,
-.row.linked:has(.grow a[aria-current]:focus-visible) {
+.row.linked:has(.grow a[aria-current]:focus-visible),
+.board-card[aria-current="true"] :focus-visible {
   outline-color: var(--paper);
 }
 
@@ -1566,35 +1568,6 @@ button.glyph {
   opacity: 1;
 }
 
-/* a board's cursor card is inverted, as the system marks the one current thing. What prints
-   muted on paper prints in paper at 0.75, as a title bar's meta does; chips, marks and buttons
-   keep their own fills; a ring inside it prints in paper. Hover adds nothing to it */
-.board-card[aria-current="true"] {
-  background-color: var(--ink);
-  color: var(--paper);
-}
-
-.board-card[aria-current="true"] :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
-  color: inherit;
-  opacity: 0.75;
-}
-
-.board-card[aria-current="true"] .tag {
-  border-color: currentColor;
-}
-
-/* lateness cannot be red on ink: it takes a red slip, drawn by a spread so nothing moves */
-.board-card[aria-current="true"] :is(.due.late, .age.stale) {
-  opacity: 1;
-  background: var(--red);
-  color: var(--on-red);
-  box-shadow: 0 0 0 3px var(--red);
-}
-
-.board-card[aria-current="true"] :focus-visible {
-  outline-color: var(--paper);
-}
-
 /* a phone has no room for the hover tools; the detail card carries every edit. Titles
    wrap to a second line instead of clipping to a few characters beside the chips */
 @media (max-width: 600px) {
@@ -1747,10 +1720,11 @@ input.inline-input[aria-invalid="true"] {
   border-bottom-color: var(--red);
 }
 
-/* in a row, which takes its ring, focus doubles the rule to 2px, as a field's baseline does;
-   drawn inside the box, so the row keeps its height, and in the rule's own colour, so a
-   refused edit stays red */
+/* in a row, focus shows as the caret and the rule, not a ring: the rule doubles to 2px, as a
+   field's baseline does, drawn inside the box, so the row keeps its height, and in the rule's
+   own colour, so a refused edit stays red */
 .row .grow input.inline-input:focus-visible {
+  outline: none;
   box-shadow: inset 0 -1px 0 var(--ink);
 }
 
@@ -2081,7 +2055,6 @@ textarea::-webkit-resizer {
   font-size: var(--type-control);
 }
 
-.title-edit,
 input.inline-input.title-edit {
   font-size: var(--type-title);
   font-weight: 600;
@@ -2292,12 +2265,6 @@ select[aria-invalid="true"] {
   margin-left: 8px;
 }
 
-.table .chips {
-  display: inline-flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
 /* a stacked table: on a phone each row becomes a block of label and value lines, so a
    pinned action column never slices through what the row says */
 @media (max-width: 600px) {
@@ -2719,15 +2686,10 @@ pre.code-surface {
    element of its own (.veil-backdrop) under the pad; the pad lets a press through to it
    everywhere but on the card it holds, and a press on the veil closes the dialog. */
 dialog.veil {
-  margin: 0;
   color: inherit;
   overflow-y: auto;
 }
 
-dialog.veil[open] {
-  display: block;
-}
-
 dialog.veil:focus {
   outline: none;
 }
@@ -2819,12 +2781,12 @@ dialog.veil:focus {
 .card-tb .meta {
   font-size: var(--type-state);
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 /* a held icon button fades on the bar, as a held button in a panel's title bar does */
 :is(.card-tb, .panel-tb) .iconbtn[aria-disabled="true"] {
-  opacity: 0.6;
+  opacity: var(--fade-held);
   cursor: default;
 }
 
@@ -3066,7 +3028,7 @@ dialog.veil:focus {
 .palette-row[aria-selected="true"] .hint,
 .palette-row[aria-selected="true"] .tag {
   color: inherit;
-  opacity: 0.75;
+  opacity: var(--fade-on-ink);
 }
 
 .palette-row[aria-selected="true"] .tag {
@@ -3130,7 +3092,6 @@ dialog.veil:focus {
 }
 
 .empty-title {
-  margin: 0;
   font-family: var(--font-px);
   font-size: var(--type-control);
   text-transform: uppercase;
@@ -3151,7 +3112,7 @@ dialog.veil:focus {
 
 .banner {
   position: fixed;
-  bottom: calc(var(--statusbar-h, 0px) + 16px);
+  bottom: calc(var(--statusbar-h) + 16px);
   left: 50%;
   transform: translateX(-50%);
   z-index: 150;
@@ -3408,7 +3369,7 @@ dialog.veil:focus {
 }
 
 .board-card.drag-dim {
-  opacity: 0.4;
+  opacity: var(--fade-dragged);
 }
 
 /* focus on the title rings the whole slip, outside its own border */
@@ -3501,7 +3462,7 @@ dialog.veil:focus {
 }
 
 .sortable-item.drag-dim {
-  opacity: 0.4;
+  opacity: var(--fade-dragged);
 }
 
 /* where a pointer would drop the held item: a 2px dashed ink line beside the item it lands
@@ -4880,6 +4841,16 @@ dialog.veil:focus {
   overflow: visible;
 }
 
+/* the key that does the same as the control, after its words, as a button prints it */
+.tip .key-hint {
+  margin-left: 6px;
+  font-family: var(--font-px);
+  font-size: var(--type-label);
+  text-transform: none;
+  letter-spacing: 0;
+  opacity: var(--fade-on-ink);
+}
+
 /* ---------- toolbars: one strip of tools, one stop for Tab ---------- */
 
 /* the rules between tools are the strip's ink showing through a 2px gap */
@@ -5064,7 +5035,6 @@ dialog.veil:focus {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 12px;
-  margin: 0;
 }
 
 .statusbar-keys .key-hint {
@@ -5075,25 +5045,34 @@ dialog.veil:focus {
 /* ---------- the rail: a column of panels beside the deck, a drawer on a phone ---------- */
 
 /* one element in two places: at rest, fixed down the left edge from the top bar's lower
-   edge (as the stage hangs) and scrolling itself; on a phone the same element opens as a
-   popover drawer. --rail is the reader's width when they gave one: the view sets it on
-   .railed, so the page's padding and the rail's width follow it together */
+   edge (as the stage hangs); on a phone the same element opens as a popover drawer. The reader's width, when they gave one, is --railed-width, which the view
+   sets on .railed, so the page's padding and the rail's width follow it together; without one,
+   --rail. It is not inherited: each box it sizes takes it from .railed by name, so a width that
+   changes under a dragged splitter restyles those four and none of the rows inside them */
+@property --railed-width {
+  syntax: "*";
+  inherits: false;
+}
+
 .railed {
-  padding-left: var(--rail);
+  padding-left: var(--railed-width, var(--rail));
+}
+
+.railed > :is(.rail, .rail-resize, .bench) {
+  --railed-width: inherit;
 }
 
 .rail[popover] {
   position: fixed;
   inset: auto;
   top: anchor(--topbar bottom, 0px);
-  bottom: var(--statusbar-h, 0px);
+  bottom: var(--statusbar-h);
   left: 0;
-  display: grid;
-  align-content: start;
+  display: flex;
+  flex-direction: column;
   gap: var(--gap);
-  width: var(--rail);
+  width: var(--railed-width, var(--rail));
   height: auto;
-  margin: 0;
   padding: var(--gap) 10px var(--gap) 20px;
   border: 0;
   background: none;
@@ -5102,7 +5081,43 @@ dialog.veil:focus {
 }
 
 .rail > * {
+  flex: none;
+  min-width: 0;
+}
+
+/* the rail's top stays put: what comes before its last panel keeps its height, and the last
+   panel takes the room left, at most its own height, its bar, shelf and foot staying while
+   its body scrolls (the padded body, or a flush body's list). The rail scrolls as a whole
+   only when what comes before that panel is taller than the column */
+.rail > .panel:last-child {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  min-height: 0;
+}
+
+.rail > .panel:last-child > :is(.panel-tb, .panel-shelf, .panel-foot) {
+  flex: none;
+}
+
+.rail > .panel:last-child > :not(.panel-tb, .panel-shelf, .panel-foot) {
+  flex: 0 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* a long name ends short of the bar's tools rather than wrapping the bar taller */
+.rail .panel-tb h2 {
   min-width: 0;
+  overflow: hidden;
+  overflow-wrap: normal;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* the toggle is the button itself in the bar's lead */
+.rail-toggle {
+  display: contents;
 }
 
 /* the splitter on the rail's right edge: a 12px strip from the edge outward, over the page's
@@ -5112,8 +5127,8 @@ dialog.veil:focus {
 .rail-resize {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
-  bottom: var(--statusbar-h, 0px);
-  left: var(--rail);
+  bottom: var(--statusbar-h);
+  left: var(--railed-width, var(--rail));
   z-index: 1;
   width: 12px;
   cursor: col-resize;
@@ -5145,6 +5160,48 @@ dialog.veil:focus {
   display: none;
 }
 
+/* folded: the first panel stands its title bar on end on the ground where the rail stood, the
+   toggle at its top and the title and count reading down; the rest of the rail and the
+   splitter are gone, and the deck takes the width. Above 900px only: the drawer opens whole.
+   Folding and unfolding move in three steps, as the drawer enters, but never while a pointer
+   drags the splitter, where the rail follows the pointer */
+@media not (max-width: 900px) {
+  .railed.folded {
+    --railed-width: var(--rail-folded);
+  }
+
+  .railed.folded > .rail > :not(.rail-head + .panel),
+  .railed.folded > .rail > .rail-head + .panel > :not(.panel-tb),
+  .railed.folded > .rail > .rail-head + .panel > .panel-tb > .panel-acts {
+    display: none;
+  }
+
+  .railed.folded > .rail > .rail-head + .panel {
+    align-self: flex-start;
+  }
+
+  .railed.folded > .rail > .rail-head + .panel > .panel-tb {
+    writing-mode: vertical-rl;
+    min-width: 31px;
+    min-height: 0;
+    padding: 3px 3px 12px;
+  }
+
+  .railed.folded > .rail > .rail-head + .panel > .panel-tb > .meta {
+    margin: 0;
+  }
+
+  .railed,
+  .railed > :is(.rail, .bench) {
+    transition: var(--motion-card) steps(3, end);
+    transition-property: padding-left, width, left;
+  }
+
+  :root[data-pixel-paper-dragging] :is(.railed, .railed > .rail, .railed > .bench) {
+    transition: none;
+  }
+}
+
 @media (max-width: 900px) {
   .railed {
     padding-left: 0;
@@ -5183,6 +5240,16 @@ dialog.veil:focus {
     display: inline-flex;
     justify-self: start;
   }
+
+  /* the drawer opens and closes but never folds, so it prints no toggle, and the bar the
+     toggle led keeps its own padding */
+  .panel-lead:has(> .rail-toggle) {
+    display: none;
+  }
+
+  .panel-tb:has(> .panel-lead > .rail-toggle) {
+    padding-left: 12px;
+  }
 }
 
 @keyframes railIn {
@@ -5196,21 +5263,24 @@ dialog.veil:focus {
 /* hung from the top bar's lower edge like the stage, down to the status bar, edge to edge, or
    from the rail's edge beside one (a fixed box takes nothing from .railed's padding). The head
    takes its own height while the work keeps at least --bench-work-min, or all but the head's
-   first 64px (its padding and a small button: the rail's open button) on a window too short
+   first --bench-head-min (its padding and a small button: the rail's open button) on a window too short
    for both; past that the head scrolls itself. The work takes the rest and lays out what
    fills it (a reel's height is 100% of it). The page does not scroll */
 .bench {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
   right: 0;
-  bottom: var(--statusbar-h, 0px);
+  bottom: var(--statusbar-h);
   left: 0;
   display: grid;
-  grid-template-rows: minmax(0, max-content) minmax(min(var(--bench-work-min), 100% - 64px), 1fr);
+  grid-template-rows: minmax(0, max-content) minmax(
+      min(var(--bench-work-min), 100% - var(--bench-head-min)),
+      1fr
+    );
 }
 
 .railed > .bench {
-  left: var(--rail);
+  left: var(--railed-width, var(--rail));
 }
 
 /* the head lines up with a reel's windows, a reel's gutter in from the edge; the reel's own
@@ -5248,7 +5318,7 @@ dialog.veil:focus {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
   right: 0;
-  bottom: var(--statusbar-h, 0px);
+  bottom: var(--statusbar-h);
   left: 0;
   overflow: hidden;
 }
@@ -5347,8 +5417,7 @@ dialog.veil:focus {
   border-color: var(--paper);
 }
 
-.window > .panel-tb .iconbtn,
-.window > .panel-tb .iconbtn.quiet {
+.window > .panel-tb .iconbtn {
   color: inherit;
 }
 
@@ -5558,7 +5627,7 @@ dialog.veil:focus {
 }
 
 .reel-pane.drag-dim {
-  opacity: 0.4;
+  opacity: var(--fade-dragged);
 }
 
 /* only the grips lift: a pane's text selects and its terminal takes the pointer */
@@ -5767,7 +5836,6 @@ dialog.veil:focus {
   inset: 0;
   width: 100%;
   height: 100%;
-  margin: 0;
   opacity: 0;
   appearance: none;
   cursor: pointer;
@@ -5826,7 +5894,7 @@ dialog.veil:focus {
    padding from the corner), so the stylesheet raises it clear of a banner, its anchor when one
    is showing, or of a status bar, and sets the gap. A phone spans it across the bottom */
 .toasts .toast-stack {
-  bottom: calc(anchor(--banner top, calc(var(--statusbar-h, 0px) + 4px)) - 4px) !important;
+  bottom: calc(anchor(--banner top, calc(var(--statusbar-h) + 4px)) - 4px) !important;
   gap: 10px !important;
   width: min(392px, 100vw);
 }
@@ -5874,21 +5942,19 @@ dialog.veil:focus {
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .toasts .toast {
-    animation: none;
-  }
-}
-
 /* ---------- reduced motion ---------- */
 
 @media (prefers-reduced-motion: reduce) {
-  .cursor {
-    animation: none;
-  }
+  .cursor,
   .veil-backdrop,
   .card,
-  .rail[popover]:popover-open {
+  .rail[popover]:popover-open,
+  .toasts .toast {
     animation: none;
   }
+
+  .railed,
+  .railed > :is(.rail, .bench) {
+    transition: none;
+  }
 }