repo 迁移

.github/release.md

@@ -28,9 +28,15 @@
 - 下拉菜单样式同步
 - 选择下拉菜单样式同步
 - 热力图颜色和样式同步
+- Issue/PR 菜单选项样式同步
+- 仓库标签页样式和颜色同步
+- 仓库发布页样式和颜色同步
+- 关注按钮样式同步
+- Issue 评论菜单删除按钮样式同步
 
 ## 🎈 Perf
 
+- 为下拉菜单的激活选项和部分下拉菜单实现 Issue/PR 的菜单选项样式
 - Actions 日志页面标题间隔优化
 - 管理员后台按钮样式优化
 - 信息提示颜色优化
@@ -41,6 +47,8 @@
 - 仓库动态活动标签样式统一
 - 合并请求分支样式统一
 - 全局下拉菜单样式统一
+- 弹窗按钮样式优化
+- 一些小型按钮的高度优化
 
 ## 🐞 Fix
 

.github/todo.md

@@ -0,0 +1,3 @@
+用户头像右上角管理员标识优化
+action 下的分支标签颜色
+动态关闭工单条颜色

README.md

@@ -11,7 +11,7 @@
 
 ## 安装
 
-1. 在发布页下载最新的 `theme-github.css` 放入 `gitea/public/assets/css` 目录下
+1. 在发布页下载最新的 `theme-github-dark.css` 放入 `gitea/public/assets/css` 目录下
 2. 修改 `gitea/conf/app.ini`，并将 `, github` 附加到 `[ui]` 下的 `THEMES` 末尾
 3. 重启 Gitea
 4. 在设置中查看主题
@@ -20,7 +20,7 @@
 
 ```ini
 [ui]
-THEMES = gitea-dark, github
+THEMES = gitea-dark, github-dark
 ```
 
 详细请查看 Gitea 文档

src/core/color.ts

