viberoom 0.5.9 → 0.6.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 +2 -0
- package/dist/agent-health.js +52 -0
- package/dist/duration.js +12 -0
- package/dist/hub.js +9 -0
- package/dist/launcher.js +19 -2
- package/dist/main.js +77 -34
- package/dist/mcp-skills-server.js +24 -0
- package/dist/persona.js +69 -14
- package/dist/quotes.js +41 -0
- package/dist/recipes.js +28 -1
- package/dist/room.js +136 -33
- package/dist/rows.js +19 -0
- package/dist/server.js +251 -27
- package/dist/update.js +32 -2
- package/dist/viewer.js +69 -2
- package/dist/ws.js +175 -0
- package/package.json +2 -1
- package/ui/app.css +341 -251
- package/ui/app.js +1283 -278
- package/ui/avatars.js +6 -4
- package/ui/components.css +140 -0
- package/ui/components.js +342 -0
- package/ui/icons.js +9 -0
- package/ui/index.html +58 -36
- package/ui/theme.css +450 -183
- package/ui/tokens.js +620 -0
- package/ui/ui.js +113 -0
package/ui/theme.css
CHANGED
|
@@ -7,128 +7,468 @@
|
|
|
7
7
|
@import url("/fonts/source-code-pro.css");
|
|
8
8
|
:root {
|
|
9
9
|
--primary: #5b5bf0;
|
|
10
|
+
--primary-light: #6a6af7;
|
|
10
11
|
--primary-deep: #4f4fe0;
|
|
11
12
|
--primary-dark: #4343cc;
|
|
12
|
-
--
|
|
13
|
+
--violet: #8b5cf6;
|
|
14
|
+
--iris: #6d5dfc;
|
|
13
15
|
--ink: #1c1b33;
|
|
14
16
|
--ink-2: #2c2b4a;
|
|
15
17
|
--ink-3: #5c5c80;
|
|
18
|
+
--indigo: #1f1d3a;
|
|
16
19
|
--muted: #8f8fb0;
|
|
17
20
|
--faint: #b3b3cc;
|
|
18
21
|
--placeholder: #a3a3c0;
|
|
22
|
+
--grey: #9ca3af;
|
|
23
|
+
--white: #ffffff;
|
|
24
|
+
--black: #000000;
|
|
19
25
|
--bg: #eef0fb;
|
|
20
|
-
--panel: #ffffff;
|
|
21
|
-
--card: #ffffff;
|
|
22
26
|
--soft: #f6f6fb;
|
|
23
27
|
--softer: #f1f1f8;
|
|
24
28
|
--lav: #eef0fb;
|
|
25
29
|
--lav-2: #e4e6fb;
|
|
30
|
+
--canvas-top: #fdfdff;
|
|
31
|
+
--canvas-mid: #f7f7fe;
|
|
32
|
+
--canvas-bottom: #f0f1fd;
|
|
33
|
+
--shadow-ink: #322878;
|
|
26
34
|
--mint: #d9f7e8;
|
|
35
|
+
--mint-2: #c4efdb;
|
|
36
|
+
--mint-tint: #e4f7ee;
|
|
27
37
|
--mint-ink: #1d8f6a;
|
|
38
|
+
--forest: #14533f;
|
|
28
39
|
--green: #2fc97e;
|
|
29
40
|
--warm: #fff3cc;
|
|
41
|
+
--warm-2: #ffeaa8;
|
|
30
42
|
--warm-ink: #b8860b;
|
|
43
|
+
--bronze: #5a4200;
|
|
44
|
+
--amber: #f5a524;
|
|
45
|
+
--honey: #ffcf8f;
|
|
46
|
+
--spark: #ffd166;
|
|
31
47
|
--peach: #ffe3cc;
|
|
48
|
+
--peach-2: #ffe4d6;
|
|
49
|
+
--orange: #ff8a3d;
|
|
50
|
+
--orange-light: #ff9447;
|
|
51
|
+
--orange-deep: #e8642a;
|
|
52
|
+
--orange-dark: #c9461c;
|
|
53
|
+
--ember: #ff7a45;
|
|
54
|
+
--ember-deep: #f0452c;
|
|
32
55
|
--rose: #fff0ee;
|
|
56
|
+
--rose-2: #ffe1dd;
|
|
33
57
|
--rose-ink: #e0554a;
|
|
58
|
+
--rose-dark: #c9463c;
|
|
59
|
+
--pink: #be185d;
|
|
60
|
+
--pink-tint: #fff1f7;
|
|
34
61
|
--sky: #dcefff;
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--primary-ghost: rgba(91, 91, 240, 0.10);
|
|
39
|
-
--mint-soft: var(--mint);
|
|
40
|
-
--warn: #f5a524;
|
|
41
|
-
--warn-soft: var(--warm);
|
|
42
|
-
--danger: var(--rose-ink);
|
|
43
|
-
--danger-soft: var(--rose);
|
|
44
|
-
--danger-dark: #c9463c;
|
|
45
|
-
--info: #4f8ef7;
|
|
46
|
-
--info-soft: var(--sky);
|
|
47
|
-
--muted-2: var(--faint);
|
|
48
|
-
--panel-soft: var(--soft);
|
|
49
|
-
--panel-tint: var(--soft);
|
|
50
|
-
--border: var(--lav);
|
|
51
|
-
--border-strong: var(--lav-2);
|
|
52
|
-
--mine: var(--grad-primary);
|
|
53
|
-
--mine-border: transparent;
|
|
54
|
-
--text: var(--ink);
|
|
55
|
-
--ok: var(--green);
|
|
62
|
+
--blue: #4f8ef7;
|
|
63
|
+
--blue-deep: #2a6fbf;
|
|
64
|
+
--blue-soft: #7aa7ff;
|
|
56
65
|
--orchid: #f3e4fb;
|
|
57
66
|
--orchid-ink: #8a3fc2;
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
--
|
|
63
|
-
--
|
|
67
|
+
--orchid-mid: #b06be0;
|
|
68
|
+
--periwinkle: #cdcdf9;
|
|
69
|
+
--periwinkle-deep: #a9a9f5;
|
|
70
|
+
--deep: #26244a;
|
|
71
|
+
--deep-gutter: #211f43;
|
|
72
|
+
--deep-ink: #f4f2ff;
|
|
73
|
+
--deep-muted: #7c78ad;
|
|
74
|
+
--deep-head: #e8e6ff;
|
|
75
|
+
--deep-meta: #a9a5d8;
|
|
76
|
+
--lav-grey: #c9c6ea;
|
|
77
|
+
--lilac: #b9a7ff;
|
|
78
|
+
--seafoam: #8fe3bd;
|
|
79
|
+
--azure: #9cd2ff;
|
|
80
|
+
--salmon: #ff9f9f;
|
|
81
|
+
--magenta: #f2b8ff;
|
|
82
|
+
--st-ready: #d9f7e8;
|
|
83
|
+
--st-ready-ink: #1d8f6a;
|
|
84
|
+
--st-ready-dot: #2fc97e;
|
|
85
|
+
--st-waiting: #dcefff;
|
|
86
|
+
--st-waiting-ink: #2a6fbf;
|
|
87
|
+
--st-waiting-dot: #7aa7ff;
|
|
88
|
+
--st-thinking: #fff3cc;
|
|
89
|
+
--st-thinking-ink: #b8860b;
|
|
90
|
+
--st-thinking-dot: #f5a524;
|
|
91
|
+
--st-writing: #f3e4fb;
|
|
92
|
+
--st-writing-ink: #8a3fc2;
|
|
93
|
+
--st-writing-dot: #b06be0;
|
|
94
|
+
--st-error: #fff0ee;
|
|
95
|
+
--st-error-ink: #e0554a;
|
|
96
|
+
--st-error-dot: #e0554a;
|
|
97
|
+
--st-asleep: #f1f1f8;
|
|
98
|
+
--st-asleep-ink: #8f8fb0;
|
|
99
|
+
--st-asleep-dot: #b3b3cc;
|
|
64
100
|
--attention: #ff8a3d;
|
|
65
101
|
--attention-ink: #c9461c;
|
|
66
102
|
--attention-grad: linear-gradient(135deg, #ff9447, #e8642a);
|
|
67
103
|
--attention-shadow: 0 8px 18px -10px rgba(232, 100, 42, 0.7);
|
|
68
104
|
--unread-grad: linear-gradient(135deg, #ff7a45, #f0452c);
|
|
69
105
|
--note-hover: #ffeaa8;
|
|
70
|
-
--done:
|
|
71
|
-
--done-ink:
|
|
106
|
+
--done: #d9f7e8;
|
|
107
|
+
--done-ink: #1d8f6a;
|
|
72
108
|
--done-hover: #c4efdb;
|
|
73
109
|
--tick-mine: #cdcdf9;
|
|
74
110
|
--tick-mine-view: #a9a9f5;
|
|
75
111
|
--tick-fallback: #9ca3af;
|
|
76
112
|
--unseen-ink: #be185d;
|
|
77
113
|
--unseen-bg: #fff1f7;
|
|
78
|
-
--
|
|
79
|
-
--
|
|
80
|
-
--
|
|
81
|
-
--
|
|
82
|
-
--
|
|
83
|
-
--
|
|
114
|
+
--grad-primary: linear-gradient(135deg, #6a6af7, #4f4fe0);
|
|
115
|
+
--panel: #ffffff;
|
|
116
|
+
--card: #ffffff;
|
|
117
|
+
--primary-soft: #eef0fb;
|
|
118
|
+
--primary-softer: #f6f6fb;
|
|
119
|
+
--primary-ghost: rgba(91, 91, 240, 0.1);
|
|
120
|
+
--mint-soft: #d9f7e8;
|
|
121
|
+
--warn: #f5a524;
|
|
122
|
+
--warn-soft: #fff3cc;
|
|
123
|
+
--danger: #e0554a;
|
|
124
|
+
--danger-soft: #fff0ee;
|
|
125
|
+
--danger-dark: #c9463c;
|
|
126
|
+
--info: #4f8ef7;
|
|
127
|
+
--info-soft: #dcefff;
|
|
128
|
+
--muted-2: #b3b3cc;
|
|
129
|
+
--panel-soft: #f6f6fb;
|
|
130
|
+
--panel-tint: #f6f6fb;
|
|
131
|
+
--border: #eef0fb;
|
|
132
|
+
--border-strong: #e4e6fb;
|
|
133
|
+
--mine: linear-gradient(135deg, #6a6af7, #4f4fe0);
|
|
134
|
+
--mine-border: transparent;
|
|
135
|
+
--text: #1c1b33;
|
|
136
|
+
--ok: #2fc97e;
|
|
84
137
|
--edge: 0 2px 0 rgba(28, 27, 51, 0.04);
|
|
85
138
|
--shadow-tile: 0 4px 12px -4px rgba(28, 27, 51, 0.15);
|
|
86
139
|
--shadow-pop: 0 10px 24px -10px rgba(28, 27, 51, 0.25);
|
|
87
140
|
--shadow-primary: 0 8px 18px -8px rgba(91, 91, 240, 0.8);
|
|
88
141
|
--shadow-dialog: 0 30px 60px -30px rgba(50, 40, 120, 0.4);
|
|
89
|
-
--shadow-1:
|
|
90
|
-
--shadow-2:
|
|
91
|
-
--shadow-card:
|
|
142
|
+
--shadow-1: 0 2px 0 rgba(28, 27, 51, 0.04);
|
|
143
|
+
--shadow-2: 0 30px 60px -30px rgba(50, 40, 120, 0.4);
|
|
144
|
+
--shadow-card: 0 2px 0 rgba(28, 27, 51, 0.04);
|
|
92
145
|
--shadow-ctl: none;
|
|
93
|
-
--shadow-ctl-hover:
|
|
94
|
-
--shadow-glow:
|
|
146
|
+
--shadow-ctl-hover: 0 4px 12px -4px rgba(28, 27, 51, 0.15);
|
|
147
|
+
--shadow-glow: 0 8px 18px -8px rgba(91, 91, 240, 0.8);
|
|
95
148
|
--shadow-inset: none;
|
|
96
|
-
--shadow-soft:
|
|
97
|
-
--shadow:
|
|
149
|
+
--shadow-soft: 0 2px 0 rgba(28, 27, 51, 0.04);
|
|
150
|
+
--shadow: 0 2px 0 rgba(28, 27, 51, 0.04);
|
|
151
|
+
--grad-canvas: radial-gradient(900px 520px at 100% 100%, rgba(91, 91, 240, 0.06), transparent 70%), radial-gradient(640px 380px at 0% 0%, rgba(47, 201, 126, 0.04), transparent 70%), linear-gradient(165deg, #fdfdff 0%, #f7f7fe 55%, #f0f1fd 100%);
|
|
152
|
+
--canvas-pattern: radial-gradient(circle at 1px 1px, rgba(91, 91, 240, 0.13) 0.9px, transparent 1.6px);
|
|
153
|
+
--canvas-pattern-size: 22px 22px;
|
|
154
|
+
--grad-page: #eef0fb;
|
|
155
|
+
--sb-w: 8px;
|
|
156
|
+
--sb-thumb: rgba(91, 91, 240, 0.22);
|
|
157
|
+
--sb-thumb-hover: rgba(91, 91, 240, 0.45);
|
|
158
|
+
--r-xs: 8px;
|
|
159
|
+
--r-sm: 12px;
|
|
160
|
+
--r-md: 14px;
|
|
161
|
+
--r-lg: 18px;
|
|
162
|
+
--r-xl: 18px;
|
|
163
|
+
--r-pill: 99px;
|
|
98
164
|
--font: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
|
|
99
165
|
--mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;
|
|
100
|
-
--fs-
|
|
101
|
-
--fs-
|
|
102
|
-
--fs-
|
|
103
|
-
--fs-
|
|
104
|
-
--fs-
|
|
105
|
-
--fs-
|
|
166
|
+
--fs-scale: 1;
|
|
167
|
+
--fs-xs: calc(11px * var(--fs-scale));
|
|
168
|
+
--fs-sm: calc(12px * var(--fs-scale));
|
|
169
|
+
--fs-md: calc(14px * var(--fs-scale));
|
|
170
|
+
--fs-lg: calc(16px * var(--fs-scale));
|
|
171
|
+
--fs-xl: calc(18px * var(--fs-scale));
|
|
172
|
+
--fs-2xl: calc(22px * var(--fs-scale));
|
|
106
173
|
--t-fast: 120ms;
|
|
107
174
|
--t-base: 200ms;
|
|
108
175
|
--t-slow: 320ms;
|
|
109
176
|
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
110
177
|
--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
111
|
-
--
|
|
112
|
-
--
|
|
113
|
-
--
|
|
114
|
-
--
|
|
115
|
-
--
|
|
116
|
-
--
|
|
117
|
-
--
|
|
178
|
+
--page-bg: #eef0fb;
|
|
179
|
+
--page-ink: #1c1b33;
|
|
180
|
+
--page-selection: #e4e6fb;
|
|
181
|
+
--focus-ring: rgba(91, 91, 240, 0.35);
|
|
182
|
+
--link-ink: #5b5bf0;
|
|
183
|
+
--link-underline: rgba(91, 91, 240, 0.35);
|
|
184
|
+
--btn-bg: #f1f1f8;
|
|
185
|
+
--btn-ink: #5c5c80;
|
|
186
|
+
--btn-hover-bg: #eef0fb;
|
|
187
|
+
--btn-hover-ink: #5b5bf0;
|
|
188
|
+
--btn-on-primary: #ffffff;
|
|
189
|
+
--btn-secondary-bg: #ffffff;
|
|
190
|
+
--btn-soft-bg: #eef0fb;
|
|
191
|
+
--btn-soft-hover-bg: #e4e6fb;
|
|
192
|
+
--btn-ghost-ink: #8f8fb0;
|
|
193
|
+
--btn-ghost-hover-bg: #f6f6fb;
|
|
194
|
+
--btn-danger-bg: #fff0ee;
|
|
195
|
+
--btn-danger-ink: #e0554a;
|
|
196
|
+
--btn-danger-hover-bg: #ffe1dd;
|
|
197
|
+
--btn-danger-solid-ink: #ffffff;
|
|
198
|
+
--btn-danger-solid-hover-bg: #c9463c;
|
|
199
|
+
--btn-danger-solid-shadow: 0 8px 18px -8px rgba(224, 85, 74, 0.8);
|
|
200
|
+
--btn-spinner-track: rgba(255, 255, 255, 0.5);
|
|
201
|
+
--btn-spinner-head: #ffffff;
|
|
202
|
+
--btn-spinner-track-quiet: #e4e6fb;
|
|
203
|
+
--btn-spinner-head-quiet: #5b5bf0;
|
|
204
|
+
--btn-disabled-opacity: 0.45;
|
|
205
|
+
--btn-dark-bg: rgba(255, 255, 255, 0.12);
|
|
206
|
+
--btn-dark-ink: #ffffff;
|
|
207
|
+
--btn-dark-hover-bg: #5b5bf0;
|
|
208
|
+
--btn-warn-ink: #b8860b;
|
|
209
|
+
--btn-warn-hover-bg: #fff3cc;
|
|
210
|
+
--btn-inverse-bg: rgba(255, 255, 255, 0.92);
|
|
211
|
+
--btn-inverse-ink: #c9461c;
|
|
212
|
+
--btn-inverse-hover-bg: #ffffff;
|
|
213
|
+
--btn-link-ink: #5b5bf0;
|
|
214
|
+
--btn-ok-bg: #d9f7e8;
|
|
215
|
+
--btn-ok-ink: #1d8f6a;
|
|
216
|
+
--btn-ok-hover-bg: #c4efdb;
|
|
217
|
+
--btn-paper-bg: #ffffff;
|
|
218
|
+
--btn-paper-ink: #5c5c80;
|
|
219
|
+
--btn-paper-hover-bg: #f6f6fb;
|
|
220
|
+
--btn-h: 42px;
|
|
221
|
+
--btn-h-sm: 34px;
|
|
222
|
+
--btn-h-xs: 24px;
|
|
223
|
+
--btn-h-lg: 48px;
|
|
224
|
+
--btn-h-cta: 46px;
|
|
225
|
+
--btn-fs: calc(13px * var(--fs-scale));
|
|
226
|
+
--btn-fs-sm: calc(12px * var(--fs-scale));
|
|
227
|
+
--btn-fs-lg: calc(15px * var(--fs-scale));
|
|
228
|
+
--btn-fs-cta: calc(14px * var(--fs-scale));
|
|
229
|
+
--icon-button-ink: #8f8fb0;
|
|
230
|
+
--icon-button-hover-bg: #f6f6fb;
|
|
231
|
+
--icon-button-hover-ink: #5b5bf0;
|
|
232
|
+
--icon-button-disabled-opacity: 0.4;
|
|
233
|
+
--icon-button-size: 36px;
|
|
234
|
+
--icon-button-icon: 18px;
|
|
235
|
+
--icon-button-size-sm: 30px;
|
|
236
|
+
--icon-button-icon-sm: 16px;
|
|
237
|
+
--icon-button-size-xs: 18px;
|
|
238
|
+
--icon-button-icon-xs: 12px;
|
|
239
|
+
--icon-button-size-primary: 44px;
|
|
240
|
+
--icon-button-ghost-ink: #b3b3cc;
|
|
241
|
+
--icon-button-hover-bg-strong: #5b5bf0;
|
|
242
|
+
--icon-button-inline-bg: #e4e6fb;
|
|
243
|
+
--icon-button-inline-ink: #5c5c80;
|
|
244
|
+
--icon-button-inline-on-bg: rgba(91, 91, 240, 0.1);
|
|
245
|
+
--icon-button-inline-on-ink: #5b5bf0;
|
|
246
|
+
--badge-bg: #eef0fb;
|
|
247
|
+
--badge-ink: #5b5bf0;
|
|
248
|
+
--badge-attention-bg: #fff3cc;
|
|
249
|
+
--badge-attention-ink: #b8860b;
|
|
250
|
+
--badge-muted-bg: #f1f1f8;
|
|
251
|
+
--badge-muted-ink: #8f8fb0;
|
|
252
|
+
--badge-outline-border: #e4e6fb;
|
|
253
|
+
--badge-outline-ink: #8f8fb0;
|
|
254
|
+
--badge-fs-xs: calc(10px * var(--fs-scale));
|
|
255
|
+
--chip-bg: #eef0fb;
|
|
256
|
+
--chip-ink: #5b5bf0;
|
|
257
|
+
--chip-hover-bg: #e4e6fb;
|
|
258
|
+
--file-card-bg: #26244a;
|
|
259
|
+
--file-card-ink: #f4f2ff;
|
|
260
|
+
--file-card-head-bg: rgba(255, 255, 255, 0.06);
|
|
261
|
+
--file-card-head-ink: #e8e6ff;
|
|
262
|
+
--file-card-head-meta: #a9a5d8;
|
|
263
|
+
--file-card-note-ink: #e0554a;
|
|
264
|
+
--file-card-image-body-bg: rgba(255, 255, 255, 0.04);
|
|
265
|
+
--file-card-image-bg: #ffffff;
|
|
266
|
+
--tool-call-ready-bg: #d9f7e8;
|
|
267
|
+
--tool-call-ready-ink: #1d8f6a;
|
|
268
|
+
--tool-call-error-bg: #fff0ee;
|
|
269
|
+
--tool-call-error-ink: #e0554a;
|
|
270
|
+
--tool-call-thinking-bg: #fff3cc;
|
|
271
|
+
--tool-call-thinking-ink: #b8860b;
|
|
272
|
+
--tool-call-pending-bg: #eef0fb;
|
|
273
|
+
--tool-call-pending-ink: #5b5bf0;
|
|
274
|
+
--tool-call-body-bg: #ffffff;
|
|
275
|
+
--tool-call-pre-bg: #f6f6fb;
|
|
276
|
+
--tool-call-pre-ink: #1c1b33;
|
|
277
|
+
--tool-call-quiet-ink: #8f8fb0;
|
|
278
|
+
--tool-call-fs: calc(12px * var(--fs-scale));
|
|
279
|
+
--tool-call-pre-fs: calc(11.5px * var(--fs-scale));
|
|
280
|
+
--tool-call-label-fs: calc(10.5px * var(--fs-scale));
|
|
281
|
+
--tool-fold-ink: #8f8fb0;
|
|
282
|
+
--tool-fold-bg: #f6f6fb;
|
|
283
|
+
--tool-fold-hover-bg: #eef0fb;
|
|
284
|
+
--tool-fold-hover-ink: #5b5bf0;
|
|
285
|
+
--tool-fold-failed-ink: #e0554a;
|
|
286
|
+
--tool-fold-fs: calc(11px * var(--fs-scale));
|
|
287
|
+
--ask-card-bg: #fff3cc;
|
|
288
|
+
--ask-card-ink: #1c1b33;
|
|
289
|
+
--ask-card-quiet-ink: #8f8fb0;
|
|
290
|
+
--ask-card-resolved-opacity: 0.7;
|
|
291
|
+
--ask-card-fs: calc(13px * var(--fs-scale));
|
|
292
|
+
--ask-card-kind-fs: calc(11px * var(--fs-scale));
|
|
293
|
+
--ask-card-input-fs: calc(11px * var(--fs-scale));
|
|
294
|
+
--ask-card-outcome-fs: calc(12px * var(--fs-scale));
|
|
295
|
+
--reply-note-ink: #8f8fb0;
|
|
296
|
+
--reply-note-bg: #f6f6fb;
|
|
297
|
+
--reply-note-attention-ink: #b8860b;
|
|
298
|
+
--reply-note-attention-bg: #fff3cc;
|
|
299
|
+
--reply-note-fs: calc(12px * var(--fs-scale));
|
|
300
|
+
--choice-bg: #f6f6fb;
|
|
301
|
+
--choice-ink: #5c5c80;
|
|
302
|
+
--choice-hover-bg: #eef0fb;
|
|
303
|
+
--choice-on-ink: #5b5bf0;
|
|
304
|
+
--choice-on-border: #5b5bf0;
|
|
305
|
+
--choice-quiet-ink: #8f8fb0;
|
|
306
|
+
--choice-h: 32px;
|
|
307
|
+
--control-knob: #ffffff;
|
|
308
|
+
--control-knob-shadow: 0 1px 3px rgba(28, 27, 51, 0.25);
|
|
309
|
+
--control-box-bg: #ffffff;
|
|
310
|
+
--control-tick: #ffffff;
|
|
311
|
+
--tile-logo-bg: #ffffff;
|
|
312
|
+
--tile-badge-bg: #ffffff;
|
|
313
|
+
--tile-badge-border: #ffffff;
|
|
314
|
+
--tile-ring: #ffffff;
|
|
315
|
+
--tile-mark-ink: #ffffff;
|
|
316
|
+
--tile-count-ink: #ffffff;
|
|
317
|
+
--room-mark-grad-angle: 135deg;
|
|
318
|
+
--room-mark-grad-from: 72% 66%;
|
|
319
|
+
--room-mark-grad-to: 68% 52%;
|
|
320
|
+
--room-mark-emoji: 70% 93%;
|
|
321
|
+
--pop-bg: #ffffff;
|
|
322
|
+
--pop-shadow: 0 10px 28px -12px rgba(28, 27, 51, 0.45);
|
|
323
|
+
--pop-arrow-shadow: 3px 3px 4px -3px rgba(28, 27, 51, 0.25);
|
|
324
|
+
--pop-dark-bg: #2c2b4a;
|
|
325
|
+
--pop-dark-ink: #ffffff;
|
|
326
|
+
--pop-dark-shadow: 0 6px 16px -6px rgba(28, 27, 51, 0.6);
|
|
327
|
+
--dialog-backdrop: rgba(28, 27, 51, 0.4);
|
|
328
|
+
--scrim-bg: rgba(28, 27, 51, 0.72);
|
|
329
|
+
--scrim-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
|
|
330
|
+
--scrim-image-bg: #ffffff;
|
|
331
|
+
--toast-bg: #1c1b33;
|
|
332
|
+
--toast-ink: #f4f2ff;
|
|
333
|
+
--rail-logo-shadow: 0 8px 18px -6px rgba(91, 91, 240, 0.6);
|
|
334
|
+
--rail-active-bg: #ffffff;
|
|
335
|
+
--timeline-view-bg: rgba(91, 91, 240, 0.07);
|
|
336
|
+
--timeline-view-left-bg: rgba(28, 27, 51, 0.05);
|
|
337
|
+
--timeline-tick-blend: #ffffff;
|
|
338
|
+
--timeline-pin-halo: #ffffff;
|
|
339
|
+
--timeline-flash: rgba(91, 91, 240, 0.55);
|
|
340
|
+
--timeline-flash-out: rgba(91, 91, 240, 0);
|
|
341
|
+
--bubble-bg: #ffffff;
|
|
342
|
+
--bubble-ink: #2c2b4a;
|
|
343
|
+
--bubble-shadow: 0 2px 0 rgba(28, 27, 51, 0.06), 0 1px 3px rgba(28, 27, 51, 0.04);
|
|
344
|
+
--bubble-mine-bg: linear-gradient(135deg, #6a6af7, #4f4fe0);
|
|
345
|
+
--bubble-mine-ink: #ffffff;
|
|
346
|
+
--bubble-mine-soft-ink: rgba(255, 255, 255, 0.85);
|
|
347
|
+
--bubble-mine-waiting-ink: rgba(255, 255, 255, 0.92);
|
|
348
|
+
--bubble-mine-shadow: 0 8px 18px -10px rgba(91, 91, 240, 0.7);
|
|
349
|
+
--bubble-mine-rule: rgba(255, 255, 255, 0.35);
|
|
350
|
+
--bubble-mine-border: rgba(255, 255, 255, 0.35);
|
|
351
|
+
--bubble-mine-chip-bg: rgba(255, 255, 255, 0.22);
|
|
352
|
+
--bubble-mine-code-bg: rgba(255, 255, 255, 0.18);
|
|
353
|
+
--bubble-mine-th-bg: rgba(255, 255, 255, 0.18);
|
|
354
|
+
--bubble-mine-link-underline: rgba(255, 255, 255, 0.5);
|
|
355
|
+
--bubble-mine-quote-border: rgba(255, 255, 255, 0.5);
|
|
356
|
+
--bubble-mine-btn-bg: rgba(255, 255, 255, 0.92);
|
|
357
|
+
--bubble-mine-btn-hover-bg: #ffffff;
|
|
358
|
+
--bubble-mine-ghost-hover-bg: rgba(255, 255, 255, 0.18);
|
|
359
|
+
--bubble-mine-cta-bg: #ffffff;
|
|
360
|
+
--bubble-mine-cta-ink: #5b5bf0;
|
|
361
|
+
--bubble-inset-bg: #ffffff;
|
|
362
|
+
--bubble-prop-row-bg: rgba(255, 255, 255, 0.6);
|
|
363
|
+
--quote-mine-bg: rgba(255, 255, 255, 0.16);
|
|
364
|
+
--quote-mine-border: rgba(255, 255, 255, 0.55);
|
|
365
|
+
--quote-mine-hover-bg: rgba(255, 255, 255, 0.26);
|
|
366
|
+
--quote-mine-hover-border: #ffffff;
|
|
367
|
+
--quote-mine-head-ink: rgba(255, 255, 255, 0.85);
|
|
368
|
+
--quote-mine-text-ink: #ffffff;
|
|
369
|
+
--attach-thumb-bg: #ffffff;
|
|
370
|
+
--attach-thumb-shadow: 0 1px 3px rgba(28, 27, 51, 0.16);
|
|
371
|
+
--attach-overlay-bg: rgba(28, 27, 51, 0.72);
|
|
372
|
+
--attach-overlay-ink: #ffffff;
|
|
373
|
+
--attach-ref-bg: rgba(28, 27, 51, 0.1);
|
|
374
|
+
--attach-mine-ref-bg: rgba(255, 255, 255, 0.24);
|
|
375
|
+
--attach-mine-chip-open-bg: rgba(255, 255, 255, 0.42);
|
|
376
|
+
--attach-mine-chip-open-ink: #1c1b33;
|
|
377
|
+
--table-stripe: rgba(91, 91, 240, 0.03);
|
|
378
|
+
--code-bg: #26244a;
|
|
379
|
+
--code-ink: #f4f2ff;
|
|
380
|
+
--code-gutter-bg: #211f43;
|
|
381
|
+
--code-gutter-ink: #7c78ad;
|
|
382
|
+
--code-line-mark-ink: #ffcf8f;
|
|
383
|
+
--code-line-mark-bg: rgba(255, 207, 143, 0.16);
|
|
384
|
+
--code-head-bg: rgba(255, 255, 255, 0.06);
|
|
385
|
+
--code-head-ink: #e8e6ff;
|
|
386
|
+
--code-head-meta: #a9a5d8;
|
|
387
|
+
--code-head-btn-bg: rgba(255, 255, 255, 0.12);
|
|
388
|
+
--code-head-btn-ink: #ffffff;
|
|
389
|
+
--code-body-bg: rgba(255, 255, 255, 0.04);
|
|
390
|
+
--code-sb-track: rgba(0, 0, 0, 0.25);
|
|
391
|
+
--code-sb-thumb: rgba(255, 255, 255, 0.3);
|
|
392
|
+
--code-sb-thumb-hover: rgba(255, 255, 255, 0.5);
|
|
393
|
+
--code-sb-firefox: rgba(255, 255, 255, 0.35);
|
|
394
|
+
--code-find-hit-bg: #ffcf8f;
|
|
395
|
+
--code-find-hit-ink: #26244a;
|
|
396
|
+
--syntax-comment: #8f8fb0;
|
|
397
|
+
--syntax-punctuation: #c9c6ea;
|
|
398
|
+
--syntax-keyword: #b9a7ff;
|
|
399
|
+
--syntax-string: #8fe3bd;
|
|
400
|
+
--syntax-number: #ffcf8f;
|
|
401
|
+
--syntax-function: #9cd2ff;
|
|
402
|
+
--syntax-tag: #ff9f9f;
|
|
403
|
+
--syntax-attr: #f2b8ff;
|
|
404
|
+
--diagram-bar-bg: #ffffff;
|
|
405
|
+
--diagram-bar-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55);
|
|
406
|
+
--diagram-node-shadow: rgba(28, 27, 51, 0.1);
|
|
407
|
+
--diagram-node-ink: #1c1b33;
|
|
408
|
+
--input-bg: #ffffff;
|
|
409
|
+
--input-focus-border: #5b5bf0;
|
|
410
|
+
--profile-bg: linear-gradient(160deg, #eef0fb, #e4f7ee);
|
|
411
|
+
--profile-avatar-bg: #ffffff;
|
|
412
|
+
--profile-badge-bg: #ffffff;
|
|
413
|
+
--participant-fallback: #9ca3af;
|
|
414
|
+
--participant-human-ink: #1f1d3a;
|
|
415
|
+
--participant-avatar-default: #5b5bf0;
|
|
416
|
+
--participant-avatar-gloss: #ffffff;
|
|
417
|
+
--participant-avatar-label-ink: #ffffff;
|
|
418
|
+
--participant-avatar-blend: #ffffff;
|
|
419
|
+
--row-button-size: 24px;
|
|
420
|
+
--row-button-icon: 14px;
|
|
421
|
+
--row-button-radius: 8px;
|
|
422
|
+
--row-button-bg: #f1f1f8;
|
|
423
|
+
--row-button-ink: #8f8fb0;
|
|
424
|
+
--row-button-hover-bg: #5b5bf0;
|
|
425
|
+
--row-button-hover-ink: #ffffff;
|
|
426
|
+
--row-button-disabled-opacity: 0.4;
|
|
427
|
+
--hub-row-ink: #8f8fb0;
|
|
428
|
+
--hub-row-attention-ink: #b8860b;
|
|
429
|
+
--hub-row-error-ink: #e0554a;
|
|
430
|
+
--hub-row-action-bg: #d9f7e8;
|
|
431
|
+
--hub-row-action-ink: #1d8f6a;
|
|
432
|
+
--hub-row-action-hover-bg: #c4efdb;
|
|
433
|
+
--hub-row-face-size: 18px;
|
|
434
|
+
--hero-ink: #ffffff;
|
|
435
|
+
--hero-bg: linear-gradient(120deg, #6a6af7 0%, #5b5bf0 45%, #8b5cf6 100%);
|
|
436
|
+
--hero-shadow: 0 18px 40px -22px rgba(91, 91, 240, 0.9);
|
|
437
|
+
--hero-blob-a: rgba(255, 255, 255, 0.1);
|
|
438
|
+
--hero-blob-b: rgba(47, 201, 126, 0.18);
|
|
439
|
+
--hero-cta-bg: #ffffff;
|
|
440
|
+
--hero-cta-shadow: 0 10px 22px -10px rgba(28, 27, 51, 0.5);
|
|
441
|
+
--hero-ghost-bg: rgba(255, 255, 255, 0.16);
|
|
442
|
+
--hero-ghost-hover-bg: rgba(255, 255, 255, 0.26);
|
|
443
|
+
--hero-face-bg: rgba(255, 255, 255, 0.55);
|
|
444
|
+
--hero-bubble-shadow: 0 10px 24px -14px rgba(28, 27, 51, 0.6);
|
|
445
|
+
--hero-bubble-1-bg: #ffffff;
|
|
446
|
+
--hero-bubble-2-bg: #d9f7e8;
|
|
447
|
+
--hero-bubble-2-ink: #14533f;
|
|
448
|
+
--hero-bubble-3-bg: #fff3cc;
|
|
449
|
+
--hero-bubble-3-ink: #5a4200;
|
|
450
|
+
--hero-spark: #ffd166;
|
|
451
|
+
--feature-emoji-bg: rgba(255, 255, 255, 0.8);
|
|
452
|
+
--feature-peach-bg: #ffe4d6;
|
|
453
|
+
--step-bg: #ffffff;
|
|
454
|
+
--step-num-ink: #ffffff;
|
|
455
|
+
--tpl-shadow: 0 1px 3px rgba(28, 27, 51, 0.06);
|
|
456
|
+
--tpl-check-ink: #ffffff;
|
|
457
|
+
--browser-theme-color: #6d5dfc;
|
|
118
458
|
}
|
|
119
459
|
* { box-sizing: border-box; }
|
|
120
460
|
html, body { height: 100%; margin: 0; overflow: hidden; }
|
|
121
|
-
body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: var(--fs-md); font-weight: 600; line-height: 1.45; -webkit-font-smoothing: antialiased; }
|
|
461
|
+
body { font-family: var(--font); color: var(--page-ink); background: var(--page-bg); font-size: var(--fs-md); font-weight: 600; line-height: 1.45; -webkit-font-smoothing: antialiased; }
|
|
122
462
|
button { font: inherit; cursor: pointer; color: inherit; }
|
|
123
463
|
input, select, textarea { font: inherit; color: var(--ink); }
|
|
124
464
|
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.2; }
|
|
125
465
|
p { margin: 0 0 8px; }
|
|
126
|
-
pre, code { font-family: var(--mono); font-size: 12px; font-weight: 500; }
|
|
466
|
+
pre, code { font-family: var(--mono); font-size: calc(12px * var(--fs-scale)); font-weight: 500; }
|
|
127
467
|
code { background: var(--lav); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
|
|
128
|
-
pre { background: var(--code-bg); color:
|
|
468
|
+
pre { background: var(--code-bg); color: var(--code-ink); padding: 10px 12px; border-radius: var(--r-sm); overflow-x: auto; white-space: pre-wrap; }
|
|
129
469
|
[hidden] { display: none !important; }
|
|
130
|
-
::selection { background: var(--
|
|
131
|
-
:focus-visible { outline: 3px solid
|
|
470
|
+
::selection { background: var(--page-selection); }
|
|
471
|
+
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 8px; }
|
|
132
472
|
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; } }
|
|
133
473
|
*::-webkit-scrollbar { width: var(--sb-w); height: var(--sb-w); }
|
|
134
474
|
*::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
|
|
@@ -144,67 +484,17 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
|
|
|
144
484
|
.h-ico.danger { background: var(--rose); color: var(--rose-ink); }
|
|
145
485
|
.hint { color: var(--faint); font-size: var(--fs-xs); font-weight: 600; line-height: 1.45; }
|
|
146
486
|
.hint.accent { color: var(--primary); }
|
|
487
|
+
.hint.warn { color: var(--warm-ink); }
|
|
147
488
|
.hint.error, .error { color: var(--rose-ink); font-size: var(--fs-sm); font-weight: 700; }
|
|
148
|
-
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 800; }
|
|
489
|
+
.eyebrow { font-size: calc(11px * var(--fs-scale)); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 800; }
|
|
149
490
|
.muted { color: var(--muted); }
|
|
150
491
|
.saved { color: var(--mint-ink); font-size: var(--fs-sm); font-weight: 700; }
|
|
151
492
|
.saved:empty { display: none; }
|
|
152
493
|
.saved:not(:empty) { animation: fade-in var(--t-base) var(--ease-out); }
|
|
153
|
-
.btn {
|
|
154
|
-
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
|
155
|
-
border: 0; background: var(--softer); color: var(--ink-3);
|
|
156
|
-
border-radius: var(--r-sm); height: 42px; padding: 0 16px; font-weight: 800; font-size: 13px; line-height: 1;
|
|
157
|
-
white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
|
|
158
|
-
}
|
|
159
|
-
.btn:hover:not(:disabled) { background: var(--lav); color: var(--primary); }
|
|
160
|
-
.btn:active:not(:disabled) { transform: translateY(1px); }
|
|
161
|
-
.btn:disabled { opacity: 0.45; cursor: default; }
|
|
162
|
-
.btn.primary { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-primary); }
|
|
163
|
-
.btn.primary:hover:not(:disabled) { background: var(--grad-primary); color: #fff; filter: brightness(1.05); transform: translateY(-1px); }
|
|
164
|
-
.btn.secondary:hover:not(:disabled) { background: var(--card); color: var(--primary); }
|
|
165
|
-
.btn.primary:active:not(:disabled) { transform: translateY(1px); }
|
|
166
|
-
.btn.secondary { background: var(--card); color: var(--ink-3); box-shadow: var(--shadow-tile); }
|
|
167
|
-
.btn.soft { background: var(--lav); color: var(--primary); }
|
|
168
|
-
.btn.soft:hover:not(:disabled) { background: var(--lav-2); }
|
|
169
|
-
.btn.ghost { background: transparent; color: var(--muted); font-weight: 700; }
|
|
170
|
-
.btn.ghost:hover:not(:disabled) { background: var(--soft); color: var(--primary); }
|
|
171
|
-
.btn.danger { background: var(--rose); color: var(--rose-ink); }
|
|
172
|
-
.btn.danger:hover:not(:disabled) { background: #ffe1dd; color: var(--rose-ink); }
|
|
173
|
-
.btn.danger.solid { background: var(--rose-ink); color: #fff; box-shadow: 0 8px 18px -8px rgba(224, 85, 74, 0.8); }
|
|
174
|
-
.btn.danger.solid:hover:not(:disabled) { background: var(--danger-dark); color: #fff; }
|
|
175
|
-
.btn.sm, .btn.small { height: 34px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
|
|
176
|
-
.btn.lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 14px; }
|
|
177
|
-
.btn.full { width: 100%; }
|
|
178
|
-
.btn.pill { border-radius: var(--r-pill); }
|
|
179
|
-
.btn .ico { font-size: 1.1em; line-height: 1; }
|
|
180
|
-
.btn .i { width: 16px; height: 16px; }
|
|
181
|
-
.btn.sm .i { width: 15px; height: 15px; }
|
|
182
|
-
.btn.cta { height: 46px; border-radius: var(--r-md); font-size: 14px; padding: 0 18px; }
|
|
183
|
-
.btn.cta .cta-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
|
|
184
|
-
.btn.cta .cta-ico .i { width: 16px; height: 16px; }
|
|
185
|
-
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
|
|
186
|
-
.btn.loading::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; animation: spin 0.8s linear infinite; }
|
|
187
|
-
.btn.secondary.loading::after, .btn.ghost.loading::after, .btn.soft.loading::after { border-color: var(--lav-2); border-top-color: var(--primary); }
|
|
188
|
-
.icon-btn {
|
|
189
|
-
width: 36px; height: 36px; border-radius: 12px; border: 0; background: transparent; color: var(--muted);
|
|
190
|
-
display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none;
|
|
191
|
-
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
|
|
192
|
-
}
|
|
193
|
-
.icon-btn .i { width: 18px; height: 18px; }
|
|
194
|
-
.icon-btn:hover:not(:disabled) { background: var(--soft); color: var(--primary); }
|
|
195
|
-
.icon-btn:active:not(:disabled) { transform: translateY(1px); }
|
|
196
|
-
.icon-btn.sm, .icon-btn.small { width: 30px; height: 30px; border-radius: 10px; }
|
|
197
|
-
.icon-btn.sm .i { width: 16px; height: 16px; }
|
|
198
|
-
.icon-btn.primary { width: 44px; height: 44px; border-radius: 14px; background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-primary); }
|
|
199
|
-
.icon-btn.primary:hover:not(:disabled) { color: #fff; background: var(--grad-primary); filter: brightness(1.05); }
|
|
200
|
-
.icon-btn.ghost { background: transparent; }
|
|
201
|
-
.icon-btn.danger { color: var(--rose-ink); }
|
|
202
|
-
.icon-btn.danger:hover:not(:disabled) { background: var(--rose); color: var(--rose-ink); }
|
|
203
|
-
.icon-btn:disabled { opacity: 0.4; cursor: default; }
|
|
204
494
|
.linklike { background: none; border: 0; padding: 0; color: var(--primary); font-weight: 800; cursor: pointer; text-align: left; }
|
|
205
495
|
.linklike:hover { text-decoration: underline; }
|
|
206
496
|
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 12px; min-width: 0; }
|
|
207
|
-
.field > .label, .field > span.label { font-weight: 800; color: var(--ink-3); font-size: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
|
|
497
|
+
.field > .label, .field > span.label { font-weight: 800; color: var(--ink-3); font-size: calc(12px * var(--fs-scale)); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
|
|
208
498
|
.field .hint { margin: 0; }
|
|
209
499
|
.field .hint.error { margin-top: 2px; }
|
|
210
500
|
.field.row { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
|
|
@@ -213,7 +503,7 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
|
|
|
213
503
|
.input, .select, .textarea,
|
|
214
504
|
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
|
|
215
505
|
width: 100%; min-width: 0; height: 42px; padding: 0 14px; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft);
|
|
216
|
-
font-size: 14px; font-weight: 700; color: var(--ink);
|
|
506
|
+
font-size: calc(14px * var(--fs-scale)); font-weight: 700; color: var(--ink);
|
|
217
507
|
transition: border-color var(--t-fast), background var(--t-fast);
|
|
218
508
|
}
|
|
219
509
|
.input:hover, .select:hover, .textarea:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--lav-2); }
|
|
@@ -227,7 +517,7 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
|
|
|
227
517
|
}
|
|
228
518
|
.select:disabled, .field select:disabled, .input:disabled, .field input:disabled { opacity: 0.55; cursor: default; }
|
|
229
519
|
.textarea, .field textarea { resize: vertical; min-height: 76px; height: auto; padding: 10px 14px; line-height: 1.5; }
|
|
230
|
-
.field .rules-editor { display: block; width: 100%; box-sizing: border-box; min-height: 118px; max-height: 320px; overflow-y: auto; padding: 10px 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 700; font-family: inherit; }
|
|
520
|
+
.field .rules-editor { display: block; width: 100%; box-sizing: border-box; min-height: 118px; max-height: 320px; overflow-y: auto; padding: 10px 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft); color: var(--ink); font-size: calc(14px * var(--fs-scale)); font-weight: 700; font-family: inherit; }
|
|
231
521
|
.field .rules-editor:hover { border-color: var(--lav-2); }
|
|
232
522
|
.field .rules-editor:focus { outline: none; border-color: var(--primary); background: var(--card); }
|
|
233
523
|
.field .rules-editor:empty::before { content: attr(data-placeholder); color: var(--placeholder); pointer-events: none; }
|
|
@@ -239,24 +529,24 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
|
|
|
239
529
|
.field-grid.three { grid-template-columns: 1.3fr 1fr 1fr; }
|
|
240
530
|
.field-grid .field { margin-bottom: 4px; }
|
|
241
531
|
.field-note { font-size: var(--fs-xs); color: var(--faint); margin: -4px 0 10px; line-height: 1.45; }
|
|
242
|
-
.switch, .toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; cursor: pointer; }
|
|
532
|
+
.switch, .toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(13px * var(--fs-scale)); font-weight: 700; color: var(--ink-2); margin-bottom: 10px; cursor: pointer; }
|
|
243
533
|
.switch .label { flex: 1; }
|
|
244
534
|
.switch .label .hint { display: block; margin-top: 2px; }
|
|
245
535
|
.switch input, .toggle input { flex: none; width: 42px; height: 24px; appearance: none; -webkit-appearance: none; background: var(--lav-2); border-radius: var(--r-pill); position: relative; cursor: pointer; transition: background var(--t-base) var(--ease-out); margin: 0; }
|
|
246
|
-
.switch input::after, .toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background:
|
|
536
|
+
.switch input::after, .toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--control-knob); border-radius: 50%; box-shadow: var(--control-knob-shadow); transition: transform var(--t-base) var(--ease-pop); }
|
|
247
537
|
.switch input:checked, .toggle input:checked { background: var(--primary); }
|
|
248
538
|
.switch input:checked::after, .toggle input:checked::after { transform: translateX(18px); }
|
|
249
|
-
.switch input:focus-visible { outline: 3px solid
|
|
539
|
+
.switch input:focus-visible { outline: 3px solid var(--focus-ring); }
|
|
250
540
|
.check-list { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
|
|
251
|
-
.check-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; margin-bottom: 0; padding: 8px 10px; border-radius: 12px; transition: background var(--t-fast); }
|
|
541
|
+
.check-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-size: calc(13px * var(--fs-scale)); font-weight: 700; color: var(--ink-2); cursor: pointer; margin-bottom: 0; padding: 8px 10px; border-radius: 12px; transition: background var(--t-fast); }
|
|
252
542
|
.check-row:hover { background: var(--soft); }
|
|
253
|
-
.check-row input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--lav-2); border-radius: 7px; background:
|
|
254
|
-
.check-row input::before { content: ""; width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background:
|
|
543
|
+
.check-row input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--lav-2); border-radius: 7px; background: var(--control-box-bg); margin: 0; flex: none; display: grid; place-content: center; transition: background var(--t-fast), border-color var(--t-fast); cursor: pointer; }
|
|
544
|
+
.check-row input::before { content: ""; width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: var(--control-tick); transform: scale(0); transition: transform var(--t-fast) var(--ease-pop); }
|
|
255
545
|
.check-row input:checked { background: var(--primary); border-color: var(--primary); }
|
|
256
546
|
.check-row input:checked::before { transform: scale(1); }
|
|
257
547
|
.check-row input:disabled { opacity: 0.45; }
|
|
258
548
|
.check-row .hint { display: block; }
|
|
259
|
-
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--soft); border: 2px solid var(--soft); border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
|
|
549
|
+
.choice { display: flex; gap: 10px; align-items: flex-start; font-size: calc(13px * var(--fs-scale)); font-weight: 600; color: var(--ink-2); background: var(--soft); border: 2px solid var(--soft); border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
|
|
260
550
|
.choice:hover { border-color: var(--lav-2); }
|
|
261
551
|
.choice:has(input:checked) { border-color: var(--primary); background: var(--lav); }
|
|
262
552
|
.choice input[type="radio"] { margin-top: 3px; accent-color: var(--primary); }
|
|
@@ -266,29 +556,29 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
|
|
|
266
556
|
.card.hover:hover { transform: translateY(-2px); background: var(--lav); }
|
|
267
557
|
.card.cta { border: 2px dashed var(--lav-2); background: transparent; color: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-weight: 800; }
|
|
268
558
|
.card.cta:hover { background: var(--soft); transform: translateY(-2px); }
|
|
269
|
-
.card.cta .plus { width: 44px; height: 44px; border-radius: 14px; background: var(--grad-primary); color:
|
|
559
|
+
.card.cta .plus { width: 44px; height: 44px; border-radius: 14px; background: var(--grad-primary); color: var(--btn-on-primary); display: grid; place-content: center; box-shadow: var(--shadow-primary); }
|
|
270
560
|
.card.cta .plus .i { width: 20px; height: 20px; }
|
|
271
561
|
.section { background: var(--soft); border: 0; border-radius: var(--r-lg); padding: 16px 16px 12px; margin-bottom: 12px; min-width: 0; }
|
|
272
|
-
.section > h4 { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 7px; }
|
|
562
|
+
.section > h4 { margin: 0 0 12px; font-size: calc(11px * var(--fs-scale)); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 7px; }
|
|
273
563
|
.section > h4 .i { display: none; }
|
|
274
564
|
.section > h4 .spacer { flex: 1; }
|
|
275
565
|
.section.danger { background: var(--rose); }
|
|
276
566
|
.section.danger > h4 { color: var(--rose-ink); }
|
|
277
567
|
.save-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 2px; }
|
|
278
568
|
.save-row .hint { flex: 1; margin: 0; }
|
|
279
|
-
.field > .label .fsaved { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--mint-ink); font-size: 11px; font-weight: 800; animation: fade-in var(--t-base) var(--ease-out); }
|
|
569
|
+
.field > .label .fsaved { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--mint-ink); font-size: calc(11px * var(--fs-scale)); font-weight: 800; animation: fade-in var(--t-base) var(--ease-out); }
|
|
280
570
|
.field > .label .fsaved .i { width: 13px; height: 13px; }
|
|
281
|
-
.switch > .label .fsaved { float: right; display: inline-flex; align-items: center; gap: 3px; color: var(--mint-ink); font-size: 11px; font-weight: 800; animation: fade-in var(--t-base) var(--ease-out); }
|
|
571
|
+
.switch > .label .fsaved { float: right; display: inline-flex; align-items: center; gap: 3px; color: var(--mint-ink); font-size: calc(11px * var(--fs-scale)); font-weight: 800; animation: fade-in var(--t-base) var(--ease-out); }
|
|
282
572
|
.switch > .label .fsaved .i { width: 13px; height: 13px; }
|
|
283
573
|
.section .row-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin: 2px 0 6px; flex-wrap: wrap; }
|
|
284
574
|
.row-btns { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
|
|
285
575
|
.row-btns.start { justify-content: flex-start; }
|
|
286
576
|
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; }
|
|
287
|
-
.kv span:nth-child(odd) { color: var(--muted); font-weight: 600; }
|
|
577
|
+
.kv span:nth-child(odd) { color: var(--muted); font-weight: 600; overflow-wrap: normal; }
|
|
288
578
|
.kv span:nth-child(even) { text-align: right; color: var(--ink-2); }
|
|
289
579
|
.divider { height: 2px; background: var(--lav); margin: 10px 0; border-radius: 2px; }
|
|
290
580
|
.geek { margin: 4px 0 2px; min-width: 0; }
|
|
291
|
-
.geek > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--lav); color: var(--primary); font-weight: 800; font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap; min-width: 0; transition: background var(--t-fast); }
|
|
581
|
+
.geek > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--lav); color: var(--primary); font-weight: 800; font-size: calc(12px * var(--fs-scale)); cursor: pointer; user-select: none; white-space: nowrap; min-width: 0; transition: background var(--t-fast); }
|
|
292
582
|
.geek > summary::-webkit-details-marker { display: none; }
|
|
293
583
|
.geek > summary:hover { background: var(--lav-2); }
|
|
294
584
|
.geek > summary .i { width: 16px; height: 16px; flex: none; }
|
|
@@ -297,56 +587,34 @@ pre { background: var(--code-bg); color: #f4f2ff; padding: 10px 12px; border-rad
|
|
|
297
587
|
.geek[open] > summary .chev { transform: rotate(180deg); }
|
|
298
588
|
.geek-body { padding-top: 10px; animation: fade-in var(--t-base) var(--ease-out); min-width: 0; }
|
|
299
589
|
.geek-body > .section:last-child { margin-bottom: 0; }
|
|
300
|
-
.geek-tip { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--primary); padding: 0 0 1px; margin-left: auto; cursor: pointer; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; vertical-align: middle; box-shadow: inset 0 -1.5px 0 transparent; transition: box-shadow var(--t-fast); }
|
|
590
|
+
.geek-tip { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--primary); padding: 0 0 1px; margin-left: auto; cursor: pointer; font-size: calc(11px * var(--fs-scale)); font-weight: 800; line-height: 1; white-space: nowrap; vertical-align: middle; box-shadow: inset 0 -1.5px 0 transparent; transition: box-shadow var(--t-fast); }
|
|
301
591
|
.geek-tip .i { width: 17px; height: 17px; display: block; }
|
|
302
592
|
p .geek-tip, .hint > .geek-tip, .switch .label > .geek-tip { margin-left: 8px; }
|
|
303
593
|
.geek-tip:hover { box-shadow: inset 0 -1.5px 0 currentColor; }
|
|
304
|
-
.geek-text { display: block; flex: 1 0 100%; font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--lav); border-radius: 10px; padding: 8px 10px; margin: 4px 0 2px; line-height: 1.45; animation: fade-in var(--t-base) var(--ease-out); }
|
|
305
|
-
.geek-text code { font-size: 11px; }
|
|
594
|
+
.geek-text { display: block; flex: 1 0 100%; font-size: calc(11.5px * var(--fs-scale)); font-weight: 600; color: var(--muted); background: var(--lav); border-radius: 10px; padding: 8px 10px; margin: 4px 0 2px; line-height: 1.45; animation: fade-in var(--t-base) var(--ease-out); }
|
|
595
|
+
.geek-text code { font-size: calc(11px * var(--fs-scale)); }
|
|
306
596
|
.choice-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; min-width: 0; }
|
|
307
|
-
.choice-row > .label { font-size: 12px; font-weight: 800; color: var(--ink-3); }
|
|
597
|
+
.choice-row > .label { font-size: calc(12px * var(--fs-scale)); font-weight: 800; color: var(--ink-3); }
|
|
308
598
|
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
309
|
-
.chip-btn { border: 2px solid transparent; background: var(--soft); border-radius: var(--r-pill); padding: 0 12px; height: 32px; font-size: 12px; font-weight: 800; color: var(--ink-3); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
|
|
310
|
-
.chip-btn:hover { background: var(--lav); color: var(--primary); }
|
|
311
|
-
.chip-btn.on { background: var(--lav); color: var(--primary); border-color: var(--primary); }
|
|
312
|
-
.chip-btn.none { color: var(--muted); font-weight: 700; }
|
|
313
599
|
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 2px 0 14px; }
|
|
314
600
|
.agent-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; border: 2px solid transparent; border-radius: var(--r-md); background: var(--soft); cursor: pointer; text-align: center; transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast); min-width: 0; }
|
|
315
|
-
.agent-tile .at-logo { width: 40px; height: 40px; border-radius: 13px; background:
|
|
601
|
+
.agent-tile .at-logo { width: 40px; height: 40px; border-radius: 13px; background: var(--tile-logo-bg); display: grid; place-content: center; overflow: hidden; box-shadow: var(--shadow-tile); }
|
|
316
602
|
.agent-tile .at-logo img { width: 22px; height: 22px; object-fit: contain; display: block; }
|
|
317
|
-
.agent-tile .at-name { font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
|
318
|
-
.agent-tile .at-sub { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
|
603
|
+
.agent-tile .at-name { font-size: calc(12px * var(--fs-scale)); font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
|
604
|
+
.agent-tile .at-sub { font-size: calc(10px * var(--fs-scale)); font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
|
|
319
605
|
.agent-tile:hover:not(.off) { transform: translateY(-2px); background: var(--lav); }
|
|
320
606
|
.agent-tile.selected { border-color: var(--primary); background: var(--lav); }
|
|
321
607
|
.agent-tile.off { opacity: 0.5; filter: grayscale(1); cursor: default; }
|
|
322
|
-
.
|
|
323
|
-
.
|
|
324
|
-
.badge.status-idle { background: var(--st-ready); color: var(--st-ready-ink); }
|
|
325
|
-
.badge.status-thinking { background: var(--st-thinking); color: var(--st-thinking-ink); }
|
|
326
|
-
.badge.status-writing { background: var(--st-writing); color: var(--st-writing-ink); }
|
|
327
|
-
.badge.status-queued { background: var(--st-waiting); color: var(--st-waiting-ink); }
|
|
328
|
-
.badge.status-starting { background: var(--st-waiting); color: var(--st-waiting-ink); }
|
|
329
|
-
.badge.status-offline { background: var(--st-asleep); color: var(--st-asleep-ink); }
|
|
330
|
-
.badge.status-error { background: var(--st-error); color: var(--st-error-ink); }
|
|
331
|
-
.badge.status-left { background: var(--st-asleep); color: var(--st-asleep-ink); }
|
|
332
|
-
.badge.muted { background: var(--softer); color: var(--muted); }
|
|
333
|
-
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
334
|
-
.badge.status-thinking .dot, .badge.status-writing .dot { animation: pulse 1.2s ease-in-out infinite; }
|
|
335
|
-
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; background: var(--lav); color: var(--primary); border: 0; border-radius: var(--r-pill); padding: 4px 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
336
|
-
.chip .i { width: 13px; height: 13px; }
|
|
337
|
-
.chip-completed { background: var(--st-ready); color: var(--st-ready-ink); }
|
|
338
|
-
.chip-failed { background: var(--st-error); color: var(--st-error-ink); }
|
|
339
|
-
.chip-in_progress { background: var(--st-thinking); color: var(--st-thinking-ink); }
|
|
340
|
-
.count-pill { background: var(--primary); color: #fff; border-radius: var(--r-pill); font-size: 10px; padding: 1px 7px; font-weight: 800; line-height: 15px; }
|
|
341
|
-
.zzz { font-size: 10px; font-weight: 800; color: var(--muted); background: var(--softer); padding: 3px 8px; border-radius: var(--r-pill); }
|
|
608
|
+
.count-pill { background: var(--primary); color: var(--tile-count-ink); border-radius: var(--r-pill); font-size: calc(10px * var(--fs-scale)); padding: 1px 7px; font-weight: 800; line-height: calc(15px * var(--fs-scale)); }
|
|
609
|
+
.zzz { font-size: calc(10px * var(--fs-scale)); font-weight: 800; color: var(--muted); background: var(--softer); padding: 3px 8px; border-radius: var(--r-pill); }
|
|
342
610
|
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-thinking-dot); box-shadow: 0 0 0 3px var(--st-thinking); animation: pulse 1.2s ease-in-out infinite; display: inline-block; }
|
|
343
611
|
.avatar { position: relative; display: inline-block; flex: none; }
|
|
344
612
|
.avatar .av-tile { display: grid; place-items: center; width: 100%; height: 100%; font-weight: 800; line-height: 1; font-family: var(--font); user-select: none; }
|
|
345
|
-
.avatar-badge { position: absolute; right: -4px; bottom: -4px; width: 44%; height: 44%; min-width: 15px; min-height: 15px; border-radius: 6px; background:
|
|
613
|
+
.avatar-badge { position: absolute; right: -4px; bottom: -4px; width: 44%; height: 44%; min-width: 15px; min-height: 15px; border-radius: 6px; background: var(--tile-badge-bg); border: 2px solid var(--tile-badge-border); box-shadow: var(--shadow-tile); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: var(--primary); overflow: hidden; }
|
|
346
614
|
.avatar-badge img { width: 72%; height: 72%; object-fit: contain; }
|
|
347
|
-
.avatar-badge.muted { color: var(--warm-ink); background: var(--warm); border-color:
|
|
615
|
+
.avatar-badge.muted { color: var(--warm-ink); background: var(--warm); border-color: var(--tile-badge-border); }
|
|
348
616
|
.avatar-badge.muted .i { width: 78%; height: 78%; }
|
|
349
|
-
.avatar-status { position: absolute; left: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid
|
|
617
|
+
.avatar-status { position: absolute; left: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tile-ring); background: var(--faint); }
|
|
350
618
|
.avatar-status.status-idle { background: var(--st-ready-dot); }
|
|
351
619
|
.avatar-status.status-thinking { background: var(--st-thinking-dot); animation: pulse 1.2s ease-in-out infinite; }
|
|
352
620
|
.avatar-status.status-writing { background: var(--st-writing-dot); animation: pulse 1.2s ease-in-out infinite; }
|
|
@@ -361,16 +629,16 @@ p .geek-tip, .hint > .geek-tip, .switch .label > .geek-tip { margin-left: 8px; }
|
|
|
361
629
|
.avatar-picker button.none { font-size: 12px; font-weight: 800; color: var(--muted); }
|
|
362
630
|
.emoji-pick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; min-width: 0; }
|
|
363
631
|
.emoji-pick .avatar-picker { margin: 0; }
|
|
364
|
-
.emoji-pick .emoji-search, .field .emoji-pick .emoji-search { width: 100%; box-sizing: border-box; height: 32px; min-height: 0; padding: 0 12px; border-radius: var(--r-sm); border: 2px solid var(--lav); background: var(--soft); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); }
|
|
632
|
+
.emoji-pick .emoji-search, .field .emoji-pick .emoji-search { width: 100%; box-sizing: border-box; height: 32px; min-height: 0; padding: 0 12px; border-radius: var(--r-sm); border: 2px solid var(--lav); background: var(--soft); font: inherit; font-size: calc(13px * var(--fs-scale)); font-weight: 700; color: var(--ink); }
|
|
365
633
|
.emoji-pick .emoji-search:focus, .field .emoji-pick .emoji-search:focus { outline: none; border-color: var(--primary); }
|
|
366
|
-
.emoji-none { grid-column: 1 / -1; color: var(--muted); font-size: 12px; font-weight: 700; padding: 8px 4px; }
|
|
634
|
+
.emoji-none { grid-column: 1 / -1; color: var(--muted); font-size: calc(12px * var(--fs-scale)); font-weight: 700; padding: 8px 4px; }
|
|
367
635
|
.avatar-stack { display: flex; }
|
|
368
636
|
.avatar-stack .avatar { margin-left: -8px; }
|
|
369
|
-
.avatar-stack .avatar .av-tile { box-shadow: 0 0 0 2px
|
|
637
|
+
.avatar-stack .avatar .av-tile { box-shadow: 0 0 0 2px var(--tile-ring); }
|
|
370
638
|
.avatar-stack .avatar:first-child { margin-left: 0; }
|
|
371
|
-
.room-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-content: center; color:
|
|
639
|
+
.room-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-content: center; color: var(--tile-mark-ink); background: linear-gradient(var(--room-mark-grad-angle), hsl(var(--room-hue) var(--room-mark-grad-from)), hsl(var(--room-hue-2) var(--room-mark-grad-to))); font-weight: 800; font-size: 18px; flex: none; text-transform: uppercase; }
|
|
372
640
|
.room-mark.lg { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; }
|
|
373
|
-
.room-mark.emoji { font-size: 24px; text-transform: none; }
|
|
641
|
+
.room-mark.emoji { background: hsl(var(--room-hue) var(--room-mark-emoji)); font-size: 24px; text-transform: none; }
|
|
374
642
|
.room-mark.lg.emoji { font-size: 28px; }
|
|
375
643
|
.vendor-card { display: flex; flex-direction: column; gap: 8px; background: var(--card); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px; }
|
|
376
644
|
.vendor-card .vc-head, .vendor-row { display: flex; align-items: center; gap: 10px; }
|
|
@@ -382,34 +650,33 @@ p .geek-tip, .hint > .geek-tip, .switch .label > .geek-tip { margin-left: 8px; }
|
|
|
382
650
|
.vendor-card .vc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
|
383
651
|
.vendor-card .vc-fields .field { margin-bottom: 0; }
|
|
384
652
|
.action-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 16px; }
|
|
385
|
-
.action { height: 58px; border: 0; border-radius: var(--r-md); background: var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--ink-3); cursor: pointer; padding: 0; transition: background var(--t-fast), transform var(--t-fast) var(--ease-out); }
|
|
653
|
+
.action { height: 58px; border: 0; border-radius: var(--r-md); background: var(--soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: calc(11px * var(--fs-scale)); font-weight: 800; color: var(--ink-3); cursor: pointer; padding: 0; transition: background var(--t-fast), transform var(--t-fast) var(--ease-out); }
|
|
386
654
|
.action .ico { display: flex; color: inherit; }
|
|
387
655
|
.action .ico .i { width: 16px; height: 16px; }
|
|
388
656
|
.action:first-child { color: var(--primary); }
|
|
389
657
|
.action:hover:not(:disabled) { background: var(--lav); transform: translateY(-1px); }
|
|
390
658
|
.action.danger { background: var(--rose); color: var(--rose-ink); }
|
|
391
|
-
.action.danger:hover:not(:disabled) { background:
|
|
659
|
+
.action.danger:hover:not(:disabled) { background: var(--btn-danger-hover-bg); }
|
|
392
660
|
.action:disabled { opacity: 0.45; cursor: default; }
|
|
393
|
-
.open-link { color: var(--
|
|
661
|
+
.open-link { color: var(--link-ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 2px; cursor: pointer; overflow-wrap: anywhere; }
|
|
394
662
|
.open-link:hover { text-decoration-color: var(--primary); }
|
|
395
663
|
code .open-link { color: inherit; }
|
|
396
664
|
.mermaid-block, .csv-block { margin: 8px 0; background: var(--card); border-radius: 14px; padding: 10px 12px 4px; max-width: 100%; overflow-x: auto; box-shadow: var(--edge); }
|
|
397
665
|
.mermaid-block .mm-out svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
|
|
398
666
|
.mermaid-block .mm-out pre { margin: 0; }
|
|
399
667
|
.mermaid-block .mm-bar, .csv-block .mm-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; }
|
|
400
|
-
.mermaid-block .mm-src, .csv-block .mm-src { border: 0; background: transparent; color: var(--faint); font-size: 11px; font-weight: 800; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
|
|
668
|
+
.mermaid-block .mm-src, .csv-block .mm-src { border: 0; background: transparent; color: var(--faint); font-size: calc(11px * var(--fs-scale)); font-weight: 800; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
|
|
401
669
|
.mermaid-block .mm-src:hover, .csv-block .mm-src:hover { background: var(--soft); color: var(--primary); }
|
|
402
670
|
.mermaid-block .mm-code, .csv-block .mm-code { margin: 6px 0 0; }
|
|
403
671
|
.csv-block .csv-wrap { box-shadow: none; max-height: 320px; }
|
|
404
672
|
.csv-block .csv-count { margin: 4px 2px 0; }
|
|
405
673
|
.mermaid-block.preview { margin-top: 4px; }
|
|
406
674
|
.mermaid-block.preview .mm-bar { display: none; }
|
|
407
|
-
.diagram-presets .chip-btn { display: inline-flex; align-items: center; gap: 6px; }
|
|
408
675
|
.diagram-presets .swatch { width: 14px; height: 14px; border-radius: 5px; border: 2px solid; display: inline-block; }
|
|
409
676
|
.menu, .mention-menu { position: absolute; background: var(--card); border: 0; border-radius: 14px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 30; min-width: 240px; max-height: 280px; overflow-y: auto; animation: rise var(--t-base) var(--ease-out); transform-origin: bottom left; }
|
|
410
|
-
.menu button, .mention-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: 13px; font-weight: 800; color: var(--ink); }
|
|
677
|
+
.menu button, .mention-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: calc(13px * var(--fs-scale)); font-weight: 800; color: var(--ink); }
|
|
411
678
|
.menu button.active, .menu button:hover, .mention-menu button.active, .mention-menu button:hover { background: var(--lav); }
|
|
412
|
-
.menu .mm-sub, .mention-menu .mm-sub { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.3; }
|
|
679
|
+
.menu .mm-sub, .mention-menu .mm-sub { color: var(--muted); font-size: calc(11px * var(--fs-scale)); font-weight: 600; line-height: 1.3; }
|
|
413
680
|
.menu .mm-skill, .mention-menu .mm-skill { font-weight: 800; color: var(--primary); min-width: 84px; }
|
|
414
681
|
.mention-host { position: relative; }
|
|
415
682
|
.mention-menu.inline { left: 0; top: 100%; bottom: auto; margin-top: 4px; }
|
|
@@ -417,15 +684,15 @@ code .open-link { color: inherit; }
|
|
|
417
684
|
.emoji-menu .avatar-picker { margin: 0; grid-template-columns: repeat(8, 1fr); }
|
|
418
685
|
#rp-emoji-picker .avatar-picker { max-height: 236px; }
|
|
419
686
|
.dialog { border: 0; border-radius: 22px; padding: 24px 26px; width: 580px; max-width: 94vw; max-height: 90vh; box-shadow: var(--shadow-dialog); overflow: auto; overflow-x: hidden; background: var(--card); color: var(--ink); }
|
|
420
|
-
.dialog::backdrop { background:
|
|
687
|
+
.dialog::backdrop { background: var(--dialog-backdrop); backdrop-filter: blur(4px); }
|
|
421
688
|
.dialog[open] { animation: pop var(--t-slow) var(--ease-pop); }
|
|
422
689
|
.dialog[open]::backdrop { animation: fade-in var(--t-base) var(--ease-out); }
|
|
423
690
|
.dialog.closing { animation: pop-out var(--t-base) var(--ease-out) forwards; }
|
|
424
691
|
.dialog.closing::backdrop { animation: fade-out var(--t-base) var(--ease-out) forwards; }
|
|
425
692
|
.dialog form { min-width: 0; }
|
|
426
|
-
.dialog h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: 20px; }
|
|
427
|
-
.dialog .lead { color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 16px; line-height: 1.5; }
|
|
428
|
-
.dialog label:not(.check-row):not(.choice):not(.switch) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; font-weight: 800; color: var(--ink-3); margin-bottom: 12px; min-width: 0; }
|
|
693
|
+
.dialog h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; font-size: calc(20px * var(--fs-scale)); }
|
|
694
|
+
.dialog .lead { color: var(--muted); font-size: calc(13px * var(--fs-scale)); font-weight: 600; margin-bottom: 16px; line-height: 1.5; }
|
|
695
|
+
.dialog label:not(.check-row):not(.choice):not(.switch) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: calc(12px * var(--fs-scale)); font-weight: 800; color: var(--ink-3); margin-bottom: 12px; min-width: 0; }
|
|
429
696
|
.dialog label:not(.check-row):not(.choice):not(.switch) > .hint { margin: 0; }
|
|
430
697
|
.dialog label:not(.check-row):not(.choice):not(.switch) > input:not([type="checkbox"]):not([type="radio"]),
|
|
431
698
|
.dialog label:not(.check-row):not(.choice):not(.switch) > select,
|
|
@@ -433,7 +700,7 @@ code .open-link { color: inherit; }
|
|
|
433
700
|
.dialog label:not(.check-row):not(.choice):not(.switch) > div,
|
|
434
701
|
.dialog label:not(.check-row):not(.choice):not(.switch) > .geek-text { flex: 1 0 100%; margin-top: 2px; }
|
|
435
702
|
.dialog label:not(.check-row):not(.choice):not(.switch) > input[type="number"] { flex: 0 0 120px; }
|
|
436
|
-
.dialog input:not([type="checkbox"]):not([type="radio"]), .dialog select, .dialog textarea { width: 100%; min-width: 0; height: 42px; padding: 0 14px; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft); font-size: 14px; font-weight: 700; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); }
|
|
703
|
+
.dialog input:not([type="checkbox"]):not([type="radio"]), .dialog select, .dialog textarea { width: 100%; min-width: 0; height: 42px; padding: 0 14px; border: 2px solid var(--lav); border-radius: var(--r-sm); background: var(--soft); font-size: calc(14px * var(--fs-scale)); font-weight: 700; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); }
|
|
437
704
|
.dialog input:focus, .dialog select:focus, .dialog textarea:focus { outline: none; border-color: var(--primary); background: var(--card); }
|
|
438
705
|
.dialog input::placeholder, .dialog textarea::placeholder { color: var(--placeholder); font-weight: 600; }
|
|
439
706
|
.dialog select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238f8fb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
|
|
@@ -447,7 +714,7 @@ code .open-link { color: inherit; }
|
|
|
447
714
|
.dialog.wide { width: 720px; }
|
|
448
715
|
.dialog.narrow { width: 440px; }
|
|
449
716
|
.toasts { position: fixed; right: 18px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 400px; z-index: 50; pointer-events: none; }
|
|
450
|
-
.toast { pointer-events: auto; background: var(--
|
|
717
|
+
.toast { pointer-events: auto; background: var(--toast-bg); color: var(--toast-ink); padding: 10px 14px; border-radius: 12px; font-size: var(--fs-sm); font-weight: 700; box-shadow: var(--shadow-pop); cursor: pointer; animation: slide-in-right var(--t-slow) var(--ease-pop); line-height: 1.4; display: flex; gap: 8px; align-items: flex-start; }
|
|
451
718
|
.toast .i { width: 15px; height: 15px; margin-top: 1px; opacity: 0.85; }
|
|
452
719
|
.toast.warn { background: var(--warm-ink); }
|
|
453
720
|
.toast.error { background: var(--rose-ink); }
|