release

CHANGELOG.md

@@ -1,51 +1,33 @@
 ### 🌈 Style
 
-- 优化顶部和二级导航栏的样式和颜色 #18
-
 ##### 更符合 GitHub 风格
 
-- 修复并同步工单或 PR 详细页面下的标签菜单样式 #19
+- 优化差异对比代码块的样式
-- 统一仓库/用户/组织列表无搜索结果时的样式 #20
+- 优化用户头像样式
-- 同步页脚样式
+- 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式
-- 优化下拉菜单的样式
+- 优化用户动态样式
-- 优化创建标签菜单的菜单项的样式
+- 优化仓库发布页面样式
-- 同步亮色和柔和暗色主题下的菜单颜色
+- 优化字符提示的提示框动画
-- 同步工作流运行页面的运行时间字体样式和重新运行按钮样式
-- VSCode 和 VSCodium 图标添加颜色
 
 ### 🐞 Fix
 
-- 修复 Wiki 页面搜索项目没有正确隐藏的问题 #15
+- 修复 Issue/PR 详细页面中的部分文字颜色, 时间线上的标签样式和侧边栏的时间追踪样式
-- 修复后台账户管理排序菜单项的宽度问题
+- 修复一些选择输入框的排列问题
-- 修复合并提交中的主色调按钮组阴影问题
-- 修复仓库页面下二级导航栏下划线过粗的问题
-- 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角问题
-- 修复导航栏工单/PR等仪表板下筛选等菜单的子项的间距问题
-- 修复手机下仪表板二级导航栏用户菜单按钮没有居中的问题
 
 ## 📃 English
 
 ### 🌈 Style
 
-- Optimized styles and colors for top and secondary navigation bars #18
-
 ##### More aligned with GitHub style
 
-- Fixed and synchronized label menu styles under issue or PR detail pages #19
+- Optimized diff comparison code block styles
-- Unified styles for repository/user/organization lists when no search results are found #20
+- Optimized user avatar styles
-- Synchronized footer styles
+- Optimized three-dot menu button styles for Issue/PR/Diff/Actions
-- Optimized dropdown menu styles
+- Optimized user activity feed styles
-- Optimized menu item styles for creating label menus
+- Optimized repository release page styles
-- Synchronized menu colors in light and soft dark themes
+- Optimized tooltip animation for character hints
-- Synchronized font styles for run time and rerun button styles on workflow run pages
-- Added colors to VSCode and VSCodium icons
 
 ### 🐞 Fix
 
-- Fixed issue where Wiki page search items were not properly hidden #15
+- Fixed text color issues in Issue/PR detail pages, timeline label styles, and sidebar time tracking styles
-- Fixed width issue for sorting menu items in admin account management
+- Fixed alignment issues with some select input fields
-- Fixed shadow issue for primary color button groups in merge commits
-- Fixed issue where underlines in secondary navigation bars on repository pages were too thick
-- Fixed menu corner radius issue when no create organization button exists under dashboard user switching button menu
-- Fixed spacing issue for sub-items in filter menus under navigation bar issues/PRs dashboards
-- Fixed issue where user menu buttons in secondary navigation bars on mobile dashboards were not centered

README.md

@@ -48,10 +48,6 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
 3. 重启 Gitea
 4. 在设置中查看主题
 
-> [!IMPORTANT]
->
-> 自动颜色主题需要亮色和暗色的主题文件
-
 例: 主题文件名为 `theme-github-dark.css`，则添加 `github-dark` 到 `THEMES` 末尾
 
 `gitea/conf/app.ini` 例:
@@ -64,6 +60,10 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 详细请查看 Gitea 文档
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
 
+> [!IMPORTANT]
+>
+> 自动颜色主题需要亮色和暗色的主题文件
+
 ## 截图
 
 ### 基本主题

README_EN.md

@@ -54,10 +54,6 @@ accepted.
 3. Restart Gitea
 4. Check the theme in the settings
 
