mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2026-04-13 23:11:37 +08:00
Compare commits
16 Commits
v1.25.1
...
0a0cd77b3f
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0a0cd77b3f | ||
|
|
aa36f52d83 | ||
|
|
a841636737 | ||
|
|
fb1ebd6f18 | ||
|
|
4ae9a2754f | ||
|
|
914d5228e3 | ||
|
|
efec911021 | ||
|
|
5e3f2ec2c2 | ||
|
|
ce1ebf0c53 | ||
|
|
63e05b09b1 | ||
|
|
2d0da89248 | ||
|
|
687c7711ae | ||
|
|
1cf6252847 | ||
|
|
3851dc2449 | ||
|
|
adfa315484 | ||
|
|
d91e6223dd |
66
.github/ISSUE_TEMPLATE/1-style-bug-report.yml
vendored
66
.github/ISSUE_TEMPLATE/1-style-bug-report.yml
vendored
@@ -1,91 +1,91 @@
|
||||
name: 样式错误报告 ( Style bug report )
|
||||
description: 安装主题后出现颜色/位置错误等 ( Color/position errors occur after installing the theme )
|
||||
name: Style bug report
|
||||
description: Color/position errors occur after installing the theme.
|
||||
labels: ["style bug"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
1. 请使用最新的主题, 并使用 Ctrl+F5 刷新页面查看 Bug 是否消失 ( Please use the latest theme and refresh the page with Ctrl+F5 to see if the Bug has disappeared )
|
||||
2. 请查看项目根目录下的 CHANGELOG.md 文件, 查看是否有修复该 Bug 的相关描述 ( Please check the CHANGELOG.md file in the project root directory for descriptions of fixes related to this Bug )
|
||||
3. 如果有相关描述, 可以查看 README.md 自己编译开发版本是否修复了该 Bug ( If there are related descriptions, you can check if the Bug has been fixed by compiling the development version yourself in the README.md )
|
||||
4. 请查看 Gitea 默认主题下是否有同样的错误, 确认非主题问题 ( Please check if there is the same error in the default Gitea theme, confirming that it is not a theme problem )
|
||||
!!! Please read the readme and ensure that the theme is used correctly before submitting !!!
|
||||
1. Please use the latest theme and refresh the page with Ctrl+F5 to see if the Bug has disappeared.
|
||||
2. Please check the CHANGELOG.md file in the project root directory for descriptions of fixes related to this Bug.
|
||||
3. If there are related descriptions, you can check if the Bug has been fixed by compiling the development version yourself in the README.md.
|
||||
4. Please check if there is the same error in the default Gitea theme, confirming that it is not a theme problem.
|
||||
- type: input
|
||||
id: theme-version
|
||||
attributes:
|
||||
label: 主题版本 ( Theme Version )
|
||||
label: Theme Version
|
||||
description:
|
||||
主题的版本, 如果是开发版本可以查看 CSS 文件中 `--theme-version` 的值, 或者查看项目根目录下的 `package.json` 文件
|
||||
( The version of the theme, if it is a development version, you can check the value of `--theme-version` in the
|
||||
CSS file, or check the `package.json` file in the project root directory )
|
||||
The version of the theme, if it is a development version, you can check the value of `--theme-version` in the
|
||||
CSS file, or check the `package.json` file in the project root directory.
|
||||
placeholder: ex. 1.24.5
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
id: gitea-version
|
||||
attributes:
|
||||
label: Gitea 版本 ( Gitea Version )
|
||||
description: 应用主题的 Gitea 版本 ( What version of Gitea are you using? )
|
||||
label: Gitea Version
|
||||
description: What version of Gitea are you using?
|
||||
placeholder: ex. 1.24.5
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
id: page
|
||||
attributes:
|
||||
label: 页面 ( Page )
|
||||
description: 错误出现的页面 ( The page where the error occurred )
|
||||
placeholder: 工单列表页 ( Issue list page )
|
||||
label: Page
|
||||
description: The page where the error occurred.
|
||||
placeholder: Issue list page
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: actual-behavior
|
||||
attributes:
|
||||
label: 实际表现 ( Actual Behavior )
|
||||
description: 请描述实际的错误表现 ( Please describe the actual error presentation )
|
||||
placeholder: 页面底部的颜色错误 ( The color of the bottom of the page is incorrect )
|
||||
label: Actual Behavior
|
||||
description: Please describe the actual error presentation.
|
||||
placeholder: The color of the bottom of the page is incorrect
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: expected-behavior
|
||||
attributes:
|
||||
label: 期望表现 ( Expected Behavior )
|
||||
description: 请描述期望的正确表现 ( Please describe the expected correct presentation )
|
||||
placeholder: 页面底部的颜色应该是白色 ( The color of the bottom of the page should be white )
|
||||
label: Expected Behavior
|
||||
description: Please describe the expected correct presentation.
|
||||
placeholder: The color of the bottom of the page should be white
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: theme-screenshot
|
||||
attributes:
|
||||
label: 应用主题后的截图 ( Screenshot of the theme applied )
|
||||
description: 请上传应用主题后的截图 ( Please upload a screenshot of the theme applied )
|
||||
label: Screenshot of the theme applied
|
||||
description: Please upload a screenshot of the theme applied.
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: steps-to-reproduce
|
||||
attributes:
|
||||
label: 复现步骤 ( Steps to reproduce )
|
||||
description: 请描述如何复现错误 ( Please describe how to reproduce the error )
|
||||
placeholder: 1. 安装主题 2. 刷新页面 3. 查看错误 ( 1. Install the theme 2. Refresh the page 3. View the error )
|
||||
label: Steps to reproduce
|
||||
description: Please describe how to reproduce the error.
|
||||
placeholder: 1. Install the theme 2. Refresh the page 3. View the error
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: bug-description
|
||||
attributes:
|
||||
label: 错误描述 ( Bug Description )
|
||||
description: 请描述错误的具体表现 ( Please describe the specific presentation of the error )
|
||||
placeholder: 页面底部的颜色错误 ( The color of the bottom of the page is incorrect )
|
||||
label: Bug Description
|
||||
description: Please describe the specific presentation of the error.
|
||||
placeholder: The color of the bottom of the page is incorrect
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: gitea-screenshot
|
||||
attributes:
|
||||
label: Gitea 默认主题下的截图 ( Screenshot of the default Gitea theme )
|
||||
description: 请上传 Gitea 默认主题下的截图 ( Please upload a screenshot of the default Gitea theme )
|
||||
label: Screenshot of the default Gitea theme
|
||||
description: Please upload a screenshot of the default Gitea theme.
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: github-screenshot
|
||||
attributes:
|
||||
label: 可供参考的 GitHub 页面对应的截图 ( Screenshot of the corresponding GitHub page )
|
||||
description: 请上传 GitHub 页面对应的截图 ( Please upload a screenshot of the corresponding GitHub page )
|
||||
label: Screenshot of the corresponding GitHub page
|
||||
description: Please upload a screenshot of the corresponding GitHub page.
|
||||
validations:
|
||||
required: false
|
||||
|
||||
39
.github/ISSUE_TEMPLATE/2-feature-request.yml
vendored
39
.github/ISSUE_TEMPLATE/2-feature-request.yml
vendored
@@ -1,39 +0,0 @@
|
||||
name: 功能请求 ( Feature request )
|
||||
description: 提出新的功能建议 ( Suggest new features )
|
||||
labels: ["enhancement"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
1. 不接受非 Gitea 和 GitHub 的样式需求 ( We do not accept style requests that are not Gitea or GitHub )
|
||||
2. 颜色需求最好自己实现 ( Color requests are best implemented by yourself )
|
||||
- type: input
|
||||
id: page
|
||||
attributes:
|
||||
label: 页面 ( Page )
|
||||
description: 功能涉及的页面 ( The page the feature involves )
|
||||
placeholder: 首页 ( Home page )
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: feature-description
|
||||
attributes:
|
||||
label: 功能描述 ( Feature Description )
|
||||
description: 请描述你想要的功能 ( Please describe the feature you want )
|
||||
placeholder: 菜单样式修改 ( Menu style modification )
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: screenshot
|
||||
attributes:
|
||||
label: 截图 ( Screenshot )
|
||||
description: 预期的主题效果 ( Expected theme effect )
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: github-screenshot
|
||||
attributes:
|
||||
label: 可供参考的 GitHub 页面对应的截图 ( Screenshot of the corresponding GitHub page )
|
||||
description: 请上传 GitHub 页面对应的截图 ( Please upload a screenshot of the corresponding GitHub page )
|
||||
validations:
|
||||
required: false
|
||||
33
.github/ISSUE_TEMPLATE/3-core-bug-report.yml
vendored
33
.github/ISSUE_TEMPLATE/3-core-bug-report.yml
vendored
@@ -1,44 +1,43 @@
|
||||
name: 框架错误报告 ( Core bug report )
|
||||
description: 报告框架的错误 ( Report errors in the theme framework )
|
||||
name: Core bug report
|
||||
description: Report errors in the theme framework.
|
||||
labels: ["core bug"]
|
||||
body:
|
||||
- type: textarea
|
||||
id: actual-behavior
|
||||
attributes:
|
||||
label: 实际表现 ( Actual Behavior )
|
||||
description: 请描述实际的错误表现 ( Please describe the actual error presentation )
|
||||
placeholder: 未生成自动颜色主题 ( No automatic color theme generated )
|
||||
label: Actual Behavior
|
||||
description: Please describe the actual error presentation.
|
||||
placeholder: No automatic color theme generated
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: expected-behavior
|
||||
attributes:
|
||||
label: 期望表现 ( Expected Behavior )
|
||||
description: 请描述期望的正确表现 ( Please describe the expected correct presentation )
|
||||
placeholder: 生成自动颜色主题 ( Generate automatic color theme )
|
||||
label: Expected Behavior
|
||||
description: Please describe the expected correct presentation.
|
||||
placeholder: Generate automatic color theme
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: steps-to-reproduce
|
||||
attributes:
|
||||
label: 复现步骤 ( Steps to reproduce )
|
||||
description: 请描述如何复现错误 ( Please describe how to reproduce the error )
|
||||
placeholder:
|
||||
1. 新建颜色主题 2. 编译主题 3. 查看错误 ( 1. Create a color theme 2. Compile the theme 3. View the error )
|
||||
label: Steps to reproduce
|
||||
description: Please describe how to reproduce the error.
|
||||
placeholder: 1. Create a color theme 2. Compile the theme 3. View the error
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: bug-description
|
||||
attributes:
|
||||
label: 错误描述 ( Bug Description )
|
||||
description: 请描述错误的具体表现 ( Please describe the specific presentation of the error )
|
||||
placeholder: 未生成自动颜色主题 ( No automatic color theme generated )
|
||||
label: Bug Description
|
||||
description: Please describe the specific presentation of the error.
|
||||
placeholder: No automatic color theme generated
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: screenshot
|
||||
attributes:
|
||||
label: 截图 ( Screenshot )
|
||||
description: 请上传错误的截图 ( Please upload the screenshot of the error )
|
||||
label: Screenshot
|
||||
description: Please upload the screenshot of the error.
|
||||
validations:
|
||||
required: false
|
||||
|
||||
12
.github/ISSUE_TEMPLATE/3-doc-report.yml
vendored
Normal file
12
.github/ISSUE_TEMPLATE/3-doc-report.yml
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
name: Document report
|
||||
description: Improve or supplement the document.
|
||||
labels: ["documentation"]
|
||||
body:
|
||||
- type: textarea
|
||||
id: doc-description
|
||||
attributes:
|
||||
label: Document Description
|
||||
description: Please describe the specific content of the document.
|
||||
placeholder: The document content is incorrect
|
||||
validations:
|
||||
required: true
|
||||
12
.github/ISSUE_TEMPLATE/4-doc-report.yml
vendored
12
.github/ISSUE_TEMPLATE/4-doc-report.yml
vendored
@@ -1,12 +0,0 @@
|
||||
name: 文档报告 ( Document report )
|
||||
description: 改进或补充文档 ( Improve or supplement the document )
|
||||
labels: ["documentation"]
|
||||
body:
|
||||
- type: textarea
|
||||
id: doc-description
|
||||
attributes:
|
||||
label: 文档描述 ( Document Description )
|
||||
description: 请描述文档的具体内容 ( Please describe the specific content of the document )
|
||||
placeholder: 文档内容有误 ( The document content is incorrect )
|
||||
validations:
|
||||
required: true
|
||||
39
.github/ISSUE_TEMPLATE/4-feature-request.yml
vendored
Normal file
39
.github/ISSUE_TEMPLATE/4-feature-request.yml
vendored
Normal file
@@ -0,0 +1,39 @@
|
||||
name: Feature request
|
||||
description: Suggest new features.
|
||||
labels: ["enhancement"]
|
||||
body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
1. We do not accept style requests that are not Gitea or GitHub.
|
||||
2. Color requests are best implemented by yourself.
|
||||
- type: input
|
||||
id: page
|
||||
attributes:
|
||||
label: Page
|
||||
description: The page the feature involves.
|
||||
placeholder: Home page
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: feature-description
|
||||
attributes:
|
||||
label: Feature Description
|
||||
description: Please describe the feature you want.
|
||||
placeholder: Menu style modification
|
||||
validations:
|
||||
required: true
|
||||
- type: textarea
|
||||
id: screenshot
|
||||
attributes:
|
||||
label: Screenshot
|
||||
description: Expected theme effect.
|
||||
validations:
|
||||
required: false
|
||||
- type: textarea
|
||||
id: github-screenshot
|
||||
attributes:
|
||||
label: Screenshot of the corresponding GitHub page
|
||||
description: Please upload a screenshot of the corresponding GitHub page.
|
||||
validations:
|
||||
required: false
|
||||
32
CHANGELOG.md
32
CHANGELOG.md
@@ -1,33 +1,13 @@
|
||||
### 🌈 Style
|
||||
|
||||
##### 更符合 GitHub 风格
|
||||
|
||||
- 优化差异对比代码块的样式
|
||||
- 优化用户头像样式
|
||||
- 优化 Issue/PR/Diff/Actions 的三点菜单按钮样式
|
||||
- 优化用户动态样式
|
||||
- 优化仓库发布页面样式
|
||||
- 优化字符提示的提示框动画
|
||||
|
||||
### 🐞 Fix
|
||||
|
||||
- 修复 Issue/PR 详细页面中的部分文字颜色, 时间线上的标签样式和侧边栏的时间追踪样式
|
||||
- 修复一些选择输入框的排列问题
|
||||
|
||||
## 📃 English
|
||||
|
||||
### 🌈 Style
|
||||
|
||||
##### More aligned with GitHub style
|
||||
|
||||
- Optimized diff comparison code block styles
|
||||
- Optimized user avatar styles
|
||||
- Optimized three-dot menu button styles for Issue/PR/Diff/Actions
|
||||
- Optimized user activity feed styles
|
||||
- Optimized repository release page styles
|
||||
- Optimized tooltip animation for character hints
|
||||
- Optimize global line height
|
||||
- Optimize the workflow log page style
|
||||
- Optimize repository header name style
|
||||
|
||||
### 🐞 Fix
|
||||
|
||||
- Fixed text color issues in Issue/PR detail pages, timeline label styles, and sidebar time tracking styles
|
||||
- Fixed alignment issues with some select input fields
|
||||
- Fix the problem of missing background color and width when there is a unicode character in the diff
|
||||
- Fix the disabled operation button interval in the code preview interface
|
||||
- Fix fixed height when scrolling through step titles on workflow detail pages
|
||||
|
||||
131
README.md
131
README.md
@@ -6,67 +6,71 @@
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
|
||||
</h1>
|
||||
|
||||
<div align="center">
|
||||
<h4 align="center">
|
||||
|
||||
中文 • [English](README_EN.md)
|
||||
A Gitea theme that pursues GitHub style not only in colors but also in styling details.
|
||||
|
||||
不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题.
|
||||
</h4>
|
||||
|
||||
</div>
|
||||
|
||||

|
||||

|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
> 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳
|
||||
> Recommend using Catppuccin file icon browser plugin together for better performance.
|
||||
> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
|
||||
|
||||
## 版本号说明
|
||||
## Version Number Explanation
|
||||
|
||||
主题版本号与 Gitea 版本号保持一致
|
||||
The theme version number is kept consistent with the Gitea version number
|
||||
|
||||
Gitea 版本号格式: `1.大版本号.小版本号`
|
||||
Gitea version number format: `1.major.minor`
|
||||
|
||||
Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
|
||||
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.
|
||||
|
||||
比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=1.24.0` `<1.25.0`
|
||||
For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0`
|
||||
|
||||
仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
|
||||
Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be
|
||||
accepted.
|
||||
|
||||
> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
|
||||
> Development stage theme version number format: `1.major.minor.timestamp`
|
||||
|
||||
### 主题版本发布规则
|
||||
### Theme Version Release Rules
|
||||
|
||||
- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本
|
||||
- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
|
||||
- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
|
||||
- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor
|
||||
version as Gitea will be released
|
||||
- When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest`
|
||||
will be released and the old version will no longer be maintained
|
||||
- The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a
|
||||
theme version with the same major version as Gitea will be released
|
||||
|
||||
## 安装
|
||||
## Installation
|
||||
|
||||
1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下
|
||||
2. 修改 `gitea/conf/app.ini`,并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾
|
||||
3. 重启 Gitea
|
||||
4. 在设置中查看主题
|
||||
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
|
||||
|
||||
例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark` 到 `THEMES` 末尾
|
||||
Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES`
|
||||
|
||||
`gitea/conf/app.ini` 例:
|
||||
Example `gitea/conf/app.ini`:
|
||||
|
||||
```ini
|
||||
[ui]
|
||||
THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark
|
||||
```
|
||||
|
||||
详细请查看 Gitea 文档
|
||||
For details, please refer to the Gitea documentation
|
||||
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
|
||||
|
||||
> [!IMPORTANT]
|
||||
>
|
||||
> 自动颜色主题需要亮色和暗色的主题文件
|
||||
> Automatic color theme requires both light and dark theme files.
|
||||
|
||||
## 截图
|
||||
## Screenshots
|
||||
|
||||
### 基本主题
|
||||
### Basic Themes
|
||||
|
||||
```ini
|
||||
THEMES = github-auto, github-light, github-dark, github-soft-dark
|
||||
@@ -75,14 +79,14 @@ THEMES = github-auto, github-light, github-dark, github-soft-dark
|
||||
<details>
|
||||
<summary>Base</summary>
|
||||
<h4>theme-github-light.css</h4>
|
||||
<img src="screenshots/light.png"/>
|
||||
<img src="screenshots/en/light.png"/>
|
||||
<h4>theme-github-dark.css</h4>
|
||||
<img src="screenshots/dark.png"/>
|
||||
<img src="screenshots/en/dark.png"/>
|
||||
<h4>theme-github-soft-dark.css</h4>
|
||||
<img src="screenshots/soft-dark.png"/>
|
||||
<img src="screenshots/en/soft-dark.png"/>
|
||||
</details>
|
||||
|
||||
### 色盲主题 ( Beta )
|
||||
### Colorblind Themes (Beta)
|
||||
|
||||
```ini
|
||||
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
|
||||
@@ -90,14 +94,14 @@ 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"/>
|
||||
<img src="screenshots/en/colorblind-light.png"/>
|
||||
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
|
||||
<img src="screenshots/colorblind-dark.png"/>
|
||||
<img src="screenshots/en/colorblind-dark.png"/>
|
||||
</details>
|
||||
|
||||
### 粉色主题
|
||||
### Pink Themes
|
||||
|
||||
```ini
|
||||
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
|
||||
@@ -106,20 +110,20 @@ THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft
|
||||
<details>
|
||||
<summary>Pink</summary>
|
||||
<h4>theme-github-pink-light.css</h4>
|
||||
<img src="screenshots/pink/pink-light.png"/>
|
||||
<img src="screenshots/pink/en/pink-light-en.png"/>
|
||||
<h4>theme-github-pink-dark.css</h4>
|
||||
<img src="screenshots/pink/pink-dark.png"/>
|
||||
<img src="screenshots/pink/en/pink-dark-en.png"/>
|
||||
<h4>theme-github-pink-soft-dark.css</h4>
|
||||
<img src="screenshots/pink/pink-soft-dark.png"/>
|
||||
<img src="screenshots/pink/en/pink-soft-dark-en.png"/>
|
||||
</details>
|
||||
|
||||
## 自定义 CSS 变量
|
||||
## Custom CSS Variables
|
||||
|
||||
可以根据自己的偏好自定义主题的一部分样式
|
||||
You can customize parts of the theme style according to your preferences
|
||||
|
||||
### 使用方法
|
||||
### Usage Method
|
||||
|
||||
在主题的 CSS 文件的头部或尾部添加以下代码
|
||||
Add the following code at the beginning or end of the theme's CSS file
|
||||
|
||||
```css
|
||||
:root {
|
||||
@@ -130,30 +134,31 @@ THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft
|
||||
|
||||
> [!IMPORTANT]
|
||||
>
|
||||
> 请确保在 `:root` 选择器中添加自定义变量,否则无法生效
|
||||
> Please ensure to add custom variables in the `:root` selector, otherwise they will not take effect
|
||||
>
|
||||
> 变量之间用 `;` 分隔
|
||||
> Variables are separated by `;`
|
||||
>
|
||||
> 建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中
|
||||
> 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 变量
|
||||
### CSS Variables
|
||||
|
||||
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
|
||||
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
|
||||
| --custom-branch-menu-width | 分支菜单的宽度 | 320px | 320px | 320px | Gitea | 640px |
|
||||
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | Gitea | 320px |
|
||||
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | |
|
||||
| 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
|
||||
|
||||
请确保你已经安装了 Node.js 环境, 推荐使用 Node.js 20 或以上版本
|
||||
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
|
||||
@@ -162,5 +167,5 @@ npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在
|
||||
`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
|
||||
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`
|
||||
|
||||
164
README_CN.md
Normal file
164
README_CN.md
Normal file
@@ -0,0 +1,164 @@
|
||||
<h1 align="center">
|
||||
<p>Gitea GitHub Theme</p>
|
||||
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
|
||||
<img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
|
||||
</h1>
|
||||
|
||||
<h4 align="center">
|
||||
|
||||
不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题
|
||||
|
||||
</h4>
|
||||
|
||||

|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
> 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳
|
||||
> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
|
||||
|
||||
## 版本号说明
|
||||
|
||||
主题版本号与 Gitea 版本号保持一致
|
||||
|
||||
Gitea 版本号格式: `1.大版本号.小版本号`
|
||||
|
||||
Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本.
|
||||
|
||||
比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=1.24.0` `<1.25.0`
|
||||
|
||||
仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR.
|
||||
|
||||
> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
|
||||
|
||||
### 主题版本发布规则
|
||||
|
||||
- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本
|
||||
- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
|
||||
- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
|
||||
|
||||
## 安装
|
||||
|
||||
1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下
|
||||
2. 修改 `gitea/conf/app.ini`,并将 CSS 文件名去掉 `theme-` 的名称附加到 `[ui]` 下的 `THEMES` 末尾
|
||||
3. 重启 Gitea
|
||||
4. 在设置中查看主题
|
||||
|
||||
例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark` 到 `THEMES` 末尾
|
||||
|
||||
`gitea/conf/app.ini` 例:
|
||||
|
||||
```ini
|
||||
[ui]
|
||||
THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark
|
||||
```
|
||||
|
||||
详细请查看 Gitea 文档
|
||||
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
|
||||
|
||||
> [!IMPORTANT]
|
||||
>
|
||||
> 自动颜色主题需要亮色和暗色的主题文件
|
||||
|
||||
## 截图
|
||||
|
||||
### 基本主题
|
||||
|
||||
```ini
|
||||
THEMES = github-auto, github-light, github-dark, github-soft-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Base</summary>
|
||||
<h4>theme-github-light.css</h4>
|
||||
<img src="screenshots/light.png"/>
|
||||
<h4>theme-github-dark.css</h4>
|
||||
<img src="screenshots/dark.png"/>
|
||||
<h4>theme-github-soft-dark.css</h4>
|
||||
<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>Colorblind & Tritanopia (红绿色盲 & 蓝色盲)</summary>
|
||||
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
|
||||
<img src="screenshots/colorblind-light.png"/>
|
||||
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
|
||||
<img src="screenshots/colorblind-dark.png"/>
|
||||
</details>
|
||||
|
||||
### 粉色主题
|
||||
|
||||
```ini
|
||||
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Pink</summary>
|
||||
<h4>theme-github-pink-light.css</h4>
|
||||
<img src="screenshots/pink/pink-light.png"/>
|
||||
<h4>theme-github-pink-dark.css</h4>
|
||||
<img src="screenshots/pink/pink-dark.png"/>
|
||||
<h4>theme-github-pink-soft-dark.css</h4>
|
||||
<img src="screenshots/pink/pink-soft-dark.png"/>
|
||||
</details>
|
||||
|
||||
## 自定义 CSS 变量
|
||||
|
||||
可以根据自己的偏好自定义主题的一部分样式
|
||||
|
||||
### 使用方法
|
||||
|
||||
在主题的 CSS 文件的头部或尾部添加以下代码
|
||||
|
||||
```css
|
||||
:root {
|
||||
--custom-clone-menu-width: 150px;
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
> [!IMPORTANT]
|
||||
>
|
||||
> 请确保在 `:root` 选择器中添加自定义变量,否则无法生效
|
||||
>
|
||||
> 变量之间用 `;` 分隔
|
||||
>
|
||||
> 建议自定义变量放在单独的文件中, 通过 shell 命令等方式追加到主题文件中
|
||||
|
||||
### CSS 变量
|
||||
|
||||
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
|
||||
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
|
||||
| --custom-branch-menu-width | 分支菜单的宽度 | 320px | 320px | 320px | Gitea | 640px |
|
||||
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | Gitea | 320px |
|
||||
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | |
|
||||
|
||||
## 使用开发中的主题
|
||||
|
||||
也许你会想使用开发中的主题, 而不是发布的主题
|
||||
|
||||
请确保你已经安装了 Node.js 环境, 推荐使用 Node.js 20 或以上版本
|
||||
|
||||
```bash
|
||||
git clone https://github.com/lutinglt/gitea-github-theme.git
|
||||
cd gitea-github-theme
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在
|
||||
`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
|
||||
173
README_EN.md
173
README_EN.md
@@ -1,173 +0,0 @@
|
||||
<h1 align="center">
|
||||
<p>Gitea GitHub Theme</p>
|
||||
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
|
||||
<img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
|
||||
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
|
||||
</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
English • [中文](README.md)
|
||||
|
||||
A Gitea theme that pursues GitHub style not only in colors but also in styling details.
|
||||
|
||||
</div>
|
||||
|
||||

|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
> Recommend using Catppuccin file icon browser plugin together for better performance.
|
||||
> [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons)
|
||||
|
||||
## Version Number Explanation
|
||||
|
||||
The theme version number is kept consistent with the Gitea version number
|
||||
|
||||
Gitea version number format: `1.major.minor`
|
||||
|
||||
Theoretically, minor version changes in Gitea do not modify the frontend layout, so the minor version of the theme is
|
||||
applicable to all Gitea versions with the same major version number.
|
||||
|
||||
For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0`
|
||||
|
||||
Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be
|
||||
accepted.
|
||||
|
||||
> Development stage theme version number format: `1.major.minor.timestamp`
|
||||
|
||||
### Theme Version Release Rules
|
||||
|
||||
- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor
|
||||
version as Gitea will be released
|
||||
- When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest`
|
||||
will be released and the old version will no longer be maintained
|
||||
- The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a
|
||||
theme version with the same major version as Gitea will be released
|
||||
|
||||
## Installation
|
||||
|
||||
1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory
|
||||
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
|
||||
|
||||
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)
|
||||
|
||||
> [!IMPORTANT]
|
||||
>
|
||||
> Automatic color theme requires both light and dark theme files.
|
||||
|
||||
## Screenshots
|
||||
|
||||
### Basic Themes
|
||||
|
||||
```ini
|
||||
THEMES = github-auto, github-light, github-dark, github-soft-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Base</summary>
|
||||
<h4>theme-github-light.css</h4>
|
||||
<img src="screenshots/en/light.png"/>
|
||||
<h4>theme-github-dark.css</h4>
|
||||
<img src="screenshots/en/dark.png"/>
|
||||
<h4>theme-github-soft-dark.css</h4>
|
||||
<img src="screenshots/en/soft-dark.png"/>
|
||||
</details>
|
||||
|
||||
### Colorblind Themes (Beta)
|
||||
|
||||
```ini
|
||||
THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark
|
||||
THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Colorblind & Tritanopia</summary>
|
||||
<h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4>
|
||||
<img src="screenshots/en/colorblind-light.png"/>
|
||||
<h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4>
|
||||
<img src="screenshots/en/colorblind-dark.png"/>
|
||||
</details>
|
||||
|
||||
### Pink Themes
|
||||
|
||||
```ini
|
||||
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Pink</summary>
|
||||
<h4>theme-github-pink-light.css</h4>
|
||||
<img src="screenshots/pink/en/pink-light-en.png"/>
|
||||
<h4>theme-github-pink-dark.css</h4>
|
||||
<img src="screenshots/pink/en/pink-dark-en.png"/>
|
||||
<h4>theme-github-pink-soft-dark.css</h4>
|
||||
<img src="screenshots/pink/en/pink-soft-dark-en.png"/>
|
||||
</details>
|
||||
|
||||
## Custom CSS Variables
|
||||
|
||||
You can customize parts of the theme style according to your preferences
|
||||
|
||||
### Usage Method
|
||||
|
||||
Add the following code at the beginning or end of the theme's CSS file
|
||||
|
||||
```css
|
||||
:root {
|
||||
--custom-clone-menu-width: 150px;
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
> [!IMPORTANT]
|
||||
>
|
||||
> Please ensure to add custom variables in the `:root` selector, otherwise they will not take effect
|
||||
>
|
||||
> Variables are separated by `;`
|
||||
>
|
||||
> It is recommended to place custom variables in a separate file and append them to the theme file using shell commands
|
||||
> or other methods
|
||||
|
||||
### CSS Variables
|
||||
|
||||
| Variable Name | Description | Default | Github | Recommend | Min | Max |
|
||||
| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- |
|
||||
| --custom-branch-menu-width | Branch menu width | 320px | 320px | 320px | Gitea | 640px |
|
||||
| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | User menu width | 192px | 200px | | Gitea | 320px |
|
||||
| --custom-explore-repolist-columns | Number of repository list columns on explore page | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | Number of repository list columns on user page | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | Number of repository list columns on organization page | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | Number of user list columns on organization page | 2 | 1 | 1/2 | | |
|
||||
|
||||
## Using Development Version of the Theme
|
||||
|
||||
You might want to use the development version of the theme instead of the released version
|
||||
|
||||
Please ensure you have Node.js environment installed, Node.js 20 or above is recommended
|
||||
|
||||
```bash
|
||||
git clone https://github.com/lutinglt/gitea-github-theme.git
|
||||
cd gitea-github-theme
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the
|
||||
`gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini`
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "gitea-github-theme",
|
||||
"version": "1.25.1",
|
||||
"version": "1.25.2",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite build --mode dev",
|
||||
|
||||
@@ -156,7 +156,6 @@ export const actionViewLeft = css`
|
||||
.action-view-left {
|
||||
margin-right: 28px;
|
||||
border-top: 1px solid ${themeVars.color.console.border};
|
||||
|
||||
&:before {
|
||||
content: "Jobs";
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
@@ -168,52 +167,53 @@ export const actionViewLeft = css`
|
||||
top: -8px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.job-group-section {
|
||||
padding-right: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid ${themeVars.color.console.border};
|
||||
|
||||
.job-brief-item {
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
margin-left: 0.5rem;
|
||||
|
||||
&.selected {
|
||||
.job-brief-list {
|
||||
gap: 4px;
|
||||
// 双重确保覆盖原始样式
|
||||
.job-brief-item.job-brief-item {
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
margin-left: 0.5rem;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.console.hoverBg};
|
||||
}
|
||||
|
||||
&:after {
|
||||
overflow: visible;
|
||||
background: ${themeVars.github.borderColor.accent.emphasis};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
content: "";
|
||||
height: 24px;
|
||||
left: calc(0.5rem * -1);
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
.job-brief-item-right {
|
||||
svg.job-brief-rerun {
|
||||
display: none;
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
&:hover {
|
||||
color: ${themeVars.color.text.self};
|
||||
&.selected {
|
||||
&:after {
|
||||
overflow: visible;
|
||||
background: ${themeVars.github.borderColor.accent.emphasis};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
content: "";
|
||||
height: 24px;
|
||||
left: calc(0.5rem * -1);
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
.step-summary-duration {
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
font-family: var(--fonts-monospace);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.job-brief-item-right {
|
||||
svg.job-brief-rerun {
|
||||
display: inline-block;
|
||||
display: none;
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
&:hover {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
.step-summary-duration {
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
font-family: var(--fonts-monospace);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.job-brief-item-right {
|
||||
svg.job-brief-rerun {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -253,52 +253,57 @@ export const actionViewRight = css`
|
||||
}
|
||||
|
||||
.job-step-container {
|
||||
// 步骤标题
|
||||
.job-step-summary {
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
padding: 8px 10px !important;
|
||||
|
||||
&.selected {
|
||||
// 滚动时固定在顶部的高度与 job-info-header 高度相同
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
&.step-expandable:hover {
|
||||
padding: 8px;
|
||||
.job-step-section {
|
||||
margin: 0 4px 4px;
|
||||
// 步骤标题, 双重确保覆盖原始样式
|
||||
.job-step-summary.job-step-summary {
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
}
|
||||
padding: 8px !important;
|
||||
height: 36px;
|
||||
|
||||
.tw-mr-2:not(.svg) svg.svg {
|
||||
margin: 1.5px 6px 0px 2px;
|
||||
}
|
||||
/* 绿色步骤状态改为白色 */
|
||||
svg.svg.text.green {
|
||||
color: ${themeVars.color.console.fg.subtle} !important;
|
||||
}
|
||||
&.selected {
|
||||
// 滚动时固定在顶部的高度与 job-info-header 高度相同
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
/* 不被 hover 效果影响 */
|
||||
color: ${themeVars.color.console.fg.self} !important;
|
||||
background-color: ${themeVars.color.console.activeBg} !important;
|
||||
&.step-expandable:hover {
|
||||
color: ${themeVars.color.console.fg.subtle};
|
||||
}
|
||||
|
||||
.tw-mr-2:not(.svg) svg.svg {
|
||||
margin: 1.5px 6px 0px 2px;
|
||||
}
|
||||
/* 绿色步骤状态改为白色 */
|
||||
svg.svg.text.green {
|
||||
color: ${themeVars.color.console.fg.subtle} !important;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
/* 不被 hover 效果影响 */
|
||||
color: ${themeVars.color.console.fg.self} !important;
|
||||
background-color: ${themeVars.color.console.activeBg} !important;
|
||||
|
||||
svg.svg.text.green {
|
||||
color: ${themeVars.color.console.fg.self} !important;
|
||||
}
|
||||
}
|
||||
// 步骤耗时
|
||||
.step-summary-duration {
|
||||
font-size: 12px;
|
||||
font-family: var(--fonts-monospace);
|
||||
}
|
||||
}
|
||||
// 步骤耗时
|
||||
.step-summary-duration {
|
||||
font-size: 12px;
|
||||
font-family: var(--fonts-monospace);
|
||||
}
|
||||
}
|
||||
// 步骤日志
|
||||
.job-step-logs {
|
||||
animation: ${animationDown};
|
||||
/* 日志字体颜色白色 */
|
||||
.job-log-line {
|
||||
color: ${themeVars.color.console.fg.self};
|
||||
/* 被 hover 时覆盖 ANSI 颜色 */
|
||||
.log-msg:hover * {
|
||||
color: ${themeVars.color.console.fg.self} !important;
|
||||
// 步骤日志
|
||||
.job-step-logs {
|
||||
animation: ${animationDown};
|
||||
/* 日志字体颜色白色 */
|
||||
.job-log-line {
|
||||
color: ${themeVars.color.console.fg.self};
|
||||
/* 被 hover 时覆盖 ANSI 颜色 */
|
||||
.log-msg:hover * {
|
||||
color: ${themeVars.color.console.fg.self} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { labelStyle } from "styles/public/label";
|
||||
|
||||
export const dashboard = css`
|
||||
// 首页仪表板, 避免选中管理员后台的维护管理面板
|
||||
@@ -38,6 +39,10 @@ export const dashboard = css`
|
||||
font-weight: 400;
|
||||
background-color: unset !important;
|
||||
margin-bottom: 0.25rem;
|
||||
.ui.label {
|
||||
border-color: #00000000;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
// 仓库/组织列表
|
||||
.ui.attached.segment {
|
||||
@@ -47,6 +52,12 @@ export const dashboard = css`
|
||||
&.repos-search {
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
> .menu.repos-filter {
|
||||
.ui.circular.label {
|
||||
border-color: #00000000;
|
||||
padding: ${labelStyle.padding} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.table {
|
||||
&:last-child {
|
||||
@@ -58,6 +69,7 @@ export const dashboard = css`
|
||||
li {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 8px !important;
|
||||
height: 32px;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -107,8 +107,19 @@ export const diff = css`
|
||||
&.code-diff-split colgroup col:nth-child(2),
|
||||
&.code-diff-split colgroup col:nth-child(6),
|
||||
td.lines-escape {
|
||||
width: 0; // 不要使用 display: none; 否则会影响布局
|
||||
visibility: hidden;
|
||||
width: 0; // 不要使用 display: none; 否则会影响布局, 无内容时为 0, 有内容时为 20(猜测可能是根据内容宽度自动调整)
|
||||
/* visibility: hidden; */ // 不要使用 visibility: hidden; 当 escape 有内容时会导致背景颜色丢失, escape 目前用于显示检测 unicode 编码错误的内容
|
||||
}
|
||||
// 修复当 escape 有内容时, 宽度不够的问题
|
||||
&:has(td.lines-escape:not(:empty)) {
|
||||
// 合并视图的第三列
|
||||
&.code-diff-unified colgroup col:nth-child(3),
|
||||
// 拆分视图的第二列和第六列
|
||||
&.code-diff-split colgroup col:nth-child(2),
|
||||
&.code-diff-split colgroup col:nth-child(6),
|
||||
td.lines-escape {
|
||||
width: 20;
|
||||
}
|
||||
}
|
||||
// Gitea 分列视图下默认 100% 宽度的目的是如果单文件只增加或只删除的情况下, 保持无内容的列的宽度一致, 始终保持左右两边的列宽度一致
|
||||
// 保持 Gitea 的默认设置, 不对行号宽度做处理
|
||||
|
||||
@@ -316,6 +316,10 @@ export const repoFileView = css`
|
||||
&:last-of-type {
|
||||
border-top-right-radius: ${otherThemeVars.border.radius};
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
// 与无权限按钮之间的间距
|
||||
+ .btn-octicon.disabled {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.color.hover.self};
|
||||
@@ -395,18 +399,19 @@ export const repoSidebarTop = css`
|
||||
padding: 10px 0 0 0;
|
||||
// 仓库描述本身
|
||||
.flex-item-title {
|
||||
margin-top: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
// 仓库描述内容
|
||||
.flex-item-body {
|
||||
> .tw-flex:first-child {
|
||||
margin-top: 21px !important;
|
||||
margin-top: 16px !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
.repo-description {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
#repo-topics {
|
||||
margin: 10px 0px !important;
|
||||
margin: 8px 0px !important;
|
||||
}
|
||||
.flex-text-block {
|
||||
font-size: 14px;
|
||||
@@ -444,7 +449,6 @@ export const repoSidebarBottom = css`
|
||||
.flex-item-leading {
|
||||
svg.svg.octicon-tag {
|
||||
color: ${themeVars.color.green.self};
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.flex-item-header .flex-item-title {
|
||||
|
||||
@@ -17,10 +17,11 @@ export const repoHeader = css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: ${themeVars.color.text.self};
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.3;
|
||||
text-decoration: none !important;
|
||||
min-width: 3ch;
|
||||
padding: 4px 6px;
|
||||
padding: 0px 6px;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@@ -74,7 +75,8 @@ export const repoTopic = css`
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 2.5px 10px;
|
||||
padding: 0px 10px;
|
||||
line-height: 22px;
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
&:hover {
|
||||
|
||||
@@ -2,7 +2,7 @@ import { css } from "src/types/vars";
|
||||
|
||||
export const body = css`
|
||||
body {
|
||||
line-height: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a {
|
||||
text-underline-offset: 0.2rem; // 0.2rem 可以始终保持下划线不受 overflow: hidden 的影响
|
||||
|
||||
@@ -5,6 +5,7 @@ import "./base"; // 基础样式, 确保在其他样式之前导入
|
||||
import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
|
||||
import "./animation"; // 动画效果
|
||||
import "./transition"; // 过渡效果
|
||||
import "./table"; // 表格
|
||||
import "./text"; // 文本或 SVG 的基本颜色
|
||||
import "./button"; // 按钮
|
||||
import "./dropdown"; // 下拉框
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const labelStyle = {
|
||||
padding: "0px 6px",
|
||||
};
|
||||
|
||||
export const label = css`
|
||||
.ui.label {
|
||||
border: 1px solid #00000000;
|
||||
}
|
||||
/* 所有标签, 但不包括 a 标签 */
|
||||
/* a 标签比如仓库点星等按钮旁边的数字标签按钮,提交图中的 tag 标签 */
|
||||
div.label,
|
||||
@@ -9,7 +16,11 @@ export const label = css`
|
||||
span.labels-list a.label {
|
||||
&.ui.ui.ui {
|
||||
border-radius: 9999px;
|
||||
padding: 1.5px 6px;
|
||||
${labelStyle}
|
||||
line-height: 18px;
|
||||
&.large {
|
||||
line-height: 22px;
|
||||
}
|
||||
// 多个标签的组合标签的圆角修复
|
||||
&.scope-parent {
|
||||
.scope-left {
|
||||
@@ -103,7 +114,6 @@ export const shaLabel = css`
|
||||
background-color: ${themeVars.color.label.hoverBg} !important;
|
||||
}
|
||||
span.ui.label.commit-is-signed {
|
||||
padding: 3px 5px;
|
||||
margin-left: 5px;
|
||||
height: 25px;
|
||||
}
|
||||
@@ -118,6 +128,7 @@ export const shaLabel = css`
|
||||
}
|
||||
// 验证提交附带的图标
|
||||
span.ui.label.commit-is-signed {
|
||||
height: 25px;
|
||||
// 验证信任
|
||||
&.sign-trusted {
|
||||
border: 1.5px solid ${themeVars.color.green.badge.self} !important;
|
||||
@@ -151,6 +162,11 @@ export const shaLabel = css`
|
||||
}
|
||||
}
|
||||
}
|
||||
span.ui.label.commit-is-signed,
|
||||
.ui.label.commit-id-short,
|
||||
.ui.label.commit-sign-badge {
|
||||
font-size: 12px;
|
||||
}
|
||||
`;
|
||||
|
||||
// 任务状态标签, 目前仅在管理员页面 Runner 状态中看到
|
||||
@@ -194,7 +210,6 @@ export const repoLabel = css`
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 1.5px 6px;
|
||||
}
|
||||
}
|
||||
.org-visibility span.ui.basic.label {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { labelStyle } from "./label";
|
||||
|
||||
export const activeItemAfterStyle = {
|
||||
backgroundColor: themeVars.github.borderColor.accent.emphasis,
|
||||
@@ -140,8 +141,8 @@ export const menu = css`
|
||||
}
|
||||
}
|
||||
// 菜单标签样式
|
||||
.ui.menu .item>.label:not(.floating) {
|
||||
padding: 1.5px 6px;
|
||||
.ui.menu .item > .label:not(.floating) {
|
||||
${labelStyle}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
8
styles/public/table.ts
Normal file
8
styles/public/table.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const table = css`
|
||||
.ui.table > tr > td,
|
||||
.ui.table > tbody > tr > td {
|
||||
border-top: 1px solid ${themeVars.color.secondary.alpha.num70};
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user