pixelkiln 0.34.0 → 0.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CONTRIBUTING.md +5 -0
- package/README.md +12 -12
- package/dist/cli.d.ts +0 -103
- package/dist/cli.js +13366 -15643
- package/dist/cli.js.map +1 -1
- package/dist/client/gallery.css +322 -0
- package/dist/client/gallery.js +2118 -0
- package/dist/index.cjs +5174 -7488
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +224 -111
- package/dist/index.d.ts +224 -111
- package/dist/index.js +5161 -7483
- package/dist/index.js.map +1 -1
- package/docs/ARCHITECTURE.md +6 -0
- package/docs/CLI.md +1 -1
- package/docs/GETTING_STARTED.md +2 -2
- package/docs/LIBRARY.md +60 -28
- package/package.json +2 -2
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #17150f; --panel: #201d17; --panel-deep: #100f0c;
|
|
3
|
+
--line: rgba(243,234,214,.16); --line-strong: rgba(243,234,214,.3);
|
|
4
|
+
--text: #f3ead6; --dim: #9b9384; --accent: #ff6b35; --accent-soft: #ff9c5f;
|
|
5
|
+
--ok: #b9f27c; --warn: #ff9c5f; --bad: #ff7a6b; --cool: #8fc7ff;
|
|
6
|
+
--content: 1520px; --drawer: 540px;
|
|
7
|
+
--mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
8
|
+
--checker:
|
|
9
|
+
linear-gradient(45deg,#0000 25%,#7f7f7f22 25%,#7f7f7f22 75%,#0000 75%),
|
|
10
|
+
linear-gradient(45deg,#0000 25%,#7f7f7f22 25%,#7f7f7f22 75%,#0000 75%);
|
|
11
|
+
}
|
|
12
|
+
* { box-sizing: border-box; }
|
|
13
|
+
html { color-scheme: dark; }
|
|
14
|
+
body { margin:0; background:var(--bg); color:var(--text);
|
|
15
|
+
font:14px/1.5 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif; }
|
|
16
|
+
button, input, select { font:inherit; color:inherit; }
|
|
17
|
+
button { border-radius:0; padding:6px 11px; border:1px solid var(--line);
|
|
18
|
+
background:transparent; cursor:pointer; }
|
|
19
|
+
button:hover { border-color:var(--line-strong); }
|
|
20
|
+
button.primary { background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; }
|
|
21
|
+
button:disabled { opacity:.45; cursor:not-allowed; }
|
|
22
|
+
:focus-visible { outline:2px solid var(--accent-soft); outline-offset:2px; }
|
|
23
|
+
a { color:var(--accent-soft); }
|
|
24
|
+
code, .mono { font-family:var(--mono); }
|
|
25
|
+
|
|
26
|
+
header { position:sticky; top:0; z-index:10; background:var(--panel);
|
|
27
|
+
border-bottom:1px solid var(--line-strong); }
|
|
28
|
+
.bar { width:min(100%,var(--content)); margin:0 auto; padding:13px 22px 0;
|
|
29
|
+
display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
|
|
30
|
+
h1 { font:700 14px/1 var(--mono); margin:0; letter-spacing:-.02em; white-space:nowrap; }
|
|
31
|
+
h1::before { content:'◆'; color:var(--accent); margin-right:9px; font-size:11px; }
|
|
32
|
+
.project { color:var(--dim); font-size:12.5px; min-width:0; overflow:hidden;
|
|
33
|
+
text-overflow:ellipsis; white-space:nowrap; }
|
|
34
|
+
.project b { color:var(--text); font-weight:600; }
|
|
35
|
+
.grow { flex:1 1 auto; }
|
|
36
|
+
.search { display:flex; align-items:center; gap:8px; border:1px solid var(--line);
|
|
37
|
+
background:var(--panel-deep); padding:0 10px; min-width:min(320px, 100%); }
|
|
38
|
+
.search input { flex:1; border:0; background:transparent; padding:7px 0; min-width:0; }
|
|
39
|
+
.search input:focus { outline:none; }
|
|
40
|
+
.search kbd { color:var(--dim); border:1px solid var(--line); border-bottom-width:2px;
|
|
41
|
+
padding:0 5px; font-size:11px; font-family:var(--mono); }
|
|
42
|
+
select { background:var(--panel-deep); border:1px solid var(--line); padding:6px 8px; border-radius:0; }
|
|
43
|
+
.totals { width:min(100%,var(--content)); margin:0 auto; padding:9px 22px 0;
|
|
44
|
+
display:flex; gap:14px; flex-wrap:wrap; align-items:baseline;
|
|
45
|
+
color:var(--dim); font-size:12.5px; font-variant-numeric:tabular-nums; }
|
|
46
|
+
.totals b { color:var(--text); font-weight:600; }
|
|
47
|
+
.chips { width:min(100%,var(--content)); margin:0 auto; padding:9px 22px 13px;
|
|
48
|
+
display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
|
|
49
|
+
.chips .sep { width:1px; height:18px; background:var(--line); margin:0 4px; }
|
|
50
|
+
.chip { padding:3px 9px; font-size:12px; border:1px solid var(--line); color:var(--dim);
|
|
51
|
+
display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
|
|
52
|
+
.chip.on { color:var(--text); border-color:var(--line-strong); background:var(--panel-deep); }
|
|
53
|
+
.chip .n { color:var(--dim); }
|
|
54
|
+
.dot { width:7px; height:7px; display:inline-block; background:var(--dim); flex:none; }
|
|
55
|
+
.dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); }
|
|
56
|
+
.dot.bad { background:var(--bad); } .dot.cool { background:var(--cool); }
|
|
57
|
+
.state-ok { color:var(--ok); } .state-warn { color:var(--warn); }
|
|
58
|
+
.state-bad { color:var(--bad); } .state-cool { color:var(--cool); } .state-dim { color:var(--dim); }
|
|
59
|
+
|
|
60
|
+
main { width:min(100%,var(--content)); margin:0 auto; border-inline:1px solid var(--line);
|
|
61
|
+
min-height:60vh; }
|
|
62
|
+
.style { border-bottom:1px solid var(--line); padding:20px 22px 24px; }
|
|
63
|
+
.project { border-bottom:1px solid var(--line-strong); background:var(--panel); padding:14px 22px; }
|
|
64
|
+
.phead { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
|
|
65
|
+
.phead h2 { margin:0; font:700 15px/1.2 var(--mono); }
|
|
66
|
+
.phead h2::before { content:'◆'; color:var(--accent); margin-right:8px; font-size:10px; }
|
|
67
|
+
.phead .meta { color:var(--dim); font-size:12.5px; display:flex; gap:12px; flex-wrap:wrap; }
|
|
68
|
+
.sid.project { color:var(--dim); border-color:var(--line-strong); }
|
|
69
|
+
.shead { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
|
|
70
|
+
.shead h2 { margin:0; font:650 15px/1.2 var(--mono); }
|
|
71
|
+
.shead .meta { color:var(--dim); font-size:12.5px; display:flex; gap:12px; flex-wrap:wrap;
|
|
72
|
+
align-items:center; }
|
|
73
|
+
.swatches { display:inline-flex; gap:2px; vertical-align:middle; }
|
|
74
|
+
.swatches i { width:12px; height:12px; display:block; border:1px solid var(--line); }
|
|
75
|
+
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:10px; }
|
|
76
|
+
.card { border:1px solid var(--line); background:var(--panel); text-align:left; padding:0;
|
|
77
|
+
display:flex; flex-direction:column; cursor:pointer; min-width:0;
|
|
78
|
+
content-visibility:auto; contain-intrinsic-size:auto 176px auto 196px; }
|
|
79
|
+
.card:hover { border-color:var(--line-strong); }
|
|
80
|
+
.card.active { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
|
|
81
|
+
.card.ghost { border-style:dashed; background:transparent; }
|
|
82
|
+
.cell { height:132px; display:grid; place-items:center; background:var(--panel-deep);
|
|
83
|
+
background-image:var(--checker); background-size:12px 12px; background-position:0 0,6px 6px;
|
|
84
|
+
overflow:hidden; position:relative; padding:8px; }
|
|
85
|
+
.card.ghost .cell { background-image:none; color:var(--dim); font-size:12px; }
|
|
86
|
+
.cell img { image-rendering:pixelated; display:block; max-width:100%; max-height:100%; }
|
|
87
|
+
.cell img.fit { width:auto; height:auto; object-fit:contain; }
|
|
88
|
+
.cell .multi { display:grid; grid-template-columns:1fr 1fr; gap:4px; width:100%; height:100%; }
|
|
89
|
+
.cell .multi div { display:grid; place-items:center; overflow:hidden; }
|
|
90
|
+
.badge { position:absolute; right:6px; bottom:6px; background:var(--panel); color:var(--dim);
|
|
91
|
+
border:1px solid var(--line); font:11px/1 var(--mono); padding:3px 6px; }
|
|
92
|
+
.cbody { padding:8px 10px 10px; display:flex; flex-direction:column; gap:3px; min-width:0; }
|
|
93
|
+
.aid { font:600 13px/1.3 var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
94
|
+
.cmeta { display:flex; gap:8px; align-items:center; color:var(--dim); font-size:11.5px;
|
|
95
|
+
font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; }
|
|
96
|
+
.cmeta .st { display:inline-flex; align-items:center; gap:5px; }
|
|
97
|
+
.empty { padding:64px 22px; color:var(--dim); text-align:center; }
|
|
98
|
+
.empty p { margin:0 0 12px; }
|
|
99
|
+
footer { width:min(100%,var(--content)); margin:0 auto; padding:22px 22px 60px; color:var(--dim);
|
|
100
|
+
font-size:12.5px; }
|
|
101
|
+
kbd { border:1px solid var(--line); border-bottom-width:2px; padding:1px 5px; font-size:11px;
|
|
102
|
+
font-family:var(--mono); }
|
|
103
|
+
|
|
104
|
+
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:19; }
|
|
105
|
+
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(var(--drawer), 100vw); z-index:20;
|
|
106
|
+
background:var(--panel); border-left:1px solid var(--line-strong); overflow-y:auto;
|
|
107
|
+
display:flex; flex-direction:column; }
|
|
108
|
+
.dhead { position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line);
|
|
109
|
+
padding:14px 18px; display:flex; align-items:center; gap:10px; z-index:1; }
|
|
110
|
+
.dhead .title { flex:1; min-width:0; }
|
|
111
|
+
.dhead .title .sid { color:var(--accent-soft); font:650 10.5px/1 var(--mono); border:1px solid var(--accent);
|
|
112
|
+
padding:2px 6px; display:inline-block; margin-bottom:6px; }
|
|
113
|
+
.dhead .title .aid { font-size:16px; white-space:normal; word-break:break-all; }
|
|
114
|
+
.dhead button { padding:5px 9px; }
|
|
115
|
+
.dbody { padding:0 18px 40px; }
|
|
116
|
+
.preview { margin:16px 0 10px; background:var(--panel-deep); background-image:var(--checker);
|
|
117
|
+
background-size:12px 12px; background-position:0 0,6px 6px; border:1px solid var(--line);
|
|
118
|
+
min-height:200px; max-height:60vh; overflow:auto; display:grid; place-items:center; padding:12px; }
|
|
119
|
+
.preview img { image-rendering:pixelated; display:block; }
|
|
120
|
+
.preview .none { color:var(--dim); font-size:12.5px; text-align:center; padding:40px 12px; }
|
|
121
|
+
.zoom { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--dim); }
|
|
122
|
+
.zoom button { padding:3px 8px; font-size:12px; }
|
|
123
|
+
.zoom button.on { border-color:var(--accent); color:var(--text); }
|
|
124
|
+
.zoom .grow { text-align:right; font-variant-numeric:tabular-nums; }
|
|
125
|
+
.members { display:flex; gap:6px; overflow-x:auto; padding:10px 0 4px; }
|
|
126
|
+
.members button { flex:none; padding:4px; display:flex; flex-direction:column; align-items:center; gap:3px;
|
|
127
|
+
background:var(--panel-deep); background-image:var(--checker); background-size:8px 8px;
|
|
128
|
+
background-position:0 0,4px 4px; }
|
|
129
|
+
.members button.on { border-color:var(--accent); }
|
|
130
|
+
.members img { image-rendering:pixelated; display:block; width:40px; height:40px; object-fit:contain; }
|
|
131
|
+
.members span { font:10.5px/1 var(--mono); color:var(--dim); background:var(--panel); padding:2px 4px; }
|
|
132
|
+
.status { margin:14px 0 0; padding:10px 12px; border:1px solid var(--line); display:flex; gap:10px;
|
|
133
|
+
align-items:baseline; font-size:13px; }
|
|
134
|
+
.status .st { font-weight:600; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
|
|
135
|
+
.status .why { color:var(--dim); }
|
|
136
|
+
section.meta { border-top:1px solid var(--line); padding:14px 0 6px; margin-top:14px; }
|
|
137
|
+
section.meta h3 { margin:0 0 10px; font:650 12.5px/1 var(--mono); color:var(--dim); }
|
|
138
|
+
dl { margin:0; display:grid; grid-template-columns:minmax(96px, 30%) 1fr; gap:6px 12px; font-size:12.5px; }
|
|
139
|
+
dt { color:var(--dim); }
|
|
140
|
+
dd { margin:0; min-width:0; word-break:break-word; }
|
|
141
|
+
dd.mono { font-family:var(--mono); font-size:12px; }
|
|
142
|
+
dd .copy { margin-left:6px; padding:0 5px; font:11px/1.4 var(--mono); color:var(--dim); border-color:transparent; }
|
|
143
|
+
dd .copy:hover { border-color:var(--line); color:var(--text); }
|
|
144
|
+
.prompt { white-space:pre-wrap; }
|
|
145
|
+
.out { border:1px solid var(--line); padding:8px 10px; margin-bottom:8px; }
|
|
146
|
+
.out dl { grid-template-columns:minmax(72px, 24%) 1fr; }
|
|
147
|
+
.out .role { font:600 12px/1 var(--mono); margin-bottom:6px; display:flex; gap:8px; align-items:center; }
|
|
148
|
+
.miss { color:var(--bad); }
|
|
149
|
+
.pal { display:flex; flex-wrap:wrap; gap:3px; }
|
|
150
|
+
.pal i { width:16px; height:16px; display:block; border:1px solid var(--line); }
|
|
151
|
+
details { border:1px solid var(--line); padding:0; margin-top:8px; }
|
|
152
|
+
details summary { cursor:pointer; padding:7px 10px; font:650 12.5px/1 var(--mono); color:var(--dim); }
|
|
153
|
+
details pre { margin:0; padding:10px; border-top:1px solid var(--line); background:var(--panel-deep);
|
|
154
|
+
font:11.5px/1.45 var(--mono); overflow:auto; max-height:320px; }
|
|
155
|
+
.linkish { background:none; border:0; padding:0; color:var(--accent-soft); cursor:pointer;
|
|
156
|
+
font-family:var(--mono); font-size:12px; text-decoration:underline; }
|
|
157
|
+
.nav { display:flex; gap:6px; }
|
|
158
|
+
#note { color:var(--warn); font-size:12.5px; }
|
|
159
|
+
.editing { color:var(--accent-soft); border:1px solid var(--accent); padding:2px 7px; font:650 10.5px/1.4 var(--mono); }
|
|
160
|
+
form.edit { border:1px solid var(--accent); padding:12px 14px 14px; margin-top:14px; display:grid; gap:10px; }
|
|
161
|
+
form.edit h3 { margin:0; font:650 12.5px/1 var(--mono); color:var(--accent-soft); }
|
|
162
|
+
form.edit .row { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; }
|
|
163
|
+
.field { display:grid; gap:4px; font-size:12px; color:var(--dim); min-width:0; }
|
|
164
|
+
.field span { font-family:var(--mono); font-size:11px; }
|
|
165
|
+
.field small { font-size:11px; color:var(--dim); }
|
|
166
|
+
.field input, .field textarea, .field select { background:var(--panel-deep); border:1px solid var(--line);
|
|
167
|
+
color:var(--text); padding:6px 8px; border-radius:0; font:13px/1.45 inherit; width:100%; min-width:0; }
|
|
168
|
+
.field textarea { resize:vertical; min-height:64px; font-family:inherit; }
|
|
169
|
+
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--accent); }
|
|
170
|
+
.field.check { display:flex; align-items:center; gap:8px; }
|
|
171
|
+
.field.check input { width:auto; }
|
|
172
|
+
form.edit .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
|
|
173
|
+
form.edit .msg { font-size:12.5px; }
|
|
174
|
+
form.edit .msg.bad { color:var(--bad); }
|
|
175
|
+
.notice { margin:14px 0 0; padding:10px 12px; border:1px solid var(--ok); color:var(--ok); font-size:13px; }
|
|
176
|
+
.shead .tools { margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
|
|
177
|
+
.shead .tools button { padding:3px 9px; font-size:12px; }
|
|
178
|
+
.shead .cand { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); }
|
|
179
|
+
.shead .cand input { width:56px; background:var(--panel-deep); border:1px solid var(--line); color:var(--text);
|
|
180
|
+
padding:2px 6px; font:12px/1.4 inherit; border-radius:0; }
|
|
181
|
+
form.edit.style-form { margin:0 0 14px; }
|
|
182
|
+
form.edit .blast { padding:8px 10px; border:1px solid var(--line); font-size:12.5px; color:var(--dim); }
|
|
183
|
+
form.edit .blast.hot { border-color:var(--warn); color:var(--text); }
|
|
184
|
+
form.edit .blast b { color:var(--warn); font-weight:600; }
|
|
185
|
+
form.edit .pal { margin-top:4px; }
|
|
186
|
+
.style .notice { margin:0 0 14px; }
|
|
187
|
+
#jobs { width:min(100%,var(--content)); margin:0 auto; padding:0 22px 12px; display:grid; gap:6px; }
|
|
188
|
+
#jobs:empty { display:none; }
|
|
189
|
+
.job { border:1px solid var(--line); background:var(--panel-deep); padding:8px 12px; display:grid;
|
|
190
|
+
grid-template-columns:auto 1fr auto; gap:6px 14px; align-items:center; font-size:12.5px; }
|
|
191
|
+
.job .ph { display:inline-flex; align-items:center; gap:6px; font:650 12px/1 var(--mono); white-space:nowrap; }
|
|
192
|
+
.job .last { color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
|
|
193
|
+
.job .acts { display:flex; gap:6px; }
|
|
194
|
+
.job .acts button { padding:3px 9px; font-size:12px; }
|
|
195
|
+
.job pre { grid-column:1 / -1; margin:0; padding:8px 10px; border-top:1px solid var(--line);
|
|
196
|
+
font:11.5px/1.45 var(--mono); color:var(--dim); max-height:220px; overflow:auto; white-space:pre-wrap; }
|
|
197
|
+
#tools { width:min(100%,var(--content)); margin:0 auto; padding:0 22px 12px; }
|
|
198
|
+
#tools:empty { display:none; }
|
|
199
|
+
.tool { border:1px solid var(--line); background:var(--panel-deep); padding:8px 12px; display:grid;
|
|
200
|
+
grid-template-columns:auto 1fr auto; gap:6px 14px; align-items:center; font-size:12.5px; }
|
|
201
|
+
.tool .ph { display:inline-flex; align-items:center; gap:6px; font:650 12px/1 var(--mono); white-space:nowrap; }
|
|
202
|
+
.tool .last { color:var(--dim); min-width:0; }
|
|
203
|
+
.tool .acts { display:flex; gap:6px; }
|
|
204
|
+
.tool .acts button { padding:3px 9px; font-size:12px; }
|
|
205
|
+
.tool progress { grid-column:1 / -1; width:100%; height:6px; accent-color:var(--accent); }
|
|
206
|
+
.budget { color:var(--dim); }
|
|
207
|
+
.budget b { color:var(--text); }
|
|
208
|
+
.dialog { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(0,0,0,.55); }
|
|
209
|
+
.dialog form { background:var(--panel); border:1px solid var(--accent); width:min(560px, calc(100vw - 32px));
|
|
210
|
+
max-height:calc(100vh - 32px); overflow:auto; padding:16px 18px 18px; display:grid; gap:12px; }
|
|
211
|
+
.dialog h3 { margin:0; font:650 14px/1.2 var(--mono); }
|
|
212
|
+
.dialog table { width:100%; border-collapse:collapse; font-size:12.5px; }
|
|
213
|
+
.dialog td, .dialog th { text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); }
|
|
214
|
+
.dialog th { color:var(--dim); font-weight:500; }
|
|
215
|
+
.dialog td.n, .dialog th.n { text-align:right; font-variant-numeric:tabular-nums; }
|
|
216
|
+
.dialog .sum { display:grid; gap:4px; font-size:13px; }
|
|
217
|
+
.dialog .sum b { font-weight:600; }
|
|
218
|
+
.dialog .warn { color:var(--warn); font-size:12.5px; }
|
|
219
|
+
.dialog .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
|
|
220
|
+
.dialog .msg { font-size:12.5px; color:var(--bad); }
|
|
221
|
+
.sheet-scrim { position:fixed; inset:0; z-index:24; background:rgba(0,0,0,.5); }
|
|
222
|
+
.sheet { position:fixed; top:0; right:0; bottom:0; z-index:25; background:var(--bg);
|
|
223
|
+
border-left:1px solid var(--line-strong); display:grid; grid-template-rows:auto 1fr; min-width:0; }
|
|
224
|
+
.sheet.review-host { width:min(1180px, 94vw); }
|
|
225
|
+
.sheet.compare-host { width:min(1500px, 96vw); }
|
|
226
|
+
.sheet.editor-host { width:min(1400px, 96vw); grid-template-rows:auto 1fr; }
|
|
227
|
+
.sheet.editor-host .rbar b { font:650 12.5px/1.4 var(--mono); color:var(--text); }
|
|
228
|
+
.sheet.editor-host .rbar .acts { margin-left:auto; display:flex; gap:8px; align-items:center; }
|
|
229
|
+
.sheet.editor-host .rbar .chip { color:var(--dim); font-size:12.5px; display:inline-flex; align-items:center; gap:5px; margin-right:6px; }
|
|
230
|
+
.sheet.editor-host .rbar .st { display:inline-flex; align-items:center; gap:6px; font:650 11.5px/1 var(--mono); }
|
|
231
|
+
.sheet.editor-host .rbar .msg { color:var(--bad); font-size:12.5px; }
|
|
232
|
+
.sheet.editor-host .stage { position:relative; min-height:0; }
|
|
233
|
+
.sheet.editor-host .stage iframe { position:absolute; inset:0; }
|
|
234
|
+
.sheet.editor-host .loading { position:absolute; inset:0; display:grid; place-items:center; background:var(--bg);
|
|
235
|
+
color:var(--dim); text-align:center; padding:24px; }
|
|
236
|
+
.sheet.editor-host .loading b { display:block; color:var(--text); margin-bottom:6px; }
|
|
237
|
+
.sheet .rbar { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line-strong);
|
|
238
|
+
background:var(--panel); font-size:13px; flex-wrap:wrap; }
|
|
239
|
+
.sheet .rbar span { color:var(--dim); }
|
|
240
|
+
.sheet .rbar .zoom { margin-left:auto; }
|
|
241
|
+
.sheet iframe { border:0; width:100%; height:100%; background:var(--bg); }
|
|
242
|
+
@media (prefers-reduced-motion: no-preference) { .sheet { animation: slide .18s ease-out; } }
|
|
243
|
+
.compare-body { overflow:auto; padding:16px; }
|
|
244
|
+
.compare-body table { border-collapse:separate; border-spacing:0; min-width:100%; font-size:12.5px; }
|
|
245
|
+
.compare-body th, .compare-body td { text-align:left; vertical-align:top; padding:6px 10px; border-bottom:1px solid var(--line);
|
|
246
|
+
min-width:180px; max-width:420px; }
|
|
247
|
+
.compare-body th:first-child, .compare-body td:first-child { min-width:96px; max-width:120px; color:var(--dim);
|
|
248
|
+
position:sticky; left:0; background:var(--bg); z-index:1; }
|
|
249
|
+
.compare-body thead th { position:sticky; top:0; background:var(--bg); z-index:2; border-bottom:1px solid var(--line-strong); }
|
|
250
|
+
.compare-body .chead { display:grid; gap:4px; }
|
|
251
|
+
.compare-body .chead .aid { font-size:14px; }
|
|
252
|
+
.compare-body .chead .badges { display:flex; gap:6px; }
|
|
253
|
+
.compare-body .chead .badges .sid { display:inline-block; }
|
|
254
|
+
.compare-body .cimg { background:var(--panel-deep); background-image:var(--checker); background-size:12px 12px;
|
|
255
|
+
background-position:0 0,6px 6px; border:1px solid var(--line); display:grid; place-items:center; padding:10px;
|
|
256
|
+
min-height:120px; max-height:56vh; overflow:auto; }
|
|
257
|
+
.compare-body .cimg img { image-rendering:pixelated; display:block; }
|
|
258
|
+
.compare-body .cimg .none { color:var(--dim); font-size:12px; }
|
|
259
|
+
.compare-body td.diff { background:color-mix(in srgb, var(--warn) 9%, transparent); }
|
|
260
|
+
.compare-body td.mono { font-family:var(--mono); font-size:12px; word-break:break-all; }
|
|
261
|
+
.compare-body td .prompt { white-space:pre-wrap; }
|
|
262
|
+
.compare-body td .rm { float:right; padding:1px 6px; font-size:11px; color:var(--dim); border-color:transparent; }
|
|
263
|
+
.card.compared { outline:2px dashed var(--accent-soft); outline-offset:-2px; }
|
|
264
|
+
.card .slot { position:absolute; left:6px; top:6px; background:var(--accent); color:var(--bg); font:700 11px/1 var(--mono);
|
|
265
|
+
padding:3px 6px; }
|
|
266
|
+
.tray { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:18; background:var(--panel);
|
|
267
|
+
border:1px solid var(--accent); padding:8px 10px; display:flex; gap:8px; align-items:center; max-width:calc(100vw - 32px);
|
|
268
|
+
box-shadow:0 10px 30px rgba(0,0,0,.4); }
|
|
269
|
+
.tray .chipset { display:flex; gap:6px; overflow-x:auto; }
|
|
270
|
+
.tray .pick { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); padding:3px 4px 3px 6px;
|
|
271
|
+
font:12px/1.2 var(--mono); white-space:nowrap; }
|
|
272
|
+
.tray .pick img { width:22px; height:22px; object-fit:contain; image-rendering:pixelated; }
|
|
273
|
+
.tray .pick button { padding:0 5px; border-color:transparent; color:var(--dim); font-size:12px; }
|
|
274
|
+
.tray > button { padding:5px 11px; font-size:12.5px; }
|
|
275
|
+
@media (max-width: 900px) { .sheet.review-host, .sheet.compare-host, .sheet.editor-host { width:100vw; } }
|
|
276
|
+
.drawer .gen { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
|
|
277
|
+
.drawer .readonly-hint { margin-top:10px; font-size:12.5px; line-height:1.5; }
|
|
278
|
+
.drawer .readonly-hint code { font:12px var(--mono); color:var(--text); }
|
|
279
|
+
.pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 10px; }
|
|
280
|
+
.pair figure { margin:0; border:1px solid var(--line); background:var(--panel-deep); background-image:var(--checker);
|
|
281
|
+
background-size:12px 12px; background-position:0 0,6px 6px; display:grid; place-items:center; padding:8px; min-height:96px; }
|
|
282
|
+
.pair figure img { image-rendering:pixelated; display:block; max-width:100%; }
|
|
283
|
+
.pair figcaption { font:11px/1.4 var(--mono); color:var(--dim); background:var(--panel); padding:2px 6px; margin-top:6px; }
|
|
284
|
+
.versions { display:grid; gap:8px; margin:8px 0 4px; }
|
|
285
|
+
.version { display:grid; grid-template-columns:auto 1fr auto; gap:6px 12px; align-items:center; border:1px solid var(--line);
|
|
286
|
+
background:var(--panel-deep); padding:8px 10px; font-size:12.5px; }
|
|
287
|
+
.version .thumb { width:64px; height:64px; display:grid; place-items:center; background-image:var(--checker); border:1px solid var(--line); }
|
|
288
|
+
.version .thumb img { image-rendering:pixelated; max-width:64px; max-height:64px; }
|
|
289
|
+
.version .thumb span { font:10.5px var(--mono); color:var(--dim); text-align:center; padding:4px; }
|
|
290
|
+
.version .facts { display:grid; gap:2px; min-width:0; }
|
|
291
|
+
.version .facts b { font:650 12px/1.4 var(--mono); }
|
|
292
|
+
.version .facts .prompt { color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
293
|
+
.version .facts .prompt.differs { color:var(--warn); }
|
|
294
|
+
.version .facts .meta { color:var(--dim); font-size:12px; }
|
|
295
|
+
.version .acts { display:grid; gap:6px; justify-items:end; }
|
|
296
|
+
.version .acts button { padding:3px 9px; font-size:12px; white-space:nowrap; }
|
|
297
|
+
.dot.busy { background:var(--cool); animation: pulse 1.2s ease-in-out infinite; }
|
|
298
|
+
@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
|
|
299
|
+
@media (prefers-reduced-motion: reduce) { .dot.busy { animation:none; } }
|
|
300
|
+
.card .busy-badge { position:absolute; left:6px; bottom:6px; display:inline-flex; align-items:center; gap:5px;
|
|
301
|
+
background:var(--panel); color:var(--cool); border:1px solid var(--cool); padding:2px 7px; font:650 10.5px/1.4 var(--mono); }
|
|
302
|
+
.drawer .job-strip { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline; margin-top:10px;
|
|
303
|
+
padding:10px 12px; border:1px solid var(--cool); background:color-mix(in srgb, var(--cool) 8%, var(--panel-deep)); font-size:12.5px; }
|
|
304
|
+
.drawer .job-strip .ph { display:inline-flex; align-items:center; gap:6px; font:650 12px/1.4 var(--mono); color:var(--cool); white-space:nowrap; }
|
|
305
|
+
.drawer .job-strip .last { color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
|
|
306
|
+
.drawer .job-strip .what { grid-column:1 / -1; color:var(--text); }
|
|
307
|
+
.drawer .job-strip .acts { grid-column:1 / -1; display:flex; gap:6px; }
|
|
308
|
+
.drawer .job-strip .acts button { padding:3px 9px; font-size:12px; }
|
|
309
|
+
.card .pen { position:absolute; right:6px; top:6px; background:var(--panel); color:var(--accent-soft); border:1px solid var(--accent);
|
|
310
|
+
font:700 11px/1 var(--mono); padding:3px 5px; }
|
|
311
|
+
.hand-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
|
|
312
|
+
.drawer .gen button.primary { padding:7px 14px; }
|
|
313
|
+
@media (max-width: 720px) {
|
|
314
|
+
.bar, .totals, .chips, .style, footer { padding-inline:14px; }
|
|
315
|
+
.grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
|
|
316
|
+
.cell { height:112px; }
|
|
317
|
+
.drawer { width:100vw; }
|
|
318
|
+
}
|
|
319
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
320
|
+
.drawer { animation: slide .16s ease-out; }
|
|
321
|
+
@keyframes slide { from { transform: translateX(16px); opacity:.6; } to { transform:none; opacity:1; } }
|
|
322
|
+
}
|