Compare commits

...

59 Commits

Author SHA1 Message Date
lutinglt
c766a16b08 1.24.7 2025-10-25 13:03:41 +08:00
lutinglt
77faa2ce63 update readme 2025-10-25 10:55:07 +08:00
lutinglt
4267c98dbe update readme 2025-10-25 10:48:44 +08:00
lutinglt
558f75de42 VSCode 和 VSCodium 图标添加颜色 2025-10-13 11:58:48 +08:00
lutinglt
6fe0241007 修复手机下仪表板二级导航栏用户菜单按钮没有居中的问题 2025-10-12 12:21:30 +08:00
lutinglt
b790f73fdf update README 2025-10-12 00:02:28 +08:00
lutinglt
db6ec59a83 update CHANGELOG 2025-10-11 23:39:02 +08:00
lutinglt
23658a4917 统一无搜索结果时的样式 #20 2025-10-11 23:35:34 +08:00
lutinglt
0e3628863e 修复仓库探索无搜索结果时的样式 #20 2025-10-11 22:45:51 +08:00
lutinglt
d178870ea8 update readme 2025-10-11 18:05:13 +08:00
lutinglt
38874d8b43 同步工作流运行页面的运行时间字体样式和重新运行按钮样式 2025-10-11 17:45:08 +08:00
lutinglt
1a5db58b4f 修复差异对比文件路径标题栏的菜单样式问题 2025-10-09 21:29:39 +08:00
lutinglt
05a4dc4f8a 优化下拉菜单的样式&同步亮色和柔和暗色主题下的菜单颜色 2025-09-28 21:37:15 +08:00
lutinglt
c5724f41c5 report 2025-09-27 08:03:55 +08:00
lutinglt
585c57dec2 report github screenshot 2025-09-27 08:02:19 +08:00
lutinglt
6aff05494e 修复导航栏工单/PR等仪表板下筛选等菜单的子项的间距问题 2025-09-25 10:06:38 +08:00
lutinglt
1eaba74c7e update style bug report 2025-09-24 22:34:29 +08:00
lutinglt
fe009734d3 修复并同步工单或 PR 详细页面下的标签菜单样式 #19 2025-09-24 22:23:31 +08:00
lutinglt
89ec60e412 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角问题 2025-09-21 12:01:30 +08:00
lutinglt
1462ac8724 优化导航栏标识样式 2025-09-21 10:29:21 +08:00
lutinglt
bd568bb621 优化顶部和二级导航栏的样式和颜色 2025-09-21 10:08:19 +08:00
lutinglt
c5e4b50b9b 优化顶部导航栏样式和颜色 2025-09-21 09:02:11 +08:00
lutinglt
e1a65d12df 调整顶部导航栏高度 2025-09-19 10:03:17 +08:00
lutinglt
7665219c4c bug report 2025-09-17 21:08:24 +08:00
lutinglt
4fd2006e6a style bug issue 2025-09-17 16:26:50 +08:00
lutinglt
f7542a9e7f style bug issue 2025-09-17 16:25:14 +08:00
lutinglt
ec8d12a1fd close blank issue 2025-09-17 16:22:57 +08:00
lutinglt
d573d00019 bug issue template 2025-09-17 16:20:51 +08:00
lutinglt
ac8f5fdd24 Issue Template 2025-09-17 16:11:24 +08:00
lutinglt
99c4de26fd style bug issue 2025-09-17 15:44:45 +08:00
鲁汀
059edda22e Update issue templates 2025-09-17 15:13:58 +08:00
lutinglt
719d12c4cb CHANGELOG.md 2025-09-16 20:41:29 +08:00
lutinglt
df9722604e 页脚样式调整 2025-09-16 17:11:00 +08:00
lutinglt
359e83afa5 修复仓库页面下二级导航栏下划线过粗 2025-09-16 17:02:29 +08:00
lutinglt
163794fbe2 同步页脚样式 2025-09-16 16:48:49 +08:00
lutinglt
11e86dc549 注释 2025-09-15 19:58:17 +08:00
lutinglt
1134c53a63 修复 Wiki 页面搜索项目没有正确隐藏的问题 2025-09-15 19:13:56 +08:00
lutinglt
5d7a1c53d5 update README 2025-09-14 19:24:57 +08:00
lutinglt
4632170948 update README 2025-09-14 19:22:55 +08:00
lutinglt
cd99934334 优化创建标签菜单的菜单项的样式 2025-09-14 19:12:34 +08:00
lutinglt
4bdbb764ee fix 2025-09-12 10:26:29 +08:00
lutinglt
ff586c7385 修复合并提交中的主色调按钮组阴影问题 2025-09-12 09:28:23 +08:00
lutinglt
e4cf7abcdc display 主题按钮 hover 颜色亮度错误 2025-09-11 19:08:11 +08:00
lutinglt
5ef97d7fd5 修复一些下拉菜单样式 2025-09-11 18:09:00 +08:00
lutinglt
243cf80a34 template 2025-09-11 14:51:02 +08:00
lutinglt
280ebe1ad2 new version 2025-09-11 14:44:21 +08:00
lutinglt
f41327e42b version 2025-09-11 14:44:07 +08:00
lutinglt
987144a594 version 2025-09-11 14:40:08 +08:00
lutinglt
2caf68e290 1.24.6 2025-09-11 14:36:26 +08:00
lutinglt
e2ccc8c9f7 release 2025-09-11 13:35:21 +08:00
lutinglt
7287aad198 author 2025-09-11 13:31:34 +08:00
lutinglt
b3ce1a8439 简化 release 2025-09-11 12:01:35 +08:00
lutinglt
5d96a6896d 修复display主题下差异对比展开折叠代码按钮颜色 2025-09-11 11:48:35 +08:00
lutinglt
ced954c1d0 精调 display 主题颜色 2025-09-11 11:16:06 +08:00
lutinglt
bfb27ab4a2 perf release ci 2025-09-11 00:07:26 +08:00
lutinglt
3a5306b1a6 就这样吧 2025-09-11 00:05:45 +08:00
lutinglt
6608abc39b 测试 release 中的排序 2025-09-10 23:59:45 +08:00
lutinglt
7eeafae4da fix ci 2025-09-10 23:49:44 +08:00
lutinglt
89ac2720c7 支持猛男粉颜色主题 2025-09-10 23:43:38 +08:00
51 changed files with 913 additions and 181 deletions

