Compare commits

..

109 Commits

Author SHA1 Message Date
lutinglt
6ddc5057a4 update readme 2025-10-25 15:25:19 +08:00
lutinglt
ceb0fd0b0c version change 2025-10-25 13:07:09 +08:00
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
lutinglt
472647e7c1 修复发布页主色调按钮多余的阴影 2025-09-10 12:32:21 +08:00
lutinglt
84a2f5a1ee 版本号自动生成 2025-09-10 10:59:33 +08:00
lutinglt
e45c73d850 me sb, so fix 2025-09-10 00:25:52 +08:00
lutinglt
10d0a3dbd8 format 2025-09-09 23:50:40 +08:00
lutinglt
ae9bc3cbb5 修改外观设置中显示的主题名称 2025-09-09 23:48:55 +08:00
lutinglt
dc0f43a082 派生栏上下间距 2025-09-09 18:52:51 +08:00
lutinglt
5fb9ef2a61 修复归档仓库 Issue 时间线过长插入归档信息框 2025-09-09 17:47:33 +08:00
lutinglt
247c6fd987 弹窗圆角 2025-09-09 17:14:11 +08:00
lutinglt
865642eb3b 仪表盘页的提交 SHA 标签居中对齐 2025-09-09 17:02:45 +08:00
lutinglt
392c82fcd5 修复新建里程碑切换按钮样式 2025-09-09 14:52:08 +08:00
lutinglt
02087941f4 修复创建工单页面样式 2025-09-09 14:48:57 +08:00
lutinglt
0560aad59e 隐藏热力图和动态的分割线 2025-09-09 14:24:52 +08:00
lutinglt
8e8416507e 同步主色调按钮和红色按钮的阴影样式 2025-09-09 14:14:12 +08:00
lutinglt
1a702c9526 同步提示框样式 2025-09-09 10:41:23 +08:00
lutinglt
46c2d46482 优化分页菜单高度 2025-09-08 22:32:09 +08:00
lutinglt
8b15abe30b 优化动态间隔 2025-09-08 21:05:47 +08:00
lutinglt
9756cbd409 优化仪表板热力图和动态样式 2025-09-08 20:44:39 +08:00
lutinglt
b529cefd04 release 2025-09-08 18:37:59 +08:00
lutinglt
dded6b1948 release 2025-09-08 16:34:06 +08:00
lutinglt
5e8f62c79f release 2025-09-08 16:25:07 +08:00
lutinglt
9b2a1783ef release 2025-09-08 16:11:38 +08:00
lutinglt
6bb138e964 软件包详情页版本标签样式 2025-09-08 15:53:01 +08:00
lutinglt
e387008ee5 同步软件包页面样式 2025-09-08 15:29:01 +08:00
lutinglt
c8634fb14b 微调仓库相关界面元素间隔 2025-09-08 11:02:58 +08:00
lutinglt
fc10a1f54b 优化仪表板动态信息间隔 2025-09-07 23:41:21 +08:00
lutinglt
f08c7a0c8c 修复嵌套下拉菜单样式和双选项切换按钮 2025-09-07 23:05:26 +08:00
lutinglt
6c0fd14119 同步仓库已标星的星星颜色 2025-09-07 18:31:46 +08:00
lutinglt
cb49b12ff0 调整发布页版本间隔 2025-09-07 18:07:57 +08:00
lutinglt
468a97994a 优化仪表板的仓库组织切换按钮样式 2025-09-07 17:02:34 +08:00
lutinglt
1986956191 优化下拉菜单样式 2025-09-07 15:28:00 +08:00
lutinglt
979af2a756 优化通知页面按钮悬浮效果 2025-09-07 14:49:43 +08:00
lutinglt
a34bd93894 同步通知页面样式 2025-09-07 14:44:04 +08:00
lutinglt
64684a51da 同步分支菜单宽度 2025-09-07 13:30:24 +08:00
lutinglt
e89c26e753 同步关注页面样式 2025-09-07 12:52:21 +08:00
lutinglt
796c6f1519 同步差异对比页面文件名标题栏样式 2025-09-07 11:00:53 +08:00
lutinglt
f9d63e6fd1 同步用户菜单样式 2025-09-07 10:31:54 +08:00
lutinglt
08f662497b 同步订阅页面样式 2025-09-06 21:23:47 +08:00
lutinglt
c4bff9fdc1 修复仓库克隆点星按钮高度 2025-09-06 20:53:43 +08:00
lutinglt
a48963c43d 同步置顶 Issue 样式 2025-09-06 20:35:55 +08:00
lutinglt
7366813f02 修复提交列表尾行圆角 2025-09-06 20:08:06 +08:00
lutinglt
dc3047f16a 同步顶部工单等仪表板样式 2025-09-06 19:59:48 +08:00
lutinglt
e0518a2986 同步里程碑页面样式 2025-09-06 16:20:40 +08:00
lutinglt
39727c789b 缩小发布标题和内容的间隔 2025-09-05 17:02:36 +08:00
lutinglt
3c21a98fee 优化发布页面布局和下载列表样式 2025-09-04 20:03:34 +08:00
lutinglt
9bce3797a6 修复文件预览时文件树有边框过粗 2025-08-30 15:37:58 +08:00
lutinglt
9d3e738723 微调一些标签的字体大小 2025-08-29 12:11:15 +08:00
lutinglt
86ac3b73ba 略微减小导航栏创建仓库菜单按钮内的图标间隔 2025-08-25 16:25:29 +08:00
lutinglt
09a4bbdc07 取消修改编辑器字体大小, 避免光标错位 2025-08-23 11:55:33 +08:00
67 changed files with 2030 additions and 387 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

26
.github/release.md vendored
View File

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

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

13
CHANGELOG.md Normal file
View File

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

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` 目录下
@@ -26,10 +48,6 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
3. 重启 Gitea
4. 在设置中查看主题
> [!IMPORTANT]
>
> 自动颜色主题需要亮色和暗色的主题文件
例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark``THEMES` 末尾
`gitea/conf/app.ini` 例:
@@ -42,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]
>
> 自动颜色主题需要亮色和暗色的主题文件
## 截图
### 基本主题
@@ -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 变量
可以根据自己的偏好自定义主题的一部分样式
@@ -102,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 | | |
@@ -124,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
@@ -29,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`:
@@ -45,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
@@ -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
@@ -106,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 | | |
@@ -128,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,7 +1,6 @@
{
"name": "gitea-github-theme",
"version": "1.24.6",
"description": "A sophisticated theme to make Gitea look and feel like GitHub",
"version": "1.24.8",
"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,

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 };
@@ -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 } };
overlay: { backdrop: { bgColor: string } };
shadow: { floating: { small: string }; resting: { small: 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,
bg: githubColor.bgColor.default,
text: githubColor.fgColor.onEmphasis,
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,

View File

@@ -1,5 +1,7 @@
import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
import { otherThemeVars, themeVars } from "src/types/vars";
import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
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) {
globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
}
createGlobalTheme(":root", themeInfoVars, { version });
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, {
"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)" },
});
if (isDarkTheme) globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
}

View File

@@ -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 lightName = key.replace("dark.css", "light.css");
const autoName = `${prefix}${key.replace("dark.css", "auto.css").replace("light.css", "auto.css")}`;
const darkName = key.replace("light", "dark");
const lightName = darkName.replace("dark", "light");
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}`,
});
}
// 删除原始的样式文件, 自动颜色主题因为删除, 永远不会生成两次

View File

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

View File

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

View File

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

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

