@volter/world-console 3.0.4 → 3.0.6
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/client/console.css +47 -0
- package/client/console.tsx +429 -75
- package/dist/client/console.bundle.js +13 -13
- package/dist/client/console.css +47 -0
- package/dist/client/console.tsx +429 -75
- package/dist/client/main.bundle.js +95 -95
- package/package.json +3 -3
package/client/console.css
CHANGED
|
@@ -610,3 +610,50 @@ main.app.home { max-width: none; }
|
|
|
610
610
|
.ws-rule-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
|
|
611
611
|
.ws-rule-row select { width: auto; }
|
|
612
612
|
.ws-rules fieldset.choice { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 6px; }
|
|
613
|
+
/* THE BOARD: sections are regions with a name, as a canvas app's are: a quiet fill behind the frames, the name a small tag
|
|
614
|
+
above the top left that keeps its size at every zoom; a selected frame or section is outlined in the accent */
|
|
615
|
+
.canvas .react-flow__node-section { padding: 0; border: 0; background: none; }
|
|
616
|
+
.section-box { width: 100%; height: 100%; border: 1px solid var(--line-strong); border-radius: 4px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
|
|
617
|
+
.section-box.on { outline: 2px solid var(--accent); outline-offset: 0; }
|
|
618
|
+
.section-tag { display: flex; align-items: center; gap: 2px; }
|
|
619
|
+
.section-tag button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 0; border-radius: 4px; background: var(--surface-2); color: var(--ink); font: 600 12px/1.4 var(--sans); }
|
|
620
|
+
.section-tag button.on { background: var(--accent); color: var(--surface); }
|
|
621
|
+
.section-tag .mark { width: 14px; height: 14px; }
|
|
622
|
+
.frame.picked { outline: 4px solid var(--accent-soft); outline-offset: 3px; }
|
|
623
|
+
.float.board-tools { display: flex; gap: 4px; padding: 4px; }
|
|
624
|
+
.float.board-tools button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px; }
|
|
625
|
+
.float.board-tools kbd { font: 11px var(--mono); color: var(--muted); }
|
|
626
|
+
.frame-none { height: 100%; display: grid; place-content: center; text-align: center; gap: 8px; padding: 40px; font-size: 24px; color: var(--muted); background: repeating-linear-gradient(135deg, var(--surface-2) 0 18px, var(--surface) 18px 36px); }
|
|
627
|
+
.frame-none p { margin: 0; }
|
|
628
|
+
.frame-label select, .frame-label button { font-size: 12px; padding: 1px 6px; }
|
|
629
|
+
.board-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
|
|
630
|
+
.board-tabs button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 2px 10px; font-size: 12.5px; color: var(--ink); }
|
|
631
|
+
.board-tabs button.on { background: var(--accent-soft); border-color: var(--accent); }
|
|
632
|
+
.board-acts { display: flex; gap: 4px; margin-top: 4px; }
|
|
633
|
+
.board-acts button { font-size: 12px; padding: 2px 6px; }
|
|
634
|
+
.layer-list button.layer-section { font-size: 12px; font-weight: 600; }
|
|
635
|
+
.layer-list .mark { width: 16px; height: 16px; }
|
|
636
|
+
.layer-list.inner { border-top: 0; margin: 0; padding: 0 0 0 14px; }
|
|
637
|
+
.board-add { width: 100%; margin-top: 8px; font-size: 12.5px; }
|
|
638
|
+
.board-hidden { margin-top: 8px; font-size: 12.5px; }
|
|
639
|
+
.board-elsewhere { width: 100%; margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; border: 1px solid var(--line); background: transparent; border-radius: 8px; padding: 4px 8px; }
|
|
640
|
+
.pad-s { padding: 6px 8px; margin: 0; font-size: 12.5px; }
|
|
641
|
+
.float.hint.using { display: flex; align-items: center; gap: 10px; pointer-events: auto; padding: 4px 6px 4px 12px; }
|
|
642
|
+
.float.hint.using button { padding: 2px 10px; font-size: 12px; }
|
|
643
|
+
.float.hint.using kbd { font: 11px var(--mono); color: var(--muted); }
|
|
644
|
+
/* THE COMPARISON: before and now side by side over the board's top right, the changes in words under them */
|
|
645
|
+
.float.compare-panel { max-height: calc(100vh - 32px); overflow-y: auto; padding: 0; }
|
|
646
|
+
.compare { display: grid; gap: 12px; padding: 12px 14px; width: 900px; max-width: calc(100vw - 320px); }
|
|
647
|
+
.compare-head { display: flex; align-items: center; gap: 8px; }
|
|
648
|
+
.compare-head .mode { flex: 1; }
|
|
649
|
+
.compare-sides { display: flex; gap: 16px; flex-wrap: wrap; }
|
|
650
|
+
.compare-sides figure { margin: 0; display: grid; gap: 6px; }
|
|
651
|
+
.compare-sides figcaption { font-size: 12px; font-weight: 600; color: var(--muted); }
|
|
652
|
+
.compare-thumb { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
|
|
653
|
+
.compare-thumb iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
|
|
654
|
+
.compare-note { width: 420px; height: 269px; margin: 0; display: grid; place-content: center; text-align: center; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 6px; font-size: 13px; }
|
|
655
|
+
.compare-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
|
|
656
|
+
.compare-acts > li { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: baseline; }
|
|
657
|
+
.compare-acts ul { margin: 4px 0 0; padding-left: 16px; }
|
|
658
|
+
.compare-all { font-size: 13px; }
|
|
659
|
+
.frame-label button.frame-changed { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0 4px; color: inherit; }
|