@gallerist/theme-default 0.0.0-stage → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +39 -2
- package/package.json +55 -3
- package/src/base.css +2125 -0
- package/src/console.css +183 -0
- package/src/editorial.css +191 -0
- package/src/gallerist.css +11 -0
- package/src/gallery.css +169 -0
- package/src/grid.css +143 -0
- package/src/pins.css +252 -0
package/src/base.css
ADDED
|
@@ -0,0 +1,2125 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @gallerist/theme-default — base.css: the structure every skin shares (token prefix locked:
|
|
3
|
+
* --gallerist-*). Layout areas, reserved space, the mobile layer, RTL, reduced motion, and every
|
|
4
|
+
* component rule, all drawn from tokens. It sets no colours of its own: load it with a skin
|
|
5
|
+
* (gallerist.css = base + the Gallery skin; console.css layers on top of that). Skins only set
|
|
6
|
+
* tokens; they never position chrome (plan P2-B).
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/* Token declarations sit in cascade layers so a page's own --gallerist-* overrides always win,
|
|
10
|
+
whatever the skin, scheme or accent, and so the skins apply in a fixed order whatever order the
|
|
11
|
+
files load in. Component rules stay unlayered, so a page's element resets can't strip them. */
|
|
12
|
+
@layer gallerist.base, gallerist.gallery, gallerist.console, gallerist.editorial, gallerist.compact;
|
|
13
|
+
|
|
14
|
+
@layer gallerist.base {
|
|
15
|
+
.gallerist {
|
|
16
|
+
/* structure: sizes every skin shares (a skin may tune them; the layout lint checks each skin) */
|
|
17
|
+
--gallerist-target: 44px;
|
|
18
|
+
--gallerist-thumb-h: 84px;
|
|
19
|
+
--gallerist-rail-handle-h: 22px;
|
|
20
|
+
--gallerist-toolbar-h: 56px; /* toolbar band height; a vertical rail starts below it */
|
|
21
|
+
--gallerist-index-w: 280px; /* a section index (`groupDisplay: 'index'`) in a side rail */
|
|
22
|
+
--gallerist-rail-w: 130px; /* vertical (left/right) rail width */
|
|
23
|
+
/* the docked item navigator (`arrows: 'docked'`): the count over ↑ ↓ */
|
|
24
|
+
--gallerist-dock-w: calc(2 * var(--gallerist-target) + 16px);
|
|
25
|
+
--gallerist-dock-h: calc(var(--gallerist-target) + 30px);
|
|
26
|
+
--gallerist-speed: 300ms;
|
|
27
|
+
|
|
28
|
+
/* motion (spec §27.2) — bezier approximations of the named springs */
|
|
29
|
+
--gallerist-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
30
|
+
--gallerist-ease-pop: cubic-bezier(0.34, 1.3, 0.5, 1);
|
|
31
|
+
--gallerist-dur-hero: 420ms;
|
|
32
|
+
--gallerist-dur-snappy: 340ms;
|
|
33
|
+
--gallerist-dur-gentle: 280ms;
|
|
34
|
+
--gallerist-dur-exit: 180ms; /* exits run shorter than entrances */
|
|
35
|
+
|
|
36
|
+
/* the accent: each skin names its accents as a dark/light pair, the scheme picks one */
|
|
37
|
+
--gallerist-accent: var(--gallerist-accent-dark);
|
|
38
|
+
--gallerist-accent-fg: var(--gallerist-accent-dark-fg);
|
|
39
|
+
|
|
40
|
+
/* pins (plugin-pins): numbered discs in the accent */
|
|
41
|
+
--gallerist-pin-size: 26px;
|
|
42
|
+
--gallerist-pin-bg: var(--gallerist-accent);
|
|
43
|
+
--gallerist-pin-fg: var(--gallerist-accent-fg);
|
|
44
|
+
--gallerist-pin-ring: rgb(0 0 0 / 0.35);
|
|
45
|
+
--gallerist-pin-resolved-bg: #5a6069; /* opaque: pins sit on photos of any brightness */
|
|
46
|
+
--gallerist-pin-resolved-fg: #f0f1f3;
|
|
47
|
+
--gallerist-pin-card-bg: var(--gallerist-panel); /* near-opaque: it sits on the image */
|
|
48
|
+
/* a focus ring drawn over the image (pins) is banded: this colour, then white, then the focus
|
|
49
|
+
colour. Black and white are 21:1 apart, so one of them reaches 3:1 against any media (WCAG
|
|
50
|
+
2.2 1.4.11 Non-text Contrast, 2.4.13 Focus Appearance; technique C40). An override must be
|
|
51
|
+
opaque and keep 9:1 or more against white (luminance 0.066 or less), or the guarantee goes. */
|
|
52
|
+
--gallerist-focus-halo: #000;
|
|
53
|
+
|
|
54
|
+
/* bands and tools: a skin may give the bar and rail a solid band, tint the tools, and mark a
|
|
55
|
+
pressed toggle with a shadow (an underline) as well as its fill */
|
|
56
|
+
--gallerist-bar-bg: transparent;
|
|
57
|
+
--gallerist-bar-border: 0 none;
|
|
58
|
+
--gallerist-rail-border: 0 none;
|
|
59
|
+
--gallerist-tool-fg: var(--gallerist-fg);
|
|
60
|
+
--gallerist-pressed-shadow: none;
|
|
61
|
+
--gallerist-navigator-size: 160px; /* the zoom navigator's longest side */
|
|
62
|
+
--gallerist-navigator-radius: min(var(--gallerist-radius), 8px);
|
|
63
|
+
|
|
64
|
+
/* type: the bar title and the caption may take another face (Editorial's serif) */
|
|
65
|
+
--gallerist-title-font: var(--gallerist-font);
|
|
66
|
+
--gallerist-caption-font: var(--gallerist-font);
|
|
67
|
+
--gallerist-caption-style: normal;
|
|
68
|
+
|
|
69
|
+
/* framed media (`frame`): room around the work, a mat behind it, a shadow under it */
|
|
70
|
+
--gallerist-frame-inset: 0px;
|
|
71
|
+
--gallerist-frame-inset-compact: 0px;
|
|
72
|
+
--gallerist-frame-mat: transparent;
|
|
73
|
+
--gallerist-frame-shadow: none;
|
|
74
|
+
/* the placard column (itemIndicator: 'placard' in the editorial preset) */
|
|
75
|
+
--gallerist-placard-w: 300px;
|
|
76
|
+
--gallerist-placard-band-h: 60px; /* a placard under the stage: one row, fixed */
|
|
77
|
+
|
|
78
|
+
/* motion: the keyframes a slide enters with, per axis (a skin may crossfade instead) */
|
|
79
|
+
--gallerist-enter-group: gallerist-enter-group;
|
|
80
|
+
--gallerist-enter-item: gallerist-enter-item;
|
|
81
|
+
--gallerist-rail-track-gap: var(--gallerist-rail-bg); /* the ring that cuts the track at a tick */
|
|
82
|
+
|
|
83
|
+
/* hover: unchanged unless a skin sets one */
|
|
84
|
+
--gallerist-arrow-hover-bg: var(--gallerist-arrow-bg);
|
|
85
|
+
--gallerist-itemnav-button-hover-bg: var(--gallerist-itemnav-button-bg);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.gallerist {
|
|
90
|
+
color: var(--gallerist-fg);
|
|
91
|
+
font-family: var(--gallerist-font);
|
|
92
|
+
font-variant-numeric: tabular-nums;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* ── layout (base): the root is a grid of areas ───────────────────────────────
|
|
96
|
+
bar / main / aside / caption / footer / rail. Persistent chrome gets its own track, so it takes
|
|
97
|
+
space instead of covering the stage and pieces can't collide; only the arrows and the item
|
|
98
|
+
navigator sit over the stage, inside `main` (`arrows: 'docked'` takes both off it, at the end). Rail position and presets swap the template, never
|
|
99
|
+
the DOM. Grid columns follow the inline direction, so RTL mirrors the whole layout. */
|
|
100
|
+
.gallerist {
|
|
101
|
+
display: grid;
|
|
102
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
103
|
+
grid-template-rows: auto minmax(var(--gallerist-stage-floor), 1fr) auto auto auto;
|
|
104
|
+
grid-template-areas:
|
|
105
|
+
"bar bar"
|
|
106
|
+
"main aside"
|
|
107
|
+
"caption aside"
|
|
108
|
+
"footer footer"
|
|
109
|
+
"rail rail";
|
|
110
|
+
color: var(--gallerist-fg);
|
|
111
|
+
}
|
|
112
|
+
.gallerist[data-gallerist-rail-pos="left"] {
|
|
113
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
114
|
+
grid-template-rows: auto minmax(var(--gallerist-stage-floor), 1fr) auto auto;
|
|
115
|
+
grid-template-areas:
|
|
116
|
+
"bar bar bar"
|
|
117
|
+
"rail main aside"
|
|
118
|
+
"rail caption aside"
|
|
119
|
+
"rail footer aside";
|
|
120
|
+
}
|
|
121
|
+
.gallerist[data-gallerist-rail-pos="right"] {
|
|
122
|
+
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
123
|
+
grid-template-rows: auto minmax(var(--gallerist-stage-floor), 1fr) auto auto;
|
|
124
|
+
grid-template-areas:
|
|
125
|
+
"bar bar bar"
|
|
126
|
+
"main aside rail"
|
|
127
|
+
"caption aside rail"
|
|
128
|
+
"footer aside rail";
|
|
129
|
+
}
|
|
130
|
+
/* side rails are named for the physical side, so in RTL (columns run right to left) they swap
|
|
131
|
+
templates to stay there */
|
|
132
|
+
.gallerist[data-gallerist-dir="rtl"][data-gallerist-rail-pos="left"] {
|
|
133
|
+
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
134
|
+
grid-template-areas:
|
|
135
|
+
"bar bar bar"
|
|
136
|
+
"main aside rail"
|
|
137
|
+
"caption aside rail"
|
|
138
|
+
"footer aside rail";
|
|
139
|
+
}
|
|
140
|
+
.gallerist[data-gallerist-dir="rtl"][data-gallerist-rail-pos="right"] {
|
|
141
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
142
|
+
grid-template-areas:
|
|
143
|
+
"bar bar bar"
|
|
144
|
+
"rail main aside"
|
|
145
|
+
"rail caption aside"
|
|
146
|
+
"rail footer aside";
|
|
147
|
+
}
|
|
148
|
+
/* editorial with a bottom (or hidden) rail: the placard is a column beside the work, then the item
|
|
149
|
+
stack column if any. Side rails keep their own template, with the placard as the caption band. */
|
|
150
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"] {
|
|
151
|
+
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
152
|
+
grid-template-rows: auto minmax(var(--gallerist-stage-floor), 1fr) auto auto;
|
|
153
|
+
grid-template-areas:
|
|
154
|
+
"bar bar bar"
|
|
155
|
+
"main caption aside"
|
|
156
|
+
"footer footer footer"
|
|
157
|
+
"rail rail rail";
|
|
158
|
+
}
|
|
159
|
+
/* The stage's row never shrinks below the floor. 0 normally; while a caption renderer's band grows
|
|
160
|
+
(plugin-captions), 36% of the viewer, so the band stops there and scrolls rather than crushing the
|
|
161
|
+
stage (before its own 40vh cap when the rail and bar are tall, e.g. on a phone). */
|
|
162
|
+
.gallerist {
|
|
163
|
+
--gallerist-stage-floor: 0px;
|
|
164
|
+
}
|
|
165
|
+
.gallerist:has(> .gallerist-caption[data-gallerist-custom]:not([hidden])) {
|
|
166
|
+
--gallerist-stage-floor: 36%;
|
|
167
|
+
}
|
|
168
|
+
/* modes (data-attribute, not a class — avoids colliding with .gallerist-overlay elements) */
|
|
169
|
+
.gallerist[data-gallerist-mode="overlay"] {
|
|
170
|
+
position: fixed;
|
|
171
|
+
inset: 0;
|
|
172
|
+
z-index: 2147483000;
|
|
173
|
+
}
|
|
174
|
+
.gallerist[data-gallerist-mode="inline"] {
|
|
175
|
+
position: relative;
|
|
176
|
+
width: 100%;
|
|
177
|
+
height: 100%;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.gallerist-backdrop {
|
|
181
|
+
position: absolute;
|
|
182
|
+
inset: 0;
|
|
183
|
+
background: var(--gallerist-backdrop);
|
|
184
|
+
/* recede as the user drags to dismiss so the page behind shows through — the renderer writes
|
|
185
|
+
--gallerist-dismiss (0..1) on the root during a close drag (S-R1). */
|
|
186
|
+
opacity: calc(1 - var(--gallerist-dismiss, 0) * 0.55);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.gallerist-main {
|
|
190
|
+
grid-area: main;
|
|
191
|
+
position: relative;
|
|
192
|
+
min-width: 0;
|
|
193
|
+
min-height: 0;
|
|
194
|
+
z-index: 1;
|
|
195
|
+
}
|
|
196
|
+
/* the on-stage controls (arrows, item navigator); inset by the renderer in immersive so they stay
|
|
197
|
+
clear of the chrome floating over the stage */
|
|
198
|
+
.gallerist-controls {
|
|
199
|
+
position: absolute;
|
|
200
|
+
inset: var(--gallerist-controls-inset, 0);
|
|
201
|
+
z-index: 4;
|
|
202
|
+
pointer-events: none;
|
|
203
|
+
}
|
|
204
|
+
.gallerist-controls > * {
|
|
205
|
+
pointer-events: auto;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* ── stage / slides ────────────────────────────────────────────────────────── */
|
|
209
|
+
.gallerist-stage {
|
|
210
|
+
position: absolute;
|
|
211
|
+
inset: 0;
|
|
212
|
+
overflow: hidden;
|
|
213
|
+
touch-action: none; /* gestures are owned by the engine (spec §11) */
|
|
214
|
+
}
|
|
215
|
+
.gallerist-track {
|
|
216
|
+
position: absolute;
|
|
217
|
+
inset: 0;
|
|
218
|
+
}
|
|
219
|
+
.gallerist-slide {
|
|
220
|
+
position: absolute;
|
|
221
|
+
inset: 0;
|
|
222
|
+
display: none;
|
|
223
|
+
align-items: center;
|
|
224
|
+
justify-content: center;
|
|
225
|
+
}
|
|
226
|
+
.gallerist-slide[data-gallerist-current] {
|
|
227
|
+
display: flex;
|
|
228
|
+
}
|
|
229
|
+
.gallerist-content {
|
|
230
|
+
position: absolute;
|
|
231
|
+
inset: 0;
|
|
232
|
+
transform-origin: 0 0;
|
|
233
|
+
will-change: transform;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/* ── overlays (spec §9) ────────────────────────────────────────────────────── */
|
|
237
|
+
.gallerist-viewport-layer {
|
|
238
|
+
position: absolute;
|
|
239
|
+
inset: 0;
|
|
240
|
+
z-index: 5;
|
|
241
|
+
pointer-events: none;
|
|
242
|
+
}
|
|
243
|
+
.gallerist-overlays-content {
|
|
244
|
+
position: absolute;
|
|
245
|
+
inset: 0;
|
|
246
|
+
pointer-events: none;
|
|
247
|
+
}
|
|
248
|
+
.gallerist-overlay {
|
|
249
|
+
pointer-events: none;
|
|
250
|
+
}
|
|
251
|
+
.gallerist-media {
|
|
252
|
+
position: absolute;
|
|
253
|
+
inset: 0;
|
|
254
|
+
margin: auto;
|
|
255
|
+
max-width: 100%;
|
|
256
|
+
max-height: 100%;
|
|
257
|
+
}
|
|
258
|
+
/* framed: a failed load's error card fills the frame, not the margins around it */
|
|
259
|
+
.gallerist[data-gallerist-frame] .gallerist-media-error {
|
|
260
|
+
inset: auto;
|
|
261
|
+
left: var(--gallerist-box-x, 0);
|
|
262
|
+
top: var(--gallerist-box-y, 0);
|
|
263
|
+
width: var(--gallerist-box-w, 100%);
|
|
264
|
+
height: var(--gallerist-box-h, 100%);
|
|
265
|
+
}
|
|
266
|
+
/* framed (`frame`): the media element is the painted image box the renderer measured, so the mat
|
|
267
|
+
and shadow hug the work itself */
|
|
268
|
+
.gallerist[data-gallerist-frame] .gallerist-media {
|
|
269
|
+
inset: auto;
|
|
270
|
+
left: var(--gallerist-box-x, 0);
|
|
271
|
+
top: var(--gallerist-box-y, 0);
|
|
272
|
+
width: var(--gallerist-box-w, 100%);
|
|
273
|
+
height: var(--gallerist-box-h, 100%);
|
|
274
|
+
max-width: none;
|
|
275
|
+
max-height: none;
|
|
276
|
+
margin: 0;
|
|
277
|
+
background-color: var(--gallerist-frame-mat);
|
|
278
|
+
box-shadow: var(--gallerist-frame-shadow);
|
|
279
|
+
}
|
|
280
|
+
.gallerist-media-image {
|
|
281
|
+
width: 100%;
|
|
282
|
+
height: 100%;
|
|
283
|
+
object-fit: contain;
|
|
284
|
+
background-repeat: no-repeat;
|
|
285
|
+
background-position: center;
|
|
286
|
+
opacity: 0;
|
|
287
|
+
transition: opacity 180ms ease-out;
|
|
288
|
+
}
|
|
289
|
+
.gallerist-media-image[data-gallerist-loaded] {
|
|
290
|
+
opacity: 1;
|
|
291
|
+
}
|
|
292
|
+
/* A failed load shows a centered error card (icon + the item's alt as a caption) instead of a
|
|
293
|
+
blank stage or the browser's default top-left broken-image glyph (I-UX3). The broken <img>
|
|
294
|
+
itself stays hidden (opacity:0); the adapter injects .gallerist-media-error as a sibling. */
|
|
295
|
+
.gallerist-media-error {
|
|
296
|
+
position: absolute;
|
|
297
|
+
inset: 0;
|
|
298
|
+
display: flex;
|
|
299
|
+
flex-direction: column;
|
|
300
|
+
align-items: center;
|
|
301
|
+
justify-content: center;
|
|
302
|
+
gap: 12px;
|
|
303
|
+
padding: 24px;
|
|
304
|
+
text-align: center;
|
|
305
|
+
color: var(--gallerist-fg-muted);
|
|
306
|
+
background: var(--gallerist-placeholder);
|
|
307
|
+
}
|
|
308
|
+
.gallerist-media-error-icon {
|
|
309
|
+
opacity: 0.75;
|
|
310
|
+
line-height: 0;
|
|
311
|
+
}
|
|
312
|
+
.gallerist-media-error-label {
|
|
313
|
+
font: 14px / 1.4 var(--gallerist-font);
|
|
314
|
+
max-width: 40ch;
|
|
315
|
+
color: var(--gallerist-fg);
|
|
316
|
+
}
|
|
317
|
+
/* Loading shimmer for slow media — shown only while an image is still pending (no loaded/error
|
|
318
|
+
marker yet), delayed so fast loads never flash it. Degrades to nothing where :has is absent. */
|
|
319
|
+
.gallerist-content:has(
|
|
320
|
+
.gallerist-media-image:not([data-gallerist-loaded]):not([data-gallerist-error])
|
|
321
|
+
)::before {
|
|
322
|
+
content: "";
|
|
323
|
+
position: absolute;
|
|
324
|
+
inset: 0;
|
|
325
|
+
pointer-events: none;
|
|
326
|
+
background: linear-gradient(
|
|
327
|
+
100deg,
|
|
328
|
+
transparent 35%,
|
|
329
|
+
var(--gallerist-shimmer) 50%,
|
|
330
|
+
transparent 65%
|
|
331
|
+
);
|
|
332
|
+
background-size: 200% 100%;
|
|
333
|
+
animation: gallerist-shimmer 1.4s ease-in-out 0.6s infinite;
|
|
334
|
+
}
|
|
335
|
+
@keyframes gallerist-shimmer {
|
|
336
|
+
from {
|
|
337
|
+
background-position: 150% 0;
|
|
338
|
+
}
|
|
339
|
+
to {
|
|
340
|
+
background-position: -50% 0;
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
@media (prefers-reduced-motion: reduce) {
|
|
344
|
+
.gallerist-content::before {
|
|
345
|
+
animation: none;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
/* ── plugin regions (spec §13) ─────────────────────────────────────────────── */
|
|
350
|
+
/* containers never block gestures; only their injected children are interactive */
|
|
351
|
+
.gallerist-region {
|
|
352
|
+
pointer-events: none;
|
|
353
|
+
}
|
|
354
|
+
.gallerist-region > * {
|
|
355
|
+
pointer-events: auto;
|
|
356
|
+
}
|
|
357
|
+
.gallerist-region-toolbar {
|
|
358
|
+
display: flex;
|
|
359
|
+
align-items: center;
|
|
360
|
+
gap: 6px;
|
|
361
|
+
margin-inline-start: auto; /* tools sit at the end of the bar, after the title */
|
|
362
|
+
/* on a narrow screen the tools scroll sideways so the counter and Close always fit */
|
|
363
|
+
flex: 0 1 auto;
|
|
364
|
+
min-width: 0;
|
|
365
|
+
overflow-x: auto;
|
|
366
|
+
scrollbar-width: none;
|
|
367
|
+
pointer-events: auto;
|
|
368
|
+
}
|
|
369
|
+
.gallerist-region-toolbar::-webkit-scrollbar {
|
|
370
|
+
display: none;
|
|
371
|
+
}
|
|
372
|
+
.gallerist-region-toolbar > * {
|
|
373
|
+
flex: none;
|
|
374
|
+
}
|
|
375
|
+
.gallerist-counter,
|
|
376
|
+
.gallerist-zoom-reset,
|
|
377
|
+
.gallerist-close {
|
|
378
|
+
flex: none;
|
|
379
|
+
}
|
|
380
|
+
.gallerist-bar[hidden] {
|
|
381
|
+
display: none;
|
|
382
|
+
}
|
|
383
|
+
.gallerist-region-aside {
|
|
384
|
+
grid-area: aside;
|
|
385
|
+
position: relative;
|
|
386
|
+
z-index: 2;
|
|
387
|
+
display: flex;
|
|
388
|
+
gap: 8px;
|
|
389
|
+
min-height: 0;
|
|
390
|
+
}
|
|
391
|
+
.gallerist-region-thumbnails {
|
|
392
|
+
grid-area: rail;
|
|
393
|
+
position: relative;
|
|
394
|
+
z-index: 2;
|
|
395
|
+
min-width: 0;
|
|
396
|
+
min-height: 0;
|
|
397
|
+
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
398
|
+
}
|
|
399
|
+
.gallerist-region-footer {
|
|
400
|
+
grid-area: footer;
|
|
401
|
+
position: relative;
|
|
402
|
+
z-index: 2;
|
|
403
|
+
min-width: 0;
|
|
404
|
+
}
|
|
405
|
+
.gallerist-region-stage {
|
|
406
|
+
position: absolute;
|
|
407
|
+
inset: 0;
|
|
408
|
+
z-index: 7;
|
|
409
|
+
}
|
|
410
|
+
.gallerist-region-backdrop {
|
|
411
|
+
position: absolute;
|
|
412
|
+
inset: 0;
|
|
413
|
+
z-index: 0;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
/* ── thumbnails rail (plugin-thumbnails) ───────────────────────────────────── */
|
|
417
|
+
/* the region wrapper: holds the scrollable rail plus the floating item/peek panels as siblings, so
|
|
418
|
+
the panels escape the rail's overflow-clip yet still ride along when the region is re-mounted. */
|
|
419
|
+
.gallerist-thumbs-region {
|
|
420
|
+
position: relative;
|
|
421
|
+
display: flex;
|
|
422
|
+
align-items: center;
|
|
423
|
+
min-width: 0;
|
|
424
|
+
}
|
|
425
|
+
.gallerist-thumbs-region > .gallerist-thumbs {
|
|
426
|
+
flex: 1 1 auto;
|
|
427
|
+
min-width: 0;
|
|
428
|
+
}
|
|
429
|
+
.gallerist-thumbs {
|
|
430
|
+
display: flex;
|
|
431
|
+
gap: 8px;
|
|
432
|
+
align-items: center;
|
|
433
|
+
padding: 8px 12px;
|
|
434
|
+
overflow-x: auto;
|
|
435
|
+
background: var(--gallerist-rail-bg);
|
|
436
|
+
border-block-start: var(--gallerist-rail-border);
|
|
437
|
+
backdrop-filter: var(--gallerist-blur);
|
|
438
|
+
}
|
|
439
|
+
/* cards stack image + (optional) caption band; height grows for the caption */
|
|
440
|
+
.gallerist-thumb {
|
|
441
|
+
position: relative;
|
|
442
|
+
flex: 0 0 auto;
|
|
443
|
+
display: flex;
|
|
444
|
+
flex-direction: column;
|
|
445
|
+
width: calc(var(--gallerist-thumb-h) * 1.4);
|
|
446
|
+
padding: 0;
|
|
447
|
+
border: 2px solid transparent;
|
|
448
|
+
border-radius: var(--gallerist-thumb-radius);
|
|
449
|
+
overflow: hidden;
|
|
450
|
+
cursor: pointer;
|
|
451
|
+
background: var(--gallerist-surface);
|
|
452
|
+
transition: border-color var(--gallerist-dur-gentle) var(--gallerist-ease-out), box-shadow
|
|
453
|
+
var(--gallerist-dur-gentle) var(--gallerist-ease-out);
|
|
454
|
+
}
|
|
455
|
+
.gallerist-thumb[data-active] {
|
|
456
|
+
border-color: var(--gallerist-thumb-active-border);
|
|
457
|
+
box-shadow: var(--gallerist-thumb-ring);
|
|
458
|
+
}
|
|
459
|
+
.gallerist-thumb:not([data-active]) > .gallerist-thumb-img,
|
|
460
|
+
.gallerist-thumb-item:not([data-active]) > .gallerist-thumb-img {
|
|
461
|
+
opacity: var(--gallerist-thumb-idle-opacity);
|
|
462
|
+
transition: opacity var(--gallerist-dur-gentle) var(--gallerist-ease-out);
|
|
463
|
+
}
|
|
464
|
+
.gallerist-thumb:is(:hover, :focus-visible) > .gallerist-thumb-img,
|
|
465
|
+
.gallerist-thumb-item:is(:hover, :focus-visible) > .gallerist-thumb-img {
|
|
466
|
+
opacity: 1;
|
|
467
|
+
}
|
|
468
|
+
.gallerist-thumb:focus-visible,
|
|
469
|
+
.gallerist-thumb-item:focus-visible,
|
|
470
|
+
.gallerist-grid-cell:focus-visible {
|
|
471
|
+
outline: 2px solid var(--gallerist-focus);
|
|
472
|
+
outline-offset: 2px;
|
|
473
|
+
}
|
|
474
|
+
.gallerist-thumb-img {
|
|
475
|
+
width: 100%;
|
|
476
|
+
object-fit: cover;
|
|
477
|
+
display: block;
|
|
478
|
+
}
|
|
479
|
+
.gallerist-thumb > .gallerist-thumb-img {
|
|
480
|
+
flex: 0 0 auto;
|
|
481
|
+
height: var(--gallerist-thumb-h);
|
|
482
|
+
}
|
|
483
|
+
.gallerist-thumb-stacked {
|
|
484
|
+
box-shadow: var(--gallerist-stack-shadow);
|
|
485
|
+
}
|
|
486
|
+
.gallerist-thumb-count {
|
|
487
|
+
position: absolute;
|
|
488
|
+
top: 4px;
|
|
489
|
+
right: 4px;
|
|
490
|
+
font-family: var(--gallerist-mono);
|
|
491
|
+
font-size: 10px;
|
|
492
|
+
font-weight: 700;
|
|
493
|
+
font-variant-numeric: tabular-nums;
|
|
494
|
+
background: var(--gallerist-badge-bg);
|
|
495
|
+
color: var(--gallerist-fg);
|
|
496
|
+
padding: 1px 5px;
|
|
497
|
+
border-radius: 999px;
|
|
498
|
+
backdrop-filter: blur(6px);
|
|
499
|
+
}
|
|
500
|
+
/* single label band beneath each thumbnail (UX feedback: caption goes under the thumb) */
|
|
501
|
+
.gallerist-thumb-caption {
|
|
502
|
+
flex: 0 0 auto;
|
|
503
|
+
padding: 4px 6px 5px;
|
|
504
|
+
font: 500 11px var(--gallerist-font);
|
|
505
|
+
line-height: 1.2;
|
|
506
|
+
color: var(--gallerist-fg);
|
|
507
|
+
background: var(--gallerist-caption-band);
|
|
508
|
+
white-space: nowrap;
|
|
509
|
+
overflow: hidden;
|
|
510
|
+
text-overflow: ellipsis;
|
|
511
|
+
}
|
|
512
|
+
.gallerist-thumb[data-active] .gallerist-thumb-caption {
|
|
513
|
+
color: var(--gallerist-selection);
|
|
514
|
+
}
|
|
515
|
+
.gallerist-thumb-items {
|
|
516
|
+
display: flex;
|
|
517
|
+
gap: 6px;
|
|
518
|
+
align-items: center;
|
|
519
|
+
}
|
|
520
|
+
/* horizontal (legacy): inline row separated from the group rail by a hairline. */
|
|
521
|
+
.gallerist-thumb-items[data-axis="horizontal"] {
|
|
522
|
+
padding-left: 8px;
|
|
523
|
+
margin-left: 8px;
|
|
524
|
+
border-left: 1px solid var(--gallerist-hairline);
|
|
525
|
+
}
|
|
526
|
+
/* in a side rail the row would widen the rail and crush the stage: it runs down the rail instead */
|
|
527
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumb-items[data-axis="horizontal"] {
|
|
528
|
+
flex-direction: column;
|
|
529
|
+
align-items: stretch;
|
|
530
|
+
max-height: 50%;
|
|
531
|
+
overflow-y: auto;
|
|
532
|
+
padding: 8px 0 0;
|
|
533
|
+
margin: 8px 0 0;
|
|
534
|
+
border-left: 0;
|
|
535
|
+
border-top: 1px solid var(--gallerist-hairline);
|
|
536
|
+
}
|
|
537
|
+
/* vertical (default): a stack in the aside column beside the stage, scrolling when it is long */
|
|
538
|
+
.gallerist-thumb-items[data-axis="vertical"] {
|
|
539
|
+
flex-direction: column;
|
|
540
|
+
align-items: stretch;
|
|
541
|
+
max-height: 100%;
|
|
542
|
+
overflow-y: auto;
|
|
543
|
+
padding: 6px;
|
|
544
|
+
border-radius: var(--gallerist-radius);
|
|
545
|
+
background: var(--gallerist-panel-bg);
|
|
546
|
+
backdrop-filter: var(--gallerist-blur);
|
|
547
|
+
}
|
|
548
|
+
.gallerist-thumbs-aside {
|
|
549
|
+
display: flex;
|
|
550
|
+
min-height: 0;
|
|
551
|
+
padding: 8px;
|
|
552
|
+
padding-inline-start: 0;
|
|
553
|
+
}
|
|
554
|
+
/* collapsing the rail puts its item stack away too (fullscreen, `t`, rail: 'hidden') */
|
|
555
|
+
.gallerist[data-gallerist-rail="collapsed"] .gallerist-thumbs-aside {
|
|
556
|
+
display: none;
|
|
557
|
+
}
|
|
558
|
+
.gallerist-thumb-item {
|
|
559
|
+
position: relative;
|
|
560
|
+
display: flex;
|
|
561
|
+
flex-direction: column;
|
|
562
|
+
flex: 0 0 auto;
|
|
563
|
+
width: calc(var(--gallerist-thumb-h) * 1.2);
|
|
564
|
+
padding: 0;
|
|
565
|
+
border: 2px solid transparent;
|
|
566
|
+
border-radius: var(--gallerist-thumb-radius);
|
|
567
|
+
overflow: hidden;
|
|
568
|
+
cursor: pointer;
|
|
569
|
+
background: var(--gallerist-surface);
|
|
570
|
+
transition: border-color var(--gallerist-dur-gentle) var(--gallerist-ease-out);
|
|
571
|
+
}
|
|
572
|
+
.gallerist-thumb-item > .gallerist-thumb-img {
|
|
573
|
+
flex: 0 0 auto;
|
|
574
|
+
height: calc(var(--gallerist-thumb-h) * 0.7);
|
|
575
|
+
}
|
|
576
|
+
.gallerist-thumb-item[data-active] {
|
|
577
|
+
border-color: var(--gallerist-thumb-active-border);
|
|
578
|
+
box-shadow: var(--gallerist-item-ring);
|
|
579
|
+
}
|
|
580
|
+
/* each item contains its own layout and paint (it clips anyway): scrolling a long group's stack then
|
|
581
|
+
doesn't make WebKit revisit every item (~0.66 s a step at 10k items, ~65 ms with this) */
|
|
582
|
+
.gallerist-thumb-items[data-axis="vertical"] > .gallerist-thumb-item {
|
|
583
|
+
contain: layout paint;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
/* timeline (thumbnails `timeline`): a label with a tick above each card, the ticks joined into one
|
|
587
|
+
track line; the current group's tick and label take the accent */
|
|
588
|
+
.gallerist-thumbs[data-timeline] {
|
|
589
|
+
align-items: flex-start;
|
|
590
|
+
}
|
|
591
|
+
.gallerist-thumbs[data-timeline] .gallerist-thumb-wrap {
|
|
592
|
+
flex-direction: column;
|
|
593
|
+
gap: 6px;
|
|
594
|
+
}
|
|
595
|
+
.gallerist-thumb-time {
|
|
596
|
+
position: relative;
|
|
597
|
+
display: flex;
|
|
598
|
+
align-items: center;
|
|
599
|
+
gap: 6px;
|
|
600
|
+
height: 14px;
|
|
601
|
+
/* a label never widens its card's column: long ones end in an ellipsis */
|
|
602
|
+
max-width: calc(var(--gallerist-thumb-h) * 1.4);
|
|
603
|
+
font: 500 11px var(--gallerist-mono);
|
|
604
|
+
font-variant-numeric: tabular-nums;
|
|
605
|
+
color: var(--gallerist-fg-muted);
|
|
606
|
+
white-space: nowrap;
|
|
607
|
+
}
|
|
608
|
+
.gallerist-thumb-time-text {
|
|
609
|
+
min-width: 0;
|
|
610
|
+
overflow: hidden;
|
|
611
|
+
text-overflow: ellipsis;
|
|
612
|
+
}
|
|
613
|
+
/* a side rail runs top to bottom: no horizontal track between the cards */
|
|
614
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumb-time::after {
|
|
615
|
+
display: none;
|
|
616
|
+
}
|
|
617
|
+
/* a timeline label sits above the card, so the touch expand caret moves down onto the card */
|
|
618
|
+
.gallerist-thumbs[data-timeline] .gallerist-thumb-expand {
|
|
619
|
+
top: calc(14px + 6px + 4px);
|
|
620
|
+
}
|
|
621
|
+
/* a side rail's band edge faces the stage, not the bar */
|
|
622
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumbs {
|
|
623
|
+
border-block-start: 0 none;
|
|
624
|
+
}
|
|
625
|
+
.gallerist[data-gallerist-rail-pos="left"] .gallerist-thumbs {
|
|
626
|
+
border-right: var(--gallerist-rail-border);
|
|
627
|
+
}
|
|
628
|
+
.gallerist[data-gallerist-rail-pos="right"] .gallerist-thumbs {
|
|
629
|
+
border-left: var(--gallerist-rail-border);
|
|
630
|
+
}
|
|
631
|
+
.gallerist-thumb-time::before {
|
|
632
|
+
content: "";
|
|
633
|
+
flex: none;
|
|
634
|
+
width: 7px;
|
|
635
|
+
height: 7px;
|
|
636
|
+
border-radius: 50%;
|
|
637
|
+
background: var(--gallerist-fg-muted);
|
|
638
|
+
box-shadow: 0 0 0 3px var(--gallerist-rail-track-gap);
|
|
639
|
+
}
|
|
640
|
+
/* the track: each label's line runs through its gap to the next card */
|
|
641
|
+
.gallerist-thumb-time::after {
|
|
642
|
+
content: "";
|
|
643
|
+
position: absolute;
|
|
644
|
+
z-index: -1;
|
|
645
|
+
inset-inline: 0 -8px;
|
|
646
|
+
top: 50%;
|
|
647
|
+
height: 1px;
|
|
648
|
+
background: var(--gallerist-hairline);
|
|
649
|
+
}
|
|
650
|
+
.gallerist-thumb-wrap {
|
|
651
|
+
isolation: isolate; /* keeps the track line behind its own label */
|
|
652
|
+
}
|
|
653
|
+
.gallerist-thumb-wrap[data-active] .gallerist-thumb-time {
|
|
654
|
+
color: var(--gallerist-accent);
|
|
655
|
+
}
|
|
656
|
+
.gallerist-thumb-wrap[data-active] .gallerist-thumb-time::before {
|
|
657
|
+
background: var(--gallerist-accent);
|
|
658
|
+
}
|
|
659
|
+
/* numbered items (thumbnails `numberItems`) */
|
|
660
|
+
.gallerist-thumb-num {
|
|
661
|
+
position: absolute;
|
|
662
|
+
top: 3px;
|
|
663
|
+
inset-inline-start: 3px;
|
|
664
|
+
min-width: 14px;
|
|
665
|
+
height: 14px;
|
|
666
|
+
padding: 0 3px;
|
|
667
|
+
box-sizing: border-box;
|
|
668
|
+
border-radius: 2px;
|
|
669
|
+
background: var(--gallerist-badge-bg);
|
|
670
|
+
color: var(--gallerist-fg);
|
|
671
|
+
font: 600 9px / 14px var(--gallerist-mono);
|
|
672
|
+
text-align: center;
|
|
673
|
+
}
|
|
674
|
+
.gallerist-thumb-item[data-active] .gallerist-thumb-num {
|
|
675
|
+
background: var(--gallerist-selection);
|
|
676
|
+
color: var(--gallerist-selection-fg);
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
/* ── peek flyout (stacked, UX-A): preview a non-active group's items on hover/focus without
|
|
680
|
+
navigating in. Mirrors the vertical item column; `left` is set inline to anchor it to the
|
|
681
|
+
hovered card. ──────────────────────────────────────────────────────────────────────────── */
|
|
682
|
+
.gallerist-thumb-peek {
|
|
683
|
+
display: flex;
|
|
684
|
+
flex-direction: column;
|
|
685
|
+
align-items: stretch;
|
|
686
|
+
gap: 6px;
|
|
687
|
+
position: absolute;
|
|
688
|
+
bottom: calc(100% + 10px);
|
|
689
|
+
z-index: 7;
|
|
690
|
+
max-height: 60vh;
|
|
691
|
+
/* clamp so a vertical-rail flyout can't spill off-screen over the stage (I-UX4) */
|
|
692
|
+
max-width: min(280px, 60vw);
|
|
693
|
+
overflow: auto;
|
|
694
|
+
padding: 6px;
|
|
695
|
+
border-radius: var(--gallerist-radius);
|
|
696
|
+
background: var(--gallerist-flyout-bg);
|
|
697
|
+
backdrop-filter: var(--gallerist-blur);
|
|
698
|
+
box-shadow: var(--gallerist-shadow);
|
|
699
|
+
}
|
|
700
|
+
.gallerist-thumb-peek[data-axis="horizontal"] {
|
|
701
|
+
flex-direction: row;
|
|
702
|
+
align-items: center;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
/* touch (no hover): the group card is wrapped so a sibling expand button is valid HTML; tapping it
|
|
706
|
+
opens the peek while the card itself still navigates on first tap. */
|
|
707
|
+
.gallerist-thumb-wrap {
|
|
708
|
+
position: relative;
|
|
709
|
+
flex: 0 0 auto;
|
|
710
|
+
display: flex;
|
|
711
|
+
}
|
|
712
|
+
.gallerist-thumb-expand {
|
|
713
|
+
position: absolute;
|
|
714
|
+
top: 4px;
|
|
715
|
+
left: 4px;
|
|
716
|
+
display: inline-flex;
|
|
717
|
+
align-items: center;
|
|
718
|
+
justify-content: center;
|
|
719
|
+
width: 22px;
|
|
720
|
+
height: 22px;
|
|
721
|
+
padding: 0;
|
|
722
|
+
border: none;
|
|
723
|
+
border-radius: 6px;
|
|
724
|
+
background: var(--gallerist-scrim);
|
|
725
|
+
color: var(--gallerist-fg);
|
|
726
|
+
font: 700 13px / 1 var(--gallerist-font);
|
|
727
|
+
cursor: pointer;
|
|
728
|
+
backdrop-filter: blur(6px);
|
|
729
|
+
}
|
|
730
|
+
.gallerist-thumb-expand::before {
|
|
731
|
+
content: "⊞";
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
/* ── flat rail (groupDisplay: flat): every item side by side, each group under its label, a
|
|
735
|
+
hairline between neighbouring groups. Only the current group's label takes the accent. A group
|
|
736
|
+
the drawn run cuts (its rest isn't drawn yet) has no divider on that side, no label when cut at
|
|
737
|
+
its start, and its card at the cut fades. */
|
|
738
|
+
.gallerist-thumbs[data-display="flat"] {
|
|
739
|
+
align-items: stretch;
|
|
740
|
+
gap: 12px;
|
|
741
|
+
}
|
|
742
|
+
.gallerist-thumb-group {
|
|
743
|
+
flex: 0 0 auto;
|
|
744
|
+
display: flex;
|
|
745
|
+
flex-direction: column;
|
|
746
|
+
justify-content: flex-end; /* the item rows line up, labelled or not */
|
|
747
|
+
gap: 6px;
|
|
748
|
+
}
|
|
749
|
+
/* the divider: the same room on both sides of it (the rail's gap, then this padding) */
|
|
750
|
+
.gallerist-thumb-group + .gallerist-thumb-group {
|
|
751
|
+
padding-inline-start: 12px;
|
|
752
|
+
border-inline-start: 1px solid var(--gallerist-hairline);
|
|
753
|
+
}
|
|
754
|
+
.gallerist-thumb-group-cap {
|
|
755
|
+
contain: inline-size; /* a long label ends in an ellipsis instead of widening its group */
|
|
756
|
+
font: 500 11px / 14px var(--gallerist-font);
|
|
757
|
+
color: var(--gallerist-fg-muted);
|
|
758
|
+
white-space: nowrap;
|
|
759
|
+
overflow: hidden;
|
|
760
|
+
text-overflow: ellipsis;
|
|
761
|
+
}
|
|
762
|
+
.gallerist-thumbs[data-timeline] .gallerist-thumb-group-cap {
|
|
763
|
+
font-family: var(--gallerist-mono);
|
|
764
|
+
}
|
|
765
|
+
.gallerist-thumb-group[data-active] > .gallerist-thumb-group-cap {
|
|
766
|
+
color: var(--gallerist-accent);
|
|
767
|
+
}
|
|
768
|
+
.gallerist-thumb-group-row {
|
|
769
|
+
display: flex;
|
|
770
|
+
gap: 6px;
|
|
771
|
+
align-items: center;
|
|
772
|
+
}
|
|
773
|
+
/* a group the drawn run cuts: its card at the cut fades (unless current or focused) */
|
|
774
|
+
.gallerist-thumb-group[data-partial-start]
|
|
775
|
+
.gallerist-thumb-item:first-child:not([data-active], :focus-visible),
|
|
776
|
+
.gallerist-thumb-group[data-partial-end]
|
|
777
|
+
.gallerist-thumb-item:last-child:not([data-active], :focus-visible) {
|
|
778
|
+
opacity: 0.4;
|
|
779
|
+
}
|
|
780
|
+
/* a side rail: the groups run down it, each one's items in a column, the divider across the rail */
|
|
781
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumb-group-row {
|
|
782
|
+
flex-direction: column;
|
|
783
|
+
align-items: flex-start;
|
|
784
|
+
}
|
|
785
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumb-group + .gallerist-thumb-group {
|
|
786
|
+
padding: 12px 0 0;
|
|
787
|
+
border-inline-start: 0;
|
|
788
|
+
border-block-start: 1px solid var(--gallerist-hairline);
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
/* ── chrome buttons (one look for bar tools, arrows, item navigator, plugin buttons) ───────── */
|
|
792
|
+
.gallerist-bar button,
|
|
793
|
+
.gallerist-controls > button,
|
|
794
|
+
.gallerist-itemnav > button {
|
|
795
|
+
min-width: var(--gallerist-target);
|
|
796
|
+
min-height: var(--gallerist-target);
|
|
797
|
+
display: grid;
|
|
798
|
+
place-items: center;
|
|
799
|
+
padding: 0;
|
|
800
|
+
border: var(--gallerist-control-border);
|
|
801
|
+
border-radius: var(--gallerist-control-radius);
|
|
802
|
+
background: var(--gallerist-control-bg);
|
|
803
|
+
color: var(--gallerist-fg);
|
|
804
|
+
font: inherit;
|
|
805
|
+
cursor: pointer;
|
|
806
|
+
backdrop-filter: var(--gallerist-blur);
|
|
807
|
+
}
|
|
808
|
+
.gallerist-bar button {
|
|
809
|
+
border: var(--gallerist-tool-border);
|
|
810
|
+
background: var(--gallerist-tool-bg);
|
|
811
|
+
color: var(--gallerist-tool-fg);
|
|
812
|
+
}
|
|
813
|
+
.gallerist-bar button:hover:not([aria-pressed="true"]) {
|
|
814
|
+
background: var(--gallerist-tool-hover-bg);
|
|
815
|
+
}
|
|
816
|
+
.gallerist-controls > button {
|
|
817
|
+
min-width: var(--gallerist-arrow-size);
|
|
818
|
+
min-height: var(--gallerist-arrow-size);
|
|
819
|
+
border: var(--gallerist-arrow-border);
|
|
820
|
+
border-radius: var(--gallerist-arrow-radius);
|
|
821
|
+
background: var(--gallerist-arrow-bg);
|
|
822
|
+
}
|
|
823
|
+
.gallerist-itemnav > button {
|
|
824
|
+
border: var(--gallerist-itemnav-button-border);
|
|
825
|
+
background: var(--gallerist-itemnav-button-bg);
|
|
826
|
+
}
|
|
827
|
+
.gallerist-controls > button:hover {
|
|
828
|
+
background: var(--gallerist-arrow-hover-bg);
|
|
829
|
+
}
|
|
830
|
+
.gallerist-itemnav > button:hover {
|
|
831
|
+
background: var(--gallerist-itemnav-button-hover-bg);
|
|
832
|
+
}
|
|
833
|
+
.gallerist-bar button[hidden],
|
|
834
|
+
.gallerist-controls > button[hidden] {
|
|
835
|
+
display: none;
|
|
836
|
+
}
|
|
837
|
+
/* a tool unavailable for this item (download without a safe URL): dimmed, still focusable */
|
|
838
|
+
.gallerist-bar button[aria-disabled="true"] {
|
|
839
|
+
opacity: 0.4;
|
|
840
|
+
cursor: not-allowed;
|
|
841
|
+
}
|
|
842
|
+
/* pressed (a toggle that is on) reads differently from focus: an accent fill vs a ring */
|
|
843
|
+
.gallerist-bar button[aria-pressed="true"] {
|
|
844
|
+
background: var(--gallerist-pressed-bg);
|
|
845
|
+
border-color: var(--gallerist-pressed-bg);
|
|
846
|
+
color: var(--gallerist-pressed-fg);
|
|
847
|
+
box-shadow: var(--gallerist-pressed-shadow);
|
|
848
|
+
}
|
|
849
|
+
.gallerist-bar button:focus-visible,
|
|
850
|
+
.gallerist-controls > button:focus-visible,
|
|
851
|
+
.gallerist-itemnav button:focus-visible {
|
|
852
|
+
outline: 2px solid var(--gallerist-focus);
|
|
853
|
+
outline-offset: 2px;
|
|
854
|
+
}
|
|
855
|
+
.gallerist-icon {
|
|
856
|
+
width: 22px;
|
|
857
|
+
height: 22px;
|
|
858
|
+
display: block;
|
|
859
|
+
pointer-events: none;
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
/* ── top bar: counter → title → tools → zoom reset → close ─────────────────────── */
|
|
863
|
+
.gallerist-bar {
|
|
864
|
+
grid-area: bar;
|
|
865
|
+
position: relative;
|
|
866
|
+
z-index: 3;
|
|
867
|
+
background: var(--gallerist-bar-bg);
|
|
868
|
+
border-block-end: var(--gallerist-bar-border);
|
|
869
|
+
display: flex;
|
|
870
|
+
align-items: center;
|
|
871
|
+
gap: 8px;
|
|
872
|
+
min-width: 0;
|
|
873
|
+
min-height: var(--gallerist-toolbar-h);
|
|
874
|
+
padding-block: max(6px, env(safe-area-inset-top, 0px)) 6px;
|
|
875
|
+
padding-inline: max(12px, env(safe-area-inset-left, 0px))
|
|
876
|
+
max(12px, env(safe-area-inset-right, 0px));
|
|
877
|
+
}
|
|
878
|
+
.gallerist-counter {
|
|
879
|
+
flex: none;
|
|
880
|
+
font-family: var(--gallerist-counter-font);
|
|
881
|
+
font-size: 13px;
|
|
882
|
+
font-weight: 600;
|
|
883
|
+
font-variant-numeric: tabular-nums;
|
|
884
|
+
/* primary info — full-contrast fg clears WCAG AA over the translucent chrome (S-UX5) */
|
|
885
|
+
color: var(--gallerist-counter-fg);
|
|
886
|
+
/* keep "N / M" reading left-to-right even in an RTL document */
|
|
887
|
+
direction: ltr;
|
|
888
|
+
padding: 6px 10px;
|
|
889
|
+
border-radius: var(--gallerist-radius);
|
|
890
|
+
background: var(--gallerist-counter-bg);
|
|
891
|
+
}
|
|
892
|
+
.gallerist-title {
|
|
893
|
+
flex: 1 1 auto;
|
|
894
|
+
min-width: 0;
|
|
895
|
+
font-family: var(--gallerist-title-font);
|
|
896
|
+
font-size: var(--gallerist-title-size);
|
|
897
|
+
font-weight: var(--gallerist-title-weight);
|
|
898
|
+
white-space: nowrap;
|
|
899
|
+
overflow: hidden;
|
|
900
|
+
text-overflow: ellipsis;
|
|
901
|
+
}
|
|
902
|
+
.gallerist-title[hidden] {
|
|
903
|
+
display: none;
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
/* ── caption bar: the current item's caption, under the stage ──────────────────── */
|
|
907
|
+
.gallerist-caption {
|
|
908
|
+
grid-area: caption;
|
|
909
|
+
position: relative;
|
|
910
|
+
z-index: 2;
|
|
911
|
+
box-sizing: border-box;
|
|
912
|
+
height: calc(2 * 1.4em + 16px); /* a fixed two-line band: long captions clamp, never squeeze */
|
|
913
|
+
padding: 8px 16px;
|
|
914
|
+
font-size: var(--gallerist-caption-size);
|
|
915
|
+
line-height: 1.4;
|
|
916
|
+
text-align: var(--gallerist-caption-align);
|
|
917
|
+
color: var(--gallerist-fg);
|
|
918
|
+
overflow: hidden;
|
|
919
|
+
overflow-wrap: anywhere;
|
|
920
|
+
display: -webkit-box;
|
|
921
|
+
-webkit-box-orient: vertical;
|
|
922
|
+
-webkit-line-clamp: 2;
|
|
923
|
+
line-clamp: 2;
|
|
924
|
+
}
|
|
925
|
+
.gallerist-caption[hidden] {
|
|
926
|
+
display: none;
|
|
927
|
+
}
|
|
928
|
+
.gallerist-caption-text {
|
|
929
|
+
font-family: var(--gallerist-caption-font);
|
|
930
|
+
font-style: var(--gallerist-caption-style);
|
|
931
|
+
}
|
|
932
|
+
/* a caption renderer (plugin-captions, React <Gallerist.Caption>) owns the band: it grows with its
|
|
933
|
+
content from the text band's height, and the stage gives up the room. A placard keeps its slot. */
|
|
934
|
+
.gallerist:not([data-gallerist-indicator="placard"]) .gallerist-caption[data-gallerist-custom] {
|
|
935
|
+
display: block;
|
|
936
|
+
height: auto;
|
|
937
|
+
min-height: calc(2 * 1.4em + 16px);
|
|
938
|
+
max-height: 40vh;
|
|
939
|
+
overflow-y: auto;
|
|
940
|
+
-webkit-line-clamp: unset;
|
|
941
|
+
line-clamp: none;
|
|
942
|
+
}
|
|
943
|
+
.gallerist-caption[data-gallerist-custom] > .gallerist-caption-text {
|
|
944
|
+
display: none;
|
|
945
|
+
}
|
|
946
|
+
.gallerist-region-caption {
|
|
947
|
+
flex: 1 1 auto;
|
|
948
|
+
min-width: 0;
|
|
949
|
+
}
|
|
950
|
+
/* a placard keeps its slot (the stage doesn't move), so a caption taller than it scrolls inside
|
|
951
|
+
rather than being cut off */
|
|
952
|
+
.gallerist[data-gallerist-indicator="placard"] .gallerist-region-caption {
|
|
953
|
+
min-height: 0;
|
|
954
|
+
max-height: 100%;
|
|
955
|
+
overflow-y: auto;
|
|
956
|
+
}
|
|
957
|
+
/* a band that scrolls takes focus (renderer: tabindex while it overflows): ring it inside its box */
|
|
958
|
+
:is(.gallerist-caption, .gallerist-region-caption)[tabindex]:focus-visible {
|
|
959
|
+
outline: 2px solid var(--gallerist-focus);
|
|
960
|
+
outline-offset: -2px;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
/* ── arrows and the item navigator, over the stage (inside main) ────────────────── */
|
|
964
|
+
.gallerist-controls > .gallerist-prev,
|
|
965
|
+
.gallerist-controls > .gallerist-next {
|
|
966
|
+
position: absolute;
|
|
967
|
+
z-index: 4;
|
|
968
|
+
top: 50%;
|
|
969
|
+
transform: translateY(-50%);
|
|
970
|
+
}
|
|
971
|
+
.gallerist-prev {
|
|
972
|
+
inset-inline-start: 12px;
|
|
973
|
+
}
|
|
974
|
+
.gallerist-next {
|
|
975
|
+
inset-inline-end: 12px;
|
|
976
|
+
}
|
|
977
|
+
/* ↑ · position · ↓ as one cluster, so each arrow layout places it as a unit */
|
|
978
|
+
.gallerist-itemnav {
|
|
979
|
+
position: absolute;
|
|
980
|
+
z-index: 4;
|
|
981
|
+
display: flex;
|
|
982
|
+
flex-direction: column;
|
|
983
|
+
align-items: center;
|
|
984
|
+
gap: 6px;
|
|
985
|
+
padding: var(--gallerist-itemnav-padding);
|
|
986
|
+
border: var(--gallerist-itemnav-border);
|
|
987
|
+
border-radius: var(--gallerist-itemnav-radius);
|
|
988
|
+
background: var(--gallerist-itemnav-bg);
|
|
989
|
+
/* pill-right (default): a vertical cluster just inboard of the → arrow */
|
|
990
|
+
inset-inline-end: calc(12px + var(--gallerist-arrow-size) + 12px);
|
|
991
|
+
top: 50%;
|
|
992
|
+
transform: translateY(-50%);
|
|
993
|
+
}
|
|
994
|
+
.gallerist-itemnav[hidden] {
|
|
995
|
+
display: none;
|
|
996
|
+
}
|
|
997
|
+
/* corner-br: a horizontal cluster in the bottom inline-end corner */
|
|
998
|
+
.gallerist[data-gallerist-arrows="corner-br"] .gallerist-itemnav {
|
|
999
|
+
flex-direction: row;
|
|
1000
|
+
top: auto;
|
|
1001
|
+
transform: none;
|
|
1002
|
+
inset-inline-end: 12px;
|
|
1003
|
+
inset-block-end: 12px;
|
|
1004
|
+
}
|
|
1005
|
+
/* dpad: a keyboard-arrow cluster in the bottom inline-end corner — ↑ on top, ← ↓ → along the bottom */
|
|
1006
|
+
.gallerist[data-gallerist-arrows="dpad"] .gallerist-itemnav {
|
|
1007
|
+
top: auto;
|
|
1008
|
+
transform: none;
|
|
1009
|
+
inset-inline-end: calc(12px + var(--gallerist-arrow-size) + 6px);
|
|
1010
|
+
inset-block-end: 12px;
|
|
1011
|
+
}
|
|
1012
|
+
.gallerist[data-gallerist-arrows="dpad"] .gallerist-controls > .gallerist-prev,
|
|
1013
|
+
.gallerist[data-gallerist-arrows="dpad"] .gallerist-controls > .gallerist-next {
|
|
1014
|
+
top: auto;
|
|
1015
|
+
transform: none;
|
|
1016
|
+
inset-block-end: 12px;
|
|
1017
|
+
}
|
|
1018
|
+
.gallerist[data-gallerist-arrows="dpad"] .gallerist-prev {
|
|
1019
|
+
inset-inline-start: auto;
|
|
1020
|
+
inset-inline-end: calc(12px + 2 * (var(--gallerist-arrow-size) + 6px));
|
|
1021
|
+
}
|
|
1022
|
+
/* split: ↑ top-centre, ↓ bottom-centre, the position just under ↑ */
|
|
1023
|
+
.gallerist[data-gallerist-arrows="split"] .gallerist-itemnav:not([hidden]) {
|
|
1024
|
+
display: contents;
|
|
1025
|
+
}
|
|
1026
|
+
.gallerist[data-gallerist-arrows="split"] .gallerist-itemnav > * {
|
|
1027
|
+
position: absolute;
|
|
1028
|
+
z-index: 4;
|
|
1029
|
+
left: 50%;
|
|
1030
|
+
transform: translateX(-50%);
|
|
1031
|
+
}
|
|
1032
|
+
.gallerist[data-gallerist-arrows="split"] .gallerist-item-prev {
|
|
1033
|
+
top: 12px;
|
|
1034
|
+
}
|
|
1035
|
+
.gallerist[data-gallerist-arrows="split"] .gallerist-position {
|
|
1036
|
+
top: calc(12px + var(--gallerist-arrow-size) + 8px);
|
|
1037
|
+
flex-direction: row;
|
|
1038
|
+
}
|
|
1039
|
+
.gallerist[data-gallerist-arrows="split"] .gallerist-item-next {
|
|
1040
|
+
bottom: 12px;
|
|
1041
|
+
}
|
|
1042
|
+
/* vertical group axis (a side rail, by default): group ↑/↓, so the group arrows stack at the
|
|
1043
|
+
inline end and the item navigator runs horizontally along the bottom. Supersedes the arrow
|
|
1044
|
+
layouts above, which only position the horizontal mapping. */
|
|
1045
|
+
.gallerist[data-gallerist-axis="vertical"] .gallerist-controls > .gallerist-prev,
|
|
1046
|
+
.gallerist[data-gallerist-axis="vertical"] .gallerist-controls > .gallerist-next {
|
|
1047
|
+
top: 50%;
|
|
1048
|
+
bottom: auto;
|
|
1049
|
+
inset-inline-start: auto;
|
|
1050
|
+
inset-inline-end: 12px;
|
|
1051
|
+
}
|
|
1052
|
+
.gallerist[data-gallerist-axis="vertical"] .gallerist-controls > .gallerist-prev {
|
|
1053
|
+
transform: translateY(calc(-100% - 4px));
|
|
1054
|
+
}
|
|
1055
|
+
.gallerist[data-gallerist-axis="vertical"] .gallerist-controls > .gallerist-next {
|
|
1056
|
+
transform: translateY(4px);
|
|
1057
|
+
}
|
|
1058
|
+
.gallerist[data-gallerist-axis="vertical"][data-gallerist-arrows] .gallerist-itemnav:not([hidden]) {
|
|
1059
|
+
display: flex;
|
|
1060
|
+
flex-direction: row;
|
|
1061
|
+
top: auto;
|
|
1062
|
+
inset-block-end: 12px;
|
|
1063
|
+
inset-inline-end: auto;
|
|
1064
|
+
left: 50%;
|
|
1065
|
+
transform: translateX(-50%);
|
|
1066
|
+
}
|
|
1067
|
+
.gallerist[data-gallerist-axis="vertical"] .gallerist-itemnav > * {
|
|
1068
|
+
position: static;
|
|
1069
|
+
transform: none;
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
/* RTL: horizontal arrows point the reading direction (the keymap flips ←/→ the same way) */
|
|
1073
|
+
.gallerist[data-gallerist-axis="horizontal"][data-gallerist-dir="rtl"]
|
|
1074
|
+
:is(.gallerist-prev, .gallerist-next)
|
|
1075
|
+
.gallerist-icon,
|
|
1076
|
+
.gallerist[data-gallerist-axis="vertical"][data-gallerist-dir="rtl"]
|
|
1077
|
+
:is(.gallerist-item-prev, .gallerist-item-next)
|
|
1078
|
+
.gallerist-icon {
|
|
1079
|
+
transform: scaleX(-1);
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
/* ── within-group position: pills (≤ 8 items) or "n / N" ────────────────────────── */
|
|
1083
|
+
.gallerist-position {
|
|
1084
|
+
display: flex;
|
|
1085
|
+
flex-direction: inherit; /* runs along the cluster: a column in pill-right, a row elsewhere */
|
|
1086
|
+
align-items: center;
|
|
1087
|
+
gap: 4px;
|
|
1088
|
+
padding: 4px;
|
|
1089
|
+
border-radius: 999px;
|
|
1090
|
+
background: var(--gallerist-position-bg);
|
|
1091
|
+
backdrop-filter: var(--gallerist-blur);
|
|
1092
|
+
font: 600 var(--gallerist-position-size) var(--gallerist-position-font);
|
|
1093
|
+
font-variant-numeric: tabular-nums;
|
|
1094
|
+
color: var(--gallerist-position-fg);
|
|
1095
|
+
}
|
|
1096
|
+
.gallerist-position-text {
|
|
1097
|
+
padding: 2px 6px;
|
|
1098
|
+
direction: ltr;
|
|
1099
|
+
white-space: nowrap;
|
|
1100
|
+
}
|
|
1101
|
+
.gallerist-position[data-mode="pills"] .gallerist-position-text {
|
|
1102
|
+
display: none;
|
|
1103
|
+
}
|
|
1104
|
+
.gallerist-pill {
|
|
1105
|
+
min-width: 22px;
|
|
1106
|
+
height: 22px;
|
|
1107
|
+
padding: 0 6px;
|
|
1108
|
+
border: 0;
|
|
1109
|
+
border-radius: 999px;
|
|
1110
|
+
background: transparent;
|
|
1111
|
+
color: var(--gallerist-fg);
|
|
1112
|
+
font: inherit;
|
|
1113
|
+
cursor: pointer;
|
|
1114
|
+
opacity: 0.6;
|
|
1115
|
+
}
|
|
1116
|
+
.gallerist-pill[data-active] {
|
|
1117
|
+
background: var(--gallerist-selection);
|
|
1118
|
+
color: var(--gallerist-selection-fg);
|
|
1119
|
+
opacity: 1;
|
|
1120
|
+
}
|
|
1121
|
+
/* dots: a small mark per item inside a 20px hit area; the active one grows */
|
|
1122
|
+
.gallerist-dot {
|
|
1123
|
+
display: grid;
|
|
1124
|
+
place-items: center;
|
|
1125
|
+
width: 20px;
|
|
1126
|
+
height: 20px;
|
|
1127
|
+
padding: 0;
|
|
1128
|
+
border: 0;
|
|
1129
|
+
background: transparent;
|
|
1130
|
+
cursor: pointer;
|
|
1131
|
+
}
|
|
1132
|
+
.gallerist-dot::before {
|
|
1133
|
+
content: "";
|
|
1134
|
+
width: 6px;
|
|
1135
|
+
height: 6px;
|
|
1136
|
+
border-radius: 999px;
|
|
1137
|
+
background: var(--gallerist-fg);
|
|
1138
|
+
opacity: var(--gallerist-dot-opacity);
|
|
1139
|
+
}
|
|
1140
|
+
.gallerist-dot[data-active]::before {
|
|
1141
|
+
width: var(--gallerist-dot-active-across);
|
|
1142
|
+
height: var(--gallerist-dot-active-along);
|
|
1143
|
+
opacity: 1;
|
|
1144
|
+
}
|
|
1145
|
+
/* where the dots run as a row, the current one stretches sideways */
|
|
1146
|
+
.gallerist[data-gallerist-arrows="corner-br"] .gallerist-dot[data-active]::before,
|
|
1147
|
+
.gallerist[data-gallerist-arrows="split"] .gallerist-dot[data-active]::before,
|
|
1148
|
+
.gallerist[data-gallerist-axis="vertical"] .gallerist-dot[data-active]::before {
|
|
1149
|
+
width: var(--gallerist-dot-active-along);
|
|
1150
|
+
height: var(--gallerist-dot-active-across);
|
|
1151
|
+
}
|
|
1152
|
+
.gallerist-dot:focus-visible,
|
|
1153
|
+
.gallerist-pill:focus-visible {
|
|
1154
|
+
outline: 2px solid var(--gallerist-focus);
|
|
1155
|
+
outline-offset: 1px;
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1158
|
+
/* zoom navigator: a minimap of the zoomed image in the bottom inline-start corner; the view box is
|
|
1159
|
+
the visible part, everything outside it dimmed */
|
|
1160
|
+
.gallerist-navigator {
|
|
1161
|
+
position: absolute;
|
|
1162
|
+
z-index: 4;
|
|
1163
|
+
inset-inline-start: 12px;
|
|
1164
|
+
inset-block-end: 12px;
|
|
1165
|
+
/* the longer side is the token; the renderer sets the image's aspect ratio */
|
|
1166
|
+
width: var(--gallerist-navigator-size);
|
|
1167
|
+
height: auto;
|
|
1168
|
+
overflow: hidden;
|
|
1169
|
+
border: var(--gallerist-control-border);
|
|
1170
|
+
border-radius: var(--gallerist-navigator-radius); /* a minimap keeps its corners */
|
|
1171
|
+
background: var(--gallerist-surface) center / 100% 100% no-repeat;
|
|
1172
|
+
box-shadow: var(--gallerist-shadow);
|
|
1173
|
+
cursor: crosshair;
|
|
1174
|
+
touch-action: none;
|
|
1175
|
+
pointer-events: auto;
|
|
1176
|
+
}
|
|
1177
|
+
.gallerist-navigator[data-shape="portrait"] {
|
|
1178
|
+
width: auto;
|
|
1179
|
+
height: var(--gallerist-navigator-size);
|
|
1180
|
+
}
|
|
1181
|
+
.gallerist-navigator[hidden] {
|
|
1182
|
+
display: none;
|
|
1183
|
+
}
|
|
1184
|
+
.gallerist-navigator-view {
|
|
1185
|
+
position: absolute;
|
|
1186
|
+
box-sizing: border-box;
|
|
1187
|
+
border: 1.5px solid var(--gallerist-accent);
|
|
1188
|
+
box-shadow: 0 0 0 999px rgb(0 0 0 / 0.45);
|
|
1189
|
+
pointer-events: none;
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
/* placard (itemIndicator: 'placard'): the caption is a label, the caption text then the item
|
|
1193
|
+
navigator with a tick per item. Under the stage it is one band of fixed height, so the stage keeps
|
|
1194
|
+
its size as captions and groups change; beside the work (editorial, wide screens) a column. */
|
|
1195
|
+
.gallerist[data-gallerist-indicator="placard"] .gallerist-caption {
|
|
1196
|
+
display: flex;
|
|
1197
|
+
flex-direction: row;
|
|
1198
|
+
align-items: center;
|
|
1199
|
+
gap: 16px;
|
|
1200
|
+
height: var(--gallerist-placard-band-h);
|
|
1201
|
+
padding: 0 16px;
|
|
1202
|
+
overflow: hidden;
|
|
1203
|
+
-webkit-line-clamp: unset;
|
|
1204
|
+
line-clamp: none;
|
|
1205
|
+
}
|
|
1206
|
+
.gallerist[data-gallerist-indicator="placard"] .gallerist-caption-text {
|
|
1207
|
+
flex: 1 1 auto;
|
|
1208
|
+
min-width: 0;
|
|
1209
|
+
overflow: hidden;
|
|
1210
|
+
white-space: nowrap;
|
|
1211
|
+
text-overflow: ellipsis;
|
|
1212
|
+
line-height: 1.2;
|
|
1213
|
+
}
|
|
1214
|
+
.gallerist[data-gallerist-indicator="placard"][data-gallerist-arrows]
|
|
1215
|
+
.gallerist-caption
|
|
1216
|
+
.gallerist-itemnav:not([hidden]) {
|
|
1217
|
+
position: static;
|
|
1218
|
+
display: flex;
|
|
1219
|
+
flex: none;
|
|
1220
|
+
flex-direction: row;
|
|
1221
|
+
align-items: center;
|
|
1222
|
+
gap: 8px;
|
|
1223
|
+
inset: auto;
|
|
1224
|
+
transform: none;
|
|
1225
|
+
padding: 0;
|
|
1226
|
+
border: 0;
|
|
1227
|
+
border-radius: 0;
|
|
1228
|
+
background: transparent;
|
|
1229
|
+
}
|
|
1230
|
+
.gallerist[data-gallerist-indicator="placard"][data-gallerist-arrows]
|
|
1231
|
+
.gallerist-caption
|
|
1232
|
+
.gallerist-itemnav
|
|
1233
|
+
> * {
|
|
1234
|
+
position: static;
|
|
1235
|
+
transform: none;
|
|
1236
|
+
}
|
|
1237
|
+
.gallerist[data-gallerist-indicator="placard"] .gallerist-caption .gallerist-position {
|
|
1238
|
+
order: -1; /* ticks and the count first, the ↑ ↓ buttons after */
|
|
1239
|
+
display: flex;
|
|
1240
|
+
flex-direction: row;
|
|
1241
|
+
align-items: center;
|
|
1242
|
+
gap: 0;
|
|
1243
|
+
padding: 0;
|
|
1244
|
+
background: transparent;
|
|
1245
|
+
font: 600 15px var(--gallerist-font);
|
|
1246
|
+
color: var(--gallerist-fg);
|
|
1247
|
+
}
|
|
1248
|
+
.gallerist[data-gallerist-indicator="placard"] .gallerist-caption .gallerist-position-text {
|
|
1249
|
+
order: 1;
|
|
1250
|
+
padding: 0 0 0 10px;
|
|
1251
|
+
}
|
|
1252
|
+
/* a tick: a short rule in a 24px target */
|
|
1253
|
+
.gallerist[data-gallerist-indicator="placard"] .gallerist-caption .gallerist-dot {
|
|
1254
|
+
width: 24px;
|
|
1255
|
+
height: 24px;
|
|
1256
|
+
place-items: center;
|
|
1257
|
+
}
|
|
1258
|
+
.gallerist[data-gallerist-indicator="placard"] .gallerist-caption .gallerist-dot::before {
|
|
1259
|
+
width: 16px;
|
|
1260
|
+
height: 2px;
|
|
1261
|
+
border-radius: 0;
|
|
1262
|
+
opacity: 0.6;
|
|
1263
|
+
}
|
|
1264
|
+
.gallerist[data-gallerist-indicator="placard"]
|
|
1265
|
+
.gallerist-caption
|
|
1266
|
+
.gallerist-dot[data-active]::before {
|
|
1267
|
+
width: 22px;
|
|
1268
|
+
height: 2px;
|
|
1269
|
+
opacity: 1;
|
|
1270
|
+
background: var(--gallerist-accent);
|
|
1271
|
+
}
|
|
1272
|
+
/* beside the work: a column (its height can't move the stage there); ticks run down, the count
|
|
1273
|
+
beside them */
|
|
1274
|
+
@media (min-width: 601px) {
|
|
1275
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"][data-gallerist-indicator="placard"]
|
|
1276
|
+
.gallerist-caption {
|
|
1277
|
+
flex-direction: column;
|
|
1278
|
+
align-items: stretch;
|
|
1279
|
+
justify-content: center;
|
|
1280
|
+
gap: 18px;
|
|
1281
|
+
width: var(--gallerist-placard-w);
|
|
1282
|
+
height: auto;
|
|
1283
|
+
padding: 16px 28px 16px 12px;
|
|
1284
|
+
}
|
|
1285
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"][data-gallerist-indicator="placard"]
|
|
1286
|
+
.gallerist-caption-text {
|
|
1287
|
+
flex: none;
|
|
1288
|
+
display: -webkit-box;
|
|
1289
|
+
-webkit-box-orient: vertical;
|
|
1290
|
+
-webkit-line-clamp: 4;
|
|
1291
|
+
line-clamp: 4;
|
|
1292
|
+
white-space: normal;
|
|
1293
|
+
}
|
|
1294
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"][data-gallerist-indicator="placard"]
|
|
1295
|
+
.gallerist-caption-text:empty {
|
|
1296
|
+
display: none;
|
|
1297
|
+
}
|
|
1298
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"][data-gallerist-indicator="placard"][data-gallerist-arrows]
|
|
1299
|
+
.gallerist-caption
|
|
1300
|
+
.gallerist-itemnav:not([hidden]) {
|
|
1301
|
+
padding-block-start: 16px;
|
|
1302
|
+
border-block-start: 1px solid var(--gallerist-hairline);
|
|
1303
|
+
}
|
|
1304
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"][data-gallerist-indicator="placard"]
|
|
1305
|
+
.gallerist-caption
|
|
1306
|
+
.gallerist-position {
|
|
1307
|
+
flex: 1 1 auto;
|
|
1308
|
+
display: grid;
|
|
1309
|
+
grid-template-columns: auto 1fr;
|
|
1310
|
+
column-gap: 14px;
|
|
1311
|
+
}
|
|
1312
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"][data-gallerist-indicator="placard"]
|
|
1313
|
+
.gallerist-caption
|
|
1314
|
+
.gallerist-position-text {
|
|
1315
|
+
grid-column: 2;
|
|
1316
|
+
grid-row: 1 / span 12;
|
|
1317
|
+
padding: 0;
|
|
1318
|
+
}
|
|
1319
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"][data-gallerist-indicator="placard"]
|
|
1320
|
+
.gallerist-caption
|
|
1321
|
+
.gallerist-dot {
|
|
1322
|
+
place-items: center start;
|
|
1323
|
+
}
|
|
1324
|
+
}
|
|
1325
|
+
|
|
1326
|
+
/* linear flat traversal: the item axis retires (the renderer also hides the navigator) */
|
|
1327
|
+
.gallerist[data-gallerist-linear="true"] .gallerist-itemnav {
|
|
1328
|
+
display: none;
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
/* ── rail: collapse to its handle (the stage grows into the freed track) ─────────── */
|
|
1332
|
+
.gallerist-region-thumbnails {
|
|
1333
|
+
display: flex;
|
|
1334
|
+
flex-direction: column;
|
|
1335
|
+
}
|
|
1336
|
+
.gallerist[data-gallerist-rail="collapsed"] .gallerist-thumbs-region {
|
|
1337
|
+
display: none;
|
|
1338
|
+
}
|
|
1339
|
+
/* the pull-handle: a grip tab on the rail's edge — clearly part of the gallery */
|
|
1340
|
+
.gallerist-rail-handle {
|
|
1341
|
+
flex: 0 0 auto;
|
|
1342
|
+
height: var(--gallerist-rail-handle-h);
|
|
1343
|
+
display: flex;
|
|
1344
|
+
align-items: center;
|
|
1345
|
+
justify-content: center;
|
|
1346
|
+
pointer-events: none;
|
|
1347
|
+
}
|
|
1348
|
+
.gallerist-rail-toggle {
|
|
1349
|
+
pointer-events: auto;
|
|
1350
|
+
display: grid;
|
|
1351
|
+
grid-auto-flow: column;
|
|
1352
|
+
align-items: center;
|
|
1353
|
+
gap: 6px;
|
|
1354
|
+
height: 22px;
|
|
1355
|
+
min-width: 52px;
|
|
1356
|
+
padding: 0 10px;
|
|
1357
|
+
border: 1px solid var(--gallerist-hairline);
|
|
1358
|
+
border-radius: 999px;
|
|
1359
|
+
background: var(--gallerist-chrome-bg);
|
|
1360
|
+
color: var(--gallerist-fg);
|
|
1361
|
+
cursor: pointer;
|
|
1362
|
+
backdrop-filter: var(--gallerist-blur);
|
|
1363
|
+
}
|
|
1364
|
+
.gallerist-rail-toggle::before {
|
|
1365
|
+
/* a small grip glyph so the tab reads as draggable/openable */
|
|
1366
|
+
content: "";
|
|
1367
|
+
width: 22px;
|
|
1368
|
+
height: 3px;
|
|
1369
|
+
border-radius: 2px;
|
|
1370
|
+
background: currentColor;
|
|
1371
|
+
opacity: 0.5;
|
|
1372
|
+
}
|
|
1373
|
+
.gallerist-rail-toggle:focus-visible {
|
|
1374
|
+
outline: 2px solid var(--gallerist-focus);
|
|
1375
|
+
outline-offset: 2px;
|
|
1376
|
+
}
|
|
1377
|
+
.gallerist-rail-toggle .gallerist-icon {
|
|
1378
|
+
width: 16px;
|
|
1379
|
+
height: 16px;
|
|
1380
|
+
transition: transform var(--gallerist-dur-gentle, 280ms) var(--gallerist-ease-out, ease);
|
|
1381
|
+
}
|
|
1382
|
+
/* expanded = chevron points down (pull down to hide); collapsed = points up (pull up to show) */
|
|
1383
|
+
.gallerist-rail-toggle[aria-pressed="true"] .gallerist-icon {
|
|
1384
|
+
transform: rotate(180deg);
|
|
1385
|
+
}
|
|
1386
|
+
|
|
1387
|
+
/* labelled group arrows (`arrowLabels`): the name hangs under the arrow, so the arrows move in far
|
|
1388
|
+
enough to keep it on the stage */
|
|
1389
|
+
.gallerist[data-gallerist-arrow-labels] .gallerist-controls > .gallerist-prev {
|
|
1390
|
+
inset-inline-start: 36px;
|
|
1391
|
+
}
|
|
1392
|
+
.gallerist[data-gallerist-arrow-labels] .gallerist-controls > .gallerist-next {
|
|
1393
|
+
inset-inline-end: 36px;
|
|
1394
|
+
}
|
|
1395
|
+
.gallerist[data-gallerist-arrow-labels] .gallerist-itemnav {
|
|
1396
|
+
inset-inline-end: calc(36px + var(--gallerist-arrow-size) + 12px);
|
|
1397
|
+
}
|
|
1398
|
+
.gallerist-arrow-label {
|
|
1399
|
+
position: absolute;
|
|
1400
|
+
top: calc(100% + 6px);
|
|
1401
|
+
left: 50%;
|
|
1402
|
+
transform: translateX(-50%);
|
|
1403
|
+
width: max-content;
|
|
1404
|
+
max-width: 96px;
|
|
1405
|
+
padding: 1px 6px;
|
|
1406
|
+
border-radius: 6px;
|
|
1407
|
+
overflow: hidden;
|
|
1408
|
+
text-overflow: ellipsis;
|
|
1409
|
+
white-space: nowrap;
|
|
1410
|
+
font: 500 12px / 1.4 var(--gallerist-font);
|
|
1411
|
+
color: var(--gallerist-fg-muted);
|
|
1412
|
+
background: var(--gallerist-scrim);
|
|
1413
|
+
pointer-events: none;
|
|
1414
|
+
}
|
|
1415
|
+
.gallerist-arrow-label[hidden] {
|
|
1416
|
+
display: none;
|
|
1417
|
+
}
|
|
1418
|
+
|
|
1419
|
+
/* the `tour` preset: the photo keeps clear of the arrows and the item navigator */
|
|
1420
|
+
.gallerist[data-gallerist-preset="tour"][data-gallerist-frame] .gallerist-media,
|
|
1421
|
+
.gallerist[data-gallerist-preset="tour"][data-gallerist-frame] .gallerist-media-image {
|
|
1422
|
+
border-radius: 16px;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
/* the section index (`groupDisplay: 'index'`): rows in a side rail */
|
|
1426
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumbs[data-display="index"] {
|
|
1427
|
+
width: var(--gallerist-index-w);
|
|
1428
|
+
gap: 6px;
|
|
1429
|
+
padding: 12px;
|
|
1430
|
+
}
|
|
1431
|
+
.gallerist-thumb-section {
|
|
1432
|
+
flex: 0 0 auto;
|
|
1433
|
+
display: flex;
|
|
1434
|
+
flex-direction: column;
|
|
1435
|
+
gap: 6px;
|
|
1436
|
+
min-width: 0;
|
|
1437
|
+
}
|
|
1438
|
+
.gallerist-thumb-row {
|
|
1439
|
+
display: flex;
|
|
1440
|
+
align-items: center;
|
|
1441
|
+
gap: 12px;
|
|
1442
|
+
width: 100%;
|
|
1443
|
+
min-height: 56px;
|
|
1444
|
+
padding: 6px 8px;
|
|
1445
|
+
border: 0;
|
|
1446
|
+
border-radius: 12px;
|
|
1447
|
+
font: 500 14px / 1.25 var(--gallerist-font);
|
|
1448
|
+
text-align: start;
|
|
1449
|
+
color: var(--gallerist-fg);
|
|
1450
|
+
background: transparent;
|
|
1451
|
+
cursor: pointer;
|
|
1452
|
+
}
|
|
1453
|
+
.gallerist-thumb-row:hover {
|
|
1454
|
+
background: var(--gallerist-tool-hover-bg);
|
|
1455
|
+
}
|
|
1456
|
+
.gallerist-thumb-row:focus-visible {
|
|
1457
|
+
outline: 2px solid var(--gallerist-focus);
|
|
1458
|
+
outline-offset: 1px;
|
|
1459
|
+
}
|
|
1460
|
+
.gallerist-thumb-row[data-active] {
|
|
1461
|
+
color: var(--gallerist-selection);
|
|
1462
|
+
background: var(--gallerist-group-bg);
|
|
1463
|
+
box-shadow: inset 0 0 0 1px var(--gallerist-selection);
|
|
1464
|
+
}
|
|
1465
|
+
.gallerist-thumb-row > .gallerist-thumb-img {
|
|
1466
|
+
flex: none;
|
|
1467
|
+
width: 56px;
|
|
1468
|
+
height: 44px;
|
|
1469
|
+
border-radius: 8px;
|
|
1470
|
+
object-fit: cover;
|
|
1471
|
+
background: var(--gallerist-cell-bg);
|
|
1472
|
+
}
|
|
1473
|
+
.gallerist-thumb-row-text {
|
|
1474
|
+
flex: 1 1 auto;
|
|
1475
|
+
display: flex;
|
|
1476
|
+
flex-direction: column;
|
|
1477
|
+
min-width: 0;
|
|
1478
|
+
}
|
|
1479
|
+
.gallerist-thumb-row-name,
|
|
1480
|
+
.gallerist-thumb-row-sub {
|
|
1481
|
+
overflow: hidden;
|
|
1482
|
+
text-overflow: ellipsis;
|
|
1483
|
+
white-space: nowrap;
|
|
1484
|
+
}
|
|
1485
|
+
.gallerist-thumb-row-sub {
|
|
1486
|
+
font-size: 12px;
|
|
1487
|
+
font-weight: 400;
|
|
1488
|
+
color: var(--gallerist-fg-muted);
|
|
1489
|
+
}
|
|
1490
|
+
.gallerist-thumb-row-count {
|
|
1491
|
+
flex: none;
|
|
1492
|
+
min-width: 24px;
|
|
1493
|
+
padding: 2px 6px;
|
|
1494
|
+
border-radius: 999px;
|
|
1495
|
+
font-size: 12px;
|
|
1496
|
+
text-align: center;
|
|
1497
|
+
color: var(--gallerist-fg-muted);
|
|
1498
|
+
background: var(--gallerist-group-bg);
|
|
1499
|
+
}
|
|
1500
|
+
/* the active section's items, a wrapping row under its row */
|
|
1501
|
+
.gallerist[data-gallerist-orientation] .gallerist-thumb-section > .gallerist-thumb-items {
|
|
1502
|
+
flex-direction: row;
|
|
1503
|
+
flex-wrap: wrap;
|
|
1504
|
+
max-height: none;
|
|
1505
|
+
overflow: visible;
|
|
1506
|
+
padding: 0 0 6px;
|
|
1507
|
+
margin: 0;
|
|
1508
|
+
border: 0;
|
|
1509
|
+
}
|
|
1510
|
+
/* the numbers name them here: captions would only truncate at this size */
|
|
1511
|
+
.gallerist-thumb-section .gallerist-thumb-caption {
|
|
1512
|
+
display: none;
|
|
1513
|
+
}
|
|
1514
|
+
.gallerist-thumb-section > .gallerist-thumb-items > .gallerist-thumb-item {
|
|
1515
|
+
flex: 0 0 calc((100% - 12px) / 3);
|
|
1516
|
+
width: auto;
|
|
1517
|
+
min-width: 0;
|
|
1518
|
+
}
|
|
1519
|
+
/* a bottom rail: a strip of chips, name and count (the item navigator covers the items) */
|
|
1520
|
+
.gallerist[data-gallerist-orientation="horizontal"]
|
|
1521
|
+
.gallerist-thumbs[data-display="index"]
|
|
1522
|
+
.gallerist-thumb-row {
|
|
1523
|
+
width: auto;
|
|
1524
|
+
min-height: 44px;
|
|
1525
|
+
padding: 4px 12px;
|
|
1526
|
+
border-radius: 999px;
|
|
1527
|
+
white-space: nowrap;
|
|
1528
|
+
}
|
|
1529
|
+
.gallerist[data-gallerist-orientation="horizontal"]
|
|
1530
|
+
.gallerist-thumbs[data-display="index"]
|
|
1531
|
+
:is(.gallerist-thumb-img, .gallerist-thumb-row-sub) {
|
|
1532
|
+
display: none;
|
|
1533
|
+
}
|
|
1534
|
+
.gallerist[data-gallerist-orientation="horizontal"]
|
|
1535
|
+
.gallerist-thumb-section
|
|
1536
|
+
> .gallerist-thumb-items {
|
|
1537
|
+
display: none;
|
|
1538
|
+
}
|
|
1539
|
+
.gallerist[data-gallerist-orientation="horizontal"]:has(.gallerist-thumbs[data-display="index"])
|
|
1540
|
+
.gallerist-bar
|
|
1541
|
+
.gallerist-items-toggle {
|
|
1542
|
+
display: none; /* chips don't expand their items */
|
|
1543
|
+
}
|
|
1544
|
+
/* an overview (`grid({ layout: 'sections' })`) is a whole screen: nothing stays over or beside it
|
|
1545
|
+
(a docked item navigator is a root grid item, outside the controls box) */
|
|
1546
|
+
.gallerist:has(.gallerist-grid[data-layout="sections"][aria-hidden="false"])
|
|
1547
|
+
:is(.gallerist-controls, .gallerist-caption, .gallerist-itemnav) {
|
|
1548
|
+
display: none;
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
/* side rails: the strip runs down an edge; the handle sits on its stage-facing side */
|
|
1552
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-region-thumbnails {
|
|
1553
|
+
flex-direction: row;
|
|
1554
|
+
}
|
|
1555
|
+
.gallerist[data-gallerist-rail-pos="left"] .gallerist-rail-handle {
|
|
1556
|
+
order: 1; /* on the stage-facing side */
|
|
1557
|
+
}
|
|
1558
|
+
/* RTL reverses the row, so the stage-facing side flips */
|
|
1559
|
+
.gallerist[data-gallerist-dir="rtl"][data-gallerist-rail-pos="left"] .gallerist-rail-handle {
|
|
1560
|
+
order: 0;
|
|
1561
|
+
}
|
|
1562
|
+
.gallerist[data-gallerist-dir="rtl"][data-gallerist-rail-pos="right"] .gallerist-rail-handle {
|
|
1563
|
+
order: 1;
|
|
1564
|
+
}
|
|
1565
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumbs-region {
|
|
1566
|
+
display: flex;
|
|
1567
|
+
flex-direction: column;
|
|
1568
|
+
min-height: 0;
|
|
1569
|
+
}
|
|
1570
|
+
.gallerist[data-gallerist-orientation="vertical"][data-gallerist-rail="collapsed"]
|
|
1571
|
+
.gallerist-thumbs-region {
|
|
1572
|
+
display: none;
|
|
1573
|
+
}
|
|
1574
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumbs {
|
|
1575
|
+
flex: 1 1 auto;
|
|
1576
|
+
min-height: 0;
|
|
1577
|
+
width: var(--gallerist-rail-w);
|
|
1578
|
+
flex-direction: column;
|
|
1579
|
+
align-items: stretch;
|
|
1580
|
+
overflow-x: hidden;
|
|
1581
|
+
overflow-y: auto;
|
|
1582
|
+
}
|
|
1583
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-rail-handle {
|
|
1584
|
+
height: auto;
|
|
1585
|
+
width: var(--gallerist-rail-handle-h);
|
|
1586
|
+
}
|
|
1587
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-rail-toggle {
|
|
1588
|
+
grid-auto-flow: row;
|
|
1589
|
+
height: auto;
|
|
1590
|
+
min-width: 0;
|
|
1591
|
+
width: 22px;
|
|
1592
|
+
min-height: 52px;
|
|
1593
|
+
padding: 10px 0;
|
|
1594
|
+
}
|
|
1595
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-rail-toggle::before {
|
|
1596
|
+
width: 3px;
|
|
1597
|
+
height: 22px;
|
|
1598
|
+
}
|
|
1599
|
+
/* chevron points the way the rail will travel: left rail hides leftward, shows rightward. */
|
|
1600
|
+
.gallerist[data-gallerist-rail-pos="left"] .gallerist-rail-toggle .gallerist-icon {
|
|
1601
|
+
transform: rotate(90deg);
|
|
1602
|
+
}
|
|
1603
|
+
.gallerist[data-gallerist-rail-pos="left"]
|
|
1604
|
+
.gallerist-rail-toggle[aria-pressed="true"]
|
|
1605
|
+
.gallerist-icon {
|
|
1606
|
+
transform: rotate(-90deg);
|
|
1607
|
+
}
|
|
1608
|
+
.gallerist[data-gallerist-rail-pos="right"] .gallerist-rail-toggle .gallerist-icon {
|
|
1609
|
+
transform: rotate(-90deg);
|
|
1610
|
+
}
|
|
1611
|
+
.gallerist[data-gallerist-rail-pos="right"]
|
|
1612
|
+
.gallerist-rail-toggle[aria-pressed="true"]
|
|
1613
|
+
.gallerist-icon {
|
|
1614
|
+
transform: rotate(90deg);
|
|
1615
|
+
}
|
|
1616
|
+
/* a peek flyout opens toward the stage (away from a side rail), top-aligned */
|
|
1617
|
+
.gallerist[data-gallerist-rail-pos="left"] .gallerist-thumb-peek {
|
|
1618
|
+
left: calc(100% + 10px);
|
|
1619
|
+
right: auto;
|
|
1620
|
+
top: 8px;
|
|
1621
|
+
bottom: auto;
|
|
1622
|
+
}
|
|
1623
|
+
.gallerist[data-gallerist-rail-pos="right"] .gallerist-thumb-peek {
|
|
1624
|
+
right: calc(100% + 10px);
|
|
1625
|
+
left: auto;
|
|
1626
|
+
top: 8px;
|
|
1627
|
+
bottom: auto;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
/* ── immersive: the stage fills the viewer and the chrome floats over it ──────────
|
|
1631
|
+
main spans every track; bar, caption and rail keep their own tracks (so they still never
|
|
1632
|
+
collide) and stack above it. */
|
|
1633
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-main {
|
|
1634
|
+
grid-row: 1 / -1;
|
|
1635
|
+
grid-column: 1 / -1;
|
|
1636
|
+
}
|
|
1637
|
+
/* minimal UI: no side stack (the in-stage item navigator covers the item axis) */
|
|
1638
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-region-aside,
|
|
1639
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-bar .gallerist-items-toggle {
|
|
1640
|
+
display: none;
|
|
1641
|
+
}
|
|
1642
|
+
/* the bands over the stage pass gestures through except on their controls */
|
|
1643
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-bar,
|
|
1644
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-caption {
|
|
1645
|
+
pointer-events: none;
|
|
1646
|
+
}
|
|
1647
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-bar > * {
|
|
1648
|
+
pointer-events: auto;
|
|
1649
|
+
}
|
|
1650
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-caption {
|
|
1651
|
+
background: var(--gallerist-chrome-bg);
|
|
1652
|
+
}
|
|
1653
|
+
|
|
1654
|
+
/* ── idle auto-hide (UX-C): chrome fades but keeps its place (no layout jump) ───── */
|
|
1655
|
+
.gallerist-bar,
|
|
1656
|
+
.gallerist-controls > button,
|
|
1657
|
+
.gallerist-itemnav,
|
|
1658
|
+
.gallerist-navigator,
|
|
1659
|
+
.gallerist-caption {
|
|
1660
|
+
transition: opacity var(--gallerist-dur-gentle, 280ms) var(--gallerist-ease-out, ease);
|
|
1661
|
+
}
|
|
1662
|
+
.gallerist[data-gallerist-idle] .gallerist-bar,
|
|
1663
|
+
.gallerist[data-gallerist-idle] .gallerist-controls > button,
|
|
1664
|
+
.gallerist[data-gallerist-idle] .gallerist-itemnav,
|
|
1665
|
+
.gallerist[data-gallerist-idle] .gallerist-navigator,
|
|
1666
|
+
.gallerist[data-gallerist-idle] .gallerist-caption {
|
|
1667
|
+
opacity: 0;
|
|
1668
|
+
pointer-events: none;
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1671
|
+
/* ── a11y live region (visually hidden) ────────────────────────────────────── */
|
|
1672
|
+
.gallerist-live {
|
|
1673
|
+
position: absolute;
|
|
1674
|
+
width: 1px;
|
|
1675
|
+
height: 1px;
|
|
1676
|
+
margin: -1px;
|
|
1677
|
+
padding: 0;
|
|
1678
|
+
overflow: hidden;
|
|
1679
|
+
clip: rect(0 0 0 0);
|
|
1680
|
+
white-space: nowrap;
|
|
1681
|
+
border: 0;
|
|
1682
|
+
}
|
|
1683
|
+
|
|
1684
|
+
/* ── motion: distinct axis transitions (spec §27.5) ────────────────────────── */
|
|
1685
|
+
@keyframes gallerist-enter-group {
|
|
1686
|
+
from {
|
|
1687
|
+
opacity: 0;
|
|
1688
|
+
transform: translateX(6%);
|
|
1689
|
+
}
|
|
1690
|
+
to {
|
|
1691
|
+
opacity: 1;
|
|
1692
|
+
transform: none;
|
|
1693
|
+
}
|
|
1694
|
+
}
|
|
1695
|
+
@keyframes gallerist-enter-item {
|
|
1696
|
+
from {
|
|
1697
|
+
opacity: 0;
|
|
1698
|
+
transform: scale(0.9) translateY(2%);
|
|
1699
|
+
}
|
|
1700
|
+
to {
|
|
1701
|
+
opacity: 1;
|
|
1702
|
+
transform: none;
|
|
1703
|
+
}
|
|
1704
|
+
}
|
|
1705
|
+
@keyframes gallerist-fade {
|
|
1706
|
+
from {
|
|
1707
|
+
opacity: 0;
|
|
1708
|
+
}
|
|
1709
|
+
to {
|
|
1710
|
+
opacity: 1;
|
|
1711
|
+
}
|
|
1712
|
+
}
|
|
1713
|
+
/* a fade that settles from slightly larger: the item axis of a skin that fades (never the same
|
|
1714
|
+
motion as its group axis, spec §27.5) */
|
|
1715
|
+
@keyframes gallerist-fade-settle {
|
|
1716
|
+
from {
|
|
1717
|
+
opacity: 0;
|
|
1718
|
+
transform: scale(1.025);
|
|
1719
|
+
}
|
|
1720
|
+
to {
|
|
1721
|
+
opacity: 1;
|
|
1722
|
+
transform: none;
|
|
1723
|
+
}
|
|
1724
|
+
}
|
|
1725
|
+
@keyframes gallerist-fade-out {
|
|
1726
|
+
from {
|
|
1727
|
+
opacity: 1;
|
|
1728
|
+
}
|
|
1729
|
+
to {
|
|
1730
|
+
opacity: 0;
|
|
1731
|
+
}
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
/* time axis = horizontal slide; screen axis = depth pop — never the same motion */
|
|
1735
|
+
.gallerist-slide[data-gallerist-enter="group"] {
|
|
1736
|
+
animation: var(--gallerist-enter-group) var(--gallerist-dur-snappy) var(--gallerist-ease-out);
|
|
1737
|
+
}
|
|
1738
|
+
.gallerist-slide[data-gallerist-enter="item"] {
|
|
1739
|
+
animation: var(--gallerist-enter-item) var(--gallerist-dur-snappy) var(--gallerist-ease-pop);
|
|
1740
|
+
}
|
|
1741
|
+
/* open/close: the renderer settles the viewer to open/closed when these end (data-gallerist-phase) */
|
|
1742
|
+
.gallerist[data-gallerist-mode="overlay"][data-gallerist-phase="opening"] {
|
|
1743
|
+
animation: gallerist-fade var(--gallerist-dur-gentle) var(--gallerist-ease-out);
|
|
1744
|
+
}
|
|
1745
|
+
.gallerist[data-gallerist-mode="overlay"][data-gallerist-phase="closing"] {
|
|
1746
|
+
animation: gallerist-fade-out var(--gallerist-dur-exit) ease-in forwards;
|
|
1747
|
+
pointer-events: none; /* a fading viewer must not take clicks meant for the page */
|
|
1748
|
+
}
|
|
1749
|
+
|
|
1750
|
+
/* immersive preset: chrome AND the rail fade together on idle (UX-E). */
|
|
1751
|
+
.gallerist[data-gallerist-preset="immersive"][data-gallerist-idle] .gallerist-region-thumbnails {
|
|
1752
|
+
opacity: 0;
|
|
1753
|
+
pointer-events: none;
|
|
1754
|
+
}
|
|
1755
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-region-thumbnails {
|
|
1756
|
+
transition: opacity var(--gallerist-dur-gentle) var(--gallerist-ease-out);
|
|
1757
|
+
}
|
|
1758
|
+
|
|
1759
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1760
|
+
.gallerist-media-image,
|
|
1761
|
+
.gallerist-bar,
|
|
1762
|
+
.gallerist-controls > button,
|
|
1763
|
+
.gallerist-itemnav,
|
|
1764
|
+
.gallerist-caption,
|
|
1765
|
+
.gallerist-thumb,
|
|
1766
|
+
.gallerist-thumb-item,
|
|
1767
|
+
.gallerist-rail-toggle .gallerist-icon,
|
|
1768
|
+
.gallerist[data-gallerist-preset="immersive"] .gallerist-region-thumbnails {
|
|
1769
|
+
transition-duration: 0ms;
|
|
1770
|
+
}
|
|
1771
|
+
/* the phase selector must match the phase rules' specificity (0,3,0) so this later rule wins */
|
|
1772
|
+
.gallerist-slide[data-gallerist-enter],
|
|
1773
|
+
.gallerist[data-gallerist-mode][data-gallerist-phase] {
|
|
1774
|
+
animation: none;
|
|
1775
|
+
}
|
|
1776
|
+
}
|
|
1777
|
+
|
|
1778
|
+
/* ── mobile layer ──────────────────────────────────────────────────────────────
|
|
1779
|
+
Two independent axes: a narrow screen gets compact chrome and drops the side column; a coarse
|
|
1780
|
+
(touch) pointer gets 44px targets, swipes instead of on-image arrows, and the item position as
|
|
1781
|
+
text. Last in the file so it wins over the layouts above at equal specificity. */
|
|
1782
|
+
/* compact sizes: a layer above the skins (so they beat a skin's own sizes) and below the page (so a
|
|
1783
|
+
host's --gallerist-* overrides still win) */
|
|
1784
|
+
@layer gallerist.compact {
|
|
1785
|
+
.gallerist[data-gallerist-preset="tour"] {
|
|
1786
|
+
--gallerist-frame-inset: 156px; /* the labelled arrows + item navigator, beside the photo */
|
|
1787
|
+
--gallerist-frame-shadow: var(--gallerist-shadow);
|
|
1788
|
+
}
|
|
1789
|
+
@media (max-width: 600px) {
|
|
1790
|
+
.gallerist[data-gallerist-preset="tour"] {
|
|
1791
|
+
--gallerist-frame-inset: 12px;
|
|
1792
|
+
}
|
|
1793
|
+
}
|
|
1794
|
+
/* a narrow viewer, or a short one (a phone turned sideways) */
|
|
1795
|
+
@media (max-width: 600px), (max-height: 500px) {
|
|
1796
|
+
.gallerist {
|
|
1797
|
+
--gallerist-thumb-h: 56px;
|
|
1798
|
+
--gallerist-toolbar-h: 52px;
|
|
1799
|
+
--gallerist-rail-w: 64px; /* a side rail leaves the stage most of a narrow screen */
|
|
1800
|
+
--gallerist-navigator-size: 96px;
|
|
1801
|
+
--gallerist-frame-inset: var(--gallerist-frame-inset-compact); /* a skin's phone inset */
|
|
1802
|
+
}
|
|
1803
|
+
}
|
|
1804
|
+
@media (pointer: coarse) {
|
|
1805
|
+
.gallerist {
|
|
1806
|
+
--gallerist-rail-handle-h: 44px;
|
|
1807
|
+
}
|
|
1808
|
+
}
|
|
1809
|
+
}
|
|
1810
|
+
@media (max-width: 600px) {
|
|
1811
|
+
.gallerist-region-aside,
|
|
1812
|
+
.gallerist .gallerist-bar .gallerist-items-toggle {
|
|
1813
|
+
display: none;
|
|
1814
|
+
}
|
|
1815
|
+
/* editorial: the placard drops under the work, as the caption band */
|
|
1816
|
+
.gallerist[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"] {
|
|
1817
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1818
|
+
grid-template-rows: auto minmax(var(--gallerist-stage-floor), 1fr) auto auto auto;
|
|
1819
|
+
grid-template-areas:
|
|
1820
|
+
"bar"
|
|
1821
|
+
"main"
|
|
1822
|
+
"caption"
|
|
1823
|
+
"footer"
|
|
1824
|
+
"rail";
|
|
1825
|
+
}
|
|
1826
|
+
/* the bottom edge belongs to the item position chip: the navigator goes to the top corner */
|
|
1827
|
+
.gallerist-navigator {
|
|
1828
|
+
inset-block: 12px auto;
|
|
1829
|
+
}
|
|
1830
|
+
.gallerist-bar {
|
|
1831
|
+
gap: 4px;
|
|
1832
|
+
padding-inline: max(8px, env(safe-area-inset-left, 0px))
|
|
1833
|
+
max(8px, env(safe-area-inset-right, 0px));
|
|
1834
|
+
}
|
|
1835
|
+
.gallerist-title {
|
|
1836
|
+
font-size: 13px;
|
|
1837
|
+
}
|
|
1838
|
+
.gallerist-caption {
|
|
1839
|
+
padding: 6px 12px;
|
|
1840
|
+
font-size: 13px;
|
|
1841
|
+
}
|
|
1842
|
+
}
|
|
1843
|
+
/* a short viewer (a phone turned sideways): compact caption type, and a bottom rail's handle sits
|
|
1844
|
+
beside the strip instead of on top of it, so the stage keeps its share of the height. The rail keeps
|
|
1845
|
+
its full height: a tall caption band scrolls rather than squeezing the strip off the screen. */
|
|
1846
|
+
@media (max-height: 500px) {
|
|
1847
|
+
.gallerist-caption {
|
|
1848
|
+
padding: 6px 12px;
|
|
1849
|
+
font-size: 13px;
|
|
1850
|
+
}
|
|
1851
|
+
.gallerist[data-gallerist-orientation="horizontal"] .gallerist-region-thumbnails {
|
|
1852
|
+
flex-direction: row;
|
|
1853
|
+
min-height: auto;
|
|
1854
|
+
}
|
|
1855
|
+
.gallerist[data-gallerist-orientation="horizontal"] .gallerist-rail-handle {
|
|
1856
|
+
height: auto;
|
|
1857
|
+
}
|
|
1858
|
+
.gallerist[data-gallerist-orientation="horizontal"] .gallerist-thumbs-region {
|
|
1859
|
+
flex: 1 1 auto;
|
|
1860
|
+
}
|
|
1861
|
+
}
|
|
1862
|
+
@media (pointer: coarse) {
|
|
1863
|
+
.gallerist-rail-toggle {
|
|
1864
|
+
height: 44px;
|
|
1865
|
+
}
|
|
1866
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-rail-toggle {
|
|
1867
|
+
width: 44px;
|
|
1868
|
+
}
|
|
1869
|
+
.gallerist-thumb-item {
|
|
1870
|
+
min-height: 44px;
|
|
1871
|
+
}
|
|
1872
|
+
/* swipes move between groups on touch: the group arrows stay available to assistive tech, and
|
|
1873
|
+
reappear when focused from a keyboard */
|
|
1874
|
+
.gallerist-controls > .gallerist-prev:not(:focus-visible),
|
|
1875
|
+
.gallerist-controls > .gallerist-next:not(:focus-visible) {
|
|
1876
|
+
position: absolute;
|
|
1877
|
+
width: 1px;
|
|
1878
|
+
height: 1px;
|
|
1879
|
+
min-width: 0;
|
|
1880
|
+
min-height: 0;
|
|
1881
|
+
padding: 0;
|
|
1882
|
+
overflow: hidden;
|
|
1883
|
+
clip-path: inset(50%);
|
|
1884
|
+
white-space: nowrap;
|
|
1885
|
+
border: 0;
|
|
1886
|
+
}
|
|
1887
|
+
/* tapping a card navigates; peeking is a hover nicety, so no caret over the thumbnail */
|
|
1888
|
+
.gallerist-thumb-expand {
|
|
1889
|
+
display: none;
|
|
1890
|
+
}
|
|
1891
|
+
.gallerist-pill,
|
|
1892
|
+
.gallerist-dot {
|
|
1893
|
+
display: none;
|
|
1894
|
+
}
|
|
1895
|
+
.gallerist-position[data-mode="pills"] .gallerist-position-text {
|
|
1896
|
+
display: inline;
|
|
1897
|
+
}
|
|
1898
|
+
/* the item position as a small chip at the bottom centre of the stage */
|
|
1899
|
+
.gallerist[data-gallerist-arrows][data-gallerist-orientation] .gallerist-itemnav:not([hidden]) {
|
|
1900
|
+
display: flex;
|
|
1901
|
+
flex-direction: row;
|
|
1902
|
+
top: auto;
|
|
1903
|
+
inset-block-end: 12px;
|
|
1904
|
+
inset-inline-end: auto;
|
|
1905
|
+
left: 50%;
|
|
1906
|
+
transform: translateX(-50%);
|
|
1907
|
+
}
|
|
1908
|
+
/* every navigator child back in the row (split positions them one by one) */
|
|
1909
|
+
.gallerist[data-gallerist-arrows][data-gallerist-orientation] .gallerist-itemnav > * {
|
|
1910
|
+
position: static;
|
|
1911
|
+
transform: none;
|
|
1912
|
+
}
|
|
1913
|
+
/* immersive: the stage spans the viewer, so the bottom edge belongs to the rail handle */
|
|
1914
|
+
.gallerist[data-gallerist-preset="immersive"][data-gallerist-arrows][data-gallerist-orientation]
|
|
1915
|
+
.gallerist-itemnav:not([hidden]) {
|
|
1916
|
+
top: 50%;
|
|
1917
|
+
inset-block-end: auto;
|
|
1918
|
+
left: auto;
|
|
1919
|
+
inset-inline-end: 12px;
|
|
1920
|
+
transform: translateY(-50%);
|
|
1921
|
+
}
|
|
1922
|
+
}
|
|
1923
|
+
|
|
1924
|
+
/* a section index where it can't share the width: below this the frame inset (a quarter of the stage
|
|
1925
|
+
at most) no longer clears the labelled arrows, so the side rail becomes the bottom strip of chips */
|
|
1926
|
+
@media (max-width: 900px) {
|
|
1927
|
+
.gallerist:has(.gallerist-thumbs[data-display="index"]) .gallerist-bar .gallerist-items-toggle {
|
|
1928
|
+
display: none; /* chips don't expand their items */
|
|
1929
|
+
}
|
|
1930
|
+
.gallerist[data-gallerist-rail-pos]:has(.gallerist-thumbs[data-display="index"]) {
|
|
1931
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1932
|
+
grid-template-rows: auto minmax(var(--gallerist-stage-floor), 1fr) auto auto auto;
|
|
1933
|
+
grid-template-areas:
|
|
1934
|
+
"bar"
|
|
1935
|
+
"main"
|
|
1936
|
+
"caption"
|
|
1937
|
+
"footer"
|
|
1938
|
+
"rail";
|
|
1939
|
+
}
|
|
1940
|
+
.gallerist[data-gallerist-orientation="vertical"]
|
|
1941
|
+
.gallerist-region-thumbnails:has(.gallerist-thumbs[data-display="index"]) {
|
|
1942
|
+
flex-direction: column;
|
|
1943
|
+
align-items: stretch;
|
|
1944
|
+
}
|
|
1945
|
+
/* stretched to the screen, so the strip scrolls rather than running off both edges */
|
|
1946
|
+
.gallerist[data-gallerist-orientation="vertical"]
|
|
1947
|
+
.gallerist-region-thumbnails:has(.gallerist-thumbs[data-display="index"])
|
|
1948
|
+
.gallerist-thumbs-region {
|
|
1949
|
+
align-items: stretch;
|
|
1950
|
+
}
|
|
1951
|
+
.gallerist[data-gallerist-orientation="vertical"]
|
|
1952
|
+
.gallerist-region-thumbnails:has(.gallerist-thumbs[data-display="index"])
|
|
1953
|
+
.gallerist-rail-handle {
|
|
1954
|
+
display: none;
|
|
1955
|
+
}
|
|
1956
|
+
.gallerist[data-gallerist-orientation="vertical"] .gallerist-thumbs[data-display="index"] {
|
|
1957
|
+
flex-direction: row;
|
|
1958
|
+
width: auto;
|
|
1959
|
+
gap: 8px;
|
|
1960
|
+
padding: 8px 12px;
|
|
1961
|
+
overflow-x: auto;
|
|
1962
|
+
overflow-y: hidden;
|
|
1963
|
+
border-inline: 0 none;
|
|
1964
|
+
}
|
|
1965
|
+
.gallerist[data-gallerist-orientation="vertical"]
|
|
1966
|
+
.gallerist-thumbs[data-display="index"]
|
|
1967
|
+
.gallerist-thumb-row {
|
|
1968
|
+
width: auto;
|
|
1969
|
+
min-height: 48px;
|
|
1970
|
+
padding: 4px 14px;
|
|
1971
|
+
border-radius: 999px;
|
|
1972
|
+
white-space: nowrap;
|
|
1973
|
+
}
|
|
1974
|
+
.gallerist[data-gallerist-orientation="vertical"]
|
|
1975
|
+
.gallerist-thumbs[data-display="index"]
|
|
1976
|
+
:is(.gallerist-thumb-img, .gallerist-thumb-row-sub) {
|
|
1977
|
+
display: none;
|
|
1978
|
+
}
|
|
1979
|
+
.gallerist[data-gallerist-orientation="vertical"]
|
|
1980
|
+
.gallerist-thumb-section
|
|
1981
|
+
> .gallerist-thumb-items {
|
|
1982
|
+
display: none;
|
|
1983
|
+
}
|
|
1984
|
+
}
|
|
1985
|
+
|
|
1986
|
+
/* ── docked controls (`arrows: 'docked'`, the reviewer preset): nothing over the media ─────────
|
|
1987
|
+
Review needs every pixel, corners included. The group arrows sit in gutters the stage leaves at
|
|
1988
|
+
its sides (none on touch, where swipes stand in for them). The item navigator is a grid item of
|
|
1989
|
+
the root, the count over ↑ ↓: a header on the aside item column while that shows, else at the
|
|
1990
|
+
end of the caption row, which makes room for it. While any group has several items it keeps its
|
|
1991
|
+
room on a one-item group, so the stage and the item column hold still. Last in the file, so it
|
|
1992
|
+
wins over the arrow layouts and the touch chip above. Where no row or column beside the stage is
|
|
1993
|
+
free (immersive) it falls back to the stage's corner; the zoom minimap stays over the media (it
|
|
1994
|
+
shows only while zoomed, and is the zoom tool itself). */
|
|
1995
|
+
.gallerist[data-gallerist-arrows="docked"]:has(.gallerist-prev) .gallerist-stage {
|
|
1996
|
+
inset-inline: calc(var(--gallerist-arrow-size) + 24px);
|
|
1997
|
+
}
|
|
1998
|
+
.gallerist[data-gallerist-arrows="docked"][data-gallerist-axis="vertical"] .gallerist-stage {
|
|
1999
|
+
inset-inline-start: 0; /* both group arrows stack at the inline end */
|
|
2000
|
+
}
|
|
2001
|
+
@media (pointer: coarse) {
|
|
2002
|
+
.gallerist[data-gallerist-arrows="docked"]:has(.gallerist-prev) .gallerist-stage {
|
|
2003
|
+
inset-inline: 0;
|
|
2004
|
+
}
|
|
2005
|
+
}
|
|
2006
|
+
/* one group (and no linear walk): the group arrows have nowhere to go, so they and their gutters go */
|
|
2007
|
+
.gallerist[data-gallerist-arrows="docked"][data-gallerist-one-group]:not([data-gallerist-linear])
|
|
2008
|
+
.gallerist-stage {
|
|
2009
|
+
inset-inline: 0;
|
|
2010
|
+
}
|
|
2011
|
+
.gallerist[data-gallerist-arrows="docked"][data-gallerist-one-group]:not([data-gallerist-linear])
|
|
2012
|
+
:is(.gallerist-prev, .gallerist-next) {
|
|
2013
|
+
display: none;
|
|
2014
|
+
}
|
|
2015
|
+
.gallerist[data-gallerist-arrows="docked"][data-gallerist-axis][data-gallerist-orientation][data-gallerist-rail]
|
|
2016
|
+
> .gallerist-itemnav {
|
|
2017
|
+
grid-area: caption;
|
|
2018
|
+
align-self: start;
|
|
2019
|
+
justify-self: end;
|
|
2020
|
+
position: relative;
|
|
2021
|
+
z-index: 3;
|
|
2022
|
+
inset: auto;
|
|
2023
|
+
transform: none;
|
|
2024
|
+
box-sizing: border-box;
|
|
2025
|
+
inline-size: var(--gallerist-dock-w);
|
|
2026
|
+
block-size: var(--gallerist-dock-h);
|
|
2027
|
+
margin: 4px 12px;
|
|
2028
|
+
border-radius: min(var(--gallerist-itemnav-radius), var(--gallerist-radius)); /* a box, not a pill */
|
|
2029
|
+
flex-flow: row wrap;
|
|
2030
|
+
place-content: center;
|
|
2031
|
+
gap: 2px 4px;
|
|
2032
|
+
padding: 4px;
|
|
2033
|
+
}
|
|
2034
|
+
.gallerist[data-gallerist-arrows="docked"][data-gallerist-multi]:not([data-gallerist-linear])
|
|
2035
|
+
> .gallerist-itemnav[hidden] {
|
|
2036
|
+
display: flex;
|
|
2037
|
+
visibility: hidden;
|
|
2038
|
+
}
|
|
2039
|
+
.gallerist[data-gallerist-arrows="docked"] > .gallerist-itemnav .gallerist-position {
|
|
2040
|
+
order: -1;
|
|
2041
|
+
flex-basis: 100%;
|
|
2042
|
+
justify-content: center;
|
|
2043
|
+
padding: 0;
|
|
2044
|
+
}
|
|
2045
|
+
.gallerist[data-gallerist-arrows="docked"]
|
|
2046
|
+
> .gallerist-itemnav
|
|
2047
|
+
:is(.gallerist-pill, .gallerist-dot) {
|
|
2048
|
+
display: none;
|
|
2049
|
+
}
|
|
2050
|
+
.gallerist[data-gallerist-arrows="docked"] > .gallerist-itemnav .gallerist-position-text {
|
|
2051
|
+
display: inline;
|
|
2052
|
+
}
|
|
2053
|
+
.gallerist[data-gallerist-arrows="docked"][data-gallerist-multi]:not([data-gallerist-linear]):has(
|
|
2054
|
+
> .gallerist-itemnav
|
|
2055
|
+
)
|
|
2056
|
+
> .gallerist-caption {
|
|
2057
|
+
margin-inline-end: calc(var(--gallerist-dock-w) + 12px);
|
|
2058
|
+
}
|
|
2059
|
+
/* the navigator sets a floor under the caption row; a bottom rail keeps its full height beside it
|
|
2060
|
+
(a tall caption band scrolls instead of pushing the strip off a small screen) */
|
|
2061
|
+
.gallerist[data-gallerist-arrows="docked"][data-gallerist-orientation="horizontal"]
|
|
2062
|
+
.gallerist-region-thumbnails {
|
|
2063
|
+
min-height: auto;
|
|
2064
|
+
}
|
|
2065
|
+
@media (min-width: 601px) {
|
|
2066
|
+
/* editorial without a placard: the caption is a column beside the work; the navigator ends it */
|
|
2067
|
+
.gallerist:where(
|
|
2068
|
+
[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"]
|
|
2069
|
+
)[data-gallerist-arrows="docked"][data-gallerist-axis][data-gallerist-orientation][data-gallerist-rail]
|
|
2070
|
+
> .gallerist-itemnav {
|
|
2071
|
+
align-self: end;
|
|
2072
|
+
justify-self: start;
|
|
2073
|
+
}
|
|
2074
|
+
.gallerist:where(
|
|
2075
|
+
[data-gallerist-preset="editorial"][data-gallerist-rail-pos="bottom"]
|
|
2076
|
+
)[data-gallerist-arrows="docked"][data-gallerist-multi]:not([data-gallerist-linear]):has(
|
|
2077
|
+
> .gallerist-itemnav
|
|
2078
|
+
)
|
|
2079
|
+
> .gallerist-caption {
|
|
2080
|
+
margin: 0 0 calc(var(--gallerist-dock-h) + 8px);
|
|
2081
|
+
}
|
|
2082
|
+
/* the item column shows (a stacked rail's items beside the stage): the navigator heads it */
|
|
2083
|
+
.gallerist[data-gallerist-arrows="docked"]:not([data-gallerist-rail="collapsed"]):has(
|
|
2084
|
+
> .gallerist-region-aside .gallerist-thumb-items
|
|
2085
|
+
)
|
|
2086
|
+
> .gallerist-itemnav {
|
|
2087
|
+
grid-area: aside;
|
|
2088
|
+
align-self: start;
|
|
2089
|
+
justify-self: stretch;
|
|
2090
|
+
inline-size: auto;
|
|
2091
|
+
min-inline-size: var(--gallerist-dock-w);
|
|
2092
|
+
contain: inline-size; /* as wide as the column, which it doesn't widen past its own minimum */
|
|
2093
|
+
margin-block: 8px 0;
|
|
2094
|
+
margin-inline: 0 8px;
|
|
2095
|
+
}
|
|
2096
|
+
.gallerist[data-gallerist-arrows="docked"][data-gallerist-multi]:not(
|
|
2097
|
+
[data-gallerist-linear],
|
|
2098
|
+
[data-gallerist-rail="collapsed"]
|
|
2099
|
+
):has(> .gallerist-region-aside .gallerist-thumb-items)
|
|
2100
|
+
> .gallerist-region-aside {
|
|
2101
|
+
padding-block-start: calc(var(--gallerist-dock-h) + 8px);
|
|
2102
|
+
}
|
|
2103
|
+
.gallerist[data-gallerist-arrows="docked"]:not([data-gallerist-rail="collapsed"]):has(
|
|
2104
|
+
> .gallerist-region-aside .gallerist-thumb-items
|
|
2105
|
+
)
|
|
2106
|
+
> .gallerist-caption {
|
|
2107
|
+
margin: 0;
|
|
2108
|
+
}
|
|
2109
|
+
}
|
|
2110
|
+
/* immersive: the stage runs under every band, so nothing beside it is free; the navigator takes the
|
|
2111
|
+
stage's bottom inline-end corner, above the caption band (as `corner-br`) */
|
|
2112
|
+
.gallerist[data-gallerist-preset="immersive"][data-gallerist-arrows="docked"][data-gallerist-axis][data-gallerist-orientation][data-gallerist-rail]
|
|
2113
|
+
> .gallerist-itemnav {
|
|
2114
|
+
grid-area: main;
|
|
2115
|
+
align-self: end;
|
|
2116
|
+
justify-self: end;
|
|
2117
|
+
inline-size: var(--gallerist-dock-w);
|
|
2118
|
+
margin: 12px;
|
|
2119
|
+
}
|
|
2120
|
+
.gallerist[data-gallerist-preset="immersive"][data-gallerist-arrows="docked"][data-gallerist-multi]:has(
|
|
2121
|
+
> .gallerist-itemnav
|
|
2122
|
+
)
|
|
2123
|
+
> .gallerist-caption {
|
|
2124
|
+
margin: 0;
|
|
2125
|
+
}
|