@module-federation/devtools 2.4.0 → 2.5.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.
Files changed (46) hide show
  1. package/README.md +3 -0
  2. package/dist/es/App.js +17 -2
  3. package/dist/es/App_module.css +3 -3
  4. package/dist/es/component/LoadingTrace/index.js +944 -0
  5. package/dist/es/component/LoadingTrace/index.module.js +5 -0
  6. package/dist/es/component/LoadingTrace/index_module.css +876 -0
  7. package/dist/es/i18n/index.js +178 -0
  8. package/dist/es/utils/chrome/index.js +3 -4
  9. package/dist/es/utils/chrome/messages.js +7 -1
  10. package/dist/es/utils/chrome/observability-plugin.js +93 -0
  11. package/dist/es/utils/chrome/observability-shared.js +99 -0
  12. package/dist/es/utils/chrome/observability.js +208 -0
  13. package/dist/es/utils/chrome/override-remote.js +2 -42
  14. package/dist/es/utils/chrome/post-message-listener.js +14 -0
  15. package/dist/es/utils/chrome/snapshot-plugin.js +2 -36
  16. package/dist/es/utils/data/index.js +5 -25
  17. package/dist/es/vendor/basic-proxy-core.js +155 -0
  18. package/dist/es/worker/index.js +27 -8
  19. package/dist/lib/App.js +17 -2
  20. package/dist/lib/App_module.css +3 -3
  21. package/dist/lib/component/LoadingTrace/index.js +954 -0
  22. package/dist/lib/component/LoadingTrace/index.module.js +25 -0
  23. package/dist/lib/component/LoadingTrace/index_module.css +876 -0
  24. package/dist/lib/i18n/index.js +178 -0
  25. package/dist/lib/utils/chrome/index.js +3 -4
  26. package/dist/lib/utils/chrome/messages.js +11 -2
  27. package/dist/lib/utils/chrome/observability-plugin.js +86 -0
  28. package/dist/lib/utils/chrome/observability-shared.js +126 -0
  29. package/dist/lib/utils/chrome/observability.js +234 -0
  30. package/dist/lib/utils/chrome/override-remote.js +5 -52
  31. package/dist/lib/utils/chrome/post-message-listener.js +11 -0
  32. package/dist/lib/utils/chrome/snapshot-plugin.js +5 -46
  33. package/dist/lib/utils/data/index.js +6 -28
  34. package/dist/lib/vendor/basic-proxy-core.js +147 -0
  35. package/dist/lib/worker/index.js +27 -8
  36. package/dist/types/src/component/LoadingTrace/index.d.ts +6 -0
  37. package/dist/types/src/utils/chrome/messages.d.ts +3 -0
  38. package/dist/types/src/utils/chrome/observability-plugin.d.ts +1 -0
  39. package/dist/types/src/utils/chrome/observability-shared.d.ts +41 -0
  40. package/dist/types/src/utils/chrome/observability.d.ts +110 -0
  41. package/dist/types/src/utils/chrome/snapshot-plugin.d.ts +0 -3
  42. package/dist/types/src/utils/data/index.d.ts +0 -1
  43. package/package.json +4 -3
  44. package/dist/es/utils/data/snapshot.js +0 -82
  45. package/dist/lib/utils/data/snapshot.js +0 -107
  46. package/dist/types/src/utils/data/snapshot.d.ts +0 -3
