@viberaven/cli 1.6.8 → 1.6.10
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 +8 -8
- package/dist/cli.js +8158 -7566
- package/dist/manga/raven-icon-180.png +0 -0
- package/dist/manga/raven-icon-32.png +0 -0
- package/dist/manga/raven-icon.svg +1 -0
- package/dist/stack/app.js +17 -17
- package/dist/stack/scene.css +484 -0
- package/dist/stack/stack.css +154 -390
- package/package.json +1 -1
package/dist/stack/stack.css
CHANGED
|
@@ -1262,42 +1262,13 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
|
|
|
1262
1262
|
.app .board.has-screen.is-side { grid-template-columns: minmax(250px, 320px) minmax(0, 250px); column-gap: clamp(32px, 7cqi, 56px); }
|
|
1263
1263
|
}
|
|
1264
1264
|
|
|
1265
|
-
/* ---------- the construction scene: a small isometric world for the action in progress ----------
|
|
1266
|
-
Planned parts are traced outlines; a part works while its step is active; it settles solid only when its
|
|
1267
|
-
evidence arrives. Activity is calm (slow flows, a gentle hover); milestones get one short spring. */
|
|
1268
|
-
:root {
|
|
1269
|
-
--spring: cubic-bezier(0.34, 1.45, 0.64, 1);
|
|
1270
|
-
--sc-amber: #f2c15f;
|
|
1271
|
-
--sc-green: #6fd08c;
|
|
1272
|
-
--sc-red: #f4715f;
|
|
1273
|
-
}
|
|
1274
|
-
|
|
1275
1265
|
/* Layout: the scene takes the canvas, the panel narrows, the real app gets its own window. */
|
|
1276
1266
|
.stage.is-work.has-panel .canvas { right: min(440px, 36%); }
|
|
1277
1267
|
.stage.is-work .stage-body.panel { width: calc(min(440px, 36%) - 28px); }
|
|
1278
1268
|
.app:has(.stage.is-work) .rail { left: calc((100% - min(440px, 36%)) / 2); }
|
|
1279
1269
|
.app:has(.stage.is-work) .appwin { right: min(440px, 36vw); }
|
|
1280
1270
|
.canvas.is-scene { display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); align-items: stretch; place-items: stretch; gap: 16px; padding: 18px 18px 84px; cursor: default; overflow: hidden; background: radial-gradient(1200px 600px at 40% 30%, rgba(242, 193, 95, 0.035), transparent 60%), radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 22px 22px, #060607; }
|
|
1281
|
-
|
|
1282
|
-
.scene-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
|
1283
|
-
.scene-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 95, 0.45); color: var(--sc-amber); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
|
|
1284
|
-
.scene-tag.is-demo { border-style: dashed; border-color: rgba(255, 255, 255, 0.35); color: var(--ink-2); }
|
|
1285
|
-
.scene-note { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1286
|
-
.scene { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
|
|
1287
|
-
.scene-caption { justify-self: center; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14, 14, 17, 0.94); font-size: 13.5px; color: var(--ink); animation: settle 0.4s var(--ease) both; }
|
|
1288
|
-
.scene-caption > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1289
|
-
.scene-caption i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
|
|
1290
|
-
.scene-caption.is-work i { background: var(--sc-amber); animation: pulse-dot 1.4s ease-in-out infinite; }
|
|
1291
|
-
.scene-caption.is-wait { border-color: rgba(242, 193, 95, 0.5); }
|
|
1292
|
-
.scene-caption.is-wait i { background: var(--sc-amber); }
|
|
1293
|
-
.scene-caption.is-pass i { background: var(--sc-green); }
|
|
1294
|
-
.scene-caption.is-fail { border-color: rgba(244, 113, 95, 0.45); }
|
|
1295
|
-
.scene-caption.is-fail i { background: var(--sc-red); }
|
|
1296
|
-
.scene-when { font-size: 12px; color: var(--ink-3); }
|
|
1297
|
-
.scene-inspect { position: absolute; left: 0; bottom: 52px; z-index: 2; width: min(320px, 70%); display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9); animation: settle 0.3s var(--ease) both; }
|
|
1298
|
-
.scene-inspect header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
1299
|
-
.scene-inspect strong { font-size: 14px; font-weight: 600; }
|
|
1300
|
-
.scene-inspect p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
|
|
1271
|
+
|
|
1301
1272
|
.insp-state { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
|
|
1302
1273
|
.insp-state.is-done { color: var(--sc-green); } .insp-state.is-active, .insp-state.is-waiting { color: var(--sc-amber); } .insp-state.is-failed { color: var(--red-ink); }
|
|
1303
1274
|
.insp-files { list-style: none; display: grid; gap: 3px; }
|
|
@@ -1316,147 +1287,31 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
|
|
|
1316
1287
|
.live-window header span { font-size: 11.5px; color: var(--ink-3); }
|
|
1317
1288
|
.live-window .screen { margin-top: 0; }
|
|
1318
1289
|
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
.scene .panel.modified { stroke: rgba(255, 255, 255, 0.32); }
|
|
1345
|
-
.scene .panel-line { fill: rgba(255, 255, 255, 0.2); }
|
|
1346
|
-
.scene .panel-name { fill: rgba(245, 245, 247, 0.78); font-family: var(--font); font-size: 0.34px; font-weight: 600; }
|
|
1347
|
-
.scene .panel-in { animation: panel-in 0.7s var(--spring) both; }
|
|
1348
|
-
@keyframes panel-in { from { opacity: 0; transform: translate(0, -0.9px); } }
|
|
1349
|
-
.scene .ghost-panel { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-dasharray: 0.02 0.015; }
|
|
1350
|
-
.scene .ghost-panel.sketch { stroke: rgba(242, 193, 95, 0.7); stroke-width: 1.4; stroke-dasharray: 0.22 0.78; animation: sketch 2.6s linear infinite; }
|
|
1351
|
-
.scene .ghost-panel.sketch:nth-child(2) { animation-delay: -0.9s; }
|
|
1352
|
-
.scene .ghost-panel.sketch:nth-child(3) { animation-delay: -1.7s; }
|
|
1353
|
-
@keyframes sketch { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
|
|
1354
|
-
.scene .key-sign circle { fill: rgba(242, 193, 95, 0.12); stroke: var(--sc-amber); stroke-width: 1.4; }
|
|
1355
|
-
.scene .key-sign path { fill: none; stroke: var(--sc-amber); stroke-width: 1.6; stroke-linecap: round; }
|
|
1356
|
-
|
|
1357
|
-
/* The agent unit. */
|
|
1358
|
-
.scene .unit .f-top { fill: #2c2c34; } .scene .unit .f-left { fill: #202027; } .scene .unit .f-right { fill: #16161b; }
|
|
1359
|
-
.scene .unit-plate { fill: #121216; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
|
|
1360
|
-
.scene .unit-led { fill: rgba(255, 255, 255, 0.18); }
|
|
1361
|
-
.scene .p-active .unit-led { fill: var(--sc-amber); animation: led 1.6s ease-in-out infinite; }
|
|
1362
|
-
.scene .p-done .unit-led { fill: var(--sc-green); }
|
|
1363
|
-
.scene .p-active .hover { animation: hover 3.6s ease-in-out infinite; }
|
|
1364
|
-
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
|
|
1365
|
-
@keyframes led { 50% { opacity: 0.35; } }
|
|
1366
|
-
|
|
1367
|
-
/* Posts, lamps, ports, towers, crates. */
|
|
1368
|
-
.scene .post .f-top { fill: #2e2e36; } .scene .post .f-left { fill: #222229; } .scene .post .f-right { fill: #18181d; }
|
|
1369
|
-
.scene .lamp .f-top { fill: #3a3a42; } .scene .lamp .f-left { fill: #2b2b32; } .scene .lamp .f-right { fill: #222228; }
|
|
1370
|
-
.scene .p-active .lamp .f-top { fill: #f6d58a; } .scene .p-active .lamp .f-left { fill: #c99a3f; } .scene .p-active .lamp .f-right { fill: #a87e30; }
|
|
1371
|
-
.scene .p-active .lamp { animation: led 1.8s ease-in-out infinite; }
|
|
1372
|
-
.scene .p-done .lamp .f-top { fill: #9be3b1; } .scene .p-done .lamp .f-left { fill: #57b673; } .scene .p-done .lamp .f-right { fill: #3f8f57; }
|
|
1373
|
-
.scene .p-failed .lamp .f-top { fill: #f8a597; } .scene .p-failed .lamp .f-left { fill: #d35a49; } .scene .p-failed .lamp .f-right { fill: #a9463a; }
|
|
1374
|
-
.scene .port .f-top { fill: #2e2e36; }
|
|
1375
|
-
.scene .port-led { fill: rgba(255, 255, 255, 0.18); }
|
|
1376
|
-
.scene .p-done .port-led { fill: var(--sc-green); }
|
|
1377
|
-
.scene .p-failed .port-led { fill: var(--sc-red); }
|
|
1378
|
-
.scene .tower .f-top { fill: #303039; } .scene .tower .f-left { fill: #23232a; } .scene .tower .f-right { fill: #18181e; }
|
|
1379
|
-
.scene .vent { fill: rgba(255, 255, 255, 0.07); }
|
|
1380
|
-
.scene .tower-led { fill: rgba(255, 255, 255, 0.18); }
|
|
1381
|
-
.scene .p-active .tower-led { fill: var(--sc-amber); animation: led 1.2s ease-in-out infinite; }
|
|
1382
|
-
.scene .p-done .tower-led { fill: var(--sc-green); }
|
|
1383
|
-
.scene .p-failed .tower-led { fill: var(--sc-red); }
|
|
1384
|
-
.scene .crate .f-top { fill: #3a342a; } .scene .crate .f-left { fill: #2b261f; } .scene .crate .f-right { fill: #221e18; }
|
|
1385
|
-
.scene .crate-x { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
|
|
1386
|
-
|
|
1387
|
-
/* Database layers, gateway, barrier. */
|
|
1388
|
-
.scene .cyl .f-left { fill: #1c1f1e; stroke: rgba(62, 207, 142, 0.18); }
|
|
1389
|
-
.scene .cyl .f-top { fill: #262b29; stroke: rgba(62, 207, 142, 0.38); }
|
|
1390
|
-
.scene .cyl { animation: layer-in 0.7s var(--spring) both; }
|
|
1391
|
-
.scene .cyl.ghost { animation: none; }
|
|
1392
|
-
.scene .cyl.ghost .f-left, .scene .cyl.ghost .f-top { fill: transparent; stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 5; }
|
|
1393
|
-
@keyframes layer-in { from { opacity: 0; transform: translateY(-16px); } }
|
|
1394
|
-
.scene .table { fill: rgba(62, 207, 142, 0.16); stroke: rgba(62, 207, 142, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; animation: panel-in 0.6s var(--spring) both; }
|
|
1395
|
-
.scene .pillar .f-top, .scene .lintel .f-top { fill: #33333b; } .scene .pillar .f-left, .scene .lintel .f-left { fill: #26262d; } .scene .pillar .f-right, .scene .lintel .f-right { fill: #1b1b20; }
|
|
1396
|
-
.scene .lintel-plate { fill: #f5f5f7; }
|
|
1397
|
-
.scene .bar .f-top { fill: #3b3222; } .scene .bar .f-left { fill: #2c261a; } .scene .bar .f-right { fill: #231e15; }
|
|
1398
|
-
.scene .bar-stripes { stroke: rgba(242, 193, 95, 0.8); stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
|
|
1399
|
-
|
|
1400
|
-
/* Connections. */
|
|
1401
|
-
.scene .pipe-base { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 4; stroke-linecap: round; }
|
|
1402
|
-
.scene .pipe { fill: none; stroke: rgba(245, 245, 247, 0.75); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
|
|
1403
|
-
.scene .pipe-flow { fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 10; }
|
|
1404
|
-
.scene .p-planned .pipe-base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.4; stroke-dasharray: 3 5; }
|
|
1405
|
-
.scene .p-active .pipe-base { stroke: rgba(242, 193, 95, 0.14); }
|
|
1406
|
-
.scene .p-active .pipe-flow { stroke: var(--sc-amber); animation: flow 1.4s linear infinite; }
|
|
1407
|
-
.scene .p-done .pipe { animation: trace 0.9s var(--ease) forwards; }
|
|
1408
|
-
.scene .p-failed .pipe-base { stroke: rgba(244, 113, 95, 0.55); stroke-width: 2; stroke-dasharray: 4 4; }
|
|
1409
|
-
.scene .p-idle .pipe-base { stroke: rgba(255, 255, 255, 0.07); }
|
|
1410
|
-
@keyframes flow { to { stroke-dashoffset: -13; } }
|
|
1411
|
-
@keyframes trace { to { stroke-dashoffset: 0; } }
|
|
1412
|
-
|
|
1413
|
-
/* Travellers. */
|
|
1414
|
-
.scene .token { fill: #f5f5f7; }
|
|
1415
|
-
.scene .token-halo { fill: rgba(245, 245, 247, 0.16); }
|
|
1416
|
-
.scene .spark .token { fill: #fbe2a6; } .scene .spark .token-halo { fill: rgba(242, 193, 95, 0.22); }
|
|
1417
|
-
.scene .record .token { fill: #7fe0b0; } .scene .record .token-halo { fill: rgba(62, 207, 142, 0.22); }
|
|
1418
|
-
.scene .blocked .token, .scene .leak .token { fill: #f8a597; } .scene .blocked .token-halo, .scene .leak .token-halo { fill: rgba(244, 113, 95, 0.22); }
|
|
1419
|
-
.scene .package .token { fill: #f5f5f7; }
|
|
1420
|
-
|
|
1421
|
-
/* Labels pinned to the world. */
|
|
1422
|
-
.scene .tag rect { fill: rgba(12, 12, 15, 0.94); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
|
|
1423
|
-
.scene .tag text { fill: #d9d9df; font-family: var(--font); font-size: 9.5px; font-weight: 600; }
|
|
1424
|
-
.scene .p-done .tag-check rect, .scene .p-done .tag-port rect { stroke: rgba(111, 208, 140, 0.55); }
|
|
1425
|
-
.scene .p-done .tag-check text, .scene .p-done .tag-port text { fill: var(--sc-green); }
|
|
1426
|
-
.scene .p-failed .tag-check rect { stroke: rgba(244, 113, 95, 0.6); }
|
|
1427
|
-
.scene .p-failed .tag-check text { fill: var(--red-ink); }
|
|
1428
|
-
.scene .p-active .tag-check rect { stroke: rgba(242, 193, 95, 0.6); }
|
|
1429
|
-
|
|
1430
|
-
/* Part states. */
|
|
1431
|
-
.scene .part { outline: none; cursor: pointer; }
|
|
1432
|
-
.scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: trace 1.2s var(--ease) forwards; }
|
|
1433
|
-
.scene .part.p-planned .win-face, .scene .part.p-planned .win-bar, .scene .part.p-planned image, .scene .part.p-planned .raven { opacity: 0.25; }
|
|
1434
|
-
.scene .part.p-planned .shadow { opacity: 0.3; }
|
|
1435
|
-
.scene .part.p-idle { opacity: 0.55; }
|
|
1436
|
-
.scene .part.p-done { animation: settle-part 0.6s var(--spring) both; }
|
|
1437
|
-
@keyframes settle-part { from { transform: translateY(-6px); } }
|
|
1438
|
-
.scene .part.p-failed .f-top { fill: #3c1f1c; stroke: rgba(244, 113, 95, 0.75); }
|
|
1439
|
-
.scene .part.p-failed .f-left { fill: #2c1715; stroke: rgba(244, 113, 95, 0.5); }
|
|
1440
|
-
.scene .part.p-failed .f-right { fill: #211211; stroke: rgba(244, 113, 95, 0.4); }
|
|
1441
|
-
.scene .part.p-failed .win-face { fill: #1a0f0e; }
|
|
1442
|
-
.scene .part.p-waiting .f-top, .scene .part.p-waiting .f-left, .scene .part.p-waiting .f-right { stroke: rgba(242, 193, 95, 0.8); stroke-dasharray: 5 4; }
|
|
1443
|
-
.scene .part.p-waiting .win-face { fill: #17140c; }
|
|
1444
|
-
.scene .part.is-focus { filter: drop-shadow(0 0 10px rgba(242, 193, 95, 0.22)); }
|
|
1445
|
-
.scene .part.is-focus.p-active .frame .f-top { fill: #3b3a33; }
|
|
1446
|
-
.scene .part.is-selected .f-top, .scene .part.is-selected .f-left, .scene .part.is-selected .f-right { stroke: rgba(245, 245, 247, 0.85); stroke-width: 1.4; }
|
|
1447
|
-
.scene .part:focus-visible .f-top, .scene .part:focus-visible .f-left, .scene .part:focus-visible .f-right { stroke: var(--sc-amber); stroke-width: 2; }
|
|
1448
|
-
.scene .part:hover .f-top { stroke: rgba(255, 255, 255, 0.35); }
|
|
1449
|
-
|
|
1450
|
-
/* Phases: a waiting scene holds still around the part that needs you; a failed one marks it. */
|
|
1451
|
-
.scene.is-wait .part:not(.p-waiting):not([data-part="platform"]) { opacity: 0.5; transition: opacity 0.5s var(--ease); }
|
|
1452
|
-
.scene.is-wait .pipe-flow, .scene.is-wait .hover, .scene.is-wait .sketch, .scene.is-wait .token-g { animation-play-state: paused; }
|
|
1453
|
-
.scene.is-fail .part:not(.p-failed):not([data-part="platform"]) { opacity: 0.7; }
|
|
1454
|
-
.scene.is-done [data-part="platform"] .rim { stroke: rgba(111, 208, 140, 0.5); }
|
|
1455
|
-
.scene.is-stopped .part { opacity: 0.6; }
|
|
1456
|
-
.scene .fx-payoff .ring { fill: none; stroke: rgba(111, 208, 140, 0.55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: payoff 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
|
|
1457
|
-
.scene .fx-payoff .ring.two { stroke: rgba(245, 245, 247, 0.35); animation-delay: 0.22s; }
|
|
1458
|
-
@keyframes payoff { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.15); } }
|
|
1459
|
-
.scene.is-demo .tag rect { stroke-dasharray: 3 3; }
|
|
1290
|
+
|
|
1291
|
+
|
|
1292
|
+
|
|
1293
|
+
|
|
1294
|
+
|
|
1295
|
+
|
|
1296
|
+
|
|
1297
|
+
|
|
1298
|
+
|
|
1299
|
+
|
|
1300
|
+
|
|
1301
|
+
|
|
1302
|
+
|
|
1303
|
+
|
|
1304
|
+
|
|
1305
|
+
|
|
1306
|
+
|
|
1307
|
+
|
|
1308
|
+
|
|
1309
|
+
|
|
1310
|
+
|
|
1311
|
+
|
|
1312
|
+
|
|
1313
|
+
|
|
1314
|
+
|
|
1460
1315
|
|
|
1461
1316
|
.work-wait { margin-top: 16px; display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.35); }
|
|
1462
1317
|
.work-wait strong { font-size: 14px; font-weight: 600; color: var(--warn-ink); }
|
|
@@ -1474,91 +1329,34 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
|
|
|
1474
1329
|
.stage.is-work .stage-body.panel { left: 10px; right: 10px; width: auto; top: auto; max-height: 46%; }
|
|
1475
1330
|
.live-window { width: 180px; }
|
|
1476
1331
|
}
|
|
1477
|
-
@media (prefers-reduced-motion: reduce) {
|
|
1478
|
-
.scene *, .scene .part, .scene-caption, .scene-inspect { animation: none !important; transition: none !important; }
|
|
1479
|
-
.scene .p-done .pipe { stroke-dashoffset: 0; }
|
|
1480
|
-
.scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { stroke-dashoffset: 0; }
|
|
1481
|
-
.scene .p-active .pipe-flow { stroke-dasharray: none; }
|
|
1482
|
-
.scene .fx-payoff { display: none; }
|
|
1483
|
-
}
|
|
1484
1332
|
|
|
1485
1333
|
/* Scene light: brighter faces and a lit front edge, so objects read as solid against the floor. */
|
|
1486
1334
|
.canvas.is-scene:not(:has(.live-window)) { grid-template-columns: minmax(0, 1fr); }
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
.scene .p-active .unit-ring { stroke: var(--sc-amber); stroke-opacity: 0.95; }
|
|
1513
|
-
.scene .p-active .unit-led { fill: var(--sc-amber); fill-opacity: 1; animation: led 1.6s ease-in-out infinite; }
|
|
1514
|
-
.scene .p-done .unit-ring { stroke: var(--sc-green); stroke-opacity: 0.9; }
|
|
1515
|
-
.scene .p-done .unit-led { fill: var(--sc-green); fill-opacity: 1; }
|
|
1516
|
-
.scene .p-failed .unit-ring { stroke: var(--sc-red); stroke-opacity: 0.95; }
|
|
1517
|
-
.scene .p-failed .unit-led { fill: var(--sc-red); fill-opacity: 1; }
|
|
1518
|
-
.scene .p-waiting .unit-ring { stroke: var(--sc-amber); stroke-dasharray: 4 3; }
|
|
1519
|
-
.scene .p-waiting .unit-led { fill: var(--sc-amber); fill-opacity: 1; }
|
|
1520
|
-
.scene .p-done .unit-wrap .edge, .scene .p-active .unit-wrap .edge { stroke: rgba(255, 255, 255, 0.4); }
|
|
1521
|
-
|
|
1522
|
-
/* Supabase: green seams between layers, the bolt on a dark badge. */
|
|
1523
|
-
.scene .brand-supabase .cyl .f-top { fill: #2c3530; stroke: rgba(62, 207, 142, 0.55); }
|
|
1524
|
-
.scene .brand-supabase .cyl .f-left { fill: #1f2522; stroke: rgba(62, 207, 142, 0.22); }
|
|
1525
|
-
.scene .seam { fill: none; stroke: var(--brand); stroke-opacity: 0.7; stroke-width: 1.4; stroke-linecap: round; filter: url(#sc-glow); }
|
|
1526
|
-
.scene .p-active .seam { animation: led 1.8s ease-in-out infinite; }
|
|
1527
|
-
.scene .brand-badge { fill: #0f1512; stroke: rgba(62, 207, 142, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
|
|
1528
|
-
|
|
1529
|
-
/* Google: coloured caps on the pillars, four lights by the G. */
|
|
1530
|
-
.scene .cap.g-blue .f-top { fill: #4285F4; } .scene .cap.g-blue .f-left { fill: #3367c7; } .scene .cap.g-blue .f-right { fill: #2a55a6; }
|
|
1531
|
-
.scene .cap.g-green .f-top { fill: #34A853; } .scene .cap.g-green .f-left { fill: #2b8a45; } .scene .cap.g-green .f-right { fill: #237038; }
|
|
1532
|
-
.scene .brand-google .lintel .f-top { fill: #4a4a55; }
|
|
1533
|
-
.scene .lintel-plate { fill: #f5f5f7; }
|
|
1534
|
-
.scene .gdot { opacity: 0.85; }
|
|
1535
|
-
.scene .p-active .gdot { animation: led 1.4s ease-in-out infinite; }
|
|
1536
|
-
.scene .p-planned .cap .f-top, .scene .p-planned .cap .f-left, .scene .p-planned .cap .f-right { fill-opacity: 0.08; }
|
|
1537
|
-
|
|
1538
|
-
/* GitHub: a dark vault with a commit graph. */
|
|
1539
|
-
.scene .vault .f-top { fill: #2d333b; } .scene .vault .f-left { fill: #22272e; } .scene .vault .f-right { fill: #1c2128; }
|
|
1540
|
-
.scene .gitgraph path { fill: none; stroke: rgba(240, 246, 252, 0.7); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
|
|
1541
|
-
.scene .gitgraph .branch { stroke: #3fb950; }
|
|
1542
|
-
.scene .gitgraph circle { fill: #0d1117; stroke: rgba(240, 246, 252, 0.85); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
|
|
1543
|
-
.scene .gitgraph .branch-dot { stroke: #3fb950; }
|
|
1544
|
-
.scene .gitgraph .tip { fill: #f5f5f7; }
|
|
1545
|
-
.scene .p-active .gitgraph .tip { animation: led 1.4s ease-in-out infinite; }
|
|
1546
|
-
|
|
1547
|
-
/* Vercel: a black pad and the white triangle. */
|
|
1548
|
-
.scene .brand-vercel .ground .f-top { fill: #0c0c0e; } .scene .brand-vercel .ground .f-left { fill: #08080a; } .scene .brand-vercel .ground .f-right { fill: #050506; }
|
|
1549
|
-
.scene .brand-vercel .ground .edge { stroke: rgba(245, 245, 247, 0.35); }
|
|
1550
|
-
.scene .pyramid .f-left { fill: #f5f5f7; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.8; }
|
|
1551
|
-
.scene .pyramid .f-right { fill: #b4b4bc; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.8; }
|
|
1552
|
-
.scene .pyramid .edge { fill: none; stroke: #ffffff; stroke-width: 1.2; }
|
|
1553
|
-
.scene .part.p-planned .pyramid .f-left, .scene .part.p-planned .pyramid .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.3); }
|
|
1554
|
-
.scene .part.p-failed .pyramid .f-left { fill: #f2b3a9; }
|
|
1555
|
-
|
|
1556
|
-
/* npm's command unit and the framework plate on the dev server. */
|
|
1557
|
-
.scene .unit-wrap .shadow { opacity: 0.9; }
|
|
1558
|
-
@media (prefers-reduced-motion: reduce) {
|
|
1559
|
-
.scene .seam, .scene .gdot, .scene .gitgraph .tip { animation: none !important; }
|
|
1560
|
-
}
|
|
1561
|
-
.scene .sign .f-top { fill: #4a4a55; } .scene .sign .f-left { fill: #3a3a44; } .scene .sign .f-right { fill: #2a2a32; }
|
|
1335
|
+
|
|
1336
|
+
|
|
1337
|
+
|
|
1338
|
+
|
|
1339
|
+
|
|
1340
|
+
|
|
1341
|
+
|
|
1342
|
+
|
|
1343
|
+
|
|
1344
|
+
|
|
1345
|
+
|
|
1346
|
+
|
|
1347
|
+
|
|
1348
|
+
|
|
1349
|
+
|
|
1350
|
+
|
|
1351
|
+
|
|
1352
|
+
|
|
1353
|
+
|
|
1354
|
+
|
|
1355
|
+
|
|
1356
|
+
|
|
1357
|
+
|
|
1358
|
+
|
|
1359
|
+
|
|
1562
1360
|
|
|
1563
1361
|
/* ---------- the work panel: a title, a line, a few chips, big tiles. Detail waits behind "Details". ---------- */
|
|
1564
1362
|
.panel h1.wtitle { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; max-width: none; }
|
|
@@ -1570,7 +1368,7 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
|
|
|
1570
1368
|
.wbadge.is-warn { background: var(--warn); }
|
|
1571
1369
|
.wbadge.is-wait { background: var(--warn); }
|
|
1572
1370
|
.wbadge.is-stop, .wbadge.is-plan { background: var(--panel-3); color: var(--ink-2); }
|
|
1573
|
-
|
|
1371
|
+
|
|
1574
1372
|
.wline { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
|
|
1575
1373
|
.wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
|
|
1576
1374
|
.wchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
|
|
@@ -1631,19 +1429,6 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
|
|
|
1631
1429
|
.screen-body.is-live iframe.is-loaded { opacity: 1; }
|
|
1632
1430
|
.screen-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--ink-3); }
|
|
1633
1431
|
|
|
1634
|
-
/* Mascots: a provider's mark walks, rolls or hops along the connection while that step works. */
|
|
1635
|
-
.scene .walker-shadow { fill: rgba(0, 0, 0, 0.45); }
|
|
1636
|
-
.scene .walker-body { transform-box: fill-box; transform-origin: 50% 100%; }
|
|
1637
|
-
.scene .walker.is-walk .walker-body { animation: waddle 0.42s ease-in-out infinite alternate; }
|
|
1638
|
-
.scene .walker.is-hop .walker-body { animation: hop 0.6s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
|
|
1639
|
-
.scene .walker.is-roll .walker-body { transform-origin: 50% 50%; animation: roll 0.9s linear infinite; }
|
|
1640
|
-
.scene .walker image { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
|
|
1641
|
-
@keyframes waddle { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-3px) rotate(7deg); } }
|
|
1642
|
-
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.08, 0.9); } 45% { transform: translateY(-9px) scale(0.95, 1.06); } 70% { transform: translateY(-2px) scale(1, 1); } }
|
|
1643
|
-
@keyframes roll { to { transform: rotate(360deg); } }
|
|
1644
|
-
.scene.is-wait .walker { display: none; }
|
|
1645
|
-
@media (prefers-reduced-motion: reduce) { .scene .walker { display: none; } }
|
|
1646
|
-
|
|
1647
1432
|
/* ---------- windows: findings, agents, releases and chat in the same calm kit as the work panel ---------- */
|
|
1648
1433
|
|
|
1649
1434
|
/* Drawer frame: a round close, a short line. */
|
|
@@ -1778,7 +1563,7 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
|
|
|
1778
1563
|
.chat-typing { display: inline-flex; gap: 3px; }
|
|
1779
1564
|
.chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: typing 1.2s ease-in-out infinite; }
|
|
1780
1565
|
.chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
|
|
1781
|
-
|
|
1566
|
+
|
|
1782
1567
|
.chat-connect { margin: 0 14px 10px; padding: 12px 14px; border-radius: 14px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.3); }
|
|
1783
1568
|
.chat-connect p { font-size: 12.5px; line-height: 1.45; color: var(--warn-ink); }
|
|
1784
1569
|
.chat-connect-row { display: flex; gap: 8px; margin-top: 10px; }
|
|
@@ -1793,135 +1578,114 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
|
|
|
1793
1578
|
.side.chat .btn.send:disabled { background: var(--panel-3); color: var(--ink-3); }
|
|
1794
1579
|
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; } }
|
|
1795
1580
|
|
|
1796
|
-
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
.scene .ph-head .f-top { fill: #c9926a; } .scene .ph-head .f-left { fill: #a97750; } .scene .ph-head .f-right { fill: #8d6141; }
|
|
1824
|
-
.scene .ph-nose .f-top, .scene .ph-nose .f-left, .scene .ph-nose .f-right { fill: #1d1f27; }
|
|
1825
|
-
.scene .ph-leg .f-top, .scene .ph-leg .f-left, .scene .ph-leg .f-right { fill: #4a3020; }
|
|
1826
|
-
.scene .ph-eye { fill: #111; }
|
|
1827
|
-
.scene .ph-spike.c0 .f-top { fill: #F54E00; } .scene .ph-spike.c0 .f-left { fill: #c43e00; } .scene .ph-spike.c0 .f-right { fill: #9a3100; }
|
|
1828
|
-
.scene .ph-spike.c1 .f-top { fill: #F9BD2B; } .scene .ph-spike.c1 .f-left { fill: #d39c17; } .scene .ph-spike.c1 .f-right { fill: #a87b10; }
|
|
1829
|
-
.scene .ph-spike.c2 .f-top { fill: #3b63ff; } .scene .ph-spike.c2 .f-left { fill: #1D4AFF; } .scene .ph-spike.c2 .f-right { fill: #1538c4; }
|
|
1830
|
-
.scene .ph-bar.c0 .f-top { fill: #F54E00; } .scene .ph-bar.c0 .f-left { fill: #c43e00; } .scene .ph-bar.c0 .f-right { fill: #9a3100; }
|
|
1831
|
-
.scene .ph-bar.c1 .f-top { fill: #F9BD2B; } .scene .ph-bar.c1 .f-left { fill: #d39c17; } .scene .ph-bar.c1 .f-right { fill: #a87b10; }
|
|
1832
|
-
.scene .ph-bar.c2 .f-top { fill: #3b63ff; } .scene .ph-bar.c2 .f-left { fill: #1D4AFF; } .scene .ph-bar.c2 .f-right { fill: #1538c4; }
|
|
1833
|
-
.scene .hedgehog .ph-legs { transform-box: fill-box; }
|
|
1834
|
-
.scene .p-active .hedgehog .ph-legs.a { animation: step 0.16s ease-in-out infinite alternate; }
|
|
1835
|
-
.scene .p-active .hedgehog .ph-legs.b { animation: step 0.16s ease-in-out infinite alternate-reverse; }
|
|
1836
|
-
.scene .p-planned .hedgehog, .scene .p-idle .hedgehog { opacity: 0.35; }
|
|
1837
|
-
.scene .bar-g { transform-box: fill-box; transform-origin: 50% 100%; animation: pump 0.7s ease-in-out infinite alternate; }
|
|
1838
|
-
@keyframes pump { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
|
|
1839
|
-
.scene .evt.c0 { fill: #F54E00; } .scene .evt.c1 { fill: #F9BD2B; } .scene .evt.c2 { fill: #3b63ff; }
|
|
1840
|
-
.scene .evt { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }
|
|
1841
|
-
|
|
1842
|
-
/* GitHub commits, Vercel launch, Google orbit. */
|
|
1843
|
-
.scene .commit .token { fill: #3fb950; } .scene .commit .token-halo { fill: rgba(63, 185, 80, 0.25); }
|
|
1844
|
-
.scene .ring-launch { fill: none; stroke: #f5f5f7; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: launch 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; }
|
|
1845
|
-
@keyframes launch { from { opacity: 0.9; transform: translateY(0) scale(0.4); } to { opacity: 0; transform: translateY(-46px) scale(1.5); } }
|
|
1846
|
-
.scene .speed { stroke: rgba(245, 245, 247, 0.55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 14; animation: speed 0.45s linear infinite; }
|
|
1847
|
-
@keyframes speed { to { stroke-dashoffset: 22; } }
|
|
1848
|
-
.scene .orbit-spin { animation: orbit 1.1s linear infinite; transform-origin: 0 0; }
|
|
1849
|
-
.scene .orbit circle { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35)); }
|
|
1850
|
-
@keyframes orbit { to { transform: rotate(360deg); } }
|
|
1851
|
-
|
|
1852
|
-
.scene.is-wait .hype, .scene.is-wait .critter * { animation-play-state: paused; }
|
|
1853
|
-
@media (prefers-reduced-motion: reduce) { .scene .hype, .scene .tok { display: none; } .scene .critter * { animation: none !important; } }
|
|
1854
|
-
|
|
1855
|
-
/* ---------- premium kit: solid emblems, plinths, gateway doors, insight card, travelling payloads ---------- */
|
|
1856
|
-
.scene .emb-side { filter: brightness(0.34) saturate(0.85); }
|
|
1857
|
-
.scene .emb-face { filter: drop-shadow(0 0 0.02px rgba(0, 0, 0, 0)); }
|
|
1858
|
-
.scene .emb-sheen { fill: url(#sc-sheen); mix-blend-mode: screen; }
|
|
1859
|
-
.scene .emb-float { transform-box: fill-box; }
|
|
1860
|
-
.scene .p-active .emb-float { animation: hover 3.8s ease-in-out infinite; }
|
|
1861
|
-
.scene .p-done .emb-float { animation: settle-part 0.7s var(--spring) both; }
|
|
1862
|
-
.scene .part.p-planned .emblem, .scene .part.p-idle .emblem { opacity: 0.28; }
|
|
1863
|
-
.scene .part.p-planned .emb-sheen { display: none; }
|
|
1864
|
-
.scene .plinth .f-top { fill: #3a3a44; } .scene .plinth .f-left { fill: #2a2a31; } .scene .plinth .f-right { fill: #1f1f25; }
|
|
1865
|
-
.scene .emblem-unit .plinth .edge { stroke: var(--brand); stroke-opacity: 0.55; }
|
|
1866
|
-
.scene .door .f-top { fill: #52525e; } .scene .door .f-left { fill: #3c3c46; } .scene .door .f-right { fill: #2e2e36; }
|
|
1867
|
-
.scene .door.google .f-left { fill: #2f3f5e; } .scene .door.github .f-left { fill: #2d333b; }
|
|
1868
|
-
.scene .door .edge { stroke: rgba(255, 255, 255, 0.35); }
|
|
1869
|
-
.scene .cap.g-dark .f-top { fill: #2d333b; } .scene .cap.g-dark .f-left { fill: #22272e; } .scene .cap.g-dark .f-right { fill: #1c2128; }
|
|
1870
|
-
.scene .cap.g-light .f-top { fill: #f0f6fc; } .scene .cap.g-light .f-left { fill: #c9d1d9; } .scene .cap.g-light .f-right { fill: #a0a8b0; }
|
|
1871
|
-
.scene .brand-github .lintel .f-top { fill: #2d333b; } .scene .brand-github .lintel .f-left { fill: #22272e; } .scene .brand-github .lintel .f-right { fill: #1c2128; }
|
|
1872
|
-
.scene .insight .card .f-top { fill: #3a3a44; } .scene .insight .card .f-left { fill: #26262d; } .scene .insight .card .f-right { fill: #1b1b21; }
|
|
1873
|
-
.scene .insight .stand .f-top { fill: #2e2e36; } .scene .insight .stand .f-left { fill: #22222a; } .scene .insight .stand .f-right { fill: #18181d; }
|
|
1874
|
-
.scene .ins-bg { fill: #0f0f13; }
|
|
1875
|
-
.scene .ins-title { fill: rgba(255, 255, 255, 0.25); }
|
|
1876
|
-
.scene .ins-grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
|
|
1877
|
-
.scene .ins-line { fill: none; stroke: #F9BD2B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
|
|
1878
|
-
.scene .ins-dot { fill: #F54E00; }
|
|
1879
|
-
.scene .pl { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
|
|
1581
|
+
|
|
1582
|
+
|
|
1583
|
+
|
|
1584
|
+
|
|
1585
|
+
|
|
1586
|
+
|
|
1587
|
+
|
|
1588
|
+
|
|
1589
|
+
|
|
1590
|
+
|
|
1591
|
+
|
|
1592
|
+
|
|
1593
|
+
|
|
1594
|
+
|
|
1595
|
+
|
|
1596
|
+
|
|
1597
|
+
|
|
1598
|
+
|
|
1599
|
+
|
|
1600
|
+
|
|
1601
|
+
|
|
1602
|
+
|
|
1603
|
+
|
|
1604
|
+
|
|
1605
|
+
|
|
1606
|
+
|
|
1607
|
+
|
|
1880
1608
|
.wproviders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
|
|
1881
1609
|
.wprov { display: grid; place-items: center; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); transition: border-color 0.14s, background 0.14s; }
|
|
1882
1610
|
.wprov:hover { background: rgba(255, 255, 255, 0.07); }
|
|
1883
1611
|
.wprov.on { border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.09); }
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
.scene .mx-body .f-top { fill: #e0b07a; } .scene .mx-body .f-left { fill: #c49360; } .scene .mx-body .f-right { fill: #a47746; }
|
|
1897
|
-
.scene .mx-face .f-top { fill: #f0cfa2; } .scene .mx-face .f-left { fill: #ddb684; } .scene .mx-face .f-right { fill: #bf9564; }
|
|
1898
|
-
.scene .mx-spike .f-top { fill: #4a3524; } .scene .mx-spike .f-left { fill: #35251a; } .scene .mx-spike .f-right { fill: #251912; }
|
|
1899
|
-
.scene .mx-leg .f-top, .scene .mx-leg .f-left, .scene .mx-leg .f-right { fill: #6b4a2e; }
|
|
1900
|
-
.scene .mx-nose .f-top, .scene .mx-nose .f-left, .scene .mx-nose .f-right { fill: #15161b; }
|
|
1901
|
-
.scene .mx-eye { fill: #15161b; }
|
|
1902
|
-
.scene .mx-cheek { fill: #f08a6b; opacity: 0.8; }
|
|
1903
|
-
.scene .mx-pole .f-top { fill: #c8c8d0; } .scene .mx-pole .f-left { fill: #9a9aa5; } .scene .mx-pole .f-right { fill: #74747e; }
|
|
1904
|
-
.scene .mx-flag { stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.6; }
|
|
1905
|
-
.scene .flag-text { fill: #fff; font: 800 0.26px/1 var(--font-sans, system-ui); letter-spacing: 0.02px; }
|
|
1906
|
-
.scene .mx-pole .edge, .scene .mx-body .edge, .scene .mx-face .edge, .scene .mx-spike .edge, .scene .mx-leg .edge, .scene .mx-nose .edge { stroke: rgba(255, 240, 220, 0.3); }
|
|
1907
|
-
.scene .sparkle { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
|
|
1908
|
-
.scene .burst { fill: rgba(137, 87, 229, 0.35); stroke: #c9b3ff; stroke-width: 2; }
|
|
1909
|
-
.scene .say { fill: #8957e5; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
|
|
1910
|
-
.scene .say-text { fill: #fff; font: 800 11px/1 var(--font-sans, system-ui); letter-spacing: 0.02em; }
|
|
1911
|
-
@media (prefers-reduced-motion: reduce) { .scene .skit { display: none; } }
|
|
1912
|
-
.scene .mx-belly { fill: #f7e3c4; }
|
|
1913
|
-
.scene .mx-snout .f-top { fill: #f7e3c4; } .scene .mx-snout .f-left { fill: #e6cba6; } .scene .mx-snout .f-right { fill: #c9ab84; }
|
|
1914
|
-
.scene .mx-brow { fill: #4a2a16; }
|
|
1915
|
-
.scene .mx-hat .f-top { fill: #ffd25a; } .scene .mx-hat .f-left { fill: #F9BD2B; } .scene .mx-hat .f-right { fill: #c9921a; }
|
|
1916
|
-
.scene .mx-hat-ridge .f-top, .scene .mx-hat-ridge .f-left, .scene .mx-hat-ridge .f-right { fill: #e0a51f; }
|
|
1917
|
-
.scene .mx-hat .edge, .scene .mx-snout .edge { stroke: rgba(255, 245, 220, 0.45); }
|
|
1918
|
-
.scene .smudge { fill: rgba(214, 206, 192, 0.3); filter: blur(0.05px); }
|
|
1919
|
-
.scene .smudge .streak { fill: none; stroke: rgba(214, 206, 192, 0.35); stroke-width: 0.07; stroke-linecap: round; }
|
|
1920
|
-
.scene .bubble { fill: rgba(220, 240, 255, 0.18); stroke: rgba(235, 248, 255, 0.85); stroke-width: 1; }
|
|
1921
|
-
.scene .foam { fill: rgba(250, 252, 255, 0.85); }
|
|
1612
|
+
|
|
1613
|
+
|
|
1614
|
+
|
|
1615
|
+
|
|
1616
|
+
|
|
1617
|
+
|
|
1618
|
+
|
|
1619
|
+
|
|
1620
|
+
|
|
1621
|
+
|
|
1622
|
+
|
|
1623
|
+
|
|
1922
1624
|
|
|
1923
1625
|
/* Review: files Undo leaves alone, and putting one back by hand. */
|
|
1924
1626
|
.work-diff-file h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
1925
1627
|
.work-diff-file .diff-note { font: 600 11px/1 var(--font); color: rgba(245, 245, 247, 0.6); padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
|
|
1926
1628
|
.work-diff-file .diff-note.is-warn { color: #f2c15f; background: rgba(242, 193, 95, 0.12); }
|
|
1927
1629
|
.work-diff-file .diff-restore { margin-left: auto; font-size: 12px; }
|
|
1630
|
+
|
|
1631
|
+
/* ---------- All actions: plain rows for what runs now, a wall of icons for what is coming ---------- */
|
|
1632
|
+
.act-catalog { display: grid; gap: 32px; }
|
|
1633
|
+
.act-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
|
|
1634
|
+
.act-search { position: relative; flex: 1 1 240px; max-width: 320px; }
|
|
1635
|
+
.act-search-ico { position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
|
|
1636
|
+
.act-search-ico svg { display: block; width: 100%; height: 100%; }
|
|
1637
|
+
.act-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 13.5px var(--font); }
|
|
1638
|
+
.act-search input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
|
|
1639
|
+
.act-chips { display: flex; flex-wrap: wrap; gap: 2px; }
|
|
1640
|
+
.act-chip { height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font: 500 13px var(--font); cursor: pointer; transition: background 0.15s, color 0.15s; }
|
|
1641
|
+
.act-chip:hover { color: var(--ink); }
|
|
1642
|
+
.act-chip[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
|
|
1643
|
+
.act-group[hidden], .act-empty[hidden], [data-act][hidden] { display: none !important; }
|
|
1644
|
+
.act-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
|
|
1645
|
+
.act-head h4 { font-size: 13px; font-weight: 500; color: var(--ink-2); }
|
|
1646
|
+
.act-head span { color: var(--ink-3); font-size: 12.5px; }
|
|
1647
|
+
.act-count { font-weight: inherit; }
|
|
1648
|
+
|
|
1649
|
+
/* The mark: the provider's own logo in its colours, or a plain white icon, on the same quiet plate. */
|
|
1650
|
+
.act-art { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: #141418; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
|
|
1651
|
+
.act-art img { width: 50%; height: 50%; object-fit: contain; }
|
|
1652
|
+
.act-ico { display: block; width: 46%; height: 46%; }
|
|
1653
|
+
.act-ico svg { display: block; width: 100%; height: 100%; }
|
|
1654
|
+
|
|
1655
|
+
/* Ready now: one row each, the button on the right. */
|
|
1656
|
+
.act-rows, .act-items { list-style: none; margin: 0; padding: 0; }
|
|
1657
|
+
.act-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--line); transition: background 0.2s var(--ease); }
|
|
1658
|
+
.act-row:hover { background: rgba(255, 255, 255, 0.025); }
|
|
1659
|
+
.act-row h5 { font-size: 15px; font-weight: 500; color: var(--ink); }
|
|
1660
|
+
.act-row p { margin-top: 3px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
|
|
1661
|
+
.act-side { display: flex; align-items: center; gap: 14px; }
|
|
1662
|
+
.act-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
|
|
1663
|
+
.act-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
|
|
1664
|
+
.act-status.is-ready i, .act-status.is-done i { background: var(--green); }
|
|
1665
|
+
.act-go { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 500 13px var(--font); white-space: nowrap; cursor: pointer; transition: background 0.15s; }
|
|
1666
|
+
.act-go:hover { background: rgba(255, 255, 255, 0.08); }
|
|
1667
|
+
.act-go.is-primary { background: #f5f5f5; box-shadow: none; color: #0a0a0b; }
|
|
1668
|
+
.act-go.is-primary:hover { background: #fff; }
|
|
1669
|
+
.act-go .ico svg { width: 12px; height: 12px; }
|
|
1670
|
+
|
|
1671
|
+
/* Coming next: the icon is the thing. Big mark, its name under it, nothing boxed. */
|
|
1672
|
+
.act-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 28px 8px; padding-top: 16px; }
|
|
1673
|
+
.act-item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
|
|
1674
|
+
.act-item .act-art { width: 64px; height: 64px; border-radius: 18px; transition: transform 0.2s var(--ease), box-shadow 0.2s; }
|
|
1675
|
+
.act-item:hover .act-art { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px rgba(0, 0, 0, 0.45); }
|
|
1676
|
+
.act-item strong { max-width: 16ch; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; }
|
|
1677
|
+
.act-peek { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-top: auto; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 12px var(--font); white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s; }
|
|
1678
|
+
.act-peek:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
|
|
1679
|
+
.act-peek .ico svg { width: 10px; height: 10px; }
|
|
1680
|
+
.act-soon { margin-top: auto; color: var(--ink-3); font-size: 12px; line-height: 24px; white-space: nowrap; }
|
|
1681
|
+
.act-empty { padding: 18px 0; color: var(--ink-3); font-size: 14px; text-align: center; }
|
|
1682
|
+
@media (max-width: 760px) {
|
|
1683
|
+
.act-items { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
|
|
1684
|
+
.act-search { max-width: none; }
|
|
1685
|
+
.act-row { grid-template-columns: auto minmax(0, 1fr); }
|
|
1686
|
+
.act-side { grid-column: 2; }
|
|
1687
|
+
}
|
|
1688
|
+
@media (prefers-reduced-motion: reduce) { .act-item .act-art, .act-item:hover .act-art { transition: none; transform: none; } }
|
|
1689
|
+
|
|
1690
|
+
@keyframes badge-in { from { transform: scale(0.6); opacity: 0; } }
|
|
1691
|
+
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viberaven/cli",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.10",
|
|
4
4
|
"description": "VibeRaven CLI and local Studio: Supabase RLS and security check for AI-built Vercel + Supabase apps, with an agent task list and fix prompts.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "VibeRaven",
|