Mercurial

comparison mrjunejune/src/public/component-sandbox.css @ 273:e02e2036ef84 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add Layer 2 JRPG component system Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Sat, 08 Aug 2026 02:08:08 -0700
parents
children
comparison
equal deleted inserted replaced
272:41a49c29a28f 273:e02e2036ef84
1 @font-face {
2 font-family: "Pixel Mplus";
3 src: url("/public/fonts/pixel-mplus-12-regular.ttf") format("truetype");
4 font-display: block;
5 }
6
7 :root {
8 --zenbu-sys-font-family-ui: "Pixel Mplus";
9 --zenbu-sys-font-family-content: "Pixel Mplus";
10 --zenbu-sys-font-family-code: "Pixel Mplus";
11 --zenbu-sys-type-caption-family: "Pixel Mplus";
12 --zenbu-sys-type-label-family: "Pixel Mplus";
13 --zenbu-sys-type-body-family: "Pixel Mplus";
14 --zenbu-sys-type-body-large-family: "Pixel Mplus";
15 --zenbu-sys-type-subtitle-family: "Pixel Mplus";
16 --zenbu-sys-type-title-family: "Pixel Mplus";
17 --zenbu-sys-type-page-title-family: "Pixel Mplus";
18 --zenbu-sys-type-reading-family: "Pixel Mplus";
19 --zenbu-sys-type-code-family: "Pixel Mplus";
20 }
21
22 body {
23 box-sizing: border-box;
24 min-height: 100dvh;
25 margin: 0;
26 padding: var(--zenbu-sys-padding-xl);
27 background: var(--zenbu-sys-color-surface-page);
28 color: var(--zenbu-sys-color-text-primary);
29 font-family: var(--zenbu-sys-font-family-ui);
30 }
31
32 body * {
33 font-family: inherit;
34 }
35
36 zen-icon svg {
37 shape-rendering: crispEdges;
38 stroke-linecap: square;
39 stroke-linejoin: miter;
40 }
41
42 main {
43 display: grid;
44 gap: var(--zenbu-sys-space-container);
45 width: min(100%, 64rem);
46 margin-inline: auto;
47 }
48
49 .sandbox-heading {
50 display: grid;
51 gap: var(--zenbu-sys-space-control);
52 }
53
54 .sandbox-heading h1 {
55 color: var(--zenbu-sys-color-action-primary-background);
56 text-shadow:
57 var(--zenbu-sys-space-icon-label)
58 var(--zenbu-sys-space-icon-label)
59 0
60 var(--zenbu-sys-color-danger-foreground);
61 }
62
63 .sandbox-heading :where(h1, p),
64 .sandbox-card :where(h2, p),
65 .sandbox-pane :where(h3, p) {
66 margin: 0;
67 }
68
69 .sandbox-heading p,
70 .sandbox-card > p,
71 .sandbox-muted {
72 color: var(--zenbu-sys-color-text-secondary);
73 }
74
75 .sandbox-grid {
76 display: grid;
77 grid-template-columns: repeat(2, minmax(0, 1fr));
78 gap: var(--zenbu-sys-space-group);
79 }
80
81 .sandbox-layers {
82 display: grid;
83 grid-template-columns: repeat(3, minmax(0, 1fr));
84 gap: var(--zenbu-sys-space-control);
85 margin: 0;
86 }
87
88 .sandbox-layers > div {
89 display: grid;
90 gap: var(--zenbu-sys-space-icon-label);
91 padding: var(--zenbu-sys-padding-md);
92 border: var(--zenbu-sys-stroke-width) solid
93 var(--zenbu-sys-color-border-default);
94 border-radius: var(--zenbu-sys-radius-control);
95 background: var(--zenbu-sys-color-surface-sunken);
96 }
97
98 .sandbox-layers > div:nth-child(1) dt {
99 color: var(--zenbu-sys-color-warning-foreground);
100 }
101
102 .sandbox-layers > div:nth-child(2) dt {
103 color: var(--zenbu-sys-color-info-foreground);
104 }
105
106 .sandbox-layers > div:nth-child(3) dt {
107 color: var(--zenbu-sys-color-action-primary-background);
108 }
109
110 .sandbox-layers dt {
111 color: var(--zenbu-sys-color-text-primary);
112 font-weight: var(--zenbu-sys-font-weight-strong);
113 }
114
115 .sandbox-layers dd {
116 margin: 0;
117 color: var(--zenbu-sys-color-text-secondary);
118 font-size: var(--zenbu-sys-font-size-sm);
119 }
120
121 .sandbox-rule {
122 padding: var(--zenbu-sys-padding-md);
123 border-inline-start: var(--zenbu-sys-stroke-width-emphasis) solid
124 var(--zenbu-sys-color-action-primary-border);
125 background: var(--zenbu-sys-color-surface-sunken);
126 color: var(--zenbu-sys-color-text-secondary);
127 }
128
129 .sandbox-card {
130 display: grid;
131 align-content: start;
132 gap: var(--zenbu-sys-space-group);
133 padding: var(--zenbu-sys-padding-xl);
134 border: var(--zenbu-sys-stroke-width) solid
135 var(--zenbu-sys-color-border-default);
136 border-radius: var(--zenbu-sys-radius-container);
137 background: var(--zenbu-sys-color-surface-raised);
138 box-shadow:
139 var(--zenbu-sys-space-control)
140 var(--zenbu-sys-space-control)
141 0
142 var(--zenbu-sys-color-danger-foreground);
143 }
144
145 .sandbox-card > h2 {
146 color: var(--zenbu-sys-color-action-primary-background);
147 }
148
149 .sandbox-list {
150 display: grid;
151 gap: var(--zenbu-sys-space-control);
152 margin: 0;
153 padding: 0;
154 list-style: none;
155 }
156
157 .sandbox-list li {
158 padding-bottom: var(--zenbu-sys-padding-sm);
159 border-bottom: var(--zenbu-sys-stroke-width) solid
160 var(--zenbu-sys-color-border-subtle);
161 }
162
163 .sandbox-audit {
164 display: grid;
165 gap: var(--zenbu-sys-space-control);
166 margin: var(--zenbu-sys-space-group) 0 0;
167 padding: 0;
168 list-style: none;
169 }
170
171 .sandbox-audit li {
172 display: grid;
173 grid-template-columns: auto minmax(0, 1fr);
174 gap: var(--zenbu-sys-space-control);
175 padding-block: var(--zenbu-sys-padding-sm);
176 border-top: var(--zenbu-sys-stroke-width) solid
177 var(--zenbu-sys-color-border-subtle);
178 color: var(--zenbu-sys-color-text-secondary);
179 }
180
181 .sandbox-audit strong {
182 color: var(--zenbu-sys-color-warning-foreground);
183 }
184
185 .sandbox-pane {
186 display: grid;
187 align-content: start;
188 gap: var(--zenbu-sys-space-control);
189 }
190
191 @media (max-width: 42rem) {
192 body {
193 padding: var(--zenbu-sys-padding-lg);
194 }
195
196 .sandbox-grid {
197 grid-template-columns: minmax(0, 1fr);
198 }
199
200 .sandbox-layers {
201 grid-template-columns: minmax(0, 1fr);
202 }
203 }