Compare commits

..

33 Commits

Author SHA1 Message Date
lutinglt
6ddc5057a4 update readme 2025-10-25 15:25:19 +08:00
lutinglt
ceb0fd0b0c version change 2025-10-25 13:07:09 +08:00
lutinglt
c766a16b08 1.24.7 2025-10-25 13:03:41 +08:00
lutinglt
77faa2ce63 update readme 2025-10-25 10:55:07 +08:00
lutinglt
4267c98dbe update readme 2025-10-25 10:48:44 +08:00
lutinglt
558f75de42 VSCode 和 VSCodium 图标添加颜色 2025-10-13 11:58:48 +08:00
lutinglt
6fe0241007 修复手机下仪表板二级导航栏用户菜单按钮没有居中的问题 2025-10-12 12:21:30 +08:00
lutinglt
b790f73fdf update README 2025-10-12 00:02:28 +08:00
lutinglt
db6ec59a83 update CHANGELOG 2025-10-11 23:39:02 +08:00
lutinglt
23658a4917 统一无搜索结果时的样式 #20 2025-10-11 23:35:34 +08:00
lutinglt
0e3628863e 修复仓库探索无搜索结果时的样式 #20 2025-10-11 22:45:51 +08:00
lutinglt
d178870ea8 update readme 2025-10-11 18:05:13 +08:00
lutinglt
38874d8b43 同步工作流运行页面的运行时间字体样式和重新运行按钮样式 2025-10-11 17:45:08 +08:00
lutinglt
1a5db58b4f 修复差异对比文件路径标题栏的菜单样式问题 2025-10-09 21:29:39 +08:00
lutinglt
05a4dc4f8a 优化下拉菜单的样式&同步亮色和柔和暗色主题下的菜单颜色 2025-09-28 21:37:15 +08:00
lutinglt
c5724f41c5 report 2025-09-27 08:03:55 +08:00
lutinglt
585c57dec2 report github screenshot 2025-09-27 08:02:19 +08:00
lutinglt
6aff05494e 修复导航栏工单/PR等仪表板下筛选等菜单的子项的间距问题 2025-09-25 10:06:38 +08:00
lutinglt
1eaba74c7e update style bug report 2025-09-24 22:34:29 +08:00
lutinglt
fe009734d3 修复并同步工单或 PR 详细页面下的标签菜单样式 #19 2025-09-24 22:23:31 +08:00
lutinglt
89ec60e412 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角问题 2025-09-21 12:01:30 +08:00
lutinglt
1462ac8724 优化导航栏标识样式 2025-09-21 10:29:21 +08:00
lutinglt
bd568bb621 优化顶部和二级导航栏的样式和颜色 2025-09-21 10:08:19 +08:00
lutinglt
c5e4b50b9b 优化顶部导航栏样式和颜色 2025-09-21 09:02:11 +08:00
lutinglt
e1a65d12df 调整顶部导航栏高度 2025-09-19 10:03:17 +08:00
lutinglt
7665219c4c bug report 2025-09-17 21:08:24 +08:00
lutinglt
4fd2006e6a style bug issue 2025-09-17 16:26:50 +08:00
lutinglt
f7542a9e7f style bug issue 2025-09-17 16:25:14 +08:00
lutinglt
ec8d12a1fd close blank issue 2025-09-17 16:22:57 +08:00
lutinglt
d573d00019 bug issue template 2025-09-17 16:20:51 +08:00
lutinglt
ac8f5fdd24 Issue Template 2025-09-17 16:11:24 +08:00
lutinglt
99c4de26fd style bug issue 2025-09-17 15:44:45 +08:00
鲁汀
059edda22e Update issue templates 2025-09-17 15:13:58 +08:00
29 changed files with 502 additions and 89 deletions

15
.github/FUNDING.yml vendored
View File

@@ -1,15 +0,0 @@
# These are supported funding model platforms
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
thanks_dev: # Replace with a single thanks.dev username
custom: ["https://afdian.com/a/luting"]

View File

