clauddy 1.23.0 → 1.24.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/README.md +34 -16
- package/auth.js +9 -1
- package/codex.js +220 -0
- package/main.js +87 -7
- package/package.json +3 -1
- package/preload.js +5 -1
- package/renderer/index.html +132 -68
- package/renderer/motion.css +120 -2
- package/renderer/pet.js +301 -43
- package/renderer/style.css +583 -52
package/renderer/index.html
CHANGED
|
@@ -8,6 +8,11 @@
|
|
|
8
8
|
<link rel="stylesheet" href="motion.css" />
|
|
9
9
|
</head>
|
|
10
10
|
<body class="state-idle one-account">
|
|
11
|
+
<!-- brand marks from simple-icons (CC0); the trademarks are Anthropic's and OpenAI's -->
|
|
12
|
+
<svg width="0" height="0" style="position: absolute" aria-hidden="true">
|
|
13
|
+
<symbol id="logo-claude" viewBox="0 0 24 24"><path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" /></symbol>
|
|
14
|
+
<symbol id="logo-openai" viewBox="0 0 24 24"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" /></symbol>
|
|
15
|
+
</svg>
|
|
11
16
|
<div id="card">
|
|
12
17
|
<div id="account-chip" hidden title="Switch account">
|
|
13
18
|
<span class="ac-dot"></span>
|
|
@@ -118,6 +123,26 @@
|
|
|
118
123
|
<g class="flame-tongue flame-three"><path d="M48 108Q35 76 68 16Q62 51 79 68Q98 91 77 108Z" fill="#ed6830"/><path d="M55 108Q47 89 67 60Q60 85 75 93L69 108Z" fill="#ffc75c"/></g>
|
|
119
124
|
<g class="flame-tongue flame-four"><path d="M77 108Q66 86 91 36Q85 74 96 87Q103 101 89 108Z" fill="#efa140"/></g>
|
|
120
125
|
</svg>
|
|
126
|
+
<svg id="compact-flames" viewBox="0 0 80 52" aria-hidden="true">
|
|
127
|
+
<ellipse class="compact-glow" cx="40" cy="40" rx="28" ry="10" fill="#ee7434" />
|
|
128
|
+
<g class="compact-flame compact-flame-left">
|
|
129
|
+
<path d="M12 48C3 38 12 26 18 15c-2 11 9 13 9 24 0 7-7 12-15 9Z" fill="#ec743b" />
|
|
130
|
+
<path d="M16 47c-5-5-1-12 3-17-1 7 7 13 1 17Z" fill="#ffd080" />
|
|
131
|
+
</g>
|
|
132
|
+
<g class="compact-flame compact-flame-center">
|
|
133
|
+
<path d="M29 49C17 37 32 22 35 7c2 12 17 15 18 28 1 12-12 19-24 14Z" fill="#f39843" />
|
|
134
|
+
<path d="M34 48c-8-8 3-17 4-24 0 8 9 11 8 18-1 6-7 9-12 6Z" fill="#ffe2a0" />
|
|
135
|
+
</g>
|
|
136
|
+
<g class="compact-flame compact-flame-right">
|
|
137
|
+
<path d="M53 48c-10-12 7-22 9-34 1 9 9 13 10 23 1 11-12 15-19 11Z" fill="#e97837" />
|
|
138
|
+
<path d="M58 47c-4-6 3-11 5-17 0 6 6 10 2 15-2 3-5 4-7 2Z" fill="#ffcf79" />
|
|
139
|
+
</g>
|
|
140
|
+
<g fill="#ffd58a">
|
|
141
|
+
<circle class="compact-ember compact-ember-one" cx="24" cy="21" r="1.2" />
|
|
142
|
+
<circle class="compact-ember compact-ember-two" cx="49" cy="18" r="1" />
|
|
143
|
+
<circle class="compact-ember compact-ember-three" cx="65" cy="26" r=".8" />
|
|
144
|
+
</g>
|
|
145
|
+
</svg>
|
|
121
146
|
<div id="sweat"><i></i><i></i></div>
|
|
122
147
|
<div id="dropzone"></div>
|
|
123
148
|
</div>
|
|
@@ -169,6 +194,16 @@
|
|
|
169
194
|
</div>
|
|
170
195
|
<div class="mini-line"><span id="mini-dot"></span><span id="mini-text">idle</span></div>
|
|
171
196
|
<div id="mini-pct-row"><span id="mini-pct">0%</span> <span class="lbl">session</span></div>
|
|
197
|
+
<!-- Dual-service dock: two glanceable readings, one shared pet. -->
|
|
198
|
+
<div id="mini-dual">
|
|
199
|
+
<button type="button" class="mini-source" data-provider="claude">
|
|
200
|
+
<span>Claude</span><span class="mini-track"><i id="mini-claude-bar"></i></span><b id="mini-claude-value">—</b>
|
|
201
|
+
</button>
|
|
202
|
+
<button type="button" class="mini-source" data-provider="codex">
|
|
203
|
+
<span>Codex</span><span class="mini-track"><i id="mini-codex-bar"></i></span><b id="mini-codex-value">—</b>
|
|
204
|
+
</button>
|
|
205
|
+
</div>
|
|
206
|
+
<div id="mini-reset" hidden></div>
|
|
172
207
|
</div>
|
|
173
208
|
|
|
174
209
|
<!-- collapsible content -->
|
|
@@ -184,58 +219,71 @@
|
|
|
184
219
|
|
|
185
220
|
<!-- session + weekly (real usage; needs login) -->
|
|
186
221
|
<div id="home-success" hidden>✓ Logged in — your real usage is live</div>
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
222
|
+
<!-- Both services stay one click away, below the pet. -->
|
|
223
|
+
<div id="harness-tabs" role="tablist" aria-label="Monitored service">
|
|
224
|
+
<button id="tab-claude" type="button" role="tab" data-provider="claude" aria-selected="true" aria-controls="service-panel" tabindex="0"><svg class="tab-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg><span>Claude</span><span class="tab-value" id="tab-claude-value">—</span><span class="tab-alert" hidden>!</span></button>
|
|
225
|
+
<button id="tab-codex" type="button" role="tab" data-provider="codex" aria-selected="false" aria-controls="service-panel" tabindex="-1"><svg class="tab-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg><span>Codex</span><span class="tab-value" id="tab-codex-value">—</span><span class="tab-alert" hidden>!</span></button>
|
|
226
|
+
</div>
|
|
227
|
+
<div id="service-panel" role="tabpanel" aria-labelledby="tab-claude">
|
|
228
|
+
<div id="limits">
|
|
229
|
+
<div id="limits-meters">
|
|
230
|
+
<div class="meter">
|
|
231
|
+
<div class="meter-top"><span>current session</span><span id="session-pct">0%</span></div>
|
|
232
|
+
<div class="track"><div class="fill" id="session-fill"></div></div>
|
|
233
|
+
<div class="sub" id="session-sub">no active session</div>
|
|
234
|
+
<div class="sub proj" id="session-proj" hidden></div>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="meter">
|
|
237
|
+
<div class="meter-top"><span>weekly · all models</span><span id="week-pct">0%</span></div>
|
|
238
|
+
<div class="track"><div class="fill week" id="week-fill"></div></div>
|
|
239
|
+
<div class="sub" id="week-sub">—</div>
|
|
240
|
+
</div>
|
|
241
|
+
<!-- per-model weekly limits (e.g. Fable), one meter each -->
|
|
242
|
+
<div id="scoped-meters"></div>
|
|
199
243
|
</div>
|
|
200
|
-
|
|
201
|
-
|
|
244
|
+
<button id="limits-connect">
|
|
245
|
+
<svg class="lc-ico" viewBox="0 0 24 24" aria-hidden="true">
|
|
246
|
+
<path d="M9 12h6 M8.5 8.5H6.5a3.5 3.5 0 0 0 0 7h2 M15.5 8.5h2a3.5 3.5 0 0 1 0 7h-2" />
|
|
247
|
+
</svg>
|
|
248
|
+
<span class="lc-text">
|
|
249
|
+
<b>Connect your account</b>
|
|
250
|
+
<i>to see your real usage</i>
|
|
251
|
+
</span>
|
|
252
|
+
</button>
|
|
202
253
|
</div>
|
|
203
|
-
<button id="limits-connect">
|
|
204
|
-
<svg class="lc-ico" viewBox="0 0 24 24" aria-hidden="true">
|
|
205
|
-
<path d="M9 12h6 M8.5 8.5H6.5a3.5 3.5 0 0 0 0 7h2 M15.5 8.5h2a3.5 3.5 0 0 1 0 7h-2" />
|
|
206
|
-
</svg>
|
|
207
|
-
<span class="lc-text">
|
|
208
|
-
<b>Connect your account</b>
|
|
209
|
-
<i>to see your real usage</i>
|
|
210
|
-
</span>
|
|
211
|
-
</button>
|
|
212
|
-
</div>
|
|
213
254
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
<button class="sec-head" data-sec="bymodel" aria-expanded="true">
|
|
217
|
-
<span class="sec-name">by model · 7 days</span>
|
|
255
|
+
<button id="details-toggle" type="button" aria-expanded="false" aria-controls="usage-details">
|
|
256
|
+
<span>Details</span>
|
|
218
257
|
<svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
|
|
219
258
|
</button>
|
|
220
|
-
<div
|
|
221
|
-
|
|
259
|
+
<div id="usage-details" hidden>
|
|
260
|
+
<!-- by model (7 days) -->
|
|
261
|
+
<div id="bymodel" class="sec">
|
|
262
|
+
<button class="sec-head" data-sec="bymodel" aria-expanded="true">
|
|
263
|
+
<span class="sec-name">by model · 7 days</span>
|
|
264
|
+
<svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
|
|
265
|
+
</button>
|
|
266
|
+
<div class="sec-body"><div id="bymodel-list"></div></div>
|
|
267
|
+
</div>
|
|
222
268
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
269
|
+
<!-- by project (7 days) -->
|
|
270
|
+
<div id="byproject" class="sec">
|
|
271
|
+
<button class="sec-head" data-sec="byproject" aria-expanded="true">
|
|
272
|
+
<span class="sec-name">by project · 7 days</span>
|
|
273
|
+
<svg class="sec-chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5" /></svg>
|
|
274
|
+
</button>
|
|
275
|
+
<div class="sec-body"><div id="byproject-list"></div></div>
|
|
276
|
+
</div>
|
|
231
277
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
278
|
+
<!-- 30-day map -->
|
|
279
|
+
<div id="heat">
|
|
280
|
+
<div id="heat-meta">
|
|
281
|
+
<span>30 days</span>
|
|
282
|
+
<span id="month-total">0</span>
|
|
283
|
+
</div>
|
|
284
|
+
<div id="heat-row"></div>
|
|
285
|
+
</div>
|
|
237
286
|
</div>
|
|
238
|
-
<div id="heat-row"></div>
|
|
239
287
|
</div>
|
|
240
288
|
</div>
|
|
241
289
|
|
|
@@ -243,42 +291,36 @@
|
|
|
243
291
|
<div id="settings">
|
|
244
292
|
<div class="settings-heading">
|
|
245
293
|
<div>
|
|
246
|
-
<h3>
|
|
247
|
-
<p>
|
|
294
|
+
<h3>Make yourself at home.</h3>
|
|
295
|
+
<p>Your accounts, your little companion.</p>
|
|
248
296
|
</div>
|
|
249
|
-
<svg class="ic sh-ico" viewBox="0 0 24 24" aria-hidden="true">
|
|
250
|
-
<path d="M20 7h-9M14 17H5" />
|
|
251
|
-
<circle cx="17" cy="17" r="3" />
|
|
252
|
-
<circle cx="7" cy="7" r="3" />
|
|
253
|
-
</svg>
|
|
254
297
|
</div>
|
|
255
298
|
|
|
299
|
+
<div class="settings-label connections-label">Connections</div>
|
|
256
300
|
<div id="account">
|
|
257
301
|
<!-- who you are comes first: the list, then the login for whichever
|
|
258
302
|
account is active — so "add" and the code field sit together -->
|
|
259
|
-
<div id="acc-connected" class="connect-block">
|
|
260
|
-
<span class="
|
|
261
|
-
<div>
|
|
262
|
-
<
|
|
263
|
-
<span id="acc-
|
|
303
|
+
<div id="acc-connected" class="connect-block connection-card">
|
|
304
|
+
<span class="connection-avatar claude-avatar" id="acc-avatar"><svg class="connection-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg></span>
|
|
305
|
+
<div class="connection-copy">
|
|
306
|
+
<div class="connection-heading"><b>Claude</b><span id="acc-sub" class="plan-badge" hidden></span></div>
|
|
307
|
+
<span class="connection-caption acc-ok" id="acc-ok">Connected</span>
|
|
264
308
|
</div>
|
|
265
|
-
<button id="acc-logout" class="cb-out" title="
|
|
309
|
+
<button id="acc-logout" class="cb-out connection-remove" title="Disconnect Claude" aria-label="Disconnect Claude">
|
|
266
310
|
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
|
|
267
|
-
<path d="
|
|
311
|
+
<path d="M18 6 6 18M6 6l12 12" />
|
|
268
312
|
</svg>
|
|
269
313
|
</button>
|
|
270
314
|
</div>
|
|
271
315
|
<div id="acc-disconnected">
|
|
272
|
-
<div
|
|
273
|
-
|
|
316
|
+
<div id="acc-intro" class="connection-card">
|
|
317
|
+
<span class="connection-avatar claude-avatar"><svg class="connection-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg></span>
|
|
318
|
+
<div class="connection-copy">
|
|
319
|
+
<div class="connection-heading"><b>Claude</b></div>
|
|
320
|
+
<span class="connection-hint">Connect via browser to track your usage.</span>
|
|
321
|
+
</div>
|
|
322
|
+
<button id="acc-connect" class="connection-btn claude-connect-btn" aria-label="Connect Claude" title="Log in with browser"><svg class="connection-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-claude" /></svg><span>Connect</span></button>
|
|
274
323
|
</div>
|
|
275
|
-
<button id="acc-connect" class="acc-btn">
|
|
276
|
-
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">
|
|
277
|
-
<circle cx="12" cy="12" r="10" />
|
|
278
|
-
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20" />
|
|
279
|
-
</svg>
|
|
280
|
-
<span>Log in with browser</span>
|
|
281
|
-
</button>
|
|
282
324
|
<div id="acc-paste">
|
|
283
325
|
<div class="set-hint set-hint-left">Paste the code from the browser page:</div>
|
|
284
326
|
<input id="acc-code" type="text" placeholder="authentication code" />
|
|
@@ -288,7 +330,29 @@
|
|
|
288
330
|
</div>
|
|
289
331
|
</div>
|
|
290
332
|
|
|
291
|
-
|
|
333
|
+
<!-- Codex: opt-in, read from its local logs — nothing to log into here -->
|
|
334
|
+
<div id="codex-settings" class="connection-card">
|
|
335
|
+
<span class="codex-avatar connection-avatar"><svg class="codex-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg></span>
|
|
336
|
+
<div class="connection-copy">
|
|
337
|
+
<div class="connection-heading"><b>Codex</b><span id="codex-plan" class="plan-badge" hidden></span></div>
|
|
338
|
+
<span class="connection-caption" id="codex-connected-caption">Connected on this device</span>
|
|
339
|
+
<span id="codex-hint" class="connection-hint">Track Codex alongside Claude, in this pet.</span>
|
|
340
|
+
</div>
|
|
341
|
+
<div class="codex-actions">
|
|
342
|
+
<button id="codex-connect" class="connection-btn" aria-label="Connect Codex"><svg class="codex-logo" viewBox="0 0 24 24" aria-hidden="true"><use href="#logo-openai" /></svg><span>Connect</span></button>
|
|
343
|
+
<span id="codex-setup" hidden>
|
|
344
|
+
<button id="codex-retry" class="connection-btn">Retry</button>
|
|
345
|
+
<button id="codex-setup-cancel" class="codex-x" title="Cancel" aria-label="Cancel">
|
|
346
|
+
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
|
|
347
|
+
</button>
|
|
348
|
+
</span>
|
|
349
|
+
<button id="codex-disconnect" class="codex-x connection-remove" title="Disconnect Codex" aria-label="Disconnect Codex">
|
|
350
|
+
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
|
|
351
|
+
</button>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
|
|
355
|
+
<div class="settings-label">Preferences</div>
|
|
292
356
|
<div id="set-rows">
|
|
293
357
|
<span class="seg settings-segment" id="set-mode">
|
|
294
358
|
<button type="button" class="seg-btn" data-mode="floating">Floating pet</button>
|
package/renderer/motion.css
CHANGED
|
@@ -231,9 +231,127 @@ body.settings-open :is(#reading, #reading-room, #desk, #terminal, #heat-scene, #
|
|
|
231
231
|
body.collapsed :is(#reading, #reading-room, #desk, #terminal, #heat-scene) {
|
|
232
232
|
opacity: 0;
|
|
233
233
|
}
|
|
234
|
+
/* collapsed: a smaller fire behind the head that never covers the face or the % */
|
|
234
235
|
body.collapsed #flames {
|
|
235
|
-
|
|
236
|
-
|
|
236
|
+
display: none;
|
|
237
|
+
}
|
|
238
|
+
#compact-flames {
|
|
239
|
+
display: none;
|
|
240
|
+
position: absolute;
|
|
241
|
+
top: -26px;
|
|
242
|
+
left: 50%;
|
|
243
|
+
width: 76px;
|
|
244
|
+
height: 46px;
|
|
245
|
+
transform: translateX(-50%);
|
|
246
|
+
z-index: 1;
|
|
247
|
+
pointer-events: none;
|
|
248
|
+
overflow: hidden;
|
|
249
|
+
}
|
|
250
|
+
body.collapsed.state-stressed #compact-flames {
|
|
251
|
+
display: block;
|
|
252
|
+
}
|
|
253
|
+
/* In the single-provider ring, flames overlap only the top of the head. */
|
|
254
|
+
body.collapsed.state-stressed:not(.dual) #compact-flames {
|
|
255
|
+
z-index: 3;
|
|
256
|
+
height: 40px;
|
|
257
|
+
}
|
|
258
|
+
body.collapsed.state-stressed:not(.dual) #pet {
|
|
259
|
+
transform: translateY(-5px);
|
|
260
|
+
}
|
|
261
|
+
body.collapsed.dual.state-stressed #compact-flames {
|
|
262
|
+
top: -30px;
|
|
263
|
+
}
|
|
264
|
+
body.collapsed.dual.state-stressed #pet {
|
|
265
|
+
transform: translateY(4px);
|
|
266
|
+
}
|
|
267
|
+
body.collapsed.state-stressed .compact-flame {
|
|
268
|
+
transform-box: fill-box;
|
|
269
|
+
transform-origin: 50% 100%;
|
|
270
|
+
animation: compact-fire-dance 1.25s ease-in-out infinite alternate;
|
|
271
|
+
}
|
|
272
|
+
body.collapsed.state-stressed .compact-flame-left {
|
|
273
|
+
animation-duration: 0.95s;
|
|
274
|
+
animation-delay: -0.4s;
|
|
275
|
+
}
|
|
276
|
+
body.collapsed.state-stressed .compact-flame-right {
|
|
277
|
+
animation-duration: 1.45s;
|
|
278
|
+
animation-delay: -0.8s;
|
|
279
|
+
}
|
|
280
|
+
.compact-glow {
|
|
281
|
+
opacity: 0.2;
|
|
282
|
+
}
|
|
283
|
+
body.collapsed.state-stressed .compact-glow {
|
|
284
|
+
animation: compact-fire-glow 2.4s ease-in-out infinite alternate;
|
|
285
|
+
}
|
|
286
|
+
.compact-ember {
|
|
287
|
+
opacity: 0;
|
|
288
|
+
}
|
|
289
|
+
body.collapsed.state-stressed .compact-ember {
|
|
290
|
+
animation: compact-ember-rise 2.2s ease-out infinite;
|
|
291
|
+
}
|
|
292
|
+
body.collapsed.state-stressed .compact-ember-two {
|
|
293
|
+
animation-delay: -0.8s;
|
|
294
|
+
}
|
|
295
|
+
body.collapsed.state-stressed .compact-ember-three {
|
|
296
|
+
animation-delay: -1.5s;
|
|
297
|
+
}
|
|
298
|
+
body.collapsed.state-stressed:not(.poke):not(.celebrate) #claude {
|
|
299
|
+
animation: compact-heat-rock 1.8s ease-in-out infinite;
|
|
300
|
+
}
|
|
301
|
+
body.collapsed.state-stressed #shadow {
|
|
302
|
+
background: radial-gradient(ellipse, #ef74332b, transparent 70%);
|
|
303
|
+
}
|
|
304
|
+
body.settings-open #compact-flames {
|
|
305
|
+
display: none;
|
|
306
|
+
}
|
|
307
|
+
@keyframes compact-fire-dance {
|
|
308
|
+
0% {
|
|
309
|
+
transform: scale(0.92, 0.78) rotate(-5deg);
|
|
310
|
+
}
|
|
311
|
+
55% {
|
|
312
|
+
transform: scale(1.03, 0.95) rotate(2deg);
|
|
313
|
+
}
|
|
314
|
+
100% {
|
|
315
|
+
transform: scale(0.97, 1.05) rotate(5deg);
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
@keyframes compact-fire-glow {
|
|
319
|
+
from {
|
|
320
|
+
opacity: 0.14;
|
|
321
|
+
}
|
|
322
|
+
to {
|
|
323
|
+
opacity: 0.32;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
@keyframes compact-ember-rise {
|
|
327
|
+
0% {
|
|
328
|
+
opacity: 0;
|
|
329
|
+
transform: translate(0, 5px) scale(0.7);
|
|
330
|
+
}
|
|
331
|
+
25% {
|
|
332
|
+
opacity: 0.8;
|
|
333
|
+
}
|
|
334
|
+
100% {
|
|
335
|
+
opacity: 0;
|
|
336
|
+
transform: translate(3px, -7px) scale(0.3);
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
@keyframes compact-heat-rock {
|
|
340
|
+
0%,
|
|
341
|
+
100% {
|
|
342
|
+
transform: translateY(0) rotate(-0.6deg);
|
|
343
|
+
}
|
|
344
|
+
50% {
|
|
345
|
+
transform: translateY(-1px) rotate(0.6deg);
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
@media (prefers-reduced-motion: reduce) {
|
|
349
|
+
body.collapsed.state-stressed #compact-flames * {
|
|
350
|
+
animation: none;
|
|
351
|
+
}
|
|
352
|
+
body.collapsed.state-stressed .compact-ember {
|
|
353
|
+
display: none;
|
|
354
|
+
}
|
|
237
355
|
}
|
|
238
356
|
@keyframes book-attention {
|
|
239
357
|
0%,
|