release

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ##### 更符合 GitHub 风格
 
-- 同步差异对比代码块的样式 (需浏览器更新到2024年10月以上版本)
+- 优化差异对比代码块的样式
 - 优化用户头像样式
 - 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式
 - 优化用户动态样式
@@ -19,3 +19,15 @@
 ### 🌈 Style
 
 ##### More aligned with GitHub style
+
+- Optimized diff comparison code block styles
+- Optimized user avatar styles
+- Optimized three-dot menu button styles for Issue/PR/Diff/Actions
+- Optimized user activity feed styles
+- Optimized repository release page styles
+- Optimized tooltip animation for character hints
+
+### 🐞 Fix
+
+- Fixed text color issues in Issue/PR detail pages, timeline label styles, and sidebar time tracking styles
+- Fixed alignment issues with some select input fields

styles/components/diff.ts

@@ -1,19 +1,27 @@
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 export const diff = css`
-  /* 折叠行多余的颜色 */
+  // 这里的折叠行和代码行高度与 GitHub 的 release 和 review 的差异对比时的高度一致, 不需要像 commit 中的差异对比那样行高过高
+  // release 和 review 行高为 20px, commit 行高为 24px
+  // 折叠行
   .tag-code {
+    // 多余的颜色
     background-color: unset;
-    height: 24px;
-    // 展开/收缩按钮高度与.tag-code一致
-    .code-expander-buttons,
-    // 双向展开的按钮
-    .code-expander-buttons[data-expand-direction="3"] {
+    height: 28px;
+    // 展开按钮高度与折叠行一致
+    .code-expander-buttons {
       .code-expander-button {
-        height: 24px;
+        height: 28px;
       }
     }
-    /* 展开/收缩按钮 */
+    // 双向展开的按钮
+    &:has(.code-expander-buttons[data-expand-direction="3"]) {
+      height: 40px;
+      .code-expander-button {
+        height: 20px;
+      }
+    }
+    // 展开按钮
     .code-expander-button {
       color: ${themeVars.color.text.light.num1};
       &:hover {
@@ -21,12 +29,21 @@ export const diff = css`
         color: ${themeVars.color.white};
       }
     }
-    /* 折叠行文本 */
+    // 折叠行文本
     .code-inner {
       color: ${themeVars.color.text.light.num1};
     }
   }
-  /* 增加/删除行多余的颜色 */
+  // 代码行
+  .lines-num,
+  .lines-code {
+    line-height: 20px;
+  }
+  // 行号居中
+  .lines-num {
+    text-align: center !important;
+  }
+  // 增加/删除行多余的颜色
   .code-diff-unified {
     .del-code,
     .add-code {
@@ -34,25 +51,16 @@ export const diff = css`
       border-color: unset;
     }
   }
-  /* 增加/删除相关代码背景色圆角 */
+  // 增加/删除相关代码背景色圆角
   .added-code,
   .removed-code {
     border-radius: 3px;
     color: ${themeVars.color.text.self};
-    /* 覆盖掉 chroma 的颜色 */
+    // 覆盖掉 chroma 的颜色
     * {
       color: ${themeVars.color.text.self} !important;
     }
   }
-  // 代码行
-  .lines-num,
-  .lines-code {
-    line-height: 24px;
-  }
-  // 行号居中
-  .lines-num {
-    text-align: center !important;
-  }
   // 差异对比文件盒子
   .diff-file-box {
     // 差异对比文件头
@@ -90,7 +98,8 @@ export const diff = css`
     }
   }
   // 差异对比文件盒子
-  .repository .diff-file-box .code-diff {
+  .repository .diff-file-box {
+    .code-diff {
       // 隐藏多余的空白
       // 合并视图的第三列
       &.code-diff-unified colgroup col:nth-child(3),
@@ -101,22 +110,19 @@ export const diff = css`
         width: 0; // 不要使用 display: none; 否则会影响布局
         visibility: hidden;
       }
-    // 固定表格中每列的宽度
-    table {
-      width: 100%;
-    }
+      // Gitea 分列视图下默认 100% 宽度的目的是如果单文件只增加或只删除的情况下, 保持无内容的列的宽度一致, 始终保持左右两边的列宽度一致
+      // 保持 Gitea 的默认设置, 不对行号宽度做处理
+      /* &.code-diff-split table {
+        width: auto;
+      } */
       // 行号宽度
-    // 合并视图的第一列和第二列
-    &.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% 宽度时的行号换行问题
+      // 40px: 长度 = 9999 行
+      // 45px: 长度 = 99999 行
+      // 50px: 长度 = 999999 行
+      // GitHub 在 commit 中的行宽最小为 40px, 但会动态调整, 在 release 和 review 的差异对比中为 50px
+      // 这里折中为 45px 会根据代码行数动态调整, 45px 既不会在行数少时显得太宽, 也可以在大多数情况下保持宽度一致
       .lines-num {
-      text-wrap-mode: wrap; // 2024年10月浏览器开始支持
+        min-width: 45px;
       }
       // 合并视图的第四列
       &.code-diff-unified colgroup col:nth-child(4),
@@ -126,4 +132,10 @@ export const diff = css`
         width: 20;
       }
     }
+    // 修复对比视图内容中的圆角和背景溢出
+    .file-body.file-code {
+      border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
+      overflow: hidden;
+    }
+  }
 `;