支持克隆菜单自定义长度

分支菜单项目添加动画效果
移除 react
2025-10-26 04:40:31 +00:00 · 2025-08-05 15:55:25 +08:00 · 2025-08-05 15:25:41 +08:00 · 2025-08-05 12:59:23 +08:00 · 2025-08-05 12:39:35 +08:00 · 2025-07-08 22:57:12 +08:00
44 changed files with 679 additions and 291 deletions
--- a/.github/release-template.md
+++ b/.github/release-template.md
@@ -1,3 +1,7 @@
+## ✨ Feat
+
+#### CSS 变量
+
 ## 🌈 Style

 #### 更符合 GitHub 风格
--- a/.github/release.md
+++ b/.github/release.md
@@ -1,19 +1,31 @@
+## ✨ Feat
+
+🎉 支持自定义 CSS 变量设置主题样式
+
+#### CSS 变量
+
+- 支持克隆菜单自定义长度
+
 ## 🌈 Style

+- 分支菜单项目添加动画效果
+
 #### 更符合 GitHub 风格

- 导航栏右侧按钮和头像颜色和样式同步
+- 同步 PR 的合并提交操作面板样式
+- 同步 Issue/PR 的时间线样式
+- 仓库同步派生栏样式同步
+- 添加一些颜色的渐变过渡动画
+- 同步 Issue/PR 的评论标题颜色
+- 同步 PR/Actions 的分支字体
+- 同步文件打开时的提交栏样式

 ## 🎈 Perf

- 优化输入框高度
- 优化二级菜单按钮高度
- 优化提交/分支/标签统计栏的激活颜色
+- 优化全局按钮样式
+- 优化顶部导航栏按钮圆角

 ## 🐞 Fix

- 修复多个标签组合的范围标签圆角 #4
- 修复探索/组织/用户页下的仓库主题标签样式
- 修复仓库标签页右侧按钮大小
- 修复管理员页面 Runner 任务状态标签的边框色
- 修复 Actions 页面下的分支标签按钮颜色
+- 修复一些圆角问题
+- 修复工单下依赖工单选择框的高度对齐
--- a/.github/todo.md
+++ b/.github/todo.md
@@ -1 +0,0 @@
-action 下的分支标签颜色
--- a/README.md
+++ b/README.md
@@ -26,6 +26,35 @@ THEMES = gitea-dark, github-dark
 详细请查看 Gitea 文档
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)

+## 自定义 CSS 变量
+
+可以根据自己的偏好自定义主题的一部分样式
+
+### 使用方法
+
+在主题的 CSS 文件中头部或尾部添加以下代码
+
+```css
+:root {
+  --custom-clone-menu-width: 150px;.
+  ...
+}
+```
+
+>[!IMPORTANT]
+>
+>请确保在 `:root` 选择器中添加自定义变量，否则无法生效
+>
+>变量之间用 `;` 分隔
+>
+>建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中
+
+### CSS 变量
+
+| 变量名                    | 描述         | Gitea (默认值) | Github | 推荐  | 最小值 | 最大值 |
+| :------------------------ | :----------- | :------------- | :----- | :---- | :----- | :----- |
+| --custom-clone-menu-width | 克隆菜单宽度 | 232px          | 332px  | 200px | 150px  | 400px  |
+
 ## 截图

 ![仓库](screenshots/repo.png)
@@ -45,3 +74,7 @@ THEMES = gitea-dark, github-dark
 ## 贡献

 欢迎提交 Issue 或 Pull Request
+
+```
+
+```
--- a/TODO.md
+++ b/TODO.md
@@ -0,0 +1,15 @@
+### 重大
+
+- gitea issue 默认标签颜色匹配使用 github 样式
+- 探索/组织/用户仓库样式 github 布局
+- issue/PR 列表样式 github 布局
+- styles/themes 库组件导出整理
+- defineTheme 颜色生成代码重构
+- 亮色主题适配/测试
+- 自动颜色主题生成
+- github primer 官方库集成
+
+### 其他
+
+- README 更新/截图更新
+- CONTRIBUTING 更新
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,6 +1,4 @@
 import js from "@eslint/js";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
 import globals from "globals";
 import tseslint from "typescript-eslint";

