@youtyan/code-viewer 0.1.7 → 0.1.9

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.
package/web/style.css CHANGED
@@ -25,6 +25,7 @@
25
25
  /* success / danger / attention / done */
26
26
  --success: #1a7f37;
27
27
  --success-emph: #1f883d;
28
+ --success-subtle: #dafbe1;
28
29
  --danger: #cf222e;
29
30
  --danger-emph: #cf222e;
30
31
  --attn: #9a6700;
@@ -69,6 +70,7 @@
69
70
  --accent-muted: rgba(56,139,253,0.40);
70
71
  --success: #3fb950;
71
72
  --success-emph: #238636;
73
+ --success-subtle: rgba(46,160,67,0.15);
72
74
  --danger: #f85149;
73
75
  --danger-emph: #da3633;
74
76
  --attn: #d29922;
@@ -140,9 +142,11 @@ html, body {
140
142
  text-decoration: none;
141
143
  }
142
144
  .brand:hover { color: var(--fg); text-decoration: none; }
143
- .brand .dot {
144
- width: 8px; height: 8px; border-radius: 50%;
145
- background: var(--accent);
145
+ .brand-icon {
146
+ width: 20px;
147
+ height: 20px;
148
+ display: block;
149
+ border-radius: 5px;
146
150
  }
147
151
  .brand .title { letter-spacing: -0.005em; }
148
152
 
@@ -631,6 +635,7 @@ html, body {
631
635
  pointer-events: none;
632
636
  overflow: hidden;
633
637
  opacity: 0;
638
+ color: var(--accent);
634
639
  transition: opacity 0.18s ease;
635
640
  background: transparent;
636
641
  }
@@ -680,6 +685,44 @@ html, body {
680
685
  margin-right: auto;
681
686
  margin-left: 6px;
682
687
  }
688
+ .sb-actions {
689
+ display: inline-flex;
690
+ align-items: center;
691
+ gap: 3px;
692
+ margin-left: 8px;
693
+ padding: 2px;
694
+ border: 1px solid var(--border-muted);
695
+ border-radius: 7px;
696
+ background: color-mix(in srgb, var(--bg) 72%, transparent);
697
+ }
698
+ .sb-icon-action {
699
+ appearance: none;
700
+ display: grid;
701
+ place-items: center;
702
+ width: 24px;
703
+ height: 24px;
704
+ border: 1px solid transparent;
705
+ border-radius: 5px;
706
+ background: transparent;
707
+ color: var(--fg-muted);
708
+ padding: 0;
709
+ cursor: pointer;
710
+ }
711
+ .sb-icon-action:hover:not(:disabled) {
712
+ background: var(--bg-mute);
713
+ color: var(--fg);
714
+ }
715
+ .sb-icon-action:focus-visible {
716
+ outline: 2px solid var(--accent);
717
+ outline-offset: 1px;
718
+ }
719
+ .sb-icon-action:disabled {
720
+ opacity: 0.38;
721
+ cursor: default;
722
+ }
723
+ .sb-icon-action svg {
724
+ display: block;
725
+ }
683
726
  .sb-view-seg { height: 22px; }
684
727
  .sb-view-seg button { padding: 0 8px; font-size: 11px; }
685
728
  .sb-filter-wrap {
@@ -751,7 +794,7 @@ body.gdp-resizing * { user-select: none !important; }
751
794
  }
752
795
  #filelist.tree .tree-dir {
753
796
  display: grid;
754
- grid-template-columns: 16px 16px minmax(0, 1fr);
797
+ grid-template-columns: 16px 16px minmax(0, 1fr) 22px;
755
798
  align-items: center;
756
799
  gap: 8px;
757
800
  padding: 5.6px 8px 5.6px var(--lvl-pad, 12px);
@@ -763,6 +806,16 @@ body.gdp-resizing * { user-select: none !important; }
763
806
  border-radius: 6px;
764
807
  }
765
808
  #filelist.tree .tree-dir:hover { background: var(--bg-mute); color: var(--fg); }
809
+ #filelist.tree .tree-dir.children-omitted {
810
+ color: var(--fg-muted);
811
+ }
812
+ #filelist.tree .tree-dir.children-omitted .dir-icon {
813
+ color: var(--fg-muted);
814
+ opacity: 0.72;
815
+ }
816
+ #filelist.tree .tree-dir.children-omitted .dir-label {
817
+ border-bottom: 1px dashed var(--border-strong);
818
+ }
766
819
  #filelist.tree .tree-dir .chev {
767
820
  display: flex;
768
821
  width: 16px;
@@ -781,13 +834,37 @@ body.gdp-resizing * { user-select: none !important; }
781
834
  width: 12px;
782
835
  height: 12px;
783
836
  }
837
+ #filelist.tree .tree-dir .dir-label {
838
+ min-width: 0;
839
+ display: flex;
840
+ align-items: center;
841
+ gap: 6px;
842
+ overflow: hidden;
843
+ }
784
844
  #filelist.tree .tree-dir .dir-name {
845
+ min-width: 0;
785
846
  font-size: 14px;
786
847
  line-height: 21px;
787
848
  color: var(--fg);
788
849
  font-weight: 400;
789
850
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
790
851
  }
852
+ #filelist.tree .tree-dir.children-omitted .dir-name {
853
+ color: var(--fg-muted);
854
+ }
855
+ #filelist.tree .tree-dir .dir-omitted {
856
+ flex: 0 0 auto;
857
+ max-width: 54px;
858
+ overflow: hidden;
859
+ text-overflow: ellipsis;
860
+ border: 1px solid var(--border-muted);
861
+ border-radius: 999px;
862
+ padding: 0 5px;
863
+ color: var(--fg-subtle);
864
+ font-size: 10px;
865
+ line-height: 15px;
866
+ text-transform: uppercase;
867
+ }
791
868
  #filelist.tree .tree-dir .dir-icon {
