Compare commits

..

33 Commits

Author SHA1 Message Date
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
33 changed files with 734 additions and 85 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

41
.github/release.md vendored
View File

@@ -1,8 +1,39 @@
## ✨ Feature
### 🌈 Style
- 支持色盲主题(Beta) ( 红绿色盲和蓝色盲 ) ( Colorblind & Tritanopia )
- 优化小型按钮的高度
- 一些列表栏的元素位置居中
## 🐞 Fix
##### 更符合 GitHub 风格
- 查看代码文件页面路径栏有时内容不会居中
- 查看代码文件页面文件树头部滚动到底部时不会固定住
- 同步查看代码文件内容时的样式
- 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验)
- 略微减小导航栏创建仓库菜单按钮内的图标间隔
- 微调一些标签的字体大小
- 优化发布页面布局和下载列表样式
- 同步里程碑页面样式
- 同步顶部工单等仪表板样式
- 同步置顶 Issue 样式
- 同步订阅页面样式
### 🐞 Fix
- 修复红绿色盲主题的代码高亮色
- 修复仓库中文 README 时的按钮下划线长度
- 修复登录二次验证页面内容位置
- 修复后台管理的运维管理面板的样式
- 取消修改编辑器字体大小, 避免光标错位
- 修复文件预览时文件树右边框过粗
- 修复提交列表尾行圆角
## 📃 English (From AI)
### 🌈 Style
##### More GitHub-like style
- Improved code file viewing experience (scrolling to bottom no longer causes file tree content overlap)
### 🐞 Fix
- Fixed code highlight colors for red-green color blindness theme
- Fixed button underline length for Chinese README in repositories

View File

@@ -19,9 +19,9 @@ jobs:
run: |
export TZ=Asia/Shanghai
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-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-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-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, 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,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.
@@ -51,8 +49,9 @@ 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>
@@ -69,7 +68,7 @@ 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>
@@ -103,7 +102,7 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
| --custom-clone-menu-width | 克隆菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |

134
README_EN.md Normal file
View File

@@ -0,0 +1,134 @@
<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-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px |
| --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.5",
"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",

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

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

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

@@ -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,7 +1,8 @@
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};
@@ -64,3 +65,58 @@ export const dashboard = css`
}
}
`;
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

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

@@ -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,7 +148,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 +173,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 +204,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 {

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

View File

@@ -73,21 +73,72 @@ export const releases = css`
}
// 右侧发布详细信息
.segment.detail {
padding: 16px;
.svg {
color: ${themeVars.color.text.light.num1};
}
// 标题
.release-list-title {
font-size: 32px;
gap: 16px;
}
// 提交信息
p.text.grey {
margin: 16px 0;
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: 16px !important;
margin-top: 24px !important;
}
> *:last-child {
margin-bottom: 16px !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,9 +91,17 @@ export const redButton = css`
// 修复按钮高度
export const fixButtonHeight = css`
// 修复一些主色调或者其他小按钮的高度避免过高
.ui.small.buttons .button,
.ui.ui.ui.ui.small.button {
min-height: 26px;
height: 32px;
}
// 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
.ui.labeled.button > .label,
.ui.ui.ui.ui.small.button.compact {
height: 28px;
min-height: 28px;
}
.ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {

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

@@ -35,7 +35,7 @@ export const navbarRight = css`
grid-auto-flow: column;
align-items: center;
> svg {
margin-right: 8px;
margin-right: 4px;
}
// 三角号纠正高度保持居中
.not-mobile {

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

@@ -0,0 +1,9 @@
import { css } from "src/types/vars";
// 一些列表头, 比如工单的搜索标签里程碑栏
export const listHeader = css`
.list-header {
align-items: center;
align-content: center;
}
`;

View File

@@ -37,6 +37,7 @@ export const colorblindDarkGithubColors: GithubColor = {
underlineNav: darkGithubColors.underlineNav,
contribution: darkGithubColors.contribution,
};
export const colorblindDarkPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#9198a1", unmatched: "#db6d28" },
@@ -70,4 +71,4 @@ export const colorblindDarkPrettylights: prettylightsColor = {
export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors);
export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights);
export default defineTheme(colorblindDarkColors);
export default defineTheme(colorblindDarkColors, colorblindDarkChroma);

View File

@@ -37,6 +37,7 @@ export const colorblindLightGithubColors: GithubColor = {
underlineNav: lightGithubColors.underlineNav,
contribution: lightGithubColors.contribution,
};
export const colorblindLightPrettylights: prettylightsColor = {
syntax: {
brackethighlighter: { angle: "#59636e", unmatched: "#762c00" },
@@ -70,4 +71,4 @@ export const colorblindLightPrettylights: prettylightsColor = {
export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors);
export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights);
export default defineTheme(colorblindLightColors);
export default defineTheme(colorblindLightColors, colorblindLightChroma);