opencode-antigravity-config 1.0.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/styles.css ADDED
@@ -0,0 +1,1086 @@
1
+ :root {
2
+ --bg-dark: #F3F3F3;
3
+ --bg-card: #FFF;
4
+ --bg-input: #FFF;
5
+ --accent: #005A9E;
6
+ --accent-h: #0078D4;
7
+ --green: #107C10;
8
+ --amber: #D83B01;
9
+ --red: #E81123;
10
+ --t1: #111;
11
+ --t2: #5D5D5D;
12
+ --border: #CCC;
13
+ --border-in: #8A8A8A
14
+ }
15
+
16
+ * {
17
+ box-sizing: border-box;
18
+ margin: 0;
19
+ padding: 0
20
+ }
21
+
22
+ body {
23
+ background: transparent;
24
+ color: var(--t1);
25
+ font-family: 'Segoe UI', system-ui, sans-serif;
26
+ overflow: hidden;
27
+ user-select: none
28
+ }
29
+
30
+ .window-container {
31
+ background: var(--bg-dark);
32
+ border: 1px solid #7A7A7A;
33
+ height: 100vh;
34
+ display: flex;
35
+ flex-direction: column
36
+ }
37
+
38
+ /* Title */
39
+ .title-bar {
40
+ height: 34px;
41
+ background: #FFF;
42
+ display: flex;
43
+ justify-content: space-between;
44
+ align-items: center;
45
+ -webkit-app-region: drag;
46
+ z-index: 10;
47
+ flex-shrink: 0
48
+ }
49
+
50
+ .title-left {
51
+ display: flex;
52
+ align-items: center;
53
+ gap: 8px;
54
+ padding-left: 12px
55
+ }
56
+
57
+ .title-left .icon {
58
+ width: 16px;
59
+ height: 16px;
60
+ object-fit: contain;
61
+ display: block
62
+ }
63
+
64
+ .title-text {
65
+ color: var(--t1);
66
+ font-size: 13px
67
+ }
68
+
69
+ .version-text {
70
+ color: var(--t2);
71
+ font-size: 11px
72
+ }
73
+
74
+ .window-controls {
75
+ -webkit-app-region: no-drag;
76
+ display: flex;
77
+ height: 100%
78
+ }
79
+
80
+ .control-btn {
81
+ background: transparent;
82
+ border: none;
83
+ color: var(--t1);
84
+ width: 46px;
85
+ height: 100%;
86
+ cursor: default;
87
+ font-size: 12px
88
+ }
89
+
90
+ .control-btn:hover {
91
+ background: #E5E5E5
92
+ }
93
+
94
+ .control-btn.close:hover {
95
+ background: #E81123;
96
+ color: #FFF
97
+ }
98
+
99
+ .lang-btn {
100
+ width: 56px;
101
+ font-size: 11px;
102
+ font-weight: 600;
103
+ color: var(--accent)
104
+ }
105
+
106
+ .divider-v {
107
+ width: 1px;
108
+ height: 20px;
109
+ background: var(--border);
110
+ margin: 7px 0
111
+ }
112
+
113
+ /* Steps */
114
+ .step-indicator {
115
+ display: flex;
116
+ justify-content: space-between;
117
+ padding: 12px 40px 8px;
118
+ background: var(--bg-dark);
119
+ flex-shrink: 0
120
+ }
121
+
122
+ .step {
123
+ display: flex;
124
+ flex-direction: column;
125
+ align-items: center;
126
+ gap: 4px
127
+ }
128
+
129
+ .step .dot {
130
+ width: 14px;
131
+ height: 14px;
132
+ border-radius: 50%;
133
+ background: #CCC;
134
+ border: 2px solid var(--bg-dark);
135
+ box-shadow: 0 0 0 1px #999
136
+ }
137
+
138
+ .step.active .dot,
139
+ .step.completed .dot {
140
+ background: var(--accent);
141
+ box-shadow: 0 0 0 1px var(--accent)
142
+ }
143
+
144
+ .step span {
145
+ font-size: 11px;
146
+ color: var(--t2)
147
+ }
148
+
149
+ .step.active span {
150
+ color: var(--t1);
151
+ font-weight: 600
152
+ }
153
+
154
+ /* Content */
155
+ .content-area {
156
+ flex: 1;
157
+ margin: 6px 14px 14px;
158
+ position: relative;
159
+ display: flex;
160
+ flex-direction: column;
161
+ min-height: 0
162
+ }
163
+
164
+ .page {
165
+ position: absolute;
166
+ inset: 0;
167
+ background: var(--bg-card);
168
+ border: 1px solid var(--border);
169
+ padding: 14px 18px;
170
+ display: none;
171
+ flex-direction: column
172
+ }
173
+
174
+ .page.active {
175
+ display: flex
176
+ }
177
+
178
+ .center-content {
179
+ display: flex;
180
+ flex-direction: column;
181
+ align-items: center;
182
+ justify-content: center;
183
+ height: 100%
184
+ }
185
+
186
+ .page-header {
187
+ margin-bottom: 10px;
188
+ flex-shrink: 0
189
+ }
190
+
191
+ .page-header h2 {
192
+ font-size: 20px;
193
+ font-weight: 400;
194
+ color: var(--accent);
195
+ margin-bottom: 2px
196
+ }
197
+
198
+ .page-header p {
199
+ font-size: 13px;
200
+ color: var(--t2)
201
+ }
202
+
203
+ .header-row {
204
+ display: flex;
205
+ justify-content: space-between;
206
+ align-items: flex-start
207
+ }
208
+
209
+ .header-actions {
210
+ display: flex;
211
+ gap: 4px
212
+ }
213
+
214
+ .page-footer {
215
+ display: flex;
216
+ justify-content: flex-end;
217
+ gap: 8px;
218
+ margin-top: auto;
219
+ flex-shrink: 0;
220
+ padding-top: 10px;
221
+ border-top: 1px solid var(--border)
222
+ }
223
+
224
+ .scroll-area {
225
+ flex: 1;
226
+ overflow-y: auto;
227
+ overflow-x: hidden;
228
+ min-height: 0
229
+ }
230
+
231
+ .scroll-area::-webkit-scrollbar {
232
+ width: 0;
233
+ display: none
234
+ }
235
+
236
+ /* Buttons */
237
+ .btn {
238
+ padding: 5px 16px;
239
+ font-size: 13px;
240
+ border-radius: 2px;
241
+ cursor: default;
242
+ font-family: inherit;
243
+ border: 1px solid transparent;
244
+ min-width: 72px
245
+ }
246
+
247
+ .btn.primary {
248
+ background: var(--accent);
249
+ color: #FFF
250
+ }
251
+
252
+ .btn.primary:hover {
253
+ background: var(--accent-h)
254
+ }
255
+
256
+ .btn.primary:active {
257
+ background: #004A83
258
+ }
259
+
260
+ .btn.primary:disabled,
261
+ .btn.primary.disabled {
262
+ background: #CCC;
263
+ color: #666;
264
+ cursor: not-allowed
265
+ }
266
+
267
+ .btn.secondary {
268
+ background: #E1E1E1;
269
+ color: var(--t1);
270
+ border-color: #ADADAD
271
+ }
272
+
273
+ .btn.secondary:hover {
274
+ background: #E5F1FB;
275
+ border-color: #0078D7
276
+ }
277
+
278
+ .btn-sm {
279
+ font-size: 12px;
280
+ padding: 4px 12px;
281
+ min-width: 56px
282
+ }
283
+
284
+ .btn-xs {
285
+ font-size: 11px;
286
+ padding: 3px 10px;
287
+ min-width: 48px
288
+ }
289
+
290
+ .btn-danger:hover {
291
+ background: #FDE7E9;
292
+ border-color: var(--red);
293
+ color: var(--red)
294
+ }
295
+
296
+ .btn-icon {
297
+ background: transparent;
298
+ border: 1px solid var(--border);
299
+ width: 26px;
300
+ height: 26px;
301
+ font-size: 13px;
302
+ cursor: default;
303
+ border-radius: 2px;
304
+ display: flex;
305
+ align-items: center;
306
+ justify-content: center;
307
+ flex-shrink: 0
308
+ }
309
+
310
+ .btn-icon:hover {
311
+ background: #E5F1FB;
312
+ border-color: var(--accent)
313
+ }
314
+
315
+ /* Form */
316
+ .form-group {
317
+ margin-bottom: 8px
318
+ }
319
+
320
+ .label-row {
321
+ display: flex;
322
+ justify-content: space-between;
323
+ align-items: center;
324
+ margin-bottom: 2px
325
+ }
326
+
327
+ .cyan-label,
328
+ .purple-label {
329
+ font-size: 12px;
330
+ font-weight: 600;
331
+ color: var(--t1)
332
+ }
333
+
334
+ .grey-label {
335
+ font-size: 12px;
336
+ font-weight: 600;
337
+ color: var(--t1);
338
+ margin-bottom: 4px
339
+ }
340
+
341
+ .help-text {
342
+ font-size: 11px;
343
+ color: var(--t2);
344
+ margin-bottom: 2px
345
+ }
346
+
347
+ .modern-input {
348
+ width: 100%;
349
+ background: var(--bg-input);
350
+ border: 1px solid var(--border-in);
351
+ color: var(--t1);
352
+ padding: 5px 8px;
353
+ border-radius: 2px;
354
+ font-size: 13px;
355
+ font-family: 'Fira Code', 'Consolas', monospace;
356
+ outline: none;
357
+ margin-bottom: 5px
358
+ }
359
+
360
+ .modern-input:focus {
361
+ border-color: var(--accent);
362
+ border-width: 2px;
363
+ padding: 4px 7px
364
+ }
365
+
366
+ .modern-input:hover:not(:focus) {
367
+ border-color: #333
368
+ }
369
+
370
+ .modern-input::placeholder {
371
+ color: #BBB;
372
+ font-size: 12px
373
+ }
374
+
375
+ .val-indicator {
376
+ font-size: 11px;
377
+ font-weight: 600
378
+ }
379
+
380
+ .val-empty {
381
+ color: #999
382
+ }
383
+
384
+ .val-ok {
385
+ color: var(--green)
386
+ }
387
+
388
+ .val-bad {
389
+ color: var(--red)
390
+ }
391
+
392
+ /* Checkbox */
393
+ .modern-checkbox {
394
+ display: flex;
395
+ align-items: center;
396
+ font-size: 13px;
397
+ color: var(--t1);
398
+ cursor: default;
399
+ margin-bottom: 4px
400
+ }
401
+
402
+ .modern-checkbox input {
403
+ display: none
404
+ }
405
+
406
+ .modern-checkbox .checkmark {
407
+ width: 16px;
408
+ height: 16px;
409
+ background: var(--bg-input);
410
+ border: 1px solid var(--border-in);
411
+ margin-right: 6px;
412
+ display: flex;
413
+ align-items: center;
414
+ justify-content: center;
415
+ flex-shrink: 0
416
+ }
417
+
418
+ .modern-checkbox:hover .checkmark {
419
+ border-color: #333
420
+ }
421
+
422
+ .modern-checkbox input:checked~.checkmark {
423
+ background: var(--accent);
424
+ border-color: var(--accent)
425
+ }
426
+
427
+ .modern-checkbox input:checked~.checkmark::after {
428
+ content: '✓';
429
+ color: #FFF;
430
+ font-size: 11px;
431
+ font-weight: bold
432
+ }
433
+
434
+ /* File grid */
435
+ .file-grid {
436
+ display: flex;
437
+ flex-direction: column;
438
+ gap: 3px
439
+ }
440
+
441
+ .file-row {
442
+ display: flex;
443
+ align-items: center;
444
+ gap: 5px
445
+ }
446
+
447
+ .file-row .modern-checkbox {
448
+ flex: 1;
449
+ margin-bottom: 0
450
+ }
451
+
452
+ .file-actions {
453
+ font-size: 11px
454
+ }
455
+
456
+ .link-btn {
457
+ color: var(--accent);
458
+ cursor: pointer;
459
+ font-size: 11px;
460
+ text-decoration: underline
461
+ }
462
+
463
+ .link-btn:hover {
464
+ color: var(--accent-h)
465
+ }
466
+
467
+ .link-sep {
468
+ color: #CCC;
469
+ margin: 0 3px;
470
+ font-size: 11px
471
+ }
472
+
473
+ /* Plugin grid */
474
+ .plugin-grid {
475
+ display: flex;
476
+ flex-direction: column;
477
+ gap: 3px
478
+ }
479
+
480
+ .plugin-group-title {
481
+ font-size: 11px;
482
+ font-weight: 600;
483
+ color: var(--t1);
484
+ padding: 4px 0 2px 0;
485
+ border-bottom: 1px solid var(--border-in);
486
+ margin-bottom: 2px
487
+ }
488
+
489
+ .plugin-badge {
490
+ font-size: 9px;
491
+ background: #fef0f0;
492
+ color: #f56c6c;
493
+ padding: 1px 4px;
494
+ border-radius: 3px;
495
+ border: 1px solid #fbc4c4;
496
+ margin-left: -4px;
497
+ margin-right: 4px
498
+ }
499
+
500
+ .plugin-badge.hidden {
501
+ display: none;
502
+ }
503
+
504
+ .modern-input:disabled {
505
+ opacity: 0.5;
506
+ cursor: not-allowed;
507
+ background-color: var(--bg-body);
508
+ }
509
+
510
+ /* Agent model panel */
511
+ .agent-panel {
512
+ margin: 12px 0;
513
+ border-radius: 8px;
514
+ border: 1px solid var(--border-in);
515
+ background: var(--bg-input);
516
+ padding: 14px 16px;
517
+ text-align: left;
518
+ }
519
+
520
+ .agent-panel-header {
521
+ display: flex;
522
+ align-items: center;
523
+ justify-content: space-between;
524
+ margin-bottom: 10px;
525
+ padding-bottom: 8px;
526
+ border-bottom: 1px solid var(--border-in);
527
+ }
528
+
529
+ .agent-panel-header h3 {
530
+ margin: 0;
531
+ font-size: 14px;
532
+ color: var(--t1);
533
+ }
534
+
535
+ .btn-agent-toggle {
536
+ font-size: 10px !important;
537
+ padding: 3px 10px !important;
538
+ min-width: 0 !important;
539
+ height: auto !important;
540
+ line-height: 1.5 !important;
541
+ }
542
+
543
+ /* Agent model selector dropdown */
544
+ .agent-model-select {
545
+ font-family: 'Fira Code', monospace;
546
+ font-size: 12px;
547
+ background: var(--bg-body);
548
+ color: var(--t1);
549
+ border: 1px solid var(--border-in);
550
+ border-radius: 4px;
551
+ padding: 5px 8px;
552
+ min-width: 170px;
553
+ cursor: pointer;
554
+ outline: none;
555
+ transition: border-color 0.2s, box-shadow 0.2s;
556
+ }
557
+
558
+ .agent-model-select:hover {
559
+ border-color: var(--accent);
560
+ }
561
+
562
+ .agent-model-select:focus {
563
+ border-color: var(--accent);
564
+ box-shadow: 0 0 0 2px rgba(0, 172, 230, 0.15);
565
+ }
566
+
567
+ /* Group mode rows */
568
+ .agent-group-row {
569
+ display: flex;
570
+ justify-content: space-between;
571
+ align-items: center;
572
+ padding: 8px 10px;
573
+ margin-bottom: 6px;
574
+ background: var(--bg-body);
575
+ border-radius: 5px;
576
+ border-left: 3px solid transparent;
577
+ transition: background 0.2s;
578
+ }
579
+
580
+ .agent-group-row:last-child {
581
+ margin-bottom: 0;
582
+ }
583
+
584
+ .agent-group-row:hover {
585
+ background: rgba(0, 172, 230, 0.04);
586
+ }
587
+
588
+ .agent-group-info {
589
+ display: flex;
590
+ flex-direction: column;
591
+ gap: 2px;
592
+ }
593
+
594
+ .agent-group-name {
595
+ font-size: 13px;
596
+ font-weight: 600;
597
+ color: var(--t1);
598
+ }
599
+
600
+ .agent-group-members {
601
+ font-size: 10px;
602
+ color: var(--t2);
603
+ opacity: 0.8;
604
+ }
605
+
606
+ /* Advanced mode */
607
+ .agent-adv-section {
608
+ font-size: 11px;
609
+ font-weight: 600;
610
+ color: var(--t1);
611
+ padding: 5px 8px;
612
+ margin: 6px 0 4px;
613
+ border-left: 3px solid transparent;
614
+ background: rgba(0, 0, 0, 0.03);
615
+ border-radius: 3px;
616
+ }
617
+
618
+ .agent-adv-section:first-child {
619
+ margin-top: 0;
620
+ }
621
+
622
+ .agent-adv-row {
623
+ display: flex;
624
+ justify-content: space-between;
625
+ align-items: center;
626
+ padding: 5px 10px 5px 16px;
627
+ margin-bottom: 2px;
628
+ font-size: 12px;
629
+ border-radius: 3px;
630
+ transition: background 0.15s;
631
+ }
632
+
633
+ .agent-adv-row:hover {
634
+ background: rgba(0, 172, 230, 0.04);
635
+ }
636
+
637
+ .agent-adv-name {
638
+ color: var(--t1);
639
+ font-weight: 500;
640
+ }
641
+
642
+ .agent-adv-name i {
643
+ color: var(--t2);
644
+ font-size: 10px;
645
+ font-weight: 400;
646
+ }
647
+
648
+ .plugin-row {
649
+ display: flex;
650
+ align-items: center;
651
+ gap: 5px
652
+ }
653
+
654
+ .plugin-row .modern-checkbox {
655
+ flex: 1;
656
+ margin-bottom: 0;
657
+ font-size: 12px
658
+ }
659
+
660
+ .plugin-desc {
661
+ font-size: 10px;
662
+ color: var(--t2);
663
+ white-space: nowrap;
664
+ flex-shrink: 0
665
+ }
666
+
667
+ .modern-checkbox input:disabled~.checkmark {
668
+ opacity: .5;
669
+ cursor: not-allowed
670
+ }
671
+
672
+ .divider {
673
+ height: 1px;
674
+ background: var(--border);
675
+ margin: 8px 0
676
+ }
677
+
678
+ /* Welcome */
679
+ .hero-icon {
680
+ width: 64px;
681
+ height: 64px;
682
+ margin-bottom: 12px;
683
+ object-fit: contain;
684
+ display: block
685
+ }
686
+
687
+ .center-content h1 {
688
+ font-size: 26px;
689
+ font-weight: 300;
690
+ margin-bottom: 2px;
691
+ color: var(--accent)
692
+ }
693
+
694
+ .cyan-text {
695
+ color: var(--t1);
696
+ font-size: 16px;
697
+ font-weight: 300;
698
+ margin-bottom: 12px
699
+ }
700
+
701
+ .subtitle {
702
+ font-size: 13px;
703
+ color: var(--t2);
704
+ text-align: center;
705
+ max-width: 500px;
706
+ line-height: 1.5;
707
+ margin-bottom: 14px
708
+ }
709
+
710
+ .config-meta {
711
+ font-size: 11px;
712
+ color: var(--t2);
713
+ margin-bottom: 14px;
714
+ padding: 3px 10px;
715
+ background: #F0F0F0;
716
+ border: 1px solid var(--border);
717
+ border-radius: 2px;
718
+ font-family: 'Fira Code', 'Consolas', monospace
719
+ }
720
+
721
+ .welcome-actions {
722
+ margin-bottom: 12px
723
+ }
724
+
725
+ .welcome-secondary {
726
+ display: flex;
727
+ gap: 8px
728
+ }
729
+
730
+ .info-panels {
731
+ display: flex;
732
+ gap: 12px;
733
+ margin-bottom: 12px;
734
+ width: 100%;
735
+ max-width: 500px
736
+ }
737
+
738
+ .info-panel {
739
+ flex: 1;
740
+ background: #F8F8F8;
741
+ border: 1px solid var(--border);
742
+ padding: 8px 12px;
743
+ text-align: left
744
+ }
745
+
746
+ .info-panel h3 {
747
+ font-size: 13px;
748
+ color: var(--accent);
749
+ margin-bottom: 4px;
750
+ font-weight: 600
751
+ }
752
+
753
+ .info-panel ul {
754
+ list-style: none;
755
+ font-size: 11px;
756
+ color: var(--t2);
757
+ padding-left: 12px
758
+ }
759
+
760
+ .info-panel li {
761
+ margin-bottom: 3px;
762
+ position: relative
763
+ }
764
+
765
+ .info-panel li::before {
766
+ content: "•";
767
+ color: var(--accent);
768
+ font-weight: bold;
769
+ position: absolute;
770
+ left: -10px
771
+ }
772
+
773
+ .info-panel strong {
774
+ color: var(--t1);
775
+ font-weight: 600
776
+ }
777
+
778
+ /* System */
779
+ .prereq-item {
780
+ background: #F9F9F9;
781
+ border: 1px solid var(--border);
782
+ padding: 8px 12px;
783
+ margin-bottom: 4px;
784
+ display: flex;
785
+ justify-content: space-between;
786
+ align-items: center
787
+ }
788
+
789
+ .prereq-info .label {
790
+ font-size: 14px;
791
+ font-weight: 600;
792
+ color: var(--t1)
793
+ }
794
+
795
+ .prereq-info .value {
796
+ font-size: 12px;
797
+ color: var(--t2);
798
+ margin-top: 2px
799
+ }
800
+
801
+ .prereq-status {
802
+ font-size: 18px;
803
+ font-weight: bold
804
+ }
805
+
806
+ .status-ok {
807
+ color: var(--green)
808
+ }
809
+
810
+ .status-warn {
811
+ color: var(--amber)
812
+ }
813
+
814
+ .status-fail {
815
+ color: var(--red)
816
+ }
817
+
818
+ /* Progress */
819
+ #page3 {
820
+ justify-content: space-between
821
+ }
822
+
823
+ .progress-container {
824
+ height: 6px;
825
+ background: #E6E6E6;
826
+ margin-bottom: 8px;
827
+ overflow: hidden;
828
+ border: 1px solid #CCC;
829
+ flex-shrink: 0
830
+ }
831
+
832
+ .progress-bar {
833
+ height: 100%;
834
+ background: var(--green);
835
+ transition: width .3s ease
836
+ }
837
+
838
+ .log-container {
839
+ flex: 1;
840
+ background: #FFF;
841
+ border: 1px solid var(--border);
842
+ display: flex;
843
+ flex-direction: column;
844
+ overflow: hidden;
845
+ min-height: 0
846
+ }
847
+
848
+ .log-header {
849
+ background: #F3F3F3;
850
+ padding: 4px 10px;
851
+ border-bottom: 1px solid var(--border);
852
+ flex-shrink: 0
853
+ }
854
+
855
+ .log-title {
856
+ font-size: 11px;
857
+ color: var(--t2);
858
+ font-weight: 600
859
+ }
860
+
861
+ .log-content {
862
+ padding: 6px 8px;
863
+ font-family: 'Fira Code', 'Consolas', monospace;
864
+ font-size: 12px;
865
+ color: #333;
866
+ line-height: 1.4;
867
+ white-space: pre-wrap;
868
+ user-select: text;
869
+ flex: 1;
870
+ overflow-y: auto
871
+ }
872
+
873
+ .log-content::-webkit-scrollbar {
874
+ width: 0;
875
+ display: none
876
+ }
877
+
878
+ .log-row {
879
+ margin-bottom: 1px
880
+ }
881
+
882
+ .log-success {
883
+ color: var(--green)
884
+ }
885
+
886
+ .log-error {
887
+ color: var(--red)
888
+ }
889
+
890
+ .log-warn {
891
+ color: var(--amber)
892
+ }
893
+
894
+ .log-info {
895
+ color: #555
896
+ }
897
+
898
+ /* Complete */
899
+ .success-icon {
900
+ width: 56px;
901
+ height: 56px;
902
+ border-radius: 28px;
903
+ background: #DFF6DD;
904
+ color: var(--green);
905
+ font-size: 28px;
906
+ display: flex;
907
+ align-items: center;
908
+ justify-content: center;
909
+ margin-bottom: 12px
910
+ }
911
+
912
+ .success-text {
913
+ font-size: 14px;
914
+ color: var(--green);
915
+ margin: 4px 0 14px
916
+ }
917
+
918
+ .summary-card {
919
+ background: #F9F9F9;
920
+ border: 1px solid var(--border);
921
+ padding: 10px 14px;
922
+ margin-bottom: 8px;
923
+ width: 100%;
924
+ max-width: 400px;
925
+ text-align: left
926
+ }
927
+
928
+ .code-text {
929
+ font-family: 'Fira Code', 'Consolas', monospace;
930
+ font-size: 12px;
931
+ color: var(--t1);
932
+ background: #EFEFEF;
933
+ padding: 4px 6px;
934
+ border-radius: 2px;
935
+ margin-top: 4px;
936
+ border: 1px solid #DDD
937
+ }
938
+
939
+ .step-text {
940
+ font-size: 13px;
941
+ color: var(--t1);
942
+ margin-bottom: 3px
943
+ }
944
+
945
+ .action-row {
946
+ display: flex;
947
+ gap: 8px;
948
+ margin-top: 14px
949
+ }
950
+
951
+ /* Modal */
952
+ .modal-overlay {
953
+ position: fixed;
954
+ inset: 0;
955
+ background: rgba(0, 0, 0, .4);
956
+ z-index: 100;
957
+ display: none;
958
+ align-items: center;
959
+ justify-content: center
960
+ }
961
+
962
+ .modal-overlay.visible {
963
+ display: flex
964
+ }
965
+
966
+ .modal-container {
967
+ background: #FFF;
968
+ border: 1px solid #7A7A7A;
969
+ width: 640px;
970
+ max-height: 500px;
971
+ display: flex;
972
+ flex-direction: column;
973
+ box-shadow: 0 4px 20px rgba(0, 0, 0, .25)
974
+ }
975
+
976
+ .modal-header {
977
+ display: flex;
978
+ justify-content: space-between;
979
+ align-items: center;
980
+ padding: 8px 14px;
981
+ background: #F3F3F3;
982
+ border-bottom: 1px solid var(--border);
983
+ flex-shrink: 0
984
+ }
985
+
986
+ .modal-title {
987
+ font-size: 14px;
988
+ font-weight: 600;
989
+ color: var(--t1)
990
+ }
991
+
992
+ .modal-close {
993
+ background: transparent;
994
+ border: none;
995
+ font-size: 16px;
996
+ cursor: default;
997
+ color: var(--t2);
998
+ width: 30px;
999
+ height: 30px
1000
+ }
1001
+
1002
+ .modal-close:hover {
1003
+ background: #E81123;
1004
+ color: #FFF
1005
+ }
1006
+
1007
+ .modal-body {
1008
+ padding: 14px 18px;
1009
+ overflow-y: auto;
1010
+ font-size: 13px;
1011
+ color: var(--t1);
1012
+ flex: 1;
1013
+ min-height: 0
1014
+ }
1015
+
1016
+ .modal-body::-webkit-scrollbar {
1017
+ width: 0;
1018
+ display: none
1019
+ }
1020
+
1021
+ .modal-code {
1022
+ font-family: 'Fira Code', 'Consolas', monospace;
1023
+ font-size: 12px;
1024
+ line-height: 1.5;
1025
+ background: #F8F8F8;
1026
+ border: 1px solid #E0E0E0;
1027
+ padding: 10px 12px;
1028
+ white-space: pre-wrap;
1029
+ word-break: break-all;
1030
+ color: #333;
1031
+ max-height: 400px;
1032
+ overflow-y: auto;
1033
+ user-select: text
1034
+ }
1035
+
1036
+ .modal-code::-webkit-scrollbar {
1037
+ width: 0;
1038
+ display: none
1039
+ }
1040
+
1041
+ .diff-view {
1042
+ font-family: 'Fira Code', 'Consolas', monospace;
1043
+ font-size: 12px;
1044
+ line-height: 1.6;
1045
+ user-select: text
1046
+ }
1047
+
1048
+ .diff-line {
1049
+ padding: 1px 8px;
1050
+ white-space: pre-wrap;
1051
+ word-break: break-all
1052
+ }
1053
+
1054
+ .diff-add {
1055
+ background: #DFF6DD;
1056
+ color: #107C10
1057
+ }
1058
+
1059
+ .diff-del {
1060
+ background: #FDE7E9;
1061
+ color: #E81123
1062
+ }
1063
+
1064
+ .diff-same {
1065
+ color: #888
1066
+ }
1067
+
1068
+ .diff-prefix {
1069
+ display: inline-block;
1070
+ width: 16px;
1071
+ font-weight: bold
1072
+ }
1073
+
1074
+ .diff-new-badge {
1075
+ background: #DFF6DD;
1076
+ color: var(--green);
1077
+ font-size: 13px;
1078
+ font-weight: 600;
1079
+ padding: 5px 10px;
1080
+ margin-bottom: 10px;
1081
+ border: 1px solid #B7E1B5
1082
+ }
1083
+
1084
+ .hidden {
1085
+ display: none !important
1086
+ }