同步差异对比代码块的样式

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ##### 更符合 GitHub 风格
 
+- 同步差异对比代码块的样式 (需浏览器更新到2024年10月以上版本)
 - 优化用户头像样式
 - 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式
 - 优化用户动态样式

styles/components/diff.ts

@@ -4,6 +4,23 @@ export const diff = css`
   /* 折叠行多余的颜色 */
   .tag-code {
     background-color: unset;
+    height: 24px;
+    // 展开/收缩按钮高度与.tag-code一致
+    .code-expander-buttons,
+    // 双向展开的按钮
+    .code-expander-buttons[data-expand-direction="3"] {
+      .code-expander-button {
+        height: 24px;
+      }
+    }
+    /* 展开/收缩按钮 */
+    .code-expander-button {
+      color: ${themeVars.color.text.light.num1};
+      &:hover {
+        background: ${themeVars.github.bgColor.accent.emphasis};
+        color: ${themeVars.color.white};
+      }
+    }
     /* 折叠行文本 */
     .code-inner {
       color: ${themeVars.color.text.light.num1};
@@ -20,23 +37,19 @@ export const diff = css`
   /* 增加/删除相关代码背景色圆角 */
   .added-code,
   .removed-code {
-    border-radius: 0.1875rem;
+    border-radius: 3px;
     color: ${themeVars.color.text.self};
     /* 覆盖掉 chroma 的颜色 */
     * {
       color: ${themeVars.color.text.self} !important;
     }
   }
-  /* 展开/收缩按钮 */
+  // 代码行
-  .code-expander-button {
+  .lines-num,
-    color: ${themeVars.color.text.light.num1};
+  .lines-code {
-    height: 28px !important;
+    line-height: 24px;
-    &:hover {
-      background: ${themeVars.github.bgColor.accent.emphasis};
-      color: ${themeVars.color.white};
-    }
   }
-  /* 行号居中 */
+  // 行号居中
   .lines-num {
     text-align: center !important;
   }
@@ -63,17 +76,54 @@ export const diff = css`
       }
       // 操作按钮
       .diff-file-header-actions {
-        border-radius: ${otherThemeVars.border.radius};
         color: ${themeVars.color.text.light.num1};
         font-size: 12px;
         font-weight: 400;
-        &:hover {
-          background-color: ${themeVars.github.control.transparent.bgColor.hover};
-        }
         .diff-header-popup-btn {
+          border-radius: ${otherThemeVars.border.radius};
           padding: 5px !important;
+          &:hover {
+            background-color: ${themeVars.github.control.transparent.bgColor.hover};
+          }
         }
       }
     }
   }
+  // 差异对比文件盒子
+  .repository .diff-file-box .code-diff {
+    // 隐藏多余的空白
+    // 合并视图的第三列
+    &.code-diff-unified colgroup col:nth-child(3),
+    // 拆分视图的第二列和第六列
+    &.code-diff-split colgroup col:nth-child(2),
+    &.code-diff-split colgroup col:nth-child(6),
+    td.lines-escape {
+      width: 0; // 不要使用 display: none; 否则会影响布局
+      visibility: hidden;
+    }
+    // 固定表格中每列的宽度
+    table {
+      width: 100%;
+    }
+    // 行号宽度
+    // 合并视图的第一列和第二列
+    &.code-diff-unified colgroup col:nth-child(1),
+    &.code-diff-unified colgroup col:nth-child(2),
+    // 拆分视图的第一列和第五列
+    &.code-diff-split colgroup col:nth-child(1),
+    &.code-diff-split colgroup col:nth-child(5) {
+      width: 40;
+    }
+    // 修复 table 100% 宽度时的行号换行问题
+    .lines-num {
+      text-wrap-mode: wrap; // 2024年10月浏览器开始支持
+    }
+    // 合并视图的第四列
+    &.code-diff-unified colgroup col:nth-child(4),
+    // 拆分视图的第三列和第七列, -/+ 保持居中的宽度
+    &.code-diff-split colgroup col:nth-child(3),
+    &.code-diff-split colgroup col:nth-child(7) {
+      width: 20;
+    }
+  }
 `;