release

CHANGELOG.md

@@ -2,17 +2,16 @@
 
 ##### 更符合 GitHub 风格
 
+- 优化差异对比代码块的样式
 - 优化用户头像样式
 - 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式
 - 优化用户动态样式
 - 优化仓库发布页面样式
-- 同步字符提示的提示框动画
+- 优化字符提示的提示框动画
 
 ### 🐞 Fix
 
-- 修复 Issue/PR 侧边栏的时间追踪样式
-- 修复 Issue/PR 详细页面中的部分文字颜色
-- 修复 Issue/PR 详细页面中时间线上的标签样式
+- 修复 Issue/PR 详细页面中的部分文字颜色, 时间线上的标签样式和侧边栏的时间追踪样式
 - 修复一些选择输入框的排列问题
 
 ## 📃 English
@@ -20,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

src/core/theme.ts

@@ -7,7 +7,12 @@ import type { MapLeafNodes, WithOptionalLayer } from "./types";
 export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
 
 export const overlayAppear = "overlay-appear";
-export const animation = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppear}`;
+export const animation = {
+  animation: overlayAppear,
+  animationDuration: "80ms",
+  animationFillMode: "forwards",
+  animationTimingFunction: "ease-in",
+};
 export const overlayAppearDown = "overlay-appear-down";
 export const animationDown = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearDown}`;
 export const overlayAppearUp = "overlay-appear-up";

styles/components/diff.ts

@@ -1,15 +1,49 @@
 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: 28px;
+    // 展开按钮高度与折叠行一致
+    .code-expander-buttons {
+      .code-expander-button {
+        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 {
+        background: ${themeVars.github.bgColor.accent.emphasis};
+        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 {
@@ -17,29 +51,16 @@ export const diff = css`
       border-color: unset;
     }
   }
-  /* 增加/删除相关代码背景色圆角 */
+  // 增加/删除相关代码背景色圆角
   .added-code,
   .removed-code {
-    border-radius: 0.1875rem;
+    border-radius: 3px;
     color: ${themeVars.color.text.self};
-    /* 覆盖掉 chroma 的颜色 */
+    // 覆盖掉 chroma 的颜色
     * {
       color: ${themeVars.color.text.self} !important;
     }
   }
-  /* 展开/收缩按钮 */
-  .code-expander-button {
-    color: ${themeVars.color.text.light.num1};
-    height: 28px !important;
-    &:hover {
-      background: ${themeVars.github.bgColor.accent.emphasis};
-      color: ${themeVars.color.white};
-    }
-  }
-  /* 行号居中 */
-  .lines-num {
-    text-align: center !important;
-  }
   // 差异对比文件盒子
   .diff-file-box {
     // 差异对比文件头
@@ -63,17 +84,58 @@ 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;
+      }
+      // Gitea 分列视图下默认 100% 宽度的目的是如果单文件只增加或只删除的情况下, 保持无内容的列的宽度一致, 始终保持左右两边的列宽度一致
+      // 保持 Gitea 的默认设置, 不对行号宽度做处理
+      /* &.code-diff-split table {
+        width: auto;
+      } */
+      // 行号宽度
+      // 40px: 长度 = 9999 行
+      // 45px: 长度 = 99999 行
+      // 50px: 长度 = 999999 行
+      // GitHub 在 commit 中的行宽最小为 40px, 但会动态调整, 在 release 和 review 的差异对比中为 50px
+      // 这里折中为 45px 会根据代码行数动态调整, 45px 既不会在行数少时显得太宽, 也可以在大多数情况下保持宽度一致
+      .lines-num {
+        min-width: 45px;
+      }
+      // 合并视图的第四列
+      &.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;
+      }
+    }
+    // 修复对比视图内容中的圆角和背景溢出
+    .file-body.file-code {
+      border-radius: 0 0 ${otherThemeVars.border.radius} ${otherThemeVars.border.radius};
+      overflow: hidden;
+    }
+  }
 `;

styles/components/heatmap.ts

@@ -85,7 +85,6 @@ export const activity = css`
       // 动态的主要内容
       > .flex-item-main {
         gap: 8px !important;
-        text-underline-offset: 0.2rem;
         // 动态的标题
         > div:not([class]) {
           display: flex;

styles/components/packages.ts

@@ -35,7 +35,6 @@ export const packagesList = css`
               font-size: 12px;
               a {
                 text-decoration: underline;
-                text-underline-offset: 3px;
               }
             }
           }

styles/public/base.ts

@@ -4,4 +4,7 @@ export const body = css`
   body {
     line-height: 18px;
   }
+  a {
+    text-underline-offset: 0.2rem; // 0.2rem 可以始终保持下划线不受 overflow: hidden 的影响
+  }
 `;

styles/public/tippy.ts

@@ -43,7 +43,7 @@ export const tippyBox = css`
     }
     // 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
     &[data-theme="tooltip"] {
-      animation: ${animation};
+      ${animation};
       .tippy-content {
         font-size: 12px;
         font-weight: 400;