@civilization/dsh-git-workbench 0.0.0-stage → 0.4.1

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,1283 @@
1
+ /* IntelliJ IDEA-Grade Git Tool Window Styles (unified DSH design) */
2
+
3
+ .root {
4
+ display: flex;
5
+ flex: 1 1 auto;
6
+ flex-direction: column;
7
+ height: 100%;
8
+ min-height: 0;
9
+ color: var(--dsw-alias-label-primary);
10
+ font-size: var(--dsh-content-font-size-secondary, 13px);
11
+ line-height: 1.5;
12
+ user-select: none;
13
+ background: transparent;
14
+ }
15
+
16
+ /* Header & Branch Banner */
17
+ .header {
18
+ display: flex;
19
+ flex: 0 0 auto;
20
+ gap: 8px;
21
+ align-items: center;
22
+ justify-content: space-between;
23
+ box-sizing: border-box;
24
+ height: 38px;
25
+ padding: 0 10px 0 12px;
26
+ border-bottom: 0.5px solid var(--dsw-alias-border-l2);
27
+ }
28
+
29
+ .branchInfo {
30
+ display: flex;
31
+ align-items: center;
32
+ gap: 6px;
33
+ min-width: 0;
34
+ }
35
+
36
+ .branchBadge {
37
+ display: inline-flex;
38
+ align-items: center;
39
+ gap: 4px;
40
+ padding: 2px 7px;
41
+ border-radius: var(--dsw-radius-sm);
42
+ background: var(--dsw-alias-interactive-bg-hover);
43
+ color: var(--dsw-alias-label-primary);
44
+ font-size: 12px;
45
+ font-weight: 500;
46
+ max-width: 160px;
47
+ overflow: hidden;
48
+ text-overflow: ellipsis;
49
+ white-space: nowrap;
50
+ }
51
+
52
+ .branchIcon {
53
+ color: var(--dsw-alias-state-business-primary);
54
+ flex-shrink: 0;
55
+ }
56
+
57
+ .statusAheadBehind {
58
+ display: inline-flex;
59
+ gap: 4px;
60
+ font-size: 11px;
61
+ font-weight: 600;
62
+ }
63
+
64
+ .aheadText {
65
+ color: var(--dsw-alias-state-business-primary);
66
+ }
67
+
68
+ .behindText {
69
+ color: var(--dsw-alias-state-warn-primary);
70
+ }
71
+
72
+ .headerActions {
73
+ display: flex;
74
+ align-items: center;
75
+ gap: 4px;
76
+ }
77
+
78
+ .iconButton {
79
+ display: inline-flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ width: 26px;
83
+ height: 26px;
84
+ padding: 0;
85
+ border: none;
86
+ border-radius: var(--dsw-radius-sm);
87
+ background: transparent;
88
+ color: var(--dsw-alias-label-secondary);
89
+ cursor: pointer;
90
+ transition: background-color 0.15s, color 0.15s;
91
+ }
92
+
93
+ .iconButton:hover {
94
+ background: var(--dsw-alias-interactive-bg-hover);
95
+ color: var(--dsw-alias-label-primary);
96
+ }
97
+
98
+ .iconButton.spinning svg {
99
+ animation: spin 0.8s linear infinite;
100
+ }
101
+
102
+ @keyframes spin {
103
+ from { transform: rotate(0deg); }
104
+ to { transform: rotate(360deg); }
105
+ }
106
+
107
+ /* Tabs Bar */
108
+ .tabs {
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 4px;
112
+ padding: 4px 10px;
113
+ border-bottom: 0.5px solid var(--dsw-alias-border-l2);
114
+ background: transparent;
115
+ }
116
+
117
+ .tab {
118
+ display: inline-flex;
119
+ align-items: center;
120
+ gap: 5px;
121
+ padding: 4px 10px;
122
+ border: none;
123
+ border-radius: var(--dsw-radius-sm);
124
+ background: transparent;
125
+ color: var(--dsw-alias-label-secondary);
126
+ font-size: 12px;
127
+ font-weight: 500;
128
+ cursor: pointer;
129
+ transition: all 0.15s ease;
130
+ }
131
+
132
+ .tab:hover {
133
+ background: var(--dsw-alias-interactive-bg-hover);
134
+ color: var(--dsw-alias-label-primary);
135
+ }
136
+
137
+ .tabActive {
138
+ background: var(--dsw-alias-interactive-bg-active);
139
+ color: var(--dsw-alias-state-business-primary);
140
+ font-weight: 600;
141
+ }
142
+
143
+ .tabCount {
144
+ display: inline-flex;
145
+ align-items: center;
146
+ justify-content: center;
147
+ padding: 0 5px;
148
+ border-radius: 10px;
149
+ font-size: 10px;
150
+ font-weight: 700;
151
+ background: var(--dsw-alias-interactive-bg-hover);
152
+ color: inherit;
153
+ }
154
+
155
+ /* Content Area */
156
+ .content {
157
+ flex: 1 1 auto;
158
+ overflow-y: auto;
159
+ min-height: 0;
160
+ padding: 8px 10px;
161
+ display: flex;
162
+ flex-direction: column;
163
+ gap: 10px;
164
+ }
165
+
166
+ /* Empty State */
167
+ .emptyState {
168
+ display: flex;
169
+ flex-direction: column;
170
+ align-items: center;
171
+ justify-content: center;
172
+ padding: 32px 16px;
173
+ text-align: center;
174
+ color: var(--dsw-alias-label-tertiary);
175
+ gap: 8px;
176
+ }
177
+
178
+ .emptyState svg {
179
+ width: 28px;
180
+ height: 28px;
181
+ opacity: 0.6;
182
+ }
183
+
184
+ /* Changes Tab Sections */
185
+ .section {
186
+ display: flex;
187
+ flex-direction: column;
188
+ border-radius: var(--dsw-radius-md);
189
+ border: 0.5px solid var(--dsw-alias-border-l2);
190
+ overflow: hidden;
191
+ background: transparent;
192
+ }
193
+
194
+ .sectionHeader {
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: space-between;
198
+ padding: 6px 10px;
199
+ border-bottom: 0.5px solid var(--dsw-alias-border-l1);
200
+ background: var(--dsw-alias-interactive-bg-hover);
201
+ cursor: pointer;
202
+ font-weight: 600;
203
+ font-size: 12px;
204
+ color: var(--dsw-alias-label-primary);
205
+ }
206
+
207
+ .sectionTitle {
208
+ display: flex;
209
+ align-items: center;
210
+ gap: 6px;
211
+ }
212
+
213
+ .sectionActions {
214
+ display: flex;
215
+ align-items: center;
216
+ gap: 4px;
217
+ }
218
+
219
+ .actionTextBtn {
220
+ font-size: 11px;
221
+ padding: 2px 6px;
222
+ border-radius: var(--dsw-radius-xs, 3px);
223
+ border: 0.5px solid var(--dsw-alias-border-l2);
224
+ background: transparent;
225
+ color: var(--dsw-alias-label-secondary);
226
+ cursor: pointer;
227
+ transition: all 0.12s ease;
228
+ }
229
+
230
+ .actionTextBtn:hover {
231
+ background: var(--dsw-alias-interactive-bg-hover);
232
+ color: var(--dsw-alias-label-primary);
233
+ }
234
+
235
+ .fileList {
236
+ display: flex;
237
+ flex-direction: column;
238
+ }
239
+
240
+ .fileItem {
241
+ display: flex;
242
+ align-items: center;
243
+ justify-content: space-between;
244
+ padding: 5px 10px;
245
+ border-top: 0.5px solid var(--dsw-alias-border-l1);
246
+ font-size: 12px;
247
+ cursor: pointer;
248
+ color: var(--dsw-alias-label-primary);
249
+ transition: background 0.12s ease;
250
+ }
251
+
252
+ .fileItem:hover {
253
+ background: var(--dsw-alias-interactive-bg-hover);
254
+ }
255
+
256
+ .fileLeft {
257
+ display: flex;
258
+ align-items: center;
259
+ gap: 6px;
260
+ min-width: 0;
261
+ flex: 1;
262
+ }
263
+
264
+ .statusBadge {
265
+ display: inline-flex;
266
+ align-items: center;
267
+ justify-content: center;
268
+ width: 16px;
269
+ height: 16px;
270
+ border-radius: 3px;
271
+ font-size: 10px;
272
+ font-weight: 700;
273
+ flex-shrink: 0;
274
+ }
275
+
276
+ .statusM {
277
+ background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 15%, transparent);
278
+ color: var(--dsw-alias-state-business-primary);
279
+ }
280
+
281
+ .statusA {
282
+ background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent);
283
+ color: var(--dsw-alias-state-success-primary);
284
+ }
285
+
286
+ .statusD {
287
+ background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 15%, transparent);
288
+ color: var(--dsw-alias-state-error-primary);
289
+ }
290
+
291
+ .statusU {
292
+ background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 15%, transparent);
293
+ color: var(--dsw-alias-state-warn-primary);
294
+ }
295
+
296
+ .fileName {
297
+ overflow: hidden;
298
+ text-overflow: ellipsis;
299
+ white-space: nowrap;
300
+ }
301
+
302
+ .fileDir {
303
+ color: var(--dsw-alias-label-tertiary);
304
+ font-size: 11px;
305
+ }
306
+
307
+ .fileItemActions {
308
+ display: flex;
309
+ align-items: center;
310
+ gap: 4px;
311
+ opacity: 0;
312
+ transition: opacity 0.12s ease;
313
+ }
314
+
315
+ .fileItem:hover .fileItemActions {
316
+ opacity: 1;
317
+ }
318
+
319
+ .fileMiniBtn {
320
+ display: inline-flex;
321
+ align-items: center;
322
+ justify-content: center;
323
+ width: 20px;
324
+ height: 20px;
325
+ border: none;
326
+ border-radius: var(--dsw-radius-xs, 3px);
327
+ background: var(--dsw-alias-interactive-bg-hover);
328
+ color: var(--dsw-alias-label-secondary);
329
+ font-size: 12px;
330
+ cursor: pointer;
331
+ transition: background 0.12s ease, color 0.12s ease;
332
+ }
333
+
334
+ .fileMiniBtn:hover {
335
+ background: var(--dsw-alias-interactive-bg-active);
336
+ color: var(--dsw-alias-label-primary);
337
+ }
338
+
339
+ /* Commit Box (IDEA Style) */
340
+ .commitBox {
341
+ display: flex;
342
+ flex-direction: column;
343
+ gap: 8px;
344
+ padding: 10px;
345
+ border-radius: var(--dsw-radius-md);
346
+ border: 0.5px solid var(--dsw-alias-border-l2);
347
+ background: transparent;
348
+ margin-top: 4px;
349
+ }
350
+
351
+ .commitTextarea {
352
+ width: 100%;
353
+ box-sizing: border-box;
354
+ min-height: 54px;
355
+ max-height: 120px;
356
+ padding: 6px 8px;
357
+ border-radius: var(--dsw-radius-sm);
358
+ border: 0.5px solid var(--dsw-alias-border-l2);
359
+ background: var(--dsw-alias-interactive-bg-hover);
360
+ color: var(--dsw-alias-label-primary);
361
+ font-family: inherit;
362
+ font-size: 12px;
363
+ resize: vertical;
364
+ outline: none;
365
+ }
366
+
367
+ .commitTextarea:focus {
368
+ border-color: var(--dsw-alias-state-business-primary);
369
+ }
370
+
371
+ .commitButtonRow {
372
+ display: flex;
373
+ align-items: center;
374
+ justify-content: flex-end;
375
+ gap: 6px;
376
+ }
377
+
378
+ .commitBtn {
379
+ display: inline-flex;
380
+ align-items: center;
381
+ gap: 4px;
382
+ padding: 4px 12px;
383
+ border-radius: var(--dsw-radius-sm);
384
+ border: none;
385
+ background: var(--dsw-alias-state-success-primary);
386
+ color: var(--dsw-alias-label-primary-inverted);
387
+ font-size: 12px;
388
+ font-weight: 600;
389
+ cursor: pointer;
390
+ transition: background 0.15s ease;
391
+ }
392
+
393
+ .commitBtn:hover {
394
+ background: var(--dsw-alias-state-success-secondary);
395
+ }
396
+
397
+ .commitPushBtn {
398
+ display: inline-flex;
399
+ align-items: center;
400
+ gap: 4px;
401
+ padding: 4px 12px;
402
+ border-radius: var(--dsw-radius-sm);
403
+ border: 0.5px solid var(--dsw-alias-border-l2);
404
+ background: var(--dsw-alias-interactive-bg-hover);
405
+ color: var(--dsw-alias-label-secondary);
406
+ font-size: 12px;
407
+ font-weight: 500;
408
+ cursor: pointer;
409
+ transition: all 0.15s ease;
410
+ }
411
+
412
+ .commitPushBtn:hover {
413
+ background: var(--dsw-alias-interactive-bg-active);
414
+ color: var(--dsw-alias-label-primary);
415
+ }
416
+
417
+ /* Git DAG Topology Log & Tree */
418
+ .treeContainer {
419
+ position: relative;
420
+ display: flex;
421
+ flex-direction: column;
422
+ min-height: 0;
423
+ gap: 0;
424
+ }
425
+
426
+ .treeRow {
427
+ display: flex;
428
+ align-items: center;
429
+ height: 28px;
430
+ padding: 0 6px;
431
+ border-radius: var(--dsw-radius-sm);
432
+ font-size: 12px;
433
+ cursor: pointer;
434
+ color: var(--dsw-alias-label-primary);
435
+ transition: background 0.12s ease;
436
+ user-select: none;
437
+ }
438
+
439
+ .treeRow:hover {
440
+ background: var(--dsw-alias-interactive-bg-hover);
441
+ }
442
+
443
+ .treeRowSelected {
444
+ background: var(--dsw-alias-interactive-bg-active) !important;
445
+ color: var(--dsw-alias-state-business-primary);
446
+ }
447
+
448
+ .graphSvg {
449
+ flex-shrink: 0;
450
+ height: 28px;
451
+ margin-right: 6px;
452
+ }
453
+
454
+ .graphOverlaySvg {
455
+ position: absolute;
456
+ top: 0;
457
+ left: 10px;
458
+ pointer-events: none;
459
+ z-index: 1;
460
+ }
461
+
462
+ .treeBody {
463
+ display: flex;
464
+ align-items: center;
465
+ gap: 6px;
466
+ min-width: 0;
467
+ flex: 1;
468
+ }
469
+
470
+ .refBadge {
471
+ display: inline-flex;
472
+ align-items: center;
473
+ padding: 1px 5px;
474
+ border-radius: 10px;
475
+ font-size: 10px;
476
+ font-weight: 700;
477
+ line-height: 12px;
478
+ white-space: nowrap;
479
+ flex-shrink: 0;
480
+ }
481
+
482
+ .refHead {
483
+ background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 18%, transparent);
484
+ color: var(--dsw-alias-state-warn-primary);
485
+ border: 0.5px solid var(--dsw-alias-state-warn-primary);
486
+ }
487
+
488
+ .refBranch {
489
+ background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 18%, transparent);
490
+ color: var(--dsw-alias-state-success-primary);
491
+ border: 0.5px solid var(--dsw-alias-state-success-primary);
492
+ }
493
+
494
+ .refRemote {
495
+ background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 18%, transparent);
496
+ color: var(--dsw-alias-state-business-primary);
497
+ border: 0.5px solid var(--dsw-alias-state-business-primary);
498
+ }
499
+
500
+ .treeSubject {
501
+ overflow: hidden;
502
+ text-overflow: ellipsis;
503
+ white-space: nowrap;
504
+ flex: 1;
505
+ font-weight: 500;
506
+ }
507
+
508
+ .treeAuthor {
509
+ color: var(--dsw-alias-label-tertiary);
510
+ font-size: 11px;
511
+ white-space: nowrap;
512
+ flex-shrink: 0;
513
+ max-width: 80px;
514
+ overflow: hidden;
515
+ text-overflow: ellipsis;
516
+ }
517
+
518
+ .treeTime {
519
+ color: var(--dsw-alias-label-tertiary);
520
+ font-size: 11px;
521
+ white-space: nowrap;
522
+ flex-shrink: 0;
523
+ }
524
+
525
+ .treeHash {
526
+ font-family: monospace;
527
+ font-size: 11px;
528
+ color: var(--dsw-alias-label-secondary);
529
+ background: var(--dsw-alias-interactive-bg-hover);
530
+ padding: 0 4px;
531
+ border-radius: var(--dsw-radius-xs, 3px);
532
+ flex-shrink: 0;
533
+ }
534
+
535
+ /* Commit Details & Changed Files Panel */
536
+ .commitDetailPanel {
537
+ display: flex;
538
+ flex-direction: column;
539
+ gap: 8px;
540
+ padding: 12px;
541
+ border-radius: var(--dsw-radius-lg);
542
+ border: 0.5px solid var(--dsw-alias-border-l2);
543
+ background: var(--dsw-specific-menu);
544
+ backdrop-filter: var(--dsw-menu-backdrop-filter);
545
+ --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
546
+ box-shadow: var(--dsw-elevation-prominent);
547
+ color: var(--dsw-alias-label-primary);
548
+ margin-top: 8px;
549
+ }
550
+
551
+ .detailHeader {
552
+ display: flex;
553
+ flex-direction: column;
554
+ gap: 4px;
555
+ border-bottom: 0.5px solid var(--dsw-alias-border-l2);
556
+ padding-bottom: 8px;
557
+ }
558
+
559
+ .detailSubject {
560
+ font-weight: 600;
561
+ font-size: 13px;
562
+ color: var(--dsw-alias-label-primary);
563
+ }
564
+
565
+ .detailMetaRow {
566
+ display: flex;
567
+ align-items: center;
568
+ justify-content: space-between;
569
+ font-size: 11px;
570
+ color: var(--dsw-alias-label-tertiary);
571
+ }
572
+
573
+ .detailFilesList {
574
+ display: flex;
575
+ flex-direction: column;
576
+ gap: 2px;
577
+ max-height: 180px;
578
+ overflow-y: auto;
579
+ }
580
+
581
+ .detailFileItem {
582
+ display: flex;
583
+ align-items: center;
584
+ justify-content: space-between;
585
+ padding: 4px 6px;
586
+ border-radius: var(--dsw-radius-sm);
587
+ font-size: 11px;
588
+ cursor: pointer;
589
+ color: var(--dsw-alias-label-primary);
590
+ transition: background 0.12s ease;
591
+ }
592
+
593
+ .detailFileItem:hover {
594
+ background: var(--dsw-alias-interactive-bg-hover);
595
+ }
596
+
597
+ .numstat {
598
+ display: inline-flex;
599
+ gap: 4px;
600
+ font-family: monospace;
601
+ font-size: 10px;
602
+ }
603
+
604
+ .addStat { color: var(--dsw-alias-state-success-primary); }
605
+ .delStat { color: var(--dsw-alias-state-error-primary); }
606
+
607
+ /* Diff Viewer */
608
+ .diffViewer {
609
+ display: flex;
610
+ flex-direction: column;
611
+ gap: 6px;
612
+ padding: 8px;
613
+ border-radius: var(--dsw-radius-md);
614
+ background: var(--dsw-alias-markdown-code-block);
615
+ border: 0.5px solid var(--dsw-alias-border-l2);
616
+ font-family: monospace;
617
+ font-size: 11px;
618
+ max-height: 260px;
619
+ overflow: auto;
620
+ color: var(--dsw-alias-label-primary);
621
+ }
622
+
623
+ .diffLine {
624
+ white-space: pre-wrap;
625
+ word-break: break-all;
626
+ line-height: 16px;
627
+ }
628
+
629
+ .diffAdd {
630
+ background: var(--dsw-alias-code-diff-added);
631
+ color: var(--dsw-alias-state-success-primary);
632
+ }
633
+
634
+ .diffDel {
635
+ background: var(--dsw-alias-code-diff-deleted);
636
+ color: var(--dsw-alias-state-error-primary);
637
+ }
638
+
639
+ .diffHunk {
640
+ background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 12%, transparent);
641
+ color: var(--dsw-alias-state-business-primary);
642
+ font-weight: 600;
643
+ }
644
+
645
+ /* Tag ref badge in commit graph tree */
646
+ .refTag {
647
+ background: color-mix(in srgb, #f0883e 18%, transparent);
648
+ color: #f0883e;
649
+ border: 0.5px solid #f0883e;
650
+ }
651
+
652
+ /* Commit row highlight and locate pulse */
653
+ .treeRowHighlighted {
654
+ animation: rowGlow 2.5s ease-out forwards;
655
+ border-left: 2px solid var(--dsw-alias-state-business-primary);
656
+ }
657
+
658
+ @keyframes rowGlow {
659
+ 0% {
660
+ background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 35%, transparent);
661
+ box-shadow: inset 0 0 12px color-mix(in srgb, var(--dsw-alias-state-business-primary) 40%, transparent);
662
+ }
663
+ 40% {
664
+ background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 25%, transparent);
665
+ box-shadow: inset 0 0 8px color-mix(in srgb, var(--dsw-alias-state-business-primary) 20%, transparent);
666
+ }
667
+ 100% {
668
+ background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 12%, transparent);
669
+ box-shadow: none;
670
+ }
671
+ }
672
+
673
+ .locateGlowRing {
674
+ animation: pulseRing 1.5s ease-in-out infinite;
675
+ transform-origin: center;
676
+ stroke: var(--dsw-alias-state-business-primary);
677
+ stroke-width: 2;
678
+ fill: none;
679
+ }
680
+
681
+ @keyframes pulseRing {
682
+ 0% {
683
+ r: 6;
684
+ opacity: 1;
685
+ }
686
+ 50% {
687
+ r: 10;
688
+ opacity: 0.4;
689
+ }
690
+ 100% {
691
+ r: 12;
692
+ opacity: 0;
693
+ }
694
+ }
695
+
696
+ .treeRowActions {
697
+ display: flex;
698
+ align-items: center;
699
+ gap: 2px;
700
+ opacity: 0;
701
+ transition: opacity 0.12s ease;
702
+ margin-left: 4px;
703
+ }
704
+
705
+ .treeRow:hover .treeRowActions {
706
+ opacity: 1;
707
+ }
708
+
709
+ .treeActionBtn {
710
+ display: inline-flex;
711
+ align-items: center;
712
+ justify-content: center;
713
+ padding: 1px 4px;
714
+ height: 18px;
715
+ border: none;
716
+ border-radius: var(--dsw-radius-xs, 3px);
717
+ background: var(--dsw-alias-interactive-bg-hover);
718
+ color: var(--dsw-alias-label-secondary);
719
+ font-size: 10px;
720
+ cursor: pointer;
721
+ transition: background 0.12s ease, color 0.12s ease;
722
+ }
723
+
724
+ .treeActionBtn:hover {
725
+ background: var(--dsw-alias-interactive-bg-active);
726
+ color: var(--dsw-alias-label-primary);
727
+ }
728
+
729
+ /* GitHub-Grade Tags Tab & Cards */
730
+ .tagList {
731
+ display: flex;
732
+ flex-direction: column;
733
+ gap: 6px;
734
+ }
735
+
736
+ .tagCard {
737
+ display: flex;
738
+ flex-direction: column;
739
+ gap: 6px;
740
+ padding: 10px 12px;
741
+ border-radius: var(--dsw-radius-md);
742
+ border: 0.5px solid var(--dsw-alias-border-l2);
743
+ background: var(--dsw-alias-interactive-bg-hover);
744
+ transition: border-color 0.15s ease, background 0.15s ease;
745
+ }
746
+
747
+ .tagCard:hover {
748
+ border-color: var(--dsw-alias-border-l1);
749
+ background: var(--dsw-alias-interactive-bg-active);
750
+ }
751
+
752
+ .tagCardHeader {
753
+ display: flex;
754
+ align-items: center;
755
+ justify-content: space-between;
756
+ gap: 8px;
757
+ }
758
+
759
+ .tagTitleRow {
760
+ display: flex;
761
+ align-items: center;
762
+ gap: 8px;
763
+ min-width: 0;
764
+ flex: 1;
765
+ }
766
+
767
+ .tagName {
768
+ font-weight: 600;
769
+ font-size: 13px;
770
+ color: var(--dsw-alias-state-business-primary);
771
+ cursor: pointer;
772
+ overflow: hidden;
773
+ text-overflow: ellipsis;
774
+ white-space: nowrap;
775
+ }
776
+
777
+ .tagName:hover {
778
+ text-decoration: underline;
779
+ }
780
+
781
+ .tagShaPill {
782
+ font-family: monospace;
783
+ font-size: 11px;
784
+ padding: 1px 6px;
785
+ border-radius: var(--dsw-radius-xs, 3px);
786
+ background: color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent);
787
+ color: var(--dsw-alias-label-secondary);
788
+ cursor: pointer;
789
+ }
790
+
791
+ .tagShaPill:hover {
792
+ background: color-mix(in srgb, var(--dsw-alias-label-primary) 15%, transparent);
793
+ color: var(--dsw-alias-label-primary);
794
+ }
795
+
796
+ .tagAnnotatedBadge {
797
+ font-size: 10px;
798
+ font-weight: 600;
799
+ padding: 1px 5px;
800
+ border-radius: 8px;
801
+ background: color-mix(in srgb, #f0883e 18%, transparent);
802
+ color: #f0883e;
803
+ border: 0.5px solid #f0883e;
804
+ }
805
+
806
+ .tagActions {
807
+ display: flex;
808
+ align-items: center;
809
+ gap: 4px;
810
+ flex-shrink: 0;
811
+ }
812
+
813
+ .tagLocateBtn {
814
+ display: inline-flex;
815
+ align-items: center;
816
+ gap: 4px;
817
+ padding: 3px 8px;
818
+ border: 0.5px solid color-mix(in srgb, var(--dsw-alias-state-business-primary) 40%, transparent);
819
+ border-radius: var(--dsw-radius-sm);
820
+ background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 12%, transparent);
821
+ color: var(--dsw-alias-state-business-primary);
822
+ font-size: 11px;
823
+ font-weight: 600;
824
+ cursor: pointer;
825
+ transition: all 0.15s ease;
826
+ }
827
+
828
+ .tagLocateBtn:hover {
829
+ background: var(--dsw-alias-state-business-primary);
830
+ color: #ffffff;
831
+ }
832
+
833
+ .tagMessage {
834
+ font-size: 12px;
835
+ color: var(--dsw-alias-label-secondary);
836
+ overflow: hidden;
837
+ text-overflow: ellipsis;
838
+ white-space: nowrap;
839
+ }
840
+
841
+ .tagMetaFooter {
842
+ display: flex;
843
+ align-items: center;
844
+ justify-content: space-between;
845
+ font-size: 11px;
846
+ color: var(--dsw-alias-label-tertiary);
847
+ margin-top: 2px;
848
+ }
849
+
850
+ .tagAuthor {
851
+ display: inline-flex;
852
+ align-items: center;
853
+ gap: 4px;
854
+ color: var(--dsw-alias-label-secondary);
855
+ }
856
+
857
+ .tagForm {
858
+ display: flex;
859
+ flex-direction: column;
860
+ gap: 8px;
861
+ padding: 12px;
862
+ border-radius: var(--dsw-radius-md);
863
+ border: 0.5px solid var(--dsw-alias-border-l1);
864
+ background: var(--dsw-alias-interactive-bg-hover);
865
+ }
866
+
867
+ .tagFormTitle {
868
+ font-size: 12px;
869
+ font-weight: 600;
870
+ color: var(--dsw-alias-label-primary);
871
+ }
872
+
873
+ .tagFormActions {
874
+ display: flex;
875
+ justify-content: flex-end;
876
+ gap: 6px;
877
+ }
878
+
879
+ /* --- IntelliJ / GitHub Workstation Table & Columnar Grid Styles --- */
880
+
881
+ .treeFilterRow {
882
+ display: flex;
883
+ align-items: center;
884
+ justify-content: space-between;
885
+ gap: 8px;
886
+ padding: 6px 12px;
887
+ border-bottom: 0.5px solid var(--dsw-alias-border-l2);
888
+ background: transparent;
889
+ flex-shrink: 0;
890
+ }
891
+
892
+ .treeSearchInput {
893
+ flex: 1;
894
+ min-width: 0;
895
+ height: 26px;
896
+ padding: 0 8px;
897
+ border-radius: var(--dsw-radius-sm);
898
+ border: 0.5px solid var(--dsw-alias-border-l2);
899
+ background: var(--dsw-alias-interactive-bg-hover);
900
+ color: var(--dsw-alias-label-primary);
901
+ font-size: 11px;
902
+ outline: none;
903
+ transition: border-color 0.15s ease;
904
+ }
905
+
906
+ .treeSearchInput:focus {
907
+ border-color: var(--dsw-alias-state-business-primary);
908
+ }
909
+
910
+ .mainlineToggleGroup {
911
+ display: inline-flex;
912
+ align-items: center;
913
+ padding: 1px;
914
+ border-radius: var(--dsw-radius-sm);
915
+ background: var(--dsw-alias-interactive-bg-hover);
916
+ border: 0.5px solid var(--dsw-alias-border-l2);
917
+ flex-shrink: 0;
918
+ }
919
+
920
+ .mainlineToggleBtn {
921
+ padding: 2px 8px;
922
+ border: none;
923
+ border-radius: var(--dsw-radius-xs, 3px);
924
+ background: transparent;
925
+ color: var(--dsw-alias-label-tertiary);
926
+ font-size: 11px;
927
+ font-weight: 500;
928
+ cursor: pointer;
929
+ transition: all 0.12s ease;
930
+ }
931
+
932
+ .mainlineToggleBtnActive {
933
+ background: var(--dsw-alias-interactive-bg-active);
934
+ color: var(--dsw-alias-label-primary);
935
+ font-weight: 600;
936
+ }
937
+
938
+ /* Two-column Workstation Layout */
939
+ .workstationLayout {
940
+ container-type: inline-size;
941
+ display: flex;
942
+ flex: 1 1 auto;
943
+ min-height: 0;
944
+ overflow: hidden;
945
+ }
946
+
947
+ .tablePane {
948
+ display: flex;
949
+ flex-direction: column;
950
+ flex: 1 1 auto;
951
+ min-width: 0;
952
+ min-height: 0;
953
+ overflow-y: auto;
954
+ }
955
+
956
+ /* Columnar Grid Table Header */
957
+ .treeTableHeader {
958
+ display: grid;
959
+ grid-template-columns: var(--git-graph-col-width, 48px) minmax(200px, 1fr) 115px 90px 72px;
960
+ align-items: center;
961
+ gap: 8px;
962
+ height: 28px;
963
+ padding: 0 10px;
964
+ border-bottom: 0.5px solid var(--dsw-alias-border-l2);
965
+ background: color-mix(in srgb, var(--dsw-alias-label-primary) 3%, transparent);
966
+ color: var(--dsw-alias-label-tertiary);
967
+ font-size: 11px;
968
+ font-weight: 600;
969
+ user-select: none;
970
+ position: sticky;
971
+ top: 0;
972
+ z-index: 2;
973
+ }
974
+
975
+ .colHeaderTitle {
976
+ white-space: nowrap;
977
+ overflow: hidden;
978
+ text-overflow: ellipsis;
979
+ }
980
+
981
+ /* Columnar Grid Table Row */
982
+ .treeRowGrid {
983
+ box-sizing: border-box;
984
+ display: grid;
985
+ grid-template-columns: var(--git-graph-col-width, 48px) minmax(200px, 1fr) 115px 90px 72px;
986
+ align-items: center;
987
+ gap: 8px;
988
+ min-height: 28px;
989
+ height: 28px;
990
+ max-height: 28px;
991
+ padding: 0 10px;
992
+ border-bottom: 0.5px solid color-mix(in srgb, var(--dsw-alias-border-l2) 40%, transparent);
993
+ color: var(--dsw-alias-label-primary);
994
+ font-size: 12px;
995
+ cursor: pointer;
996
+ transition: background 0.1s ease;
997
+ user-select: none;
998
+ }
999
+
1000
+ .treeRowGrid:hover {
1001
+ background: var(--dsw-alias-interactive-bg-hover);
1002
+ }
1003
+
1004
+ .treeRowGridSelected {
1005
+ background: var(--dsw-alias-interactive-bg-active) !important;
1006
+ color: var(--dsw-alias-state-business-primary);
1007
+ }
1008
+
1009
+ .subjectCol {
1010
+ display: flex;
1011
+ align-items: center;
1012
+ gap: 6px;
1013
+ min-width: 0;
1014
+ overflow: hidden;
1015
+ }
1016
+
1017
+ /* Conventional Commits Type Badges */
1018
+ .typeBadge {
1019
+ display: inline-flex;
1020
+ align-items: center;
1021
+ justify-content: center;
1022
+ padding: 0 5px;
1023
+ height: 16px;
1024
+ border-radius: var(--dsw-radius-xs, 3px);
1025
+ font-size: 10px;
1026
+ font-weight: 600;
1027
+ line-height: 16px;
1028
+ text-transform: lowercase;
1029
+ flex-shrink: 0;
1030
+ }
1031
+
1032
+ .typeFeat {
1033
+ background: color-mix(in srgb, #2ea043 16%, transparent);
1034
+ color: #2ea043;
1035
+ border: 0.5px solid color-mix(in srgb, #2ea043 40%, transparent);
1036
+ }
1037
+
1038
+ .typeFix {
1039
+ background: color-mix(in srgb, #f85149 16%, transparent);
1040
+ color: #f85149;
1041
+ border: 0.5px solid color-mix(in srgb, #f85149 40%, transparent);
1042
+ }
1043
+
1044
+ .typeStyle, .typeRefactor {
1045
+ background: color-mix(in srgb, #8250df 16%, transparent);
1046
+ color: #8250df;
1047
+ border: 0.5px solid color-mix(in srgb, #8250df 40%, transparent);
1048
+ }
1049
+
1050
+ .typeRelease {
1051
+ background: color-mix(in srgb, #388bfd 16%, transparent);
1052
+ color: #388bfd;
1053
+ border: 0.5px solid color-mix(in srgb, #388bfd 40%, transparent);
1054
+ }
1055
+
1056
+ .typeMerge {
1057
+ background: color-mix(in srgb, #6f42c1 16%, transparent);
1058
+ color: #6f42c1;
1059
+ border: 0.5px solid color-mix(in srgb, #6f42c1 40%, transparent);
1060
+ }
1061
+
1062
+ .typeTest {
1063
+ background: color-mix(in srgb, #d29922 16%, transparent);
1064
+ color: #d29922;
1065
+ border: 0.5px solid color-mix(in srgb, #d29922 40%, transparent);
1066
+ }
1067
+
1068
+ .typeDocs {
1069
+ background: color-mix(in srgb, #39c5bb 16%, transparent);
1070
+ color: #39c5bb;
1071
+ border: 0.5px solid color-mix(in srgb, #39c5bb 40%, transparent);
1072
+ }
1073
+
1074
+ .typeChore, .typeRevert {
1075
+ background: color-mix(in srgb, var(--dsw-alias-label-secondary) 14%, transparent);
1076
+ color: var(--dsw-alias-label-secondary);
1077
+ border: 0.5px solid color-mix(in srgb, var(--dsw-alias-label-secondary) 30%, transparent);
1078
+ }
1079
+
1080
+ /* Author Column & Avatar */
1081
+ .authorCol {
1082
+ display: flex;
1083
+ align-items: center;
1084
+ gap: 6px;
1085
+ min-width: 0;
1086
+ overflow: hidden;
1087
+ }
1088
+
1089
+ .authorAvatar {
1090
+ display: inline-flex;
1091
+ align-items: center;
1092
+ justify-content: center;
1093
+ width: 16px;
1094
+ height: 16px;
1095
+ border-radius: 50%;
1096
+ color: #ffffff;
1097
+ font-size: 9px;
1098
+ font-weight: 700;
1099
+ flex-shrink: 0;
1100
+ }
1101
+
1102
+ .authorNameText {
1103
+ color: var(--dsw-alias-label-secondary);
1104
+ font-size: 11px;
1105
+ white-space: nowrap;
1106
+ overflow: hidden;
1107
+ text-overflow: ellipsis;
1108
+ }
1109
+
1110
+ /* Time & Hash Column */
1111
+ .timeCol {
1112
+ color: var(--dsw-alias-label-tertiary);
1113
+ font-size: 11px;
1114
+ white-space: nowrap;
1115
+ overflow: hidden;
1116
+ text-overflow: ellipsis;
1117
+ }
1118
+
1119
+ .shaCol {
1120
+ font-family: monospace;
1121
+ font-size: 11px;
1122
+ color: var(--dsw-alias-label-secondary);
1123
+ white-space: nowrap;
1124
+ }
1125
+
1126
+ /* Details Panel (Commit Details Board) */
1127
+ .detailsPane {
1128
+ display: flex;
1129
+ flex-direction: column;
1130
+ width: 330px;
1131
+ flex-shrink: 0;
1132
+ border-left: 0.5px solid var(--dsw-alias-border-l2);
1133
+ background: var(--dsw-specific-menu);
1134
+ backdrop-filter: var(--dsw-menu-backdrop-filter);
1135
+ overflow-y: auto;
1136
+ box-sizing: border-box;
1137
+ }
1138
+
1139
+ .detailsHeader {
1140
+ display: flex;
1141
+ align-items: center;
1142
+ justify-content: space-between;
1143
+ padding: 10px 12px;
1144
+ border-bottom: 0.5px solid var(--dsw-alias-border-l2);
1145
+ font-size: 11px;
1146
+ font-weight: 700;
1147
+ color: var(--dsw-alias-label-primary);
1148
+ letter-spacing: 0.5px;
1149
+ }
1150
+
1151
+ .detailsContent {
1152
+ display: flex;
1153
+ flex-direction: column;
1154
+ gap: 12px;
1155
+ padding: 12px;
1156
+ }
1157
+
1158
+ .detailsSubject {
1159
+ font-weight: 600;
1160
+ font-size: 13px;
1161
+ line-height: 18px;
1162
+ color: var(--dsw-alias-label-primary);
1163
+ }
1164
+
1165
+ .detailsBody {
1166
+ font-size: 11px;
1167
+ line-height: 16px;
1168
+ color: var(--dsw-alias-label-secondary);
1169
+ white-space: pre-wrap;
1170
+ word-break: break-word;
1171
+ }
1172
+
1173
+ .detailsSectionTitle {
1174
+ font-size: 10px;
1175
+ font-weight: 700;
1176
+ color: var(--dsw-alias-label-tertiary);
1177
+ letter-spacing: 0.5px;
1178
+ margin-bottom: 4px;
1179
+ }
1180
+
1181
+ .detailsMetaGrid {
1182
+ display: flex;
1183
+ flex-direction: column;
1184
+ gap: 6px;
1185
+ font-size: 11px;
1186
+ }
1187
+
1188
+ .detailsMetaRow {
1189
+ display: flex;
1190
+ align-items: center;
1191
+ justify-content: space-between;
1192
+ gap: 8px;
1193
+ }
1194
+
1195
+ .detailsMetaLabel {
1196
+ color: var(--dsw-alias-label-tertiary);
1197
+ flex-shrink: 0;
1198
+ }
1199
+
1200
+ .detailsMetaVal {
1201
+ color: var(--dsw-alias-label-primary);
1202
+ font-family: monospace;
1203
+ overflow: hidden;
1204
+ text-overflow: ellipsis;
1205
+ white-space: nowrap;
1206
+ }
1207
+
1208
+ .detailsParentLink {
1209
+ color: var(--dsw-alias-state-business-primary);
1210
+ cursor: pointer;
1211
+ font-family: monospace;
1212
+ }
1213
+
1214
+ .detailsParentLink:hover {
1215
+ text-decoration: underline;
1216
+ }
1217
+
1218
+ .detailsBottomActions {
1219
+ display: flex;
1220
+ gap: 8px;
1221
+ margin-top: 8px;
1222
+ }
1223
+
1224
+ /* Bottom Status Footer */
1225
+ .treeStatusFooter {
1226
+ display: flex;
1227
+ align-items: center;
1228
+ justify-content: space-between;
1229
+ height: 26px;
1230
+ padding: 0 10px;
1231
+ border-top: 0.5px solid var(--dsw-alias-border-l2);
1232
+ background: color-mix(in srgb, var(--dsw-alias-label-primary) 2%, transparent);
1233
+ font-size: 11px;
1234
+ color: var(--dsw-alias-label-tertiary);
1235
+ flex-shrink: 0;
1236
+ user-select: none;
1237
+ }
1238
+
1239
+ .footerSyncStatus {
1240
+ display: flex;
1241
+ align-items: center;
1242
+ gap: 6px;
1243
+ }
1244
+
1245
+ .syncDot {
1246
+ width: 6px;
1247
+ height: 6px;
1248
+ border-radius: 50%;
1249
+ background: var(--dsw-alias-state-success-primary);
1250
+ }
1251
+
1252
+ .footerStats {
1253
+ display: flex;
1254
+ align-items: center;
1255
+ gap: 8px;
1256
+ }
1257
+
1258
+ .loadMoreLink {
1259
+ color: var(--dsw-alias-state-business-primary);
1260
+ cursor: pointer;
1261
+ font-weight: 500;
1262
+ }
1263
+
1264
+ .loadMoreLink:hover {
1265
+ text-decoration: underline;
1266
+ }
1267
+
1268
+ @container (max-width: 680px) {
1269
+ .workstationLayout {
1270
+ flex-direction: column;
1271
+ }
1272
+ .tablePane {
1273
+ flex: 1 1 auto;
1274
+ min-height: 160px;
1275
+ }
1276
+ .detailsPane {
1277
+ width: 100% !important;
1278
+ max-height: 340px;
1279
+ flex-shrink: 0;
1280
+ border-left: none !important;
1281
+ border-top: 0.5px solid var(--dsw-alias-border-l2);
1282
+ }
1283
+ }