update readme

.github/CHANGELOG.md

@@ -15,3 +15,7 @@
 #### CSS Variable
 
 ##### More GitHub-like style
+
+```text
+在 English 下方补充上面 Feature 以下部分的内容的中译英​
+```

.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-polar: # Replace with a single Polar username
-buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
-thanks_dev: # Replace with a single thanks.dev username
-custom: ['https://afdian.com/a/luting']

.github/ISSUE_TEMPLATE/1-style-bug-report.yml

@@ -0,0 +1,91 @@
+name: 样式错误报告 ( Style bug report )
+description: 安装主题后出现颜色/位置错误等 ( Color/position errors occur after installing the theme )
+labels: ["style bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        1. 请使用最新的主题, 并使用 Ctrl+F5 刷新页面查看 Bug 是否消失 ( Please use the latest theme and refresh the page with Ctrl+F5 to see if the Bug has disappeared )
+        2. 请查看项目根目录下的 CHANGELOG.md 文件, 查看是否有修复该 Bug 的相关描述 ( Please check the CHANGELOG.md file in the project root directory for descriptions of fixes related to this Bug )
+        3. 如果有相关描述, 可以查看 README.md 自己编译开发版本是否修复了该 Bug ( If there are related descriptions, you can check if the Bug has been fixed by compiling the development version yourself in the README.md )
+        4. 请查看 Gitea 默认主题下是否有同样的错误, 确认非主题问题 ( Please check if there is the same error in the default Gitea theme, confirming that it is not a theme problem )
+  - type: input
+    id: theme-version
+    attributes:
+      label: 主题版本 ( Theme Version )
+      description:
+        主题的版本, 如果是开发版本可以查看 CSS 文件中 `--theme-version` 的值, 或者查看项目根目录下的 `package.json` 文件
+        ( The version of the theme, if it is a development version, you can check the value of `--theme-version` in the
+        CSS file, or check the `package.json` file in the project root directory )
+      placeholder: ex. 1.24.5
+    validations:
+      required: true
+  - type: input
+    id: gitea-version
+    attributes:
+      label: Gitea 版本 ( Gitea Version )
+      description: 应用主题的 Gitea 版本 ( What version of Gitea are you using? )
+      placeholder: ex. 1.24.5
+    validations:
+      required: true
+  - type: input
+    id: page
+    attributes:
+      label: 页面 ( Page )
+      description: 错误出现的页面 ( The page where the error occurred )
+      placeholder: 工单列表页 ( Issue list page )
+    validations:
+      required: true
+  - type: textarea
+    id: actual-behavior
+    attributes:
+      label: 实际表现 ( Actual Behavior )
+      description: 请描述实际的错误表现 ( Please describe the actual error presentation )
+      placeholder: 页面底部的颜色错误 ( The color of the bottom of the page is incorrect )
+    validations:
+      required: true
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: 期望表现 ( Expected Behavior )
+      description: 请描述期望的正确表现 ( Please describe the expected correct presentation )
+      placeholder: 页面底部的颜色应该是白色 ( The color of the bottom of the page should be white )
+    validations:
+      required: true
+  - type: textarea
+    id: theme-screenshot
+    attributes:
+      label: 应用主题后的截图 ( Screenshot of the theme applied )
+      description: 请上传应用主题后的截图 ( Please upload a screenshot of the theme applied )
+    validations:
+      required: true
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: 复现步骤 ( Steps to reproduce )
+      description: 请描述如何复现错误 ( Please describe how to reproduce the error )
+      placeholder: 1. 安装主题 2. 刷新页面 3. 查看错误 ( 1. Install the theme 2. Refresh the page 3. View the error )
+    validations:
+      required: false
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: 错误描述 ( Bug Description )
+      description: 请描述错误的具体表现 ( Please describe the specific presentation of the error )
+      placeholder: 页面底部的颜色错误 ( The color of the bottom of the page is incorrect )
+    validations:
+      required: false
+  - type: textarea
+    id: gitea-screenshot
+    attributes:
+      label: Gitea 默认主题下的截图 ( Screenshot of the default Gitea theme )
+      description: 请上传 Gitea 默认主题下的截图 ( Please upload a screenshot of the default Gitea theme )
+    validations:
+      required: false
+  - type: textarea
+    id: github-screenshot
+    attributes:
+      label: 可供参考的 GitHub 页面对应的截图 ( Screenshot of the corresponding GitHub page )
+      description: 请上传 GitHub 页面对应的截图 ( Please upload a screenshot of the corresponding GitHub page )
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/2-feature-request.yml

@@ -0,0 +1,39 @@
+name: 功能请求 ( Feature request )
+description: 提出新的功能建议 ( Suggest new features )
+labels: ["enhancement"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        1. 不接受非 Gitea 和 GitHub 的样式需求 ( We do not accept style requests that are not Gitea or GitHub )
+        2. 颜色需求最好自己实现 ( Color requests are best implemented by yourself )
+  - type: input
+    id: page
+    attributes:
+      label: 页面 ( Page )
+      description: 功能涉及的页面 ( The page the feature involves )
+      placeholder: 首页 ( Home page )
+    validations:
+      required: false
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: 功能描述 ( Feature Description )
+      description: 请描述你想要的功能 ( Please describe the feature you want )
+      placeholder: 菜单样式修改 ( Menu style modification )
+    validations:
+      required: true
+  - type: textarea
+    id: screenshot
+    attributes:
+      label: 截图 ( Screenshot )
+      description: 预期的主题效果 ( Expected theme effect )
+    validations:
+      required: false
+  - type: textarea
+    id: github-screenshot
+    attributes:
+      label: 可供参考的 GitHub 页面对应的截图 ( Screenshot of the corresponding GitHub page )
+      description: 请上传 GitHub 页面对应的截图 ( Please upload a screenshot of the corresponding GitHub page )
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/3-core-bug-report.yml

@@ -0,0 +1,44 @@
+name: 框架错误报告 ( Core bug report )
+description: 报告框架的错误 ( Report errors in the theme framework )
+labels: ["core bug"]
+body:
+  - type: textarea
+    id: actual-behavior
+    attributes:
+      label: 实际表现 ( Actual Behavior )
+      description: 请描述实际的错误表现 ( Please describe the actual error presentation )
+      placeholder: 未生成自动颜色主题 ( No automatic color theme generated )
+    validations:
+      required: true
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: 期望表现 ( Expected Behavior )
+      description: 请描述期望的正确表现 ( Please describe the expected correct presentation )
+      placeholder: 生成自动颜色主题 ( Generate automatic color theme )
+    validations:
+      required: true
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: 复现步骤 ( Steps to reproduce )
+      description: 请描述如何复现错误 ( Please describe how to reproduce the error )
+      placeholder:
+        1. 新建颜色主题 2. 编译主题 3. 查看错误 ( 1. Create a color theme 2. Compile the theme 3. View the error )
+    validations:
+      required: false
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: 错误描述 ( Bug Description )
+      description: 请描述错误的具体表现 ( Please describe the specific presentation of the error )
+      placeholder: 未生成自动颜色主题 ( No automatic color theme generated )
+    validations:
+      required: false
+  - type: textarea
+    id: screenshot
+    attributes:
+      label: 截图 ( Screenshot )
+      description: 请上传错误的截图 ( Please upload the screenshot of the error )
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/4-doc-report.yml

@@ -0,0 +1,12 @@
+name: 文档报告 ( Document report )
+description: 改进或补充文档 ( Improve or supplement the document )
+labels: ["documentation"]
+body:
+  - type: textarea
+    id: doc-description
+    attributes:
+      label: 文档描述 ( Document Description )
+      description: 请描述文档的具体内容 ( Please describe the specific content of the document )
+      placeholder: 文档内容有误 ( The document content is incorrect )
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/release.md

@@ -1,26 +0,0 @@
-### 🌈 Style
-
-##### 更符合 GitHub 风格
-
-- 同步查看代码文件内容时的样式
-- 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验)
-
-### 🐞 Fix
-
-- 修复红绿色盲主题的代码高亮色
-- 修复仓库中文 README 时的按钮下划线长度
-- 修复登录二次验证页面内容位置
-- 修复后台管理的运维管理面板的样式
-
-## 📃 English (From AI)
-
-### 🌈 Style
-
-##### More GitHub-like style
-
-- Improved code file viewing experience (scrolling to bottom no longer causes file tree content overlap)
-
-### 🐞 Fix
-
-- Fixed code highlight colors for red-green color blindness theme
-- Fixed button underline length for Chinese README in repositories

.github/workflows/release.yml

@@ -17,11 +17,19 @@ jobs:
           npm run build
       - name: Create release
         run: |
-          export TZ=Asia/Shanghai
+          tar -zcf dist/theme-github-base.tar.gz --remove-files \
+          dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
+
+          tar -zcf dist/theme-github-colorblindness-colorblind.tar.gz --remove-files \
+          dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
+
+          tar -zcf dist/theme-github-colorblindness-tritanopia.tar.gz --remove-files \
+          dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
+
+          tar -zcf dist/theme-github-extra-pink.tar.gz --remove-files \
+          dist/theme-github-pink-auto.css dist/theme-github-pink-light.css dist/theme-github-pink-dark.css dist/theme-github-pink-soft-dark.css
+
           TAG="v$(npm run -s version)"
-          tar -zcf dist/theme-github-base.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
+          gh release create "$TAG" dist/* --notes-file CHANGELOG.md --draft -t $TAG
-          tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
-          tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
-          gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG
         env:
           GH_TOKEN: ${{ github.token }}

CHANGELOG.md

@@ -0,0 +1,13 @@
+### 🌈 Style
+
+##### 更符合 GitHub 风格
+
+### 🐞 Fix
+
+## 📃 English
+
+### 🌈 Style
+
+##### More aligned with GitHub style
+
+### 🐞 Fix

README.md

@@ -1,15 +1,24 @@
-<p align="center">
+<h1 align="center">
-  中文 |
+  <p>Gitea GitHub Theme</p>
-  <a href="./README_EN.md">English</a>
+  <img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
-</p>
+  <img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
+  <img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
+  <img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
+</h1>
 
-# gitea-github-theme
+<div align="center">
 
-一个精致模仿 Github 风格的 Gitea 主题, 优化了非常多的细节, 简单的介绍很难说全, 欢迎上手体验
+中文 • [English](README_EN.md)
+
+不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题.
+
+</div>
+
+![Dashboard](screenshots/dashboard.png)
 
 > [!TIP]
 >
-> 推荐搭配文件图标浏览器插件一起使用更佳
+> 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳
 > [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
 
 ## 版本号说明
@@ -26,6 +35,12 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
 
 > 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
 
+### 主题版本发布规则
+
+- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本
+- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
+- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
+
 ## 安装
 
 1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下
@@ -33,10 +48,6 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
 3. 重启 Gitea
 4. 在设置中查看主题
 
-> [!IMPORTANT]
->
-> 自动颜色主题需要亮色和暗色的主题文件
-
 例: 主题文件名为 `theme-github-dark.css`，则添加 `github-dark` 到 `THEMES` 末尾
 
 `gitea/conf/app.ini` 例:
@@ -49,6 +60,10 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 详细请查看 Gitea 文档
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
 
+> [!IMPORTANT]
+>
+> 自动颜色主题需要亮色和暗色的主题文件
+
 ## 截图
 
 ### 基本主题
@@ -57,7 +72,7 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 THEMES = github-auto, github-light, github-dark, github-soft-dark
 ```
 
-<details open>
+<details>
 <summary>Base</summary>
 <h4>theme-github-light.css</h4>
 <img src="screenshots/light.png"/>
@@ -82,6 +97,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
 <img src="screenshots/colorblind-dark.png"/>
 </details>
 
+### 粉色主题
+
+```ini
+THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
+```
+
+<details>
+<summary>Pink</summary>
+<h4>theme-github-pink-light.css</h4>
+<img src="screenshots/pink/pink-light.png"/>
+<h4>theme-github-pink-dark.css</h4>
+<img src="screenshots/pink/pink-dark.png"/>
+<h4>theme-github-pink-soft-dark.css</h4>
+<img src="screenshots/pink/pink-soft-dark.png"/>
+</details>
+
 ## 自定义 CSS 变量
 
 可以根据自己的偏好自定义主题的一部分样式
@@ -109,7 +140,9 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
 
 | 变量名                            | 描述                        | 默认  | Github | 推荐  | 最小  | 最大  |
 | :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
+| --custom-branch-menu-width        | 分支菜单的宽度              | 320px | 320px  | 320px | Gitea | 640px |
 | --custom-clone-menu-width         | 克隆按钮的菜单宽度          | Gitea | 332px  | 200px | 150px | 400px |
+| --custom-user-menu-width          | 用户菜单的宽度              | 192px | 256px  |       | Gitea | 320px |
 | --custom-explore-repolist-columns | 探索页面的仓库列表列数      | 2     | 2      | 2     |       |       |
 | --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3     | 1      | 2/3   |       |       |
 | --custom-user-repolist-columns    | 用户页面的仓库列表列数      | 2     | 2      | 1/2   |       |       |
@@ -131,7 +164,3 @@ npm run build
 
 编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在
 `gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
-
-## 贡献
-
-请查看 [CONTRIBUTING](CONTRIBUTING.md)

README_EN.md

@@ -1,15 +1,24 @@
-<p align="center">
+<h1 align="center">
-  <a href="./README.md">中文</a> |
+  <p>Gitea GitHub Theme</p>
-  English
+  <img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
-</p>
+  <img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
+  <img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
+  <img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
+</h1>
 
-# gitea-github-theme
+<div align="center">
 
-A meticulously crafted Gitea theme that mimics the GitHub style, with numerous detailed optimizations that are difficult to fully describe in a brief introduction - welcome to experience it firsthand.
+English • [中文](README.md)
+
+A Gitea theme that pursues GitHub style not only in colors but also in styling details.
+
+</div>
+
+![Dashboard](screenshots/en/dashboard-en.png)
 
 > [!TIP]
 >
-> For the best experience, it is recommended to use this theme with the file explorer icon plugin
+> Recommend using Catppuccin file icon browser plugin together for better performance.
 > [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
 
 ## Version Number Explanation
@@ -28,6 +37,15 @@ accepted.
 
 > Development stage theme version number format: `1.major.minor.timestamp`
 
+### Theme Version Release Rules
+
+- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor
+  version as Gitea will be released
+- When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest`
+  will be released and the old version will no longer be maintained
+- The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a
+  theme version with the same major version as Gitea will be released
+
 ## Installation
 
 1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory
@@ -36,10 +54,6 @@ accepted.
 3. Restart Gitea
 4. Check the theme in the settings
 
-> [!IMPORTANT]
->
-> Automatic color theme requires both light and dark theme files
-
 Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES`
 
 Example `gitea/conf/app.ini`:
@@ -52,6 +66,10 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
 For details, please refer to the Gitea documentation
 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
 
+> [!IMPORTANT]
+>
+> Automatic color theme requires both light and dark theme files.
+
 ## Screenshots
 
 ### Basic Themes
@@ -60,7 +78,7 @@ For details, please refer to the Gitea documentation
 THEMES = github-auto, github-light, github-dark, github-soft-dark
 ```
 
-<details open>
+<details>
 <summary>Base</summary>
 <h4>theme-github-light.css</h4>
 <img src="screenshots/en/light.png"/>
@@ -85,6 +103,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
 <img src="screenshots/en/colorblind-dark.png"/>
 </details>
 
+### Pink Themes
+
+```ini
+THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
+```
+
+<details>
+<summary>Pink</summary>
+<h4>theme-github-pink-light.css</h4>
+<img src="screenshots/pink/en/pink-light-en.png"/>
+<h4>theme-github-pink-dark.css</h4>
+<img src="screenshots/pink/en/pink-dark-en.png"/>
+<h4>theme-github-pink-soft-dark.css</h4>
+<img src="screenshots/pink/en/pink-soft-dark-en.png"/>
+</details>
+
 ## Custom CSS Variables
 
 You can customize parts of the theme style according to your preferences
@@ -113,7 +147,9 @@ Add the following code at the beginning or end of the theme's CSS file
 
 | Variable Name                     | Description                                              | Default | Github | Recommend | Min   | Max   |
 | :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- |
+| --custom-branch-menu-width        | Branch menu width                                        | 320px   | 320px  | 320px     | Gitea | 640px |
 | --custom-clone-menu-width         | Clone button menu width                                  | Gitea   | 332px  | 200px     | 150px | 400px |
+| --custom-user-menu-width          | User menu width                                          | 192px   | 200px  |           | Gitea | 320px |
 | --custom-explore-repolist-columns | Number of repository list columns on explore page        | 2       | 2      | 2         |       |       |
 | --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3       | 1      | 2/3       |       |       |
 | --custom-user-repolist-columns    | Number of repository list columns on user page           | 2       | 2      | 1/2       |       |       |
@@ -135,7 +171,3 @@ npm run build
 
 After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the
 `gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini`
-
-## Contribution
-
-Please refer to [CONTRIBUTING](CONTRIBUTING.md)

package.json

@@ -1,7 +1,6 @@
 {
   "name": "gitea-github-theme",
-  "version": "1.24.6",
+  "version": "1.24.8",
-  "description": "A sophisticated theme to make Gitea look and feel like GitHub",
   "type": "module",
   "scripts": {
     "dev": "vite build --mode dev",
@@ -32,7 +31,7 @@
     "typescript-eslint": "^8.34.1",
     "typescript-plugin-css-modules": "^5.1.0",
     "typescript-styled-plugin": "^0.18.3",
-    "vite": "^6.3.5"
+    "vite": "^7.1.9"
   },
   "prettier": {
     "printWidth": 120,

src/core/display.ts

@@ -0,0 +1,85 @@
+import { saturate } from "polished";
+import { scaleColorLight } from "src/functions";
+import { type GithubColor } from "./github";
+
+export type DisplayColor = {
+  num0: string;
+  num1: string;
+  num2: string;
+  num3: string;
+  num4: string;
+  num5: string;
+  num6: string;
+  num7: string;
+  num8: string;
+  num9: string;
+};
+
+export function display2GithubColor(
+  displayColor: DisplayColor,
+  baseGithubColor: GithubColor,
+  soft?: boolean
+): GithubColor {
+  return {
+    ...baseGithubColor,
+    diffBlob: {
+      ...baseGithubColor.diffBlob,
+      hunkNum: { bgColor: { rest: soft ? displayColor.num2 : displayColor.num1 } },
+    },
+    fgColor: {
+      ...baseGithubColor.fgColor,
+      accent: soft ? displayColor.num7 : displayColor.num6,
+    },
+    bgColor: {
+      ...baseGithubColor.bgColor,
+      accent: {
+        emphasis: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5,
+        muted: soft ? displayColor.num1 : displayColor.num0,
+      },
+    },
+    borderColor: {
+      ...baseGithubColor.borderColor,
+      accent: {
+        emphasis: soft ? displayColor.num6 : displayColor.num5,
+      },
+    },
+    button: {
+      ...baseGithubColor.button,
+      primary: {
+        ...baseGithubColor.button.primary,
+        fgColor: {
+          ...baseGithubColor.button.primary.fgColor,
+          accent: soft ? displayColor.num7 : displayColor.num6,
+        },
+        bgColor: {
+          ...baseGithubColor.button.primary.bgColor,
+          rest: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5,
+          hover: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, 3)) : scaleColorLight(displayColor.num5, 5),
+        },
+      },
+      star: {
+        iconColor: soft
+          ? scaleColorLight(displayColor.num6, -2)
+          : saturate(0.1, scaleColorLight(displayColor.num6, -2)),
+      },
+    },
+    underlineNav: {
+      borderColor: {
+        active: soft ? scaleColorLight(saturate(0.1, displayColor.num6), -5) : saturate(0.2, displayColor.num6),
+      },
+    },
+    contribution: {
+      ...baseGithubColor.contribution,
+      default: {
+        ...baseGithubColor.contribution.default,
+        bgColor: {
+          num0: baseGithubColor.contribution.default.bgColor.num0,
+          num1: soft ? displayColor.num2 : displayColor.num1,
+          num2: soft ? displayColor.num3 : displayColor.num2,
+          num3: soft ? displayColor.num5 : displayColor.num4,
+          num4: soft ? displayColor.num7 : displayColor.num6,
+        },
+      },
+    },
+  };
+}

src/core/github.ts

@@ -8,6 +8,7 @@ import { type ThemeColor } from "./color";
 export type GithubColor = {
   isDarkTheme: boolean;
   display: {
+    blue: { fgColor: string };
     brown: { fgColor: string };
     cyan: { fgColor: string };
     indigo: { fgColor: string };
@@ -36,10 +37,12 @@ export type GithubColor = {
     black: string;
     white: string;
     muted: string;
+    onEmphasis: string;
   };
   bgColor: {
     accent: { emphasis: string; muted: string };
     attention: { muted: string };
+    emphasis: string;
     success: { emphasis: string; muted: string };
     danger: { muted: string };
     done: { emphasis: string };
@@ -58,15 +61,16 @@ export type GithubColor = {
     translucent: string;
   };
   button: {
-    primary: { fgColor: { rest: string }; bgColor: { hover: string } };
+    primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string } };
     danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } };
+    star: { iconColor: string };
   };
   control: {
     bgColor: { active: string; hover: string; rest: string };
     transparent: { bgColor: { active: string; hover: string; selected: string } };
   };
-  shadow: { floating: { small: string } };
+  shadow: { floating: { small: string }; resting: { small: string } };
-  overlay: { backdrop: { bgColor: string } };
+  overlay: { backdrop: { bgColor: string }; bgColor: string };
   underlineNav: { borderColor: { active: string } };
   contribution: {
     default: {
@@ -87,7 +91,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
     activeBg: githubColor.control.bgColor.active,
     hoverBg: githubColor.control.transparent.bgColor.hover,
     menu: {
-      bg: githubColor.bgColor.inset,
+      bg: githubColor.overlay.bgColor,
       border: githubColor.borderColor.muted,
     },
   };
@@ -165,7 +169,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       opaque: themeVars.color.box.header,
     },
     active: githubColor.control.transparent.bgColor.selected,
-    menu: githubColor.bgColor.inset,
+    menu: githubColor.overlay.bgColor,
     card: themeVars.color.body,
     markup: {
       tableRow: githubColor.bgColor.muted,
@@ -192,15 +196,15 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       activeBg: githubColor.bgColor.accent.muted,
     },
     tooltip: {
-      text: githubColor.fgColor.default,
+      text: githubColor.fgColor.onEmphasis,
-      bg: githubColor.bgColor.default,
+      bg: githubColor.bgColor.emphasis,
     },
     nav: {
-      bg: githubColor.bgColor.inset,
+      bg: githubColor.bgColor.muted,
       hoverBg: githubColor.control.transparent.bgColor.hover,
       text: themeVars.color.text.self,
     },
-    secondaryNavBg: themeVars.color.nav.bg,
+    secondaryNavBg: themeVars.color.body,
     label: {
       text: themeVars.color.text.self,
       bg: githubColor.bgColor.neutral.muted,
@@ -256,11 +260,14 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       },
       primary: {
         fgColor: {
-          accent: saturate(0.1, scaleColorLight(githubColor.fgColor.success, githubColor.isDarkTheme ? 10 : -10)),
+          accent: saturate(
+            0.1,
+            scaleColorLight(githubColor.button.primary.fgColor.accent, githubColor.isDarkTheme ? 10 : -10)
+          ),
           rest: githubColor.button.primary.fgColor.rest,
         },
         bgColor: {
-          rest: themeVars.github.bgColor.success.emphasis,
+          rest: githubColor.button.primary.bgColor.rest,
           hover: githubColor.button.primary.bgColor.hover,
         },
         borderColor: {
@@ -281,6 +288,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
           hover: githubColor.borderColor.translucent,
         },
       },
+      star: {
+        iconColor: githubColor.button.star.iconColor,
+      },
     },
     control: {
       bgColor: {
@@ -296,6 +306,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       floating: {
         small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`,
       },
+      resting: {
+        small: `0px 1px 1px 0px ${githubColor.shadow.resting.small}, 0px 1px 3px 0px ${githubColor.shadow.resting.small};`,
+      },
     },
     underlineNav: {
       borderColor: {
@@ -339,7 +352,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
       green: githubColor.fgColor.success,
       cyan: githubColor.display.cyan.fgColor,
       teal: githubColor.display.teal.fgColor,
-      blue: githubColor.fgColor.accent,
+      blue: githubColor.display.blue.fgColor,
       violet: githubColor.display.indigo.fgColor,
       purple: githubColor.fgColor.done,
       pink: githubColor.fgColor.sponsors,

src/core/theme.ts

@@ -1,5 +1,7 @@
-import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
+import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
-import { otherThemeVars, themeVars } from "src/types/vars";
+import fs from "node:fs";
+import path from "node:path";
+import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars";
 import type { MapLeafNodes, WithOptionalLayer } from "./types";
 
 export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
@@ -32,11 +34,19 @@ const emoji = `
 .emoji[aria-label="musical notes"]
 `;
 
+// 版本号: 版本号.YYMMDD
+const now = new Date();
+const year = now.getFullYear().toString().slice(-2);
+const month = (now.getMonth() + 1).toString().padStart(2, "0");
+const day = now.getDate().toString().padStart(2, "0");
+
+const pkgPath = path.join(__dirname, "../..", "package.json");
+const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+const version = `"${pkg.version}.${year}${month}${day}"`;
+
 export function createTheme(theme: Theme): void {
   const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
-  if (isDarkTheme) {
+  createGlobalTheme(":root", themeInfoVars, { version });
-    globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
-  }
   createGlobalTheme(":root", themeVars, theme);
   createGlobalTheme(":root", otherThemeVars, {
     border: { radius: "6px" },
@@ -53,12 +63,5 @@ export function createTheme(theme: Theme): void {
     accentColor: themeVars.color.accent,
     colorScheme: isDarkTheme ? "dark" : "light",
   });
-  globalKeyframes(overlayAppearDown, {
+  if (isDarkTheme) globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
-    "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)" },
-  });
 }

src/core/vite.ts

@@ -50,6 +50,11 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
   return input;
 }
 
+function giteaThemeMetaInfo(nameGroup: string[]): string {
+  const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+  return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
+}
+
 const prefix = "theme-github-";
 
 /**
@@ -82,23 +87,28 @@ export function themePlugin(): Plugin {
           const fileName = `${prefix}${value.fileName}`;
           const originalFileName = value.originalFileNames.pop();
           const type = value.type;
-          const source = `${styles}${value.source.toString()}`;
+          // 合并样式文件和主题信息
+          const meta = giteaThemeMetaInfo(key.split(".")[0].split("-"));
+          const source = `${meta}${value.source.toString()}${styles}`;
           // 添加主题到输出
           this.emitFile({ name, fileName, source, type, originalFileName });
           // 自动颜色主题
           const isDark = key.endsWith("dark.css");
-          const darkName = key.replace("light.css", "dark.css");
+          const darkName = key.replace("light", "dark");
-          const lightName = key.replace("dark.css", "light.css");
+          const lightName = darkName.replace("dark", "light");
-          const autoName = `${prefix}${key.replace("dark.css", "auto.css").replace("light.css", "auto.css")}`;
           const findTheme = isDark ? lightName : darkName;
           if (findTheme in bundle) {
+            const autoName = `${prefix}${darkName.replace("dark", "auto")}`;
             const lightContent = `@import "./${prefix}${lightName}" (prefers-color-scheme: light);`;
             const darkContent = `@import "./${prefix}${darkName}" (prefers-color-scheme: dark);`;
+            const nameGroup = key.split(".")[0].split("-").slice(0, -1);
+            nameGroup.push("auto");
+            const metaInfo = giteaThemeMetaInfo(nameGroup);
             this.emitFile({
               name: autoName,
               fileName: autoName,
               type: "asset",
-              source: `${lightContent}\n${darkContent}`,
+              source: `${lightContent}\n${darkContent}\n${metaInfo}`,
             });
           }
           // 删除原始的样式文件, 自动颜色主题因为删除, 永远不会生成两次

src/types/color/github.ts

@@ -25,7 +25,6 @@ export const github = {
     accent: {
       /** 强调色
        * @diff 折叠/展开按钮的悬停颜色
-       * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
        * @navbar `navbarRight` 头像管理员标识背景颜色
        * @dropdown `dropdown` emoji 的悬停背景色
@@ -37,6 +36,7 @@ export const github = {
        * @repo `repoTopic` 仓库主题标签背景颜色
        * @actions `actions` 分支标签按钮背景颜色
        * @actions `actionViewHeader` 分支标签按钮背景颜色
+       * @notification `notification` 通知列表悬停时的背景颜色
        */
       muted: null,
     },
