Mercurial
annotate mrjunejune/src/jrpg/jrpg.css @ 273:e02e2036ef84 default tip
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 | 41a49c29a28f |
| children |
| rev | line source |
|---|---|
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1 @font-face { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
2 font-family: "Pixel Mplus"; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
3 src: url("/public/fonts/pixel-mplus-12-regular.ttf") format("truetype"); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
4 font-display: block; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
5 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
6 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
7 :root { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
8 --mjj-jrpg-art: url("/public/jrpg/bar-ink.webp"); |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
9 --mjj-jrpg-frame-art: url("/public/jrpg/background-frame-2.webp"); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
10 --mjj-jrpg-canvas: var(--zenbu-sys-color-surface-page); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
11 --mjj-jrpg-surface: var(--zenbu-sys-color-surface-default); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
12 --mjj-jrpg-surface-raised: var(--zenbu-sys-color-surface-raised); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
13 --mjj-jrpg-surface-sunken: var(--zenbu-sys-color-surface-sunken); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
14 --mjj-jrpg-text: var(--zenbu-sys-color-text-primary); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
15 --mjj-jrpg-text-muted: var(--zenbu-sys-color-text-secondary); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
16 --mjj-jrpg-frame: var(--zenbu-sys-color-border-strong); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
17 --mjj-jrpg-frame-soft: var(--zenbu-sys-color-border-subtle); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
18 --mjj-jrpg-primary: var(--zenbu-sys-color-action-primary-background); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
19 --mjj-jrpg-primary-hover: |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
20 var(--zenbu-sys-color-action-primary-background-hover); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
21 --mjj-jrpg-primary-foreground: |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
22 var(--zenbu-sys-color-action-primary-foreground); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
23 --mjj-jrpg-accent: var(--zenbu-sys-color-danger-foreground); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
24 --mjj-jrpg-highlight: var(--zenbu-sys-color-warning-foreground); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
25 --mjj-jrpg-info: var(--zenbu-sys-color-info-foreground); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
26 --mjj-jrpg-success: var(--zenbu-sys-color-success-foreground); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
27 --mjj-jrpg-focus: var(--zenbu-sys-color-focus-outer); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
28 --mjj-jrpg-panel: color-mix( |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
29 in srgb, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
30 var(--mjj-jrpg-surface) 92%, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
31 transparent |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
32 ); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
33 --mjj-jrpg-panel-strong: color-mix( |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
34 in srgb, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
35 var(--mjj-jrpg-surface-sunken) 92%, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
36 transparent |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
37 ); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
38 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
39 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
40 .jrpg-page { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
41 --zenbu-sys-font-family-ui: "Pixel Mplus"; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
42 --zenbu-sys-font-family-content: "Pixel Mplus"; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
43 --zenbu-sys-font-family-code: "Pixel Mplus"; |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
44 --zenbu-sys-type-caption-family: "Pixel Mplus"; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
45 --zenbu-sys-type-label-family: "Pixel Mplus"; |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
46 --zenbu-sys-type-body-family: "Pixel Mplus"; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
47 --zenbu-sys-type-body-large-family: "Pixel Mplus"; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
48 --zenbu-sys-type-subtitle-family: "Pixel Mplus"; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
49 --zenbu-sys-type-title-family: "Pixel Mplus"; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
50 --zenbu-sys-type-page-title-family: "Pixel Mplus"; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
51 --zenbu-sys-type-reading-family: "Pixel Mplus"; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
52 --zenbu-sys-type-code-family: "Pixel Mplus"; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
53 min-width: 20rem; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
54 min-height: 100dvh; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
55 overflow: hidden; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
56 overflow-anchor: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
57 background: var(--mjj-jrpg-canvas); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
58 color: var(--mjj-jrpg-text); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
59 font-family: "Pixel Mplus"; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
60 font-size: var(--zenbu-sys-font-size-md); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
61 line-height: var(--zenbu-sys-line-height-md); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
62 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
63 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
64 .jrpg-page * { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
65 font-family: inherit; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
66 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
67 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
68 .jrpg-page zen-icon svg { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
69 shape-rendering: crispEdges; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
70 stroke-linecap: square; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
71 stroke-linejoin: miter; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
72 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
73 |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
74 .jrpg-main { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
75 box-sizing: border-box; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
76 width: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
77 max-width: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
78 height: 100dvh; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
79 min-height: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
80 padding: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
81 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
82 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
83 .jrpg-shell { |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
84 --mjj-frame-scene-inline: 3.2%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
85 --mjj-frame-scene-block: 9.4%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
86 --mjj-frame-scene-width: 54.8%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
87 --mjj-frame-scene-height: 57%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
88 --mjj-frame-utility-inline: 60.4%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
89 --mjj-frame-utility-block: 9.4%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
90 --mjj-frame-utility-width: 36.5%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
91 --mjj-frame-utility-height: 57%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
92 --mjj-frame-composer-inline: 3.2%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
93 --mjj-frame-composer-block: 72%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
94 --mjj-frame-composer-width: 68.2%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
95 --mjj-frame-composer-height: 17.2%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
96 --mjj-frame-menu-inline: 73.4%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
97 --mjj-frame-menu-block: 72%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
98 --mjj-frame-menu-width: 23.4%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
99 --mjj-frame-menu-height: 17.2%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
100 --mjj-frame-brand-inline: 5.4%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
101 --mjj-frame-brand-block: 2.2%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
102 --mjj-frame-brand-width: 7.8%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
103 --mjj-frame-brand-height: 5.2%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
104 --mjj-frame-controls-inline: 86.6%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
105 --mjj-frame-controls-block: 3.4%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
106 --mjj-frame-controls-width: 11.5%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
107 --mjj-frame-controls-height: 10%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
108 --mjj-frame-controls-gap: 7%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
109 --mjj-frame-telemetry-inline: 8.5%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
110 --mjj-frame-telemetry-block: 92.8%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
111 --mjj-frame-telemetry-width: 75%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
112 --mjj-frame-telemetry-height: 4.8%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
113 --mjj-frame-temp-value-inline: 12%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
114 --mjj-frame-user-value-inline: 32.5%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
115 --mjj-frame-status-value-inline: 60.5%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
116 --mjj-frame-uptime-value-inline: 88%; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
117 --mjj-frame-dog-bar-block-end: 0%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
118 --mjj-frame-dog-bar-height: 100%; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
119 box-sizing: border-box; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
120 display: grid; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
121 place-items: center; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
122 width: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
123 max-width: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
124 height: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
125 margin: 0; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
126 padding: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
127 border: 0; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
128 background: var(--mjj-jrpg-canvas); |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
129 box-shadow: none; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
130 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
131 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
132 .jrpg-workspace { |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
133 position: relative; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
134 display: block; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
135 width: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
136 height: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
137 max-height: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
138 aspect-ratio: auto; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
139 min-height: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
140 background-image: var(--mjj-jrpg-frame-art); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
141 background-position: center; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
142 background-repeat: no-repeat; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
143 background-size: 100% 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
144 image-rendering: pixelated; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
145 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
146 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
147 .jrpg-workspace > .jrpg-brand { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
148 position: absolute; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
149 z-index: 4; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
150 inset: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
151 var(--mjj-frame-brand-block) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
152 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
153 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
154 var(--mjj-frame-brand-inline); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
155 display: grid; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
156 place-items: center; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
157 width: var(--mjj-frame-brand-width); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
158 height: var(--mjj-frame-brand-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
159 margin: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
160 padding: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
161 border: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
162 background: var(--mjj-jrpg-canvas); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
163 box-shadow: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
164 text-align: center; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
165 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
166 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
167 .jrpg-workspace > .jrpg-brand header { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
168 position: relative; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
169 z-index: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
170 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
171 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
172 .jrpg-frame-controls { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
173 position: absolute; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
174 z-index: 5; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
175 inset: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
176 var(--mjj-frame-controls-block) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
177 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
178 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
179 var(--mjj-frame-controls-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
180 display: grid; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
181 grid-template-columns: repeat(3, minmax(0, 1fr)); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
182 gap: var(--mjj-frame-controls-gap); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
183 width: var(--mjj-frame-controls-width); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
184 height: var(--mjj-frame-controls-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
185 margin: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
186 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
187 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
188 .jrpg-frame-controls zen-button, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
189 .jrpg-frame-controls :where(button, a) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
190 width: 100%; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
191 height: 100%; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
192 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
193 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
194 .jrpg-frame-controls :where(button, a) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
195 padding: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
196 border: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
197 border-radius: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
198 background: transparent; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
199 color: transparent; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
200 cursor: pointer; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
201 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
202 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
203 .jrpg-frame-controls zen-icon { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
204 opacity: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
205 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
206 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
207 .jrpg-frame-telemetry { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
208 position: absolute; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
209 z-index: 4; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
210 inset: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
211 var(--mjj-frame-telemetry-block) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
212 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
213 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
214 var(--mjj-frame-telemetry-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
215 display: block; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
216 width: var(--mjj-frame-telemetry-width); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
217 height: var(--mjj-frame-telemetry-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
218 margin: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
219 padding: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
220 color: var(--mjj-jrpg-primary); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
221 font-size: clamp( |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
222 var(--zenbu-sys-font-size-xs), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
223 1vw, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
224 var(--zenbu-sys-font-size-sm) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
225 ); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
226 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
227 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
228 .jrpg-frame-telemetry > * { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
229 position: absolute; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
230 top: 50%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
231 padding-inline: var(--zenbu-sys-padding-md); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
232 background: var(--mjj-jrpg-canvas); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
233 transform: translate(-50%, -50%); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
234 white-space: nowrap; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
235 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
236 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
237 .jrpg-frame-telemetry > :nth-child(1) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
238 left: var(--mjj-frame-temp-value-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
239 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
240 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
241 .jrpg-frame-telemetry > :nth-child(2) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
242 left: var(--mjj-frame-user-value-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
243 padding-inline: var(--zenbu-sys-padding-xl); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
244 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
245 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
246 .jrpg-frame-telemetry > :nth-child(3) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
247 left: var(--mjj-frame-status-value-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
248 padding-inline: var(--zenbu-sys-padding-xl); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
249 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
250 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
251 .jrpg-frame-telemetry > :nth-child(4) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
252 left: var(--mjj-frame-uptime-value-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
253 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
254 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
255 .jrpg-frame-telemetry [data-frame-network][data-state="offline"] { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
256 color: var(--mjj-jrpg-accent); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
257 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
258 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
259 .jrpg-frame-controls :where(button, a):focus-visible { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
260 outline-color: var(--mjj-jrpg-focus); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
261 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
262 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
263 .jrpg-shell[data-minimized="true"] .jrpg-workspace > :is( |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
264 .jrpg-scene, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
265 .jrpg-utility, |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
266 mjj-composer, |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
267 mjj-jrpg-menu |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
268 ) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
269 visibility: hidden; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
270 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
271 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
272 .jrpg-workspace > .jrpg-scene, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
273 .jrpg-workspace > .jrpg-utility, |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
274 .jrpg-workspace > mjj-composer, |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
275 .jrpg-workspace > mjj-jrpg-menu { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
276 position: absolute; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
277 margin: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
278 border: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
279 border-radius: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
280 box-shadow: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
281 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
282 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
283 .jrpg-workspace > .jrpg-scene { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
284 inset: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
285 var(--mjj-frame-scene-block) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
286 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
287 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
288 var(--mjj-frame-scene-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
289 width: var(--mjj-frame-scene-width); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
290 height: var(--mjj-frame-scene-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
291 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
292 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
293 .jrpg-workspace > .jrpg-utility { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
294 inset: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
295 var(--mjj-frame-utility-block) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
296 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
297 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
298 var(--mjj-frame-utility-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
299 width: var(--mjj-frame-utility-width); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
300 height: var(--mjj-frame-utility-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
301 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
302 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
303 .jrpg-workspace > mjj-composer { |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
304 inset: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
305 var(--mjj-frame-composer-block) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
306 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
307 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
308 var(--mjj-frame-composer-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
309 width: var(--mjj-frame-composer-width); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
310 height: var(--mjj-frame-composer-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
311 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
312 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
313 .jrpg-workspace > mjj-jrpg-menu { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
314 inset: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
315 var(--mjj-frame-menu-block) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
316 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
317 auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
318 var(--mjj-frame-menu-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
319 width: var(--mjj-frame-menu-width); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
320 height: var(--mjj-frame-menu-height); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
321 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
322 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
323 .jrpg-scene, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
324 .jrpg-utility, |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
325 mjj-composer, |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
326 mjj-jrpg-menu, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
327 .jrpg-preview-panel { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
328 box-sizing: border-box; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
329 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
330 border-radius: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
331 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
332 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
333 .jrpg-scene { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
334 grid-area: scene; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
335 position: relative; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
336 display: grid; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
337 grid-template-columns: minmax(5rem, 0.38fr) minmax(0, 0.92fr); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
338 align-items: end; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
339 gap: var(--zenbu-sys-space-control); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
340 min-height: 0; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
341 padding: var(--zenbu-sys-padding-md); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
342 overflow: hidden; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
343 background-image: |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
344 linear-gradient( |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
345 to top, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
346 color-mix( |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
347 in srgb, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
348 var(--mjj-jrpg-canvas) 56%, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
349 transparent |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
350 ), |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
351 transparent 55% |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
352 ), |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
353 var(--mjj-jrpg-art); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
354 background-position: center; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
355 background-size: cover; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
356 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
357 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
358 .jrpg-scene::before { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
359 position: absolute; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
360 z-index: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
361 inset: auto 0 var(--mjj-frame-dog-bar-block-end); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
362 height: var(--mjj-frame-dog-bar-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
363 background-image: var(--mjj-jrpg-art); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
364 background-position: center; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
365 background-repeat: no-repeat; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
366 background-size: cover; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
367 content: ""; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
368 image-rendering: pixelated; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
369 pointer-events: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
370 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
371 |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
372 mjj-jrpg-character { |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
373 position: relative; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
374 z-index: 2; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
375 display: block; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
376 align-self: end; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
377 min-width: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
378 filter: drop-shadow( |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
379 var(--zenbu-sys-space-related) |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
380 var(--zenbu-sys-space-related) |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
381 0 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
382 color-mix(in srgb, var(--mjj-jrpg-frame) 35%, transparent) |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
383 ); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
384 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
385 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
386 mjj-jrpg-character img { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
387 display: block; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
388 width: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
389 max-height: 25rem; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
390 object-fit: contain; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
391 object-position: center bottom; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
392 border-radius: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
393 animation: mjj-jrpg-idle 2.4s steps(2, end) infinite; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
394 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
395 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
396 mjj-jrpg-character[state="thinking"] img { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
397 animation-duration: 0.8s; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
398 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
399 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
400 @keyframes mjj-jrpg-idle { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
401 50% { transform: translateY(calc(var(--zenbu-sys-space-related) * -1)); } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
402 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
403 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
404 mjj-jrpg-chat { |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
405 box-sizing: border-box; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
406 position: relative; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
407 z-index: 1; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
408 display: grid; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
409 grid-template-rows: minmax(0, 1fr) auto; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
410 align-self: stretch; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
411 min-height: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
412 padding: var(--zenbu-sys-padding-md); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
413 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
414 background: var(--mjj-jrpg-panel-strong); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
415 box-shadow: |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
416 inset 0 0 0 var(--zenbu-sys-stroke-width) |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
417 var(--mjj-jrpg-info); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
418 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
419 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
420 .jrpg-menu-label, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
421 .jrpg-brand > p, |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
422 .jrpg-dialog-heading p { |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
423 color: var(--mjj-jrpg-text-muted); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
424 font-size: var(--zenbu-sys-font-size-xs); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
425 letter-spacing: 0.08em; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
426 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
427 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
428 zen-message-scroller { |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
429 display: block; |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
430 overflow: hidden; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
431 min-height: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
432 height: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
433 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
434 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
435 zen-message-scroller > .jrpg-message-viewport { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
436 box-sizing: border-box; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
437 height: 100%; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
438 min-height: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
439 max-height: none; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
440 overflow-y: auto; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
441 overflow-anchor: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
442 overscroll-behavior: contain; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
443 scrollbar-color: var(--mjj-jrpg-frame) transparent; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
444 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
445 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
446 .jrpg-messages { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
447 display: grid; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
448 gap: var(--zenbu-sys-space-group); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
449 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
450 padding: var(--zenbu-sys-padding-md) 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
451 list-style: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
452 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
453 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
454 .jrpg-message { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
455 display: grid; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
456 grid-template-columns: minmax(4rem, auto) minmax(0, 1fr); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
457 gap: var(--zenbu-sys-space-control); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
458 padding-left: var(--zenbu-sys-padding-sm); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
459 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
460 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
461 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
462 .jrpg-message-speaker { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
463 display: flex; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
464 align-items: center; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
465 gap: var(--zenbu-sys-space-icon-label); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
466 align-self: start; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
467 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
468 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
469 .jrpg-message-avatar { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
470 width: var(--zenbu-sys-control-height-sm); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
471 height: var(--zenbu-sys-control-height-sm); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
472 flex: none; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
473 object-fit: contain; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
474 image-rendering: pixelated; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
475 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
476 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
477 .jrpg-message[hidden] { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
478 display: none; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
479 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
480 |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
481 .jrpg-message[data-speaker="June"] { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
482 border-left-color: var(--mjj-jrpg-info); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
483 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
484 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
485 .jrpg-message strong { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
486 color: var(--mjj-jrpg-highlight); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
487 font-weight: var(--zenbu-sys-font-weight-bold); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
488 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
489 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
490 .jrpg-message p { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
491 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
492 color: var(--mjj-jrpg-text); |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
493 white-space: pre-wrap; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
494 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
495 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
496 .jrpg-message[data-streaming="true"] p::after { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
497 display: inline-block; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
498 width: 0.65em; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
499 height: 1em; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
500 margin-left: var(--zenbu-sys-space-icon-label); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
501 background: currentColor; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
502 content: ""; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
503 vertical-align: -0.12em; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
504 animation: mjj-jrpg-cursor |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
505 calc(var(--zenbu-sys-motion-duration-layout) * 2) |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
506 steps(1, end) |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
507 infinite; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
508 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
509 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
510 @keyframes mjj-jrpg-cursor { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
511 50% { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
512 opacity: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
513 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
514 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
515 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
516 @media (prefers-reduced-motion: reduce) { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
517 .jrpg-message[data-streaming="true"] p::after { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
518 animation: none; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
519 } |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
520 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
521 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
522 .jrpg-turn-navigation { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
523 display: grid; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
524 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
525 align-items: center; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
526 gap: var(--zenbu-sys-space-icon-label); |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
527 padding-top: var(--zenbu-sys-padding-sm); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
528 border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
529 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
530 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
531 .jrpg-turn-navigation zen-button:first-child button { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
532 justify-content: flex-start; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
533 padding-inline-start: var(--zenbu-sys-padding-md); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
534 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
535 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
536 .jrpg-turn-navigation zen-button:last-child button { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
537 justify-content: flex-end; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
538 padding-inline-end: var(--zenbu-sys-padding-md); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
539 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
540 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
541 .jrpg-turn-navigation zen-button, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
542 .jrpg-turn-navigation button { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
543 width: 100%; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
544 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
545 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
546 .jrpg-turn-navigation button { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
547 justify-content: center; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
548 border: var(--zenbu-sys-stroke-width) solid transparent; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
549 border-radius: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
550 background: transparent; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
551 color: var(--mjj-jrpg-primary); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
552 font-size: var(--zenbu-sys-font-size-xs); |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
553 cursor: pointer; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
554 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
555 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
556 .jrpg-turn-navigation button:hover:not(:disabled) { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
557 border-color: var(--mjj-jrpg-primary); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
558 background: var(--mjj-jrpg-surface-raised); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
559 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
560 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
561 .jrpg-turn-navigation button:disabled { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
562 color: var(--mjj-jrpg-text-muted); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
563 cursor: not-allowed; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
564 opacity: var(--zenbu-sys-opacity-disabled); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
565 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
566 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
567 .jrpg-turn-navigation [data-turn-position] { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
568 justify-self: center; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
569 color: var(--mjj-jrpg-text-muted); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
570 font-size: var(--zenbu-sys-font-size-xs); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
571 letter-spacing: 0.08em; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
572 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
573 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
574 .jrpg-utility { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
575 grid-area: utility; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
576 display: grid; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
577 grid-template-rows: minmax(0, 1fr); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
578 gap: 0; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
579 padding: var(--zenbu-sys-padding-md); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
580 background: var(--mjj-jrpg-surface); |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
581 overflow: hidden; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
582 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
583 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
584 .jrpg-utility > mjj-jrpg-preview { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
585 box-sizing: border-box; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
586 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
587 height: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
588 min-height: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
589 min-width: 0; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
590 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
591 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
592 .jrpg-brand { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
593 display: flex; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
594 align-items: end; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
595 justify-content: space-between; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
596 gap: var(--zenbu-sys-space-control); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
597 padding: 0 var(--zenbu-sys-padding-sm) var(--zenbu-sys-padding-sm); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
598 border-bottom: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
599 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
600 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
601 body.jrpg-page .jrpg-brand header { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
602 width: auto; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
603 max-width: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
604 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
605 padding: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
606 text-align: left; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
607 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
608 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
609 body.jrpg-page .jrpg-brand header h1 { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
610 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
611 color: var(--mjj-jrpg-primary); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
612 font-size: var(--zenbu-sys-font-size-2xl); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
613 letter-spacing: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
614 text-shadow: |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
615 var(--zenbu-sys-space-icon-label) |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
616 var(--zenbu-sys-space-icon-label) |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
617 0 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
618 var(--mjj-jrpg-accent); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
619 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
620 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
621 .jrpg-brand > p { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
622 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
623 color: var(--mjj-jrpg-highlight); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
624 text-align: right; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
625 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
626 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
627 mjj-jrpg-preview { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
628 display: block; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
629 min-height: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
630 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
631 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
632 .jrpg-workspace > .jrpg-brand header h1 { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
633 font-size: clamp( |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
634 var(--zenbu-sys-font-size-xs), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
635 0.95vw, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
636 var(--zenbu-sys-font-size-sm) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
637 ); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
638 line-height: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
639 white-space: nowrap; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
640 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
641 |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
642 .jrpg-preview-panel { |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
643 display: block; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
644 height: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
645 padding: var(--zenbu-sys-padding-lg); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
646 background: |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
647 linear-gradient( |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
648 135deg, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
649 var(--mjj-jrpg-surface-raised), |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
650 var(--mjj-jrpg-surface) |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
651 ); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
652 box-shadow: |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
653 inset 0 0 0 var(--zenbu-sys-stroke-width) |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
654 var(--mjj-jrpg-accent); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
655 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
656 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
657 .jrpg-preview-panel > :is(.jrpg-preview-content, mjj-conversation-archive) { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
658 box-sizing: border-box; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
659 width: 100%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
660 height: 100%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
661 min-width: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
662 min-height: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
663 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
664 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
665 .jrpg-preview-content { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
666 display: grid; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
667 grid-template-rows: auto auto minmax(0, 1fr) auto; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
668 gap: var(--zenbu-sys-space-group); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
669 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
670 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
671 .jrpg-preview-content[hidden] { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
672 display: none; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
673 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
674 |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
675 .jrpg-preview-panel h2, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
676 .jrpg-preview-panel p { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
677 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
678 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
679 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
680 .jrpg-preview-panel h2 { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
681 color: var(--mjj-jrpg-primary); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
682 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
683 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
684 .jrpg-preview-content > p { |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
685 color: var(--mjj-jrpg-text); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
686 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
687 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
688 .jrpg-work-showcase { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
689 display: grid; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
690 grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
691 align-content: start; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
692 gap: var(--zenbu-sys-space-control); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
693 min-height: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
694 margin: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
695 padding: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
696 overflow-y: auto; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
697 list-style: none; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
698 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
699 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
700 .jrpg-work-showcase a { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
701 display: grid; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
702 gap: var(--zenbu-sys-space-icon-label); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
703 height: 100%; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
704 padding: var(--zenbu-sys-padding-sm); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
705 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
706 background: var(--mjj-jrpg-panel); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
707 color: var(--mjj-jrpg-primary); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
708 text-decoration: none; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
709 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
710 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
711 .jrpg-work-showcase a:hover, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
712 .jrpg-work-showcase a:focus-visible { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
713 border-color: var(--mjj-jrpg-accent); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
714 background: var(--mjj-jrpg-surface-raised); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
715 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
716 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
717 .jrpg-work-showcase small { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
718 color: var(--mjj-jrpg-text-muted); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
719 font-size: var(--zenbu-sys-font-size-xs); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
720 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
721 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
722 .jrpg-work-showcase a:has(> zen-icon) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
723 grid-template-columns: auto minmax(0, 1fr); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
724 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
725 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
726 .jrpg-work-showcase a > zen-icon { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
727 grid-row: 1 / 3; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
728 align-self: center; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
729 color: var(--mjj-jrpg-highlight); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
730 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
731 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
732 .jrpg-preview-dialog > zen-button > button, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
733 .jrpg-preview-dialog dialog zen-button > :where(button, a) { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
734 width: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
735 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
736 border-radius: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
737 background: var(--mjj-jrpg-primary); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
738 color: var(--mjj-jrpg-primary-foreground); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
739 cursor: pointer; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
740 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
741 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
742 .jrpg-preview-dialog > zen-button > button:hover, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
743 .jrpg-preview-dialog dialog zen-button > :where(button, a):hover { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
744 border-color: var(--mjj-jrpg-primary-hover); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
745 background: var(--mjj-jrpg-primary-hover); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
746 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
747 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
748 .jrpg-preview-dialog dialog { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
749 box-sizing: border-box; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
750 width: min(82vw, 46rem); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
751 max-width: calc(100% - var(--zenbu-sys-space-content)); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
752 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
753 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
754 .jrpg-dialog-heading { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
755 display: flex; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
756 align-items: center; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
757 justify-content: space-between; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
758 gap: var(--zenbu-sys-space-group); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
759 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
760 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
761 .jrpg-dialog-heading p, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
762 .jrpg-preview-dialog dialog > p { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
763 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
764 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
765 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
766 .jrpg-dialog-heading zen-button { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
767 width: auto; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
768 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
769 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
770 .jrpg-dialog-heading-actions { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
771 display: flex; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
772 align-items: center; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
773 gap: var(--zenbu-sys-space-control); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
774 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
775 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
776 .jrpg-dialog-heading zen-button > :where(button, a) { |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
777 box-sizing: border-box; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
778 width: auto; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
779 min-width: var(--zenbu-control-height); |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
780 height: var(--zenbu-control-height); |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
781 padding: |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
782 var(--zenbu-control-padding-block) |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
783 var(--zenbu-control-padding-inline); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
784 border-color: var(--mjj-jrpg-accent); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
785 background: var(--mjj-jrpg-surface); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
786 color: var(--mjj-jrpg-text); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
787 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
788 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
789 .jrpg-dialog-heading zen-button > button { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
790 width: var(--zenbu-control-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
791 padding: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
792 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
793 |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
794 .jrpg-preview-dialog dialog.jrpg-detail-dialog { |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
795 width: min(92vw, 60rem); |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
796 max-height: calc(100dvh - var(--zenbu-sys-space-container)); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
797 overflow: hidden; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
798 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
799 |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
800 .jrpg-preview-dialog dialog.jrpg-detail-dialog[open] { |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
801 display: grid; |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
802 grid-template-rows: auto minmax(0, 1fr) auto; |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
803 gap: var(--zenbu-sys-space-group); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
804 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
805 |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
806 mjj-window-modal .jrpg-detail-content { |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
807 box-sizing: border-box; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
808 height: 100%; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
809 min-height: 0; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
810 padding: var(--zenbu-sys-padding-lg); |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
811 } |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
812 |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
813 mjj-content-modal .jrpg-detail-content { |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
814 padding: var(--zenbu-sys-padding-lg); |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
815 } |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
816 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
817 .jrpg-preview-dialog dialog.jrpg-detail-dialog[data-detail-mode="tools"] { |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
818 width: min(90vw, 56rem); |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
819 height: min(78dvh, 44rem); |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
820 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
821 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
822 .jrpg-detail-dialog[data-detail-mode="tools"] > h2 { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
823 display: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
824 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
825 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
826 .jrpg-detail-dialog[data-detail-mode="tools"] .jrpg-dialog-heading { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
827 padding: var(--zenbu-sys-padding-sm); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
828 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
829 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
830 .jrpg-resume-dossier { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
831 min-height: 0; |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
832 padding: 0; |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
833 overflow: auto; |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
834 border: 0; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
835 background: transparent; |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
836 scrollbar-color: var(--mjj-jrpg-frame) transparent; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
837 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
838 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
839 .jrpg-resume-dossier[hidden], |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
840 .jrpg-blog-browser[hidden], |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
841 .jrpg-tool-browser[hidden], |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
842 [data-dialog-trigger-owner][hidden], |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
843 [data-dialog-copy][hidden], |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
844 [data-blog-status][hidden], |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
845 [data-tool-status][hidden], |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
846 [data-resume-status][hidden], |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
847 [data-dialog-actions][hidden], |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
848 [data-resume-download][hidden] { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
849 display: none; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
850 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
851 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
852 .jrpg-resume-dossier [data-resume-status] { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
853 margin: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
854 color: var(--mjj-jrpg-highlight); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
855 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
856 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
857 .jrpg-resume-dossier [data-resume-content] { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
858 display: grid; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
859 gap: var(--zenbu-sys-space-group); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
860 color: var(--mjj-jrpg-text); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
861 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
862 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
863 .jrpg-resume-dossier :where(p, ul) { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
864 margin-block: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
865 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
866 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
867 .jrpg-resume-dossier .info { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
868 display: grid; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
869 gap: var(--zenbu-sys-space-control); |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
870 padding: 0 0 var(--zenbu-sys-padding-lg); |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
871 border: 0; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
872 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
873 background: transparent; |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
874 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
875 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
876 .jrpg-resume-dossier .info > p { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
877 color: var(--mjj-jrpg-primary); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
878 font-size: var(--zenbu-sys-font-size-xl); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
879 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
880 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
881 .jrpg-resume-dossier .header-address-style, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
882 .jrpg-resume-dossier .header-social-style { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
883 display: flex; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
884 flex-wrap: wrap; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
885 gap: var(--zenbu-sys-space-control); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
886 color: var(--mjj-jrpg-text-muted); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
887 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
888 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
889 .jrpg-resume-dossier .sub-header { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
890 display: grid; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
891 grid-template-columns: auto minmax(0, 1fr); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
892 align-items: center; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
893 gap: var(--zenbu-sys-space-control); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
894 margin-top: var(--zenbu-sys-space-content); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
895 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
896 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
897 .jrpg-resume-dossier .sub-header h2 { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
898 margin: 0; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
899 color: var(--mjj-jrpg-highlight); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
900 font-size: var(--zenbu-sys-font-size-lg); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
901 text-transform: uppercase; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
902 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
903 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
904 .jrpg-resume-dossier .sub-header .line { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
905 height: var(--zenbu-sys-stroke-width-emphasis); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
906 background: var(--mjj-jrpg-accent); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
907 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
908 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
909 .jrpg-resume-dossier .flex-box { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
910 display: flex; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
911 align-items: baseline; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
912 justify-content: space-between; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
913 gap: var(--zenbu-sys-space-control); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
914 padding-top: var(--zenbu-sys-padding-sm); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
915 border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
916 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
917 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
918 .jrpg-resume-dossier .entry-title-style, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
919 .jrpg-resume-dossier .entry-position-style { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
920 color: var(--mjj-jrpg-primary); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
921 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
922 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
923 .jrpg-resume-dossier .entry-location-style, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
924 .jrpg-resume-dossier .entry-date-style, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
925 .jrpg-resume-dossier .skill-type-style { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
926 color: var(--mjj-jrpg-text-muted); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
927 text-align: right; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
928 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
929 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
930 .jrpg-resume-dossier .description-style { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
931 display: grid; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
932 gap: var(--zenbu-sys-space-control); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
933 padding-left: var(--zenbu-sys-padding-xl); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
934 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
935 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
936 .jrpg-resume-dossier a { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
937 color: var(--mjj-jrpg-primary); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
938 text-decoration-color: var(--mjj-jrpg-accent); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
939 text-underline-offset: var(--zenbu-sys-space-icon-label); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
940 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
941 |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
942 .jrpg-resume-dossier a[href="/public/resume.pdf"] { |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
943 display: none; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
944 } |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
945 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
946 .jrpg-dialog-actions { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
947 display: grid; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
948 grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
949 gap: var(--zenbu-sys-space-control); |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
950 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
951 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
952 :is(.jrpg-blog-browser, .jrpg-tool-browser) { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
953 display: grid; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
954 grid-template-columns: minmax(12rem, 0.35fr) minmax(0, 1fr); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
955 gap: var(--zenbu-sys-space-group); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
956 min-height: 0; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
957 overflow: hidden; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
958 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
959 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
960 :is(.jrpg-blog-browser, .jrpg-tool-browser) > aside, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
961 :is(.jrpg-blog-browser, .jrpg-tool-browser) > article { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
962 min-height: 0; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
963 padding: var(--zenbu-sys-padding-md); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
964 overflow: auto; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
965 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
966 background: var(--mjj-jrpg-surface-sunken); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
967 scrollbar-color: var(--mjj-jrpg-frame) transparent; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
968 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
969 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
970 .jrpg-tool-browser { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
971 display: block; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
972 height: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
973 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
974 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
975 .jrpg-tool-browser > article { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
976 height: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
977 padding: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
978 overflow: hidden; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
979 border: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
980 background: transparent; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
981 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
982 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
983 .jrpg-tool-browser [data-tool-content], |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
984 .jrpg-functional-tool, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
985 .jrpg-tool-panes { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
986 height: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
987 min-height: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
988 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
989 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
990 :is(.jrpg-blog-browser, .jrpg-tool-browser) h3, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
991 .jrpg-blog-browser [data-blog-status], |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
992 .jrpg-tool-browser [data-tool-status] { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
993 margin-top: 0; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
994 color: var(--mjj-jrpg-highlight); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
995 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
996 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
997 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
998 :is([data-blog-list], [data-tool-list]) { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
999 display: grid; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1000 gap: var(--zenbu-sys-space-control); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1001 margin: 0; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1002 padding: 0; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1003 list-style: none; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1004 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1005 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1006 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1007 :is([data-blog-list], [data-tool-list]) zen-button, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1008 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1009 :is([data-blog-list], [data-tool-list]) button { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1010 width: 100%; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1011 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1012 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1013 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1014 :is([data-blog-list], [data-tool-list]) button { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1015 display: grid; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1016 justify-items: start; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1017 gap: var(--zenbu-sys-space-icon-label); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1018 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1019 border-radius: 0; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1020 background: var(--mjj-jrpg-panel); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1021 color: var(--mjj-jrpg-primary); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1022 text-align: left; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1023 cursor: pointer; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1024 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1025 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1026 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1027 :is([data-blog-list], [data-tool-list]) button:hover, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1028 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1029 :is([data-blog-list], [data-tool-list]) button[aria-pressed="true"] { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1030 border-color: var(--mjj-jrpg-accent); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1031 background: var(--mjj-jrpg-surface-raised); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1032 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1033 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1034 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1035 :is([data-blog-list], [data-tool-list]) small { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1036 color: var(--mjj-jrpg-text-muted); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1037 font-size: var(--zenbu-sys-font-size-xs); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1038 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1039 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1040 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1041 :is([data-blog-content], [data-tool-content]) { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1042 color: var(--mjj-jrpg-text); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1043 line-height: var(--zenbu-sys-line-height-lg); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1044 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1045 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1046 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1047 :is([data-blog-content], [data-tool-content]) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1048 :where(h1, h2, h3, h4) { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1049 color: var(--mjj-jrpg-primary); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1050 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1051 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1052 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1053 :is([data-blog-content], [data-tool-content]) a { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1054 color: var(--mjj-jrpg-primary); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1055 text-decoration-color: var(--mjj-jrpg-accent); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1056 text-underline-offset: var(--zenbu-sys-space-icon-label); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1057 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1058 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1059 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1060 :is([data-blog-content], [data-tool-content]) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1061 :where(img, video) { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1062 display: block; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1063 max-width: 100%; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1064 height: auto; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1065 margin-inline: auto; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1066 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1067 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1068 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1069 :is([data-blog-content], [data-tool-content]) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1070 :where(pre, blockquote) { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1071 max-width: 100%; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1072 padding: var(--zenbu-sys-padding-md); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1073 overflow: auto; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1074 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1075 background: var(--mjj-jrpg-panel); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1076 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1077 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1078 :is(.jrpg-blog-browser, .jrpg-tool-browser) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1079 :is([data-blog-content], [data-tool-content]) code { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1080 color: var(--mjj-jrpg-success); |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1081 white-space: pre-wrap; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1082 overflow-wrap: anywhere; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1083 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1084 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1085 .jrpg-tool-readonly-note { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1086 padding: var(--zenbu-sys-padding-sm); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1087 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-highlight); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1088 background: var(--mjj-jrpg-panel); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1089 color: var(--mjj-jrpg-highlight); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1090 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1091 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1092 .jrpg-functional-tool { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1093 min-height: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1094 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1095 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1096 .jrpg-functional-tool [hidden] { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1097 display: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1098 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1099 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1100 .jrpg-tool-panes { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1101 box-sizing: border-box; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1102 display: grid; |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
1103 grid-template-columns: minmax(0, 1fr); |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
1104 grid-template-rows: repeat(2, minmax(18rem, auto)); |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1105 gap: var(--zenbu-sys-space-control); |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
1106 height: auto; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1107 min-height: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1108 padding: var(--zenbu-sys-padding-sm); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1109 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1110 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1111 .jrpg-tool-panes::before { |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
1112 display: none; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1113 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1114 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1115 .jrpg-tool-window:first-of-type { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1116 grid-column: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1117 grid-row: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1118 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1119 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1120 .jrpg-tool-window:last-of-type { |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
1121 grid-column: 1; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
1122 grid-row: 2; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1123 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1124 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1125 .jrpg-tool-pane { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1126 display: grid; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1127 grid-template-rows: auto minmax(0, 1fr) auto; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1128 align-content: start; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1129 gap: var(--zenbu-sys-space-control); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1130 min-width: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1131 min-height: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1132 padding: var(--zenbu-sys-padding-md); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1133 overflow: auto; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1134 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1135 background: var(--mjj-jrpg-panel); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1136 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1137 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1138 .jrpg-tool-window { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1139 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-primary); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1140 box-shadow: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1141 inset 0 0 0 var(--zenbu-sys-stroke-width) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1142 var(--mjj-jrpg-info), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1143 0 0 0 var(--zenbu-sys-stroke-width-emphasis) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1144 var(--mjj-jrpg-accent), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1145 0 0 var(--zenbu-sys-space-control) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1146 color-mix(in srgb, var(--mjj-jrpg-info) 68%, transparent); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1147 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1148 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1149 .jrpg-tool-pane h2, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1150 .jrpg-tool-pane-heading { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1151 margin: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1152 color: var(--mjj-jrpg-primary); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1153 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1154 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1155 .jrpg-tool-pane h2 { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1156 display: flex; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1157 align-items: center; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1158 gap: var(--zenbu-sys-space-icon-label); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1159 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1160 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1161 .jrpg-tool-pane h2 zen-icon { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1162 color: var(--mjj-jrpg-highlight); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1163 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1164 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1165 .jrpg-tool-pane-heading { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1166 display: flex; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1167 align-items: baseline; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1168 justify-content: space-between; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1169 gap: var(--zenbu-sys-space-control); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1170 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1171 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1172 .jrpg-tool-pane-heading h2 { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1173 margin: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1174 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1175 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1176 .jrpg-functional-tool zen-field[appearance="plain"] { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1177 display: grid; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1178 grid-template-rows: auto minmax(0, 1fr); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1179 gap: var(--zenbu-sys-space-icon-label); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1180 min-height: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1181 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1182 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1183 .jrpg-functional-tool :where(input, textarea) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1184 box-sizing: border-box; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1185 width: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1186 min-height: var(--zenbu-control-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1187 padding: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1188 var(--zenbu-control-padding-block) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1189 var(--zenbu-control-padding-inline); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1190 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1191 border-radius: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1192 background: var(--mjj-jrpg-surface-sunken); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1193 color: var(--mjj-jrpg-text); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1194 font: inherit; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1195 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1196 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1197 .jrpg-functional-tool textarea { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1198 height: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1199 min-height: 22rem; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1200 resize: vertical; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1201 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1202 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1203 .jrpg-functional-tool zen-button > :where(button, a) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1204 width: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1205 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1206 border-radius: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1207 background: var(--mjj-jrpg-primary); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1208 color: var(--mjj-jrpg-primary-foreground); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1209 cursor: pointer; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1210 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1211 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1212 .jrpg-functional-tool zen-button > :where(button, a):hover { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1213 border-color: var(--mjj-jrpg-primary-hover); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1214 background: var(--mjj-jrpg-primary-hover); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1215 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1216 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1217 .jrpg-functional-tool button:disabled { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1218 opacity: var(--zenbu-sys-opacity-disabled); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1219 cursor: not-allowed; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1220 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1221 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1222 .jrpg-tool-actions { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1223 display: flex; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1224 gap: var(--zenbu-sys-space-control); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1225 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1226 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1227 .jrpg-tool-actions zen-button { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1228 flex: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1229 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1230 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1231 .jrpg-tool-status { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1232 margin-top: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1233 padding: var(--zenbu-sys-padding-sm); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1234 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-info); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1235 background: var(--mjj-jrpg-panel); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1236 color: var(--mjj-jrpg-text); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1237 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1238 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1239 .jrpg-tool-status[data-state="ready"] { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1240 border-left-color: var(--mjj-jrpg-success); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1241 color: var(--mjj-jrpg-success); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1242 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1243 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1244 .jrpg-tool-status[data-state="working"] { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1245 border-left-color: var(--mjj-jrpg-highlight); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1246 color: var(--mjj-jrpg-highlight); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1247 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1248 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1249 .jrpg-tool-status[data-state="error"] { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1250 border-left-color: var(--mjj-jrpg-accent); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1251 color: var(--mjj-jrpg-accent); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1252 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1253 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1254 .jrpg-markdown-output { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1255 min-height: 22rem; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1256 padding: var(--zenbu-sys-padding-md); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1257 overflow: auto; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1258 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1259 background: var(--mjj-jrpg-surface-sunken); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1260 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1261 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1262 .jrpg-markdown-output :where(h1, h2, h3) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1263 color: var(--mjj-jrpg-primary); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1264 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1265 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1266 .jrpg-markdown-output code { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1267 color: var(--mjj-jrpg-success); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1268 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1269 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1270 .jrpg-functional-tool :where(video, iframe) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1271 width: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1272 min-height: 22rem; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1273 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1274 background: var(--mjj-jrpg-canvas); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1275 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1276 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1277 .jrpg-tool-details { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1278 display: grid; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1279 grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1280 gap: var(--zenbu-sys-space-control); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1281 margin: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1282 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1283 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1284 .jrpg-tool-details div { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1285 padding: var(--zenbu-sys-padding-sm); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1286 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1287 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1288 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1289 .jrpg-tool-details dd { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1290 margin: var(--zenbu-sys-space-icon-label) 0 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1291 color: var(--mjj-jrpg-success); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1292 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1293 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1294 .jrpg-functional-tool [data-converter-download] { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1295 color: var(--mjj-jrpg-primary); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1296 text-decoration-color: var(--mjj-jrpg-accent); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1297 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1298 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1299 mjj-composer { |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1300 grid-area: composer; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1301 display: block; |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1302 min-height: 0; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1303 padding: var(--zenbu-sys-padding-md); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1304 background: var(--mjj-jrpg-surface); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1305 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1306 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1307 .jrpg-composer textarea::placeholder { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1308 color: var(--mjj-jrpg-text-muted); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1309 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1310 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1311 .jrpg-page :where(a, button, textarea):focus-visible { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1312 outline: var(--zenbu-sys-focus-width) solid var(--mjj-jrpg-focus); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1313 outline-offset: var(--zenbu-sys-focus-offset); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1314 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1315 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1316 mjj-jrpg-menu { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1317 grid-area: menu; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1318 display: block; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1319 padding: var(--zenbu-sys-padding-md); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1320 background: var(--mjj-jrpg-surface-sunken); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1321 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1322 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1323 mjj-jrpg-menu nav { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1324 display: grid; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1325 grid-template-columns: auto 1fr; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1326 align-items: center; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1327 gap: var(--zenbu-sys-space-group); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1328 height: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1329 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1330 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1331 .jrpg-menu-label { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1332 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1333 writing-mode: vertical-rl; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1334 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1335 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1336 mjj-jrpg-menu ul { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1337 display: grid; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1338 grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1339 gap: var(--zenbu-sys-space-control); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1340 margin: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1341 padding: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1342 list-style: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1343 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1344 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1345 mjj-jrpg-menu zen-button, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1346 mjj-jrpg-menu button { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1347 width: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1348 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1349 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1350 mjj-jrpg-menu button { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1351 justify-content: start; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1352 border: var(--zenbu-sys-stroke-width) solid transparent; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1353 border-radius: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1354 background: transparent; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1355 color: var(--mjj-jrpg-text); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1356 cursor: pointer; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1357 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1358 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1359 mjj-jrpg-menu button:hover { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1360 border-color: var(--mjj-jrpg-accent); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1361 color: var(--mjj-jrpg-primary-hover); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1362 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1363 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1364 mjj-jrpg-menu button[aria-pressed="true"] { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1365 border-color: var(--mjj-jrpg-frame); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1366 background: var(--mjj-jrpg-surface-raised); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1367 color: var(--mjj-jrpg-primary); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1368 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1369 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1370 mjj-jrpg-menu button zen-icon { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1371 opacity: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1372 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1373 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1374 mjj-jrpg-menu button[aria-pressed="true"] zen-icon { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1375 opacity: 1; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1376 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1377 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1378 .jrpg-workspace > :is( |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1379 .jrpg-scene, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1380 .jrpg-utility, |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1381 mjj-composer, |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1382 mjj-jrpg-menu |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1383 ), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1384 .jrpg-scene > mjj-jrpg-chat, |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1385 .jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel { |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1386 border: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1387 background-color: transparent; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1388 box-shadow: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1389 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1390 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1391 .jrpg-workspace > .jrpg-scene { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1392 background-image: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1393 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1394 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1395 .jrpg-workspace > mjj-composer, |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1396 .jrpg-workspace > mjj-jrpg-menu { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1397 padding: var(--zenbu-sys-padding-sm); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1398 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1399 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1400 .jrpg-workspace > mjj-composer textarea { |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1401 min-height: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1402 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1403 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1404 .jrpg-scene .jrpg-message, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1405 .jrpg-scene .jrpg-turn-navigation, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1406 .jrpg-brand, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1407 .jrpg-work-showcase a, |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1408 .jrpg-preview-content > .jrpg-preview-dialog > zen-button > button, |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1409 mjj-jrpg-menu nav button { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1410 border: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1411 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1412 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1413 @media |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1414 (max-width: 52rem), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1415 (max-height: 40rem), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1416 (min-aspect-ratio: 2 / 1) { |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1417 .jrpg-page { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1418 overflow-y: auto; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1419 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1420 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1421 .jrpg-main { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1422 height: auto; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1423 min-height: 100dvh; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1424 padding: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1425 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1426 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1427 .jrpg-shell { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1428 height: auto; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1429 min-height: 100dvh; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1430 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1431 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1432 .jrpg-workspace { |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1433 display: grid; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1434 grid-template: |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1435 "brand" auto |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1436 "scene" auto |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1437 "utility" auto |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1438 "menu" auto |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1439 "composer" auto |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1440 "telemetry" auto / |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1441 minmax(0, 1fr); |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1442 gap: var(--zenbu-sys-space-group); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1443 width: 100%; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1444 max-height: none; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1445 height: auto; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1446 aspect-ratio: auto; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1447 min-height: 0; |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1448 background-size: cover; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1449 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1450 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1451 .jrpg-workspace > .jrpg-scene, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1452 .jrpg-workspace > .jrpg-utility, |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1453 .jrpg-workspace > mjj-composer, |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1454 .jrpg-workspace > mjj-jrpg-menu, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1455 .jrpg-workspace > .jrpg-brand, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1456 .jrpg-workspace > .jrpg-frame-controls, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1457 .jrpg-workspace > .jrpg-frame-telemetry { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1458 position: relative; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1459 inset: auto; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1460 width: auto; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1461 height: auto; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1462 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1463 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1464 .jrpg-workspace > .jrpg-brand { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1465 grid-area: brand; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1466 justify-self: start; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1467 padding: var(--zenbu-sys-padding-sm); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1468 background: transparent; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1469 box-shadow: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1470 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1471 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1472 .jrpg-workspace > .jrpg-frame-controls { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1473 grid-area: brand; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1474 justify-self: end; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1475 align-self: center; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1476 display: flex; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1477 gap: var(--zenbu-sys-space-icon-label); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1478 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1479 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1480 .jrpg-frame-controls zen-button, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1481 .jrpg-frame-controls :where(button, a) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1482 width: var(--zenbu-control-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1483 height: var(--zenbu-control-height); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1484 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1485 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1486 .jrpg-frame-controls :where(button, a) { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1487 background: var(--mjj-jrpg-surface-raised); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1488 color: var(--mjj-jrpg-text); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1489 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1490 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1491 .jrpg-frame-controls zen-icon { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1492 opacity: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1493 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1494 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1495 .jrpg-workspace > .jrpg-frame-telemetry { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1496 grid-area: telemetry; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1497 display: grid; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1498 grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1499 gap: var(--zenbu-sys-space-control); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1500 padding: var(--zenbu-sys-padding-sm); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1501 background: var(--mjj-jrpg-surface-sunken); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1502 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1503 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1504 .jrpg-frame-telemetry > * { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1505 position: static; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1506 justify-self: start; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1507 background: transparent; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1508 transform: none; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1509 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1510 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1511 .jrpg-scene { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1512 min-height: 34rem; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1513 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1514 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1515 .jrpg-utility { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1516 min-height: 27rem; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1517 overflow: hidden; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1518 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1519 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1520 mjj-jrpg-menu nav { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1521 grid-template-columns: 1fr; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1522 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1523 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1524 .jrpg-menu-label { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1525 writing-mode: initial; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1526 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1527 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1528 mjj-jrpg-menu ul { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1529 grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1530 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1531 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1532 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1533 @media (max-width: 34rem) { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1534 .jrpg-main { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1535 padding: 0; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1536 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1537 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1538 .jrpg-scene { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1539 grid-template-columns: 1fr; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1540 grid-template-rows: minmax(12rem, 0.6fr) minmax(20rem, 1fr); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1541 min-height: 42rem; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1542 padding: var(--zenbu-sys-padding-md); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1543 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1544 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1545 mjj-jrpg-character { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1546 justify-self: center; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1547 width: min(15rem, 65%); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1548 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1549 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1550 mjj-jrpg-character img { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1551 max-height: 15rem; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1552 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1553 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1554 .jrpg-brand { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1555 align-items: center; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1556 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1557 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1558 .jrpg-composer { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1559 grid-template-columns: 1fr; |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1560 grid-template-rows: |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1561 minmax(calc(var(--zenbu-control-height) * 3), 1fr) |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1562 auto |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1563 auto; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1564 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1565 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1566 .jrpg-composer-actions { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1567 grid-column: 1; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1568 grid-row: 2; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1569 flex-direction: row; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1570 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1571 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1572 .jrpg-composer-hint { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1573 grid-row: 3; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1574 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1575 |
|
261
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1576 .jrpg-composer-actions zen-button { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1577 flex: 1; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1578 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1579 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1580 .jrpg-work-showcase, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1581 .jrpg-dialog-actions { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1582 grid-template-columns: 1fr; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1583 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1584 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1585 .jrpg-resume-dossier .flex-box { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1586 display: grid; |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1587 } |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1588 |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1589 .jrpg-resume-dossier .entry-location-style, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1590 .jrpg-resume-dossier .entry-date-style, |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1591 .jrpg-resume-dossier .skill-type-style { |
|
b401627fc49e
Add JRPG mock flows and interactive previews
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
260
diff
changeset
|
1592 text-align: left; |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1593 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1594 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1595 .jrpg-composer zen-button > button { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1596 width: 100%; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1597 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1598 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1599 :is(.jrpg-blog-browser, .jrpg-tool-browser) { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1600 grid-template-columns: 1fr; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1601 overflow: auto; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1602 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1603 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1604 :is(.jrpg-blog-browser, .jrpg-tool-browser) > aside { |
|
262
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1605 max-height: 16rem; |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1606 } |
|
0f45474c1b1a
Add cyberpunk JRPG blog browser
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
261
diff
changeset
|
1607 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1608 .jrpg-tool-panes { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1609 grid-template-columns: 1fr; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1610 grid-template-rows: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1611 minmax(24rem, auto) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1612 calc(var(--zenbu-sys-space-container) * 2) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1613 minmax(24rem, auto); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1614 overflow: auto; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1615 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1616 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1617 .jrpg-tool-panes::before { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1618 grid-column: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1619 grid-row: 2; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1620 background-image: |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1621 radial-gradient( |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1622 circle at var(--zenbu-sys-space-content) 50%, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1623 var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1624 var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1625 calc(var(--zenbu-sys-stroke-width-emphasis) * 2), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1626 transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1627 ), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1628 radial-gradient( |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1629 circle at calc(100% - var(--zenbu-sys-space-content)) 50%, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1630 var(--mjj-jrpg-highlight) 0 var(--zenbu-sys-stroke-width-emphasis), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1631 var(--mjj-jrpg-frame) var(--zenbu-sys-stroke-width-emphasis) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1632 calc(var(--zenbu-sys-stroke-width-emphasis) * 2), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1633 transparent calc(var(--zenbu-sys-stroke-width-emphasis) * 2) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1634 ), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1635 linear-gradient( |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1636 var(--mjj-jrpg-surface-sunken), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1637 var(--mjj-jrpg-surface-raised) 45%, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1638 var(--mjj-jrpg-frame) 50%, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1639 var(--mjj-jrpg-surface-raised) 55%, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1640 var(--mjj-jrpg-surface-sunken) |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1641 ), |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1642 var(--mjj-jrpg-art); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1643 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1644 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1645 .jrpg-tool-window:first-of-type { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1646 grid-column: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1647 grid-row: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1648 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1649 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1650 .jrpg-tool-window:last-of-type { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1651 grid-column: 1; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1652 grid-row: 3; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1653 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1654 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1655 .jrpg-tool-pane { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1656 min-height: 24rem; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1657 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1658 |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1659 mjj-jrpg-menu ul { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1660 grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1661 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1662 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1663 .jrpg-preview-dialog dialog { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1664 width: calc(100% - var(--zenbu-sys-space-group)); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1665 max-width: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1666 padding: var(--zenbu-sys-padding-lg); |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1667 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1668 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1669 |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1670 @media (prefers-reduced-motion: reduce) { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1671 mjj-jrpg-character img, |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1672 .jrpg-preview-dialog dialog[open] { |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1673 animation: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1674 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1675 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
1676 |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1677 .jrpg-page, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1678 .jrpg-page * { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1679 scrollbar-color: var(--mjj-jrpg-primary) transparent; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1680 scrollbar-width: thin; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1681 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1682 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1683 .jrpg-page::-webkit-scrollbar, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1684 .jrpg-page *::-webkit-scrollbar { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1685 width: var(--zenbu-sys-space-related); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1686 height: var(--zenbu-sys-space-related); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1687 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1688 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1689 .jrpg-page::-webkit-scrollbar-track, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1690 .jrpg-page *::-webkit-scrollbar-track { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1691 background: transparent; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1692 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1693 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1694 .jrpg-page::-webkit-scrollbar-thumb, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1695 .jrpg-page *::-webkit-scrollbar-thumb { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1696 border: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1697 border-radius: 0; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1698 background: var(--mjj-jrpg-primary); |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1699 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1700 |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1701 .jrpg-page::-webkit-scrollbar-button, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1702 .jrpg-page *::-webkit-scrollbar-button { |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1703 display: none; |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1704 } |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
1705 |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1706 /* ================================================================ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1707 Archive component — placed in utility panel (top-right) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1708 ================================================================ */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1709 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1710 mjj-jrpg-chat { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1711 grid-column: 2; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1712 grid-row: 1; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1713 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1714 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1715 mjj-conversation-archive { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1716 display: grid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1717 grid-template-rows: auto auto minmax(0, 1fr) auto auto; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1718 align-self: stretch; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1719 min-height: 0; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1720 padding: 0; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1721 overflow: hidden; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1722 background: transparent; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
1723 box-shadow: none; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1724 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1725 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1726 mjj-conversation-archive[hidden] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1727 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1728 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1729 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1730 .jrpg-archive-heading { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1731 display: flex; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1732 align-items: baseline; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1733 justify-content: space-between; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1734 gap: var(--zenbu-sys-space-group); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1735 padding-bottom: var(--zenbu-sys-padding-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1736 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1737 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1738 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1739 .jrpg-archive-heading h2 { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1740 margin: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1741 color: var(--mjj-jrpg-text); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1742 font-size: var(--zenbu-sys-font-size-lg); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1743 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1744 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1745 .jrpg-archive-heading zen-button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1746 flex-shrink: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1747 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1748 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1749 .jrpg-archive-heading zen-button > button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1750 border: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1751 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1752 background: transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1753 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1754 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1755 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1756 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1757 .jrpg-archive-actions { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1758 display: flex; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1759 gap: var(--zenbu-sys-space-control); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1760 padding-block: var(--zenbu-sys-padding-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1761 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1762 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1763 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1764 .jrpg-archive-actions zen-button, |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1765 .jrpg-archive-actions button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1766 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1767 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1768 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1769 .jrpg-archive-actions button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1770 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1771 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1772 background: var(--mjj-jrpg-panel); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1773 color: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1774 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1775 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1776 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1777 .jrpg-archive-actions button:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1778 border-color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1779 background: var(--mjj-jrpg-surface-raised); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1780 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1781 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1782 .jrpg-archive-list { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1783 display: grid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1784 align-content: start; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1785 gap: var(--zenbu-sys-space-icon-label); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1786 min-height: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1787 margin: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1788 padding: var(--zenbu-sys-padding-sm) 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1789 overflow-y: auto; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1790 list-style: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1791 scrollbar-color: var(--mjj-jrpg-frame) transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1792 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1793 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1794 .jrpg-archive-list [data-conv-item] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1795 display: grid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1796 grid-template-columns: minmax(0, 1fr) auto; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1797 align-items: center; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1798 gap: var(--zenbu-sys-space-icon-label); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1799 padding: var(--zenbu-sys-padding-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1800 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1801 background: var(--mjj-jrpg-panel); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1802 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1803 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1804 .jrpg-archive-list [data-conv-open] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1805 display: grid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1806 gap: 0.1em; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1807 min-width: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1808 border: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1809 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1810 background: transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1811 color: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1812 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1813 text-align: left; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1814 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1815 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1816 .jrpg-archive-list [data-conv-open][aria-current="true"] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1817 color: var(--mjj-jrpg-highlight); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1818 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1819 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1820 .jrpg-archive-list [data-conv-item]:has([data-conv-open][aria-current="true"]) { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1821 border-color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1822 background: var(--mjj-jrpg-surface-raised); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1823 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1824 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1825 .jrpg-archive-list [data-conv-item]:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1826 border-color: var(--mjj-jrpg-frame); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1827 background: var(--mjj-jrpg-surface-raised); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1828 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1829 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1830 .jrpg-archive-list [data-conv-title] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1831 overflow: hidden; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1832 white-space: nowrap; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1833 text-overflow: ellipsis; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1834 font-size: var(--zenbu-sys-font-size-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1835 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1836 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1837 .jrpg-archive-list [data-conv-meta] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1838 overflow: hidden; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1839 white-space: nowrap; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1840 text-overflow: ellipsis; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1841 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1842 font-size: var(--zenbu-sys-font-size-xs); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1843 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1844 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1845 .jrpg-archive-item-actions { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1846 display: flex; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1847 gap: var(--zenbu-sys-space-icon-label); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1848 flex-shrink: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1849 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1850 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1851 .jrpg-archive-item-actions button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1852 border: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1853 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1854 background: transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1855 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1856 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1857 font-size: var(--zenbu-sys-font-size-xs); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1858 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1859 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1860 .jrpg-archive-item-actions button:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1861 color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1862 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1863 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1864 [data-archive-load-more-owner] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1865 padding-block: var(--zenbu-sys-padding-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1866 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1867 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1868 [data-archive-load-more-owner][hidden] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1869 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1870 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1871 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1872 [data-archive-load-more-owner] > button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1873 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1874 border: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1875 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1876 background: var(--mjj-jrpg-panel); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1877 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1878 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1879 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1880 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1881 [data-archive-load-more-owner] > button:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1882 border-color: var(--mjj-jrpg-frame); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1883 color: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1884 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1885 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1886 .jrpg-archive-status { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1887 margin: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1888 padding: var(--zenbu-sys-padding-sm) 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1889 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1890 font-size: var(--zenbu-sys-font-size-xs); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1891 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1892 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1893 .jrpg-archive-status[hidden] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1894 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1895 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1896 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1897 .jrpg-archive-status[data-state="error"] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1898 color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1899 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1900 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1901 .jrpg-archive-status button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1902 border: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1903 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1904 background: transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1905 color: var(--mjj-jrpg-info); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1906 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1907 font-size: inherit; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1908 text-decoration: underline; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1909 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1910 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1911 /* Archive dialogs */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1912 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1913 .jrpg-archive-dialog { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1914 box-sizing: border-box; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1915 min-width: min(22rem, calc(100vw - var(--zenbu-sys-space-content))); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1916 max-width: min(26rem, calc(100vw - var(--zenbu-sys-space-content))); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1917 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1918 |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
1919 mjj-window-modal [data-archive-rename-dialog] { |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
1920 height: auto; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1921 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1922 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1923 .jrpg-archive-dialog-title { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1924 margin: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1925 color: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1926 font-size: var(--zenbu-sys-font-size-md); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1927 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1928 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1929 .jrpg-archive-dialog-subtitle { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1930 margin: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1931 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1932 font-size: var(--zenbu-sys-font-size-xs); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1933 overflow: hidden; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1934 white-space: nowrap; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1935 text-overflow: ellipsis; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1936 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1937 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1938 .jrpg-archive-dialog-actions { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1939 display: flex; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1940 justify-content: flex-end; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1941 gap: var(--zenbu-sys-space-control); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1942 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1943 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1944 .jrpg-archive-dialog zen-button > button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1945 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1946 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1947 background: var(--mjj-jrpg-surface); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1948 color: var(--mjj-jrpg-text); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1949 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1950 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1951 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1952 .jrpg-archive-dialog zen-button > button:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1953 border-color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1954 background: var(--mjj-jrpg-surface-raised); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1955 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1956 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1957 .jrpg-archive-dialog zen-field[appearance="plain"] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1958 display: grid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1959 gap: var(--zenbu-sys-space-icon-label); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1960 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1961 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1962 .jrpg-archive-dialog input { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1963 box-sizing: border-box; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1964 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1965 min-height: var(--zenbu-control-height); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1966 padding: |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1967 var(--zenbu-control-padding-block) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1968 var(--zenbu-control-padding-inline); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1969 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1970 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1971 background: var(--mjj-jrpg-surface-sunken); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1972 color: var(--mjj-jrpg-text); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1973 font: inherit; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1974 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1975 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1976 /* Account slot — telemetry child 2 */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1977 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1978 [data-frame-account] a, |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1979 [data-frame-account] button, |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1980 [data-frame-account] span[data-account-user] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1981 color: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1982 font-size: inherit; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1983 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1984 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1985 [data-frame-account] a { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1986 text-decoration: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1987 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1988 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1989 [data-frame-account] a:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1990 text-decoration: underline; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1991 text-decoration-color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1992 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1993 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1994 [data-frame-account] button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1995 border: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1996 background: transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1997 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1998 padding: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
1999 font: inherit; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2000 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2001 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2002 [data-frame-account] button:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2003 color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2004 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2005 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2006 /* Quota display in composer */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2007 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2008 .jrpg-composer-quota { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2009 grid-column: 1 / -1; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2010 margin: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2011 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2012 font-size: var(--zenbu-sys-font-size-xs); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2013 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2014 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2015 .jrpg-composer-quota[data-state="warning"] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2016 color: var(--mjj-jrpg-highlight); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2017 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2018 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2019 .jrpg-composer-quota[data-state="exhausted"] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2020 color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2021 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2022 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2023 .jrpg-composer-quota[hidden] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2024 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2025 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2026 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2027 /* Archive + chat grid in mobile single-column layout */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2028 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2029 @media (max-width: 34rem) { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2030 mjj-jrpg-chat, |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2031 mjj-conversation-archive { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2032 grid-column: 1; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2033 grid-row: 2; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2034 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2035 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2036 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2037 |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
2038 @media (forced-colors: active) { |
|
263
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
2039 .jrpg-workspace, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
2040 .jrpg-scene, |
|
ee04e4e69fed
Add functional JRPG frame and tools
MrJuneJune <mrjunejune@users.noreply.github.com>
parents:
262
diff
changeset
|
2041 .jrpg-scene::before { |
|
259
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
2042 background-image: none; |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
2043 } |
|
667156fcd3e3
Add dev-only cyberpunk JRPG page
MrJuneJune <me@mrjunejune.com>
parents:
diff
changeset
|
2044 } |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2045 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2046 /* ================================================================ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2047 Mobile hamburger button — hidden on desktop, used in portrait |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2048 ================================================================ */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2049 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2050 .jrpg-mobile-menu-btn { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2051 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2052 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2053 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2054 .jrpg-mobile-destination-owner { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2055 display: contents; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2056 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2057 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2058 .jrpg-page zen-button[hidden] { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2059 display: none; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2060 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2061 |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2062 /* ================================================================ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2063 Mobile portrait frame layout (≤52rem + portrait) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2064 Overrides the generic stacked grid from the 52rem breakpoint. |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2065 All geometry custom properties are centralised in .jrpg-shell. |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2066 ================================================================ */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2067 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2068 @media (max-width: 52rem) and (orientation: portrait) { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2069 .jrpg-shell { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2070 /* ── Aperture geometry: (inline=left%, block=top%, width%, height%) ── */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2071 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2072 /* Main conversation */ |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2073 --mjj-mobile-scene-inline: 4.8%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2074 --mjj-mobile-scene-block: 7.3%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2075 --mjj-mobile-scene-width: 90.4%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2076 --mjj-mobile-scene-height: 71.2%; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2077 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2078 /* Composer */ |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2079 --mjj-mobile-composer-inline: 4.8%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2080 --mjj-mobile-composer-block: 79.6%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2081 --mjj-mobile-composer-width: 90.4%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2082 --mjj-mobile-composer-height: 17.7%; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2083 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2084 /* Baked hamburger overlay */ |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2085 --mjj-mobile-hamburger-inline: 87.2%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2086 --mjj-mobile-hamburger-block: 1.3%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2087 --mjj-mobile-hamburger-width: 9.4%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2088 --mjj-mobile-hamburger-height: 5.3%; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2089 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2090 height: 100dvh; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2091 min-height: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2092 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2093 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2094 .jrpg-page { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2095 overflow: hidden; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2096 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2097 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2098 .jrpg-main { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2099 height: 100dvh; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2100 min-height: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2101 padding: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2102 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2103 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2104 /* Workspace: switch from stacked grid back to absolute-positioned frame */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2105 .jrpg-workspace { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2106 display: block; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2107 position: relative; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2108 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2109 height: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2110 min-height: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2111 overflow: hidden; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2112 background-image: url("/public/jrpg/background-frame-mobile.webp"); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2113 background-position: top left; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2114 background-size: 100% 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2115 background-repeat: no-repeat; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2116 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2117 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2118 /* Desktop window controls are irrelevant on mobile portrait */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2119 .jrpg-workspace > .jrpg-frame-controls { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2120 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2121 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2122 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2123 /* Restore absolute positioning for the two frame apertures */ |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2124 .jrpg-workspace > .jrpg-scene, |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2125 .jrpg-workspace > mjj-composer { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2126 position: absolute; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2127 width: auto; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2128 height: auto; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2129 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2130 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2131 /* Scene aperture */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2132 .jrpg-workspace > .jrpg-scene { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2133 inset: |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2134 var(--mjj-mobile-scene-block) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2135 auto |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2136 auto |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2137 var(--mjj-mobile-scene-inline); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2138 width: var(--mjj-mobile-scene-width); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2139 height: var(--mjj-mobile-scene-height); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2140 min-height: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2141 font-size: clamp( |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2142 var(--zenbu-sys-font-size-xs), |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2143 2.8vw, |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2144 var(--zenbu-sys-font-size-sm) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2145 ); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2146 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2147 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2148 /* Composer aperture */ |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2149 .jrpg-workspace > mjj-composer { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2150 inset: |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2151 var(--mjj-mobile-composer-block) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2152 auto |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2153 auto |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2154 var(--mjj-mobile-composer-inline); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2155 width: var(--mjj-mobile-composer-width); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2156 height: var(--mjj-mobile-composer-height); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2157 font-size: clamp( |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2158 var(--zenbu-sys-font-size-xs), |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2159 2.8vw, |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2160 var(--zenbu-sys-font-size-sm) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2161 ); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2162 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2163 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2164 .jrpg-workspace > :is(.jrpg-utility, mjj-jrpg-menu) { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2165 display: none; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2166 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2167 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2168 .jrpg-workspace > .jrpg-brand { |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2169 position: absolute; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2170 z-index: 4; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2171 inset: 1.3% auto auto 50%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2172 display: grid; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2173 place-items: center; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2174 width: max-content; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2175 max-width: 68%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2176 height: 5.3%; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2177 padding: 0; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2178 border: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2179 background: transparent; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2180 box-shadow: none; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2181 text-align: center; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2182 transform: translateX(-50%); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2183 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2184 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2185 body.jrpg-page .jrpg-brand header { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2186 width: 100%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2187 text-align: center; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2188 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2189 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2190 body.jrpg-page .jrpg-brand header h1 { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2191 font-size: var(--zenbu-sys-font-size-sm); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2192 text-shadow: none; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2193 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2194 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2195 /* Hamburger button: transparent overlay over baked art */ |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
2196 .jrpg-mobile-destination-owner > zen-dialog > .jrpg-mobile-menu-btn { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2197 display: grid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2198 place-items: center; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2199 position: absolute; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2200 z-index: 5; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2201 inset: |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2202 var(--mjj-mobile-hamburger-block) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2203 auto |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2204 auto |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2205 var(--mjj-mobile-hamburger-inline); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2206 width: var(--mjj-mobile-hamburger-width); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2207 height: var(--mjj-mobile-hamburger-height); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2208 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2209 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2210 .jrpg-mobile-menu-btn > button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2211 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2212 height: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2213 padding: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2214 border: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2215 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2216 background: transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2217 color: transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2218 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2219 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2220 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2221 .jrpg-mobile-menu-btn zen-icon { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2222 opacity: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2223 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2224 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2225 .jrpg-mobile-menu-btn > button:focus-visible { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2226 outline-color: var(--mjj-jrpg-focus); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2227 outline-style: solid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2228 outline-width: 2px; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2229 outline-offset: 2px; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2230 color: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2231 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2232 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2233 .jrpg-mobile-menu-btn > button:focus-visible zen-icon { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2234 opacity: 0.5; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2235 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2236 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2237 .jrpg-workspace > .jrpg-frame-telemetry { |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2238 display: none; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2239 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2240 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2241 .jrpg-mobile-destination-dialog { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2242 box-sizing: border-box; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2243 width: calc(100% - var(--zenbu-sys-space-content)); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2244 max-width: 42rem; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2245 height: min(88dvh, 48rem); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2246 max-height: calc(100dvh - var(--zenbu-sys-space-content)); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2247 margin: auto; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2248 padding: var(--zenbu-sys-padding-md); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2249 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2250 border-radius: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2251 background: var(--mjj-jrpg-surface); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2252 color: var(--mjj-jrpg-text); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2253 box-shadow: |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2254 inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent), |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2255 var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2256 var(--mjj-jrpg-accent); |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2257 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2258 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2259 .jrpg-mobile-destination-dialog[open] { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2260 display: grid; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2261 grid-template-rows: auto minmax(0, 1fr); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2262 gap: var(--zenbu-sys-space-group); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2263 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2264 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2265 .jrpg-mobile-destination-dialog::backdrop { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2266 background: color-mix(in srgb, var(--mjj-jrpg-canvas) 82%, transparent); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2267 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2268 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2269 .jrpg-mobile-destination-header { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2270 display: grid; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2271 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2272 align-items: center; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2273 gap: var(--zenbu-sys-space-control); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2274 padding-bottom: var(--zenbu-sys-padding-sm); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2275 border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2276 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2277 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2278 .jrpg-mobile-destination-header h2 { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2279 margin: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2280 color: var(--mjj-jrpg-primary); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2281 font-size: var(--zenbu-sys-font-size-lg); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2282 text-align: center; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2283 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2284 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2285 .jrpg-mobile-destination-header zen-button:first-child { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2286 justify-self: start; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2287 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2288 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2289 .jrpg-mobile-destination-header zen-button:last-child { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2290 justify-self: end; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2291 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2292 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2293 .jrpg-mobile-destination-header button { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2294 border: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2295 border-radius: 0; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2296 background: transparent; |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2297 color: var(--mjj-jrpg-text); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2298 cursor: pointer; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2299 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2300 |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
2301 mjj-window-modal .jrpg-mobile-destination-content { |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2302 min-width: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2303 min-height: 0; |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
2304 padding: 0; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
2305 overflow-x: auto; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
2306 overflow-y: scroll; |
|
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
2307 scrollbar-gutter: stable; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2308 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2309 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2310 .jrpg-mobile-destination-content > :is(mjj-jrpg-menu, .jrpg-utility) { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2311 box-sizing: border-box; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2312 position: static; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2313 width: 100%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2314 height: 100%; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2315 min-width: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2316 min-height: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2317 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2318 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2319 .jrpg-mobile-destination-content > [hidden], |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2320 [data-mobile-destination-back-owner][hidden] { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2321 display: none; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2322 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2323 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2324 .jrpg-mobile-destination-content > mjj-jrpg-menu { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2325 display: block; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2326 padding: var(--zenbu-sys-padding-md); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2327 overflow-y: auto; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2328 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2329 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2330 .jrpg-mobile-destination-content > .jrpg-utility { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2331 display: grid; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2332 padding: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2333 border: 0; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2334 overflow: hidden; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2335 background: transparent; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2336 box-shadow: none; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2337 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2338 |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2339 .jrpg-mobile-destination-content .jrpg-archive-heading { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2340 display: none; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2341 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2342 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2343 /* Compact scene internals for mobile aperture */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2344 .jrpg-scene { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2345 grid-template-columns: minmax(0, 1fr); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2346 grid-template-rows: minmax(0, 1fr); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2347 align-items: stretch; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2348 gap: var(--zenbu-sys-space-icon-label); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2349 padding: var(--zenbu-sys-padding-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2350 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2351 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2352 .jrpg-scene > mjj-jrpg-character { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2353 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2354 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2355 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2356 .jrpg-scene::before { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2357 display: none; |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2358 } |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2359 |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2360 mjj-jrpg-chat { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2361 grid-column: 1; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2362 grid-row: 1; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2363 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2364 height: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2365 max-height: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2366 overflow: hidden; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2367 padding: var(--zenbu-sys-padding-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2368 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2369 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2370 .jrpg-preview-panel > mjj-conversation-archive { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2371 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2372 height: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2373 max-height: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2374 overflow: auto; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2375 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2376 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2377 /* Composer: compact single-row within aperture */ |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2378 .jrpg-workspace > mjj-composer { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2379 padding: var(--zenbu-sys-space-icon-label); |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2380 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2381 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2382 .jrpg-composer-hint { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2383 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2384 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2385 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2386 mjj-jrpg-menu nav { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2387 height: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2388 grid-template-columns: 1fr; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2389 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2390 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2391 mjj-jrpg-menu .jrpg-menu-label { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2392 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2393 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2394 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2395 mjj-jrpg-menu ul { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2396 grid-template-columns: minmax(0, 1fr); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2397 gap: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2398 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2399 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2400 mjj-jrpg-menu button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2401 min-height: var(--zenbu-control-height); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2402 padding-block: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2403 padding-inline: var(--zenbu-control-padding-inline); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2404 font-size: var(--zenbu-sys-font-size-xs); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2405 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2406 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2407 /* Preview panel compact for narrow utility aperture */ |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2408 .jrpg-preview-panel { |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2409 padding: var(--zenbu-sys-padding-sm); |
|
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2410 overflow-y: auto; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2411 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2412 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2413 .jrpg-preview-content { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2414 gap: var(--zenbu-sys-space-icon-label); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2415 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2416 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2417 .jrpg-preview-panel h2 { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2418 font-size: var(--zenbu-sys-font-size-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2419 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2420 |
|
272
41a49c29a28f
polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
264
diff
changeset
|
2421 .jrpg-preview-content > p { |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2422 font-size: var(--zenbu-sys-font-size-xs); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2423 display: -webkit-box; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2424 -webkit-line-clamp: 2; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2425 -webkit-box-orient: vertical; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2426 overflow: hidden; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2427 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2428 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2429 .jrpg-work-showcase { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2430 grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2431 gap: var(--zenbu-sys-space-icon-label); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2432 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2433 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2434 .jrpg-work-showcase a { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2435 padding: var(--zenbu-sys-padding-xs, var(--zenbu-sys-padding-sm)); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2436 font-size: var(--zenbu-sys-font-size-xs); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2437 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2438 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2439 /* Archive fits within scene aperture */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2440 mjj-conversation-archive { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2441 padding: var(--zenbu-sys-padding-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2442 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2443 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2444 /* Scrollable message viewport fills aperture */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2445 zen-message-scroller > .jrpg-message-viewport { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2446 scrollbar-width: thin; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2447 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2448 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2449 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2450 /* ================================================================ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2451 Login modal dialog |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2452 ================================================================ */ |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2453 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2454 .jrpg-login-dialog-owner { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2455 display: contents; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2456 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2457 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2458 .jrpg-login-dialog { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2459 box-sizing: border-box; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2460 width: min(24rem, calc(100vw - var(--zenbu-sys-space-content))); |
|
273
e02e2036ef84
add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
272
diff
changeset
|
2461 height: auto; |
|
264
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2462 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2463 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2464 .jrpg-login-dialog-header { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2465 display: flex; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2466 align-items: center; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2467 justify-content: space-between; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2468 gap: var(--zenbu-sys-space-group); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2469 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2470 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2471 .jrpg-login-dialog-header h2 { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2472 margin: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2473 color: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2474 font-size: var(--zenbu-sys-font-size-lg); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2475 letter-spacing: 0.08em; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2476 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2477 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2478 .jrpg-login-dialog-header zen-button > button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2479 width: var(--zenbu-control-height); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2480 padding: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2481 border: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2482 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2483 background: transparent; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2484 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2485 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2486 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2487 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2488 .jrpg-login-dialog [data-login-error] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2489 padding: var(--zenbu-sys-padding-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2490 border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2491 background: color-mix(in srgb, var(--mjj-jrpg-accent) 10%, transparent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2492 color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2493 font-size: var(--zenbu-sys-font-size-sm); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2494 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2495 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2496 .jrpg-login-dialog [data-login-error][hidden] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2497 display: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2498 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2499 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2500 .jrpg-login-dialog form { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2501 display: grid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2502 gap: var(--zenbu-sys-space-group); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2503 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2504 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2505 .jrpg-login-dialog zen-field[appearance="plain"] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2506 display: grid; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2507 gap: var(--zenbu-sys-space-icon-label); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2508 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2509 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2510 .jrpg-login-dialog input { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2511 box-sizing: border-box; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2512 width: 100%; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2513 min-height: var(--zenbu-control-height); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2514 padding: |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2515 var(--zenbu-control-padding-block) |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2516 var(--zenbu-control-padding-inline); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2517 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2518 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2519 background: var(--mjj-jrpg-surface-sunken); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2520 color: var(--mjj-jrpg-text); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2521 font: inherit; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2522 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2523 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2524 .jrpg-login-dialog input::placeholder { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2525 color: var(--mjj-jrpg-text-muted); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2526 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2527 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2528 .jrpg-login-dialog-actions { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2529 display: flex; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2530 justify-content: flex-end; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2531 gap: var(--zenbu-sys-space-control); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2532 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2533 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2534 .jrpg-login-dialog zen-button > button { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2535 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2536 border-radius: 0; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2537 background: var(--mjj-jrpg-surface); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2538 color: var(--mjj-jrpg-text); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2539 cursor: pointer; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2540 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2541 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2542 .jrpg-login-dialog zen-button > button:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2543 border-color: var(--mjj-jrpg-accent); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2544 background: var(--mjj-jrpg-surface-raised); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2545 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2546 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2547 .jrpg-login-dialog [data-login-submit] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2548 border-color: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2549 background: var(--mjj-jrpg-primary); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2550 color: var(--mjj-jrpg-primary-foreground); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2551 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2552 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2553 .jrpg-login-dialog [data-login-submit]:hover { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2554 border-color: var(--mjj-jrpg-primary-hover); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2555 background: var(--mjj-jrpg-primary-hover); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2556 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2557 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2558 .jrpg-login-dialog zen-button > button:disabled { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2559 opacity: var(--zenbu-sys-opacity-disabled); |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2560 cursor: not-allowed; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2561 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2562 |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2563 @media (prefers-reduced-motion: reduce) { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2564 .jrpg-login-dialog[open] { |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2565 animation: none; |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2566 } |
|
04fee26ecce0
add authenticated JRPG conversation platform
MrJuneJune <me@mrjunejune.com>
parents:
263
diff
changeset
|
2567 } |