Mercurial

comparison mrjunejune/src/public/mjj-modal.css @ 273:e02e2036ef84 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add Layer 2 JRPG component system Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Sat, 08 Aug 2026 02:08:08 -0700
parents
children
comparison
equal deleted inserted replaced
272:41a49c29a28f 273:e02e2036ef84
1 :where(mjj-content-modal, mjj-window-modal) {
2 display: contents;
3 }
4
5 :where(mjj-content-modal, mjj-window-modal) dialog {
6 --mjj-modal-border: var(--zenbu-sys-color-border-strong);
7 --mjj-modal-shadow:
8 inset 0 0 0 var(--zenbu-sys-stroke-width)
9 var(--zenbu-sys-color-action-primary-border),
10 var(--zenbu-sys-space-control)
11 var(--zenbu-sys-space-control)
12 0
13 var(--zenbu-sys-color-danger-border),
14 var(--zenbu-sys-shadow-dialog);
15 box-sizing: border-box;
16 width: min(
17 calc(100vw - var(--zenbu-sys-space-container)),
18 var(--mjj-modal-width)
19 );
20 max-width: none;
21 max-height: calc(100dvh - var(--zenbu-sys-space-container));
22 margin: auto;
23 padding: 0;
24 overflow: hidden;
25 border: var(--zenbu-sys-stroke-width) solid var(--mjj-modal-border);
26 border-radius: 0;
27 background: var(--zenbu-sys-color-surface-raised);
28 color: var(--zenbu-sys-color-text-primary);
29 box-shadow: var(--mjj-modal-shadow);
30 }
31
32 :where(mjj-content-modal, mjj-window-modal) dialog::backdrop {
33 background: var(--zenbu-sys-color-scrim);
34 backdrop-filter: blur(var(--zenbu-sys-stroke-width-emphasis));
35 }
36
37 :where(mjj-content-modal, mjj-window-modal) dialog[open] {
38 display: grid;
39 grid-template-rows: auto minmax(0, 1fr) auto;
40 animation:
41 mjj-modal-enter
42 var(--zenbu-sys-motion-duration-layout)
43 var(--zenbu-sys-motion-ease-enter);
44 }
45
46 :where(mjj-content-modal, mjj-window-modal) [data-modal-header] {
47 display: grid;
48 grid-template-columns: minmax(0, 1fr) auto;
49 align-items: center;
50 gap: var(--zenbu-sys-space-group);
51 }
52
53 :where(mjj-content-modal, mjj-window-modal) [data-modal-heading] {
54 display: grid;
55 gap: var(--zenbu-sys-space-icon-label);
56 min-width: 0;
57 }
58
59 :where(mjj-content-modal, mjj-window-modal) [data-modal-kicker] {
60 margin: 0;
61 color: var(--zenbu-sys-color-warning-foreground);
62 font-size: var(--zenbu-sys-font-size-xs);
63 font-weight: var(--zenbu-sys-font-weight-strong);
64 letter-spacing: 0.08em;
65 text-transform: uppercase;
66 }
67
68 :where(mjj-content-modal, mjj-window-modal) [data-modal-title] {
69 margin: 0;
70 color: var(--zenbu-sys-color-action-primary-background);
71 font-family: var(--zenbu-sys-type-title-family);
72 font-size: var(--zenbu-sys-type-title-size);
73 font-weight: var(--zenbu-sys-type-title-weight);
74 line-height: var(--zenbu-sys-type-title-line-height);
75 }
76
77 :where(mjj-content-modal, mjj-window-modal) [data-modal-header-actions],
78 :where(mjj-content-modal, mjj-window-modal) [data-modal-footer-actions] {
79 display: flex;
80 align-items: center;
81 gap: var(--zenbu-sys-space-control);
82 }
83
84 :where(mjj-content-modal, mjj-window-modal) [data-modal-header-actions] {
85 justify-content: flex-end;
86 }
87
88 :where(mjj-content-modal, mjj-window-modal) [data-modal-footer] {
89 display: flex;
90 align-items: center;
91 justify-content: space-between;
92 gap: var(--zenbu-sys-space-group);
93 }
94
95 :where(mjj-content-modal, mjj-window-modal) [data-modal-footer] > p {
96 margin: 0;
97 color: var(--zenbu-sys-color-text-secondary);
98 font-size: var(--zenbu-sys-font-size-sm);
99 }
100
101 :where(mjj-content-modal, mjj-window-modal) zen-scroll-area[data-cyber-scroll] {
102 box-sizing: border-box;
103 display: block;
104 width: 100%;
105 height: 100%;
106 max-height: none;
107 min-width: 0;
108 min-height: 0;
109 overflow-x: auto;
110 overflow-y: scroll;
111 border: 0;
112 border-radius: 0;
113 background: var(--zenbu-sys-color-surface-default);
114 scrollbar-color:
115 var(--zenbu-sys-color-action-primary-background)
116 var(--zenbu-sys-color-surface-sunken);
117 scrollbar-width: thin;
118 scrollbar-gutter: stable;
119 }
120
121 :where(mjj-content-modal, mjj-window-modal)
122 zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar {
123 width: var(--zenbu-sys-space-control);
124 height: var(--zenbu-sys-space-control);
125 }
126
127 :where(mjj-content-modal, mjj-window-modal)
128 zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-track {
129 border-inline-start: var(--zenbu-sys-stroke-width) solid
130 var(--zenbu-sys-color-info-border);
131 background: var(--zenbu-sys-color-surface-sunken);
132 }
133
134 :where(mjj-content-modal, mjj-window-modal)
135 zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-thumb {
136 border: var(--zenbu-sys-stroke-width) solid
137 var(--zenbu-sys-color-surface-sunken);
138 border-radius: 0;
139 background: var(--zenbu-sys-color-action-primary-background);
140 }
141
142 :where(mjj-content-modal, mjj-window-modal)
143 zen-scroll-area[data-cyber-scroll]::-webkit-scrollbar-thumb:hover {
144 background: var(--zenbu-sys-color-danger-foreground);
145 }
146
147 mjj-content-modal {
148 --mjj-modal-width: 54rem;
149 }
150
151 mjj-content-modal dialog {
152 --mjj-modal-border: var(--zenbu-sys-color-action-primary-border);
153 }
154
155 mjj-content-modal [data-modal-header] {
156 padding:
157 var(--zenbu-sys-padding-xl)
158 var(--zenbu-sys-padding-xl)
159 var(--zenbu-sys-padding-lg);
160 border-bottom: var(--zenbu-sys-stroke-width) solid
161 var(--zenbu-sys-color-danger-border);
162 background: var(--zenbu-sys-color-surface-raised);
163 }
164
165 mjj-content-modal [data-modal-body] {
166 min-height: 0;
167 padding: 0;
168 overflow: auto;
169 background: var(--zenbu-sys-color-surface-default);
170 color: var(--zenbu-sys-color-text-primary);
171 font-family: var(--zenbu-sys-type-reading-family);
172 font-size: var(--zenbu-sys-type-reading-size);
173 line-height: var(--zenbu-sys-type-reading-line-height);
174 }
175
176 mjj-content-modal [data-modal-article] {
177 display: grid;
178 gap: var(--zenbu-sys-space-content);
179 padding:
180 var(--zenbu-sys-padding-xl)
181 max(
182 var(--zenbu-sys-padding-xl),
183 calc((100% - 42rem) / 2)
184 );
185 }
186
187 mjj-content-modal [data-modal-article] > :where(
188 h2,
189 h3,
190 p,
191 blockquote,
192 pre,
193 ul,
194 ol
195 ) {
196 margin-block: 0;
197 }
198
199 mjj-content-modal [data-modal-body] :where(h2, h3) {
200 color: var(--zenbu-sys-color-action-primary-background);
201 font-family: var(--zenbu-sys-font-family-ui);
202 }
203
204 mjj-content-modal [data-modal-body] [data-modal-description] {
205 color: var(--zenbu-sys-color-text-secondary);
206 font-size: var(--zenbu-sys-type-body-large-size);
207 line-height: var(--zenbu-sys-type-body-large-line-height);
208 }
209
210 mjj-content-modal [data-modal-body] blockquote {
211 padding:
212 var(--zenbu-sys-padding-md)
213 var(--zenbu-sys-padding-lg);
214 border-inline-start: var(--zenbu-sys-stroke-width-emphasis) solid
215 var(--zenbu-sys-color-danger-border);
216 background: var(--zenbu-sys-color-surface-sunken);
217 color: var(--zenbu-sys-color-text-secondary);
218 }
219
220 mjj-content-modal [data-modal-body] pre {
221 padding: var(--zenbu-sys-padding-lg);
222 overflow: auto;
223 border: var(--zenbu-sys-stroke-width) solid
224 var(--zenbu-sys-color-info-border);
225 border-radius: 0;
226 background: var(--zenbu-sys-color-surface-sunken);
227 font-family: var(--zenbu-sys-type-code-family);
228 font-size: var(--zenbu-sys-type-code-size);
229 line-height: var(--zenbu-sys-type-code-line-height);
230 }
231
232 mjj-content-modal [data-modal-footer] {
233 padding:
234 var(--zenbu-sys-padding-md)
235 var(--zenbu-sys-padding-xl);
236 border-top: var(--zenbu-sys-stroke-width) solid
237 var(--zenbu-sys-color-danger-border);
238 background: var(--zenbu-sys-color-surface-raised);
239 }
240
241 mjj-window-modal {
242 --mjj-modal-width: 72rem;
243 }
244
245 mjj-window-modal dialog {
246 --mjj-modal-border: var(--zenbu-sys-color-info-border);
247 height: min(82dvh, 48rem);
248 border-radius: 0;
249 }
250
251 mjj-window-modal [data-modal-header] {
252 padding:
253 var(--zenbu-sys-padding-md)
254 var(--zenbu-sys-padding-lg);
255 border-bottom: var(--zenbu-sys-stroke-width) solid
256 var(--zenbu-sys-color-action-primary-border);
257 background: var(--zenbu-sys-color-surface-sunken);
258 box-shadow: var(--zenbu-sys-shadow-subtle);
259 }
260
261 mjj-window-modal [data-modal-body] {
262 min-width: 0;
263 min-height: 0;
264 padding: var(--zenbu-sys-padding-lg);
265 overflow: auto;
266 background: var(--zenbu-sys-color-surface-default);
267 }
268
269 mjj-window-modal [data-modal-body][data-modal-layout="split"] {
270 display: grid;
271 grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 1fr);
272 gap: var(--zenbu-sys-space-group);
273 }
274
275 mjj-window-modal [data-modal-pane] {
276 min-width: 0;
277 min-height: 0;
278 padding: var(--zenbu-sys-padding-lg);
279 overflow: auto;
280 border: var(--zenbu-sys-stroke-width) solid
281 var(--zenbu-sys-color-info-border);
282 border-radius: 0;
283 background: var(--zenbu-sys-color-surface-sunken);
284 }
285
286 mjj-window-modal [data-modal-pane="primary"] {
287 border-color: var(--zenbu-sys-color-action-primary-border);
288 background: var(--zenbu-sys-color-surface-raised);
289 box-shadow:
290 var(--zenbu-sys-space-icon-label)
291 var(--zenbu-sys-space-icon-label)
292 0
293 var(--zenbu-sys-color-danger-border);
294 }
295
296 mjj-window-modal [data-modal-footer] {
297 padding:
298 var(--zenbu-sys-padding-sm)
299 var(--zenbu-sys-padding-lg);
300 border-top: var(--zenbu-sys-stroke-width) solid
301 var(--zenbu-sys-color-action-primary-border);
302 background: var(--zenbu-sys-color-surface-sunken);
303 }
304
305 @keyframes mjj-modal-enter {
306 0% {
307 clip-path: inset(49% 45%);
308 opacity: 0.72;
309 transform: scaleX(0.12);
310 }
311 45% {
312 clip-path: inset(49% 0);
313 opacity: 1;
314 transform: scaleX(1);
315 }
316 100% {
317 clip-path: inset(0);
318 opacity: 1;
319 transform: scaleX(1);
320 }
321 }
322
323 @media (max-width: 42rem) {
324 :where(mjj-content-modal, mjj-window-modal) dialog {
325 width: calc(100vw - var(--zenbu-sys-space-group));
326 max-height: calc(100dvh - var(--zenbu-sys-space-group));
327 }
328
329 mjj-content-modal [data-modal-header],
330 mjj-content-modal [data-modal-footer] {
331 padding-inline: var(--zenbu-sys-padding-lg);
332 }
333
334 mjj-content-modal [data-modal-body] {
335 padding: 0;
336 }
337
338 mjj-content-modal [data-modal-article] {
339 padding: var(--zenbu-sys-padding-lg);
340 }
341
342 mjj-window-modal dialog {
343 height: calc(100dvh - var(--zenbu-sys-space-group));
344 }
345
346 mjj-window-modal [data-modal-body][data-modal-layout="split"] {
347 grid-template-columns: minmax(0, 1fr);
348 }
349
350 :where(mjj-content-modal, mjj-window-modal) [data-modal-footer] {
351 align-items: stretch;
352 flex-direction: column;
353 }
354 }
355
356 @media (prefers-reduced-motion: reduce) {
357 :where(mjj-content-modal, mjj-window-modal) dialog[open] {
358 animation: none;
359 }
360 }