e-pick 1.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,994 @@
1
+ /**
2
+ * Styles for E-Pick Tool
3
+ * Color Palette: Catppuccin Latte (Light Mode)
4
+ */
5
+
6
+ :root {
7
+ /* Catppuccin Latte Colors (Light Mode) */
8
+ --rosewater: #dc8a78;
9
+ --flamingo: #dd7878;
10
+ --pink: #ea76cb;
11
+ --mauve: #8839ef;
12
+ --red: #d20f39;
13
+ --maroon: #e64553;
14
+ --peach: #fe640b;
15
+ --yellow: #df8e1d;
16
+ --green: #40a02b;
17
+ --teal: #179299;
18
+ --sky: #04a5e5;
19
+ --sapphire: #209fb5;
20
+ --blue: #1e66f5;
21
+ --lavender: #7287fd;
22
+ --text: #4c4f69;
23
+ --subtext1: #5c5f77;
24
+ --subtext0: #6c6f85;
25
+ --overlay2: #7c7f93;
26
+ --overlay1: #8c8fa1;
27
+ --overlay0: #9ca0b0;
28
+ --surface2: #acb0be;
29
+ --surface1: #bcc0cc;
30
+ --surface0: #ccd0da;
31
+ --base: #eff1f5;
32
+ --mantle: #e6e9ef;
33
+ --crust: #dce0e8;
34
+ }
35
+
36
+ * {
37
+ margin: 0;
38
+ padding: 0;
39
+ box-sizing: border-box;
40
+ }
41
+
42
+ body {
43
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
44
+ background: #f0f4ff;
45
+ min-height: 100vh;
46
+ padding: 2rem;
47
+ }
48
+
49
+ .container {
50
+ max-width: 1200px;
51
+ background: #fafafa;
52
+ border-radius: 12px;
53
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
54
+ padding: 0;
55
+ margin: 0 auto;
56
+ overflow: hidden;
57
+ }
58
+
59
+ /* Header */
60
+ header {
61
+ background: linear-gradient(135deg, var(--blue) 0%, var(--mauve) 100%);
62
+ color: var(--crust);
63
+ padding: 2.5rem 2rem;
64
+ text-align: center;
65
+ }
66
+
67
+ header h1 {
68
+ font-size: 2.5rem;
69
+ margin-bottom: 0.5rem;
70
+ color: var(--crust);
71
+ }
72
+
73
+ .subtitle {
74
+ font-size: 1.1rem;
75
+ opacity: 0.9;
76
+ margin-bottom: 1rem;
77
+ color: var(--mantle);
78
+ }
79
+
80
+ .repo-info {
81
+ background: var(--mantle);
82
+ padding: 0.75rem 1rem;
83
+ border-radius: 6px;
84
+ font-size: 0.9rem;
85
+ margin-top: 1rem;
86
+ color: var(--text);
87
+ border: 1px solid var(--surface0);
88
+ }
89
+
90
+ /* Main Content */
91
+ main {
92
+ padding: 2rem;
93
+ }
94
+
95
+ /* Stepper Progress */
96
+ .stepper {
97
+ display: flex;
98
+ justify-content: space-evenly;
99
+ align-items: flex-start;
100
+ margin-bottom: 2rem;
101
+ padding: 1.5rem 2rem 3.5rem 2rem;
102
+ background: var(--mantle);
103
+ border-radius: 8px;
104
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
105
+ gap: 1rem;
106
+ }
107
+
108
+ .stepper-item {
109
+ display: flex;
110
+ flex-direction: column;
111
+ align-items: center;
112
+ position: relative;
113
+ flex: 1;
114
+ min-width: 80px;
115
+ }
116
+
117
+ .stepper-item:not(:last-child)::after {
118
+ content: '';
119
+ position: absolute;
120
+ top: 20px;
121
+ left: calc(50% + 20px);
122
+ width: calc(100% + 1rem - 40px);
123
+ height: 3px;
124
+ background: var(--surface0);
125
+ transition: all 0.3s ease;
126
+ z-index: 1;
127
+ }
128
+
129
+ .stepper-item.completed:not(:last-child)::after {
130
+ background: var(--green);
131
+ }
132
+
133
+ .step-circle {
134
+ width: 40px;
135
+ height: 40px;
136
+ border-radius: 50%;
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ font-weight: bold;
141
+ font-size: 1.1rem;
142
+ background: var(--surface0);
143
+ color: var(--overlay0);
144
+ cursor: default;
145
+ transition: all 0.3s ease;
146
+ position: relative;
147
+ z-index: 2;
148
+ margin-bottom: 0.5rem;
149
+ }
150
+
151
+ .step-circle.active {
152
+ background: var(--blue);
153
+ color: var(--crust);
154
+ box-shadow: 0 0 0 4px rgba(140, 170, 238, 0.2);
155
+ transform: scale(1.1);
156
+ }
157
+
158
+ .step-circle.completed {
159
+ background: var(--green);
160
+ color: var(--crust);
161
+ cursor: pointer;
162
+ }
163
+
164
+ .step-circle.completed:hover {
165
+ transform: scale(1.15);
166
+ box-shadow: 0 4px 12px rgba(166, 209, 137, 0.3);
167
+ }
168
+
169
+ .step-label {
170
+ font-size: 0.8rem;
171
+ color: var(--text);
172
+ font-weight: 500;
173
+ text-align: center;
174
+ max-width: 100px;
175
+ line-height: 1.2;
176
+ white-space: normal;
177
+ word-wrap: break-word;
178
+ }
179
+
180
+ .step-circle.active + .step-label {
181
+ color: var(--text);
182
+ font-weight: 700;
183
+ }
184
+
185
+ .step-circle.completed + .step-label {
186
+ color: var(--green);
187
+ }
188
+
189
+ .card {
190
+ background: #ffffff;
191
+ border: 1px solid #e0e0e0;
192
+ border-radius: 8px;
193
+ padding: 1.5rem;
194
+ margin-bottom: 1.5rem;
195
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
196
+ animation: fadeIn 0.5s ease-out;
197
+ }
198
+
199
+ h2 {
200
+ color: var(--text);
201
+ margin-bottom: 1rem;
202
+ font-size: 1.5rem;
203
+ display: flex;
204
+ align-items: center;
205
+ gap: 0.5rem;
206
+ }
207
+
208
+ h3 {
209
+ color: var(--text);
210
+ font-size: 1.2rem;
211
+ margin-bottom: 0.75rem;
212
+ }
213
+
214
+ h4 {
215
+ color: var(--text);
216
+ font-size: 1rem;
217
+ margin-bottom: 0.5rem;
218
+ }
219
+
220
+ p {
221
+ color: var(--subtext0);
222
+ line-height: 1.6;
223
+ margin-bottom: 0.75rem;
224
+ }
225
+
226
+ .info-text {
227
+ color: var(--subtext1);
228
+ font-size: 0.9rem;
229
+ }
230
+
231
+ /* File Upload */
232
+ .file-input-container {
233
+ margin-top: 1rem;
234
+ }
235
+
236
+ #file-input {
237
+ display: none;
238
+ }
239
+
240
+ .file-label {
241
+ display: inline-block;
242
+ padding: 1rem 2rem;
243
+ background: var(--blue);
244
+ color: var(--crust);
245
+ border-radius: 6px;
246
+ cursor: pointer;
247
+ transition: all 0.3s ease;
248
+ text-align: center;
249
+ border: 2px dashed transparent;
250
+ }
251
+
252
+ .file-label:hover {
253
+ background: var(--sapphire);
254
+ border-color: var(--blue);
255
+ }
256
+
257
+ /* Data Preview */
258
+ .preview-header {
259
+ margin-bottom: 1rem;
260
+ }
261
+
262
+ .table-container {
263
+ overflow-x: auto;
264
+ overflow-y: auto;
265
+ max-height: 400px;
266
+ border: 2px solid var(--surface0);
267
+ border-radius: 6px;
268
+ background: var(--mantle);
269
+ }
270
+
271
+ .table-container:focus {
272
+ outline: 2px solid var(--blue);
273
+ outline-offset: 2px;
274
+ }
275
+
276
+ table {
277
+ width: 100%;
278
+ border-collapse: collapse;
279
+ }
280
+
281
+ thead {
282
+ background: var(--surface0);
283
+ }
284
+
285
+ th {
286
+ padding: 0.75rem;
287
+ text-align: left;
288
+ font-weight: 600;
289
+ color: var(--text);
290
+ border-bottom: 2px solid var(--surface1);
291
+ }
292
+
293
+ td {
294
+ padding: 0.75rem;
295
+ border-bottom: 1px solid var(--surface0);
296
+ color: var(--subtext1);
297
+ }
298
+
299
+ tbody tr:hover {
300
+ background: var(--surface0);
301
+ }
302
+
303
+ /* Sheet Selector */
304
+ #sheet-selector {
305
+ border-left: 4px solid var(--peach);
306
+ background: var(--mantle);
307
+ }
308
+
309
+ #sheet-search {
310
+ width: 100%;
311
+ padding: 0.75rem;
312
+ border: 2px solid var(--surface1);
313
+ border-radius: 6px;
314
+ font-size: 1rem;
315
+ color: var(--text);
316
+ background: var(--surface0);
317
+ transition: all 0.2s ease;
318
+ }
319
+
320
+ #sheet-search:hover {
321
+ border-color: var(--surface2);
322
+ }
323
+
324
+ #sheet-search:focus {
325
+ outline: none;
326
+ border-color: var(--blue);
327
+ box-shadow: 0 0 0 3px rgba(140, 170, 238, 0.2);
328
+ }
329
+
330
+ #sheet-search::placeholder {
331
+ color: var(--overlay1);
332
+ }
333
+
334
+ #sheet-checkboxes {
335
+ display: flex;
336
+ flex-direction: column;
337
+ gap: 0.75rem;
338
+ margin: 1rem 0;
339
+ max-height: 300px;
340
+ overflow-y: auto;
341
+ padding: 0.5rem;
342
+ outline: none;
343
+ }
344
+
345
+ #sheet-checkboxes:focus {
346
+ outline: none;
347
+ }
348
+
349
+ .sheet-checkbox-label {
350
+ display: flex;
351
+ align-items: center;
352
+ gap: 0.75rem;
353
+ padding: 0.75rem 1rem;
354
+ background: #ffffff;
355
+ border: 1px solid #d0d0d0;
356
+ border-radius: 4px;
357
+ cursor: pointer;
358
+ transition: border-color 0.15s ease;
359
+ user-select: none;
360
+ }
361
+
362
+ .sheet-checkbox-label:hover {
363
+ border-color: #a0a0a0;
364
+ }
365
+
366
+ .sheet-checkbox-label input[type="checkbox"] {
367
+ width: 18px;
368
+ height: 18px;
369
+ cursor: pointer;
370
+ accent-color: var(--blue);
371
+ outline: none;
372
+ }
373
+
374
+ .sheet-checkbox-label span {
375
+ color: #333333;
376
+ font-weight: 400;
377
+ font-size: 0.95rem;
378
+ flex: 1;
379
+ }
380
+
381
+ .sheet-checkbox-label input[type="checkbox"]:checked + span {
382
+ color: #333333;
383
+ font-weight: 500;
384
+ }
385
+
386
+ .sheet-checkbox-label input[type="checkbox"]:focus {
387
+ outline: none;
388
+ }
389
+
390
+ .sheet-checkbox-label:focus-within {
391
+ border-color: var(--blue);
392
+ }
393
+
394
+ /* Column Selectors */
395
+ .action-section {
396
+ margin-bottom: 1.5rem;
397
+ padding-bottom: 1.5rem;
398
+ border-bottom: 2px solid var(--surface0);
399
+ }
400
+
401
+ .selector-group {
402
+ display: grid;
403
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
404
+ gap: 1rem;
405
+ margin-bottom: 1.5rem;
406
+ }
407
+
408
+ .selector label {
409
+ display: block;
410
+ font-weight: 600;
411
+ color: var(--subtext1);
412
+ margin-bottom: 0.5rem;
413
+ }
414
+
415
+ select {
416
+ width: 100%;
417
+ padding: 0.75rem;
418
+ border: 1px solid var(--surface1);
419
+ border-radius: 6px;
420
+ font-size: 1rem;
421
+ color: var(--text);
422
+ background: var(--surface0);
423
+ cursor: pointer;
424
+ transition: all 0.2s ease;
425
+ }
426
+
427
+ select:hover {
428
+ border-color: var(--surface2);
429
+ }
430
+
431
+ select:focus {
432
+ outline: none;
433
+ border-color: var(--blue);
434
+ box-shadow: 0 0 0 3px rgba(140, 170, 238, 0.1);
435
+ }
436
+
437
+ /* Input Fields */
438
+ .input-label {
439
+ display: block;
440
+ font-weight: 600;
441
+ color: var(--subtext1);
442
+ margin-bottom: 0.5rem;
443
+ }
444
+
445
+ .branch-input {
446
+ width: 300px;
447
+ padding: 0.75rem;
448
+ border: 2px solid var(--surface1);
449
+ border-radius: 6px;
450
+ font-size: 1rem;
451
+ color: var(--text);
452
+ background: var(--surface0);
453
+ transition: all 0.2s ease;
454
+ }
455
+
456
+ .branch-input:hover {
457
+ border-color: var(--surface2);
458
+ }
459
+
460
+ .branch-input:focus {
461
+ outline: none;
462
+ border-color: var(--blue);
463
+ box-shadow: 0 0 0 3px rgba(140, 170, 238, 0.2);
464
+ }
465
+
466
+ /* Buttons */
467
+ .btn {
468
+ padding: 0.75rem 1.5rem;
469
+ border: none;
470
+ border-radius: 6px;
471
+ font-size: 1rem;
472
+ font-weight: 600;
473
+ cursor: pointer;
474
+ transition: all 0.2s ease;
475
+ margin-right: 0.5rem;
476
+ text-transform: none;
477
+ outline: none;
478
+ }
479
+
480
+ .btn:disabled {
481
+ opacity: 0.5;
482
+ cursor: not-allowed;
483
+ }
484
+
485
+ .btn:focus:not(:disabled) {
486
+ outline: 2px solid var(--lavender);
487
+ outline-offset: 2px;
488
+ }
489
+
490
+ .btn:active:not(:disabled) {
491
+ opacity: 0.9;
492
+ }
493
+
494
+ .btn-primary {
495
+ background: var(--blue);
496
+ color: #ffffff;
497
+ box-shadow: 0 2px 4px rgba(30, 102, 245, 0.2);
498
+ }
499
+
500
+ .btn-primary:hover:not(:disabled) {
501
+ background: var(--sapphire);
502
+ }
503
+
504
+ .btn-primary:active:not(:disabled) {
505
+ background: var(--blue);
506
+ opacity: 0.9;
507
+ }
508
+
509
+ .btn-success {
510
+ background: var(--green);
511
+ color: #ffffff;
512
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
513
+ }
514
+
515
+ .btn-success:hover:not(:disabled) {
516
+ background: var(--teal);
517
+ }
518
+
519
+ .btn-success:active:not(:disabled) {
520
+ background: var(--green);
521
+ opacity: 0.9;
522
+ }
523
+
524
+ /* Validation Results */
525
+ .results-section {
526
+ margin-bottom: 2rem;
527
+ }
528
+
529
+ .commits-list {
530
+ max-height: 400px;
531
+ overflow-y: auto;
532
+ border: 2px solid var(--surface0);
533
+ border-radius: 6px;
534
+ padding: 1rem;
535
+ background: var(--mantle);
536
+ }
537
+
538
+ .commits-list:focus {
539
+ outline: 2px solid var(--blue);
540
+ outline-offset: 2px;
541
+ }
542
+
543
+ .commits-list .empty {
544
+ text-align: center;
545
+ color: var(--overlay2);
546
+ padding: 2rem;
547
+ }
548
+
549
+ .commit-item {
550
+ display: flex;
551
+ align-items: flex-start;
552
+ gap: 1rem;
553
+ padding: 1rem;
554
+ padding-left: 1.25rem;
555
+ border-radius: 6px;
556
+ margin-bottom: 0.75rem;
557
+ border: 2px solid var(--surface1);
558
+ border-left-width: 4px;
559
+ transition: all 0.2s ease;
560
+ }
561
+
562
+ .commit-item:hover {
563
+ border-color: var(--surface2);
564
+ }
565
+
566
+ .commit-valid {
567
+ background: rgba(166, 209, 137, 0.08);
568
+ border-color: var(--surface1);
569
+ border-left-color: var(--green);
570
+ }
571
+
572
+ .commit-valid:hover {
573
+ background: rgba(166, 209, 137, 0.12);
574
+ border-color: var(--green);
575
+ }
576
+
577
+ .commit-invalid {
578
+ background: rgba(231, 130, 132, 0.08);
579
+ border-color: var(--surface1);
580
+ border-left-color: var(--red);
581
+ }
582
+
583
+ .commit-invalid:hover {
584
+ background: rgba(231, 130, 132, 0.12);
585
+ border-color: var(--red);
586
+ }
587
+
588
+ .commit-hash {
589
+ display: flex;
590
+ align-items: center;
591
+ gap: 0.5rem;
592
+ }
593
+
594
+ .commit-hash code {
595
+ font-family: 'Courier New', monospace;
596
+ background: var(--base);
597
+ padding: 0.25rem 0.5rem;
598
+ border-radius: 4px;
599
+ font-size: 0.9rem;
600
+ color: var(--text);
601
+ }
602
+
603
+ .commit-details {
604
+ flex: 1;
605
+ }
606
+
607
+ .commit-message {
608
+ font-weight: 600;
609
+ color: var(--text);
610
+ margin-bottom: 0.25rem;
611
+ }
612
+
613
+ .commit-meta {
614
+ font-size: 0.85rem;
615
+ color: var(--text);
616
+ }
617
+
618
+ .commit-error {
619
+ color: var(--red);
620
+ font-weight: 700;
621
+ margin-bottom: 0.25rem;
622
+ font-size: 0.95rem;
623
+ }
624
+
625
+ .commit-error-type {
626
+ font-size: 0.85rem;
627
+ color: var(--maroon);
628
+ font-family: 'Courier New', monospace;
629
+ background: rgba(231, 130, 132, 0.1);
630
+ padding: 0.25rem 0.5rem;
631
+ border-radius: 4px;
632
+ display: inline-block;
633
+ margin-top: 0.25rem;
634
+ }
635
+
636
+ .badge {
637
+ display: inline-flex;
638
+ align-items: center;
639
+ justify-content: center;
640
+ width: 28px;
641
+ height: 28px;
642
+ border-radius: 50%;
643
+ font-size: 0.9rem;
644
+ font-weight: bold;
645
+ flex-shrink: 0;
646
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
647
+ }
648
+
649
+ .badge-success {
650
+ background: var(--green);
651
+ color: var(--crust);
652
+ }
653
+
654
+ .badge-error {
655
+ background: var(--red);
656
+ color: var(--crust);
657
+ }
658
+
659
+ .badge-warning {
660
+ background: var(--peach);
661
+ color: var(--crust);
662
+ }
663
+
664
+ .commit-actions {
665
+ display: flex;
666
+ align-items: center;
667
+ }
668
+
669
+ .ignore-checkbox {
670
+ display: flex;
671
+ align-items: center;
672
+ gap: 0.5rem;
673
+ cursor: pointer;
674
+ user-select: none;
675
+ color: var(--subtext0);
676
+ transition: color 0.2s ease;
677
+ }
678
+
679
+ .ignore-checkbox:hover {
680
+ color: var(--text);
681
+ }
682
+
683
+ .ignore-checkbox input {
684
+ cursor: pointer;
685
+ width: 18px;
686
+ height: 18px;
687
+ accent-color: var(--peach);
688
+ }
689
+
690
+ .ignore-checkbox input:focus {
691
+ outline: 2px solid var(--peach);
692
+ outline-offset: 2px;
693
+ }
694
+
695
+ /* Command Output */
696
+ .command-box {
697
+ background: var(--crust);
698
+ border-radius: 6px;
699
+ padding: 1rem;
700
+ margin-bottom: 1rem;
701
+ }
702
+
703
+ .command-box pre {
704
+ margin: 0;
705
+ background: transparent;
706
+ padding: 0;
707
+ }
708
+
709
+ .command-box code {
710
+ color: var(--green);
711
+ font-family: 'Courier New', monospace;
712
+ font-size: 0.95rem;
713
+ line-height: 1.6;
714
+ }
715
+
716
+ .command-info {
717
+ background: var(--surface0);
718
+ padding: 1rem;
719
+ border-radius: 6px;
720
+ margin-bottom: 1rem;
721
+ }
722
+
723
+ .command-info p {
724
+ margin-bottom: 0.5rem;
725
+ color: var(--subtext1);
726
+ }
727
+
728
+ .warning {
729
+ color: var(--peach);
730
+ font-weight: 600;
731
+ }
732
+
733
+ .commits-list {
734
+ background: var(--surface0);
735
+ padding: 1rem;
736
+ border-radius: 6px;
737
+ }
738
+
739
+ .commit-order-item {
740
+ display: flex;
741
+ align-items: center;
742
+ gap: 0.75rem;
743
+ padding: 0.75rem;
744
+ background: var(--mantle);
745
+ border-radius: 4px;
746
+ margin-bottom: 0.5rem;
747
+ }
748
+
749
+ .order-num {
750
+ display: inline-flex;
751
+ align-items: center;
752
+ justify-content: center;
753
+ width: 28px;
754
+ height: 28px;
755
+ background: var(--blue);
756
+ color: var(--crust);
757
+ border-radius: 50%;
758
+ font-weight: bold;
759
+ font-size: 0.85rem;
760
+ }
761
+
762
+ .commit-msg {
763
+ flex: 1;
764
+ color: var(--subtext1);
765
+ }
766
+
767
+ /* Loading Spinner */
768
+ .loading {
769
+ position: fixed;
770
+ top: 50%;
771
+ left: 50%;
772
+ transform: translate(-50%, -50%);
773
+ background: var(--mantle);
774
+ color: var(--text);
775
+ padding: 1.5rem 2rem;
776
+ border-radius: 8px;
777
+ font-weight: 600;
778
+ z-index: 1000;
779
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
780
+ border: 2px solid var(--surface0);
781
+ }
782
+
783
+ /* Toast Notifications */
784
+ .toast {
785
+ position: fixed;
786
+ bottom: 2rem;
787
+ right: 2rem;
788
+ background: var(--mantle);
789
+ color: var(--text);
790
+ padding: 1rem 1.5rem;
791
+ border-radius: 8px;
792
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
793
+ opacity: 0;
794
+ transform: translateY(20px);
795
+ transition: all 0.3s ease;
796
+ z-index: 1000;
797
+ max-width: 400px;
798
+ }
799
+
800
+ .toast.show {
801
+ opacity: 1;
802
+ transform: translateY(0);
803
+ }
804
+
805
+ .toast-success {
806
+ border-left: 4px solid var(--green);
807
+ }
808
+
809
+ .toast-error {
810
+ border-left: 4px solid var(--red);
811
+ }
812
+
813
+ .toast-info {
814
+ border-left: 4px solid var(--blue);
815
+ }
816
+
817
+ /* Utility Classes for Dynamic Content */
818
+ .success-box {
819
+ background: var(--base);
820
+ padding: 1.5rem;
821
+ border-radius: 8px;
822
+ border-left: 4px solid var(--green);
823
+ }
824
+
825
+ .warning-box {
826
+ background: var(--base);
827
+ padding: 0.75rem;
828
+ border-radius: 6px;
829
+ border-left: 3px solid var(--peach);
830
+ }
831
+
832
+ .info-box {
833
+ background: var(--surface0);
834
+ padding: 1.5rem;
835
+ border-radius: 8px;
836
+ border: 1px solid var(--surface1);
837
+ }
838
+
839
+ .error-box {
840
+ background: var(--base);
841
+ padding: 1rem;
842
+ border-radius: 6px;
843
+ border-top: 1px solid var(--surface1);
844
+ }
845
+
846
+ .success-text {
847
+ color: var(--green);
848
+ font-weight: 600;
849
+ }
850
+
851
+ .warning-text {
852
+ color: var(--peach);
853
+ font-weight: 600;
854
+ }
855
+
856
+ .error-text {
857
+ color: var(--red);
858
+ font-weight: 600;
859
+ }
860
+
861
+ .muted-text {
862
+ color: var(--subtext0);
863
+ font-size: 0.85rem;
864
+ }
865
+
866
+ .strong-text {
867
+ color: var(--text);
868
+ font-weight: 600;
869
+ }
870
+
871
+ .badge-number {
872
+ background: var(--blue);
873
+ color: var(--crust);
874
+ border-radius: 50%;
875
+ width: 28px;
876
+ height: 28px;
877
+ display: inline-flex;
878
+ align-items: center;
879
+ justify-content: center;
880
+ font-size: 0.85rem;
881
+ font-weight: bold;
882
+ flex-shrink: 0;
883
+ }
884
+
885
+ .code-box {
886
+ background: var(--crust);
887
+ border-radius: 6px;
888
+ padding: 1rem;
889
+ margin-bottom: 0.75rem;
890
+ max-height: 200px;
891
+ overflow-y: auto;
892
+ overflow-x: auto;
893
+ }
894
+
895
+ .code-text {
896
+ color: var(--green);
897
+ font-family: 'Courier New', monospace;
898
+ font-size: 0.95rem;
899
+ font-weight: 600;
900
+ word-break: break-all;
901
+ white-space: pre-wrap;
902
+ }
903
+
904
+ .details-summary {
905
+ cursor: pointer;
906
+ font-weight: 600;
907
+ color: var(--text);
908
+ padding: 0.75rem;
909
+ background: var(--surface0);
910
+ border-radius: 6px;
911
+ margin-bottom: 1rem;
912
+ }
913
+
914
+ .details-content {
915
+ max-height: 400px;
916
+ overflow-y: auto;
917
+ border: 2px solid var(--surface1);
918
+ border-radius: 6px;
919
+ padding: 1rem;
920
+ }
921
+
922
+ .details-content:focus {
923
+ outline: 2px solid var(--blue);
924
+ outline-offset: 2px;
925
+ }
926
+
927
+ .inline-code {
928
+ background: var(--surface0);
929
+ padding: 0.25rem 0.5rem;
930
+ border-radius: 4px;
931
+ font-family: 'Courier New', monospace;
932
+ color: var(--text);
933
+ word-break: break-all;
934
+ }
935
+
936
+ .file-code {
937
+ color: var(--text);
938
+ font-weight: 500;
939
+ word-break: break-all;
940
+ font-family: 'Courier New', monospace;
941
+ }
942
+
943
+ /* Footer */
944
+ footer {
945
+ background: var(--mantle);
946
+ padding: 1.5rem;
947
+ text-align: center;
948
+ color: var(--text);
949
+ border-top: 1px solid var(--surface0);
950
+ }
951
+
952
+ footer p {
953
+ color: var(--text);
954
+ margin: 0;
955
+ }
956
+
957
+ /* Animations */
958
+ @keyframes fadeIn {
959
+ from {
960
+ opacity: 0;
961
+ transform: translateY(20px);
962
+ }
963
+ to {
964
+ opacity: 1;
965
+ transform: translateY(0);
966
+ }
967
+ }
968
+
969
+ /* Responsive */
970
+ @media (max-width: 768px) {
971
+ body {
972
+ padding: 1rem;
973
+ }
974
+
975
+ header h1 {
976
+ font-size: 2rem;
977
+ }
978
+
979
+ .container {
980
+ border-radius: 8px;
981
+ }
982
+
983
+ main {
984
+ padding: 1rem;
985
+ }
986
+
987
+ .selector-group {
988
+ grid-template-columns: 1fr;
989
+ }
990
+
991
+ .commit-item {
992
+ flex-direction: column;
993
+ }
994
+ }