Compare commits

...

54 Commits

Author SHA1 Message Date
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
lutinglt
5037e46447 beta 2025-08-14 20:10:48 +08:00
lutinglt
cd2f7579b1 色盲主题打包 2025-08-14 20:02:57 +08:00
lutinglt
1b237b12f3 update readme 2025-08-14 19:59:57 +08:00
lutinglt
a8453a87a5 支持色盲主题 2025-08-14 19:59:08 +08:00
lutinglt
6aef26cdc8 重叠边框线, 避免过粗 2025-08-14 00:10:46 +08:00
lutinglt
a4c94cb34d 重叠边框线, 避免过粗 2025-08-14 00:09:38 +08:00
lutinglt
8c45f44309 查看代码文件页面文件树头部有时不会固定住 2025-08-13 23:35:03 +08:00
lutinglt
1c9b02ea88 查看代码文件页面路径栏有时内容不会居中 2025-08-13 22:44:19 +08:00
lutinglt
61313d5644 ci tag 2025-08-13 22:39:10 +08:00
52 changed files with 1666 additions and 446 deletions

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

@@ -1,11 +1,17 @@
## 🎉
### 🎉
## ✨ Feature
### ✨ Feature
#### CSS 变量
## 🌈 Style
### 🌈 Style
#### 更符合 GitHub 风格
##### 更符合 GitHub 风格
## 🐞 Fix
### 🐞 Fix
## 📃 English
#### CSS Variable
##### More GitHub-like style

73
.github/release.md vendored
View File

@@ -1,36 +1,55 @@
## 🎉 项目已毕业! (这是最后一版开发版本)
### ✨ Feature
目前项目的主要功能开发已全部完成, 进入维护阶段.
#### CSS 变量
维护阶段项目发版频率与 Gitea 发版频率保持一致, 版本号将与 Gitea 保持一致(不再附带时间戳).
- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
- 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度
每逢 Gitea 大版本更新时, 项目中间如有修复, 会发布当前版本的最后一个 `.latest` 版本. 之后会发布适配第一个大版本的 `.rc`
预发布版本, 问题不多时会发布正式版本, 正式版本之后的修复会等 Gitea 发布下一个小版本时再发布.
### 🌈 Style
## 🌈 Style
- 优化小型按钮的高度
- 一些列表栏的元素位置居中
- 优化创建仓库/派生仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致
- 优化消息右上角小图标样式
- 优化组织页面下的 RSS 订阅按钮样式
##### 更符合 GitHub 风格
#### 更符合 GitHub 风格
- 同步查看代码文件内容时的样式
- 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验)
- 略微减小导航栏创建仓库菜单按钮内的图标间隔
- 微调一些标签的字体大小
- 优化发布页面布局和下载列表样式
- 同步里程碑页面样式
- 同步顶部工单等仪表板样式
- 同步置顶 Issue 样式
- 同步订阅/关注页面样式
- 同步用户菜单样式
- 优化下拉菜单样式
- 同步差异对比页面文件名标题栏样式
- 同步分支菜单宽度
- 同步通知页面样式
- 优化仪表板的仓库组织切换按钮样式
- 同步仓库已标星的星星颜色
- 优化仪表板动态信息间隔
- 同步代码编辑器背景色和字体大小 (修复亮色模式下编辑器背景色问题) #12
- 同步查看代码文件内容页面/文件树样式 (包括滚动时固定的导航栏, 尽量与 GitHub 一致)
- 同步分页菜单样式
- 同步登录/注册页面样式
- 同步 Issue/PR 列表样式
- 同步 Issue/PR 详细页面侧边栏样式
- 同步仓库代码文件页 README 导航栏样式
- 同步用户点星仓库列表样式
- 优化私有标签样式
- 优化热力图和动态样式
- 优化仪表板仓库/组织列表样式
- 略微增加仓库代码文件列表的单行高度
### 🐞 Fix
## 🐞 Fix
- 修复红绿色盲主题的代码高亮色
- 修复仓库中文 README 时的按钮下划线长度
- 修复登录二次验证页面内容位置
- 修复后台管理的运维管理面板的样式
- 取消修改编辑器字体大小, 避免光标错位
- 修复文件预览时文件树右边框过粗
- 修复提交列表尾行圆角
- 修复 wiki 页面和组织页面的用户下拉菜单的圆角问题
- Action 作业步骤页面标题选中时滚动固定的高度
- 用户公开活动页动态布局
- 顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄
- 手机页面下注册/登录页导航栏注册按钮换行
## 📃 English (From AI)
### 🌈 Style
##### More GitHub-like style
- Improved code file viewing experience (scrolling to bottom no longer causes file tree content overlap)
### 🐞 Fix
- Fixed code highlight colors for red-green color blindness theme
- Fixed button underline length for Chinese README in repositories

View File

@@ -18,8 +18,10 @@ jobs:
- name: Create release
run: |
export TZ=Asia/Shanghai
TAG="v$(npm run -s version).$(date +%y%m%d%H%M)"
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
TAG="v$(npm run -s version)"
tar -zcf dist/theme-github-base.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG
env:
GH_TOKEN: ${{ github.token }}

View File

