repo-wrapped 0.0.6 → 0.0.7

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,1275 @@
1
+ /* Lead Developer Insights Styles */
2
+
3
+ /* ===== Velocity Section ===== */
4
+ .velocity-section {
5
+ margin-bottom: 2rem;
6
+ }
7
+
8
+ .velocity-stats {
9
+ display: grid;
10
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
11
+ gap: 1rem;
12
+ margin-bottom: 1.5rem;
13
+ }
14
+
15
+ .velocity-stat-card {
16
+ background: var(--card-bg);
17
+ border-radius: 12px;
18
+ padding: 1rem;
19
+ display: flex;
20
+ align-items: center;
21
+ gap: 1rem;
22
+ border: 1px solid var(--border-color);
23
+ }
24
+
25
+ .velocity-stat-card .stat-icon {
26
+ font-size: 2rem;
27
+ }
28
+
29
+ .velocity-stat-card .stat-label {
30
+ font-size: 0.75rem;
31
+ color: var(--text-muted);
32
+ text-transform: uppercase;
33
+ letter-spacing: 0.5px;
34
+ }
35
+
36
+ .velocity-stat-card .stat-value {
37
+ font-size: 1.5rem;
38
+ font-weight: 700;
39
+ }
40
+
41
+ .velocity-stat-card .stat-value.positive { color: #69db7c; }
42
+ .velocity-stat-card .stat-value.negative { color: #ff6b6b; }
43
+ .velocity-stat-card .stat-value.neutral { color: var(--text-muted); }
44
+
45
+ .velocity-stat-card .stat-detail {
46
+ font-size: 0.8rem;
47
+ color: var(--text-muted);
48
+ }
49
+
50
+ .velocity-chart-container {
51
+ background: var(--card-bg);
52
+ border-radius: 12px;
53
+ padding: 1.5rem;
54
+ border: 1px solid var(--border-color);
55
+ margin-bottom: 1.5rem;
56
+ }
57
+
58
+ .velocity-chart-container h3 {
59
+ margin-top: 0;
60
+ margin-bottom: 1rem;
61
+ }
62
+
63
+ .velocity-chart {
64
+ width: 100%;
65
+ height: auto;
66
+ max-height: 250px;
67
+ }
68
+
69
+ .velocity-chart .grid-line {
70
+ stroke: var(--border-color);
71
+ stroke-width: 1;
72
+ }
73
+
74
+ .velocity-chart .axis-label {
75
+ fill: var(--text-muted);
76
+ font-size: 10px;
77
+ }
78
+
79
+ .velocity-chart .legend-label {
80
+ fill: var(--text-color);
81
+ font-size: 10px;
82
+ }
83
+
84
+ .velocity-chart .anomaly-marker {
85
+ cursor: pointer;
86
+ transition: r 0.2s ease;
87
+ }
88
+
89
+ .velocity-chart .anomaly-marker:hover {
90
+ r: 8;
91
+ }
92
+
93
+ .anomalies-section {
94
+ background: var(--card-bg);
95
+ border-radius: 12px;
96
+ padding: 1.5rem;
97
+ border: 1px solid var(--border-color);
98
+ }
99
+
100
+ .anomalies-section h3 {
101
+ margin-top: 0;
102
+ }
103
+
104
+ .anomalies-list {
105
+ display: flex;
106
+ flex-direction: column;
107
+ gap: 0.75rem;
108
+ }
109
+
110
+ .anomaly-item {
111
+ display: flex;
112
+ align-items: flex-start;
113
+ gap: 0.75rem;
114
+ padding: 0.75rem;
115
+ border-radius: 8px;
116
+ background: var(--bg-color);
117
+ }
118
+
119
+ .anomaly-item.critical {
120
+ border-left: 3px solid #ff6b6b;
121
+ }
122
+
123
+ .anomaly-item.warning {
124
+ border-left: 3px solid #ffa94d;
125
+ }
126
+
127
+ .anomaly-icon {
128
+ font-size: 1.25rem;
129
+ }
130
+
131
+ .anomaly-header {
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 0.5rem;
135
+ flex-wrap: wrap;
136
+ }
137
+
138
+ .anomaly-type {
139
+ font-weight: 600;
140
+ text-transform: capitalize;
141
+ }
142
+
143
+ .anomaly-date {
144
+ color: var(--text-muted);
145
+ font-size: 0.85rem;
146
+ }
147
+
148
+ .anomaly-change {
149
+ font-weight: 600;
150
+ font-size: 0.85rem;
151
+ }
152
+
153
+ .anomaly-causes {
154
+ font-size: 0.8rem;
155
+ color: var(--text-muted);
156
+ margin-top: 0.25rem;
157
+ }
158
+
159
+ /* ===== Gap Section ===== */
160
+ .gap-section {
161
+ margin-bottom: 2rem;
162
+ }
163
+
164
+ .gap-stats {
165
+ display: grid;
166
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
167
+ gap: 1rem;
168
+ margin-bottom: 1.5rem;
169
+ }
170
+
171
+ .gap-stat-card {
172
+ background: var(--card-bg);
173
+ border-radius: 12px;
174
+ padding: 1rem;
175
+ display: flex;
176
+ align-items: center;
177
+ gap: 1rem;
178
+ border: 1px solid var(--border-color);
179
+ }
180
+
181
+ .gap-stat-card.risk-card {
182
+ border-left: 4px solid var(--risk-color);
183
+ }
184
+
185
+ .gap-stat-card .stat-value.risk-low { color: #69db7c; }
186
+ .gap-stat-card .stat-value.risk-medium { color: #ffd43b; }
187
+ .gap-stat-card .stat-value.risk-high { color: #ff922b; }
188
+ .gap-stat-card .stat-value.risk-critical { color: #ff6b6b; }
189
+
190
+ .risk-factors {
191
+ background: var(--card-bg);
192
+ border-radius: 12px;
193
+ padding: 1rem 1.5rem;
194
+ border: 1px solid var(--border-color);
195
+ margin-bottom: 1.5rem;
196
+ }
197
+
198
+ .risk-factors h4 {
199
+ margin: 0 0 0.5rem 0;
200
+ font-size: 0.9rem;
201
+ color: var(--text-muted);
202
+ }
203
+
204
+ .risk-factors ul {
205
+ margin: 0;
206
+ padding-left: 1.25rem;
207
+ }
208
+
209
+ .risk-factors li {
210
+ margin-bottom: 0.25rem;
211
+ font-size: 0.9rem;
212
+ }
213
+
214
+ .gap-timeline-container {
215
+ background: var(--card-bg);
216
+ border-radius: 12px;
217
+ padding: 1.5rem;
218
+ border: 1px solid var(--border-color);
219
+ margin-bottom: 1.5rem;
220
+ }
221
+
222
+ .gap-timeline-container h3 {
223
+ margin-top: 0;
224
+ }
225
+
226
+ .no-gaps-message {
227
+ display: flex;
228
+ align-items: center;
229
+ gap: 0.5rem;
230
+ padding: 1rem;
231
+ background: rgba(105, 219, 124, 0.1);
232
+ border-radius: 8px;
233
+ color: #69db7c;
234
+ }
235
+
236
+ .gap-timeline {
237
+ margin: 1rem 0;
238
+ }
239
+
240
+ .timeline-track {
241
+ position: relative;
242
+ height: 40px;
243
+ background: var(--bg-color);
244
+ border-radius: 8px;
245
+ overflow: hidden;
246
+ }
247
+
248
+ .gap-segment {
249
+ position: absolute;
250
+ top: 0;
251
+ height: 100%;
252
+ opacity: 0.8;
253
+ transition: opacity 0.2s ease;
254
+ }
255
+
256
+ .gap-segment:hover {
257
+ opacity: 1;
258
+ }
259
+
260
+ .gap-segment.blocker { background: #ff6b6b; }
261
+ .gap-segment.vacation { background: #4dabf7; }
262
+ .gap-segment.holiday { background: #69db7c; }
263
+ .gap-segment.unknown { background: #868e96; }
264
+
265
+ .timeline-labels {
266
+ display: flex;
267
+ justify-content: space-between;
268
+ margin-top: 0.5rem;
269
+ font-size: 0.8rem;
270
+ color: var(--text-muted);
271
+ }
272
+
273
+ .timeline-legend {
274
+ display: flex;
275
+ flex-wrap: wrap;
276
+ gap: 1rem;
277
+ margin-top: 1rem;
278
+ font-size: 0.8rem;
279
+ }
280
+
281
+ .legend-item {
282
+ display: flex;
283
+ align-items: center;
284
+ gap: 0.5rem;
285
+ }
286
+
287
+ .legend-color {
288
+ width: 12px;
289
+ height: 12px;
290
+ border-radius: 3px;
291
+ }
292
+
293
+ .legend-color.blocker { background: #ff6b6b; }
294
+ .legend-color.vacation { background: #4dabf7; }
295
+ .legend-color.holiday { background: #69db7c; }
296
+ .legend-color.unknown { background: #868e96; }
297
+
298
+ .gaps-list-section {
299
+ background: var(--card-bg);
300
+ border-radius: 12px;
301
+ padding: 1.5rem;
302
+ border: 1px solid var(--border-color);
303
+ }
304
+
305
+ .gaps-list-section h3 {
306
+ margin-top: 0;
307
+ }
308
+
309
+ .gaps-list {
310
+ display: flex;
311
+ flex-direction: column;
312
+ gap: 1rem;
313
+ }
314
+
315
+ .gap-item {
316
+ padding: 1rem;
317
+ background: var(--bg-color);
318
+ border-radius: 8px;
319
+ }
320
+
321
+ .gap-item-header {
322
+ display: flex;
323
+ align-items: center;
324
+ gap: 0.75rem;
325
+ margin-bottom: 0.5rem;
326
+ }
327
+
328
+ .gap-type-icon {
329
+ font-size: 1.25rem;
330
+ }
331
+
332
+ .gap-duration {
333
+ font-weight: 700;
334
+ font-size: 1.1rem;
335
+ }
336
+
337
+ .gap-type-badge {
338
+ font-size: 0.7rem;
339
+ padding: 0.2rem 0.5rem;
340
+ border-radius: 4px;
341
+ text-transform: uppercase;
342
+ font-weight: 600;
343
+ }
344
+
345
+ .gap-type-badge.blocker { background: rgba(255, 107, 107, 0.2); color: #ff6b6b; }
346
+ .gap-type-badge.vacation { background: rgba(77, 171, 247, 0.2); color: #4dabf7; }
347
+ .gap-type-badge.holiday { background: rgba(105, 219, 124, 0.2); color: #69db7c; }
348
+ .gap-type-badge.unknown { background: rgba(134, 142, 150, 0.2); color: #868e96; }
349
+
350
+ .gap-dates {
351
+ font-size: 0.85rem;
352
+ color: var(--text-muted);
353
+ margin-bottom: 0.5rem;
354
+ }
355
+
356
+ .gap-context {
357
+ font-size: 0.8rem;
358
+ }
359
+
360
+ .context-item {
361
+ display: flex;
362
+ gap: 0.5rem;
363
+ margin-top: 0.25rem;
364
+ }
365
+
366
+ .context-label {
367
+ color: var(--text-muted);
368
+ min-width: 45px;
369
+ }
370
+
371
+ .context-message {
372
+ color: var(--text-color);
373
+ font-style: italic;
374
+ }
375
+
376
+ /* ===== Comparison Section ===== */
377
+ .comparison-section {
378
+ margin-bottom: 2rem;
379
+ }
380
+
381
+ .comparison-header {
382
+ display: flex;
383
+ align-items: center;
384
+ justify-content: center;
385
+ gap: 2rem;
386
+ margin-bottom: 1.5rem;
387
+ flex-wrap: wrap;
388
+ }
389
+
390
+ .period-label {
391
+ text-align: center;
392
+ padding: 1rem 1.5rem;
393
+ border-radius: 12px;
394
+ background: var(--card-bg);
395
+ border: 2px solid var(--border-color);
396
+ }
397
+
398
+ .period-label.period-1 {
399
+ border-color: var(--accent-color);
400
+ }
401
+
402
+ .period-label.period-2 {
403
+ border-color: #ffa94d;
404
+ }
405
+
406
+ .period-name {
407
+ display: block;
408
+ font-weight: 700;
409
+ font-size: 1.1rem;
410
+ margin-bottom: 0.25rem;
411
+ }
412
+
413
+ .period-dates {
414
+ font-size: 0.8rem;
415
+ color: var(--text-muted);
416
+ }
417
+
418
+ .vs-divider {
419
+ font-weight: 700;
420
+ font-size: 1.25rem;
421
+ color: var(--text-muted);
422
+ }
423
+
424
+ .comparison-summary {
425
+ background: var(--card-bg);
426
+ border-radius: 12px;
427
+ padding: 1rem 1.5rem;
428
+ border: 1px solid var(--border-color);
429
+ margin-bottom: 1.5rem;
430
+ text-align: center;
431
+ }
432
+
433
+ .comparison-summary p {
434
+ margin: 0;
435
+ font-size: 1rem;
436
+ line-height: 1.5;
437
+ }
438
+
439
+ .comparison-grid {
440
+ display: grid;
441
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
442
+ gap: 1rem;
443
+ margin-bottom: 1.5rem;
444
+ }
445
+
446
+ .comparison-card {
447
+ background: var(--card-bg);
448
+ border-radius: 12px;
449
+ padding: 1rem;
450
+ border: 1px solid var(--border-color);
451
+ }
452
+
453
+ .card-header {
454
+ display: flex;
455
+ align-items: center;
456
+ gap: 0.5rem;
457
+ margin-bottom: 0.75rem;
458
+ }
459
+
460
+ .card-emoji {
461
+ font-size: 1.25rem;
462
+ }
463
+
464
+ .card-label {
465
+ font-weight: 600;
466
+ }
467
+
468
+ .card-values {
469
+ display: flex;
470
+ align-items: center;
471
+ justify-content: space-between;
472
+ gap: 0.5rem;
473
+ }
474
+
475
+ .value-box {
476
+ flex: 1;
477
+ text-align: center;
478
+ padding: 0.5rem;
479
+ border-radius: 8px;
480
+ background: var(--bg-color);
481
+ }
482
+
483
+ .value-box .value {
484
+ font-weight: 700;
485
+ font-size: 1.25rem;
486
+ }
487
+
488
+ .value-box.period-1 {
489
+ border-bottom: 2px solid var(--accent-color);
490
+ }
491
+
492
+ .value-box.period-2 {
493
+ border-bottom: 2px solid #ffa94d;
494
+ }
495
+
496
+ .change-indicator {
497
+ display: flex;
498
+ flex-direction: column;
499
+ align-items: center;
500
+ padding: 0.25rem 0.5rem;
501
+ }
502
+
503
+ .change-arrow {
504
+ font-size: 1.25rem;
505
+ }
506
+
507
+ .change-percent {
508
+ font-size: 0.75rem;
509
+ font-weight: 600;
510
+ }
511
+
512
+ .change-indicator.positive { color: #69db7c; }
513
+ .change-indicator.negative { color: #ff6b6b; }
514
+ .change-indicator.neutral { color: var(--text-muted); }
515
+
516
+ .type-distribution-comparison {
517
+ background: var(--card-bg);
518
+ border-radius: 12px;
519
+ padding: 1.5rem;
520
+ border: 1px solid var(--border-color);
521
+ }
522
+
523
+ .type-distribution-comparison h3 {
524
+ margin-top: 0;
525
+ }
526
+
527
+ .distribution-legend {
528
+ display: flex;
529
+ gap: 2rem;
530
+ margin-bottom: 1rem;
531
+ font-size: 0.85rem;
532
+ }
533
+
534
+ .distribution-legend .period-1::before {
535
+ content: '';
536
+ display: inline-block;
537
+ width: 12px;
538
+ height: 12px;
539
+ background: var(--accent-color);
540
+ border-radius: 2px;
541
+ margin-right: 0.5rem;
542
+ }
543
+
544
+ .distribution-legend .period-2::before {
545
+ content: '';
546
+ display: inline-block;
547
+ width: 12px;
548
+ height: 12px;
549
+ background: #ffa94d;
550
+ border-radius: 2px;
551
+ margin-right: 0.5rem;
552
+ }
553
+
554
+ .type-bars-container {
555
+ display: flex;
556
+ flex-direction: column;
557
+ gap: 0.75rem;
558
+ }
559
+
560
+ .type-row {
561
+ display: grid;
562
+ grid-template-columns: 80px 1fr;
563
+ gap: 1rem;
564
+ align-items: center;
565
+ }
566
+
567
+ .type-label {
568
+ font-weight: 600;
569
+ font-size: 0.85rem;
570
+ }
571
+
572
+ .type-bars {
573
+ display: flex;
574
+ flex-direction: column;
575
+ gap: 0.25rem;
576
+ }
577
+
578
+ .bar-container {
579
+ display: flex;
580
+ align-items: center;
581
+ gap: 0.5rem;
582
+ height: 18px;
583
+ }
584
+
585
+ .bar-container .bar {
586
+ height: 100%;
587
+ border-radius: 4px;
588
+ min-width: 2px;
589
+ transition: width 0.3s ease;
590
+ }
591
+
592
+ .bar-container .bar-value {
593
+ font-size: 0.75rem;
594
+ color: var(--text-muted);
595
+ white-space: nowrap;
596
+ }
597
+
598
+ /* ===== Executive Summary Section ===== */
599
+ .executive-summary-section {
600
+ margin-bottom: 2rem;
601
+ }
602
+
603
+ .executive-header {
604
+ display: flex;
605
+ justify-content: space-between;
606
+ align-items: flex-start;
607
+ flex-wrap: wrap;
608
+ gap: 1rem;
609
+ margin-bottom: 1.5rem;
610
+ }
611
+
612
+ .executive-header h2 {
613
+ margin: 0;
614
+ }
615
+
616
+ .summary-meta {
617
+ display: flex;
618
+ flex-direction: column;
619
+ align-items: flex-end;
620
+ font-size: 0.85rem;
621
+ }
622
+
623
+ .summary-meta .repo-name {
624
+ font-weight: 600;
625
+ }
626
+
627
+ .summary-meta .period {
628
+ color: var(--text-muted);
629
+ }
630
+
631
+ .kpi-grid {
632
+ display: grid;
633
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
634
+ gap: 1rem;
635
+ margin-bottom: 1.5rem;
636
+ }
637
+
638
+ .kpi-card {
639
+ background: var(--card-bg);
640
+ border-radius: 12px;
641
+ padding: 1rem;
642
+ border: 1px solid var(--border-color);
643
+ position: relative;
644
+ overflow: hidden;
645
+ }
646
+
647
+ .kpi-status-indicator {
648
+ position: absolute;
649
+ top: 0;
650
+ left: 0;
651
+ width: 4px;
652
+ height: 100%;
653
+ background: var(--status-color);
654
+ }
655
+
656
+ .kpi-content {
657
+ padding-left: 0.5rem;
658
+ }
659
+
660
+ .kpi-label {
661
+ font-size: 0.75rem;
662
+ color: var(--text-muted);
663
+ text-transform: uppercase;
664
+ letter-spacing: 0.5px;
665
+ margin-bottom: 0.25rem;
666
+ }
667
+
668
+ .kpi-value {
669
+ font-size: 1.5rem;
670
+ font-weight: 700;
671
+ margin-bottom: 0.25rem;
672
+ }
673
+
674
+ .kpi-trend {
675
+ display: flex;
676
+ align-items: center;
677
+ gap: 0.25rem;
678
+ font-size: 0.85rem;
679
+ }
680
+
681
+ .kpi-trend.positive { color: #69db7c; }
682
+ .kpi-trend.negative { color: #ff6b6b; }
683
+ .kpi-trend.neutral { color: var(--text-muted); }
684
+
685
+ .kpi-benchmark {
686
+ font-size: 0.75rem;
687
+ color: var(--text-muted);
688
+ margin-top: 0.25rem;
689
+ }
690
+
691
+ .insights-risks-grid {
692
+ display: grid;
693
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
694
+ gap: 1.5rem;
695
+ margin-bottom: 1.5rem;
696
+ }
697
+
698
+ .insights-column,
699
+ .risks-column {
700
+ background: var(--card-bg);
701
+ border-radius: 12px;
702
+ padding: 1.5rem;
703
+ border: 1px solid var(--border-color);
704
+ }
705
+
706
+ .insights-column h3,
707
+ .risks-column h3 {
708
+ margin-top: 0;
709
+ margin-bottom: 1rem;
710
+ }
711
+
712
+ .insights-list,
713
+ .risks-list {
714
+ display: flex;
715
+ flex-direction: column;
716
+ gap: 0.75rem;
717
+ }
718
+
719
+ .insight-item {
720
+ display: flex;
721
+ align-items: flex-start;
722
+ gap: 0.75rem;
723
+ padding: 0.5rem;
724
+ border-radius: 8px;
725
+ background: var(--bg-color);
726
+ }
727
+
728
+ .insight-icon {
729
+ font-size: 1rem;
730
+ flex-shrink: 0;
731
+ }
732
+
733
+ .insight-text {
734
+ font-size: 0.9rem;
735
+ line-height: 1.4;
736
+ }
737
+
738
+ .risk-item {
739
+ display: flex;
740
+ gap: 0.75rem;
741
+ padding: 0.75rem;
742
+ border-radius: 8px;
743
+ background: var(--bg-color);
744
+ }
745
+
746
+ .risk-badge {
747
+ font-size: 0.65rem;
748
+ padding: 0.2rem 0.5rem;
749
+ border-radius: 4px;
750
+ font-weight: 700;
751
+ flex-shrink: 0;
752
+ height: fit-content;
753
+ }
754
+
755
+ .risk-item.low .risk-badge { background: rgba(105, 219, 124, 0.2); color: #69db7c; }
756
+ .risk-item.medium .risk-badge { background: rgba(255, 212, 59, 0.2); color: #ffd43b; }
757
+ .risk-item.high .risk-badge { background: rgba(255, 107, 107, 0.2); color: #ff6b6b; }
758
+
759
+ .risk-content {
760
+ display: flex;
761
+ flex-direction: column;
762
+ gap: 0.25rem;
763
+ }
764
+
765
+ .risk-category {
766
+ font-weight: 600;
767
+ font-size: 0.85rem;
768
+ }
769
+
770
+ .risk-description {
771
+ font-size: 0.8rem;
772
+ color: var(--text-muted);
773
+ }
774
+
775
+ .no-risks {
776
+ color: #69db7c;
777
+ font-size: 0.9rem;
778
+ padding: 0.5rem;
779
+ }
780
+
781
+ .recommendations-section {
782
+ background: var(--card-bg);
783
+ border-radius: 12px;
784
+ padding: 1.5rem;
785
+ border: 1px solid var(--border-color);
786
+ margin-bottom: 1rem;
787
+ }
788
+
789
+ .recommendations-section h3 {
790
+ margin-top: 0;
791
+ }
792
+
793
+ .recommendations-list {
794
+ margin: 0;
795
+ padding-left: 1.5rem;
796
+ }
797
+
798
+ .recommendations-list li {
799
+ margin-bottom: 0.5rem;
800
+ line-height: 1.5;
801
+ }
802
+
803
+ .summary-footer {
804
+ text-align: right;
805
+ font-size: 0.8rem;
806
+ color: var(--text-muted);
807
+ }
808
+
809
+ /* ===== Team Section ===== */
810
+ .team-section {
811
+ margin-bottom: 2rem;
812
+ }
813
+
814
+ .team-summary {
815
+ display: grid;
816
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
817
+ gap: 1rem;
818
+ margin-bottom: 2rem;
819
+ }
820
+
821
+ .team-stat-card {
822
+ background: var(--card-bg);
823
+ border-radius: 12px;
824
+ padding: 1.25rem;
825
+ text-align: center;
826
+ border: 1px solid var(--border-color);
827
+ }
828
+
829
+ .team-stat-card .stat-value {
830
+ display: block;
831
+ font-size: 1.75rem;
832
+ font-weight: 700;
833
+ color: #69db7c;
834
+ }
835
+
836
+ .team-stat-card .stat-label {
837
+ display: block;
838
+ font-size: 0.75rem;
839
+ color: var(--text-muted);
840
+ text-transform: uppercase;
841
+ letter-spacing: 0.5px;
842
+ margin-top: 0.25rem;
843
+ }
844
+
845
+ /* Load Distribution */
846
+ .load-distribution {
847
+ background: var(--card-bg);
848
+ border-radius: 12px;
849
+ padding: 1.5rem;
850
+ margin-bottom: 2rem;
851
+ border: 1px solid var(--border-color);
852
+ }
853
+
854
+ .load-distribution h3 {
855
+ margin-top: 0;
856
+ margin-bottom: 1rem;
857
+ }
858
+
859
+ .gini-container {
860
+ margin-bottom: 1rem;
861
+ }
862
+
863
+ .gini-bar-bg {
864
+ height: 12px;
865
+ background: rgba(255, 255, 255, 0.1);
866
+ border-radius: 6px;
867
+ overflow: hidden;
868
+ margin-bottom: 0.75rem;
869
+ }
870
+
871
+ .gini-bar {
872
+ height: 100%;
873
+ border-radius: 6px;
874
+ transition: width 0.3s ease;
875
+ }
876
+
877
+ .gini-bar.balanced { background: #69db7c; }
878
+ .gini-bar.moderate { background: #fcc419; }
879
+ .gini-bar.imbalanced { background: #ff6b6b; }
880
+
881
+ .gini-info {
882
+ display: flex;
883
+ justify-content: space-between;
884
+ align-items: center;
885
+ }
886
+
887
+ .gini-value {
888
+ font-weight: 600;
889
+ font-size: 1rem;
890
+ }
891
+
892
+ .gini-assessment {
893
+ padding: 0.25rem 0.75rem;
894
+ border-radius: 20px;
895
+ font-size: 0.875rem;
896
+ font-weight: 500;
897
+ }
898
+
899
+ .gini-assessment.balanced { background: rgba(105, 219, 124, 0.2); color: #69db7c; }
900
+ .gini-assessment.moderate { background: rgba(252, 196, 25, 0.2); color: #fcc419; }
901
+ .gini-assessment.imbalanced { background: rgba(255, 107, 107, 0.2); color: #ff6b6b; }
902
+
903
+ .gini-explanation {
904
+ font-size: 0.875rem;
905
+ color: var(--text-muted);
906
+ margin: 0;
907
+ }
908
+
909
+ /* Member Breakdown */
910
+ .member-breakdown {
911
+ background: var(--card-bg);
912
+ border-radius: 12px;
913
+ padding: 1.5rem;
914
+ margin-bottom: 2rem;
915
+ border: 1px solid var(--border-color);
916
+ }
917
+
918
+ .member-breakdown h3 {
919
+ margin-top: 0;
920
+ margin-bottom: 1rem;
921
+ }
922
+
923
+ .member-list {
924
+ display: flex;
925
+ flex-direction: column;
926
+ gap: 0.75rem;
927
+ }
928
+
929
+ .member-card {
930
+ display: grid;
931
+ grid-template-columns: 40px 1fr 200px auto auto;
932
+ align-items: center;
933
+ gap: 1rem;
934
+ padding: 0.75rem 1rem;
935
+ background: rgba(255, 255, 255, 0.03);
936
+ border-radius: 8px;
937
+ }
938
+
939
+ .member-rank {
940
+ font-size: 1rem;
941
+ font-weight: 700;
942
+ color: var(--text-muted);
943
+ text-align: center;
944
+ }
945
+
946
+ .member-info {
947
+ min-width: 0;
948
+ }
949
+
950
+ .member-name {
951
+ font-weight: 600;
952
+ white-space: nowrap;
953
+ overflow: hidden;
954
+ text-overflow: ellipsis;
955
+ }
956
+
957
+ .member-areas {
958
+ display: flex;
959
+ gap: 0.5rem;
960
+ margin-top: 0.25rem;
961
+ flex-wrap: wrap;
962
+ }
963
+
964
+ .area-tag {
965
+ font-size: 0.7rem;
966
+ padding: 0.125rem 0.5rem;
967
+ background: rgba(255, 255, 255, 0.1);
968
+ border-radius: 4px;
969
+ color: var(--text-muted);
970
+ }
971
+
972
+ .member-bar-container {
973
+ height: 8px;
974
+ background: rgba(255, 255, 255, 0.1);
975
+ border-radius: 4px;
976
+ overflow: hidden;
977
+ }
978
+
979
+ .member-bar {
980
+ height: 100%;
981
+ background: linear-gradient(90deg, #69db7c, #40c057);
982
+ border-radius: 4px;
983
+ }
984
+
985
+ .member-stats {
986
+ text-align: right;
987
+ white-space: nowrap;
988
+ }
989
+
990
+ .member-commits {
991
+ font-weight: 700;
992
+ font-size: 1rem;
993
+ }
994
+
995
+ .member-percentage {
996
+ font-size: 0.8rem;
997
+ color: var(--text-muted);
998
+ margin-left: 0.25rem;
999
+ }
1000
+
1001
+ .member-quality {
1002
+ text-align: center;
1003
+ }
1004
+
1005
+ .quality-badge {
1006
+ display: inline-block;
1007
+ padding: 0.25rem 0.5rem;
1008
+ background: rgba(105, 219, 124, 0.2);
1009
+ color: #69db7c;
1010
+ border-radius: 4px;
1011
+ font-size: 0.8rem;
1012
+ font-weight: 600;
1013
+ }
1014
+
1015
+ /* Team Insights */
1016
+ .team-insights {
1017
+ background: var(--card-bg);
1018
+ border-radius: 12px;
1019
+ padding: 1.5rem;
1020
+ border: 1px solid var(--border-color);
1021
+ }
1022
+
1023
+ .team-insights h3 {
1024
+ margin-top: 0;
1025
+ margin-bottom: 1rem;
1026
+ }
1027
+
1028
+ .insights-list {
1029
+ list-style: none;
1030
+ padding: 0;
1031
+ margin: 0;
1032
+ }
1033
+
1034
+ .insight-item {
1035
+ padding: 0.75rem 1rem;
1036
+ background: rgba(255, 255, 255, 0.03);
1037
+ border-radius: 8px;
1038
+ margin-bottom: 0.5rem;
1039
+ font-size: 0.9rem;
1040
+ }
1041
+
1042
+ .insight-item:last-child {
1043
+ margin-bottom: 0;
1044
+ }
1045
+
1046
+ /* Responsive for team section */
1047
+ @media (max-width: 768px) {
1048
+ .member-card {
1049
+ grid-template-columns: 30px 1fr;
1050
+ grid-template-rows: auto auto auto;
1051
+ gap: 0.5rem;
1052
+ }
1053
+
1054
+ .member-bar-container {
1055
+ grid-column: 1 / -1;
1056
+ }
1057
+
1058
+ .member-stats,
1059
+ .member-quality {
1060
+ grid-column: 2;
1061
+ }
1062
+ }
1063
+
1064
+ /* ===== Events Section ===== */
1065
+ .events-section {
1066
+ display: flex;
1067
+ flex-direction: column;
1068
+ gap: 1.5rem;
1069
+ }
1070
+
1071
+ .events-legend {
1072
+ display: flex;
1073
+ flex-wrap: wrap;
1074
+ gap: 1rem;
1075
+ padding: 1rem 1.25rem;
1076
+ background: rgba(255, 255, 255, 0.03);
1077
+ border-radius: 12px;
1078
+ border: 1px solid var(--border-color);
1079
+ }
1080
+
1081
+ .events-legend .legend-item {
1082
+ display: flex;
1083
+ align-items: center;
1084
+ gap: 0.5rem;
1085
+ font-size: 0.875rem;
1086
+ }
1087
+
1088
+ .events-legend .legend-item .event-icon {
1089
+ font-size: 1rem;
1090
+ }
1091
+
1092
+ .events-legend .legend-item .legend-label {
1093
+ color: var(--text-muted);
1094
+ text-transform: capitalize;
1095
+ }
1096
+
1097
+ .events-summary {
1098
+ display: flex;
1099
+ flex-wrap: wrap;
1100
+ gap: 1rem;
1101
+ }
1102
+
1103
+ .events-summary .summary-stat {
1104
+ display: flex;
1105
+ flex-direction: column;
1106
+ align-items: center;
1107
+ gap: 0.25rem;
1108
+ padding: 1rem 1.5rem;
1109
+ background: var(--card-bg);
1110
+ border-radius: 12px;
1111
+ border: 1px solid var(--border-color);
1112
+ min-width: 100px;
1113
+ }
1114
+
1115
+ .events-summary .stat-value {
1116
+ font-size: 1.25rem;
1117
+ font-weight: 700;
1118
+ }
1119
+
1120
+ .events-summary .stat-label {
1121
+ font-size: 0.75rem;
1122
+ color: var(--text-muted);
1123
+ text-transform: capitalize;
1124
+ }
1125
+
1126
+ .events-timeline {
1127
+ display: flex;
1128
+ flex-direction: column;
1129
+ gap: 1rem;
1130
+ }
1131
+
1132
+ .event-card {
1133
+ padding: 1.25rem 1.5rem;
1134
+ background: rgba(255, 255, 255, 0.03);
1135
+ border-left: 4px solid var(--event-color, #6b7280);
1136
+ border-radius: 0 12px 12px 0;
1137
+ transition: background 0.2s ease;
1138
+ }
1139
+
1140
+ .event-card:hover {
1141
+ background: rgba(255, 255, 255, 0.05);
1142
+ }
1143
+
1144
+ .event-header {
1145
+ display: flex;
1146
+ align-items: center;
1147
+ gap: 0.75rem;
1148
+ margin-bottom: 0.5rem;
1149
+ }
1150
+
1151
+ .event-header .event-icon {
1152
+ font-size: 1.25rem;
1153
+ }
1154
+
1155
+ .event-date {
1156
+ font-size: 0.875rem;
1157
+ color: var(--text-muted);
1158
+ }
1159
+
1160
+ .event-type-badge {
1161
+ font-size: 0.7rem;
1162
+ padding: 0.2rem 0.5rem;
1163
+ background: rgba(255, 255, 255, 0.1);
1164
+ border-radius: 4px;
1165
+ text-transform: uppercase;
1166
+ letter-spacing: 0.5px;
1167
+ }
1168
+
1169
+ .event-label {
1170
+ font-weight: 600;
1171
+ font-size: 1.1rem;
1172
+ line-height: 1.4;
1173
+ }
1174
+
1175
+ .event-description {
1176
+ margin-top: 0.5rem;
1177
+ color: var(--text-muted);
1178
+ font-size: 0.9rem;
1179
+ line-height: 1.5;
1180
+ }
1181
+
1182
+ .event-correlation {
1183
+ margin-top: 1rem;
1184
+ padding-top: 1rem;
1185
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
1186
+ }
1187
+
1188
+ .correlation-metrics {
1189
+ display: flex;
1190
+ flex-wrap: wrap;
1191
+ gap: 0.75rem;
1192
+ margin-bottom: 0.75rem;
1193
+ }
1194
+
1195
+ .correlation-metric {
1196
+ display: flex;
1197
+ flex-direction: column;
1198
+ gap: 0.125rem;
1199
+ padding: 0.5rem 0.75rem;
1200
+ border-radius: 8px;
1201
+ background: rgba(255, 255, 255, 0.05);
1202
+ }
1203
+
1204
+ .correlation-metric .metric-label {
1205
+ font-size: 0.7rem;
1206
+ color: var(--text-muted);
1207
+ text-transform: uppercase;
1208
+ letter-spacing: 0.5px;
1209
+ }
1210
+
1211
+ .correlation-metric .metric-value {
1212
+ font-size: 0.9rem;
1213
+ font-weight: 600;
1214
+ }
1215
+
1216
+ .correlation-metric.positive {
1217
+ background: rgba(16, 185, 129, 0.15);
1218
+ }
1219
+ .correlation-metric.positive .metric-value {
1220
+ color: #10b981;
1221
+ }
1222
+
1223
+ .correlation-metric.negative {
1224
+ background: rgba(239, 68, 68, 0.15);
1225
+ }
1226
+ .correlation-metric.negative .metric-value {
1227
+ color: #ef4444;
1228
+ }
1229
+
1230
+ .correlation-assessment {
1231
+ display: flex;
1232
+ align-items: flex-start;
1233
+ gap: 0.5rem;
1234
+ font-size: 0.875rem;
1235
+ font-style: italic;
1236
+ color: var(--text-muted);
1237
+ line-height: 1.5;
1238
+ }
1239
+
1240
+ .correlation-assessment .assessment-icon {
1241
+ flex-shrink: 0;
1242
+ }
1243
+
1244
+ /* Responsive for events section */
1245
+ @media (max-width: 768px) {
1246
+ .events-legend {
1247
+ gap: 0.75rem;
1248
+ padding: 0.75rem;
1249
+ }
1250
+
1251
+ .events-legend .legend-item {
1252
+ font-size: 0.8rem;
1253
+ }
1254
+
1255
+ .events-summary {
1256
+ flex-direction: column;
1257
+ }
1258
+
1259
+ .events-summary .summary-stat {
1260
+ flex-direction: row;
1261
+ justify-content: space-between;
1262
+ width: 100%;
1263
+ }
1264
+
1265
+ .correlation-metrics {
1266
+ flex-direction: column;
1267
+ gap: 0.5rem;
1268
+ }
1269
+
1270
+ .correlation-metric {
1271
+ flex-direction: row;
1272
+ justify-content: space-between;
1273
+ align-items: center;
1274
+ }
1275
+ }