cabletidy 0.1.0 → 0.3.0-rc.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/web/styles.css DELETED
@@ -1,1188 +0,0 @@
1
- :root {
2
- --ink: #242a30;
3
- --muted: #636c75;
4
- --paper: #fafbfc;
5
- --panel: #ffffff;
6
- --line: #e1e5e8;
7
- --line-strong: #bfc7ce;
8
- --rail: #f3f5f6;
9
- --rail-soft: #e5eeea;
10
- --accent: #277456;
11
- --accent-soft: #edf5f0;
12
- --warning: #906017;
13
- --danger: #b43a3a;
14
- --shadow: 0 4px 18px rgba(36, 42, 48, 0.1);
15
- --radius: 4px;
16
- font-family: "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
17
- font-size: 14px;
18
- line-height: 1.5;
19
- font-variant-numeric: tabular-nums;
20
- color: var(--ink);
21
- background: var(--paper);
22
- font-synthesis: none;
23
- }
24
-
25
- * {
26
- box-sizing: border-box;
27
- }
28
-
29
- body {
30
- min-width: 320px;
31
- min-height: 100dvh;
32
- margin: 0;
33
- background: var(--paper);
34
- }
35
-
36
- button,
37
- input,
38
- select,
39
- textarea {
40
- font: inherit;
41
- }
42
-
43
- button {
44
- cursor: pointer;
45
- }
46
-
47
- [hidden] {
48
- display: none !important;
49
- }
50
-
51
- button:focus-visible,
52
- summary:focus-visible {
53
- outline: 2px solid var(--accent);
54
- outline-offset: 3px;
55
- }
56
-
57
- button:disabled {
58
- cursor: default;
59
- opacity: 0.5;
60
- }
61
-
62
- .muted {
63
- color: var(--muted);
64
- font-size: 13px;
65
- }
66
-
67
- .app-shell {
68
- display: grid;
69
- min-height: 100dvh;
70
- grid-template-columns: 184px minmax(0, 1fr);
71
- }
72
-
73
- .rail {
74
- position: sticky;
75
- top: 0;
76
- display: flex;
77
- height: 100dvh;
78
- align-self: start;
79
- flex-direction: column;
80
- padding: 22px 12px 16px;
81
- border-right: 1px solid var(--line);
82
- color: var(--ink);
83
- background: var(--rail);
84
- }
85
-
86
- .brand {
87
- display: flex;
88
- align-items: center;
89
- padding: 0 10px 12px;
90
- }
91
-
92
- .brand strong {
93
- color: var(--ink);
94
- font-size: 17px;
95
- letter-spacing: -0.02em;
96
- }
97
-
98
- .rail-status,
99
- .rail-footer {
100
- display: flex;
101
- align-items: center;
102
- gap: 8px;
103
- color: var(--muted);
104
- font-size: 12px;
105
- }
106
-
107
- .rail-status {
108
- margin: 0 10px 24px;
109
- }
110
-
111
- .status-light {
112
- width: 7px;
113
- height: 7px;
114
- flex: 0 0 auto;
115
- border-radius: 50%;
116
- background: var(--accent);
117
- }
118
-
119
- .is-offline .status-light {
120
- background: var(--danger);
121
- }
122
-
123
- .nav {
124
- display: grid;
125
- gap: 4px;
126
- }
127
-
128
- .nav-item {
129
- min-height: 36px;
130
- padding: 0 11px;
131
- border: 1px solid transparent;
132
- border-radius: var(--radius);
133
- color: var(--muted);
134
- background: transparent;
135
- text-align: left;
136
- transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
137
- }
138
-
139
- .nav-item:hover,
140
- .nav-item.is-active {
141
- color: var(--accent);
142
- background: var(--rail-soft);
143
- }
144
-
145
- .nav-item.is-active {
146
- font-weight: 600;
147
- }
148
-
149
- .rail-footer {
150
- margin-top: auto;
151
- padding: 14px 10px 0;
152
- border-top: 1px solid var(--line);
153
- }
154
-
155
- .main {
156
- min-width: 0;
157
- }
158
-
159
- .topbar {
160
- display: flex;
161
- align-items: center;
162
- justify-content: space-between;
163
- gap: 20px;
164
- max-width: 1420px;
165
- margin: 0 auto;
166
- padding: 22px 28px;
167
- }
168
-
169
- .topbar > div:first-child {
170
- min-width: 0;
171
- }
172
-
173
- h1,
174
- h2,
175
- h3,
176
- p {
177
- margin-top: 0;
178
- }
179
-
180
- h1 {
181
- margin-bottom: 0;
182
- font-size: 22px;
183
- font-weight: 600;
184
- line-height: 1.4;
185
- overflow-wrap: anywhere;
186
- }
187
-
188
- h2 {
189
- margin-bottom: 8px;
190
- font-size: 15px;
191
- font-weight: 600;
192
- }
193
-
194
- h3 {
195
- margin-bottom: 5px;
196
- font-size: 14px;
197
- font-weight: 600;
198
- }
199
-
200
- .topbar-actions {
201
- display: flex;
202
- flex-wrap: wrap;
203
- justify-content: flex-end;
204
- gap: 8px;
205
- align-items: center;
206
- flex-shrink: 0;
207
- }
208
-
209
- .button {
210
- min-height: 34px;
211
- padding: 5px 12px;
212
- border: 1px solid var(--line-strong);
213
- border-radius: var(--radius);
214
- color: var(--ink);
215
- background: var(--panel);
216
- font-size: 13px;
217
- font-weight: 500;
218
- transition: border-color 120ms ease, background 120ms ease;
219
- }
220
-
221
- .button:hover:not(:disabled) {
222
- border-color: var(--muted);
223
- background: var(--rail);
224
- }
225
-
226
- .button:active:not(:disabled) {
227
- background: var(--line);
228
- }
229
-
230
- .button-primary {
231
- color: #fff;
232
- border-color: var(--accent);
233
- background: var(--accent);
234
- }
235
-
236
- .button-primary:hover:not(:disabled) {
237
- border-color: #205d46;
238
- background: #205d46;
239
- }
240
-
241
- .button-quiet {
242
- color: var(--muted);
243
- background: transparent;
244
- }
245
-
246
- .button-danger {
247
- color: var(--danger);
248
- border-color: rgba(188, 76, 76, 0.35);
249
- background: transparent;
250
- }
251
-
252
- .page-content {
253
- display: grid;
254
- gap: 16px;
255
- max-width: 1420px;
256
- margin: 0 auto;
257
- padding: 0 28px 36px;
258
- }
259
-
260
- .suite-toolbar {
261
- display: flex;
262
- align-items: center;
263
- justify-content: space-between;
264
- gap: 20px;
265
- }
266
-
267
- .suite-list {
268
- overflow: auto;
269
- border: 1px solid var(--line);
270
- border-radius: var(--radius);
271
- background: var(--panel);
272
- }
273
-
274
- .suite-table {
275
- width: 100%;
276
- border-collapse: collapse;
277
- text-align: left;
278
- font-size: 13px;
279
- }
280
-
281
- .suite-table th,
282
- .suite-table td {
283
- padding: 12px 16px;
284
- border-bottom: 1px solid var(--line);
285
- font-weight: 400;
286
- }
287
-
288
- .suite-table thead th {
289
- padding-block: 9px;
290
- color: var(--muted);
291
- background: var(--paper);
292
- white-space: nowrap;
293
- font-size: 12px;
294
- }
295
-
296
- .suite-table tbody tr:last-child > * {
297
- border-bottom: 0;
298
- }
299
-
300
- .suite-table tbody tr:hover {
301
- background: var(--paper);
302
- }
303
-
304
- .suite-table tbody th {
305
- width: 32%;
306
- }
307
-
308
- .suite-name {
309
- padding: 0;
310
- border: 0;
311
- color: var(--ink);
312
- background: transparent;
313
- font-weight: 600;
314
- text-align: left;
315
- overflow-wrap: anywhere;
316
- }
317
-
318
- .suite-name:hover {
319
- color: var(--accent);
320
- text-decoration: underline;
321
- }
322
-
323
- .suite-upstream {
324
- display: block;
325
- margin-top: 3px;
326
- color: var(--muted);
327
- font-size: 12px;
328
- overflow-wrap: anywhere;
329
- }
330
-
331
- .config-form {
332
- width: 100%;
333
- max-width: 920px;
334
- }
335
-
336
- .config-section {
337
- padding: 20px;
338
- }
339
-
340
- .config-section + .config-section {
341
- border-top: 1px solid var(--line);
342
- }
343
-
344
- .config-section > h2 {
345
- margin-bottom: 16px;
346
- }
347
-
348
- .config-form-footer {
349
- display: flex;
350
- justify-content: flex-end;
351
- flex-wrap: wrap;
352
- gap: 8px;
353
- padding: 14px 20px;
354
- border-top: 1px solid var(--line);
355
- background: var(--paper);
356
- }
357
-
358
- .create-model-list {
359
- display: grid;
360
- gap: 16px;
361
- }
362
-
363
- .create-model-row {
364
- display: grid;
365
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
366
- align-items: start;
367
- gap: 12px;
368
- }
369
-
370
- .create-model-row > .mini-button {
371
- min-height: 36px;
372
- margin-top: 24px;
373
- }
374
-
375
- .empty-state-panel {
376
- min-height: 140px;
377
- display: grid;
378
- align-items: center;
379
- }
380
-
381
- .text-button {
382
- justify-self: start;
383
- padding: 0;
384
- border: 0;
385
- color: var(--muted);
386
- background: transparent;
387
- font-size: 13px;
388
- }
389
-
390
- .text-button:hover {
391
- color: var(--accent);
392
- }
393
-
394
- .suite-status,
395
- .suite-connection-actions {
396
- display: flex;
397
- flex-wrap: wrap;
398
- align-items: center;
399
- gap: 12px;
400
- }
401
-
402
- .suite-status {
403
- color: var(--muted);
404
- font-size: 12px;
405
- }
406
-
407
- .suite-connection-actions {
408
- gap: 8px;
409
- }
410
-
411
- .suite-connection-actions .button {
412
- white-space: nowrap;
413
- }
414
-
415
- .suite-connection-facts {
416
- display: grid;
417
- grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
418
- gap: 20px;
419
- margin: 0;
420
- }
421
-
422
- .suite-connection-facts > div {
423
- min-width: 0;
424
- }
425
-
426
- .suite-connection-facts dt {
427
- margin-bottom: 5px;
428
- color: var(--muted);
429
- font-size: 12px;
430
- }
431
-
432
- .suite-connection-facts dd {
433
- margin: 0;
434
- font-size: 13px;
435
- }
436
-
437
- .suite-section {
438
- padding: 20px;
439
- }
440
-
441
- .suite-section + .suite-section {
442
- border-top: 1px solid var(--line);
443
- }
444
-
445
- .suite-section-heading {
446
- margin-bottom: 16px;
447
- }
448
-
449
- .suite-section-heading h2 {
450
- margin: 0;
451
- }
452
-
453
- .suite-section-heading p {
454
- margin: 4px 0 0;
455
- color: var(--muted);
456
- font-size: 12px;
457
- }
458
-
459
- .suite-models-heading,
460
- .suite-section-footer {
461
- display: flex;
462
- align-items: center;
463
- justify-content: space-between;
464
- gap: 12px;
465
- }
466
-
467
- .suite-section-footer {
468
- margin-top: 16px;
469
- }
470
-
471
- .suite-section-footer .form-actions {
472
- margin: 0;
473
- flex-shrink: 0;
474
- }
475
-
476
- .suite-models-heading .button {
477
- flex-shrink: 0;
478
- }
479
-
480
- .suite-section .catalog-status {
481
- margin-bottom: 16px;
482
- }
483
-
484
- .suite-model-list {
485
- display: grid;
486
- gap: 16px;
487
- }
488
-
489
- .catalog-status {
490
- display: flex;
491
- align-items: center;
492
- justify-content: space-between;
493
- flex-wrap: wrap;
494
- gap: 12px;
495
- margin: 0;
496
- color: var(--muted);
497
- font-size: 12px;
498
- overflow-wrap: anywhere;
499
- }
500
-
501
- .config-section .catalog-status {
502
- margin-bottom: 16px;
503
- }
504
-
505
- .suite-model-card {
506
- min-width: 0;
507
- }
508
-
509
- .suite-model-card + .suite-model-card {
510
- padding-top: 16px;
511
- border-top: 1px solid var(--line);
512
- }
513
-
514
- .suite-model-mapping {
515
- display: grid;
516
- grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto;
517
- gap: 12px;
518
- align-items: start;
519
- }
520
-
521
- .suite-model-mapping > .mini-button {
522
- min-height: 36px;
523
- margin-top: 24px;
524
- white-space: nowrap;
525
- }
526
-
527
- .suite-mapping-arrow {
528
- display: grid;
529
- align-items: center;
530
- min-height: 36px;
531
- margin-top: 24px;
532
- color: var(--muted);
533
- font-size: 18px;
534
- text-align: center;
535
- }
536
-
537
- .suite-model-settings {
538
- margin-top: 10px;
539
- }
540
-
541
- .suite-model-settings summary {
542
- width: fit-content;
543
- max-width: 100%;
544
- padding: 4px 0;
545
- color: var(--muted);
546
- font-size: 12px;
547
- cursor: pointer;
548
- }
549
-
550
- .suite-model-settings summary > .field-hint {
551
- margin-left: 12px;
552
- }
553
-
554
- .suite-model-settings summary:hover,
555
- .suite-model-settings[open] summary {
556
- color: var(--ink);
557
- }
558
-
559
- .suite-model-policy .checkbox-field {
560
- padding-top: 18px;
561
- }
562
-
563
- .mono {
564
- font-family: "SFMono-Regular", "Cascadia Code", monospace;
565
- font-size: 12px;
566
- overflow-wrap: anywhere;
567
- }
568
-
569
- .field-hint,
570
- .table-meta {
571
- color: var(--muted);
572
- font-size: 12px;
573
- overflow-wrap: anywhere;
574
- }
575
-
576
- .panel {
577
- min-width: 0;
578
- border: 1px solid var(--line);
579
- border-radius: var(--radius);
580
- background: var(--panel);
581
- }
582
-
583
- .panel-header {
584
- display: flex;
585
- align-items: center;
586
- justify-content: space-between;
587
- gap: 12px;
588
- padding: 12px 16px;
589
- border-bottom: 1px solid var(--line);
590
- }
591
-
592
- .panel-header h2 {
593
- margin: 0;
594
- }
595
-
596
- .panel-header button {
597
- flex-shrink: 0;
598
- }
599
-
600
- .panel-body {
601
- padding: 16px;
602
- }
603
-
604
- .list {
605
- display: grid;
606
- gap: 0;
607
- }
608
-
609
- .list-row {
610
- width: 100%;
611
- border: 0;
612
- border-bottom: 1px solid var(--line);
613
- text-align: left;
614
- display: grid;
615
- grid-template-columns: minmax(0, 1fr) auto;
616
- gap: 16px;
617
- align-items: center;
618
- padding: 15px 0;
619
- border-radius: 0;
620
- background: transparent;
621
- min-width: 0;
622
- }
623
-
624
- .list-row > * {
625
- min-width: 0;
626
- overflow-wrap: anywhere;
627
- }
628
-
629
- .list-row:first-child {
630
- padding-top: 0;
631
- }
632
-
633
- .list-row:last-child {
634
- padding-bottom: 0;
635
- border-bottom: 0;
636
- }
637
-
638
- button.list-row:hover,
639
- .list-row.is-selected {
640
- background: rgba(37, 184, 120, 0.055);
641
- }
642
-
643
- .checkbox-field {
644
- align-content: center;
645
- min-height: 40px;
646
- padding: 0 4px;
647
- }
648
-
649
- .list-row p {
650
- margin: 4px 0 0;
651
- color: var(--muted);
652
- font-size: 12px;
653
- }
654
-
655
- .status-badge {
656
- display: inline-flex;
657
- align-items: center;
658
- gap: 6px;
659
- color: var(--accent);
660
- font-size: 12px;
661
- white-space: nowrap;
662
- }
663
-
664
- .status-badge::before {
665
- width: 6px;
666
- height: 6px;
667
- content: "";
668
- border-radius: 50%;
669
- background: currentColor;
670
- }
671
-
672
- .status-badge.warning {
673
- color: var(--warning);
674
- }
675
-
676
- .status-badge.danger {
677
- color: var(--danger);
678
- }
679
-
680
- .status-badge.neutral {
681
- color: var(--muted);
682
- }
683
-
684
- .empty {
685
- padding: 34px 8px;
686
- color: var(--muted);
687
- text-align: center;
688
- }
689
-
690
- .empty strong {
691
- display: block;
692
- margin-bottom: 7px;
693
- color: var(--ink);
694
- }
695
-
696
- .form-layout {
697
- display: grid;
698
- grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr);
699
- gap: 22px;
700
- align-items: start;
701
- }
702
-
703
- .form-grid {
704
- display: grid;
705
- grid-template-columns: repeat(2, minmax(0, 1fr));
706
- gap: 14px;
707
- }
708
-
709
- .suite-model-policy {
710
- grid-template-columns: repeat(4, minmax(0, 1fr));
711
- align-items: start;
712
- margin-top: 12px;
713
- padding: 16px;
714
- border-left: 2px solid var(--line-strong);
715
- background: var(--paper);
716
- }
717
-
718
- .field {
719
- display: grid;
720
- min-width: 0;
721
- gap: 6px;
722
- }
723
-
724
- .field.full {
725
- grid-column: 1 / -1;
726
- }
727
-
728
- .field label,
729
- .field > span:first-child {
730
- color: var(--muted);
731
- font-size: 12px;
732
- }
733
-
734
- .field input,
735
- .field select,
736
- .field textarea {
737
- width: 100%;
738
- min-width: 0;
739
- min-height: 36px;
740
- padding: 0 11px;
741
- border: 1px solid var(--line-strong);
742
- border-radius: var(--radius);
743
- outline: 0;
744
- color: var(--ink);
745
- background: #fff;
746
- font-size: 13px;
747
- }
748
-
749
- .field textarea {
750
- min-height: 78px;
751
- padding-top: 10px;
752
- resize: vertical;
753
- }
754
-
755
- .field input:focus,
756
- .field select:focus,
757
- .field textarea:focus {
758
- border-color: var(--accent);
759
- box-shadow: 0 0 0 3px rgba(37, 184, 120, 0.14);
760
- }
761
-
762
- .field input:disabled {
763
- color: var(--muted);
764
- background: var(--rail);
765
- }
766
-
767
- .field.checkbox-field > span {
768
- display: flex;
769
- align-items: center;
770
- gap: 8px;
771
- min-height: 40px;
772
- font-size: 13px;
773
- }
774
-
775
- .field.checkbox-field input {
776
- width: 18px;
777
- height: 18px;
778
- min-height: 18px;
779
- margin: 0;
780
- padding: 0;
781
- flex-shrink: 0;
782
- accent-color: var(--accent);
783
- }
784
-
785
- .static-field {
786
- display: grid;
787
- align-content: center;
788
- gap: 3px;
789
- min-height: 40px;
790
- padding: 0 11px;
791
- border: 1px solid var(--line);
792
- background: var(--rail);
793
- font-size: 12px;
794
- }
795
-
796
- .static-field strong {
797
- font-size: 12px;
798
- font-weight: 650;
799
- }
800
-
801
- .static-field span {
802
- color: var(--muted);
803
- font-family: "SFMono-Regular", "Cascadia Code", monospace;
804
- font-size: 10px;
805
- }
806
-
807
- .field-hint {
808
- line-height: 1.45;
809
- }
810
-
811
- .form-actions {
812
- display: flex;
813
- flex-wrap: wrap;
814
- gap: 8px;
815
- margin-top: 18px;
816
- }
817
-
818
- .form-feedback {
819
- margin-bottom: 16px;
820
- overflow-wrap: anywhere;
821
- }
822
-
823
- .config-form > .form-feedback {
824
- margin: 16px 20px 0;
825
- }
826
-
827
- .form-feedback ul {
828
- margin: 8px 0 0;
829
- padding-left: 20px;
830
- }
831
-
832
- .mapping-list {
833
- display: grid;
834
- gap: 10px;
835
- }
836
-
837
- .mapping-row {
838
- display: grid;
839
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
840
- gap: 8px;
841
- align-items: end;
842
- padding: 12px;
843
- border: 1px solid var(--line);
844
- background: #fff;
845
- }
846
-
847
- .mapping-row input {
848
- width: 100%;
849
- min-height: 36px;
850
- padding: 0 9px;
851
- border: 1px solid var(--line-strong);
852
- border-radius: var(--radius);
853
- color: var(--ink);
854
- background: var(--panel);
855
- font-size: 12px;
856
- }
857
-
858
- .mapping-row .mapping-capabilities {
859
- margin-top: 7px;
860
- }
861
-
862
- .subsection {
863
- margin-top: 22px;
864
- padding-top: 18px;
865
- border-top: 1px solid var(--line);
866
- }
867
-
868
- .subsection:first-child {
869
- margin-top: 0;
870
- padding-top: 0;
871
- border-top: 0;
872
- }
873
-
874
- .subsection-header {
875
- display: flex;
876
- align-items: center;
877
- justify-content: space-between;
878
- gap: 12px;
879
- margin-bottom: 12px;
880
- }
881
-
882
- .subsection-header h2,
883
- .subsection-header h3 {
884
- margin-bottom: 0;
885
- }
886
-
887
- .mini-button {
888
- min-height: 32px;
889
- padding: 0 9px;
890
- border: 1px solid var(--line-strong);
891
- border-radius: var(--radius);
892
- color: var(--muted);
893
- background: transparent;
894
- font-size: 12px;
895
- }
896
-
897
- .mini-button:hover {
898
- color: var(--ink);
899
- border-color: var(--accent);
900
- }
901
-
902
- .code-preview {
903
- min-width: 0;
904
- max-height: 460px;
905
- overflow: auto;
906
- margin: 0;
907
- padding: 16px;
908
- border: 1px solid var(--line);
909
- color: var(--ink);
910
- background: var(--rail);
911
- font-family: "SFMono-Regular", "Cascadia Code", monospace;
912
- font-size: 12px;
913
- line-height: 1.65;
914
- white-space: pre-wrap;
915
- word-break: break-word;
916
- }
917
-
918
- .notice {
919
- padding: 12px 14px;
920
- border-left: 3px solid var(--accent);
921
- color: #3d5d4e;
922
- background: var(--accent-soft);
923
- font-size: 12px;
924
- line-height: 1.5;
925
- }
926
-
927
- .notice.warning {
928
- border-color: var(--warning);
929
- color: #785326;
930
- background: #fff0dc;
931
- }
932
-
933
- .notice > .button {
934
- margin-left: 12px;
935
- vertical-align: middle;
936
- }
937
-
938
- .toast-region {
939
- position: fixed;
940
- z-index: 10;
941
- bottom: 20px;
942
- right: 22px;
943
- display: grid;
944
- gap: 8px;
945
- width: min(360px, calc(100vw - 44px));
946
- pointer-events: none;
947
- }
948
-
949
- .toast {
950
- padding: 13px 15px;
951
- border: 1px solid var(--line-strong);
952
- border-left: 3px solid var(--accent);
953
- color: var(--ink);
954
- background: var(--panel);
955
- box-shadow: var(--shadow);
956
- font-size: 12px;
957
- animation: toast-in 200ms ease both;
958
- }
959
-
960
- .toast.error {
961
- border-left-color: var(--danger);
962
- }
963
-
964
- @keyframes toast-in {
965
- from {
966
- opacity: 0;
967
- transform: translateX(8px);
968
- }
969
- to {
970
- opacity: 1;
971
- transform: translateX(0);
972
- }
973
- }
974
-
975
- @media (max-width: 1020px) {
976
- .suite-model-policy {
977
- grid-template-columns: repeat(2, minmax(0, 1fr));
978
- }
979
-
980
- .app-shell {
981
- grid-template-columns: 160px minmax(0, 1fr);
982
- }
983
-
984
- .topbar,
985
- .page-content {
986
- padding-right: 20px;
987
- padding-left: 20px;
988
- }
989
- .form-layout {
990
- grid-template-columns: 1fr;
991
- }
992
- }
993
-
994
- @media (max-width: 720px) {
995
- .suite-connection .panel-header {
996
- align-items: flex-start;
997
- flex-direction: column;
998
- }
999
-
1000
- .suite-connection-facts {
1001
- grid-template-columns: 1fr;
1002
- gap: 12px;
1003
- }
1004
-
1005
- .suite-section {
1006
- padding: 16px;
1007
- }
1008
-
1009
- .suite-section-footer {
1010
- align-items: flex-start;
1011
- flex-direction: column;
1012
- }
1013
-
1014
- .suite-model-mapping {
1015
- grid-template-columns: minmax(0, 1fr) auto;
1016
- gap: 12px 8px;
1017
- }
1018
-
1019
- .suite-model-mapping > .field {
1020
- grid-column: 1 / -1;
1021
- }
1022
-
1023
- .suite-model-mapping > .mini-button {
1024
- grid-column: 2;
1025
- margin-top: 0;
1026
- }
1027
-
1028
- .suite-mapping-arrow {
1029
- display: none;
1030
- }
1031
-
1032
- .suite-model-policy .checkbox-field {
1033
- padding-top: 0;
1034
- }
1035
-
1036
- .app-shell {
1037
- display: block;
1038
- }
1039
-
1040
- .rail {
1041
- position: static;
1042
- height: auto;
1043
- padding: 16px;
1044
- border-right: 0;
1045
- border-bottom: 1px solid var(--line);
1046
- }
1047
-
1048
- .brand {
1049
- padding: 0 0 12px;
1050
- }
1051
-
1052
- .rail-status {
1053
- position: absolute;
1054
- top: 23px;
1055
- right: 16px;
1056
- margin: 0;
1057
- border: 0;
1058
- }
1059
-
1060
- .nav {
1061
- grid-template-columns: repeat(2, minmax(0, 1fr));
1062
- }
1063
-
1064
- .nav-item {
1065
- min-height: 40px;
1066
- text-align: center;
1067
- }
1068
-
1069
- .rail-footer {
1070
- display: none;
1071
- }
1072
-
1073
- .topbar {
1074
- align-items: flex-start;
1075
- flex-direction: column;
1076
- gap: 12px;
1077
- padding: 18px 16px;
1078
- }
1079
-
1080
- .topbar-actions {
1081
- flex-wrap: wrap;
1082
- justify-content: flex-start;
1083
- }
1084
-
1085
- .page-content {
1086
- padding-inline: 16px;
1087
- }
1088
-
1089
- .suite-table,
1090
- .suite-table tbody,
1091
- .suite-table tr,
1092
- .suite-table th,
1093
- .suite-table td {
1094
- display: block;
1095
- }
1096
-
1097
- .suite-table thead {
1098
- display: none;
1099
- }
1100
-
1101
- .suite-table tbody tr {
1102
- padding: 12px 16px;
1103
- }
1104
-
1105
- .suite-table tbody tr + tr {
1106
- border-top: 1px solid var(--line);
1107
- }
1108
-
1109
- .suite-table tbody th,
1110
- .suite-table tbody td {
1111
- width: 100%;
1112
- padding: 4px 0;
1113
- border: 0;
1114
- }
1115
-
1116
- .suite-table tbody td {
1117
- display: grid;
1118
- grid-template-columns: 64px minmax(0, 1fr);
1119
- gap: 8px;
1120
- }
1121
-
1122
- .suite-table td::before {
1123
- content: attr(data-label);
1124
- color: var(--muted);
1125
- font: 12px/1.5 "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
1126
- }
1127
-
1128
- .config-section {
1129
- padding: 16px;
1130
- }
1131
-
1132
- .create-model-row {
1133
- grid-template-columns: minmax(0, 1fr) auto;
1134
- }
1135
-
1136
- .create-model-row > .field {
1137
- grid-column: 1 / -1;
1138
- }
1139
-
1140
- .create-model-row > button {
1141
- grid-column: 2;
1142
- margin-top: 0;
1143
- }
1144
-
1145
- .create-model-row + .create-model-row {
1146
- border-top: 1px solid var(--line);
1147
- padding-top: 16px;
1148
- }
1149
-
1150
- .form-grid {
1151
- grid-template-columns: 1fr;
1152
- }
1153
-
1154
- .field.full {
1155
- grid-column: auto;
1156
- }
1157
-
1158
- .mapping-row {
1159
- grid-template-columns: 1fr;
1160
- }
1161
-
1162
- .list-row {
1163
- grid-template-columns: minmax(0, 1fr);
1164
- gap: 8px;
1165
- }
1166
-
1167
- .button,
1168
- .mini-button {
1169
- min-height: 40px;
1170
- }
1171
-
1172
-
1173
- .notice > .button {
1174
- margin-top: 10px;
1175
- margin-left: 0;
1176
- }
1177
- }
1178
-
1179
- @media (prefers-reduced-motion: reduce) {
1180
- *,
1181
- *::before,
1182
- *::after {
1183
- animation-duration: 0.001ms !important;
1184
- animation-iteration-count: 1 !important;
1185
- scroll-behavior: auto !important;
1186
- transition-duration: 0.001ms !important;
1187
- }
1188
- }