@@ -0,0 +1,91 @@
name: 样式错误报告 ( Style bug report )
description: 安装主题后出现颜色/位置错误等 ( Color/position errors occur after installing the theme )
labels: ["style bug"]
body:
- type: markdown
attributes:
value: |
1. 请使用最新的主题, 并使用 Ctrl+F5 刷新页面查看 Bug 是否消失 ( Please use the latest theme and refresh the page with Ctrl+F5 to see if the Bug has disappeared )
2. 请查看项目根目录下的 CHANGELOG.md 文件, 查看是否有修复该 Bug 的相关描述 ( Please check the CHANGELOG.md file in the project root directory for descriptions of fixes related to this Bug )
3. 如果有相关描述, 可以查看 README.md 自己编译开发版本是否修复了该 Bug ( If there are related descriptions, you can check if the Bug has been fixed by compiling the development version yourself in the README.md )
4. 请查看 Gitea 默认主题下是否有同样的错误, 确认非主题问题 ( Please check if there is the same error in the default Gitea theme, confirming that it is not a theme problem )
- type: input
id: theme-version
attributes:
label: 主题版本 ( Theme Version )
description:
主题的版本, 如果是开发版本可以查看 CSS 文件中 `--theme-version` 的值, 或者查看项目根目录下的 `package.json` 文件
( The version of the theme, if it is a development version, you can check the value of `--theme-version` in the
CSS file, or check the `package.json` file in the project root directory )
placeholder: ex. 1.24.5
validations:
required: true
- type: input
id: gitea-version
attributes:
label: Gitea 版本 ( Gitea Version )
description: 应用主题的 Gitea 版本 ( What version of Gitea are you using? )
placeholder: ex. 1.24.5
validations:
required: true
- type: input
id: page
attributes:
label: 页面 ( Page )
description: 错误出现的页面 ( The page where the error occurred )
placeholder: 工单列表页 ( Issue list page )
validations:
required: true
- type: textarea
id: actual-behavior
attributes:
label: 实际表现 ( Actual Behavior )
description: 请描述实际的错误表现 ( Please describe the actual error presentation )
placeholder: 页面底部的颜色错误 ( The color of the bottom of the page is incorrect )
validations:
required: true
- type: textarea
id: expected-behavior
attributes:
label: 期望表现 ( Expected Behavior )
description: 请描述期望的正确表现 ( Please describe the expected correct presentation )
placeholder: 页面底部的颜色应该是白色 ( The color of the bottom of the page should be white )
validations:
required: true
- type: textarea
id: theme-screenshot
attributes:
label: 应用主题后的截图 ( Screenshot of the theme applied )
description: 请上传应用主题后的截图 ( Please upload a screenshot of the theme applied )
validations:
required: true
- type: textarea
id: steps-to-reproduce
attributes:
label: 复现步骤 ( Steps to reproduce )
description: 请描述如何复现错误 ( Please describe how to reproduce the error )
placeholder: 1. 安装主题 2. 刷新页面 3. 查看错误 ( 1. Install the theme 2. Refresh the page 3. View the error )
validations:
required: false
- type: textarea
id: bug-description
attributes:
label: 错误描述 ( Bug Description )
description: 请描述错误的具体表现 ( Please describe the specific presentation of the error )
placeholder: 页面底部的颜色错误 ( The color of the bottom of the page is incorrect )
validations:
required: false
- type: textarea
id: gitea-screenshot
attributes:
label: Gitea 默认主题下的截图 ( Screenshot of the default Gitea theme )
description: 请上传 Gitea 默认主题下的截图 ( Please upload a screenshot of the default Gitea theme )
validations:
required: false
- type: textarea
id: github-screenshot
attributes:
label: 可供参考的 GitHub 页面对应的截图 ( Screenshot of the corresponding GitHub page )
description: 请上传 GitHub 页面对应的截图 ( Please upload a screenshot of the corresponding GitHub page )
validations:
required: false

View File

@@ -0,0 +1,39 @@
name: 功能请求 ( Feature request )
description: 提出新的功能建议 ( Suggest new features )
labels: ["enhancement"]
body:
- type: markdown
attributes:
value: |
1. 不接受非 Gitea 和 GitHub 的样式需求 ( We do not accept style requests that are not Gitea or GitHub )
2. 颜色需求最好自己实现 ( Color requests are best implemented by yourself )
- type: input
id: page
attributes:
label: 页面 ( Page )
description: 功能涉及的页面 ( The page the feature involves )
placeholder: 首页 ( Home page )
validations:
required: false
- type: textarea
id: feature-description
attributes:
label: 功能描述 ( Feature Description )
description: 请描述你想要的功能 ( Please describe the feature you want )
placeholder: 菜单样式修改 ( Menu style modification )
validations:
required: true
- type: textarea
id: screenshot
attributes:
label: 截图 ( Screenshot )
description: 预期的主题效果 ( Expected theme effect )
validations:
required: false
- type: textarea
id: github-screenshot
attributes:
label: 可供参考的 GitHub 页面对应的截图 ( Screenshot of the corresponding GitHub page )
description: 请上传 GitHub 页面对应的截图 ( Please upload a screenshot of the corresponding GitHub page )
validations:
required: false

