Mercurial

comparison mrjunejune/src/jrpg/jrpg.css @ 263:ee04e4e69fed

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add functional JRPG frame and tools Add full-screen background_2 apertures, functional frame chrome, card-driven details, dual-window tools, live conversion workflows, and bounded cleanup for generated downloads. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <mrjunejune@users.noreply.github.com>
date Thu, 06 Aug 2026 11:31:30 -0700
parents 0f45474c1b1a
children 04fee26ecce0
comparison
equal deleted inserted replaced
262:0f45474c1b1a 263:ee04e4e69fed
4 font-display: block; 4 font-display: block;
5 } 5 }
6 6
7 :root { 7 :root {
8 --mjj-jrpg-art: url("/public/jrpg/bar-ink.webp"); 8 --mjj-jrpg-art: url("/public/jrpg/bar-ink.webp");
9 --mjj-jrpg-frame-art: url("/public/jrpg/background-frame-2.webp");
9 --mjj-jrpg-canvas: var(--zenbu-sys-color-surface-page); 10 --mjj-jrpg-canvas: var(--zenbu-sys-color-surface-page);
10 --mjj-jrpg-surface: var(--zenbu-sys-color-surface-default); 11 --mjj-jrpg-surface: var(--zenbu-sys-color-surface-default);
11 --mjj-jrpg-surface-raised: var(--zenbu-sys-color-surface-raised); 12 --mjj-jrpg-surface-raised: var(--zenbu-sys-color-surface-raised);
12 --mjj-jrpg-surface-sunken: var(--zenbu-sys-color-surface-sunken); 13 --mjj-jrpg-surface-sunken: var(--zenbu-sys-color-surface-sunken);
13 --mjj-jrpg-text: var(--zenbu-sys-color-text-primary); 14 --mjj-jrpg-text: var(--zenbu-sys-color-text-primary);
53 54
54 .jrpg-page * { 55 .jrpg-page * {
55 font-family: inherit; 56 font-family: inherit;
56 } 57 }
57 58
59 .jrpg-page zen-icon svg {
60 shape-rendering: crispEdges;
61 stroke-linecap: square;
62 stroke-linejoin: miter;
63 }
64
58 .jrpg-main { 65 .jrpg-main {
59 box-sizing: border-box; 66 box-sizing: border-box;
60 width: 100%; 67 width: 100%;
61 max-width: none; 68 max-width: none;
62 height: 100dvh; 69 height: 100dvh;
63 min-height: 0; 70 min-height: 0;
64 padding: 0; 71 padding: 0;
65 } 72 }
66 73
67 .jrpg-shell { 74 .jrpg-shell {
75 --mjj-frame-scene-inline: 3.2%;
76 --mjj-frame-scene-block: 9.4%;
77 --mjj-frame-scene-width: 54.8%;
78 --mjj-frame-scene-height: 57%;
79 --mjj-frame-utility-inline: 60.4%;
80 --mjj-frame-utility-block: 9.4%;
81 --mjj-frame-utility-width: 36.5%;
82 --mjj-frame-utility-height: 57%;
83 --mjj-frame-composer-inline: 3.2%;
84 --mjj-frame-composer-block: 72%;
85 --mjj-frame-composer-width: 68.2%;
86 --mjj-frame-composer-height: 17.2%;
87 --mjj-frame-menu-inline: 73.4%;
88 --mjj-frame-menu-block: 72%;
89 --mjj-frame-menu-width: 23.4%;
90 --mjj-frame-menu-height: 17.2%;
91 --mjj-frame-brand-inline: 5.4%;
92 --mjj-frame-brand-block: 2.2%;
93 --mjj-frame-brand-width: 7.8%;
94 --mjj-frame-brand-height: 5.2%;
95 --mjj-frame-controls-inline: 86.6%;
96 --mjj-frame-controls-block: 3.4%;
97 --mjj-frame-controls-width: 11.5%;
98 --mjj-frame-controls-height: 10%;
99 --mjj-frame-controls-gap: 7%;
100 --mjj-frame-telemetry-inline: 8.5%;
101 --mjj-frame-telemetry-block: 92.8%;
102 --mjj-frame-telemetry-width: 75%;
103 --mjj-frame-telemetry-height: 4.8%;
104 --mjj-frame-temp-value-inline: 12%;
105 --mjj-frame-user-value-inline: 32.5%;
106 --mjj-frame-status-value-inline: 60.5%;
107 --mjj-frame-uptime-value-inline: 88%;
108 --mjj-frame-dog-bar-block-end: 4%;
109 --mjj-frame-dog-bar-height: 31%;
68 box-sizing: border-box; 110 box-sizing: border-box;
69 display: block; 111 display: grid;
112 place-items: center;
70 width: 100%; 113 width: 100%;
71 max-width: none; 114 max-width: none;
72 height: 100%; 115 height: 100%;
73 margin: 0; 116 margin: 0;
74 padding: var(--zenbu-sys-padding-sm); 117 padding: 0;
75 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); 118 border: 0;
76 background: var(--mjj-jrpg-canvas); 119 background: var(--mjj-jrpg-canvas);
77 box-shadow: 120 box-shadow: none;
78 inset 0 0 0 var(--zenbu-sys-stroke-width)
79 var(--mjj-jrpg-frame-soft);
80 } 121 }
81 122
82 .jrpg-workspace { 123 .jrpg-workspace {
83 display: grid; 124 position: relative;
84 grid-template: 125 display: block;
85 "scene utility" minmax(0, 1fr) 126 width: 100%;
86 "composer menu" minmax(9rem, auto) /
87 minmax(0, 1.22fr) minmax(19rem, 0.95fr);
88 gap: var(--zenbu-sys-space-group);
89 height: 100%; 127 height: 100%;
128 max-height: none;
129 aspect-ratio: auto;
90 min-height: 0; 130 min-height: 0;
131 background-image: var(--mjj-jrpg-frame-art);
132 background-position: center;
133 background-repeat: no-repeat;
134 background-size: 100% 100%;
135 image-rendering: pixelated;
136 }
137
138 .jrpg-workspace > .jrpg-brand {
139 position: absolute;
140 z-index: 4;
141 inset:
142 var(--mjj-frame-brand-block)
143 auto
144 auto
145 var(--mjj-frame-brand-inline);
146 display: grid;
147 place-items: center;
148 width: var(--mjj-frame-brand-width);
149 height: var(--mjj-frame-brand-height);
150 margin: 0;
151 padding: 0;
152 border: 0;
153 background: var(--mjj-jrpg-canvas);
154 box-shadow: none;
155 text-align: center;
156 }
157
158 .jrpg-workspace > .jrpg-brand header {
159 position: relative;
160 z-index: 1;
161 }
162
163 .jrpg-frame-controls {
164 position: absolute;
165 z-index: 5;
166 inset:
167 var(--mjj-frame-controls-block)
168 auto
169 auto
170 var(--mjj-frame-controls-inline);
171 display: grid;
172 grid-template-columns: repeat(3, minmax(0, 1fr));
173 gap: var(--mjj-frame-controls-gap);
174 width: var(--mjj-frame-controls-width);
175 height: var(--mjj-frame-controls-height);
176 margin: 0;
177 }
178
179 .jrpg-frame-controls zen-button,
180 .jrpg-frame-controls :where(button, a) {
181 width: 100%;
182 height: 100%;
183 }
184
185 .jrpg-frame-controls :where(button, a) {
186 padding: 0;
187 border: 0;
188 border-radius: 0;
189 background: transparent;
190 color: transparent;
191 cursor: pointer;
192 }
193
194 .jrpg-frame-controls zen-icon {
195 opacity: 0;
196 }
197
198 .jrpg-frame-telemetry {
199 position: absolute;
200 z-index: 4;
201 inset:
202 var(--mjj-frame-telemetry-block)
203 auto
204 auto
205 var(--mjj-frame-telemetry-inline);
206 display: block;
207 width: var(--mjj-frame-telemetry-width);
208 height: var(--mjj-frame-telemetry-height);
209 margin: 0;
210 padding: 0;
211 color: var(--mjj-jrpg-primary);
212 font-size: clamp(
213 var(--zenbu-sys-font-size-xs),
214 1vw,
215 var(--zenbu-sys-font-size-sm)
216 );
217 }
218
219 .jrpg-frame-telemetry > * {
220 position: absolute;
221 top: 50%;
222 padding-inline: var(--zenbu-sys-padding-md);
223 background: var(--mjj-jrpg-canvas);
224 transform: translate(-50%, -50%);
225 white-space: nowrap;
226 }
227
228 .jrpg-frame-telemetry > :nth-child(1) {
229 left: var(--mjj-frame-temp-value-inline);
230 }
231
232 .jrpg-frame-telemetry > :nth-child(2) {
233 left: var(--mjj-frame-user-value-inline);
234 padding-inline: var(--zenbu-sys-padding-xl);
235 }
236
237 .jrpg-frame-telemetry > :nth-child(3) {
238 left: var(--mjj-frame-status-value-inline);
239 padding-inline: var(--zenbu-sys-padding-xl);
240 }
241
242 .jrpg-frame-telemetry > :nth-child(4) {
243 left: var(--mjj-frame-uptime-value-inline);
244 }
245
246 .jrpg-frame-telemetry [data-frame-network][data-state="offline"] {
247 color: var(--mjj-jrpg-accent);
248 }
249
250 .jrpg-frame-controls :where(button, a):focus-visible {
251 outline-color: var(--mjj-jrpg-focus);
252 }
253
254 .jrpg-shell[data-minimized="true"] .jrpg-workspace > :is(
255 .jrpg-scene,
256 .jrpg-utility,
257 mjj-jrpg-composer,
258 mjj-jrpg-menu
259 ) {
260 visibility: hidden;
261 }
262
263 .jrpg-workspace > .jrpg-scene,
264 .jrpg-workspace > .jrpg-utility,
265 .jrpg-workspace > mjj-jrpg-composer,
266 .jrpg-workspace > mjj-jrpg-menu {
267 position: absolute;
268 margin: 0;
269 border: 0;
270 border-radius: 0;
271 box-shadow: none;
272 }
273
274 .jrpg-workspace > .jrpg-scene {
275 inset:
276 var(--mjj-frame-scene-block)
277 auto
278 auto
279 var(--mjj-frame-scene-inline);
280 width: var(--mjj-frame-scene-width);
281 height: var(--mjj-frame-scene-height);
282 }
283
284 .jrpg-workspace > .jrpg-utility {
285 inset:
286 var(--mjj-frame-utility-block)
287 auto
288 auto
289 var(--mjj-frame-utility-inline);
290 width: var(--mjj-frame-utility-width);
291 height: var(--mjj-frame-utility-height);
292 }
293
294 .jrpg-workspace > mjj-jrpg-composer {
295 inset:
296 var(--mjj-frame-composer-block)
297 auto
298 auto
299 var(--mjj-frame-composer-inline);
300 width: var(--mjj-frame-composer-width);
301 height: var(--mjj-frame-composer-height);
302 }
303
304 .jrpg-workspace > mjj-jrpg-menu {
305 inset:
306 var(--mjj-frame-menu-block)
307 auto
308 auto
309 var(--mjj-frame-menu-inline);
310 width: var(--mjj-frame-menu-width);
311 height: var(--mjj-frame-menu-height);
91 } 312 }
92 313
93 .jrpg-scene, 314 .jrpg-scene,
94 .jrpg-utility, 315 .jrpg-utility,
95 mjj-jrpg-composer, 316 mjj-jrpg-composer,
100 border-radius: 0; 321 border-radius: 0;
101 } 322 }
102 323
103 .jrpg-scene { 324 .jrpg-scene {
104 grid-area: scene; 325 grid-area: scene;
105 display: grid; 326 position: relative;
106 grid-template-columns: minmax(8rem, 0.38fr) minmax(15rem, 0.92fr); 327 display: grid;
328 grid-template-columns: minmax(5rem, 0.38fr) minmax(0, 0.92fr);
107 align-items: end; 329 align-items: end;
108 gap: var(--zenbu-sys-space-group); 330 gap: var(--zenbu-sys-space-control);
109 min-height: 0; 331 min-height: 0;
110 padding: var(--zenbu-sys-padding-lg); 332 padding: var(--zenbu-sys-padding-md);
111 overflow: hidden; 333 overflow: hidden;
112 background-image: 334 background-image:
113 linear-gradient( 335 linear-gradient(
114 to top, 336 to top,
115 color-mix( 337 color-mix(
122 var(--mjj-jrpg-art); 344 var(--mjj-jrpg-art);
123 background-position: center; 345 background-position: center;
124 background-size: cover; 346 background-size: cover;
125 } 347 }
126 348
349 .jrpg-scene::before {
350 position: absolute;
351 z-index: 0;
352 inset: auto 0 var(--mjj-frame-dog-bar-block-end);
353 height: var(--mjj-frame-dog-bar-height);
354 background-image: var(--mjj-jrpg-art);
355 background-position: center;
356 background-repeat: no-repeat;
357 background-size: 100% 100%;
358 content: "";
359 image-rendering: pixelated;
360 pointer-events: none;
361 }
362
127 mjj-jrpg-character { 363 mjj-jrpg-character {
364 position: relative;
365 z-index: 2;
128 display: block; 366 display: block;
129 align-self: end; 367 align-self: end;
130 min-width: 0; 368 min-width: 0;
131 filter: drop-shadow( 369 filter: drop-shadow(
132 var(--zenbu-sys-space-related) 370 var(--zenbu-sys-space-related)
154 50% { transform: translateY(calc(var(--zenbu-sys-space-related) * -1)); } 392 50% { transform: translateY(calc(var(--zenbu-sys-space-related) * -1)); }
155 } 393 }
156 394
157 mjj-jrpg-chat { 395 mjj-jrpg-chat {
158 position: relative; 396 position: relative;
397 z-index: 1;
159 display: grid; 398 display: grid;
160 grid-template-rows: auto minmax(0, 1fr) auto; 399 grid-template-rows: auto minmax(0, 1fr) auto;
161 align-self: stretch; 400 align-self: stretch;
162 min-height: 0; 401 min-height: 0;
163 padding: var(--zenbu-sys-padding-md); 402 padding: var(--zenbu-sys-padding-md);
178 } 417 }
179 418
180 .jrpg-preview-kicker, 419 .jrpg-preview-kicker,
181 .jrpg-menu-label, 420 .jrpg-menu-label,
182 .jrpg-brand > p, 421 .jrpg-brand > p,
183 .jrpg-dialog-heading p, 422 .jrpg-dialog-heading p {
184 .jrpg-preview-stats dt {
185 color: var(--mjj-jrpg-text-muted); 423 color: var(--mjj-jrpg-text-muted);
186 font-size: var(--zenbu-sys-font-size-xs); 424 font-size: var(--zenbu-sys-font-size-xs);
187 letter-spacing: 0.08em; 425 letter-spacing: 0.08em;
188 } 426 }
189 427
315 } 553 }
316 554
317 .jrpg-utility { 555 .jrpg-utility {
318 grid-area: utility; 556 grid-area: utility;
319 display: grid; 557 display: grid;
320 grid-template-rows: auto minmax(0, 1fr); 558 grid-template-rows: minmax(0, 1fr);
321 gap: var(--zenbu-sys-space-group); 559 gap: 0;
322 padding: var(--zenbu-sys-padding-md); 560 padding: var(--zenbu-sys-padding-md);
323 background: var(--mjj-jrpg-surface); 561 background: var(--mjj-jrpg-surface);
324 } 562 }
325 563
326 .jrpg-brand { 564 .jrpg-brand {
361 mjj-jrpg-preview { 599 mjj-jrpg-preview {
362 display: block; 600 display: block;
363 min-height: 0; 601 min-height: 0;
364 } 602 }
365 603
604 .jrpg-workspace > .jrpg-brand header h1 {
605 font-size: clamp(
606 var(--zenbu-sys-font-size-xs),
607 0.95vw,
608 var(--zenbu-sys-font-size-sm)
609 );
610 line-height: 1;
611 white-space: nowrap;
612 }
613
366 .jrpg-preview-panel { 614 .jrpg-preview-panel {
367 display: grid; 615 display: grid;
368 grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; 616 grid-template-rows: auto auto auto minmax(0, 1fr) auto;
369 gap: var(--zenbu-sys-space-group); 617 gap: var(--zenbu-sys-space-group);
370 height: 100%; 618 height: 100%;
371 padding: var(--zenbu-sys-padding-lg); 619 padding: var(--zenbu-sys-padding-lg);
372 background: 620 background:
373 linear-gradient( 621 linear-gradient(
425 .jrpg-work-showcase small { 673 .jrpg-work-showcase small {
426 color: var(--mjj-jrpg-text-muted); 674 color: var(--mjj-jrpg-text-muted);
427 font-size: var(--zenbu-sys-font-size-xs); 675 font-size: var(--zenbu-sys-font-size-xs);
428 } 676 }
429 677
430 .jrpg-preview-stats { 678 .jrpg-work-showcase a:has(> zen-icon) {
431 display: grid; 679 grid-template-columns: auto minmax(0, 1fr);
432 grid-template-columns: repeat(2, 1fr); 680 }
433 gap: var(--zenbu-sys-space-control); 681
434 margin: 0; 682 .jrpg-work-showcase a > zen-icon {
435 } 683 grid-row: 1 / 3;
436 684 align-self: center;
437 .jrpg-preview-stats div { 685 color: var(--mjj-jrpg-highlight);
438 padding: var(--zenbu-sys-padding-sm);
439 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
440 background: var(--mjj-jrpg-panel);
441 }
442
443 .jrpg-preview-stats dd {
444 color: var(--mjj-jrpg-success);
445 margin: var(--zenbu-sys-space-icon-label) 0 0;
446 } 686 }
447 687
448 .jrpg-preview-dialog > zen-button > button, 688 .jrpg-preview-dialog > zen-button > button,
449 .jrpg-preview-dialog dialog zen-button > :where(button, a) { 689 .jrpg-preview-dialog dialog zen-button > :where(button, a) {
450 width: 100%; 690 width: 100%;
515 755
516 .jrpg-dialog-heading zen-button { 756 .jrpg-dialog-heading zen-button {
517 width: auto; 757 width: auto;
518 } 758 }
519 759
520 .jrpg-dialog-heading zen-button > button { 760 .jrpg-dialog-heading-actions {
521 width: var(--zenbu-control-height); 761 display: flex;
762 align-items: center;
763 gap: var(--zenbu-sys-space-control);
764 }
765
766 .jrpg-dialog-heading zen-button > :where(button, a) {
767 width: auto;
522 min-width: var(--zenbu-control-height); 768 min-width: var(--zenbu-control-height);
523 padding: 0;
524 border-color: var(--mjj-jrpg-accent); 769 border-color: var(--mjj-jrpg-accent);
525 background: var(--mjj-jrpg-surface); 770 background: var(--mjj-jrpg-surface);
526 color: var(--mjj-jrpg-text); 771 color: var(--mjj-jrpg-text);
772 }
773
774 .jrpg-dialog-heading zen-button > button {
775 width: var(--zenbu-control-height);
776 padding: 0;
527 } 777 }
528 778
529 .jrpg-preview-dialog dialog h2 { 779 .jrpg-preview-dialog dialog h2 {
530 margin-top: var(--zenbu-sys-space-content); 780 margin-top: var(--zenbu-sys-space-content);
531 } 781 }
542 792
543 .jrpg-preview-dialog dialog.jrpg-detail-dialog[open] { 793 .jrpg-preview-dialog dialog.jrpg-detail-dialog[open] {
544 display: grid; 794 display: grid;
545 grid-template-rows: auto auto minmax(0, 1fr) auto; 795 grid-template-rows: auto auto minmax(0, 1fr) auto;
546 gap: var(--zenbu-sys-space-group); 796 gap: var(--zenbu-sys-space-group);
797 }
798
799 .jrpg-preview-dialog dialog.jrpg-detail-dialog[data-detail-mode="tools"] {
800 width: calc(100vw - var(--zenbu-sys-space-content));
801 max-width: none;
802 height: calc(100dvh - var(--zenbu-sys-space-content));
803 max-height: none;
804 padding: 0;
805 border: 0;
806 background: transparent;
807 box-shadow: none;
808 }
809
810 .jrpg-preview-dialog dialog.jrpg-detail-dialog[data-detail-mode="tools"][open] {
811 grid-template-rows: auto minmax(0, 1fr);
812 gap: var(--zenbu-sys-space-control);
813 }
814
815 .jrpg-detail-dialog[data-detail-mode="tools"] > h2 {
816 display: none;
817 }
818
819 .jrpg-detail-dialog[data-detail-mode="tools"] .jrpg-dialog-heading {
820 padding: var(--zenbu-sys-padding-sm);
821 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
822 background: var(--mjj-jrpg-surface-raised);
823 box-shadow:
824 inset 0 0 0 var(--zenbu-sys-stroke-width)
825 var(--mjj-jrpg-accent);
547 } 826 }
548 827
549 .jrpg-resume-dossier { 828 .jrpg-resume-dossier {
550 min-height: 0; 829 min-height: 0;
551 padding: var(--zenbu-sys-padding-lg); 830 padding: var(--zenbu-sys-padding-lg);
555 scrollbar-color: var(--mjj-jrpg-frame) transparent; 834 scrollbar-color: var(--mjj-jrpg-frame) transparent;
556 } 835 }
557 836
558 .jrpg-resume-dossier[hidden], 837 .jrpg-resume-dossier[hidden],
559 .jrpg-blog-browser[hidden], 838 .jrpg-blog-browser[hidden],
839 .jrpg-tool-browser[hidden],
840 [data-dialog-trigger-owner][hidden],
560 [data-dialog-copy][hidden], 841 [data-dialog-copy][hidden],
561 [data-blog-status][hidden], 842 [data-blog-status][hidden],
843 [data-tool-status][hidden],
562 [data-resume-status][hidden], 844 [data-resume-status][hidden],
845 [data-dialog-actions][hidden],
563 [data-resume-download][hidden] { 846 [data-resume-download][hidden] {
564 display: none; 847 display: none;
565 } 848 }
566 849
567 .jrpg-resume-dossier [data-resume-status] { 850 .jrpg-resume-dossier [data-resume-status] {
657 display: grid; 940 display: grid;
658 grid-template-columns: repeat(2, minmax(0, 1fr)); 941 grid-template-columns: repeat(2, minmax(0, 1fr));
659 gap: var(--zenbu-sys-space-control); 942 gap: var(--zenbu-sys-space-control);
660 } 943 }
661 944
662 .jrpg-blog-browser { 945 :is(.jrpg-blog-browser, .jrpg-tool-browser) {
663 display: grid; 946 display: grid;
664 grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr); 947 grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr);
665 gap: var(--zenbu-sys-space-group); 948 gap: var(--zenbu-sys-space-group);
666 min-height: 0; 949 min-height: 0;
667 overflow: hidden; 950 overflow: hidden;
668 } 951 }
669 952
670 .jrpg-blog-browser > aside, 953 :is(.jrpg-blog-browser, .jrpg-tool-browser) > aside,
671 .jrpg-blog-browser > article { 954 :is(.jrpg-blog-browser, .jrpg-tool-browser) > article {
672 min-height: 0; 955 min-height: 0;
673 padding: var(--zenbu-sys-padding-md); 956 padding: var(--zenbu-sys-padding-md);
674 overflow: auto; 957 overflow: auto;
675 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); 958 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
676 background: var(--mjj-jrpg-surface-sunken); 959 background: var(--mjj-jrpg-surface-sunken);
677 scrollbar-color: var(--mjj-jrpg-frame) transparent; 960 scrollbar-color: var(--mjj-jrpg-frame) transparent;
678 } 961 }
679 962
680 .jrpg-blog-browser h3, 963 .jrpg-tool-browser {
681 .jrpg-blog-browser [data-blog-status] { 964 display: block;
965 height: 100%;
966 }
967
968 .jrpg-tool-browser > article {
969 height: 100%;
970 padding: 0;
971 overflow: hidden;
972 border: 0;
973 background: transparent;
974 }
975
976 .jrpg-tool-browser [data-tool-content],
977 .jrpg-functional-tool,
978 .jrpg-tool-panes {
979 height: 100%;
980 min-height: 0;
981 }
982
983 :is(.jrpg-blog-browser, .jrpg-tool-browser) h3,
984 .jrpg-blog-browser [data-blog-status],
985 .jrpg-tool-browser [data-tool-status] {
682 margin-top: 0; 986 margin-top: 0;
683 color: var(--mjj-jrpg-highlight); 987 color: var(--mjj-jrpg-highlight);
684 } 988 }
685 989
686 .jrpg-blog-browser [data-blog-list] { 990 :is(.jrpg-blog-browser, .jrpg-tool-browser)
991 :is([data-blog-list], [data-tool-list]) {
687 display: grid; 992 display: grid;
688 gap: var(--zenbu-sys-space-control); 993 gap: var(--zenbu-sys-space-control);
689 margin: 0; 994 margin: 0;
690 padding: 0; 995 padding: 0;
691 list-style: none; 996 list-style: none;
692 } 997 }
693 998
694 .jrpg-blog-browser [data-blog-list] zen-button, 999 :is(.jrpg-blog-browser, .jrpg-tool-browser)
695 .jrpg-blog-browser [data-blog-list] button { 1000 :is([data-blog-list], [data-tool-list]) zen-button,
1001 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1002 :is([data-blog-list], [data-tool-list]) button {
696 width: 100%; 1003 width: 100%;
697 } 1004 }
698 1005
699 .jrpg-blog-browser [data-blog-list] button { 1006 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1007 :is([data-blog-list], [data-tool-list]) button {
700 display: grid; 1008 display: grid;
701 justify-items: start; 1009 justify-items: start;
702 gap: var(--zenbu-sys-space-icon-label); 1010 gap: var(--zenbu-sys-space-icon-label);
703 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); 1011 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
704 border-radius: 0; 1012 border-radius: 0;
706 color: var(--mjj-jrpg-primary); 1014 color: var(--mjj-jrpg-primary);
707 text-align: left; 1015 text-align: left;
708 cursor: pointer; 1016 cursor: pointer;
709 } 1017 }
710 1018
711 .jrpg-blog-browser [data-blog-list] button:hover, 1019 :is(.jrpg-blog-browser, .jrpg-tool-browser)
712 .jrpg-blog-browser [data-blog-list] button[aria-pressed="true"] { 1020 :is([data-blog-list], [data-tool-list]) button:hover,
1021 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1022 :is([data-blog-list], [data-tool-list]) button[aria-pressed="true"] {
713 border-color: var(--mjj-jrpg-accent); 1023 border-color: var(--mjj-jrpg-accent);
714 background: var(--mjj-jrpg-surface-raised); 1024 background: var(--mjj-jrpg-surface-raised);
715 } 1025 }
716 1026
717 .jrpg-blog-browser [data-blog-list] small { 1027 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1028 :is([data-blog-list], [data-tool-list]) small {
718 color: var(--mjj-jrpg-text-muted); 1029 color: var(--mjj-jrpg-text-muted);
719 font-size: var(--zenbu-sys-font-size-xs); 1030 font-size: var(--zenbu-sys-font-size-xs);
720 } 1031 }
721 1032
722 .jrpg-blog-browser [data-blog-content] { 1033 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1034 :is([data-blog-content], [data-tool-content]) {
723 color: var(--mjj-jrpg-text); 1035 color: var(--mjj-jrpg-text);
724 line-height: var(--zenbu-sys-line-height-lg); 1036 line-height: var(--zenbu-sys-line-height-lg);
725 } 1037 }
726 1038
727 .jrpg-blog-browser [data-blog-content] :where(h1, h2, h3, h4) { 1039 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1040 :is([data-blog-content], [data-tool-content])
1041 :where(h1, h2, h3, h4) {
728 color: var(--mjj-jrpg-primary); 1042 color: var(--mjj-jrpg-primary);
729 } 1043 }
730 1044
731 .jrpg-blog-browser [data-blog-content] a { 1045 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1046 :is([data-blog-content], [data-tool-content]) a {
732 color: var(--mjj-jrpg-primary); 1047 color: var(--mjj-jrpg-primary);
733 text-decoration-color: var(--mjj-jrpg-accent); 1048 text-decoration-color: var(--mjj-jrpg-accent);
734 text-underline-offset: var(--zenbu-sys-space-icon-label); 1049 text-underline-offset: var(--zenbu-sys-space-icon-label);
735 } 1050 }
736 1051
737 .jrpg-blog-browser [data-blog-content] :where(img, video) { 1052 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1053 :is([data-blog-content], [data-tool-content])
1054 :where(img, video) {
738 display: block; 1055 display: block;
739 max-width: 100%; 1056 max-width: 100%;
740 height: auto; 1057 height: auto;
741 margin-inline: auto; 1058 margin-inline: auto;
742 } 1059 }
743 1060
744 .jrpg-blog-browser [data-blog-content] :where(pre, blockquote) { 1061 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1062 :is([data-blog-content], [data-tool-content])
1063 :where(pre, blockquote) {
745 max-width: 100%; 1064 max-width: 100%;
746 padding: var(--zenbu-sys-padding-md); 1065 padding: var(--zenbu-sys-padding-md);
747 overflow: auto; 1066 overflow: auto;
748 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); 1067 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent);
749 background: var(--mjj-jrpg-panel); 1068 background: var(--mjj-jrpg-panel);
750 } 1069 }
751 1070
752 .jrpg-blog-browser [data-blog-content] code { 1071 :is(.jrpg-blog-browser, .jrpg-tool-browser)
1072 :is([data-blog-content], [data-tool-content]) code {
753 color: var(--mjj-jrpg-success); 1073 color: var(--mjj-jrpg-success);
754 white-space: pre-wrap; 1074 white-space: pre-wrap;
755 overflow-wrap: anywhere; 1075 overflow-wrap: anywhere;
1076 }
1077
1078 .jrpg-tool-readonly-note {
1079 padding: var(--zenbu-sys-padding-sm);
1080 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-highlight);
1081 background: var(--mjj-jrpg-panel);
1082 color: var(--mjj-jrpg-highlight);
1083 }
1084
1085 .jrpg-functional-tool {
1086 min-height: 100%;
1087 }
1088
1089 .jrpg-functional-tool [hidden] {
1090 display: none;
1091 }
1092
1093 .jrpg-tool-panes {
1094 position: relative;
1095 box-sizing: border-box;
1096 display: grid;
1097 grid-template-columns:
1098 minmax(0, 1fr)
1099 calc(var(--zenbu-sys-space-container) * 2)
1100 minmax(0, 1fr);
1101 gap: var(--zenbu-sys-space-control);
1102 height: 100%;
1103 min-height: 0;
1104 padding: var(--zenbu-sys-padding-sm);
1105 }
1106
1107 .jrpg-tool-panes::before {
1108 grid-column: 2;
1109 grid-row: 1;
1110 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
1111 background-image:
1112 radial-gradient(
1113 circle at 50% var(--zenbu-sys-space-content),
1114 var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis),
1115 var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis)
1116 calc(var(--zenbu-sys-stroke-width-emphasis) * 2),
1117 transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2)
1118 ),
1119 radial-gradient(
1120 circle at 50% calc(100% - var(--zenbu-sys-space-content)),
1121 var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis),
1122 var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis)
1123 calc(var(--zenbu-sys-stroke-width-emphasis) * 2),
1124 transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2)
1125 ),
1126 linear-gradient(
1127 90deg,
1128 var(--mjj-jrpg-surface-sunken),
1129 var(--mjj-jrpg-surface-raised) 45%,
1130 var(--mjj-jrpg-frame) 50%,
1131 var(--mjj-jrpg-surface-raised) 55%,
1132 var(--mjj-jrpg-surface-sunken)
1133 ),
1134 var(--mjj-jrpg-art);
1135 background-position: center;
1136 background-size: auto, auto, auto, cover;
1137 box-shadow:
1138 inset 0 0 0 var(--zenbu-sys-stroke-width)
1139 var(--mjj-jrpg-info),
1140 0 0 var(--zenbu-sys-space-related)
1141 color-mix(in srgb, var(--mjj-jrpg-primary) 65%, transparent);
1142 content: "";
1143 image-rendering: pixelated;
1144 }
1145
1146 .jrpg-tool-window:first-of-type {
1147 grid-column: 1;
1148 grid-row: 1;
1149 }
1150
1151 .jrpg-tool-window:last-of-type {
1152 grid-column: 3;
1153 grid-row: 1;
1154 }
1155
1156 .jrpg-tool-pane {
1157 display: grid;
1158 grid-template-rows: auto minmax(0, 1fr) auto;
1159 align-content: start;
1160 gap: var(--zenbu-sys-space-control);
1161 min-width: 0;
1162 min-height: 0;
1163 padding: var(--zenbu-sys-padding-md);
1164 overflow: auto;
1165 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
1166 background: var(--mjj-jrpg-panel);
1167 }
1168
1169 .jrpg-tool-window {
1170 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-primary);
1171 box-shadow:
1172 inset 0 0 0 var(--zenbu-sys-stroke-width)
1173 var(--mjj-jrpg-info),
1174 0 0 0 var(--zenbu-sys-stroke-width-emphasis)
1175 var(--mjj-jrpg-accent),
1176 0 0 var(--zenbu-sys-space-control)
1177 color-mix(in srgb, var(--mjj-jrpg-info) 68%, transparent);
1178 }
1179
1180 .jrpg-tool-pane h2,
1181 .jrpg-tool-pane-heading {
1182 margin: 0;
1183 color: var(--mjj-jrpg-primary);
1184 }
1185
1186 .jrpg-tool-pane h2 {
1187 display: flex;
1188 align-items: center;
1189 gap: var(--zenbu-sys-space-icon-label);
1190 }
1191
1192 .jrpg-tool-pane h2 zen-icon {
1193 color: var(--mjj-jrpg-highlight);
1194 }
1195
1196 .jrpg-tool-pane-heading {
1197 display: flex;
1198 align-items: baseline;
1199 justify-content: space-between;
1200 gap: var(--zenbu-sys-space-control);
1201 }
1202
1203 .jrpg-tool-pane-heading h2 {
1204 margin: 0;
1205 }
1206
1207 .jrpg-functional-tool zen-field[appearance="plain"] {
1208 display: grid;
1209 grid-template-rows: auto minmax(0, 1fr);
1210 gap: var(--zenbu-sys-space-icon-label);
1211 min-height: 0;
1212 }
1213
1214 .jrpg-functional-tool :where(input, textarea) {
1215 box-sizing: border-box;
1216 width: 100%;
1217 min-height: var(--zenbu-control-height);
1218 padding:
1219 var(--zenbu-control-padding-block)
1220 var(--zenbu-control-padding-inline);
1221 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
1222 border-radius: 0;
1223 background: var(--mjj-jrpg-surface-sunken);
1224 color: var(--mjj-jrpg-text);
1225 font: inherit;
1226 }
1227
1228 .jrpg-functional-tool textarea {
1229 height: 100%;
1230 min-height: 22rem;
1231 resize: vertical;
1232 }
1233
1234 .jrpg-functional-tool zen-button > :where(button, a) {
1235 width: 100%;
1236 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
1237 border-radius: 0;
1238 background: var(--mjj-jrpg-primary);
1239 color: var(--mjj-jrpg-primary-foreground);
1240 cursor: pointer;
1241 }
1242
1243 .jrpg-functional-tool zen-button > :where(button, a):hover {
1244 border-color: var(--mjj-jrpg-primary-hover);
1245 background: var(--mjj-jrpg-primary-hover);
1246 }
1247
1248 .jrpg-functional-tool button:disabled {
1249 opacity: var(--zenbu-sys-opacity-disabled);
1250 cursor: not-allowed;
1251 }
1252
1253 .jrpg-tool-actions {
1254 display: flex;
1255 gap: var(--zenbu-sys-space-control);
1256 }
1257
1258 .jrpg-tool-actions zen-button {
1259 flex: 1;
1260 }
1261
1262 .jrpg-tool-status {
1263 margin-top: 0;
1264 padding: var(--zenbu-sys-padding-sm);
1265 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-info);
1266 background: var(--mjj-jrpg-panel);
1267 color: var(--mjj-jrpg-text);
1268 }
1269
1270 .jrpg-tool-status[data-state="ready"] {
1271 border-left-color: var(--mjj-jrpg-success);
1272 color: var(--mjj-jrpg-success);
1273 }
1274
1275 .jrpg-tool-status[data-state="working"] {
1276 border-left-color: var(--mjj-jrpg-highlight);
1277 color: var(--mjj-jrpg-highlight);
1278 }
1279
1280 .jrpg-tool-status[data-state="error"] {
1281 border-left-color: var(--mjj-jrpg-accent);
1282 color: var(--mjj-jrpg-accent);
1283 }
1284
1285 .jrpg-markdown-output {
1286 min-height: 22rem;
1287 padding: var(--zenbu-sys-padding-md);
1288 overflow: auto;
1289 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
1290 background: var(--mjj-jrpg-surface-sunken);
1291 }
1292
1293 .jrpg-markdown-output :where(h1, h2, h3) {
1294 color: var(--mjj-jrpg-primary);
1295 }
1296
1297 .jrpg-markdown-output code {
1298 color: var(--mjj-jrpg-success);
1299 }
1300
1301 .jrpg-functional-tool :where(video, iframe) {
1302 width: 100%;
1303 min-height: 22rem;
1304 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame);
1305 background: var(--mjj-jrpg-canvas);
1306 }
1307
1308 .jrpg-tool-details {
1309 display: grid;
1310 grid-template-columns: repeat(2, minmax(0, 1fr));
1311 gap: var(--zenbu-sys-space-control);
1312 margin: 0;
1313 }
1314
1315 .jrpg-tool-details div {
1316 padding: var(--zenbu-sys-padding-sm);
1317 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft);
1318 }
1319
1320 .jrpg-tool-details dd {
1321 margin: var(--zenbu-sys-space-icon-label) 0 0;
1322 color: var(--mjj-jrpg-success);
1323 }
1324
1325 .jrpg-functional-tool [data-converter-download] {
1326 color: var(--mjj-jrpg-primary);
1327 text-decoration-color: var(--mjj-jrpg-accent);
756 } 1328 }
757 1329
758 mjj-jrpg-composer { 1330 mjj-jrpg-composer {
759 grid-area: composer; 1331 grid-area: composer;
760 display: block; 1332 display: block;
926 1498
927 mjj-jrpg-menu button[aria-pressed="true"] zen-icon { 1499 mjj-jrpg-menu button[aria-pressed="true"] zen-icon {
928 opacity: 1; 1500 opacity: 1;
929 } 1501 }
930 1502
931 @media (max-width: 52rem) { 1503 .jrpg-workspace > :is(
1504 .jrpg-scene,
1505 .jrpg-utility,
1506 mjj-jrpg-composer,
1507 mjj-jrpg-menu
1508 ),
1509 .jrpg-scene > mjj-jrpg-chat,
1510 .jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel {
1511 border: 0;
1512 background-color: transparent;
1513 box-shadow: none;
1514 }
1515
1516 .jrpg-workspace > .jrpg-scene {
1517 background-image: none;
1518 }
1519
1520 .jrpg-workspace > mjj-jrpg-composer,
1521 .jrpg-workspace > mjj-jrpg-menu {
1522 padding: var(--zenbu-sys-padding-sm);
1523 }
1524
1525 .jrpg-workspace > mjj-jrpg-composer textarea {
1526 min-height: 0;
1527 }
1528
1529 .jrpg-scene .jrpg-panel-heading,
1530 .jrpg-scene .jrpg-message,
1531 .jrpg-scene .jrpg-turn-navigation,
1532 .jrpg-brand,
1533 .jrpg-work-showcase a,
1534 .jrpg-preview-panel > .jrpg-preview-dialog > zen-button > button,
1535 mjj-jrpg-composer > .jrpg-composer textarea,
1536 mjj-jrpg-composer > .jrpg-composer zen-button > button,
1537 mjj-jrpg-menu nav button {
1538 border: 0;
1539 }
1540
1541 @media
1542 (max-width: 52rem),
1543 (max-height: 40rem),
1544 (min-aspect-ratio: 2 / 1) {
932 .jrpg-page { 1545 .jrpg-page {
933 overflow-y: auto; 1546 overflow-y: auto;
934 } 1547 }
935 1548
936 .jrpg-main { 1549 .jrpg-main {
943 height: auto; 1556 height: auto;
944 min-height: 100dvh; 1557 min-height: 100dvh;
945 } 1558 }
946 1559
947 .jrpg-workspace { 1560 .jrpg-workspace {
1561 display: grid;
948 grid-template: 1562 grid-template:
1563 "brand" auto
949 "scene" auto 1564 "scene" auto
950 "utility" auto 1565 "utility" auto
951 "menu" auto 1566 "menu" auto
952 "composer" auto / 1567 "composer" auto
1568 "telemetry" auto /
953 minmax(0, 1fr); 1569 minmax(0, 1fr);
1570 gap: var(--zenbu-sys-space-group);
1571 width: 100%;
1572 max-height: none;
954 height: auto; 1573 height: auto;
1574 aspect-ratio: auto;
955 min-height: 0; 1575 min-height: 0;
1576 background-size: cover;
1577 }
1578
1579 .jrpg-workspace > .jrpg-scene,
1580 .jrpg-workspace > .jrpg-utility,
1581 .jrpg-workspace > mjj-jrpg-composer,
1582 .jrpg-workspace > mjj-jrpg-menu,
1583 .jrpg-workspace > .jrpg-brand,
1584 .jrpg-workspace > .jrpg-frame-controls,
1585 .jrpg-workspace > .jrpg-frame-telemetry {
1586 position: relative;
1587 inset: auto;
1588 width: auto;
1589 height: auto;
1590 }
1591
1592 .jrpg-workspace > .jrpg-brand {
1593 grid-area: brand;
1594 justify-self: start;
1595 padding: var(--zenbu-sys-padding-sm);
1596 background: transparent;
1597 box-shadow: none;
1598 }
1599
1600 .jrpg-workspace > .jrpg-frame-controls {
1601 grid-area: brand;
1602 justify-self: end;
1603 align-self: center;
1604 display: flex;
1605 gap: var(--zenbu-sys-space-icon-label);
1606 }
1607
1608 .jrpg-frame-controls zen-button,
1609 .jrpg-frame-controls :where(button, a) {
1610 width: var(--zenbu-control-height);
1611 height: var(--zenbu-control-height);
1612 }
1613
1614 .jrpg-frame-controls :where(button, a) {
1615 background: var(--mjj-jrpg-surface-raised);
1616 color: var(--mjj-jrpg-text);
1617 }
1618
1619 .jrpg-frame-controls zen-icon {
1620 opacity: 1;
1621 }
1622
1623 .jrpg-workspace > .jrpg-frame-telemetry {
1624 grid-area: telemetry;
1625 display: grid;
1626 grid-template-columns: repeat(2, minmax(0, 1fr));
1627 gap: var(--zenbu-sys-space-control);
1628 padding: var(--zenbu-sys-padding-sm);
1629 background: var(--mjj-jrpg-surface-sunken);
1630 }
1631
1632 .jrpg-frame-telemetry > * {
1633 position: static;
1634 justify-self: start;
1635 background: transparent;
1636 transform: none;
956 } 1637 }
957 1638
958 .jrpg-scene { 1639 .jrpg-scene {
959 min-height: 34rem; 1640 min-height: 34rem;
960 } 1641 }
997 max-height: 15rem; 1678 max-height: 15rem;
998 } 1679 }
999 1680
1000 .jrpg-brand { 1681 .jrpg-brand {
1001 align-items: center; 1682 align-items: center;
1002 }
1003
1004 .jrpg-brand > p {
1005 max-width: 9rem;
1006 } 1683 }
1007 1684
1008 .jrpg-composer { 1685 .jrpg-composer {
1009 grid-template-columns: 1fr; 1686 grid-template-columns: 1fr;
1010 grid-template-rows: 1687 grid-template-rows:
1044 1721
1045 .jrpg-composer zen-button > button { 1722 .jrpg-composer zen-button > button {
1046 width: 100%; 1723 width: 100%;
1047 } 1724 }
1048 1725
1049 .jrpg-blog-browser { 1726 :is(.jrpg-blog-browser, .jrpg-tool-browser) {
1050 grid-template-columns: 1fr; 1727 grid-template-columns: 1fr;
1051 overflow: auto; 1728 overflow: auto;
1052 } 1729 }
1053 1730
1054 .jrpg-blog-browser > aside { 1731 :is(.jrpg-blog-browser, .jrpg-tool-browser) > aside {
1055 max-height: 16rem; 1732 max-height: 16rem;
1733 }
1734
1735 .jrpg-tool-panes {
1736 grid-template-columns: 1fr;
1737 grid-template-rows:
1738 minmax(24rem, auto)
1739 calc(var(--zenbu-sys-space-container) * 2)
1740 minmax(24rem, auto);
1741 overflow: auto;
1742 }
1743
1744 .jrpg-tool-panes::before {
1745 grid-column: 1;
1746 grid-row: 2;
1747 background-image:
1748 radial-gradient(
1749 circle at var(--zenbu-sys-space-content) 50%,
1750 var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis),
1751 var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis)
1752 calc(var(--zenbu-sys-stroke-width-emphasis) * 2),
1753 transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2)
1754 ),
1755 radial-gradient(
1756 circle at calc(100% - var(--zenbu-sys-space-content)) 50%,
1757 var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis),
1758 var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis)
1759 calc(var(--zenbu-sys-stroke-width-emphasis) * 2),
1760 transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2)
1761 ),
1762 linear-gradient(
1763 var(--mjj-jrpg-surface-sunken),
1764 var(--mjj-jrpg-surface-raised) 45%,
1765 var(--mjj-jrpg-frame) 50%,
1766 var(--mjj-jrpg-surface-raised) 55%,
1767 var(--mjj-jrpg-surface-sunken)
1768 ),
1769 var(--mjj-jrpg-art);
1770 }
1771
1772 .jrpg-tool-window:first-of-type {
1773 grid-column: 1;
1774 grid-row: 1;
1775 }
1776
1777 .jrpg-tool-window:last-of-type {
1778 grid-column: 1;
1779 grid-row: 3;
1780 }
1781
1782 .jrpg-tool-pane {
1783 min-height: 24rem;
1056 } 1784 }
1057 1785
1058 mjj-jrpg-menu ul { 1786 mjj-jrpg-menu ul {
1059 grid-template-columns: 1fr; 1787 grid-template-columns: 1fr;
1060 } 1788 }
1071 .jrpg-preview-dialog dialog[open] { 1799 .jrpg-preview-dialog dialog[open] {
1072 animation: none; 1800 animation: none;
1073 } 1801 }
1074 } 1802 }
1075 1803
1804 .jrpg-page,
1805 .jrpg-page * {
1806 scrollbar-color: var(--mjj-jrpg-primary) transparent;
1807 scrollbar-width: thin;
1808 }
1809
1810 .jrpg-page::-webkit-scrollbar,
1811 .jrpg-page *::-webkit-scrollbar {
1812 width: var(--zenbu-sys-space-related);
1813 height: var(--zenbu-sys-space-related);
1814 }
1815
1816 .jrpg-page::-webkit-scrollbar-track,
1817 .jrpg-page *::-webkit-scrollbar-track {
1818 background: transparent;
1819 }
1820
1821 .jrpg-page::-webkit-scrollbar-thumb,
1822 .jrpg-page *::-webkit-scrollbar-thumb {
1823 border: 0;
1824 border-radius: 0;
1825 background: var(--mjj-jrpg-primary);
1826 }
1827
1828 .jrpg-page::-webkit-scrollbar-button,
1829 .jrpg-page *::-webkit-scrollbar-button {
1830 display: none;
1831 }
1832
1076 @media (forced-colors: active) { 1833 @media (forced-colors: active) {
1077 .jrpg-scene { 1834 .jrpg-workspace,
1835 .jrpg-scene,
1836 .jrpg-scene::before {
1078 background-image: none; 1837 background-image: none;
1079 } 1838 }
1080 } 1839 }