@symbo.ls/connect 3.4.0 → 3.4.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.
- package/Artboard.png +0 -0
- package/SESSION_LOG.md +190 -0
- package/dist/manifest.json +1 -1
- package/dist/panel.css +737 -171
- package/dist/panel.html +49 -13
- package/dist/panel.js +1466 -157
- package/package.json +3 -3
- package/static/panel.css +737 -171
- package/static/panel.html +49 -13
- package/static/panel.js +1466 -157
package/static/panel.css
CHANGED
|
@@ -4,29 +4,52 @@
|
|
|
4
4
|
box-sizing: border-box;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
/* Scrollbar */
|
|
8
|
+
::-webkit-scrollbar {
|
|
9
|
+
width: 6px;
|
|
10
|
+
height: 6px;
|
|
11
|
+
}
|
|
12
|
+
::-webkit-scrollbar-track {
|
|
13
|
+
background: transparent;
|
|
14
|
+
}
|
|
15
|
+
::-webkit-scrollbar-thumb {
|
|
16
|
+
background: rgba(255,255,255,0.08);
|
|
17
|
+
border-radius: 3px;
|
|
18
|
+
}
|
|
19
|
+
::-webkit-scrollbar-thumb:hover {
|
|
20
|
+
background: rgba(255,255,255,0.14);
|
|
21
|
+
}
|
|
22
|
+
|
|
7
23
|
:root {
|
|
8
|
-
--bg: #
|
|
9
|
-
--bg-alt: #
|
|
10
|
-
--bg-
|
|
11
|
-
--bg-
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--
|
|
15
|
-
--
|
|
24
|
+
--bg: #0e0e10;
|
|
25
|
+
--bg-alt: #1a1a1e;
|
|
26
|
+
--bg-panel: #161618;
|
|
27
|
+
--bg-hover: rgba(255,255,255,0.04);
|
|
28
|
+
--bg-active: rgba(255,255,255,0.08);
|
|
29
|
+
--bg-input: #1e1e22;
|
|
30
|
+
--border: rgba(255,255,255,0.07);
|
|
31
|
+
--border-strong: rgba(255,255,255,0.12);
|
|
32
|
+
--text: #b0b0b8;
|
|
33
|
+
--text-dim: #6a6a76;
|
|
34
|
+
--text-bright: #e8e8ec;
|
|
16
35
|
--accent: #0085FF;
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
36
|
+
--accent-dim: rgba(0,133,255,0.12);
|
|
37
|
+
--key-color: #5AE8FF;
|
|
38
|
+
--string-color: #EDD460;
|
|
39
|
+
--number-color: #C8E040;
|
|
40
|
+
--boolean-color: #2E9BFF;
|
|
41
|
+
--null-color: #6a6a76;
|
|
42
|
+
--function-color: #F09ECB;
|
|
43
|
+
--type-color: #65BD62;
|
|
44
|
+
--error-color: #F06E58;
|
|
45
|
+
--tag-color: #7a7a86;
|
|
46
|
+
--radius: 8px;
|
|
47
|
+
--radius-sm: 6px;
|
|
48
|
+
--radius-xs: 4px;
|
|
26
49
|
}
|
|
27
50
|
|
|
28
51
|
body {
|
|
29
|
-
font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
|
|
52
|
+
font-family: 'DM Sans', 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, -apple-system, sans-serif;
|
|
30
53
|
font-size: 12px;
|
|
31
54
|
background: var(--bg);
|
|
32
55
|
color: var(--text);
|
|
@@ -34,6 +57,8 @@ body {
|
|
|
34
57
|
overflow: hidden;
|
|
35
58
|
display: flex;
|
|
36
59
|
flex-direction: column;
|
|
60
|
+
-webkit-font-smoothing: antialiased;
|
|
61
|
+
-moz-osx-font-smoothing: grayscale;
|
|
37
62
|
}
|
|
38
63
|
|
|
39
64
|
/* ============================================================
|
|
@@ -45,7 +70,8 @@ body {
|
|
|
45
70
|
background: var(--bg-alt);
|
|
46
71
|
border-bottom: 1px solid var(--border);
|
|
47
72
|
flex-shrink: 0;
|
|
48
|
-
padding: 0
|
|
73
|
+
padding: 0 8px;
|
|
74
|
+
gap: 2px;
|
|
49
75
|
}
|
|
50
76
|
|
|
51
77
|
.mode-tab {
|
|
@@ -53,11 +79,13 @@ body {
|
|
|
53
79
|
border: none;
|
|
54
80
|
border-bottom: 2px solid transparent;
|
|
55
81
|
color: var(--text-dim);
|
|
56
|
-
padding:
|
|
82
|
+
padding: 8px 14px;
|
|
57
83
|
cursor: pointer;
|
|
58
84
|
font-size: 12px;
|
|
59
85
|
font-weight: 500;
|
|
60
86
|
font-family: inherit;
|
|
87
|
+
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
|
|
88
|
+
transition: color 0.15s, background 0.15s;
|
|
61
89
|
}
|
|
62
90
|
|
|
63
91
|
.mode-tab:hover {
|
|
@@ -75,15 +103,17 @@ body {
|
|
|
75
103
|
}
|
|
76
104
|
|
|
77
105
|
#app-connection-badge {
|
|
78
|
-
font-size:
|
|
106
|
+
font-size: 11px;
|
|
79
107
|
color: var(--type-color);
|
|
80
|
-
padding:
|
|
81
|
-
|
|
82
|
-
border-radius:
|
|
108
|
+
padding: 3px 8px;
|
|
109
|
+
background: rgba(89, 172, 86, 0.1);
|
|
110
|
+
border-radius: 20px;
|
|
83
111
|
white-space: nowrap;
|
|
84
112
|
overflow: hidden;
|
|
85
113
|
text-overflow: ellipsis;
|
|
86
114
|
max-width: 160px;
|
|
115
|
+
font-weight: 500;
|
|
116
|
+
letter-spacing: 0.3px;
|
|
87
117
|
}
|
|
88
118
|
|
|
89
119
|
#btn-app-disconnect {
|
|
@@ -94,10 +124,13 @@ body {
|
|
|
94
124
|
cursor: pointer;
|
|
95
125
|
padding: 4px 8px;
|
|
96
126
|
line-height: 1;
|
|
127
|
+
border-radius: var(--radius-xs);
|
|
128
|
+
transition: color 0.15s, background 0.15s;
|
|
97
129
|
}
|
|
98
130
|
|
|
99
131
|
#btn-app-disconnect:hover {
|
|
100
132
|
color: var(--error-color);
|
|
133
|
+
background: rgba(235,102,80,0.1);
|
|
101
134
|
}
|
|
102
135
|
|
|
103
136
|
/* ============================================================
|
|
@@ -127,25 +160,29 @@ body {
|
|
|
127
160
|
display: flex;
|
|
128
161
|
align-items: center;
|
|
129
162
|
gap: 6px;
|
|
130
|
-
padding:
|
|
131
|
-
background: var(--bg-
|
|
163
|
+
padding: 5px 10px;
|
|
164
|
+
background: var(--bg-panel);
|
|
132
165
|
border-bottom: 1px solid var(--border);
|
|
133
166
|
flex-shrink: 0;
|
|
167
|
+
position: relative;
|
|
134
168
|
}
|
|
135
169
|
|
|
136
170
|
#toolbar button {
|
|
137
|
-
background:
|
|
171
|
+
background: var(--bg-input);
|
|
138
172
|
border: 1px solid var(--border);
|
|
139
173
|
color: var(--text);
|
|
140
|
-
padding:
|
|
141
|
-
border-radius:
|
|
174
|
+
padding: 4px 12px;
|
|
175
|
+
border-radius: var(--radius-sm);
|
|
142
176
|
cursor: pointer;
|
|
143
177
|
font-size: 11px;
|
|
144
|
-
font-family:
|
|
178
|
+
font-family: inherit;
|
|
179
|
+
font-weight: 500;
|
|
180
|
+
transition: background 0.15s, border-color 0.15s;
|
|
145
181
|
}
|
|
146
182
|
|
|
147
183
|
#toolbar button:hover {
|
|
148
184
|
background: var(--bg-hover);
|
|
185
|
+
border-color: var(--border-strong);
|
|
149
186
|
}
|
|
150
187
|
|
|
151
188
|
#toolbar button.active,
|
|
@@ -214,17 +251,20 @@ body {
|
|
|
214
251
|
border-right: 1px solid var(--border);
|
|
215
252
|
display: flex;
|
|
216
253
|
flex-direction: column;
|
|
254
|
+
background: var(--bg-panel);
|
|
217
255
|
}
|
|
218
256
|
|
|
219
257
|
#tree-pane-tabs {
|
|
220
258
|
display: flex;
|
|
221
259
|
border-bottom: 1px solid var(--border);
|
|
222
260
|
flex-shrink: 0;
|
|
261
|
+
padding: 0 4px;
|
|
262
|
+
gap: 2px;
|
|
223
263
|
}
|
|
224
264
|
|
|
225
265
|
.tree-pane-tab {
|
|
226
266
|
flex: 1;
|
|
227
|
-
padding:
|
|
267
|
+
padding: 6px 6px;
|
|
228
268
|
font-size: 11px;
|
|
229
269
|
color: var(--text-dim);
|
|
230
270
|
background: transparent;
|
|
@@ -232,6 +272,9 @@ body {
|
|
|
232
272
|
border-bottom: 2px solid transparent;
|
|
233
273
|
cursor: pointer;
|
|
234
274
|
font-family: inherit;
|
|
275
|
+
font-weight: 500;
|
|
276
|
+
transition: color 0.15s;
|
|
277
|
+
white-space: nowrap;
|
|
235
278
|
}
|
|
236
279
|
|
|
237
280
|
.tree-pane-tab:hover { color: var(--text); }
|
|
@@ -262,7 +305,7 @@ body {
|
|
|
262
305
|
display: inline-block;
|
|
263
306
|
margin-left: 4px;
|
|
264
307
|
padding: 0 4px;
|
|
265
|
-
font-size:
|
|
308
|
+
font-size: 10px;
|
|
266
309
|
background: var(--accent);
|
|
267
310
|
color: #fff;
|
|
268
311
|
border-radius: 8px;
|
|
@@ -271,7 +314,7 @@ body {
|
|
|
271
314
|
}
|
|
272
315
|
|
|
273
316
|
.state-tree-value {
|
|
274
|
-
font-family: '
|
|
317
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
275
318
|
font-size: 11px;
|
|
276
319
|
line-height: 18px;
|
|
277
320
|
opacity: 0.85;
|
|
@@ -306,7 +349,7 @@ body {
|
|
|
306
349
|
.ds-category-count {
|
|
307
350
|
display: inline-block;
|
|
308
351
|
padding: 0 4px;
|
|
309
|
-
font-size:
|
|
352
|
+
font-size: 10px;
|
|
310
353
|
background: var(--accent);
|
|
311
354
|
color: #fff;
|
|
312
355
|
border-radius: 8px;
|
|
@@ -323,7 +366,7 @@ body {
|
|
|
323
366
|
padding: 2px 8px;
|
|
324
367
|
font-size: 11px;
|
|
325
368
|
line-height: 20px;
|
|
326
|
-
font-family: '
|
|
369
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
327
370
|
}
|
|
328
371
|
.ds-value-row:hover {
|
|
329
372
|
background: var(--bg-hover);
|
|
@@ -332,8 +375,8 @@ body {
|
|
|
332
375
|
display: inline-block;
|
|
333
376
|
width: 12px;
|
|
334
377
|
height: 12px;
|
|
335
|
-
border-radius:
|
|
336
|
-
border: 1px solid rgba(
|
|
378
|
+
border-radius: 50%;
|
|
379
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
337
380
|
flex-shrink: 0;
|
|
338
381
|
}
|
|
339
382
|
|
|
@@ -342,11 +385,13 @@ body {
|
|
|
342
385
|
background: var(--accent);
|
|
343
386
|
color: #fff;
|
|
344
387
|
border: none;
|
|
345
|
-
border-radius:
|
|
346
|
-
padding:
|
|
388
|
+
border-radius: 20px;
|
|
389
|
+
padding: 4px 12px;
|
|
347
390
|
font-size: 11px;
|
|
391
|
+
font-weight: 500;
|
|
348
392
|
cursor: pointer;
|
|
349
393
|
margin-right: 4px;
|
|
394
|
+
transition: opacity 0.15s;
|
|
350
395
|
}
|
|
351
396
|
.btn-header-connect:hover {
|
|
352
397
|
opacity: 0.85;
|
|
@@ -361,12 +406,13 @@ body {
|
|
|
361
406
|
display: flex;
|
|
362
407
|
}
|
|
363
408
|
.connect-dialog-inner {
|
|
364
|
-
background: var(--bg-
|
|
365
|
-
border: 1px solid var(--border);
|
|
366
|
-
border-radius:
|
|
367
|
-
padding:
|
|
368
|
-
box-shadow: 0
|
|
369
|
-
min-width:
|
|
409
|
+
background: var(--bg-alt);
|
|
410
|
+
border: 1px solid var(--border-strong);
|
|
411
|
+
border-radius: var(--radius);
|
|
412
|
+
padding: 14px;
|
|
413
|
+
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
|
414
|
+
min-width: 190px;
|
|
415
|
+
position: relative;
|
|
370
416
|
}
|
|
371
417
|
.connect-dialog-title {
|
|
372
418
|
font-size: 12px;
|
|
@@ -377,18 +423,20 @@ body {
|
|
|
377
423
|
.connect-dialog-btn {
|
|
378
424
|
display: block;
|
|
379
425
|
width: 100%;
|
|
380
|
-
padding:
|
|
426
|
+
padding: 8px 12px;
|
|
381
427
|
margin-bottom: 4px;
|
|
382
428
|
border: 1px solid var(--border);
|
|
383
|
-
border-radius:
|
|
384
|
-
background: var(--bg);
|
|
429
|
+
border-radius: var(--radius-sm);
|
|
430
|
+
background: var(--bg-input);
|
|
385
431
|
color: var(--text);
|
|
386
432
|
cursor: pointer;
|
|
387
433
|
font-size: 12px;
|
|
388
434
|
text-align: left;
|
|
435
|
+
transition: background 0.15s, border-color 0.15s;
|
|
389
436
|
}
|
|
390
437
|
.connect-dialog-btn:hover {
|
|
391
438
|
background: var(--bg-hover);
|
|
439
|
+
border-color: var(--border-strong);
|
|
392
440
|
}
|
|
393
441
|
.connect-dialog-close {
|
|
394
442
|
position: absolute;
|
|
@@ -418,13 +466,15 @@ body {
|
|
|
418
466
|
display: flex;
|
|
419
467
|
flex-direction: column;
|
|
420
468
|
overflow: hidden;
|
|
469
|
+
background: var(--bg-panel);
|
|
421
470
|
}
|
|
422
471
|
|
|
423
472
|
/* ============================================================
|
|
424
473
|
Detail header and tabs
|
|
425
474
|
============================================================ */
|
|
475
|
+
|
|
426
476
|
#detail-header {
|
|
427
|
-
padding: 8px
|
|
477
|
+
padding: 8px 14px;
|
|
428
478
|
background: var(--bg-alt);
|
|
429
479
|
border-bottom: 1px solid var(--border);
|
|
430
480
|
display: flex;
|
|
@@ -446,7 +496,7 @@ body {
|
|
|
446
496
|
|
|
447
497
|
#detail-path {
|
|
448
498
|
color: var(--text-dim);
|
|
449
|
-
font-size:
|
|
499
|
+
font-size: 11px;
|
|
450
500
|
margin-left: auto;
|
|
451
501
|
}
|
|
452
502
|
|
|
@@ -456,6 +506,7 @@ body {
|
|
|
456
506
|
background: var(--bg-alt);
|
|
457
507
|
border-bottom: 1px solid var(--border);
|
|
458
508
|
flex-shrink: 0;
|
|
509
|
+
padding: 0 4px;
|
|
459
510
|
}
|
|
460
511
|
|
|
461
512
|
.tab {
|
|
@@ -463,15 +514,16 @@ body {
|
|
|
463
514
|
border: none;
|
|
464
515
|
border-bottom: 2px solid transparent;
|
|
465
516
|
color: var(--text-dim);
|
|
466
|
-
padding: 6px
|
|
517
|
+
padding: 6px 12px;
|
|
467
518
|
cursor: pointer;
|
|
468
519
|
font-size: 11px;
|
|
469
|
-
font-family:
|
|
520
|
+
font-family: inherit;
|
|
521
|
+
font-weight: 500;
|
|
522
|
+
transition: color 0.15s;
|
|
470
523
|
}
|
|
471
524
|
|
|
472
525
|
.tab:hover {
|
|
473
526
|
color: var(--text);
|
|
474
|
-
background: var(--bg-hover);
|
|
475
527
|
}
|
|
476
528
|
|
|
477
529
|
.tab.active {
|
|
@@ -480,7 +532,7 @@ body {
|
|
|
480
532
|
}
|
|
481
533
|
|
|
482
534
|
/* Props sub-tabs (Computed / Original) */
|
|
483
|
-
#props-subtabs {
|
|
535
|
+
#props-subtabs, #ds-subtabs {
|
|
484
536
|
display: flex;
|
|
485
537
|
gap: 0;
|
|
486
538
|
margin-bottom: 6px;
|
|
@@ -489,7 +541,7 @@ body {
|
|
|
489
541
|
|
|
490
542
|
.props-subtab {
|
|
491
543
|
padding: 3px 10px;
|
|
492
|
-
font-size:
|
|
544
|
+
font-size: 11px;
|
|
493
545
|
color: var(--text-dim);
|
|
494
546
|
background: transparent;
|
|
495
547
|
border: none;
|
|
@@ -512,7 +564,7 @@ body {
|
|
|
512
564
|
/* Function prop indicator */
|
|
513
565
|
.prop-fn-badge {
|
|
514
566
|
display: inline-block;
|
|
515
|
-
font-size:
|
|
567
|
+
font-size: 10px;
|
|
516
568
|
color: #C586C0;
|
|
517
569
|
margin-left: 4px;
|
|
518
570
|
font-style: italic;
|
|
@@ -525,7 +577,7 @@ body {
|
|
|
525
577
|
}
|
|
526
578
|
|
|
527
579
|
.prop-fn-tooltip {
|
|
528
|
-
font-size:
|
|
580
|
+
font-size: 11px;
|
|
529
581
|
color: var(--text-dim);
|
|
530
582
|
padding: 4px 8px;
|
|
531
583
|
background: var(--bg-alt);
|
|
@@ -569,10 +621,13 @@ body {
|
|
|
569
621
|
.tree-item {
|
|
570
622
|
display: flex;
|
|
571
623
|
align-items: center;
|
|
572
|
-
padding:
|
|
624
|
+
padding: 3px 0 3px 0;
|
|
573
625
|
cursor: pointer;
|
|
574
626
|
white-space: nowrap;
|
|
575
627
|
user-select: none;
|
|
628
|
+
border-radius: var(--radius-xs);
|
|
629
|
+
margin: 0 4px;
|
|
630
|
+
transition: background 0.1s;
|
|
576
631
|
}
|
|
577
632
|
|
|
578
633
|
.tree-item:hover {
|
|
@@ -587,7 +642,7 @@ body {
|
|
|
587
642
|
width: 16px;
|
|
588
643
|
text-align: center;
|
|
589
644
|
color: var(--text-dim);
|
|
590
|
-
font-size:
|
|
645
|
+
font-size: 11px;
|
|
591
646
|
flex-shrink: 0;
|
|
592
647
|
}
|
|
593
648
|
|
|
@@ -619,11 +674,14 @@ body {
|
|
|
619
674
|
.prop-row {
|
|
620
675
|
display: flex;
|
|
621
676
|
align-items: baseline;
|
|
622
|
-
padding:
|
|
623
|
-
min-height:
|
|
624
|
-
line-height:
|
|
625
|
-
font-family: '
|
|
626
|
-
font-size:
|
|
677
|
+
padding: 3px 8px 3px 16px;
|
|
678
|
+
min-height: 24px;
|
|
679
|
+
line-height: 20px;
|
|
680
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
681
|
+
font-size: 11px;
|
|
682
|
+
border-radius: var(--radius-xs);
|
|
683
|
+
margin: 0 4px;
|
|
684
|
+
transition: background 0.1s;
|
|
627
685
|
}
|
|
628
686
|
|
|
629
687
|
.prop-row:hover {
|
|
@@ -655,20 +713,20 @@ body {
|
|
|
655
713
|
|
|
656
714
|
.prop-value.editable {
|
|
657
715
|
cursor: text;
|
|
658
|
-
padding:
|
|
659
|
-
border-radius:
|
|
716
|
+
padding: 1px 4px;
|
|
717
|
+
border-radius: var(--radius-xs);
|
|
660
718
|
min-width: 20px;
|
|
661
719
|
}
|
|
662
720
|
|
|
663
721
|
.prop-value.editable:hover {
|
|
664
|
-
background:
|
|
665
|
-
box-shadow: 0 0 0 1px rgba(0, 133, 255, 0.2);
|
|
722
|
+
background: var(--accent-dim);
|
|
666
723
|
}
|
|
667
724
|
|
|
668
725
|
.prop-value.editing {
|
|
669
|
-
background: var(--bg);
|
|
726
|
+
background: var(--bg-input);
|
|
670
727
|
box-shadow: 0 0 0 1px var(--accent);
|
|
671
|
-
border-radius:
|
|
728
|
+
border-radius: var(--radius-xs);
|
|
729
|
+
padding: 2px 4px;
|
|
672
730
|
}
|
|
673
731
|
|
|
674
732
|
.prop-edit-input {
|
|
@@ -713,6 +771,18 @@ body {
|
|
|
713
771
|
opacity: 1;
|
|
714
772
|
color: var(--error-color);
|
|
715
773
|
}
|
|
774
|
+
.obj-editor-nested {
|
|
775
|
+
border-left: 1px solid var(--border);
|
|
776
|
+
margin-left: 8px;
|
|
777
|
+
}
|
|
778
|
+
.obj-nested-preview {
|
|
779
|
+
padding: 1px 4px;
|
|
780
|
+
border-radius: var(--radius-xs);
|
|
781
|
+
background: var(--bg-input);
|
|
782
|
+
}
|
|
783
|
+
.obj-nested-preview:hover {
|
|
784
|
+
color: var(--accent) !important;
|
|
785
|
+
}
|
|
716
786
|
.obj-editor-actions {
|
|
717
787
|
display: flex;
|
|
718
788
|
gap: 4px;
|
|
@@ -720,13 +790,16 @@ body {
|
|
|
720
790
|
}
|
|
721
791
|
.obj-editor-save,
|
|
722
792
|
.obj-editor-cancel {
|
|
723
|
-
padding:
|
|
793
|
+
padding: 3px 10px;
|
|
724
794
|
border: 1px solid var(--border);
|
|
725
|
-
border-radius:
|
|
726
|
-
font-size:
|
|
795
|
+
border-radius: var(--radius-sm);
|
|
796
|
+
font-size: 11px;
|
|
727
797
|
cursor: pointer;
|
|
728
|
-
background: var(--bg);
|
|
798
|
+
background: var(--bg-input);
|
|
729
799
|
color: var(--text);
|
|
800
|
+
font-family: inherit;
|
|
801
|
+
font-weight: 500;
|
|
802
|
+
transition: background 0.15s;
|
|
730
803
|
}
|
|
731
804
|
.obj-editor-save {
|
|
732
805
|
background: var(--accent);
|
|
@@ -755,12 +828,12 @@ body {
|
|
|
755
828
|
right: 0;
|
|
756
829
|
z-index: 100;
|
|
757
830
|
background: var(--bg-alt);
|
|
758
|
-
border: 1px solid var(--border);
|
|
759
|
-
border-radius:
|
|
831
|
+
border: 1px solid var(--border-strong);
|
|
832
|
+
border-radius: var(--radius-sm);
|
|
760
833
|
max-height: 180px;
|
|
761
834
|
overflow: auto;
|
|
762
|
-
box-shadow: 0
|
|
763
|
-
margin-top:
|
|
835
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
|
836
|
+
margin-top: 4px;
|
|
764
837
|
}
|
|
765
838
|
|
|
766
839
|
.prop-dropdown-item {
|
|
@@ -783,15 +856,15 @@ body {
|
|
|
783
856
|
|
|
784
857
|
.prop-dropdown-item .dd-hint {
|
|
785
858
|
color: var(--text-dim);
|
|
786
|
-
font-size:
|
|
859
|
+
font-size: 11px;
|
|
787
860
|
margin-left: 8px;
|
|
788
861
|
}
|
|
789
862
|
|
|
790
863
|
.prop-dropdown-item .dd-swatch {
|
|
791
864
|
width: 12px;
|
|
792
865
|
height: 12px;
|
|
793
|
-
border-radius:
|
|
794
|
-
border: 1px solid
|
|
866
|
+
border-radius: 50%;
|
|
867
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
795
868
|
margin-right: 6px;
|
|
796
869
|
flex-shrink: 0;
|
|
797
870
|
}
|
|
@@ -827,14 +900,16 @@ body {
|
|
|
827
900
|
}
|
|
828
901
|
|
|
829
902
|
.method-btn {
|
|
830
|
-
background:
|
|
903
|
+
background: var(--bg-input);
|
|
831
904
|
border: 1px solid var(--border);
|
|
832
905
|
color: var(--accent);
|
|
833
|
-
padding:
|
|
834
|
-
border-radius:
|
|
906
|
+
padding: 3px 10px;
|
|
907
|
+
border-radius: var(--radius-sm);
|
|
835
908
|
cursor: pointer;
|
|
836
909
|
font-size: 11px;
|
|
837
|
-
font-family:
|
|
910
|
+
font-family: inherit;
|
|
911
|
+
font-weight: 500;
|
|
912
|
+
transition: background 0.15s;
|
|
838
913
|
}
|
|
839
914
|
|
|
840
915
|
.method-btn:hover {
|
|
@@ -842,14 +917,20 @@ body {
|
|
|
842
917
|
}
|
|
843
918
|
|
|
844
919
|
.method-args {
|
|
845
|
-
background: var(--bg);
|
|
920
|
+
background: var(--bg-input);
|
|
846
921
|
border: 1px solid var(--border);
|
|
847
922
|
color: var(--text);
|
|
848
|
-
font-family: '
|
|
923
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
849
924
|
font-size: 11px;
|
|
850
|
-
padding:
|
|
851
|
-
border-radius:
|
|
925
|
+
padding: 4px 8px;
|
|
926
|
+
border-radius: var(--radius-sm);
|
|
852
927
|
width: 200px;
|
|
928
|
+
outline: none;
|
|
929
|
+
transition: border-color 0.15s;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.method-args:focus {
|
|
933
|
+
border-color: var(--accent);
|
|
853
934
|
}
|
|
854
935
|
|
|
855
936
|
.method-result {
|
|
@@ -885,7 +966,7 @@ body {
|
|
|
885
966
|
.child-arrow {
|
|
886
967
|
color: var(--text-dim);
|
|
887
968
|
margin-left: auto;
|
|
888
|
-
font-size:
|
|
969
|
+
font-size: 11px;
|
|
889
970
|
}
|
|
890
971
|
|
|
891
972
|
/* ============================================================
|
|
@@ -893,7 +974,7 @@ body {
|
|
|
893
974
|
============================================================ */
|
|
894
975
|
.section-header {
|
|
895
976
|
color: var(--text-dim);
|
|
896
|
-
font-size:
|
|
977
|
+
font-size: 11px;
|
|
897
978
|
text-transform: uppercase;
|
|
898
979
|
letter-spacing: 1px;
|
|
899
980
|
padding: 8px 0 4px;
|
|
@@ -906,7 +987,7 @@ body {
|
|
|
906
987
|
align-items: center;
|
|
907
988
|
justify-content: space-between;
|
|
908
989
|
color: var(--function-color);
|
|
909
|
-
font-size:
|
|
990
|
+
font-size: 11px;
|
|
910
991
|
letter-spacing: 0.5px;
|
|
911
992
|
padding: 6px 0 3px;
|
|
912
993
|
margin-top: 6px;
|
|
@@ -998,7 +1079,7 @@ body {
|
|
|
998
1079
|
padding: 14px 16px;
|
|
999
1080
|
background: var(--bg-alt);
|
|
1000
1081
|
border: 1px solid var(--border);
|
|
1001
|
-
border-radius:
|
|
1082
|
+
border-radius: var(--radius);
|
|
1002
1083
|
cursor: pointer;
|
|
1003
1084
|
text-align: left;
|
|
1004
1085
|
transition: border-color 0.15s, background 0.15s;
|
|
@@ -1006,7 +1087,7 @@ body {
|
|
|
1006
1087
|
|
|
1007
1088
|
.connect-btn:hover {
|
|
1008
1089
|
background: var(--bg-hover);
|
|
1009
|
-
border-color: var(--
|
|
1090
|
+
border-color: var(--border-strong);
|
|
1010
1091
|
}
|
|
1011
1092
|
|
|
1012
1093
|
.connect-btn-icon {
|
|
@@ -1064,7 +1145,7 @@ body {
|
|
|
1064
1145
|
|
|
1065
1146
|
.recent-type {
|
|
1066
1147
|
color: var(--text-dim);
|
|
1067
|
-
font-size:
|
|
1148
|
+
font-size: 11px;
|
|
1068
1149
|
margin-left: auto;
|
|
1069
1150
|
}
|
|
1070
1151
|
|
|
@@ -1098,7 +1179,7 @@ body {
|
|
|
1098
1179
|
display: block;
|
|
1099
1180
|
padding: 6px 8px 4px;
|
|
1100
1181
|
color: var(--text-dim);
|
|
1101
|
-
font-size:
|
|
1182
|
+
font-size: 11px;
|
|
1102
1183
|
text-transform: uppercase;
|
|
1103
1184
|
letter-spacing: 1px;
|
|
1104
1185
|
border-bottom: 1px solid var(--border);
|
|
@@ -1136,7 +1217,7 @@ body {
|
|
|
1136
1217
|
width: 16px;
|
|
1137
1218
|
text-align: center;
|
|
1138
1219
|
color: var(--text-dim);
|
|
1139
|
-
font-size:
|
|
1220
|
+
font-size: 11px;
|
|
1140
1221
|
flex-shrink: 0;
|
|
1141
1222
|
}
|
|
1142
1223
|
|
|
@@ -1165,7 +1246,7 @@ body {
|
|
|
1165
1246
|
|
|
1166
1247
|
.source-path {
|
|
1167
1248
|
color: var(--text-dim);
|
|
1168
|
-
font-size:
|
|
1249
|
+
font-size: 11px;
|
|
1169
1250
|
padding: 4px 0 8px;
|
|
1170
1251
|
border-bottom: 1px solid var(--border);
|
|
1171
1252
|
margin-bottom: 8px;
|
|
@@ -1192,7 +1273,7 @@ body {
|
|
|
1192
1273
|
}
|
|
1193
1274
|
|
|
1194
1275
|
.ce-status {
|
|
1195
|
-
font-size:
|
|
1276
|
+
font-size: 11px;
|
|
1196
1277
|
color: var(--text-dim);
|
|
1197
1278
|
}
|
|
1198
1279
|
|
|
@@ -1207,8 +1288,8 @@ body {
|
|
|
1207
1288
|
padding: 2px 12px;
|
|
1208
1289
|
border-radius: 3px;
|
|
1209
1290
|
cursor: pointer;
|
|
1210
|
-
font-family: '
|
|
1211
|
-
font-size:
|
|
1291
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
1292
|
+
font-size: 11px;
|
|
1212
1293
|
}
|
|
1213
1294
|
|
|
1214
1295
|
.ce-save:hover { opacity: 0.85; }
|
|
@@ -1219,7 +1300,7 @@ body {
|
|
|
1219
1300
|
flex: 1;
|
|
1220
1301
|
overflow: hidden;
|
|
1221
1302
|
background: var(--bg);
|
|
1222
|
-
font-family: '
|
|
1303
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
1223
1304
|
font-size: 12px;
|
|
1224
1305
|
line-height: 18px;
|
|
1225
1306
|
}
|
|
@@ -1305,11 +1386,11 @@ body {
|
|
|
1305
1386
|
|
|
1306
1387
|
/* Prop source badges */
|
|
1307
1388
|
.prop-source-file {
|
|
1308
|
-
font-size:
|
|
1389
|
+
font-size: 10px;
|
|
1309
1390
|
color: var(--accent);
|
|
1310
1391
|
opacity: 0.7;
|
|
1311
1392
|
cursor: pointer;
|
|
1312
|
-
font-family: '
|
|
1393
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
1313
1394
|
}
|
|
1314
1395
|
|
|
1315
1396
|
.prop-source-file:hover {
|
|
@@ -1341,12 +1422,14 @@ body {
|
|
|
1341
1422
|
background: var(--type-color);
|
|
1342
1423
|
color: #fff;
|
|
1343
1424
|
border: none;
|
|
1344
|
-
padding:
|
|
1345
|
-
border-radius:
|
|
1425
|
+
padding: 7px 16px;
|
|
1426
|
+
border-radius: var(--radius-sm);
|
|
1346
1427
|
cursor: pointer;
|
|
1347
|
-
font-family:
|
|
1428
|
+
font-family: inherit;
|
|
1348
1429
|
font-size: 11px;
|
|
1430
|
+
font-weight: 500;
|
|
1349
1431
|
width: 100%;
|
|
1432
|
+
transition: opacity 0.15s;
|
|
1350
1433
|
}
|
|
1351
1434
|
|
|
1352
1435
|
.prop-save-btn:hover {
|
|
@@ -1363,12 +1446,13 @@ body {
|
|
|
1363
1446
|
background: transparent;
|
|
1364
1447
|
border: 1px dashed var(--border);
|
|
1365
1448
|
color: var(--text-dim);
|
|
1366
|
-
padding:
|
|
1367
|
-
border-radius:
|
|
1449
|
+
padding: 5px 12px;
|
|
1450
|
+
border-radius: var(--radius-sm);
|
|
1368
1451
|
font-size: 11px;
|
|
1369
|
-
font-family:
|
|
1452
|
+
font-family: inherit;
|
|
1370
1453
|
cursor: pointer;
|
|
1371
1454
|
width: 100%;
|
|
1455
|
+
transition: border-color 0.15s, color 0.15s;
|
|
1372
1456
|
}
|
|
1373
1457
|
|
|
1374
1458
|
.prop-add-btn:hover {
|
|
@@ -1376,13 +1460,17 @@ body {
|
|
|
1376
1460
|
color: var(--text);
|
|
1377
1461
|
}
|
|
1378
1462
|
|
|
1463
|
+
.prop-add-inline {
|
|
1464
|
+
position: relative;
|
|
1465
|
+
}
|
|
1466
|
+
|
|
1379
1467
|
/* ============================================================
|
|
1380
1468
|
AI Bar (Editor bottom bar)
|
|
1381
1469
|
============================================================ */
|
|
1382
1470
|
#ai-bar {
|
|
1383
1471
|
border-top: 1px solid var(--border);
|
|
1384
1472
|
background: var(--bg-alt);
|
|
1385
|
-
padding:
|
|
1473
|
+
padding: 6px 14px;
|
|
1386
1474
|
flex-shrink: 0;
|
|
1387
1475
|
}
|
|
1388
1476
|
|
|
@@ -1412,14 +1500,15 @@ body {
|
|
|
1412
1500
|
#ai-input,
|
|
1413
1501
|
#chat-input {
|
|
1414
1502
|
flex: 1;
|
|
1415
|
-
background: var(--bg);
|
|
1503
|
+
background: var(--bg-input);
|
|
1416
1504
|
border: 1px solid var(--border);
|
|
1417
|
-
color: var(--text);
|
|
1505
|
+
color: var(--text-bright);
|
|
1418
1506
|
font-family: inherit;
|
|
1419
1507
|
font-size: 12px;
|
|
1420
|
-
padding:
|
|
1421
|
-
border-radius:
|
|
1508
|
+
padding: 7px 12px;
|
|
1509
|
+
border-radius: var(--radius);
|
|
1422
1510
|
outline: none;
|
|
1511
|
+
transition: border-color 0.15s;
|
|
1423
1512
|
}
|
|
1424
1513
|
|
|
1425
1514
|
#ai-input:focus,
|
|
@@ -1437,12 +1526,19 @@ body {
|
|
|
1437
1526
|
background: var(--accent);
|
|
1438
1527
|
color: #fff;
|
|
1439
1528
|
border: none;
|
|
1440
|
-
padding:
|
|
1441
|
-
border-radius:
|
|
1529
|
+
padding: 7px 16px;
|
|
1530
|
+
border-radius: var(--radius);
|
|
1442
1531
|
font-size: 11px;
|
|
1443
1532
|
font-family: inherit;
|
|
1533
|
+
font-weight: 500;
|
|
1444
1534
|
cursor: pointer;
|
|
1445
1535
|
flex-shrink: 0;
|
|
1536
|
+
transition: opacity 0.15s;
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
#ai-send:hover,
|
|
1540
|
+
#chat-send:hover {
|
|
1541
|
+
opacity: 0.85;
|
|
1446
1542
|
}
|
|
1447
1543
|
|
|
1448
1544
|
#ai-send:hover,
|
|
@@ -1452,16 +1548,19 @@ body {
|
|
|
1452
1548
|
|
|
1453
1549
|
/* AI model selector */
|
|
1454
1550
|
.ai-model-select {
|
|
1455
|
-
background: var(--bg);
|
|
1551
|
+
background: var(--bg-input);
|
|
1456
1552
|
border: 1px solid var(--border);
|
|
1457
|
-
color: var(--text
|
|
1458
|
-
font-size:
|
|
1459
|
-
padding: 5px
|
|
1460
|
-
border-radius:
|
|
1553
|
+
color: var(--text);
|
|
1554
|
+
font-size: 11px;
|
|
1555
|
+
padding: 5px 8px;
|
|
1556
|
+
border-radius: var(--radius-sm);
|
|
1461
1557
|
outline: none;
|
|
1462
1558
|
cursor: pointer;
|
|
1463
1559
|
font-family: inherit;
|
|
1464
1560
|
flex-shrink: 0;
|
|
1561
|
+
-webkit-appearance: none;
|
|
1562
|
+
appearance: none;
|
|
1563
|
+
transition: border-color 0.15s;
|
|
1465
1564
|
}
|
|
1466
1565
|
|
|
1467
1566
|
.ai-model-select:focus {
|
|
@@ -1474,12 +1573,17 @@ body {
|
|
|
1474
1573
|
color: var(--text-dim);
|
|
1475
1574
|
font-size: 13px;
|
|
1476
1575
|
cursor: pointer;
|
|
1477
|
-
padding:
|
|
1576
|
+
padding: 4px 6px;
|
|
1478
1577
|
flex-shrink: 0;
|
|
1479
1578
|
line-height: 1;
|
|
1579
|
+
border-radius: var(--radius-xs);
|
|
1580
|
+
transition: color 0.15s, background 0.15s;
|
|
1480
1581
|
}
|
|
1481
1582
|
|
|
1482
|
-
.ai-settings-btn:hover {
|
|
1583
|
+
.ai-settings-btn:hover {
|
|
1584
|
+
color: var(--text-bright);
|
|
1585
|
+
background: var(--bg-hover);
|
|
1586
|
+
}
|
|
1483
1587
|
|
|
1484
1588
|
/* AI Settings Dialog */
|
|
1485
1589
|
.ai-dialog-overlay {
|
|
@@ -1494,12 +1598,12 @@ body {
|
|
|
1494
1598
|
|
|
1495
1599
|
.ai-dialog {
|
|
1496
1600
|
background: var(--bg-alt);
|
|
1497
|
-
border: 1px solid var(--border);
|
|
1498
|
-
border-radius:
|
|
1601
|
+
border: 1px solid var(--border-strong);
|
|
1602
|
+
border-radius: 12px;
|
|
1499
1603
|
width: 340px;
|
|
1500
1604
|
max-height: 80vh;
|
|
1501
1605
|
overflow: auto;
|
|
1502
|
-
box-shadow: 0
|
|
1606
|
+
box-shadow: 0 12px 48px rgba(0,0,0,0.5);
|
|
1503
1607
|
}
|
|
1504
1608
|
|
|
1505
1609
|
.ai-dialog-header {
|
|
@@ -1579,15 +1683,16 @@ body {
|
|
|
1579
1683
|
|
|
1580
1684
|
.ai-dialog-input {
|
|
1581
1685
|
width: 100%;
|
|
1582
|
-
background: var(--bg);
|
|
1686
|
+
background: var(--bg-input);
|
|
1583
1687
|
border: 1px solid var(--border);
|
|
1584
|
-
color: var(--text);
|
|
1585
|
-
padding:
|
|
1586
|
-
border-radius:
|
|
1688
|
+
color: var(--text-bright);
|
|
1689
|
+
padding: 8px 12px;
|
|
1690
|
+
border-radius: var(--radius-sm);
|
|
1587
1691
|
font-size: 12px;
|
|
1588
|
-
font-family: '
|
|
1692
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
1589
1693
|
outline: none;
|
|
1590
1694
|
box-sizing: border-box;
|
|
1695
|
+
transition: border-color 0.15s;
|
|
1591
1696
|
}
|
|
1592
1697
|
|
|
1593
1698
|
.ai-dialog-input:focus {
|
|
@@ -1606,11 +1711,13 @@ body {
|
|
|
1606
1711
|
background: var(--accent);
|
|
1607
1712
|
color: #fff;
|
|
1608
1713
|
border: none;
|
|
1609
|
-
padding:
|
|
1610
|
-
border-radius:
|
|
1714
|
+
padding: 7px 20px;
|
|
1715
|
+
border-radius: var(--radius-sm);
|
|
1611
1716
|
font-size: 12px;
|
|
1717
|
+
font-weight: 500;
|
|
1612
1718
|
cursor: pointer;
|
|
1613
1719
|
font-family: inherit;
|
|
1720
|
+
transition: opacity 0.15s;
|
|
1614
1721
|
}
|
|
1615
1722
|
|
|
1616
1723
|
.ai-dialog-save:hover { opacity: 0.9; }
|
|
@@ -1618,25 +1725,28 @@ body {
|
|
|
1618
1725
|
/* Scope toggle (Element / Section) */
|
|
1619
1726
|
.ai-scope-toggle {
|
|
1620
1727
|
display: flex;
|
|
1621
|
-
|
|
1622
|
-
border-radius:
|
|
1728
|
+
background: var(--bg-input);
|
|
1729
|
+
border-radius: 20px;
|
|
1623
1730
|
overflow: hidden;
|
|
1624
1731
|
flex-shrink: 0;
|
|
1732
|
+
padding: 2px;
|
|
1625
1733
|
}
|
|
1626
1734
|
|
|
1627
1735
|
.ai-scope-btn {
|
|
1628
1736
|
background: transparent;
|
|
1629
1737
|
border: none;
|
|
1630
1738
|
color: var(--text-dim);
|
|
1631
|
-
font-size:
|
|
1632
|
-
padding:
|
|
1739
|
+
font-size: 11px;
|
|
1740
|
+
padding: 3px 10px;
|
|
1633
1741
|
cursor: pointer;
|
|
1634
1742
|
font-family: inherit;
|
|
1635
1743
|
white-space: nowrap;
|
|
1744
|
+
border-radius: 20px;
|
|
1745
|
+
transition: background 0.15s, color 0.15s;
|
|
1636
1746
|
}
|
|
1637
1747
|
|
|
1638
1748
|
.ai-scope-btn:first-child {
|
|
1639
|
-
border-right:
|
|
1749
|
+
border-right: none;
|
|
1640
1750
|
}
|
|
1641
1751
|
|
|
1642
1752
|
.ai-scope-btn:hover {
|
|
@@ -1681,8 +1791,8 @@ body {
|
|
|
1681
1791
|
display: flex;
|
|
1682
1792
|
align-items: center;
|
|
1683
1793
|
gap: 4px;
|
|
1684
|
-
padding:
|
|
1685
|
-
border-radius:
|
|
1794
|
+
padding: 4px 10px;
|
|
1795
|
+
border-radius: 20px;
|
|
1686
1796
|
font-size: 11px;
|
|
1687
1797
|
color: var(--text-dim);
|
|
1688
1798
|
background: transparent;
|
|
@@ -1691,6 +1801,7 @@ body {
|
|
|
1691
1801
|
white-space: nowrap;
|
|
1692
1802
|
max-width: 140px;
|
|
1693
1803
|
font-family: inherit;
|
|
1804
|
+
transition: background 0.15s, color 0.15s;
|
|
1694
1805
|
}
|
|
1695
1806
|
|
|
1696
1807
|
.thread-tab:hover {
|
|
@@ -1699,7 +1810,7 @@ body {
|
|
|
1699
1810
|
}
|
|
1700
1811
|
|
|
1701
1812
|
.thread-tab.active {
|
|
1702
|
-
background: var(--bg);
|
|
1813
|
+
background: var(--bg-input);
|
|
1703
1814
|
color: var(--text-bright);
|
|
1704
1815
|
border-color: var(--border);
|
|
1705
1816
|
}
|
|
@@ -1710,7 +1821,7 @@ body {
|
|
|
1710
1821
|
}
|
|
1711
1822
|
|
|
1712
1823
|
.thread-tab .thread-close {
|
|
1713
|
-
font-size:
|
|
1824
|
+
font-size: 11px;
|
|
1714
1825
|
opacity: 0;
|
|
1715
1826
|
color: var(--text-dim);
|
|
1716
1827
|
cursor: pointer;
|
|
@@ -1723,16 +1834,17 @@ body {
|
|
|
1723
1834
|
|
|
1724
1835
|
#chat-thread-history,
|
|
1725
1836
|
#chat-new-thread {
|
|
1726
|
-
padding:
|
|
1727
|
-
border-radius:
|
|
1837
|
+
padding: 4px 10px;
|
|
1838
|
+
border-radius: 20px;
|
|
1728
1839
|
font-size: 11px;
|
|
1729
1840
|
color: var(--text-dim);
|
|
1730
|
-
background:
|
|
1841
|
+
background: var(--bg-input);
|
|
1731
1842
|
border: 1px solid var(--border);
|
|
1732
1843
|
cursor: pointer;
|
|
1733
1844
|
white-space: nowrap;
|
|
1734
1845
|
font-family: inherit;
|
|
1735
1846
|
flex-shrink: 0;
|
|
1847
|
+
transition: color 0.15s, border-color 0.15s;
|
|
1736
1848
|
}
|
|
1737
1849
|
|
|
1738
1850
|
#chat-thread-history:hover,
|
|
@@ -1796,13 +1908,13 @@ body {
|
|
|
1796
1908
|
}
|
|
1797
1909
|
|
|
1798
1910
|
.thread-history-item .thread-history-date {
|
|
1799
|
-
font-size:
|
|
1911
|
+
font-size: 11px;
|
|
1800
1912
|
color: var(--text-dim);
|
|
1801
1913
|
flex-shrink: 0;
|
|
1802
1914
|
}
|
|
1803
1915
|
|
|
1804
1916
|
.thread-history-item .thread-history-delete {
|
|
1805
|
-
font-size:
|
|
1917
|
+
font-size: 11px;
|
|
1806
1918
|
opacity: 0;
|
|
1807
1919
|
color: var(--text-dim);
|
|
1808
1920
|
cursor: pointer;
|
|
@@ -1823,8 +1935,8 @@ body {
|
|
|
1823
1935
|
|
|
1824
1936
|
.chat-msg {
|
|
1825
1937
|
max-width: 90%;
|
|
1826
|
-
padding:
|
|
1827
|
-
border-radius:
|
|
1938
|
+
padding: 10px 14px;
|
|
1939
|
+
border-radius: 12px;
|
|
1828
1940
|
font-size: 12px;
|
|
1829
1941
|
line-height: 1.5;
|
|
1830
1942
|
word-break: break-word;
|
|
@@ -1834,7 +1946,7 @@ body {
|
|
|
1834
1946
|
align-self: flex-end;
|
|
1835
1947
|
background: var(--accent);
|
|
1836
1948
|
color: #fff;
|
|
1837
|
-
border-bottom-right-radius:
|
|
1949
|
+
border-bottom-right-radius: 4px;
|
|
1838
1950
|
}
|
|
1839
1951
|
|
|
1840
1952
|
.chat-msg.assistant {
|
|
@@ -1842,25 +1954,25 @@ body {
|
|
|
1842
1954
|
background: var(--bg-alt);
|
|
1843
1955
|
color: var(--text);
|
|
1844
1956
|
border: 1px solid var(--border);
|
|
1845
|
-
border-bottom-left-radius:
|
|
1957
|
+
border-bottom-left-radius: 4px;
|
|
1846
1958
|
}
|
|
1847
1959
|
|
|
1848
1960
|
.chat-msg.assistant pre {
|
|
1849
1961
|
background: var(--bg);
|
|
1850
|
-
padding:
|
|
1851
|
-
border-radius:
|
|
1962
|
+
padding: 8px 10px;
|
|
1963
|
+
border-radius: var(--radius-sm);
|
|
1852
1964
|
margin: 6px 0;
|
|
1853
1965
|
overflow-x: auto;
|
|
1854
|
-
font-family: '
|
|
1966
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
1855
1967
|
font-size: 11px;
|
|
1856
1968
|
}
|
|
1857
1969
|
|
|
1858
1970
|
.chat-msg.assistant code {
|
|
1859
|
-
font-family: '
|
|
1971
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
1860
1972
|
font-size: 11px;
|
|
1861
1973
|
background: var(--bg);
|
|
1862
|
-
padding:
|
|
1863
|
-
border-radius:
|
|
1974
|
+
padding: 2px 5px;
|
|
1975
|
+
border-radius: var(--radius-xs);
|
|
1864
1976
|
}
|
|
1865
1977
|
|
|
1866
1978
|
.chat-msg.system {
|
|
@@ -1881,11 +1993,13 @@ body {
|
|
|
1881
1993
|
background: var(--type-color);
|
|
1882
1994
|
color: #fff;
|
|
1883
1995
|
border: none;
|
|
1884
|
-
padding:
|
|
1885
|
-
border-radius:
|
|
1886
|
-
font-size:
|
|
1996
|
+
padding: 4px 12px;
|
|
1997
|
+
border-radius: var(--radius-sm);
|
|
1998
|
+
font-size: 11px;
|
|
1999
|
+
font-weight: 500;
|
|
1887
2000
|
cursor: pointer;
|
|
1888
2001
|
font-family: inherit;
|
|
2002
|
+
transition: opacity 0.15s;
|
|
1889
2003
|
}
|
|
1890
2004
|
|
|
1891
2005
|
.chat-msg .chat-apply-btn:hover {
|
|
@@ -1929,7 +2043,7 @@ body {
|
|
|
1929
2043
|
padding: 3px 10px;
|
|
1930
2044
|
border-radius: 3px;
|
|
1931
2045
|
cursor: pointer;
|
|
1932
|
-
font-size:
|
|
2046
|
+
font-size: 11px;
|
|
1933
2047
|
font-family: inherit;
|
|
1934
2048
|
flex-shrink: 0;
|
|
1935
2049
|
}
|
|
@@ -1966,14 +2080,15 @@ body {
|
|
|
1966
2080
|
}
|
|
1967
2081
|
|
|
1968
2082
|
.auth-input {
|
|
1969
|
-
background: var(--bg-
|
|
2083
|
+
background: var(--bg-input);
|
|
1970
2084
|
border: 1px solid var(--border);
|
|
1971
|
-
color: var(--text);
|
|
2085
|
+
color: var(--text-bright);
|
|
1972
2086
|
font-family: inherit;
|
|
1973
2087
|
font-size: 13px;
|
|
1974
|
-
padding: 10px
|
|
1975
|
-
border-radius:
|
|
2088
|
+
padding: 10px 14px;
|
|
2089
|
+
border-radius: var(--radius);
|
|
1976
2090
|
outline: none;
|
|
2091
|
+
transition: border-color 0.15s;
|
|
1977
2092
|
}
|
|
1978
2093
|
|
|
1979
2094
|
.auth-input:focus {
|
|
@@ -1989,11 +2104,12 @@ body {
|
|
|
1989
2104
|
color: #fff;
|
|
1990
2105
|
border: none;
|
|
1991
2106
|
padding: 10px 16px;
|
|
1992
|
-
border-radius:
|
|
2107
|
+
border-radius: var(--radius);
|
|
1993
2108
|
font-family: inherit;
|
|
1994
2109
|
font-size: 13px;
|
|
1995
2110
|
font-weight: 500;
|
|
1996
2111
|
cursor: pointer;
|
|
2112
|
+
transition: opacity 0.15s;
|
|
1997
2113
|
}
|
|
1998
2114
|
|
|
1999
2115
|
.auth-btn-primary {
|
|
@@ -2118,7 +2234,7 @@ body {
|
|
|
2118
2234
|
flex-shrink: 0;
|
|
2119
2235
|
cursor: pointer;
|
|
2120
2236
|
color: var(--text-dim);
|
|
2121
|
-
font-size:
|
|
2237
|
+
font-size: 11px;
|
|
2122
2238
|
text-align: center;
|
|
2123
2239
|
user-select: none;
|
|
2124
2240
|
}
|
|
@@ -2195,7 +2311,7 @@ body {
|
|
|
2195
2311
|
|
|
2196
2312
|
.data-path-sep {
|
|
2197
2313
|
color: var(--text-dim);
|
|
2198
|
-
font-size:
|
|
2314
|
+
font-size: 11px;
|
|
2199
2315
|
}
|
|
2200
2316
|
|
|
2201
2317
|
/* Project list items */
|
|
@@ -2225,15 +2341,465 @@ body {
|
|
|
2225
2341
|
|
|
2226
2342
|
.project-key {
|
|
2227
2343
|
color: var(--text-dim);
|
|
2228
|
-
font-size:
|
|
2344
|
+
font-size: 11px;
|
|
2229
2345
|
margin-left: auto;
|
|
2230
2346
|
}
|
|
2231
2347
|
|
|
2232
2348
|
.project-match-badge {
|
|
2233
|
-
font-size:
|
|
2349
|
+
font-size: 10px;
|
|
2234
2350
|
color: var(--type-color);
|
|
2235
2351
|
border: 1px solid var(--type-color);
|
|
2236
2352
|
border-radius: 3px;
|
|
2237
2353
|
padding: 1px 5px;
|
|
2238
2354
|
margin-left: 4px;
|
|
2239
2355
|
}
|
|
2356
|
+
|
|
2357
|
+
/* ============================================================
|
|
2358
|
+
Prop checkbox (disable/enable like CSS DevTools)
|
|
2359
|
+
============================================================ */
|
|
2360
|
+
.prop-checkbox {
|
|
2361
|
+
width: 10px;
|
|
2362
|
+
height: 10px;
|
|
2363
|
+
margin: 0 6px 0 0;
|
|
2364
|
+
accent-color: var(--accent);
|
|
2365
|
+
cursor: pointer;
|
|
2366
|
+
flex-shrink: 0;
|
|
2367
|
+
opacity: 0;
|
|
2368
|
+
transition: opacity 0.15s;
|
|
2369
|
+
}
|
|
2370
|
+
.prop-row:hover .prop-checkbox,
|
|
2371
|
+
.prop-checkbox:focus,
|
|
2372
|
+
.prop-row.prop-disabled .prop-checkbox {
|
|
2373
|
+
opacity: 1;
|
|
2374
|
+
}
|
|
2375
|
+
.prop-row.prop-disabled .prop-key,
|
|
2376
|
+
.prop-row.prop-disabled .prop-value,
|
|
2377
|
+
.prop-row.prop-disabled .prop-colon,
|
|
2378
|
+
.prop-row.prop-disabled .prop-semi {
|
|
2379
|
+
opacity: 0.35;
|
|
2380
|
+
text-decoration: line-through;
|
|
2381
|
+
}
|
|
2382
|
+
|
|
2383
|
+
/* ============================================================
|
|
2384
|
+
Number arrows
|
|
2385
|
+
============================================================ */
|
|
2386
|
+
.prop-num-arrows {
|
|
2387
|
+
display: inline-flex;
|
|
2388
|
+
flex-direction: column;
|
|
2389
|
+
margin-left: 2px;
|
|
2390
|
+
opacity: 0;
|
|
2391
|
+
transition: opacity 0.15s;
|
|
2392
|
+
}
|
|
2393
|
+
.prop-row:hover .prop-num-arrows { opacity: 1; }
|
|
2394
|
+
.prop-num-arrow {
|
|
2395
|
+
background: transparent;
|
|
2396
|
+
border: none;
|
|
2397
|
+
color: var(--text-dim);
|
|
2398
|
+
font-size: 6px;
|
|
2399
|
+
padding: 0 2px;
|
|
2400
|
+
cursor: pointer;
|
|
2401
|
+
line-height: 1;
|
|
2402
|
+
}
|
|
2403
|
+
.prop-num-arrow:hover { color: var(--text-bright); }
|
|
2404
|
+
|
|
2405
|
+
/* ============================================================
|
|
2406
|
+
Sync dropdown + changes panel
|
|
2407
|
+
============================================================ */
|
|
2408
|
+
.btn-sync-wrap {
|
|
2409
|
+
display: inline-flex;
|
|
2410
|
+
align-items: center;
|
|
2411
|
+
position: relative;
|
|
2412
|
+
}
|
|
2413
|
+
.btn-sync-dropdown {
|
|
2414
|
+
background: var(--accent);
|
|
2415
|
+
color: var(--bg);
|
|
2416
|
+
border: none;
|
|
2417
|
+
border-left: 1px solid rgba(0,0,0,0.2);
|
|
2418
|
+
padding: 3px 4px;
|
|
2419
|
+
font-size: 9px;
|
|
2420
|
+
cursor: pointer;
|
|
2421
|
+
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
|
|
2422
|
+
}
|
|
2423
|
+
.btn-sync { border-radius: var(--radius-xs) 0 0 var(--radius-xs) !important; }
|
|
2424
|
+
.sync-changes-panel {
|
|
2425
|
+
position: absolute;
|
|
2426
|
+
top: 100%;
|
|
2427
|
+
right: 0;
|
|
2428
|
+
width: 320px;
|
|
2429
|
+
max-height: 300px;
|
|
2430
|
+
overflow-y: auto;
|
|
2431
|
+
background: var(--bg-panel);
|
|
2432
|
+
border: 1px solid var(--border-strong);
|
|
2433
|
+
border-radius: var(--radius);
|
|
2434
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
|
|
2435
|
+
z-index: 100;
|
|
2436
|
+
}
|
|
2437
|
+
.sync-changes-header {
|
|
2438
|
+
display: flex;
|
|
2439
|
+
justify-content: space-between;
|
|
2440
|
+
align-items: center;
|
|
2441
|
+
padding: 6px 10px;
|
|
2442
|
+
border-bottom: 1px solid var(--border);
|
|
2443
|
+
font-size: 11px;
|
|
2444
|
+
font-weight: 600;
|
|
2445
|
+
color: var(--text-bright);
|
|
2446
|
+
}
|
|
2447
|
+
.sync-changes-header button {
|
|
2448
|
+
background: transparent;
|
|
2449
|
+
border: none;
|
|
2450
|
+
color: var(--text-dim);
|
|
2451
|
+
cursor: pointer;
|
|
2452
|
+
font-size: 14px;
|
|
2453
|
+
}
|
|
2454
|
+
.sync-change-row {
|
|
2455
|
+
display: flex;
|
|
2456
|
+
align-items: center;
|
|
2457
|
+
gap: 6px;
|
|
2458
|
+
padding: 4px 10px;
|
|
2459
|
+
border-bottom: 1px solid var(--border);
|
|
2460
|
+
font-size: 11px;
|
|
2461
|
+
}
|
|
2462
|
+
.sync-change-path {
|
|
2463
|
+
color: var(--key-color);
|
|
2464
|
+
flex-shrink: 0;
|
|
2465
|
+
max-width: 140px;
|
|
2466
|
+
overflow: hidden;
|
|
2467
|
+
text-overflow: ellipsis;
|
|
2468
|
+
white-space: nowrap;
|
|
2469
|
+
}
|
|
2470
|
+
.sync-change-val {
|
|
2471
|
+
color: var(--string-color);
|
|
2472
|
+
flex: 1;
|
|
2473
|
+
overflow: hidden;
|
|
2474
|
+
text-overflow: ellipsis;
|
|
2475
|
+
white-space: nowrap;
|
|
2476
|
+
}
|
|
2477
|
+
.sync-change-remove {
|
|
2478
|
+
background: transparent;
|
|
2479
|
+
border: none;
|
|
2480
|
+
color: var(--text-dim);
|
|
2481
|
+
cursor: pointer;
|
|
2482
|
+
font-size: 13px;
|
|
2483
|
+
padding: 0 2px;
|
|
2484
|
+
flex-shrink: 0;
|
|
2485
|
+
}
|
|
2486
|
+
.sync-change-remove:hover { color: var(--error-color); }
|
|
2487
|
+
|
|
2488
|
+
/* ============================================================
|
|
2489
|
+
DS read-only (computed)
|
|
2490
|
+
============================================================ */
|
|
2491
|
+
.ds-readonly {
|
|
2492
|
+
cursor: default !important;
|
|
2493
|
+
opacity: 0.8;
|
|
2494
|
+
}
|
|
2495
|
+
|
|
2496
|
+
/* ============================================================
|
|
2497
|
+
Methods — togglable inputs
|
|
2498
|
+
============================================================ */
|
|
2499
|
+
.method-name-row {
|
|
2500
|
+
display: flex;
|
|
2501
|
+
align-items: center;
|
|
2502
|
+
gap: 6px;
|
|
2503
|
+
}
|
|
2504
|
+
.method-toggle {
|
|
2505
|
+
background: transparent;
|
|
2506
|
+
border: none;
|
|
2507
|
+
color: var(--text-dim);
|
|
2508
|
+
cursor: pointer;
|
|
2509
|
+
font-size: 8px;
|
|
2510
|
+
padding: 2px;
|
|
2511
|
+
}
|
|
2512
|
+
.method-toggle:hover { color: var(--text); }
|
|
2513
|
+
.method-input-area {
|
|
2514
|
+
padding: 4px 0 4px 16px;
|
|
2515
|
+
}
|
|
2516
|
+
.method-args-textarea {
|
|
2517
|
+
width: 100%;
|
|
2518
|
+
box-sizing: border-box;
|
|
2519
|
+
background: var(--bg-input);
|
|
2520
|
+
border: 1px solid var(--border);
|
|
2521
|
+
color: var(--text-bright);
|
|
2522
|
+
font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
|
|
2523
|
+
font-size: 11px;
|
|
2524
|
+
border-radius: var(--radius-xs);
|
|
2525
|
+
padding: 8px 10px;
|
|
2526
|
+
resize: vertical;
|
|
2527
|
+
min-height: 80px;
|
|
2528
|
+
line-height: 1.5;
|
|
2529
|
+
tab-size: 2;
|
|
2530
|
+
white-space: pre;
|
|
2531
|
+
}
|
|
2532
|
+
.method-args-textarea:focus {
|
|
2533
|
+
border-color: var(--accent);
|
|
2534
|
+
outline: none;
|
|
2535
|
+
}
|
|
2536
|
+
.method-btn-row {
|
|
2537
|
+
display: flex;
|
|
2538
|
+
align-items: center;
|
|
2539
|
+
gap: 6px;
|
|
2540
|
+
margin-top: 4px;
|
|
2541
|
+
}
|
|
2542
|
+
|
|
2543
|
+
/* ============================================================
|
|
2544
|
+
Gallery mode
|
|
2545
|
+
============================================================ */
|
|
2546
|
+
#mode-gallery {
|
|
2547
|
+
flex-direction: column;
|
|
2548
|
+
height: 100%;
|
|
2549
|
+
}
|
|
2550
|
+
#gallery-toolbar {
|
|
2551
|
+
display: flex;
|
|
2552
|
+
gap: 6px;
|
|
2553
|
+
padding: 6px 8px;
|
|
2554
|
+
border-bottom: 1px solid var(--border);
|
|
2555
|
+
}
|
|
2556
|
+
.gallery-search {
|
|
2557
|
+
flex: 1;
|
|
2558
|
+
background: var(--bg-input);
|
|
2559
|
+
border: 1px solid var(--border);
|
|
2560
|
+
color: var(--text);
|
|
2561
|
+
font-size: 11px;
|
|
2562
|
+
padding: 4px 8px;
|
|
2563
|
+
border-radius: var(--radius-xs);
|
|
2564
|
+
font-family: inherit;
|
|
2565
|
+
}
|
|
2566
|
+
.gallery-search:focus { border-color: var(--accent); outline: none; }
|
|
2567
|
+
.gallery-view-select {
|
|
2568
|
+
background: var(--bg-input);
|
|
2569
|
+
border: 1px solid var(--border);
|
|
2570
|
+
color: var(--text);
|
|
2571
|
+
font-size: 11px;
|
|
2572
|
+
padding: 4px;
|
|
2573
|
+
border-radius: var(--radius-xs);
|
|
2574
|
+
}
|
|
2575
|
+
.gallery-pages-row {
|
|
2576
|
+
display: flex;
|
|
2577
|
+
align-items: center;
|
|
2578
|
+
gap: 6px;
|
|
2579
|
+
padding: 6px 10px;
|
|
2580
|
+
border-bottom: 1px solid var(--border);
|
|
2581
|
+
flex-wrap: wrap;
|
|
2582
|
+
flex-shrink: 0;
|
|
2583
|
+
}
|
|
2584
|
+
.gallery-pages-row:empty { display: none; }
|
|
2585
|
+
.gallery-section-label {
|
|
2586
|
+
font-size: 10px;
|
|
2587
|
+
color: var(--text-dim);
|
|
2588
|
+
text-transform: uppercase;
|
|
2589
|
+
letter-spacing: 0.5px;
|
|
2590
|
+
margin-right: 4px;
|
|
2591
|
+
}
|
|
2592
|
+
.gallery-page-chip {
|
|
2593
|
+
background: var(--bg-input);
|
|
2594
|
+
border: 1px solid var(--border);
|
|
2595
|
+
color: var(--text);
|
|
2596
|
+
font-size: 11px;
|
|
2597
|
+
padding: 3px 10px;
|
|
2598
|
+
border-radius: 12px;
|
|
2599
|
+
cursor: pointer;
|
|
2600
|
+
font-family: inherit;
|
|
2601
|
+
transition: border-color 0.15s, background 0.15s;
|
|
2602
|
+
}
|
|
2603
|
+
.gallery-page-chip:hover {
|
|
2604
|
+
border-color: var(--accent);
|
|
2605
|
+
background: var(--bg-hover);
|
|
2606
|
+
}
|
|
2607
|
+
#gallery-container {
|
|
2608
|
+
flex: 1;
|
|
2609
|
+
overflow-y: auto;
|
|
2610
|
+
padding: 8px;
|
|
2611
|
+
}
|
|
2612
|
+
.gallery-grid {
|
|
2613
|
+
display: grid;
|
|
2614
|
+
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
2615
|
+
gap: 8px;
|
|
2616
|
+
}
|
|
2617
|
+
.gallery-list {
|
|
2618
|
+
display: flex;
|
|
2619
|
+
flex-direction: column;
|
|
2620
|
+
gap: 2px;
|
|
2621
|
+
}
|
|
2622
|
+
.gallery-card {
|
|
2623
|
+
background: var(--bg-alt);
|
|
2624
|
+
border: 1px solid var(--border);
|
|
2625
|
+
border-radius: var(--radius-sm);
|
|
2626
|
+
padding: 12px 10px;
|
|
2627
|
+
cursor: pointer;
|
|
2628
|
+
transition: border-color 0.15s, background 0.15s;
|
|
2629
|
+
}
|
|
2630
|
+
.gallery-card:hover {
|
|
2631
|
+
border-color: var(--accent);
|
|
2632
|
+
background: var(--bg-hover);
|
|
2633
|
+
}
|
|
2634
|
+
.gallery-card-name {
|
|
2635
|
+
font-size: 12px;
|
|
2636
|
+
color: var(--text-bright);
|
|
2637
|
+
font-weight: 500;
|
|
2638
|
+
margin-bottom: 4px;
|
|
2639
|
+
display: flex;
|
|
2640
|
+
align-items: center;
|
|
2641
|
+
gap: 6px;
|
|
2642
|
+
}
|
|
2643
|
+
.gallery-card-count {
|
|
2644
|
+
font-size: 10px;
|
|
2645
|
+
font-weight: 400;
|
|
2646
|
+
color: var(--text-dim);
|
|
2647
|
+
background: var(--bg-input);
|
|
2648
|
+
border-radius: 8px;
|
|
2649
|
+
padding: 1px 5px;
|
|
2650
|
+
min-width: 14px;
|
|
2651
|
+
text-align: center;
|
|
2652
|
+
}
|
|
2653
|
+
.gallery-card-tag {
|
|
2654
|
+
font-size: 10px;
|
|
2655
|
+
color: var(--tag-color);
|
|
2656
|
+
}
|
|
2657
|
+
.gallery-list .gallery-card {
|
|
2658
|
+
display: flex;
|
|
2659
|
+
align-items: center;
|
|
2660
|
+
gap: 8px;
|
|
2661
|
+
padding: 6px 10px;
|
|
2662
|
+
}
|
|
2663
|
+
.gallery-list .gallery-card-name { margin-bottom: 0; }
|
|
2664
|
+
|
|
2665
|
+
/* ============================================================
|
|
2666
|
+
Content mode (CMS)
|
|
2667
|
+
============================================================ */
|
|
2668
|
+
#mode-content {
|
|
2669
|
+
flex-direction: column;
|
|
2670
|
+
height: 100%;
|
|
2671
|
+
}
|
|
2672
|
+
#content-toolbar {
|
|
2673
|
+
display: flex;
|
|
2674
|
+
gap: 6px;
|
|
2675
|
+
padding: 6px 8px;
|
|
2676
|
+
border-bottom: 1px solid var(--border);
|
|
2677
|
+
align-items: center;
|
|
2678
|
+
flex-shrink: 0;
|
|
2679
|
+
}
|
|
2680
|
+
.content-lang-select {
|
|
2681
|
+
background: var(--bg-input);
|
|
2682
|
+
border: 1px solid var(--border);
|
|
2683
|
+
color: var(--text);
|
|
2684
|
+
font-size: 11px;
|
|
2685
|
+
padding: 4px 8px;
|
|
2686
|
+
border-radius: var(--radius-xs);
|
|
2687
|
+
}
|
|
2688
|
+
.content-add-lang-btn {
|
|
2689
|
+
background: transparent;
|
|
2690
|
+
border: 1px dashed var(--border);
|
|
2691
|
+
color: var(--text-dim);
|
|
2692
|
+
font-size: 11px;
|
|
2693
|
+
padding: 3px 8px;
|
|
2694
|
+
border-radius: var(--radius-xs);
|
|
2695
|
+
cursor: pointer;
|
|
2696
|
+
}
|
|
2697
|
+
.content-add-lang-btn:hover { border-color: var(--accent); color: var(--text); }
|
|
2698
|
+
.content-lang-input {
|
|
2699
|
+
background: var(--bg-input);
|
|
2700
|
+
border: 1px solid var(--accent);
|
|
2701
|
+
color: var(--text);
|
|
2702
|
+
font-size: 11px;
|
|
2703
|
+
padding: 3px 6px;
|
|
2704
|
+
border-radius: var(--radius-xs);
|
|
2705
|
+
}
|
|
2706
|
+
#content-body {
|
|
2707
|
+
display: flex;
|
|
2708
|
+
flex: 1;
|
|
2709
|
+
overflow: hidden;
|
|
2710
|
+
}
|
|
2711
|
+
#content-sidebar {
|
|
2712
|
+
width: 160px;
|
|
2713
|
+
min-width: 120px;
|
|
2714
|
+
border-right: 1px solid var(--border);
|
|
2715
|
+
overflow-y: auto;
|
|
2716
|
+
background: var(--bg-panel);
|
|
2717
|
+
flex-shrink: 0;
|
|
2718
|
+
}
|
|
2719
|
+
#content-main {
|
|
2720
|
+
flex: 1;
|
|
2721
|
+
overflow-y: auto;
|
|
2722
|
+
padding: 8px 12px;
|
|
2723
|
+
}
|
|
2724
|
+
.content-sidebar-item {
|
|
2725
|
+
display: flex;
|
|
2726
|
+
align-items: center;
|
|
2727
|
+
justify-content: space-between;
|
|
2728
|
+
padding: 6px 10px;
|
|
2729
|
+
cursor: pointer;
|
|
2730
|
+
border-bottom: 1px solid var(--border);
|
|
2731
|
+
transition: background 0.1s;
|
|
2732
|
+
}
|
|
2733
|
+
.content-sidebar-item:hover { background: var(--bg-hover); }
|
|
2734
|
+
.content-sidebar-item.active {
|
|
2735
|
+
background: var(--bg-active);
|
|
2736
|
+
border-left: 2px solid var(--accent);
|
|
2737
|
+
}
|
|
2738
|
+
.content-sidebar-label {
|
|
2739
|
+
font-size: 11px;
|
|
2740
|
+
color: var(--text);
|
|
2741
|
+
overflow: hidden;
|
|
2742
|
+
text-overflow: ellipsis;
|
|
2743
|
+
white-space: nowrap;
|
|
2744
|
+
}
|
|
2745
|
+
.content-sidebar-badge {
|
|
2746
|
+
font-size: 9px;
|
|
2747
|
+
color: var(--text-dim);
|
|
2748
|
+
flex-shrink: 0;
|
|
2749
|
+
margin-left: 4px;
|
|
2750
|
+
}
|
|
2751
|
+
.content-main-header {
|
|
2752
|
+
font-size: 12px;
|
|
2753
|
+
font-weight: 600;
|
|
2754
|
+
color: var(--text-bright);
|
|
2755
|
+
margin-bottom: 8px;
|
|
2756
|
+
padding-bottom: 4px;
|
|
2757
|
+
border-bottom: 1px solid var(--border);
|
|
2758
|
+
}
|
|
2759
|
+
.content-object-card {
|
|
2760
|
+
background: var(--bg-alt);
|
|
2761
|
+
border: 1px solid var(--border);
|
|
2762
|
+
border-radius: var(--radius-sm);
|
|
2763
|
+
padding: 8px 10px;
|
|
2764
|
+
margin-bottom: 8px;
|
|
2765
|
+
}
|
|
2766
|
+
.content-object-header {
|
|
2767
|
+
font-size: 11px;
|
|
2768
|
+
font-weight: 600;
|
|
2769
|
+
color: var(--key-color);
|
|
2770
|
+
margin-bottom: 6px;
|
|
2771
|
+
}
|
|
2772
|
+
.content-field {
|
|
2773
|
+
display: flex;
|
|
2774
|
+
align-items: flex-start;
|
|
2775
|
+
gap: 8px;
|
|
2776
|
+
margin-bottom: 4px;
|
|
2777
|
+
}
|
|
2778
|
+
.content-field-label {
|
|
2779
|
+
font-size: 11px;
|
|
2780
|
+
color: var(--text-dim);
|
|
2781
|
+
min-width: 80px;
|
|
2782
|
+
max-width: 120px;
|
|
2783
|
+
padding-top: 4px;
|
|
2784
|
+
overflow: hidden;
|
|
2785
|
+
text-overflow: ellipsis;
|
|
2786
|
+
white-space: nowrap;
|
|
2787
|
+
}
|
|
2788
|
+
.content-input {
|
|
2789
|
+
flex: 1;
|
|
2790
|
+
background: var(--bg-input);
|
|
2791
|
+
border: 1px solid var(--border);
|
|
2792
|
+
color: var(--text);
|
|
2793
|
+
font-size: 12px;
|
|
2794
|
+
padding: 4px 8px;
|
|
2795
|
+
border-radius: var(--radius-xs);
|
|
2796
|
+
font-family: inherit;
|
|
2797
|
+
resize: vertical;
|
|
2798
|
+
min-height: 24px;
|
|
2799
|
+
}
|
|
2800
|
+
.content-input:focus { border-color: var(--accent); outline: none; }
|
|
2801
|
+
.content-primitives-section {
|
|
2802
|
+
margin-top: 12px;
|
|
2803
|
+
padding-top: 8px;
|
|
2804
|
+
border-top: 1px solid var(--border);
|
|
2805
|
+
}
|