mirror of
				https://github.com/lutinglt/gitea-github-theme.git
				synced 2025-10-31 17:11:12 +00:00 
			
		
		
		
	Compare commits
	
		
			35 Commits
		
	
	
		
			df9722604e
			...
			v1.25.0
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|   | 90b618688b | ||
|   | 6ddc5057a4 | ||
|   | ceb0fd0b0c | ||
|   | c766a16b08 | ||
|   | 77faa2ce63 | ||
|   | 4267c98dbe | ||
|   | 558f75de42 | ||
|   | 6fe0241007 | ||
|   | b790f73fdf | ||
|   | db6ec59a83 | ||
|   | 23658a4917 | ||
|   | 0e3628863e | ||
|   | d178870ea8 | ||
|   | 38874d8b43 | ||
|   | 1a5db58b4f | ||
|   | 05a4dc4f8a | ||
|   | c5724f41c5 | ||
|   | 585c57dec2 | ||
|   | 6aff05494e | ||
|   | 1eaba74c7e | ||
|   | fe009734d3 | ||
|   | 89ec60e412 | ||
|   | 1462ac8724 | ||
|   | bd568bb621 | ||
|   | c5e4b50b9b | ||
|   | e1a65d12df | ||
|   | 7665219c4c | ||
|   | 4fd2006e6a | ||
|   | f7542a9e7f | ||
|   | ec8d12a1fd | ||
|   | d573d00019 | ||
|   | ac8f5fdd24 | ||
|   | 99c4de26fd | ||
|   | 059edda22e | ||
|   | 719d12c4cb | 
| @@ -18,4 +18,4 @@ | ||||
| 
 | ||||
| ```text | ||||
| 在 English 下方补充上面 Feature 以下部分的内容的中译英 | ||||
| ``` | ||||
| ``` | ||||
							
								
								
									
										15
									
								
								.github/FUNDING.yml
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										15
									
								
								.github/FUNDING.yml
									
									
									
									
										vendored
									
									
								
							| @@ -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"] | ||||
							
								
								
									
										91
									
								
								.github/ISSUE_TEMPLATE/1-style-bug-report.yml
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										91
									
								
								.github/ISSUE_TEMPLATE/1-style-bug-report.yml
									
									
									
									
										vendored
									
									
										Normal 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 | ||||
							
								
								
									
										39
									
								
								.github/ISSUE_TEMPLATE/2-feature-request.yml
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										39
									
								
								.github/ISSUE_TEMPLATE/2-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. 不接受非 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 | ||||
							
								
								
									
										44
									
								
								.github/ISSUE_TEMPLATE/3-core-bug-report.yml
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										44
									
								
								.github/ISSUE_TEMPLATE/3-core-bug-report.yml
									
									
									
									
										vendored
									
									
										Normal 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
									
								
							
							
						
						
									
										12
									
								
								.github/ISSUE_TEMPLATE/4-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 | ||||
							
								
								
									
										1
									
								
								.github/ISSUE_TEMPLATE/config.yml
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										1
									
								
								.github/ISSUE_TEMPLATE/config.yml
									
									
									
									
										vendored
									
									
										Normal file
									
								
							| @@ -0,0 +1 @@ | ||||
| blank_issues_enabled: false | ||||
							
								
								
									
										13
									
								
								.github/release.md
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										13
									
								
								.github/release.md
									
									
									
									
										vendored
									
									
								
							| @@ -1,13 +0,0 @@ | ||||
| ### 🌈 Style | ||||
|  | ||||
| ##### 更符合 GitHub 风格 | ||||
|  | ||||
| - 同步页脚样式 | ||||
| - 优化创建标签菜单的菜单项的样式 | ||||
|  | ||||
| ### 🐞 Fix | ||||
|  | ||||
| - 修复 Wiki 页面搜索项目没有正确隐藏的问题 #15 | ||||
| - 修复后台账户管理排序菜单项的宽度问题 | ||||
| - 修复合并提交中的主色调按钮组阴影问题 | ||||
| - 修复仓库页面下二级导航栏下划线过粗的问题 | ||||
							
								
								
									
										2
									
								
								.github/workflows/release.yml
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										2
									
								
								.github/workflows/release.yml
									
									
									
									
										vendored
									
									
								
							| @@ -30,6 +30,6 @@ jobs: | ||||
|           dist/theme-github-pink-auto.css dist/theme-github-pink-light.css dist/theme-github-pink-dark.css dist/theme-github-pink-soft-dark.css | ||||
|  | ||||
|           TAG="v$(npm run -s version)" | ||||
|           gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG | ||||
|           gh release create "$TAG" dist/* --notes-file CHANGELOG.md --draft -t $TAG | ||||
|         env: | ||||
|           GH_TOKEN: ${{ github.token }} | ||||
|   | ||||
							
								
								
									
										19
									
								
								CHANGELOG.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										19
									
								
								CHANGELOG.md
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,19 @@ | ||||
| ### 🌈 Style | ||||
|  | ||||
| ##### 更符合 GitHub 风格 | ||||
|  | ||||
| - 优化用户动态 | ||||
| - 优化顶部导航栏头像 | ||||
| - 优化设置页面 | ||||
| - 优化仓库活动页面 | ||||
|  | ||||
| ## 📃 English | ||||
|  | ||||
| ### 🌈 Style | ||||
|  | ||||
| ##### More aligned with GitHub style | ||||
|  | ||||
| - Optimized user activity feed | ||||
| - Optimized top navigation bar avatars | ||||
| - Optimized settings page | ||||
| - Optimized repository activity page | ||||
							
								
								
									
										41
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										41
									
								
								README.md
									
									
									
									
									
								
							| @@ -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> | ||||
|  | ||||
|  | ||||
|  | ||||
| > [!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] | ||||
| > | ||||
| > 自动颜色主题需要亮色和暗色的主题文件 | ||||
|  | ||||
|  | ||||
| ## 截图 | ||||
|  | ||||
| ### 基本主题 | ||||
|  | ||||
| @@ -149,7 +164,3 @@ npm run build | ||||
|  | ||||
| 编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在 | ||||
| `gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾 | ||||
|  | ||||
| ## 贡献 | ||||
|  | ||||
| 请查看 [CONTRIBUTING](CONTRIBUTING.md) | ||||
|   | ||||
							
								
								
									
										44
									
								
								README_EN.md
									
									
									
									
									
								
							
							
						
						
									
										44
									
								
								README_EN.md
									
									
									
									
									
								
							| @@ -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> | ||||