792
869
  color: #54aeff;
793
870
  flex-shrink: 0;
@@ -824,8 +901,35 @@ body.gdp-resizing * { user-select: none !important; }
824
901
  width: 16px;
825
902
  height: 1px;
826
903
  }
827
- #filelist li.viewed {
828
- color: var(--fg-subtle);
904
+ #filelist li.viewed,
905
+ #filelist.tree .tree-file.viewed {
906
+ color: var(--fg-muted);
907
+ border-left-color: var(--success);
908
+ }
909
+ #filelist li.viewed::after,
910
+ #filelist.tree .tree-file.viewed::after {
911
+ content: "✓";
912
+ display: inline-flex;
913
+ align-items: center;
914
+ justify-content: center;
915
+ width: 16px;
916
+ height: 16px;
917
+ border-radius: 999px;
918
+ color: var(--success);
919
+ background: var(--success-subtle);
920
+ font-size: 11px;
921
+ font-weight: 700;
922
+ line-height: 1;
923
+ }
924
+ #filelist li.viewed.active,
925
+ #filelist.tree .tree-file.viewed.active {
926
+ border-left-color: var(--success);
927
+ }
928
+ #filelist li.viewed .badge,
929
+ #filelist.tree .tree-file.viewed .badge,
930
+ #filelist li.viewed .stat,
931
+ #filelist.tree .tree-file.viewed .stat {
932
+ opacity: .72;
829
933
  }
830
934
  #filelist.tree .tree-file.hidden,
831
935
  #filelist.tree .tree-dir.hidden { display: none; }
@@ -840,6 +944,18 @@ body.gdp-resizing * { user-select: none !important; }
840
944
  }
841
945
  #filelist.tree .tree-file .stat .a { color: var(--success); }
842
946
  #filelist.tree .tree-file .stat .d { color: var(--danger); }
947
+ #filelist .gdp-open-path {
948
+ width: 22px;
949
+ height: 22px;
950
+ padding: 0;
951
+ border-radius: 5px;
952
+ opacity: 0;
953
+ }
954
+ #filelist li:hover .gdp-open-path,
955
+ #filelist .tree-dir:hover .gdp-open-path,
956
+ #filelist .gdp-open-path:focus-visible {
957
+ opacity: 1;
958
+ }
843
959
  #filelist { list-style: none; margin: 0; padding: 6px 0 0; }
844
960
  #filelist li {
845
961
  display: grid;
@@ -1238,6 +1354,14 @@ table.d2h-diff-table .d2h-code-line-prefix {
1238
1354
  color: var(--fg);
1239
1355
  background: var(--bg-mute);
1240
1356
  }
1357
+ .gdp-open-path {
1358
+ color: var(--accent);
1359
+ }
1360
+ .gdp-open-path:hover {
1361
+ color: var(--accent-emph);
1362
+ background: var(--accent-subtle);
1363
+ border-color: var(--accent-muted);
1364
+ }
1241
1365
  .gdp-file-header-icon svg {
1242
1366
  display: block;
1243
1367
  }
@@ -1246,6 +1370,8 @@ table.d2h-diff-table .d2h-code-line-prefix {
1246
1370
  }
1247
1371
  .gdp-copy-path.copied { color: var(--success); }
1248
1372
  .gdp-copy-path.failed { color: var(--danger); }
