Compare commits

..

112 Commits

Author SHA1 Message Date
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
lutinglt
68d632a6b3 update readme 2025-08-19 00:51:02 +08:00
lutinglt
2b5962e1c2 update readme 2025-08-19 00:49:40 +08:00
lutinglt
7cd7a48d17 修复后台管理的运维管理面板的样式 2025-08-17 16:18:57 +08:00
lutinglt
ebc6463c30 修复登录二次验证页面内容位置 2025-08-17 10:46:52 +08:00
lutinglt
77c3842a43 修复登录二次验证页面内容位置 2025-08-17 10:39:50 +08:00
lutinglt
d311072ca0 update readme 2025-08-16 22:50:00 +08:00
lutinglt
8b4102d8d9 同步查看代码文件内容时的样式 2025-08-16 22:33:16 +08:00
lutinglt
73b5397d77 优化文件树的顶部和底部间隔 2025-08-16 20:58:10 +08:00
lutinglt
134c383cdb 优化查看代码文件内容时的体验 2025-08-16 20:51:07 +08:00
lutinglt
c6e73000bd 修复仓库中文 README 时的按钮下划线长度 2025-08-16 13:03:56 +08:00
lutinglt
dbf3547ad5 change default readme 2025-08-16 12:23:43 +08:00
lutinglt
5235dae367 更新英文截图 2025-08-16 12:19:11 +08:00
lutinglt
a9df7a31e1 README_EN 2025-08-16 12:03:10 +08:00
lutinglt
dd6e97be1d update readme 2025-08-15 10:53:02 +08:00
lutinglt
29f983cce6 update readme 2025-08-15 10:51:24 +08:00
鲁汀
fca10130a3 Create FUNDING.yml 2025-08-15 10:45:15 +08:00
lutinglt
8676816342 修复红绿色盲主题的代码高亮色 2025-08-15 09:15:13 +08:00
lutinglt
9bcea89fcb update readme 2025-08-14 23:31:41 +08:00
lutinglt
26deec78ff format code 2025-08-14 21:24:03 +08:00
lutinglt
ffb7fa810b 发布时的主题顺序 2025-08-14 20:51:56 +08:00
lutinglt
2083d3026b version 2025-08-14 20:37:00 +08:00
75 changed files with 2199 additions and 371 deletions

21
.github/CHANGELOG.md vendored Normal file
View File

@@ -0,0 +1,21 @@
### 🎉
### ✨ Feature
#### CSS 变量
### 🌈 Style
##### 更符合 GitHub 风格
### 🐞 Fix
## 📃 English
#### CSS Variable
##### More GitHub-like style
```text
在 English 下方补充上面 Feature 以下部分的内容的中译英​
```

15
.github/FUNDING.yml vendored Normal file
View File

@@ -0,0 +1,15 @@
# 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,84 @@
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

View File

@@ -0,0 +1,32 @@
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

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

View File

@@ -1,11 +0,0 @@
## 🎉
## ✨ Feature
#### CSS 变量
## 🌈 Style
#### 更符合 GitHub 风格
## 🐞 Fix

8
.github/release.md vendored
View File

@@ -1,8 +0,0 @@
## ✨ Feature
- 支持色盲主题(Beta) ( 红绿色盲和蓝色盲 ) ( Colorblind & Tritanopia )
## 🐞 Fix
- 查看代码文件页面路径栏有时内容不会居中
- 查看代码文件页面文件树头部滚动到底部时不会固定住

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

17
CHANGELOG.md Normal file
View File

@@ -0,0 +1,17 @@
### 🌈 Style
- 优化顶部和二级导航栏的样式和颜色
##### 更符合 GitHub 风格
- 修复并同步工单或 PR 详细页面下的标签菜单样式 #19
- 同步页脚样式
- 优化创建标签菜单的菜单项的样式
### 🐞 Fix
- 修复 Wiki 页面搜索项目没有正确隐藏的问题 #15
- 修复后台账户管理排序菜单项的宽度问题
- 修复合并提交中的主色调按钮组阴影问题
- 修复仓库页面下二级导航栏下划线过粗的问题
- 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角问题

View File

@@ -95,8 +95,8 @@ npm run commit
请在颜色主题文件头部附加自己的作者信息, 方便 Issue 提问者找到你 `@`.
推荐使用 `import { defineTheme, type ThemeColor } from "src"` 导入主题生成框架, 声明主题颜色, 然后使用 `defineTheme` 函数生成主题所有 CSS 变量,
defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明和定义.
推荐使用 `import { defineTheme, type ThemeColor } from "src"` 导入主题生成框架, 声明主题颜色, 然后使用 `defineTheme`
函数生成主题所有 CSS 变量, defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明和定义.
颜色计算函数可以从 `src/functions` 导入, 例如 `import { scaleColorLight } from "src/functions"`, 或者使用 `polished` 库.

View File

@@ -1,10 +1,13 @@
# gitea-github-theme
<p align="center">
中文 |
<a href="./README_EN.md">English</a>
</p>
一个精致模仿 Github 风格的 Gitea 主题
# Gitea GitHub Theme
> [!TIP]
>
> 推荐搭配文件图标浏览器插件一起使用更佳
> 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳
> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
## 版本号说明
@@ -15,7 +18,7 @@ Gitea 版本号格式: `1.大版本号.小版本号`
Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
比如: 主题版本 `1.24.4` 适用于 Gitea 版本 `>=1.24.0` ~ `<1.25.0`
比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=1.24.0` `<1.25.0`
仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
@@ -46,13 +49,16 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
## 截图
![Dashboard](screenshots/dashboard.png)
### 基本主题
```ini
THEMES = github-auto, github-light, github-dark, github-soft-dark
```
<details open>
<summary>GitHub</summary>
<details>
<summary>Base</summary>
<h4>theme-github-light.css</h4>
<img src="screenshots/light.png"/>
<h4>theme-github-dark.css</h4>
@@ -69,13 +75,29 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
```
<details>
<summary>红绿色盲 & 蓝色盲 ( Colorblind & Tritanopia )</summary>
<summary>Colorblind & Tritanopia (红绿色盲 & 蓝色盲)</summary>
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
<img src="screenshots/colorblind-light.png"/>
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
<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 变量
可以根据自己的偏好自定义主题的一部分样式
@@ -103,7 +125,9 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
| --custom-clone-menu-width | 克隆菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
| --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 | | |

159
README_EN.md Normal file
View File