@@ -8,17 +6,10 @@ export default tseslint.config(
  { ignores: ["dist"] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ["**/*.{ts,tsx}"],
+    files: ["**/*.{ts}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
-    plugins: {
-      "react-hooks": reactHooks,
-      "react-refresh": reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-    },
  }
 );
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "gitea-github-theme",
-  "version": "1.24.2",
+  "version": "1.24.4",
  "description": "A theme to make Gitea look and feel like GitHub",
  "type": "module",
  "scripts": {
@@ -12,35 +12,26 @@
    "version": "node scripts/version.cjs"
  },
  "devDependencies": {
-    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@eslint/js": "^9.29.0",
    "@linaria/core": "^6.3.0",
-    "@linaria/react": "^6.3.0",
    "@types/node": "^24.0.3",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
    "@vanilla-extract/css": "^1.17.4",
    "@vanilla-extract/vite-plugin": "^5.0.6",
-    "@vitejs/plugin-react": "^4.5.2",
-    "@vitejs/plugin-react-swc": "^3.10.2",
    "@wyw-in-js/babel-preset": "^0.7.0",
    "@wyw-in-js/vite": "^0.7.0",
    "dotenv": "^17.0.0",
    "eslint": "^9.29.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.2.0",
    "lightningcss": "^1.30.1",
    "polished": "^4.3.1",
    "prettier": "3.5.3",
    "prettier-plugin-organize-imports": "^4.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
    "sass-embedded": "^1.89.2",
    "typescript": "^5.8.3",
    "typescript-eslint": "^8.34.1",
    "typescript-plugin-css-modules": "^5.1.0",
+    "typescript-styled-plugin": "^0.18.3",
    "vite": "^6.3.5"
  },
  "prettier": {
@@ -62,8 +53,5 @@
      "prettier-plugin-organize-imports"
    ],
    "organizeImportsSkipDestructiveCodeActions": false
-  },
-  "dependencies": {
-    "typescript-styled-plugin": "^0.18.3"
  }
 }
--- a/src/core/github.ts
+++ b/src/core/github.ts
@@ -350,6 +350,9 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
      },
    },
    control: {
+      bgColor: {
+        rest: githubColor.control.bgColor.rest,
+      },
      transparent: {
        bgColor: {
          hover: githubColor.control.transparent.bgColor.hover,
--- a/src/core/theme.ts
+++ b/src/core/theme.ts
@@ -13,8 +13,10 @@ function stringToBoolean(str: string, name: string): boolean {
  }
 }

-export const overlayAppear = "overlay-appear";
-export const animation = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppear}`;
+export const overlayAppearDown = "overlay-appear-down";
+export const animationDown = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearDown}`;
+export const overlayAppearUp = "overlay-appear-up";
+export const animationUp = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppearUp}`;

 const emoji = `
 .emoji[aria-label="check mark"],
@@ -46,22 +48,28 @@ export function createTheme(theme: Theme): void {
  }
  createGlobalTheme(":root", themeVars, theme);
  createGlobalTheme(":root", otherThemeVars, {
-    git: "#f05133",
-    light: {
-      mimicEnabled: isDarkTheme
-        ? "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))"
-        : "rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)))",
-    },
    border: {
      radius: "6px",
    },
+    color: {
+      git: "#f05133",
+      light: {
+        mimicEnabled: isDarkTheme
+          ? "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))"
+          : "rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)))",
+      },
+    },
  });
  globalStyle(":root", {
    accentColor: themeVars.color.accent,
    colorScheme: isDarkTheme ? "dark" : "light",
  });
-  globalKeyframes(overlayAppear, {
-    "0%": { opacity: 0, transform: "translateY(-12px)" },
+  globalKeyframes(overlayAppearDown, {
+    "0%": { opacity: 0, transform: "translateY(-8px)" },
+    "100%": { opacity: 1, transform: "translateY(0)" },
+  });
+  globalKeyframes(overlayAppearUp, {
+    "0%": { opacity: 0, transform: "translateY(8px)" },
    "100%": { opacity: 1, transform: "translateY(0)" },
  });
 }
--- a/src/core/vite.ts
+++ b/src/core/vite.ts
@@ -4,7 +4,7 @@ import fs from "node:fs";
 import path from "node:path";
 import type { Plugin } from "vite";

-const suffix = ".css.tsx";
+const suffix = ".css.ts";

 /**
 * 生成主题输入
--- a/src/types/color/github.ts
+++ b/src/types/color/github.ts
@@ -41,6 +41,7 @@ export const github = {
    success: {
      /** 成功的背景颜色
       * @issue `babel` 重新开启图标背景颜色
+       * @issue `prMerge` 合并提交的图标背景色
       */
      emphasis: null,
    },
@@ -58,6 +59,7 @@ export const github = {
       * @clone `clone` 克隆地址框被选中时的边框颜色
       * @issue `comment` 评论框被选中时的边框颜色
       * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
+       * @dropdown `selectionDropdown` 选择输入框的内部边框颜色
       */
      emphasis: null,
    },