1373
+ .gdp-open-path.opened { color: var(--success); }
1374
+ .gdp-open-path.failed { color: var(--danger); }
1249
1375
  .gdp-file-unfold[aria-pressed="true"] {
1250
1376
  color: var(--accent);
1251
1377
  background: var(--accent-subtle);
@@ -1325,13 +1451,66 @@ table.d2h-diff-table .d2h-code-line-prefix {
1325
1451
  border-radius: 0 0 6px 6px;
1326
1452
  overflow: visible;
1327
1453
  }
1454
+ .gdp-standalone-source .gdp-source-viewer.virtual {
1455
+ overflow: hidden;
1456
+ }
1328
1457
  .gdp-source-viewer.loading,
1329
1458
  .gdp-source-viewer.error,
1459
+ .gdp-source-viewer.cancelled,
1330
1460
  .gdp-source-viewer.binary {
1331
1461
  padding: 16px;
1332
1462
  color: var(--fg-muted);
1333
1463
  font-size: 13px;
1334
1464
  }
1465
+ .gdp-source-loading-content {
1466
+ display: flex;
1467
+ align-items: center;
1468
+ gap: 10px;
1469
+ min-width: 0;
1470
+ }
1471
+ .gdp-source-loading-title {
1472
+ color: var(--fg);
1473
+ font-weight: 600;
1474
+ }
1475
+ .gdp-source-loading-message {
1476
+ min-width: 0;
1477
+ overflow: hidden;
1478
+ text-overflow: ellipsis;
1479
+ white-space: nowrap;
1480
+ }
1481
+ .gdp-source-cancel {
1482
+ margin-left: auto;
1483
+ }
1484
+ .gdp-source-viewer.cancelled {
1485
+ background: var(--bg-soft);
1486
+ }
1487
+ .gdp-source-viewer.unsupported {
1488
+ padding: 24px;
1489
+ background: var(--bg-soft);
1490
+ overflow: visible;
1491
+ }
1492
+ .gdp-source-unsupported-content {
1493
+ display: grid;
1494
+ gap: 10px;
1495
+ max-width: 520px;
1496
+ }
1497
+ .gdp-source-unsupported-title {
1498
+ color: var(--fg);
1499
+ font-size: 14px;
1500
+ font-weight: 600;
1501
+ }
1502
+ .gdp-source-unsupported-message {
1503
+ color: var(--fg-muted);
1504
+ font-size: 13px;
1505
+ line-height: 1.45;
1506
+ }
1507
+ .gdp-source-viewer.unsupported .gdp-source-file-info {
1508
+ margin: 2px 0 4px;
1509
+ }
1510
+ .gdp-source-download {
1511
+ width: fit-content;
1512
+ background: var(--bg);
1513
+ }
1335
1514
  .gdp-source-viewer.error {
1336
1515
  background: var(--diff-del-bg);
1337
1516
  color: var(--danger);
@@ -1339,6 +1518,25 @@ table.d2h-diff-table .d2h-code-line-prefix {
1339
1518
  .gdp-source-viewer.media {
1340
1519
  padding: 16px;
1341
1520
  }
1521
+ .gdp-source-file-info {
1522
+ display: flex;
1523
+ flex-wrap: wrap;
1524
+ gap: 8px;
1525
+ margin-bottom: 12px;
1526
+ color: var(--fg-muted);
1527
+ font-size: 12px;
1528
+ }
1529
+ .gdp-source-file-info span {
1530
+ padding: 2px 7px;
1531
+ border: 1px solid var(--border-muted);
1532
+ border-radius: 999px;
1533
+ background: var(--bg-soft);
1534
+ }
1535
+ .gdp-source-file-info .kind {
1536
+ border-color: var(--accent-muted);
1537
+ background: var(--accent-subtle);
1538
+ color: var(--accent-emph);
1539
+ }
1342
1540
  .gdp-source-viewer.media img,
1343
1541
  .gdp-source-viewer.media video {
1344
1542
  display: block;
@@ -1346,6 +1544,13 @@ table.d2h-diff-table .d2h-code-line-prefix {
1346
1544
  max-height: 70vh;
1347
1545
  background: var(--bg);
1348
1546
  }
1547
+ .gdp-source-viewer.media iframe {
1548
+ display: block;
1549
+ width: 100%;
1550
+ min-height: min(72vh, 820px);
1551
+ border: 0;
1552
+ background: var(--bg);
1553
+ }
1349
1554
  .gdp-source-meta {
1350
1555
  padding: 8px 12px;
1351
1556
  border-bottom: 1px solid var(--border-muted);
@@ -1384,6 +1589,11 @@ table.d2h-diff-table .d2h-code-line-prefix {
1384
1589
  color: var(--fg);
1385
1590
  border-bottom-color: var(--blob-tab-active);
1386
1591
  }
1592
+ .gdp-source-viewer > [hidden],
1593
+ .gdp-markdown-layout[hidden],
1594
+ .gdp-source-table[hidden] {
1595
+ display: none !important;
1596
+ }
1387
1597
  .gdp-source-table {
1388
1598
  width: 100%;
1389
1599
  border-collapse: collapse;
@@ -1400,6 +1610,33 @@ table.d2h-diff-table .d2h-code-line-prefix {
1400
1610
  .gdp-source-viewer > .gdp-source-table:first-child {
1401
1611
  border-radius: 6px;
1402
1612
  }
1613
+ .gdp-upload-panel {
1614
+ display: flex;
1615
+ align-items: center;
1616
+ justify-content: space-between;
1617
+ gap: 12px;
1618
+ margin: 12px;
1619
+ padding: 14px;
1620
+ border: 1px dashed var(--border-strong);
1621
+ border-radius: 8px;
1622
+ background: var(--bg);
1623
+ transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
1624
+ }
1625
+ .gdp-upload-panel.dragging {
1626
+ border-color: var(--accent);
1627
+ background: var(--accent-subtle);
1628
+ box-shadow: inset 0 0 0 1px var(--accent);
1629
+ }
1630
+ .gdp-upload-panel.failed {
1631
+ border-color: var(--danger);
1632
+ }
1633
+ .gdp-upload-copy {
1634
+ min-width: 0;
1635
+ color: var(--fg-muted);
1636
+ overflow: hidden;
1637
+ text-overflow: ellipsis;
1638
+ white-space: nowrap;
1639
+ }
1403
1640
  .gdp-source-line-number {
1404
1641
  position: sticky;
1405
1642
  left: 0;
@@ -1423,6 +1660,109 @@ table.d2h-diff-table .d2h-code-line-prefix {
1423
1660
  .gdp-source-line-code.hljs {
1424
1661
  background: var(--bg);
1425
1662
  }
1663
+ .gdp-source-virtual {
1664
+ display: grid;
1665
+ grid-template-rows: auto minmax(0, 1fr);
1666
+ height: calc(100vh - var(--global-header-h) - 96px);
1667
+ min-height: 320px;
1668
+ background: var(--bg);
1669
+ }
1670
+ .gdp-source-virtual-info {
1671
+ display: flex;
1672
+ align-items: center;
1673
+ gap: 8px;
1674
+ min-width: 0;
1675
+ padding: 8px 12px;
1676
+ border-bottom: 1px solid var(--border-muted);
1677
+ color: var(--fg-muted);
1678
+ background: var(--bg-soft);
1679
+ font-size: 12px;
1680
+ }
1681
+ .gdp-source-virtual-badge {
1682
+ flex: 0 0 auto;
1683
+ padding: 2px 7px;
1684
+ border: 1px solid rgba(9, 105, 218, .35);
1685
+ border-radius: 999px;
1686
+ color: #0969da;
1687
+ background: rgba(9, 105, 218, .08);
1688
+ font-weight: 700;
1689
+ }
1690
+ .gdp-source-virtual-summary {
1691
+ min-width: 0;
1692
+ overflow: hidden;
1693
+ text-overflow: ellipsis;
1694
+ white-space: nowrap;
1695
+ }
1696
+ .gdp-source-virtual-actions {
1697
+ display: inline-flex;
1698
+ align-items: center;
1699
+ gap: 6px;
1700
+ margin-left: auto;
1701
+ }
1702
+ .gdp-source-virtual-action {
1703
+ display: inline-flex;
1704
+ align-items: center;
1705
+ min-height: 24px;
1706
+ padding: 0 8px;
1707
+ border: 1px solid var(--border);
1708
+ border-radius: 6px;
1709
+ color: var(--fg);
1710
+ background: var(--bg);
1711
+ font: inherit;
1712
+ line-height: 1;
1713
+ text-decoration: none;
1714
+ white-space: nowrap;
1715
+ cursor: pointer;
1716
+ }
1717
+ .gdp-source-virtual-action:hover {
1718
+ border-color: var(--accent);
1719
+ color: var(--accent);
1720
+ }
1721
+ .gdp-source-virtual-scroller {
1722
+ position: relative;
1723
+ overflow: auto;
1724
+ min-height: 0;
1725
+ font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
1726
+ font-size: 12px;
1727
+ line-height: 20px;
1728
+ }
1729
+ .gdp-source-virtual-spacer {
1730
+ position: relative;
1731
+ min-width: max-content;
1732
+ }
1733
+ .gdp-source-virtual-window {
1734
+ position: absolute;
1735
+ top: 0;
1736
+ left: 0;
1737
+ right: 0;
1738
+ }
1739
+ .gdp-source-virtual-row {
1740
+ display: grid;
1741
+ grid-template-columns: minmax(50px, max-content) minmax(0, 1fr);
1742
+ height: 20px;
1743
+ line-height: 20px;
1744
+ }
1745
+ .gdp-source-virtual-line-number {
1746
+ position: sticky;
1747
+ left: 0;
1748
+ z-index: 1;
1749
+ padding: 0 8px;
1750
+ text-align: right;
1751
+ color: var(--fg-muted);
1752
+ background: var(--bg);
1753
+ box-shadow: inset -1px 0 0 var(--border-muted);
1754
+ font-variant-numeric: tabular-nums;
1755
+ user-select: none;
1756
+ }
1757
+ .gdp-source-virtual-line-code {
1758
+ padding: 0 12px;
1759
+ color: var(--fg);
1760
+ white-space: pre;
1761
+ min-height: 20px;
1762
+ }
1763
+ .gdp-source-virtual-line-code.hljs {
1764
+ background: var(--bg);
1765
+ }
1426
1766
  .gdp-standalone-source.gdp-file-shell {
1427
1767
  border: 0;
1428
1768
  border-radius: 0;
@@ -1487,6 +1827,20 @@ table.d2h-diff-table .d2h-code-line-prefix {
1487
1827
  text-overflow: ellipsis;
1488
1828
  white-space: nowrap;
1489
1829
  }
1830
+ .gdp-file-breadcrumb button.gdp-file-breadcrumb-part {
1831
+ appearance: none;
1832
+ border: 0;
1833
+ background: transparent;
1834
+ color: var(--accent);
1835
+ font: inherit;
1836
+ padding: 1px 3px;
1837
+ border-radius: 4px;
1838
+ cursor: pointer;
1839
+ }
1840
+ .gdp-file-breadcrumb button.gdp-file-breadcrumb-part:hover {
1841
+ background: var(--accent-subtle);
1842
+ text-decoration: underline;
1843
+ }
1490
1844
  .gdp-file-breadcrumb-current {
1491
1845
  color: var(--fg);
1492
1846
  font-weight: 600;
@@ -1510,6 +1864,75 @@ table.d2h-diff-table .d2h-code-line-prefix {
1510
1864
  padding: 24px 32px 40px;
1511
1865
  color: var(--fg);
1512
1866
  overflow-wrap: break-word;
1867
+ font-size: 16px;
1868
+ line-height: 1.75;
1869
+ }
1870
+ .gdp-markdown-layout {
1871
+ display: grid;
1872
+ grid-template-columns: 260px minmax(0, 1fr);
1873
+ gap: 32px;
1874
+ align-items: start;
1875
+ }
1876
+ .gdp-markdown-toc {
1877
+ position: sticky;
1878
+ top: 96px;
1879
+ max-height: calc(100vh - 120px);
1880
+ overflow: auto;
1881
+ padding: 18px 14px;
1882
+ border-right: 1px solid var(--border);
1883
+ background: var(--bg-soft);
1884
+ font-size: 13px;
1885
+ line-height: 1.45;
1886
+ }
1887
+ .gdp-markdown-toc::before {
1888
+ content: "Contents";
1889
+ display: block;
1890
+ margin: 0 8px 12px;
1891
+ padding-bottom: 10px;
1892
+ border-bottom: 1px solid var(--border-muted);
1893
+ color: var(--fg-muted);
1894
+ font-size: 11px;
1895
+ font-weight: 700;
1896
+ letter-spacing: 0.12em;
1897
+ text-transform: uppercase;
1898
+ }
1899
+ .gdp-markdown-toc ul {
1900
+ list-style: none;
1901
+ margin: 0;
1902
+ padding: 0;
1903
+ }
1904
+ .gdp-markdown-toc li {
1905
+ margin: 0;
1906
+ }
1907
+ .gdp-markdown-toc a {
1908
+ display: block;
1909
+ padding: 5px 8px;
1910
+ border-left: 2px solid transparent;
1911
+ border-radius: 5px;
1912
+ color: var(--fg-muted);
1913
+ overflow-wrap: anywhere;
1914
+ text-decoration: none;
1915
+ }
1916
+ .gdp-markdown-toc .level-1 > a {
1917
+ color: var(--fg);
1918
+ font-weight: 600;
1919
+ }
1920
+ .gdp-markdown-toc .level-2 > a {
1921
+ padding-left: 18px;
1922
+ }
1923
+ .gdp-markdown-toc .level-3 > a {
1924
+ padding-left: 30px;
1925
+ font-size: 12px;
1926
+ }
1927
+ .gdp-markdown-toc a:hover {
1928
+ background: var(--bg-mute);
1929
+ color: var(--fg);
1930
+ }
1931
+ .gdp-markdown-toc a.active {
1932
+ background: var(--accent-subtle);
1933
+ border-left-color: var(--accent);
1934
+ color: var(--accent-emph);
1935
+ font-weight: 600;
1513
1936
  }
1514
1937
  .gdp-markdown-preview h1,
1515
1938
  .gdp-markdown-preview h2 {
@@ -1520,21 +1943,37 @@ table.d2h-diff-table .d2h-code-line-prefix {
1520
1943
  margin: 0 0 16px;
1521
1944
  font-size: 2em;
1522
1945
  line-height: 1.25;
1946
+ color: var(--fg);
1523
1947
  }
1524
1948
  .gdp-markdown-preview h2 {
1525
1949
  margin: 24px 0 16px;
1526
1950
  font-size: 1.5em;
1527
1951
  line-height: 1.25;
1952
+ color: var(--accent);
1528
1953
  }
1529
1954
  .gdp-markdown-preview h3 {
1530
1955
  margin: 24px 0 16px;
1531
1956
  font-size: 1.25em;
1957
+ color: var(--success);
1958
+ position: relative;
1959
+ padding-left: 0.7em;
1960
+ }
1961
+ .gdp-markdown-preview h3::before {
1962
+ content: "";
1963
+ position: absolute;
1964
+ left: 0;
1965
+ top: 0.25em;
1966
+ bottom: 0.25em;
1967
+ width: 4px;
1968
+ border-radius: 2px;
1969
+ background: var(--success);
1532
1970
  }
1533
1971
  .gdp-markdown-preview p,
1534
1972
  .gdp-markdown-preview ul,
1535
1973
  .gdp-markdown-preview ol,
1536
1974
  .gdp-markdown-preview blockquote,
1537
- .gdp-markdown-preview pre {
1975
+ .gdp-markdown-preview pre,
1976
+ .gdp-markdown-preview table {
1538
1977
  margin: 0 0 16px;
1539
1978
  }
1540
1979
  .gdp-markdown-preview ul,
@@ -1542,14 +1981,17 @@ table.d2h-diff-table .d2h-code-line-prefix {
1542
1981
  padding-left: 2em;
1543
1982
  }
1544
1983
  .gdp-markdown-preview blockquote {
1545
- padding: 0 1em;
1984
+ padding: 0.7em 1.2em;
1985
+ border-radius: 0 6px 6px 0;
1986
+ background: var(--bg-soft);
1546
1987
  color: var(--fg-muted);
1547
- border-left: 0.25em solid var(--border);
1988
+ border-left: 4px solid var(--accent);
1548
1989
  }
1549
1990
  .gdp-markdown-preview code {
1550
1991
  padding: 0.2em 0.4em;
1551
1992
  border-radius: 6px;
1552
1993
  background: var(--bg-mute);
1994
+ color: var(--danger);
1553
1995
  font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
1554
1996
  font-size: 85%;
1555
1997
  }
@@ -1557,25 +1999,226 @@ table.d2h-diff-table .d2h-code-line-prefix {
1557
1999
  padding: 16px;
1558
2000
  overflow: auto;
1559
2001
  border-radius: 6px;
2002
+ border: 1px solid var(--border);
1560
2003
  background: var(--bg-soft);
1561
2004
  }
1562
2005
  .gdp-markdown-preview pre code {
1563
2006
  padding: 0;
1564
2007
  background: transparent;
2008
+ color: var(--fg);
1565
2009
  font-size: 100%;
1566
2010
  }
2011
+ .gdp-markdown-preview pre code.hljs {
2012
+ display: block;
2013
+ background: transparent;
2014
+ color: var(--fg);
2015
+ }
2016
+ .gdp-markdown-preview pre.shiki {
2017
+ background: var(--shiki-light-bg) !important;
2018
+ }
2019
+ .gdp-markdown-preview pre.shiki code {
2020
+ display: block;
2021
+ color: var(--shiki-light);
2022
+ }
2023
+ .gdp-markdown-preview pre.shiki,
2024
+ .gdp-markdown-preview pre.shiki span {
2025
+ color: var(--shiki-light) !important;
2026
+ }
2027
+ [data-theme="dark"] .gdp-markdown-preview pre.shiki {
2028
+ background: var(--shiki-dark-bg) !important;
2029
+ }
2030
+ [data-theme="dark"] .gdp-markdown-preview pre.shiki,
2031
+ [data-theme="dark"] .gdp-markdown-preview pre.shiki span {
2032
+ color: var(--shiki-dark) !important;
2033
+ }
2034
+ .gdp-markdown-preview table {
2035
+ display: table;
2036
+ width: auto;
2037
+ max-width: 100%;
2038
+ border-collapse: collapse;
2039
+ border: 1px solid var(--border-strong);
2040
+ background: var(--bg);
2041
+ font-size: 0.95em;
2042
+ }
2043
+ .gdp-markdown-preview th,
2044
+ .gdp-markdown-preview td {
2045
+ padding: 9px 14px;
2046
+ border: 1px solid var(--border);
2047
+ text-align: left;
2048
+ vertical-align: top;
2049
+ }
2050
+ .gdp-markdown-preview thead th {
2051
+ background: var(--bg-mute);
2052
+ font-weight: 700;
2053
+ }
2054
+ .gdp-markdown-preview tbody tr:nth-child(2n) td {
2055
+ background: var(--bg-soft);
2056
+ }
2057
+ .gdp-markdown-preview a {
2058
+ color: var(--accent);
2059
+ text-decoration: none;
2060
+ border-bottom: 1px solid transparent;
2061
+ }
2062
+ .gdp-markdown-preview a:hover {
2063
+ border-bottom-color: currentColor;
2064
+ }
2065
+ .gdp-markdown-preview .anchor {
2066
+ margin-left: 6px;
2067
+ opacity: 0;
2068
+ font-size: 0.8em;
2069
+ }
2070
+ .gdp-markdown-preview :is(h1,h2,h3,h4,h5,h6):hover .anchor {
2071
+ opacity: 0.55;
2072
+ }
2073
+ .gdp-markdown-preview .task-list-item {
2074
+ list-style: none;
2075
+ }
2076
+ .gdp-markdown-preview input[type="checkbox"] {
2077
+ margin: 0 0.5em 0 -1.5em;
2078
+ accent-color: var(--accent);
2079
+ }
2080
+ .gdp-markdown-preview img {
2081
+ max-width: 100%;
2082
+ border-radius: 6px;
2083
+ }
2084
+ .gdp-markdown-preview .mermaid {
2085
+ position: relative;
2086
+ cursor: zoom-in;
2087
+ margin: 1.2em 0;
2088
+ padding: 16px;
2089
+ border: 1px solid var(--border);
2090
+ border-radius: 8px;
2091
+ background: var(--bg);
2092
+ overflow: auto;
2093
+ }
2094
+ .gdp-markdown-preview .mermaid svg {
2095
+ display: block;
2096
+ max-width: 100%;
2097
+ margin: 0 auto;
2098
+ background: transparent;
2099
+ }
2100
+ .gdp-markdown-preview .mermaid:hover {
2101
+ border-color: var(--border-strong);
2102
+ }
2103
+ .mkdp-mermaid-error {
2104
+ margin: 1em 0;
2105
+ padding: 14px 18px;
2106
+ border: 2px solid var(--danger);
2107
+ border-radius: 8px;
2108
+ background: var(--diff-del-bg);
2109
+ color: var(--fg);
2110
+ }
2111
+ .mkdp-mermaid-error-title {
2112
+ margin-bottom: 10px;
2113
+ color: var(--danger);
2114
+ font-weight: 700;
2115
+ }
2116
+ .mkdp-mermaid-error-detail,
2117
+ .mkdp-mermaid-error-source {
2118
+ white-space: pre-wrap;
2119
+ word-break: break-word;
2120
+ }
2121
+ .mkdp-mermaid-error-detail {
2122
+ margin: 0;
2123
+ padding: 10px 14px;
2124
+ border-radius: 6px;
2125
+ background: #1f1f1f;
2126
+ color: #ff7b72;
2127
+ }
2128
+ .mkdp-mermaid-error-srcwrap {
2129
+ margin-top: 10px;
2130
+ }
2131
+ .mkdp-mermaid-error-source {
2132
+ margin: 6px 0 0;
2133
+ padding: 10px 12px;
2134
+ border: 1px solid var(--border);
2135
+ border-radius: 6px;
2136
+ background: var(--bg-soft);
2137
+ }
2138
+ .mkdp-lightbox {
2139
+ position: fixed;
2140
+ inset: 0;
2141
+ z-index: 9999;
2142
+ background: rgba(15, 20, 30, 0.86);
2143
+ cursor: grab;
2144
+ }
2145
+ .mkdp-lightbox.dragging { cursor: grabbing; }
2146
+ .mkdp-lightbox-stage {
2147
+ position: absolute;
2148
+ inset: 0;
2149
+ overflow: hidden;
2150
+ }
2151
+ .mkdp-lightbox-stage > svg {
2152
+ position: absolute;
2153
+ top: 50%;
2154
+ left: 50%;
2155
+ max-width: none !important;
2156
+ max-height: none !important;
2157
+ transform-origin: 0 0;
2158
+ border-radius: 8px;
2159
+ background: #fff !important;
2160
+ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
2161
+ user-select: none;
2162
+ }
2163
+ .mkdp-lightbox-toolbar {
2164
+ position: fixed;
2165
+ top: 16px;
2166
+ right: 16px;
2167
+ z-index: 10000;
2168
+ display: flex;
2169
+ gap: 6px;
2170
+ }
2171
+ .mkdp-lightbox-toolbar button {
2172
+ min-width: 36px;
2173
+ height: 36px;
2174
+ border: 1px solid rgba(255, 255, 255, 0.25);
2175
+ border-radius: 6px;
2176
+ background: rgba(20, 25, 35, 0.85);
2177
+ color: #fff;
2178
+ cursor: pointer;
2179
+ font-weight: 600;
2180
+ }
2181
+ .mkdp-lightbox-toolbar button:hover {
2182
+ background: rgba(40, 50, 70, 0.95);
2183
+ }
2184
+ .mkdp-lightbox-hint {
2185
+ position: fixed;
2186
+ bottom: 16px;
2187
+ left: 50%;
2188
+ transform: translateX(-50%);
2189
+ color: rgba(255, 255, 255, 0.65);
2190
+ font-size: 12px;
2191
+ letter-spacing: 0.04em;
2192
+ pointer-events: none;
2193
+ }
2194
+ @media (max-width: 1100px) {
2195
+ .gdp-markdown-layout {
2196
+ grid-template-columns: 1fr;
2197
+ }
2198
+ .gdp-markdown-toc {
2199
+ position: static;
2200
+ max-height: 280px;
2201
+ border: 1px solid var(--border);
2202
+ border-radius: 8px;
2203
+ }
2204
+ }
1567
2205
 
1568
2206
  body.gdp-file-detail-page #sidebar,
1569
- body.gdp-repo-page #sidebar,
1570
2207
  body.gdp-file-detail-page #sidebar-resizer {
1571
2208
  display: none;
1572
2209
  }
1573
2210
  body.gdp-file-detail-page.gdp-repo-blob-page #sidebar {
1574
2211
  display: block;
1575
2212
  }
2213
+ body.gdp-repo-page #sidebar {
2214
+ display: block;
2215
+ }
1576
2216
  body.gdp-file-detail-page.gdp-repo-blob-page #sidebar-resizer {
1577
2217
  display: block;
1578
2218
  }
2219
+ body.gdp-repo-page #sidebar-resizer {
2220
+ display: block;
2221
+ }
1579
2222
  #repo-target-wrap {
1580
2223
  display: none;
1581
2224
  }
@@ -1589,9 +2232,6 @@ body.gdp-file-detail-page.gdp-repo-blob-page #repo-target-wrap {
1589
2232
  #repo-target {
1590
2233
  width: 100%;
1591
2234
  }
1592
- body.gdp-repo-page #sidebar-resizer {
1593
- display: none;
1594
- }
1595
2235
  body.gdp-file-detail-page {
1596
2236
  --chrome-h: var(--global-header-h);
1597
2237
  }
@@ -1619,7 +2259,7 @@ body.gdp-file-detail-page.gdp-repo-blob-page #content {
1619
2259
  margin-left: var(--sidebar-w);
1620
2260
  }
1621
2261
  body.gdp-repo-page #content {
1622
- margin-left: 0;
2262
+ margin-left: var(--sidebar-w);
1623
2263
  padding: calc(var(--global-header-h) + 24px) 32px 48px;
1624
2264
  min-height: calc(100vh - var(--global-header-h));
1625
2265
  }
@@ -1634,7 +2274,8 @@ body.gdp-file-detail-page #empty {
1634
2274
  }
1635
2275
 
1636
2276
  .gdp-repo-shell {
1637
- width: min(1120px, calc(100vw - 64px));
2277
+ width: 100%;
2278
+ min-width: 0;
1638
2279
  margin: 0;
1639
2280
  }
1640
2281
  .gdp-repo-header,
@@ -1796,56 +2437,104 @@ body.gdp-file-detail-page #empty {
1796
2437
  .d2h-code-line-ctn .hljs-built_in,
1797
2438
  .d2h-code-line-ctn .hljs-builtin-name,
1798
2439
  .d2h-code-line-ctn .hljs-tag,
1799
- .d2h-code-line-ctn .hljs-meta-keyword { color: #cf222e !important; }
2440
+ .d2h-code-line-ctn .hljs-meta-keyword,
2441
+ .gdp-markdown-preview .hljs-keyword,
2442
+ .gdp-markdown-preview .hljs-selector-tag,
2443
+ .gdp-markdown-preview .hljs-built_in,
2444
+ .gdp-markdown-preview .hljs-builtin-name,
2445
+ .gdp-markdown-preview .hljs-tag,
2446
+ .gdp-markdown-preview .hljs-meta-keyword { color: #cf222e !important; }
1800
2447
 
1801
2448
  .d2h-code-line-ctn .hljs-string,
1802
2449
  .d2h-code-line-ctn .hljs-symbol,
1803
2450
  .d2h-code-line-ctn .hljs-bullet,
1804
2451
  .d2h-code-line-ctn .hljs-attr,
1805
2452
  .d2h-code-line-ctn .hljs-template-tag,
1806
- .d2h-code-line-ctn .hljs-template-variable { color: #0a3069 !important; }
2453
+ .d2h-code-line-ctn .hljs-template-variable,
2454
+ .gdp-markdown-preview .hljs-string,
2455
+ .gdp-markdown-preview .hljs-symbol,
2456
+ .gdp-markdown-preview .hljs-bullet,
2457
+ .gdp-markdown-preview .hljs-attr,
2458
+ .gdp-markdown-preview .hljs-template-tag,
2459
+ .gdp-markdown-preview .hljs-template-variable { color: #0a3069 !important; }
1807
2460
 
1808
2461
  .d2h-code-line-ctn .hljs-comment,
1809
2462
  .d2h-code-line-ctn .hljs-quote,
1810
- .d2h-code-line-ctn .hljs-deletion { color: #6e7781 !important; }
2463
+ .d2h-code-line-ctn .hljs-deletion,
2464
+ .gdp-markdown-preview .hljs-comment,
2465
+ .gdp-markdown-preview .hljs-quote,
2466
+ .gdp-markdown-preview .hljs-deletion { color: #6e7781 !important; }
1811
2467
 
1812
2468
  .d2h-code-line-ctn .hljs-number,
1813
2469
  .d2h-code-line-ctn .hljs-literal,
1814
2470
  .d2h-code-line-ctn .hljs-doctag,
1815
- .d2h-code-line-ctn .hljs-meta { color: #0550ae !important; }
2471
+ .d2h-code-line-ctn .hljs-meta,
2472
+ .gdp-markdown-preview .hljs-number,
2473
+ .gdp-markdown-preview .hljs-literal,
2474
+ .gdp-markdown-preview .hljs-doctag,
2475
+ .gdp-markdown-preview .hljs-meta { color: #0550ae !important; }
1816
2476
 
1817
2477
  .d2h-code-line-ctn .hljs-title,
1818
2478
  .d2h-code-line-ctn .hljs-section,
1819
2479
  .d2h-code-line-ctn .hljs-function .hljs-title,
1820
- .d2h-code-line-ctn .hljs-name { color: #8250df !important; }
2480
+ .d2h-code-line-ctn .hljs-name,
2481
+ .gdp-markdown-preview .hljs-title,
2482
+ .gdp-markdown-preview .hljs-section,
2483
+ .gdp-markdown-preview .hljs-function .hljs-title,
2484
+ .gdp-markdown-preview .hljs-name { color: #8250df !important; }
1821
2485
 
1822
2486
  .d2h-code-line-ctn .hljs-variable,
1823
2487
  .d2h-code-line-ctn .hljs-template-variable,
1824
2488
  .d2h-code-line-ctn .hljs-type,
1825
2489
  .d2h-code-line-ctn .hljs-class .hljs-title,
1826
- .d2h-code-line-ctn .hljs-attribute { color: #953800 !important; }
1827
-
1828
- .d2h-code-line-ctn .hljs-emphasis { font-style: italic; }
1829
- .d2h-code-line-ctn .hljs-strong { font-weight: 600; }
2490
+ .d2h-code-line-ctn .hljs-attribute,
2491
+ .gdp-markdown-preview .hljs-variable,
2492
+ .gdp-markdown-preview .hljs-template-variable,
2493
+ .gdp-markdown-preview .hljs-type,
2494
+ .gdp-markdown-preview .hljs-class .hljs-title,
2495
+ .gdp-markdown-preview .hljs-attribute { color: #953800 !important; }
2496
+
2497
+ .d2h-code-line-ctn .hljs-emphasis,
2498
+ .gdp-markdown-preview .hljs-emphasis { font-style: italic; }
2499
+ .d2h-code-line-ctn .hljs-strong,
2500
+ .gdp-markdown-preview .hljs-strong { font-weight: 600; }
1830
2501
 
1831
2502
  [data-theme="dark"] .d2h-code-line-ctn .hljs-keyword,
1832
2503
  [data-theme="dark"] .d2h-code-line-ctn .hljs-selector-tag,
1833
2504
  [data-theme="dark"] .d2h-code-line-ctn .hljs-built_in,
1834
- [data-theme="dark"] .d2h-code-line-ctn .hljs-tag { color: #ff7b72 !important; }
2505
+ [data-theme="dark"] .d2h-code-line-ctn .hljs-tag,
2506
+ [data-theme="dark"] .gdp-markdown-preview .hljs-keyword,
2507
+ [data-theme="dark"] .gdp-markdown-preview .hljs-selector-tag,
2508
+ [data-theme="dark"] .gdp-markdown-preview .hljs-built_in,
2509
+ [data-theme="dark"] .gdp-markdown-preview .hljs-tag { color: #ff7b72 !important; }
1835
2510
  [data-theme="dark"] .d2h-code-line-ctn .hljs-string,
1836
2511
  [data-theme="dark"] .d2h-code-line-ctn .hljs-attr,
1837
- [data-theme="dark"] .d2h-code-line-ctn .hljs-symbol { color: #a5d6ff !important; }
2512
+ [data-theme="dark"] .d2h-code-line-ctn .hljs-symbol,
2513
+ [data-theme="dark"] .gdp-markdown-preview .hljs-string,
2514
+ [data-theme="dark"] .gdp-markdown-preview .hljs-attr,
2515
+ [data-theme="dark"] .gdp-markdown-preview .hljs-symbol { color: #a5d6ff !important; }
1838
2516
  [data-theme="dark"] .d2h-code-line-ctn .hljs-comment,
1839
- [data-theme="dark"] .d2h-code-line-ctn .hljs-quote { color: #8b949e !important; }
2517
+ [data-theme="dark"] .d2h-code-line-ctn .hljs-quote,
2518
+ [data-theme="dark"] .gdp-markdown-preview .hljs-comment,
2519
+ [data-theme="dark"] .gdp-markdown-preview .hljs-quote { color: #8b949e !important; }
1840
2520
  [data-theme="dark"] .d2h-code-line-ctn .hljs-number,
1841
2521
  [data-theme="dark"] .d2h-code-line-ctn .hljs-literal,
1842
- [data-theme="dark"] .d2h-code-line-ctn .hljs-meta { color: #79c0ff !important; }
2522
+ [data-theme="dark"] .d2h-code-line-ctn .hljs-meta,
2523
+ [data-theme="dark"] .gdp-markdown-preview .hljs-number,
2524
+ [data-theme="dark"] .gdp-markdown-preview .hljs-literal,
2525
+ [data-theme="dark"] .gdp-markdown-preview .hljs-meta { color: #79c0ff !important; }
1843
2526
  [data-theme="dark"] .d2h-code-line-ctn .hljs-title,
1844
2527
  [data-theme="dark"] .d2h-code-line-ctn .hljs-name,
1845
- [data-theme="dark"] .d2h-code-line-ctn .hljs-function .hljs-title { color: #d2a8ff !important; }
2528
+ [data-theme="dark"] .d2h-code-line-ctn .hljs-function .hljs-title,
2529
+ [data-theme="dark"] .gdp-markdown-preview .hljs-title,
2530
+ [data-theme="dark"] .gdp-markdown-preview .hljs-name,
2531
+ [data-theme="dark"] .gdp-markdown-preview .hljs-function .hljs-title { color: #d2a8ff !important; }
1846
2532
  [data-theme="dark"] .d2h-code-line-ctn .hljs-variable,
1847
2533
  [data-theme="dark"] .d2h-code-line-ctn .hljs-type,
1848
- [data-theme="dark"] .d2h-code-line-ctn .hljs-attribute { color: #ffa657 !important; }
2534
+ [data-theme="dark"] .d2h-code-line-ctn .hljs-attribute,
2535
+ [data-theme="dark"] .gdp-markdown-preview .hljs-variable,
2536
+ [data-theme="dark"] .gdp-markdown-preview .hljs-type,
2537
+ [data-theme="dark"] .gdp-markdown-preview .hljs-attribute { color: #ffa657 !important; }
1849
2538
 
1850
2539
  /* Line number column */
1851
2540
  .d2h-code-linenumber {