@@ -95,8 +95,8 @@ npm run commit
请在颜色主题文件头部附加自己的作者信息, 方便 Issue 提问者找到你 `@`.
推荐使用 `import { defineTheme } from "src"` 导入主题生成框架, 然后使用 `defineTheme` 函数生成主题,
defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明.
推荐使用 `import { defineTheme, type ThemeColor } from "src"` 导入主题生成框架, 声明主题颜色, 然后使用 `defineTheme`
函数生成主题所有 CSS 变量, defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明和定义.
颜色计算函数可以从 `src/functions` 导入, 例如 `import { scaleColorLight } from "src/functions"`, 或者使用 `polished` 库.
@@ -107,12 +107,15 @@ defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工
* @author 你的名字
* @description 主题描述
*/
import { defineTheme } from "src";
export default defineTheme({
import { defineTheme, type ThemeColor } from "src";
export const 主题名称DarkColors: ThemeColor = {
...
});
}
export default defineTheme(主题名称DarkColors);
// 使用其他主题颜色作为基础
import dark from "themes/dark";
import { darkColors } from "themes/dark";
export const 主题名称DarkColors: ThemeColor = darkColors;
export default defineTheme({
...dark,
...
@@ -130,17 +133,26 @@ export default defineTheme({
* @author 你的名字
* @description 主题描述
*/
import type { Theme } from "src";
import type { Theme, Chroma, Primary, Secondary, ... } from "src";
export const primary: Primary = ...;
export const secondary: Secondary =...;
export const chroma: Chroma =...;
...
export default theme: Theme = {
...
primary,
secondary,
chroma,
...
};
```
完成主题颜色开发后, 请在某个仓库的代码文件列表页, 打开 Code 菜单选择 Tea Cli 进行截图, 并放入 `screenshots`
目录下, 截图名与主题名相同. (推荐克隆 Github 的 actions/checkout 仓库, 该仓库信息较全, 避免泄露个人隐私)
目录下, 截图名与主题名相同. (推荐克隆本仓库, 避免泄露个人隐私)
然后将截图信息添加到 `README.md` 文件中, 可以在折叠部分中添加自己的说明.
主题颜色复用案例可以参考本主题的色盲主题.
## 主题样式贡献
主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因.

View File

@@ -1,11 +1,9 @@
# gitea-github-theme
<p align="center">
中文 |
<a href="./README_EN.md">English</a>
</p>
一个精致模仿 Github 风格的 Gitea 主题
> [!TIP]
>
> 推荐搭配文件图标浏览器插件一起使用更佳
> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
# Gitea GitHub Theme
## 版本号说明
@@ -15,7 +13,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,8 +44,14 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
## 截图
### 基本主题
```ini
THEMES = github-auto, github-light, github-dark, github-soft-dark
```
<details open>
<summary>GitHub</summary>
<summary>Base</summary>
<h4>theme-github-light.css</h4>
<img src="screenshots/light.png"/>
<h4>theme-github-dark.css</h4>
@@ -56,9 +60,19 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
<img src="screenshots/soft-dark.png"/>
</details>
### 色盲主题 ( Beta )
```ini
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
```
<details>
<summary>其他主题</summary>
等待贡献者ing...
<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>
## 自定义 CSS 变量
@@ -88,7 +102,9 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
| 变量名 | 描述 | 默认 | 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 | | |

136
README_EN.md Normal file
View File

@@ -0,0 +1,136 @@
<p align="center">
<a href="./README.md">中文</a> |
English
</p>
# Gitea GitHub Theme
## 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
### Basic Themes
```ini
THEMES = github-auto, github-light, github-dark, github-soft-dark
```
<details open>
<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>
## 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,7 @@
{
"name": "gitea-github-theme",
"version": "1.24.4",
"description": "A theme to make Gitea look and feel like GitHub",
"version": "1.24.6",
"description": "A sophisticated theme to make Gitea look and feel like GitHub",
"type": "module",
"scripts": {
"dev": "vite build --mode dev",

BIN
screenshots/colorblind-dark.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

BIN
screenshots/colorblind-light.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 KiB

BIN
screenshots/dark.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 KiB

After

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

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

BIN
screenshots/light.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 201 KiB

After

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 202 KiB

After

Width:  |  Height:  |  Size: 261 KiB

View File

@@ -1,36 +1,6 @@
import { prettylights2Chroma } from "./prettylights";
import { prettylights2Chroma, type prettylightsColor } from "./prettylights";
export const defaultDarkChroma = prettylights2Chroma({
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#f85149" },
carriage: { return: { bg: "#b62324", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#79c0ff",
constantOtherReferenceLink: "#a5d6ff",
entity: "#d2a8ff",
entityTag: "#7ee787",
invalid: { illegal: { bg: "#8e1519", text: "#f0f6fc" } },
keyword: "#ff7b72",
markup: {
bold: "#f0f6fc",
changed: { bg: "#5a1e02", text: "#ffdfb6" },
deleted: { bg: "#67060c", text: "#ffdcd7" },
heading: "#1f6feb",
ignored: { bg: "#1158c7", text: "#f0f6fc" },
inserted: { bg: "#033a16", text: "#aff5b4" },
italic: "#f0f6fc",
list: "#f2cc60",
},
metaDiffRange: "#d2a8ff",
storageModifierImport: "#f0f6fc",
string: "#a5d6ff",
stringRegexp: "#7ee787",
sublimelinterGutterMark: "#3d444d",
variable: "#ffa657",
},
});
export const defaultLightChroma = prettylights2Chroma({
export const lightPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#59636e", unmatched: "#82071e" },
carriage: { return: { bg: "#cf222e", text: "#f6f8fa" } },
@@ -58,4 +28,37 @@ export const defaultLightChroma = prettylights2Chroma({
sublimelinterGutterMark: "#818b98",
variable: "#953800",
},
});
};
export const darkPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#f85149" },
carriage: { return: { bg: "#b62324", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#79c0ff",
constantOtherReferenceLink: "#a5d6ff",
entity: "#d2a8ff",
entityTag: "#7ee787",
invalid: { illegal: { bg: "#8e1519", text: "#f0f6fc" } },
keyword: "#ff7b72",
markup: {
bold: "#f0f6fc",
changed: { bg: "#5a1e02", text: "#ffdfb6" },
deleted: { bg: "#67060c", text: "#ffdcd7" },
heading: "#1f6feb",
ignored: { bg: "#1158c7", text: "#f0f6fc" },
inserted: { bg: "#033a16", text: "#aff5b4" },
italic: "#f0f6fc",
list: "#f2cc60",
},
metaDiffRange: "#d2a8ff",
storageModifierImport: "#f0f6fc",
string: "#a5d6ff",
stringRegexp: "#7ee787",
sublimelinterGutterMark: "#3d444d",
variable: "#ffa657",
},
};
export const defaultLightChroma = prettylights2Chroma(lightPrettylights);
export const defaultDarkChroma = prettylights2Chroma(darkPrettylights);

View File

@@ -5,7 +5,7 @@ import { themeVars } from "src/types/vars";
import { defaultDarkChroma, defaultLightChroma } from "./chroma";
import type { Theme } from "./theme";
type ThemeColor = {
export type ThemeColor = {
/** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */
isDarkTheme: boolean;
/** 主色调(强调色) */
@@ -14,38 +14,41 @@ type ThemeColor = {
primaryContrast: string;
/** 副色调(边框色) */
secondary: string;
/** 色 */
red: string;
/** 色 */
orange: string;
/** 色 */
yellow: string;
/** 黄绿色/橄榄色 */
olive: string;
/** 绿色 */
green: string;
/** 绿色/青色(偏绿) */
teal: string;
/** 蓝绿色/青色(偏) */
cyan: string;
/** 蓝 */
blue: string;
/** 蓝紫色/紫罗兰色 */
violet: string;
/** 色 */
purple: string;
/** 粉红色 */
pink: string;
/** 色 */
brown: string;
/** 色 */
black: string;
/** 色 */
grey: string;
/** 色 */
gold: string;
/** 色 */
white: string;
/** 基础颜色 */
base: {
/** 色 */
red: string;
/** 色 */
orange: string;
/** 黄色 */
yellow: string;
/** 黄绿色/橄榄色 */
olive: string;
/** 绿色 */
green: string;
/** 蓝绿色/青色(偏绿) */
teal: string;
/** 蓝绿色/青色(偏蓝) */
cyan: string;
/** 蓝色 */
blue: string;
/** 蓝紫色/紫罗兰色 */
violet: string;
/** 色 */
purple: string;
/** 粉红色 */
pink: string;
/** 色 */
brown: string;
/** 色 */
black: string;
/** 色 */
grey: string;
/** 色 */
gold: string;
/** 白色 */
white: string;
};
/** Action 日志 */
console: Console;
/** 提交代码对比 */
@@ -81,7 +84,7 @@ 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 = {
@@ -161,161 +164,187 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
const named: Named = {
red: {
self: themeColor.red,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 15) : scaleColorLight(themeColor.red, 25),
self: themeColor.base.red,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.red, 15)
: scaleColorLight(themeColor.base.red, 25),
dark: {
num1: scaleColorLight(themeColor.red, -10),
num2: scaleColorLight(themeColor.red, -20),
num1: scaleColorLight(themeColor.base.red, -10),
num2: scaleColorLight(themeColor.base.red, -20),
},
badge: {
self: themeColor.red,
bg: rgba(themeColor.red, 0.1),
self: themeColor.base.red,
bg: rgba(themeColor.base.red, 0.1),
hover: {
bg: rgba(themeColor.red, 0.3),
bg: rgba(themeColor.base.red, 0.3),
},
},
},
orange: {
self: themeColor.orange,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 15) : scaleColorLight(themeColor.orange, 25),
self: themeColor.base.orange,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.orange, 15)
: scaleColorLight(themeColor.base.orange, 25),
dark: {
num1: scaleColorLight(themeColor.orange, -10),
num2: scaleColorLight(themeColor.orange, -20),
num1: scaleColorLight(themeColor.base.orange, -10),
num2: scaleColorLight(themeColor.base.orange, -20),
},
badge: {
self: themeColor.orange,
bg: rgba(themeColor.orange, 0.1),
self: themeColor.base.orange,
bg: rgba(themeColor.base.orange, 0.1),
hover: {
bg: rgba(themeColor.orange, 0.3),
bg: rgba(themeColor.base.orange, 0.3),
},
},
},
yellow: {
self: themeColor.yellow,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 15) : scaleColorLight(themeColor.yellow, 25),
self: themeColor.base.yellow,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.yellow, 15)
: scaleColorLight(themeColor.base.yellow, 25),
dark: {
num1: scaleColorLight(themeColor.yellow, -10),
num2: scaleColorLight(themeColor.yellow, -20),
num1: scaleColorLight(themeColor.base.yellow, -10),
num2: scaleColorLight(themeColor.base.yellow, -20),
},
badge: {
self: themeColor.yellow,
bg: rgba(themeColor.yellow, 0.1),
self: themeColor.base.yellow,
bg: rgba(themeColor.base.yellow, 0.1),
hover: {
bg: rgba(themeColor.yellow, 0.3),
bg: rgba(themeColor.base.yellow, 0.3),
},
},
},
olive: {
self: themeColor.olive,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 15) : scaleColorLight(themeColor.olive, 25),
self: themeColor.base.olive,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.olive, 15)
: scaleColorLight(themeColor.base.olive, 25),
dark: {
num1: scaleColorLight(themeColor.olive, -10),
num2: scaleColorLight(themeColor.olive, -20),
num1: scaleColorLight(themeColor.base.olive, -10),
num2: scaleColorLight(themeColor.base.olive, -20),
},
},
green: {
self: themeColor.green,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 15) : scaleColorLight(themeColor.green, 25),
self: themeColor.base.green,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.green, 15)
: scaleColorLight(themeColor.base.green, 25),
dark: {
num1: scaleColorLight(themeColor.green, -10),
num2: scaleColorLight(themeColor.green, -20),
num1: scaleColorLight(themeColor.base.green, -10),
num2: scaleColorLight(themeColor.base.green, -20),
},
badge: {
self: themeColor.green,
bg: rgba(themeColor.green, 0.1),
self: themeColor.base.green,
bg: rgba(themeColor.base.green, 0.1),
hover: {
bg: rgba(themeColor.green, 0.3),
bg: rgba(themeColor.base.green, 0.3),
},
},
},
teal: {
self: themeColor.teal,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 15) : scaleColorLight(themeColor.teal, 25),
self: themeColor.base.teal,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.teal, 15)
: scaleColorLight(themeColor.base.teal, 25),
dark: {
num1: scaleColorLight(themeColor.teal, -10),
num2: scaleColorLight(themeColor.teal, -20),
num1: scaleColorLight(themeColor.base.teal, -10),
num2: scaleColorLight(themeColor.base.teal, -20),
},
},
blue: {
self: themeColor.blue,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 15) : scaleColorLight(themeColor.blue, 25),
self: themeColor.base.blue,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.blue, 15)
: scaleColorLight(themeColor.base.blue, 25),
dark: {
num1: scaleColorLight(themeColor.blue, -10),
num2: scaleColorLight(themeColor.blue, -20),
num1: scaleColorLight(themeColor.base.blue, -10),
num2: scaleColorLight(themeColor.base.blue, -20),
},
},
violet: {
self: themeColor.violet,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 15) : scaleColorLight(themeColor.violet, 25),
self: themeColor.base.violet,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.violet, 15)
: scaleColorLight(themeColor.base.violet, 25),
dark: {
num1: scaleColorLight(themeColor.violet, -10),
num2: scaleColorLight(themeColor.violet, -20),
num1: scaleColorLight(themeColor.base.violet, -10),
num2: scaleColorLight(themeColor.base.violet, -20),
},
},
purple: {
self: themeColor.purple,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 15) : scaleColorLight(themeColor.purple, 25),
self: themeColor.base.purple,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.purple, 15)
: scaleColorLight(themeColor.base.purple, 25),
dark: {
num1: scaleColorLight(themeColor.purple, -10),
num2: scaleColorLight(themeColor.purple, -20),
num1: scaleColorLight(themeColor.base.purple, -10),
num2: scaleColorLight(themeColor.base.purple, -20),
},
},
pink: {
self: themeColor.pink,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 15) : scaleColorLight(themeColor.pink, 25),
self: themeColor.base.pink,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.pink, 15)
: scaleColorLight(themeColor.base.pink, 25),
dark: {
num1: scaleColorLight(themeColor.pink, -10),
num2: scaleColorLight(themeColor.pink, -20),
num1: scaleColorLight(themeColor.base.pink, -10),
num2: scaleColorLight(themeColor.base.pink, -20),
},
},
brown: {
self: themeColor.brown,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 15) : scaleColorLight(themeColor.brown, 25),
self: themeColor.base.brown,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.brown, 15)
: scaleColorLight(themeColor.base.brown, 25),
dark: {
num1: scaleColorLight(themeColor.brown, -10),
num2: scaleColorLight(themeColor.brown, -20),
num1: scaleColorLight(themeColor.base.brown, -10),
num2: scaleColorLight(themeColor.base.brown, -20),
},
},
black: {
self: themeColor.black,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 15) : scaleColorLight(themeColor.black, 25),
self: themeColor.base.black,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.black, 15)
: scaleColorLight(themeColor.base.black, 25),
dark: {
num1: scaleColorLight(themeColor.black, -10),
num2: scaleColorLight(themeColor.black, -20),
num1: scaleColorLight(themeColor.base.black, -10),
num2: scaleColorLight(themeColor.base.black, -20),
},
},
grey: {
self: themeColor.grey,
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 15) : scaleColorLight(themeColor.grey, 25),
self: themeColor.base.grey,
light: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.grey, 15)
: scaleColorLight(themeColor.base.grey, 25),
},
gold: themeColor.gold,
white: themeColor.white,
gold: themeColor.base.gold,
white: themeColor.base.white,
};
const message: Message = {
error: {
bg: {
self: rgba(themeColor.red, 0.1),
active: rgba(themeColor.red, 0.5),
hover: rgba(themeColor.red, 0.3),
self: rgba(themeColor.base.red, 0.1),
active: rgba(themeColor.base.red, 0.5),
hover: rgba(themeColor.base.red, 0.3),
},
border: rgba(themeColor.red, 0.4),
text: saturate(0.2, themeColor.red), // 饱和度提高
border: rgba(themeColor.base.red, 0.4),
text: saturate(0.2, themeColor.base.red), // 饱和度提高
},
success: {
bg: rgba(themeColor.green, 0.1),
border: rgba(themeColor.green, 0.4),
text: saturate(0.2, themeColor.green),
bg: rgba(themeColor.base.green, 0.1),
border: rgba(themeColor.base.green, 0.4),
text: saturate(0.2, themeColor.base.green),
},
warning: {
bg: rgba(themeColor.yellow, 0.1),
border: rgba(themeColor.yellow, 0.4),
text: saturate(0.2, themeColor.yellow),
bg: rgba(themeColor.base.yellow, 0.1),
border: rgba(themeColor.base.yellow, 0.4),
text: saturate(0.2, themeColor.base.yellow),
},
info: {
bg: rgba(themeColor.blue, 0.1),
border: rgba(themeColor.blue, 0.4),
text: saturate(0.2, themeColor.blue),
bg: rgba(themeColor.base.blue, 0.1),
border: rgba(themeColor.base.blue, 0.4),
text: saturate(0.2, themeColor.base.blue),
},
};
@@ -326,7 +355,7 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null
yellow: themeVars.color.yellow.self,
blue: themeVars.color.blue.self,
magenta: themeVars.color.pink.self,
cyan: themeColor.cyan,
cyan: themeColor.base.cyan,
white: themeVars.color.console.fg.subtle,
bright: {
black: themeVars.color.black.light,
@@ -335,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.cyan, 10) : scaleColorLight(themeColor.cyan, 25),
cyan: themeColor.isDarkTheme
? scaleColorLight(themeColor.base.cyan, 10)
: scaleColorLight(themeColor.base.cyan, 25),
white: themeVars.color.console.fg.self,
},
};

View File

@@ -1,10 +1,9 @@
import { saturate } from "polished";
import type { Console, Diff, Other } from "src";
import { scaleColorLight } from "src/functions";
import type { Chroma, Github } from "src/types";
import type { Github } from "src/types";
import { themeVars } from "src/types/vars";
import { defineTheme } from "./color";
import type { Theme } from "./theme";
import { type ThemeColor } from "./color";
export type GithubColor = {
isDarkTheme: boolean;
@@ -61,6 +60,7 @@ export type GithubColor = {
button: {
primary: { fgColor: { rest: string }; bgColor: { hover: string } };
danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } };
star: { iconColor: string };
};
control: {
bgColor: { active: string; hover: string; rest: string };
@@ -77,7 +77,7 @@ export type GithubColor = {
};
};
export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | null = null): Theme {
export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
const console: Console = {
fg: {
self: githubColor.fgColor.default,
@@ -282,6 +282,9 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul
hover: githubColor.borderColor.translucent,
},
},
star: {
iconColor: githubColor.button.star.iconColor,
},
},
control: {
bgColor: {
@@ -327,12 +330,12 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul
},
},
};
return defineTheme(
{
isDarkTheme: githubColor.isDarkTheme,
primary: githubColor.fgColor.accent,
primaryContrast: githubColor.fgColor.default,
secondary: githubColor.borderColor.default,
return {
isDarkTheme: githubColor.isDarkTheme,
primary: githubColor.fgColor.accent,
primaryContrast: githubColor.fgColor.default,
secondary: githubColor.borderColor.default,
base: {
red: githubColor.fgColor.danger,
orange: githubColor.fgColor.severe,
yellow: githubColor.fgColor.attention,
@@ -349,11 +352,10 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul
grey: githubColor.fgColor.neutral,
gold: githubColor.display.lemon.fgColor,
white: githubColor.fgColor.white,
console,
diff,
other,
github,
},
chroma
);
console,
diff,
other,
github,
};
}

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,4 +1,5 @@
export { defineTheme } from "./core/color";
export { defaultDarkChroma, defaultLightChroma } from "./core/chroma";
export { defineTheme, type ThemeColor } from "./core/color";
export type { Theme } from "./core/theme";
export type { Chroma, Console, Diff, Github, Other } from "./types";
export type { Ansi, Chroma, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "./types";
export { otherThemeVars, themeVars } from "./types/vars";

View File

@@ -37,6 +37,7 @@ export const github = {
* @repo `repoTopic` 仓库主题标签背景颜色
* @actions `actions` 分支标签按钮背景颜色
* @actions `actionViewHeader` 分支标签按钮背景颜色
* @notification `notification` 通知列表悬停时的背景颜色
*/
muted: null,
},
@@ -62,6 +63,7 @@ export const github = {
* @issue `comment` 评论框被选中时的边框颜色
* @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
* @dropdown `selectionDropdown` 选择输入框的内部边框颜色
* @notification `notification` 通知列表悬停时的左边框颜色
*/
emphasis: null,
},
@@ -158,6 +160,10 @@ export const github = {
hover: null,
},
},
star: {
/** 已标星的星星颜色 */
iconColor: null,
},
},
control: {
bgColor: {
@@ -180,6 +186,7 @@ export const github = {
* @issue `issueSidebar` 操作按钮的悬停背景颜色
* @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
* @dashboard `dashboard` 仓库列表项目的悬停背景颜色
* @notification `notification` 通知列表的按钮悬停背景颜色
*/
hover: null,
},

View File

@@ -33,7 +33,9 @@ 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" },

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};
}
}
}
}
@@ -64,3 +78,59 @@ 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;
}
}
`;

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 留出足够的空间
}
}
}
@@ -96,6 +96,8 @@ export const repoFiles = css`
}
.file-header-left {
padding: 6px 8px !important;
// 伪元素宽度等于按钮宽度而不是父元素宽度
position: relative;
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
border-radius: ${otherThemeVars.border.radius};
@@ -104,11 +106,11 @@ export const repoFiles = css`
content: "";
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
bottom: 0;
bottom: -8px;
left: 0;
height: 2px;
position: absolute;
left: 12px;
width: 113px;
width: 100%;
}
a.muted:hover {
color: inherit;
@@ -146,69 +148,179 @@ 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));
}
.repo-view-container {
position: sticky;
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 {
height: 32px;
margin: 16px 0;
align-content: center;
background: ${themeVars.color.body};
font-size: 16px;
height: 64px;
margin: 0;
// 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除
position: sticky;
top: 0;
&:after {
content: "";
position: absolute;
top: 32px + 32px;
top: 64px;
left: -16px;
width: calc(100% + 16px);
height: 1px;
background: ${themeVars.color.secondary.self};
}
.ui.compact.icon.button {
border: 0;
}
}
.view-file-tree-items {
margin-right: 0;
padding: 12px 16px 8px 0;
}
}
// 右侧文件视图内容
.repo-view-content {
padding-bottom: 40px;
.repo-button-row {
align-items: center;
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: 46px;
// 重叠边框线, 避免过粗
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 {
@@ -262,7 +374,7 @@ export const repoSidebarTop = css`
.flex-item {
padding: 10px 0 0 0;
.flex-item-title {
margin-top: 2px;
margin-top: 4px;
}
.flex-item-body {
padding: 8px 0 0 0;

View File

@@ -74,7 +74,11 @@ export const activity = css`
}
> .flex-item-main {
gap: 8px !important;
> div:not([class]) {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
relative-time {
color: ${themeVars.color.text.light.num1};
}

View File

@@ -1,18 +1,20 @@
import "./actions";
import "./chroma";
import "./clone";
import "./commit";
import "./dashboard";
import "./diff";
import "./editor";
import "./explore";
import "./filelist";
import "./heatmap";
import "./issue";
import "./milestones";
import "./newrepo";
import "./notification";
import "./org";
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 {
@@ -53,7 +56,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 +82,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 +109,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: 14px;
.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;
}
}
}
`;

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

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

@@ -41,53 +41,111 @@ 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: 14px 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;
}
}
}
}
}
}
}

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

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

@@ -91,11 +91,25 @@ export const redButton = css`
// 修复按钮高度
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;
}

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,18 @@ export const dropdown = css`
> .item:not(.tw-hidden) {
display: flex !important;
align-items: center;
gap: 0.5rem;
padding: 8px 10px !important;
padding: 6px 8px !important;
border-radius: ${otherThemeVars.border.radius} !important;
&:not(.emoji) {
margin: 0 0.5rem;
margin: 0 8px;
}
&:not(.emoji):first-of-type {
margin-top: 0.5rem;
margin-top: 8px;
}
// 不知道为什么提交差异对比页面操作中的 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 +46,17 @@ export const dropdown = css`
${activeItemAfterStyle};
}
}
svg {
margin-top: 2px;
margin-right: 8px;
}
// 复选框对齐
.ui.checkbox input[type="checkbox"] {
height: 100%;
}
}
> .divider {
margin: 0.5rem 0;
margin: 8px 0;
}
&:after {
display: none !important;
@@ -58,18 +66,26 @@ 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;
}
// 修复下拉菜单元素溢出问题
// 用户菜单
.user-menu>.item,
@@ -187,8 +203,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