@@ -42,13 +42,24 @@ export const commit = css`
color: ${themeVars.color.text.light.num1};
}
}
// 整行悬停色
tr:hover {
background-color: ${themeVars.color.hover.opaque};
}
// 偶数行悬停色
tr:nth-child(2n):hover {
background-color: ${themeVars.color.hover.opaque} !important;
tr {
// 整行悬停色
&:hover {
background-color: ${themeVars.color.hover.opaque};
}
// 偶数行悬停色
&: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};
}
}
}
}
}

View File

@@ -5,16 +5,29 @@ export const dashboard = css`
.page-content.dashboard.feeds {
// 仓库列表的仓库/组织切换按钮
.ui.two.item.menu {
box-shadow: ${themeVars.github.shadow.floating.small};
border: unset;
background: ${themeVars.color.hover.self};
border: 0;
border-radius: 12px;
margin-bottom: 8px;
> .item {
&:first-child {
border-radius: 12px 0 0 12px;
background: unset;
border-radius: 12px;
padding: 6px 12px !important;
&.active {
background: ${themeVars.color.menu};
box-shadow: ${themeVars.github.shadow.floating.small};
font-weight: 600;
}
&:last-child {
border-radius: 0 12px 12px 0;
&::before {
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;
}
`;

View File

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

View File

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

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

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

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

@@ -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};
border-radius: ${otherThemeVars.border.radius};
box-shadow: ${themeVars.github.shadow.floating.small};
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-item {
.flex-list#activity-feed {
border-radius: 12px;
box-shadow: ${themeVars.github.shadow.floating.small};
> .flex-item {
gap: 12px;
padding: 16px 0;
&:first-child {
padding-top: 6px;
}
padding: 12px 8px 16px 14px;
> .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;
}
}
`;

View File

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

View File

@@ -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 {
height: auto;
.page-content.repository.milestones,
.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 {
gap: 24px;
.issue-content-right {
border: 0;
font-size: 12px;
padding: 0;
.ui.button {
// 工单&创建工单&PR页面侧边栏
.page-content.repository.issue {
.issue-content {
gap: 24px;
// 侧边栏
.issue-content-right {
border: 0;
font-size: 12px;
}
.ui.form,
a.fixed-text.muted,
span.text,
// 列表项为空时的文字
span.item.empty-list,
p {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
}
.ui.dropdown.select-branch,
.ui.form,
a.fixed-text.muted,
span.text,
.ui.watching > div,
.ui.depending > div,
.flex-text-block,
.ui.list,
p {
${sidebarPadding};
}
.issue-sidebar-combo {
.ui.dropdown > a.fixed-text.muted {
padding: 0;
.ui.button {
font-size: 12px;
}
.ui.form,
a.fixed-text.muted,
span.text,
// 列表项为空时的文字
span.item.empty-list,
p {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
}
.ui.dropdown.select-branch,
.ui.form,
a.fixed-text.muted,
span.text,
.ui.watching > div,
.ui.depending > div,
.flex-text-block,
.ui.list,
.toggle-wip,
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;
margin-bottom: 0 !important;
// 选中日期颜色
.ui.form .due-date {
color: ${themeVars.color.text.self};
}
}
// 时间追踪
> div:not([class]):not([id]) > .ui.dropdown.jump > 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};
// 分割线
> .divider {
margin: 12px 0 12px 8px;
width: calc(100% - 16px);
}
}
// 选中日期颜色
.ui.form .due-date {
color: ${themeVars.color.text.self};
}
.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};
// 订阅按钮
.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 {
color: ${themeVars.color.red.light};
}
}
}
}

View File

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

View File

@@ -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;
left: 22px;
top: -7px;
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;
left: 12px;
top: -15px;
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;
}
}
}
`;

View File

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

View File

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

View File

@@ -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 {
// 左侧发布元信息
.meta {
gap: 0.5rem;
padding-top: 24px;
padding-right: 40px;
text-align: left;
min-width: 0;
flex: 0.125;
a.muted {
color: ${themeVars.color.text.light.num1};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
svg {
margin-right: 8px !important;
> .ui.container > .divider {
margin: 16px 0;
}
ul#release-list {
gap: 32px;
margin: 32px 0 16px 0;
.release-entry {
// 左侧发布元信息
.meta {
gap: 0.5rem;
padding-top: 24px;
padding-right: 40px;
text-align: left;
min-width: 0;
flex: 0.125;
a.muted {
color: ${themeVars.color.text.light.num1};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
svg {
margin-right: 8px !important;
}
svg.tw-mr-1.svg.octicon-tag {
margin-top: 1px;
}
}
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 {
min-height: 20px;
line-height: 20px;
padding: 3px 12px;
font-size: 12px;
}
}
// 右侧发布详细信息
.segment.detail {
.svg {
color: ${themeVars.color.text.light.num1};
}
p.text.grey {
margin: 16px 0;
.time {
color: ${themeVars.color.text.self};
// 右侧发布详细信息
.segment.detail {
padding: 16px;
.svg {
color: ${themeVars.color.text.light.num1};
}
}
.markup {
> *:first-child {
margin-top: 16px !important;
// 标题
.release-list-title {
font-size: 32px;
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};
}
}
}
}
`;

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

@@ -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 {
${tinyStyle}
padding: 5px 16px;
line-height: 22px;
&:hover {
${tinyHoverStyle}
.admin-setting-content {
.ui.primary.button {
${tinyStyle}
padding: 5px 16px;
line-height: 22px;
&:hover {
${tinyHoverStyle}
}
}
.ui.red.button {
box-shadow: ${themeVars.github.shadow.resting.small};
padding: 5px 16px;
line-height: 22px;
}
}
`;

View File

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

View File

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

View File

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

View File

@@ -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;
padding: 8px 10px !important;
align-content: center;
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 {
margin-top: 0.35em !important;
> .menu {
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 {
animation: ${animationDown};
.ui.dropdown.branch-selector-dropdown > .menu {
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};
}
}
}
}
}
`;

View File

@@ -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"; // 其他样式

View File

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

View File

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

View File

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

24
styles/public/other.ts Normal file
View File

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

View File

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

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

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

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" },
@@ -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" } },
overlay: { backdrop: { bgColor: "#21283066" } },
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
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);

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" },
@@ -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" } },
overlay: { backdrop: { bgColor: "#c8d1da66" } },
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
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);

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";
@@ -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" } },
overlay: { backdrop: { bgColor: "#262c3666" } },
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
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);

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