View File

@@ -0,0 +1,44 @@
name: 框架错误报告 ( Core bug report )
description: 报告框架的错误 ( Report errors in the theme framework )
labels: ["core bug"]
body:
- type: textarea
id: actual-behavior
attributes:
label: 实际表现 ( Actual Behavior )
description: 请描述实际的错误表现 ( Please describe the actual error presentation )
placeholder: 未生成自动颜色主题 ( No automatic color theme generated )
validations:
required: true
- type: textarea
id: expected-behavior
attributes:
label: 期望表现 ( Expected Behavior )
description: 请描述期望的正确表现 ( Please describe the expected correct presentation )
placeholder: 生成自动颜色主题 ( Generate automatic color theme )
validations:
required: true
- type: textarea
id: steps-to-reproduce
attributes:
label: 复现步骤 ( Steps to reproduce )
description: 请描述如何复现错误 ( Please describe how to reproduce the error )
placeholder:
1. 新建颜色主题 2. 编译主题 3. 查看错误 ( 1. Create a color theme 2. Compile the theme 3. View the error )
validations:
required: false
- type: textarea
id: bug-description
attributes:
label: 错误描述 ( Bug Description )
description: 请描述错误的具体表现 ( Please describe the specific presentation of the error )
placeholder: 未生成自动颜色主题 ( No automatic color theme generated )
validations:
required: false
- type: textarea
id: screenshot
attributes:
label: 截图 ( Screenshot )
description: 请上传错误的截图 ( Please upload the screenshot of the error )
validations:
required: false

12
.github/ISSUE_TEMPLATE/4-doc-report.yml vendored Normal file
View File

@@ -0,0 +1,12 @@
name: 文档报告 ( Document report )
description: 改进或补充文档 ( Improve or supplement the document )
labels: ["documentation"]
body:
- type: textarea
id: doc-description
attributes:
label: 文档描述 ( Document Description )
description: 请描述文档的具体内容 ( Please describe the specific content of the document )
placeholder: 文档内容有误 ( The document content is incorrect )
validations:
required: true

1
.github/ISSUE_TEMPLATE/config.yml vendored Normal file
View File

@@ -0,0 +1 @@
blank_issues_enabled: false

View File

@@ -2,12 +2,12 @@
##### 更符合 GitHub 风格
- 同步页脚样式
- 优化创建标签菜单的菜单项的样式
### 🐞 Fix
- 修复 Wiki 页面搜索项目没有正确隐藏的问题 #15
- 修复后台账户管理排序菜单项的宽度问题
- 修复合并提交中的主色调按钮组阴影问题
- 修复仓库页面下二级导航栏下划线过粗的问题
## 📃 English
### 🌈 Style
##### More aligned with GitHub style
### 🐞 Fix

View File

