头像和动态样式 & Issue 样式修复

2025-10-31 17:11:12 +00:00 · 2025-10-31 12:51:50 +08:00
parent 90b618688b
commit 93485dc5f7
20 changed files with 175 additions and 35 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,18 +2,17 @@

 ##### 更符合 GitHub 风格

- 优化用户动态
- 优化顶部导航栏头像
- 优化设置页面
- 优化仓库活动页面
+- 优化用户头像样式
+- 优化 Issue/PR 的评论菜单按钮样式
+- 优化用户动态样式
+
+### 🐞 Fix
+
+- 修复 Issue/PR 侧边栏的时间追踪样式
+- 修复 Issue/PR 详细页面中的部分文字颜色

 ## 📃 English

 ### 🌈 Style

-##### More aligned with GitHub style
-
- Optimized user activity feed
- Optimized top navigation bar avatars
- Optimized settings page
- Optimized repository activity page
+##### More aligned with GitHub style
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "gitea-github-theme",
-  "version": "1.25.0",
+  "version": "1.25.1",
  "type": "module",
  "scripts": {
    "dev": "vite build --mode dev",
--- a/src/core/github.ts
+++ b/src/core/github.ts
@@ -7,6 +7,7 @@ import { type ThemeColor } from "./color";

 export type GithubColor = {
  isDarkTheme: boolean;
+  avatar: { bgColor: string; borderColor: string };
  display: {
    blue: { fgColor: string };
    brown: { fgColor: string };
@@ -221,6 +222,10 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
  };

  const github: Github = {
+    avatar: {
+      bgColor: githubColor.avatar.bgColor,
+      borderColor: githubColor.avatar.borderColor,
+    },
    fgColor: {
      accent: githubColor.fgColor.accent,
      success: githubColor.fgColor.success,
--- a/src/types/color/github.ts
+++ b/src/types/color/github.ts
@@ -1,4 +1,10 @@
 export const github = {
+  avatar: {
+    /** 头像的背景颜色 */
+    bgColor: null,
+    /** 头像的边框颜色 */
+    borderColor: null,
+  },
  /** 用于 color 属性的颜色 */
  fgColor: {
    /** 强调色
--- a/styles/components/commit.ts
+++ b/styles/components/commit.ts
@@ -7,6 +7,9 @@ export const commit = css`
    #commits-table.ui.basic.striped.table tbody.commit-list {
      // 作者
      .author {
+        img.ui.avatar {
+          border-radius: 9999px;
+        }
        // 作者名称
        .author-wrapper {
          color: ${themeVars.color.text.light.num1};
@@ -26,7 +29,7 @@ export const commit = css`
      .message {
        // tag 标签
        a.ui.basic.primary.label {
-          border-radius: 25px;
+          border-radius: 9999px;
          border-width: 1.5px;
          padding: 3px 8px !important;
        }
@@ -85,6 +88,9 @@ export const commitStatus = css`
 // 提交图
 export const commitGraph = css`
  .page-content.repository #git-graph-container {
+    img.ui.avatar {
+      border-radius: 9999px;
+    }
    // 提交图的 SHA 标签
    li .ui.label.commit-id-short {
      height: 25px;
--- a/styles/components/filelist.ts
+++ b/styles/components/filelist.ts
@@ -58,7 +58,8 @@ export const repoFiles = css`
            .commit-summary {
              color: ${themeVars.color.text.light.num1};
            }
-            img.tw-align-middle {
+            img.ui.avatar {
+              border-radius: 9999px;
              margin-top: -1px;
              margin-left: 1px;
            }
@@ -333,6 +334,9 @@ export const repoFileView = css`
            .commit-summary {
              color: ${themeVars.color.text.light.num1};
            }
+            img.ui.avatar {
+              border-radius: 9999px;
+            }
          }
          // 右侧提交时间
          > .age {
--- a/styles/components/heatmap.ts
+++ b/styles/components/heatmap.ts
@@ -77,17 +77,39 @@ export const activity = css`
      padding: 16px;
      > .flex-item-leading {
        img {
-          width: 20px;
-          height: 20px;
+          width: 24px;
+          height: 24px;
+          border-radius: 9999px;
        }
      }
+      // 动态的主要内容
      > .flex-item-main {
        gap: 8px !important;
+        // 动态的标题
        > div:not([class]) {
          display: flex;
-          gap: 8px;
+          align-items: baseline;
+          gap: 6px;
          flex-wrap: wrap;
+          > a {
+            color: ${themeVars.color.text.self};
+            text-decoration: none;
+            text-underline-offset: 0.2rem;
+            // 不匹配作者
+            &:not([title]) {
+              text-decoration: underline;
+              // 尽量只选中仓库名, 不匹配标签和分支
+              &:not([href*="tag"]):not([href*="branch"]) {
+                color: ${themeVars.color.primary.self};
+              }
+            }
+          }
+          relative-time {
+            color: ${themeVars.color.text.light.num1};
+            font-size: 12px;
+          }
        }
+        // 动态的描述
        > .tw-flex-col {
          gap: 0px !important;
          > .flex-text-block {
@@ -95,8 +117,9 @@ export const activity = css`
            font-size: 12px;
            color: ${themeVars.color.text.light.num1};
            img {
-              width: 14px;
-              height: 14px;
+              width: 16px;
+              height: 16px;
+              border-radius: 9999px;
            }
            .ui.sha.label {
              margin-top: 0;
--- a/styles/components/issue.ts
+++ b/styles/components/issue.ts
@@ -56,6 +56,9 @@ export const issueList = css`
          height: 32px;
        }
      }
+      img.ui.avatar {
+        border-radius: 9999px;
+      }
    }
  }
  // 里程碑详细页面的 Issue 列表
@@ -70,6 +73,9 @@ export const issueList = css`
      border: 1px solid ${themeVars.color.light.border};
      border-bottom-left-radius: ${otherThemeVars.border.radius};
      border-bottom-right-radius: ${otherThemeVars.border.radius};
+      img.ui.avatar {
+        border-radius: 9999px;
+      }
      > .flex-item {
        align-items: center;
        padding: 0;
@@ -176,6 +182,9 @@ export const issuePins = css`
        display: none;
      }
    }
+    img.ui.avatar {
+      border-radius: 9999px;
+    }
  }
 `;

@@ -269,6 +278,9 @@ export const prBranch = css`
 // 评论
 export const comment = css`
  .comment .comment-container {
+    img.ui.avatar {
+      border-radius: 9999px;
+    }
    // 去除评论标题左侧指向头像的小箭头
    .comment-header,
    &:target .comment-header {
@@ -306,9 +318,18 @@ export const comment = css`
      //   display: none;
      // }
      .context-dropdown {
+        height: 28px;
+        padding: 0 6px;
+        border-radius: ${otherThemeVars.border.radius};
+        &:hover {
+          background-color: ${themeVars.github.control.transparent.bgColor.hover};
+        }
        a.context-menu {
          display: flex;
          align-items: center;
+          &:hover {
+            color: inherit;
+          }
        }
        // 评论菜单的删除按钮
        .menu .item.delete-comment {
@@ -326,7 +347,7 @@ export const comment = css`
      align-items: center;
      justify-content: center;
      background: ${themeVars.color.button};
-      border-radius: 25px;
+      border-radius: 9999px;
      border: 1px solid ${themeVars.color.light.border};
      color: ${themeVars.color.text.light.num1};
      padding: 0px 8px !important;
@@ -337,7 +358,7 @@ export const comment = css`
    .bottom-reactions {
      .ui.ui.ui.label {
        background-color: unset !important;
-        border-radius: 25px;
+        border-radius: 9999px;
        border-color: ${themeVars.color.light.border};
        &:hover {
          background-color: ${themeVars.color.reaction.hoverBg} !important;
@@ -392,7 +413,7 @@ export const prMerge = css`
    // 头像
    .timeline-avatar {
      color: ${themeVars.color.white} !important;
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 9999px;
      width: 40px;
      height: 40px;
      display: flex;
@@ -405,6 +426,7 @@ export const prMerge = css`
      // 可以合并
      &.green {
        background-color: ${themeVars.github.bgColor.success.emphasis};
+        border-radius: ${otherThemeVars.border.radius};
        // 操作评论边框色
        + .content > .ui.attached.segment {
          border-left-color: ${themeVars.github.bgColor.success.emphasis};
@@ -420,6 +442,7 @@ export const prMerge = css`
      // 已合并
      &.purple {
        background-color: ${themeVars.github.bgColor.done.emphasis};
+        border-radius: ${otherThemeVars.border.radius};
        + .content > .ui.attached.segment {
          border-left-color: ${themeVars.github.bgColor.done.emphasis};
          border-right-color: ${themeVars.github.bgColor.done.emphasis};
@@ -493,6 +516,9 @@ export const timeline = css`
      .timeline-item,
      .timeline-item-group {
        padding: 16px 0;
+        .comment-text-line {
+          color: ${themeVars.color.text.light.num1};
+        }
        // 事件
        &.event {
          // 修复覆盖后的位置问题
@@ -545,6 +571,9 @@ export const issueSidebar = css`
  // 工单&创建工单&PR页面侧边栏
  .page-content.repository.issue {
    .issue-content {
+      img.ui.avatar {
+        border-radius: 9999px;
+      }
      gap: 24px;
      // 侧边栏
      .issue-content-right {
@@ -641,13 +670,22 @@ export const issueSidebar = css`
          }
        }
        // 时间追踪
-        > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
-          align-items: center;
-          border-radius: ${otherThemeVars.border.radius};
-          text-decoration-line: none;
-          height: 28px;
-          &:hover {
-            background: ${themeVars.github.control.transparent.bgColor.hover};
+        > div:not([class]):not([id]) {
+          > .flex-text-block {
+            color: ${themeVars.color.text.light.num1};
+          }
+          > .ui.buttons {
+            ${sidebarPadding};
+            .button {
+              height: 30px;
+              min-height: 30px;
+              &:hover {
+                border-color: ${themeVars.color.light.border};
+                + .button {
+                  border-left-color: ${themeVars.color.light.border};
+                }
+              }
+            }
          }
        }
        // 选中日期颜色
@@ -662,7 +700,8 @@ export const issueSidebar = css`
        // 订阅按钮
        .ui.watching .ui.button {
          padding: 0px 8px;
-          height: 28px;
+          height: 30px;
+          min-height: 30px;
          svg {
            margin: 0 !important;
          }
@@ -670,7 +709,7 @@ export const issueSidebar = css`
        // PIN 按钮
        .form-fetch-action.single-button-form .ui.button,
        // 底部操作按钮
-        .ui.show-modal.button {
+        > .ui.show-modal.button {
          border: 0;
          background: unset;
          font-weight: 400;
@@ -699,3 +738,19 @@ export const issueSidebar = css`
    }
  }
 `;
+
+// 工单标题
+export const issueTitle = css`
+  .page-content.repository.issue {
+    .issue-title-header {
+      .issue-title-meta {
+        .issue-state-label {
+          padding: 6px 9px !important;
+        }
+        .time-desc {
+          color: ${themeVars.color.text.light.num1};
+        }
+      }
+    }
+  }
+`;
--- a/styles/components/navbar.ts
+++ b/styles/components/navbar.ts
@@ -83,7 +83,7 @@ export const navbarRight = css`
            }
            // 头像
            img {
-              border-radius: 25px;
+              border-radius: 9999px;
              height: 32px;
              max-height: 32px;
              margin: 0 !important;
@@ -99,7 +99,7 @@ export const navbarRight = css`
        .notification_count,
        .header-stopwatch-dot {
          background-color: ${themeVars.github.bgColor.accent.emphasis};
-          border-radius: 25px;
+          border-radius: 9999px;
          color: ${themeVars.color.white};
          font-size: 9px;
          font-weight: 600;
--- a/styles/components/packages.ts
+++ b/styles/components/packages.ts
@@ -102,7 +102,7 @@ export const packagesDetail = css`
              justify-content: space-between;
              > a {
                border: 1px solid ${themeVars.color.light.border};
-                border-radius: 25px;
+                border-radius: 9999px;
                font-size: 12px;
                padding: 0px 6px;
                min-height: 20px;
--- a/styles/components/release.ts
+++ b/styles/components/release.ts
@@ -105,6 +105,9 @@ export const releases = css`
        // 右侧发布详细信息
        .segment.detail {
          padding: 16px;
+          img.ui.avatar {
+            border-radius: 9999px;
+          }
          .svg {
            color: ${themeVars.color.text.light.num1};
          }
--- a/styles/components/repo.ts
+++ b/styles/components/repo.ts
@@ -71,7 +71,7 @@ export const repoTopic = css`
  .flex-item-main > .label-list .ui.label,
  // 仓库文件列表下的 topic 标签
  #repo-topics .ui.label.repo-topic {
-    border-radius: 25px;
+    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    padding: 2.5px 10px;
--- a/styles/components/user.ts
+++ b/styles/components/user.ts
@@ -60,3 +60,16 @@ export const stars = css`
    }
  }
 `;
+
+// 用户信息卡片
+export const profileCard = css`
+  .page-content.user.profile {
+    #profile-avatar-card {
+      #profile-avatar {
+        img.ui.avatar {
+          border-radius: 9999px;
+        }
+      }
+    }
+  }
+`;
--- a/styles/public/label.ts
+++ b/styles/public/label.ts
@@ -7,7 +7,7 @@ export const label = css`
  span {
    &.ui.ui.ui {
      &.label {
-        border-radius: 25px;
+        border-radius: 9999px;
        padding: 1.5px 6px;
        // 多个标签的组合标签的圆角修复
        &.scope-parent {
@@ -102,6 +102,9 @@ export const shaLabel = css`
        margin-left: 5px;
        height: 25px;
      }
+      img.ui.avatar {
+        border-radius: 9999px;
+      }
    }
  }
  // 修复带验证的提交 SHA 标签的高度
--- a/styles/public/other.ts
+++ b/styles/public/other.ts
@@ -22,3 +22,12 @@ export const svg = css`
    color: #429cf0 !important;
  }
 `;
+
+export const avatar = css`
+  img.ui.avatar,
+  .ui.avatar img,
+  .ui.avatar svg {
+    background-color: ${themeVars.github.avatar.bgColor};
+    box-shadow: 0 0 0 1px ${themeVars.github.avatar.borderColor};
+  }
+`;
--- a/themes/colorblind-dark.css.ts
+++ b/themes/colorblind-dark.css.ts
@@ -9,6 +9,7 @@ import { darkGithubColors } from "themes/dark";

 export const colorblindDarkGithubColors: GithubColor = {
  isDarkTheme: true,
+  avatar: darkGithubColors.avatar,
  display: darkGithubColors.display,
  diffBlob: {
    addtionNum: { bgColor: "#58a6ff4d" },
--- a/themes/colorblind-light.css.ts
+++ b/themes/colorblind-light.css.ts
@@ -9,6 +9,7 @@ import { lightGithubColors } from "themes/light";

 export const colorblindLightGithubColors: GithubColor = {
  isDarkTheme: false,
+  avatar: lightGithubColors.avatar,
  display: lightGithubColors.display,
  diffBlob: {
    addtionNum: { bgColor: "#b6e3ff" },
--- a/themes/dark.css.ts
+++ b/themes/dark.css.ts
@@ -7,6 +7,10 @@ import { github2ThemeColor, type GithubColor } from "src/core/github";

 export const darkGithubColors: GithubColor = {
  isDarkTheme: true,
+  avatar: {
+    bgColor: "#ffffff1a",
+    borderColor: "#ffffff26",
+  },
  display: {
    blue: { fgColor: "#4493f8" },
    brown: { fgColor: "#b69a6d" },
--- a/themes/light.css.ts
+++ b/themes/light.css.ts
@@ -7,6 +7,10 @@ import { github2ThemeColor, type GithubColor } from "src/core/github";

 export const lightGithubColors: GithubColor = {
  isDarkTheme: false,
+  avatar: {
+    bgColor: "#ffffff",
+    borderColor: "#1f232826",
+  },
  display: {
    blue: { fgColor: "#0969da" },
    brown: { fgColor: "#755f43" },
--- a/themes/soft-dark.css.ts
+++ b/themes/soft-dark.css.ts
@@ -9,6 +9,10 @@ import { darkGithubColors } from "themes/dark";

 export const softDarkGithubColors: GithubColor = {
  isDarkTheme: true,
+  avatar: {
+    bgColor: "#cdd9e51a",
+    borderColor: "#cdd9e526",
+  },
  display: darkGithubColors.display,
  diffBlob: {
    addtionNum: { bgColor: "#57ab5a4d" },