Skip to content

Commit 75c2a4d

Browse files
DimillianDimillian
committed
style(diff): refresh diff and log panels with flatter compact styling
1 parent 58a4efd commit 75c2a4d

1 file changed

Lines changed: 60 additions & 52 deletions

File tree

‎src/styles/diff.css‎

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,12 @@
8080
.git-panel-overview {
8181
display: flex;
8282
flex-direction: column;
83-
gap: 8px;
84-
padding: 12px;
85-
border-radius: 18px;
86-
border: 1px solid var(--cm-border-default);
87-
background: var(--cm-surface-panel-soft);
83+
gap: 10px;
84+
padding: 0 0 12px;
85+
border-radius: 0;
86+
border: 0;
87+
border-bottom: 1px solid var(--cm-border-soft);
88+
background: transparent;
8889
}
8990

9091
.git-panel-overview-status {
@@ -280,7 +281,7 @@
280281
.git-root-list {
281282
display: flex;
282283
flex-direction: column;
283-
gap: 8px;
284+
gap: 2px;
284285
}
285286

286287
.git-root-item {
@@ -289,25 +290,24 @@
289290
gap: 8px;
290291
width: 100%;
291292
text-align: left;
292-
border: 1px solid var(--cm-border-soft);
293-
background: var(--cm-surface-row);
293+
border: 0;
294+
background: transparent;
294295
color: var(--text-emphasis);
295-
padding: 10px 12px;
296-
border-radius: 14px;
296+
padding: 9px 10px;
297+
border-radius: 12px;
297298
font-size: 12px;
298299
box-shadow: none;
299300
transform: none;
300-
transition: background 160ms ease, border-color 160ms ease;
301+
transition: background 160ms ease;
301302
}
302303

303304
.git-root-item.active {
304305
background: var(--cm-surface-panel-active);
305-
border-color: var(--cm-border-accent-strong);
306+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-border-accent) 55%, transparent);
306307
}
307308

308309
.git-root-item:hover {
309310
background: var(--cm-surface-panel-hover);
310-
border-color: var(--cm-border-hover);
311311
box-shadow: none;
312312
transform: none;
313313
}
@@ -350,11 +350,16 @@
350350
.diff-section {
351351
display: flex;
352352
flex-direction: column;
353-
gap: 10px;
354-
padding: 12px;
355-
border-radius: 18px;
356-
background: var(--cm-surface-panel-soft);
357-
border: 1px solid var(--cm-border-default);
353+
gap: 8px;
354+
padding: 0;
355+
border-radius: 0;
356+
background: transparent;
357+
border: 0;
358+
}
359+
360+
.diff-section + .diff-section {
361+
padding-top: 12px;
362+
border-top: 1px solid var(--cm-border-soft);
358363
}
359364

360365
.diff-section-title {
@@ -409,13 +414,13 @@
409414
.diff-section-list {
410415
display: flex;
411416
flex-direction: column;
412-
gap: 8px;
417+
gap: 2px;
413418
}
414419

415420
.per-file-tree {
416421
display: flex;
417422
flex-direction: column;
418-
gap: 10px;
423+
gap: 12px;
419424
overflow-y: auto;
420425
overflow-x: hidden;
421426
flex: 1;
@@ -426,10 +431,14 @@
426431
}
427432

428433
.per-file-group {
429-
border: 1px solid var(--cm-border-default);
430-
border-radius: 16px;
431-
background: var(--cm-surface-panel-soft);
432-
overflow: hidden;
434+
display: flex;
435+
flex-direction: column;
436+
gap: 6px;
437+
}
438+
439+
.per-file-group + .per-file-group {
440+
padding-top: 12px;
441+
border-top: 1px solid var(--cm-border-soft);
433442
}
434443

435444
.per-file-group-row {
@@ -441,7 +450,8 @@
441450
border: 0;
442451
background: transparent;
443452
color: var(--text-emphasis);
444-
padding: 12px 14px;
453+
padding: 9px 10px;
454+
border-radius: 12px;
445455
cursor: pointer;
446456
text-align: left;
447457
box-shadow: none;
@@ -481,39 +491,38 @@
481491
.per-file-edit-list {
482492
display: flex;
483493
flex-direction: column;
484-
gap: 8px;
485-
padding: 0 12px 12px 26px;
486-
border-top: 1px solid var(--cm-border-soft);
494+
gap: 2px;
495+
padding: 0 0 0 22px;
496+
border-top: 0;
487497
}
488498

489499
.per-file-edit-row {
490500
width: 100%;
491-
border: 1px solid var(--border-muted);
501+
border: 0;
492502
border-radius: 12px;
493-
background: var(--cm-surface-row);
503+
background: transparent;
494504
color: var(--text-emphasis);
495505
display: grid;
496506
grid-template-columns: 16px minmax(0, 1fr) auto;
497507
align-items: center;
498508
gap: 8px;
499-
padding: 9px 10px;
509+
padding: 8px 10px;
500510
cursor: pointer;
501511
text-align: left;
502512
box-shadow: none;
503513
transform: none;
504-
transition: background 160ms ease, border-color 160ms ease;
514+
transition: background 160ms ease;
505515
}
506516

507517
.per-file-edit-row:hover {
508518
background: var(--cm-surface-panel-hover);
509-
border-color: var(--cm-border-hover);
510519
box-shadow: none;
511520
transform: none;
512521
}
513522

514523
.per-file-edit-row.active {
515524
background: var(--cm-surface-panel-active);
516-
border-color: var(--cm-border-accent-strong);
525+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-border-accent) 55%, transparent);
517526
}
518527