-> [!IMPORTANT]
->
-> Automatic color theme requires both light and dark theme files.
-
 Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES`
 
 Example `gitea/conf/app.ini`:
@@ -70,6 +66,10 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 For details, please refer to the Gitea documentation
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
 
+> [!IMPORTANT]
+>
+> Automatic color theme requires both light and dark theme files.
+
 ## Screenshots
 
 ### Basic Themes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitea-github-theme",
-  "version": "1.24.7",
+  "version": "1.25.1",
   "type": "module",
   "scripts": {
     "dev": "vite build --mode dev",

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,

src/core/theme.ts

@@ -6,6 +6,13 @@ import type { MapLeafNodes, WithOptionalLayer } from "./types";
 
 export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
 
+export const overlayAppear = "overlay-appear";
+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";

src/types/color/github.ts

@@ -1,4 +1,10 @@
 export const github = {
+  avatar: {
+    /** 头像的背景颜色 */
+    bgColor: null,
+    /** 头像的边框颜色 */
+    borderColor: null,
+  },
   /** 用于 color 属性的颜色 */
   fgColor: {
     /** 强调色
@@ -188,6 +194,7 @@ export const github = {
          * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
          * @dashboard `dashboard` 仓库列表项目的悬停背景颜色
          * @notification `notification` 通知列表的按钮悬停背景颜色
+         * @actions `actions` 列表页运行信息的三点操作按钮悬停背景颜色
          */
         hover: null,
       },

styles/components/actions.ts

@@ -36,7 +36,7 @@ export const actions = css`
         border-top-right-radius: ${otherThemeVars.border.radius};
         padding: 16px;
         margin-bottom: 0;
-        > .item {
+        > .ui.dropdown {
           color: ${themeVars.color.text.light.num1};
         }
       }
