@politeia/openclaw-bridge 0.1.2

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.
@@ -0,0 +1,519 @@
1
+ /* src/user-board/styles.css */
2
+ :root {
3
+ color-scheme: light;
4
+ --bg: #f4f6f8;
5
+ --panel: #ffffff;
6
+ --panel-soft: #f9fafb;
7
+ --ink: #172033;
8
+ --muted: #667085;
9
+ --line: #d8dee8;
10
+ --line-strong: #c6ceda;
11
+ --good: #0f766e;
12
+ --good-soft: #d9f4ec;
13
+ --bad: #991b1b;
14
+ --bad-soft: #fee2e2;
15
+ --warn: #92400e;
16
+ --warn-soft: #fef3c7;
17
+ --blue: #1d4ed8;
18
+ --blue-soft: #dbeafe;
19
+ --shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
20
+ }
21
+ * {
22
+ box-sizing: border-box;
23
+ }
24
+ body {
25
+ margin: 0;
26
+ background: var(--bg);
27
+ color: var(--ink);
28
+ font-family:
29
+ ui-sans-serif,
30
+ system-ui,
31
+ -apple-system,
32
+ BlinkMacSystemFont,
33
+ "Segoe UI",
34
+ sans-serif;
35
+ }
36
+ button,
37
+ textarea,
38
+ input {
39
+ font: inherit;
40
+ }
41
+ button {
42
+ border: 1px solid transparent;
43
+ border-radius: 8px;
44
+ padding: 8px 11px;
45
+ font-weight: 750;
46
+ cursor: pointer;
47
+ background: var(--ink);
48
+ color: white;
49
+ }
50
+ button:disabled {
51
+ cursor: not-allowed;
52
+ opacity: 0.58;
53
+ }
54
+ button.secondary {
55
+ background: white;
56
+ color: var(--ink);
57
+ border-color: var(--line);
58
+ }
59
+ button.accept {
60
+ background: var(--good);
61
+ }
62
+ button.reject {
63
+ background: var(--bad);
64
+ }
65
+ button.text-button {
66
+ background: transparent;
67
+ border: 0;
68
+ color: var(--blue);
69
+ padding: 0;
70
+ font-weight: 700;
71
+ }
72
+ textarea {
73
+ width: 100%;
74
+ min-height: 86px;
75
+ resize: vertical;
76
+ border: 1px solid var(--line);
77
+ border-radius: 8px;
78
+ padding: 10px;
79
+ background: white;
80
+ color: var(--ink);
81
+ }
82
+ textarea:focus,
83
+ button:focus-visible {
84
+ outline: 2px solid rgba(29, 78, 216, 0.36);
85
+ outline-offset: 2px;
86
+ }
87
+ h1,
88
+ h2,
89
+ h3,
90
+ p {
91
+ margin: 0;
92
+ }
93
+ h1 {
94
+ font-size: 25px;
95
+ line-height: 1.16;
96
+ }
97
+ h2 {
98
+ font-size: 18px;
99
+ }
100
+ h3 {
101
+ font-size: 15px;
102
+ }
103
+ blockquote {
104
+ margin: 10px 0 0;
105
+ padding: 10px 11px;
106
+ border-left: 3px solid var(--line-strong);
107
+ background: white;
108
+ color: var(--ink);
109
+ }
110
+ .app-shell {
111
+ max-width: 1320px;
112
+ margin: 0 auto;
113
+ padding: 18px;
114
+ }
115
+ .topbar {
116
+ display: grid;
117
+ grid-template-columns: 1fr auto;
118
+ gap: 14px;
119
+ align-items: center;
120
+ padding: 12px 0 16px;
121
+ }
122
+ .top-actions {
123
+ display: flex;
124
+ gap: 8px;
125
+ align-items: center;
126
+ }
127
+ .eyebrow {
128
+ color: var(--muted);
129
+ font-size: 12px;
130
+ font-weight: 800;
131
+ letter-spacing: 0.08em;
132
+ text-transform: uppercase;
133
+ }
134
+ .muted {
135
+ color: var(--muted);
136
+ }
137
+ .small {
138
+ font-size: 12px;
139
+ }
140
+ .mono {
141
+ font-family:
142
+ ui-monospace,
143
+ SFMono-Regular,
144
+ Menlo,
145
+ monospace;
146
+ font-size: 12px;
147
+ }
148
+ .banner {
149
+ margin-bottom: 12px;
150
+ padding: 11px 12px;
151
+ border-radius: 8px;
152
+ border: 1px solid var(--line);
153
+ background: white;
154
+ }
155
+ .banner.warn {
156
+ border-color: #facc15;
157
+ background: #fef9c3;
158
+ color: #713f12;
159
+ }
160
+ .banner.error {
161
+ border-color: #fecaca;
162
+ background: var(--bad-soft);
163
+ color: var(--bad);
164
+ }
165
+ .status-grid {
166
+ display: grid;
167
+ grid-template-columns: repeat(4, minmax(0, 1fr));
168
+ gap: 10px;
169
+ }
170
+ .metric-card,
171
+ .panel,
172
+ .work-card,
173
+ .list-card,
174
+ .empty-state {
175
+ background: var(--panel);
176
+ border: 1px solid var(--line);
177
+ border-radius: 8px;
178
+ }
179
+ .metric-card {
180
+ padding: 11px 12px;
181
+ }
182
+ .metric-label,
183
+ .metric-detail {
184
+ display: block;
185
+ color: var(--muted);
186
+ font-size: 13px;
187
+ }
188
+ .metric-value {
189
+ display: block;
190
+ margin-top: 5px;
191
+ font-size: 22px;
192
+ }
193
+ .metric-value.good {
194
+ color: var(--good);
195
+ }
196
+ .metric-value.warn {
197
+ color: var(--warn);
198
+ }
199
+ .metric-value.bad {
200
+ color: var(--bad);
201
+ }
202
+ .workspace-grid {
203
+ display: grid;
204
+ grid-template-columns: 370px 1fr;
205
+ gap: 14px;
206
+ align-items: start;
207
+ margin-top: 14px;
208
+ }
209
+ .left-rail,
210
+ .item-stack {
211
+ display: grid;
212
+ gap: 12px;
213
+ }
214
+ .panel {
215
+ padding: 14px;
216
+ box-shadow: var(--shadow);
217
+ }
218
+ .panel-title {
219
+ display: grid;
220
+ gap: 4px;
221
+ margin-bottom: 12px;
222
+ }
223
+ .panel-title p {
224
+ color: var(--muted);
225
+ font-size: 13px;
226
+ }
227
+ .main-panel {
228
+ min-width: 0;
229
+ background: var(--panel);
230
+ border: 1px solid var(--line);
231
+ border-radius: 8px;
232
+ padding: 14px;
233
+ box-shadow: var(--shadow);
234
+ }
235
+ .tabs {
236
+ display: flex;
237
+ gap: 8px;
238
+ flex-wrap: wrap;
239
+ margin-bottom: 14px;
240
+ }
241
+ .tabs button {
242
+ background: white;
243
+ color: var(--ink);
244
+ border-color: var(--line);
245
+ }
246
+ .tabs button.active {
247
+ background: var(--ink);
248
+ color: white;
249
+ }
250
+ .work-card,
251
+ .list-card {
252
+ padding: 12px;
253
+ background: var(--panel-soft);
254
+ }
255
+ .card-head,
256
+ .button-row,
257
+ .bubble-head,
258
+ .thread-title {
259
+ display: flex;
260
+ align-items: center;
261
+ justify-content: space-between;
262
+ gap: 10px;
263
+ }
264
+ .card-copy {
265
+ margin-top: 8px;
266
+ }
267
+ .button-row {
268
+ margin-top: 10px;
269
+ }
270
+ .pill {
271
+ display: inline-block;
272
+ border-radius: 999px;
273
+ padding: 3px 8px;
274
+ font-size: 12px;
275
+ font-weight: 760;
276
+ white-space: nowrap;
277
+ }
278
+ .pill.low,
279
+ .pill.online {
280
+ background: var(--good-soft);
281
+ color: var(--good);
282
+ }
283
+ .pill.medium,
284
+ .pill.stale {
285
+ background: var(--warn-soft);
286
+ color: var(--warn);
287
+ }
288
+ .pill.high,
289
+ .pill.offline {
290
+ background: var(--bad-soft);
291
+ color: var(--bad);
292
+ }
293
+ .auth-grid {
294
+ display: grid;
295
+ gap: 8px;
296
+ }
297
+ .auth-row {
298
+ padding: 10px;
299
+ border: 1px solid var(--line);
300
+ border-radius: 8px;
301
+ background: var(--panel-soft);
302
+ }
303
+ .auth-row p,
304
+ .auth-row span {
305
+ display: block;
306
+ margin-top: 5px;
307
+ color: var(--muted);
308
+ font-size: 13px;
309
+ }
310
+ .conversation-home,
311
+ .conversation-window {
312
+ min-width: 0;
313
+ }
314
+ .thread-list {
315
+ display: grid;
316
+ gap: 8px;
317
+ align-content: start;
318
+ }
319
+ .thread-button {
320
+ display: grid;
321
+ gap: 5px;
322
+ width: 100%;
323
+ text-align: left;
324
+ color: var(--ink);
325
+ background: var(--panel-soft);
326
+ border-color: var(--line);
327
+ }
328
+ .thread-button.active {
329
+ border-color: var(--blue);
330
+ background: var(--blue-soft);
331
+ }
332
+ .thread-title {
333
+ display: flex;
334
+ gap: 8px;
335
+ align-items: center;
336
+ justify-content: space-between;
337
+ }
338
+ .thread-preview {
339
+ overflow: hidden;
340
+ color: var(--muted);
341
+ text-overflow: ellipsis;
342
+ white-space: nowrap;
343
+ }
344
+ .thread-time {
345
+ color: var(--muted);
346
+ font-size: 12px;
347
+ }
348
+ .unread {
349
+ min-width: 22px;
350
+ padding: 2px 7px;
351
+ border-radius: 999px;
352
+ background: var(--blue);
353
+ color: white;
354
+ font-size: 12px;
355
+ text-align: center;
356
+ }
357
+ .thread-detail {
358
+ min-width: 0;
359
+ border: 1px solid var(--line);
360
+ border-radius: 8px;
361
+ background: #fbfcfe;
362
+ }
363
+ .thread-header {
364
+ display: flex;
365
+ gap: 12px;
366
+ align-items: start;
367
+ padding: 12px;
368
+ border-bottom: 1px solid var(--line);
369
+ }
370
+ .message-list {
371
+ display: grid;
372
+ gap: 10px;
373
+ max-height: 56vh;
374
+ min-height: 300px;
375
+ overflow: auto;
376
+ padding: 12px;
377
+ align-content: start;
378
+ }
379
+ .bubble {
380
+ max-width: 78%;
381
+ padding: 10px 11px;
382
+ border: 1px solid var(--line);
383
+ border-radius: 8px;
384
+ background: white;
385
+ }
386
+ .bubble.peer {
387
+ justify-self: start;
388
+ }
389
+ .bubble.user {
390
+ justify-self: end;
391
+ background: var(--blue-soft);
392
+ border-color: #bfdbfe;
393
+ }
394
+ .bubble p {
395
+ margin-top: 7px;
396
+ }
397
+ .system-line {
398
+ justify-self: center;
399
+ max-width: 82%;
400
+ padding: 6px 10px;
401
+ border: 1px solid var(--line);
402
+ border-radius: 999px;
403
+ background: #f8fafc;
404
+ color: var(--muted);
405
+ font-size: 13px;
406
+ text-align: center;
407
+ }
408
+ .message-details {
409
+ display: grid;
410
+ grid-template-columns: minmax(80px, auto) 1fr;
411
+ gap: 4px 10px;
412
+ margin: 10px 0 0;
413
+ font-size: 12px;
414
+ }
415
+ .message-details dt {
416
+ color: var(--muted);
417
+ }
418
+ .message-details dd {
419
+ margin: 0;
420
+ overflow-wrap: anywhere;
421
+ font-family:
422
+ ui-monospace,
423
+ SFMono-Regular,
424
+ Menlo,
425
+ monospace;
426
+ }
427
+ .composer-card {
428
+ display: grid;
429
+ gap: 9px;
430
+ padding: 12px;
431
+ border-top: 1px solid var(--line);
432
+ }
433
+ .composer-card label {
434
+ color: var(--muted);
435
+ font-size: 13px;
436
+ font-weight: 700;
437
+ }
438
+ .summary-card {
439
+ margin: 12px;
440
+ padding: 12px;
441
+ border: 1px solid var(--line);
442
+ border-radius: 8px;
443
+ background: #f8fafc;
444
+ }
445
+ .todo-list {
446
+ display: grid;
447
+ gap: 7px;
448
+ margin: 10px 0 0;
449
+ padding: 0;
450
+ list-style: none;
451
+ }
452
+ .todo-list li {
453
+ display: grid;
454
+ gap: 3px;
455
+ padding: 8px;
456
+ border: 1px solid var(--line);
457
+ border-radius: 6px;
458
+ background: white;
459
+ }
460
+ .todo-list small {
461
+ color: var(--muted);
462
+ overflow-wrap: anywhere;
463
+ }
464
+ .empty-state {
465
+ padding: 16px;
466
+ border-style: dashed;
467
+ color: var(--muted);
468
+ }
469
+ .empty-state.compact {
470
+ padding: 12px;
471
+ }
472
+ .empty-state strong {
473
+ display: block;
474
+ color: var(--ink);
475
+ margin-bottom: 4px;
476
+ }
477
+ .loading-card {
478
+ display: flex;
479
+ gap: 14px;
480
+ align-items: center;
481
+ max-width: 520px;
482
+ margin: 18vh auto 0;
483
+ padding: 18px;
484
+ border: 1px solid var(--line);
485
+ border-radius: 8px;
486
+ background: white;
487
+ box-shadow: var(--shadow);
488
+ }
489
+ .spinner {
490
+ width: 28px;
491
+ height: 28px;
492
+ border: 3px solid var(--line);
493
+ border-top-color: var(--blue);
494
+ border-radius: 50%;
495
+ animation: spin 900ms linear infinite;
496
+ }
497
+ .debug-grid pre {
498
+ overflow: auto;
499
+ margin: 0;
500
+ padding: 12px;
501
+ border: 1px solid var(--line);
502
+ border-radius: 8px;
503
+ background: #0f172a;
504
+ color: #e5e7eb;
505
+ }
506
+ @keyframes spin {
507
+ to {
508
+ transform: rotate(360deg);
509
+ }
510
+ }
511
+ @media (max-width: 1080px) {
512
+ .workspace-grid,
513
+ .status-grid {
514
+ grid-template-columns: 1fr;
515
+ }
516
+ .bubble {
517
+ max-width: 100%;
518
+ }
519
+ }