whistle.mock-plugins 1.2.2-beta.23 → 1.2.2-beta.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1234 @@
1
+ /* ============================================================
2
+ Whistle Mock Plugin - Cyberpunk Theme Override
3
+ 覆盖 Ant Design 5 和项目自定义样式为赛博朋克风格
4
+ ============================================================ */
5
+
6
+ /* ── 全局背景与文字 ── */
7
+ body.cyber-theme, body.cyber-theme #root{
8
+ background-color: #050508 !important;
9
+ color: #e0e0e0 !important;
10
+ font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11
+ }
12
+
13
+ body.cyber-theme{
14
+ --primary-color: #00f0ff;
15
+ --primary-hover: #33f3ff;
16
+ --primary-active: #00c2cc;
17
+ --success-color: #00ff41;
18
+ --warning-color: #f0e800;
19
+ --error-color: #ff4d4f;
20
+ --font-color: #e0e0e0;
21
+ --text-secondary: #a0a0a0;
22
+ --text-light: #6b7280;
23
+ --border-color: #1a1a2e;
24
+ --border-radius: 6px;
25
+ --card-shadow: 0 0 0 1px rgba(0, 240, 255, 0.1);
26
+ --transition-time: 0.3s;
27
+ --ant-color-primary: #00f0ff;
28
+ --ant-color-primary-hover: #33f3ff;
29
+ --ant-color-primary-active: #00c2cc;
30
+ --ant-color-success: #00ff41;
31
+ --ant-color-warning: #f0e800;
32
+ --ant-color-error: #ff4d4f;
33
+ --ant-color-info: #00f0ff;
34
+ --ant-color-text: #e0e0e0;
35
+ --ant-color-text-secondary: #a0a0a0;
36
+ --ant-color-border: #1a1a2e;
37
+ --ant-color-bg-base: #0a0a12;
38
+ --ant-color-bg-container: #0f0f1a;
39
+ --ant-color-bg-elevated: #141420;
40
+ --ant-color-bg-layout: #0a0a12;
41
+ background-color: #050508 !important;
42
+ }
43
+
44
+ body.cyber-theme h1, body.cyber-theme h2, body.cyber-theme h3, body.cyber-theme h4, body.cyber-theme h5, body.cyber-theme h6{
45
+ color: #e0e0e0 !important;
46
+ }
47
+
48
+ body.cyber-theme a{
49
+ color: #00f0ff !important;
50
+ }
51
+ body.cyber-theme a:hover{
52
+ color: #33f3ff !important;
53
+ }
54
+
55
+ /* ── 滚动条 ── */
56
+ body.cyber-theme ::-webkit-scrollbar{
57
+ width: 6px;
58
+ height: 6px;
59
+ }
60
+ body.cyber-theme ::-webkit-scrollbar-track{
61
+ background: #0a0a12;
62
+ }
63
+ body.cyber-theme ::-webkit-scrollbar-thumb{
64
+ background: #1a1a2e;
65
+ border-radius: 3px;
66
+ }
67
+ body.cyber-theme ::-webkit-scrollbar-thumb:hover{
68
+ background: #00f0ff;
69
+ }
70
+
71
+ /* ── Ant Design Layout ── */
72
+ body.cyber-theme .ant-layout{
73
+ background: #0a0a12 !important;
74
+ }
75
+
76
+ body.cyber-theme .ant-layout-header{
77
+ background: #0f0f1a !important;
78
+ border-bottom: 1px solid #1a1a2e !important;
79
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
80
+ }
81
+
82
+ body.cyber-theme .ant-layout-sider{
83
+ background: #0f0f1a !important;
84
+ border-right: 1px solid #1a1a2e !important;
85
+ }
86
+
87
+ body.cyber-theme .ant-layout-content{
88
+ background: #0f0f1a !important;
89
+ }
90
+
91
+ /* ── Ant Menu ── */
92
+ body.cyber-theme .ant-menu{
93
+ background: #0f0f1a !important;
94
+ border-right: none !important;
95
+ }
96
+
97
+ body.cyber-theme .ant-menu-item{
98
+ color: #a0a0a0 !important;
99
+ border-radius: 4px !important;
100
+ margin: 4px 8px !important;
101
+ }
102
+
103
+ body.cyber-theme .ant-menu-item:hover{
104
+ color: #00f0ff !important;
105
+ background: rgba(0, 240, 255, 0.08) !important;
106
+ }
107
+
108
+ body.cyber-theme .ant-menu-item-selected{
109
+ color: #00f0ff !important;
110
+ background: rgba(0, 240, 255, 0.12) !important;
111
+ font-weight: 500;
112
+ }
113
+
114
+ body.cyber-theme .ant-menu-item-selected::after{
115
+ display: none !important;
116
+ }
117
+
118
+ body.cyber-theme .ant-menu-submenu-title{
119
+ color: #a0a0a0 !important;
120
+ }
121
+
122
+ body.cyber-theme .ant-menu-submenu-selected > .ant-menu-submenu-title{
123
+ color: #00f0ff !important;
124
+ }
125
+
126
+ body.cyber-theme .ant-menu-inline .ant-menu-item::after{
127
+ display: none !important;
128
+ }
129
+
130
+ /* ── Ant Card ── */
131
+ body.cyber-theme .ant-card{
132
+ background: #0f0f1a !important;
133
+ border: 1px solid #1a1a2e !important;
134
+ border-radius: 6px !important;
135
+ color: #e0e0e0 !important;
136
+ }
137
+
138
+ body.cyber-theme .ant-card:hover{
139
+ border-color: rgba(0, 240, 255, 0.3) !important;
140
+ box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.1), 0 4px 16px rgba(0, 0, 0, 0.4) !important;
141
+ }
142
+
143
+ body.cyber-theme .ant-card-head{
144
+ background: #0f0f1a !important;
145
+ border-bottom: 1px solid #1a1a2e !important;
146
+ color: #e0e0e0 !important;
147
+ }
148
+
149
+ body.cyber-theme .ant-card-body{
150
+ background: #0f0f1a !important;
151
+ color: #e0e0e0 !important;
152
+ }
153
+
154
+ body.cyber-theme .ant-card-meta-title{
155
+ color: #e0e0e0 !important;
156
+ }
157
+
158
+ body.cyber-theme .ant-card-meta-description{
159
+ color: #a0a0a0 !important;
160
+ }
161
+
162
+ body.cyber-theme .ant-card-actions{
163
+ background: #0a0a12 !important;
164
+ border-top: 1px solid #1a1a2e !important;
165
+ }
166
+
167
+ body.cyber-theme .ant-card-actions > li > span{
168
+ color: #a0a0a0 !important;
169
+ }
170
+
171
+ body.cyber-theme .ant-card-actions > li > span:hover{
172
+ color: #00f0ff !important;
173
+ }
174
+
175
+ /* ── Ant Button ── */
176
+ body.cyber-theme .ant-btn{
177
+ border-radius: 4px !important;
178
+ }
179
+
180
+ body.cyber-theme .ant-btn-primary{
181
+ background: #00f0ff !important;
182
+ border-color: #00f0ff !important;
183
+ color: #050508 !important;
184
+ font-weight: 500;
185
+ }
186
+
187
+ body.cyber-theme .ant-btn-primary:hover{
188
+ background: #33f3ff !important;
189
+ border-color: #33f3ff !important;
190
+ box-shadow: 0 0 12px rgba(0, 240, 255, 0.4) !important;
191
+ }
192
+
193
+ body.cyber-theme .ant-btn-default{
194
+ background: transparent !important;
195
+ border-color: #1a1a2e !important;
196
+ color: #e0e0e0 !important;
197
+ }
198
+
199
+ body.cyber-theme .ant-btn-default:hover{
200
+ border-color: #00f0ff !important;
201
+ color: #00f0ff !important;
202
+ }
203
+
204
+ body.cyber-theme .ant-btn-text{
205
+ color: #a0a0a0 !important;
206
+ }
207
+
208
+ body.cyber-theme .ant-btn-text:hover{
209
+ color: #00f0ff !important;
210
+ background: rgba(0, 240, 255, 0.08) !important;
211
+ }
212
+
213
+ body.cyber-theme .ant-btn-dangerous{
214
+ background: transparent !important;
215
+ border-color: #ff4d4f !important;
216
+ color: #ff4d4f !important;
217
+ }
218
+
219
+ body.cyber-theme .ant-btn-dangerous:hover{
220
+ background: rgba(255, 77, 79, 0.1) !important;
221
+ }
222
+
223
+ /* ── Ant Table ── */
224
+ body.cyber-theme .ant-table{
225
+ background: #0f0f1a !important;
226
+ color: #e0e0e0 !important;
227
+ }
228
+
229
+ body.cyber-theme .ant-table-thead > tr > th{
230
+ background: #141420 !important;
231
+ color: #a0a0a0 !important;
232
+ border-bottom: 1px solid #1a1a2e !important;
233
+ font-weight: 600;
234
+ }
235
+
236
+ body.cyber-theme .ant-table-tbody > tr > td{
237
+ background: #0f0f1a !important;
238
+ color: #e0e0e0 !important;
239
+ border-bottom: 1px solid #1a1a2e !important;
240
+ }
241
+
242
+ body.cyber-theme .ant-table-tbody > tr:hover > td{
243
+ background: rgba(0, 240, 255, 0.05) !important;
244
+ }
245
+
246
+ body.cyber-theme .ant-table-tbody > tr.ant-table-row-selected > td{
247
+ background: rgba(0, 240, 255, 0.08) !important;
248
+ }
249
+
250
+ body.cyber-theme .ant-table-cell{
251
+ background: #0f0f1a !important;
252
+ }
253
+
254
+ body.cyber-theme .ant-table-empty .ant-empty-description{
255
+ color: #6b7280 !important;
256
+ }
257
+
258
+ /* ── Ant Modal ── */
259
+ body.cyber-theme .ant-modal-content{
260
+ background: #0f0f1a !important;
261
+ border: 1px solid #1a1a2e !important;
262
+ box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.1), 0 16px 48px rgba(0, 0, 0, 0.6) !important;
263
+ }
264
+
265
+ body.cyber-theme .ant-modal-header{
266
+ background: #0f0f1a !important;
267
+ border-bottom: 1px solid #1a1a2e !important;
268
+ }
269
+
270
+ body.cyber-theme .ant-modal-title{
271
+ color: #e0e0e0 !important;
272
+ }
273
+
274
+ body.cyber-theme .ant-modal-close-x{
275
+ color: #a0a0a0 !important;
276
+ }
277
+
278
+ body.cyber-theme .ant-modal-close-x:hover{
279
+ color: #00f0ff !important;
280
+ }
281
+
282
+ body.cyber-theme .ant-modal-footer{
283
+ border-top: 1px solid #1a1a2e !important;
284
+ }
285
+
286
+ /* ── Ant Form ── */
287
+ body.cyber-theme .ant-form-item-label > label{
288
+ color: #a0a0a0 !important;
289
+ }
290
+
291
+ body.cyber-theme .ant-input{
292
+ background: #0a0a12 !important;
293
+ border-color: #1a1a2e !important;
294
+ color: #e0e0e0 !important;
295
+ }
296
+
297
+ body.cyber-theme .ant-input:hover{
298
+ border-color: #00f0ff !important;
299
+ }
300
+
301
+ body.cyber-theme .ant-input:focus{
302
+ border-color: #00f0ff !important;
303
+ box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.15) !important;
304
+ }
305
+
306
+ body.cyber-theme .ant-input::placeholder{
307
+ color: #4a4a5a !important;
308
+ }
309
+
310
+ body.cyber-theme .ant-input-affix-wrapper{
311
+ background: #0a0a12 !important;
312
+ border-color: #1a1a2e !important;
313
+ }
314
+
315
+ body.cyber-theme .ant-input-affix-wrapper:hover{
316
+ border-color: #00f0ff !important;
317
+ }
318
+
319
+ body.cyber-theme .ant-input-affix-wrapper-focused{
320
+ border-color: #00f0ff !important;
321
+ box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.15) !important;
322
+ }
323
+
324
+ body.cyber-theme .ant-input-textarea{
325
+ background: #0a0a12 !important;
326
+ border-color: #1a1a2e !important;
327
+ color: #e0e0e0 !important;
328
+ }
329
+
330
+ /* ── Ant Select ── */
331
+ body.cyber-theme .ant-select-selector{
332
+ background: #0a0a12 !important;
333
+ border-color: #1a1a2e !important;
334
+ color: #e0e0e0 !important;
335
+ }
336
+
337
+ body.cyber-theme .ant-select:hover .ant-select-selector{
338
+ border-color: #00f0ff !important;
339
+ }
340
+
341
+ body.cyber-theme .ant-select-focused .ant-select-selector{
342
+ border-color: #00f0ff !important;
343
+ box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.15) !important;
344
+ }
345
+
346
+ body.cyber-theme .ant-select-dropdown{
347
+ background: #0f0f1a !important;
348
+ border: 1px solid #1a1a2e !important;
349
+ }
350
+
351
+ body.cyber-theme .ant-select-item{
352
+ color: #e0e0e0 !important;
353
+ }
354
+
355
+ body.cyber-theme .ant-select-item-option-active{
356
+ background: rgba(0, 240, 255, 0.08) !important;
357
+ }
358
+
359
+ body.cyber-theme .ant-select-item-option-selected{
360
+ background: rgba(0, 240, 255, 0.12) !important;
361
+ color: #00f0ff !important;
362
+ font-weight: 500;
363
+ }
364
+
365
+ /* ── Ant Switch ── */
366
+ body.cyber-theme .ant-switch{
367
+ background: #2a2a3e !important;
368
+ }
369
+
370
+ body.cyber-theme .ant-switch-checked{
371
+ background: #00f0ff !important;
372
+ }
373
+
374
+ body.cyber-theme .ant-switch-checked .ant-switch-inner{
375
+ color: #050508 !important;
376
+ }
377
+
378
+ /* ── Ant Tag ── */
379
+ body.cyber-theme .ant-tag{
380
+ background: rgba(0, 240, 255, 0.08) !important;
381
+ border-color: rgba(0, 240, 255, 0.2) !important;
382
+ color: #00f0ff !important;
383
+ }
384
+
385
+ body.cyber-theme .ant-tag-green{
386
+ background: rgba(0, 255, 65, 0.08) !important;
387
+ border-color: rgba(0, 255, 65, 0.2) !important;
388
+ color: #00ff41 !important;
389
+ }
390
+
391
+ body.cyber-theme .ant-tag-red{
392
+ background: rgba(255, 77, 79, 0.08) !important;
393
+ border-color: rgba(255, 77, 79, 0.2) !important;
394
+ color: #ff4d4f !important;
395
+ }
396
+
397
+ body.cyber-theme .ant-tag-orange{
398
+ background: rgba(240, 232, 0, 0.08) !important;
399
+ border-color: rgba(240, 232, 0, 0.2) !important;
400
+ color: #f0e800 !important;
401
+ }
402
+
403
+ /* ── Ant Badge ── */
404
+ body.cyber-theme .ant-badge-status-dot{
405
+ box-shadow: 0 0 4px currentColor;
406
+ }
407
+
408
+ /* ── Ant Pagination ── */
409
+ body.cyber-theme .ant-pagination-item{
410
+ background: #0a0a12 !important;
411
+ border-color: #1a1a2e !important;
412
+ }
413
+
414
+ body.cyber-theme .ant-pagination-item a{
415
+ color: #a0a0a0 !important;
416
+ }
417
+
418
+ body.cyber-theme .ant-pagination-item:hover{
419
+ border-color: #00f0ff !important;
420
+ }
421
+
422
+ body.cyber-theme .ant-pagination-item:hover a{
423
+ color: #00f0ff !important;
424
+ }
425
+
426
+ body.cyber-theme .ant-pagination-item-active{
427
+ background: #00f0ff !important;
428
+ border-color: #00f0ff !important;
429
+ }
430
+
431
+ body.cyber-theme .ant-pagination-item-active a{
432
+ color: #050508 !important;
433
+ }
434
+
435
+ body.cyber-theme .ant-pagination-prev .ant-pagination-item-link, body.cyber-theme .ant-pagination-next .ant-pagination-item-link{
436
+ background: #0a0a12 !important;
437
+ border-color: #1a1a2e !important;
438
+ color: #a0a0a0 !important;
439
+ }
440
+
441
+ body.cyber-theme .ant-pagination-prev:hover .ant-pagination-item-link, body.cyber-theme .ant-pagination-next:hover .ant-pagination-item-link{
442
+ border-color: #00f0ff !important;
443
+ color: #00f0ff !important;
444
+ }
445
+
446
+ body.cyber-theme .ant-pagination-disabled .ant-pagination-item-link{
447
+ color: #4a4a5a !important;
448
+ }
449
+
450
+ /* ── Ant Breadcrumb ── */
451
+ body.cyber-theme .ant-breadcrumb{
452
+ color: #6b7280 !important;
453
+ }
454
+
455
+ body.cyber-theme .ant-breadcrumb a{
456
+ color: #a0a0a0 !important;
457
+ }
458
+
459
+ body.cyber-theme .ant-breadcrumb a:hover{
460
+ color: #00f0ff !important;
461
+ }
462
+
463
+ body.cyber-theme .ant-breadcrumb-separator{
464
+ color: #4a4a5a !important;
465
+ }
466
+
467
+ body.cyber-theme .ant-breadcrumb li:last-child{
468
+ color: #e0e0e0 !important;
469
+ }
470
+
471
+ /* ── Ant Popover / Tooltip ── */
472
+ body.cyber-theme .ant-popover-inner{
473
+ background: #0f0f1a !important;
474
+ border: 1px solid #1a1a2e !important;
475
+ }
476
+
477
+ body.cyber-theme .ant-popover-title{
478
+ color: #e0e0e0 !important;
479
+ border-bottom: 1px solid #1a1a2e !important;
480
+ }
481
+
482
+ body.cyber-theme .ant-popover-inner-content{
483
+ color: #a0a0a0 !important;
484
+ }
485
+
486
+ body.cyber-theme .ant-tooltip-inner{
487
+ background: #141420 !important;
488
+ border: 1px solid #1a1a2e !important;
489
+ color: #e0e0e0 !important;
490
+ }
491
+
492
+ /* ── Ant Drawer ── */
493
+ body.cyber-theme .ant-drawer-content{
494
+ background: #0f0f1a !important;
495
+ border-left: 1px solid #1a1a2e !important;
496
+ }
497
+
498
+ body.cyber-theme .ant-drawer-header{
499
+ background: #0f0f1a !important;
500
+ border-bottom: 1px solid #1a1a2e !important;
501
+ }
502
+
503
+ body.cyber-theme .ant-drawer-title{
504
+ color: #e0e0e0 !important;
505
+ }
506
+
507
+ body.cyber-theme .ant-drawer-body{
508
+ background: #0f0f1a !important;
509
+ color: #e0e0e0 !important;
510
+ }
511
+
512
+ body.cyber-theme .ant-drawer-close{
513
+ color: #a0a0a0 !important;
514
+ }
515
+
516
+ body.cyber-theme .ant-drawer-close:hover{
517
+ color: #00f0ff !important;
518
+ }
519
+
520
+ /* ── Ant Alert ── */
521
+ body.cyber-theme .ant-alert{
522
+ background: #0a0a12 !important;
523
+ border: 1px solid #1a1a2e !important;
524
+ }
525
+
526
+ body.cyber-theme .ant-alert-info{
527
+ background: rgba(0, 240, 255, 0.06) !important;
528
+ border-color: rgba(0, 240, 255, 0.2) !important;
529
+ }
530
+
531
+ body.cyber-theme .ant-alert-success{
532
+ background: rgba(0, 255, 65, 0.06) !important;
533
+ border-color: rgba(0, 255, 65, 0.2) !important;
534
+ }
535
+
536
+ body.cyber-theme .ant-alert-warning{
537
+ background: rgba(240, 232, 0, 0.06) !important;
538
+ border-color: rgba(240, 232, 0, 0.2) !important;
539
+ }
540
+
541
+ body.cyber-theme .ant-alert-error{
542
+ background: rgba(255, 77, 79, 0.06) !important;
543
+ border-color: rgba(255, 77, 79, 0.2) !important;
544
+ }
545
+
546
+ body.cyber-theme .ant-alert-message{
547
+ color: #e0e0e0 !important;
548
+ }
549
+
550
+ body.cyber-theme .ant-alert-description{
551
+ color: #a0a0a0 !important;
552
+ }
553
+
554
+ /* ── Ant Radio / Checkbox ── */
555
+ body.cyber-theme .ant-radio-wrapper{
556
+ color: #e0e0e0 !important;
557
+ }
558
+
559
+ body.cyber-theme .ant-radio-checked .ant-radio-inner{
560
+ border-color: #00f0ff !important;
561
+ background: #00f0ff !important;
562
+ }
563
+
564
+ body.cyber-theme .ant-radio-checked .ant-radio-inner::after{
565
+ background: #050508 !important;
566
+ }
567
+
568
+ body.cyber-theme .ant-checkbox-wrapper{
569
+ color: #e0e0e0 !important;
570
+ }
571
+
572
+ body.cyber-theme .ant-checkbox-checked .ant-checkbox-inner{
573
+ background: #00f0ff !important;
574
+ border-color: #00f0ff !important;
575
+ }
576
+
577
+ body.cyber-theme .ant-checkbox-checked .ant-checkbox-inner::after{
578
+ border-color: #050508 !important;
579
+ }
580
+
581
+ /* ── Ant Divider ── */
582
+ body.cyber-theme .ant-divider{
583
+ border-color: #1a1a2e !important;
584
+ }
585
+
586
+ body.cyber-theme .ant-divider-horizontal.ant-divider-with-text{
587
+ color: #a0a0a0 !important;
588
+ border-color: #1a1a2e !important;
589
+ }
590
+
591
+ /* ── Ant Dropdown / Menu ── */
592
+ body.cyber-theme .ant-dropdown-menu{
593
+ background: #0f0f1a !important;
594
+ border: 1px solid #1a1a2e !important;
595
+ }
596
+
597
+ body.cyber-theme .ant-dropdown-menu-item{
598
+ color: #e0e0e0 !important;
599
+ }
600
+
601
+ body.cyber-theme .ant-dropdown-menu-item:hover{
602
+ background: rgba(0, 240, 255, 0.08) !important;
603
+ color: #00f0ff !important;
604
+ }
605
+
606
+ /* ── Ant Steps ── */
607
+ body.cyber-theme .ant-steps-item-title{
608
+ color: #a0a0a0 !important;
609
+ }
610
+
611
+ body.cyber-theme .ant-steps-item-description{
612
+ color: #6b7280 !important;
613
+ }
614
+
615
+ body.cyber-theme .ant-steps-item-finish .ant-steps-item-icon{
616
+ background: rgba(0, 240, 255, 0.1) !important;
617
+ border-color: #00f0ff !important;
618
+ }
619
+
620
+ body.cyber-theme .ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon{
621
+ color: #00f0ff !important;
622
+ }
623
+
624
+ body.cyber-theme .ant-steps-item-process .ant-steps-item-icon{
625
+ background: #00f0ff !important;
626
+ border-color: #00f0ff !important;
627
+ }
628
+
629
+ body.cyber-theme .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon{
630
+ color: #050508 !important;
631
+ }
632
+
633
+ /* ── Ant Tabs ── */
634
+ body.cyber-theme .ant-tabs-tab{
635
+ color: #a0a0a0 !important;
636
+ }
637
+
638
+ body.cyber-theme .ant-tabs-tab:hover{
639
+ color: #00f0ff !important;
640
+ }
641
+
642
+ body.cyber-theme .ant-tabs-tab-active .ant-tabs-tab-btn{
643
+ color: #00f0ff !important;
644
+ }
645
+
646
+ body.cyber-theme .ant-tabs-ink-bar{
647
+ background: #00f0ff !important;
648
+ }
649
+
650
+ body.cyber-theme .ant-tabs-content{
651
+ color: #e0e0e0 !important;
652
+ }
653
+
654
+ /* ── Ant Collapse ── */
655
+ body.cyber-theme .ant-collapse{
656
+ background: #0f0f1a !important;
657
+ border-color: #1a1a2e !important;
658
+ }
659
+
660
+ body.cyber-theme .ant-collapse > .ant-collapse-item{
661
+ border-bottom: 1px solid #1a1a2e !important;
662
+ }
663
+
664
+ body.cyber-theme .ant-collapse-header{
665
+ color: #e0e0e0 !important;
666
+ }
667
+
668
+ body.cyber-theme .ant-collapse-content{
669
+ background: #0a0a12 !important;
670
+ border-top: 1px solid #1a1a2e !important;
671
+ color: #a0a0a0 !important;
672
+ }
673
+
674
+ /* ── Ant Descriptions ── */
675
+ body.cyber-theme .ant-descriptions-item-label{
676
+ background: #141420 !important;
677
+ color: #a0a0a0 !important;
678
+ }
679
+
680
+ body.cyber-theme .ant-descriptions-item-content{
681
+ background: #0f0f1a !important;
682
+ color: #e0e0e0 !important;
683
+ }
684
+
685
+ body.cyber-theme .ant-descriptions-bordered .ant-descriptions-item-label, body.cyber-theme .ant-descriptions-bordered .ant-descriptions-item-content{
686
+ border-color: #1a1a2e !important;
687
+ }
688
+
689
+ /* ── Ant List ── */
690
+ body.cyber-theme .ant-list{
691
+ background: #0f0f1a !important;
692
+ color: #e0e0e0 !important;
693
+ }
694
+
695
+ body.cyber-theme .ant-list-item{
696
+ border-bottom: 1px solid #1a1a2e !important;
697
+ }
698
+
699
+ body.cyber-theme .ant-list-empty-text{
700
+ color: #6b7280 !important;
701
+ }
702
+
703
+ /* ── Ant Statistic ── */
704
+ body.cyber-theme .ant-statistic-title{
705
+ color: #a0a0a0 !important;
706
+ }
707
+
708
+ body.cyber-theme .ant-statistic-content{
709
+ color: #e0e0e0 !important;
710
+ }
711
+
712
+ body.cyber-theme .ant-statistic-content-value{
713
+ color: #00f0ff !important;
714
+ }
715
+
716
+ /* ── Ant Empty ── */
717
+ body.cyber-theme .ant-empty-description{
718
+ color: #6b7280 !important;
719
+ }
720
+
721
+ /* ── Ant Spin ── */
722
+ body.cyber-theme .ant-spin-dot-item{
723
+ background: #00f0ff !important;
724
+ }
725
+
726
+ /* ── Ant Message ── */
727
+ body.cyber-theme .ant-message-notice-content{
728
+ background: #0f0f1a !important;
729
+ border: 1px solid #1a1a2e !important;
730
+ color: #e0e0e0 !important;
731
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
732
+ }
733
+
734
+ /* ── Ant Skeleton ── */
735
+ body.cyber-theme .ant-skeleton-title, body.cyber-theme .ant-skeleton-paragraph > li{
736
+ background: #1a1a2e !important;
737
+ }
738
+
739
+ body.cyber-theme .ant-skeleton-button{
740
+ background: #1a1a2e !important;
741
+ }
742
+
743
+ body.cyber-theme .ant-skeleton-input{
744
+ background: #1a1a2e !important;
745
+ }
746
+
747
+ /* ── 赛博朋克特殊效果 ── */
748
+
749
+ /* 网格背景 */
750
+ body.cyber-theme .cyber-grid-bg{
751
+ background-color: #050508;
752
+ background-image:
753
+ linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
754
+ linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px);
755
+ background-size: 40px 40px;
756
+ }
757
+
758
+ /* 发光文字 */
759
+ body.cyber-theme .text-glow-cyan{
760
+ text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
761
+ }
762
+
763
+ /* 顶部装饰线 */
764
+ body.cyber-theme .cyber-top-line{
765
+ position: relative;
766
+ }
767
+ body.cyber-theme .cyber-top-line::before{
768
+ content: '';
769
+ position: absolute;
770
+ top: 0;
771
+ left: 20px;
772
+ width: 40px;
773
+ height: 2px;
774
+ background: #00f0ff;
775
+ }
776
+
777
+ /* 霓虹边框 */
778
+ body.cyber-theme .cyber-border{
779
+ border: 1px solid rgba(0, 240, 255, 0.2);
780
+ box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.05);
781
+ }
782
+
783
+ /* ── 项目自定义样式覆盖 ── */
784
+
785
+ /* mock-data.css 覆盖 */
786
+ body.cyber-theme .mock-data-container{
787
+ background: #0f0f1a !important;
788
+ border: 1px solid #1a1a2e !important;
789
+ box-shadow: none !important;
790
+ }
791
+
792
+ body.cyber-theme .feature-card{
793
+ background: #0f0f1a !important;
794
+ border: 1px solid #1a1a2e !important;
795
+ box-shadow: none !important;
796
+ }
797
+
798
+ body.cyber-theme .feature-card:hover{
799
+ border-color: rgba(0, 240, 255, 0.3) !important;
800
+ box-shadow: 0 0 12px rgba(0, 240, 255, 0.1) !important;
801
+ }
802
+
803
+ body.cyber-theme .feature-card::before{
804
+ background: linear-gradient(135deg, rgba(0, 240, 255, 0.03), rgba(0, 240, 255, 0.06)) !important;
805
+ }
806
+
807
+ body.cyber-theme .feature-card .ant-card-actions{
808
+ background: #0a0a12 !important;
809
+ border-top: 1px solid #1a1a2e !important;
810
+ }
811
+
812
+ body.cyber-theme .feature-name h4{
813
+ color: #00f0ff !important;
814
+ }
815
+
816
+ body.cyber-theme .status-tag.active{
817
+ background: rgba(0, 255, 65, 0.1) !important;
818
+ border-color: rgba(0, 255, 65, 0.3) !important;
819
+ color: #00ff41 !important;
820
+ }
821
+
822
+ body.cyber-theme .status-tag.inactive{
823
+ background: rgba(255, 77, 79, 0.1) !important;
824
+ border-color: rgba(255, 77, 79, 0.3) !important;
825
+ color: #ff4d4f !important;
826
+ }
827
+
828
+ body.cyber-theme .feature-description{
829
+ color: #a0a0a0 !important;
830
+ }
831
+
832
+ body.cyber-theme .feature-stat{
833
+ color: #6b7280 !important;
834
+ }
835
+
836
+ body.cyber-theme .page-title{
837
+ color: #e0e0e0 !important;
838
+ }
839
+
840
+ body.cyber-theme .page-description{
841
+ color: #a0a0a0 !important;
842
+ }
843
+
844
+ body.cyber-theme .control-label{
845
+ color: #a0a0a0 !important;
846
+ }
847
+
848
+ body.cyber-theme .stats-number{
849
+ color: #00f0ff !important;
850
+ }
851
+
852
+ body.cyber-theme .stats-label{
853
+ color: #6b7280 !important;
854
+ }
855
+
856
+ body.cyber-theme .empty-data{
857
+ background: #0a0a12 !important;
858
+ color: #6b7280 !important;
859
+ }
860
+
861
+ body.cyber-theme .empty-icon{
862
+ color: #2a2a3e !important;
863
+ }
864
+
865
+ /* interface-management.css 覆盖 */
866
+ body.cyber-theme .interface-management-container{
867
+ background: #0f0f1a !important;
868
+ }
869
+
870
+ body.cyber-theme .interface-control-panel, body.cyber-theme .interface-header-card, body.cyber-theme .filter-card, body.cyber-theme .list-header-card, body.cyber-theme .list-container-card{
871
+ background: #0f0f1a !important;
872
+ border: 1px solid #1a1a2e !important;
873
+ box-shadow: none !important;
874
+ }
875
+
876
+ body.cyber-theme .control-panel-header{
877
+ border-bottom: 1px solid #1a1a2e !important;
878
+ }
879
+
880
+ body.cyber-theme .feature-selector{
881
+ background: #0a0a12 !important;
882
+ border: 1px solid #1a1a2e !important;
883
+ }
884
+
885
+ body.cyber-theme .feature-selector span{
886
+ color: #a0a0a0 !important;
887
+ }
888
+
889
+ body.cyber-theme .interface-table th{
890
+ background: #141420 !important;
891
+ color: #a0a0a0 !important;
892
+ }
893
+
894
+ body.cyber-theme .interface-table td{
895
+ color: #e0e0e0 !important;
896
+ }
897
+
898
+ body.cyber-theme .url-pattern-container{
899
+ background: #0a0a12 !important;
900
+ border: 1px solid #1a1a2e !important;
901
+ }
902
+
903
+ body.cyber-theme .url-pattern{
904
+ background: #0a0a12 !important;
905
+ color: #00f0ff !important;
906
+ }
907
+
908
+ body.cyber-theme .interface-card{
909
+ background: #0f0f1a !important;
910
+ border: 1px solid #1a1a2e !important;
911
+ }
912
+
913
+ body.cyber-theme .interface-card.inactive{
914
+ background: #0a0a12 !important;
915
+ border-color: #1a1a2e !important;
916
+ opacity: 0.6;
917
+ }
918
+
919
+ body.cyber-theme .interface-card-title{
920
+ color: #e0e0e0 !important;
921
+ }
922
+
923
+ body.cyber-theme .info-label{
924
+ color: #6b7280 !important;
925
+ }
926
+
927
+ body.cyber-theme .status-success{
928
+ background: rgba(0, 255, 65, 0.1) !important;
929
+ border-color: rgba(0, 255, 65, 0.3) !important;
930
+ color: #00ff41 !important;
931
+ }
932
+
933
+ body.cyber-theme .status-warning{
934
+ background: rgba(240, 232, 0, 0.1) !important;
935
+ border-color: rgba(240, 232, 0, 0.3) !important;
936
+ color: #f0e800 !important;
937
+ }
938
+
939
+ body.cyber-theme .status-error{
940
+ background: rgba(255, 77, 79, 0.1) !important;
941
+ border-color: rgba(255, 77, 79, 0.3) !important;
942
+ color: #ff4d4f !important;
943
+ }
944
+
945
+ body.cyber-theme .test-interface-container{
946
+ background: #0a0a12 !important;
947
+ border: 1px solid #1a1a2e !important;
948
+ }
949
+
950
+ body.cyber-theme .test-result{
951
+ background: #0f0f1a !important;
952
+ border: 1px solid #1a1a2e !important;
953
+ }
954
+
955
+ body.cyber-theme .result-item{
956
+ background: #0a0a12 !important;
957
+ }
958
+
959
+ body.cyber-theme .result-item:hover{
960
+ background: #141420 !important;
961
+ }
962
+
963
+ body.cyber-theme .result-item .label{
964
+ color: #a0a0a0 !important;
965
+ }
966
+
967
+ body.cyber-theme .result-item .value{
968
+ color: #e0e0e0 !important;
969
+ }
970
+
971
+ body.cyber-theme .result-body pre{
972
+ background: #0a0a12 !important;
973
+ border-color: #1a1a2e !important;
974
+ color: #e0e0e0 !important;
975
+ }
976
+
977
+ body.cyber-theme .result-error{
978
+ background: rgba(255, 77, 79, 0.08) !important;
979
+ color: #ff4d4f !important;
980
+ }
981
+
982
+ body.cyber-theme .breadcrumb .separator{
983
+ color: #4a4a5a !important;
984
+ }
985
+
986
+ body.cyber-theme .feature-details{
987
+ background: #0f0f1a !important;
988
+ border-left-color: #00f0ff !important;
989
+ box-shadow: none !important;
990
+ }
991
+
992
+ body.cyber-theme .feature-name h1{
993
+ color: #e0e0e0 !important;
994
+ }
995
+
996
+ body.cyber-theme .feature-description{
997
+ color: #a0a0a0 !important;
998
+ }
999
+
1000
+ body.cyber-theme .add-button, body.cyber-theme .add-interface-button, body.cyber-theme .create-interface-button{
1001
+ background: linear-gradient(to right, #00c2cc, #00f0ff) !important;
1002
+ color: #050508 !important;
1003
+ box-shadow: 0 2px 8px rgba(0, 240, 255, 0.3) !important;
1004
+ }
1005
+
1006
+ body.cyber-theme .add-button:hover, body.cyber-theme .add-interface-button:hover, body.cyber-theme .create-interface-button:hover{
1007
+ background: linear-gradient(to right, #00f0ff, #33f3ff) !important;
1008
+ box-shadow: 0 4px 16px rgba(0, 240, 255, 0.4) !important;
1009
+ }
1010
+
1011
+ body.cyber-theme .edit-button{
1012
+ background: rgba(0, 240, 255, 0.08) !important;
1013
+ color: #00f0ff !important;
1014
+ border-color: rgba(0, 240, 255, 0.2) !important;
1015
+ }
1016
+
1017
+ body.cyber-theme .delete-button{
1018
+ background: rgba(255, 77, 79, 0.08) !important;
1019
+ color: #ff4d4f !important;
1020
+ border-color: rgba(255, 77, 79, 0.2) !important;
1021
+ }
1022
+
1023
+ body.cyber-theme .test-button{
1024
+ background: rgba(0, 240, 255, 0.08) !important;
1025
+ color: #00f0ff !important;
1026
+ border-color: rgba(0, 240, 255, 0.2) !important;
1027
+ }
1028
+
1029
+ body.cyber-theme .interface-button{
1030
+ background: rgba(0, 240, 255, 0.08) !important;
1031
+ color: #00f0ff !important;
1032
+ }
1033
+
1034
+ body.cyber-theme .export-button{
1035
+ background: rgba(0, 255, 65, 0.08) !important;
1036
+ color: #00ff41 !important;
1037
+ }
1038
+
1039
+ body.cyber-theme .empty-data{
1040
+ background: #0a0a12 !important;
1041
+ }
1042
+
1043
+ body.cyber-theme .empty-icon{
1044
+ color: #2a2a3e !important;
1045
+ }
1046
+
1047
+ body.cyber-theme .empty-text{
1048
+ color: #6b7280 !important;
1049
+ }
1050
+
1051
+ body.cyber-theme .modal-overlay{
1052
+ background: rgba(0, 0, 0, 0.7) !important;
1053
+ }
1054
+
1055
+ body.cyber-theme .modal{
1056
+ background: #0f0f1a !important;
1057
+ border: 1px solid #1a1a2e !important;
1058
+ }
1059
+
1060
+ body.cyber-theme .modal-header{
1061
+ border-bottom: 1px solid #1a1a2e !important;
1062
+ }
1063
+
1064
+ body.cyber-theme .modal-header h2{
1065
+ color: #e0e0e0 !important;
1066
+ }
1067
+
1068
+ body.cyber-theme .close-button{
1069
+ color: #a0a0a0 !important;
1070
+ }
1071
+
1072
+ body.cyber-theme .close-button:hover{
1073
+ background: #1a1a2e !important;
1074
+ color: #e0e0e0 !important;
1075
+ }
1076
+
1077
+ body.cyber-theme .form-group label{
1078
+ color: #a0a0a0 !important;
1079
+ }
1080
+
1081
+ body.cyber-theme .checkbox-label, body.cyber-theme .radio-label{
1082
+ color: #e0e0e0 !important;
1083
+ }
1084
+
1085
+ body.cyber-theme .help-text{
1086
+ color: #6b7280 !important;
1087
+ }
1088
+
1089
+ body.cyber-theme .format-button{
1090
+ background: rgba(0, 240, 255, 0.08) !important;
1091
+ color: #00f0ff !important;
1092
+ }
1093
+
1094
+ body.cyber-theme .loading{
1095
+ color: #6b7280 !important;
1096
+ }
1097
+
1098
+ body.cyber-theme .error-container{
1099
+ color: #6b7280 !important;
1100
+ }
1101
+
1102
+ body.cyber-theme .back-button{
1103
+ background: #00f0ff !important;
1104
+ color: #050508 !important;
1105
+ }
1106
+
1107
+ /* pagination */
1108
+ body.cyber-theme .pagination-wrapper{
1109
+ border-top: 1px solid #1a1a2e !important;
1110
+ }
1111
+
1112
+ /* app-layout.css 覆盖 */
1113
+ body.cyber-theme .app-header{
1114
+ background: #0f0f1a !important;
1115
+ border-bottom: 1px solid #1a1a2e !important;
1116
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
1117
+ }
1118
+
1119
+ body.cyber-theme .logo-icon{
1120
+ color: #00f0ff !important;
1121
+ }
1122
+
1123
+ body.cyber-theme .logo-icon-secondary{
1124
+ color: #00ff41 !important;
1125
+ background: #0f0f1a !important;
1126
+ box-shadow: 0 0 4px rgba(0, 240, 255, 0.3) !important;
1127
+ }
1128
+
1129
+ body.cyber-theme .logo-text{
1130
+ background: linear-gradient(135deg, #00f0ff, #00ff41) !important;
1131
+ -webkit-background-clip: text !important;
1132
+ -webkit-text-fill-color: transparent !important;
1133
+ }
1134
+
1135
+ body.cyber-theme .app-sider{
1136
+ background: #0f0f1a !important;
1137
+ border-right: 1px solid #1a1a2e !important;
1138
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
1139
+ }
1140
+
1141
+ body.cyber-theme .app-content-wrapper{
1142
+ background: #0a0a12 !important;
1143
+ }
1144
+
1145
+ body.cyber-theme .app-content{
1146
+ background: #0f0f1a !important;
1147
+ border: 1px solid #1a1a2e !important;
1148
+ }
1149
+
1150
+ body.cyber-theme .app-breadcrumb{
1151
+ color: #6b7280 !important;
1152
+ }
1153
+
1154
+ body.cyber-theme .version-button{
1155
+ color: #6b7280 !important;
1156
+ }
1157
+
1158
+ body.cyber-theme .version-button:hover{
1159
+ color: #00f0ff !important;
1160
+ background: rgba(0, 240, 255, 0.05) !important;
1161
+ }
1162
+
1163
+ /* settings.css 等通用覆盖 */
1164
+ body.cyber-theme .settings-container{
1165
+ background: #0f0f1a !important;
1166
+ }
1167
+
1168
+ /* ── App.css 覆盖 ── */
1169
+ body.cyber-theme .page-container{
1170
+ background-color: #0f0f1a !important;
1171
+ border: 1px solid #1a1a2e !important;
1172
+ box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.05) !important;
1173
+ color: #e0e0e0 !important;
1174
+ }
1175
+
1176
+ body.cyber-theme .page-title-bar{
1177
+ border-bottom: 1px solid #1a1a2e !important;
1178
+ }
1179
+
1180
+ body.cyber-theme .page-title{
1181
+ color: #e0e0e0 !important;
1182
+ }
1183
+
1184
+ body.cyber-theme .page-description{
1185
+ color: #a0a0a0 !important;
1186
+ }
1187
+
1188
+ body.cyber-theme .custom-card{
1189
+ background: #0f0f1a !important;
1190
+ border: 1px solid #1a1a2e !important;
1191
+ }
1192
+
1193
+ body.cyber-theme .custom-card:hover{
1194
+ box-shadow: 0 4px 16px rgba(0, 240, 255, 0.08) !important;
1195
+ border-color: rgba(0, 240, 255, 0.2) !important;
1196
+ }
1197
+
1198
+ body.cyber-theme .custom-table .ant-table-thead > tr > th{
1199
+ background: #141420 !important;
1200
+ color: #a0a0a0 !important;
1201
+ }
1202
+
1203
+ body.cyber-theme .custom-form-item-label{
1204
+ color: #e0e0e0 !important;
1205
+ }
1206
+
1207
+ body.cyber-theme .custom-form-item-hint{
1208
+ color: #6b7280 !important;
1209
+ }
1210
+
1211
+ body.cyber-theme .status-tag-success{
1212
+ background-color: rgba(0, 255, 65, 0.1) !important;
1213
+ border: 1px solid rgba(0, 255, 65, 0.3) !important;
1214
+ color: #00ff41 !important;
1215
+ }
1216
+
1217
+ body.cyber-theme .status-tag-warning{
1218
+ background-color: rgba(240, 232, 0, 0.1) !important;
1219
+ border: 1px solid rgba(240, 232, 0, 0.3) !important;
1220
+ color: #f0e800 !important;
1221
+ }
1222
+
1223
+ body.cyber-theme .status-tag-error{
1224
+ background-color: rgba(255, 77, 79, 0.1) !important;
1225
+ border: 1px solid rgba(255, 77, 79, 0.3) !important;
1226
+ color: #ff4d4f !important;
1227
+ }
1228
+
1229
+ /* ── 响应式保持 ── */
1230
+ @media (max-width: 768px){
1231
+ body.cyber-theme .app-sider{
1232
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5) !important;
1233
+ }
1234
+ }