@@ -161,7 +161,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
   const named: Named = {
     red: {
       self: themeColor.red,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 10) : scaleColorLight(themeColor.red, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 15) : scaleColorLight(themeColor.red, 25),
       dark: {
         num1: scaleColorLight(themeColor.red, -10),
         num2: scaleColorLight(themeColor.red, -20),
@@ -176,7 +176,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     orange: {
       self: themeColor.orange,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 10) : scaleColorLight(themeColor.orange, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 15) : scaleColorLight(themeColor.orange, 25),
       dark: {
         num1: scaleColorLight(themeColor.orange, -10),
         num2: scaleColorLight(themeColor.orange, -20),
@@ -191,7 +191,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     yellow: {
       self: themeColor.yellow,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 10) : scaleColorLight(themeColor.yellow, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 15) : scaleColorLight(themeColor.yellow, 25),
       dark: {
         num1: scaleColorLight(themeColor.yellow, -10),
         num2: scaleColorLight(themeColor.yellow, -20),
@@ -206,7 +206,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     olive: {
       self: themeColor.olive,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 10) : scaleColorLight(themeColor.olive, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 15) : scaleColorLight(themeColor.olive, 25),
       dark: {
         num1: scaleColorLight(themeColor.olive, -10),
         num2: scaleColorLight(themeColor.olive, -20),
@@ -214,7 +214,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     green: {
       self: themeColor.green,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 10) : scaleColorLight(themeColor.green, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 15) : scaleColorLight(themeColor.green, 25),
       dark: {
         num1: scaleColorLight(themeColor.green, -10),
         num2: scaleColorLight(themeColor.green, -20),
@@ -229,7 +229,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     teal: {
       self: themeColor.teal,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 10) : scaleColorLight(themeColor.teal, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 15) : scaleColorLight(themeColor.teal, 25),
       dark: {
         num1: scaleColorLight(themeColor.teal, -10),
         num2: scaleColorLight(themeColor.teal, -20),
@@ -237,7 +237,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     blue: {
       self: themeColor.blue,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 10) : scaleColorLight(themeColor.blue, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 15) : scaleColorLight(themeColor.blue, 25),
       dark: {
         num1: scaleColorLight(themeColor.blue, -10),
         num2: scaleColorLight(themeColor.blue, -20),
@@ -245,7 +245,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     violet: {
       self: themeColor.violet,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 10) : scaleColorLight(themeColor.violet, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 15) : scaleColorLight(themeColor.violet, 25),
       dark: {
         num1: scaleColorLight(themeColor.violet, -10),
         num2: scaleColorLight(themeColor.violet, -20),
@@ -253,7 +253,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     purple: {
       self: themeColor.purple,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 10) : scaleColorLight(themeColor.purple, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 15) : scaleColorLight(themeColor.purple, 25),
       dark: {
         num1: scaleColorLight(themeColor.purple, -10),
         num2: scaleColorLight(themeColor.purple, -20),
@@ -261,7 +261,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     pink: {
       self: themeColor.pink,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 10) : scaleColorLight(themeColor.pink, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 15) : scaleColorLight(themeColor.pink, 25),
       dark: {
         num1: scaleColorLight(themeColor.pink, -10),
         num2: scaleColorLight(themeColor.pink, -20),
@@ -269,7 +269,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     brown: {
       self: themeColor.brown,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 10) : scaleColorLight(themeColor.brown, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 15) : scaleColorLight(themeColor.brown, 25),
       dark: {
         num1: scaleColorLight(themeColor.brown, -10),
         num2: scaleColorLight(themeColor.brown, -20),
@@ -277,7 +277,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     black: {
       self: themeColor.black,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 10) : scaleColorLight(themeColor.black, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 15) : scaleColorLight(themeColor.black, 25),
       dark: {
         num1: scaleColorLight(themeColor.black, -10),
         num2: scaleColorLight(themeColor.black, -20),
@@ -285,7 +285,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
     },
     grey: {
       self: themeColor.grey,
-      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 10) : scaleColorLight(themeColor.grey, 25),
+      light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 15) : scaleColorLight(themeColor.grey, 25),
     },
     gold: themeColor.gold,
     white: themeColor.white,

src/core/github.ts

@@ -286,8 +286,6 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
   const github: Github = {
     fgColor: {
       accent: githubColor.fgColor.accent,
-      default: githubColor.fgColor.default,
-      muted: githubColor.fgColor.muted,
       success: githubColor.fgColor.success,
       done: githubColor.fgColor.done,
     },

src/types/color/github.ts

@@ -4,16 +4,9 @@ export const github = {
     /** 强调色
      * @actions `actionViewRight` 右侧日志标题颜色
      * @issue `prBranch` 分支名称文本颜色
+     * @repo `repoTopic` 仓库主题标签文本颜色
      */
     accent: null,
-    /** 默认的文本颜色
-     * @diff 增加/删除代码块的文本颜色
-     */
-    default: null,
-    /** 暗淡的文本颜色
-     * @diff 折叠行的文本颜色
-     */
-    muted: null,
     /** 成功的文本颜色
      * @issue `button` 重新开启按钮文本颜色
      * @label `label` 绿色标签的文本颜色
@@ -31,10 +24,12 @@ export const github = {
       /** 强调色
        * @diff 折叠/展开按钮的悬停颜色
        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
+       * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
        */
       emphasis: null,
       /** 暗淡的背景颜色
        * @issue `prBranch` 分支名称背景颜色
+       * @repo `repoTopic` 仓库主题标签背景颜色
        */
       muted: null,
     },
@@ -57,6 +52,7 @@ export const github = {
        * @input `input` 输入框被选中时的边框颜色
        * @clone `clone` 克隆地址框被选中时的边框颜色
        * @issue `comment` 评论框被选中时的边框颜色
+       * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
        */
       emphasis: null,
     },
@@ -161,6 +157,10 @@ export const github = {
          * @clone `clone` 克隆按钮下按钮组和面板操作列表的悬停背景颜色
          * @input `inputAction` 输入框动作按钮的悬停背景颜色
          * @dropdown `dropdown` 下拉框子项的悬停背景颜色
+         * @menu `verticalMenu` 垂直菜单项的悬停背景颜色
+         * @menu `menu` 菜单项的悬停背景颜色
+         * @repo `repoHeader` 仓库标题的悬停背景颜色
+         * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
          */
         hover: null,
       },
@@ -179,6 +179,7 @@ export const github = {
     borderColor: {
       /** 下划线导航栏的边框颜色
        * @clone `clone` 按钮组的按钮下划线颜色
+       * @menu `secondaryMenu` 二级菜单按钮的下划线颜色
        */
       active: null,
     },

styles/components/actions.tsx

@@ -149,7 +149,7 @@ export const actionViewLeft = css`
           &:after {
             overflow: visible;
             background: ${themeVars.github.bgColor.accent.emphasis};
-            border-radius: 0.375rem;
+            border-radius: ${otherThemeVars.border.radius};
             content: "";
             height: 24px;
             left: calc(0.5rem * -1);

styles/components/clone.tsx

@@ -34,6 +34,7 @@ export const clone = css`
             width: 100%;
             height: 2px;
             background: ${themeVars.github.underlineNav.borderColor.active};
+            border-radius: ${otherThemeVars.border.radius};
           }
         }
         .item.active {

styles/components/commit.tsx

@@ -0,0 +1,66 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 提交列表
+export const commit = css`
+  .page-content.repository {
+    // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
+    #commits-table.ui.basic.striped.table tbody.commit-list {
+      // 作者
+      .author {
+        // 作者名称
+        a.author-wrapper {
+          color: ${themeVars.color.text.light.num1};
+        }
+      }
+      // SHA 标签
+      .sha {
+        a.ui.label.commit-id-short {
+          padding: 2px 8px;
+          height: 28px;
+          margin-top: 0.375rem;
+          margin-bottom: 0.375rem;
+          margin-left: -8px;
+        }
+      }
+      // 提交信息
+      .message {
+        // tag 标签
+        a.ui.basic.primary.label {
+          border-radius: 25px;
+          border-width: 1.5px;
+          padding: 5px 8px !important;
+        }
+      }
+      // 提交信息右侧
+      .tw-text-right {
+        // 时间标签
+        relative-time,
+        // 复制 SHA 按钮
+        .btn.copy-commit-id,
+        // 查看提交路径按钮
+        .btn.view-commit-path {
+          color: ${themeVars.color.text.light.num1};
+        }
+      }
+      // 整行悬停色
+      tr:hover {
+        background-color: ${themeVars.color.hover.opaque};
+      }
+      // 偶数行悬停色
+      tr:nth-child(2n):hover {
+        background-color: ${themeVars.color.hover.opaque} !important;
+      }
+    }
+  }
+`;
+
+export const commitStatus = css`
+  .flex-text-inline[data-global-init="initCommitStatuses"] {
+    padding: 6px;
+    border-radius: ${otherThemeVars.border.radius};
+    margin-right: 6px;
+    &:hover {
+      background-color: ${themeVars.github.control.transparent.bgColor.hover};
+    }
+  }
+`;

styles/components/dashboard.tsx

@@ -2,9 +2,14 @@ import { css } from "src/types/vars";
 
 export const dashboard = css`
   .page-content.dashboard {
+    // 动态的右侧 svg 图标
     .flex-item .flex-item-trailing svg {
       height: 20px;
       width: 20px;
     }
+    // 仓库列表的仓库/组织切换按钮
+    .ui.two.item.menu {
+      background-color: unset;
+    }
   }
 `;

styles/components/diff.tsx

@@ -6,7 +6,7 @@ export const diff = css`
     background-color: unset;
     /* 折叠行文本 */
     .code-inner {
-      color: ${themeVars.github.fgColor.muted};
+      color: ${themeVars.color.text.light.num1};
     }
   }
   /* 增加/删除行多余的颜色 */
@@ -21,10 +21,10 @@ export const diff = css`
   .added-code,
   .removed-code {
     border-radius: 0.1875rem;
-    color: ${themeVars.github.fgColor.default};
+    color: ${themeVars.color.text.self};
     /* 覆盖掉 chroma 的颜色 */
     * {
-      color: ${themeVars.github.fgColor.default} !important;
+      color: ${themeVars.color.text.self} !important;
     }
   }
   /* 展开/收缩按钮 */

styles/components/filelist.tsx

@@ -0,0 +1,227 @@
+import { css, themeVars } from "src/types/vars";
+
+// 文件列表页面下的分支按钮
+export const branchButton = css`
+  .page-content.repository.file.list {
+    .ui.dropdown.branch-selector-dropdown > .menu > .menu {
+      // 显示默认分支的标签
+      .ui.label {
+        background-color: ${themeVars.color.menu};
+        border: 1px solid ${themeVars.color.light.border};
+        margin-top: 1px;
+        margin-left: auto;
+        margin-right: 16px; // gitea 有 RSS 留出足够的空间
+      }
+    }
+  }
+`;
+
+// 顶部提交, 标签, 分支
+export const repoMenu = css`
+  .page-content.repository.file.list {
+    .repository-summary .repository-menu {
+      background-color: ${themeVars.color.box.header};
+      .item {
+        color: ${themeVars.color.text.light.num1};
+        b {
+          color: ${themeVars.color.text.self};
+          margin: 0 2px;
+        }
+      }
+    }
+  }
+`;
+
+// 仓库按钮
+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 {
+    #repo-files-table {
+      // 头部最后一次提交
+      .repo-file-line {
+        padding-right: 16px;
+        // 父目录
+        &.parent-link {
+          gap: 0.5rem;
+          padding-left: 16px;
+          svg {
+            margin-right: 2px;
+          }
+        }
+        // 最后一次提交
+        &.repo-file-last-commit {
+          min-height: 3.725rem;
+          .latest-commit {
+            .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};
+              }
+            }
+            // 提交哈希值
+            .ui.label {
+              display: none;
+            }
+          }
+          relative-time {
+            color: ${themeVars.color.text.light.num1};
+          }
+        }
+      }
+      // 文件列表
+      .repo-file-item {
+        .repo-file-cell {
+          &.name {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding-left: 16px;
+          }
+          &.age {
+            padding-right: 16px;
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 手机下隐藏提交信息
+export const repoFilesMobile = css`
+  @media (max-width: 767.98px) {
+    #repo-files-table {
+      grid-template-columns: 1fr auto;
+      .repo-file-line {
+        grid-column: 1 / span 2;
+      }
+      .repo-file-cell {
+        &.name {
+          max-width: none;
+        }
+        &.message {
+          display: none;
+        }
+      }
+    }
+  }
+`;
+
+// 仓库代码布局调整, 侧边栏宽度调整
+export const repoGrid = css`
+  .repo-grid-filelist-sidebar {
+    grid-template-columns: auto 296px;
+  }
+
+  @media (max-width: 767.98px) {
+    .repo-grid-filelist-sidebar {
+      grid-template-columns: 100%;
+    }
+  }
+`;
+
+// 仓库代码页面侧边栏上半部, 版本发布以上
+export const repoSidebarTop = css`
+  .page-content.repository.file.list {
+    .repo-home-sidebar-top {
+      a.muted:hover {
+        text-decoration: none;
+      }
+      .flex-item {
+        padding: 10px 0 0 0;
+        .flex-item-title {
+          margin-top: 2px;
+        }
+        .flex-item-body {
+          padding: 8px 0 0 0;
+          .repo-description {
+            color: ${themeVars.color.text.self};
+          }
+          #repo-topics {
+            margin: 10px 0px !important;
+          }
+          .flex-text-block {
+            font-size: 14px;
+            font-weight: 600;
+            margin-top: 10px;
+            &.muted {
+              margin-top: 2px;
+              font-weight: normal;
+            }
+            svg.svg {
+              margin-right: 4px;
+              &.octicon-database,
+              &.octicon-law {
+                margin-right: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 仓库代码页面侧边栏下半部, 版本发布以下
+export const repoSidebarBottom = css`
+  .page-content.repository.file.list {
+    .repo-home-sidebar-bottom {
+      a.muted:hover {
+        text-decoration: none;
+      }
+      .flex-item {
+        padding: 16px 0;
+        .flex-item {
+          padding: 16px 0 0 0;
+          .flex-item-icon {
+            svg.svg.octicon-tag {
+              color: ${themeVars.color.green.self};
+              margin-top: 2px;
+            }
+          }
+          .flex-item-header .flex-item-title {
+            font-size: 14px;
+          }
+        }
+        .flex-item-body {
+          font-size: 12px;
+        }
+      }
+      // 编程语言
+      .language-stats {
+        height: 8px;
+        margin-bottom: 0px;
+      }
+      .language-stats-details .item {
+        font-size: 12px;
+        margin-right: 8px;
+        .color-icon {
+          height: 8px;
+          width: 8px;
+          margin-right: 6px;
+        }
+        .tw-font-semibold {
+          color: ${themeVars.color.text.self};
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+`;

styles/components/index.tsx

@@ -1,8 +1,11 @@
 import "./actions";
 import "./clone";
+import "./commit";
 import "./dashboard";
 import "./diff";
+import "./filelist";
 import "./heatmap";
 import "./issue";
+import "./release";
 import "./repo";
 import "./setting";

styles/components/issue.tsx

@@ -1,4 +1,5 @@
 import { css, themeVars } from "src/types/vars";
+import { activeItemAfterStyle } from "styles/public/menu";
 
 export const button = css`
   .issue-content-left .field.footer {
@@ -15,11 +16,6 @@ export const button = css`
     // 重新开启按钮
     .ui.basic.primary.button#status-button {
       color: ${themeVars.github.fgColor.success};
-      background-color: ${themeVars.color.button};
-      border-color: ${themeVars.color.light.border};
-      &:hover {
-        background-color: ${themeVars.color.hover.self};
-      }
     }
   }
 `;
@@ -97,5 +93,31 @@ export const comment = css`
         box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
       }
     }
+    .comment-header-right {
+      .context-dropdown {
+        // 评论菜单的删除按钮
+        .menu .item.delete-comment {
+          color: ${themeVars.color.red.self};
+          &:hover {
+            background-color: ${themeVars.color.red.badge.bg} !important;
+            color: ${themeVars.color.red.light};
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const dropdown = css`
+  .repository {
+    // Issue/PR 列表下的所有筛选菜单
+    &.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
+    // Issue/PR 详情下的右侧的上半部分选项菜单
+    &.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
+      .item:hover:after {
+        content: "";
+        ${activeItemAfterStyle}
+      }
+    }
   }
 `;

styles/components/release.scss

@@ -1,81 +0,0 @@
-// Made by Luting ^-^
-.page-content.repository.releases {
-  h2 .item {
-    font-weight: 500;
-  }
-
-  #release-list .release-entry {
-    .meta {
-      gap: 2px;
-      padding-top: 24px;
-      padding-right: 40px;
-      text-align: left;
-      min-width: 0;
-      flex: 0.125;
-
-      a.muted {
-        color: #9198a1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        word-break: break-all;
-
-        svg {
-          margin-right: 8px !important;
-        }
-
-        svg.tw-mr-1.svg.octicon-tag {
-          margin-top: 1px;
-        }
-      }
-
-      .js-branch-tag-selector {
-        margin-top: 8px;
-      }
-    }
-
-    .segment.detail {
-      p.text.grey {
-        margin: 16px 0;
-
-        .time {
-          color: #f0f6fc;
-        }
-      }
-
-      .markup {
-        > *:first-child {
-          margin-top: 16px !important;
-        }
-
-        > *:last-child {
-          margin-bottom: 16px !important;
-        }
-      }
-    }
-  }
-
-  .ui.small.primary.button {
-    background-color: var(--color-button);
-
-    &:hover {
-      background-color: #262c36;
-    }
-  }
-}
-
-.page-content.repository.tags {
-  .tag-list-row .download a.muted:hover {
-    text-decoration: none;
-  }
-}
-
-.page-content.repository.tags,
-.page-content.repository.releases {
-  .ui.small.menu {
-    .active.item {
-      color: #fff;
-      background: #1f6feb !important;
-    }
-  }
-}

styles/components/release.tsx

@@ -0,0 +1,101 @@
+import { css, themeVars } from "src/types/vars";
+
+// release 顶部栏左侧按钮组
+export const releaseTagMenu = css`
+  .page-content.repository {
+    &.releases,
+    &.tags {
+      h2.small.menu {
+        .item {
+          background-color: unset !important;
+          font-weight: 500;
+          &.active {
+            background: ${themeVars.github.bgColor.accent.emphasis} !important;
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 标签页样式
+export const tags = css`
+  .page-content.repository.tags {
+    // 标签的选项取消下划线
+    .tag-list-row {
+      .tag-list-row-title {
+        line-height: 1.5;
+      }
+      .download {
+        color: ${themeVars.color.text.light.num1};
+        font-size: 12px;
+        a.muted:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+`;
+
+// 发布页样式
+export const releases = css`
+  .page-content.repository.releases {
+    #release-list .release-entry {
+      // 左侧发布元信息
+      .meta {
+        gap: 0.5rem;
+        padding-top: 24px;
+        padding-right: 40px;
+        text-align: left;
+        min-width: 0;
+        flex: 0.125;
+        a.muted {
+          color: ${themeVars.color.text.light.num1};
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          word-break: break-all;
+          svg {
+            margin-right: 8px !important;
+          }
+          svg.tw-mr-1.svg.octicon-tag {
+            margin-top: 1px;
+          }
+        }
+        .js-branch-tag-selector {
+          margin-top: 8px;
+        }
+      }
+      // 右侧发布详细信息
+      .segment.detail {
+        .svg {
+          color: ${themeVars.color.text.light.num1};
+        }
+        p.text.grey {
+          margin: 16px 0;
+          .time {
+            color: ${themeVars.color.text.self};
+          }
+        }
+        .markup {
+          > *:first-child {
+            margin-top: 16px !important;
+          }
+          > *:last-child {
+            margin-bottom: 16px !important;
+          }
+        }
+      }
+    }
+    // 顶部右侧按钮组
+    .ui.small.button {
+      background-color: ${themeVars.color.button};
+      padding: 5px 16px;
+      min-height: auto;
+      line-height: 20px;
+      &:hover {
+        background-color: ${themeVars.color.hover.self};
+      }
+    }
+  }
+`;

styles/components/repo.scss

@@ -1,393 +0,0 @@
-// Made by Luting ^-^
-#navbar {
-  border-bottom-width: 1.5px;
-}
-
-.page-content > :first-child.secondary-nav {
-  border-top: 0;
-  background-color: var(--color-nav-bg) !important;
-}
-
-// 修复关注&派生 hover 意外点亮右侧 label 左边框
-.ui.ui.ui.ui.small.button {
-  z-index: 0;
-}
-
-.secondary-nav > .divider {
-  border-top-width: 1.5px;
-}
-
-// 仓库页面头部名称
-.page-content.repository .repo-header {
-  .ui.compact.button {
-    padding: 3px 12px;
-
-    svg {
-      color: #9198a1;
-    }
-  }
-
-  img.ui.avatar {
-    height: 32px;
-    width: 32px;
-    margin-block-start: 0.5rem;
-    margin-block-end: 0.5rem;
-  }
-
-  .flex-item {
-    .flex-item-title {
-      color: #9198a1;
-
-      a {
-        display: flex;
-        align-items: center;
-        color: #f0f6fc;
-        font-size: 16px;
-        text-decoration: none !important;
-        min-width: 3ch;
-        padding: 6px 8px;
-        padding-inline: 0.5rem;
-        padding-block: 6px;
-        border-radius: 0.375rem;
-        margin-top: 0.5rem;
-        margin-bottom: 0.5rem;
-
-        &:hover {
-          background: #15191f;
-        }
-
-        &.muted:not(.tw-font-normal) {
-          font-weight: 600;
-        }
-      }
-    }
-
-    a:not(.label, .button):hover {
-      color: #f0f6fc !important;
-    }
-  }
-}
-
-// 仓库导航栏
-.ui.secondary.pointing.menu {
-  .overflow-menu-items {
-    gap: 0.5rem;
-
-    .item {
-      padding: 5px 8px !important;
-      margin-block-start: 0.5rem;
-      margin-block-end: 0.5rem;
-      margin-bottom: 0.5rem !important;
-    }
-  }
-
-  .active.item,
-  .dropdown.item,
-  .link.item,
-  a.item {
-    color: #f0f6fc;
-
-    svg {
-      color: #9198a1;
-      margin-right: 8px;
-    }
-  }
-
-  .active.item {
-    border-color: #ffffff00;
-
-    span:after {
-      background: #f78166;
-      border-radius: 0.375rem;
-      bottom: calc(50% - 1.8rem);
-      content: "";
-      height: 2px;
-      position: absolute;
-      right: 50%;
-      transform: translate(50%, -50%);
-      width: 100%;
-      z-index: 1;
-    }
-  }
-}
-
-.header-wrapper .ui.tabular.menu,
-.ui.secondary.pointing.menu {
-  .item:hover {
-    background: #15191f !important;
-  }
-}
-
-// 仓库文件&提交列表
-.page-content.repository {
-  // 顶部提交, 标签, 分支
-  .repository-summary .segment.sub-menu {
-    &.ui.segment {
-      background-color: var(--color-box-header);
-    }
-
-    .item {
-      color: #9198a1;
-
-      b {
-        color: #f0f6fc;
-        margin: 0 2px;
-      }
-    }
-  }
-
-  // clone 按钮调整
-  .repo-button-row .repo-button-row-right .ui.primary.button span {
-    margin: 0px 3px;
-  }
-
-  // 提交的Action状态
-  .commit-list,
-  #repo-files-table {
-    .flex-text-inline:not(img) {
-      padding: 6px;
-      border-radius: var(--border-radius);
-      margin-right: 6px;
-
-      &:hover {
-        background-color: var(--color-hover);
-      }
-    }
-  }
-}
-
-// 仓库文件列表
-.repository.file.list {
-  #repo-files-table {
-    // 头部最后一次提交
-    .repo-file-line {
-      padding-right: 16px;
-
-      &.parent-link {
-        gap: 0.5rem;
-        padding-left: 16px;
-
-        svg {
-          margin-right: 2px;
-        }
-
-        &:hover {
-          background-color: var(--color-box-header);
-        }
-      }
-
-      &.repo-file-last-commit {
-        height: 3.725rem;
-
-        .latest-commit {
-          .commit-summary {
-            color: #9198a1;
-          }
-
-          img.tw-align-middle {
-            margin-top: -1px;
-            margin-left: 1px;
-            margin-right: 8px !important;
-          }
-
-          .author-wrapper {
-            margin-right: 6px;
-
-            &:hover {
-              color: var(--color-text);
-            }
-          }
-
-          .ui.label {
-            display: none;
-          }
-        }
-      }
-    }
-
-    // 文件列表
-    .repo-file-item {
-      .repo-file-cell {
-        &.name {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          padding-left: 16px;
-        }
-
-        &.age {
-          padding-right: 16px;
-        }
-      }
-
-      .svg.octicon-file-directory-fill,
-      .svg.octicon-file-submodule {
-        color: #7d8590;
-      }
-
-      // 整行背景颜色效果
-      &:hover .repo-file-cell {
-        background-color: var(--color-box-header) !important;
-      }
-    }
-  }
-}
-
-.repository #commits-table {
-  .author {
-    a {
-      color: var(--color-text);
-    }
-
-    img {
-      margin-right: 8px !important;
-    }
-  }
-
-  .text.right.aligned {
-    color: #919894;
-  }
-}
-
-// 手机下隐藏提交信息
-@media (max-width: 767.98px) {
-  #repo-files-table {
-    grid-template-columns: 1fr auto;
-
-    .repo-file-line {
-      grid-column: 1 / span 2;
-    }
-
-    .repo-file-cell {
-      &.name {
-        max-width: none;
-      }
-
-      &.message {
-        display: none;
-      }
-    }
-  }
-}
-
-// 仓库代码布局调整, 侧边栏宽度调整
-.repo-grid-filelist-sidebar {
-  grid-template-columns: auto 296px;
-}
-
-@media (max-width: 767.98px) {
-  .repo-grid-filelist-sidebar {
-    grid-template-columns: 100%;
-  }
-}
-
-// 仓库代码页面侧边栏
-.page-content.repository {
-  .repo-home-sidebar-top {
-    a.muted:hover {
-      text-decoration: none;
-    }
-
-    .flex-item {
-      padding: 10px 0 0 0;
-
-      .flex-item-title {
-        margin-top: 2px;
-      }
-
-      .flex-item-body {
-        padding: 8px 0 0 0;
-
-        .repo-description {
-          color: #f0f6fc;
-        }
-
-        #repo-topics {
-          margin: 10px 0px !important;
-
-          .repo-topic.ui.label {
-            font-size: 12px;
-            padding: 5px 10px;
-            margin: 0px 1.5px 3.5px 0px;
-          }
-        }
-
-        .flex-text-block {
-          font-size: 14px;
-          font-weight: 600;
-          margin-top: 10px;
-
-          &.muted {
-            margin-top: 2px;
-            font-weight: normal;
-          }
-
-          svg.svg {
-            margin-right: 4px;
-
-            &.octicon-database,
-            &.octicon-law {
-              margin-right: 6px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .repo-home-sidebar-bottom {
-    a.muted:hover {
-      text-decoration: none;
-    }
-
-    .flex-item {
-      padding: 16px 0;
-
-      .flex-item {
-        padding: 16px 0 0 0;
-
-        .flex-item-icon {
-          svg.svg.octicon-tag {
-            color: #3fb950;
-            margin-top: 2px;
-          }
-        }
-
-        .flex-item-header .flex-item-title {
-          font-size: 14px;
-        }
-      }
-
-      .flex-item-title .ui.small.label {
-        background: var(--color-label-bg);
-        color: var(--color-label-text);
-      }
-
-      .flex-item-body {
-        font-size: 12px;
-      }
-    }
-
-    // 编程语言
-    .language-stats {
-      height: 8px;
-      margin-bottom: 0px;
-    }
-
-    .language-stats-details .item {
-      font-size: 12px;
-      margin-right: 16px;
-
-      .color-icon {
-        height: 8px;
-        width: 8px;
-        margin-right: 8px;
-      }
-
-      .tw-font-semibold {
-        color: #f0f6fc;
-        margin-right: 2px;
-      }
-    }
-  }
-}

styles/components/repo.tsx

@@ -1,70 +1,71 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";
 
-// 提交列表
-export const commit = css`
-  .page-content.repository {
-    // 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
-    #commits-table.ui.basic.striped.table tbody.commit-list {
-      // 作者
-      .author {
-        // 作者名称
-        a.author-wrapper {
-          color: ${themeVars.color.text.light.num1};
+// 仓库头信息
+export const repoHeader = css`
+  .page-content.repository .repo-header {
+    // 点星/关注/克隆/RSS 按钮
+    .ui.compact.button {
+      padding: 3px 12px;
+      svg {
+        color: ${themeVars.color.text.light.num1};
+      }
+      // 文本跟图标间隔, 文本在手机下不显示
+      span {
+        margin-left: 0.5rem;
+      }
+    }
+    // 仓库图标
+    img.ui.avatar {
+      height: 32px;
+      width: 32px;
+      margin-block-start: 0.5rem;
+      margin-block-end: 0.5rem;
+    }
+
+    .flex-item {
+      .flex-item-title {
+        // 间隔线颜色
+        color: ${themeVars.color.text.light.num1};
+        // 仓库名称
+        a {
+          display: flex;
+          align-items: center;
+          color: ${themeVars.color.text.self};
+          font-size: 16px;
+          text-decoration: none !important;
+          min-width: 3ch;
+          padding: 4px 6px;
+          border-radius: ${otherThemeVars.border.radius};
+          margin-top: 0.5rem;
+          margin-bottom: 0.5rem;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+          &.muted:not(.tw-font-normal) {
+            font-weight: 600;
+          }
         }
       }
-      // SHA 标签
-      .sha {
-        a.ui.label.commit-id-short {
-          padding: 2px 8px;
-          height: 28px;
-          margin-top: 0.375rem;
-          margin-bottom: 0.375rem;
-          margin-left: -8px;
-        }
-      }
-      // 提交信息
-      .message {
-        // tag 标签
-        a.ui.basic.primary.label {
-          border-radius: 25px;
-          border-width: 1.5px;
-          padding: 5px 8px !important;
-        }
-      }
-      // 提交信息右侧
-      .tw-text-right {
-        // 时间标签
-        relative-time,
-        // 复制 SHA 按钮
-        .btn.copy-commit-id,
-        // 查看提交路径按钮
-        .btn.view-commit-path {
-          color: ${themeVars.color.text.light.num1};
-        }
-      }
-      // 整行悬停色
-      tr:hover {
-        background-color: ${themeVars.color.hover.opaque};
-      }
-      // 偶数行悬停色
-      tr:nth-child(2n):hover {
-        background-color: ${themeVars.color.hover.opaque} !important;
+      // 默认的 hover 为 primary 颜色, 修正
+      a:not(.label, .button):hover {
+        color: ${themeVars.color.text.self} !important;
       }
     }
   }
 `;
 
-// 文件列表页面下的分支按钮
-export const branchButton = css`
-  .page-content.repository.file.list {
-    .ui.dropdown.branch-selector-dropdown > .menu > .menu {
-      // 显示默认分支的标签
-      .ui.label {
-        background-color: ${themeVars.color.menu};
-        border: 1px solid ${themeVars.color.light.border};
-        margin-top: 1px;
-        margin-left: auto;
-        margin-right: 16px; // gitea 有 RSS 留出足够的空间
+export const repoTopic = css`
+  #repo-topics {
+    .ui.label.repo-topic {
+      border-radius: 25px;
+      font-size: 12px;
+      padding: 5px 10px;
+      margin: 0px 1.5px 3.5px 0px;
+      background-color: ${themeVars.github.bgColor.accent.muted};
+      color: ${themeVars.github.fgColor.accent};
+      &:hover {
+        background-color: ${themeVars.github.bgColor.accent.emphasis};
+        color: ${themeVars.color.text.self};
       }
     }
   }

styles/components/setting.scss

@@ -1,172 +0,0 @@
-// Made by Luting ^-^
-// 设置左边栏(包含 Actions 的工作流栏)
-
-%active-item-after-style {
-  background: #1f6feb;
-  border-radius: 0.375rem;
-  content: "";
-  height: 24px;
-  left: calc(0.5rem * -1);
-  position: absolute;
-  top: calc(50% - 12px);
-  width: 4px;
-}
-
-.ui.vertical.menu {
-  background: var(--color-body);
-  border: 0;
-
-  .header.item {
-    color: #9198a1 !important;
-    font-size: 1.5rem;
-    font-weight: 700;
-    background: unset;
-    margin-bottom: 0.5rem;
-  }
-
-  .menu .item:hover {
-    background: var(--color-hover);
-  }
-
-  .item,
-  .item > summary {
-    font-size: 1.1rem;
-    background: unset;
-    padding: 6px 8px;
-    color: var(--color-white) !important;
-  }
-
-  .item:before {
-    background: unset;
-  }
-
-  .active.item,
-  .active.item > summary {
-    font-weight: 600;
-  }
-
-  .active.item:after {
-    @extend %active-item-after-style;
-  }
-
-  details {
-    &:has(.active.item) {
-      > summary {
-        font-weight: 600;
-        background: #161a21;
-
-        &:hover {
-          background: var(--color-hover);
-        }
-      }
-
-      .active.item {
-        font-weight: 400;
-      }
-
-      &[open] {
-        > summary {
-          background: unset;
-
-          &:hover {
-            background: var(--color-hover);
-          }
-        }
-
-        &:after {
-          display: none;
-        }
-      }
-
-      &:after {
-        @extend %active-item-after-style;
-      }
-    }
-  }
-}
-
-.ui.vertical.menu,
-.ui.fluid.vertical.menu {
-  .active.item {
-    background: #161a21 !important;
-
-    &:hover {
-      background-color: var(--color-hover) !important;
-    }
-  }
-
-  .item,
-  .item > summary {
-    border-radius: 0.5rem !important;
-  }
-}
-
-// 设置右面版
-.user-main-content,
-.repo-setting-content,
-.user-setting-content,
-.org-setting-content,
-.admin-setting-content {
-  .ui.top.attached.header {
-    border: 0;
-    font-size: 1.5rem;
-    font-weight: 400;
-    background-color: unset !important;
-    margin-bottom: 0.25rem;
-  }
-
-  .ui.attached.segment {
-    background-color: unset;
-    border-radius: 0.5rem !important;
-  }
-
-  .ui.attached.segment:not(.error) {
-    border: 1px solid var(--color-light-border) !important;
-  }
-
-  .ui.attached.segment.error {
-    border: 1px solid var(--color-error-border) !important;
-  }
-
-  input,
-  textarea,
-  .ui.input input,
-  .ui.form input:not([type]),
-  .ui.form select,
-  .ui.form textarea,
-  .ui.form input[type="date"],
-  .ui.form input[type="datetime-local"],
-  .ui.form input[type="email"],
-  .ui.form input[type="file"],
-  .ui.form input[type="number"],
-  .ui.form input[type="password"],
-  .ui.form input[type="search"],
-  .ui.form input[type="tel"],
-  .ui.form input[type="text"],
-  .ui.form input[type="time"],
-  .ui.form input[type="url"],
-  .ui.selection.dropdown {
-    background: var(--color-box-header);
-  }
-
-  .ui.form input:not([type]),
-  .ui.form select,
-  .ui.form textarea,
-  .ui.form input[type="date"],
-  .ui.form input[type="datetime-local"],
-  .ui.form input[type="email"],
-  .ui.form input[type="file"],
-  .ui.form input[type="number"],
-  .ui.form input[type="password"],
-  .ui.form input[type="search"],
-  .ui.form input[type="tel"],
-  .ui.form input[type="text"],
-  .ui.form input[type="time"],
-  .ui.form input[type="url"] {
-    padding: 7px 12px;
-  }
-
-  .ui.selection.dropdown {
-    padding: 7px 24px 7px 12px;
-  }
-}

styles/components/setting.tsx

@@ -76,3 +76,33 @@ export const label = css`
     }
   }
 `;
+
+// 设置右面板的内容
+export const content = css`
+  .user-main-content,
+  .repo-setting-content,
+  .user-setting-content,
+  .org-setting-content,
+  .admin-setting-content {
+    .ui.top.attached.header {
+      border: 0;
+      font-size: 1.5rem;
+      font-weight: 400;
+      background-color: unset !important;
+      margin-bottom: 0.25rem;
+    }
+
+    .ui.attached.segment {
+      background-color: unset;
+      border-radius: 0.5rem !important;
+    }
+
+    .ui.attached.segment:not(.error) {
+      border: 1px solid ${themeVars.color.light.border} !important;
+    }
+
+    .ui.attached.segment.error {
+      border: 1px solid ${themeVars.color.error.border} !important;
+    }
+  }
+`;

styles/public/button.tsx

@@ -26,12 +26,27 @@ export const baseButton = css`
       ${primaryHoverStyle}
     }
   }
-  /* 普通按钮边框色不变 */
-  .ui.basic.button:hover,
-  /* 仓库点星等数字标签按钮边框色不变 */
-  .ui.labeled.button > .label:hover {
+  // 主色调基本按钮和普通按钮一样
+  // 作者的关注按钮
+  .ui.basic.primary.button {
+    background-color: ${themeVars.color.button};
+    color: ${themeVars.color.text.self};
     border-color: ${themeVars.color.light.border};
+    &:hover {
+      background-color: ${themeVars.color.hover.self};
+      color: ${themeVars.color.text.self};
+      border-color: ${themeVars.color.light.border};
+    }
   }
+  /* 普通按钮边框色不变 */
+  .ui.basic.button,
+  /* 仓库点星等数字标签按钮边框色不变 */
+  .ui.labeled.button > .label {
+    &:hover {
+      border-color: ${themeVars.color.light.border};
+    }
+  }
+
   /* 普通按钮激活时背景色 */
   .ui.basic.buttons .button:active,
   .ui.basic.button:active,
@@ -68,3 +83,22 @@ export const branchDropdownButton = css`
     min-height: 30px;
   }
 `;
+
+// 修复按钮高度
+export const fixButtonHeight = css`
+  .ui.small.buttons .button,
+  .ui.ui.ui.ui.small.button {
+    min-height: 26px;
+  }
+  .ui.tiny.buttons .button,
+  .ui.ui.ui.ui.tiny.button {
+    min-height: 20px;
+  }
+`;
+
+export const fixButton = css`
+  // 修复关注&派生 hover 意外点亮右侧 label 左边框
+  .ui.ui.ui.ui.small.button {
+    z-index: 0;
+  }
+`;

styles/public/dropdown.tsx

@@ -1,5 +1,6 @@
 import { animation } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { activeItemAfterStyle } from "styles/public/menu";
 
 export const dropdown = css`
   .ui.dropdown,
@@ -41,6 +42,13 @@ export const dropdown = css`
           color: ${themeVars.color.text.light.num1};
           margin-right: 0.5rem;
         }
+        &.active,
+        &.selected {
+          &:after {
+            content: "";
+            ${activeItemAfterStyle};
+          }
+        }
       }
       > .divider {
         margin: 0.5rem 0;
@@ -80,8 +88,8 @@ export const selectionDropdown = css`
     background-color: ${themeVars.color.button};
     border-color: ${themeVars.color.light.border};
     border-radius: ${otherThemeVars.border.radius};
-    padding: 9px 16px;
-    min-height: 33px;
+    padding: 8px 16px;
+    min-height: 32px;
     &:focus {
       background: ${themeVars.color.button};
       border-color: ${themeVars.color.light.border};
@@ -90,8 +98,14 @@ export const selectionDropdown = css`
       background: ${themeVars.color.hover.self};
       border-color: ${themeVars.color.light.border};
     }
+    // 悬停提供伪元素
+    .item:hover:after {
+      content: "";
+      ${activeItemAfterStyle};
+    }
   }
-  .ui.selection.dropdown.active {
+  // 排除一些小按钮, 例如软件包类型, 通常相邻有元素
+  .ui.selection.dropdown.active:not(.small) {
     border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
     border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
   }

styles/public/index.tsx

@@ -2,11 +2,12 @@
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
+import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
 import "./chroma"; // 代码高亮
 import "./dropdown"; // 下拉框
 import "./input"; // 输入框
 import "./label"; // 标签
+import "./menu"; // 菜单
 import "./modal"; // 弹窗
-import "./svg"; // svg 图标
 import "./tippy"; // 提示框

styles/public/input.tsx

@@ -18,6 +18,7 @@ export const input = css`
   .ui.form input[type="text"],
   .ui.form input[type="time"],
   .ui.form input[type="url"] {
+    padding: 8px 12px;
     &:focus,
     &:focus-visible {
       background: ${themeVars.color.body} !important;

styles/public/menu.tsx

@@ -0,0 +1,182 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+export const activeItemAfterStyle = {
+  backgroundColor: themeVars.github.borderColor.accent.emphasis,
+  borderRadius: otherThemeVars.border.radius,
+  height: "24px",
+  left: "calc(0.5rem * -1)",
+  position: "absolute",
+  top: "calc(50% - 12px)",
+  width: "4px",
+};
+
+export const verticalMenu = css`
+  // 垂直菜单, 用于左侧边栏
+  // 设置页面中的菜单, Actions 工作流菜单, WorkflowRuns Job 菜单
+  .ui.vertical.menu {
+    // 去除边框, 和背景色同色
+    background: ${themeVars.color.body};
+    border: 0;
+    // 设置页面的菜单头部
+    .header.item {
+      color: ${themeVars.color.text.light.num1} !important;
+      font-size: 1.5rem;
+      font-weight: 700;
+      background: unset;
+      margin-bottom: 0.5rem;
+    }
+    // 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染
+    a.item:hover {
+      background: ${themeVars.github.control.transparent.bgColor.hover};
+    }
+    // 菜单项
+    .item,
+    .item > summary {
+      font-size: 1.1rem;
+      background: unset;
+      border-radius: ${otherThemeVars.border.radius};
+      padding: 6px 8px;
+    }
+    // Actions 菜单的圆角覆盖
+    > .item,
+    > .active.item {
+      &:first-child,
+      &:last-child {
+        border-radius: ${otherThemeVars.border.radius};
+      }
+    }
+    // 去除菜单项的边框线
+    .item:before {
+      background: unset;
+    }
+    // 激活的菜单项
+    .active.item,
+    .active.item > summary {
+      font-weight: 600;
+      border-radius: ${otherThemeVars.border.radius};
+    }
+    // 添加伪元素, 用于指示当前激活的菜单项
+    .active.item:after {
+      content: "";
+      ${activeItemAfterStyle};
+    }
+    // 部分菜单项的子菜单
+    details.item {
+      // 子菜单的标题
+      summary:hover {
+        background: ${themeVars.github.control.transparent.bgColor.hover};
+      }
+      // 子菜单的选项
+      .menu .item {
+        color: ${themeVars.color.text.self};
+      }
+      // 子菜单的选项被激活
+      &:has(.active.item) {
+        > summary {
+          font-weight: 600;
+          background: ${themeVars.color.active};
+          // 收回状态,悬停色
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+        }
+        &:after {
+          content: "";
+          ${activeItemAfterStyle};
+        }
+        // 子菜单的选项
+        .active.item {
+          background: ${themeVars.color.active};
+          font-weight: 400;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+        }
+        // 子菜单展开时
+        &[open] {
+          > summary {
+            background: unset;
+            &:hover {
+              background: ${themeVars.github.control.transparent.bgColor.hover};
+            }
+          }
+          &:after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const menu = css`
+  // 菜单默认悬浮色更改
+  .ui.menu a.item,
+  .ui.secondary.pointing.menu a.item,
+  .ui.secondary.menu .dropdown.item {
+    &:hover {
+      background: ${themeVars.github.control.transparent.bgColor.hover};
+    }
+  }
+  // 一些水平小型菜单的颜色更改
+  .small-menu-items .item {
+    background-color: ${themeVars.color.body} !important;
+    &:hover {
+      background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+    }
+  }
+  // 一些菜单的悬浮色更改
+  .ui.segment .ui.tabular.menu,
+  .header-wrapper .ui.tabular.menu,
+  .ui.secondary.pointing.menu {
+    .item,
+    .active.item {
+      &:hover {
+        background: ${themeVars.github.control.transparent.bgColor.hover};
+      }
+    }
+  }
+`;
+
+// 二级导航栏
+export const secondaryMenu = css`
+  .ui.secondary.pointing.menu {
+    .overflow-menu-items {
+      gap: 0.5rem;
+      .item {
+        padding: 5px 8px !important;
+        margin-block-start: 0.5rem;
+        margin-block-end: 0.5rem;
+        margin-bottom: 0.5rem !important;
+      }
+    }
+    .active.item,
+    .dropdown.item,
+    .link.item,
+    a.item {
+      border-radius: ${otherThemeVars.border.radius};
+      color: ${themeVars.color.text.self};
+      svg {
+        color: ${themeVars.color.text.light.num1};
+        margin-right: 8px;
+      }
+    }
+    .active.item {
+      // 取消激活时的下划线, 需要为透明, 保持间距
+      border-color: #ffffff00;
+      // 模仿 github 的下划线
+      span:after {
+        content: "";
+        background: ${themeVars.github.underlineNav.borderColor.active};
+        border-radius: ${otherThemeVars.border.radius};
+        bottom: calc(50% - 1.8rem);
+        height: 2px;
+        position: absolute;
+        right: 50%;
+        transform: translate(50%, -50%);
+        width: 100%;
+        z-index: 1;
+      }
+    }
+  }
+`;

styles/public/modal.tsx

@@ -20,5 +20,8 @@ export const modal = css`
       background-color: ${themeVars.color.menu};
       border-top: 1.5px solid ${themeVars.color.light.border};
     }
+    .actions > .ui.button {
+      padding: 8px 12px;
+    }
   }
 `;

styles/public/radius.tsx

@@ -76,6 +76,13 @@ export const radiusImportant = css`
   .ui.secondary.vertical.menu > .item {
     border-radius: ${otherThemeVars.border.radius} !important;
   }
+  // 目前为仓库列表/探索的二级菜单, 改版需要替换为全圆角
+  .ui.tabular.menu .active.item {
+    border-radius: ${otherThemeVars.border.radius} !important;
+    &:hover {
+      border-radius: ${otherThemeVars.border.radius} !important;
+    }
+  }
 `;
 
 // 上半部分圆角替换
@@ -105,12 +112,6 @@ export const radiusTop = css`
 
 // 上半部分圆角替换(原CSS带!important)
 export const radiusTopImportant = css`
-  .ui.tabular.menu .active.item {
-    border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
-    &:hover {
-      border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
-    }
-  }
   .ui.simple.upward.dropdown {
     &.active {
       border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;

styles/public/svg.tsx

@@ -1,11 +0,0 @@
-import { css, themeVars } from "src/types/vars";
-
-// 关闭工单按钮设置为紫色
-export const issueClosed = css`
-  .text.red .svg,
-  .text.red.svg {
-    &.octicon-issue-closed {
-      color: ${themeVars.github.fgColor.done} !important;
-    }
-  }
-`;

styles/public/text.tsx

@@ -0,0 +1,19 @@
+import { css, themeVars } from "src/types/vars";
+
+export const red = css`
+  .text.red .svg,
+  .text.red.svg {
+    // 关闭工单按钮设置为紫色
+    &.octicon-issue-closed {
+      color: ${themeVars.github.fgColor.done} !important;
+    }
+  }
+`;
+
+export const grey = css`
+  // 默认颜色是 --color-text-light, 主题下此颜色是亮白色, 修改为灰色
+  // release 页面下一些描述信息的文本颜色
+  .text.grey {
+    color: ${themeVars.color.text.light.num1} !important;
+  }
+`;

themes/dark.css.tsx

@@ -33,110 +33,40 @@ const github: GithubColor = {
     muted: "#9198a1",
   },
   bgColor: {
-    accent: {
-      emphasis: "#1f6feb",
-      muted: "#388bfd1a",
-    },
-    attention: {
-      muted: "#bb800926",
-    },
-    success: {
-      emphasis: "#238636",
-      muted: "#2ea04326",
-    },
-    danger: {
-      muted: "#f851491a",
-    },
-    done: {
-      emphasis: "#8957e5",
-    },
+    accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
+    attention: { muted: "#bb800926" },
+    success: { emphasis: "#238636", muted: "#2ea04326" },
+    danger: { muted: "#f851491a" },
+    done: { emphasis: "#8957e5" },
     default: "#0d1117",
     inset: "#010409",
     muted: "#151b23",
-    neutral: {
-      muted: "#656c7633",
-    },
+    neutral: { muted: "#656c7633" },
   },
   borderColor: {
-    accent: {
-      emphasis: "#1f6feb",
-    },
+    accent: { emphasis: "#1f6feb" },
     default: "#3d444d",
-    attention: {
-      emphasis: "#9e6a03",
-    },
-    success: {
-      emphasis: "#238636",
-    },
-    done: {
-      emphasis: "#8957e5",
-    },
+    attention: { emphasis: "#9e6a03" },
+    success: { emphasis: "#238636" },
+    done: { emphasis: "#8957e5" },
     muted: "#3d444db3",
     translucent: "#ffffff26",
   },
   button: {
-    primary: {
-      fgColor: {
-        accent: "#39d353",
-        rest: "#ffffff",
-      },
-      bgColor: {
-        rest: "#238636",
-        hover: "#29903b",
-      },
-    },
-    danger: {
-      fgColor: {
-        rest: "#fa5e55",
-        hover: "#ffffff",
-      },
-      bgColor: {
-        hover: "#b62324",
-      },
-    },
+    primary: { fgColor: { accent: "#39d353", rest: "#ffffff" }, bgColor: { rest: "#238636", hover: "#29903b" } },
+    danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
   },
   control: {
-    bgColor: {
-      active: "#2a313c",
-      hover: "#262c36",
-      rest: "#212830",
-    },
-    transparent: {
-      bgColor: {
-        active: "#656c7640",
-        hover: "#656c7633",
-        // 非官方颜色, 实在是太淡了
-        // selected: "#656c761a",
-        selected: "#656c762a",
-      },
-    },
-  },
-  shadow: {
-    floating: "#01040966",
-  },
-  overlay: {
-    backdrop: {
-      bgColor: "#21283066",
-    },
-  },
-  underlineNav: {
-    borderColor: {
-      active: "#f78166",
-    },
+    bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
+    transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
   },
+  shadow: { floating: "#01040966" },
+  overlay: { backdrop: { bgColor: "#21283066" } },
+  underlineNav: { borderColor: { active: "#f78166" } },
   contribution: {
     default: {
-      bgColor: {
-        num0: "#151b23",
-        num1: "#033a16",
-        num2: "#196c2e",
-        num3: "#2ea043",
-        num4: "#56d364",
-        num5: "#7ee787",
-      },
-      borderColor: {
-        num0: "#0104090d",
-      },
+      bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364", num5: "#7ee787" },
+      borderColor: { num0: "#0104090d" },
     },
   },
 };