|  | ||||
|  | ||||
|  | ||||
| > [!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. | ||||
|  | ||||
|  | ||||
| ## 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) | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| { | ||||
|   "name": "gitea-github-theme", | ||||
|   "version": "1.24.7", | ||||
|   "version": "1.25.0", | ||||
|   "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, | ||||
|   | ||||
| @@ -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, | ||||
|   | ||||
| @@ -180,6 +180,7 @@ export const github = { | ||||
|          * @dropdown `dropdown` 下拉框子项的悬停背景颜色 | ||||
|          * @menu `verticalMenu` 垂直菜单项的悬停背景颜色 | ||||
|          * @menu `menu` 菜单项的悬停背景颜色 | ||||
|          * @menu `secondaryMenu` 二级菜单按钮的悬停背景颜色 | ||||
|          * @repo `repoHeader` 仓库标题的悬停背景颜色 | ||||
|          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色 | ||||
|          * @filelist `repoFiles` README 栏的按钮的悬停背景颜色 | ||||
|   | ||||
| @@ -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; | ||||
|         > .ui.dropdown { | ||||
|           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}; | ||||
| @@ -73,22 +76,25 @@ export const actions = css` | ||||
|  | ||||
|         .flex-item { | ||||
|           padding: 16px; | ||||
|  | ||||
|           .flex-item-leading { | ||||
|             align-self: flex-start; | ||||
|             margin-top: 2px; | ||||
|           } | ||||
|  | ||||
|           .flex-item-main { | ||||
|             gap: 0.5rem; | ||||
|           } | ||||
|  | ||||
|           .flex-item-trailing { | ||||
|             justify-content: space-between; | ||||
|  | ||||
|             > .ui.label { | ||||
|               border-radius: ${otherThemeVars.border.radius}; | ||||
|               margin-left: 32px; | ||||
|             } | ||||
|             > .ui.dropdown.jump { | ||||
|               color: ${themeVars.color.text.light.num1}; | ||||
|               &:hover { | ||||
|                 color: ${themeVars.color.primary.self}; | ||||
|               } | ||||
|               .menu > .item:hover { | ||||
|                 color: ${themeVars.color.text.self} !important; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
| @@ -190,6 +196,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; | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| @@ -200,17 +226,28 @@ export const actionViewRight = css` | ||||
|   .action-view-right { | ||||
|     /* 提前加载高度和滚动条 */ | ||||
|     min-height: calc(100vh - 245px); | ||||
|  | ||||
|     // 作业详情页标题 | ||||
|     .job-info-header { | ||||
|       padding: 16px 12px 16px 24px; | ||||
|       height: 80px; | ||||
|  | ||||
|       .job-info-header-title { | ||||
|         color: ${themeVars.github.fgColor.accent}; | ||||
|       padding: 16px 12px 16px 24px !important; | ||||
|       height: 80px !important; | ||||
|       .job-info-header-left { | ||||
|         .job-info-header-title { | ||||
|           color: ${themeVars.github.fgColor.accent} !important; | ||||
|         } | ||||
|         .job-info-header-detail { | ||||
|           margin-top: 8px; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .job-info-header-detail { | ||||
|         margin-top: 8px; | ||||
|       .job-info-header-right { | ||||
|         .ui.dropdown { | ||||
|           > .button { | ||||
|             border: unset; | ||||
|             padding: 7px !important; | ||||
|           } | ||||
|           .menu > .item > i.icon { | ||||
|             margin-right: 2px; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|  | ||||
| @@ -218,7 +255,7 @@ export const actionViewRight = css` | ||||
|       // 步骤标题 | ||||
|       .job-step-summary { | ||||
|         color: ${themeVars.color.console.fg.subtle}; | ||||
|         padding: 8px 10px; | ||||
|         padding: 8px 10px !important; | ||||
|  | ||||
|         &.selected { | ||||
|           // 滚动时固定在顶部的高度与 job-info-header 高度相同 | ||||
| @@ -246,6 +283,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 { | ||||
|   | ||||
| @@ -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}; | ||||
|   | ||||
| @@ -28,7 +28,7 @@ export const commit = css` | ||||
|         a.ui.basic.primary.label { | ||||
|           border-radius: 25px; | ||||
|           border-width: 1.5px; | ||||
|           padding: 5px 8px !important; | ||||
|           padding: 3px 8px !important; | ||||
|         } | ||||
|       } | ||||
|       // 提交信息右侧 | ||||
| @@ -67,11 +67,38 @@ export const commit = css` | ||||
|  | ||||
| export const commitStatus = css` | ||||
|   .flex-text-inline[data-global-init="initCommitStatuses"] { | ||||
|     padding: 6px; | ||||
|     padding: 3px; | ||||
|     margin-top: 2px; | ||||
|     border-radius: ${otherThemeVars.border.radius}; | ||||
|     &:hover { | ||||
|       background-color: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|     } | ||||
|     svg { | ||||
|       width: 16px; | ||||
|       height: 16px; | ||||
|       min-width: 16px; | ||||
|       min-height: 16px; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 提交图 | ||||
| export const commitGraph = css` | ||||
|   .page-content.repository #git-graph-container { | ||||
|     // 提交图的 SHA 标签 | ||||
|     li .ui.label.commit-id-short { | ||||
|       height: 25px; | ||||
|       // 验证提交 SHA 标签 | ||||
|       &.commit-is-signed { | ||||
|         span.ui.label.commit-is-signed { | ||||
|           height: 25px; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     // 提交图的分支选择菜单框 | ||||
|     .ui.search.selection.dropdown > .menu > .item { | ||||
|       flex-direction: row; | ||||
|       align-items: center; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -135,3 +135,10 @@ export const issueListMobile = css` | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 修复仪表板下二级面板选择菜单组织的标签间隔 | ||||
| export const fixOrgLabel = css` | ||||
|   .dashboard .secondary-nav .org-visibility .label { | ||||
|     margin-right: 0; | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -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; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -181,17 +181,18 @@ export const repoFileView = css` | ||||
|       top: 0; | ||||
|       // 左侧文件树 | ||||
|       .repo-view-file-tree-container { | ||||
|         height: calc(100vh - 64px); // 减去头部高度 | ||||
|         height: 100vh; | ||||
|         // 固定头部 | ||||
|         position: sticky; | ||||
|         top: 0; | ||||
|         overflow-y: unset; | ||||
|         &:after { | ||||
|           content: ""; | ||||
|           position: absolute; | ||||
|           top: 0; | ||||
|           right: 0; | ||||
|           width: 1px; | ||||
|           height: calc(100% + 64px); // 头部高度 | ||||
|           height: 100%; | ||||
|           background: ${themeVars.color.secondary.self}; | ||||
|         } | ||||
|         > .repo-button-row { | ||||
| @@ -282,6 +283,7 @@ export const repoFileView = css` | ||||
|               font-size: 12px; | ||||
|             } | ||||
|             .file-header-right { | ||||
|               gap: 0px; | ||||
|               // 按钮组 | ||||
|               > .ui.buttons { | ||||
|                 margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了 | ||||
| @@ -298,12 +300,14 @@ export const repoFileView = css` | ||||
|                 align-items: center; | ||||
|                 background: ${themeVars.color.button}; | ||||
|                 border: 1px solid ${themeVars.color.light.border}; | ||||
|                 border-left-width: 0; | ||||
|                 height: 28px; | ||||
|                 padding: 0 8px; | ||||
|                 svg { | ||||
|                   color: ${themeVars.color.text.light.num1}; | ||||
|                 } | ||||
|                 &:first-of-type { | ||||
|                   border-left-width: 1px; | ||||
|                   border-top-left-radius: ${otherThemeVars.border.radius}; | ||||
|                   border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
|                 } | ||||
|   | ||||
| @@ -74,7 +74,13 @@ export const activity = css` | ||||
|     box-shadow: ${themeVars.github.shadow.floating.small}; | ||||
|     > .flex-item { | ||||
|       gap: 12px; | ||||
|       padding: 12px 8px 16px 14px; | ||||
|       padding: 16px; | ||||
|       > .flex-item-leading { | ||||
|         img { | ||||
|           width: 20px; | ||||
|           height: 20px; | ||||
|         } | ||||
|       } | ||||
|       > .flex-item-main { | ||||
|         gap: 8px !important; | ||||
|         > div:not([class]) { | ||||
| @@ -82,14 +88,37 @@ export const activity = css` | ||||
|           gap: 8px; | ||||
|           flex-wrap: wrap; | ||||
|         } | ||||
|         relative-time { | ||||
|         > .tw-flex-col { | ||||
|           gap: 0px !important; | ||||
|           > .flex-text-block { | ||||
|             gap: 4px; | ||||
|             font-size: 12px; | ||||
|             color: ${themeVars.color.text.light.num1}; | ||||
|             img { | ||||
|               width: 14px; | ||||
|               height: 14px; | ||||
|             } | ||||
|             .ui.sha.label { | ||||
|               margin-top: 0; | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         > .flex-item-body { | ||||
|           gap: 4px; | ||||
|           font-size: 12px; | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|         } | ||||
|         > a { | ||||
|           font-size: 12px; | ||||
|         } | ||||
|       } | ||||
|       // 动态的右侧 svg 图标 | ||||
|       .flex-item-trailing svg { | ||||
|         height: 20px; | ||||
|         width: 20px; | ||||
|       .flex-item-trailing { | ||||
|         align-self: center; | ||||
|         svg { | ||||
|           height: 18px; | ||||
|           width: 18px; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     > .page.buttons { | ||||
|   | ||||
| @@ -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; | ||||
| @@ -70,6 +73,7 @@ export const issueList = css` | ||||
|       > .flex-item { | ||||
|         align-items: center; | ||||
|         padding: 0; | ||||
|         min-height: 64px; | ||||
|         &:last-child { | ||||
|           border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
|           border-bottom-right-radius: ${otherThemeVars.border.radius}; | ||||
| @@ -77,18 +81,16 @@ export const issueList = css` | ||||
|         &:hover { | ||||
|           background-color: ${themeVars.color.hover.opaque}; | ||||
|         } | ||||
|         > .flex-item-icon { | ||||
|           display: flex; | ||||
|           gap: 4px; | ||||
|         > .flex-item-leading { | ||||
|           align-self: flex-start; | ||||
|           margin-top: 14px; | ||||
|           margin-left: 16px; | ||||
|           // 复选框 | ||||
|           input { | ||||
|             background: unset; | ||||
|             margin-top: 14px; | ||||
|             margin-right: 8px !important; | ||||
|           } | ||||
|           svg { | ||||
|             margin-top: 14px; | ||||
|           > .flex-text-inline { | ||||
|             margin-top: 0px !important; | ||||
|             // 复选框 | ||||
|             input { | ||||
|               margin-right: 8px !important; | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         > .flex-item-main { | ||||
| @@ -544,6 +546,7 @@ export const issueSidebar = css` | ||||
|   .page-content.repository.issue { | ||||
|     .issue-content { | ||||
|       gap: 24px; | ||||
|       // 侧边栏 | ||||
|       .issue-content-right { | ||||
|         border: 0; | ||||
|         font-size: 12px; | ||||
| @@ -593,6 +596,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 +654,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); | ||||
|         } | ||||
|   | ||||
| @@ -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; | ||||
| @@ -51,8 +75,7 @@ export const navbarRight = css` | ||||
|       .item.ui.dropdown { | ||||
|         // 头像菜单 | ||||
|         &:last-child { | ||||
|           padding-left: 2px; // 调整此选项需同步增减相同的标识的 left | ||||
|           padding-right: 16px; | ||||
|           padding: 0; | ||||
|           .text { | ||||
|             // 不显示小箭头标识 | ||||
|             > .not-mobile { | ||||
| @@ -63,19 +86,12 @@ export const navbarRight = css` | ||||
|               border-radius: 25px; | ||||
|               height: 32px; | ||||
|               max-height: 32px; | ||||
|               margin: 0 !important; | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         // 用户头像的管理员标识 | ||||
|         .navbar-profile-admin { | ||||
|           background-color: ${themeVars.github.bgColor.accent.emphasis}; | ||||
|           border-radius: 25px; | ||||
|           color: ${themeVars.color.white}; | ||||
|           font-size: 8px; | ||||
|           font-weight: 600; | ||||
|           padding: 2px 5px; | ||||
|           top: -3px; | ||||
|           left: 22px; | ||||
|           &.active { | ||||
|             background: unset; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       // 通知和计时器的圆点 | ||||
| @@ -85,10 +101,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 +142,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; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -90,7 +90,7 @@ export const notification = css` | ||||
|       } | ||||
|       // 通知列表 | ||||
|       &:has(#notification_table) { | ||||
|         > .tw-flex:first-child { | ||||
|         > .flex-text-block:first-child { | ||||
|           background-color: ${themeVars.color.box.header}; | ||||
|           border: 1px solid ${themeVars.color.light.border}; | ||||
|           border-bottom: 0; | ||||
| @@ -137,24 +137,27 @@ export const notification = css` | ||||
|         color: ${themeVars.color.text.light.num1}; | ||||
|         > .notifications-item { | ||||
|           border-top: 1px solid ${themeVars.color.light.border}; | ||||
|           padding: 8px !important; | ||||
|           padding: 12px !important; | ||||
|           &:first-child { | ||||
|             border-top: 0; | ||||
|           } | ||||
|           &:last-child { | ||||
|             border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
|             border-bottom-right-radius: ${otherThemeVars.border.radius}; | ||||
|             &:hover { | ||||
|               border-bottom-left-radius: 0; | ||||
|             } | ||||
|           } | ||||
|           &:hover { | ||||
|             background: ${themeVars.github.bgColor.accent.muted}; | ||||
|             box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset; | ||||
|             color: ${themeVars.color.text.self}; | ||||
|           } | ||||
|           > .notifications-link { | ||||
|             > .notifications-top-row { | ||||
|           > .notifications-link > div{ | ||||
|             &:first-child { | ||||
|               font-size: 12px !important; | ||||
|             } | ||||
|             > .notifications-bottom-row { | ||||
|             &:last-child { | ||||
|               font-size: 14px !important; | ||||
|             } | ||||
|           } | ||||
|   | ||||
| @@ -48,10 +48,14 @@ export const tags = css` | ||||
|       .tag-list-row-title { | ||||
|         line-height: 1.5; | ||||
|       } | ||||
|       .download { | ||||
|       .muted-links { | ||||
|         color: ${themeVars.color.text.light.num1}; | ||||
|         font-size: 12px; | ||||
|         a.muted:hover { | ||||
|         svg { | ||||
|           min-width: 12px; | ||||
|           width: 12px; | ||||
|         } | ||||
|         a:hover { | ||||
|           text-decoration: none; | ||||
|         } | ||||
|       } | ||||
|   | ||||
| @@ -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 { | ||||
|         // 间隔线颜色 | ||||
| @@ -81,7 +74,7 @@ export const repoTopic = css` | ||||
|     border-radius: 25px; | ||||
|     font-size: 12px; | ||||
|     font-weight: 500; | ||||
|     padding: 5px 10px; | ||||
|     padding: 2.5px 10px; | ||||
|     background-color: ${themeVars.github.bgColor.accent.muted}; | ||||
|     color: ${themeVars.github.fgColor.accent}; | ||||
|     &:hover { | ||||
|   | ||||
| @@ -7,6 +7,7 @@ export const attached = css` | ||||
|   .user-setting-content, | ||||
|   .org-setting-content, | ||||
|   .admin-setting-content, | ||||
|   // 仓库动态页面 | ||||
|   // 新建页面内容 | ||||
|   .page-content.repository.new-repo, | ||||
|   .page-content.repository.new.migrate, | ||||
| @@ -18,19 +19,45 @@ export const attached = css` | ||||
|       font-weight: 400; | ||||
|       background-color: unset !important; | ||||
|       margin-bottom: 0.25rem; | ||||
|       padding-left: 0; | ||||
|       padding-right: 0; | ||||
|       > .ui.right { | ||||
|         right: 0; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .ui.attached.segment { | ||||
|       background-color: unset; | ||||
|       border-radius: ${otherThemeVars.border.radius} !important; | ||||
|     } | ||||
|  | ||||
|     .ui.attached.segment:not(.error) { | ||||
|       border-top-left-radius: ${otherThemeVars.border.radius} !important; | ||||
|       border-top-right-radius: ${otherThemeVars.border.radius} !important; | ||||
|       border-bottom-left-radius: 0 !important; | ||||
|       border-bottom-right-radius: 0 !important; | ||||
|       border: 1px solid ${themeVars.color.light.border} !important; | ||||
|       + .ui.attached.segment { | ||||
|         border-top: 0 !important; | ||||
|         border-top-left-radius: 0 !important; | ||||
|         border-top-right-radius: 0 !important; | ||||
|       } | ||||
|       &:has(+ :not(.ui.attached.segment)), | ||||
|       &:last-child { | ||||
|         border-bottom-left-radius: ${otherThemeVars.border.radius} !important; | ||||
|         border-bottom-right-radius: ${otherThemeVars.border.radius} !important; | ||||
|       } | ||||
|     } | ||||
|  | ||||
|     .ui.attached.segment.error { | ||||
|       border: 1px solid ${themeVars.color.error.border} !important; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 仓库活动页面下的边框线修复 | ||||
| export const fixActivity = css` | ||||
|   .page-content.repository.commits .flex-container-main:has(.ui.header.activity-header) { | ||||
|     > .ui.attached.segment { | ||||
|       border-radius: 0; | ||||
|       &:has(+ :not(.ui.attached.segment)) { | ||||
|         border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
|         border-bottom-right-radius: ${otherThemeVars.border.radius}; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
							
								
								
									
										7
									
								
								styles/public/base.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										7
									
								
								styles/public/base.ts
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,7 @@ | ||||
| import { css } from "src/types/vars"; | ||||
|  | ||||
| export const body = css` | ||||
|   body { | ||||
|     line-height: 18px; | ||||
|   } | ||||
| `; | ||||
| @@ -118,6 +118,7 @@ export const fixButtonHeight = css` | ||||
|     .ui.labeled.button > .label { | ||||
|       height: 28px; | ||||
|       min-height: 28px; | ||||
|       line-height: 1.5; | ||||
|     } | ||||
|   } | ||||
|   .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button, | ||||
|   | ||||
| @@ -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; | ||||
|         } | ||||
| @@ -49,7 +57,7 @@ export const dropdown = css` | ||||
|         } | ||||
|         svg { | ||||
|           margin-top: 2px; | ||||
|           margin-right: 4px; | ||||
|           margin-right: 2px; | ||||
|         } | ||||
|         // 复选框对齐 | ||||
|         .ui.checkbox input[type="checkbox"] { | ||||
| @@ -102,8 +110,16 @@ export const dropdown = css` | ||||
|     border-radius: 12px !important; | ||||
|   } | ||||
|   // 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单 | ||||
|   .ui.dropdown .menu .scrolling.menu { | ||||
|     border-radius: 0 0 12px 12px !important; | ||||
|   .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; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   // 修复下拉菜单元素溢出问题 | ||||
|   // 用户菜单 | ||||
| @@ -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}; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -1,6 +1,7 @@ | ||||
| // organize-imports-ignore | ||||
| // tslint:disable:ordered-imports | ||||
| // 组件导入有顺序, 禁止插件优化 | ||||
| import "./base"; // 基础样式, 确保在其他样式之前导入 | ||||
| import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入 | ||||
| import "./animation"; // 动画效果 | ||||
| import "./transition"; // 过渡效果 | ||||
|   | ||||
| @@ -39,4 +39,8 @@ export const input = css` | ||||
|   .ui.form#repo-search-form { | ||||
|     align-items: center; | ||||
|   } | ||||
|   // 下拉菜单的输入框 | ||||
|   .ui.dropdown.dropdown .menu>.input { | ||||
|     margin: 12px 10px; | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -8,6 +8,7 @@ export const label = css` | ||||
|     &.ui.ui.ui { | ||||
|       &.label { | ||||
|         border-radius: 25px; | ||||
|         padding: 1.5px 6px; | ||||
|         // 多个标签的组合标签的圆角修复 | ||||
|         &.scope-parent { | ||||
|           .scope-left { | ||||
| @@ -99,10 +100,14 @@ export const shaLabel = css` | ||||
|       span.ui.label.commit-is-signed { | ||||
|         padding: 3px 5px; | ||||
|         margin-left: 5px; | ||||
|         height: 25px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   // 修复带验证的提交 SHA 标签的高度 | ||||
|   .ui.label.commit-id-short { | ||||
|     height: 25px; | ||||
|   } | ||||
|   // 验证提交附带的图标 | ||||
|   span.ui.label.commit-is-signed { | ||||
|     // 验证信任 | ||||
| @@ -181,7 +186,7 @@ export const repoLabel = css` | ||||
|       color: ${themeVars.color.text.light.num1}; | ||||
|       font-size: 12px; | ||||
|       font-weight: 500; | ||||
|       padding: 3px 6px; | ||||
|       padding: 1.5px 6px; | ||||
|     } | ||||
|   } | ||||
|   .org-visibility span.ui.basic.label { | ||||
|   | ||||
| @@ -139,6 +139,10 @@ export const menu = css` | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   // 菜单标签样式 | ||||
|   .ui.menu .item>.label:not(.floating) { | ||||
|     padding: 1.5px 6px; | ||||
|   } | ||||
| `; | ||||
|  | ||||
| export const secondaryMenu = css` | ||||
| @@ -148,13 +152,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; | ||||
|   | ||||
| @@ -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; | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -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}; | ||||
|           } | ||||
|   | ||||
| @@ -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: { | ||||
|   | ||||
| @@ -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: { | ||||
|   | ||||
| @@ -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: { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user