@@ -60,8 +60,10 @@ export const github = {
        * @input `input` 输入框被选中时的边框颜色
        * @clone `clone` 克隆地址框被选中时的边框颜色
        * @issue `comment` 评论框被选中时的边框颜色
+       * @actions `actionViewLeft` 左侧子作业激活伪元素颜色
        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
        * @dropdown `selectionDropdown` 选择输入框的内部边框颜色
+       * @notification `notification` 通知列表悬停时的左边框颜色
        */
       emphasis: null,
     },
@@ -158,6 +160,10 @@ export const github = {
         hover: null,
       },
     },
+    star: {
+      /** 已标星的星星颜色 */
+      iconColor: null,
+    },
   },
   control: {
     bgColor: {
@@ -174,12 +180,14 @@ export const github = {
          * @dropdown `dropdown` 下拉框子项的悬停背景颜色
          * @menu `verticalMenu` 垂直菜单项的悬停背景颜色
          * @menu `menu` 菜单项的悬停背景颜色
+         * @menu `secondaryMenu` 二级菜单按钮的悬停背景颜色
          * @repo `repoHeader` 仓库标题的悬停背景颜色
          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
          * @filelist `repoFiles` README 栏的按钮的悬停背景颜色
          * @issue `issueSidebar` 操作按钮的悬停背景颜色
          * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
          * @dashboard `dashboard` 仓库列表项目的悬停背景颜色
+         * @notification `notification` 通知列表的按钮悬停背景颜色
          */
         hover: null,
       },
@@ -190,6 +198,17 @@ export const github = {
       /** 悬浮阴影
        * @tippy `tippyBox` 悬浮框阴影
        * @dropdown `dropdown` 下拉框阴影
+       * @dashboard `dashboard` 仓库/组织切换按钮和列表边框和阴影
+       * @heatmap `heatmap` 热力图阴影
+       * @heatmap `activity` 动态活动阴影
+       */
+      small: null,
+    },
+    resting: {
+      /** 静止阴影
+       * @button `primaryStyle` 主色调按钮阴影
+       * @button `redButton` 红色按钮悬浮阴影
+       * @setting `button` 红色按钮阴影
        */
       small: null,
     },

src/types/color/other.ts

@@ -114,7 +114,7 @@ export const other = {
     /** 点击后颜色 */
     activeBg: "color-reaction-active-bg",
   },
-  /** 不知道是干啥的 */
+  /** 鼠标悬浮时的提示文本, 比如提交的具体时间, 任务状态等 */
   tooltip: {
     text: null,
     bg: null,

src/types/vars.ts

@@ -33,14 +33,21 @@ const vars = {
 const otherVars = { border: { radius: null }, color: { ...color.otherAuto } };
 
 const customVars = {
+  branchMenuWidth: "branch-menu-width",
   cloneMenuWidth: "clone-menu-width",
+  userMenuWidth: "user-menu-width",
   explore: { repolistColumns: "explore-repolist-columns", userlistColumns: "explore-userlist-columns" },
   userRepolistColumns: "user-repolist-columns",
   org: { repolistColumns: "org-repolist-columns", userlistColumns: "org-userlist-columns" },
 };
 
+const themeInfo = {
+  version: null,
+};
+
 export const themeVars = createGlobalThemeContract(vars, varMapper());
 export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper());
 export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom"));
+export const themeInfoVars = createGlobalThemeContract(themeInfo, varMapper("theme"));
 
 export { css } from "@linaria/core";

styles/components/actions.ts

@@ -27,7 +27,7 @@ export const actions = css`
         margin-bottom: 24px;
         margin-left: 2px;
       }
-
+      // 工作流列表标题栏菜单
       .ui.secondary.menu {
         background-color: ${themeVars.color.box.header};
         border: 1px solid ${themeVars.color.light.border};
@@ -36,6 +36,9 @@ export const actions = css`
         border-top-right-radius: ${otherThemeVars.border.radius};
         padding: 16px;
         margin-bottom: 0;
+        > .item {
+          color: ${themeVars.color.text.light.num1};
+        }
       }
 
       .ui.info.message {
@@ -58,7 +61,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-family: var(--fonts-monospace);
           font-weight: 400;
           &:hover {
             background-color: ${themeVars.github.bgColor.accent.muted};
@@ -180,7 +183,7 @@ export const actionViewLeft = css`
 
           &:after {
             overflow: visible;
-            background: ${themeVars.github.bgColor.accent.emphasis};
+            background: ${themeVars.github.borderColor.accent.emphasis};
             border-radius: ${otherThemeVars.border.radius};
             content: "";
             height: 24px;
@@ -190,6 +193,26 @@ export const actionViewLeft = css`
             width: 4px;
           }
         }
+        .job-brief-item-right {
+          svg.job-brief-rerun {
+            display: none;
+            color: ${themeVars.color.console.fg.subtle};
+            &:hover {
+              color: ${themeVars.color.text.self};
+            }
+          }
+          .step-summary-duration {
+            color: ${themeVars.color.console.fg.subtle};
+            font-family: var(--fonts-monospace);
+          }
+        }
+        &:hover {
+          .job-brief-item-right {
+            svg.job-brief-rerun {
+              display: inline-block;
+            }
+          }
+        }
       }
     }
   }