@@ -156,6 +158,12 @@ export const github = {
    },
  },
  control: {
+    bgColor: {
+      /** 背景色
+       * @issue `timeline` 时间线标签背景色
+       */
+      rest: null,
+    },
    transparent: {
      bgColor: {
        /** 悬停色
--- a/src/types/vars.ts
+++ b/src/types/vars.ts
@@ -30,10 +30,19 @@ const otherVars = {
  border: {
    radius: null,
  },
-  ...color.otherAuto,
+  color: {
+    ...color.otherAuto,
+  },
+};
+
+const customVars = {
+  custom: {
+    cloneMenuWidth: "custom-clone-menu-width",
+  },
 };

 export const themeVars = createGlobalThemeContract(vars, varMapper);
 export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper);
+export const customThemeVars = createGlobalThemeContract(customVars, varMapper);

 export { css } from "@linaria/core";
--- a/styles/components/actions.tsx
+++ b/styles/components/actions.tsx
@@ -1,3 +1,4 @@
+import { animationDown } from "src/core/theme";
 import { css, otherThemeVars, themeVars } from "src/types/vars";

 // 仓库 Actions 页面
@@ -57,6 +58,7 @@ export const actions = css`
        .run-list-ref {
          background-color: ${themeVars.github.bgColor.accent.muted};
          color: ${themeVars.github.fgColor.accent};
+          font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
          font-weight: 400;
          &:hover {
            background-color: ${themeVars.github.bgColor.accent.muted};
@@ -132,6 +134,7 @@ export const actionViewHeader = css`
      .ui.label {
        background-color: ${themeVars.github.bgColor.accent.muted};
        color: ${themeVars.github.fgColor.accent};
+        font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
        font-weight: 400;
        > a {
          opacity: 1;
@@ -212,6 +215,7 @@ export const actionViewRight = css`
    }

    .job-step-container {
+      // 步骤标题
      .job-step-summary {
        color: ${themeVars.color.console.fg.subtle};
        padding: 8px 10px;
@@ -238,12 +242,16 @@ export const actionViewRight = css`
          }
        }
      }
-      /* 日志字体颜色白色 */
-      .job-log-line {
-        color: ${themeVars.color.console.fg.self};
-        /* 被 hover 时覆盖 ANSI 颜色 */
-        .log-msg:hover * {
-          color: ${themeVars.color.console.fg.self} !important;
+      // 步骤日志
+      .job-step-logs {
+        animation: ${animationDown};
+        /* 日志字体颜色白色 */
+        .job-log-line {
+          color: ${themeVars.color.console.fg.self};
+          /* 被 hover 时覆盖 ANSI 颜色 */
+          .log-msg:hover * {
+            color: ${themeVars.color.console.fg.self} !important;
+          }
        }
      }
    }
--- a/styles/components/clone.tsx
+++ b/styles/components/clone.tsx
@@ -1,20 +1,24 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars, customThemeVars } from "src/types/vars";

 // 克隆按钮的弹窗
 export const clone = css`
  .tippy-box {
    .clone-panel-popup {
-      //标题
-      .clone-panel-field:first-of-type {
-        font-weight: bold;
-        margin-top: 16px;
+      //标题和克隆地址
+      > .clone-panel-field {
        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,38 @@ export const clone = css`
      }
      // 克隆地址
      .ui.input.action {
-        > input,
-        > input:hover {
+        > input {
          border: 1px solid ${themeVars.color.light.border};
          border-radius: ${otherThemeVars.border.radius};
-        }
-        > input:focus,
-        > input:focus-visible {
-          border-color: ${themeVars.github.borderColor.accent.emphasis};
+          font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
+          min-width: 150px;
+          max-width: 400px;
+          width: ${customThemeVars.custom.cloneMenuWidth};
+          &:hover {
+            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;
+          }
        }
      }
      // 面板操作列表之间的分割线
--- a/styles/components/commit.tsx
+++ b/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};
    }
--- a/styles/components/dashboard.tsx
+++ b/styles/components/dashboard.tsx
--- a/styles/components/diff.tsx
+++ b/styles/components/diff.tsx
--- a/styles/components/filelist.tsx
+++ b/styles/components/filelist.tsx
@@ -16,12 +16,15 @@ export const branchButton = css`
  }
 `;

-// 仓库按钮
-export const repoButton = css`
+// 仓库同步派生
+export const syncFork = css`
  .page-content.repository.file.list {
-    // clone 按钮调整
-    .repo-button-row .repo-button-row-right .ui.primary.button span {
-      margin: 0px 3px;
+    .repo-home-filelist > .ui.message {
+      background: ${themeVars.color.box.header};
+      padding: 8px 8px 8px 16px;
+      .ui.button {
+        min-width: 96px;
+      }
    }
  }
 `;
@@ -45,17 +48,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};
              }
@@ -108,6 +110,29 @@ export const repoFilesMobile = css`
  }
 `;

+// 仓库打开文件时的视图
+export const repoFileView = css`
+  .page-content.repository.file.list {
+    .repo-view-container {
+      // 右侧文件视图内容
+      .repo-view-content {
+        // 头部提交信息
+        #repo-file-commit-box {
+          padding: 8px 12px;
+          > .latest-commit {
+            gap: 8px;
+          }
+          // 右侧提交时间
+          > .age {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+`;
+
 // 仓库代码布局调整, 侧边栏宽度调整
 export const repoGrid = css`
  .repo-grid-filelist-sidebar {
@@ -199,7 +224,7 @@ export const repoSidebarBottom = css`
        .color-icon {
          height: 8px;
          width: 8px;
-          margin-right: 6px;
+          margin-right: 8px;
        }
        .tw-font-semibold {
          color: ${themeVars.color.text.self};
--- a/styles/components/heatmap.tsx
+++ b/styles/components/heatmap.tsx
@@ -11,8 +11,8 @@ export const heatmap = css`
      // hover 时的圆角
      border-radius: 0.75px;
      // 宽度和高度可以用来控制间隔
-      width: 9.5px;
-      height: 9.5px;
+      width: 9px;
+      height: 9px;
      // 边框
      outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
      // 边框向内偏移
--- a/styles/components/index.tsx
+++ b/styles/components/index.tsx
@@ -6,6 +6,7 @@ import "./diff";
 import "./filelist";
 import "./heatmap";
 import "./issue";
+import "./newrepo";
 import "./release";
 import "./repo";
 import "./setting";
--- a/styles/components/issue.ts
+++ b/styles/components/issue.ts
@@ -0,0 +1,274 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { activeItemAfterStyle } from "styles/public/menu";
+
+export const button = css`
+  .issue-content-left .field.footer {
+    // 关闭工单按钮
+    .ui.red.basic.button#status-button {
+      color: ${themeVars.github.fgColor.done};
+      background-color: ${themeVars.color.button};
+      border-color: ${themeVars.color.light.border};
+      &:hover {
+        background-color: ${themeVars.color.hover.self};
+      }
+    }
+
+    // 重新开启按钮
+    .ui.basic.primary.button#status-button {
+      color: ${themeVars.github.fgColor.success};
+    }
+  }
+`;
+
+export const babel = css`
+  .issue-content-left {
+    .badge {
+      // 时间线打开状态标签
+      &.tw-bg-green {
+        background-color: ${themeVars.github.bgColor.success.emphasis} !important;
+      }
+      // 时间线关闭状态标签
+      &.tw-bg-red {
+        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      }
+      // 时间线合并状态标签
+      &.tw-bg-purple {
+        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      }
+    }
+  }
+  // 工单&PR状态标签
+  .ui.label.issue-state-label {
+    border-radius: 25px !important;
+
+    &.green {
+      color: ${themeVars.color.text.self} !important;
+      background-color: ${themeVars.github.bgColor.success.emphasis} !important;
+      border-color: ${themeVars.github.bgColor.success.emphasis} !important;
+    }
+
+    &.red {
+      color: ${themeVars.color.text.self} !important;
+      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+    }
+
+    &.purple {
+      color: ${themeVars.color.text.self} !important;
+      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
+      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
+    }
+  }
+`;
+
+// PR 分支标签
+export const prBranch = css`
+  .repository.view.issue .pull-desc code,
+  #issue-list .flex-item-body .branches .branch {
+    color: ${themeVars.github.fgColor.accent};
+    background-color: ${themeVars.github.bgColor.accent.muted};
+    border-radius: ${otherThemeVars.border.radius};
+    font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
+    font-size: 12px;
+    padding: 0 5px;
+    line-height: 20px;
+  }
+
+  .repository.view.issue .pull-desc code {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    a:hover {
+      text-decoration-line: none;
+    }
+  }
+`;
+
+// 评论
+export const comment = css`
+  .comment {
+    // 去除评论标题左侧指向头像的小箭头
+    .comment-header,
+    &:target .comment-header {
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+    // 评论焦点样式
+    &:target {
+      .comment-container {
+        border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
+        box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
+      }
+    }
+    .comment-header-right {
+      > .item,
+      > .label {
+        color: ${themeVars.color.text.light.num1};
+      }
+      .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}
+      }
+    }
+  }
+`;
+
+// PR 界面的 PR 操作评论
+export const prMerge = css`
+  .repository.view.issue .comment-list .timeline-item.pull-merge-box {
+    // 头像
+    .timeline-avatar {
+      color: ${themeVars.color.text.self} !important;
+      border-radius: ${otherThemeVars.border.radius};
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+      // 可以合并
+      &.green {
+        background-color: ${themeVars.github.bgColor.success.emphasis};
+        // 操作评论边框色
+        + .content > .ui.attached.segment {
+          border-left-color: ${themeVars.github.bgColor.success.emphasis};
+          border-right-color: ${themeVars.github.bgColor.success.emphasis};
+          &:first-child {
+            border-top-color: ${themeVars.github.bgColor.success.emphasis};
+          }
+          &:last-child {
+            border-bottom-color: ${themeVars.github.bgColor.success.emphasis};
+          }
+        }
+      }
+      // 已合并
+      &.purple {
+        background-color: ${themeVars.github.bgColor.done.emphasis};
+        + .content > .ui.attached.segment {
+          border-left-color: ${themeVars.github.bgColor.done.emphasis};
+          border-right-color: ${themeVars.github.bgColor.done.emphasis};
+          &:first-child {
+            border-top-color: ${themeVars.github.bgColor.done.emphasis};
+          }
+          &:last-child {
+            border-bottom-color: ${themeVars.github.bgColor.done.emphasis};
+          }
+        }
+      }
+    }
+    // 检查状态
+    .commit-status-panel {
+      .commit-status-header {
+        background: ${themeVars.color.body};
+        padding: 16px;
+        font-size: 16px;
+        font-weight: 600;
+        .ui.right {
+          color: ${themeVars.color.text.light.num1};
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+      // 检查状态列表
+      .commit-status-list {
+        background: ${themeVars.color.menu};
+        .commit-status-item {
+          border-radius: ${otherThemeVars.border.radius};
+          padding: 2px 8px;
+          margin: 0px 8px;
+          height: 37px;
+          &:first-child {
+            margin-top: 8px;
+          }
+          &:last-child {
+            margin-bottom: 8px;
+          }
+          &:hover {
+            background-color: ${themeVars.color.hover.opaque};
+          }
+        }
+      }
+    }
+    // 合并信息和操作
+    .merge-section {
+      color: ${themeVars.color.text.light.num1};
+      padding: 16px;
+      display: grid;
+      gap: 8px;
+    }
+  }
+`;
+
+// 时间线
+export const timeline = css`
+  .repository.view.issue {
+    .comment-list {
+      .timeline-item,
+      .timeline-item-group {
+        padding: 16px 0;
+        // 事件
+        &.event {
+          // 修复覆盖后的位置问题
+          padding-left: 15px;
+          .avatar {
+            width: 20px;
+            height: 20px;
+          }
+          .badge {
+            border: 2px solid ${themeVars.color.body};
+          }
+          // 仅匹配只有 badge
+          .badge:not([class*=" "]) {
+            background-color: ${themeVars.github.control.bgColor.rest};
+            svg {
+              color: ${themeVars.color.text.light.num1};
+            }
+          }
+        }
+        // 提交
+        &.commits-list {
+          // 每个提交之间的间隔
+          .flex-text-block {
+            padding-top: 4px;
+          }
+          .badge svg {
+            color: ${themeVars.color.text.light.num1};
+          }
+          // 仅覆盖左侧 commit 不覆盖右侧 SHA
+          a.muted {
+            font-size: 12px;
+            color: ${themeVars.color.text.light.num1};
+            text-decoration-line: underline;
+            &:hover {
+              color: ${themeVars.color.primary.self};
+            }
+          }
+        }
+      }
+    }
+  }
+`;
--- a/styles/components/issue.tsx
+++ b/styles/components/issue.tsx
@@ -1,123 +0,0 @@
-import { css, themeVars } from "src/types/vars";
-import { activeItemAfterStyle } from "styles/public/menu";
-
-export const button = css`
-  .issue-content-left .field.footer {
-    // 关闭工单按钮
-    .ui.red.basic.button#status-button {
-      color: ${themeVars.github.fgColor.done};
-      background-color: ${themeVars.color.button};
-      border-color: ${themeVars.color.light.border};
-      &:hover {
-        background-color: ${themeVars.color.hover.self};
-      }
-    }
-
-    // 重新开启按钮
-    .ui.basic.primary.button#status-button {
-      color: ${themeVars.github.fgColor.success};
-    }
-  }
-`;
-
-export const babel = css`
-  .issue-content-left {
-    .badge {
-      // 时间线打开状态标签
-      &.tw-bg-green {
-        background-color: ${themeVars.github.bgColor.success.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.success.emphasis} !important;
-      }
-      // 时间线关闭状态标签
-      &.tw-bg-red {
-        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.done.emphasis} !important;
-      }
-      // 时间线合并状态标签
-      &.tw-bg-purple {
-        background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-        border-color: ${themeVars.github.bgColor.done.emphasis} !important;
-      }
-    }
-  }
-  // 工单&PR状态标签
-  .ui.label.issue-state-label {
-    border-radius: 25px !important;
-
-    &.green {
-      color: ${themeVars.color.text.self} !important;
-      background-color: ${themeVars.github.bgColor.success.emphasis} !important;
-      border-color: ${themeVars.github.bgColor.success.emphasis} !important;
-    }
-
-    &.red {
-      color: ${themeVars.color.text.self} !important;
-      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
-    }
-
-    &.purple {
-      color: ${themeVars.color.text.self} !important;
-      background-color: ${themeVars.github.bgColor.done.emphasis} !important;
-      border-color: ${themeVars.github.bgColor.done.emphasis} !important;
-    }
-  }
-`;
-
-// PR 分支标签
-export const prBranch = css`
-  .repository.view.issue .pull-desc code,
-  #issue-list .flex-item-body .branches .branch {
-    color: ${themeVars.github.fgColor.accent};
-    background-color: ${themeVars.github.bgColor.accent.muted};
-    font-size: 12px;
-    padding: 0 5px;
-  }
-`;
-
-// 评论
-export const comment = css`
-  .comment {
-    // 去除评论标题左侧指向头像的小箭头
-    .comment-header,
-    &:target .comment-header {
-      &:before,
-      &:after {
-        display: none;
-      }
-    }
-    // 评论焦点样式
-    &:target {
-      .comment-container {
-        border-color: ${themeVars.github.borderColor.accent.emphasis} !important;
-        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}
-      }
-    }
-  }
-`;
--- a/styles/components/newrepo.ts
+++ b/styles/components/newrepo.ts
@@ -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}
+      }
+    }
+  }
+`;
--- a/styles/components/release.tsx
+++ b/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;
        }
      }
      // 右侧发布详细信息
--- a/styles/components/repo.tsx
+++ b/styles/components/repo.tsx
@@ -6,13 +6,6 @@ export const repoHeader = css`
    // 点星/关注/克隆/RSS 按钮
    .ui.compact.button {
      padding: 3px 12px;
-      svg {
-        color: ${themeVars.color.text.light.num1};
-      }
-      // 文本跟图标间隔, 文本在手机下不显示
-      span {
-        margin-left: 0.5rem;
-      }
    }
    // 仓库图标
    img.ui.avatar {
--- a/styles/components/setting.tsx
+++ b/styles/components/setting.tsx
--- a/styles/index.tsx
+++ b/styles/index.tsx
--- a/styles/public/button.tsx
+++ b/styles/public/button.tsx
@@ -18,12 +18,25 @@ export const baseButton = css`
    min-height: 30px;
    font-weight: 500;
    padding: 9px 16px;
+    &.ui {
+      gap: 8px;
+    }
  }
-
-  .ui.primary.button {
-    ${primaryStyle}
-    &:hover {
-      ${primaryHoverStyle}
+  .ui.button:not(.primary):not(.red) svg {
+    color: ${themeVars.color.text.light.num1};
+  }
+  // 主色调按钮保持白色
+  .ui.primary.buttons .button svg {
+    color: ${themeVars.color.text.self};
+  }
+  .ui.primary {
+    &.button,
+    // 按钮组, PR 里的压缩合并按钮
+    &.buttons .button {
+      ${primaryStyle}
+      &:hover {
+        ${primaryHoverStyle}
+      }
    }
  }
  // 主色调基本按钮和普通按钮一样
@@ -76,14 +89,6 @@ export const redButton = css`
  }
 `;

-// 分支菜单按钮
-export const branchDropdownButton = css`
-  .ui.button.branch-dropdown-button {
-    padding: 3px 12px;
-    min-height: 30px;
-  }
-`;
-
 // 修复按钮高度
 export const fixButtonHeight = css`
  .ui.small.buttons .button,
--- a/styles/public/chroma.tsx
+++ b/styles/public/chroma.tsx
--- a/styles/public/dropdown.tsx
+++ b/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;
@@ -38,10 +37,6 @@ export const dropdown = css`
            background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
          }
        }
-        svg {
-          color: ${themeVars.color.text.light.num1};
-          margin-right: 0.5rem;
-        }
        &.active,
        &.selected {
          &:after {
@@ -58,6 +53,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 +85,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 +96,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 +118,65 @@ 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;
  }
+  // 修复因为上面的排除导致的圆角问题
+  // 具体工单页面下依赖菜单选择框
+  #new-dependency-drop-list.ui.selection.dropdown.active,
+  // 提交图分支选择框
+  #git-graph-container #flow-select-refs-dropdown {
+    border-bottom-right-radius: 0 !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;
+  }
+`;
+
+export const fixSelectionDropdown = css`
+  // 具体工单页面下依赖菜单选择框
+  #new-dependency-drop-list.ui.selection.dropdown {
+    // 高度对齐问题, 应该与 input 框高度一致
+    min-height: 32px;
+  }
+`;
+
+// 分支菜单
+export const branchDropdown = css`
+  .ui.dropdown.branch-selector-dropdown .menu > .item {
+    animation: ${animationDown};
+  }
 `;
--- a/styles/public/index.tsx
+++ b/styles/public/index.tsx
@@ -2,6 +2,7 @@
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
+import "./transition"; // 过渡效果
 import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
 import "./chroma"; // 代码高亮
--- a/styles/public/input.tsx
+++ b/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"],
@@ -33,4 +34,8 @@ export const input = css`
  .ui.input {
    height: 32px;
  }
+  // 由于输入框高度, 需要输入框在表单中垂直居中
+  .ui.form {
+    align-items: center;
+  }
 `;
--- a/styles/public/label.tsx
+++ b/styles/public/label.tsx
@@ -101,21 +101,33 @@ 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;
+      }
    }
  }
 `;
--- a/styles/public/menu.tsx
+++ b/styles/public/menu.tsx
@@ -110,6 +110,9 @@ export const verticalMenu = css`
 `;

 export const menu = css`
