@gallerist/theme-default 0.4.0 → 0.5.0

package/README.md

@@ -41,10 +41,47 @@ screen; an inline viewer keeps it. Keep them with `--gallerist-phone-zoom: flex`
 shows − and + only). A bar whose only tools are these two (and `controls: false`) still shows on a
 phone, empty: leave the plugins out there, or keep the tools with the tokens.
 
+The bar's tools are `--gallerist-tool-size` (44px) with `--gallerist-tool-icon` glyphs (22px;
+Close's `--gallerist-close-icon`, the tool glyph unless set). With a fine pointer (a mouse or trackpad)
+the Console skin's bar is compact: 36px tools, 18px glyphs, Close's 2px larger (Console sets
+`--gallerist-close-icon` to `--gallerist-tool-icon` + 2px, so it follows a page's glyph size; set it
+too to size Close apart), and plugin-zoom's "− 100% +" one bordered group 30px tall
+(`--gallerist-zoom-group: 1`; 0, the default, keeps three loose tools; a unitless 0 or 1, nothing
+else). A touch keeps 44px targets; Gallery and Editorial keep 44px tools. `--gallerist-close-rule` is
+the room before Close (a length: Console 9px; 0px, the default, none), not the line: the 1 × 20 hairline in it is
+drawn as a border, so forced colours keep it.
+
+The rail (`.gallerist-thumbs`) has a `scroll-padding` of `--gallerist-rail-fade` (40px) at its ends,
+inline on a sideways rail and block on a side rail: plugin-thumbnails reads it to keep the current
+card clear of the end fades and the ‹ › buttons in them, and a card focused with Tab lands clear too.
+On a phone (600px wide or less with a coarse pointer, where the ‹ › buttons never show) the fade is
+16px (0.5), so the current card kept clear of it leaves room for the next card whole beside it. A
+page's own `--gallerist-rail-fade` wins (the theme's tokens are in a cascade layer).
+
+Loading (0.5): an item's `placeholder` image is blurred `--gallerist-placeholder-blur` (6px) and
+clipped to the image's box; the image fades in over it in `--gallerist-dur-reveal` (150ms). A box
+with no size to go by takes `--gallerist-media-ratio` (`3 / 2`). A load still running after
+`--gallerist-loading-delay` (400ms) shows a "Loading full size" pill (the panel, hairline and muted
+text tokens; no warning colours). With no placeholder the box is a skeleton after 300ms:
+`--gallerist-placeholder` with a `--gallerist-shimmer` sweep, gone at once when the image is in. No
+loading animation outlives the load. See the renderer's README.
+
+The rail's current label (a flat rail's group label, a timeline's time label) is
+`--gallerist-label-current` (the accent) at `--gallerist-label-current-weight` (500). A focused thumb's
+ring is 2px `--gallerist-focus` in `--gallerist-thumb-focus-style` (`solid`; `dashed` tells it apart
+from a solid selection ring), 2px out, or `--gallerist-thumb-focus-offset-current` (2px) out on the
+current thumb, whose ring (`--gallerist-thumb-ring`, `--gallerist-item-ring`) may sit outside it. A
+focused thumb that isn't current shows at `--gallerist-thumb-focus-opacity` (1, as when hovered);
+`var(--gallerist-thumb-idle-opacity)` keeps it dimmed, so only the current one is bright (hover still
+brightens it).
+
 The theme follows `forced-colors: active` (Windows High Contrast): the View popover's chosen segment
 takes the system's selection colours and the focus rings the text colour. The rail's
 item clusters (`thumbnails({ cluster })`) use `--gallerist-cluster-inner` (2px) inside a cluster and
