@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/todos/style.css

@@ -1,267 +1,214 @@
 /* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
-   reaches the rest of the page. The face fills its card on a custom page (the board draws the frame), in
-   the kit's card tokens: its head (the chip, the title, how many there are its quiet note at the end,
-   clear of the card's grip), the summary of how many are done (where there are any: a ring of the share,
-   56px, 88px on a card 280px high and more, as large whatever it shows, its percent in the middle, the
-   sign small and muted, a key of the two counts beside it), then the documents' to-dos, which scroll inside the card, each
-   document's title small and muted over its items, an item a rounded box (checked, it fills with the
-   accent), its words and the headings it stands under, muted. A row a press away from its document (a
-   hover fill, as a row of the sidebar has). A wide card (8 cells) sets the documents in two columns.
-   Every one done, the summary's ring (no key) is the card's empty face, in the middle of the room under the
-   head, the line under it; none at all, the cards' empty face (a picture in a soft disc over a muted line).
-   Light and dark. */
+   reaches the rest of the page. The pack's design B, in the kit's card tokens, a grid laid out by the
+   card's cells (the face's data-layout): the head (the chip, a checked list, 我的待办 and its quiet meta),
+   its end clear of the card's grip; how many are done (on a 4 × 4 card a line, 已完成 19 / 27 and the
+   percent at its end, over a row of ticks, one an item, done in the accent; on a 4 × 6 a ring of 64px, its
+   percent in the middle, beside the open count large and 已完成 under it; on an 8 × 4 a ring of 96px at the
+   left over a key of three rows); and the list, scrolling, faded at its foot while there is more: the
+   groups small and gray (the document's icon, its title, its open count fainter), each item a box of 15px
+   (the accent's, ticked, once done), its words (struck through and faint once done) and, under them (at
+   their right on a wide card), the headings it stands under, faint. A card with no item to show is the
+   cards' empty face in the middle: a soft square with the list's picture (or, all of them done, a full
+   green ring with a tick), a line and what to do. Light and dark. */
 [data-doc-component="gallery/todos"] {
-  container-type: size;
-  --gallery-todos-ring: 56px;
-  --gallery-todos-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  --gallery-todos-box: light-dark(rgb(55 53 47 / 30%), rgb(255 255 255 / 30%));
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
   > .gallery-todos-face {
-    display: flex;
-    flex-direction: column;
-    gap: var(--gallery-face-gap);
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: 20px auto minmax(0, 1fr);
+    grid-template-areas: "head" "summary" "list";
     box-sizing: border-box;
-    height: 100%;
     min-height: 0;
-    color: var(--gallery-text);
-    font-size: 14px;
-    line-height: 1.45;
   }
   > .gallery-todos-face > .gallery-todos-head {
+    grid-area: head;
     display: flex;
     align-items: center;
     gap: 8px;
-    flex: none;
     min-width: 0;
     padding-inline-end: var(--gallery-grip-room, 0px);
   }
   > .gallery-todos-face > .gallery-todos-head > .gallery-todos-chip {
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: grid;
+    place-items: center;
     width: var(--gallery-chip-size);
     height: var(--gallery-chip-size);
     border-radius: var(--gallery-chip-radius);
-    background: var(--gallery-accent-soft);
-    color: var(--gallery-accent);
-  }
-  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
-  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-title {
-    flex: 1 1 auto;
-    min-width: 0;
-    color: var(--gallery-text-strong);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: var(--gallery-title-size);
-    line-height: var(--gallery-title-line);
-    font-weight: 600;
-  }
-  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-count {
-    flex: none;
-    margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out;
-    font-size: var(--gallery-meta-size);
-    color: var(--doc-muted);
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
-  }
-  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-count:empty { display: none; }
-  /* How many are done of all, under the head: a ring of the share done in the accent (the good green
-     once all are), the share in its middle, and a key of the two counts beside it, each a dot of its
-     color, its name muted and its count at the end; a hairline under it where the list follows. */
-  > .gallery-todos-face > .gallery-todos-summary {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    flex: none;
-    min-width: 0;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--doc-grid);
-  }
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
+  }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--gallery-title-size); line-height: var(--gallery-title-line); font-weight: 600; color: var(--gallery-text); }
+  > .gallery-todos-face > .gallery-todos-head > .gallery-todos-count { flex: none; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+  /* How many are done: the parts each layout shows. */
+  > .gallery-todos-face > .gallery-todos-summary { grid-area: summary; margin-top: 12px; min-width: 0; }
   > .gallery-todos-face > .gallery-todos-summary[hidden] { display: none; }
-  /* All done: the summary the card's empty face, the ring (as large as ever) in the middle of the room
-     under the head, the line (待办都完成了) under it, no key, no picture of its own. */
-  > .gallery-todos-face[data-state="done"] > .gallery-todos-summary { flex-direction: column; gap: 10px; margin-top: auto; padding-bottom: 0; border-bottom: 0; }
-  > .gallery-todos-face[data-state="done"] > .gallery-todos-summary > .gallery-todos-key { display: none; }
-  > .gallery-todos-face[data-state="done"] > .gallery-todos-list { display: none; }
-  > .gallery-todos-face[data-state="done"] > .gallery-todos-line { flex: none; margin-bottom: auto; padding-top: 0; }
-  > .gallery-todos-face[data-state="done"] > .gallery-todos-line::before { display: none; }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring {
-    position: relative;
-    flex: none;
+  > .gallery-todos-face > .gallery-todos-summary > :is(.gallery-todos-ring, .gallery-todos-big, .gallery-todos-key) { display: none; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-progress { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-progress b { font-weight: 600; color: var(--gallery-text); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-progress > .gallery-todos-share { font-size: 11.5px; color: var(--gallery-faint); font-variant-numeric: tabular-nums; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ticks { display: flex; gap: 2px; height: 6px; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ticks > .gallery-todos-tick { flex: 1; border-radius: 2px; background: var(--gallery-track); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ticks > .gallery-todos-on { background: var(--gallery-accent); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring { position: relative; flex: none; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg { display: block; transform: rotate(-90deg); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > circle { fill: none; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > .gallery-todos-track { stroke: var(--gallery-track); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > .gallery-todos-arc { stroke: var(--gallery-accent); stroke-linecap: round; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent {
+    position: absolute;
+    inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--gallery-todos-ring);
-    height: var(--gallery-todos-ring);
-  }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > circle { fill: none; stroke-width: 10; }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > .gallery-todos-track { stroke: var(--gallery-track); }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > svg > .gallery-todos-arc {
-    stroke: var(--gallery-accent);
-    stroke-linecap: round;
-    stroke-dasharray: calc(var(--gallery-todos-share, 0) * 100) 100;
+    font-size: 17px;
+    line-height: 1;
+    font-weight: var(--gallery-numeral-weight);
+    letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
+    color: var(--gallery-text-strong);
   }
-  > .gallery-todos-face > .gallery-todos-summary[data-all] > .gallery-todos-ring > svg > .gallery-todos-arc { stroke: var(--gallery-good); }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent {
-    position: relative;
-    font-size: calc(var(--gallery-todos-ring) * .27);
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent > .gallery-todos-percent-value > .gallery-todos-percent-sign { margin-left: 1px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > p { margin: 0; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > .gallery-todos-big-line { display: flex; align-items: baseline; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > .gallery-todos-big-line > .gallery-todos-open {
+    font-size: 30px;
     line-height: 1;
     font-weight: var(--gallery-numeral-weight);
     letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
     color: var(--gallery-text-strong);
-    font-variant-numeric: tabular-nums;
   }
-  /* The percent sign small and muted, as every number's unit. */
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent > .gallery-todos-percent-sign { margin-inline-start: .08em; font-size: .55em; font-weight: 500; letter-spacing: 0; color: var(--doc-muted); }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key {
-    display: flex;
-    flex-direction: column;
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > .gallery-todos-big-line > .gallery-todos-open-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-big > .gallery-todos-big-done { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key { flex-direction: column; gap: 6px; margin: 16px 0 0; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gallery-accent); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row[data-kind="left"]::before { background: var(--gallery-track); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row[data-kind="from"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gallery-faintest); }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row > dt { margin: 0; }
+  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row > dd { margin: 0 0 0 auto; font-weight: 600; color: var(--gallery-text); font-variant-numeric: tabular-nums; }
+
+  /* The list: groups and items, scrolling, faded at its foot while there is more. */
+  > .gallery-todos-face > .gallery-todos-list { grid-area: list; min-height: 0; margin-top: 8px; overflow: auto; scrollbar-width: none; }
+  > .gallery-todos-face > .gallery-todos-list[hidden] { display: none; }
+  > .gallery-todos-face > .gallery-todos-list[data-more] {
+    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
+    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 10px 0 2px; font-size: 11.5px; line-height: 18px; font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc {
+    display: inline-flex;
+    align-items: center;
     gap: 4px;
-    flex: 1 1 auto;
     min-width: 0;
-    max-width: 160px;
-    margin: 0;
-  }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gallery-accent); }
-  > .gallery-todos-face > .gallery-todos-summary[data-all] > .gallery-todos-key > .gallery-todos-key-row[data-kind="done"]::before { background: var(--gallery-good); }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row[data-kind="left"]::before { background: var(--gallery-track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--doc-muted) 35%, transparent); }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row > .gallery-todos-key-name { flex: 1 1 auto; min-width: 0; color: var(--doc-muted); }
-  > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row > .gallery-todos-key-count { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
-  > .gallery-todos-face > .gallery-todos-list {
-    flex: 1 1 auto;
-    min-height: 0;
-    margin: -2px -6px 0;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    scrollbar-width: thin;
-  }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group + .gallery-todos-group { margin-top: 10px; }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > button,
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > button {
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
+    padding: 0;
     border: 0;
-    border-radius: 6px;
-    background: transparent;
+    border-radius: 4px;
+    background: none;
     font: inherit;
     color: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > button:hover,
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > button:hover { background: var(--doc-hover); }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-doc {
-    padding: 2px 6px;
-    font-size: var(--gallery-meta-size);
-    font-weight: 500;
-    color: var(--doc-muted);
-    overflow: hidden;
     white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
+    cursor: pointer;
   }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items { margin: 0; padding: 0; list-style: none; }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo {
-    flex-wrap: wrap;
-    align-items: baseline;
-    column-gap: 8px;
-    padding: 4px 6px 4px 30px;
-    position: relative;
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc:hover { color: var(--gallery-text); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-group-count { flex: none; margin-left: 2px; font-weight: 400; color: var(--gallery-faint); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc > .gallery-todos-icon { flex: none; display: grid; place-items: center; width: 13px; height: 13px; margin-right: 2px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc > .gallery-todos-icon > img { display: block; width: 12px; height: 12px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc > .gallery-todos-glyph::before { content: ""; width: 12px; height: 12px; background: var(--gallery-faint); -webkit-mask: var(--gallery-todos-icon) center / contain no-repeat; mask: var(--gallery-todos-icon) center / contain no-repeat; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-group-head > .gallery-todos-doc > .gallery-todos-icon:empty::before {
+    content: "";
+    width: 12px;
+    height: 12px;
+    background: var(--gallery-faint);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h6.5L18 8v11a1.5 1.5 0 0 1-1.5 1.5h-9.5A1.5 1.5 0 0 1 5.5 19V5A1.5 1.5 0 0 1 7 3.5z'/%3E%3Cpath d='M13.5 3.5V8H18'/%3E%3C/svg%3E") center / contain no-repeat;
   }
-  /* The box: a rounded square of the muted color's line, filled with the accent and ticked once done. */
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-box,
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check > .gallery-todos-box {
-    position: absolute;
-    top: calc(4px + .725em - 8px);
-    left: 7px;
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items { margin: 0; padding: 0; list-style: none; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check { flex: none; margin: 2px 0 0; padding: 0; border: 0; background: none; cursor: pointer; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item .gallery-todos-box {
+    display: grid;
+    place-items: center;
+    flex: none;
     box-sizing: border-box;
-    width: 16px;
-    height: 16px;
-    border: 1.5px solid color-mix(in srgb, var(--doc-muted) 70%, transparent);
-    border-radius: 5px;
-  }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-text { min-width: 0; overflow-wrap: anywhere; }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-path {
+    width: 15px;
+    height: 15px;
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1.5px var(--gallery-todos-box);
+    color: #fff;
+  }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-box { margin-top: 2px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check:hover > .gallery-todos-box { box-shadow: inset 0 0 0 1.5px var(--gallery-accent); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item .gallery-todos-box > svg { display: block; width: 11px; height: 11px; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-done .gallery-todos-box { background: var(--gallery-accent); box-shadow: none; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     min-width: 0;
-    font-size: var(--gallery-meta-size);
-    color: var(--doc-muted);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo.gallery-todos-done > .gallery-todos-text { color: var(--doc-muted); text-decoration: line-through; }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo.gallery-todos-done > .gallery-todos-box,
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check[aria-checked="true"] > .gallery-todos-box {
-    border-color: transparent;
-    background: var(--gallery-accent) var(--gallery-todos-tick) center / 12px no-repeat;
-  }
-  /* The box as a button of its own (where the workspace takes checks: setTodo), over the item's start: a
-     press checks it in its document, the words beside it still open the document. */
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item { position: relative; }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 30px;
-    height: calc(8px + 1.45em);
     padding: 0;
-    border-radius: 6px 0 0 6px;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
   }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check:hover { background: transparent; }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check:hover > .gallery-todos-box { border-color: var(--doc-muted); }
-  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-check[aria-checked="true"]:hover > .gallery-todos-box { border-color: transparent; }
-  /* Why a check was refused, for a few seconds, under the list. */
-  > .gallery-todos-face > .gallery-todos-note { flex: none; margin: 0; font-size: var(--gallery-meta-size); color: var(--gallery-bad); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo:hover { background: var(--gallery-hover); box-shadow: 0 0 0 3px var(--gallery-hover); }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-text { font-size: 13px; line-height: 19px; color: var(--gallery-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-path { font-size: 11.5px; line-height: 15px; color: var(--gallery-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-done > .gallery-todos-todo > .gallery-todos-text { color: var(--gallery-faint); text-decoration: line-through; text-decoration-color: var(--gallery-faintest); }
+
+  /* Nothing to list: the cards' empty face in the middle. */
+  > .gallery-todos-face > .gallery-todos-empty { grid-area: list; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 0; text-align: center; }
+  > .gallery-todos-face > .gallery-todos-empty[hidden] { display: none; }
+  > .gallery-todos-face > .gallery-todos-empty > p { margin: 0; }
+  > .gallery-todos-face > .gallery-todos-empty > .gallery-todos-line { font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--gallery-text); }
+  > .gallery-todos-face > .gallery-todos-empty > .gallery-todos-hint { font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
+  > .gallery-todos-face > .gallery-todos-empty > .gallery-todos-empty-picture { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 8px; background: var(--gallery-fill); color: var(--gallery-faint); }
+  > .gallery-todos-face > .gallery-todos-empty > .gallery-todos-empty-picture > svg { width: 16px; height: 16px; }
+  > .gallery-todos-face > .gallery-todos-empty[data-picture="done"] > .gallery-todos-empty-picture { position: relative; width: 72px; height: 72px; margin-bottom: 10px; border-radius: 0; background: none; color: var(--gallery-good); }
+  > .gallery-todos-face > .gallery-todos-empty[data-picture="done"] > .gallery-todos-empty-picture > svg:first-child { position: absolute; inset: 0; width: 72px; height: 72px; }
+  > .gallery-todos-face > .gallery-todos-empty[data-picture="done"] > .gallery-todos-empty-picture > svg:first-child > circle { fill: none; stroke: var(--gallery-good); stroke-width: 7; }
+  > .gallery-todos-face > .gallery-todos-empty[data-picture="done"] > .gallery-todos-empty-picture > svg:last-child { width: 26px; height: 26px; stroke-width: 2.4; }
+  > .gallery-todos-face[data-state="done"],
+  > .gallery-todos-face[data-state="none"],
+  > .gallery-todos-face[data-state="unread"] { grid-template-rows: 20px 0 minmax(0, 1fr); }
+  /* A refused check: a line at the foot, over the list, for a few seconds. */
+  > .gallery-todos-face > .gallery-todos-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--gallery-card-fill); box-shadow: 0 0 0 1px var(--gallery-hair), 0 4px 12px -6px rgb(0 0 0 / 20%); font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
   > .gallery-todos-face > .gallery-todos-note[hidden] { display: none; }
-  /* What it says where it lists nothing: in the middle of what the card has left, muted, a quiet
-     picture over it in a soft disc (the cards' empty face), a check in the good green's once all are done. */
-  > .gallery-todos-face > .gallery-todos-line {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    margin: 0;
-    padding: 8px 12px;
-    font-size: 13px;
-    color: var(--doc-muted);
-    text-align: center;
-  }
-  > .gallery-todos-face > .gallery-todos-line::before {
-    content: "";
-    flex: none;
-    width: 44px;
-    height: 44px;
-    margin-bottom: 2px;
-    background: currentColor;
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5L5 7l2.5-2.5M3.5 11.5L5 13l2.5-2.5M3.5 17.5L5 19l2.5-2.5M11 6h9M11 12h9M11 18h9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5.5L5 7l2.5-2.5M3.5 11.5L5 13l2.5-2.5M3.5 17.5L5 19l2.5-2.5M11 6h9M11 12h9M11 18h9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
-  }
-  > .gallery-todos-face[data-state="done"] > .gallery-todos-line::before {
-    background: var(--gallery-good);
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/g%3E%3C/svg%3E");
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill-opacity='.14'/%3E%3Cg transform='translate(11 11) scale(.9167)' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5'/%3E%3C/g%3E%3C/svg%3E");
-  }
-  > .gallery-todos-face > .gallery-todos-line[hidden] { display: none; }
-}
-/* A tall card (280px high and more: 4 high from a window 1440px wide): the ring larger, the key beside it. */
-@container (min-height: 280px) {
-  [data-doc-component="gallery/todos"] > .gallery-todos-face { --gallery-todos-ring: 88px; }
-  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-summary { gap: 20px; }
-  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key { max-width: 200px; gap: 6px; }
-  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-summary > .gallery-todos-key > .gallery-todos-key-row { font-size: 14px; }
-}
-/* A wide card (8 cells): the documents side by side, two to a row, the list still scrolling down. */
-@container (min-width: 560px) {
-  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px 24px; }
-  [data-doc-component="gallery/todos"] > .gallery-todos-face > .gallery-todos-list > .gallery-todos-group + .gallery-todos-group { margin-top: 0; }
+
+  /* A tall card: the ring beside the open count. */
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-summary { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-summary[hidden] { display: none; }
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-summary > :is(.gallery-todos-progress, .gallery-todos-ticks) { display: none; }
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-summary > :is(.gallery-todos-ring, .gallery-todos-big) { display: block; }
+  > .gallery-todos-face[data-layout="tall"] > .gallery-todos-list { margin-top: 10px; }
+  /* A wide card: the ring and the key at the left, the list at the right, each item's headings at its right. */
+  > .gallery-todos-face[data-layout="wide"] { grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: 20px minmax(0, 1fr); grid-template-areas: "head head" "summary list"; column-gap: 28px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary { display: flex; flex-direction: column; margin-top: 4px; padding-top: 4px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary[hidden] { display: none; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary > :is(.gallery-todos-progress, .gallery-todos-ticks) { display: none; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary > .gallery-todos-ring { display: block; align-self: flex-start; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary > .gallery-todos-ring > .gallery-todos-percent { font-size: 22px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-summary > .gallery-todos-key { display: flex; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-list { margin-top: 4px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-list > .gallery-todos-group > .gallery-todos-items > .gallery-todos-item > .gallery-todos-todo > .gallery-todos-path { flex: none; max-width: 45%; }
+  > .gallery-todos-face[data-layout="wide"] > .gallery-todos-empty { grid-column: 1 / -1; }
+  > .gallery-todos-face[data-layout="wide"]:is([data-state="done"], [data-state="none"], [data-state="unread"]) { grid-template-areas: "head head" "list list"; }
 }
-/* On a custom page the face is the card's: as high as what the card holds inside its padding. Where no
-   card is around it (a document, as gallery block check shows it) it is a few items high. */
-[data-doc-component="gallery/todos"] { height: 16em; }
+/* On a custom page the face fills the card the board frames. */
 .gallery-card > [data-doc-component="gallery/todos"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/todos"] > .gallery-todos-face { height: 100%; }

package/packs/gallery/todos/writing.md

@@ -27,4 +27,4 @@ The card follows by itself: a to-do added, checked or taken out in any document
 
 ## How it looks
 
-我的待办 beside a checked list's chip on the top line, how many to-dos there are at its end (共 6 项); under it how many are done of all, a ring of the share done (larger on a tall card) and the two counts; then each document's title small and muted over its items, an item a rounded box (filled with the accent once checked), its words and the headings it stands under (but the document's title, which its group's says); on an 8 × 4 card the documents two to a row; in the kit's card tokens (as every Gallery card: a head of a tinted chip and a title, its end clear of the card's grip), light and dark. With every to-do done, the ring stands in the middle (green at 100%) over 待办都完成了; with no to-do it says 所有文档里的待办会出现在这里. In an exported file, which has no workspace to read, it says the list shows when the page is opened in Gallery; its boxes there are drawn and do nothing. The script runs with the rights of the page's own scripts, as any block's does.
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. Its head is a checked list's chip, 我的待办 and how many are open. A 4 × 4 card shows how many are done as a line (已完成 19 / 27 and the percent) over a row of ticks, one an item, done in the accent (a bar past 48); a 4 × 6 card a ring of the share beside the open count large (8 项没完成), its head saying how many documents they come from; an 8 × 4 card a ring at the left over a key (已完成, 未完成, 来自文档), each item's headings at its right. The list is grouped by document, small and gray (its icon, its title, its open count), each item a box, its words and the headings it stands under; it fades at its foot while there is more under it. An item checked on the card stays, struck through, until the page is opened again. With none, or all done (a full green ring with a tick), it says so in the middle.

package/packs/gallery/weather/component.json

@@ -1,7 +1,7 @@
 {
   "id": "gallery/weather",
   "apiVersion": 1,
-  "version": "1.2.0",
+  "version": "2.0.0",
   "name": { "zh": "天气", "en": "Weather" },
   "description": { "zh": "一个城市现在的天气和接下来几天的预报，数据来自 Open-Meteo，要先允许联网", "en": "A city's weather now and for the days ahead, from Open-Meteo, once the reader lets it online" },
   "words": "tianqi qiwen yubao weather forecast temperature 天气 气温 预报 温度 下雨",
@@ -10,7 +10,7 @@
   },
   "runtime": { "generated": [":scope > .gallery-weather-face"] },
   "places": ["page"],
-  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "resize": true },
+  "card": { "sizes": [[4, 2], [2, 2], [4, 4]], "resize": true, "consent": { "zh": "允许联网之后显示天气", "en": "Allow internet access to show the weather" } },
   "settings": [
     { "key": "city", "label": { "zh": "城市", "en": "City" }, "type": "text", "default": "", "required": true },
     { "key": "unit", "label": { "zh": "单位", "en": "Unit" }, "type": "select", "options": ["℃", "℉"], "default": "℃" }