@@ -13,3 +13,4 @@ import "./modal"; // 弹窗
import "./tippy"; // 提示框
import "./navbar"; // 导航栏
import "./attached"; // 附加样式
import "./other"; // 其他样式

View File

@@ -67,6 +67,12 @@ export const label = css`
}
}
}
.ui.small.label {
font-size: 12px;
}
.ui.mini.label {
font-size: 10px;
}
`;
// 提交中的 SHA 标签

View File

@@ -236,3 +236,53 @@ 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.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;
}
}
}
}
}
`;

View File

@@ -1,4 +1,5 @@
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 {
@@ -35,7 +36,7 @@ export const navbarRight = css`
grid-auto-flow: column;
align-items: center;
> svg {
margin-right: 8px;
margin-right: 4px;
}
// 三角号纠正高度保持居中
.not-mobile {
@@ -91,6 +92,24 @@ export const navbarRight = css`
}
}
}
// 用户菜单
.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) {

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

@@ -0,0 +1,75 @@
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { darkGithubColors } from "themes/dark";
export const colorblindDarkGithubColors: GithubColor = {
isDarkTheme: true,
display: darkGithubColors.display,
diffBlob: {
addtionNum: { bgColor: "#58a6ff4d" },
addtionWord: { bgColor: "#388bfd66" },
deletionNum: { bgColor: "#db6d284d" },
deletionWord: { bgColor: "#db6d2866" },
hunkNum: { bgColor: { rest: "#2f3742" } },
},
fgColor: {
...darkGithubColors.fgColor,
danger: "#f0883e",
success: "#58a6ff",
},
bgColor: {
...darkGithubColors.bgColor,
danger: { muted: "#db6d281a" },
success: { emphasis: "#1f6feb", muted: "#388bfd33" },
},
borderColor: {
...darkGithubColors.borderColor,
success: { emphasis: "#1f6feb" },
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } },
danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } },
star: darkGithubColors.button.star,
},
control: darkGithubColors.control,
shadow: darkGithubColors.shadow,
overlay: darkGithubColors.overlay,
underlineNav: darkGithubColors.underlineNav,
contribution: darkGithubColors.contribution,
};
export const colorblindDarkPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#db6d28" },
carriage: { return: { bg: "#9b4215", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#79c0ff",
constantOtherReferenceLink: "#a5d6ff",
entity: "#d2a8ff",
entityTag: "#a5d6ff",
invalid: { illegal: { bg: "#762d0a", text: "#f0f6fc" } },
keyword: "#f0883e",
markup: {
bold: "#f0f6fc",
changed: { bg: "#5a1e02", text: "#ffdfb6" },
deleted: { bg: "#5a1e02", text: "#ffdfb6" },
heading: "#1f6feb",
ignored: { bg: "#1158c7", text: "#f0f6fc" },
inserted: { bg: "#0c2d6b", text: "#cae8ff" },
italic: "#f0f6fc",
list: "#f2cc60",
},
metaDiffRange: "#d2a8ff",
storageModifierImport: "#f0f6fc",
string: "#a5d6ff",
stringRegexp: "#a5d6ff",
sublimelinterGutterMark: "#3d444d",
variable: "#ffa657",
},
};
export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors);
export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights);
export default defineTheme(colorblindDarkColors, colorblindDarkChroma);

View File

@@ -0,0 +1,75 @@
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { lightGithubColors } from "themes/light";
export const colorblindLightGithubColors: GithubColor = {
isDarkTheme: false,
display: lightGithubColors.display,
diffBlob: {
addtionNum: { bgColor: "#b6e3ff" },
addtionWord: { bgColor: "#b6e3ff" },
deletionNum: { bgColor: "#ffd8b5" },
deletionWord: { bgColor: "#ffd8b5" },
hunkNum: { bgColor: { rest: "#e6eaef" } },
},
fgColor: {
...lightGithubColors.fgColor,
danger: "#bc4c00",
success: "#0969da",
},
bgColor: {
...lightGithubColors.bgColor,
danger: { muted: "#fff1e5" },
success: { emphasis: "#0969da", muted: "#ddf4ff" },
},
borderColor: {
...lightGithubColors.borderColor,
success: { emphasis: "#0969da" },
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } },
danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } },
star: lightGithubColors.button.star,
},
control: lightGithubColors.control,
shadow: lightGithubColors.shadow,
overlay: lightGithubColors.overlay,
underlineNav: lightGithubColors.underlineNav,
contribution: lightGithubColors.contribution,
};
export const colorblindLightPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#59636e", unmatched: "#762c00" },
carriage: { return: { bg: "#bc4c00", text: "#f6f8fa" } },
comment: "#59636e",
constant: "#0550ae",
constantOtherReferenceLink: "#0a3069",
entity: "#6639ba",
entityTag: "#0550ae",
invalid: { illegal: { bg: "#762c00", text: "#f6f8fa" } },
keyword: "#bc4c00",
markup: {
bold: "#1f2328",
changed: { bg: "#ffd8b5", text: "#953800" },
deleted: { bg: "#fff1e5", text: "#762c00" },
heading: "#0550ae",
ignored: { bg: "#0550ae", text: "#d1d9e0" },
inserted: { bg: "#ddf4ff", text: "#0550ae" },
italic: "#1f2328",
list: "#3b2300",
},
metaDiffRange: "#8250df",
storageModifierImport: "#1f2328",
string: "#0a3069",
stringRegexp: "#0550ae",
sublimelinterGutterMark: "#818b98",
variable: "#953800",
},
};
export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors);
export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights);
export default defineTheme(colorblindLightColors, colorblindLightChroma);

View File

@@ -1,6 +1,7 @@
import { defineGithubTheme } from "src/core/github";
import { defineTheme, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
export default defineGithubTheme({
export const darkGithubColors: GithubColor = {
isDarkTheme: true,
display: {
brown: { fgColor: "#b69a6d" },
@@ -22,7 +23,7 @@ export default defineGithubTheme({
attention: "#d29922",
danger: "#f85149",
default: "#f0f6fc",
disabled: "#656c7699",
disabled: "#656c76",
done: "#ab7df8",
muted: "#9198a1",
neutral: "#9198a1",
@@ -35,26 +36,27 @@ export default defineGithubTheme({
bgColor: {
accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
attention: { muted: "#bb800926" },
success: { emphasis: "#238636", muted: "#2ea04326" },
danger: { muted: "#f851491a" },
done: { emphasis: "#8957e5" },
default: "#0d1117",
inset: "#010409",
done: { emphasis: "#8957e5" },
muted: "#151b23",
neutral: { muted: "#656c7633" },
success: { emphasis: "#238636", muted: "#2ea04326" },
inset: "#010409",
},
borderColor: {
accent: { emphasis: "#1f6feb" },
default: "#3d444d",
attention: { emphasis: "#9e6a03" },
success: { emphasis: "#238636" },
default: "#3d444d",
done: { emphasis: "#8957e5" },
success: { emphasis: "#238636" },
muted: "#3d444db3",
translucent: "#ffffff26",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } },
danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
star: { iconColor: "#e3b341" },
},
control: {
bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
@@ -69,4 +71,8 @@ export default defineGithubTheme({
borderColor: { num0: "#0104090d" },
},
},
});
};
export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors);
export default defineTheme(darkColors);

View File

@@ -1,6 +1,7 @@
import { defineGithubTheme } from "src/core/github";
import { defineTheme, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
export default defineGithubTheme({
export const lightGithubColors: GithubColor = {
isDarkTheme: false,
display: {
brown: { fgColor: "#755f43" },
@@ -35,26 +36,27 @@ export default defineGithubTheme({
bgColor: {
accent: { emphasis: "#0969da", muted: "#ddf4ff" },
attention: { muted: "#fff8c5" },
success: { emphasis: "#1f883d", muted: "#dafbe1" },
danger: { muted: "#ffebe9" },
done: { emphasis: "#8250df" },
default: "#ffffff",
inset: "#f6f8fa",
done: { emphasis: "#8250df" },
muted: "#f6f8fa",
neutral: { muted: "#818b981f" },
success: { emphasis: "#1f883d", muted: "#dafbe1" },
inset: "#f6f8fa",
},
borderColor: {
accent: { emphasis: "#0969da" },
default: "#d1d9e0",
attention: { emphasis: "#9a6700" },
success: { emphasis: "#1a7f37" },
default: "#d1d9e0",
done: { emphasis: "#8250df" },
success: { emphasis: "#1a7f37" },
muted: "#d1d9e0b3",
translucent: "#1f232826",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } },
danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
star: { iconColor: "#eac54f" },
},
control: {
bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
@@ -69,4 +71,8 @@ export default defineGithubTheme({
borderColor: { num0: "#1f23280d" },
},
},
});
};
export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors);
export default defineTheme(lightColors);

View File

@@ -1,104 +1,104 @@
import { defineGithubTheme } from "src/core/github";
import { prettylights2Chroma } from "src/core/prettylights";
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { darkGithubColors } from "themes/dark";
export default defineGithubTheme(
{
isDarkTheme: true,
display: {
brown: { fgColor: "#b69a6d" },
cyan: { fgColor: "#07ace4" },
indigo: { fgColor: "#9899ec" },
lemon: { fgColor: "#ba9b12" },
olive: { fgColor: "#a2a626" },
teal: { fgColor: "#1cb0ab" },
},
diffBlob: {
addtionNum: { bgColor: "#57ab5a4d" },
addtionWord: { bgColor: "#46954a66" },
deletionNum: { bgColor: "#e5534b4d" },
deletionWord: { bgColor: "#e5534b66" },
hunkNum: { bgColor: { rest: "#143d79" } },
},
fgColor: {
accent: "#478be6",
attention: "#c69026",
danger: "#e5534b",
default: "#d1d7e0",
disabled: "#656c76",
done: "#986ee2",
muted: "#9198a1",
neutral: "#9198a1",
severe: "#cc6b2c",
sponsors: "#c96198",
success: "#57ab5a",
black: "#010409",
white: "#cdd9e5",
},
bgColor: {
accent: { emphasis: "#316dca", muted: "#4184e41a" },
attention: { muted: "#ae7c1426" },
success: { emphasis: "#347d39", muted: "#46954a26" },
danger: { muted: "#e5534b1a" },
done: { emphasis: "#8256d0" },
default: "#212830",
inset: "#151b23",
muted: "#262c36",
neutral: { muted: "#656c7633" },
},
borderColor: {
accent: { emphasis: "#316dca" },
default: "#3d444d",
attention: { emphasis: "#966600" },
success: { emphasis: "#347d39" },
done: { emphasis: "#8256d0" },
muted: "#3d444db3",
translucent: "#cdd9e526",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
},
control: {
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" } },
overlay: { backdrop: { bgColor: "#262c3666" } },
underlineNav: { borderColor: { active: "#ec775c" } },
contribution: {
default: {
bgColor: { num0: "#2a313c", num1: "#1b4721", num2: "#2b6a30", num3: "#46954a", num4: "#6bc46d" },
borderColor: { num0: "#0104090d" },
},
export const softDarkGithubColors: GithubColor = {
isDarkTheme: true,
display: darkGithubColors.display,
diffBlob: {
addtionNum: { bgColor: "#57ab5a4d" },
addtionWord: { bgColor: "#46954a66" },
deletionNum: { bgColor: "#e5534b4d" },
deletionWord: { bgColor: "#e5534b66" },
hunkNum: { bgColor: { rest: "#143d79" } },
},
fgColor: {
accent: "#478be6",
attention: "#c69026",
danger: "#e5534b",
default: "#d1d7e0",
disabled: "#656c76",
done: "#986ee2",
muted: "#9198a1",
neutral: "#9198a1",
severe: "#cc6b2c",
sponsors: "#c96198",
success: "#57ab5a",
black: "#010409",
white: "#cdd9e5",
},
bgColor: {
accent: { emphasis: "#316dca", muted: "#4184e41a" },
attention: { muted: "#ae7c1426" },
danger: { muted: "#e5534b1a" },
default: "#212830",
done: { emphasis: "#8256d0" },
muted: "#262c36",
neutral: { muted: "#656c7633" },
success: { emphasis: "#347d39", muted: "#46954a26" },
inset: "#151b23",
},
borderColor: {
accent: { emphasis: "#316dca" },
attention: { emphasis: "#966600" },
default: "#3d444d",
done: { emphasis: "#8256d0" },
success: { emphasis: "#347d39" },
muted: "#3d444db3",
translucent: "#cdd9e526",
},
button: {
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
star: { iconColor: "#daaa3f" },
},
control: {
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" } },
overlay: { backdrop: { bgColor: "#262c3666" } },
underlineNav: { borderColor: { active: "#ec775c" } },
contribution: {
default: {
bgColor: { num0: "#2a313c", num1: "#1b4721", num2: "#2b6a30", num3: "#46954a", num4: "#6bc46d" },
borderColor: { num0: "#0104090d" },
},
},
prettylights2Chroma({
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#e5534b" },
carriage: { return: { bg: "#ad2e2c", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#6cb6ff",
constantOtherReferenceLink: "#96d0ff",
entity: "#dcbdfb",
entityTag: "#8ddb8c",
invalid: { illegal: { bg: "#922323", text: "#f0f6fc" } },
keyword: "#f47067",
markup: {
bold: "#f0f6fc",
changed: { bg: "#682d0f", text: "#ffddb0" },
deleted: { bg: "#78191b", text: "#ffd8d3" },
heading: "#316dca",
ignored: { bg: "#255ab2", text: "#f0f6fc" },
inserted: { bg: "#1b4721", text: "#b4f1b4" },
italic: "#f0f6fc",
list: "#eac55f",
},
metaDiffRange: "#dcbdfb",
storageModifierImport: "#f0f6fc",
string: "#96d0ff",
stringRegexp: "#8ddb8c",
sublimelinterGutterMark: "#3d444d",
variable: "#f69d50",
};
export const softDarkPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#e5534b" },
carriage: { return: { bg: "#ad2e2c", text: "#f0f6fc" } },
comment: "#9198a1",
constant: "#6cb6ff",
constantOtherReferenceLink: "#96d0ff",
entity: "#dcbdfb",
entityTag: "#8ddb8c",
invalid: { illegal: { bg: "#922323", text: "#f0f6fc" } },
keyword: "#f47067",
markup: {
bold: "#f0f6fc",
changed: { bg: "#682d0f", text: "#ffddb0" },
deleted: { bg: "#78191b", text: "#ffd8d3" },
heading: "#316dca",
ignored: { bg: "#255ab2", text: "#f0f6fc" },
inserted: { bg: "#1b4721", text: "#b4f1b4" },
italic: "#f0f6fc",
list: "#eac55f",
},
})
);
metaDiffRange: "#dcbdfb",
storageModifierImport: "#f0f6fc",
string: "#96d0ff",
stringRegexp: "#8ddb8c",
sublimelinterGutterMark: "#3d444d",
variable: "#f69d50",
},
};
export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors);
export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights);
export default defineTheme(softDarkColors, softDarkChroma);

View File

@@ -0,0 +1,45 @@
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { darkPrettylights } from "src/core/chroma";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { colorblindDarkGithubColors, colorblindDarkPrettylights } from "themes/colorblind-dark";
import { darkGithubColors } from "themes/dark";
export const tritanopiaDarkGithubColors: GithubColor = {
...colorblindDarkGithubColors,
diffBlob: {
...colorblindDarkGithubColors.diffBlob,
deletionNum: darkGithubColors.diffBlob.deletionNum,
deletionWord: darkGithubColors.diffBlob.deletionWord,
},
fgColor: {
...colorblindDarkGithubColors.fgColor,
danger: darkGithubColors.fgColor.danger,
},
bgColor: {
...colorblindDarkGithubColors.bgColor,
danger: darkGithubColors.bgColor.danger,
},
button: {
...colorblindDarkGithubColors.button,
danger: darkGithubColors.button.danger,
},
};
export const tritanopiaDarkPrettylights: prettylightsColor = {
syntax: {
...darkPrettylights.syntax,
markup: {
...darkPrettylights.syntax.markup,
changed: { bg: "#67060c", text: "#ffdcd7" },
inserted: colorblindDarkPrettylights.syntax.markup.inserted,
},
stringRegexp: colorblindDarkPrettylights.syntax.stringRegexp,
variable: "#ffa198",
},
};
export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors);
export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights);
export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma);

View File

@@ -0,0 +1,45 @@
import { defineTheme, type Chroma, type ThemeColor } from "src";
import { lightPrettylights } from "src/core/chroma";
import { github2ThemeColor, type GithubColor } from "src/core/github";
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
import { colorblindLightGithubColors, colorblindLightPrettylights } from "themes/colorblind-light";
import { lightGithubColors } from "themes/light";
export const tritanopiaLightGithubColors: GithubColor = {
...colorblindLightGithubColors,
diffBlob: {
...colorblindLightGithubColors.diffBlob,
deletionNum: lightGithubColors.diffBlob.deletionNum,
deletionWord: lightGithubColors.diffBlob.deletionWord,
},
fgColor: {
...colorblindLightGithubColors.fgColor,
danger: lightGithubColors.fgColor.danger,
},
bgColor: {
...colorblindLightGithubColors.bgColor,
danger: lightGithubColors.bgColor.danger,
},
button: {
...colorblindLightGithubColors.button,
danger: lightGithubColors.button.danger,
},
};
export const tritanopiaLightPrettylights: prettylightsColor = {
syntax: {
...lightPrettylights.syntax,
markup: {
...lightPrettylights.syntax.markup,
changed: { bg: "#ffcecb", text: "#a40e26" },
inserted: colorblindLightPrettylights.syntax.markup.inserted,
},
stringRegexp: colorblindLightPrettylights.syntax.stringRegexp,
variable: "#a40e26",
},
};
export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors);
export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights);
export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma);