优化向上弹窗的菜单动画

.github/release.md

@@ -2,55 +2,11 @@
 
 #### 更符合 GitHub 风格
 
-- 1:1 还原克隆菜单样式
-- 代码差异对比折叠行文本颜色同步
-- 代码差异对比行号位置同步
-- 代码差异对比按钮和折叠行高度同步
-- Actions 日志页面标题颜色同步
-- Actions 日志页面设置菜单背景色同步
-- 菜单背景色同步当前最新颜色
-- Markdown 背景色同步
-- 补充 Markdown 代码块背景色
-- 弹窗阴影颜色同步
-- 仓库项目页面列背景色同步
-- Issue/PR 表情背景色同步
-- 普通按钮激活背景色同步
-- 主色调按钮边框色同步
-- 设置界面右上角小按钮样式同步
-- 弹窗背景色和叠加背景色同步
-- 全局圆角样式同步
-- 工单标签颜色同步
-- 提交列表样式和颜色同步
-- 提交 SHA 颜色和样式优化
-- 软件包标签颜色同步
-- Issue/PR 评论边框样式同步
-- Code/Runner/PR 提示框样式同步
-- 下拉菜单样式同步
-- 选择下拉菜单样式同步
-- 热力图颜色和样式同步
-- Issue/PR 菜单选项样式同步
-- 仓库标签页样式和颜色同步
-- 仓库发布页样式和颜色同步
-- 关注按钮样式同步
-- Issue 评论菜单删除按钮样式同步
-
 ## 🎈 Perf
 
-- 为下拉菜单的激活选项和部分下拉菜单实现 Issue/PR 的菜单选项样式
+- 优化提交中 Action 状态标签的位置
-- Actions 日志页面标题间隔优化
+- 优化按钮和菜单下的图标颜色
-- 管理员后台按钮样式优化
+- 优化仓库发布中的分支选择按钮样式
-- 信息提示颜色优化
+- 优化向上弹窗的菜单动画
-- 修复意外点亮其他页面关闭图标的颜色
-- 统一全局标签圆角
-- 仪表板动态信息图标大小优化
-- Runner 列表标签颜色优化
-- 仓库动态活动标签样式统一
-- 合并请求分支样式统一
-- 全局下拉菜单样式统一
-- 弹窗按钮样式优化
-- 一些小型按钮的高度优化
 
 ## 🐞 Fix
-
-- 修复代码差异对比分列视图下颜色丢失
-- 修复 Runner 状态离线时标签

.github/todo.md

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

TODO.md

@@ -0,0 +1,19 @@
+### 轻量
+
+- hover 动画迁移
+- 列表部分 item 展开动画迁移
+
+### 重大
+
+- gitea issue 默认标签颜色匹配使用 github 样式
+- 探索/组织/用户仓库样式 github 布局
+- issue/PR 列表样式 github 布局
+- styles/themes 库组件导出整理
+- defineTheme 颜色生成代码重构
+- 亮色主题适配/测试
+- 自动颜色主题生成
+
+### 其他
+
+- README 更新/截图更新
+- CONTRIBUTING 更新

src/core/theme.ts

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

src/types/color/github.ts

@@ -5,6 +5,8 @@ export const github = {
      * @actions `actionViewRight` 右侧日志标题颜色
      * @issue `prBranch` 分支名称文本颜色
      * @repo `repoTopic` 仓库主题标签文本颜色
+     * @actions `actions` 分支标签按钮文本颜色
+     * @actions `actionViewHeader` 分支标签按钮文本颜色
      */
     accent: null,
     /** 成功的文本颜色
@@ -25,11 +27,14 @@ export const github = {
        * @diff 折叠/展开按钮的悬停颜色
        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
+       * @navbar `navbarRight` 头像管理员标识背景颜色
        */
       emphasis: null,
       /** 暗淡的背景颜色
        * @issue `prBranch` 分支名称背景颜色
        * @repo `repoTopic` 仓库主题标签背景颜色
+       * @actions `actions` 分支标签按钮背景颜色
+       * @actions `actionViewHeader` 分支标签按钮背景颜色
        */
       muted: null,
     },