519528
.per-file-edit-status {
@@ -632,12 +641,12 @@
632641
grid-template-columns: 16px minmax(0, 1fr) auto;
633642
column-gap: 8px;
634643
align-items: center;
635-
padding: 7px 10px;
644+
padding: 8px 10px;
636645
border-radius: 12px;
637646
cursor: pointer;
638-
border: 1px solid var(--cm-border-soft);
639-
background: var(--cm-surface-row);
640-
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
647+
border: 0;
648+
background: transparent;
649+
transition: background 160ms ease, box-shadow 160ms ease;
641650
}
642651

643652
.diff-row-meta {
@@ -650,19 +659,16 @@
650659

651660
.diff-row:hover {
652661
background: var(--cm-surface-panel-hover);
653-
border-color: var(--cm-border-hover);
654-
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-border-hover) 60%, transparent);
662+
box-shadow: none;
655663
}
656664

657665
.diff-row.active {
658666
background: var(--cm-surface-panel-active);
659-
border-color: var(--cm-border-accent-strong);
660667
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-border-accent) 65%, transparent);
661668
}
662669

663670
.diff-row.selected {
664671
background: var(--cm-surface-panel);
665-
border-color: var(--cm-border-default);
666672
}
667673

668674
.diff-row.selected.active {
@@ -946,6 +952,11 @@
946952
gap: 8px;
947953
}
948954

955+
.git-log-section + .git-log-section {
956+
padding-top: 12px;
957+
border-top: 1px solid var(--cm-border-soft);
958+
}
959+
949960
.git-log-section-title {
950961
font-size: 11px;
951962
font-weight: 700;
@@ -957,7 +968,7 @@
957968
.git-log-section-list {
958969
display: flex;
959970
flex-direction: column;
960-
gap: 8px;
971+
gap: 2px;
961972
}
962973

963974
.git-log-entry,
@@ -966,19 +977,18 @@
966977
display: flex;
967978
flex-direction: column;
968979
gap: 6px;
969-
padding: 11px 12px;
970-
border: 1px solid var(--cm-border-soft);
971-
border-radius: 14px;
972-
background: var(--cm-surface-row);
980+
padding: 9px 10px;
981+
border: 0;
982+
border-radius: 12px;
983+
background: transparent;
973984
color: inherit;
974985
text-decoration: none;
975-
cursor: pointer;
976986
text-align: left;
977987
cursor: pointer;
978988
box-shadow: none;
979989
outline: none;
980990
transform: none;
981-
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
991+
transition: background 160ms ease, box-shadow 160ms ease;
982992
min-width: 0;
983993
}
984994

@@ -989,16 +999,14 @@
989999
.git-pr-entry:hover,
9901000
.git-pr-entry:focus-visible {
9911001
background: var(--cm-surface-panel-hover);
992-
border-color: var(--cm-border-hover);
993-
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-border-hover) 60%, transparent);
1002+
box-shadow: none;
9941003
outline: none;
9951004
transform: none;
9961005
}
9971006

9981007
.git-log-entry.active,
9991008
.git-pr-entry.active {
10001009
background: var(--cm-surface-panel-active);
1001-
border-color: var(--cm-border-accent-strong);
10021010
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cm-border-accent) 65%, transparent);
10031011
}
10041012

0 commit comments

Comments
 (0)