@@ -0,0 +1,876 @@
1
+ .wrapper_6df98 {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 16px;
5
+ min-height: 0;
6
+ color: var(--color-text-1, #1f2937);
7
+ }
8
+
9
+ .wrapper_6df98 .arco-btn-primary {
10
+ border-color: #18181b;
11
+ background: #18181b;
12
+ color: #fff;
13
+ }
14
+
15
+ .wrapper_6df98 .arco-btn-primary:not(.arco-btn-disabled):hover {
16
+ border-color: #27272a;
17
+ background: #27272a;
18
+ color: #fff;
19
+ }
20
+
21
+ .wrapper_6df98 .arco-btn-primary:not(.arco-btn-disabled):active {
22
+ border-color: #09090b;
23
+ background: #09090b;
24
+ }
25
+
26
+ .wrapper_6df98 .arco-btn-secondary {
27
+ border-color: var(--color-border-2, rgba(203, 213, 225, 0.65));
28
+ background: var(--color-fill-2, rgba(15, 23, 42, 0.04));
29
+ color: var(--color-text-1, #18181b);
30
+ }
31
+
32
+ .wrapper_6df98 .arco-btn-secondary:not(.arco-btn-disabled):hover {
33
+ border-color: rgba(24, 24, 27, 0.28);
34
+ background: rgba(24, 24, 27, 0.08);
35
+ color: var(--color-text-1, #18181b);
36
+ }
37
+
38
+ .wrapper_6df98 .arco-switch-checked {
39
+ background-color: #18181b;
40
+ }
41
+
42
+ .wrapper_6df98 .arco-switch-checked:hover {
43
+ background-color: #27272a;
44
+ }
45
+
46
+ .wrapper_6df98 .arco-input-inner-wrapper-focus,
47
+ .wrapper_6df98 .arco-input-inner-wrapper:focus-within {
48
+ border-color: rgba(24, 24, 27, 0.45) !important;
49
+ box-shadow: 0 0 0 2px rgba(24, 24, 27, 0.08) !important;
50
+ }
51
+
52
+ .wrapper_6df98 .arco-tag,
53
+ .wrapper_6df98 .arco-tag-color-arcoblue {
54
+ border-color: rgba(24, 24, 27, 0.12);
55
+ background: rgba(24, 24, 27, 0.06);
56
+ color: var(--color-text-1, #18181b);
57
+ }
58
+
59
+ .toolbar_6df98,
60
+ .configGrid_6df98,
61
+ .stats_6df98,
62
+ .viewer_6df98 {
63
+ border: 1px solid var(--color-border-2, rgba(203, 213, 225, 0.5));
64
+ background: var(--color-bg-2, rgba(255, 255, 255, 0.92));
65
+ border-radius: 14px;
66
+ box-sizing: border-box;
67
+ }
68
+
69
+ .toolbar_6df98 {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: space-between;
73
+ gap: 16px;
74
+ padding: 16px;
75
+ flex-wrap: wrap;
76
+ }
77
+
78
+ .titleGroup_6df98 {
79
+ display: flex;
80
+ flex-direction: column;
81
+ gap: 4px;
82
+ }
83
+
84
+ .title_6df98 {
85
+ font-size: 16px;
86
+ font-weight: 600;
87
+ }
88
+
89
+ .subtitle_6df98 {
90
+ font-size: 12px;
91
+ color: var(--color-text-2, rgba(75, 85, 99, 0.82));
92
+ }
93
+
94
+ .actions_6df98 {
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: flex-end;
98
+ gap: 8px;
99
+ flex-wrap: wrap;
100
+ }
101
+
102
+ .configButton_6df98 {
103
+ border-color: var(--color-border-2, rgba(203, 213, 225, 0.65)) !important;
104
+ background: var(--color-fill-2, rgba(15, 23, 42, 0.04)) !important;
105
+ color: var(--color-text-1, #18181b) !important;
106
+ }
107
+
108
+ .configButton_6df98:hover {
109
+ border-color: rgba(24, 24, 27, 0.28) !important;
110
+ background: rgba(24, 24, 27, 0.08) !important;
111
+ color: var(--color-text-1, #18181b) !important;
112
+ }
113
+
114
+ .configButtonActive_6df98,
115
+ .configButtonActive_6df98:hover,
116
+ .primaryAction_6df98,
117
+ .primaryAction_6df98:hover {
118
+ border-color: #18181b !important;
119
+ background: #18181b !important;
120
+ color: #fff !important;
121
+ }
122
+
123
+ .configButtonActive_6df98:active,
124
+ .primaryAction_6df98:active {
125
+ border-color: #09090b !important;
126
+ background: #09090b !important;
127
+ color: #fff !important;
128
+ }
129
+
130
+ .primaryAction_6df98:disabled {
131
+ border-color: rgba(24, 24, 27, 0.14) !important;
132
+ background: rgba(24, 24, 27, 0.08) !important;
133
+ color: rgba(24, 24, 27, 0.36) !important;
134
+ }
135
+
136
+ .configGrid_6df98 {
137
+ display: flex;
138
+ align-items: center;
139
+ flex-wrap: wrap;
140
+ gap: 14px 24px;
141
+ padding: 16px;
142
+ overflow: visible;
143
+ }
144
+
145
+ .field_6df98 {
146
+ display: flex;
147
+ align-items: center;
148
+ gap: 6px;
149
+ min-width: 0;
150
+ font-size: 12px;
151
+ color: var(--color-text-2, rgba(75, 85, 99, 0.86));
152
+ }
153
+
154
+ .labelWithHelp_6df98 {
155
+ display: inline-flex;
156
+ align-items: center;
157
+ gap: 4px;
158
+ flex: 0 0 auto;
159
+ position: relative;
160
+ white-space: nowrap;
161
+ }
162
+
163
+ .labelText_6df98 {
164
+ color: var(--color-text-2, rgba(75, 85, 99, 0.86));
165
+ }
166
+
167
+ .helpIcon_6df98 {
168
+ flex: 0 0 auto;
169
+ display: inline-flex;
170
+ align-items: center;
171
+ color: var(--color-text-3, rgba(75, 85, 99, 0.62));
172
+ cursor: help;
173
+ }
174
+
175
+ .helpIcon_6df98:hover {
176
+ color: var(--color-text-1, #1f2937);
177
+ }
178
+
179
+ .helpIcon_6df98::after {
180
+ content: attr(data-tip);
181
+ position: absolute;
182
+ left: 0;
183
+ top: calc(100% + 6px);
184
+ z-index: 20;
185
+ width: 260px;
186
+ max-width: min(260px, 100vw - 48px);
187
+ box-sizing: border-box;
188
+ padding: 8px 10px;
189
+ border-radius: 6px;
190
+ background: rgba(15, 23, 42, 0.96);
191
+ box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
192
+ color: #fff;
193
+ font-size: 12px;
194
+ line-height: 1.5;
195
+ white-space: normal;
196
+ opacity: 0;
197
+ visibility: hidden;
198
+ pointer-events: none;
199
+ transform: translateY(4px);
200
+ transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
201
+ }
202
+
203
+ .helpIcon_6df98::before {
204
+ content: "";
205
+ position: absolute;
206
+ left: 6px;
207
+ top: calc(100% + 1px);
208
+ z-index: 21;
209
+ border-width: 0 5px 5px;
210
+ border-style: solid;
211
+ border-color: transparent transparent rgba(15, 23, 42, 0.96);
212
+ opacity: 0;
213
+ visibility: hidden;
214
+ pointer-events: none;
215
+ transform: translateY(4px);
216
+ transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
217
+ }
218
+
219
+ .helpIcon_6df98:hover::after,
220
+ .helpIcon_6df98:focus-visible::after,
221
+ .helpIcon_6df98:hover::before,
222
+ .helpIcon_6df98:focus-visible::before {
223
+ opacity: 1;
224
+ visibility: visible;
225
+ transform: translateY(0);
226
+ }
227
+
228
+ .labelColon_6df98 {
229
+ color: var(--color-text-2, rgba(75, 85, 99, 0.86));
230
+ }
231
+
232
+ .segmentedControl_6df98 {
233
+ display: inline-grid;
234
+ grid-auto-flow: column;
235
+ grid-auto-columns: max-content;
236
+ gap: 2px;
237
+ min-height: 32px;
238
+ padding: 2px;
239
+ border: 1px solid var(--color-border-2, rgba(203, 213, 225, 0.65));
240
+ border-radius: 6px;
241
+ background: var(--color-fill-2, rgba(15, 23, 42, 0.04));
242
+ box-sizing: border-box;
243
+ }
244
+
245
+ .segmentButton_6df98 {
246
+ min-width: 48px;
247
+ height: 26px;
248
+ padding: 0 10px;
249
+ border: 0;
250
+ border-radius: 4px;
251
+ background: transparent;
252
+ color: var(--color-text-2, rgba(75, 85, 99, 0.88));
253
+ font-size: 12px;
254
+ line-height: 26px;
255
+ cursor: pointer;
256
+ overflow: hidden;
257
+ text-overflow: ellipsis;
258
+ white-space: nowrap;
259
+ }
260
+
261
+ .segmentButton_6df98:hover {
262
+ background: rgba(24, 24, 27, 0.08);
263
+ color: var(--color-text-1, #1f2937);
264
+ }
265
+
266
+ .segmentButton_6df98:focus-visible {
267
+ outline: 2px solid rgba(24, 24, 27, 0.42);
268
+ outline-offset: 1px;
269
+ }
270
+
271
+ .segmentButtonActive_6df98,
272
+ .segmentButtonActive_6df98:hover {
273
+ background: #18181b;
274
+ color: #fff;
275
+ }
276
+
277
+ .stats_6df98 {
278
+ display: grid;
279
+ grid-template-columns: repeat(4, minmax(120px, 1fr));
280
+ gap: 12px;
281
+ padding: 14px 16px;
282
+ }
283
+
284
+ .stats_6df98 > div {
285
+ min-width: 0;
286
+ display: flex;
287
+ flex-direction: column;
288
+ gap: 2px;
289
+ }
290
+
291
+ .statValueWithHelp_6df98 {
292
+ display: inline-flex;
293
+ align-items: center;
294
+ gap: 5px;
295
+ min-width: 0;
296
+ overflow: visible;
297
+ }
298
+
299
+ .statValue_6df98 {
300
+ font-size: 18px;
301
+ font-weight: 600;
302
+ color: var(--color-text-1, #1f2937);
303
+ overflow: hidden;
304
+ text-overflow: ellipsis;
305
+ white-space: nowrap;
306
+ }
307
+
308
+ .statLabel_6df98 {
309
+ font-size: 11px;
310
+ color: var(--color-text-2, rgba(75, 85, 99, 0.78));
311
+ text-transform: uppercase;
312
+ letter-spacing: 0.04em;
313
+ }
314
+
315
+ .viewer_6df98 {
316
+ display: grid;
317
+ grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
318
+ min-height: 420px;
319
+ overflow: hidden;
320
+ }
321
+
322
+ .viewerEmpty_6df98 {
323
+ grid-template-columns: 1fr;
324
+ }
325
+
326
+ .reportList_6df98 {
327
+ border-right: 1px solid var(--color-border-2, rgba(203, 213, 225, 0.5));
328
+ overflow: auto;
329
+ min-height: 0;
330
+ }
331
+
332
+ .reportFilter_6df98 {
333
+ position: sticky;
334
+ top: 0;
335
+ z-index: 2;
336
+ padding: 12px;
337
+ border-bottom: 1px solid var(--color-border-1, rgba(203, 213, 225, 0.35));
338
+ background: var(--color-bg-2, rgba(255, 255, 255, 0.96));
339
+ }
340
+
341
+ .reportSearch_6df98 {
342
+ width: 100%;
343
+ }
344
+
345
+ .reportItem_6df98 {
346
+ width: 100%;
347
+ border: 0;
348
+ border-bottom: 1px solid var(--color-border-1, rgba(203, 213, 225, 0.35));
349
+ background: transparent;
350
+ color: inherit;
351
+ display: flex;
352
+ flex-direction: column;
353
+ align-items: flex-start;
354
+ gap: 4px;
355
+ padding: 12px;
356
+ cursor: pointer;
357
+ text-align: left;
358
+ }
359
+
360
+ .reportItem_6df98:hover,
361
+ .activeReport_6df98 {
362
+ background: rgba(24, 24, 27, 0.08);
363
+ }
364
+
365
+ .reportTitle_6df98 {
366
+ width: 100%;
367
+ font-size: 13px;
368
+ font-weight: 600;
369
+ overflow: hidden;
370
+ text-overflow: ellipsis;
371
+ white-space: nowrap;
372
+ }
373
+
374
+ .reportMeta_6df98 {
375
+ width: 100%;
376
+ font-size: 11px;
377
+ color: var(--color-text-2, rgba(75, 85, 99, 0.78));
378
+ overflow: hidden;
379
+ text-overflow: ellipsis;
380
+ white-space: nowrap;
381
+ }
382
+
383
+ .reportTagRow_6df98 {
384
+ width: 100%;
385
+ display: flex;
386
+ align-items: center;
387
+ gap: 6px;
388
+ min-width: 0;
389
+ }
390
+
391
+ .statusTag_6df98 {
392
+ flex: 0 0 auto;
393
+ display: inline-flex;
394
+ align-items: center;
395
+ height: 20px;
396
+ padding: 0 7px;
397
+ border: 1px solid rgba(24, 24, 27, 0.12);
398
+ border-radius: 999px;
399
+ background: rgba(24, 24, 27, 0.05);
400
+ color: var(--color-text-2, rgba(75, 85, 99, 0.9));
401
+ font-size: 11px;
402
+ font-weight: 600;
403
+ line-height: 18px;
404
+ text-transform: uppercase;
405
+ }
406
+
407
+ .statusTagsuccess_6df98 {
408
+ border-color: rgba(22, 163, 74, 0.36);
409
+ background: rgba(22, 163, 74, 0.12);
410
+ color: #15803d;
411
+ }
412
+
413
+ .statusTagfailed_6df98 {
414
+ border-color: rgba(220, 38, 38, 0.38);
415
+ background: rgba(220, 38, 38, 0.12);
416
+ color: #b91c1c;
417
+ }
418
+
419
+ .statusTagpending_6df98 {
420
+ border-color: rgba(217, 119, 6, 0.42);
421
+ background: rgba(245, 158, 11, 0.16);
422
+ color: #92400e;
423
+ }
424
+
425
+ .statusTagrecovered_6df98 {
426
+ border-color: rgba(234, 88, 12, 0.4);
427
+ background: rgba(249, 115, 22, 0.14);
428
+ color: #c2410c;
429
+ }
430
+
431
+ .timeline_6df98 {
432
+ min-width: 0;
433
+ overflow: auto;
434
+ padding: 16px;
435
+ }
436
+
437
+ .reportHeader_6df98 {
438
+ display: flex;
439
+ justify-content: space-between;
440
+ gap: 12px;
441
+ align-items: flex-start;
442
+ padding-bottom: 14px;
443
+ border-bottom: 1px solid var(--color-border-1, rgba(203, 213, 225, 0.35));
444
+ }
445
+
446
+ .reportHeading_6df98 {
447
+ display: block;
448
+ font-size: 15px;
449
+ font-weight: 600;
450
+ margin-bottom: 4px;
451
+ }
452
+
453
+ .traceId_6df98 {
454
+ display: block;
455
+ font-size: 11px;
456
+ color: var(--color-text-2, rgba(75, 85, 99, 0.78));
457
+ word-break: break-all;
458
+ }
459
+
460
+ .tags_6df98 {
461
+ display: flex;
462
+ justify-content: flex-end;
463
+ gap: 8px;
464
+ flex-wrap: wrap;
465
+ }
466
+
467
+ .limitedTag_6df98 {
468
+ position: relative;
469
+ flex: 0 0 auto;
470
+ display: inline-flex;
471
+ align-items: center;
472
+ gap: 4px;
473
+ height: 20px;
474
+ padding: 0 7px;
475
+ border: 1px solid rgba(24, 24, 27, 0.14);
476
+ border-radius: 999px;
477
+ background: rgba(24, 24, 27, 0.04);
478
+ color: var(--color-text-1, #18181b);
479
+ font-size: 11px;
480
+ font-weight: 600;
481
+ line-height: 18px;
482
+ white-space: nowrap;
483
+ overflow: visible;
484
+ }
485
+
486
+ .inlineHelpIcon_6df98 {
487
+ position: relative;
488
+ display: inline-flex;
489
+ align-items: center;
490
+ justify-content: center;
491
+ width: 14px;
492
+ height: 14px;
493
+ color: var(--color-text-3, rgba(75, 85, 99, 0.62));
494
+ cursor: help;
495
+ line-height: 1;
496
+ }
497
+
498
+ .inlineHelpIcon_6df98 svg {
499
+ display: block;
500
+ width: 13px;
501
+ height: 13px;
502
+ }
503
+
504
+ .inlineHelpIcon_6df98::after {
505
+ content: attr(data-tip);
506
+ position: absolute;
507
+ right: -8px;
508
+ top: calc(100% + 8px);
509
+ z-index: 20;
510
+ width: 280px;
511
+ max-width: min(280px, 100vw - 48px);
512
+ box-sizing: border-box;
513
+ padding: 8px 10px;
514
+ border-radius: 6px;
515
+ background: rgba(15, 23, 42, 0.96);
516
+ box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
517
+ color: #fff;
518
+ font-size: 12px;
519
+ line-height: 1.5;
520
+ white-space: normal;
521
+ opacity: 0;
522
+ visibility: hidden;
523
+ pointer-events: none;
524
+ transform: translateY(4px);
525
+ transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
526
+ }
527
+
528
+ .inlineHelpIcon_6df98::before {
529
+ content: "";
530
+ position: absolute;
531
+ right: 2px;
532
+ top: calc(100% + 3px);
533
+ z-index: 21;
534
+ border-width: 0 5px 5px;
535
+ border-style: solid;
536
+ border-color: transparent transparent rgba(15, 23, 42, 0.96);
537
+ opacity: 0;
538
+ visibility: hidden;
539
+ pointer-events: none;
540
+ transform: translateY(4px);
541
+ transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
542
+ }
543
+
544
+ .inlineHelpIcon_6df98:hover::after,
545
+ .inlineHelpIcon_6df98:focus-visible::after,
546
+ .inlineHelpIcon_6df98:hover::before,
547
+ .inlineHelpIcon_6df98:focus-visible::before {
548
+ opacity: 1;
549
+ visibility: visible;
550
+ transform: translateY(0);
551
+ }
552
+
553
+ .statHelpIcon_6df98::after {
554
+ right: auto;
555
+ left: -8px;
556
+ }
557
+
558
+ .statHelpIcon_6df98::before {
559
+ right: auto;
560
+ left: 2px;
561
+ }
562
+
563
+ .diagnosis_6df98 {
564
+ margin-top: 12px;
565
+ padding: 10px 12px;
566
+ border-radius: 10px;
567
+ background: rgba(24, 24, 27, 0.06);
568
+ color: var(--color-text-1, #1f2937);
569
+ font-size: 13px;
570
+ }
571
+
572
+ .currentLoad_6df98 {
573
+ margin-top: 12px;
574
+ padding: 12px;
575
+ border: 1px solid var(--color-border-2, rgba(203, 213, 225, 0.68));
576
+ border-radius: 10px;
577
+ background: rgba(255, 255, 255, 0.72);
578
+ }
579
+
580
+ .currentLoadHeader_6df98 {
581
+ display: flex;
582
+ align-items: center;
583
+ justify-content: space-between;
584
+ gap: 12px;
585
+ margin-bottom: 10px;
586
+ }
587
+
588
+ .currentLoadTitle_6df98 {
589
+ color: var(--color-text-1, #1f2937);
590
+ font-size: 13px;
591
+ font-weight: 700;
592
+ }
593
+
594
+ .currentLoadSummary_6df98 {
595
+ color: var(--color-text-2, rgba(75, 85, 99, 0.72));
596
+ font-size: 11px;
597
+ }
598
+
599
+ .currentLoadRows_6df98 {
600
+ display: grid;
601
+ grid-template-columns: repeat(2, minmax(0, 1fr));
602
+ gap: 8px 16px;
603
+ }
604
+
605
+ .currentLoadRow_6df98 {
606
+ display: grid;
607
+ grid-template-columns: 96px minmax(0, 1fr);
608
+ gap: 10px;
609
+ align-items: start;
610
+ min-width: 0;
611
+ }
612
+
613
+ .currentLoadLabel_6df98 {
614
+ color: var(--color-text-3, rgba(75, 85, 99, 0.62));
615
+ font-size: 11px;
616
+ line-height: 1.6;
617
+ }
618
+
619
+ .currentLoadValue_6df98 {
620
+ min-width: 0;
621
+ overflow-wrap: anywhere;
622
+ color: var(--color-text-1, #1f2937);
623
+ font-size: 12px;
624
+ font-weight: 600;
625
+ line-height: 1.6;
626
+ }
627
+
628
+ .loadedBefore_6df98 {
629
+ margin-top: 12px;
630
+ padding: 12px;
631
+ border: 1px solid var(--color-border-2, rgba(203, 213, 225, 0.68));
632
+ border-radius: 10px;
633
+ background: rgba(248, 250, 252, 0.72);
634
+ }
635
+
636
+ .loadedBeforeHeader_6df98 {
637
+ display: flex;
638
+ align-items: center;
639
+ justify-content: space-between;
640
+ gap: 12px;
641
+ margin-bottom: 10px;
642
+ }
643
+
644
+ .loadedBeforeTitle_6df98 {
645
+ color: var(--color-text-1, #1f2937);
646
+ font-size: 13px;
647
+ font-weight: 700;
648
+ }
649
+
650
+ .loadedBeforeSummary_6df98 {
651
+ color: var(--color-text-2, rgba(75, 85, 99, 0.72));
652
+ font-size: 11px;
653
+ }
654
+
655
+ .loadedBeforeTags_6df98 {
656
+ display: flex;
657
+ flex-wrap: wrap;
658
+ gap: 8px;
659
+ margin-bottom: 10px;
660
+ }
661
+
662
+ .loadedBeforeTag_6df98 {
663
+ display: inline-flex;
664
+ align-items: center;
665
+ min-height: 22px;
666
+ padding: 0 8px;
667
+ border-radius: 999px;
668
+ font-size: 11px;
669
+ font-weight: 600;
670
+ line-height: 20px;
671
+ }
672
+
673
+ .loadedBeforeTagSuccess_6df98 {
674
+ border: 1px solid rgba(34, 197, 94, 0.38);
675
+ background: rgba(34, 197, 94, 0.12);
676
+ color: #15803d;
677
+ }
678
+
679
+ .loadedBeforeTagNeutral_6df98 {
680
+ border: 1px solid rgba(100, 116, 139, 0.34);
681
+ background: rgba(100, 116, 139, 0.08);
682
+ color: #475569;
683
+ }
684
+
685
+ .loadedBeforeConsumers_6df98 {
686
+ display: flex;
687
+ flex-direction: column;
688
+ gap: 8px;
689
+ }
690
+
691
+ .loadedBeforeConsumer_6df98 {
692
+ display: flex;
693
+ flex-direction: column;
694
+ gap: 7px;
695
+ padding-top: 10px;
696
+ border-top: 1px solid rgba(203, 213, 225, 0.45);
697
+ }
698
+
699
+ .loadedBeforeRow_6df98 {
700
+ display: grid;
701
+ grid-template-columns: 96px minmax(0, 1fr);
702
+ gap: 10px;
703
+ align-items: start;
704
+ }
705
+
706
+ .loadedBeforeLabel_6df98 {
707
+ color: var(--color-text-3, rgba(75, 85, 99, 0.62));
708
+ font-size: 11px;
709
+ line-height: 1.6;
710
+ }
711
+
712
+ .loadedBeforeName_6df98,
713
+ .loadedBeforeMeta_6df98,
714
+ .loadedBeforeExposes_6df98 {
715
+ min-width: 0;
716
+ overflow-wrap: anywhere;
717
+ line-height: 1.6;
718
+ }
719
+
720
+ .loadedBeforeName_6df98 {
721
+ color: var(--color-text-1, #1f2937);
722
+ font-size: 12px;
723
+ font-weight: 650;
724
+ }
725
+
726
+ .loadedBeforeMeta_6df98 {
727
+ color: var(--color-text-2, rgba(75, 85, 99, 0.78));
728
+ font-size: 12px;
729
+ }
730
+
731
+ .loadedBeforeExposes_6df98 {
732
+ color: var(--color-text-2, rgba(75, 85, 99, 0.9));
733
+ font-size: 12px;
734
+ }
735
+
736
+ .eventList_6df98 {
737
+ display: flex;
738
+ flex-direction: column;
739
+ gap: 10px;
740
+ margin-top: 14px;
741
+ }
742
+
743
+ .eventItem_6df98 {
744
+ display: grid;
745
+ grid-template-columns: 76px minmax(0, 1fr);
746
+ gap: 12px;
747
+ padding: 10px 0;
748
+ border-bottom: 1px solid var(--color-border-1, rgba(203, 213, 225, 0.28));
749
+ }
750
+
751
+ .eventTime_6df98 {
752
+ font-size: 11px;
753
+ color: var(--color-text-2, rgba(75, 85, 99, 0.72));
754
+ padding-top: 2px;
755
+ }
756
+
757
+ .eventBody_6df98 {
758
+ min-width: 0;
759
+ display: flex;
760
+ flex-direction: column;
761
+ gap: 5px;
762
+ }
763
+
764
+ .eventMain_6df98 {
765
+ display: flex;
766
+ align-items: center;
767
+ gap: 8px;
768
+ flex-wrap: wrap;
769
+ }
770
+
771
+ .phase_6df98 {
772
+ font-size: 13px;
773
+ font-weight: 600;
774
+ }
775
+
776
+ .eventStatusTag_6df98 {
777
+ display: inline-flex;
778
+ align-items: center;
779
+ height: 20px;
780
+ padding: 0 7px;
781
+ border: 1px solid rgba(24, 24, 27, 0.12);
782
+ border-radius: 999px;
783
+ background: rgba(24, 24, 27, 0.05);
784
+ color: var(--color-text-2, rgba(75, 85, 99, 0.9));
785
+ font-size: 11px;
786
+ font-weight: 600;
787
+ line-height: 18px;
788
+ }
789
+
790
+ .eventStatusTagsuccess_6df98 {
791
+ border-color: rgba(22, 163, 74, 0.36);
792
+ background: rgba(22, 163, 74, 0.12);
793
+ color: #15803d;
794
+ }
795
+
796
+ .eventStatusTagfailed_6df98 {
797
+ border-color: rgba(220, 38, 38, 0.38);
798
+ background: rgba(220, 38, 38, 0.12);
799
+ color: #b91c1c;
800
+ }
801
+
802
+ .eventStatusTagpending_6df98 {
803
+ border-color: rgba(217, 119, 6, 0.42);
804
+ background: rgba(245, 158, 11, 0.16);
805
+ color: #92400e;
806
+ }
807
+
808
+ .eventStatusTagneutral_6df98 {
809
+ border-color: rgba(24, 24, 27, 0.12);
810
+ background: rgba(24, 24, 27, 0.05);
811
+ color: var(--color-text-2, rgba(75, 85, 99, 0.9));
812
+ }
813
+
814
+ .eventRecoveredTag_6df98 {
815
+ display: inline-flex;
816
+ align-items: center;
817
+ height: 20px;
818
+ padding: 0 7px;
819
+ border: 1px solid rgba(234, 88, 12, 0.32);
820
+ border-radius: 999px;
821
+ background: rgba(249, 115, 22, 0.12);
822
+ color: #c2410c;
823
+ font-size: 11px;
824
+ font-weight: 600;
825
+ line-height: 18px;
826
+ }
827
+
828
+ .duration_6df98,
829
+ .eventMeta_6df98 {
830
+ font-size: 12px;
831
+ color: var(--color-text-2, rgba(75, 85, 99, 0.76));
832
+ }
833
+
834
+ .eventMeta_6df98,
835
+ .error_6df98 {
836
+ overflow-wrap: anywhere;
837
+ }
838
+
839
+ .error_6df98 {
840
+ font-size: 12px;
841
+ color: var(--color-text-1, #18181b);
842
+ }
843
+
844
+ .emptyPanel_6df98 {
845
+ min-height: 260px;
846
+ display: flex;
847
+ align-items: center;
848
+ justify-content: center;
849
+ padding: 24px;
850
+ }
851
+
852
+ @media (max-width: 980px) {
853
+ .viewer_6df98 {
854
+ grid-template-columns: 1fr;
855
+ }
856
+ .reportList_6df98 {
857
+ border-right: 0;
858
+ border-bottom: 1px solid var(--color-border-2, rgba(203, 213, 225, 0.5));
859
+ max-height: 220px;
860
+ }
861
+ }
862
+ @media (max-width: 640px) {
863
+ .stats_6df98 {
864
+ grid-template-columns: 1fr;
865
+ }
866
+ .currentLoadRows_6df98,
867
+ .loadedBeforeRow_6df98 {
868
+ grid-template-columns: 1fr;
869
+ }
870
+ .currentLoadRow_6df98 {
871
+ grid-template-columns: 1fr;
872
+ }
873
+ .eventItem_6df98 {
874
+ grid-template-columns: 1fr;
875
+ }
876
+ }