-`--gallerist-cluster-gap` (8px) between two.
+`--gallerist-cluster-gap` (8px) between two. An item thumb's badge (`thumbnails({ renderItemBadge })`)
+sits `--gallerist-thumb-badge-inset-block` from its image's top and bottom, as `inset-block` takes
+them: `3px auto`, the top end corner; `auto 3px` puts it in the bottom end corner, still on the image
+(a caption band under it stays clear).
 
 Full docs: the [monorepo README](https://github.com/shafayet9780/gallerist#readme) and [`docs/`](https://github.com/shafayet9780/gallerist/tree/main/docs).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gallerist/theme-default",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Default Gallerist theme — pure CSS, no JS dependency. Driven by --gallerist-* custom properties.",
   "license": "MIT",
   "sideEffects": [

package/src/base.css

@@ -15,6 +15,16 @@
   .gallerist {
     /* structure: sizes every skin shares (a skin may tune them; the layout lint checks each skin) */
     --gallerist-target: 44px;
+    /* the bar's tools: their box and glyph (Close's glyph its own); Console takes 36 / 18 / 20 with
+       a fine pointer. A touch keeps the 44px target. */
+    --gallerist-tool-size: var(--gallerist-target);
+    --gallerist-tool-icon: 22px;
+    --gallerist-close-icon: var(--gallerist-tool-icon);
+    /* plugin-zoom's − 100% +: 0 three loose tools, 1 one bordered group a tool's height less 6px
+       (Console with a fine pointer) */
+    --gallerist-zoom-group: 0;
+    /* room before Close, a hairline 20px tall at its start (Console 9px; 0: none) */
+    --gallerist-close-rule: 0px;
     --gallerist-thumb-h: 84px;
     --gallerist-rail-handle-h: 22px;
     --gallerist-toolbar-h: 56px; /* toolbar band height; a vertical rail starts below it */
@@ -33,6 +43,13 @@
     --gallerist-dur-gentle: 280ms;
     --gallerist-dur-exit: 180ms; /* exits run shorter than entrances */
     --gallerist-dur-panel: 220ms; /* the rail collapsing, the item column opening (plugin-thumbnails) */
+    --gallerist-dur-reveal: 150ms; /* a loaded image fading in over its placeholder */
+
+    /* loading: an image placeholder's blur, the ratio of a box with no size to go by (a skeleton),
+       and how long a load runs before its "Loading full size" pill shows */
+    --gallerist-placeholder-blur: 6px;
+    --gallerist-media-ratio: 3 / 2;
+    --gallerist-loading-delay: 400ms;
 
     /* the accent: each skin names its accents as a dark/light pair, the scheme picks one */
     --gallerist-accent: var(--gallerist-accent-dark);
@@ -87,6 +104,16 @@
     /* item clusters (thumbnails `cluster`): the gap inside one, and between two */
     --gallerist-cluster-inner: 2px;
     --gallerist-cluster-gap: 8px;
+    /* an item thumb's badge (thumbnails `renderItemBadge`), its `inset-block` from the image's edges:
+       the top end corner; `auto 3px` takes it to the bottom end */
+    --gallerist-thumb-badge-inset-block: 3px auto;
+    /* the rail's current group label (flat) or time label (timeline), and a focused thumb's ring:
+       its outline-style, and its offset on the current thumb (whose ring is outside it). A focused
+       thumb that isn't current: --gallerist-thumb-focus-opacity (unset: 1) */
+    --gallerist-label-current: var(--gallerist-accent);
+    --gallerist-label-current-weight: 500;
+    --gallerist-thumb-focus-style: solid;
+    --gallerist-thumb-focus-offset-current: 2px;
 
     /* popovers (the View menu, the shortcut list) sit a step above the bands; a segmented control
        is a recessed track with its checked segment raised */
@@ -100,6 +127,13 @@
     --gallerist-arrow-hover-bg: var(--gallerist-arrow-bg);
     --gallerist-itemnav-button-hover-bg: var(--gallerist-itemnav-button-bg);
   }
+  /* a phone's rail fades 16px (no ‹ › page buttons sit in it on touch): the current card kept clear
+     of the fade leaves room for the card ahead whole beside it */
+  @media (max-width: 600px) and (pointer: coarse) {
+    .gallerist {
+      --gallerist-rail-fade: 16px;
+    }
+  }
 }
 
 .gallerist {
@@ -297,14 +331,143 @@
   width: 100%;
   height: 100%;
   object-fit: contain;
-  background-repeat: no-repeat;
-  background-position: center;
   opacity: 0;
-  transition: opacity 180ms ease-out;
+  transition: opacity var(--gallerist-dur-reveal) var(--gallerist-ease-out);
 }
 .gallerist-media-image[data-gallerist-loaded] {
   opacity: 1;
 }
+.gallerist-media-image[data-gallerist-error] {
+  visibility: hidden;
+}
+/* `item.placeholder` in the image's box (ratio: naturalSize, the placeholder's, or the token). An
+   image one is blurred, overscanned 2× the blur and clipped (no fringe), sharp as the image fades in,
+   then hidden; a failure keeps it, sharp. None: a skeleton after 300ms, gone when the image is in. */
+.gallerist-content {
+  container-type: size;
+}
+.gallerist-media-placeholder {
+  --_i: 0px;
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: min(100cqw - 2 * var(--_i), (100cqh - 2 * var(--_i)) * var(--gallerist-media-ratio));
+  height: min(100cqh - 2 * var(--_i), (100cqw - 2 * var(--_i)) / (var(--gallerist-media-ratio)));
+  overflow: hidden;
+}
+.gallerist[data-gallerist-frame] .gallerist-media-placeholder {
+  --_i: var(--gallerist-frame-inset);
+}
+.gallerist-media-placeholder > img {
+  --_o: calc(-2 * var(--gallerist-placeholder-blur));
+  position: absolute;
+  inset: var(--_o);
+  width: calc(100% - 2 * var(--_o));
+  height: calc(100% - 2 * var(--_o));
+  object-fit: cover;
+  filter: blur(var(--gallerist-placeholder-blur));
+  transition: var(--gallerist-dur-reveal) var(--gallerist-ease-out);
+  transition-property: filter, inset, width, height;
+}
+.gallerist-media-placeholder:is([data-gallerist-loaded], [data-gallerist-error]) > img {
+  --_o: 0px;
+  filter: none;
+}
+.gallerist-media-placeholder[data-gallerist-loaded] {
+  visibility: hidden;
+  transition: visibility 0s var(--gallerist-dur-reveal);
+}
+[data-gallerist-skeleton]:not([data-gallerist-loaded]) {
+  background: var(--gallerist-placeholder);
+  animation: gallerist-fade var(--gallerist-dur-exit) 0.3s backwards;
+}
+[data-gallerist-skeleton]:not([data-gallerist-loaded])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+      100deg,
+      transparent 30%,
+      var(--gallerist-shimmer) 50%,
+      transparent 70%
+    )
+    150% 0 / 220% 100%;
+  animation: gallerist-shimmer 1.4s ease-in-out 0.3s infinite;
+}
+@keyframes gallerist-shimmer {
+  to {
+    background-position: -50% 0;
+  }
+}
+/* a slow load's pill, bottom end: after the delay, or at once on a failure (Retry). Neutral */
+.gallerist-media-pill {
+  position: absolute;
+  bottom: 12px;
+  inset-inline-end: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 24px);
+  min-height: 30px;
+  box-sizing: border-box;
+  padding: 2px 12px 2px 10px;
+  border: 1px solid var(--gallerist-hairline);
+  border-radius: 99px;
+  background: var(--gallerist-panel);
+  color: var(--gallerist-fg-muted);
+  font: 12.5px / 1.3 var(--gallerist-font);
+  animation: gallerist-fade var(--gallerist-dur-exit) var(--gallerist-loading-delay) backwards;
+}
+/* the spinner; on a failure, a ! in a ring */
+.gallerist-media-pill::before {
+  content: "";
+  flex: none;
+  box-sizing: border-box;
+  width: 13px;
+  height: 13px;
+  border: 1.5px solid;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  font: 700 9px / 10px var(--gallerist-font);
+  text-align: center;
+  animation: gallerist-spin 0.9s linear infinite;
+}
+[data-gallerist-error] > .gallerist-media-pill {
+  color: var(--gallerist-fg);
+  animation: none;
+}
+[data-gallerist-error] > .gallerist-media-pill::before {
+  content: "!";
+  border-color: currentColor;
+  animation: none;
+}
+.gallerist-media-pill > button {
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: 3px 2px;
+  border-radius: 4px;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.gallerist-media-pill > button::before {
+  content: "·" / "";
+  display: inline-block;
+  margin-inline-end: 8px;
+  color: var(--gallerist-fg-muted);
+}
+.gallerist-media-pill > button:focus-visible {
+  outline: 2px solid var(--gallerist-focus);
+  outline-offset: 2px;
+}
+@keyframes gallerist-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
 /* A failed load shows a centered error card (icon + the item's alt as a caption) instead of a
    blank stage or the browser's default top-left broken-image glyph (I-UX3). The broken <img>
    itself stays hidden (opacity:0); the adapter injects .gallerist-media-error as a sibling. */
@@ -330,34 +493,14 @@
   max-width: 40ch;
   color: var(--gallerist-fg);
 }