@@ -53,6 +58,7 @@ export const github = {
        * @clone `clone` 克隆地址框被选中时的边框颜色
        * @issue `comment` 评论框被选中时的边框颜色
        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
+       * @dropdown `selectionDropdown` 选择输入框的内部边框颜色
        */
       emphasis: null,
     },

styles/components/actions.tsx

@@ -35,10 +35,6 @@ export const actions = css`
         border-top-right-radius: ${otherThemeVars.border.radius};
         padding: 16px;
         margin-bottom: 0;
-
-        .item {
-          padding: 6px 12px;
-        }
       }
 
       .ui.info.message {
@@ -57,6 +53,22 @@ export const actions = css`
         border-bottom-left-radius: ${otherThemeVars.border.radius};
         border-bottom-right-radius: ${otherThemeVars.border.radius};
 
+        // 分支标签按钮
+        .run-list-ref {
+          background-color: ${themeVars.github.bgColor.accent.muted};
+          color: ${themeVars.github.fgColor.accent};
+          font-weight: 400;
+          &:hover {
+            background-color: ${themeVars.github.bgColor.accent.muted};
+            color: ${themeVars.github.fgColor.accent};
+            text-decoration-line: underline !important;
+          }
+        }
+        // 标签右侧任务信息
+        .run-list-item-right {
+          color: ${themeVars.color.text.light.num1};
+        }
+
         .flex-item {
           padding: 16px;
 
@@ -112,6 +124,23 @@ export const runWorkflow = css`
   }
 `;
 
+// 工作流详情页标题
+export const actionViewHeader = css`
+  .action-view-header {
+    .action-commit-summary {
+      // 分支标签按钮
+      .ui.label {
+        background-color: ${themeVars.github.bgColor.accent.muted};
+        color: ${themeVars.github.fgColor.accent};
+        font-weight: 400;
+        > a {
+          opacity: 1;
+        }
+      }
+    }
+  }
+`;
+
 // 工作流左侧作业列表
 export const actionViewLeft = css`
   .action-view-left {

styles/components/clone.tsx

@@ -4,17 +4,21 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
 export const clone = css`
   .tippy-box {
     .clone-panel-popup {
-      //标题
+      //标题和克隆地址
-      .clone-panel-field:first-of-type {
+      > .clone-panel-field {
-        font-weight: bold;
-        margin-top: 16px;
         margin-left: 16px;
+        margin-right: 16px;
+        //标题
+        &:first-of-type {
+          font-weight: 600;
+          margin-top: 16px;
+        }
       }
       // 按钮组
       .clone-panel-tab {
         display: flex;
         gap: 8px;
-        margin-left: 12px;
+        margin-left: 16px;
         // 按钮
         .item {
           color: ${themeVars.color.text.self};
@@ -44,25 +48,36 @@ export const clone = css`
       }
       // 克隆地址
       .ui.input.action {
-        > input,
+        > input {
-        > input:hover {
           border: 1px solid ${themeVars.color.light.border};
           border-radius: ${otherThemeVars.border.radius};
-        }
+          font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
-        > input:focus,
+          width: 332px;
-        > input:focus-visible {
+          &:hover {
-          border-color: ${themeVars.github.borderColor.accent.emphasis};
+            border: 1px solid ${themeVars.color.light.border};
+            border-radius: ${otherThemeVars.border.radius};
+          }
+          &:focus,
+          &:focus-visible {
+            border-color: ${themeVars.github.borderColor.accent.emphasis};
+          }
         }
         .ui.ui.ui.button {
           background-color: unset;
           border: unset;
           border-radius: ${otherThemeVars.border.radius};
           color: ${themeVars.color.text.light.num1};
-          padding: 5px 10px;
+          padding: 0;
+          width: 32px;
+          height: 32px;
           margin-left: 5px;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
           }
+          svg {
+            width: 16px;
+            height: 16px;
+          }
         }
       }
       // 面板操作列表之间的分割线

styles/components/commit.tsx

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

styles/components/filelist.tsx

@@ -16,22 +16,6 @@ export const branchButton = css`
   }
 `;
 
-// 顶部提交, 标签, 分支
-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 {
@@ -61,17 +45,16 @@ export const repoFiles = css`
         &.repo-file-last-commit {
           min-height: 3.725rem;
           .latest-commit {
+            gap: 8px;
             .commit-summary {
               color: ${themeVars.color.text.light.num1};
             }
             img.tw-align-middle {
               margin-top: -1px;
               margin-left: 1px;
-              margin-right: 8px !important;
             }
             // 作者
             .author-wrapper {
-              margin-right: 6px;
               &:hover {
                 color: ${themeVars.color.text.self};
               }

styles/components/heatmap.tsx

@@ -11,8 +11,8 @@ export const heatmap = css`
       // hover 时的圆角
       border-radius: 0.75px;
       // 宽度和高度可以用来控制间隔
-      width: 9.5px;
+      width: 9px;
-      height: 9.5px;
+      height: 9px;
       // 边框
       outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
       // 边框向内偏移

styles/components/index.tsx

@@ -6,6 +6,7 @@ import "./diff";
 import "./filelist";
 import "./heatmap";
 import "./issue";
+import "./newrepo";
 import "./release";
 import "./repo";
 import "./setting";

styles/components/newrepo.tsx

@@ -0,0 +1,14 @@
+import { css } from "src/types/vars";
+import { activeItemAfterStyle } from "styles/public/menu";
+
+// 新建仓库页面下拉菜单
+export const newRepo = css`
+  .page-content.repository.new-repo {
+    .ui.dropdown .menu {
+      .item:hover:after {
+        content: "";
+        ${activeItemAfterStyle}
+      }
+    }
+  }
+`;

styles/components/release.tsx

@@ -62,8 +62,12 @@ export const releases = css`
             margin-top: 1px;
           }
         }
-        .js-branch-tag-selector {
+        // 分支选择按钮
-          margin-top: 8px;
+        .ui.button.branch-dropdown-button {
+          min-height: 20px;
+          line-height: 20px;
+          padding: 3px 12px;
+          font-size: 12px;
         }
       }
       // 右侧发布详细信息
@@ -87,14 +91,22 @@ export const releases = css`
         }
       }
     }
-    // 顶部右侧按钮组
+  }
-    .ui.small.button {
+`;
-      background-color: ${themeVars.color.button};
+
-      padding: 5px 16px;
+// 顶部右侧按钮组
-      min-height: auto;
+export const rightButton = css`
-      line-height: 20px;
+  .page-content.repository {
-      &:hover {
+    &.releases,
-        background-color: ${themeVars.color.hover.self};
+    &.tags {
+      .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.tsx

@@ -6,9 +6,6 @@ export const repoHeader = css`
     // 点星/关注/克隆/RSS 按钮
     .ui.compact.button {
       padding: 3px 12px;
-      svg {
-        color: ${themeVars.color.text.light.num1};
-      }
       // 文本跟图标间隔, 文本在手机下不显示
       span {
         margin-left: 0.5rem;
@@ -54,19 +51,52 @@ export const repoHeader = css`
   }
 `;
 
-export const repoTopic = css`
+// 顶部提交, 标签, 分支统计
-  #repo-topics {
+export const repoMenu = css`
-    .ui.label.repo-topic {
+  .page-content.repository {
-      border-radius: 25px;
+    .repository-summary .repository-menu {
-      font-size: 12px;
+      background-color: ${themeVars.color.box.header};
-      padding: 5px 10px;
+      .item {
-      margin: 0px 1.5px 3.5px 0px;
+        color: ${themeVars.color.text.light.num1};
-      background-color: ${themeVars.github.bgColor.accent.muted};
+        height: 31px; // 文件列表下与右侧输入框对齐
-      color: ${themeVars.github.fgColor.accent};
+        b {
-      &:hover {
+          color: ${themeVars.color.text.self};
-        background-color: ${themeVars.github.bgColor.accent.emphasis};
+          margin: 0 2px;
-        color: ${themeVars.color.text.self};
+        }
+        &.active {
+          background-color: ${themeVars.color.active};
+          color: ${themeVars.color.text.self};
+          font-weight: 500;
+          svg {
+            color: ${themeVars.color.text.light.num1};
+          }
+        }
       }
     }
   }
 `;
+
+export const repoTopic = css`
+  // 理应只能覆盖探索/组织/用户下仓库的 topic 标签
+  .label-list .ui.label,
+  // 仓库文件列表下的 topic 标签
+  #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};
+    }
+  }
+`;
+
+// 仓库动态页面关闭工单状态条颜色
+export const closedIssueTableCell = css`
+  .stats-table .table-cell.tw-bg-red[href="#closed-issues"] {
+    background-color: ${themeVars.color.purple.self} !important;
+  }
+`;

styles/public/button.tsx

@@ -19,7 +19,9 @@ export const baseButton = css`
     font-weight: 500;
     padding: 9px 16px;
   }
-
+  .ui.button:not(.primary):not(.red) svg {
+    color: ${themeVars.color.text.light.num1};
+  }
   .ui.primary.button {
     ${primaryStyle}
     &:hover {
@@ -76,14 +78,6 @@ export const redButton = css`
   }
 `;
 
-// 分支菜单按钮
-export const branchDropdownButton = css`
-  .ui.button.branch-dropdown-button {
-    padding: 3px 12px;
-    min-height: 30px;
-  }
-`;
-
 // 修复按钮高度
 export const fixButtonHeight = css`
   .ui.small.buttons .button,

styles/public/dropdown.tsx

@@ -1,4 +1,4 @@
-import { animation } from "src/core/theme";
+import { animationDown, animationUp } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
@@ -6,9 +6,8 @@ export const dropdown = css`
   .ui.dropdown,
   .ui.menu .ui.dropdown {
     .menu {
-      animation: ${animation};
+      animation: ${animationDown};
       // 统一所有下拉菜单的样式
-      margin-top: 0.35em !important;
       background-color: ${themeVars.color.menu} !important;
       border: unset !important;
       border-radius: 12px !important;
@@ -39,7 +38,6 @@ export const dropdown = css`
           }
         }
         svg {
-          color: ${themeVars.color.text.light.num1};
           margin-right: 0.5rem;
         }
         &.active,
@@ -58,6 +56,21 @@ export const dropdown = css`
       }
     }
   }
+  // 向下弹出的下拉菜单向下偏移
+  .ui.dropdown:not(.upward),
+  .ui.menu .ui.dropdown:not(.upward) {
+    .menu {
+      margin-top: 0.35em !important;
+    }
+  }
+  // 向上弹出的下拉菜单向上偏移
+  .ui.dropdown.upward,
+  .ui.menu .ui.dropdown.upward {
+    .menu {
+      animation: ${animationUp};
+      margin-bottom: 0.35em !important;
+    }
+  }
   // 修复下拉菜单元素溢出问题
   // 用户菜单
   .user-menu>.item,
@@ -75,7 +88,10 @@ export const dropdown = css`
   .ui.dropdown .menu .menu {
     border-radius: 12px !important;
   }
-  // 修复仪表板切换控制用户按钮阴影被覆盖缺少边框线的问题
+  // 修复按钮阴影被覆盖缺少边框线的问题
+  // 仓库动态页面的右侧按钮, 比如时间周期
+  .ui.floating.dropdown .menu,
+  // 仪表板切换控制用户按钮
   .ui.dropdown .menu.context-user-switch .scrolling.menu {
     box-shadow: ${themeVars.github.shadow.floating.small} !important;
   }
@@ -83,8 +99,9 @@ export const dropdown = css`
 
 // 选择框的下拉菜单看起来像普通按钮
 export const selectionDropdown = css`
-  .ui.selection.dropdown,
+  // 排除可以选择的输入搜索框和创建仓库的拥有者
-  .ui.selection.dropdown.active {
+  .ui.selection.dropdown:not(.search):not(.ellipsis-text-items),
+  .ui.selection.dropdown.active:not(.search):not(.ellipsis-text-items) {
     background-color: ${themeVars.color.button};
     border-color: ${themeVars.color.light.border};
     border-radius: ${otherThemeVars.border.radius};
@@ -104,9 +121,43 @@ export const selectionDropdown = css`
       ${activeItemAfterStyle};
     }
   }
+  // 这个按钮项目前只在创建仓库的拥有者
+  // 不实现伪元素, 因为 .item 设置溢出的元素会被截断
+  .ui.selection.dropdown.ellipsis-text-items,
+  .ui.selection.dropdown.activeellipsis-text-items {
+    &:focus {
+      background: ${themeVars.color.button};
+      border-color: ${themeVars.color.light.border};
+    }
+    &:hover {
+      background: ${themeVars.color.hover.self};
+      border-color: ${themeVars.color.light.border};
+    }
+  }
+  // 选择输入框效果和输入框 focus 效果一样
+  .ui.selection.dropdown.active.search {
+    background: ${themeVars.color.body};
+    // 向内部添加一个 1px 的边框
+    box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+    outline: none;
+  }
+  // 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线
+  .ui.selection.dropdown.active.search.upward:hover {
+    box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
+  }
+  // 由于之前的排除导致样式优先级变高, 小按钮去除圆角
+  .ui.action.input > .dropdown.small:not(:first-child) {
+    border-radius: 0;
+  }
   // 排除一些小按钮, 例如软件包类型, 通常相邻有元素
   .ui.selection.dropdown.active:not(.small) {
     border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
     border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
   }
+  // 修复选择框的下拉菜单向上显示时的样式问题
+  .ui.upward.selection.dropdown.visible:not(.small),
+  .ui.active.upward.selection.dropdown:not(.small) {
+    border-top-left-radius: ${otherThemeVars.border.radius}!important;
+    border-top-right-radius: ${otherThemeVars.border.radius}!important;
+  }
 `;

styles/public/index.tsx

@@ -11,3 +11,4 @@ import "./label"; // 标签
 import "./menu"; // 菜单
 import "./modal"; // 弹窗
 import "./tippy"; // 提示框
+import "./navbar"; // 导航栏

styles/public/input.tsx

@@ -4,7 +4,8 @@ export const input = css`
   input,
   textarea,
   .ui.input input,
-  .ui.form input:not([type]),
+  // 排除可以选择的输入搜索框
+  .ui.form input:not([type]):not(.search),
   .ui.form select,
   .ui.form textarea,
   .ui.form input[type="date"],
@@ -29,4 +30,12 @@ export const input = css`
       outline: none;
     }
   }
+
+  .ui.input {
+    height: 32px;
+  }
+  // 由于输入框高度, 需要输入框在表单中垂直居中
+  .ui.form {
+    align-items: center;
+  }
 `;

styles/public/label.tsx

@@ -8,6 +8,20 @@ export const label = css`
     &.ui.ui.ui {
       &.label {
         border-radius: 25px;
+        // 多个标签的组合标签的圆角修复
+        &.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;
+          }
+        }
         /* 主色调标签 */
         &.primary {
           background-color: unset;
@@ -87,28 +101,40 @@ export const shaLabel = css`
     &.sign-trusted {
       border: 1.5px solid ${themeVars.color.green.badge.self} !important;
       color: ${themeVars.color.green.badge.self} !important;
+      &:hover {
+        background-color: ${themeVars.color.green.badge.hover.bg} !important;
+      }
     }
     // 验证未信任
     &.sign-untrusted {
       border: 1.5px solid ${themeVars.color.yellow.badge.self} !important;
       color: ${themeVars.color.yellow.badge.self} !important;
+      &:hover {
+        background-color: ${themeVars.color.yellow.badge.hover.bg} !important;
+      }
     }
     // 验证未匹配
     &.sign-unmatched {
       border: 1.5px solid ${themeVars.color.orange.badge.self} !important;
       color: ${themeVars.color.orange.badge.self} !important;
+      &:hover {
+        background-color: ${themeVars.color.orange.badge.hover.bg} !important;
+      }
     }
     // 验证警告
     &.sign-warning {
       border: 1.5px solid ${themeVars.color.red.badge.self} !important;
       color: ${themeVars.color.red.badge.self} !important;
+      &:hover {
+        background-color: ${themeVars.color.red.badge.hover.bg} !important;
+      }
     }
   }
 `;
 
 // 任务状态标签, 目前仅在管理员页面 Runner 状态中看到
 export const taskStatusLabel = css`
-  .ui.label.task-status- {
+  .runner-container .ui.label.task-status- {
     &success {
       color: ${themeVars.color.success.text};
       border: 1px solid ${themeVars.color.success.border};

styles/public/menu.tsx

@@ -110,6 +110,9 @@ export const verticalMenu = css`
 `;
 
 export const menu = css`
+  .menu .item svg {
+    color: ${themeVars.color.text.light.num1};
+  }
   // 菜单默认悬浮色更改
   .ui.menu a.item,
   .ui.secondary.pointing.menu a.item,
@@ -138,8 +141,16 @@ export const menu = css`
   }
 `;
 
-// 二级导航栏
 export const secondaryMenu = css`
+  // 二级菜单, 比如 Issue/PR/Actions 的筛选菜单
+  .ui.secondary.menu {
+    .item {
+      padding: 0px 12px;
+      height: 32px;
+      font-weight: 500;
+    }
+  }
+  // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
   .ui.secondary.pointing.menu {
     .overflow-menu-items {
       gap: 0.5rem;
@@ -150,6 +161,9 @@ export const secondaryMenu = css`
         margin-bottom: 0.5rem !important;
       }
     }
+    .item {
+      font-weight: 400; // 二级导航栏不需要加粗
+    }
     .active.item,
     .dropdown.item,
     .link.item,
@@ -157,7 +171,6 @@ export const secondaryMenu = css`
       border-radius: ${otherThemeVars.border.radius};
       color: ${themeVars.color.text.self};
       svg {
-        color: ${themeVars.color.text.light.num1};
         margin-right: 8px;
       }
     }

styles/public/navbar.tsx

@@ -0,0 +1,89 @@
+import { css, themeVars } from "src/types/vars";
+
+export const navbarRight = css`
+  #navbar {
+    .navbar-right {
+      gap: 8px;
+      // 右侧按钮, 但不包括头像
+      > .item:not(:last-child) {
+        display: grid;
+        gap: 4px;
+        grid-auto-columns: max-content;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        border: 1px solid ${themeVars.color.light.border};
+        padding: unset;
+        height: 32px;
+        min-width: 32px;
+        min-height: 32px;
+        // 纠正内容保证居中
+        .tw-relative {
+          height: 16px;
+          width: 16px;
+        }
+        .svg {
+          color: ${themeVars.color.text.light.num1};
+        }
+        // 带下拉菜单的按钮
+        &.ui.dropdown {
+          padding: 0 8px;
+          .text {
+            display: grid;
+            grid-auto-flow: column;
+            align-items: center;
+            > svg {
+              margin-right: 8px;
+            }
+            // 三角号纠正高度保持居中
+            .not-mobile {
+              height: 16px;
+            }
+          }
+          &:hover {
+            background-color: ${themeVars.color.nav.hoverBg};
+          }
+        }
+      }
+      .item.ui.dropdown {
+        // 头像菜单
+        &:last-child {
+          padding-left: 2px; // 调整此选项需同步增减相同的标识的 left
+          padding-right: 16px;
+          .text {
+            // 不显示小箭头标识
+            > .not-mobile {
+              display: none;
+            }
+            // 头像
+            img {
+              border-radius: 25px;
+              height: 32px;
+              max-height: 32px;
+            }
+          }
+        }
+        // 用户头像的管理员标识
+        .navbar-profile-admin {
+          background-color: ${themeVars.github.bgColor.accent.emphasis};
+          border-radius: 25px;
+          color: ${themeVars.color.text.self};
+          font-size: 8px;
+          font-weight: 600;
+          padding: 2px 5px;
+          top: -3px;
+          left: 22px;
+        }
+      }
+    }
+  }
+  // 手机下的创建菜单按钮
+  @media (max-width: 767.98px) {
+    #navbar .navbar-right > .item:not(:last-child) {
+      display: none;
+    }
+    #navbar.navbar-menu-open .navbar-right > .item:not(:last-child) {
+      display: grid;
+    }
+  }
+`;

styles/public/radius.tsx

@@ -38,7 +38,8 @@ export const radius = css`
     &.table,
     &.segment,
     &.segments,
-    &.grid.segment &.selection.dropdown,
+    &.grid.segment,
+    &.selection.dropdown,
     &.horizontal.segments,
     &.active.empty.selection.dropdown {
       border-radius: ${otherThemeVars.border.radius};

styles/public/tippy.tsx

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