@@ -246,6 +269,11 @@ export const actionViewRight = css`
             color: ${themeVars.color.console.fg.self} !important;
           }
         }
+        // 步骤耗时
+        .step-summary-duration {
+          font-size: 12px;
+          font-family: var(--fonts-monospace);
+        }
       }
       // 步骤日志
       .job-step-logs {

styles/components/clone.ts

@@ -92,7 +92,7 @@ export const clone = css`
         .item {
           border-radius: ${otherThemeVars.border.radius};
           padding: 6px 8px;
-          line-height: 1.5;
+          height: 32px;
           margin: 0;
           svg {
             color: ${themeVars.color.text.light.num1};

styles/components/commit.ts

@@ -42,13 +42,24 @@ export const commit = css`
           color: ${themeVars.color.text.light.num1};
         }
       }
-      // 整行悬停色
+      tr {
-      tr:hover {
+        // 整行悬停色
-        background-color: ${themeVars.color.hover.opaque};
+        &:hover {
-      }
+          background-color: ${themeVars.color.hover.opaque};
-      // 偶数行悬停色
+        }
-      tr:nth-child(2n):hover {
+        // 偶数行悬停色
-        background-color: ${themeVars.color.hover.opaque} !important;
+        &:nth-child(2n):hover {
+          background-color: ${themeVars.color.hover.opaque} !important;
+        }
+        // 尾行圆角
+        &:last-child {
+          td:first-child {
+            border-bottom-left-radius: ${otherThemeVars.border.radius};
+          }
+          td:last-child {
+            border-bottom-right-radius: ${otherThemeVars.border.radius};
+          }
+        }
       }
     }
   }

styles/components/dashboard.ts

@@ -5,16 +5,29 @@ export const dashboard = css`
   .page-content.dashboard.feeds {
     // 仓库列表的仓库/组织切换按钮
     .ui.two.item.menu {
-      box-shadow: ${themeVars.github.shadow.floating.small};
+      background: ${themeVars.color.hover.self};
-      border: unset;
+      border: 0;
       border-radius: 12px;
       margin-bottom: 8px;
       > .item {
-        &:first-child {
+        background: unset;
-          border-radius: 12px 0 0 12px;
+        border-radius: 12px;
+        padding: 6px 12px !important;
+        &.active {
+          background: ${themeVars.color.menu};
+          box-shadow: ${themeVars.github.shadow.floating.small};
+          font-weight: 600;
         }
-        &:last-child {
+        &::before {
-          border-radius: 0 12px 12px 0;
+          display: none;
+        }
+        &:not(.active) {
+          border-radius: ${otherThemeVars.border.radius};
+          margin: 6px !important;
+          width: calc(50% - 12px);
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
         }
       }
     }
@@ -44,6 +57,7 @@ export const dashboard = css`
           padding: 8px;
           li {
             border-radius: ${otherThemeVars.border.radius};
+            padding: 6px 8px !important;
             &:not(:last-child) {
               border-bottom: 0;
             }
@@ -65,3 +79,66 @@ export const dashboard = css`
     }
   }
 `;
+
+// 导航栏的工单/PR/里程碑仪表板
+export const dashboardIssues = css`
+  .page-content.dashboard.issues {
+    .list-header {
+      background-color: ${themeVars.color.box.header};
+      border: 1px solid ${themeVars.color.light.border};
+      border-bottom: 0;
+      border-top-left-radius: ${otherThemeVars.border.radius};
+      border-top-right-radius: ${otherThemeVars.border.radius};
+      height: 54px;
+      padding: 16px 8px;
+      .list-header-toggle {
+        align-items: center;
+        border: 0;
+        > .item {
+          background: unset !important;
+          border-radius: ${otherThemeVars.border.radius};
+          color: ${themeVars.color.text.light.num1};
+          padding: 0px 8px;
+          height: 30px;
+          &:before {
+            display: none;
+          }
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+          }
+          &.active {
+            color: ${themeVars.color.text.self};
+            font-weight: 700;
+          }
+        }
+      }
+      .list-header-filters {
+        > .item {
+          border-radius: ${otherThemeVars.border.radius};
+          color: ${themeVars.color.text.light.num1};
+          padding: 0px 12px;
+          height: 32px;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 避免手机/平板下菜单错位
+export const issueListMobile = css`
+  @media (max-width: 767.98px) {
+    .page-content.dashboard.issues .list-header {
+      height: auto;
+    }
+  }
+`;
+
+// 修复仪表板下二级面板选择菜单组织的标签间隔
+export const fixOrgLabel = css`
+  .dashboard .secondary-nav .org-visibility .label {
+    margin-right: 0;
+  }
+`;

styles/components/diff.ts

@@ -31,7 +31,6 @@ export const diff = css`
   .code-expander-button {
     color: ${themeVars.color.text.light.num1};
     height: 28px !important;
-
     &:hover {
       background: ${themeVars.github.bgColor.accent.emphasis};
       color: ${themeVars.color.white};
@@ -41,4 +40,33 @@ export const diff = css`
   .lines-num {
     text-align: center !important;
   }
+  // 差异对比文件盒子
+  .diff-file-box {
+    // 差异对比文件头
+    .diff-file-header {
+      // 文件名
+      .diff-file-name {
+        font-weight: 400;
+        .fold-file.btn svg {
+          min-width: 16px;
+          min-height: 16px;
+          height: 16px;
+          width: 16px;
+        }
+        .diff-stats-bar {
+          height: 8px;
+        }
+        > div,
+        .file-link {
+          font-size: 12px;
+        }
+      }
+      // 操作按钮
+      .diff-file-header-actions {
+        color: ${themeVars.color.text.light.num1};
+        font-size: 12px;
+        font-weight: 400;
+      }
+    }
+  }
 `;

styles/components/editor.ts

@@ -4,17 +4,11 @@ export const monaco = css`
   .monaco-editor {
     --vscode-editor-background: ${themeVars.color.body} !important;
     --vscode-editorGutter-background: ${themeVars.color.body} !important;
-    .monaco-mouse-cursor-text {
-      font-size: 12px !important;
-    }
     // 滚动时固定在顶部的行
     .sticky-widget {
       background: ${themeVars.color.body} !important;
       box-shadow: 0 1px 0 ${themeVars.color.secondary.self} !important;
       width: 100% !important;
-      .sticky-line-content {
-        font-size: 12px !important;
-      }
     }
   }
 `;

styles/components/explore.ts

@@ -157,3 +157,33 @@ export const mobileList = css`
     }
   }
 `;
+
+// 统一无搜索结果时的样式
+export const notMatch = css`
+  // 组织的仓库列表
+  .page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
+  // 用户的仓库列表
+  .page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
+  // 探索的仓库列表
+  .page-content.explore.repositories > .ui.container,
+  // 组织的成员列表
+  .page-content.organization.members >.ui.container,
+  // 探索的用户和组织列表
+  .page-content.explore.users >.ui.container {
+    // 排除用户的公开活动页
+    > .flex-list:not(#activity-feed) {
+      &:has(> div:only-child):not(:has(.flex-item-main)) {
+        grid-template-columns: 1fr;
+        > div {
+          border: 1px solid ${themeVars.color.light.border};
+          border-radius: ${otherThemeVars.border.radius};
+          font-size: 16px;
+          font-weight: 500;
+          padding: 32px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+  }
+`;

styles/components/filelist.ts

@@ -10,7 +10,7 @@ export const branchButton = css`
         border: 1px solid ${themeVars.color.light.border};
         margin-top: 1px;
         margin-left: auto;
-        margin-right: 16px; // gitea 有 RSS 留出足够的空间
+        margin-right: 20px; // gitea 有 RSS 留出足够的空间
       }
     }
   }
@@ -22,6 +22,7 @@ export const syncFork = css`
     .repo-home-filelist > .ui.message {
       background: ${themeVars.color.box.header};
       padding: 8px 8px 8px 16px;
+      margin: 16px 0px;
       .ui.button {
         min-width: 96px;
       }
@@ -31,8 +32,13 @@ export const syncFork = css`
 
 // 仓库文件列表
 export const repoFiles = css`
+  // 文件列表和提交列表的按钮组
+  .repo-button-row {
+    margin: 16px 0;
+  }
   .repository.file.list {
     #repo-files-table {
+      margin: 16px 0;
       // 头部最后一次提交
       .repo-file-line {
         padding-right: 16px;
@@ -91,11 +97,13 @@ export const repoFiles = css`
     #readme {
       .file-header {
         background: ${themeVars.color.body};
+        min-height: 48px;
+        padding: 0px 8px !important;
         svg {
           color: ${themeVars.color.text.light.num1};
         }
         .file-header-left {
-          padding: 6px 8px !important;
+          padding: 8px !important;
           // 伪元素宽度等于按钮宽度而不是父元素宽度
           position: relative;
           &:hover {
@@ -106,7 +114,7 @@ export const repoFiles = css`
             content: "";
             background: ${themeVars.github.underlineNav.borderColor.active};
             border-radius: ${otherThemeVars.border.radius};
-            bottom: -8px;
+            bottom: -7px;
             left: 0;
             height: 2px;
             position: absolute;
@@ -182,7 +190,7 @@ export const repoFileView = css`
           position: absolute;
           top: 0;
           right: 0;
-          width: 1.5;
+          width: 1px;
           height: calc(100% + 64px); // 头部高度
           background: ${themeVars.color.secondary.self};
         }
@@ -354,7 +362,8 @@ export const repoFileViewMobile = css`
 // 仓库代码布局调整, 侧边栏宽度调整
 export const repoGrid = css`
   .repo-grid-filelist-sidebar {
-    grid-template-columns: auto 296px;
+    grid-template-columns: auto 312px;
+    gap: 24px;
   }
 
   @media (max-width: 767.98px) {
@@ -373,11 +382,15 @@ export const repoSidebarTop = css`
       }
       .flex-item {
         padding: 10px 0 0 0;
+        // 仓库描述本身
         .flex-item-title {
-          margin-top: 2px;
+          margin-top: 12px;
         }
+        // 仓库描述内容
         .flex-item-body {
-          padding: 8px 0 0 0;
+          > .tw-flex:first-child {
+            margin-top: 21px !important;
+          }
           .repo-description {
             color: ${themeVars.color.text.self};
           }

styles/components/footer.ts

@@ -0,0 +1,43 @@
+import { css, themeVars } from "src/types/vars";
+
+export const footer = css`
+  .page-footer {
+    background-color: ${themeVars.color.body};
+    border-top: 0;
+    color: ${themeVars.color.text.light.num1};
+    font-size: 12px;
+    gap: 32px;
+    justify-content: center;
+    padding: 16px 0 40px 0;
+    > .left-links {
+      gap: 4px;
+      > a {
+        color: ${themeVars.color.text.light.num1};
+        &:hover {
+          color: ${themeVars.color.primary.self};
+        }
+      }
+      > strong {
+        font-weight: 400;
+      }
+    }
+    > .right-links {
+      gap: 16px;
+      > .ui.dropdown {
+        font-size: 12px;
+        &:hover {
+          color: ${themeVars.color.primary.self};
+        }
+      }
+      > a {
+        border-left: 0;
+        color: ${themeVars.color.text.light.num1};
+        padding-left: 0;
+        margin-left: 0;
+        &:hover {
+          color: ${themeVars.color.primary.self};
+        }
+      }
+    }
+  }
+`;

styles/components/heatmap.ts

@@ -1,7 +1,11 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { css, themeVars } from "src/types/vars";
 
 export const heatmap = css`
   #user-heatmap {
+    + .divider:not(.divider-text) {
+      border-color: #0000;
+      margin: 8px 0px;
+    }
     .total-contributions {
       left: 25px + 20px;
       bottom: 0 + 12px;
@@ -12,8 +16,8 @@ export const heatmap = css`
     }
     .vch__container {
       padding: 12px 20px;
-      border: 1px solid ${themeVars.color.secondary.self};
+      box-shadow: ${themeVars.github.shadow.floating.small};
-      border-radius: ${otherThemeVars.border.radius};
+      border-radius: 12px;
       // 覆盖热力图和图例的背景色
       .vch__day__square,
       .vch__legend__wrapper rect {
@@ -65,16 +69,19 @@ export const heatmap = css`
 
 // 动态
 export const activity = css`
-  #activity-feed {
+  .flex-list#activity-feed {
-    .flex-item {
+    border-radius: 12px;
+    box-shadow: ${themeVars.github.shadow.floating.small};
+    > .flex-item {
       gap: 12px;
-      padding: 16px 0;
+      padding: 12px 8px 16px 14px;
-      &:first-child {
-        padding-top: 6px;
-      }
       > .flex-item-main {
         gap: 8px !important;
-
+        > div:not([class]) {
+          display: flex;
+          gap: 8px;
+          flex-wrap: wrap;
+        }
         relative-time {
           color: ${themeVars.color.text.light.num1};
         }
@@ -85,5 +92,9 @@ export const activity = css`
         width: 20px;
       }
     }
+    > .page.buttons {
+      border-top: 1px solid ${themeVars.color.secondary.self};
+      padding: 12px 0px;
+    }
   }
 `;

styles/components/index.ts

@@ -7,10 +7,15 @@ import "./diff";
 import "./editor";
 import "./explore";
 import "./filelist";
+import "./footer";
 import "./heatmap";
 import "./issue";
+import "./milestones";
+import "./navbar";
 import "./newrepo";
+import "./notification";
 import "./org";
+import "./packages";
 import "./release";
 import "./repo";
 import "./setting";

styles/components/issue.ts

@@ -3,6 +3,9 @@ import { activeItemAfterStyle } from "styles/public/menu";
 
 // 工单&PR 列表
 export const issueList = css`
+  // 仓库页面的里程碑列表菜单栏
+  .page-content.repository.milestones,
+  .page-content.repository.milestone-issue-list,
   .page-content.repository.issue-list {
     // 头部筛选菜单栏
     .issue-list-toolbar {
@@ -15,6 +18,7 @@ export const issueList = css`
       border-top-right-radius: ${otherThemeVars.border.radius};
       height: 48px;
       padding: 8px;
+      margin-top: 16px;
       .issue-list-toolbar-left {
         // 复选框
         input {
@@ -53,7 +57,15 @@ export const issueList = css`
         }
       }
     }
-    // Issue 列表
+  }
+  // 里程碑详细页面的 Issue 列表
+  .page-content.repository.milestone-issue-list,
+  // 顶部仪表板的 Issue 列表
+  .page-content.dashboard.issues,
+  // 用户订阅的 Issue 列表
+  .page-content.user.notification,
+  // 仓库 Issue 列表
+  .page-content.repository.issue-list {
     .flex-list#issue-list {
       border: 1px solid ${themeVars.color.light.border};
       border-bottom-left-radius: ${otherThemeVars.border.radius};
@@ -71,12 +83,11 @@ export const issueList = css`
         > .flex-item-icon {
           display: flex;
           gap: 4px;
-          margin-left: 8px;
+          margin-left: 16px;
           // 复选框
           input {
             background: unset;
             margin-top: 14px;
-            margin-left: 8px;
             margin-right: 8px !important;
           }
           svg {
@@ -99,13 +110,72 @@ export const issueList = css`
       }
     }
   }
+  // 里程碑列表
+  // [TODO] 暂时排除项目的列表
+  .page-content.repository.milestones:not(.projects) .milestone-list {
+    border: 1px solid ${themeVars.color.light.border};
+    border-bottom-left-radius: ${otherThemeVars.border.radius};
+    border-bottom-right-radius: ${otherThemeVars.border.radius};
+    .milestone-card {
+      padding: 8px 16px 10px 16px;
+      .milestone-header {
+        h3 {
+          font-size: 16px;
+          font-weight: 500;
+        }
+        div span {
+          font-size: 14px;
+          font-weight: 600;
+        }
+      }
+    }
+    .milestone-toolbar {
+      font-size: 12px;
+      .group > a {
+        font-size: 13px;
+      }
+    }
+  }
 `;
 
 // 避免手机/平板下菜单错位
 export const issueListMobile = css`
   @media (max-width: 1023.98px) {
-    .page-content.repository.issue-list .issue-list-toolbar {
+    .page-content.repository.milestones,
-      height: auto;
+    .page-content.repository.milestone-issue-list,
+    .page-content.repository.issue-list {
+      .issue-list-toolbar {
+        height: auto;
+      }
+    }
+  }
+`;
+
+// 置顶 Issue
+export const issuePins = css`
+  #issue-pins {
+    gap: 12px;
+    margin-bottom: 16px;
+    .issue-card {
+      padding: 16px 12px;
+      .content {
+        .issue-card-title {
+          font-size: 16px;
+          font-weight: 600;
+        }
+        svg {
+          color: ${themeVars.color.text.light.num1};
+          height: 100%;
+          margin-right: 3px;
+        }
+        .meta {
+          font-size: 12px;
+          padding-top: 4px;
+        }
+      }
+      .issue-card-bottom {
+        display: none;
+      }
     }
   }
 `;
@@ -293,6 +363,16 @@ export const comment = css`
   }
 `;
 
+// 评论书写框
+export const commentForm = css`
+  .repository .comment.form .content .segment {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+`;
+
 export const dropdown = css`
   .repository {
     // Issue/PR 列表下的所有筛选菜单
@@ -312,7 +392,7 @@ export const prMerge = css`
   .repository.view.issue .comment-list .timeline-item.pull-merge-box {
     // 头像
     .timeline-avatar {
-      color: ${themeVars.color.text.self} !important;
+      color: ${themeVars.color.white} !important;
       border-radius: ${otherThemeVars.border.radius};
       width: 40px;
       height: 40px;
@@ -392,6 +472,12 @@ export const prMerge = css`
       padding: 16px;
       display: grid;
       gap: 8px;
+      &.no-header {
+        &::before,
+        &::after {
+          display: none;
+        }
+      }
     }
   }
 `;
@@ -400,6 +486,11 @@ export const prMerge = css`
 export const timeline = css`
   .repository.view.issue {
     .comment-list {
+      // 时间线本线
+      .timeline::before {
+        // 不遮挡归档信息框, 归档信息框背景色有透明度时会漏出线
+        height: calc(100% - 62px);
+      }
       .timeline-item,
       .timeline-item-group {
         padding: 16px 0;
@@ -452,37 +543,106 @@ const sidebarPadding = {
 
 // 侧边栏
 export const issueSidebar = css`
-  .issue-content {
+  // 工单&创建工单&PR页面侧边栏
-    gap: 24px;
+  .page-content.repository.issue {
-    .issue-content-right {
+    .issue-content {
-      border: 0;
+      gap: 24px;
-      font-size: 12px;
+      // 侧边栏
-      padding: 0;
+      .issue-content-right {
-      .ui.button {
+        border: 0;
         font-size: 12px;
-      }
+        padding: 0;
-      .ui.form,
+        .ui.button {
-      a.fixed-text.muted,
+          font-size: 12px;
-      span.text,
+        }
-      // 列表项为空时的文字
+        .ui.form,
-      span.item.empty-list,
+        a.fixed-text.muted,
-      p {
+        span.text,
-        color: ${themeVars.color.text.light.num1};
+        // 列表项为空时的文字
-        font-size: 12px;
+        span.item.empty-list,
-      }
+        p {
-      .ui.dropdown.select-branch,
+          color: ${themeVars.color.text.light.num1};
-      .ui.form,
+          font-size: 12px;
-      a.fixed-text.muted,
+        }
-      span.text,
+        .ui.dropdown.select-branch,
-      .ui.watching > div,
+        .ui.form,
-      .ui.depending > div,
+        a.fixed-text.muted,
-      .flex-text-block,
+        span.text,
-      .ui.list,
+        .ui.watching > div,
-      p {
+        .ui.depending > div,
-        ${sidebarPadding};
+        .flex-text-block,
-      }
+        .ui.list,
-      .issue-sidebar-combo {
+        .toggle-wip,
-        .ui.dropdown > a.fixed-text.muted {
+        p {
+          ${sidebarPadding};
+        }
+        // 允许维护者编辑
+        > .ui.checkbox {
+          margin: 4px 8px;
+          strong {
+            font-weight: 400;
+          }
+        }
+        .issue-sidebar-combo {
+          .ui.dropdown > a.fixed-text.muted {
+            align-items: center;
+            border-radius: ${otherThemeVars.border.radius};
+            text-decoration-line: none;
+            height: 28px;
+            &:hover {
+              background: ${themeVars.github.control.transparent.bgColor.hover};
+            }
+          }
+          .ui.list {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+          // 标签菜单项
+          .ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) {
+            // 修复标签菜单中描述文本过长没有换行挤掉标签的问题
+            display: grid !important;
+            grid-template-columns: auto auto 1fr;
+            row-gap: 0px; // 去除行间距, 仅当有描述信息时才有间距(.tw-pl-\\\[20px\\\])
+            // 如果是归档标签则隐藏
+            &.tw-hidden {
+              display: none !important;
+            }
+            // 默认隐藏多余信息避免标签对齐问题
+            .item-secondary-info {
+              display: none;
+              grid-column: 2 / -1; // 从第2列对齐
+              color: ${themeVars.color.text.light.num1};
+              > .tw-pl-\\\[20px\\\] {
+                // 已经与第二列对齐, 不需要额外的 padding
+                padding-left: 0px !important;
+                padding-top: 4px;
+                // 显示全部描述信息与 Github 保持一致
+                white-space: normal;
+                small {
+                  font-size: 12px;
+                }
+              }
+              > .archived-label-hint {
+                // 与父元素 item 的 padding 对齐 (dropdown.ts .ui.dropdown .menu > .item)
+                top: 6px;
+                right: 8px;
+              }
+              // 如果有描述信息则显示
+              &:has(.tw-pl-\\\[20px\\\]) {
+                display: block;
+                > .archived-label-hint {
+                  top: 4px; // 有描述信息的归档标签与标签对齐需要更高点
+                }
+              }
+              // 如果有归档标签则显示
+              &:has(.archived-label-hint > .ui.label) {
+                display: block;
+              }
+            }
+          }
+        }
+        // 时间追踪
+        > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
           align-items: center;
           border-radius: ${otherThemeVars.border.radius};
           text-decoration-line: none;
@@ -491,62 +651,49 @@ export const issueSidebar = css`
             background: ${themeVars.github.control.transparent.bgColor.hover};
           }
         }
-        .ui.list {
+        // 选中日期颜色
-          margin-top: 0 !important;
+        .ui.form .due-date {
-          margin-bottom: 0 !important;
+          color: ${themeVars.color.text.self};
         }
-      }
+        // 分割线
-      // 时间追踪
+        > .divider {
-      > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
+          margin: 12px 0 12px 8px;
-        align-items: center;
+          width: calc(100% - 16px);
-        border-radius: ${otherThemeVars.border.radius};
-        text-decoration-line: none;
-        height: 28px;
-        &:hover {
-          background: ${themeVars.github.control.transparent.bgColor.hover};
         }
-      }
+        // 订阅按钮
-      // 选中日期颜色
+        .ui.watching .ui.button {
-      .ui.form .due-date {
+          padding: 0px 8px;
-        color: ${themeVars.color.text.self};
+          height: 28px;
-      }
-      .divider {
-        margin: 12px 0 12px 8px;
-        width: calc(100% - 16px);
-      }
-      // 订阅按钮
-      .ui.watching .ui.button {
-        padding: 0px 8px;
-        height: 28px;
-        svg {
-          margin: 0 !important;
-        }
-      }
-      // PIN 按钮
-      .form-fetch-action.single-button-form .ui.button,
-      // 底部操作按钮
-      .ui.show-modal.button {
-        border: 0;
-        background: unset;
-        font-weight: 400;
-        ${sidebarPadding};
-        // 好像是浏览器 BUG, 最后不生效, 必须 !important
-        margin: 0 !important;
-        justify-content: left;
-        &:hover {
-          background: ${themeVars.github.control.transparent.bgColor.hover};
-        }
-      }
-      .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
-        color: ${themeVars.color.red.self};
-        svg {
-          color: ${themeVars.color.red.self};
-        }
-        &:hover {
-          background-color: ${themeVars.color.red.badge.bg};
-          color: ${themeVars.color.red.light};
           svg {
+            margin: 0 !important;
+          }
+        }
+        // PIN 按钮
+        .form-fetch-action.single-button-form .ui.button,
+        // 底部操作按钮
+        .ui.show-modal.button {
+          border: 0;
+          background: unset;
+          font-weight: 400;
+          ${sidebarPadding};
+          // 好像是浏览器 BUG, 最后不生效, 必须 !important
+          margin: 0 !important;
+          justify-content: left;
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover};
+          }
+        }
+        .ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
+          color: ${themeVars.color.red.self};
+          svg {
+            color: ${themeVars.color.red.self};
+          }
+          &:hover {
+            background-color: ${themeVars.color.red.badge.bg};
             color: ${themeVars.color.red.light};
+            svg {
+              color: ${themeVars.color.red.light};
+            }
           }
         }
       }

styles/components/milestones.ts

@@ -0,0 +1,59 @@
+import { css, themeVars } from "src/types/vars";
+
+export const milestone = css`
+  // 里程碑头部
+  .milestone-header {
+    gap: 16px;
+    // 进度条
+    progress {
+      height: 5px;
+      width: 300px;
+      max-width: 80vw;
+    }
+  }
+  // 里程碑 Issue 列表的进度条
+  .milestone-progress-big {
+    height: 8px;
+  }
+  // 里程碑 Issue 列表
+  .page-content.repository.milestone-issue-list {
+    > .ui.container {
+      > .flex-text-block:first-child {
+        margin-bottom: 16px;
+        > h1 {
+          font-size: 32px;
+          font-weight: 600;
+          line-height: 48px;
+          word-break: keep-all;
+        }
+        + .tw-flex {
+          flex-direction: row !important;
+          align-items: center;
+          gap: 8px !important;
+          padding-top: 8px;
+          padding-bottom: 10px;
+          font-size: 14px;
+          color: ${themeVars.color.text.light.num1};
+          strong {
+            color: ${themeVars.color.text.self};
+          }
+          > .flex-text-block {
+            gap: 8px !important;
+          }
+        }
+      }
+      > .divider {
+        border-top-color: #0000;
+      }
+    }
+  }
+`;
+
+// 避免手机/平板下菜单错位
+export const milestoneMobile = css`
+  @media (max-width: 767.98px) {
+    .page-content.repository.milestone-issue-list > .ui.container > .flex-text-block:first-child + .tw-flex {
+      flex-direction: column !important;
+    }
+  }
+`;

styles/components/navbar.ts

@@ -1,7 +1,32 @@
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { fallbackVar } from "src/functions";
+import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
 
 export const navbarRight = css`
   #navbar {
+    border-bottom: 0;
+    padding: 0px 16px;
+    min-height: 64px;
+    .navbar-left {
+      gap: 8px;
+      > .item {
+        padding: 4px 8px;
+        min-height: 20px;
+        &.active {
+          font-weight: 600;
+        }
+        &#navbar-logo {
+          // 与下方的用户切换头像对齐
+          padding-left: 6px;
+          &:hover {
+            background: unset;
+          }
+          img {
+            height: 32px;
+            width: 32px;
+          }
+        }
+      }
+    }
     // 进入用户页面后, 避免注册, 登录和首页等意外覆盖
     .navbar-right:has(.user-menu) {
       gap: 8px;
@@ -35,7 +60,7 @@ export const navbarRight = css`
             grid-auto-flow: column;
             align-items: center;
             > svg {
-              margin-right: 8px;
+              margin-right: 4px;
             }
             // 三角号纠正高度保持居中
             .not-mobile {
@@ -69,12 +94,13 @@ export const navbarRight = css`
         .navbar-profile-admin {
           background-color: ${themeVars.github.bgColor.accent.emphasis};
           border-radius: 25px;
+          border: 2px solid ${themeVars.color.nav.bg};
           color: ${themeVars.color.white};
-          font-size: 8px;
+          font-size: 9px;
           font-weight: 600;
           padding: 2px 5px;
-          top: -3px;
+          top: -7px;
-          left: 22px;
+          left: 21px;
         }
       }
       // 通知和计时器的圆点
@@ -84,13 +110,31 @@ export const navbarRight = css`
           background-color: ${themeVars.github.bgColor.accent.emphasis};
           border-radius: 25px;
           color: ${themeVars.color.white};
-          font-size: 8px;
+          font-size: 9px;
           font-weight: 600;
-          top: -14px;
+          top: -15px;
-          left: 12px;
+          left: 11px;
         }
       }
     }
+    // 用户菜单
+    .navbar-right .user-menu {
+      width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")};
+      max-width: 320px;
+      > .header {
+        font-size: 14px;
+        font-weight: 400;
+        margin: 0;
+        padding: 16px 16px 8px 16px;
+        strong {
+          font-weight: 600;
+        }
+      }
+      > .divider {
+        margin: 8px;
+        width: calc(100% - 16px);
+      }
+    }
   }
   // 手机下的创建菜单按钮
   @media (max-width: 767.98px) {
@@ -102,3 +146,31 @@ export const navbarRight = css`
     }
   }
 `;
+
+// 二级导航栏
+export const secondaryNav = css`
+  .page-content > :first-child.secondary-nav {
+    margin-bottom: 16px;
+    // 仪表板界面的二级导航栏用户菜单
+    > .ui.secondary.stackable.menu {
+      gap: 0px;
+      min-height: 48px;
+      > .item {
+        // 修复手机下的菜单按钮没有居中的问题
+        margin-top: auto;
+        margin-bottom: auto;
+        > .ui.dropdown > .text {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          svg {
+            margin-right: 4px;
+          }
+        }
+      }
+      > .right.menu {
+        gap: 4px;
+      }
+    }
+  }
+`;

styles/components/notification.ts

@@ -0,0 +1,182 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 用户订阅/关注页面
+export const notification = css`
+  .page-content.user.notification {
+    > .ui.container {
+      > .ui.attached.segment {
+        border: 0;
+        padding: 0;
+        > .divider {
+          display: none;
+        }
+        // 订阅列表
+        &:has(#issue-list) {
+          > .tw-flex {
+            align-items: center;
+            align-content: center;
+            background-color: ${themeVars.color.box.header};
+            border: 1px solid ${themeVars.color.light.border};
+            border-bottom: 0;
+            border-top-left-radius: ${otherThemeVars.border.radius};
+            border-top-right-radius: ${otherThemeVars.border.radius};
+            height: 52px;
+            padding: 8px;
+            // 左侧菜单
+            > .tw-flex:first-child > .ui.compact.menu {
+              align-items: center;
+              border: 0;
+              > .item {
+                background: unset !important;
+                border-radius: ${otherThemeVars.border.radius};
+                color: ${themeVars.color.text.light.num1};
+                padding: 0px 8px;
+                height: 30px;
+                &:before {
+                  display: none;
+                }
+                &:hover {
+                  background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+                }
+                &.active {
+                  color: ${themeVars.color.text.self};
+                  font-weight: 700;
+                }
+              }
+            }
+            // 右侧菜单
+            > .tw-flex:last-child > .ui.menu {
+              align-items: center;
+              > .item {
+                color: ${themeVars.color.text.light.num1};
+              }
+              > .ui.button {
+                padding: 0 12px;
+                height: 32px;
+              }
+            }
+          }
+        }
+        // 关注列表
+        > .flex-list:not([id]) {
+          border: 1px solid ${themeVars.color.light.border};
+          border-radius: ${otherThemeVars.border.radius};
+          > .flex-item {
+            padding: 16px;
+            > .flex-item-main {
+              gap: 4px;
+              > .flex-item-header {
+                > .flex-item-title {
+                  gap: 12px;
+                }
+                > .flex-item-trailing {
+                  color: ${themeVars.color.text.light.num1};
+                  font-size: 12px;
+                  font-weight: 400;
+                  gap: 16px;
+                  .color-icon {
+                    width: 12px;
+                    height: 12px;
+                    margin-right: 0 !important;
+                  }
+                }
+              }
+              > .flex-item-body:last-child {
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
+      // 通知列表
+      &:has(#notification_table) {
+        > .tw-flex:first-child {
+          background-color: ${themeVars.color.box.header};
+          border: 1px solid ${themeVars.color.light.border};
+          border-bottom: 0;
+          border-top-left-radius: ${otherThemeVars.border.radius};
+          border-top-right-radius: ${otherThemeVars.border.radius};
+          height: 52px;
+          padding: 8px;
+          margin-bottom: 0 !important;
+          // 左侧菜单
+          > .ui.compact.menu {
+            align-items: center;
+            border: 0;
+            > .item {
+              background: unset !important;
+              border-radius: ${otherThemeVars.border.radius};
+              color: ${themeVars.color.text.light.num1};
+              padding: 0px 8px;
+              height: 30px;
+              &:before {
+                display: none;
+              }
+              &:hover {
+                background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+              }
+              &.active {
+                color: ${themeVars.color.text.self};
+                font-weight: 700;
+              }
+              .notifications-unread-count {
+                margin-left: 4px;
+              }
+            }
+          }
+        }
+        // 通知全部确认按钮
+        .ui.ui.ui.ui.mini.button {
+          height: 32px;
+        }
+      }
+      // 通知列表
+      #notification_table {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        color: ${themeVars.color.text.light.num1};
+        > .notifications-item {
+          border-top: 1px solid ${themeVars.color.light.border};
+          padding: 8px !important;
+          &:first-child {
+            border-top: 0;
+          }
+          &:last-child {
+            border-bottom-left-radius: ${otherThemeVars.border.radius};
+            border-bottom-right-radius: ${otherThemeVars.border.radius};
+            &:hover {
+              border-bottom-left-radius: 0;
+            }
+          }
+          &:hover {
+            background: ${themeVars.github.bgColor.accent.muted};
+            box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset;
+            color: ${themeVars.color.text.self};
+          }
+          > .notifications-link {
+            > .notifications-top-row {
+              font-size: 12px !important;
+            }
+            > .notifications-bottom-row {
+              font-size: 14px !important;
+            }
+          }
+          > .notifications-updated {
+            font-size: 12px;
+          }
+          > .notifications-buttons {
+            .interact-bg {
+              background: ${themeVars.github.bgColor.accent.muted} !important;
+              color: ${themeVars.color.text.light.num1};
+              padding: 8px !important;
+              &:hover {
+                background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+                color: ${themeVars.color.text.self};
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/packages.ts

@@ -0,0 +1,124 @@
+import { css, otherThemeVars, themeVars } from "src/types/vars";
+
+// 组织/仓库的软件包列表(包含用户但未测试)
+export const packagesList = css`
+  .page-content.packages {
+    // 这里必须要用 >, 否则会影响到软件包详细信息页的样式
+    > .ui.container > div:not([class]) {
+      border: 1px solid ${themeVars.color.light.border};
+      border-radius: ${otherThemeVars.border.radius};
+      margin-top: 16px;
+      .flex-list {
+        border-top: 1px solid ${themeVars.color.light.border};
+        &:first-child {
+          border-top: 0;
+        }
+        .flex-item {
+          padding: 16px;
+          .flex-item-main {
+            .flex-item-title {
+              gap: 8px;
+              > a {
+                min-height: 25px;
+              }
+              // 软件包类型的标签
+              .ui.label {
+                gap: 4px;
+                padding: 3px 6px;
+                min-height: 24.5px;
+                background-color: unset;
+                border: 1px solid ${themeVars.color.light.border};
+                color: ${themeVars.color.primary.self};
+              }
+            }
+            .flex-item-body {
+              font-size: 12px;
+              a {
+                text-decoration: underline;
+                text-underline-offset: 3px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// 软件包详细信息页
+export const packagesDetail = css`
+  .page-content.packages {
+    .issue-title-header > div {
+      color: ${themeVars.color.text.light.num1};
+    }
+    .issue-content {
+      .issue-content-left {
+        .ui.top.attached.header {
+          font-size: 14px;
+          padding: 16px;
+        }
+        .ui.attached.segment {
+          color: ${themeVars.color.text.light.num1};
+          padding: 16px;
+          .ui.table,
+          .ui.form .field > label {
+            color: ${themeVars.color.text.light.num1};
+          }
+          .ui.form .field > label {
+            margin-bottom: 8px;
+          }
+          .markup {
+            color: ${themeVars.color.text.self};
+            pre {
+              font-size: 12px;
+              font-weight: 400;
+              padding: 12px 16px;
+            }
+          }
+          + .ui.top.attached.header {
+            margin-top: 24px;
+          }
+        }
+      }
+      .issue-content-right {
+        border: 0;
+        padding: 0px 16px;
+        > strong {
+          font-size: 16px;
+        }
+        > .divider {
+          margin: 16px 0px;
+        }
+        // 详情
+        > .ui.relaxed.list {
+          margin: 16px 0px;
+          .item {
+            color: ${themeVars.color.text.light.num1};
+            svg {
+              color: ${themeVars.color.text.self};
+            }
+            // 应该只选中版本中的 a 标签
+            &.tw-flex {
+              justify-content: space-between;
+              > a {
+                border: 1px solid ${themeVars.color.light.border};
+                border-radius: 25px;
+                font-size: 12px;
+                padding: 0px 6px;
+                min-height: 20px;
+                flex: none !important;
+                &:hover {
+                  text-decoration: none;
+                }
+              }
+              // 不知道什么东西
+              &::after {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

styles/components/release.ts

@@ -19,6 +19,27 @@ export const releaseTagMenu = css`
   }
 `;
 
+// 顶部右侧按钮组
+export const rightButton = css`
+  .page-content.repository {
+    &.releases,
+    &.tags {
+      .ui.small.button {
+        background-color: ${themeVars.color.button};
+        border-color: ${themeVars.color.light.border};
+        box-shadow: none;
+        color: ${themeVars.color.text.light.self};
+        padding: 5px 16px;
+        min-height: auto;
+        line-height: 20px;
+        &:hover {
+          background-color: ${themeVars.color.hover.self};
+        }
+      }
+    }
+  }
+`;
+
 // 标签页样式
 export const tags = css`
   .page-content.repository.tags {
@@ -41,76 +62,114 @@ export const tags = css`
 // 发布页样式
 export const releases = css`
   .page-content.repository.releases {
-    #release-list .release-entry {
+    > .ui.container > .divider {
-      // 左侧发布元信息
+      margin: 16px 0;
-      .meta {
+    }
-        gap: 0.5rem;
+    ul#release-list {
-        padding-top: 24px;
+      gap: 32px;
-        padding-right: 40px;
+      margin: 32px 0 16px 0;
-        text-align: left;
+      .release-entry {
-        min-width: 0;
+        // 左侧发布元信息
-        flex: 0.125;
+        .meta {
-        a.muted {
+          gap: 0.5rem;
-          color: ${themeVars.color.text.light.num1};
+          padding-top: 24px;
-          overflow: hidden;
+          padding-right: 40px;
-          text-overflow: ellipsis;
+          text-align: left;
-          white-space: nowrap;
+          min-width: 0;
-          word-break: break-all;
+          flex: 0.125;
-          svg {
+          a.muted {
-            margin-right: 8px !important;
+            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;
+            }
           }
-          svg.tw-mr-1.svg.octicon-tag {
+          // 分支选择按钮
-            margin-top: 1px;
+          .ui.button.branch-dropdown-button {
+            min-height: 20px;
+            line-height: 20px;
+            padding: 3px 12px;
+            font-size: 12px;
           }
         }
-        // 分支选择按钮
+        // 右侧发布详细信息
-        .ui.button.branch-dropdown-button {
+        .segment.detail {
-          min-height: 20px;
+          padding: 16px;
-          line-height: 20px;
+          .svg {
-          padding: 3px 12px;
+            color: ${themeVars.color.text.light.num1};
-          font-size: 12px;
-        }
-      }
-      // 右侧发布详细信息
-      .segment.detail {
-        .svg {
-          color: ${themeVars.color.text.light.num1};
-        }
-        p.text.grey {
-          margin: 16px 0;
-          .time {
-            color: ${themeVars.color.text.self};
           }
-        }
+          // 标题
-        .markup {
+          .release-list-title {
-          > *:first-child {
+            font-size: 32px;
-            margin-top: 16px !important;
+            gap: 16px;
           }
-          > *:last-child {
+          // 提交信息
-            margin-bottom: 16px !important;
+          p.text.grey {
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap;
+            margin: 24px 0 0 0;
+            span {
+              word-break: break-word;
+            }
+            .time {
+              color: ${themeVars.color.text.self};
+            }
+          }
+          // 发布内容
+          .markup {
+            > *:first-child {
+              margin-top: 24px !important;
+            }
+          }
+          // 分割线
+          .divider {
+            position: relative;
+            left: -16px;
+            width: calc(100% + 32px);
+            border-top-width: 1.5px;
+            margin: 24px 0 16px 0;
+          }
+          // 下载列表
+          .download {
+            summary {
+              font-size: 18px;
+              font-weight: 600;
+              margin-top: 16px;
+              &::marker {
+                font-size: 14px;
+              }
+            }
+            .attachment-list {
+              margin-top: 16px;
+              .item {
+                align-items: center;
+                line-height: 17px;
+                padding: 8px 16px;
+                .flex-text-inline {
+                  gap: 8px;
+                }
+                // 只选中左侧文件名称
+                strong.flex-text-inline:hover {
+                  text-decoration: underline !important;
+                }
+                .attachment-right-info {
+                  color: ${themeVars.color.text.light.num1};
+                  .svg {
+                    height: 28px;
+                  }
+                }
+              }
+            }
           }
         }
       }
     }
   }
 `;
-
-// 顶部右侧按钮组
-export const rightButton = css`
-  .page-content.repository {
-    &.releases,
-    &.tags {
-      .ui.small.button {
-        background-color: ${themeVars.color.button};
-        border-color: ${themeVars.color.light.border};
-        color: ${themeVars.color.text.light.self};
-        padding: 5px 16px;
-        min-height: auto;
-        line-height: 20px;
-        &:hover {
-          background-color: ${themeVars.color.hover.self};
-        }
-      }
-    }
-  }
-`;

styles/components/repo.ts

@@ -7,14 +7,7 @@ export const repoHeader = css`
     .ui.compact.button {
       padding: 3px 12px;
     }
-    // 仓库图标
+    // 仓库名称
-    img.ui.avatar {
-      height: 32px;
-      width: 32px;
-      margin-block-start: 0.5rem;
-      margin-block-end: 0.5rem;
-    }
-
     .flex-item {
       .flex-item-title {
         // 间隔线颜色

styles/components/setting.ts

@@ -25,7 +25,7 @@ export const button = css`
       color: ${themeVars.color.text.light.self};
       background-color: ${themeVars.color.button};
       border-color: ${themeVars.color.light.border};
-
+      box-shadow: none;
       &:hover {
         background-color: ${themeVars.color.hover.self};
       }
@@ -57,12 +57,19 @@ export const button = css`
     }
   }
   // 管理员设置界面下的自定义主色调按钮
-  .admin-setting-content .ui.primary.button {
+  .admin-setting-content {
-    ${tinyStyle}
+    .ui.primary.button {
-    padding: 5px 16px;
+      ${tinyStyle}
-    line-height: 22px;
+      padding: 5px 16px;
-    &:hover {
+      line-height: 22px;
-      ${tinyHoverStyle}
+      &:hover {
+        ${tinyHoverStyle}
+      }
+    }
+    .ui.red.button {
+      box-shadow: ${themeVars.github.shadow.resting.small};
+      padding: 5px 16px;
+      line-height: 22px;
     }
   }
 `;

styles/components/signin.ts

@@ -40,6 +40,15 @@ export const signIn = css`
       .button {
         height: 40px;
       }
+      .divider.divider-text {
+        margin: 20px 0px;
+      }
+      #oauth2-login-navigator-inner {
+        gap: 8px;
+        .ui.button svg {
+          width: 18px;
+        }
+      }
     }
     .ui.top.attached.header.segment {
       font-size: 14px;

styles/public/animation.ts

@@ -0,0 +1,27 @@
+import { overlayAppearDown, overlayAppearUp } from "src/core/theme";
+import { css } from "src/types/vars";
+
+export const keyframe = css`
+  // 向下出现动画
+  @keyframes ${overlayAppearDown} {
+    0% {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  // 向上出现动画
+  @keyframes ${overlayAppearUp} {
+    0% {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;

styles/public/button.ts

@@ -4,6 +4,7 @@ export const primaryStyle = {
   color: themeVars.github.button.primary.fgColor.rest,
   backgroundColor: themeVars.github.button.primary.bgColor.rest,
   borderColor: themeVars.github.button.primary.borderColor.rest,
+  boxShadow: themeVars.github.shadow.resting.small,
 };
 
 export const primaryHoverStyle = {
@@ -27,7 +28,7 @@ export const baseButton = css`
   }
   // 主色调按钮保持白色
   .ui.primary.buttons .button svg {
-    color: ${themeVars.color.text.self};
+    color: ${themeVars.color.white};
   }
   .ui.primary {
     &.button,
@@ -38,6 +39,14 @@ export const baseButton = css`
         ${primaryHoverStyle}
       }
     }
+    // 按钮组整体有阴影
+    &.buttons {
+      box-shadow: ${themeVars.github.shadow.resting.small};
+      .button {
+        // 按钮组里的按钮无阴影
+        box-shadow: none;
+      }
+    }
   }
   // 主色调基本按钮和普通按钮一样
   // 作者的关注按钮
@@ -45,6 +54,7 @@ export const baseButton = css`
     background-color: ${themeVars.color.button};
     color: ${themeVars.color.text.self};
     border-color: ${themeVars.color.light.border};
+    box-shadow: none;
     &:hover {
       background-color: ${themeVars.color.hover.self};
       color: ${themeVars.color.text.self};
@@ -85,17 +95,32 @@ export const redButton = css`
       color: ${themeVars.github.button.danger.fgColor.hover};
       background-color: ${themeVars.github.button.danger.bgColor.hover};
       border-color: ${themeVars.github.button.danger.borderColor.hover};
+      box-shadow: ${themeVars.github.shadow.resting.small};
     }
   }
 `;
 
 // 修复按钮高度
 export const fixButtonHeight = css`
+  // 修复一些主色调或者其他小按钮的高度避免过高
   .ui.small.buttons .button,
   .ui.ui.ui.ui.small.button {
     min-height: 26px;
+    height: 32px;
   }
-  .ui.tiny.buttons .button,
+  // 修复仓库页仓库操作按钮高度对齐和修正
+  .repo-button-row .ui.button {
+    min-height: 32px;
+  }
+  // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
+  .repo-header {
+    .ui.ui.ui.ui.small.compact.button,
+    .ui.labeled.button > .label {
+      height: 28px;
+      min-height: 28px;
+    }
+  }
+  .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
   .ui.ui.ui.ui.tiny.button {
     min-height: 20px;
   }
@@ -106,4 +131,9 @@ export const fixButton = css`
   .ui.ui.ui.ui.small.button {
     z-index: 0;
   }
+  // 代码复制按钮
+  .ui.button.code-copy {
+    padding: 4px 6px;
+    min-height: 28px;
+  }
 `;

styles/public/dropdown.ts

@@ -1,5 +1,6 @@
 import { animationDown, animationUp } from "src/core/theme";
-import { css, otherThemeVars, themeVars } from "src/types/vars";
+import { fallbackVar } from "src/functions";
+import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
 import { activeItemAfterStyle } from "styles/public/menu";
 
 export const dropdown = css`
@@ -16,19 +17,27 @@ export const dropdown = css`
       > .item:not(.tw-hidden) {
         display: flex !important;
         align-items: center;
-        gap: 0.5rem;
+        align-content: center;
-        padding: 8px 10px !important;
+        padding: 6px 8px !important;
+        min-height: 32px;
         border-radius: ${otherThemeVars.border.radius} !important;
+        gap: 4px;
         &:not(.emoji) {
-          margin: 0 0.5rem;
+          margin: 0 8px;
         }
         &:not(.emoji):first-of-type {
-          margin-top: 0.5rem;
+          margin-top: 8px;
+          // 工单详细页面的标签菜单中的清除选中标签按钮
+          &.clear-selection {
+            margin-top: 0px;
+          }
         }
         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
         &.cherry-pick-button,
+        // 下一个 item 是最后一个并且被隐藏时, 目前仅在顶部导航栏工单和 PR 仪表板的菜单中出现
+        &:has(+ .tw-hidden:last-of-type),
         &:not(.emoji):last-of-type {
-          margin-bottom: 0.5rem;
+          margin-bottom: 8px;
         }
         &:hover {
           background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
@@ -46,9 +55,35 @@ export const dropdown = css`
             ${activeItemAfterStyle};
           }
         }
+        svg {
+          margin-top: 2px;
+          margin-right: 4px;
+        }
+        // 复选框对齐
+        .ui.checkbox input[type="checkbox"] {
+          height: 100%;
+        }
+        // 修复 Wiki 页面下搜索框中搜索时, 显示隐藏的项目
+        &.filtered {
+          display: none !important;
+        }
+      }
+      // 当筛选后, 让菜单提供边距, 因为无法确定保留的是菜单中哪个 item
+      // 不是所有菜单都提供边距方式, 原因为比如会导致分支菜单中的查看所有分支上间隔缺失, 这种方式单独为 Wiki 菜单做处理
+      // 有筛选(.filtered)且有筛选结果(.selected)时提供菜单边距, 没结果时提供会导致多余的菜单边框线
+      &:has(> .item.filtered):has(> .item.selected) {
+        padding: 8px 0px;
+        > .item {
+          &:first-of-type {
+            margin-top: 0;
+          }
+          &:last-of-type {
+            margin-bottom: 0;
+          }
+        }
       }
       > .divider {
-        margin: 0.5rem 0;
+        margin: 8px 0;
       }
       &:after {
         display: none !important;
@@ -58,16 +93,32 @@ export const dropdown = css`
   // 向下弹出的下拉菜单向下偏移
   .ui.dropdown:not(.upward),
   .ui.menu .ui.dropdown:not(.upward) {
-    .menu {
+    > .menu {
-      margin-top: 0.35em !important;
+      margin-top: 4px !important;
     }
   }
   // 向上弹出的下拉菜单向上偏移
   .ui.dropdown.upward,
   .ui.menu .ui.dropdown.upward {
-    .menu {
+    > .menu {
       animation: ${animationUp};
-      margin-bottom: 0.35em !important;
+      margin-bottom: 4px !important;
+    }
+  }
+  // 修复 wiki 的页面下拉菜单圆角
+  .ui.floating.dropdown > .menu {
+    border-radius: 12px !important;
+  }
+  // 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单
+  .ui.dropdown .menu {
+    .scrolling.menu {
+      border-radius: 0 0 12px 12px !important;
+    }
+    // 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角
+    &.context-user-switch {
+      .scrolling.menu:last-child {
+        border-radius: 0 0 12px 12px !important;
+      }
     }
   }
   // 修复下拉菜单元素溢出问题
@@ -75,7 +126,7 @@ export const dropdown = css`
   .user-menu>.item,
   // Issue/PR 菜单
   .ui.menu .ui.dropdown.item .menu .item {
-    width: auto;
+    width: calc(100% - 16px); // 减去上方 item 的 margin 左右边距
   }
   // 去掉下拉菜单的边框线
   // 设置里的下拉菜单
@@ -175,6 +226,19 @@ export const selectionDropdown = css`
     border-top-left-radius: ${otherThemeVars.border.radius} !important;
     border-top-right-radius: ${otherThemeVars.border.radius} !important;
   }
+  // 工单标签菜单中的标签换行和颜色
+  // 标签页面的标签选择框
+  .page-content.repository.labels .ui.selection.dropdown.active,
+  // 创建仓库页面的标签选择框
+  .ui.search.selection.dropdown {
+    > .menu > .item {
+      flex-direction: column;
+      align-items: flex-start;
+      > i {
+        color: ${themeVars.color.text.light.num1};
+      }
+    }
+  }
 `;
 
 export const fixSelectionDropdown = css`
@@ -187,8 +251,38 @@ export const fixSelectionDropdown = css`
 
 // 分支菜单
 export const branchDropdown = css`
-  .ui.dropdown.branch-selector-dropdown .menu > .item {
+  .ui.dropdown.branch-selector-dropdown > .menu {
-    animation: ${animationDown};
+    width: ${fallbackVar(customThemeVars.branchMenuWidth, "320px")};
+    max-width: 640px;
+    > .menu > .item {
+      animation: ${animationDown};
+      height: 32px;
+    }
+    // 分支/标签切换
+    > .branch-tag-tab {
+      > .branch-tag-item {
+        font-weight: 500;
+        padding: 8px 12px;
+        height: 32px;
+        line-height: 1.15;
+        svg {
+          display: none;
+        }
+        &.active {
+          background: ${themeVars.color.body};
+        }
+        &:hover {
+          color: inherit;
+          &:not(.active) {
+            background: ${themeVars.color.hover.self};
+            border: 1px solid ${themeVars.color.secondary.self};
+            border-bottom: 0;
+            border-top-left-radius: ${otherThemeVars.border.radius};
+            border-top-right-radius: ${otherThemeVars.border.radius};
+          }
+        }
+      }
+    }
   }
 `;
 

styles/public/index.ts

@@ -2,6 +2,7 @@
 // tslint:disable:ordered-imports
 // 组件导入有顺序, 禁止插件优化
 import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
+import "./animation"; // 动画效果
 import "./transition"; // 过渡效果
 import "./text"; // 文本或 SVG 的基本颜色
 import "./button"; // 按钮
@@ -11,5 +12,5 @@ import "./label"; // 标签
 import "./menu"; // 菜单
 import "./modal"; // 弹窗
 import "./tippy"; // 提示框
-import "./navbar"; // 导航栏
 import "./attached"; // 附加样式
+import "./other"; // 其他样式

styles/public/input.ts

@@ -35,7 +35,12 @@ export const input = css`
     height: 32px;
   }
   // 由于输入框高度, 需要输入框在表单中垂直居中
-  .ui.form {
+  // 管理员页面仓库搜索表单
+  .ui.form#repo-search-form {
     align-items: center;
   }
+  // 下拉菜单的输入框
+  .ui.dropdown.dropdown .menu>.input {
+    margin: 12px 10px;
+  }
 `;

styles/public/label.ts

@@ -67,6 +67,12 @@ export const label = css`
       }
     }
   }
+  .ui.small.label {
+    font-size: 12px;
+  }
+  .ui.mini.label {
+    font-size: 10px;
+  }
 `;
 
 // 提交中的 SHA 标签
@@ -78,6 +84,8 @@ export const shaLabel = css`
     color: ${themeVars.color.text.light.num1};
     font-size: 12px;
     font-weight: 500;
+    // 仪表盘页的提交 SHA 标签居中对齐
+    margin-top: 2px;
     &:hover {
       background-color: ${themeVars.color.label.hoverBg};
     }
@@ -180,19 +188,3 @@ export const repoLabel = css`
     font-size: 14px;
   }
 `;
-
-// 软件包列表
-export const packagesLabel = css`
-  .page-content {
-    &.packages {
-      > .ui.container > div > .flex-list {
-        // 软件包类型的标签
-        .ui.label {
-          background-color: unset;
-          border: 1px solid ${themeVars.color.light.border};
-          color: ${themeVars.color.primary.self};
-        }
-      }
-    }
-  }
-`;

styles/public/menu.ts

@@ -149,11 +149,14 @@ export const secondaryMenu = css`
       height: 32px;
       font-weight: 500;
     }
+    a.item:hover {
+      background: ${themeVars.github.control.transparent.bgColor.hover};
+    }
   }
   // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
   .ui.secondary.pointing.menu {
     .overflow-menu-items {
-      gap: 0.5rem;
+      gap: 4px;
       .item {
         padding: 5px 8px !important;
         margin-block-start: 0.5rem;
@@ -192,6 +195,10 @@ export const secondaryMenu = css`
       }
     }
   }
+  // 修复仓库页面下的二级导航栏的下划线因浏览器 BUG 导致显示的异常问题(导致下划线和分割线重叠变粗)
+  .page-content.repository .ui.secondary.pointing.menu {
+    border-bottom: none !important;
+  }
 `;
 
 // 分页菜单
@@ -201,6 +208,7 @@ export const paginationMenu = css`
     background-color: unset;
     border: 0;
     gap: 4px;
+    min-height: fit-content;
     .item {
       border-radius: ${otherThemeVars.border.radius};
       min-width: 32px;
@@ -236,3 +244,55 @@ export const paginationMenu = css`
     }
   }
 `;
+
+// 单行双选项菜单
+export const smallCompactMenu = css`
+  // 订阅/关注切换菜单(应只选中订阅/关注页面, 不能选中通知页面)
+  .page-content.user.notification > .ui.container:has(.flex-list),
+  // 里程碑/标签切换菜单(里程碑页)
+  .page-content.repository.milestones .list-header,
+  // 里程碑/标签切换菜单(新建里程碑页)
+  .page-content.repository.new.milestone .issue-navbar,
+  // 里程碑/标签切换菜单(标签页)
+  .page-content.repository.labels .issue-navbar {
+    .ui.compact.small.menu.small-menu-items {
+      background: ${themeVars.color.hover.self} !important;
+      border: 0;
+      font-size: 14px;
+      gap: 8px;
+      height: 32px;
+      min-height: 32px !important;
+      > .item {
+        background: unset !important;
+        border: 1px solid ${themeVars.color.hover.self};
+        border-radius: ${otherThemeVars.border.radius};
+        padding: 6px 12px !important;
+        &.active {
+          background: ${themeVars.color.menu} !important;
+          border-color: ${themeVars.color.light.border};
+          font-weight: 600;
+        }
+        &::before {
+          display: none;
+        }
+        &:not(.active) {
+          top: 4px;
+          padding: 4px 12px !important;
+          height: calc(100% - 8px);
+          position: relative;
+          // 该方案只适用于 2 个 item 的情况
+          // left / right 数值为 gap 数值的一半
+          &:first-child {
+            left: 4px;
+          }
+          &:last-child {
+            right: 4px;
+          }
+          &:hover {
+            background: ${themeVars.github.control.transparent.bgColor.hover} !important;
+          }
+        }
+      }
+    }
+  }
+`;

styles/public/other.ts

@@ -0,0 +1,24 @@
+import { css, themeVars } from "src/types/vars";
+
+// 一些列表头, 比如工单的搜索标签里程碑栏
+export const listHeader = css`
+  .list-header {
+    align-items: center;
+    align-content: center;
+  }
+`;
+
+export const svg = css`
+  // 已标星的图标
+  .octicon-star-fill {
+    color: ${themeVars.github.button.star.iconColor} !important;
+  }
+  // VSCode 图标
+  .gitea-vscode {
+    color: #007acc !important;
+  }
+  // VSCodium 图标
+  .gitea-vscodium {
+    color: #429cf0 !important;
+  }
+`;

styles/public/tippy.ts

@@ -5,16 +5,20 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
 export const tippyBox = css`
   .tippy-box {
     margin-top: -3px;
-    border-radius: 12px;
+    border-radius: ${otherThemeVars.border.radius};
     overflow: hidden;
     animation: ${animationDown};
-    // 边框线同步 github 样式
+    // 克隆菜单和PR提示框为 default
     &[data-theme="default"],
+    // 带标题的提示框 (Runner信息)
     &[data-theme="box-with-header"] {
       border: unset;
       box-shadow: ${themeVars.github.shadow.floating.small};
     }
-    // 带标题的提示框 (Runner信息)
+    &[data-theme="default"],
+    &[data-theme="menu"] {
+      border-radius: 12px;
+    }
     &[data-theme="box-with-header"] {
       .tippy-content {
         background-color: ${themeVars.color.menu};
@@ -26,14 +30,24 @@ export const tippyBox = css`
     // 差异对比中文件路径行右侧的三个点菜单
     &[data-theme="menu"] {
       .tippy-content {
-        padding: 0.5rem;
+        padding: 8px;
         .item {
           border-radius: ${otherThemeVars.border.radius};
+          padding: 6px 8px;
+          height: 32px;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
           }
         }
       }
     }
+    // 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
+    &[data-theme="tooltip"] {
+      .tippy-content {
+        font-size: 12px;
+        font-weight: 400;
+        padding: 4px 8px;
+      }
+    }
   }
 `;

themes/colorblind-dark.css.ts

@@ -1,4 +1,8 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme, themeVars, type Chroma } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
 import { darkGithubColors } from "themes/dark";
@@ -28,8 +32,12 @@ export const colorblindDarkGithubColors: GithubColor = {
     success: { emphasis: "#1f6feb" },
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } },
+    primary: {
+      fgColor: { accent: "#58a6ff", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#2a7aef" },
+    },
     danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } },
+    star: darkGithubColors.button.star,
   },
   control: darkGithubColors.control,
   shadow: darkGithubColors.shadow,
@@ -68,7 +76,7 @@ export const colorblindDarkPrettylights: prettylightsColor = {
   },
 };
 
-export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors);
+export const colorblindDarkColors = github2ThemeColor(colorblindDarkGithubColors);
 export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights);
 
 export default defineTheme(colorblindDarkColors, colorblindDarkChroma);

themes/colorblind-light.css.ts

@@ -1,4 +1,8 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme, themeVars, type Chroma } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
 import { lightGithubColors } from "themes/light";
@@ -28,8 +32,12 @@ export const colorblindLightGithubColors: GithubColor = {
     success: { emphasis: "#0969da" },
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } },
+    primary: {
+      fgColor: { accent: "#0969da", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#0864d1" },
+    },
     danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } },
+    star: lightGithubColors.button.star,
   },
   control: lightGithubColors.control,
   shadow: lightGithubColors.shadow,
@@ -68,7 +76,7 @@ export const colorblindLightPrettylights: prettylightsColor = {
   },
 };
 
-export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors);
+export const colorblindLightColors = github2ThemeColor(colorblindLightGithubColors);
 export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights);
 
 export default defineTheme(colorblindLightColors, colorblindLightChroma);

themes/dark.css.ts

@@ -1,9 +1,14 @@
-import { defineTheme, type ThemeColor } from "src";
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme, themeVars } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 
 export const darkGithubColors: GithubColor = {
   isDarkTheme: true,
   display: {
+    blue: { fgColor: "#4493f8" },
     brown: { fgColor: "#b69a6d" },
     cyan: { fgColor: "#07ace4" },
     indigo: { fgColor: "#9899ec" },
@@ -32,6 +37,7 @@ export const darkGithubColors: GithubColor = {
     success: "#3fb950",
     black: "#010409",
     white: "#ffffff",
+    onEmphasis: "#ffffff",
   },
   bgColor: {
     accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
@@ -39,6 +45,7 @@ export const darkGithubColors: GithubColor = {
     danger: { muted: "#f851491a" },
     default: "#0d1117",
     done: { emphasis: "#8957e5" },
+    emphasis: "#3d444d",
     muted: "#151b23",
     neutral: { muted: "#656c7633" },
     success: { emphasis: "#238636", muted: "#2ea04326" },
@@ -54,15 +61,19 @@ export const darkGithubColors: GithubColor = {
     translucent: "#ffffff26",
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } },
+    primary: {
+      fgColor: { accent: "#3fb950", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#29903b" },
+    },
     danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
+    star: { iconColor: "#e3b341" },
   },
   control: {
     bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
     transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
   },
-  shadow: { floating: { small: "#01040966" } },
+  shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
-  overlay: { backdrop: { bgColor: "#21283066" } },
+  overlay: { backdrop: { bgColor: "#21283066" }, bgColor: "#010409" },
   underlineNav: { borderColor: { active: "#f78166" } },
   contribution: {
     default: {
@@ -72,6 +83,6 @@ export const darkGithubColors: GithubColor = {
   },
 };
 
-export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors);
+export const darkColors = github2ThemeColor(darkGithubColors);
 
 export default defineTheme(darkColors);

themes/light.css.ts

@@ -1,9 +1,14 @@
-import { defineTheme, type ThemeColor } from "src";
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme, themeVars } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 
 export const lightGithubColors: GithubColor = {
   isDarkTheme: false,
   display: {
+    blue: { fgColor: "#0969da" },
     brown: { fgColor: "#755f43" },
     cyan: { fgColor: "#006a80" },
     indigo: { fgColor: "#494edf" },
@@ -32,6 +37,7 @@ export const lightGithubColors: GithubColor = {
     success: "#1a7f37",
     black: "#1f2328",
     white: "#ffffff",
+    onEmphasis: "#ffffff",
   },
   bgColor: {
     accent: { emphasis: "#0969da", muted: "#ddf4ff" },
@@ -39,6 +45,7 @@ export const lightGithubColors: GithubColor = {
     danger: { muted: "#ffebe9" },
     default: "#ffffff",
     done: { emphasis: "#8250df" },
+    emphasis: "#25292e",
     muted: "#f6f8fa",
     neutral: { muted: "#818b981f" },
     success: { emphasis: "#1f883d", muted: "#dafbe1" },
@@ -54,15 +61,19 @@ export const lightGithubColors: GithubColor = {
     translucent: "#1f232826",
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } },
+    primary: {
+      fgColor: { accent: "#1a7f37", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#1c8139" },
+    },
     danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
+    star: { iconColor: "#eac54f" },
   },
   control: {
     bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
     transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
   },
-  shadow: { floating: { small: "#25292e0a" } },
+  shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
-  overlay: { backdrop: { bgColor: "#c8d1da66" } },
+  overlay: { backdrop: { bgColor: "#c8d1da66" }, bgColor: "#ffffff" },
   underlineNav: { borderColor: { active: "#fd8c73" } },
   contribution: {
     default: {
@@ -72,6 +83,6 @@ export const lightGithubColors: GithubColor = {
   },
 };
 
-export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors);
+export const lightColors = github2ThemeColor(lightGithubColors);
 
 export default defineTheme(lightColors);

themes/pink-dark.css.ts

@@ -0,0 +1,26 @@
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme } from "src";
+import { display2GithubColor, type DisplayColor } from "src/core/display";
+import { github2ThemeColor } from "src/core/github";
+import { darkGithubColors } from "themes/dark";
+
+export const pinkDarkDisplayColors: DisplayColor = {
+  num0: "#2d1524",
+  num1: "#451c35",
+  num2: "#65244a",
+  num3: "#842a5d",
+  num4: "#ac2f74",
+  num5: "#d34591",
+  num6: "#e57bb2",
+  num7: "#ec8dbd",
+  num8: "#f4a9cd",
+  num9: "#f9bed9",
+};
+
+export const pinkDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, darkGithubColors);
+export const pinkDarkColors = github2ThemeColor(pinkDarkGithubColors);
+
+export default defineTheme(pinkDarkColors);

themes/pink-light.css.ts

@@ -0,0 +1,26 @@
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme } from "src";
+import { display2GithubColor, type DisplayColor } from "src/core/display";
+import { github2ThemeColor } from "src/core/github";
+import { lightGithubColors } from "themes/light";
+
+export const pinkLightDisplayColors: DisplayColor = {
+  num0: "#ffe5f1",
+  num1: "#fdc9e2",
+  num2: "#f8a5cf",
+  num3: "#f184bc",
+  num4: "#e55da5",
+  num5: "#ce2c85",
+  num6: "#b12f79",
+  num7: "#8e2e66",
+  num8: "#6e2b53",
+  num9: "#4d233d",
+};
+
+export const pinkLightGithubColors = display2GithubColor(pinkLightDisplayColors, lightGithubColors);
+export const pinkLightColors = github2ThemeColor(pinkLightGithubColors);
+
+export default defineTheme(pinkLightColors);

themes/pink-soft-dark.css.ts

@@ -0,0 +1,14 @@
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme } from "src";
+import { display2GithubColor } from "src/core/display";
+import { github2ThemeColor } from "src/core/github";
+import { softDarkGithubColors } from "themes/soft-dark";
+import { pinkDarkDisplayColors } from "./pink-dark.css";
+
+export const pinkSoftDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, softDarkGithubColors, true);
+export const pinkSoftDarkColors = github2ThemeColor(pinkSoftDarkGithubColors);
+
+export default defineTheme(pinkSoftDarkColors);

themes/soft-dark.css.ts

@@ -1,4 +1,8 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme, themeVars, type Chroma } from "src";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
 import { darkGithubColors } from "themes/dark";
@@ -27,6 +31,7 @@ export const softDarkGithubColors: GithubColor = {
     success: "#57ab5a",
     black: "#010409",
     white: "#cdd9e5",
+    onEmphasis: "#ffffff",
   },
   bgColor: {
     accent: { emphasis: "#316dca", muted: "#4184e41a" },
@@ -34,6 +39,7 @@ export const softDarkGithubColors: GithubColor = {
     danger: { muted: "#e5534b1a" },
     default: "#212830",
     done: { emphasis: "#8256d0" },
+    emphasis: "#3d444d",
     muted: "#262c36",
     neutral: { muted: "#656c7633" },
     success: { emphasis: "#347d39", muted: "#46954a26" },
@@ -49,15 +55,19 @@ export const softDarkGithubColors: GithubColor = {
     translucent: "#cdd9e526",
   },
   button: {
-    primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
+    primary: {
+      fgColor: { accent: "#57ab5a", rest: "#ffffff" },
+      bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#3b8640" },
+    },
     danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
+    star: { iconColor: "#daaa3f" },
   },
   control: {
     bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
     transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
   },
-  shadow: { floating: { small: "#01040966" } },
+  shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
-  overlay: { backdrop: { bgColor: "#262c3666" } },
+  overlay: { backdrop: { bgColor: "#262c3666" }, bgColor: "#2a313c" },
   underlineNav: { borderColor: { active: "#ec775c" } },
   contribution: {
     default: {
@@ -97,7 +107,7 @@ export const softDarkPrettylights: prettylightsColor = {
   },
 };
 
-export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors);
+export const softDarkColors = github2ThemeColor(softDarkGithubColors);
 export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights);
 
 export default defineTheme(softDarkColors, softDarkChroma);

themes/tritanopia-dark.css.ts

@@ -1,4 +1,8 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme, type Chroma } from "src";
 import { darkPrettylights } from "src/core/chroma";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
@@ -39,7 +43,7 @@ export const tritanopiaDarkPrettylights: prettylightsColor = {
   },
 };
 
-export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors);
+export const tritanopiaDarkColors = github2ThemeColor(tritanopiaDarkGithubColors);
 export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights);
 
 export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma);

themes/tritanopia-light.css.ts

@@ -1,4 +1,8 @@
-import { defineTheme, type Chroma, type ThemeColor } from "src";
+/**
+ * @author lutinglt
+ */
+
+import { defineTheme, type Chroma } from "src";
 import { lightPrettylights } from "src/core/chroma";
 import { github2ThemeColor, type GithubColor } from "src/core/github";
 import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
@@ -39,7 +43,7 @@ export const tritanopiaLightPrettylights: prettylightsColor = {
   },
 };
 
-export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors);
+export const tritanopiaLightColors = github2ThemeColor(tritanopiaLightGithubColors);
 export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights);
 
 export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma);