Issue/PR 的时间线样式间隔和大小

.github/release.md

@@ -2,18 +2,12 @@
 
 #### 更符合 GitHub 风格
 
-- 创建仓库页面下拉菜单选项样式同步
-- 使克隆菜单非常像 GitHub, 调整了元素的高度和宽度以及克隆地址的字体
+- 同步 PR 的合并提交头像样式
+- 同步 PR 中的合并提交按钮颜色
+- 同步 Issue/PR 的时间线样式
 
 ## 🎈 Perf
 
-- 稍微减小了热力图方块的大小
+- 优化全局按钮样式
 
 ## 🐞 Fix
-
-- 修复顶部导航栏的菜单按钮悬浮颜色
-- 修复选择输入框的样式
-- 修复创建仓库时拥有者按钮的高度
-- 修复一些输入框在整体元素中不居中
-- 修复一些下拉菜单在向上弹出时与向下弹出不一致的问题
-- 修复一些下拉菜单缺失边框线, 比如仓库动态的右侧菜单按钮

src/core/github.ts

@@ -350,6 +350,9 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
       },
     },
     control: {
+      bgColor: {
+        rest: githubColor.control.bgColor.rest,
+      },
       transparent: {
         bgColor: {
           hover: githubColor.control.transparent.bgColor.hover,

src/core/theme.ts

@@ -13,8 +13,10 @@ function stringToBoolean(str: string, name: string): boolean {
   }
 }
 
-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 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";
+export const animationUp = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearUp}`;
 
 const emoji = `
 .emoji[aria-label="check mark"],
@@ -60,8 +62,12 @@ export function createTheme(theme: Theme): void {
     accentColor: themeVars.color.accent,
     colorScheme: isDarkTheme ? "dark" : "light",
   });
-  globalKeyframes(overlayAppear, {
+  globalKeyframes(overlayAppearDown, {
     "0%": { opacity: 0, transform: "translateY(-12px)" },
     "100%": { opacity: 1, transform: "translateY(0)" },
   });
+  globalKeyframes(overlayAppearUp, {
+    "0%": { opacity: 0, transform: "translateY(12px)" },
+    "100%": { opacity: 1, transform: "translateY(0)" },
+  });
 }

src/types/color/github.ts

@@ -41,6 +41,7 @@ export const github = {
     success: {
       /** 成功的背景颜色
        * @issue `babel` 重新开启图标背景颜色
+       * @issue `prMerge` 合并提交的图标背景色
        */
       emphasis: null,
     },
@@ -157,6 +158,12 @@ export const github = {
     },
   },
   control: {
+    bgColor: {
+      /** 背景色
+       * @issue `timeline` 时间线标签背景色
+       */
+      rest: null,
+    },
     transparent: {
       bgColor: {
         /** 悬停色

styles/components/commit.tsx

@@ -57,8 +57,8 @@ export const commit = css`
 export const commitStatus = css`
   .flex-text-inline[data-global-init="initCommitStatuses"] {
     padding: 6px;
+    margin-top: 2px;
     border-radius: ${otherThemeVars.border.radius};
-    margin-right: 6px;
     &:hover {
       background-color: ${themeVars.github.control.transparent.bgColor.hover};
     }

styles/components/filelist.tsx

@@ -16,16 +16,6 @@ export const branchButton = css`
   }
 `;
 
-// 仓库按钮
-export const repoButton = css`
-  .page-content.repository.file.list {
-    // clone 按钮调整
-    .repo-button-row .repo-button-row-right .ui.primary.button span {
-      margin: 0px 3px;
-    }
-  }
-`;
-
 // 仓库文件列表
 export const repoFiles = css`
   .repository.file.list {
@@ -45,17 +35,16 @@ export const repoFiles = css`
         &.repo-file-last-commit {
           min-height: 3.725rem;
           .latest-commit {
+            gap: 8px;
             .commit-summary {
               color: ${themeVars.color.text.light.num1};
             }
             img.tw-align-middle {
               margin-top: -1px;
               margin-left: 1px;
-              margin-right: 8px !important;
             }
             // 作者
             .author-wrapper {
-              margin-right: 6px;
               &:hover {
                 color: ${themeVars.color.text.self};
               }
@@ -199,7 +188,7 @@ export const repoSidebarBottom = css`
         .color-icon {
           height: 8px;
           width: 8px;
-          margin-right: 6px;
+          margin-right: 8px;
         }
         .tw-font-semibold {
           color: ${themeVars.color.text.self};

styles/components/issue.tsx

@@ -1,4 +1,4 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
 export const button = css`
@@ -26,17 +26,14 @@ export const babel = css`
       // 时间线打开状态标签
       &.tw-bg-green {
         background-color: ${themeVars.github.bgColor.success.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.success.emphasis} !important;
       }
       // 时间线关闭状态标签
       &.tw-bg-red {
         background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.done.emphasis} !important;
       }
       // 时间线合并状态标签
       &.tw-bg-purple {
         background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.done.emphasis} !important;
       }
     }
   }
@@ -121,3 +118,73 @@ export const dropdown = css`
     }
   }
 `;
+
+// PR 界面的 PR 操作评论头像
+export const prMerge = css`
+  .repository.view.issue .comment-list .timeline-item.pull-merge-box {
+    .timeline-avatar {
+      background-color: ${themeVars.github.bgColor.success.emphasis};
+      color: ${themeVars.color.text.self} !important;
+      border-radius: ${otherThemeVars.border.radius};
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+`;
+
+// 时间线
+export const timeline = css`
+  .repository.view.issue {
+    .comment-list {
+      .timeline-item,
+      .timeline-item-group {
+        padding: 16px 0;
+        // 事件
+        &.event {
+          // 修复覆盖后的位置问题
+          padding-left: 15px;
+          .avatar {
+            width: 20px;
+            height: 20px;
+          }
+          .badge {
+            border: 2px solid ${themeVars.color.body};
+          }
+          // 仅匹配只有 badge
+          .badge:not([class*=" "]) {
+            background-color: ${themeVars.github.control.bgColor.rest};
+            svg {
+              color: ${themeVars.color.text.light.num1};
+            }
+          }
+        }
+        // 提交
+        &.commits-list {
+          // 每个提交之间的间隔
+          .flex-text-block {
+            padding-top: 4px;
+          }
+          .badge svg {
+            color: ${themeVars.color.text.light.num1};
+          }
+          // 仅覆盖左侧 commit 不覆盖右侧 SHA
+          a.muted {
+            font-size: 12px;
+            color: ${themeVars.color.text.light.num1};
+            text-decoration-line: underline;
+            &:hover {
+              color: ${themeVars.color.primary.self};
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/release.tsx

@@ -62,8 +62,12 @@ export const releases = css`
             margin-top: 1px;
           }
         }
-        .js-branch-tag-selector {
-          margin-top: 8px;
+        // 分支选择按钮
+        .ui.button.branch-dropdown-button {
+          min-height: 20px;
+          line-height: 20px;
+          padding: 3px 12px;
+          font-size: 12px;
         }
       }
       // 右侧发布详细信息

styles/components/repo.tsx

@@ -6,13 +6,6 @@ export const repoHeader = css`
     // 点星/关注/克隆/RSS 按钮
     .ui.compact.button {
       padding: 3px 12px;
-      svg {
-        color: ${themeVars.color.text.light.num1};
-      }
-      // 文本跟图标间隔, 文本在手机下不显示
-      span {
-        margin-left: 0.5rem;
-      }
     }
     // 仓库图标
     img.ui.avatar {

styles/public/button.tsx

@@ -18,12 +18,25 @@ export const baseButton = css`
     min-height: 30px;
     font-weight: 500;
     padding: 9px 16px;
+    &.ui {
+      gap: 8px;
+    }
   }
-
-  .ui.primary.button {
-    ${primaryStyle}
-    &:hover {
-      ${primaryHoverStyle}
+  .ui.button:not(.primary):not(.red) svg {
+    color: ${themeVars.color.text.light.num1};
+  }
+  // 主色调按钮保持白色
+  .ui.primary.buttons .button svg {
+    color: ${themeVars.color.text.self};
+  }
+  .ui.primary {
+    &.button,
+    // 按钮组, PR 里的压缩合并按钮
+    &.buttons .button {
+      ${primaryStyle}
+      &:hover {
+        ${primaryHoverStyle}
+      }
     }
   }
   // 主色调基本按钮和普通按钮一样
@@ -76,14 +89,6 @@ export const redButton = css`
   }
 `;
 
-// 分支菜单按钮
-export const branchDropdownButton = css`
-  .ui.button.branch-dropdown-button {
-    padding: 3px 12px;
-    min-height: 30px;
-  }
-`;
-
 // 修复按钮高度
 export const fixButtonHeight = css`
   .ui.small.buttons .button,

styles/public/dropdown.tsx

@@ -1,4 +1,4 @@
-import { animation } from "src/core/theme";
+import { animationDown, animationUp } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
@@ -6,7 +6,7 @@ export const dropdown = css`
   .ui.dropdown,
   .ui.menu .ui.dropdown {
     .menu {
-      animation: ${animation};
+      animation: ${animationDown};
       // 统一所有下拉菜单的样式
       background-color: ${themeVars.color.menu} !important;
       border: unset !important;
@@ -38,7 +38,6 @@ export const dropdown = css`
           }
         }
         svg {
-          color: ${themeVars.color.text.light.num1};
           margin-right: 0.5rem;
         }
         &.active,
@@ -68,6 +67,7 @@ export const dropdown = css`
   .ui.dropdown.upward,
   .ui.menu .ui.dropdown.upward {
     .menu {
+      animation: ${animationUp};
       margin-bottom: 0.35em !important;
     }
   }
@@ -142,7 +142,7 @@ export const selectionDropdown = css`
     outline: none;
   }
   // 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线
-  .ui.upward.active.selection.dropdown:hover {
+  .ui.selection.dropdown.active.search.upward:hover {
     box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
   }
   // 由于之前的排除导致样式优先级变高, 小按钮去除圆角

styles/public/menu.tsx

@@ -110,6 +110,9 @@ export const verticalMenu = css`
 `;
 
 export const menu = css`
+  .menu .item svg {
+    color: ${themeVars.color.text.light.num1};
+  }
   // 菜单默认悬浮色更改
   .ui.menu a.item,
   .ui.secondary.pointing.menu a.item,
@@ -168,7 +171,6 @@ export const secondaryMenu = css`
       border-radius: ${otherThemeVars.border.radius};
       color: ${themeVars.color.text.self};
       svg {
-        color: ${themeVars.color.text.light.num1};
         margin-right: 8px;
       }
     }

styles/public/modal.tsx

@@ -1,7 +1,9 @@
+import { animationDown } from "src/core/theme";
 import { css, themeVars } from "src/types/vars";
 
 export const modal = css`
   .ui.modal {
+    animation: ${animationDown};
     border: 1.5px solid ${themeVars.color.light.border};
 
     > .header {

styles/public/tippy.tsx

@@ -1,4 +1,4 @@
-import { animation } from "src/core/theme";
+import { animationDown } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
@@ -7,7 +7,7 @@ export const tippyBox = css`
     margin-top: -3px;
     border-radius: 12px;
     overflow: hidden;
-    animation: ${animation};
+    animation: ${animationDown};
     // 边框线同步 github 样式
     &[data-theme="default"],
     &[data-theme="box-with-header"] {

styles/public/transition.scss

@@ -37,7 +37,6 @@
 textarea,
 .ui.form input,
 .menu .item,
-.ui.modal,
 .job-step-summary,
 .job-step-logs,
 .job-brief-item {