+  .menu .item svg {
+    color: ${themeVars.color.text.light.num1};
+  }
  // 菜单默认悬浮色更改
  .ui.menu a.item,
  .ui.secondary.pointing.menu a.item,
@@ -168,7 +171,6 @@ export const secondaryMenu = css`
      border-radius: ${otherThemeVars.border.radius};
      color: ${themeVars.color.text.self};
      svg {
-        color: ${themeVars.color.text.light.num1};
        margin-right: 8px;
      }
    }
--- a/styles/public/modal.tsx
+++ b/styles/public/modal.tsx
@@ -1,7 +1,9 @@
+import { animationDown } from "src/core/theme";
 import { css, themeVars } from "src/types/vars";

 export const modal = css`
  .ui.modal {
+    animation: ${animationDown};
    border: 1.5px solid ${themeVars.color.light.border};

    > .header {
--- a/styles/public/navbar.tsx
+++ b/styles/public/navbar.tsx
@@ -1,4 +1,4 @@
-import { css, themeVars } from "src/types/vars";
+import { css, otherThemeVars, themeVars } from "src/types/vars";

 export const navbarRight = css`
  #navbar {
@@ -13,6 +13,7 @@ export const navbarRight = css`
        align-content: center;
        justify-content: center;
        border: 1px solid ${themeVars.color.light.border};
+        border-radius: ${otherThemeVars.border.radius};
        padding: unset;
        height: 32px;
        min-width: 32px;
@@ -40,6 +41,9 @@ export const navbarRight = css`
              height: 16px;
            }
          }
+          &:hover {
+            background-color: ${themeVars.color.nav.hoverBg};
+          }
        }
      }
      .item.ui.dropdown {
--- a/styles/public/radius.tsx
+++ b/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};
@@ -77,8 +78,10 @@ export const radiusImportant = css`
    border-radius: ${otherThemeVars.border.radius} !important;
  }
  // 目前为仓库列表/探索的二级菜单, 改版需要替换为全圆角
-  .ui.tabular.menu .active.item {
+  .ui.secondary.tabular.menu .item {
    border-radius: ${otherThemeVars.border.radius} !important;
+    &.active,
+    &.active:hover,
    &:hover {
      border-radius: ${otherThemeVars.border.radius} !important;
    }
@@ -112,10 +115,10 @@ export const radiusTop = css`

 // 上半部分圆角替换(原CSS带!important)
 export const radiusTopImportant = css`
+  .ui.tabular.menu .item,
  .ui.simple.upward.dropdown {
-    &.active {
-      border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
-    }
+    &.active,
+    &.active:hover,
    &:hover {
      border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
    }
--- a/styles/public/text.tsx
+++ b/styles/public/text.tsx
--- a/styles/public/tippy.tsx
+++ b/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"] {
--- a/styles/public/transition.scss
+++ b/styles/public/transition.scss
@@ -1,45 +0,0 @@
-// Made by Luting ^-^
-@keyframes overlay-appear {
-  0% {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-#navbar .item,
-.header-wrapper .ui.tabular.menu .item,
-.job-step-summary,
-.job-step-logs,
-.job-brief-item,
-.tippy-box .flex-items-block .item,
-.clone-panel-tab .item,
-.ui.form select,
-.ui.label,
-.ui.modal,
-.ui.selection.dropdown,
-.ui.checkbox label:before,
-.ui.checkbox input:checked ~ label:before,
-.ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
-.ui.selection.active.dropdown,
-.ui.selection.active.dropdown:hover,
-.ui.selection.active.dropdown .menu,
-.ui.selection.active.dropdown:hover .menu,
-.ui.vertical.menu .header.item,
-.ui.secondary.menu .item {
-  transition: 0.12s ease-out;
-}
-
-textarea,
-.ui.form input,
-.menu .item,
-.ui.modal,
-.job-step-summary,
-.job-step-logs,
-.job-brief-item {
-  animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
-}
--- a/styles/public/transition.ts
+++ b/styles/public/transition.ts
@@ -0,0 +1,49 @@
+import { css } from "src/types/vars";
+
+// 简单的渐变过渡
+export const transition = css`
+  // 迁移的元素
+  #navbar .item,
+  .header-wrapper .ui.tabular.menu .item,
+  .job-step-summary,
+  .job-step-logs,
+  .job-brief-item,
+  .repo-file-cell,
+  .tippy-box .flex-items-block .item,
+  .clone-panel-tab .item,
+  .ui.form select,
+  .ui.label,
+  .ui.modal,
+  .ui.checkbox label:before,
+  .ui.checkbox input:checked ~ label:before,
+  .ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
+  .ui.selection.dropdown,
+  .ui.selection.active.dropdown,
+  .ui.selection.active.dropdown:hover,
+  .ui.selection.active.dropdown .menu,
+  .ui.selection.active.dropdown:hover .menu,
+  .ui.vertical.menu .header.item,
+  .ui.secondary.menu .item {
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  // Gitea 表单元素原始过渡覆盖
+  input,
+  textarea,
+  tr,
+  .ui.input textarea,
+  .ui.form textarea,
+  .ui.form input:not([type]),
+  .ui.form input[type="date"],
+  .ui.form input[type="datetime-local"],
+  .ui.form input[type="email"],
+  .ui.form input[type="number"],
+  .ui.form input[type="password"],
+  .ui.form input[type="search"],
+  .ui.form input[type="tel"],
+  .ui.form input[type="time"],
+  .ui.form input[type="text"],
+  .ui.form input[type="file"],
+  .ui.form input[type="url"] {
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+`;
--- a/themes/dark.css.tsx
+++ b/themes/dark.css.tsx
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,7 +23,6 @@
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
-    "jsx": "react-jsx",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,4 @@
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
-import react from "@vitejs/plugin-react";
 import linaria from "@wyw-in-js/vite";
 import * as dotenv from "dotenv";
 import { Features } from "lightningcss";
@@ -24,7 +23,7 @@ export default defineConfig(({ mode }) => {
        styles: path.resolve(__dirname, "styles"),
        themes: path.resolve(__dirname, "themes"),
      },
-      extensions: [".js", ".jsx", ".ts", ".tsx", ".css.tsx"],
+      extensions: [".js", ".ts", ".css.ts"],
    },
    css: {
      transformer: "lightningcss",
@@ -37,14 +36,13 @@ export default defineConfig(({ mode }) => {
      linaria({
        include: ["**/*.{ts,tsx}"],
        babelOptions: {
-          presets: ["@babel/preset-typescript", "@babel/preset-react"],
+          presets: ["@babel/preset-typescript"],
        },
        preprocessor: (_selector, cssText) => sass.compileString(cssText).css, // 默认为全局样式并使用 sass-embedded 预处理 css
        tagResolver: (source, tag) =>
          // 识别从 src 导出的 css 标签，使用 @linaria/core/processors/css 处理
          source === "src/types/vars" && tag === "css" ? require.resolve("@linaria/core/processors/css") : null,
      }),
-      react(),
      vanillaExtractPlugin(),
      themePlugin(),
    ],
Author	SHA1	Message	Date
lutinglt	603d22d877	支持克隆菜单自定义长度	2025-08-05 15:55:25 +08:00
lutinglt	4f4b99a600	分支菜单项目添加动画效果	2025-08-05 15:25:41 +08:00
lutinglt	a1cc1509ce	移除 react	2025-08-05 12:59:23 +08:00
鲁汀	305b2eca0b	动画迁移 & 部分 PR 样式 (#7 ) * 弹窗动画 * 优化 PR 中的合并提交按钮颜色 * 优化按钮样式 * 同步 PR 的合并提交头像样式 * 同步 Issue/PR 的时间线样式 * Issue/PR 的时间线样式间隔和大小 * 同步 PR 的合并提交操作面板样式 * PR 操作间隔 * green * PR 操作边框色 * 已合并颜色 * 仓库同步派生栏样式同步 * 动画迁移 & 一些圆角修复 * 修复工单下依赖工单选择框 * 评论标题颜色&分支字体&提交栏样式 --------- Co-authored-by: lutinglt <lutinglt@users.noreply.github.com>	2025-08-05 12:39:35 +08:00
lutinglt	f635b30c9c	优化向上弹窗的菜单动画	2025-07-08 22:57:12 +08:00
lutinglt	1434c54ba3	svg	2025-07-08 19:27:50 +08:00
lutinglt	b9b12e7ed2	优化按钮和菜单下的图标颜色	2025-07-08 19:08:54 +08:00
lutinglt	f9755704ec	漏掉的类型筛选	2025-07-08 18:35:35 +08:00
lutinglt	120d24cb10	状态标签位置调整	2025-07-08 18:30:03 +08:00
lutinglt	77e2227029	删除了提交中 Action 状态标签多余的间隔	2025-07-08 18:10:25 +08:00
lutinglt	75fd35480b	fantastic clone menu	2025-07-08 15:52:47 +08:00
lutinglt	0516b19982	修复一些下拉菜单缺失边框线	2025-07-08 14:55:38 +08:00
lutinglt	5ac3a3044e	修复一些下拉菜单在向上弹出时与向下弹出不一致的问题	2025-07-08 14:25:32 +08:00
lutinglt	9ccc65ac1c	创建仓库页面下拉菜单选项样式同步	2025-07-07 22:28:45 +08:00
lutinglt	7921a8872b	修复一些输入框在整体元素中不居中	2025-07-07 22:03:18 +08:00
lutinglt	596442d2ef	选择输入框背景色	2025-07-07 20:32:50 +08:00
lutinglt	7248f617c4	修复选择输入框的样式和拥有者按钮高度	2025-07-07 20:28:27 +08:00
lutinglt	6def81fe26	修复顶部导航栏的菜单按钮悬浮颜色	2025-07-07 18:15:22 +08:00
lutinglt	fa08df8eea	todo	2025-07-07 16:19:06 +08:00
lutinglt	cc44560f96	微调热力图方块大小	2025-07-07 16:14:03 +08:00