@@ -76,22 +76,26 @@ export const actions = css`
 
         .flex-item {
           padding: 16px;
-
           .flex-item-leading {
             align-self: flex-start;
             margin-top: 2px;
           }
-
           .flex-item-main {
             gap: 0.5rem;
           }
-
           .flex-item-trailing {
-            justify-content: space-between;
-
             > .ui.label {
               border-radius: ${otherThemeVars.border.radius};
-              margin-left: 32px;
+            }
+            > .ui.dropdown.jump {
+              border-radius: ${otherThemeVars.border.radius};
+              color: ${themeVars.color.text.light.num1};
+              &:hover {
+                background-color: ${themeVars.github.control.transparent.bgColor.hover};
+              }
+              .menu > .item:hover {
+                color: ${themeVars.color.text.self} !important;
+              }
             }
           }
         }
@@ -223,17 +227,28 @@ export const actionViewRight = css`
   .action-view-right {
     /* 提前加载高度和滚动条 */
     min-height: calc(100vh - 245px);
-
+    // 作业详情页标题
     .job-info-header {
-      padding: 16px 12px 16px 24px;
+      padding: 16px 12px 16px 24px !important;
-      height: 80px;
+      height: 80px !important;
-
+      .job-info-header-left {
-      .job-info-header-title {
+        .job-info-header-title {
-        color: ${themeVars.github.fgColor.accent};
+          color: ${themeVars.github.fgColor.accent} !important;
+        }
+        .job-info-header-detail {
+          margin-top: 8px;
+        }
       }
-
+      .job-info-header-right {
-      .job-info-header-detail {
+        .ui.dropdown {
-        margin-top: 8px;
+          > .button {
+            border: unset;
+            padding: 7px !important;
+          }
+          .menu > .item > i.icon {
+            margin-right: 2px;
+          }
+        }
       }
     }
 
@@ -241,7 +256,7 @@ export const actionViewRight = css`
       // 步骤标题
       .job-step-summary {
         color: ${themeVars.color.console.fg.subtle};
-        padding: 8px 10px;
+        padding: 8px 10px !important;
 
         &.selected {
           // 滚动时固定在顶部的高度与 job-info-header 高度相同

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,9 +29,9 @@ export const commit = css`
       .message {
         // tag 标签
         a.ui.basic.primary.label {
-          border-radius: 25px;
+          border-radius: 9999px;
           border-width: 1.5px;
-          padding: 5px 8px !important;
+          padding: 3px 8px !important;
         }
       }
       // 提交信息右侧
@@ -67,11 +70,36 @@ export const commit = css`
 
 export const commitStatus = css`
   .flex-text-inline[data-global-init="initCommitStatuses"] {
-    padding: 6px;
+    padding: 3px;
     margin-top: 2px;
     border-radius: ${otherThemeVars.border.radius};
     &:hover {
       background-color: ${themeVars.github.control.transparent.bgColor.hover};
     }
+    svg {
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      min-height: 16px;
+    }
+  }
+`;
+
+// 提交图
+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;
+      // 验证提交 SHA 标签
+      &.commit-is-signed {
+        span.ui.label.commit-is-signed {
+          height: 25px;
+        }
+      }
+    }
   }
 `;

styles/components/diff.ts

@@ -1,15 +1,49 @@
-import { css, themeVars } from "src/types/vars";
+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 {
     // 差异对比文件头
@@ -66,7 +87,55 @@ export const diff = css`
         color: ${themeVars.color.text.light.num1};
         font-size: 12px;
         font-weight: 400;
+        .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/filelist.ts

@@ -58,9 +58,11 @@ export const repoFiles = css`
             .commit-summary {
               color: ${themeVars.color.text.light.num1};
             }
-            img.tw-align-middle {
+            img.ui.avatar {
-              margin-top: -1px;
+              border-radius: 9999px;
-              margin-left: 1px;
+              margin-left: 2px;
+              width: 20px;
+              height: 20px;
             }
             // 作者
             .author-wrapper {
@@ -181,17 +183,18 @@ export const repoFileView = css`
       top: 0;
       // 左侧文件树
       .repo-view-file-tree-container {
-        height: calc(100vh - 64px); // 减去头部高度
+        height: 100vh;
         // 固定头部
         position: sticky;
         top: 0;
+        overflow-y: unset;
         &:after {
           content: "";
           position: absolute;
           top: 0;
           right: 0;
           width: 1px;
-          height: calc(100% + 64px); // 头部高度
+          height: 100%;
           background: ${themeVars.color.secondary.self};
         }
         > .repo-button-row {
@@ -282,6 +285,7 @@ export const repoFileView = css`
               font-size: 12px;
             }
             .file-header-right {
+              gap: 0px;
               // 按钮组
               > .ui.buttons {
                 margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了
@@ -298,12 +302,14 @@ export const repoFileView = css`
                 align-items: center;
                 background: ${themeVars.color.button};
                 border: 1px solid ${themeVars.color.light.border};
+                border-left-width: 0;
                 height: 28px;
                 padding: 0 8px;
                 svg {
                   color: ${themeVars.color.text.light.num1};
                 }
                 &:first-of-type {
+                  border-left-width: 1px;
                   border-top-left-radius: ${otherThemeVars.border.radius};
                   border-bottom-left-radius: ${otherThemeVars.border.radius};
                 }
@@ -329,6 +335,11 @@ export const repoFileView = css`
             .commit-summary {
               color: ${themeVars.color.text.light.num1};
             }
+            > img.ui.avatar {
+              border-radius: 9999px;
+              width: 20px;
+              height: 20px;
+            }
           }
           // 右侧提交时间
           > .age {
@@ -430,7 +441,7 @@ export const repoSidebarBottom = css`
         padding: 16px 0;
         .flex-item {
           padding: 16px 0 0 0;
-          .flex-item-icon {
+          .flex-item-leading {
             svg.svg.octicon-tag {
               color: ${themeVars.color.green.self};
               margin-top: 2px;

styles/components/heatmap.ts

@@ -74,22 +74,72 @@ export const activity = css`
     box-shadow: ${themeVars.github.shadow.floating.small};
     > .flex-item {
       gap: 12px;
-      padding: 12px 8px 16px 14px;
+      padding: 16px;
+      > .flex-item-leading {
+        img {
+          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};
+            // 不匹配作者
+            &:not([title]) {
+              // 尽量只选中仓库名, 不匹配标签和分支
+              &:not([href*="tag"]):not([href*="branch"]) {
+                color: ${themeVars.color.primary.self};
+                text-decoration: underline;
+              }
+            }
+          }
+          relative-time {
+            color: ${themeVars.color.text.light.num1};
+            font-size: 12px;
+          }
         }
-        relative-time {
+        // 动态的描述
+        > .tw-flex-col {
+          gap: 0px !important;
+          > .flex-text-block {
+            gap: 4px;
+            font-size: 12px;
+            color: ${themeVars.color.text.light.num1};
+            img {
+              width: 16px;
+              height: 16px;
+              border-radius: 9999px;
+            }
+            .ui.sha.label {
+              margin-top: 0;
+            }
+          }
+        }
+        > .flex-item-body {
+          gap: 4px;
+          font-size: 12px;
           color: ${themeVars.color.text.light.num1};
         }
+        > a {
+          font-size: 12px;
+        }
       }
       // 动态的右侧 svg 图标
-      .flex-item-trailing svg {
+      .flex-item-trailing {
-        height: 20px;
+        align-self: center;
-        width: 20px;
+        svg {
+          height: 18px;
+          width: 18px;
+        }
       }
     }
     > .page.buttons {

styles/components/issue.ts

@@ -56,6 +56,9 @@ export const issueList = css`
           height: 32px;
         }
       }
+      img.ui.avatar {
+        border-radius: 9999px;
+      }
     }
   }
   // 里程碑详细页面的 Issue 列表
@@ -70,9 +73,13 @@ 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;
+        min-height: 64px;
         &:last-child {
           border-bottom-left-radius: ${otherThemeVars.border.radius};
           border-bottom-right-radius: ${otherThemeVars.border.radius};
@@ -80,18 +87,16 @@ export const issueList = css`
         &:hover {
           background-color: ${themeVars.color.hover.opaque};
         }
-        > .flex-item-icon {
+        > .flex-item-leading {
-          display: flex;
+          align-self: flex-start;
-          gap: 4px;
+          margin-top: 14px;
           margin-left: 16px;
-          // 复选框
+          > .flex-text-inline {
-          input {
+            margin-top: 0px !important;
-            background: unset;
+            // 复选框
-            margin-top: 14px;
+            input {
-            margin-right: 8px !important;
+              margin-right: 8px !important;
-          }
+            }
-          svg {
-            margin-top: 14px;
           }
         }
         > .flex-item-main {
@@ -177,6 +182,9 @@ export const issuePins = css`
         display: none;
       }
     }
+    img.ui.avatar {
+      border-radius: 9999px;
+    }
   }
 `;
 
@@ -270,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 {
@@ -307,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 {
@@ -327,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;
@@ -338,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;
@@ -393,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;
@@ -406,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};
@@ -421,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};
@@ -494,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 {
           // 修复覆盖后的位置问题
@@ -546,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 {
@@ -642,13 +670,22 @@ export const issueSidebar = css`
           }
         }
         // 时间追踪
-        > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
+        > div:not([class]):not([id]) {
-          align-items: center;
+          > .flex-text-block {
-          border-radius: ${otherThemeVars.border.radius};
+            color: ${themeVars.color.text.light.num1};
-          text-decoration-line: none;
+          }
-          height: 28px;
+          > .ui.buttons {
-          &:hover {
+            ${sidebarPadding};
-            background: ${themeVars.github.control.transparent.bgColor.hover};
+            .button {
+              height: 30px;
+              min-height: 30px;
+              &:hover {
+                border-color: ${themeVars.color.light.border};
+                + .button {
+                  border-left-color: ${themeVars.color.light.border};
+                }
+              }
+            }
           }
         }
         // 选中日期颜色
@@ -663,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;
           }
@@ -671,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;
@@ -700,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};
+        }
+      }
+    }
+  }
+`;

styles/components/navbar.ts

@@ -75,8 +75,7 @@ export const navbarRight = css`
       .item.ui.dropdown {
         // 头像菜单
         &:last-child {
-          padding-left: 2px; // 调整此选项需同步增减相同的标识的 left
+          padding: 0;
-          padding-right: 16px;
           .text {
             // 不显示小箭头标识
             > .not-mobile {
@@ -84,23 +83,15 @@ export const navbarRight = css`
             }
             // 头像
             img {
-              border-radius: 25px;
+              border-radius: 9999px;
               height: 32px;
               max-height: 32px;
+              margin: 0 !important;
             }
           }
-        }
+          &.active {
-        // 用户头像的管理员标识
+            background: unset;
-        .navbar-profile-admin {
+          }
-          background-color: ${themeVars.github.bgColor.accent.emphasis};
-          border-radius: 25px;
-          border: 2px solid ${themeVars.color.nav.bg};
-          color: ${themeVars.color.white};
-          font-size: 9px;
-          font-weight: 600;
-          padding: 2px 5px;
-          top: -7px;
-          left: 21px;
         }
       }
       // 通知和计时器的圆点
@@ -108,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;

styles/components/notification.ts

@@ -90,7 +90,7 @@ export const notification = css`
       }
       // 通知列表
       &:has(#notification_table) {
-        > .tw-flex:first-child {
+        > .flex-text-block:first-child {
           background-color: ${themeVars.color.box.header};
           border: 1px solid ${themeVars.color.light.border};
           border-bottom: 0;
@@ -137,7 +137,7 @@ export const notification = css`
         color: ${themeVars.color.text.light.num1};
         > .notifications-item {
           border-top: 1px solid ${themeVars.color.light.border};
-          padding: 8px !important;
+          padding: 12px !important;
           &:first-child {
             border-top: 0;
           }
@@ -153,11 +153,11 @@ export const notification = css`
             box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset;
             color: ${themeVars.color.text.self};
           }
-          > .notifications-link {
+          > .notifications-link > div{
-            > .notifications-top-row {
+            &:first-child {
               font-size: 12px !important;
             }
-            > .notifications-bottom-row {
+            &:last-child {
               font-size: 14px !important;
             }
           }

styles/components/packages.ts

@@ -35,7 +35,6 @@ export const packagesList = css`
               font-size: 12px;
               a {
                 text-decoration: underline;
-                text-underline-offset: 3px;
               }
             }
           }
@@ -102,7 +101,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;

styles/components/release.ts

@@ -48,10 +48,14 @@ export const tags = css`
       .tag-list-row-title {
         line-height: 1.5;
       }
-      .download {
+      .muted-links {
         color: ${themeVars.color.text.light.num1};
         font-size: 12px;
-        a.muted:hover {
+        svg {
+          min-width: 12px;
+          width: 12px;
+        }
+        a:hover {
           text-decoration: none;
         }
       }
@@ -101,13 +105,16 @@ export const releases = css`
         // 右侧发布详细信息
         .segment.detail {
           padding: 16px;
+          img.ui.avatar {
+            border-radius: 9999px;
+          }
           .svg {
             color: ${themeVars.color.text.light.num1};
           }
           // 标题
           .release-list-title {
             font-size: 32px;
-            gap: 16px;
+            gap: 8px;
           }
           // 提交信息
           p.text.grey {
@@ -133,13 +140,13 @@ export const releases = css`
             position: relative;
             left: -16px;
             width: calc(100% + 32px);
-            border-top-width: 1.5px;
+            border-top-width: 1px;
             margin: 24px 0 16px 0;
           }
           // 下载列表
           .download {
             summary {
-              font-size: 18px;
+              font-size: 16px;
               font-weight: 600;
               margin-top: 16px;
               &::marker {

styles/components/repo.ts

@@ -71,10 +71,10 @@ 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: 5px 10px;
+    padding: 2.5px 10px;
     background-color: ${themeVars.github.bgColor.accent.muted};
     color: ${themeVars.github.fgColor.accent};
     &:hover {

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;
+        }
+      }
+    }
+  }
+`;

styles/public/animation.ts

@@ -1,7 +1,16 @@
-import { overlayAppearDown, overlayAppearUp } from "src/core/theme";
+import { overlayAppear, overlayAppearDown, overlayAppearUp } from "src/core/theme";
 import { css } from "src/types/vars";
 
 export const keyframe = css`
+  // 出现动画
+  @keyframes ${overlayAppear} {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
   // 向下出现动画
   @keyframes ${overlayAppearDown} {
     0% {

styles/public/attached.ts

@@ -7,6 +7,7 @@ export const attached = css`
   .user-setting-content,
   .org-setting-content,
   .admin-setting-content,
+  // 仓库动态页面
   // 新建页面内容
   .page-content.repository.new-repo,
   .page-content.repository.new.migrate,
@@ -18,19 +19,45 @@ export const attached = css`
       font-weight: 400;
       background-color: unset !important;
       margin-bottom: 0.25rem;
+      padding-left: 0;
+      padding-right: 0;
+      > .ui.right {
+        right: 0;
+      }
     }
-
     .ui.attached.segment {
       background-color: unset;
-      border-radius: ${otherThemeVars.border.radius} !important;
+      border-top-left-radius: ${otherThemeVars.border.radius} !important;
-    }
+      border-top-right-radius: ${otherThemeVars.border.radius} !important;
-
+      border-bottom-left-radius: 0 !important;
-    .ui.attached.segment:not(.error) {
+      border-bottom-right-radius: 0 !important;
       border: 1px solid ${themeVars.color.light.border} !important;
+      + .ui.attached.segment {
+        border-top: 0 !important;
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+      }
+      &:has(+ :not(.ui.attached.segment)),
+      &:last-child {
+        border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
+        border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
+      }
     }
-
     .ui.attached.segment.error {
       border: 1px solid ${themeVars.color.error.border} !important;
     }
   }
 `;
+
+// 仓库活动页面下的边框线修复
+export const fixActivity = css`
+  .page-content.repository.commits .flex-container-main:has(.ui.header.activity-header) {
+    > .ui.attached.segment {
+      border-radius: 0;
+      &:has(+ :not(.ui.attached.segment)) {
+        border-bottom-left-radius: ${otherThemeVars.border.radius};
+        border-bottom-right-radius: ${otherThemeVars.border.radius};
+      }
+    }
+  }
+`;

styles/public/base.ts

@@ -0,0 +1,10 @@
+import { css } from "src/types/vars";
+
+export const body = css`
+  body {
+    line-height: 18px;
+  }
+  a {
+    text-underline-offset: 0.2rem; // 0.2rem 可以始终保持下划线不受 overflow: hidden 的影响
+  }
+`;

styles/public/button.ts

@@ -118,6 +118,7 @@ export const fixButtonHeight = css`
     .ui.labeled.button > .label {
       height: 28px;
       min-height: 28px;
+      line-height: 1.5;
     }
   }
   .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,

styles/public/dropdown.ts

@@ -57,7 +57,7 @@ export const dropdown = css`
         }
         svg {
           margin-top: 2px;
-          margin-right: 4px;
+          margin-right: 2px;
         }
         // 复选框对齐
         .ui.checkbox input[type="checkbox"] {
@@ -230,7 +230,7 @@ export const selectionDropdown = css`
   // 标签页面的标签选择框
   .page-content.repository.labels .ui.selection.dropdown.active,
   // 创建仓库页面的标签选择框
-  .ui.search.selection.dropdown {
+  .page-content.repository.new-repo .ui.search.selection.dropdown {
     > .menu > .item {
       flex-direction: column;
       align-items: flex-start;

styles/public/index.ts

@@ -1,6 +1,7 @@
 // organize-imports-ignore
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
+import "./base"; // 基础样式, 确保在其他样式之前导入
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
 import "./animation"; // 动画效果
 import "./transition"; // 过渡效果

styles/public/label.ts

@@ -3,67 +3,73 @@ import { css, themeVars } from "src/types/vars";
 export const label = css`
   /* 所有标签, 但不包括 a 标签 */
   /* a 标签比如仓库点星等按钮旁边的数字标签按钮,提交图中的 tag 标签 */
+  div.label,
+  span.label,
+  // 包含多个标签的元素, 比如 Issue/PR 详情页中的时间线上的标签
+  span.labels-list a.label {
+    &.ui.ui.ui {
+      border-radius: 9999px;
+      padding: 1.5px 6px;
+      // 多个标签的组合标签的圆角修复
+      &.scope-parent {
+        .scope-left {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+        .scope-middle {
+          border-radius: 0;
+        }
+        .scope-right {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+      }
+    }
+  }
   div,
   span {
-    &.ui.ui.ui {
+    &.ui.ui.ui.label {
-      &.label {
+      /* 主色调标签 */
-        border-radius: 25px;
+      &.primary {
-        // 多个标签的组合标签的圆角修复
+        background-color: unset;
-        &.scope-parent {
+        border: 1px solid ${themeVars.color.primary.self};
-          .scope-left {
+        color: ${themeVars.color.primary.self};
-            border-top-right-radius: 0;
+      }
-            border-bottom-right-radius: 0;
+      /* 红色标签 */
-          }
+      &.red {
-          .scope-middle {
+        background-color: unset;
-            border-radius: 0;
+        border: 1px solid ${themeVars.github.borderColor.done.emphasis};
-          }
+        color: ${themeVars.color.purple.self};
-          .scope-right {
+      }
-            border-top-left-radius: 0;
+      /* 橙色标签 */
-            border-bottom-left-radius: 0;
+      &.orange {
-          }
+        background-color: unset;
-        }
+        border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
-        /* 主色调标签 */
+        color: ${themeVars.color.yellow.self};
-        &.primary {
+      }
-          background-color: unset;
+      /* 黄色标签 */
-          border: 1px solid ${themeVars.color.primary.self};
+      &.yellow {
-          color: ${themeVars.color.primary.self};
+        background-color: unset;
-        }
+        border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
-        /* 红色标签 */
+        color: ${themeVars.color.orange.self};
-        &.red {
+      }
-          background-color: unset;
+      /* 黄绿色标签 */
-          border: 1px solid ${themeVars.github.borderColor.done.emphasis};
+      &.olive {
-          color: ${themeVars.color.purple.self};
+        background-color: unset;
-        }
+        border: 1px solid ${themeVars.color.olive.self};
-        /* 橙色标签 */
+        color: ${themeVars.color.olive.self};
-        &.orange {
+      }
-          background-color: unset;
+      /* 绿色标签 */
-          border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
+      &.green {
-          color: ${themeVars.color.yellow.self};
+        background-color: unset;
-        }
+        border: 1px solid ${themeVars.github.borderColor.success.emphasis};
-        /* 黄色标签 */
+        color: ${themeVars.color.green.self};
-        &.yellow {
+      }
-          background-color: unset;
+      /* 紫色标签 */
-          border: 1px solid ${themeVars.github.borderColor.attention.emphasis};
+      &.purple {
-          color: ${themeVars.color.orange.self};
+        background-color: unset;
-        }
+        border: 1px solid ${themeVars.github.borderColor.done.emphasis};
-        /* 黄绿色标签 */
+        color: ${themeVars.color.purple.self};
-        &.olive {
-          background-color: unset;
-          border: 1px solid ${themeVars.color.olive.self};
-          color: ${themeVars.color.olive.self};
-        }
-        /* 绿色标签 */
-        &.green {
-          background-color: unset;
-          border: 1px solid ${themeVars.github.borderColor.success.emphasis};
-          color: ${themeVars.color.green.self};
-        }
-        /* 紫色标签 */
-        &.purple {
-          background-color: unset;
-          border: 1px solid ${themeVars.github.borderColor.done.emphasis};
-          color: ${themeVars.color.purple.self};
-        }
       }
     }
   }
@@ -99,10 +105,17 @@ export const shaLabel = css`
       span.ui.label.commit-is-signed {
         padding: 3px 5px;
         margin-left: 5px;
+        height: 25px;
+      }
+      img.ui.avatar {
+        border-radius: 9999px;
       }
     }
   }
-
+  // 修复带验证的提交 SHA 标签的高度
+  .ui.label.commit-id-short {
+    height: 25px;
+  }
   // 验证提交附带的图标
   span.ui.label.commit-is-signed {
     // 验证信任
@@ -181,7 +194,7 @@ export const repoLabel = css`
       color: ${themeVars.color.text.light.num1};
       font-size: 12px;
       font-weight: 500;
-      padding: 3px 6px;
+      padding: 1.5px 6px;
     }
   }
   .org-visibility span.ui.basic.label {

styles/public/menu.ts

@@ -139,6 +139,10 @@ export const menu = css`
       }
     }
   }
+  // 菜单标签样式
+  .ui.menu .item>.label:not(.floating) {
+    padding: 1.5px 6px;
+  }
 `;
 
 export const secondaryMenu = css`

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};
+  }
+`;

styles/public/tippy.ts

@@ -1,4 +1,4 @@
-import { animationDown } from "src/core/theme";
+import { animation, animationDown } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 
 // 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
@@ -43,6 +43,7 @@ export const tippyBox = css`
     }
     // 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
     &[data-theme="tooltip"] {
+      ${animation};
       .tippy-content {
         font-size: 12px;
         font-weight: 400;

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" },

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" },

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" },

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" },

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" },