@@ -0,0 +1,159 @@
<p align="center">
<a href="./README.md">中文</a> |
English
</p>
# Gitea GitHub Theme
> [!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
The theme version number is kept consistent with the Gitea version number
Gitea version number format: `1.major.minor`
Theoretically, minor version changes in Gitea do not modify the frontend layout, so the minor version of the theme is
applicable to all Gitea versions with the same major version number.
For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0`
Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be
accepted.
> Development stage theme version number format: `1.major.minor.timestamp`
## Installation
1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory
2. Modify `gitea/conf/app.ini` and append the CSS filename without the `theme-` prefix to the end of `THEMES` under the
`[ui]` section
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`:
```ini
[ui]
THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark
```
For details, please refer to the Gitea documentation
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
## Screenshots
![Dashboard](screenshots/en/dashboard-en.png)
### Basic Themes
```ini
THEMES = github-auto, github-light, github-dark, github-soft-dark
```
<details>
<summary>Base</summary>
<h4>theme-github-light.css</h4>
<img src="screenshots/en/light.png"/>
<h4>theme-github-dark.css</h4>
<img src="screenshots/en/dark.png"/>
<h4>theme-github-soft-dark.css</h4>
<img src="screenshots/en/soft-dark.png"/>
</details>
### Colorblind Themes (Beta)
```ini
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
```
<details>
<summary>Colorblind & Tritanopia</summary>
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
<img src="screenshots/en/colorblind-light.png"/>
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
<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
### Usage Method
Add the following code at the beginning or end of the theme's CSS file
```css
:root {
--custom-clone-menu-width: 150px;
...
}
```
> [!IMPORTANT]
>
> Please ensure to add custom variables in the `:root` selector, otherwise they will not take effect
>
> Variables are separated by `;`
>
> It is recommended to place custom variables in a separate file and append them to the theme file using shell commands
> or other methods
### CSS Variables
| 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 | | |
| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | |
| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | |
## Using Development Version of the Theme
You might want to use the development version of the theme instead of the released version
Please ensure you have Node.js environment installed, Node.js 20 or above is recommended
```bash
git clone https://github.com/lutinglt/gitea-github-theme.git
cd gitea-github-theme
npm install
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.5",
"description": "A theme to make Gitea look and feel like GitHub",
"version": "1.24.7",
"type": "module",
"scripts": {
"dev": "vite build --mode dev",

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: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

BIN
screenshots/en/dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 295 KiB

BIN
screenshots/en/light.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 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

View File

@@ -84,7 +84,7 @@ export type ThemeColor = {
* github,
* })
*/
export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null): Theme {
export function defineTheme(themeColor: ThemeColor, chroma?: Chroma): Theme {
const brightDir = themeColor.isDarkTheme ? -1 : 1;
const primary: Primary = {
@@ -165,7 +165,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
const named: Named = {
red: {
self: themeColor.base.red,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.red, 15) : scaleColorLight(themeColor.base.red, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.red, 15)
: scaleColorLight(themeColor.base.red, 25),
dark: {
num1: scaleColorLight(themeColor.base.red, -10),
num2: scaleColorLight(themeColor.base.red, -20),
@@ -180,7 +182,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
orange: {
self: themeColor.base.orange,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.orange, 15) : scaleColorLight(themeColor.base.orange, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.orange, 15)
: scaleColorLight(themeColor.base.orange, 25),
dark: {
num1: scaleColorLight(themeColor.base.orange, -10),
num2: scaleColorLight(themeColor.base.orange, -20),
@@ -195,7 +199,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
yellow: {
self: themeColor.base.yellow,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.yellow, 15) : scaleColorLight(themeColor.base.yellow, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.yellow, 15)
: scaleColorLight(themeColor.base.yellow, 25),
dark: {
num1: scaleColorLight(themeColor.base.yellow, -10),
num2: scaleColorLight(themeColor.base.yellow, -20),
@@ -210,7 +216,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
olive: {
self: themeColor.base.olive,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.olive, 15) : scaleColorLight(themeColor.base.olive, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.olive, 15)
: scaleColorLight(themeColor.base.olive, 25),
dark: {
num1: scaleColorLight(themeColor.base.olive, -10),
num2: scaleColorLight(themeColor.base.olive, -20),
@@ -218,7 +226,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
green: {
self: themeColor.base.green,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.green, 15) : scaleColorLight(themeColor.base.green, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.green, 15)
: scaleColorLight(themeColor.base.green, 25),
dark: {
num1: scaleColorLight(themeColor.base.green, -10),
num2: scaleColorLight(themeColor.base.green, -20),
@@ -233,7 +243,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
teal: {
self: themeColor.base.teal,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.teal, 15) : scaleColorLight(themeColor.base.teal, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.teal, 15)
: scaleColorLight(themeColor.base.teal, 25),
dark: {
num1: scaleColorLight(themeColor.base.teal, -10),
num2: scaleColorLight(themeColor.base.teal, -20),
@@ -241,7 +253,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
blue: {
self: themeColor.base.blue,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.blue, 15) : scaleColorLight(themeColor.base.blue, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.blue, 15)
: scaleColorLight(themeColor.base.blue, 25),
dark: {
num1: scaleColorLight(themeColor.base.blue, -10),
num2: scaleColorLight(themeColor.base.blue, -20),
@@ -249,7 +263,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
violet: {
self: themeColor.base.violet,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.violet, 15) : scaleColorLight(themeColor.base.violet, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.violet, 15)
: scaleColorLight(themeColor.base.violet, 25),
dark: {
num1: scaleColorLight(themeColor.base.violet, -10),
num2: scaleColorLight(themeColor.base.violet, -20),
@@ -257,7 +273,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
purple: {
self: themeColor.base.purple,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.purple, 15) : scaleColorLight(themeColor.base.purple, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.purple, 15)
: scaleColorLight(themeColor.base.purple, 25),
dark: {
num1: scaleColorLight(themeColor.base.purple, -10),
num2: scaleColorLight(themeColor.base.purple, -20),
@@ -265,7 +283,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
pink: {
self: themeColor.base.pink,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.pink, 15) : scaleColorLight(themeColor.base.pink, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.pink, 15)
: scaleColorLight(themeColor.base.pink, 25),
dark: {
num1: scaleColorLight(themeColor.base.pink, -10),
num2: scaleColorLight(themeColor.base.pink, -20),
@@ -273,7 +293,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
brown: {
self: themeColor.base.brown,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.brown, 15) : scaleColorLight(themeColor.base.brown, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.brown, 15)
: scaleColorLight(themeColor.base.brown, 25),
dark: {
num1: scaleColorLight(themeColor.base.brown, -10),
num2: scaleColorLight(themeColor.base.brown, -20),
@@ -281,7 +303,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
black: {
self: themeColor.base.black,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.black, 15) : scaleColorLight(themeColor.base.black, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.black, 15)
: scaleColorLight(themeColor.base.black, 25),
dark: {
num1: scaleColorLight(themeColor.base.black, -10),
num2: scaleColorLight(themeColor.base.black, -20),
@@ -289,7 +313,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
},
grey: {
self: themeColor.base.grey,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.grey, 15) : scaleColorLight(themeColor.base.grey, 25),
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.grey, 15)
: scaleColorLight(themeColor.base.grey, 25),
},
gold: themeColor.base.gold,
white: themeColor.base.white,
@@ -338,7 +364,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
yellow: themeVars.color.yellow.light,
blue: themeVars.color.blue.light,
magenta: themeVars.color.pink.light,
cyan: themeColor.isDarkTheme ? scaleColorLight(themeColor.base.cyan, 10) : scaleColorLight(themeColor.base.cyan, 25),
cyan: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.cyan, 10)
: scaleColorLight(themeColor.base.cyan, 25),
white: themeVars.color.console.fg.self,
},
};

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,14 +61,15 @@ export type GithubColor = {
translucent: string;
};
button: {
primary: { fgColor: { rest: string }; bgColor: { hover: string } };
primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string } };
danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } };
star: { iconColor: string };
};
control: {
bgColor: { active: string; hover: string; rest: string };
transparent: { bgColor: { active: string; hover: string; selected: string } };
};
shadow: { floating: { small: string } };
shadow: { floating: { small: string }; resting: { small: string } };
overlay: { backdrop: { bgColor: string } };
underlineNav: { borderColor: { active: string } };
contribution: {
@@ -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

@@ -73,7 +73,7 @@ export function prettylights2Chroma(prettylights: prettylightsColor): Chroma {
string: {
self: prettylights.syntax.string,
affix: prettylights.syntax.string,
backtick: prettylights.syntax.string,
backtick: prettylights.syntax.constant,
char: prettylights.syntax.string,
delimiter: prettylights.syntax.string,
doc: prettylights.syntax.comment,

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

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

@@ -1,19 +1,33 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const dashboard = css`
.page-content.dashboard {
// 首页仪表板, 避免选中管理员后台的维护管理面板
.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};
}
}
}
}
@@ -43,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;
}
@@ -64,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