@@ -1,9 +1,20 @@
<p align="center">
中文 |
<a href="./README_EN.md">English</a>
</p>
<h1 align="center">
<p>Gitea GitHub Theme</p>
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
<img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
</h1>
# Gitea GitHub Theme
<div align="center">
中文 • [English](README_EN.md)
不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题.
</div>
![Dashboard](screenshots/dashboard.png)
> [!TIP]
>
@@ -24,6 +35,12 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
> 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳`
### 主题版本发布规则
- 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本
- 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本
- 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本
## 安装
1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下
@@ -31,10 +48,6 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
3. 重启 Gitea
4. 在设置中查看主题
> [!IMPORTANT]
>
> 自动颜色主题需要亮色和暗色的主题文件
例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark``THEMES` 末尾
`gitea/conf/app.ini` 例:
@@ -47,9 +60,11 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
详细请查看 Gitea 文档
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
## 截图
> [!IMPORTANT]
>
> 自动颜色主题需要亮色和暗色的主题文件
![Dashboard](screenshots/dashboard.png)
## 截图
### 基本主题
@@ -149,7 +164,3 @@ npm run build
编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在
`gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾
## 贡献
请查看 [CONTRIBUTING](CONTRIBUTING.md)

View File

@@ -1,9 +1,20 @@
<p align="center">
<a href="./README.md">中文</a> |
English
</p>
<h1 align="center">
<p>Gitea GitHub Theme</p>
<img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37">
<img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df">
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb">
<img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636">
</h1>
# Gitea GitHub Theme
<div align="center">
English • [中文](README.md)
A Gitea theme that pursues GitHub style not only in colors but also in styling details.
</div>
![Dashboard](screenshots/en/dashboard-en.png)
> [!TIP]
>
@@ -26,6 +37,15 @@ accepted.
> Development stage theme version number format: `1.major.minor.timestamp`
### Theme Version Release Rules
- When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor
version as Gitea will be released
- When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest`
will be released and the old version will no longer be maintained
- The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a
theme version with the same major version as Gitea will be released
## Installation
1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory
@@ -34,10 +54,6 @@ accepted.
3. Restart Gitea
4. Check the theme in the settings
> [!IMPORTANT]
>
> Automatic color theme requires both light and dark theme files.
Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES`
Example `gitea/conf/app.ini`:
@@ -50,9 +66,11 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-
For details, please refer to the Gitea documentation
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
## Screenshots
> [!IMPORTANT]
>
> Automatic color theme requires both light and dark theme files.
![Dashboard](screenshots/en/dashboard-en.png)
## Screenshots
### Basic Themes
@@ -153,7 +171,3 @@ npm run build
After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the
`gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini`
## Contribution
Please refer to [CONTRIBUTING](CONTRIBUTING.md)

View File

@@ -1,6 +1,6 @@
{
"name": "gitea-github-theme",
"version": "1.24.7",
"version": "1.24.8",
"type": "module",
"scripts": {
"dev": "vite build --mode dev",
@@ -31,7 +31,7 @@
"typescript-eslint": "^8.34.1",
"typescript-plugin-css-modules": "^5.1.0",
"typescript-styled-plugin": "^0.18.3",
"vite": "^6.3.5"
"vite": "^7.1.9"
},
"prettier": {
"printWidth": 120,

View File

@@ -70,7 +70,7 @@ export type GithubColor = {
transparent: { bgColor: { active: string; hover: string; selected: string } };
};
shadow: { floating: { small: string }; resting: { small: string } };
overlay: { backdrop: { bgColor: string } };
overlay: { backdrop: { bgColor: string }; bgColor: string };
underlineNav: { borderColor: { active: string } };
contribution: {
default: {
@@ -91,7 +91,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
activeBg: githubColor.control.bgColor.active,
hoverBg: githubColor.control.transparent.bgColor.hover,
menu: {
bg: githubColor.bgColor.inset,
bg: githubColor.overlay.bgColor,
border: githubColor.borderColor.muted,
},
};
@@ -169,7 +169,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
opaque: themeVars.color.box.header,
},
active: githubColor.control.transparent.bgColor.selected,
menu: githubColor.bgColor.inset,
menu: githubColor.overlay.bgColor,
card: themeVars.color.body,
markup: {
tableRow: githubColor.bgColor.muted,
@@ -200,11 +200,11 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
bg: githubColor.bgColor.emphasis,
},
nav: {
bg: githubColor.bgColor.inset,
bg: githubColor.bgColor.muted,
hoverBg: githubColor.control.transparent.bgColor.hover,
text: themeVars.color.text.self,
},
secondaryNavBg: themeVars.color.nav.bg,
secondaryNavBg: themeVars.color.body,
label: {
text: themeVars.color.text.self,
bg: githubColor.bgColor.neutral.muted,

View File

@@ -180,6 +180,7 @@ export const github = {
* @dropdown `dropdown` 下拉框子项的悬停背景颜色
* @menu `verticalMenu` 垂直菜单项的悬停背景颜色
* @menu `menu` 菜单项的悬停背景颜色
* @menu `secondaryMenu` 二级菜单按钮的悬停背景颜色
* @repo `repoHeader` 仓库标题的悬停背景颜色
* @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
* @filelist `repoFiles` README 栏的按钮的悬停背景颜色

View File

@@ -27,7 +27,7 @@ export const actions = css`
margin-bottom: 24px;
margin-left: 2px;
}
// 工作流列表标题栏菜单
.ui.secondary.menu {
background-color: ${themeVars.color.box.header};
border: 1px solid ${themeVars.color.light.border};
@@ -36,6 +36,9 @@ export const actions = css`
border-top-right-radius: ${otherThemeVars.border.radius};
padding: 16px;
margin-bottom: 0;
> .item {
color: ${themeVars.color.text.light.num1};
}
}
.ui.info.message {
@@ -58,7 +61,7 @@ export const actions = css`
.run-list-ref {
background-color: ${themeVars.github.bgColor.accent.muted};
color: ${themeVars.github.fgColor.accent};
font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace);
font-family: var(--fonts-monospace);
font-weight: 400;
&:hover {
background-color: ${themeVars.github.bgColor.accent.muted};
@@ -190,6 +193,26 @@ export const actionViewLeft = css`
width: 4px;
}
}
.job-brief-item-right {
svg.job-brief-rerun {
display: none;
color: ${themeVars.color.console.fg.subtle};
&:hover {
color: ${themeVars.color.text.self};
}
}
.step-summary-duration {
color: ${themeVars.color.console.fg.subtle};
font-family: var(--fonts-monospace);
}
}
&:hover {
.job-brief-item-right {
svg.job-brief-rerun {
display: inline-block;
}
}
}
}
}
}
@@ -246,6 +269,11 @@ export const actionViewRight = css`
color: ${themeVars.color.console.fg.self} !important;
}
}
// 步骤耗时
.step-summary-duration {
font-size: 12px;
font-family: var(--fonts-monospace);
}
}
// 步骤日志
.job-step-logs {

View File

@@ -92,7 +92,7 @@ export const clone = css`
.item {
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px;
line-height: 1.5;
height: 32px;
margin: 0;
svg {
color: ${themeVars.color.text.light.num1};

View File

@@ -135,3 +135,10 @@ export const issueListMobile = css`
}
}
`;
// 修复仪表板下二级面板选择菜单组织的标签间隔
export const fixOrgLabel = css`
.dashboard .secondary-nav .org-visibility .label {
margin-right: 0;
}
`;

View File

@@ -157,3 +157,33 @@ export const mobileList = css`
}
}
`;
// 统一无搜索结果时的样式
export const notMatch = css`
// 组织的仓库列表
.page-content.organization.profile > .ui.container > .ui.stackable > .ui.eleven,
// 用户的仓库列表
.page-content.user.profile > .ui.container > .ui.stackable > .ui.twelve,
// 探索的仓库列表
.page-content.explore.repositories > .ui.container,
// 组织的成员列表
.page-content.organization.members >.ui.container,
// 探索的用户和组织列表
.page-content.explore.users >.ui.container {
// 排除用户的公开活动页
> .flex-list:not(#activity-feed) {
&:has(> div:only-child):not(:has(.flex-item-main)) {
grid-template-columns: 1fr;
> div {
border: 1px solid ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
font-size: 16px;
font-weight: 500;
padding: 32px;
display: flex;
justify-content: center;
}
}
}
}
`;

View File

@@ -48,6 +48,9 @@ export const issueList = css`
}
.issue-list-toolbar-right > .ui.menu {
align-items: center;
> .item {
color: ${themeVars.color.text.light.num1};
}
> .ui.button {
padding: 0 12px;
height: 32px;
@@ -544,6 +547,7 @@ export const issueSidebar = css`
.page-content.repository.issue {
.issue-content {
gap: 24px;
// 侧边栏
.issue-content-right {
border: 0;
font-size: 12px;
@@ -593,6 +597,49 @@ export const issueSidebar = css`
margin-top: 0 !important;
margin-bottom: 0 !important;
}
// 标签菜单项
.ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) {
// 修复标签菜单中描述文本过长没有换行挤掉标签的问题
display: grid !important;
grid-template-columns: auto auto 1fr;
row-gap: 0px; // 去除行间距, 仅当有描述信息时才有间距(.tw-pl-\\\[20px\\\])
// 如果是归档标签则隐藏
&.tw-hidden {
display: none !important;
}
// 默认隐藏多余信息避免标签对齐问题
.item-secondary-info {
display: none;
grid-column: 2 / -1; // 从第2列对齐
color: ${themeVars.color.text.light.num1};
> .tw-pl-\\\[20px\\\] {
// 已经与第二列对齐, 不需要额外的 padding
padding-left: 0px !important;
padding-top: 4px;
// 显示全部描述信息与 Github 保持一致
white-space: normal;
small {
font-size: 12px;
}
}
> .archived-label-hint {
// 与父元素 item 的 padding 对齐 (dropdown.ts .ui.dropdown .menu > .item)
top: 6px;
right: 8px;
}
// 如果有描述信息则显示
&:has(.tw-pl-\\\[20px\\\]) {
display: block;
> .archived-label-hint {
top: 4px; // 有描述信息的归档标签与标签对齐需要更高点
}
}
// 如果有归档标签则显示
&:has(.archived-label-hint > .ui.label) {
display: block;
}
}
}
}
// 时间追踪
> div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
@@ -608,7 +655,8 @@ export const issueSidebar = css`
.ui.form .due-date {
color: ${themeVars.color.text.self};
}
.divider {
// 分割线
> .divider {
margin: 12px 0 12px 8px;
width: calc(100% - 16px);
}

View File

@@ -3,6 +3,30 @@ import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"
export const navbarRight = css`
#navbar {
border-bottom: 0;
padding: 0px 16px;
min-height: 64px;
.navbar-left {
gap: 8px;
> .item {
padding: 4px 8px;
min-height: 20px;
&.active {
font-weight: 600;
}
&#navbar-logo {
// 与下方的用户切换头像对齐
padding-left: 6px;
&:hover {
background: unset;
}
img {
height: 32px;
width: 32px;
}
}
}
}
// 进入用户页面后, 避免注册, 登录和首页等意外覆盖
.navbar-right:has(.user-menu) {
gap: 8px;
@@ -70,12 +94,13 @@ export const navbarRight = css`
.navbar-profile-admin {
background-color: ${themeVars.github.bgColor.accent.emphasis};
border-radius: 25px;
border: 2px solid ${themeVars.color.nav.bg};
color: ${themeVars.color.white};
font-size: 8px;
font-size: 9px;
font-weight: 600;
padding: 2px 5px;
top: -3px;
left: 22px;
top: -7px;
left: 21px;
}
}
// 通知和计时器的圆点
@@ -85,10 +110,10 @@ export const navbarRight = css`
background-color: ${themeVars.github.bgColor.accent.emphasis};
border-radius: 25px;
color: ${themeVars.color.white};
font-size: 8px;
font-size: 9px;
font-weight: 600;
top: -14px;
left: 12px;
top: -15px;
left: 11px;
}
}
}
@@ -126,5 +151,26 @@ export const navbarRight = css`
export const secondaryNav = css`
.page-content > :first-child.secondary-nav {
margin-bottom: 16px;
// 仪表板界面的二级导航栏用户菜单
> .ui.secondary.stackable.menu {
gap: 0px;
min-height: 48px;
> .item {
// 修复手机下的菜单按钮没有居中的问题
margin-top: auto;
margin-bottom: auto;
> .ui.dropdown > .text {
display: inline-flex;
align-items: center;
gap: 4px;
svg {
margin-right: 4px;
}
}
}
> .right.menu {
gap: 4px;
}
}
}
`;

View File

@@ -144,6 +144,9 @@ export const notification = css`
&:last-child {
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
&:hover {
border-bottom-left-radius: 0;
}
}
&:hover {
background: ${themeVars.github.bgColor.accent.muted};

View File

@@ -7,14 +7,7 @@ export const repoHeader = css`
.ui.compact.button {
padding: 3px 12px;
}
// 仓库图标
img.ui.avatar {
height: 32px;
width: 32px;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
}
// 仓库名称
.flex-item {
.flex-item-title {
// 间隔线颜色

View File

@@ -17,7 +17,9 @@ export const dropdown = css`
> .item:not(.tw-hidden) {
display: flex !important;
align-items: center;
align-content: center;
padding: 6px 8px !important;
min-height: 32px;
border-radius: ${otherThemeVars.border.radius} !important;
gap: 4px;
&:not(.emoji) {
@@ -25,9 +27,15 @@ export const dropdown = css`
}
&:not(.emoji):first-of-type {
margin-top: 8px;
// 工单详细页面的标签菜单中的清除选中标签按钮
&.clear-selection {
margin-top: 0px;
}
}
// 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
&.cherry-pick-button,
// 下一个 item 是最后一个并且被隐藏时, 目前仅在顶部导航栏工单和 PR 仪表板的菜单中出现
&:has(+ .tw-hidden:last-of-type),
&:not(.emoji):last-of-type {
margin-bottom: 8px;
}
@@ -102,9 +110,17 @@ export const dropdown = css`
border-radius: 12px !important;
}
// 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单
.ui.dropdown .menu .scrolling.menu {
.ui.dropdown .menu {
.scrolling.menu {
border-radius: 0 0 12px 12px !important;
}
// 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角
&.context-user-switch {
.scrolling.menu:last-child {
border-radius: 0 0 12px 12px !important;
}
}
}
// 修复下拉菜单元素溢出问题
// 用户菜单
.user-menu>.item,
@@ -216,7 +232,8 @@ export const selectionDropdown = css`
// 创建仓库页面的标签选择框
.ui.search.selection.dropdown {
> .menu > .item {
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
> i {
color: ${themeVars.color.text.light.num1};
}
@@ -239,6 +256,32 @@ export const branchDropdown = css`
max-width: 640px;
> .menu > .item {
animation: ${animationDown};
height: 32px;
}
// 分支/标签切换
> .branch-tag-tab {
> .branch-tag-item {
font-weight: 500;
padding: 8px 12px;
height: 32px;
line-height: 1.15;
svg {
display: none;
}
&.active {
background: ${themeVars.color.body};
}
&:hover {
color: inherit;
&:not(.active) {
background: ${themeVars.color.hover.self};
border: 1px solid ${themeVars.color.secondary.self};
border-bottom: 0;
border-top-left-radius: ${otherThemeVars.border.radius};
border-top-right-radius: ${otherThemeVars.border.radius};
}
}
}
}
}
`;

View File

@@ -39,4 +39,8 @@ export const input = css`
.ui.form#repo-search-form {
align-items: center;
}
// 下拉菜单的输入框
.ui.dropdown.dropdown .menu>.input {
margin: 12px 10px;
}
`;

View File

@@ -148,13 +148,15 @@ export const secondaryMenu = css`
padding: 0px 12px;
height: 32px;
font-weight: 500;
color: ${themeVars.color.text.light.num1};
}
a.item:hover {
background: ${themeVars.github.control.transparent.bgColor.hover};
}
}
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
.ui.secondary.pointing.menu {
.overflow-menu-items {
gap: 0.5rem;
gap: 4px;
.item {
padding: 5px 8px !important;
margin-block-start: 0.5rem;

View File

@@ -8,9 +8,17 @@ export const listHeader = css`
}
`;
// 已标星的图标
export const star = css`
export const svg = css`
// 已标星的图标
.octicon-star-fill {
color: ${themeVars.github.button.star.iconColor} !important;
}
// VSCode 图标
.gitea-vscode {
color: #007acc !important;
}
// VSCodium 图标
.gitea-vscodium {
color: #429cf0 !important;
}
`;

View File

@@ -15,7 +15,8 @@ export const tippyBox = css`
border: unset;
box-shadow: ${themeVars.github.shadow.floating.small};
}
&[data-theme="default"] {
&[data-theme="default"],
&[data-theme="menu"] {
border-radius: 12px;
}
&[data-theme="box-with-header"] {
@@ -32,6 +33,8 @@ export const tippyBox = css`
padding: 8px;
.item {
border-radius: ${otherThemeVars.border.radius};
padding: 6px 8px;
height: 32px;
&:hover {
background-color: ${themeVars.github.control.transparent.bgColor.hover};
}

View File

@@ -73,7 +73,7 @@ export const darkGithubColors: GithubColor = {
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
overlay: { backdrop: { bgColor: "#21283066" } },
overlay: { backdrop: { bgColor: "#21283066" }, bgColor: "#010409" },
underlineNav: { borderColor: { active: "#f78166" } },
contribution: {
default: {

View File

@@ -73,7 +73,7 @@ export const lightGithubColors: GithubColor = {
transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
},
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
overlay: { backdrop: { bgColor: "#c8d1da66" } },
overlay: { backdrop: { bgColor: "#c8d1da66" }, bgColor: "#ffffff" },
underlineNav: { borderColor: { active: "#fd8c73" } },
contribution: {
default: {

View File

@@ -67,7 +67,7 @@ export const softDarkGithubColors: GithubColor = {
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
},
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
overlay: { backdrop: { bgColor: "#262c3666" } },
overlay: { backdrop: { bgColor: "#262c3666" }, bgColor: "#2a313c" },
underlineNav: { borderColor: { active: "#ec775c" } },
contribution: {
default: {