View File

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

15
.github/FUNDING.yml vendored
View File

@@ -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"]

View File

@@ -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

View File

@@ -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

View File

@@ -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

12
.github/ISSUE_TEMPLATE/4-doc-report.yml vendored Normal file
View File

@@ -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

1
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View File

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

77
.github/release.md vendored
View File

@@ -1,77 +0,0 @@
### 🎉 已完成大部分页面的 GitHub 风格 ( GitHub Style Completed for Most Pages )
如果您仍在使用旧版本,强烈建议更新至本版本。此版本已为大部分常用页面实现了 GitHub 风格设计,提供了更强的一致性,并修复了若干已知问题。
由于布局限制,项目和百科页面的 GitHub 风格适配方案尚未确定。
If you are still using an older version, we highly recommend updating to this release. This version has implemented the
GitHub-style design for most commonly used pages, ensuring stronger consistency, and addresses several known issues.
Due to layout constraints, the approach for adapting the GitHub style to Project and Wiki pages has not yet been
determined.
### ✨ Feature
- 修改外观设置中显示的主题名称
#### CSS 变量
- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
- 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度
### 🌈 Style
- 优化小型按钮的高度
- 一些列表栏的元素位置居中
- 优化仪表板热力图和动态样式
##### 更符合 GitHub 风格
- 同步查看代码文件内容时的样式
- 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验)
- 略微减小导航栏创建仓库菜单按钮内的图标间隔
- 微调一些标签的字体大小
- 优化发布页面布局和下载列表样式
- 同步里程碑页面样式
- 同步顶部工单等仪表板样式
- 同步置顶 Issue 样式
- 同步订阅/关注页面样式
- 同步用户菜单样式
- 优化下拉菜单样式
- 同步差异对比页面文件名标题栏样式
- 同步分支菜单宽度
- 同步通知页面样式
- 优化仪表板的仓库组织切换按钮样式
- 同步仓库已标星的星星颜色
- 优化仪表板动态信息间隔
- 微调仓库相关界面元素间隔
- 同步软件包页面样式
- 同步提示框样式
- 同步主色调按钮和红色按钮的阴影样式
### 🐞 Fix
- 修复红绿色盲主题的代码高亮色
- 修复仓库中文 README 时的按钮下划线长度
- 修复登录二次验证页面内容位置
- 修复后台管理的运维管理面板的样式
- 取消修改编辑器字体大小, 避免光标错位
- 修复文件预览时文件树右边框过粗
- 修复提交列表尾行圆角
- 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题
- 修复创建工单页面样式
- 修复归档仓库 Issue 时间线过长插入归档信息框
- 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色
## 📃 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

View File

@@ -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
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
gh release create "$TAG" dist/* --notes-file CHANGELOG.md --draft -t $TAG
env:
GH_TOKEN: ${{ github.token }}

51
CHANGELOG.md Normal file
View File

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

View File

@@ -1,9 +1,25 @@
<p align="center">
中文 |
<a href="./README_EN.md">English</a>
</p>
<h1 align="center">
<p>Gitea GitHub Theme</p>
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
<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">
中文 • [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)
## 版本号说明
@@ -19,6 +35,12 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
### 主题版本发布规则
- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本
- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
## 安装
1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下
@@ -50,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"/>
@@ -75,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 变量
可以根据自己的偏好自定义主题的一部分样式
@@ -126,7 +164,3 @@ npm run build
编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在
`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
## 贡献
请查看 [CONTRIBUTING](CONTRIBUTING.md)

View File

@@ -1,9 +1,25 @@
<p align="center">
<a href="./README.md">中文</a> |
English
</p>
<h1 align="center">
<p>Gitea GitHub Theme</p>
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
<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">
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]
>
> 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
@@ -21,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
@@ -31,7 +56,7 @@ accepted.
> [!IMPORTANT]
>
> Automatic color theme requires both light and dark theme files
> 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`
@@ -53,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"/>
@@ -78,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
@@ -130,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)

View File

@@ -1,6 +1,6 @@
{
"name": "gitea-github-theme",
"version": "1.24.6",
"version": "1.24.7",
"type": "module",
"scripts": {
"dev": "vite build --mode dev",
@@ -31,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,

BIN
screenshots/dashboard.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 191 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 KiB

85
src/core/display.ts Normal file
View File

@@ -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,
},
},
},
};
}

View File

@@ -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 };
@@ -60,7 +61,7 @@ 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 };
};
@@ -69,7 +70,7 @@ export type GithubColor = {
transparent: { bgColor: { active: string; hover: string; selected: string } };
};
shadow: { floating: { small: string }; resting: { small: string } };
overlay: { backdrop: { bgColor: string } };
overlay: { backdrop: { bgColor: string }; bgColor: string };
underlineNav: { borderColor: { active: string } };
contribution: {
default: {
@@ -90,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,
},
};
@@ -168,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,
@@ -199,11 +200,11 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
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,
@@ -259,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: {
@@ -348,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,

View File

@@ -25,7 +25,6 @@ export const github = {
accent: {
/** 强调色
* @diff 折叠/展开按钮的悬停颜色
* @actions `actionViewLeft` 左侧子作业激活伪元素颜色
* @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
* @navbar `navbarRight` 头像管理员标识背景颜色
* @dropdown `dropdown` emoji 的悬停背景色
@@ -61,6 +60,7 @@ export const github = {
* @input `input` 输入框被选中时的边框颜色
* @clone `clone` 克隆地址框被选中时的边框颜色
* @issue `comment` 评论框被选中时的边框颜色
* @actions `actionViewLeft` 左侧子作业激活伪元素颜色
* @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
* @dropdown `selectionDropdown` 选择输入框的内部边框颜色
* @notification `notification` 通知列表悬停时的左边框颜色
@@ -180,6 +180,7 @@ export const github = {
* @dropdown `dropdown` 下拉框子项的悬停背景颜色
* @menu `verticalMenu` 垂直菜单项的悬停背景颜色
* @menu `menu` 菜单项的悬停背景颜色
* @menu `secondaryMenu` 二级菜单按钮的悬停背景颜色
* @repo `repoHeader` 仓库标题的悬停背景颜色
* @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
* @filelist `repoFiles` README 栏的按钮的悬停背景颜色

View File

@@ -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 {

View File

@@ -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};

View File

@@ -135,3 +135,10 @@ export const issueListMobile = css`
}
}
`;
// 修复仪表板下二级面板选择菜单组织的标签间隔
export const fixOrgLabel = css`
.dashboard .secondary-nav .org-visibility .label {
margin-right: 0;
}
`;

View File

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

View File

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

View File

@@ -7,9 +7,11 @@ import "./diff";
import "./editor";
import "./explore";
import "./filelist";
import "./footer";
import "./heatmap";
import "./issue";
import "./milestones";
import "./navbar";
import "./newrepo";
import "./notification";
import "./org";

View File

@@ -48,6 +48,9 @@ export const issueList = css`
}
.issue-list-toolbar-right > .ui.menu {
align-items: center;
> .item {
color: ${themeVars.color.text.light.num1};
}
> .ui.button {
padding: 0 12px;
height: 32px;
@@ -544,6 +547,7 @@ export const issueSidebar = css`
.page-content.repository.issue {
.issue-content {
gap: 24px;
// 侧边栏
.issue-content-right {
border: 0;
font-size: 12px;
@@ -593,6 +597,49 @@ export const issueSidebar = css`
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 {
@@ -608,7 +655,8 @@ export const issueSidebar = css`
.ui.form .due-date {
color: ${themeVars.color.text.self};
}
.divider {
// 分割线
> .divider {
margin: 12px 0 12px 8px;
width: calc(100% - 16px);
}

View File

@@ -3,6 +3,30 @@ 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;
@@ -70,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;
left: 22px;
top: -7px;
left: 21px;
}
}
// 通知和计时器的圆点
@@ -85,10 +110,10 @@ 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;
left: 12px;
top: -15px;
left: 11px;
}
}
}
@@ -126,5 +151,26 @@ 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;
}
}
}
`;

View File

@@ -144,6 +144,9 @@ export const notification = css`
&: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};

View File

@@ -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 {
// 间隔线颜色

View File

@@ -39,6 +39,14 @@ export const baseButton = css`
${primaryHoverStyle}
}
}
// 按钮组整体有阴影
&.buttons {
box-shadow: ${themeVars.github.shadow.resting.small};
.button {
// 按钮组里的按钮无阴影
box-shadow: none;
}
}
}
// 主色调基本按钮和普通按钮一样
// 作者的关注按钮

View File

@@ -17,16 +17,25 @@ export const dropdown = css`
> .item:not(.tw-hidden) {
display: flex !important;
align-items: center;
align-content: center;
padding: 6px 8px !important;
min-height: 32px;
border-radius: ${otherThemeVars.border.radius} !important;
gap: 4px;
&:not(.emoji) {
margin: 0 8px;
}
&:not(.emoji):first-of-type {
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: 8px;
}
@@ -48,12 +57,30 @@ export const dropdown = css`
}
svg {
margin-top: 2px;
margin-right: 8px;
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: 8px 0;
@@ -83,15 +110,23 @@ export const dropdown = css`
border-radius: 12px !important;
}
// 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单
.ui.dropdown .menu .scrolling.menu {
border-radius: 0 0 12px 12px !important;
.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;
}
}
}
// 修复下拉菜单元素溢出问题
// 用户菜单
.user-menu>.item,
// Issue/PR 菜单
.ui.menu .ui.dropdown.item .menu .item {
width: auto;
width: calc(100% - 16px); // 减去上方 item 的 margin 左右边距
}
// 去掉下拉菜单的边框线
// 设置里的下拉菜单
@@ -191,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`
@@ -208,6 +256,32 @@ export const branchDropdown = css`
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};
}
}
}
}
}
`;

View File

@@ -12,6 +12,5 @@ import "./label"; // 标签
import "./menu"; // 菜单
import "./modal"; // 弹窗
import "./tippy"; // 提示框
import "./navbar"; // 导航栏
import "./attached"; // 附加样式
import "./other"; // 其他样式

View File

@@ -39,4 +39,8 @@ export const input = css`
.ui.form#repo-search-form {
align-items: center;
}
// 下拉菜单的输入框
.ui.dropdown.dropdown .menu>.input {
margin: 12px 10px;
}
`;

View File

@@ -148,13 +148,15 @@ export const secondaryMenu = css`
padding: 0px 12px;
height: 32px;
font-weight: 500;
color: ${themeVars.color.text.light.num1};
}
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;
@@ -193,6 +195,10 @@ export const secondaryMenu = css`
}
}
}
// 修复仓库页面下的二级导航栏的下划线因浏览器 BUG 导致显示的异常问题(导致下划线和分割线重叠变粗)
.page-content.repository .ui.secondary.pointing.menu {
border-bottom: none !important;
}
`;
// 分页菜单

View File

@@ -8,9 +8,17 @@ export const listHeader = css`
}
`;
// 已标星的图标
export const star = css`
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;
}
`;

View File

@@ -15,7 +15,8 @@ export const tippyBox = css`
border: unset;
box-shadow: ${themeVars.github.shadow.floating.small};
}
&[data-theme="default"] {
&[data-theme="default"],
&[data-theme="menu"] {
border-radius: 12px;
}
&[data-theme="box-with-header"] {
@@ -32,6 +33,8 @@ export const tippyBox = css`
padding: 8px;
.item {
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px;
height: 32px;
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}

View File

@@ -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,7 +32,10 @@ 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,
},
@@ -69,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);

View File

@@ -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,7 +32,10 @@ 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,
},
@@ -69,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);

View File

@@ -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" },
@@ -56,7 +61,10 @@ 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" },
},
@@ -65,7 +73,7 @@ export const darkGithubColors: GithubColor = {
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
overlay: { backdrop: { bgColor: "#21283066" } },
overlay: { backdrop: { bgColor: "#21283066" }, bgColor: "#010409" },
underlineNav: { borderColor: { active: "#f78166" } },
contribution: {
default: {
@@ -75,6 +83,6 @@ export const darkGithubColors: GithubColor = {
},
};
export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors);
export const darkColors = github2ThemeColor(darkGithubColors);
export default defineTheme(darkColors);

View File

@@ -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" },
@@ -56,7 +61,10 @@ 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" },
},
@@ -65,7 +73,7 @@ export const lightGithubColors: GithubColor = {
transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
},
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
overlay: { backdrop: { bgColor: "#c8d1da66" } },
overlay: { backdrop: { bgColor: "#c8d1da66" }, bgColor: "#ffffff" },
underlineNav: { borderColor: { active: "#fd8c73" } },
contribution: {
default: {
@@ -75,6 +83,6 @@ export const lightGithubColors: GithubColor = {
},
};
export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors);
export const lightColors = github2ThemeColor(lightGithubColors);
export default defineTheme(lightColors);

26
themes/pink-dark.css.ts Normal file
View File

@@ -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);

26
themes/pink-light.css.ts Normal file
View File

@@ -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);

View File

@@ -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);

View File

@@ -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";
@@ -51,7 +55,10 @@ 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" },
},
@@ -60,7 +67,7 @@ export const softDarkGithubColors: GithubColor = {
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
overlay: { backdrop: { bgColor: "#262c3666" } },
overlay: { backdrop: { bgColor: "#262c3666" }, bgColor: "#2a313c" },
underlineNav: { borderColor: { active: "#ec775c" } },
contribution: {
default: {
@@ -100,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);

View File

@@ -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);

View File

@@ -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);