@@ -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,15 @@ 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 {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
@@ -104,11 +114,11 @@ export const repoFiles = css`
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
bottom: 0;
bottom: -7px;
left: 0;
height: 2px;
position: absolute;
left: 12px;
width: 113px;
width: 100%;
}
a.muted:hover {
color: inherit;
@@ -146,7 +156,23 @@ export const repoFilesMobile = css`
// 仓库打开文件时的视图
export const repoFileView = css`
// 隐藏主内容的下内容和页脚, 避免滚动文件树时滚动条遮挡
body > .full.height:has(.repo-view-file-tree-container) {
padding-bottom: 0;
+ .page-footer {
display: none;
}
}
.page-content.repository.file.list {
&:has(.repo-view-file-tree-container) {
// 取消下间隔优化观看体验
.secondary-nav {
margin-bottom: 0 !important;
.ui.tabs.divider {
margin-bottom: 0;
}
}
}
> .ui.container.fluid {
max-width: calc(100% - calc(2 * 16px));
}
@@ -155,23 +181,26 @@ export const repoFileView = css`
top: 0;
// 左侧文件树
.repo-view-file-tree-container {
height: 100vh;
height: calc(100vh - 64px); // 减去头部高度
// 固定头部
position: sticky;
top: 0;
&:after {
content: "";
position: absolute;
top: -14px;
top: 0;
right: 0;
width: 1px;
height: calc(100% + 14px);
height: calc(100% + 64px); // 头部高度
background: ${themeVars.color.secondary.self};
}
> .repo-button-row {
align-content: center;
background: ${themeVars.color.body};
font-size: 16px;
height: 64px;
margin: 0;
// 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
position: sticky;
top: 0;
&:after {
@@ -183,43 +212,123 @@ export const repoFileView = css`
height: 1px;
background: ${themeVars.color.secondary.self};
}
.ui.compact.icon.button {
border: 0;
}
}
.view-file-tree-items {
margin-right: 0;
padding: 16px 16px 16px 0;
padding: 12px 16px 8px 0;
}
}
// 右侧文件视图内容
.repo-view-content {
padding-bottom: 40px;
.repo-button-row {
align-content: center;
background: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.secondary.self};
border-radius: ${otherThemeVars.border.radius};
margin: 16px 0;
height: 46px;
min-height: 46px;
padding: 8px;
position: sticky;
top: 0;
z-index: 1;
.ui.button {
min-height: 32px;
}
// 打开文件树按钮
.repo-view-file-tree-toggle-show {
background: initial;
border-color: #0000;
padding: 0;
min-width: 32px;
}
// 分支选择按钮
.branch-dropdown-button {
padding: 0 12px;
}
// 路径
.repo-path {
gap: 4px;
.section {
&:first-child,
&.active {
font-weight: 600;
}
}
.btn {
svg {
margin-left: 4px;
color: ${themeVars.color.text.light.num1};
}
}
}
}
.non-diff-file-content {
// 避免分支菜单遮挡
position: relative;
z-index: 0;
h4.file-header {
padding: 8px 12px !important;
position: sticky;
// 重叠边框线, 避免过粗
top: 45px;
z-index: 1;
.file-header-left {
color: ${themeVars.color.text.light.num1};
font-size: 12px;
}
.file-header-right {
// 按钮组
> .ui.buttons {
margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了
.ui.mini.button {
min-height: 28px;
height: 28px;
font-size: 12px;
padding: 0 8px;
}
}
// 右侧操作按钮
> .btn-octicon {
display: flex;
align-items: center;
background: ${themeVars.color.button};
border: 1px solid ${themeVars.color.light.border};
height: 28px;
padding: 0 8px;
svg {
color: ${themeVars.color.text.light.num1};
}
&:first-of-type {
border-top-left-radius: ${otherThemeVars.border.radius};
border-bottom-left-radius: ${otherThemeVars.border.radius};
}
&:last-of-type {
border-top-right-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
}
&:hover {
background: ${themeVars.color.hover.self};
color: ${themeVars.color.text.light.num1};
}
}
}
}
}
// 头部提交信息
.ui.segment#repo-file-commit-box {
padding: 8px 12px;
margin-bottom: 8px !important;
margin-bottom: 16px !important;
min-height: 46px;
> .latest-commit {
gap: 8px;
.commit-summary {
color: ${themeVars.color.text.light.num1};
}
}
// 右侧提交时间
> .age {
@@ -253,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) {
@@ -272,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

@@ -1,18 +1,23 @@
import "./actions";
import "./chroma";
import "./clone";
import "./commit";
import "./dashboard";
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";
import "./signin";
import "./user";
import "./chroma";
import "./editor"

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,48 @@ 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,28 @@ 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 {
> .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

@@ -3,11 +3,14 @@ import { css } from "src/types/vars";
// 注册/登录界面
export const signIn = css`
.page-content.user.signin {
.ui.grid > .column {
width: 384px;
padding: 16px;
> .ui.container {
max-width: unset;
.ui.grid {
justify-content: center;
> .column {
width: 384px;
padding: 16px;
> .ui.container {
max-width: unset;
}
}
}
.ui.top.attached.header {
@@ -15,6 +18,7 @@ export const signIn = css`
font-size: 20px;
font-weight: 600;
background-color: unset !important;
text-align: center;
padding: 16px;
}
@@ -36,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

@@ -1,4 +1,4 @@
import { css, themeVars, otherThemeVars } from "src/types/vars";
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const attached = css`
// 设置右面板的内容

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,24 @@ 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;
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,
&:not(.emoji):last-of-type {
margin-bottom: 0.5rem;
margin-bottom: 8px;
}
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
@@ -46,9 +52,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 +90,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 +123,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 +223,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 +248,12 @@ 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};
}
}
`;

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,8 @@ export const input = css`
height: 32px;
}
// 由于输入框高度, 需要输入框在表单中垂直居中
.ui.form {
// 管理员页面仓库搜索表单
.ui.form#repo-search-form {
align-items: center;
}
`;

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

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

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

View File

@@ -5,16 +5,19 @@ 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"] {
border-radius: 12px;
}
&[data-theme="box-with-header"] {
.tippy-content {
background-color: ${themeVars.color.menu};
@@ -26,7 +29,7 @@ export const tippyBox = css`
// 差异对比中文件路径行右侧的三个点菜单
&[data-theme="menu"] {
.tippy-content {
padding: 0.5rem;
padding: 8px;
.item {
border-radius: ${otherThemeVars.border.radius};
&:hover {
@@ -35,5 +38,13 @@ export const tippyBox = css`
}
}
}
// 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
&[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,
@@ -37,6 +45,7 @@ export const colorblindDarkGithubColors: GithubColor = {
underlineNav: darkGithubColors.underlineNav,
contribution: darkGithubColors.contribution,
};
export const colorblindDarkPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#db6d28" },
@@ -67,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);
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,
@@ -37,6 +45,7 @@ export const colorblindLightGithubColors: GithubColor = {
underlineNav: lightGithubColors.underlineNav,
contribution: lightGithubColors.contribution,
};
export const colorblindLightPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#59636e", unmatched: "#762c00" },
@@ -67,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);
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,14 +61,18 @@ export const darkGithubColors: GithubColor = {
translucent: "#ffffff26",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } },
primary: {
fgColor: { accent: "#3fb950", rest: "#ffffff" },
bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#29903b" },
},
danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
star: { iconColor: "#e3b341" },
},
control: {
bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" } },
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
overlay: { backdrop: { bgColor: "#21283066" } },
underlineNav: { borderColor: { active: "#f78166" } },
contribution: {
@@ -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,14 +61,18 @@ export const lightGithubColors: GithubColor = {
translucent: "#1f232826",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } },
primary: {
fgColor: { accent: "#1a7f37", rest: "#ffffff" },
bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#1c8139" },
},
danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
star: { iconColor: "#eac54f" },
},
control: {
bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
},
shadow: { floating: { small: "#25292e0a" } },
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
overlay: { backdrop: { bgColor: "#c8d1da66" } },
underlineNav: { borderColor: { active: "#fd8c73" } },
contribution: {
@@ -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,14 +55,18 @@ export const softDarkGithubColors: GithubColor = {
translucent: "#cdd9e526",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
primary: {
fgColor: { accent: "#57ab5a", rest: "#ffffff" },
bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#3b8640" },
},
danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
star: { iconColor: "#daaa3f" },
},
control: {
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" } },
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
overlay: { backdrop: { bgColor: "#262c3666" } },
underlineNav: { borderColor: { active: "#ec775c" } },
contribution: {
@@ -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);