Compare commits
	
		
			61 Commits
		
	
	
		
			472647e7c1
			...
			main
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|   | 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 | ||
|   | df9722604e | ||
|   | 359e83afa5 | ||
|   | 163794fbe2 | ||
|   | 11e86dc549 | ||
|   | 1134c53a63 | ||
|   | 5d7a1c53d5 | ||
|   | 4632170948 | ||
|   | cd99934334 | ||
|   | 4bdbb764ee | ||
|   | ff586c7385 | ||
|   | e4cf7abcdc | ||
|   | 5ef97d7fd5 | ||
|   | 243cf80a34 | ||
|   | 280ebe1ad2 | ||
|   | f41327e42b | ||
|   | 987144a594 | ||
|   | 2caf68e290 | ||
|   | e2ccc8c9f7 | ||
|   | 7287aad198 | ||
|   | b3ce1a8439 | ||
|   | 5d96a6896d | ||
|   | ced954c1d0 | ||
|   | bfb27ab4a2 | ||
|   | 3a5306b1a6 | ||
|   | 6608abc39b | ||
|   | 7eeafae4da | ||
|   | 89ac2720c7 | 
| @@ -15,3 +15,7 @@ | |||||||
| #### CSS Variable | #### CSS Variable | ||||||
| 
 | 
 | ||||||
| ##### More GitHub-like style | ##### More GitHub-like style | ||||||
|  | 
 | ||||||
|  | ```text | ||||||
|  | 在 English 下方补充上面 Feature 以下部分的内容的中译英 | ||||||
|  | ``` | ||||||
							
								
								
									
										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
									
								
							
							
						
						| @@ -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
									
								
							
							
						
						| @@ -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
									
								
							
							
						
						| @@ -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
									
								
							
							
						
						| @@ -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
									
								
							
							
						
						| @@ -0,0 +1 @@ | |||||||
|  | blank_issues_enabled: false | ||||||
							
								
								
									
										77
									
								
								.github/release.md
									
									
									
									
										vendored
									
									
								
							
							
						
						| @@ -1,77 +0,0 @@ | |||||||
| ### 🎉 已完成大部分页面的 GitHub 风格 ( GitHub Style Completed for Most Pages ) |  | ||||||
|  |  | ||||||
| 如果您仍在使用旧版本,强烈建议更新至本版本。此版本已为大部分常用页面实现了 GitHub 风格设计,提供了更强的一致性,并修复了若干已知问题。 |  | ||||||
|  |  | ||||||
| 由于布局限制,项目和百科页面的 GitHub 风格适配方案尚未确定。 |  | ||||||
|  |  | ||||||
| If you are still using an older version, we highly recommend updating to this release. This version has implemented the |  | ||||||
| GitHub-style design for most commonly used pages, ensuring stronger consistency, and addresses several known issues. |  | ||||||
|  |  | ||||||
| Due to layout constraints, the approach for adapting the GitHub style to Project and Wiki pages has not yet been |  | ||||||
| determined. |  | ||||||
|  |  | ||||||
| ### ✨ Feature |  | ||||||
|  |  | ||||||
| - 修改外观设置中显示的主题名称 |  | ||||||
|  |  | ||||||
| #### CSS 变量 |  | ||||||
|  |  | ||||||
| - 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度 |  | ||||||
| - 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度 |  | ||||||
|  |  | ||||||
| ### 🌈 Style |  | ||||||
|  |  | ||||||
| - 优化小型按钮的高度 |  | ||||||
| - 一些列表栏的元素位置居中 |  | ||||||
| - 优化仪表板热力图和动态样式 |  | ||||||
|  |  | ||||||
| ##### 更符合 GitHub 风格 |  | ||||||
|  |  | ||||||
| - 同步查看代码文件内容时的样式 |  | ||||||
| - 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验) |  | ||||||
| - 略微减小导航栏创建仓库菜单按钮内的图标间隔 |  | ||||||
| - 微调一些标签的字体大小 |  | ||||||
| - 优化发布页面布局和下载列表样式 |  | ||||||
| - 同步里程碑页面样式 |  | ||||||
| - 同步顶部工单等仪表板样式 |  | ||||||
| - 同步置顶 Issue 样式 |  | ||||||
| - 同步订阅/关注页面样式 |  | ||||||
| - 同步用户菜单样式 |  | ||||||
| - 优化下拉菜单样式 |  | ||||||
| - 同步差异对比页面文件名标题栏样式 |  | ||||||
| - 同步分支菜单宽度 |  | ||||||
| - 同步通知页面样式 |  | ||||||
| - 优化仪表板的仓库组织切换按钮样式 |  | ||||||
| - 同步仓库已标星的星星颜色 |  | ||||||
| - 优化仪表板动态信息间隔 |  | ||||||
| - 微调仓库相关界面元素间隔 |  | ||||||
| - 同步软件包页面样式 |  | ||||||
| - 同步提示框样式 |  | ||||||
| - 同步主色调按钮和红色按钮的阴影样式 |  | ||||||
|  |  | ||||||
| ### 🐞 Fix |  | ||||||
|  |  | ||||||
| - 修复红绿色盲主题的代码高亮色 |  | ||||||
| - 修复仓库中文 README 时的按钮下划线长度 |  | ||||||
| - 修复登录二次验证页面内容位置 |  | ||||||
| - 修复后台管理的运维管理面板的样式 |  | ||||||
| - 取消修改编辑器字体大小, 避免光标错位 |  | ||||||
| - 修复文件预览时文件树右边框过粗 |  | ||||||
| - 修复提交列表尾行圆角 |  | ||||||
| - 修复 Wiki 页面和二级导航栏组织页面的团队菜单的圆角问题 |  | ||||||
| - 修复创建工单页面样式 |  | ||||||
| - 修复归档仓库 Issue 时间线过长插入归档信息框 |  | ||||||
| - 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色 |  | ||||||
|  |  | ||||||
| ## 📃 English (From AI) |  | ||||||
|  |  | ||||||
| ### 🌈 Style |  | ||||||
|  |  | ||||||
| ##### More GitHub-like style |  | ||||||
|  |  | ||||||
| - Improved code file viewing experience (scrolling to bottom no longer causes file tree content overlap) |  | ||||||
|  |  | ||||||
| ### 🐞 Fix |  | ||||||
|  |  | ||||||
| - Fixed code highlight colors for red-green color blindness theme |  | ||||||
| - Fixed button underline length for Chinese README in repositories |  | ||||||
							
								
								
									
										18
									
								
								.github/workflows/release.yml
									
									
									
									
										vendored
									
									
								
							
							
						
						| @@ -17,11 +17,19 @@ jobs: | |||||||
|           npm run build |           npm run build | ||||||
|       - name: Create release |       - name: Create release | ||||||
|         run: | |         run: | | ||||||
|           export TZ=Asia/Shanghai |           tar -zcf dist/theme-github-base.tar.gz --remove-files \ | ||||||
|  |           dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css | ||||||
|  |  | ||||||
|  |           tar -zcf dist/theme-github-colorblindness-colorblind.tar.gz --remove-files \ | ||||||
|  |           dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css | ||||||
|  |  | ||||||
|  |           tar -zcf dist/theme-github-colorblindness-tritanopia.tar.gz --remove-files \ | ||||||
|  |           dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css | ||||||
|  |  | ||||||
|  |           tar -zcf dist/theme-github-extra-pink.tar.gz --remove-files \ | ||||||
|  |           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)" |           TAG="v$(npm run -s version)" | ||||||
|           tar -zcf dist/theme-github-base.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css |           gh release create "$TAG" dist/* --notes-file CHANGELOG.md --draft -t $TAG | ||||||
|           tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css |  | ||||||
|           tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css |  | ||||||
|           gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG |  | ||||||
|         env: |         env: | ||||||
|           GH_TOKEN: ${{ github.token }} |           GH_TOKEN: ${{ github.token }} | ||||||
|   | |||||||
							
								
								
									
										13
									
								
								CHANGELOG.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,13 @@ | |||||||
|  | ### 🌈 Style | ||||||
|  |  | ||||||
|  | ##### 更符合 GitHub 风格 | ||||||
|  |  | ||||||
|  | ### 🐞 Fix | ||||||
|  |  | ||||||
|  | ## 📃 English | ||||||
|  |  | ||||||
|  | ### 🌈 Style | ||||||
|  |  | ||||||
|  | ##### More aligned with GitHub style | ||||||
|  |  | ||||||
|  | ### 🐞 Fix | ||||||
							
								
								
									
										62
									
								
								README.md
									
									
									
									
									
								
							
							
						
						| @@ -1,9 +1,25 @@ | |||||||
| <p align="center"> | <h1 align="center"> | ||||||
|   中文 | |   <p>Gitea GitHub Theme</p> | ||||||
|   <a href="./README_EN.md">English</a> |   <img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37"> | ||||||
| </p> |   <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] | ||||||
|  | > | ||||||
|  | > 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳 | ||||||
|  | > [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons) | ||||||
|  |  | ||||||
| ## 版本号说明 | ## 版本号说明 | ||||||
|  |  | ||||||
| @@ -19,6 +35,12 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版 | |||||||
|  |  | ||||||
| > 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳` | > 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳` | ||||||
|  |  | ||||||
|  | ### 主题版本发布规则 | ||||||
|  |  | ||||||
|  | - 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本 | ||||||
|  | - 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本 | ||||||
|  | - 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本 | ||||||
|  |  | ||||||
| ## 安装 | ## 安装 | ||||||
|  |  | ||||||
| 1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下 | 1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下 | ||||||
| @@ -26,10 +48,6 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版 | |||||||
| 3. 重启 Gitea | 3. 重启 Gitea | ||||||
| 4. 在设置中查看主题 | 4. 在设置中查看主题 | ||||||
|  |  | ||||||
| > [!IMPORTANT] |  | ||||||
| > |  | ||||||
| > 自动颜色主题需要亮色和暗色的主题文件 |  | ||||||
|  |  | ||||||
| 例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark` 到 `THEMES` 末尾 | 例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark` 到 `THEMES` 末尾 | ||||||
|  |  | ||||||
| `gitea/conf/app.ini` 例: | `gitea/conf/app.ini` 例: | ||||||
| @@ -42,6 +60,10 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github- | |||||||
| 详细请查看 Gitea 文档 | 详细请查看 Gitea 文档 | ||||||
| [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) | [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) | ||||||
|  |  | ||||||
|  | > [!IMPORTANT] | ||||||
|  | > | ||||||
|  | > 自动颜色主题需要亮色和暗色的主题文件 | ||||||
|  |  | ||||||
| ## 截图 | ## 截图 | ||||||
|  |  | ||||||
| ### 基本主题 | ### 基本主题 | ||||||
| @@ -50,7 +72,7 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github- | |||||||
| THEMES = github-auto, github-light, github-dark, github-soft-dark | THEMES = github-auto, github-light, github-dark, github-soft-dark | ||||||
| ``` | ``` | ||||||
|  |  | ||||||
| <details open> | <details> | ||||||
| <summary>Base</summary> | <summary>Base</summary> | ||||||
| <h4>theme-github-light.css</h4> | <h4>theme-github-light.css</h4> | ||||||
| <img src="screenshots/light.png"/> | <img src="screenshots/light.png"/> | ||||||
| @@ -75,6 +97,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | |||||||
| <img src="screenshots/colorblind-dark.png"/> | <img src="screenshots/colorblind-dark.png"/> | ||||||
| </details> | </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 变量 | ||||||
|  |  | ||||||
| 可以根据自己的偏好自定义主题的一部分样式 | 可以根据自己的偏好自定义主题的一部分样式 | ||||||
| @@ -126,7 +164,3 @@ npm run build | |||||||
|  |  | ||||||
| 编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在 | 编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在 | ||||||
| `gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾 | `gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾 | ||||||
|  |  | ||||||
| ## 贡献 |  | ||||||
|  |  | ||||||
| 请查看 [CONTRIBUTING](CONTRIBUTING.md) |  | ||||||
|   | |||||||
							
								
								
									
										65
									
								
								README_EN.md
									
									
									
									
									
								
							
							
						
						| @@ -1,9 +1,25 @@ | |||||||
| <p align="center"> | <h1 align="center"> | ||||||
|   <a href="./README.md">中文</a> | |   <p>Gitea GitHub Theme</p> | ||||||
|   English |   <img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37"> | ||||||
| </p> |   <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] | ||||||
|  | > | ||||||
|  | > 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 | ## Version Number Explanation | ||||||
|  |  | ||||||
| @@ -21,6 +37,15 @@ accepted. | |||||||
|  |  | ||||||
| > Development stage theme version number format: `1.major.minor.timestamp` | > 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 | ## Installation | ||||||
|  |  | ||||||
| 1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory | 1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory | ||||||
| @@ -29,10 +54,6 @@ accepted. | |||||||
| 3. Restart Gitea | 3. Restart Gitea | ||||||
| 4. Check the theme in the settings | 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: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES` | ||||||
|  |  | ||||||
| Example `gitea/conf/app.ini`: | Example `gitea/conf/app.ini`: | ||||||
| @@ -45,6 +66,10 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github- | |||||||
| For details, please refer to the Gitea documentation | For details, please refer to the Gitea documentation | ||||||
| [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) | [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 | ## Screenshots | ||||||
|  |  | ||||||
| ### Basic Themes | ### Basic Themes | ||||||
| @@ -53,7 +78,7 @@ For details, please refer to the Gitea documentation | |||||||
| THEMES = github-auto, github-light, github-dark, github-soft-dark | THEMES = github-auto, github-light, github-dark, github-soft-dark | ||||||
| ``` | ``` | ||||||
|  |  | ||||||
| <details open> | <details> | ||||||
| <summary>Base</summary> | <summary>Base</summary> | ||||||
| <h4>theme-github-light.css</h4> | <h4>theme-github-light.css</h4> | ||||||
| <img src="screenshots/en/light.png"/> | <img src="screenshots/en/light.png"/> | ||||||
| @@ -78,6 +103,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | |||||||
| <img src="screenshots/en/colorblind-dark.png"/> | <img src="screenshots/en/colorblind-dark.png"/> | ||||||
| </details> | </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 | ## Custom CSS Variables | ||||||
|  |  | ||||||
| You can customize parts of the theme style according to your preferences | You can customize parts of the theme style according to your preferences | ||||||
| @@ -130,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 | 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` | `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", |   "name": "gitea-github-theme", | ||||||
|   "version": "1.24.6", |   "version": "1.24.8", | ||||||
|   "type": "module", |   "type": "module", | ||||||
|   "scripts": { |   "scripts": { | ||||||
|     "dev": "vite build --mode dev", |     "dev": "vite build --mode dev", | ||||||
| @@ -31,7 +31,7 @@ | |||||||
|     "typescript-eslint": "^8.34.1", |     "typescript-eslint": "^8.34.1", | ||||||
|     "typescript-plugin-css-modules": "^5.1.0", |     "typescript-plugin-css-modules": "^5.1.0", | ||||||
|     "typescript-styled-plugin": "^0.18.3", |     "typescript-styled-plugin": "^0.18.3", | ||||||
|     "vite": "^6.3.5" |     "vite": "^7.1.9" | ||||||
|   }, |   }, | ||||||
|   "prettier": { |   "prettier": { | ||||||
|     "printWidth": 120, |     "printWidth": 120, | ||||||
|   | |||||||
							
								
								
									
										
											BIN
										
									
								
								screenshots/dashboard.png
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 269 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/en/dashboard-en.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 295 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/en/pink-dark-en.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 191 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/en/pink-light-en.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 193 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/en/pink-soft-dark-en.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 190 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/pink-dark.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 210 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/pink-light.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 191 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/pink/pink-soft-dark.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 210 KiB | 
							
								
								
									
										85
									
								
								src/core/display.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,85 @@ | |||||||
|  | import { saturate } from "polished"; | ||||||
|  | import { scaleColorLight } from "src/functions"; | ||||||
|  | import { type GithubColor } from "./github"; | ||||||
|  |  | ||||||
|  | export type DisplayColor = { | ||||||
|  |   num0: string; | ||||||
|  |   num1: string; | ||||||
|  |   num2: string; | ||||||
|  |   num3: string; | ||||||
|  |   num4: string; | ||||||
|  |   num5: string; | ||||||
|  |   num6: string; | ||||||
|  |   num7: string; | ||||||
|  |   num8: string; | ||||||
|  |   num9: string; | ||||||
|  | }; | ||||||
|  |  | ||||||
|  | export function display2GithubColor( | ||||||
|  |   displayColor: DisplayColor, | ||||||
|  |   baseGithubColor: GithubColor, | ||||||
|  |   soft?: boolean | ||||||
|  | ): GithubColor { | ||||||
|  |   return { | ||||||
|  |     ...baseGithubColor, | ||||||
|  |     diffBlob: { | ||||||
|  |       ...baseGithubColor.diffBlob, | ||||||
|  |       hunkNum: { bgColor: { rest: soft ? displayColor.num2 : displayColor.num1 } }, | ||||||
|  |     }, | ||||||
|  |     fgColor: { | ||||||
|  |       ...baseGithubColor.fgColor, | ||||||
|  |       accent: soft ? displayColor.num7 : displayColor.num6, | ||||||
|  |     }, | ||||||
|  |     bgColor: { | ||||||
|  |       ...baseGithubColor.bgColor, | ||||||
|  |       accent: { | ||||||
|  |         emphasis: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5, | ||||||
|  |         muted: soft ? displayColor.num1 : displayColor.num0, | ||||||
|  |       }, | ||||||
|  |     }, | ||||||
|  |     borderColor: { | ||||||
|  |       ...baseGithubColor.borderColor, | ||||||
|  |       accent: { | ||||||
|  |         emphasis: soft ? displayColor.num6 : displayColor.num5, | ||||||
|  |       }, | ||||||
|  |     }, | ||||||
|  |     button: { | ||||||
|  |       ...baseGithubColor.button, | ||||||
|  |       primary: { | ||||||
|  |         ...baseGithubColor.button.primary, | ||||||
|  |         fgColor: { | ||||||
|  |           ...baseGithubColor.button.primary.fgColor, | ||||||
|  |           accent: soft ? displayColor.num7 : displayColor.num6, | ||||||
|  |         }, | ||||||
|  |         bgColor: { | ||||||
|  |           ...baseGithubColor.button.primary.bgColor, | ||||||
|  |           rest: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5, | ||||||
|  |           hover: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, 3)) : scaleColorLight(displayColor.num5, 5), | ||||||
|  |         }, | ||||||
|  |       }, | ||||||
|  |       star: { | ||||||
|  |         iconColor: soft | ||||||
|  |           ? scaleColorLight(displayColor.num6, -2) | ||||||
|  |           : saturate(0.1, scaleColorLight(displayColor.num6, -2)), | ||||||
|  |       }, | ||||||
|  |     }, | ||||||
|  |     underlineNav: { | ||||||
|  |       borderColor: { | ||||||
|  |         active: soft ? scaleColorLight(saturate(0.1, displayColor.num6), -5) : saturate(0.2, displayColor.num6), | ||||||
|  |       }, | ||||||
|  |     }, | ||||||
|  |     contribution: { | ||||||
|  |       ...baseGithubColor.contribution, | ||||||
|  |       default: { | ||||||
|  |         ...baseGithubColor.contribution.default, | ||||||
|  |         bgColor: { | ||||||
|  |           num0: baseGithubColor.contribution.default.bgColor.num0, | ||||||
|  |           num1: soft ? displayColor.num2 : displayColor.num1, | ||||||
|  |           num2: soft ? displayColor.num3 : displayColor.num2, | ||||||
|  |           num3: soft ? displayColor.num5 : displayColor.num4, | ||||||
|  |           num4: soft ? displayColor.num7 : displayColor.num6, | ||||||
|  |         }, | ||||||
|  |       }, | ||||||
|  |     }, | ||||||
|  |   }; | ||||||
|  | } | ||||||
| @@ -8,6 +8,7 @@ import { type ThemeColor } from "./color"; | |||||||
| export type GithubColor = { | export type GithubColor = { | ||||||
|   isDarkTheme: boolean; |   isDarkTheme: boolean; | ||||||
|   display: { |   display: { | ||||||
|  |     blue: { fgColor: string }; | ||||||
|     brown: { fgColor: string }; |     brown: { fgColor: string }; | ||||||
|     cyan: { fgColor: string }; |     cyan: { fgColor: string }; | ||||||
|     indigo: { fgColor: string }; |     indigo: { fgColor: string }; | ||||||
| @@ -60,7 +61,7 @@ export type GithubColor = { | |||||||
|     translucent: string; |     translucent: string; | ||||||
|   }; |   }; | ||||||
|   button: { |   button: { | ||||||
|     primary: { fgColor: { rest: string }; bgColor: { hover: string } }; |     primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string } }; | ||||||
|     danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } }; |     danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } }; | ||||||
|     star: { iconColor: string }; |     star: { iconColor: string }; | ||||||
|   }; |   }; | ||||||
| @@ -69,7 +70,7 @@ export type GithubColor = { | |||||||
|     transparent: { bgColor: { active: string; hover: string; selected: string } }; |     transparent: { bgColor: { active: string; hover: string; selected: string } }; | ||||||
|   }; |   }; | ||||||
|   shadow: { floating: { small: string }; resting: { small: string } }; |   shadow: { floating: { small: string }; resting: { small: string } }; | ||||||
|   overlay: { backdrop: { bgColor: string } }; |   overlay: { backdrop: { bgColor: string }; bgColor: string }; | ||||||
|   underlineNav: { borderColor: { active: string } }; |   underlineNav: { borderColor: { active: string } }; | ||||||
|   contribution: { |   contribution: { | ||||||
|     default: { |     default: { | ||||||
| @@ -90,7 +91,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | |||||||
|     activeBg: githubColor.control.bgColor.active, |     activeBg: githubColor.control.bgColor.active, | ||||||
|     hoverBg: githubColor.control.transparent.bgColor.hover, |     hoverBg: githubColor.control.transparent.bgColor.hover, | ||||||
|     menu: { |     menu: { | ||||||
|       bg: githubColor.bgColor.inset, |       bg: githubColor.overlay.bgColor, | ||||||
|       border: githubColor.borderColor.muted, |       border: githubColor.borderColor.muted, | ||||||
|     }, |     }, | ||||||
|   }; |   }; | ||||||
| @@ -168,7 +169,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | |||||||
|       opaque: themeVars.color.box.header, |       opaque: themeVars.color.box.header, | ||||||
|     }, |     }, | ||||||
|     active: githubColor.control.transparent.bgColor.selected, |     active: githubColor.control.transparent.bgColor.selected, | ||||||
|     menu: githubColor.bgColor.inset, |     menu: githubColor.overlay.bgColor, | ||||||
|     card: themeVars.color.body, |     card: themeVars.color.body, | ||||||
|     markup: { |     markup: { | ||||||
|       tableRow: githubColor.bgColor.muted, |       tableRow: githubColor.bgColor.muted, | ||||||
| @@ -199,11 +200,11 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | |||||||
|       bg: githubColor.bgColor.emphasis, |       bg: githubColor.bgColor.emphasis, | ||||||
|     }, |     }, | ||||||
|     nav: { |     nav: { | ||||||
|       bg: githubColor.bgColor.inset, |       bg: githubColor.bgColor.muted, | ||||||
|       hoverBg: githubColor.control.transparent.bgColor.hover, |       hoverBg: githubColor.control.transparent.bgColor.hover, | ||||||
|       text: themeVars.color.text.self, |       text: themeVars.color.text.self, | ||||||
|     }, |     }, | ||||||
|     secondaryNavBg: themeVars.color.nav.bg, |     secondaryNavBg: themeVars.color.body, | ||||||
|     label: { |     label: { | ||||||
|       text: themeVars.color.text.self, |       text: themeVars.color.text.self, | ||||||
|       bg: githubColor.bgColor.neutral.muted, |       bg: githubColor.bgColor.neutral.muted, | ||||||
| @@ -259,11 +260,14 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | |||||||
|       }, |       }, | ||||||
|       primary: { |       primary: { | ||||||
|         fgColor: { |         fgColor: { | ||||||
|           accent: saturate(0.1, scaleColorLight(githubColor.fgColor.success, githubColor.isDarkTheme ? 10 : -10)), |           accent: saturate( | ||||||
|  |             0.1, | ||||||
|  |             scaleColorLight(githubColor.button.primary.fgColor.accent, githubColor.isDarkTheme ? 10 : -10) | ||||||
|  |           ), | ||||||
|           rest: githubColor.button.primary.fgColor.rest, |           rest: githubColor.button.primary.fgColor.rest, | ||||||
|         }, |         }, | ||||||
|         bgColor: { |         bgColor: { | ||||||
|           rest: themeVars.github.bgColor.success.emphasis, |           rest: githubColor.button.primary.bgColor.rest, | ||||||
|           hover: githubColor.button.primary.bgColor.hover, |           hover: githubColor.button.primary.bgColor.hover, | ||||||
|         }, |         }, | ||||||
|         borderColor: { |         borderColor: { | ||||||
| @@ -348,7 +352,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | |||||||
|       green: githubColor.fgColor.success, |       green: githubColor.fgColor.success, | ||||||
|       cyan: githubColor.display.cyan.fgColor, |       cyan: githubColor.display.cyan.fgColor, | ||||||
|       teal: githubColor.display.teal.fgColor, |       teal: githubColor.display.teal.fgColor, | ||||||
|       blue: githubColor.fgColor.accent, |       blue: githubColor.display.blue.fgColor, | ||||||
|       violet: githubColor.display.indigo.fgColor, |       violet: githubColor.display.indigo.fgColor, | ||||||
|       purple: githubColor.fgColor.done, |       purple: githubColor.fgColor.done, | ||||||
|       pink: githubColor.fgColor.sponsors, |       pink: githubColor.fgColor.sponsors, | ||||||
|   | |||||||
| @@ -25,7 +25,6 @@ export const github = { | |||||||
|     accent: { |     accent: { | ||||||
|       /** 强调色 |       /** 强调色 | ||||||
|        * @diff 折叠/展开按钮的悬停颜色 |        * @diff 折叠/展开按钮的悬停颜色 | ||||||
|        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 |  | ||||||
|        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色 |        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色 | ||||||
|        * @navbar `navbarRight` 头像管理员标识背景颜色 |        * @navbar `navbarRight` 头像管理员标识背景颜色 | ||||||
|        * @dropdown `dropdown` emoji 的悬停背景色 |        * @dropdown `dropdown` emoji 的悬停背景色 | ||||||
| @@ -61,6 +60,7 @@ export const github = { | |||||||
|        * @input `input` 输入框被选中时的边框颜色 |        * @input `input` 输入框被选中时的边框颜色 | ||||||
|        * @clone `clone` 克隆地址框被选中时的边框颜色 |        * @clone `clone` 克隆地址框被选中时的边框颜色 | ||||||
|        * @issue `comment` 评论框被选中时的边框颜色 |        * @issue `comment` 评论框被选中时的边框颜色 | ||||||
|  |        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 | ||||||
|        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色 |        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色 | ||||||
|        * @dropdown `selectionDropdown` 选择输入框的内部边框颜色 |        * @dropdown `selectionDropdown` 选择输入框的内部边框颜色 | ||||||
|        * @notification `notification` 通知列表悬停时的左边框颜色 |        * @notification `notification` 通知列表悬停时的左边框颜色 | ||||||
| @@ -180,6 +180,7 @@ export const github = { | |||||||
|          * @dropdown `dropdown` 下拉框子项的悬停背景颜色 |          * @dropdown `dropdown` 下拉框子项的悬停背景颜色 | ||||||
|          * @menu `verticalMenu` 垂直菜单项的悬停背景颜色 |          * @menu `verticalMenu` 垂直菜单项的悬停背景颜色 | ||||||
|          * @menu `menu` 菜单项的悬停背景颜色 |          * @menu `menu` 菜单项的悬停背景颜色 | ||||||
|  |          * @menu `secondaryMenu` 二级菜单按钮的悬停背景颜色 | ||||||
|          * @repo `repoHeader` 仓库标题的悬停背景颜色 |          * @repo `repoHeader` 仓库标题的悬停背景颜色 | ||||||
|          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色 |          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色 | ||||||
|          * @filelist `repoFiles` README 栏的按钮的悬停背景颜色 |          * @filelist `repoFiles` README 栏的按钮的悬停背景颜色 | ||||||
|   | |||||||
| @@ -27,7 +27,7 @@ export const actions = css` | |||||||
|         margin-bottom: 24px; |         margin-bottom: 24px; | ||||||
|         margin-left: 2px; |         margin-left: 2px; | ||||||
|       } |       } | ||||||
|  |       // 工作流列表标题栏菜单 | ||||||
|       .ui.secondary.menu { |       .ui.secondary.menu { | ||||||
|         background-color: ${themeVars.color.box.header}; |         background-color: ${themeVars.color.box.header}; | ||||||
|         border: 1px solid ${themeVars.color.light.border}; |         border: 1px solid ${themeVars.color.light.border}; | ||||||
| @@ -36,6 +36,9 @@ export const actions = css` | |||||||
|         border-top-right-radius: ${otherThemeVars.border.radius}; |         border-top-right-radius: ${otherThemeVars.border.radius}; | ||||||
|         padding: 16px; |         padding: 16px; | ||||||
|         margin-bottom: 0; |         margin-bottom: 0; | ||||||
|  |         > .item { | ||||||
|  |           color: ${themeVars.color.text.light.num1}; | ||||||
|  |         } | ||||||
|       } |       } | ||||||
|  |  | ||||||
|       .ui.info.message { |       .ui.info.message { | ||||||
| @@ -58,7 +61,7 @@ export const actions = css` | |||||||
|         .run-list-ref { |         .run-list-ref { | ||||||
|           background-color: ${themeVars.github.bgColor.accent.muted}; |           background-color: ${themeVars.github.bgColor.accent.muted}; | ||||||
|           color: ${themeVars.github.fgColor.accent}; |           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; |           font-weight: 400; | ||||||
|           &:hover { |           &:hover { | ||||||
|             background-color: ${themeVars.github.bgColor.accent.muted}; |             background-color: ${themeVars.github.bgColor.accent.muted}; | ||||||
| @@ -180,7 +183,7 @@ export const actionViewLeft = css` | |||||||
|  |  | ||||||
|           &:after { |           &:after { | ||||||
|             overflow: visible; |             overflow: visible; | ||||||
|             background: ${themeVars.github.bgColor.accent.emphasis}; |             background: ${themeVars.github.borderColor.accent.emphasis}; | ||||||
|             border-radius: ${otherThemeVars.border.radius}; |             border-radius: ${otherThemeVars.border.radius}; | ||||||
|             content: ""; |             content: ""; | ||||||
|             height: 24px; |             height: 24px; | ||||||
| @@ -190,6 +193,26 @@ export const actionViewLeft = css` | |||||||
|             width: 4px; |             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; |             color: ${themeVars.color.console.fg.self} !important; | ||||||
|           } |           } | ||||||
|         } |         } | ||||||
|  |         // 步骤耗时 | ||||||
|  |         .step-summary-duration { | ||||||
|  |           font-size: 12px; | ||||||
|  |           font-family: var(--fonts-monospace); | ||||||
|  |         } | ||||||
|       } |       } | ||||||
|       // 步骤日志 |       // 步骤日志 | ||||||
|       .job-step-logs { |       .job-step-logs { | ||||||
|   | |||||||
| @@ -92,7 +92,7 @@ export const clone = css` | |||||||
|         .item { |         .item { | ||||||
|           border-radius: ${otherThemeVars.border.radius}; |           border-radius: ${otherThemeVars.border.radius}; | ||||||
|           padding: 6px 8px; |           padding: 6px 8px; | ||||||
|           line-height: 1.5; |           height: 32px; | ||||||
|           margin: 0; |           margin: 0; | ||||||
|           svg { |           svg { | ||||||
|             color: ${themeVars.color.text.light.num1}; |             color: ${themeVars.color.text.light.num1}; | ||||||
|   | |||||||
| @@ -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; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | `; | ||||||
|   | |||||||
							
								
								
									
										43
									
								
								styles/components/footer.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,43 @@ | |||||||
|  | import { css, themeVars } from "src/types/vars"; | ||||||
|  |  | ||||||
|  | export const footer = css` | ||||||
|  |   .page-footer { | ||||||
|  |     background-color: ${themeVars.color.body}; | ||||||
|  |     border-top: 0; | ||||||
|  |     color: ${themeVars.color.text.light.num1}; | ||||||
|  |     font-size: 12px; | ||||||
|  |     gap: 32px; | ||||||
|  |     justify-content: center; | ||||||
|  |     padding: 16px 0 40px 0; | ||||||
|  |     > .left-links { | ||||||
|  |       gap: 4px; | ||||||
|  |       > a { | ||||||
|  |         color: ${themeVars.color.text.light.num1}; | ||||||
|  |         &:hover { | ||||||
|  |           color: ${themeVars.color.primary.self}; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |       > strong { | ||||||
|  |         font-weight: 400; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |     > .right-links { | ||||||
|  |       gap: 16px; | ||||||
|  |       > .ui.dropdown { | ||||||
|  |         font-size: 12px; | ||||||
|  |         &:hover { | ||||||
|  |           color: ${themeVars.color.primary.self}; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |       > a { | ||||||
|  |         border-left: 0; | ||||||
|  |         color: ${themeVars.color.text.light.num1}; | ||||||
|  |         padding-left: 0; | ||||||
|  |         margin-left: 0; | ||||||
|  |         &:hover { | ||||||
|  |           color: ${themeVars.color.primary.self}; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | `; | ||||||
| @@ -7,9 +7,11 @@ import "./diff"; | |||||||
| import "./editor"; | import "./editor"; | ||||||
| import "./explore"; | import "./explore"; | ||||||
| import "./filelist"; | import "./filelist"; | ||||||
|  | import "./footer"; | ||||||
| import "./heatmap"; | import "./heatmap"; | ||||||
| import "./issue"; | import "./issue"; | ||||||
| import "./milestones"; | import "./milestones"; | ||||||
|  | import "./navbar"; | ||||||
| import "./newrepo"; | import "./newrepo"; | ||||||
| import "./notification"; | import "./notification"; | ||||||
| import "./org"; | import "./org"; | ||||||
|   | |||||||
| @@ -48,6 +48,9 @@ export const issueList = css` | |||||||
|       } |       } | ||||||
|       .issue-list-toolbar-right > .ui.menu { |       .issue-list-toolbar-right > .ui.menu { | ||||||
|         align-items: center; |         align-items: center; | ||||||
|  |         > .item { | ||||||
|  |           color: ${themeVars.color.text.light.num1}; | ||||||
|  |         } | ||||||
|         > .ui.button { |         > .ui.button { | ||||||
|           padding: 0 12px; |           padding: 0 12px; | ||||||
|           height: 32px; |           height: 32px; | ||||||
| @@ -544,6 +547,7 @@ export const issueSidebar = css` | |||||||
|   .page-content.repository.issue { |   .page-content.repository.issue { | ||||||
|     .issue-content { |     .issue-content { | ||||||
|       gap: 24px; |       gap: 24px; | ||||||
|  |       // 侧边栏 | ||||||
|       .issue-content-right { |       .issue-content-right { | ||||||
|         border: 0; |         border: 0; | ||||||
|         font-size: 12px; |         font-size: 12px; | ||||||
| @@ -593,6 +597,49 @@ export const issueSidebar = css` | |||||||
|             margin-top: 0 !important; |             margin-top: 0 !important; | ||||||
|             margin-bottom: 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 { |         > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted { | ||||||
| @@ -608,7 +655,8 @@ export const issueSidebar = css` | |||||||
|         .ui.form .due-date { |         .ui.form .due-date { | ||||||
|           color: ${themeVars.color.text.self}; |           color: ${themeVars.color.text.self}; | ||||||
|         } |         } | ||||||
|         .divider { |         // 分割线 | ||||||
|  |         > .divider { | ||||||
|           margin: 12px 0 12px 8px; |           margin: 12px 0 12px 8px; | ||||||
|           width: calc(100% - 16px); |           width: calc(100% - 16px); | ||||||
|         } |         } | ||||||
|   | |||||||
| @@ -3,6 +3,30 @@ import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars" | |||||||
| 
 | 
 | ||||||
| export const navbarRight = css` | export const navbarRight = css` | ||||||
|   #navbar { |   #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) { |     .navbar-right:has(.user-menu) { | ||||||
|       gap: 8px; |       gap: 8px; | ||||||
| @@ -70,12 +94,13 @@ export const navbarRight = css` | |||||||
|         .navbar-profile-admin { |         .navbar-profile-admin { | ||||||
|           background-color: ${themeVars.github.bgColor.accent.emphasis}; |           background-color: ${themeVars.github.bgColor.accent.emphasis}; | ||||||
|           border-radius: 25px; |           border-radius: 25px; | ||||||
|  |           border: 2px solid ${themeVars.color.nav.bg}; | ||||||
|           color: ${themeVars.color.white}; |           color: ${themeVars.color.white}; | ||||||
|           font-size: 8px; |           font-size: 9px; | ||||||
|           font-weight: 600; |           font-weight: 600; | ||||||
|           padding: 2px 5px; |           padding: 2px 5px; | ||||||
|           top: -3px; |           top: -7px; | ||||||
|           left: 22px; |           left: 21px; | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|       // 通知和计时器的圆点
 |       // 通知和计时器的圆点
 | ||||||
| @@ -85,10 +110,10 @@ export const navbarRight = css` | |||||||
|           background-color: ${themeVars.github.bgColor.accent.emphasis}; |           background-color: ${themeVars.github.bgColor.accent.emphasis}; | ||||||
|           border-radius: 25px; |           border-radius: 25px; | ||||||
|           color: ${themeVars.color.white}; |           color: ${themeVars.color.white}; | ||||||
|           font-size: 8px; |           font-size: 9px; | ||||||
|           font-weight: 600; |           font-weight: 600; | ||||||
|           top: -14px; |           top: -15px; | ||||||
|           left: 12px; |           left: 11px; | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
| @@ -126,5 +151,26 @@ export const navbarRight = css` | |||||||
| export const secondaryNav = css` | export const secondaryNav = css` | ||||||
|   .page-content > :first-child.secondary-nav { |   .page-content > :first-child.secondary-nav { | ||||||
|     margin-bottom: 16px; |     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; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|   } |   } | ||||||
| `;
 | `;
 | ||||||
| @@ -144,6 +144,9 @@ export const notification = css` | |||||||
|           &:last-child { |           &:last-child { | ||||||
|             border-bottom-left-radius: ${otherThemeVars.border.radius}; |             border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||||
|             border-bottom-right-radius: ${otherThemeVars.border.radius}; |             border-bottom-right-radius: ${otherThemeVars.border.radius}; | ||||||
|  |             &:hover { | ||||||
|  |               border-bottom-left-radius: 0; | ||||||
|  |             } | ||||||
|           } |           } | ||||||
|           &:hover { |           &:hover { | ||||||
|             background: ${themeVars.github.bgColor.accent.muted}; |             background: ${themeVars.github.bgColor.accent.muted}; | ||||||
|   | |||||||
| @@ -7,14 +7,7 @@ export const repoHeader = css` | |||||||
|     .ui.compact.button { |     .ui.compact.button { | ||||||
|       padding: 3px 12px; |       padding: 3px 12px; | ||||||
|     } |     } | ||||||
|     // 仓库图标 |     // 仓库名称 | ||||||
|     img.ui.avatar { |  | ||||||
|       height: 32px; |  | ||||||
|       width: 32px; |  | ||||||
|       margin-block-start: 0.5rem; |  | ||||||
|       margin-block-end: 0.5rem; |  | ||||||
|     } |  | ||||||
|  |  | ||||||
|     .flex-item { |     .flex-item { | ||||||
|       .flex-item-title { |       .flex-item-title { | ||||||
|         // 间隔线颜色 |         // 间隔线颜色 | ||||||
|   | |||||||
| @@ -39,6 +39,14 @@ export const baseButton = css` | |||||||
|         ${primaryHoverStyle} |         ${primaryHoverStyle} | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|  |     // 按钮组整体有阴影 | ||||||
|  |     &.buttons { | ||||||
|  |       box-shadow: ${themeVars.github.shadow.resting.small}; | ||||||
|  |       .button { | ||||||
|  |         // 按钮组里的按钮无阴影 | ||||||
|  |         box-shadow: none; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|   } |   } | ||||||
|   // 主色调基本按钮和普通按钮一样 |   // 主色调基本按钮和普通按钮一样 | ||||||
|   // 作者的关注按钮 |   // 作者的关注按钮 | ||||||
|   | |||||||
| @@ -17,16 +17,25 @@ export const dropdown = css` | |||||||
|       > .item:not(.tw-hidden) { |       > .item:not(.tw-hidden) { | ||||||
|         display: flex !important; |         display: flex !important; | ||||||
|         align-items: center; |         align-items: center; | ||||||
|  |         align-content: center; | ||||||
|         padding: 6px 8px !important; |         padding: 6px 8px !important; | ||||||
|  |         min-height: 32px; | ||||||
|         border-radius: ${otherThemeVars.border.radius} !important; |         border-radius: ${otherThemeVars.border.radius} !important; | ||||||
|  |         gap: 4px; | ||||||
|         &:not(.emoji) { |         &:not(.emoji) { | ||||||
|           margin: 0 8px; |           margin: 0 8px; | ||||||
|         } |         } | ||||||
|         &:not(.emoji):first-of-type { |         &:not(.emoji):first-of-type { | ||||||
|           margin-top: 8px; |           margin-top: 8px; | ||||||
|  |           // 工单详细页面的标签菜单中的清除选中标签按钮 | ||||||
|  |           &.clear-selection { | ||||||
|  |             margin-top: 0px; | ||||||
|  |           } | ||||||
|         } |         } | ||||||
|         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中 |         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中 | ||||||
|         &.cherry-pick-button, |         &.cherry-pick-button, | ||||||
|  |         // 下一个 item 是最后一个并且被隐藏时, 目前仅在顶部导航栏工单和 PR 仪表板的菜单中出现 | ||||||
|  |         &:has(+ .tw-hidden:last-of-type), | ||||||
|         &:not(.emoji):last-of-type { |         &:not(.emoji):last-of-type { | ||||||
|           margin-bottom: 8px; |           margin-bottom: 8px; | ||||||
|         } |         } | ||||||
| @@ -48,12 +57,30 @@ export const dropdown = css` | |||||||
|         } |         } | ||||||
|         svg { |         svg { | ||||||
|           margin-top: 2px; |           margin-top: 2px; | ||||||
|           margin-right: 8px; |           margin-right: 4px; | ||||||
|         } |         } | ||||||
|         // 复选框对齐 |         // 复选框对齐 | ||||||
|         .ui.checkbox input[type="checkbox"] { |         .ui.checkbox input[type="checkbox"] { | ||||||
|           height: 100%; |           height: 100%; | ||||||
|         } |         } | ||||||
|  |         // 修复 Wiki 页面下搜索框中搜索时, 显示隐藏的项目 | ||||||
|  |         &.filtered { | ||||||
|  |           display: none !important; | ||||||
|  |         } | ||||||
|  |       } | ||||||
|  |       // 当筛选后, 让菜单提供边距, 因为无法确定保留的是菜单中哪个 item | ||||||
|  |       // 不是所有菜单都提供边距方式, 原因为比如会导致分支菜单中的查看所有分支上间隔缺失, 这种方式单独为 Wiki 菜单做处理 | ||||||
|  |       // 有筛选(.filtered)且有筛选结果(.selected)时提供菜单边距, 没结果时提供会导致多余的菜单边框线 | ||||||
|  |       &:has(> .item.filtered):has(> .item.selected) { | ||||||
|  |         padding: 8px 0px; | ||||||
|  |         > .item { | ||||||
|  |           &:first-of-type { | ||||||
|  |             margin-top: 0; | ||||||
|  |           } | ||||||
|  |           &:last-of-type { | ||||||
|  |             margin-bottom: 0; | ||||||
|  |           } | ||||||
|  |         } | ||||||
|       } |       } | ||||||
|       > .divider { |       > .divider { | ||||||
|         margin: 8px 0; |         margin: 8px 0; | ||||||
| @@ -83,15 +110,23 @@ export const dropdown = css` | |||||||
|     border-radius: 12px !important; |     border-radius: 12px !important; | ||||||
|   } |   } | ||||||
|   // 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单 |   // 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单 | ||||||
|   .ui.dropdown .menu .scrolling.menu { |   .ui.dropdown .menu { | ||||||
|     border-radius: 0 0 12px 12px !important; |     .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, |   .user-menu>.item, | ||||||
|   // Issue/PR 菜单 |   // Issue/PR 菜单 | ||||||
|   .ui.menu .ui.dropdown.item .menu .item { |   .ui.menu .ui.dropdown.item .menu .item { | ||||||
|     width: auto; |     width: calc(100% - 16px); // 减去上方 item 的 margin 左右边距 | ||||||
|   } |   } | ||||||
|   // 去掉下拉菜单的边框线 |   // 去掉下拉菜单的边框线 | ||||||
|   // 设置里的下拉菜单 |   // 设置里的下拉菜单 | ||||||
| @@ -191,6 +226,19 @@ export const selectionDropdown = css` | |||||||
|     border-top-left-radius: ${otherThemeVars.border.radius} !important; |     border-top-left-radius: ${otherThemeVars.border.radius} !important; | ||||||
|     border-top-right-radius: ${otherThemeVars.border.radius} !important; |     border-top-right-radius: ${otherThemeVars.border.radius} !important; | ||||||
|   } |   } | ||||||
|  |   // 工单标签菜单中的标签换行和颜色 | ||||||
|  |   // 标签页面的标签选择框 | ||||||
|  |   .page-content.repository.labels .ui.selection.dropdown.active, | ||||||
|  |   // 创建仓库页面的标签选择框 | ||||||
|  |   .ui.search.selection.dropdown { | ||||||
|  |     > .menu > .item { | ||||||
|  |       flex-direction: column; | ||||||
|  |       align-items: flex-start; | ||||||
|  |       > i { | ||||||
|  |         color: ${themeVars.color.text.light.num1}; | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
| `; | `; | ||||||
|  |  | ||||||
| export const fixSelectionDropdown = css` | export const fixSelectionDropdown = css` | ||||||
| @@ -208,6 +256,32 @@ export const branchDropdown = css` | |||||||
|     max-width: 640px; |     max-width: 640px; | ||||||
|     > .menu > .item { |     > .menu > .item { | ||||||
|       animation: ${animationDown}; |       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}; | ||||||
|  |           } | ||||||
|  |         } | ||||||
|  |       } | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
| `; | `; | ||||||
|   | |||||||
| @@ -12,6 +12,5 @@ import "./label"; // 标签 | |||||||
| import "./menu"; // 菜单 | import "./menu"; // 菜单 | ||||||
| import "./modal"; // 弹窗 | import "./modal"; // 弹窗 | ||||||
| import "./tippy"; // 提示框 | import "./tippy"; // 提示框 | ||||||
| import "./navbar"; // 导航栏 |  | ||||||
| import "./attached"; // 附加样式 | import "./attached"; // 附加样式 | ||||||
| import "./other"; // 其他样式 | import "./other"; // 其他样式 | ||||||
|   | |||||||
| @@ -39,4 +39,8 @@ export const input = css` | |||||||
|   .ui.form#repo-search-form { |   .ui.form#repo-search-form { | ||||||
|     align-items: center; |     align-items: center; | ||||||
|   } |   } | ||||||
|  |   // 下拉菜单的输入框 | ||||||
|  |   .ui.dropdown.dropdown .menu>.input { | ||||||
|  |     margin: 12px 10px; | ||||||
|  |   } | ||||||
| `; | `; | ||||||
|   | |||||||
| @@ -148,13 +148,15 @@ export const secondaryMenu = css` | |||||||
|       padding: 0px 12px; |       padding: 0px 12px; | ||||||
|       height: 32px; |       height: 32px; | ||||||
|       font-weight: 500; |       font-weight: 500; | ||||||
|       color: ${themeVars.color.text.light.num1}; |     } | ||||||
|  |     a.item:hover { | ||||||
|  |       background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
|   // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏 |   // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏 | ||||||
|   .ui.secondary.pointing.menu { |   .ui.secondary.pointing.menu { | ||||||
|     .overflow-menu-items { |     .overflow-menu-items { | ||||||
|       gap: 0.5rem; |       gap: 4px; | ||||||
|       .item { |       .item { | ||||||
|         padding: 5px 8px !important; |         padding: 5px 8px !important; | ||||||
|         margin-block-start: 0.5rem; |         margin-block-start: 0.5rem; | ||||||
| @@ -193,6 +195,10 @@ export const secondaryMenu = css` | |||||||
|       } |       } | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
|  |   // 修复仓库页面下的二级导航栏的下划线因浏览器 BUG 导致显示的异常问题(导致下划线和分割线重叠变粗) | ||||||
|  |   .page-content.repository .ui.secondary.pointing.menu { | ||||||
|  |     border-bottom: none !important; | ||||||
|  |   } | ||||||
| `; | `; | ||||||
|  |  | ||||||
| // 分页菜单 | // 分页菜单 | ||||||
|   | |||||||
| @@ -8,9 +8,17 @@ export const listHeader = css` | |||||||
|   } |   } | ||||||
| `; | `; | ||||||
|  |  | ||||||
| // 已标星的图标 | export const svg = css` | ||||||
| export const star = css` |   // 已标星的图标 | ||||||
|   .octicon-star-fill { |   .octicon-star-fill { | ||||||
|     color: ${themeVars.github.button.star.iconColor} !important; |     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; |       border: unset; | ||||||
|       box-shadow: ${themeVars.github.shadow.floating.small}; |       box-shadow: ${themeVars.github.shadow.floating.small}; | ||||||
|     } |     } | ||||||
|     &[data-theme="default"] { |     &[data-theme="default"], | ||||||
|  |     &[data-theme="menu"] { | ||||||
|       border-radius: 12px; |       border-radius: 12px; | ||||||
|     } |     } | ||||||
|     &[data-theme="box-with-header"] { |     &[data-theme="box-with-header"] { | ||||||
| @@ -32,6 +33,8 @@ export const tippyBox = css` | |||||||
|         padding: 8px; |         padding: 8px; | ||||||
|         .item { |         .item { | ||||||
|           border-radius: ${otherThemeVars.border.radius}; |           border-radius: ${otherThemeVars.border.radius}; | ||||||
|  |           padding: 6px 8px; | ||||||
|  |           height: 32px; | ||||||
|           &:hover { |           &:hover { | ||||||
|             background-color: ${themeVars.github.control.transparent.bgColor.hover}; |             background-color: ${themeVars.github.control.transparent.bgColor.hover}; | ||||||
|           } |           } | ||||||
|   | |||||||
| @@ -1,4 +1,8 @@ | |||||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme, themeVars, type Chroma } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||||
| import { darkGithubColors } from "themes/dark"; | import { darkGithubColors } from "themes/dark"; | ||||||
| @@ -28,7 +32,10 @@ export const colorblindDarkGithubColors: GithubColor = { | |||||||
|     success: { emphasis: "#1f6feb" }, |     success: { emphasis: "#1f6feb" }, | ||||||
|   }, |   }, | ||||||
|   button: { |   button: { | ||||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } }, |     primary: { | ||||||
|  |       fgColor: { accent: "#58a6ff", rest: "#ffffff" }, | ||||||
|  |       bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#2a7aef" }, | ||||||
|  |     }, | ||||||
|     danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } }, |     danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } }, | ||||||
|     star: darkGithubColors.button.star, |     star: darkGithubColors.button.star, | ||||||
|   }, |   }, | ||||||
| @@ -69,7 +76,7 @@ export const colorblindDarkPrettylights: prettylightsColor = { | |||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors); | export const colorblindDarkColors = github2ThemeColor(colorblindDarkGithubColors); | ||||||
| export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights); | export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights); | ||||||
|  |  | ||||||
| export default defineTheme(colorblindDarkColors, colorblindDarkChroma); | export default defineTheme(colorblindDarkColors, colorblindDarkChroma); | ||||||
|   | |||||||
| @@ -1,4 +1,8 @@ | |||||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme, themeVars, type Chroma } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||||
| import { lightGithubColors } from "themes/light"; | import { lightGithubColors } from "themes/light"; | ||||||
| @@ -28,7 +32,10 @@ export const colorblindLightGithubColors: GithubColor = { | |||||||
|     success: { emphasis: "#0969da" }, |     success: { emphasis: "#0969da" }, | ||||||
|   }, |   }, | ||||||
|   button: { |   button: { | ||||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } }, |     primary: { | ||||||
|  |       fgColor: { accent: "#0969da", rest: "#ffffff" }, | ||||||
|  |       bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#0864d1" }, | ||||||
|  |     }, | ||||||
|     danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } }, |     danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } }, | ||||||
|     star: lightGithubColors.button.star, |     star: lightGithubColors.button.star, | ||||||
|   }, |   }, | ||||||
| @@ -69,7 +76,7 @@ export const colorblindLightPrettylights: prettylightsColor = { | |||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors); | export const colorblindLightColors = github2ThemeColor(colorblindLightGithubColors); | ||||||
| export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights); | export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights); | ||||||
|  |  | ||||||
| export default defineTheme(colorblindLightColors, colorblindLightChroma); | export default defineTheme(colorblindLightColors, colorblindLightChroma); | ||||||
|   | |||||||
| @@ -1,9 +1,14 @@ | |||||||
| import { defineTheme, type ThemeColor } from "src"; | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme, themeVars } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
|  |  | ||||||
| export const darkGithubColors: GithubColor = { | export const darkGithubColors: GithubColor = { | ||||||
|   isDarkTheme: true, |   isDarkTheme: true, | ||||||
|   display: { |   display: { | ||||||
|  |     blue: { fgColor: "#4493f8" }, | ||||||
|     brown: { fgColor: "#b69a6d" }, |     brown: { fgColor: "#b69a6d" }, | ||||||
|     cyan: { fgColor: "#07ace4" }, |     cyan: { fgColor: "#07ace4" }, | ||||||
|     indigo: { fgColor: "#9899ec" }, |     indigo: { fgColor: "#9899ec" }, | ||||||
| @@ -56,7 +61,10 @@ export const darkGithubColors: GithubColor = { | |||||||
|     translucent: "#ffffff26", |     translucent: "#ffffff26", | ||||||
|   }, |   }, | ||||||
|   button: { |   button: { | ||||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } }, |     primary: { | ||||||
|  |       fgColor: { accent: "#3fb950", rest: "#ffffff" }, | ||||||
|  |       bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#29903b" }, | ||||||
|  |     }, | ||||||
|     danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } }, |     danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } }, | ||||||
|     star: { iconColor: "#e3b341" }, |     star: { iconColor: "#e3b341" }, | ||||||
|   }, |   }, | ||||||
| @@ -65,7 +73,7 @@ export const darkGithubColors: GithubColor = { | |||||||
|     transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } }, |     transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } }, | ||||||
|   }, |   }, | ||||||
|   shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, |   shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, | ||||||
|   overlay: { backdrop: { bgColor: "#21283066" } }, |   overlay: { backdrop: { bgColor: "#21283066" }, bgColor: "#010409" }, | ||||||
|   underlineNav: { borderColor: { active: "#f78166" } }, |   underlineNav: { borderColor: { active: "#f78166" } }, | ||||||
|   contribution: { |   contribution: { | ||||||
|     default: { |     default: { | ||||||
| @@ -75,6 +83,6 @@ export const darkGithubColors: GithubColor = { | |||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors); | export const darkColors = github2ThemeColor(darkGithubColors); | ||||||
|  |  | ||||||
| export default defineTheme(darkColors); | export default defineTheme(darkColors); | ||||||
|   | |||||||
| @@ -1,9 +1,14 @@ | |||||||
| import { defineTheme, type ThemeColor } from "src"; | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme, themeVars } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
|  |  | ||||||
| export const lightGithubColors: GithubColor = { | export const lightGithubColors: GithubColor = { | ||||||
|   isDarkTheme: false, |   isDarkTheme: false, | ||||||
|   display: { |   display: { | ||||||
|  |     blue: { fgColor: "#0969da" }, | ||||||
|     brown: { fgColor: "#755f43" }, |     brown: { fgColor: "#755f43" }, | ||||||
|     cyan: { fgColor: "#006a80" }, |     cyan: { fgColor: "#006a80" }, | ||||||
|     indigo: { fgColor: "#494edf" }, |     indigo: { fgColor: "#494edf" }, | ||||||
| @@ -56,7 +61,10 @@ export const lightGithubColors: GithubColor = { | |||||||
|     translucent: "#1f232826", |     translucent: "#1f232826", | ||||||
|   }, |   }, | ||||||
|   button: { |   button: { | ||||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } }, |     primary: { | ||||||
|  |       fgColor: { accent: "#1a7f37", rest: "#ffffff" }, | ||||||
|  |       bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#1c8139" }, | ||||||
|  |     }, | ||||||
|     danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } }, |     danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } }, | ||||||
|     star: { iconColor: "#eac54f" }, |     star: { iconColor: "#eac54f" }, | ||||||
|   }, |   }, | ||||||
| @@ -65,7 +73,7 @@ export const lightGithubColors: GithubColor = { | |||||||
|     transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } }, |     transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } }, | ||||||
|   }, |   }, | ||||||
|   shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } }, |   shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } }, | ||||||
|   overlay: { backdrop: { bgColor: "#c8d1da66" } }, |   overlay: { backdrop: { bgColor: "#c8d1da66" }, bgColor: "#ffffff" }, | ||||||
|   underlineNav: { borderColor: { active: "#fd8c73" } }, |   underlineNav: { borderColor: { active: "#fd8c73" } }, | ||||||
|   contribution: { |   contribution: { | ||||||
|     default: { |     default: { | ||||||
| @@ -75,6 +83,6 @@ export const lightGithubColors: GithubColor = { | |||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors); | export const lightColors = github2ThemeColor(lightGithubColors); | ||||||
|  |  | ||||||
| export default defineTheme(lightColors); | export default defineTheme(lightColors); | ||||||
|   | |||||||
							
								
								
									
										26
									
								
								themes/pink-dark.css.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,26 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme } from "src"; | ||||||
|  | import { display2GithubColor, type DisplayColor } from "src/core/display"; | ||||||
|  | import { github2ThemeColor } from "src/core/github"; | ||||||
|  | import { darkGithubColors } from "themes/dark"; | ||||||
|  |  | ||||||
|  | export const pinkDarkDisplayColors: DisplayColor = { | ||||||
|  |   num0: "#2d1524", | ||||||
|  |   num1: "#451c35", | ||||||
|  |   num2: "#65244a", | ||||||
|  |   num3: "#842a5d", | ||||||
|  |   num4: "#ac2f74", | ||||||
|  |   num5: "#d34591", | ||||||
|  |   num6: "#e57bb2", | ||||||
|  |   num7: "#ec8dbd", | ||||||
|  |   num8: "#f4a9cd", | ||||||
|  |   num9: "#f9bed9", | ||||||
|  | }; | ||||||
|  |  | ||||||
|  | export const pinkDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, darkGithubColors); | ||||||
|  | export const pinkDarkColors = github2ThemeColor(pinkDarkGithubColors); | ||||||
|  |  | ||||||
|  | export default defineTheme(pinkDarkColors); | ||||||
							
								
								
									
										26
									
								
								themes/pink-light.css.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,26 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme } from "src"; | ||||||
|  | import { display2GithubColor, type DisplayColor } from "src/core/display"; | ||||||
|  | import { github2ThemeColor } from "src/core/github"; | ||||||
|  | import { lightGithubColors } from "themes/light"; | ||||||
|  |  | ||||||
|  | export const pinkLightDisplayColors: DisplayColor = { | ||||||
|  |   num0: "#ffe5f1", | ||||||
|  |   num1: "#fdc9e2", | ||||||
|  |   num2: "#f8a5cf", | ||||||
|  |   num3: "#f184bc", | ||||||
|  |   num4: "#e55da5", | ||||||
|  |   num5: "#ce2c85", | ||||||
|  |   num6: "#b12f79", | ||||||
|  |   num7: "#8e2e66", | ||||||
|  |   num8: "#6e2b53", | ||||||
|  |   num9: "#4d233d", | ||||||
|  | }; | ||||||
|  |  | ||||||
|  | export const pinkLightGithubColors = display2GithubColor(pinkLightDisplayColors, lightGithubColors); | ||||||
|  | export const pinkLightColors = github2ThemeColor(pinkLightGithubColors); | ||||||
|  |  | ||||||
|  | export default defineTheme(pinkLightColors); | ||||||
							
								
								
									
										14
									
								
								themes/pink-soft-dark.css.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,14 @@ | |||||||
|  | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme } from "src"; | ||||||
|  | import { display2GithubColor } from "src/core/display"; | ||||||
|  | import { github2ThemeColor } from "src/core/github"; | ||||||
|  | import { softDarkGithubColors } from "themes/soft-dark"; | ||||||
|  | import { pinkDarkDisplayColors } from "./pink-dark.css"; | ||||||
|  |  | ||||||
|  | export const pinkSoftDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, softDarkGithubColors, true); | ||||||
|  | export const pinkSoftDarkColors = github2ThemeColor(pinkSoftDarkGithubColors); | ||||||
|  |  | ||||||
|  | export default defineTheme(pinkSoftDarkColors); | ||||||
| @@ -1,4 +1,8 @@ | |||||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme, themeVars, type Chroma } from "src"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||||
| import { darkGithubColors } from "themes/dark"; | import { darkGithubColors } from "themes/dark"; | ||||||
| @@ -51,7 +55,10 @@ export const softDarkGithubColors: GithubColor = { | |||||||
|     translucent: "#cdd9e526", |     translucent: "#cdd9e526", | ||||||
|   }, |   }, | ||||||
|   button: { |   button: { | ||||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } }, |     primary: { | ||||||
|  |       fgColor: { accent: "#57ab5a", rest: "#ffffff" }, | ||||||
|  |       bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#3b8640" }, | ||||||
|  |     }, | ||||||
|     danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } }, |     danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } }, | ||||||
|     star: { iconColor: "#daaa3f" }, |     star: { iconColor: "#daaa3f" }, | ||||||
|   }, |   }, | ||||||
| @@ -60,7 +67,7 @@ export const softDarkGithubColors: GithubColor = { | |||||||
|     transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } }, |     transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } }, | ||||||
|   }, |   }, | ||||||
|   shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, |   shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, | ||||||
|   overlay: { backdrop: { bgColor: "#262c3666" } }, |   overlay: { backdrop: { bgColor: "#262c3666" }, bgColor: "#2a313c" }, | ||||||
|   underlineNav: { borderColor: { active: "#ec775c" } }, |   underlineNav: { borderColor: { active: "#ec775c" } }, | ||||||
|   contribution: { |   contribution: { | ||||||
|     default: { |     default: { | ||||||
| @@ -100,7 +107,7 @@ export const softDarkPrettylights: prettylightsColor = { | |||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors); | export const softDarkColors = github2ThemeColor(softDarkGithubColors); | ||||||
| export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights); | export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights); | ||||||
|  |  | ||||||
| export default defineTheme(softDarkColors, softDarkChroma); | export default defineTheme(softDarkColors, softDarkChroma); | ||||||
|   | |||||||
| @@ -1,4 +1,8 @@ | |||||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme, type Chroma } from "src"; | ||||||
| import { darkPrettylights } from "src/core/chroma"; | import { darkPrettylights } from "src/core/chroma"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||||
| @@ -39,7 +43,7 @@ export const tritanopiaDarkPrettylights: prettylightsColor = { | |||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors); | export const tritanopiaDarkColors = github2ThemeColor(tritanopiaDarkGithubColors); | ||||||
| export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights); | export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights); | ||||||
|  |  | ||||||
| export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma); | export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma); | ||||||
|   | |||||||
| @@ -1,4 +1,8 @@ | |||||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | /** | ||||||
|  |  * @author lutinglt | ||||||
|  |  */ | ||||||
|  |  | ||||||
|  | import { defineTheme, type Chroma } from "src"; | ||||||
| import { lightPrettylights } from "src/core/chroma"; | import { lightPrettylights } from "src/core/chroma"; | ||||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||||
| @@ -39,7 +43,7 @@ export const tritanopiaLightPrettylights: prettylightsColor = { | |||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors); | export const tritanopiaLightColors = github2ThemeColor(tritanopiaLightGithubColors); | ||||||
| export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights); | export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights); | ||||||
|  |  | ||||||
| export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma); | export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma); | ||||||
|   | |||||||