@gallerist/theme-default 0.0.0-stage → 0.3.0

package/src/grid.css

@@ -0,0 +1,143 @@
+/*
+ * @gallerist/theme-default — grid.css: styles for @gallerist/plugin-grid, drawn from the skin's
+ * tokens. Included by gallerist.css.
+ */
+
+/* ── grid (plugin-grid) ────────────────────────────────────────────────────── */
+.gallerist-grid {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--gallerist-panel);
+  backdrop-filter: blur(8px);
+}
+.gallerist-grid-header {
+  position: sticky;
+  top: 0;
+  padding: 12px 4px 8px;
+  font: 500 14px var(--gallerist-font);
+  color: var(--gallerist-fg);
+  background: var(--gallerist-panel);
+}
+.gallerist-grid-cells {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.gallerist-grid-cell {
+  aspect-ratio: 3 / 2;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--gallerist-thumb-radius);
+  overflow: hidden;
+  cursor: pointer;
+  background: var(--gallerist-cell-bg);
+}
+.gallerist-grid-cell[data-active] {
+  border-color: var(--gallerist-selection);
+}
+.gallerist-grid-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ── overview (`layout: 'sections'`) ───────────────────────────────────────── */
+.gallerist-grid[data-layout="sections"] {
+  padding: 24px clamp(16px, 4vw, 48px);
+  background: var(--gallerist-bg);
+  backdrop-filter: none;
+}
+.gallerist-grid-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.gallerist-grid-title {
+  font: 600 28px / 1.2 var(--gallerist-font);
+  color: var(--gallerist-fg);
+}
+.gallerist-grid-start {
+  margin-inline-start: auto;
+  min-height: 48px;
+  padding: 0 24px;
+  border: 0;
+  border-radius: 999px;
+  font: 600 15px var(--gallerist-font);
+  color: var(--gallerist-accent-fg);
+  background: var(--gallerist-accent);
+  cursor: pointer;
+}
+.gallerist-grid-start:focus-visible {
+  outline: 2px solid var(--gallerist-focus);
+  outline-offset: 2px;
+}
+.gallerist-grid-sections {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
+  align-items: start;
+  gap: 24px;
+}
+.gallerist-grid-section {
+  padding: 12px;
+  border-radius: 20px;
+  background: var(--gallerist-surface);
+  box-shadow: 0 0 0 1px var(--gallerist-hairline);
+}
+.gallerist-grid-section-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px 10px;
+}
+.gallerist-grid-section-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 16px var(--gallerist-font);
+  color: var(--gallerist-fg);
+}
+.gallerist-grid-section-count {
+  flex: none;
+  min-width: 24px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  font: 500 12px var(--gallerist-font);
+  text-align: center;
+  color: var(--gallerist-fg-muted);
+  background: var(--gallerist-group-bg);
+}
+.gallerist-grid-section-sub {
+  flex: none;
+  margin-inline-start: auto;
+  font: 400 12px var(--gallerist-font);
+  color: var(--gallerist-fg-muted);
+}
+.gallerist-grid-section-cells {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+.gallerist-grid-section-cells > .gallerist-grid-cell {
+  position: relative;
+  border-radius: 12px;
+}
+.gallerist-grid-section-cells > .gallerist-grid-cell:first-child {
+  grid-column: 1 / -1;
+  aspect-ratio: 5 / 3;
+}
+.gallerist-grid-more {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font: 600 14px var(--gallerist-font);
+  color: var(--gallerist-fg);
+  background: var(--gallerist-scrim);
+}

package/src/pins.css

@@ -0,0 +1,252 @@
+/*
+ * @gallerist/theme-default — pins.css: styles for @gallerist/plugin-pins, drawn from the skin's
+ * tokens (--gallerist-pin-* and the shared surfaces). Included by gallerist.css.
+ */
+
+/* ── pins (plugin-pins): points on the image that open a card ─────────────────────
+   The overlay host is counter-scaled, so a pin keeps its screen size under zoom. The marker is a
+   44px hit area around a smaller dot; the card opens beside it, placed by the plugin (left, top,
+   max-width, max-height) inside the stage's free room. */
+.gallerist-pin {
+  position: relative;
+}
+.gallerist-pin[hidden] {
+  display: none;
+}
+.gallerist-pin-marker {
+  display: grid;
+  place-items: center;
+  width: var(--gallerist-target);
+  height: var(--gallerist-target);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+/* numbered (comment, feature): an accent disc with the number */
+.gallerist-pin-dot {
+  display: grid;
+  place-items: center;
+  min-width: var(--gallerist-pin-size);
+  height: var(--gallerist-pin-size);
+  padding: 0 6px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  background: var(--gallerist-pin-bg);
+  color: var(--gallerist-pin-fg);
+  font: 600 12px var(--gallerist-font);
+  font-variant-numeric: tabular-nums;
+  box-shadow: 0 0 0 2px var(--gallerist-pin-ring), 0 2px 8px rgb(0 0 0 / 0.35);
+  transition: transform var(--gallerist-dur-gentle) var(--gallerist-ease-pop);
+}
+.gallerist-pin[data-resolved] .gallerist-pin-dot {
+  background: var(--gallerist-pin-resolved-bg);
+  color: var(--gallerist-pin-resolved-fg);
+}
+/* tag: a frosted ring with a white centre (it sits on photos, so it doesn't follow the scheme) */
+.gallerist-pin[data-presentation="tag"] .gallerist-pin-dot {
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  padding: 0;
+  background: rgb(255 255 255 / 0.28);
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 2px 8px rgb(0 0 0 / 0.3);
+  backdrop-filter: blur(4px);
+}
+.gallerist-pin[data-presentation="tag"] .gallerist-pin-dot::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #fff;
+}
+.gallerist-pin-marker:hover .gallerist-pin-dot,
+.gallerist-pin[data-open] .gallerist-pin-dot {
+  transform: scale(1.12);
+}
+.gallerist-pin-marker:focus-visible {
+  outline: none;
+}
+/* the ring over the image, whatever its colours (technique C40): a band of --gallerist-focus-halo
+   (black) and a white band around the dot, then the focus colour (the outline). Black and white are
+   21:1 apart, so one of the two reaches 3:1 (at least 4.58:1) against any media under it, whatever
+   the skin, scheme or accent; the focus colour alone can match the image. 3px each, so at least 2
+   whole screen pixels of each stay solid wherever the pin lands between pixels. In forced colours the
+   box-shadow bands go and the outline stays, in a system colour. */
+.gallerist-pin-marker:focus-visible .gallerist-pin-dot {
+  outline: 2px solid var(--gallerist-focus);
+  outline-offset: 6px;
+  box-shadow: 0 0 0 3px var(--gallerist-focus-halo), 0 0 0 6px #fff, 0 2px 8px rgb(0 0 0 / 0.35);
+}
+.gallerist-pin[data-presentation="tag"] .gallerist-pin-marker:focus-visible .gallerist-pin-dot {
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6), 0 0 0 3px var(--gallerist-focus-halo), 0 0 0
+    6px #fff, 0 2px 8px rgb(0 0 0 / 0.3);
+}
+.gallerist-pin-card {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 4px); /* until the plugin places it */
+  z-index: 1;
+  /* block layout, so a host's contents lay out as on the page (inline siblings share a line, a
+     button keeps its width, margins collapse); the close button comes first and takes no room */
+  box-sizing: border-box; /* the plugin's max-width / max-height are the room in the stage, padding included */
+  width: max-content;
+  max-width: min(280px, 70vw);
+  padding: 12px;
+  padding-inline: 14px 32px; /* the close button's room */
+  /* room for × however little the contents are (it reaches 20px into the content box: 28 - 8), so
+     an empty card never scrolls: 1 + 12 + 20 + 12 + 1 (border, padding, ×). Shorter, × overflowed
+     it, and the fade's 12px flipped it back each frame (tabindex and fade flickered). */
+  min-height: 46px;
+  border: 1px solid var(--gallerist-hairline);
+  border-radius: var(--gallerist-radius);
+  background: var(--gallerist-pin-card-bg);
+  backdrop-filter: var(--gallerist-blur);
+  box-shadow: var(--gallerist-shadow);
+  color: var(--gallerist-fg);
+  font: 400 13px / 1.4 var(--gallerist-font);
+  text-align: start;
+  cursor: auto;
+  overflow: auto; /* a card taller than the room scrolls */
+  overscroll-behavior: contain;
+  /* a scroll container: the stage's touch-action: none stops at it, so a touch in the card would
+     pan or pinch-zoom the page. None here (the card's own controls still take taps) ... */
+  touch-action: none;
+}
+/* ... and a vertical pan while it scrolls (the plugin puts it in the tab order then) */
+.gallerist-pin-card[tabindex="0"] {
+  touch-action: pan-y;
+  scroll-padding-block-end: 24px; /* a control focused near the bottom clears the fade below */
+}
+/* a scrolling card says there's more below (a touch screen shows no scrollbar): its contents fade
+   out at its bottom edge. The fade sticks there as the card scrolls and, at the end, rests in the
+   room below the last control, where it covers nothing; it never takes a tap. */
+.gallerist-pin-card[tabindex="0"]::after {
+  content: "";
+  display: block;
+  position: sticky;
+  bottom: -12px; /* the card's edge: sticky insets count from its content box */
+  z-index: 1; /* over host contents that are positioned */
+  height: 24px;
+  margin-block: 0 -12px; /* below the contents: 12px of its own and the card's 12px padding */
+  margin-inline: -14px -32px; /* the card's full width */
+  background: linear-gradient(transparent, var(--gallerist-pin-card-bg));
+  pointer-events: none;
+}
+/* forced colours: no fade (the gradient would be a solid block of the system background) */
+@media (forced-colors: active) {
+  .gallerist-pin-card[tabindex="0"]::after {
+    display: none;
+  }
+}
+/* a host's field is a scroll container of its own, which the card's touch-action doesn't reach
+   into: a pinch starting on it would zoom the page. A vertical pan scrolls it; taps, the caret and
+   text selection are unaffected. */
+.gallerist-pin-card :is(textarea, select) {
+  touch-action: pan-y;
+}
+.gallerist-pin-card[hidden] {
+  display: none;
+}
+.gallerist-pin-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 8px;
+}
+.gallerist-pin-title {
+  font-weight: 600;
+}
+.gallerist-pin-meta {
+  color: var(--gallerist-fg-muted);
+  font-size: 12px;
+}
+.gallerist-pin-body {
+  /* a <p>: reset what host pages commonly style on paragraphs */
+  margin: 4px 0 0;
+  padding: 0;
+  max-width: none;
+  color: inherit;
+  font: inherit;
+}
+.gallerist-pin-replies > li {
+  margin: 0;
+  padding: 0;
+}
+.gallerist-pin-badge {
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--gallerist-pin-resolved-bg);
+  color: var(--gallerist-pin-resolved-fg);
+  font-size: 11px;
+  font-weight: 600;
+}
+.gallerist-pin-replies {
+  margin: 10px 0 0;
+  padding: 10px 0 0;
+  border-top: 1px solid var(--gallerist-hairline);
+  list-style: none;
+  display: grid;
+  gap: 8px;
+}
+.gallerist-pin-link {
+  display: inline-block;
+  margin-top: 8px;
+  color: var(--gallerist-fg);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.gallerist-pin-link:focus-visible,
+.gallerist-pin-close:focus-visible,
+.gallerist-pin-card:focus-visible {
+  outline: 2px solid var(--gallerist-focus);
+  outline-offset: 2px;
+}
+/* the card's ring falls outside it, on the image: banded like the pin's */
+.gallerist-pin-card:focus-visible {
+  outline-offset: 6px; /* 8px out in all: the plugin keeps the card 8px inside the stage */
+  box-shadow: 0 0 0 3px var(--gallerist-focus-halo), 0 0 0 6px #fff, var(--gallerist-shadow);
+}
+.gallerist-pin-close {
+  /* first in the card (in reading and tab order too), 4px from its top and inline-end corner, and
+     held there as it scrolls (sticky insets count from the card's content box, inside its 12px
+     padding). It takes no room: it fills the inline-end padding but its last 4px, and its block
+     margins cancel its height, so the contents start at the top and a host's first block keeps its
+     own top margin (a positive one collapses with the -20px: 20 - 20 + m). A negative one collapses
+     with it too, the more negative winning, so the block starts at min(0, 20 + m): -10px has no
+     effect, -30px lifts it 10px. It starts where the
+     content box ends: Chromium counts an in-flow box from its start at least, plus the end padding,
+     in what scrolls, so one starting further in made every card scroll 4px sideways. */
+  position: sticky;
+  top: -8px;
+  z-index: 1; /* over host contents that are positioned */
+  margin-block: -8px -20px;
+  margin-inline: auto -28px;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: var(--gallerist-pin-card-bg); /* contents scroll under it */
+  color: var(--gallerist-fg-muted);
+  cursor: pointer;
+}
+.gallerist-pin-close .gallerist-icon {
+  width: 16px;
+  height: 16px;
+}
+.gallerist-pins-tools {
+  display: flex;
+  gap: inherit;
+}
+/* placing a comment: a crosshair over the image */
+.gallerist[data-gallerist-placing] .gallerist-content[data-gallerist-current] {
+  cursor: crosshair;
+}
+.gallerist[data-gallerist-placing] .gallerist-pin-add {
+  background: var(--gallerist-pressed-bg);
+  color: var(--gallerist-pressed-fg);
+}