@gallerist/theme-default 0.0.0-stage → 0.3.0
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 +2113 -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/console.css
ADDED
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @gallerist/theme-default — console.css: the Console skin. Load it after gallerist.css and set
|
|
3
|
+
* `skin: 'console'` (data-gallerist-skin="console"). A pro-review look: flat graphite bands with
|
|
4
|
+
* hairlines, one signal accent for what's current, a neutral focus ring, monospaced numerals. Set
|
|
5
|
+
* `font-family: "IBM Plex Sans"` / `"IBM Plex Mono"` on the page for the drawn faces (the theme
|
|
6
|
+
* downloads no fonts).
|
|
7
|
+
* accents: amber (default), cyan, vermilion (data-gallerist-accent)
|
|
8
|
+
* schemes: dark = Graphite (default), light = Paper (data-gallerist-scheme: dark | light | auto)
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/* Token declarations sit in cascade layers so a page's own --gallerist-* overrides always win,
|
|
12
|
+
whatever the skin, scheme or accent, and so the skins apply in a fixed order whatever order the
|
|
13
|
+
files load in. Component rules stay unlayered, so a page's element resets can't strip them. */
|
|
14
|
+
@layer gallerist.base, gallerist.gallery, gallerist.console, gallerist.editorial, gallerist.compact;
|
|
15
|
+
|
|
16
|
+
@layer gallerist.console {
|
|
17
|
+
.gallerist[data-gallerist-skin="console"] {
|
|
18
|
+
color-scheme: dark;
|
|
19
|
+
/* Graphite: flat, opaque bands; the media is the only thing with depth */
|
|
20
|
+
--gallerist-bg: #0e0f11;
|
|
21
|
+
--gallerist-backdrop: rgb(14 15 17); /* opaque: a phone showed the page through */
|
|
22
|
+
--gallerist-fg: #e6e8eb;
|
|
23
|
+
--gallerist-fg-muted: #a3a9b1;
|
|
24
|
+
--gallerist-chrome-bg: #16181b; /* surface 1: bands, panels, arrows */
|
|
25
|
+
--gallerist-hairline: #2a2e34;
|
|
26
|
+
--gallerist-radius: 6px;
|
|
27
|
+
--gallerist-toolbar-h: 56px;
|
|
28
|
+
--gallerist-thumb-h: 76px;
|
|
29
|
+
--gallerist-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
30
|
+
--gallerist-font: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
|
|
31
|
+
|
|
32
|
+
/* surfaces and fills */
|
|
33
|
+
--gallerist-surface: #1e2125; /* surface 2: thumbnail cards */
|
|
34
|
+
--gallerist-cell-bg: #1e2125;
|
|
35
|
+
--gallerist-panel: rgb(14 15 17 / 0.97); /* full-stage panels (grid), pin cards */
|
|
36
|
+
--gallerist-scrim: rgb(14 15 17 / 0.8);
|
|
37
|
+
--gallerist-badge-bg: rgb(14 15 17 / 0.88);
|
|
38
|
+
--gallerist-caption-band: transparent;
|
|
39
|
+
--gallerist-group-bg: #1a1c1f;
|
|
40
|
+
--gallerist-placeholder: rgb(255 255 255 / 0.04);
|
|
41
|
+
--gallerist-shimmer: rgb(255 255 255 / 0.05);
|
|
42
|
+
--gallerist-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
|
|
43
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #3a3f46, 6px 6px 0 -2px #2a2e34;
|
|
44
|
+
--gallerist-blur: none;
|
|
45
|
+
|
|
46
|
+
/* the bar and rail are solid bands with a hairline; tools are flat until pressed */
|
|
47
|
+
--gallerist-bar-bg: var(--gallerist-chrome-bg);
|
|
48
|
+
--gallerist-bar-border: 1px solid var(--gallerist-hairline);
|
|
49
|
+
--gallerist-rail-bg: var(--gallerist-chrome-bg);
|
|
50
|
+
--gallerist-rail-border: 1px solid var(--gallerist-hairline);
|
|
51
|
+
--gallerist-control-bg: var(--gallerist-chrome-bg);
|
|
52
|
+
--gallerist-control-border: 1px solid var(--gallerist-hairline);
|
|
53
|
+
--gallerist-control-radius: 4px;
|
|
54
|
+
--gallerist-counter-font: var(--gallerist-mono);
|
|
55
|
+
--gallerist-counter-bg: transparent;
|
|
56
|
+
--gallerist-counter-fg: var(--gallerist-fg);
|
|
57
|
+
--gallerist-title-size: 14px;
|
|
58
|
+
--gallerist-title-weight: 600;
|
|
59
|
+
--gallerist-caption-size: 13px;
|
|
60
|
+
--gallerist-caption-align: start;
|
|
61
|
+
--gallerist-tool-bg: transparent;
|
|
62
|
+
--gallerist-tool-border: 0 solid transparent;
|
|
63
|
+
--gallerist-tool-fg: var(--gallerist-fg-muted);
|
|
64
|
+
--gallerist-tool-hover-bg: #1e2125;
|
|
65
|
+
--gallerist-arrow-size: var(--gallerist-target);
|
|
66
|
+
--gallerist-arrow-bg: var(--gallerist-chrome-bg);
|
|
67
|
+
--gallerist-arrow-border: 1px solid var(--gallerist-hairline);
|
|
68
|
+
--gallerist-arrow-radius: 4px;
|
|
69
|
+
--gallerist-arrow-hover-bg: #1e2125;
|
|
70
|
+
--gallerist-itemnav-bg: var(--gallerist-chrome-bg); /* the item stack panel */
|
|
71
|
+
--gallerist-itemnav-border: 1px solid var(--gallerist-hairline);
|
|
72
|
+
--gallerist-itemnav-radius: 6px;
|
|
73
|
+
--gallerist-itemnav-padding: 4px;
|
|
74
|
+
--gallerist-itemnav-button-bg: transparent;
|
|
75
|
+
--gallerist-itemnav-button-border: 0 solid transparent;
|
|
76
|
+
--gallerist-itemnav-button-hover-bg: #1e2125;
|
|
77
|
+
--gallerist-position-bg: transparent;
|
|
78
|
+
--gallerist-position-font: var(--gallerist-mono);
|
|
79
|
+
--gallerist-position-size: 11px;
|
|
80
|
+
--gallerist-position-fg: var(--gallerist-fg-muted);
|
|
81
|
+
--gallerist-dot-opacity: 0.45;
|
|
82
|
+
--gallerist-dot-active-along: 9px; /* the current dot, along the run and across it */
|
|
83
|
+
--gallerist-dot-active-across: 9px;
|
|
84
|
+
|
|
85
|
+
/* thumbnails: the current one takes the accent ring, the rest recede a little */
|
|
86
|
+
--gallerist-thumb-radius: 3px;
|
|
87
|
+
--gallerist-panel-bg: var(--gallerist-chrome-bg); /* the item stack */
|
|
88
|
+
--gallerist-flyout-bg: var(--gallerist-chrome-bg); /* the peek flyout */
|
|
89
|
+
--gallerist-thumb-active-border: var(--gallerist-selection);
|
|
90
|
+
--gallerist-thumb-ring: 0 0 0 1px var(--gallerist-selection);
|
|
91
|
+
--gallerist-item-ring: 0 0 0 1px var(--gallerist-selection);
|
|
92
|
+
--gallerist-thumb-idle-opacity: 0.72;
|
|
93
|
+
|
|
94
|
+
/* signal accent: amber by default. *-fg is the ink that sits on the accent. */
|
|
95
|
+
--gallerist-accent: var(--gallerist-accent-dark);
|
|
96
|
+
--gallerist-accent-fg: var(--gallerist-accent-dark-fg);
|
|
97
|
+
--gallerist-accent-dark: #f2a93b;
|
|
98
|
+
--gallerist-accent-dark-fg: #17130b;
|
|
99
|
+
--gallerist-accent-light: #9a5b00;
|
|
100
|
+
--gallerist-accent-light-fg: #fff;
|
|
101
|
+
/* the accent marks what's current; focus is a neutral ring so it never reads as selection */
|
|
102
|
+
--gallerist-focus: #f5f6f7;
|
|
103
|
+
--gallerist-selection: var(--gallerist-accent);
|
|
104
|
+
--gallerist-selection-fg: var(--gallerist-accent-fg);
|
|
105
|
+
/* a pressed toggle: raised surface, accent glyph, accent underline */
|
|
106
|
+
--gallerist-pressed-bg: #272b30;
|
|
107
|
+
--gallerist-pressed-fg: var(--gallerist-accent);
|
|
108
|
+
--gallerist-pressed-shadow: inset 0 -2px 0 var(--gallerist-accent);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* accents */
|
|
112
|
+
.gallerist[data-gallerist-skin="console"][data-gallerist-accent="cyan"] {
|
|
113
|
+
--gallerist-accent-dark: #3cc8dc;
|
|
114
|
+
--gallerist-accent-dark-fg: #04181c;
|
|
115
|
+
--gallerist-accent-light: #00727f;
|
|
116
|
+
--gallerist-accent-light-fg: #fff;
|
|
117
|
+
}
|
|
118
|
+
.gallerist[data-gallerist-skin="console"][data-gallerist-accent="vermilion"] {
|
|
119
|
+
--gallerist-accent-dark: #ff6b4a;
|
|
120
|
+
--gallerist-accent-dark-fg: #1a0703; /* white on this red is under 3:1 */
|
|
121
|
+
--gallerist-accent-light: #b93a1d;
|
|
122
|
+
--gallerist-accent-light-fg: #fff;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Paper: the light scheme, for inline hosts on a light page */
|
|
126
|
+
.gallerist[data-gallerist-skin="console"][data-gallerist-scheme="light"] {
|
|
127
|
+
color-scheme: light;
|
|
128
|
+
--gallerist-bg: #e9eaec;
|
|
129
|
+
--gallerist-backdrop: rgb(233 234 236);
|
|
130
|
+
--gallerist-fg: #16181b;
|
|
131
|
+
--gallerist-fg-muted: #4a5058;
|
|
132
|
+
--gallerist-chrome-bg: #fff;
|
|
133
|
+
--gallerist-hairline: #d3d6db;
|
|
134
|
+
--gallerist-surface: #f4f5f6;
|
|
135
|
+
--gallerist-cell-bg: #f4f5f6;
|
|
136
|
+
--gallerist-panel: rgb(255 255 255 / 0.97);
|
|
137
|
+
--gallerist-scrim: rgb(255 255 255 / 0.85);
|
|
138
|
+
--gallerist-badge-bg: rgb(255 255 255 / 0.9);
|
|
139
|
+
--gallerist-group-bg: #f4f5f6;
|
|
140
|
+
--gallerist-placeholder: rgb(22 24 27 / 0.05);
|
|
141
|
+
--gallerist-shimmer: rgb(255 255 255 / 0.6);
|
|
142
|
+
--gallerist-shadow: 0 18px 44px rgb(22 24 27 / 0.16);
|
|
143
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #d3d6db, 6px 6px 0 -2px #bfc3c9;
|
|
144
|
+
--gallerist-tool-hover-bg: #f4f5f6;
|
|
145
|
+
--gallerist-arrow-hover-bg: #f4f5f6;
|
|
146
|
+
--gallerist-itemnav-button-hover-bg: #f4f5f6;
|
|
147
|
+
--gallerist-thumb-idle-opacity: 0.85;
|
|
148
|
+
--gallerist-focus: #16181b;
|
|
149
|
+
--gallerist-pressed-bg: #e3e5e8;
|
|
150
|
+
--gallerist-accent: var(--gallerist-accent-light);
|
|
151
|
+
--gallerist-accent-fg: var(--gallerist-accent-light-fg);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
@media (prefers-color-scheme: light) {
|
|
155
|
+
.gallerist[data-gallerist-skin="console"][data-gallerist-scheme="auto"] {
|
|
156
|
+
color-scheme: light;
|
|
157
|
+
--gallerist-bg: #e9eaec;
|
|
158
|
+
--gallerist-backdrop: rgb(233 234 236);
|
|
159
|
+
--gallerist-fg: #16181b;
|
|
160
|
+
--gallerist-fg-muted: #4a5058;
|
|
161
|
+
--gallerist-chrome-bg: #fff;
|
|
162
|
+
--gallerist-hairline: #d3d6db;
|
|
163
|
+
--gallerist-surface: #f4f5f6;
|
|
164
|
+
--gallerist-cell-bg: #f4f5f6;
|
|
165
|
+
--gallerist-panel: rgb(255 255 255 / 0.97);
|
|
166
|
+
--gallerist-scrim: rgb(255 255 255 / 0.85);
|
|
167
|
+
--gallerist-badge-bg: rgb(255 255 255 / 0.9);
|
|
168
|
+
--gallerist-group-bg: #f4f5f6;
|
|
169
|
+
--gallerist-placeholder: rgb(22 24 27 / 0.05);
|
|
170
|
+
--gallerist-shimmer: rgb(255 255 255 / 0.6);
|
|
171
|
+
--gallerist-shadow: 0 18px 44px rgb(22 24 27 / 0.16);
|
|
172
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #d3d6db, 6px 6px 0 -2px #bfc3c9;
|
|
173
|
+
--gallerist-tool-hover-bg: #f4f5f6;
|
|
174
|
+
--gallerist-arrow-hover-bg: #f4f5f6;
|
|
175
|
+
--gallerist-itemnav-button-hover-bg: #f4f5f6;
|
|
176
|
+
--gallerist-thumb-idle-opacity: 0.85;
|
|
177
|
+
--gallerist-focus: #16181b;
|
|
178
|
+
--gallerist-pressed-bg: #e3e5e8;
|
|
179
|
+
--gallerist-accent: var(--gallerist-accent-light);
|
|
180
|
+
--gallerist-accent-fg: var(--gallerist-accent-light-fg);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @gallerist/theme-default — editorial.css: the Editorial skin ("white cube"). Load it after
|
|
3
|
+
* gallerist.css and set `skin: 'editorial'`; pair it with the `editorial` preset (framed work,
|
|
4
|
+
* a placard beside it). A warm gallery wall, ink type, a serif for titles and captions, one red
|
|
5
|
+
* for what's current. Set `font-family: "Hanken Grotesk"` / `"Newsreader"` on the page for the
|
|
6
|
+
* drawn faces (the theme downloads no fonts).
|
|
7
|
+
* accents: vermilion (default), cobalt (data-gallerist-accent)
|
|
8
|
+
* schemes: light = Wall (this skin's default), dark = Night, auto (data-gallerist-scheme)
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/* Token declarations sit in cascade layers so a page's own --gallerist-* overrides always win,
|
|
12
|
+
whatever the skin, scheme or accent, and so the skins apply in a fixed order whatever order the
|
|
13
|
+
files load in. Component rules stay unlayered, so a page's element resets can't strip them. */
|
|
14
|
+
@layer gallerist.base, gallerist.gallery, gallerist.console, gallerist.editorial, gallerist.compact;
|
|
15
|
+
|
|
16
|
+
@layer gallerist.editorial {
|
|
17
|
+
/* Wall: the default, also with scheme="light" */
|
|
18
|
+
.gallerist[data-gallerist-skin="editorial"] {
|
|
19
|
+
color-scheme: light;
|
|
20
|
+
--gallerist-bg: #f3f0e9;
|
|
21
|
+
--gallerist-backdrop: rgb(243 240 233); /* opaque: a phone showed the page through */
|
|
22
|
+
--gallerist-fg: #1c1b18;
|
|
23
|
+
--gallerist-fg-muted: #58544b;
|
|
24
|
+
--gallerist-chrome-bg: #f3f0e9;
|
|
25
|
+
--gallerist-hairline: #dad4c7;
|
|
26
|
+
--gallerist-surface: #fbfaf6;
|
|
27
|
+
--gallerist-cell-bg: #fbfaf6;
|
|
28
|
+
--gallerist-panel: rgb(243 240 233 / 0.98);
|
|
29
|
+
--gallerist-scrim: rgb(243 240 233 / 0.85);
|
|
30
|
+
--gallerist-badge-bg: #fbfaf6;
|
|
31
|
+
--gallerist-shadow: 0 1px 1px rgb(60 45 20 / 0.06), 0 10px 24px -8px rgb(60 45 20 / 0.22), 0
|
|
32
|
+
34px 60px -30px rgb(60 45 20 / 0.35);
|
|
33
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #dad4c7, 6px 6px 0 -2px #bdb5a4;
|
|
34
|
+
--gallerist-tool-hover-bg: #eae6dc;
|
|
35
|
+
--gallerist-arrow-border: 1px solid #bdb5a4;
|
|
36
|
+
--gallerist-arrow-bg: rgb(243 240 233 / 0.72); /* legible when a zoomed work runs under it */
|
|
37
|
+
--gallerist-arrow-hover-bg: #eae6dc;
|
|
38
|
+
--gallerist-itemnav-button-hover-bg: #eae6dc;
|
|
39
|
+
--gallerist-frame-mat: #fbfaf6;
|
|
40
|
+
--gallerist-frame-shadow: 0 1px 1px rgb(60 45 20 / 0.06), 0 10px 24px -8px rgb(60 45 20 / 0.22),
|
|
41
|
+
0 34px 60px -30px rgb(60 45 20 / 0.35);
|
|
42
|
+
--gallerist-accent: var(--gallerist-accent-light);
|
|
43
|
+
--gallerist-accent-fg: var(--gallerist-accent-light-fg);
|
|
44
|
+
--gallerist-radius: 2px;
|
|
45
|
+
--gallerist-font: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
|
|
46
|
+
--gallerist-mono: var(--gallerist-font); /* tabular sans numerals */
|
|
47
|
+
--gallerist-title-font: "Newsreader", Georgia, "Times New Roman", serif;
|
|
48
|
+
--gallerist-caption-font: "Newsreader", Georgia, "Times New Roman", serif;
|
|
49
|
+
--gallerist-caption-style: italic;
|
|
50
|
+
--gallerist-caption-size: 26px;
|
|
51
|
+
--gallerist-caption-align: start;
|
|
52
|
+
--gallerist-title-size: 21px;
|
|
53
|
+
--gallerist-title-weight: 400;
|
|
54
|
+
--gallerist-toolbar-h: 72px;
|
|
55
|
+
--gallerist-thumb-h: 66px;
|
|
56
|
+
--gallerist-blur: none;
|
|
57
|
+
--gallerist-caption-band: transparent;
|
|
58
|
+
--gallerist-group-bg: transparent;
|
|
59
|
+
--gallerist-placeholder: rgb(127 120 100 / 0.08);
|
|
60
|
+
--gallerist-shimmer: rgb(255 255 255 / 0.35);
|
|
61
|
+
|
|
62
|
+
/* bands: the wall runs under the bar and rail, divided by a rule */
|
|
63
|
+
--gallerist-bar-bg: transparent;
|
|
64
|
+
--gallerist-bar-border: 1px solid var(--gallerist-hairline);
|
|
65
|
+
--gallerist-rail-bg: transparent;
|
|
66
|
+
--gallerist-rail-border: 1px solid var(--gallerist-hairline);
|
|
67
|
+
|
|
68
|
+
/* controls: flat ink tools, outlined round arrows; a pressed toggle is filled with ink */
|
|
69
|
+
--gallerist-control-bg: transparent;
|
|
70
|
+
--gallerist-control-border: 0 solid transparent;
|
|
71
|
+
--gallerist-control-radius: 2px;
|
|
72
|
+
--gallerist-counter-font: var(--gallerist-font);
|
|
73
|
+
--gallerist-counter-bg: transparent;
|
|
74
|
+
--gallerist-counter-fg: var(--gallerist-fg);
|
|
75
|
+
--gallerist-tool-bg: transparent;
|
|
76
|
+
--gallerist-tool-border: 0 solid transparent;
|
|
77
|
+
--gallerist-tool-fg: var(--gallerist-fg);
|
|
78
|
+
--gallerist-arrow-size: 56px;
|
|
79
|
+
--gallerist-arrow-radius: 999px;
|
|
80
|
+
--gallerist-itemnav-bg: transparent;
|
|
81
|
+
--gallerist-itemnav-border: none;
|
|
82
|
+
--gallerist-itemnav-radius: 0;
|
|
83
|
+
--gallerist-itemnav-padding: 0;
|
|
84
|
+
--gallerist-itemnav-button-bg: transparent;
|
|
85
|
+
--gallerist-itemnav-button-border: 0 solid transparent;
|
|
86
|
+
--gallerist-position-bg: transparent;
|
|
87
|
+
--gallerist-position-font: var(--gallerist-font);
|
|
88
|
+
--gallerist-position-size: 13px;
|
|
89
|
+
--gallerist-position-fg: var(--gallerist-fg);
|
|
90
|
+
--gallerist-dot-opacity: 0.35;
|
|
91
|
+
--gallerist-dot-active-along: 9px;
|
|
92
|
+
--gallerist-dot-active-across: 9px;
|
|
93
|
+
|
|
94
|
+
/* thumbnails: prints on the wall; the current one is ringed in ink */
|
|
95
|
+
--gallerist-thumb-radius: 0;
|
|
96
|
+
--gallerist-panel-bg: transparent;
|
|
97
|
+
--gallerist-flyout-bg: var(--gallerist-surface);
|
|
98
|
+
--gallerist-thumb-active-border: var(--gallerist-bg);
|
|
99
|
+
--gallerist-thumb-ring: 0 0 0 1px var(--gallerist-fg);
|
|
100
|
+
--gallerist-item-ring: 0 0 0 1px var(--gallerist-fg);
|
|
101
|
+
--gallerist-thumb-idle-opacity: 1;
|
|
102
|
+
|
|
103
|
+
/* framed media: the work hangs with room around it */
|
|
104
|
+
--gallerist-frame-inset: 56px;
|
|
105
|
+
--gallerist-frame-inset-compact: 16px;
|
|
106
|
+
--gallerist-placard-w: 300px;
|
|
107
|
+
|
|
108
|
+
/* motion: works fade in on the wall rather than slide; items settle in */
|
|
109
|
+
--gallerist-enter-group: gallerist-fade;
|
|
110
|
+
--gallerist-enter-item: gallerist-fade-settle; /* the item axis settles in: never the group's motion */
|
|
111
|
+
--gallerist-dur-snappy: 420ms;
|
|
112
|
+
|
|
113
|
+
/* the red marks what's current and progress; selection and pressed use ink */
|
|
114
|
+
--gallerist-accent-light: #b0361f;
|
|
115
|
+
--gallerist-accent-light-fg: #fff;
|
|
116
|
+
--gallerist-accent-dark: #e06a50;
|
|
117
|
+
--gallerist-accent-dark-fg: #191816;
|
|
118
|
+
--gallerist-focus: var(--gallerist-fg);
|
|
119
|
+
--gallerist-selection: var(--gallerist-fg);
|
|
120
|
+
--gallerist-selection-fg: var(--gallerist-bg);
|
|
121
|
+
--gallerist-pressed-bg: var(--gallerist-fg);
|
|
122
|
+
--gallerist-pressed-fg: var(--gallerist-bg);
|
|
123
|
+
--gallerist-pressed-shadow: none;
|
|
124
|
+
--gallerist-pin-ring: var(--gallerist-bg);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* accents */
|
|
128
|
+
.gallerist[data-gallerist-skin="editorial"][data-gallerist-accent="cobalt"] {
|
|
129
|
+
--gallerist-accent-light: #2e4fa3;
|
|
130
|
+
--gallerist-accent-dark: #8fa8f0;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Night */
|
|
134
|
+
.gallerist[data-gallerist-skin="editorial"][data-gallerist-scheme="dark"] {
|
|
135
|
+
color-scheme: dark;
|
|
136
|
+
--gallerist-bg: #191816;
|
|
137
|
+
--gallerist-backdrop: rgb(25 24 22);
|
|
138
|
+
--gallerist-fg: #ede9e0;
|
|
139
|
+
--gallerist-fg-muted: #aba597;
|
|
140
|
+
--gallerist-chrome-bg: #191816;
|
|
141
|
+
--gallerist-hairline: #36332e;
|
|
142
|
+
--gallerist-surface: #262421;
|
|
143
|
+
--gallerist-cell-bg: #262421;
|
|
144
|
+
--gallerist-panel: rgb(25 24 22 / 0.98);
|
|
145
|
+
--gallerist-scrim: rgb(25 24 22 / 0.85);
|
|
146
|
+
--gallerist-badge-bg: #262421;
|
|
147
|
+
--gallerist-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 30px -10px rgb(0 0 0 / 0.6), 0 40px 70px
|
|
148
|
+
-30px rgb(0 0 0 / 0.7);
|
|
149
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #36332e, 6px 6px 0 -2px #4e4a43;
|
|
150
|
+
--gallerist-tool-hover-bg: #25231f;
|
|
151
|
+
--gallerist-arrow-border: 1px solid #4e4a43;
|
|
152
|
+
--gallerist-arrow-bg: rgb(25 24 22 / 0.72);
|
|
153
|
+
--gallerist-arrow-hover-bg: #25231f;
|
|
154
|
+
--gallerist-itemnav-button-hover-bg: #25231f;
|
|
155
|
+
--gallerist-frame-mat: #262421;
|
|
156
|
+
--gallerist-frame-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 30px -10px rgb(0 0 0 / 0.6), 0 40px
|
|
157
|
+
70px -30px rgb(0 0 0 / 0.7);
|
|
158
|
+
--gallerist-accent: var(--gallerist-accent-dark);
|
|
159
|
+
--gallerist-accent-fg: var(--gallerist-accent-dark-fg);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@media (prefers-color-scheme: dark) {
|
|
163
|
+
.gallerist[data-gallerist-skin="editorial"][data-gallerist-scheme="auto"] {
|
|
164
|
+
color-scheme: dark;
|
|
165
|
+
--gallerist-bg: #191816;
|
|
166
|
+
--gallerist-backdrop: rgb(25 24 22);
|
|
167
|
+
--gallerist-fg: #ede9e0;
|
|
168
|
+
--gallerist-fg-muted: #aba597;
|
|
169
|
+
--gallerist-chrome-bg: #191816;
|
|
170
|
+
--gallerist-hairline: #36332e;
|
|
171
|
+
--gallerist-surface: #262421;
|
|
172
|
+
--gallerist-cell-bg: #262421;
|
|
173
|
+
--gallerist-panel: rgb(25 24 22 / 0.98);
|
|
174
|
+
--gallerist-scrim: rgb(25 24 22 / 0.85);
|
|
175
|
+
--gallerist-badge-bg: #262421;
|
|
176
|
+
--gallerist-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 30px -10px rgb(0 0 0 / 0.6), 0 40px
|
|
177
|
+
70px -30px rgb(0 0 0 / 0.7);
|
|
178
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #36332e, 6px 6px 0 -2px #4e4a43;
|
|
179
|
+
--gallerist-tool-hover-bg: #25231f;
|
|
180
|
+
--gallerist-arrow-border: 1px solid #4e4a43;
|
|
181
|
+
--gallerist-arrow-bg: rgb(25 24 22 / 0.72);
|
|
182
|
+
--gallerist-arrow-hover-bg: #25231f;
|
|
183
|
+
--gallerist-itemnav-button-hover-bg: #25231f;
|
|
184
|
+
--gallerist-frame-mat: #262421;
|
|
185
|
+
--gallerist-frame-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 30px -10px rgb(0 0 0 / 0.6), 0
|
|
186
|
+
40px 70px -30px rgb(0 0 0 / 0.7);
|
|
187
|
+
--gallerist-accent: var(--gallerist-accent-dark);
|
|
188
|
+
--gallerist-accent-fg: var(--gallerist-accent-dark-fg);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @gallerist/theme-default — the zero-config entry: the shared base plus the Gallery skin (the
|
|
3
|
+
* default look). For another skin, load its file after this one and set the `skin` option:
|
|
4
|
+
* import '@gallerist/theme-default/gallerist.css'
|
|
5
|
+
* import '@gallerist/theme-default/console.css' // mount(viewer, { skin: 'console' })
|
|
6
|
+
* import '@gallerist/theme-default/editorial.css' // mount(viewer, { skin: 'editorial', preset: 'editorial' })
|
|
7
|
+
*/
|
|
8
|
+
@import "./base.css";
|
|
9
|
+
@import "./gallery.css";
|
|
10
|
+
@import "./grid.css";
|
|
11
|
+
@import "./pins.css";
|
package/src/gallery.css
ADDED
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @gallerist/theme-default — gallery.css: the Gallery skin, the default look. Quiet near-black (or
|
|
3
|
+
* warm paper) surfaces that leave the colour to the media, round controls, sans numerals. One tint
|
|
4
|
+
* marks focus and progress; selection and pressed toggles use the foreground, never a colour fill.
|
|
5
|
+
* Set `font-family: "Instrument Sans"` on the page to get the drawn face; it falls back to the
|
|
6
|
+
* system sans (the theme downloads no fonts).
|
|
7
|
+
* accents: periwinkle (default), mint, amber, vermilion (data-gallerist-accent)
|
|
8
|
+
* schemes: dark (default), light, auto (data-gallerist-scheme)
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/* Token declarations sit in cascade layers so a page's own --gallerist-* overrides always win,
|
|
12
|
+
whatever the skin, scheme or accent, and so the skins apply in a fixed order whatever order the
|
|
13
|
+
files load in. Component rules stay unlayered, so a page's element resets can't strip them. */
|
|
14
|
+
@layer gallerist.base, gallerist.gallery, gallerist.console, gallerist.editorial, gallerist.compact;
|
|
15
|
+
|
|
16
|
+
@layer gallerist.gallery {
|
|
17
|
+
.gallerist {
|
|
18
|
+
color-scheme: dark;
|
|
19
|
+
--gallerist-bg: #0b0b0c; /* the solid ground, also the gap inside a selection ring */
|
|
20
|
+
--gallerist-backdrop: rgb(11 11 12); /* opaque: a phone showed the page through */
|
|
21
|
+
--gallerist-fg: #f4f4f2;
|
|
22
|
+
--gallerist-fg-muted: #b9b9b4;
|
|
23
|
+
--gallerist-chrome-bg: rgb(24 24 26 / 0.6);
|
|
24
|
+
--gallerist-hairline: rgb(255 255 255 / 0.12);
|
|
25
|
+
--gallerist-radius: 12px;
|
|
26
|
+
--gallerist-font: "Instrument Sans", system-ui, -apple-system, sans-serif;
|
|
27
|
+
--gallerist-mono: var(--gallerist-font); /* no monospace face: numerals are tabular sans */
|
|
28
|
+
|
|
29
|
+
/* surfaces and fills */
|
|
30
|
+
--gallerist-surface: #18181a;
|
|
31
|
+
--gallerist-cell-bg: #18181a;
|
|
32
|
+
--gallerist-panel: rgb(11 11 12 / 0.97);
|
|
33
|
+
--gallerist-scrim: rgb(11 11 12 / 0.6);
|
|
34
|
+
--gallerist-badge-bg: rgb(11 11 12 / 0.82);
|
|
35
|
+
--gallerist-caption-band: transparent;
|
|
36
|
+
--gallerist-group-bg: rgb(255 255 255 / 0.05);
|
|
37
|
+
--gallerist-placeholder: rgb(255 255 255 / 0.04);
|
|
38
|
+
--gallerist-shimmer: rgb(255 255 255 / 0.06);
|
|
39
|
+
--gallerist-shadow: 0 16px 40px rgb(0 0 0 / 0.5);
|
|
40
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #2c2c2f, 6px 6px 0 -2px #232326;
|
|
41
|
+
--gallerist-blur: blur(16px) saturate(140%);
|
|
42
|
+
|
|
43
|
+
/* controls: bar tools sit flat on the ground, arrows are glass rounds, the item navigator a pill */
|
|
44
|
+
--gallerist-toolbar-h: 64px;
|
|
45
|
+
--gallerist-control-bg: transparent;
|
|
46
|
+
--gallerist-control-border: 0 solid transparent;
|
|
47
|
+
--gallerist-control-radius: 999px;
|
|
48
|
+
--gallerist-counter-font: var(--gallerist-font);
|
|
49
|
+
--gallerist-counter-bg: transparent;
|
|
50
|
+
--gallerist-counter-fg: var(--gallerist-fg-muted);
|
|
51
|
+
--gallerist-title-size: 15px;
|
|
52
|
+
--gallerist-title-weight: 500;
|
|
53
|
+
--gallerist-caption-size: 15px;
|
|
54
|
+
--gallerist-caption-align: start;
|
|
55
|
+
--gallerist-tool-bg: transparent;
|
|
56
|
+
--gallerist-tool-border: 0 solid transparent;
|
|
57
|
+
--gallerist-tool-hover-bg: rgb(255 255 255 / 0.08);
|
|
58
|
+
--gallerist-arrow-hover-bg: var(--gallerist-surface);
|
|
59
|
+
--gallerist-itemnav-button-hover-bg: var(--gallerist-tool-hover-bg);
|
|
60
|
+
--gallerist-arrow-size: 48px;
|
|
61
|
+
--gallerist-arrow-bg: var(--gallerist-chrome-bg);
|
|
62
|
+
--gallerist-arrow-border: 1px solid var(--gallerist-hairline);
|
|
63
|
+
--gallerist-arrow-radius: 999px;
|
|
64
|
+
--gallerist-itemnav-bg: rgb(255 255 255 / 0.05);
|
|
65
|
+
--gallerist-itemnav-border: 1px solid rgb(255 255 255 / 0.1);
|
|
66
|
+
--gallerist-itemnav-radius: 999px;
|
|
67
|
+
--gallerist-itemnav-padding: 2px;
|
|
68
|
+
--gallerist-itemnav-button-bg: transparent;
|
|
69
|
+
--gallerist-itemnav-button-border: 0 solid transparent;
|
|
70
|
+
--gallerist-position-bg: transparent;
|
|
71
|
+
--gallerist-position-font: var(--gallerist-font);
|
|
72
|
+
--gallerist-position-size: 11px;
|
|
73
|
+
--gallerist-position-fg: var(--gallerist-fg-muted);
|
|
74
|
+
--gallerist-dot-opacity: 0.38;
|
|
75
|
+
--gallerist-dot-active-along: 20px; /* the current dot stretches along the run */
|
|
76
|
+
--gallerist-dot-active-across: 6px;
|
|
77
|
+
|
|
78
|
+
/* thumbnails: the current one is ringed in the foreground, the rest recede */
|
|
79
|
+
--gallerist-thumb-h: 64px;
|
|
80
|
+
--gallerist-thumb-radius: 6px;
|
|
81
|
+
--gallerist-rail-bg: transparent;
|
|
82
|
+
--gallerist-panel-bg: transparent; /* the item stack is just its thumbs */
|
|
83
|
+
--gallerist-flyout-bg: var(--gallerist-surface);
|
|
84
|
+
--gallerist-thumb-active-border: var(--gallerist-bg);
|
|
85
|
+
--gallerist-thumb-ring: 0 0 0 2px var(--gallerist-selection);
|
|
86
|
+
--gallerist-item-ring: 0 0 0 2px var(--gallerist-selection);
|
|
87
|
+
--gallerist-thumb-idle-opacity: 0.6;
|
|
88
|
+
|
|
89
|
+
/* the tint (periwinkle by default) marks focus and progress only */
|
|
90
|
+
--gallerist-accent-dark: #9db4ff;
|
|
91
|
+
--gallerist-accent-dark-fg: #0b0b0c;
|
|
92
|
+
--gallerist-accent-light: #3552c9;
|
|
93
|
+
--gallerist-accent-light-fg: #fff;
|
|
94
|
+
--gallerist-focus: var(--gallerist-accent);
|
|
95
|
+
--gallerist-selection: var(--gallerist-fg);
|
|
96
|
+
--gallerist-selection-fg: var(--gallerist-bg);
|
|
97
|
+
--gallerist-pressed-bg: var(--gallerist-fg);
|
|
98
|
+
--gallerist-pressed-fg: var(--gallerist-bg);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* accents */
|
|
102
|
+
.gallerist[data-gallerist-accent="mint"] {
|
|
103
|
+
--gallerist-accent-dark: #8fd4c1;
|
|
104
|
+
--gallerist-accent-light: #1c7560;
|
|
105
|
+
}
|
|
106
|
+
.gallerist[data-gallerist-accent="amber"] {
|
|
107
|
+
--gallerist-accent-dark: #f2c36b;
|
|
108
|
+
--gallerist-accent-light: #8a5a00;
|
|
109
|
+
}
|
|
110
|
+
.gallerist[data-gallerist-accent="vermilion"] {
|
|
111
|
+
--gallerist-accent-dark: #f08a6c;
|
|
112
|
+
--gallerist-accent-light: #b4401f;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* light: warm paper */
|
|
116
|
+
.gallerist[data-gallerist-scheme="light"] {
|
|
117
|
+
color-scheme: light;
|
|
118
|
+
--gallerist-bg: #f4f3ef;
|
|
119
|
+
--gallerist-backdrop: rgb(244 243 239);
|
|
120
|
+
--gallerist-fg: #151515;
|
|
121
|
+
--gallerist-fg-muted: #55554f;
|
|
122
|
+
--gallerist-chrome-bg: rgb(255 255 255 / 0.85);
|
|
123
|
+
--gallerist-hairline: rgb(21 21 21 / 0.12);
|
|
124
|
+
--gallerist-surface: #fff;
|
|
125
|
+
--gallerist-cell-bg: #eceae4;
|
|
126
|
+
--gallerist-panel: rgb(244 243 239 / 0.97);
|
|
127
|
+
--gallerist-scrim: rgb(255 255 255 / 0.8);
|
|
128
|
+
--gallerist-badge-bg: rgb(255 255 255 / 0.88);
|
|
129
|
+
--gallerist-group-bg: rgb(21 21 21 / 0.04);
|
|
130
|
+
--gallerist-placeholder: rgb(21 21 21 / 0.05);
|
|
131
|
+
--gallerist-shimmer: rgb(255 255 255 / 0.7);
|
|
132
|
+
--gallerist-shadow: 0 16px 40px rgb(21 21 21 / 0.16);
|
|
133
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #dcd9d1, 6px 6px 0 -2px #eceae4;
|
|
134
|
+
--gallerist-tool-hover-bg: rgb(21 21 21 / 0.06);
|
|
135
|
+
--gallerist-thumb-idle-opacity: 0.75;
|
|
136
|
+
--gallerist-itemnav-bg: rgb(255 255 255 / 0.7);
|
|
137
|
+
--gallerist-itemnav-border: 1px solid var(--gallerist-hairline);
|
|
138
|
+
--gallerist-accent: var(--gallerist-accent-light);
|
|
139
|
+
--gallerist-accent-fg: var(--gallerist-accent-light-fg);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
@media (prefers-color-scheme: light) {
|
|
143
|
+
.gallerist[data-gallerist-scheme="auto"] {
|
|
144
|
+
color-scheme: light;
|
|
145
|
+
--gallerist-bg: #f4f3ef;
|
|
146
|
+
--gallerist-backdrop: rgb(244 243 239);
|
|
147
|
+
--gallerist-fg: #151515;
|
|
148
|
+
--gallerist-fg-muted: #55554f;
|
|
149
|
+
--gallerist-chrome-bg: rgb(255 255 255 / 0.85);
|
|
150
|
+
--gallerist-hairline: rgb(21 21 21 / 0.12);
|
|
151
|
+
--gallerist-surface: #fff;
|
|
152
|
+
--gallerist-cell-bg: #eceae4;
|
|
153
|
+
--gallerist-panel: rgb(244 243 239 / 0.97);
|
|
154
|
+
--gallerist-scrim: rgb(255 255 255 / 0.8);
|
|
155
|
+
--gallerist-badge-bg: rgb(255 255 255 / 0.88);
|
|
156
|
+
--gallerist-group-bg: rgb(21 21 21 / 0.04);
|
|
157
|
+
--gallerist-placeholder: rgb(21 21 21 / 0.05);
|
|
158
|
+
--gallerist-shimmer: rgb(255 255 255 / 0.7);
|
|
159
|
+
--gallerist-shadow: 0 16px 40px rgb(21 21 21 / 0.16);
|
|
160
|
+
--gallerist-stack-shadow: 3px 3px 0 -1px #dcd9d1, 6px 6px 0 -2px #eceae4;
|
|
161
|
+
--gallerist-tool-hover-bg: rgb(21 21 21 / 0.06);
|
|
162
|
+
--gallerist-thumb-idle-opacity: 0.75;
|
|
163
|
+
--gallerist-itemnav-bg: rgb(255 255 255 / 0.7);
|
|
164
|
+
--gallerist-itemnav-border: 1px solid var(--gallerist-hairline);
|
|
165
|
+
--gallerist-accent: var(--gallerist-accent-light);
|
|
166
|
+
--gallerist-accent-fg: var(--gallerist-accent-light-fg);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|