-/* Loading shimmer for slow media — shown only while an image is still pending (no loaded/error
-   marker yet), delayed so fast loads never flash it. Degrades to nothing where :has is absent. */
-.gallerist-content:has(
-    .gallerist-media-image:not([data-gallerist-loaded]):not([data-gallerist-error])
-  )::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: linear-gradient(
-    100deg,
-    transparent 35%,
-    var(--gallerist-shimmer) 50%,
-    transparent 65%
-  );
-  background-size: 200% 100%;
-  animation: gallerist-shimmer 1.4s ease-in-out 0.6s infinite;
-}
-@keyframes gallerist-shimmer {
-  from {
-    background-position: 150% 0;
-  }
-  to {
-    background-position: -50% 0;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
-  .gallerist-content::before {
+  .gallerist-media-placeholder > img {
+    --_o: 0px;
+    filter: none;
+    transition: none;
+  }
+  [data-gallerist-skeleton]:not([data-gallerist-loaded])::after,
+  .gallerist-media-pill::before {
     animation: none;
   }
 }
@@ -497,6 +640,9 @@
   align-items: center;
   padding: 8px 12px;
   overflow-x: auto;
+  /* a card brought into view (the current one, a focused one) lands clear of the end fades, and of
+     the ‹ › page buttons in them (plugin-thumbnails reads it) */
+  scroll-padding-inline: var(--gallerist-rail-fade);
   scrollbar-width: none;
   -webkit-user-select: none;
   user-select: none;
@@ -509,6 +655,7 @@
 }
 .gallerist-thumbs[data-gallerist-scroll="y"] {
   --_fade-to: to bottom;
+  scroll-padding: var(--gallerist-rail-fade) 0;
 }
 .gallerist[data-gallerist-dir="rtl"] .gallerist-thumbs[data-gallerist-scroll="x"] {
   --_fade-to: to left;
@@ -606,21 +753,27 @@
   border-color: var(--gallerist-thumb-active-border);
   box-shadow: var(--gallerist-thumb-ring);
 }
-.gallerist-thumb:not([data-active]) > .gallerist-thumb-img,
-.gallerist-thumb-item:not([data-active]) > .gallerist-thumb-img {
+:is(.gallerist-thumb, .gallerist-thumb-item):not([data-active]) > .gallerist-thumb-img {
   opacity: var(--gallerist-thumb-idle-opacity);
   transition: opacity var(--gallerist-dur-gentle) var(--gallerist-ease-out);
 }
-.gallerist-thumb:is(:hover, :focus-visible) > .gallerist-thumb-img,
-.gallerist-thumb-item:is(:hover, :focus-visible) > .gallerist-thumb-img {
+:is(.gallerist-thumb, .gallerist-thumb-item):not([data-active]):focus-visible
+  > .gallerist-thumb-img {
+  opacity: var(--gallerist-thumb-focus-opacity, 1);
+}
+:is(.gallerist-thumb, .gallerist-thumb-item):not([data-active]):hover > .gallerist-thumb-img {
   opacity: 1;
 }
 .gallerist-thumb:focus-visible,
 .gallerist-thumb-item:focus-visible,
 .gallerist-grid-cell:focus-visible {
-  outline: 2px solid var(--gallerist-focus);
+  outline: 2px var(--gallerist-thumb-focus-style) var(--gallerist-focus);
   outline-offset: 2px;
 }
+/* the current thumb's ring is outside it: focus there may sit further out */
+:is(.gallerist-thumb, .gallerist-thumb-item)[data-active]:focus-visible {
+  outline-offset: var(--gallerist-thumb-focus-offset-current);
+}
 .gallerist-thumb-img {
   width: 100%;
   object-fit: cover;
@@ -707,10 +860,13 @@
 .gallerist-thumbs-aside[hidden] {
   display: none;
 }
+/* a grid, not a flex column: its image's row is a box the badge can sit in (a caption band or a
+   touch's 44px under the image stay out of it) */
 .gallerist-thumb-item {
   position: relative;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-content: start;
   flex: 0 0 auto;
   width: calc(var(--gallerist-thumb-h) * 1.2);
   padding: 0;
@@ -810,10 +966,11 @@
   isolation: isolate; /* keeps the track line behind its own label */
 }
 .gallerist-thumb-wrap[data-active] .gallerist-thumb-time {
-  color: var(--gallerist-accent);
+  color: var(--gallerist-label-current);
+  font-weight: var(--gallerist-label-current-weight);
 }
 .gallerist-thumb-wrap[data-active] .gallerist-thumb-time::before {
-  background: var(--gallerist-accent);
+  background: var(--gallerist-label-current);
 }
 /* numbered items (thumbnails `numberItems`) */
 .gallerist-thumb-num {
@@ -932,7 +1089,8 @@
   font-family: var(--gallerist-mono);
 }
 .gallerist-thumb-group[data-active] .gallerist-thumb-group-cap {
-  color: var(--gallerist-accent);
+  color: var(--gallerist-label-current);
+  font-weight: var(--gallerist-label-current-weight);
 }
 .gallerist-thumb-group-row {
   display: flex;
@@ -981,7 +1139,7 @@
 .gallerist-thumb-group-head {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px; /* the label, then the meta (the mockup) */
   min-height: 14px;
 }
 .gallerist-thumb-group-head[hidden] {
@@ -996,10 +1154,13 @@
   width: calc(var(--gallerist-thumb-h) * 1.4);
   min-height: 14px;
 }
-/* an item's badge: the top end corner (a number from `numberItems` has the start) */
+/* an item's badge: the image's top end corner (a number from `numberItems` has the start), or its
+   bottom end with `--gallerist-thumb-badge-inset-block: auto 3px`; placed in the image's grid row (an
+   absolute box's `auto` grid line is the thumb's edge: the row's end line is named) */
 .gallerist-thumb-badge {
   position: absolute;
-  top: 3px;
+  grid-row: 1 / 2;
+  inset-block: var(--gallerist-thumb-badge-inset-block);
   inset-inline-end: 3px;
   display: flex;
   align-items: center;
@@ -1119,6 +1280,8 @@
   backdrop-filter: var(--gallerist-blur);
 }
 .gallerist-bar button {
+  min-width: var(--gallerist-tool-size);
+  min-height: var(--gallerist-tool-size);
   border: var(--gallerist-tool-border);
   background: var(--gallerist-tool-bg);
   color: var(--gallerist-tool-fg);
@@ -1171,21 +1334,77 @@
   display: block;
   pointer-events: none;
 }
+.gallerist-bar .gallerist-icon {
+  width: var(--gallerist-tool-icon);
+  height: var(--gallerist-tool-icon);
+}
+.gallerist-bar .gallerist-close .gallerist-icon {
+  width: var(--gallerist-close-icon);
+  height: var(--gallerist-close-icon);
+}
+/* a hairline before Close, in the room --gallerist-close-rule makes (none at 0) */
+.gallerist-bar .gallerist-close {
+  position: relative;
+  margin-inline-start: var(--gallerist-close-rule);
+}
+.gallerist-bar .gallerist-close::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(-1 * var(--gallerist-close-rule));
+  top: calc(50% - 10px);
+  height: 20px;
+  /* a border, not a background: forced colours keep a border's line (in the text colour) */
+  border-inline-start: min(1px, var(--gallerist-close-rule)) solid var(--gallerist-hairline);
+  pointer-events: none;
+}
 
 /* ── the zoom tool (plugin-zoom): − 100% + ───────────────────────────────────────── */
+/* --gallerist-zoom-group (--_g) 0: three tools 2px apart; 1: one group in a hairline, its parts
+   6px narrower and 8px shorter than a tool (30 × 28 of 36), the percentage between two hairlines */
 .gallerist-zoom-tool {
+  --_g: var(--gallerist-zoom-group);
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: calc(2px - 2px * var(--_g));
+  border: calc(1px * var(--_g)) solid var(--gallerist-hairline);
+  border-radius: var(--gallerist-radius);
 }
 .gallerist-zoom-tool[hidden] {
   display: none;
 }
+/* (a bar tool's specificity, so the percentage's own width wins) */
+.gallerist-zoom-tool > button {
+  min-width: calc(var(--gallerist-tool-size) - 6px * var(--_g));
+  min-height: calc(var(--gallerist-tool-size) - 8px * var(--_g));
+  border-radius: calc(var(--gallerist-control-radius) * (1 - var(--_g)));
+}
+/* the group's ends follow its corners */
+.gallerist-bar .gallerist-zoom-tool > :first-child {
+  border-start-start-radius: var(--_r);
+  border-end-start-radius: var(--_r);
+}
+.gallerist-bar .gallerist-zoom-tool > :last-child {
+  border-start-end-radius: var(--_r);
+  border-end-end-radius: var(--_r);
+}
+.gallerist-zoom-tool > * {
+  --_r: calc(
+    var(--gallerist-control-radius) *
+    (1 - var(--_g)) +
+    (var(--gallerist-radius) - 1px) *
+    var(--_g)
+  );
+}
+.gallerist-bar .gallerist-zoom-tool .gallerist-icon {
+  width: calc(var(--gallerist-tool-icon) - 3px * var(--_g));
+  height: calc(var(--gallerist-tool-icon) - 3px * var(--_g));
+}
 .gallerist-bar .gallerist-zoom-level {
   min-width: 4.5em;
   padding: 0 4px;
-  font: 600 13px / 1 var(--gallerist-mono);
+  font: 600 calc(13px - 1px * var(--_g)) / 1 var(--gallerist-mono);
   font-variant-numeric: tabular-nums;
+  border-inline: calc(1px * var(--_g)) solid var(--gallerist-hairline);
 }
 /* at fit there's nothing to reset: the percentage keeps its colour */
 .gallerist-bar .gallerist-zoom-level[aria-disabled="true"] {
@@ -2127,8 +2346,8 @@
 }
 
 /* the `tour` preset: the photo keeps clear of the arrows and the item navigator */
-.gallerist[data-gallerist-preset="tour"][data-gallerist-frame] .gallerist-media,
-.gallerist[data-gallerist-preset="tour"][data-gallerist-frame] .gallerist-media-image {
+.gallerist[data-gallerist-preset="tour"][data-gallerist-frame]
+  :is(.gallerist-media, .gallerist-media-placeholder) {
   border-radius: 16px;
 }
 
@@ -2509,7 +2728,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .gallerist-media-image,
   .gallerist-bar,
   .gallerist-controls > button,
   .gallerist-itemnav,
@@ -2584,6 +2802,10 @@
     padding-inline: max(8px, env(safe-area-inset-left, 0px))
       max(8px, env(safe-area-inset-right, 0px));
   }
+  /* the hairline before Close keeps the middle of its room (the bar's gap is 4px less here) */
+  .gallerist-bar .gallerist-close::before {
+    inset-inline-start: calc(2px - var(--gallerist-close-rule));
+  }
   .gallerist-title {
     font-size: 13px;
   }

package/src/console.css

@@ -39,7 +39,7 @@
     --gallerist-caption-band: transparent;
     --gallerist-group-bg: #1a1c1f;
     --gallerist-placeholder: rgb(255 255 255 / 0.04);
-    --gallerist-shimmer: rgb(255 255 255 / 0.05);
+    --gallerist-shimmer: rgb(255 255 255 / 0.09); /* a skeleton's sweep: plain on the dark stage */
     --gallerist-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
     --gallerist-stack-shadow: 3px 3px 0 -1px #3a3f46, 6px 6px 0 -2px #2a2e34;
     --gallerist-blur: none;
@@ -63,6 +63,7 @@
     --gallerist-tool-border: 0 solid transparent;
     --gallerist-tool-fg: var(--gallerist-fg-muted);
     --gallerist-tool-hover-bg: #1e2125;
+    --gallerist-close-rule: 9px; /* a hairline before Close */
     --gallerist-arrow-size: var(--gallerist-target);
     --gallerist-arrow-bg: var(--gallerist-chrome-bg);
     --gallerist-arrow-border: 1px solid var(--gallerist-hairline);
@@ -115,6 +116,17 @@
     --gallerist-seg-on-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5);
   }
 
+  /* a compact bar for a mouse or trackpad (the mockup): 36px tools, 18px glyphs (Close 20px), the
+     zoom tool one bordered group. A touch keeps 44px targets. */
+  @media (pointer: fine) {
+    .gallerist[data-gallerist-skin="console"] {
+      --gallerist-tool-size: 36px;
+      --gallerist-tool-icon: 18px;
+      --gallerist-close-icon: calc(var(--gallerist-tool-icon) + 2px); /* 20px: follows the glyphs */
+      --gallerist-zoom-group: 1;
+    }
+  }
+
   /* accents */
   .gallerist[data-gallerist-skin="console"][data-gallerist-accent="cyan"] {
     --gallerist-accent-dark: #3cc8dc;

package/src/gallery.css

@@ -36,7 +36,7 @@
     --gallerist-caption-band: transparent;
     --gallerist-group-bg: rgb(255 255 255 / 0.05);
     --gallerist-placeholder: rgb(255 255 255 / 0.04);
-    --gallerist-shimmer: rgb(255 255 255 / 0.06);
+    --gallerist-shimmer: rgb(255 255 255 / 0.08);
     --gallerist-shadow: 0 16px 40px rgb(0 0 0 / 0.5);
     --gallerist-stack-shadow: 3px 3px 0 -1px #2c2c2f, 6px 6px 0 -2px #232326;
     --gallerist-blur: blur(16px) saturate(140%);