Compare commits
	
		
			109 Commits
		
	
	
		
			7cd7a48d17
			...
			v1.24.7
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|   | 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 | ||
|   | 472647e7c1 | ||
|   | 84a2f5a1ee | ||
|   | e45c73d850 | ||
|   | 10d0a3dbd8 | ||
|   | ae9bc3cbb5 | ||
|   | dc0f43a082 | ||
|   | 5fb9ef2a61 | ||
|   | 247c6fd987 | ||
|   | 865642eb3b | ||
|   | 392c82fcd5 | ||
|   | 02087941f4 | ||
|   | 0560aad59e | ||
|   | 8e8416507e | ||
|   | 1a702c9526 | ||
|   | 46c2d46482 | ||
|   | 8b15abe30b | ||
|   | 9756cbd409 | ||
|   | b529cefd04 | ||
|   | dded6b1948 | ||
|   | 5e8f62c79f | ||
|   | 9b2a1783ef | ||
|   | 6bb138e964 | ||
|   | e387008ee5 | ||
|   | c8634fb14b | ||
|   | fc10a1f54b | ||
|   | f08c7a0c8c | ||
|   | 6c0fd14119 | ||
|   | cb49b12ff0 | ||
|   | 468a97994a | ||
|   | 1986956191 | ||
|   | 979af2a756 | ||
|   | a34bd93894 | ||
|   | 64684a51da | ||
|   | e89c26e753 | ||
|   | 796c6f1519 | ||
|   | f9d63e6fd1 | ||
|   | 08f662497b | ||
|   | c4bff9fdc1 | ||
|   | a48963c43d | ||
|   | 7366813f02 | ||
|   | dc3047f16a | ||
|   | e0518a2986 | ||
|   | 39727c789b | ||
|   | 3c21a98fee | ||
|   | 9bce3797a6 | ||
|   | 9d3e738723 | ||
|   | 86ac3b73ba | ||
|   | 09a4bbdc07 | ||
|   | 68d632a6b3 | ||
|   | 2b5962e1c2 | 
| @@ -15,3 +15,7 @@ | ||||
| #### CSS Variable | ||||
| 
 | ||||
| ##### 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 | ||||
							
								
								
									
										26
									
								
								.github/release.md
									
									
									
									
										vendored
									
									
								
							
							
						
						| @@ -1,26 +0,0 @@ | ||||
| ### 🌈 Style | ||||
|  | ||||
| ##### 更符合 GitHub 风格 | ||||
|  | ||||
| - 同步查看代码文件内容时的样式 | ||||
| - 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验) | ||||
|  | ||||
| ### 🐞 Fix | ||||
|  | ||||
| - 修复红绿色盲主题的代码高亮色 | ||||
| - 修复仓库中文 README 时的按钮下划线长度 | ||||
| - 修复登录二次验证页面内容位置 | ||||
| - 修复后台管理的运维管理面板的样式 | ||||
|  | ||||
| ## 📃 English (From AI) | ||||
|  | ||||
| ### 🌈 Style | ||||
|  | ||||
| ##### More GitHub-like style | ||||
|  | ||||
| - Improved code file viewing experience (scrolling to bottom no longer causes file tree content overlap) | ||||
|  | ||||
| ### 🐞 Fix | ||||
|  | ||||
| - Fixed code highlight colors for red-green color blindness theme | ||||
| - Fixed button underline length for Chinese README in repositories | ||||
							
								
								
									
										18
									
								
								.github/workflows/release.yml
									
									
									
									
										vendored
									
									
								
							
							
						
						| @@ -17,11 +17,19 @@ jobs: | ||||
|           npm run build | ||||
|       - name: Create release | ||||
|         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)" | ||||
|           tar -zcf dist/theme-github-base.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css | ||||
|           tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css | ||||
|           tar -zcf dist/theme-github-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 | ||||
|           gh release create "$TAG" dist/* --notes-file CHANGELOG.md --draft -t $TAG | ||||
|         env: | ||||
|           GH_TOKEN: ${{ github.token }} | ||||
|   | ||||
							
								
								
									
										51
									
								
								CHANGELOG.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,51 @@ | ||||
| ### 🌈 Style | ||||
|  | ||||
| - 优化顶部和二级导航栏的样式和颜色 #18 | ||||
|  | ||||
| ##### 更符合 GitHub 风格 | ||||
|  | ||||
| - 修复并同步工单或 PR 详细页面下的标签菜单样式 #19 | ||||
| - 统一仓库/用户/组织列表无搜索结果时的样式 #20 | ||||
| - 同步页脚样式 | ||||
| - 优化下拉菜单的样式 | ||||
| - 优化创建标签菜单的菜单项的样式 | ||||
| - 同步亮色和柔和暗色主题下的菜单颜色 | ||||
| - 同步工作流运行页面的运行时间字体样式和重新运行按钮样式 | ||||
| - VSCode 和 VSCodium 图标添加颜色 | ||||
|  | ||||
| ### 🐞 Fix | ||||
|  | ||||
| - 修复 Wiki 页面搜索项目没有正确隐藏的问题 #15 | ||||
| - 修复后台账户管理排序菜单项的宽度问题 | ||||
| - 修复合并提交中的主色调按钮组阴影问题 | ||||
| - 修复仓库页面下二级导航栏下划线过粗的问题 | ||||
| - 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角问题 | ||||
| - 修复导航栏工单/PR等仪表板下筛选等菜单的子项的间距问题 | ||||
| - 修复手机下仪表板二级导航栏用户菜单按钮没有居中的问题 | ||||
|  | ||||
| ## 📃 English | ||||
|  | ||||
| ### 🌈 Style | ||||
|  | ||||
| - Optimized styles and colors for top and secondary navigation bars #18 | ||||
|  | ||||
| ##### More aligned with GitHub style | ||||
|  | ||||
| - Fixed and synchronized label menu styles under issue or PR detail pages #19 | ||||
| - Unified styles for repository/user/organization lists when no search results are found #20 | ||||
| - Synchronized footer styles | ||||
| - Optimized dropdown menu styles | ||||
| - Optimized menu item styles for creating label menus | ||||
| - Synchronized menu colors in light and soft dark themes | ||||
| - Synchronized font styles for run time and rerun button styles on workflow run pages | ||||
| - Added colors to VSCode and VSCodium icons | ||||
|  | ||||
| ### 🐞 Fix | ||||
|  | ||||
| - Fixed issue where Wiki page search items were not properly hidden #15 | ||||
| - Fixed width issue for sorting menu items in admin account management | ||||
| - Fixed shadow issue for primary color button groups in merge commits | ||||
| - Fixed issue where underlines in secondary navigation bars on repository pages were too thick | ||||
| - Fixed menu corner radius issue when no create organization button exists under dashboard user switching button menu | ||||
| - Fixed spacing issue for sub-items in filter menus under navigation bar issues/PRs dashboards | ||||
| - Fixed issue where user menu buttons in secondary navigation bars on mobile dashboards were not centered | ||||
							
								
								
									
										53
									
								
								README.md
									
									
									
									
									
								
							
							
						
						| @@ -1,15 +1,24 @@ | ||||
| <p align="center"> | ||||
|   中文 | | ||||
|   <a href="./README_EN.md">English</a> | ||||
| </p> | ||||
| <h1 align="center"> | ||||
|   <p>Gitea GitHub Theme</p> | ||||
|   <img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37"> | ||||
|   <img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df"> | ||||
|   <img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb"> | ||||
|   <img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636"> | ||||
| </h1> | ||||
|  | ||||
| # gitea-github-theme | ||||
| <div align="center"> | ||||
|  | ||||
| 一个精致模仿 Github 风格的 Gitea 主题, 优化了非常多的细节, 简单的介绍很难说全, 欢迎上手体验 | ||||
| 中文 • [English](README_EN.md) | ||||
|  | ||||
| 不仅仅是在颜色上, 在样式细节上也追求 GitHub 风格的 Gitea 主题. | ||||
|  | ||||
| </div> | ||||
|  | ||||
|  | ||||
|  | ||||
| > [!TIP] | ||||
| > | ||||
| > 推荐搭配文件图标浏览器插件一起使用更佳 | ||||
| > 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳 | ||||
| > [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons) | ||||
|  | ||||
| ## 版本号说明 | ||||
| @@ -26,6 +35,12 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版 | ||||
|  | ||||
| > 开发阶段的主题版本号格式: `1.大版本号.小版本号.时间戳` | ||||
|  | ||||
| ### 主题版本发布规则 | ||||
|  | ||||
| - 当 Gitea 发布小版本时, 主题中间如有变更, 则发布新的和 Gitea 小版本相同的主题版本 | ||||
| - 当 Gitea 发布大版本时, 主题中间如有变更, 会发布 `1.旧大版本号.latest` 的主题版本并不再维护旧版本 | ||||
| - 适配大版本的预发布版本为 `1.大版本号.rc`, 当无明显 BUG 时发布与 Gitea 大版本相同的主题版本 | ||||
|  | ||||
| ## 安装 | ||||
|  | ||||
| 1. 在发布页下载最新的 CSS 主题文件放入 `gitea/public/assets/css` 目录下 | ||||
| @@ -57,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 | ||||
| ``` | ||||
|  | ||||
| <details open> | ||||
| <details> | ||||
| <summary>Base</summary> | ||||
| <h4>theme-github-light.css</h4> | ||||
| <img src="screenshots/light.png"/> | ||||
| @@ -82,6 +97,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | ||||
| <img src="screenshots/colorblind-dark.png"/> | ||||
| </details> | ||||
|  | ||||
| ### 粉色主题 | ||||
|  | ||||
| ```ini | ||||
| THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark | ||||
| ``` | ||||
|  | ||||
| <details> | ||||
| <summary>Pink</summary> | ||||
| <h4>theme-github-pink-light.css</h4> | ||||
| <img src="screenshots/pink/pink-light.png"/> | ||||
| <h4>theme-github-pink-dark.css</h4> | ||||
| <img src="screenshots/pink/pink-dark.png"/> | ||||
| <h4>theme-github-pink-soft-dark.css</h4> | ||||
| <img src="screenshots/pink/pink-soft-dark.png"/> | ||||
| </details> | ||||
|  | ||||
| ## 自定义 CSS 变量 | ||||
|  | ||||
| 可以根据自己的偏好自定义主题的一部分样式 | ||||
| @@ -109,7 +140,9 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | ||||
|  | ||||
| | 变量名                            | 描述                        | 默认  | Github | 推荐  | 最小  | 最大  | | ||||
| | :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- | | ||||
| | --custom-branch-menu-width        | 分支菜单的宽度              | 320px | 320px  | 320px | Gitea | 640px | | ||||
| | --custom-clone-menu-width         | 克隆按钮的菜单宽度          | Gitea | 332px  | 200px | 150px | 400px | | ||||
| | --custom-user-menu-width          | 用户菜单的宽度              | 192px | 256px  |       | Gitea | 320px | | ||||
| | --custom-explore-repolist-columns | 探索页面的仓库列表列数      | 2     | 2      | 2     |       |       | | ||||
| | --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3     | 1      | 2/3   |       |       | | ||||
| | --custom-user-repolist-columns    | 用户页面的仓库列表列数      | 2     | 2      | 1/2   |       |       | | ||||
| @@ -131,7 +164,3 @@ npm run build | ||||
|  | ||||
| 编译完成后, 会在 `dist` 目录下生成主题文件, 你可以将主题文件放入 `gitea/public/assets/css` 目录下, 然后在 | ||||
| `gitea/conf/app.ini` 中添加主题名称到 `THEMES` 末尾 | ||||
|  | ||||
| ## 贡献 | ||||
|  | ||||
| 请查看 [CONTRIBUTING](CONTRIBUTING.md) | ||||
|   | ||||
							
								
								
									
										58
									
								
								README_EN.md
									
									
									
									
									
								
							
							
						
						| @@ -1,15 +1,24 @@ | ||||
| <p align="center"> | ||||
|   <a href="./README.md">中文</a> | | ||||
|   English | ||||
| </p> | ||||
| <h1 align="center"> | ||||
|   <p>Gitea GitHub Theme</p> | ||||
|   <img src="https://img.shields.io/github/issues-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=1a7f37"> | ||||
|   <img src="https://img.shields.io/github/issues-closed-raw/lutinglt/gitea-github-theme?style=for-the-badge&labelColor=25292e&color=8250df"> | ||||
|   <img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/total?style=for-the-badge&labelColor=25292e&color=1f6feb"> | ||||
|   <img src="https://img.shields.io/github/downloads/lutinglt/gitea-github-theme/latest/total?style=for-the-badge&labelColor=25292e&color=238636"> | ||||
| </h1> | ||||
|  | ||||
| # gitea-github-theme | ||||
| <div align="center"> | ||||
|  | ||||
| A meticulously crafted Gitea theme that mimics the GitHub style, with numerous detailed optimizations that are difficult to fully describe in a brief introduction - welcome to experience it firsthand. | ||||
| English • [中文](README.md) | ||||
|  | ||||
| A Gitea theme that pursues GitHub style not only in colors but also in styling details. | ||||
|  | ||||
| </div> | ||||
|  | ||||
|  | ||||
|  | ||||
| > [!TIP] | ||||
| > | ||||
| > For the best experience, it is recommended to use this theme with the file explorer icon plugin | ||||
| > 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 | ||||
| @@ -28,6 +37,15 @@ accepted. | ||||
|  | ||||
| > Development stage theme version number format: `1.major.minor.timestamp` | ||||
|  | ||||
| ### Theme Version Release Rules | ||||
|  | ||||
| - When Gitea releases a minor version, if there are changes in the theme, a new theme version with the same minor | ||||
|   version as Gitea will be released | ||||
| - When Gitea releases a major version, if there are changes in the theme, a theme version `1.old_major_version.latest` | ||||
|   will be released and the old version will no longer be maintained | ||||
| - The pre-release version for major version adaptation is `1.major_version.rc`, and when there are no obvious bugs, a | ||||
|   theme version with the same major version as Gitea will be released | ||||
|  | ||||
| ## Installation | ||||
|  | ||||
| 1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory | ||||
| @@ -38,7 +56,7 @@ accepted. | ||||
|  | ||||
| > [!IMPORTANT] | ||||
| > | ||||
| > Automatic color theme requires both light and dark theme files | ||||
| > 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` | ||||
|  | ||||
| @@ -60,7 +78,7 @@ For details, please refer to the Gitea documentation | ||||
| THEMES = github-auto, github-light, github-dark, github-soft-dark | ||||
| ``` | ||||
|  | ||||
| <details open> | ||||
| <details> | ||||
| <summary>Base</summary> | ||||
| <h4>theme-github-light.css</h4> | ||||
| <img src="screenshots/en/light.png"/> | ||||
| @@ -85,6 +103,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | ||||
| <img src="screenshots/en/colorblind-dark.png"/> | ||||
| </details> | ||||
|  | ||||
| ### Pink Themes | ||||
|  | ||||
| ```ini | ||||
| THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark | ||||
| ``` | ||||
|  | ||||
| <details> | ||||
| <summary>Pink</summary> | ||||
| <h4>theme-github-pink-light.css</h4> | ||||
| <img src="screenshots/pink/en/pink-light-en.png"/> | ||||
| <h4>theme-github-pink-dark.css</h4> | ||||
| <img src="screenshots/pink/en/pink-dark-en.png"/> | ||||
| <h4>theme-github-pink-soft-dark.css</h4> | ||||
| <img src="screenshots/pink/en/pink-soft-dark-en.png"/> | ||||
| </details> | ||||
|  | ||||
| ## Custom CSS Variables | ||||
|  | ||||
| You can customize parts of the theme style according to your preferences | ||||
| @@ -113,7 +147,9 @@ Add the following code at the beginning or end of the theme's CSS file | ||||
|  | ||||
| | Variable Name                     | Description                                              | Default | Github | Recommend | Min   | Max   | | ||||
| | :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- | | ||||
| | --custom-branch-menu-width        | Branch menu width                                        | 320px   | 320px  | 320px     | Gitea | 640px | | ||||
| | --custom-clone-menu-width         | Clone button menu width                                  | Gitea   | 332px  | 200px     | 150px | 400px | | ||||
| | --custom-user-menu-width          | User menu width                                          | 192px   | 200px  |           | Gitea | 320px | | ||||
| | --custom-explore-repolist-columns | Number of repository list columns on explore page        | 2       | 2      | 2         |       |       | | ||||
| | --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3       | 1      | 2/3       |       |       | | ||||
| | --custom-user-repolist-columns    | Number of repository list columns on user page           | 2       | 2      | 1/2       |       |       | | ||||
| @@ -135,7 +171,3 @@ npm run build | ||||
|  | ||||
| After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the | ||||
| `gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini` | ||||
|  | ||||
| ## Contribution | ||||
|  | ||||
| Please refer to [CONTRIBUTING](CONTRIBUTING.md) | ||||
| @@ -1,7 +1,6 @@ | ||||
| { | ||||
|   "name": "gitea-github-theme", | ||||
|   "version": "1.24.6", | ||||
|   "description": "A sophisticated theme to make Gitea look and feel like GitHub", | ||||
|   "version": "1.24.7", | ||||
|   "type": "module", | ||||
|   "scripts": { | ||||
|     "dev": "vite build --mode dev", | ||||
| @@ -32,7 +31,7 @@ | ||||
|     "typescript-eslint": "^8.34.1", | ||||
|     "typescript-plugin-css-modules": "^5.1.0", | ||||
|     "typescript-styled-plugin": "^0.18.3", | ||||
|     "vite": "^6.3.5" | ||||
|     "vite": "^7.1.9" | ||||
|   }, | ||||
|   "prettier": { | ||||
|     "printWidth": 120, | ||||
|   | ||||
							
								
								
									
										
											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 = { | ||||
|   isDarkTheme: boolean; | ||||
|   display: { | ||||
|     blue: { fgColor: string }; | ||||
|     brown: { fgColor: string }; | ||||
|     cyan: { fgColor: string }; | ||||
|     indigo: { fgColor: string }; | ||||
| @@ -36,10 +37,12 @@ export type GithubColor = { | ||||
|     black: string; | ||||
|     white: string; | ||||
|     muted: string; | ||||
|     onEmphasis: string; | ||||
|   }; | ||||
|   bgColor: { | ||||
|     accent: { emphasis: string; muted: string }; | ||||
|     attention: { muted: string }; | ||||
|     emphasis: string; | ||||
|     success: { emphasis: string; muted: string }; | ||||
|     danger: { muted: string }; | ||||
|     done: { emphasis: string }; | ||||
| @@ -58,15 +61,16 @@ export type GithubColor = { | ||||
|     translucent: string; | ||||
|   }; | ||||
|   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 } }; | ||||
|     star: { iconColor: string }; | ||||
|   }; | ||||
|   control: { | ||||
|     bgColor: { active: string; hover: string; rest: string }; | ||||
|     transparent: { bgColor: { active: string; hover: string; selected: string } }; | ||||
|   }; | ||||
|   shadow: { floating: { small: string } }; | ||||
|   overlay: { backdrop: { bgColor: string } }; | ||||
|   shadow: { floating: { small: string }; resting: { small: string } }; | ||||
|   overlay: { backdrop: { bgColor: string }; bgColor: string }; | ||||
|   underlineNav: { borderColor: { active: string } }; | ||||
|   contribution: { | ||||
|     default: { | ||||
| @@ -87,7 +91,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | ||||
|     activeBg: githubColor.control.bgColor.active, | ||||
|     hoverBg: githubColor.control.transparent.bgColor.hover, | ||||
|     menu: { | ||||
|       bg: githubColor.bgColor.inset, | ||||
|       bg: githubColor.overlay.bgColor, | ||||
|       border: githubColor.borderColor.muted, | ||||
|     }, | ||||
|   }; | ||||
| @@ -165,7 +169,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | ||||
|       opaque: themeVars.color.box.header, | ||||
|     }, | ||||
|     active: githubColor.control.transparent.bgColor.selected, | ||||
|     menu: githubColor.bgColor.inset, | ||||
|     menu: githubColor.overlay.bgColor, | ||||
|     card: themeVars.color.body, | ||||
|     markup: { | ||||
|       tableRow: githubColor.bgColor.muted, | ||||
| @@ -192,15 +196,15 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | ||||
|       activeBg: githubColor.bgColor.accent.muted, | ||||
|     }, | ||||
|     tooltip: { | ||||
|       text: githubColor.fgColor.default, | ||||
|       bg: githubColor.bgColor.default, | ||||
|       text: githubColor.fgColor.onEmphasis, | ||||
|       bg: githubColor.bgColor.emphasis, | ||||
|     }, | ||||
|     nav: { | ||||
|       bg: githubColor.bgColor.inset, | ||||
|       bg: githubColor.bgColor.muted, | ||||
|       hoverBg: githubColor.control.transparent.bgColor.hover, | ||||
|       text: themeVars.color.text.self, | ||||
|     }, | ||||
|     secondaryNavBg: themeVars.color.nav.bg, | ||||
|     secondaryNavBg: themeVars.color.body, | ||||
|     label: { | ||||
|       text: themeVars.color.text.self, | ||||
|       bg: githubColor.bgColor.neutral.muted, | ||||
| @@ -256,11 +260,14 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | ||||
|       }, | ||||
|       primary: { | ||||
|         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, | ||||
|         }, | ||||
|         bgColor: { | ||||
|           rest: themeVars.github.bgColor.success.emphasis, | ||||
|           rest: githubColor.button.primary.bgColor.rest, | ||||
|           hover: githubColor.button.primary.bgColor.hover, | ||||
|         }, | ||||
|         borderColor: { | ||||
| @@ -281,6 +288,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | ||||
|           hover: githubColor.borderColor.translucent, | ||||
|         }, | ||||
|       }, | ||||
|       star: { | ||||
|         iconColor: githubColor.button.star.iconColor, | ||||
|       }, | ||||
|     }, | ||||
|     control: { | ||||
|       bgColor: { | ||||
| @@ -296,6 +306,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | ||||
|       floating: { | ||||
|         small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`, | ||||
|       }, | ||||
|       resting: { | ||||
|         small: `0px 1px 1px 0px ${githubColor.shadow.resting.small}, 0px 1px 3px 0px ${githubColor.shadow.resting.small};`, | ||||
|       }, | ||||
|     }, | ||||
|     underlineNav: { | ||||
|       borderColor: { | ||||
| @@ -339,7 +352,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | ||||
|       green: githubColor.fgColor.success, | ||||
|       cyan: githubColor.display.cyan.fgColor, | ||||
|       teal: githubColor.display.teal.fgColor, | ||||
|       blue: githubColor.fgColor.accent, | ||||
|       blue: githubColor.display.blue.fgColor, | ||||
|       violet: githubColor.display.indigo.fgColor, | ||||
|       purple: githubColor.fgColor.done, | ||||
|       pink: githubColor.fgColor.sponsors, | ||||
|   | ||||
| @@ -1,5 +1,7 @@ | ||||
| import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css"; | ||||
| import { otherThemeVars, themeVars } from "src/types/vars"; | ||||
| import { createGlobalTheme, globalStyle } from "@vanilla-extract/css"; | ||||
| import fs from "node:fs"; | ||||
| import path from "node:path"; | ||||
| import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars"; | ||||
| import type { MapLeafNodes, WithOptionalLayer } from "./types"; | ||||
|  | ||||
| export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>; | ||||
| @@ -32,11 +34,19 @@ const emoji = ` | ||||
| .emoji[aria-label="musical notes"] | ||||
| `; | ||||
|  | ||||
| // 版本号: 版本号.YYMMDD | ||||
| const now = new Date(); | ||||
| const year = now.getFullYear().toString().slice(-2); | ||||
| const month = (now.getMonth() + 1).toString().padStart(2, "0"); | ||||
| const day = now.getDate().toString().padStart(2, "0"); | ||||
|  | ||||
| const pkgPath = path.join(__dirname, "../..", "package.json"); | ||||
| const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8")); | ||||
| const version = `"${pkg.version}.${year}${month}${day}"`; | ||||
|  | ||||
| export function createTheme(theme: Theme): void { | ||||
|   const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme); | ||||
|   if (isDarkTheme) { | ||||
|     globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" }); | ||||
|   } | ||||
|   createGlobalTheme(":root", themeInfoVars, { version }); | ||||
|   createGlobalTheme(":root", themeVars, theme); | ||||
|   createGlobalTheme(":root", otherThemeVars, { | ||||
|     border: { radius: "6px" }, | ||||
| @@ -53,12 +63,5 @@ export function createTheme(theme: Theme): void { | ||||
|     accentColor: themeVars.color.accent, | ||||
|     colorScheme: isDarkTheme ? "dark" : "light", | ||||
|   }); | ||||
|   globalKeyframes(overlayAppearDown, { | ||||
|     "0%": { opacity: 0, transform: "translateY(-8px)" }, | ||||
|     "100%": { opacity: 1, transform: "translateY(0)" }, | ||||
|   }); | ||||
|   globalKeyframes(overlayAppearUp, { | ||||
|     "0%": { opacity: 0, transform: "translateY(8px)" }, | ||||
|     "100%": { opacity: 1, transform: "translateY(0)" }, | ||||
|   }); | ||||
|   if (isDarkTheme) globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" }); | ||||
| } | ||||
|   | ||||
| @@ -50,6 +50,11 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k | ||||
|   return input; | ||||
| } | ||||
|  | ||||
| function giteaThemeMetaInfo(nameGroup: string[]): string { | ||||
|   const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "); | ||||
|   return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别 | ||||
| } | ||||
|  | ||||
| const prefix = "theme-github-"; | ||||
|  | ||||
| /** | ||||
| @@ -82,23 +87,28 @@ export function themePlugin(): Plugin { | ||||
|           const fileName = `${prefix}${value.fileName}`; | ||||
|           const originalFileName = value.originalFileNames.pop(); | ||||
|           const type = value.type; | ||||
|           const source = `${styles}${value.source.toString()}`; | ||||
|           // 合并样式文件和主题信息 | ||||
|           const meta = giteaThemeMetaInfo(key.split(".")[0].split("-")); | ||||
|           const source = `${meta}${value.source.toString()}${styles}`; | ||||
|           // 添加主题到输出 | ||||
|           this.emitFile({ name, fileName, source, type, originalFileName }); | ||||
|           // 自动颜色主题 | ||||
|           const isDark = key.endsWith("dark.css"); | ||||
|           const darkName = key.replace("light.css", "dark.css"); | ||||
|           const lightName = key.replace("dark.css", "light.css"); | ||||
|           const autoName = `${prefix}${key.replace("dark.css", "auto.css").replace("light.css", "auto.css")}`; | ||||
|           const darkName = key.replace("light", "dark"); | ||||
|           const lightName = darkName.replace("dark", "light"); | ||||
|           const findTheme = isDark ? lightName : darkName; | ||||
|           if (findTheme in bundle) { | ||||
|             const autoName = `${prefix}${darkName.replace("dark", "auto")}`; | ||||
|             const lightContent = `@import "./${prefix}${lightName}" (prefers-color-scheme: light);`; | ||||
|             const darkContent = `@import "./${prefix}${darkName}" (prefers-color-scheme: dark);`; | ||||
|             const nameGroup = key.split(".")[0].split("-").slice(0, -1); | ||||
|             nameGroup.push("auto"); | ||||
|             const metaInfo = giteaThemeMetaInfo(nameGroup); | ||||
|             this.emitFile({ | ||||
|               name: autoName, | ||||
|               fileName: autoName, | ||||
|               type: "asset", | ||||
|               source: `${lightContent}\n${darkContent}`, | ||||
|               source: `${lightContent}\n${darkContent}\n${metaInfo}`, | ||||
|             }); | ||||
|           } | ||||
|           // 删除原始的样式文件, 自动颜色主题因为删除, 永远不会生成两次 | ||||
|   | ||||
| @@ -25,7 +25,6 @@ export const github = { | ||||
|     accent: { | ||||
|       /** 强调色 | ||||
|        * @diff 折叠/展开按钮的悬停颜色 | ||||
|        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 | ||||
|        * @release `releaseTagMenu` 顶部栏左侧按钮激活背景色 | ||||
|        * @navbar `navbarRight` 头像管理员标识背景颜色 | ||||
|        * @dropdown `dropdown` emoji 的悬停背景色 | ||||
| @@ -37,6 +36,7 @@ export const github = { | ||||
|        * @repo `repoTopic` 仓库主题标签背景颜色 | ||||
|        * @actions `actions` 分支标签按钮背景颜色 | ||||
|        * @actions `actionViewHeader` 分支标签按钮背景颜色 | ||||
|        * @notification `notification` 通知列表悬停时的背景颜色 | ||||
|        */ | ||||
|       muted: null, | ||||
|     }, | ||||
| @@ -60,8 +60,10 @@ export const github = { | ||||
|        * @input `input` 输入框被选中时的边框颜色 | ||||
|        * @clone `clone` 克隆地址框被选中时的边框颜色 | ||||
|        * @issue `comment` 评论框被选中时的边框颜色 | ||||
|        * @actions `actionViewLeft` 左侧子作业激活伪元素颜色 | ||||
|        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色 | ||||
|        * @dropdown `selectionDropdown` 选择输入框的内部边框颜色 | ||||
|        * @notification `notification` 通知列表悬停时的左边框颜色 | ||||
|        */ | ||||
|       emphasis: null, | ||||
|     }, | ||||
| @@ -158,6 +160,10 @@ export const github = { | ||||
|         hover: null, | ||||
|       }, | ||||
|     }, | ||||
|     star: { | ||||
|       /** 已标星的星星颜色 */ | ||||
|       iconColor: null, | ||||
|     }, | ||||
|   }, | ||||
|   control: { | ||||
|     bgColor: { | ||||
| @@ -174,12 +180,14 @@ export const github = { | ||||
|          * @dropdown `dropdown` 下拉框子项的悬停背景颜色 | ||||
|          * @menu `verticalMenu` 垂直菜单项的悬停背景颜色 | ||||
|          * @menu `menu` 菜单项的悬停背景颜色 | ||||
|          * @menu `secondaryMenu` 二级菜单按钮的悬停背景颜色 | ||||
|          * @repo `repoHeader` 仓库标题的悬停背景颜色 | ||||
|          * @commit `commit` 提交信息的 Action 按钮的悬停背景颜色 | ||||
|          * @filelist `repoFiles` README 栏的按钮的悬停背景颜色 | ||||
|          * @issue `issueSidebar` 操作按钮的悬停背景颜色 | ||||
|          * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色 | ||||
|          * @dashboard `dashboard` 仓库列表项目的悬停背景颜色 | ||||
|          * @notification `notification` 通知列表的按钮悬停背景颜色 | ||||
|          */ | ||||
|         hover: null, | ||||
|       }, | ||||
| @@ -190,6 +198,17 @@ export const github = { | ||||
|       /** 悬浮阴影 | ||||
|        * @tippy `tippyBox` 悬浮框阴影 | ||||
|        * @dropdown `dropdown` 下拉框阴影 | ||||
|        * @dashboard `dashboard` 仓库/组织切换按钮和列表边框和阴影 | ||||
|        * @heatmap `heatmap` 热力图阴影 | ||||
|        * @heatmap `activity` 动态活动阴影 | ||||
|        */ | ||||
|       small: null, | ||||
|     }, | ||||
|     resting: { | ||||
|       /** 静止阴影 | ||||
|        * @button `primaryStyle` 主色调按钮阴影 | ||||
|        * @button `redButton` 红色按钮悬浮阴影 | ||||
|        * @setting `button` 红色按钮阴影 | ||||
|        */ | ||||
|       small: null, | ||||
|     }, | ||||
|   | ||||
| @@ -114,7 +114,7 @@ export const other = { | ||||
|     /** 点击后颜色 */ | ||||
|     activeBg: "color-reaction-active-bg", | ||||
|   }, | ||||
|   /** 不知道是干啥的 */ | ||||
|   /** 鼠标悬浮时的提示文本, 比如提交的具体时间, 任务状态等 */ | ||||
|   tooltip: { | ||||
|     text: null, | ||||
|     bg: null, | ||||
|   | ||||
| @@ -33,14 +33,21 @@ const vars = { | ||||
| const otherVars = { border: { radius: null }, color: { ...color.otherAuto } }; | ||||
|  | ||||
| const customVars = { | ||||
|   branchMenuWidth: "branch-menu-width", | ||||
|   cloneMenuWidth: "clone-menu-width", | ||||
|   userMenuWidth: "user-menu-width", | ||||
|   explore: { repolistColumns: "explore-repolist-columns", userlistColumns: "explore-userlist-columns" }, | ||||
|   userRepolistColumns: "user-repolist-columns", | ||||
|   org: { repolistColumns: "org-repolist-columns", userlistColumns: "org-userlist-columns" }, | ||||
| }; | ||||
|  | ||||
| const themeInfo = { | ||||
|   version: null, | ||||
| }; | ||||
|  | ||||
| export const themeVars = createGlobalThemeContract(vars, varMapper()); | ||||
| export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper()); | ||||
| export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom")); | ||||
| export const themeInfoVars = createGlobalThemeContract(themeInfo, varMapper("theme")); | ||||
|  | ||||
| export { css } from "@linaria/core"; | ||||
|   | ||||
| @@ -27,7 +27,7 @@ export const actions = css` | ||||
|         margin-bottom: 24px; | ||||
|         margin-left: 2px; | ||||
|       } | ||||
|  | ||||
|       // 工作流列表标题栏菜单 | ||||
|       .ui.secondary.menu { | ||||
|         background-color: ${themeVars.color.box.header}; | ||||
|         border: 1px solid ${themeVars.color.light.border}; | ||||
| @@ -36,6 +36,9 @@ export const actions = css` | ||||
|         border-top-right-radius: ${otherThemeVars.border.radius}; | ||||
|         padding: 16px; | ||||
|         margin-bottom: 0; | ||||
|         > .item { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|         } | ||||
|       } | ||||
|  | ||||
|       .ui.info.message { | ||||
| @@ -58,7 +61,7 @@ export const actions = css` | ||||
|         .run-list-ref { | ||||
|           background-color: ${themeVars.github.bgColor.accent.muted}; | ||||
|           color: ${themeVars.github.fgColor.accent}; | ||||
|           font-family: var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace); | ||||
|           font-family: var(--fonts-monospace); | ||||
|           font-weight: 400; | ||||
|           &:hover { | ||||
|             background-color: ${themeVars.github.bgColor.accent.muted}; | ||||
| @@ -180,7 +183,7 @@ export const actionViewLeft = css` | ||||
|  | ||||
|           &:after { | ||||
|             overflow: visible; | ||||
|             background: ${themeVars.github.bgColor.accent.emphasis}; | ||||
|             background: ${themeVars.github.borderColor.accent.emphasis}; | ||||
|             border-radius: ${otherThemeVars.border.radius}; | ||||
|             content: ""; | ||||
|             height: 24px; | ||||
| @@ -190,6 +193,26 @@ export const actionViewLeft = css` | ||||
|             width: 4px; | ||||
|           } | ||||
|         } | ||||
|         .job-brief-item-right { | ||||
|           svg.job-brief-rerun { | ||||
|             display: none; | ||||
|             color: ${themeVars.color.console.fg.subtle}; | ||||
|             &:hover { | ||||
|               color: ${themeVars.color.text.self}; | ||||
|             } | ||||
|           } | ||||
|           .step-summary-duration { | ||||
|             color: ${themeVars.color.console.fg.subtle}; | ||||
|             font-family: var(--fonts-monospace); | ||||
|           } | ||||
|         } | ||||
|         &:hover { | ||||
|           .job-brief-item-right { | ||||
|             svg.job-brief-rerun { | ||||
|               display: inline-block; | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| @@ -246,6 +269,11 @@ export const actionViewRight = css` | ||||
|             color: ${themeVars.color.console.fg.self} !important; | ||||
|           } | ||||
|         } | ||||
|         // 步骤耗时 | ||||
|         .step-summary-duration { | ||||
|           font-size: 12px; | ||||
|           font-family: var(--fonts-monospace); | ||||
|         } | ||||
|       } | ||||
|       // 步骤日志 | ||||
|       .job-step-logs { | ||||
|   | ||||
| @@ -92,7 +92,7 @@ export const clone = css` | ||||
|         .item { | ||||
|           border-radius: ${otherThemeVars.border.radius}; | ||||
|           padding: 6px 8px; | ||||
|           line-height: 1.5; | ||||
|           height: 32px; | ||||
|           margin: 0; | ||||
|           svg { | ||||
|             color: ${themeVars.color.text.light.num1}; | ||||
|   | ||||
| @@ -42,13 +42,24 @@ export const commit = css` | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|         } | ||||
|       } | ||||
|       // 整行悬停色 | ||||
|       tr:hover { | ||||
|         background-color: ${themeVars.color.hover.opaque}; | ||||
|       } | ||||
|       // 偶数行悬停色 | ||||
|       tr:nth-child(2n):hover { | ||||
|         background-color: ${themeVars.color.hover.opaque} !important; | ||||
|       tr { | ||||
|         // 整行悬停色 | ||||
|         &:hover { | ||||
|           background-color: ${themeVars.color.hover.opaque}; | ||||
|         } | ||||
|         // 偶数行悬停色 | ||||
|         &:nth-child(2n):hover { | ||||
|           background-color: ${themeVars.color.hover.opaque} !important; | ||||
|         } | ||||
|         // 尾行圆角 | ||||
|         &:last-child { | ||||
|           td:first-child { | ||||
|             border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
|           } | ||||
|           td:last-child { | ||||
|             border-bottom-right-radius: ${otherThemeVars.border.radius}; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   | ||||
| @@ -5,16 +5,29 @@ export const dashboard = css` | ||||
|   .page-content.dashboard.feeds { | ||||
|     // 仓库列表的仓库/组织切换按钮 | ||||
|     .ui.two.item.menu { | ||||
|       box-shadow: ${themeVars.github.shadow.floating.small}; | ||||
|       border: unset; | ||||
|       background: ${themeVars.color.hover.self}; | ||||
|       border: 0; | ||||
|       border-radius: 12px; | ||||
|       margin-bottom: 8px; | ||||
|       > .item { | ||||
|         &:first-child { | ||||
|           border-radius: 12px 0 0 12px; | ||||
|         background: unset; | ||||
|         border-radius: 12px; | ||||
|         padding: 6px 12px !important; | ||||
|         &.active { | ||||
|           background: ${themeVars.color.menu}; | ||||
|           box-shadow: ${themeVars.github.shadow.floating.small}; | ||||
|           font-weight: 600; | ||||
|         } | ||||
|         &:last-child { | ||||
|           border-radius: 0 12px 12px 0; | ||||
|         &::before { | ||||
|           display: none; | ||||
|         } | ||||
|         &:not(.active) { | ||||
|           border-radius: ${otherThemeVars.border.radius}; | ||||
|           margin: 6px !important; | ||||
|           width: calc(50% - 12px); | ||||
|           &:hover { | ||||
|             background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
| @@ -44,6 +57,7 @@ export const dashboard = css` | ||||
|           padding: 8px; | ||||
|           li { | ||||
|             border-radius: ${otherThemeVars.border.radius}; | ||||
|             padding: 6px 8px !important; | ||||
|             &:not(:last-child) { | ||||
|               border-bottom: 0; | ||||
|             } | ||||
| @@ -65,3 +79,66 @@ export const dashboard = css` | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 导航栏的工单/PR/里程碑仪表板 | ||||
| export const dashboardIssues = css` | ||||
|   .page-content.dashboard.issues { | ||||
|     .list-header { | ||||
|       background-color: ${themeVars.color.box.header}; | ||||
|       border: 1px solid ${themeVars.color.light.border}; | ||||
|       border-bottom: 0; | ||||
|       border-top-left-radius: ${otherThemeVars.border.radius}; | ||||
|       border-top-right-radius: ${otherThemeVars.border.radius}; | ||||
|       height: 54px; | ||||
|       padding: 16px 8px; | ||||
|       .list-header-toggle { | ||||
|         align-items: center; | ||||
|         border: 0; | ||||
|         > .item { | ||||
|           background: unset !important; | ||||
|           border-radius: ${otherThemeVars.border.radius}; | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|           padding: 0px 8px; | ||||
|           height: 30px; | ||||
|           &:before { | ||||
|             display: none; | ||||
|           } | ||||
|           &:hover { | ||||
|             background: ${themeVars.github.control.transparent.bgColor.hover} !important; | ||||
|           } | ||||
|           &.active { | ||||
|             color: ${themeVars.color.text.self}; | ||||
|             font-weight: 700; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       .list-header-filters { | ||||
|         > .item { | ||||
|           border-radius: ${otherThemeVars.border.radius}; | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|           padding: 0px 12px; | ||||
|           height: 32px; | ||||
|           &:hover { | ||||
|             background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 避免手机/平板下菜单错位 | ||||
| export const issueListMobile = css` | ||||
|   @media (max-width: 767.98px) { | ||||
|     .page-content.dashboard.issues .list-header { | ||||
|       height: auto; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 修复仪表板下二级面板选择菜单组织的标签间隔 | ||||
| export const fixOrgLabel = css` | ||||
|   .dashboard .secondary-nav .org-visibility .label { | ||||
|     margin-right: 0; | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -31,7 +31,6 @@ export const diff = css` | ||||
|   .code-expander-button { | ||||
|     color: ${themeVars.color.text.light.num1}; | ||||
|     height: 28px !important; | ||||
|  | ||||
|     &:hover { | ||||
|       background: ${themeVars.github.bgColor.accent.emphasis}; | ||||
|       color: ${themeVars.color.white}; | ||||
| @@ -41,4 +40,33 @@ export const diff = css` | ||||
|   .lines-num { | ||||
|     text-align: center !important; | ||||
|   } | ||||
|   // 差异对比文件盒子 | ||||
|   .diff-file-box { | ||||
|     // 差异对比文件头 | ||||
|     .diff-file-header { | ||||
|       // 文件名 | ||||
|       .diff-file-name { | ||||
|         font-weight: 400; | ||||
|         .fold-file.btn svg { | ||||
|           min-width: 16px; | ||||
|           min-height: 16px; | ||||
|           height: 16px; | ||||
|           width: 16px; | ||||
|         } | ||||
|         .diff-stats-bar { | ||||
|           height: 8px; | ||||
|         } | ||||
|         > div, | ||||
|         .file-link { | ||||
|           font-size: 12px; | ||||
|         } | ||||
|       } | ||||
|       // 操作按钮 | ||||
|       .diff-file-header-actions { | ||||
|         color: ${themeVars.color.text.light.num1}; | ||||
|         font-size: 12px; | ||||
|         font-weight: 400; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -4,17 +4,11 @@ export const monaco = css` | ||||
|   .monaco-editor { | ||||
|     --vscode-editor-background: ${themeVars.color.body} !important; | ||||
|     --vscode-editorGutter-background: ${themeVars.color.body} !important; | ||||
|     .monaco-mouse-cursor-text { | ||||
|       font-size: 12px !important; | ||||
|     } | ||||
|     // 滚动时固定在顶部的行 | ||||
|     .sticky-widget { | ||||
|       background: ${themeVars.color.body} !important; | ||||
|       box-shadow: 0 1px 0 ${themeVars.color.secondary.self} !important; | ||||
|       width: 100% !important; | ||||
|       .sticky-line-content { | ||||
|         font-size: 12px !important; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -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; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -10,7 +10,7 @@ export const branchButton = css` | ||||
|         border: 1px solid ${themeVars.color.light.border}; | ||||
|         margin-top: 1px; | ||||
|         margin-left: auto; | ||||
|         margin-right: 16px; // gitea 有 RSS 留出足够的空间 | ||||
|         margin-right: 20px; // gitea 有 RSS 留出足够的空间 | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| @@ -22,6 +22,7 @@ export const syncFork = css` | ||||
|     .repo-home-filelist > .ui.message { | ||||
|       background: ${themeVars.color.box.header}; | ||||
|       padding: 8px 8px 8px 16px; | ||||
|       margin: 16px 0px; | ||||
|       .ui.button { | ||||
|         min-width: 96px; | ||||
|       } | ||||
| @@ -31,8 +32,13 @@ export const syncFork = css` | ||||
|  | ||||
| // 仓库文件列表 | ||||
| export const repoFiles = css` | ||||
|   // 文件列表和提交列表的按钮组 | ||||
|   .repo-button-row { | ||||
|     margin: 16px 0; | ||||
|   } | ||||
|   .repository.file.list { | ||||
|     #repo-files-table { | ||||
|       margin: 16px 0; | ||||
|       // 头部最后一次提交 | ||||
|       .repo-file-line { | ||||
|         padding-right: 16px; | ||||
| @@ -91,11 +97,13 @@ export const repoFiles = css` | ||||
|     #readme { | ||||
|       .file-header { | ||||
|         background: ${themeVars.color.body}; | ||||
|         min-height: 48px; | ||||
|         padding: 0px 8px !important; | ||||
|         svg { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|         } | ||||
|         .file-header-left { | ||||
|           padding: 6px 8px !important; | ||||
|           padding: 8px !important; | ||||
|           // 伪元素宽度等于按钮宽度而不是父元素宽度 | ||||
|           position: relative; | ||||
|           &:hover { | ||||
| @@ -106,7 +114,7 @@ export const repoFiles = css` | ||||
|             content: ""; | ||||
|             background: ${themeVars.github.underlineNav.borderColor.active}; | ||||
|             border-radius: ${otherThemeVars.border.radius}; | ||||
|             bottom: -8px; | ||||
|             bottom: -7px; | ||||
|             left: 0; | ||||
|             height: 2px; | ||||
|             position: absolute; | ||||
| @@ -182,7 +190,7 @@ export const repoFileView = css` | ||||
|           position: absolute; | ||||
|           top: 0; | ||||
|           right: 0; | ||||
|           width: 1.5; | ||||
|           width: 1px; | ||||
|           height: calc(100% + 64px); // 头部高度 | ||||
|           background: ${themeVars.color.secondary.self}; | ||||
|         } | ||||
| @@ -354,7 +362,8 @@ export const repoFileViewMobile = css` | ||||
| // 仓库代码布局调整, 侧边栏宽度调整 | ||||
| export const repoGrid = css` | ||||
|   .repo-grid-filelist-sidebar { | ||||
|     grid-template-columns: auto 296px; | ||||
|     grid-template-columns: auto 312px; | ||||
|     gap: 24px; | ||||
|   } | ||||
|  | ||||
|   @media (max-width: 767.98px) { | ||||
| @@ -373,11 +382,15 @@ export const repoSidebarTop = css` | ||||
|       } | ||||
|       .flex-item { | ||||
|         padding: 10px 0 0 0; | ||||
|         // 仓库描述本身 | ||||
|         .flex-item-title { | ||||
|           margin-top: 2px; | ||||
|           margin-top: 12px; | ||||
|         } | ||||
|         // 仓库描述内容 | ||||
|         .flex-item-body { | ||||
|           padding: 8px 0 0 0; | ||||
|           > .tw-flex:first-child { | ||||
|             margin-top: 21px !important; | ||||
|           } | ||||
|           .repo-description { | ||||
|             color: ${themeVars.color.text.self}; | ||||
|           } | ||||
|   | ||||
							
								
								
									
										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}; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
| @@ -1,7 +1,11 @@ | ||||
| import { css, otherThemeVars, themeVars } from "src/types/vars"; | ||||
| import { css, themeVars } from "src/types/vars"; | ||||
|  | ||||
| export const heatmap = css` | ||||
|   #user-heatmap { | ||||
|     + .divider:not(.divider-text) { | ||||
|       border-color: #0000; | ||||
|       margin: 8px 0px; | ||||
|     } | ||||
|     .total-contributions { | ||||
|       left: 25px + 20px; | ||||
|       bottom: 0 + 12px; | ||||
| @@ -12,8 +16,8 @@ export const heatmap = css` | ||||
|     } | ||||
|     .vch__container { | ||||
|       padding: 12px 20px; | ||||
|       border: 1px solid ${themeVars.color.secondary.self}; | ||||
|       border-radius: ${otherThemeVars.border.radius}; | ||||
|       box-shadow: ${themeVars.github.shadow.floating.small}; | ||||
|       border-radius: 12px; | ||||
|       // 覆盖热力图和图例的背景色 | ||||
|       .vch__day__square, | ||||
|       .vch__legend__wrapper rect { | ||||
| @@ -65,16 +69,19 @@ export const heatmap = css` | ||||
|  | ||||
| // 动态 | ||||
| export const activity = css` | ||||
|   #activity-feed { | ||||
|     .flex-item { | ||||
|   .flex-list#activity-feed { | ||||
|     border-radius: 12px; | ||||
|     box-shadow: ${themeVars.github.shadow.floating.small}; | ||||
|     > .flex-item { | ||||
|       gap: 12px; | ||||
|       padding: 16px 0; | ||||
|       &:first-child { | ||||
|         padding-top: 6px; | ||||
|       } | ||||
|       padding: 12px 8px 16px 14px; | ||||
|       > .flex-item-main { | ||||
|         gap: 8px !important; | ||||
|  | ||||
|         > div:not([class]) { | ||||
|           display: flex; | ||||
|           gap: 8px; | ||||
|           flex-wrap: wrap; | ||||
|         } | ||||
|         relative-time { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|         } | ||||
| @@ -85,5 +92,9 @@ export const activity = css` | ||||
|         width: 20px; | ||||
|       } | ||||
|     } | ||||
|     > .page.buttons { | ||||
|       border-top: 1px solid ${themeVars.color.secondary.self}; | ||||
|       padding: 12px 0px; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -7,10 +7,15 @@ import "./diff"; | ||||
| import "./editor"; | ||||
| import "./explore"; | ||||
| import "./filelist"; | ||||
| import "./footer"; | ||||
| import "./heatmap"; | ||||
| import "./issue"; | ||||
| import "./milestones"; | ||||
| import "./navbar"; | ||||
| import "./newrepo"; | ||||
| import "./notification"; | ||||
| import "./org"; | ||||
| import "./packages"; | ||||
| import "./release"; | ||||
| import "./repo"; | ||||
| import "./setting"; | ||||
|   | ||||
| @@ -3,6 +3,9 @@ import { activeItemAfterStyle } from "styles/public/menu"; | ||||
|  | ||||
| // 工单&PR 列表 | ||||
| export const issueList = css` | ||||
|   // 仓库页面的里程碑列表菜单栏 | ||||
|   .page-content.repository.milestones, | ||||
|   .page-content.repository.milestone-issue-list, | ||||
|   .page-content.repository.issue-list { | ||||
|     // 头部筛选菜单栏 | ||||
|     .issue-list-toolbar { | ||||
| @@ -15,6 +18,7 @@ export const issueList = css` | ||||
|       border-top-right-radius: ${otherThemeVars.border.radius}; | ||||
|       height: 48px; | ||||
|       padding: 8px; | ||||
|       margin-top: 16px; | ||||
|       .issue-list-toolbar-left { | ||||
|         // 复选框 | ||||
|         input { | ||||
| @@ -53,7 +57,15 @@ export const issueList = css` | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     // Issue 列表 | ||||
|   } | ||||
|   // 里程碑详细页面的 Issue 列表 | ||||
|   .page-content.repository.milestone-issue-list, | ||||
|   // 顶部仪表板的 Issue 列表 | ||||
|   .page-content.dashboard.issues, | ||||
|   // 用户订阅的 Issue 列表 | ||||
|   .page-content.user.notification, | ||||
|   // 仓库 Issue 列表 | ||||
|   .page-content.repository.issue-list { | ||||
|     .flex-list#issue-list { | ||||
|       border: 1px solid ${themeVars.color.light.border}; | ||||
|       border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
| @@ -71,12 +83,11 @@ export const issueList = css` | ||||
|         > .flex-item-icon { | ||||
|           display: flex; | ||||
|           gap: 4px; | ||||
|           margin-left: 8px; | ||||
|           margin-left: 16px; | ||||
|           // 复选框 | ||||
|           input { | ||||
|             background: unset; | ||||
|             margin-top: 14px; | ||||
|             margin-left: 8px; | ||||
|             margin-right: 8px !important; | ||||
|           } | ||||
|           svg { | ||||
| @@ -99,13 +110,72 @@ export const issueList = css` | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   // 里程碑列表 | ||||
|   // [TODO] 暂时排除项目的列表 | ||||
|   .page-content.repository.milestones:not(.projects) .milestone-list { | ||||
|     border: 1px solid ${themeVars.color.light.border}; | ||||
|     border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
|     border-bottom-right-radius: ${otherThemeVars.border.radius}; | ||||
|     .milestone-card { | ||||
|       padding: 8px 16px 10px 16px; | ||||
|       .milestone-header { | ||||
|         h3 { | ||||
|           font-size: 16px; | ||||
|           font-weight: 500; | ||||
|         } | ||||
|         div span { | ||||
|           font-size: 14px; | ||||
|           font-weight: 600; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     .milestone-toolbar { | ||||
|       font-size: 12px; | ||||
|       .group > a { | ||||
|         font-size: 13px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 避免手机/平板下菜单错位 | ||||
| export const issueListMobile = css` | ||||
|   @media (max-width: 1023.98px) { | ||||
|     .page-content.repository.issue-list .issue-list-toolbar { | ||||
|       height: auto; | ||||
|     .page-content.repository.milestones, | ||||
|     .page-content.repository.milestone-issue-list, | ||||
|     .page-content.repository.issue-list { | ||||
|       .issue-list-toolbar { | ||||
|         height: auto; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 置顶 Issue | ||||
| export const issuePins = css` | ||||
|   #issue-pins { | ||||
|     gap: 12px; | ||||
|     margin-bottom: 16px; | ||||
|     .issue-card { | ||||
|       padding: 16px 12px; | ||||
|       .content { | ||||
|         .issue-card-title { | ||||
|           font-size: 16px; | ||||
|           font-weight: 600; | ||||
|         } | ||||
|         svg { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|           height: 100%; | ||||
|           margin-right: 3px; | ||||
|         } | ||||
|         .meta { | ||||
|           font-size: 12px; | ||||
|           padding-top: 4px; | ||||
|         } | ||||
|       } | ||||
|       .issue-card-bottom { | ||||
|         display: none; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
| @@ -293,6 +363,16 @@ export const comment = css` | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 评论书写框 | ||||
| export const commentForm = css` | ||||
|   .repository .comment.form .content .segment { | ||||
|     &::before, | ||||
|     &::after { | ||||
|       display: none; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| export const dropdown = css` | ||||
|   .repository { | ||||
|     // Issue/PR 列表下的所有筛选菜单 | ||||
| @@ -312,7 +392,7 @@ export const prMerge = css` | ||||
|   .repository.view.issue .comment-list .timeline-item.pull-merge-box { | ||||
|     // 头像 | ||||
|     .timeline-avatar { | ||||
|       color: ${themeVars.color.text.self} !important; | ||||
|       color: ${themeVars.color.white} !important; | ||||
|       border-radius: ${otherThemeVars.border.radius}; | ||||
|       width: 40px; | ||||
|       height: 40px; | ||||
| @@ -392,6 +472,12 @@ export const prMerge = css` | ||||
|       padding: 16px; | ||||
|       display: grid; | ||||
|       gap: 8px; | ||||
|       &.no-header { | ||||
|         &::before, | ||||
|         &::after { | ||||
|           display: none; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
| @@ -400,6 +486,11 @@ export const prMerge = css` | ||||
| export const timeline = css` | ||||
|   .repository.view.issue { | ||||
|     .comment-list { | ||||
|       // 时间线本线 | ||||
|       .timeline::before { | ||||
|         // 不遮挡归档信息框, 归档信息框背景色有透明度时会漏出线 | ||||
|         height: calc(100% - 62px); | ||||
|       } | ||||
|       .timeline-item, | ||||
|       .timeline-item-group { | ||||
|         padding: 16px 0; | ||||
| @@ -452,37 +543,106 @@ const sidebarPadding = { | ||||
|  | ||||
| // 侧边栏 | ||||
| export const issueSidebar = css` | ||||
|   .issue-content { | ||||
|     gap: 24px; | ||||
|     .issue-content-right { | ||||
|       border: 0; | ||||
|       font-size: 12px; | ||||
|       padding: 0; | ||||
|       .ui.button { | ||||
|   // 工单&创建工单&PR页面侧边栏 | ||||
|   .page-content.repository.issue { | ||||
|     .issue-content { | ||||
|       gap: 24px; | ||||
|       // 侧边栏 | ||||
|       .issue-content-right { | ||||
|         border: 0; | ||||
|         font-size: 12px; | ||||
|       } | ||||
|       .ui.form, | ||||
|       a.fixed-text.muted, | ||||
|       span.text, | ||||
|       // 列表项为空时的文字 | ||||
|       span.item.empty-list, | ||||
|       p { | ||||
|         color: ${themeVars.color.text.light.num1}; | ||||
|         font-size: 12px; | ||||
|       } | ||||
|       .ui.dropdown.select-branch, | ||||
|       .ui.form, | ||||
|       a.fixed-text.muted, | ||||
|       span.text, | ||||
|       .ui.watching > div, | ||||
|       .ui.depending > div, | ||||
|       .flex-text-block, | ||||
|       .ui.list, | ||||
|       p { | ||||
|         ${sidebarPadding}; | ||||
|       } | ||||
|       .issue-sidebar-combo { | ||||
|         .ui.dropdown > a.fixed-text.muted { | ||||
|         padding: 0; | ||||
|         .ui.button { | ||||
|           font-size: 12px; | ||||
|         } | ||||
|         .ui.form, | ||||
|         a.fixed-text.muted, | ||||
|         span.text, | ||||
|         // 列表项为空时的文字 | ||||
|         span.item.empty-list, | ||||
|         p { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|           font-size: 12px; | ||||
|         } | ||||
|         .ui.dropdown.select-branch, | ||||
|         .ui.form, | ||||
|         a.fixed-text.muted, | ||||
|         span.text, | ||||
|         .ui.watching > div, | ||||
|         .ui.depending > div, | ||||
|         .flex-text-block, | ||||
|         .ui.list, | ||||
|         .toggle-wip, | ||||
|         p { | ||||
|           ${sidebarPadding}; | ||||
|         } | ||||
|         // 允许维护者编辑 | ||||
|         > .ui.checkbox { | ||||
|           margin: 4px 8px; | ||||
|           strong { | ||||
|             font-weight: 400; | ||||
|           } | ||||
|         } | ||||
|         .issue-sidebar-combo { | ||||
|           .ui.dropdown > a.fixed-text.muted { | ||||
|             align-items: center; | ||||
|             border-radius: ${otherThemeVars.border.radius}; | ||||
|             text-decoration-line: none; | ||||
|             height: 28px; | ||||
|             &:hover { | ||||
|               background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|             } | ||||
|           } | ||||
|           .ui.list { | ||||
|             margin-top: 0 !important; | ||||
|             margin-bottom: 0 !important; | ||||
|           } | ||||
|           // 标签菜单项 | ||||
|           .ui.dropdown > .menu > .scrolling.menu > .item:has(.item-secondary-info) { | ||||
|             // 修复标签菜单中描述文本过长没有换行挤掉标签的问题 | ||||
|             display: grid !important; | ||||
|             grid-template-columns: auto auto 1fr; | ||||
|             row-gap: 0px; // 去除行间距, 仅当有描述信息时才有间距(.tw-pl-\\\[20px\\\]) | ||||
|             // 如果是归档标签则隐藏 | ||||
|             &.tw-hidden { | ||||
|               display: none !important; | ||||
|             } | ||||
|             // 默认隐藏多余信息避免标签对齐问题 | ||||
|             .item-secondary-info { | ||||
|               display: none; | ||||
|               grid-column: 2 / -1; // 从第2列对齐 | ||||
|               color: ${themeVars.color.text.light.num1}; | ||||
|               > .tw-pl-\\\[20px\\\] { | ||||
|                 // 已经与第二列对齐, 不需要额外的 padding | ||||
|                 padding-left: 0px !important; | ||||
|                 padding-top: 4px; | ||||
|                 // 显示全部描述信息与 Github 保持一致 | ||||
|                 white-space: normal; | ||||
|                 small { | ||||
|                   font-size: 12px; | ||||
|                 } | ||||
|               } | ||||
|               > .archived-label-hint { | ||||
|                 // 与父元素 item 的 padding 对齐 (dropdown.ts .ui.dropdown .menu > .item) | ||||
|                 top: 6px; | ||||
|                 right: 8px; | ||||
|               } | ||||
|               // 如果有描述信息则显示 | ||||
|               &:has(.tw-pl-\\\[20px\\\]) { | ||||
|                 display: block; | ||||
|                 > .archived-label-hint { | ||||
|                   top: 4px; // 有描述信息的归档标签与标签对齐需要更高点 | ||||
|                 } | ||||
|               } | ||||
|               // 如果有归档标签则显示 | ||||
|               &:has(.archived-label-hint > .ui.label) { | ||||
|                 display: block; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         // 时间追踪 | ||||
|         > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted { | ||||
|           align-items: center; | ||||
|           border-radius: ${otherThemeVars.border.radius}; | ||||
|           text-decoration-line: none; | ||||
| @@ -491,62 +651,49 @@ export const issueSidebar = css` | ||||
|             background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|           } | ||||
|         } | ||||
|         .ui.list { | ||||
|           margin-top: 0 !important; | ||||
|           margin-bottom: 0 !important; | ||||
|         // 选中日期颜色 | ||||
|         .ui.form .due-date { | ||||
|           color: ${themeVars.color.text.self}; | ||||
|         } | ||||
|       } | ||||
|       // 时间追踪 | ||||
|       > div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted { | ||||
|         align-items: center; | ||||
|         border-radius: ${otherThemeVars.border.radius}; | ||||
|         text-decoration-line: none; | ||||
|         height: 28px; | ||||
|         &:hover { | ||||
|           background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|         // 分割线 | ||||
|         > .divider { | ||||
|           margin: 12px 0 12px 8px; | ||||
|           width: calc(100% - 16px); | ||||
|         } | ||||
|       } | ||||
|       // 选中日期颜色 | ||||
|       .ui.form .due-date { | ||||
|         color: ${themeVars.color.text.self}; | ||||
|       } | ||||
|       .divider { | ||||
|         margin: 12px 0 12px 8px; | ||||
|         width: calc(100% - 16px); | ||||
|       } | ||||
|       // 订阅按钮 | ||||
|       .ui.watching .ui.button { | ||||
|         padding: 0px 8px; | ||||
|         height: 28px; | ||||
|         svg { | ||||
|           margin: 0 !important; | ||||
|         } | ||||
|       } | ||||
|       // PIN 按钮 | ||||
|       .form-fetch-action.single-button-form .ui.button, | ||||
|       // 底部操作按钮 | ||||
|       .ui.show-modal.button { | ||||
|         border: 0; | ||||
|         background: unset; | ||||
|         font-weight: 400; | ||||
|         ${sidebarPadding}; | ||||
|         // 好像是浏览器 BUG, 最后不生效, 必须 !important | ||||
|         margin: 0 !important; | ||||
|         justify-content: left; | ||||
|         &:hover { | ||||
|           background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|         } | ||||
|       } | ||||
|       .ui.show-modal.button[data-modal="#sidebar-delete-issue"] { | ||||
|         color: ${themeVars.color.red.self}; | ||||
|         svg { | ||||
|           color: ${themeVars.color.red.self}; | ||||
|         } | ||||
|         &:hover { | ||||
|           background-color: ${themeVars.color.red.badge.bg}; | ||||
|           color: ${themeVars.color.red.light}; | ||||
|         // 订阅按钮 | ||||
|         .ui.watching .ui.button { | ||||
|           padding: 0px 8px; | ||||
|           height: 28px; | ||||
|           svg { | ||||
|             margin: 0 !important; | ||||
|           } | ||||
|         } | ||||
|         // PIN 按钮 | ||||
|         .form-fetch-action.single-button-form .ui.button, | ||||
|         // 底部操作按钮 | ||||
|         .ui.show-modal.button { | ||||
|           border: 0; | ||||
|           background: unset; | ||||
|           font-weight: 400; | ||||
|           ${sidebarPadding}; | ||||
|           // 好像是浏览器 BUG, 最后不生效, 必须 !important | ||||
|           margin: 0 !important; | ||||
|           justify-content: left; | ||||
|           &:hover { | ||||
|             background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|           } | ||||
|         } | ||||
|         .ui.show-modal.button[data-modal="#sidebar-delete-issue"] { | ||||
|           color: ${themeVars.color.red.self}; | ||||
|           svg { | ||||
|             color: ${themeVars.color.red.self}; | ||||
|           } | ||||
|           &:hover { | ||||
|             background-color: ${themeVars.color.red.badge.bg}; | ||||
|             color: ${themeVars.color.red.light}; | ||||
|             svg { | ||||
|               color: ${themeVars.color.red.light}; | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|   | ||||
							
								
								
									
										59
									
								
								styles/components/milestones.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,59 @@ | ||||
| import { css, themeVars } from "src/types/vars"; | ||||
|  | ||||
| export const milestone = css` | ||||
|   // 里程碑头部 | ||||
|   .milestone-header { | ||||
|     gap: 16px; | ||||
|     // 进度条 | ||||
|     progress { | ||||
|       height: 5px; | ||||
|       width: 300px; | ||||
|       max-width: 80vw; | ||||
|     } | ||||
|   } | ||||
|   // 里程碑 Issue 列表的进度条 | ||||
|   .milestone-progress-big { | ||||
|     height: 8px; | ||||
|   } | ||||
|   // 里程碑 Issue 列表 | ||||
|   .page-content.repository.milestone-issue-list { | ||||
|     > .ui.container { | ||||
|       > .flex-text-block:first-child { | ||||
|         margin-bottom: 16px; | ||||
|         > h1 { | ||||
|           font-size: 32px; | ||||
|           font-weight: 600; | ||||
|           line-height: 48px; | ||||
|           word-break: keep-all; | ||||
|         } | ||||
|         + .tw-flex { | ||||
|           flex-direction: row !important; | ||||
|           align-items: center; | ||||
|           gap: 8px !important; | ||||
|           padding-top: 8px; | ||||
|           padding-bottom: 10px; | ||||
|           font-size: 14px; | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|           strong { | ||||
|             color: ${themeVars.color.text.self}; | ||||
|           } | ||||
|           > .flex-text-block { | ||||
|             gap: 8px !important; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       > .divider { | ||||
|         border-top-color: #0000; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 避免手机/平板下菜单错位 | ||||
| export const milestoneMobile = css` | ||||
|   @media (max-width: 767.98px) { | ||||
|     .page-content.repository.milestone-issue-list > .ui.container > .flex-text-block:first-child + .tw-flex { | ||||
|       flex-direction: column !important; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
| @@ -1,7 +1,32 @@ | ||||
| import { css, otherThemeVars, themeVars } from "src/types/vars"; | ||||
| import { fallbackVar } from "src/functions"; | ||||
| import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; | ||||
| 
 | ||||
| export const navbarRight = css` | ||||
|   #navbar { | ||||
|     border-bottom: 0; | ||||
|     padding: 0px 16px; | ||||
|     min-height: 64px; | ||||
|     .navbar-left { | ||||
|       gap: 8px; | ||||
|       > .item { | ||||
|         padding: 4px 8px; | ||||
|         min-height: 20px; | ||||
|         &.active { | ||||
|           font-weight: 600; | ||||
|         } | ||||
|         &#navbar-logo { | ||||
|           // 与下方的用户切换头像对齐
 | ||||
|           padding-left: 6px; | ||||
|           &:hover { | ||||
|             background: unset; | ||||
|           } | ||||
|           img { | ||||
|             height: 32px; | ||||
|             width: 32px; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     // 进入用户页面后, 避免注册, 登录和首页等意外覆盖
 | ||||
|     .navbar-right:has(.user-menu) { | ||||
|       gap: 8px; | ||||
| @@ -35,7 +60,7 @@ export const navbarRight = css` | ||||
|             grid-auto-flow: column; | ||||
|             align-items: center; | ||||
|             > svg { | ||||
|               margin-right: 8px; | ||||
|               margin-right: 4px; | ||||
|             } | ||||
|             // 三角号纠正高度保持居中
 | ||||
|             .not-mobile { | ||||
| @@ -69,12 +94,13 @@ export const navbarRight = css` | ||||
|         .navbar-profile-admin { | ||||
|           background-color: ${themeVars.github.bgColor.accent.emphasis}; | ||||
|           border-radius: 25px; | ||||
|           border: 2px solid ${themeVars.color.nav.bg}; | ||||
|           color: ${themeVars.color.white}; | ||||
|           font-size: 8px; | ||||
|           font-size: 9px; | ||||
|           font-weight: 600; | ||||
|           padding: 2px 5px; | ||||
|           top: -3px; | ||||
|           left: 22px; | ||||
|           top: -7px; | ||||
|           left: 21px; | ||||
|         } | ||||
|       } | ||||
|       // 通知和计时器的圆点
 | ||||
| @@ -84,13 +110,31 @@ export const navbarRight = css` | ||||
|           background-color: ${themeVars.github.bgColor.accent.emphasis}; | ||||
|           border-radius: 25px; | ||||
|           color: ${themeVars.color.white}; | ||||
|           font-size: 8px; | ||||
|           font-size: 9px; | ||||
|           font-weight: 600; | ||||
|           top: -14px; | ||||
|           left: 12px; | ||||
|           top: -15px; | ||||
|           left: 11px; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     // 用户菜单
 | ||||
|     .navbar-right .user-menu { | ||||
|       width: ${fallbackVar(customThemeVars.userMenuWidth, "192px")}; | ||||
|       max-width: 320px; | ||||
|       > .header { | ||||
|         font-size: 14px; | ||||
|         font-weight: 400; | ||||
|         margin: 0; | ||||
|         padding: 16px 16px 8px 16px; | ||||
|         strong { | ||||
|           font-weight: 600; | ||||
|         } | ||||
|       } | ||||
|       > .divider { | ||||
|         margin: 8px; | ||||
|         width: calc(100% - 16px); | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   // 手机下的创建菜单按钮
 | ||||
|   @media (max-width: 767.98px) { | ||||
| @@ -102,3 +146,31 @@ export const navbarRight = css` | ||||
|     } | ||||
|   } | ||||
| `;
 | ||||
| 
 | ||||
| // 二级导航栏
 | ||||
| export const secondaryNav = css` | ||||
|   .page-content > :first-child.secondary-nav { | ||||
|     margin-bottom: 16px; | ||||
|     // 仪表板界面的二级导航栏用户菜单
 | ||||
|     > .ui.secondary.stackable.menu { | ||||
|       gap: 0px; | ||||
|       min-height: 48px; | ||||
|       > .item { | ||||
|         // 修复手机下的菜单按钮没有居中的问题
 | ||||
|         margin-top: auto; | ||||
|         margin-bottom: auto; | ||||
|         > .ui.dropdown > .text { | ||||
|           display: inline-flex; | ||||
|           align-items: center; | ||||
|           gap: 4px; | ||||
|           svg { | ||||
|             margin-right: 4px; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       > .right.menu { | ||||
|         gap: 4px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `;
 | ||||
							
								
								
									
										182
									
								
								styles/components/notification.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,182 @@ | ||||
| import { css, otherThemeVars, themeVars } from "src/types/vars"; | ||||
|  | ||||
| // 用户订阅/关注页面 | ||||
| export const notification = css` | ||||
|   .page-content.user.notification { | ||||
|     > .ui.container { | ||||
|       > .ui.attached.segment { | ||||
|         border: 0; | ||||
|         padding: 0; | ||||
|         > .divider { | ||||
|           display: none; | ||||
|         } | ||||
|         // 订阅列表 | ||||
|         &:has(#issue-list) { | ||||
|           > .tw-flex { | ||||
|             align-items: center; | ||||
|             align-content: center; | ||||
|             background-color: ${themeVars.color.box.header}; | ||||
|             border: 1px solid ${themeVars.color.light.border}; | ||||
|             border-bottom: 0; | ||||
|             border-top-left-radius: ${otherThemeVars.border.radius}; | ||||
|             border-top-right-radius: ${otherThemeVars.border.radius}; | ||||
|             height: 52px; | ||||
|             padding: 8px; | ||||
|             // 左侧菜单 | ||||
|             > .tw-flex:first-child > .ui.compact.menu { | ||||
|               align-items: center; | ||||
|               border: 0; | ||||
|               > .item { | ||||
|                 background: unset !important; | ||||
|                 border-radius: ${otherThemeVars.border.radius}; | ||||
|                 color: ${themeVars.color.text.light.num1}; | ||||
|                 padding: 0px 8px; | ||||
|                 height: 30px; | ||||
|                 &:before { | ||||
|                   display: none; | ||||
|                 } | ||||
|                 &:hover { | ||||
|                   background: ${themeVars.github.control.transparent.bgColor.hover} !important; | ||||
|                 } | ||||
|                 &.active { | ||||
|                   color: ${themeVars.color.text.self}; | ||||
|                   font-weight: 700; | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|             // 右侧菜单 | ||||
|             > .tw-flex:last-child > .ui.menu { | ||||
|               align-items: center; | ||||
|               > .item { | ||||
|                 color: ${themeVars.color.text.light.num1}; | ||||
|               } | ||||
|               > .ui.button { | ||||
|                 padding: 0 12px; | ||||
|                 height: 32px; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         // 关注列表 | ||||
|         > .flex-list:not([id]) { | ||||
|           border: 1px solid ${themeVars.color.light.border}; | ||||
|           border-radius: ${otherThemeVars.border.radius}; | ||||
|           > .flex-item { | ||||
|             padding: 16px; | ||||
|             > .flex-item-main { | ||||
|               gap: 4px; | ||||
|               > .flex-item-header { | ||||
|                 > .flex-item-title { | ||||
|                   gap: 12px; | ||||
|                 } | ||||
|                 > .flex-item-trailing { | ||||
|                   color: ${themeVars.color.text.light.num1}; | ||||
|                   font-size: 12px; | ||||
|                   font-weight: 400; | ||||
|                   gap: 16px; | ||||
|                   .color-icon { | ||||
|                     width: 12px; | ||||
|                     height: 12px; | ||||
|                     margin-right: 0 !important; | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|               > .flex-item-body:last-child { | ||||
|                 font-size: 12px; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       // 通知列表 | ||||
|       &:has(#notification_table) { | ||||
|         > .tw-flex:first-child { | ||||
|           background-color: ${themeVars.color.box.header}; | ||||
|           border: 1px solid ${themeVars.color.light.border}; | ||||
|           border-bottom: 0; | ||||
|           border-top-left-radius: ${otherThemeVars.border.radius}; | ||||
|           border-top-right-radius: ${otherThemeVars.border.radius}; | ||||
|           height: 52px; | ||||
|           padding: 8px; | ||||
|           margin-bottom: 0 !important; | ||||
|           // 左侧菜单 | ||||
|           > .ui.compact.menu { | ||||
|             align-items: center; | ||||
|             border: 0; | ||||
|             > .item { | ||||
|               background: unset !important; | ||||
|               border-radius: ${otherThemeVars.border.radius}; | ||||
|               color: ${themeVars.color.text.light.num1}; | ||||
|               padding: 0px 8px; | ||||
|               height: 30px; | ||||
|               &:before { | ||||
|                 display: none; | ||||
|               } | ||||
|               &:hover { | ||||
|                 background: ${themeVars.github.control.transparent.bgColor.hover} !important; | ||||
|               } | ||||
|               &.active { | ||||
|                 color: ${themeVars.color.text.self}; | ||||
|                 font-weight: 700; | ||||
|               } | ||||
|               .notifications-unread-count { | ||||
|                 margin-left: 4px; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         // 通知全部确认按钮 | ||||
|         .ui.ui.ui.ui.mini.button { | ||||
|           height: 32px; | ||||
|         } | ||||
|       } | ||||
|       // 通知列表 | ||||
|       #notification_table { | ||||
|         border-top-left-radius: 0; | ||||
|         border-top-right-radius: 0; | ||||
|         color: ${themeVars.color.text.light.num1}; | ||||
|         > .notifications-item { | ||||
|           border-top: 1px solid ${themeVars.color.light.border}; | ||||
|           padding: 8px !important; | ||||
|           &:first-child { | ||||
|             border-top: 0; | ||||
|           } | ||||
|           &:last-child { | ||||
|             border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
|             border-bottom-right-radius: ${otherThemeVars.border.radius}; | ||||
|             &:hover { | ||||
|               border-bottom-left-radius: 0; | ||||
|             } | ||||
|           } | ||||
|           &:hover { | ||||
|             background: ${themeVars.github.bgColor.accent.muted}; | ||||
|             box-shadow: 2px 0 0 ${themeVars.github.borderColor.accent.emphasis} inset; | ||||
|             color: ${themeVars.color.text.self}; | ||||
|           } | ||||
|           > .notifications-link { | ||||
|             > .notifications-top-row { | ||||
|               font-size: 12px !important; | ||||
|             } | ||||
|             > .notifications-bottom-row { | ||||
|               font-size: 14px !important; | ||||
|             } | ||||
|           } | ||||
|           > .notifications-updated { | ||||
|             font-size: 12px; | ||||
|           } | ||||
|           > .notifications-buttons { | ||||
|             .interact-bg { | ||||
|               background: ${themeVars.github.bgColor.accent.muted} !important; | ||||
|               color: ${themeVars.color.text.light.num1}; | ||||
|               padding: 8px !important; | ||||
|               &:hover { | ||||
|                 background: ${themeVars.github.control.transparent.bgColor.hover} !important; | ||||
|                 color: ${themeVars.color.text.self}; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
							
								
								
									
										124
									
								
								styles/components/packages.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,124 @@ | ||||
| import { css, otherThemeVars, themeVars } from "src/types/vars"; | ||||
|  | ||||
| // 组织/仓库的软件包列表(包含用户但未测试) | ||||
| export const packagesList = css` | ||||
|   .page-content.packages { | ||||
|     // 这里必须要用 >, 否则会影响到软件包详细信息页的样式 | ||||
|     > .ui.container > div:not([class]) { | ||||
|       border: 1px solid ${themeVars.color.light.border}; | ||||
|       border-radius: ${otherThemeVars.border.radius}; | ||||
|       margin-top: 16px; | ||||
|       .flex-list { | ||||
|         border-top: 1px solid ${themeVars.color.light.border}; | ||||
|         &:first-child { | ||||
|           border-top: 0; | ||||
|         } | ||||
|         .flex-item { | ||||
|           padding: 16px; | ||||
|           .flex-item-main { | ||||
|             .flex-item-title { | ||||
|               gap: 8px; | ||||
|               > a { | ||||
|                 min-height: 25px; | ||||
|               } | ||||
|               // 软件包类型的标签 | ||||
|               .ui.label { | ||||
|                 gap: 4px; | ||||
|                 padding: 3px 6px; | ||||
|                 min-height: 24.5px; | ||||
|                 background-color: unset; | ||||
|                 border: 1px solid ${themeVars.color.light.border}; | ||||
|                 color: ${themeVars.color.primary.self}; | ||||
|               } | ||||
|             } | ||||
|             .flex-item-body { | ||||
|               font-size: 12px; | ||||
|               a { | ||||
|                 text-decoration: underline; | ||||
|                 text-underline-offset: 3px; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 软件包详细信息页 | ||||
| export const packagesDetail = css` | ||||
|   .page-content.packages { | ||||
|     .issue-title-header > div { | ||||
|       color: ${themeVars.color.text.light.num1}; | ||||
|     } | ||||
|     .issue-content { | ||||
|       .issue-content-left { | ||||
|         .ui.top.attached.header { | ||||
|           font-size: 14px; | ||||
|           padding: 16px; | ||||
|         } | ||||
|         .ui.attached.segment { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|           padding: 16px; | ||||
|           .ui.table, | ||||
|           .ui.form .field > label { | ||||
|             color: ${themeVars.color.text.light.num1}; | ||||
|           } | ||||
|           .ui.form .field > label { | ||||
|             margin-bottom: 8px; | ||||
|           } | ||||
|           .markup { | ||||
|             color: ${themeVars.color.text.self}; | ||||
|             pre { | ||||
|               font-size: 12px; | ||||
|               font-weight: 400; | ||||
|               padding: 12px 16px; | ||||
|             } | ||||
|           } | ||||
|           + .ui.top.attached.header { | ||||
|             margin-top: 24px; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       .issue-content-right { | ||||
|         border: 0; | ||||
|         padding: 0px 16px; | ||||
|         > strong { | ||||
|           font-size: 16px; | ||||
|         } | ||||
|         > .divider { | ||||
|           margin: 16px 0px; | ||||
|         } | ||||
|         // 详情 | ||||
|         > .ui.relaxed.list { | ||||
|           margin: 16px 0px; | ||||
|           .item { | ||||
|             color: ${themeVars.color.text.light.num1}; | ||||
|             svg { | ||||
|               color: ${themeVars.color.text.self}; | ||||
|             } | ||||
|             // 应该只选中版本中的 a 标签 | ||||
|             &.tw-flex { | ||||
|               justify-content: space-between; | ||||
|               > a { | ||||
|                 border: 1px solid ${themeVars.color.light.border}; | ||||
|                 border-radius: 25px; | ||||
|                 font-size: 12px; | ||||
|                 padding: 0px 6px; | ||||
|                 min-height: 20px; | ||||
|                 flex: none !important; | ||||
|                 &:hover { | ||||
|                   text-decoration: none; | ||||
|                 } | ||||
|               } | ||||
|               // 不知道什么东西 | ||||
|               &::after { | ||||
|                 display: none; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
| @@ -19,6 +19,27 @@ export const releaseTagMenu = css` | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 顶部右侧按钮组 | ||||
| export const rightButton = css` | ||||
|   .page-content.repository { | ||||
|     &.releases, | ||||
|     &.tags { | ||||
|       .ui.small.button { | ||||
|         background-color: ${themeVars.color.button}; | ||||
|         border-color: ${themeVars.color.light.border}; | ||||
|         box-shadow: none; | ||||
|         color: ${themeVars.color.text.light.self}; | ||||
|         padding: 5px 16px; | ||||
|         min-height: auto; | ||||
|         line-height: 20px; | ||||
|         &:hover { | ||||
|           background-color: ${themeVars.color.hover.self}; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 标签页样式 | ||||
| export const tags = css` | ||||
|   .page-content.repository.tags { | ||||
| @@ -41,76 +62,114 @@ export const tags = css` | ||||
| // 发布页样式 | ||||
| export const releases = css` | ||||
|   .page-content.repository.releases { | ||||
|     #release-list .release-entry { | ||||
|       // 左侧发布元信息 | ||||
|       .meta { | ||||
|         gap: 0.5rem; | ||||
|         padding-top: 24px; | ||||
|         padding-right: 40px; | ||||
|         text-align: left; | ||||
|         min-width: 0; | ||||
|         flex: 0.125; | ||||
|         a.muted { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|           overflow: hidden; | ||||
|           text-overflow: ellipsis; | ||||
|           white-space: nowrap; | ||||
|           word-break: break-all; | ||||
|           svg { | ||||
|             margin-right: 8px !important; | ||||
|     > .ui.container > .divider { | ||||
|       margin: 16px 0; | ||||
|     } | ||||
|     ul#release-list { | ||||
|       gap: 32px; | ||||
|       margin: 32px 0 16px 0; | ||||
|       .release-entry { | ||||
|         // 左侧发布元信息 | ||||
|         .meta { | ||||
|           gap: 0.5rem; | ||||
|           padding-top: 24px; | ||||
|           padding-right: 40px; | ||||
|           text-align: left; | ||||
|           min-width: 0; | ||||
|           flex: 0.125; | ||||
|           a.muted { | ||||
|             color: ${themeVars.color.text.light.num1}; | ||||
|             overflow: hidden; | ||||
|             text-overflow: ellipsis; | ||||
|             white-space: nowrap; | ||||
|             word-break: break-all; | ||||
|             svg { | ||||
|               margin-right: 8px !important; | ||||
|             } | ||||
|             svg.tw-mr-1.svg.octicon-tag { | ||||
|               margin-top: 1px; | ||||
|             } | ||||
|           } | ||||
|           svg.tw-mr-1.svg.octicon-tag { | ||||
|             margin-top: 1px; | ||||
|           // 分支选择按钮 | ||||
|           .ui.button.branch-dropdown-button { | ||||
|             min-height: 20px; | ||||
|             line-height: 20px; | ||||
|             padding: 3px 12px; | ||||
|             font-size: 12px; | ||||
|           } | ||||
|         } | ||||
|         // 分支选择按钮 | ||||
|         .ui.button.branch-dropdown-button { | ||||
|           min-height: 20px; | ||||
|           line-height: 20px; | ||||
|           padding: 3px 12px; | ||||
|           font-size: 12px; | ||||
|         } | ||||
|       } | ||||
|       // 右侧发布详细信息 | ||||
|       .segment.detail { | ||||
|         .svg { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|         } | ||||
|         p.text.grey { | ||||
|           margin: 16px 0; | ||||
|           .time { | ||||
|             color: ${themeVars.color.text.self}; | ||||
|         // 右侧发布详细信息 | ||||
|         .segment.detail { | ||||
|           padding: 16px; | ||||
|           .svg { | ||||
|             color: ${themeVars.color.text.light.num1}; | ||||
|           } | ||||
|         } | ||||
|         .markup { | ||||
|           > *:first-child { | ||||
|             margin-top: 16px !important; | ||||
|           // 标题 | ||||
|           .release-list-title { | ||||
|             font-size: 32px; | ||||
|             gap: 16px; | ||||
|           } | ||||
|           > *:last-child { | ||||
|             margin-bottom: 16px !important; | ||||
|           // 提交信息 | ||||
|           p.text.grey { | ||||
|             display: flex; | ||||
|             gap: 6px; | ||||
|             flex-wrap: wrap; | ||||
|             margin: 24px 0 0 0; | ||||
|             span { | ||||
|               word-break: break-word; | ||||
|             } | ||||
|             .time { | ||||
|               color: ${themeVars.color.text.self}; | ||||
|             } | ||||
|           } | ||||
|           // 发布内容 | ||||
|           .markup { | ||||
|             > *:first-child { | ||||
|               margin-top: 24px !important; | ||||
|             } | ||||
|           } | ||||
|           // 分割线 | ||||
|           .divider { | ||||
|             position: relative; | ||||
|             left: -16px; | ||||
|             width: calc(100% + 32px); | ||||
|             border-top-width: 1.5px; | ||||
|             margin: 24px 0 16px 0; | ||||
|           } | ||||
|           // 下载列表 | ||||
|           .download { | ||||
|             summary { | ||||
|               font-size: 18px; | ||||
|               font-weight: 600; | ||||
|               margin-top: 16px; | ||||
|               &::marker { | ||||
|                 font-size: 14px; | ||||
|               } | ||||
|             } | ||||
|             .attachment-list { | ||||
|               margin-top: 16px; | ||||
|               .item { | ||||
|                 align-items: center; | ||||
|                 line-height: 17px; | ||||
|                 padding: 8px 16px; | ||||
|                 .flex-text-inline { | ||||
|                   gap: 8px; | ||||
|                 } | ||||
|                 // 只选中左侧文件名称 | ||||
|                 strong.flex-text-inline:hover { | ||||
|                   text-decoration: underline !important; | ||||
|                 } | ||||
|                 .attachment-right-info { | ||||
|                   color: ${themeVars.color.text.light.num1}; | ||||
|                   .svg { | ||||
|                     height: 28px; | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 顶部右侧按钮组 | ||||
| export const rightButton = css` | ||||
|   .page-content.repository { | ||||
|     &.releases, | ||||
|     &.tags { | ||||
|       .ui.small.button { | ||||
|         background-color: ${themeVars.color.button}; | ||||
|         border-color: ${themeVars.color.light.border}; | ||||
|         color: ${themeVars.color.text.light.self}; | ||||
|         padding: 5px 16px; | ||||
|         min-height: auto; | ||||
|         line-height: 20px; | ||||
|         &:hover { | ||||
|           background-color: ${themeVars.color.hover.self}; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -7,14 +7,7 @@ export const repoHeader = css` | ||||
|     .ui.compact.button { | ||||
|       padding: 3px 12px; | ||||
|     } | ||||
|     // 仓库图标 | ||||
|     img.ui.avatar { | ||||
|       height: 32px; | ||||
|       width: 32px; | ||||
|       margin-block-start: 0.5rem; | ||||
|       margin-block-end: 0.5rem; | ||||
|     } | ||||
|  | ||||
|     // 仓库名称 | ||||
|     .flex-item { | ||||
|       .flex-item-title { | ||||
|         // 间隔线颜色 | ||||
|   | ||||
| @@ -25,7 +25,7 @@ export const button = css` | ||||
|       color: ${themeVars.color.text.light.self}; | ||||
|       background-color: ${themeVars.color.button}; | ||||
|       border-color: ${themeVars.color.light.border}; | ||||
|  | ||||
|       box-shadow: none; | ||||
|       &:hover { | ||||
|         background-color: ${themeVars.color.hover.self}; | ||||
|       } | ||||
| @@ -57,12 +57,19 @@ export const button = css` | ||||
|     } | ||||
|   } | ||||
|   // 管理员设置界面下的自定义主色调按钮 | ||||
|   .admin-setting-content .ui.primary.button { | ||||
|     ${tinyStyle} | ||||
|     padding: 5px 16px; | ||||
|     line-height: 22px; | ||||
|     &:hover { | ||||
|       ${tinyHoverStyle} | ||||
|   .admin-setting-content { | ||||
|     .ui.primary.button { | ||||
|       ${tinyStyle} | ||||
|       padding: 5px 16px; | ||||
|       line-height: 22px; | ||||
|       &:hover { | ||||
|         ${tinyHoverStyle} | ||||
|       } | ||||
|     } | ||||
|     .ui.red.button { | ||||
|       box-shadow: ${themeVars.github.shadow.resting.small}; | ||||
|       padding: 5px 16px; | ||||
|       line-height: 22px; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -40,6 +40,15 @@ export const signIn = css` | ||||
|       .button { | ||||
|         height: 40px; | ||||
|       } | ||||
|       .divider.divider-text { | ||||
|         margin: 20px 0px; | ||||
|       } | ||||
|       #oauth2-login-navigator-inner { | ||||
|         gap: 8px; | ||||
|         .ui.button svg { | ||||
|           width: 18px; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     .ui.top.attached.header.segment { | ||||
|       font-size: 14px; | ||||
|   | ||||
							
								
								
									
										27
									
								
								styles/public/animation.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,27 @@ | ||||
| import { overlayAppearDown, overlayAppearUp } from "src/core/theme"; | ||||
| import { css } from "src/types/vars"; | ||||
|  | ||||
| export const keyframe = css` | ||||
|   // 向下出现动画 | ||||
|   @keyframes ${overlayAppearDown} { | ||||
|     0% { | ||||
|       opacity: 0; | ||||
|       transform: translateY(-8px); | ||||
|     } | ||||
|     100% { | ||||
|       opacity: 1; | ||||
|       transform: translateY(0); | ||||
|     } | ||||
|   } | ||||
|   // 向上出现动画 | ||||
|   @keyframes ${overlayAppearUp} { | ||||
|     0% { | ||||
|       opacity: 0; | ||||
|       transform: translateY(8px); | ||||
|     } | ||||
|     100% { | ||||
|       opacity: 1; | ||||
|       transform: translateY(0); | ||||
|     } | ||||
|   } | ||||
| `; | ||||
| @@ -4,6 +4,7 @@ export const primaryStyle = { | ||||
|   color: themeVars.github.button.primary.fgColor.rest, | ||||
|   backgroundColor: themeVars.github.button.primary.bgColor.rest, | ||||
|   borderColor: themeVars.github.button.primary.borderColor.rest, | ||||
|   boxShadow: themeVars.github.shadow.resting.small, | ||||
| }; | ||||
|  | ||||
| export const primaryHoverStyle = { | ||||
| @@ -27,7 +28,7 @@ export const baseButton = css` | ||||
|   } | ||||
|   // 主色调按钮保持白色 | ||||
|   .ui.primary.buttons .button svg { | ||||
|     color: ${themeVars.color.text.self}; | ||||
|     color: ${themeVars.color.white}; | ||||
|   } | ||||
|   .ui.primary { | ||||
|     &.button, | ||||
| @@ -38,6 +39,14 @@ export const baseButton = css` | ||||
|         ${primaryHoverStyle} | ||||
|       } | ||||
|     } | ||||
|     // 按钮组整体有阴影 | ||||
|     &.buttons { | ||||
|       box-shadow: ${themeVars.github.shadow.resting.small}; | ||||
|       .button { | ||||
|         // 按钮组里的按钮无阴影 | ||||
|         box-shadow: none; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   // 主色调基本按钮和普通按钮一样 | ||||
|   // 作者的关注按钮 | ||||
| @@ -45,6 +54,7 @@ export const baseButton = css` | ||||
|     background-color: ${themeVars.color.button}; | ||||
|     color: ${themeVars.color.text.self}; | ||||
|     border-color: ${themeVars.color.light.border}; | ||||
|     box-shadow: none; | ||||
|     &:hover { | ||||
|       background-color: ${themeVars.color.hover.self}; | ||||
|       color: ${themeVars.color.text.self}; | ||||
| @@ -85,17 +95,32 @@ export const redButton = css` | ||||
|       color: ${themeVars.github.button.danger.fgColor.hover}; | ||||
|       background-color: ${themeVars.github.button.danger.bgColor.hover}; | ||||
|       border-color: ${themeVars.github.button.danger.borderColor.hover}; | ||||
|       box-shadow: ${themeVars.github.shadow.resting.small}; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 修复按钮高度 | ||||
| export const fixButtonHeight = css` | ||||
|   // 修复一些主色调或者其他小按钮的高度避免过高 | ||||
|   .ui.small.buttons .button, | ||||
|   .ui.ui.ui.ui.small.button { | ||||
|     min-height: 26px; | ||||
|     height: 32px; | ||||
|   } | ||||
|   .ui.tiny.buttons .button, | ||||
|   // 修复仓库页仓库操作按钮高度对齐和修正 | ||||
|   .repo-button-row .ui.button { | ||||
|     min-height: 32px; | ||||
|   } | ||||
|   // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高 | ||||
|   .repo-header { | ||||
|     .ui.ui.ui.ui.small.compact.button, | ||||
|     .ui.labeled.button > .label { | ||||
|       height: 28px; | ||||
|       min-height: 28px; | ||||
|     } | ||||
|   } | ||||
|   .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button, | ||||
|   .ui.ui.ui.ui.tiny.button { | ||||
|     min-height: 20px; | ||||
|   } | ||||
| @@ -106,4 +131,9 @@ export const fixButton = css` | ||||
|   .ui.ui.ui.ui.small.button { | ||||
|     z-index: 0; | ||||
|   } | ||||
|   // 代码复制按钮 | ||||
|   .ui.button.code-copy { | ||||
|     padding: 4px 6px; | ||||
|     min-height: 28px; | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -1,5 +1,6 @@ | ||||
| import { animationDown, animationUp } from "src/core/theme"; | ||||
| import { css, otherThemeVars, themeVars } from "src/types/vars"; | ||||
| import { fallbackVar } from "src/functions"; | ||||
| import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars"; | ||||
| import { activeItemAfterStyle } from "styles/public/menu"; | ||||
|  | ||||
| export const dropdown = css` | ||||
| @@ -16,19 +17,27 @@ export const dropdown = css` | ||||
|       > .item:not(.tw-hidden) { | ||||
|         display: flex !important; | ||||
|         align-items: center; | ||||
|         gap: 0.5rem; | ||||
|         padding: 8px 10px !important; | ||||
|         align-content: center; | ||||
|         padding: 6px 8px !important; | ||||
|         min-height: 32px; | ||||
|         border-radius: ${otherThemeVars.border.radius} !important; | ||||
|         gap: 4px; | ||||
|         &:not(.emoji) { | ||||
|           margin: 0 0.5rem; | ||||
|           margin: 0 8px; | ||||
|         } | ||||
|         &:not(.emoji):first-of-type { | ||||
|           margin-top: 0.5rem; | ||||
|           margin-top: 8px; | ||||
|           // 工单详细页面的标签菜单中的清除选中标签按钮 | ||||
|           &.clear-selection { | ||||
|             margin-top: 0px; | ||||
|           } | ||||
|         } | ||||
|         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中 | ||||
|         &.cherry-pick-button, | ||||
|         // 下一个 item 是最后一个并且被隐藏时, 目前仅在顶部导航栏工单和 PR 仪表板的菜单中出现 | ||||
|         &:has(+ .tw-hidden:last-of-type), | ||||
|         &:not(.emoji):last-of-type { | ||||
|           margin-bottom: 0.5rem; | ||||
|           margin-bottom: 8px; | ||||
|         } | ||||
|         &:hover { | ||||
|           background-color: ${themeVars.github.control.transparent.bgColor.hover} !important; | ||||
| @@ -46,9 +55,35 @@ export const dropdown = css` | ||||
|             ${activeItemAfterStyle}; | ||||
|           } | ||||
|         } | ||||
|         svg { | ||||
|           margin-top: 2px; | ||||
|           margin-right: 4px; | ||||
|         } | ||||
|         // 复选框对齐 | ||||
|         .ui.checkbox input[type="checkbox"] { | ||||
|           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 { | ||||
|         margin: 0.5rem 0; | ||||
|         margin: 8px 0; | ||||
|       } | ||||
|       &:after { | ||||
|         display: none !important; | ||||
| @@ -58,16 +93,32 @@ export const dropdown = css` | ||||
|   // 向下弹出的下拉菜单向下偏移 | ||||
|   .ui.dropdown:not(.upward), | ||||
|   .ui.menu .ui.dropdown:not(.upward) { | ||||
|     .menu { | ||||
|       margin-top: 0.35em !important; | ||||
|     > .menu { | ||||
|       margin-top: 4px !important; | ||||
|     } | ||||
|   } | ||||
|   // 向上弹出的下拉菜单向上偏移 | ||||
|   .ui.dropdown.upward, | ||||
|   .ui.menu .ui.dropdown.upward { | ||||
|     .menu { | ||||
|     > .menu { | ||||
|       animation: ${animationUp}; | ||||
|       margin-bottom: 0.35em !important; | ||||
|       margin-bottom: 4px !important; | ||||
|     } | ||||
|   } | ||||
|   // 修复 wiki 的页面下拉菜单圆角 | ||||
|   .ui.floating.dropdown > .menu { | ||||
|     border-radius: 12px !important; | ||||
|   } | ||||
|   // 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单 | ||||
|   .ui.dropdown .menu { | ||||
|     .scrolling.menu { | ||||
|       border-radius: 0 0 12px 12px !important; | ||||
|     } | ||||
|     // 修复仪表板切换用户按钮菜单下无创建组织按钮时的菜单圆角 | ||||
|     &.context-user-switch { | ||||
|       .scrolling.menu:last-child { | ||||
|         border-radius: 0 0 12px 12px !important; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   // 修复下拉菜单元素溢出问题 | ||||
| @@ -75,7 +126,7 @@ export const dropdown = css` | ||||
|   .user-menu>.item, | ||||
|   // Issue/PR 菜单 | ||||
|   .ui.menu .ui.dropdown.item .menu .item { | ||||
|     width: auto; | ||||
|     width: calc(100% - 16px); // 减去上方 item 的 margin 左右边距 | ||||
|   } | ||||
|   // 去掉下拉菜单的边框线 | ||||
|   // 设置里的下拉菜单 | ||||
| @@ -175,6 +226,19 @@ export const selectionDropdown = css` | ||||
|     border-top-left-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` | ||||
| @@ -187,8 +251,38 @@ export const fixSelectionDropdown = css` | ||||
|  | ||||
| // 分支菜单 | ||||
| export const branchDropdown = css` | ||||
|   .ui.dropdown.branch-selector-dropdown .menu > .item { | ||||
|     animation: ${animationDown}; | ||||
|   .ui.dropdown.branch-selector-dropdown > .menu { | ||||
|     width: ${fallbackVar(customThemeVars.branchMenuWidth, "320px")}; | ||||
|     max-width: 640px; | ||||
|     > .menu > .item { | ||||
|       animation: ${animationDown}; | ||||
|       height: 32px; | ||||
|     } | ||||
|     // 分支/标签切换 | ||||
|     > .branch-tag-tab { | ||||
|       > .branch-tag-item { | ||||
|         font-weight: 500; | ||||
|         padding: 8px 12px; | ||||
|         height: 32px; | ||||
|         line-height: 1.15; | ||||
|         svg { | ||||
|           display: none; | ||||
|         } | ||||
|         &.active { | ||||
|           background: ${themeVars.color.body}; | ||||
|         } | ||||
|         &:hover { | ||||
|           color: inherit; | ||||
|           &:not(.active) { | ||||
|             background: ${themeVars.color.hover.self}; | ||||
|             border: 1px solid ${themeVars.color.secondary.self}; | ||||
|             border-bottom: 0; | ||||
|             border-top-left-radius: ${otherThemeVars.border.radius}; | ||||
|             border-top-right-radius: ${otherThemeVars.border.radius}; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
|   | ||||
| @@ -2,6 +2,7 @@ | ||||
| // tslint:disable:ordered-imports | ||||
| // 组件导入有顺序, 禁止插件优化 | ||||
| import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入 | ||||
| import "./animation"; // 动画效果 | ||||
| import "./transition"; // 过渡效果 | ||||
| import "./text"; // 文本或 SVG 的基本颜色 | ||||
| import "./button"; // 按钮 | ||||
| @@ -11,5 +12,5 @@ import "./label"; // 标签 | ||||
| import "./menu"; // 菜单 | ||||
| import "./modal"; // 弹窗 | ||||
| import "./tippy"; // 提示框 | ||||
| import "./navbar"; // 导航栏 | ||||
| import "./attached"; // 附加样式 | ||||
| import "./other"; // 其他样式 | ||||
|   | ||||
| @@ -35,7 +35,12 @@ export const input = css` | ||||
|     height: 32px; | ||||
|   } | ||||
|   // 由于输入框高度, 需要输入框在表单中垂直居中 | ||||
|   .ui.form { | ||||
|   // 管理员页面仓库搜索表单 | ||||
|   .ui.form#repo-search-form { | ||||
|     align-items: center; | ||||
|   } | ||||
|   // 下拉菜单的输入框 | ||||
|   .ui.dropdown.dropdown .menu>.input { | ||||
|     margin: 12px 10px; | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -67,6 +67,12 @@ export const label = css` | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   .ui.small.label { | ||||
|     font-size: 12px; | ||||
|   } | ||||
|   .ui.mini.label { | ||||
|     font-size: 10px; | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 提交中的 SHA 标签 | ||||
| @@ -78,6 +84,8 @@ export const shaLabel = css` | ||||
|     color: ${themeVars.color.text.light.num1}; | ||||
|     font-size: 12px; | ||||
|     font-weight: 500; | ||||
|     // 仪表盘页的提交 SHA 标签居中对齐 | ||||
|     margin-top: 2px; | ||||
|     &:hover { | ||||
|       background-color: ${themeVars.color.label.hoverBg}; | ||||
|     } | ||||
| @@ -180,19 +188,3 @@ export const repoLabel = css` | ||||
|     font-size: 14px; | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 软件包列表 | ||||
| export const packagesLabel = css` | ||||
|   .page-content { | ||||
|     &.packages { | ||||
|       > .ui.container > div > .flex-list { | ||||
|         // 软件包类型的标签 | ||||
|         .ui.label { | ||||
|           background-color: unset; | ||||
|           border: 1px solid ${themeVars.color.light.border}; | ||||
|           color: ${themeVars.color.primary.self}; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -149,11 +149,14 @@ export const secondaryMenu = css` | ||||
|       height: 32px; | ||||
|       font-weight: 500; | ||||
|     } | ||||
|     a.item:hover { | ||||
|       background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|     } | ||||
|   } | ||||
|   // 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏 | ||||
|   .ui.secondary.pointing.menu { | ||||
|     .overflow-menu-items { | ||||
|       gap: 0.5rem; | ||||
|       gap: 4px; | ||||
|       .item { | ||||
|         padding: 5px 8px !important; | ||||
|         margin-block-start: 0.5rem; | ||||
| @@ -192,6 +195,10 @@ export const secondaryMenu = css` | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   // 修复仓库页面下的二级导航栏的下划线因浏览器 BUG 导致显示的异常问题(导致下划线和分割线重叠变粗) | ||||
|   .page-content.repository .ui.secondary.pointing.menu { | ||||
|     border-bottom: none !important; | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 分页菜单 | ||||
| @@ -201,6 +208,7 @@ export const paginationMenu = css` | ||||
|     background-color: unset; | ||||
|     border: 0; | ||||
|     gap: 4px; | ||||
|     min-height: fit-content; | ||||
|     .item { | ||||
|       border-radius: ${otherThemeVars.border.radius}; | ||||
|       min-width: 32px; | ||||
| @@ -236,3 +244,55 @@ export const paginationMenu = css` | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 单行双选项菜单 | ||||
| export const smallCompactMenu = css` | ||||
|   // 订阅/关注切换菜单(应只选中订阅/关注页面, 不能选中通知页面) | ||||
|   .page-content.user.notification > .ui.container:has(.flex-list), | ||||
|   // 里程碑/标签切换菜单(里程碑页) | ||||
|   .page-content.repository.milestones .list-header, | ||||
|   // 里程碑/标签切换菜单(新建里程碑页) | ||||
|   .page-content.repository.new.milestone .issue-navbar, | ||||
|   // 里程碑/标签切换菜单(标签页) | ||||
|   .page-content.repository.labels .issue-navbar { | ||||
|     .ui.compact.small.menu.small-menu-items { | ||||
|       background: ${themeVars.color.hover.self} !important; | ||||
|       border: 0; | ||||
|       font-size: 14px; | ||||
|       gap: 8px; | ||||
|       height: 32px; | ||||
|       min-height: 32px !important; | ||||
|       > .item { | ||||
|         background: unset !important; | ||||
|         border: 1px solid ${themeVars.color.hover.self}; | ||||
|         border-radius: ${otherThemeVars.border.radius}; | ||||
|         padding: 6px 12px !important; | ||||
|         &.active { | ||||
|           background: ${themeVars.color.menu} !important; | ||||
|           border-color: ${themeVars.color.light.border}; | ||||
|           font-weight: 600; | ||||
|         } | ||||
|         &::before { | ||||
|           display: none; | ||||
|         } | ||||
|         &:not(.active) { | ||||
|           top: 4px; | ||||
|           padding: 4px 12px !important; | ||||
|           height: calc(100% - 8px); | ||||
|           position: relative; | ||||
|           // 该方案只适用于 2 个 item 的情况 | ||||
|           // left / right 数值为 gap 数值的一半 | ||||
|           &:first-child { | ||||
|             left: 4px; | ||||
|           } | ||||
|           &:last-child { | ||||
|             right: 4px; | ||||
|           } | ||||
|           &:hover { | ||||
|             background: ${themeVars.github.control.transparent.bgColor.hover} !important; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
							
								
								
									
										24
									
								
								styles/public/other.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,24 @@ | ||||
| import { css, themeVars } from "src/types/vars"; | ||||
|  | ||||
| // 一些列表头, 比如工单的搜索标签里程碑栏 | ||||
| export const listHeader = css` | ||||
|   .list-header { | ||||
|     align-items: center; | ||||
|     align-content: center; | ||||
|   } | ||||
| `; | ||||
|  | ||||
| export const svg = css` | ||||
|   // 已标星的图标 | ||||
|   .octicon-star-fill { | ||||
|     color: ${themeVars.github.button.star.iconColor} !important; | ||||
|   } | ||||
|   // VSCode 图标 | ||||
|   .gitea-vscode { | ||||
|     color: #007acc !important; | ||||
|   } | ||||
|   // VSCodium 图标 | ||||
|   .gitea-vscodium { | ||||
|     color: #429cf0 !important; | ||||
|   } | ||||
| `; | ||||
| @@ -5,16 +5,20 @@ import { css, otherThemeVars, themeVars } from "src/types/vars"; | ||||
| export const tippyBox = css` | ||||
|   .tippy-box { | ||||
|     margin-top: -3px; | ||||
|     border-radius: 12px; | ||||
|     border-radius: ${otherThemeVars.border.radius}; | ||||
|     overflow: hidden; | ||||
|     animation: ${animationDown}; | ||||
|     // 边框线同步 github 样式 | ||||
|     // 克隆菜单和PR提示框为 default | ||||
|     &[data-theme="default"], | ||||
|     // 带标题的提示框 (Runner信息) | ||||
|     &[data-theme="box-with-header"] { | ||||
|       border: unset; | ||||
|       box-shadow: ${themeVars.github.shadow.floating.small}; | ||||
|     } | ||||
|     // 带标题的提示框 (Runner信息) | ||||
|     &[data-theme="default"], | ||||
|     &[data-theme="menu"] { | ||||
|       border-radius: 12px; | ||||
|     } | ||||
|     &[data-theme="box-with-header"] { | ||||
|       .tippy-content { | ||||
|         background-color: ${themeVars.color.menu}; | ||||
| @@ -26,14 +30,24 @@ export const tippyBox = css` | ||||
|     // 差异对比中文件路径行右侧的三个点菜单 | ||||
|     &[data-theme="menu"] { | ||||
|       .tippy-content { | ||||
|         padding: 0.5rem; | ||||
|         padding: 8px; | ||||
|         .item { | ||||
|           border-radius: ${otherThemeVars.border.radius}; | ||||
|           padding: 6px 8px; | ||||
|           height: 32px; | ||||
|           &:hover { | ||||
|             background-color: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     // 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等 | ||||
|     &[data-theme="tooltip"] { | ||||
|       .tippy-content { | ||||
|         font-size: 12px; | ||||
|         font-weight: 400; | ||||
|         padding: 4px 8px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -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 { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||
| import { darkGithubColors } from "themes/dark"; | ||||
| @@ -28,8 +32,12 @@ export const colorblindDarkGithubColors: GithubColor = { | ||||
|     success: { emphasis: "#1f6feb" }, | ||||
|   }, | ||||
|   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" } }, | ||||
|     star: darkGithubColors.button.star, | ||||
|   }, | ||||
|   control: darkGithubColors.control, | ||||
|   shadow: darkGithubColors.shadow, | ||||
| @@ -68,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 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 { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||
| import { lightGithubColors } from "themes/light"; | ||||
| @@ -28,8 +32,12 @@ export const colorblindLightGithubColors: GithubColor = { | ||||
|     success: { emphasis: "#0969da" }, | ||||
|   }, | ||||
|   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" } }, | ||||
|     star: lightGithubColors.button.star, | ||||
|   }, | ||||
|   control: lightGithubColors.control, | ||||
|   shadow: lightGithubColors.shadow, | ||||
| @@ -68,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 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"; | ||||
|  | ||||
| export const darkGithubColors: GithubColor = { | ||||
|   isDarkTheme: true, | ||||
|   display: { | ||||
|     blue: { fgColor: "#4493f8" }, | ||||
|     brown: { fgColor: "#b69a6d" }, | ||||
|     cyan: { fgColor: "#07ace4" }, | ||||
|     indigo: { fgColor: "#9899ec" }, | ||||
| @@ -32,6 +37,7 @@ export const darkGithubColors: GithubColor = { | ||||
|     success: "#3fb950", | ||||
|     black: "#010409", | ||||
|     white: "#ffffff", | ||||
|     onEmphasis: "#ffffff", | ||||
|   }, | ||||
|   bgColor: { | ||||
|     accent: { emphasis: "#1f6feb", muted: "#388bfd1a" }, | ||||
| @@ -39,6 +45,7 @@ export const darkGithubColors: GithubColor = { | ||||
|     danger: { muted: "#f851491a" }, | ||||
|     default: "#0d1117", | ||||
|     done: { emphasis: "#8957e5" }, | ||||
|     emphasis: "#3d444d", | ||||
|     muted: "#151b23", | ||||
|     neutral: { muted: "#656c7633" }, | ||||
|     success: { emphasis: "#238636", muted: "#2ea04326" }, | ||||
| @@ -54,15 +61,19 @@ export const darkGithubColors: GithubColor = { | ||||
|     translucent: "#ffffff26", | ||||
|   }, | ||||
|   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" } }, | ||||
|     star: { iconColor: "#e3b341" }, | ||||
|   }, | ||||
|   control: { | ||||
|     bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" }, | ||||
|     transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } }, | ||||
|   }, | ||||
|   shadow: { floating: { small: "#01040966" } }, | ||||
|   overlay: { backdrop: { bgColor: "#21283066" } }, | ||||
|   shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, | ||||
|   overlay: { backdrop: { bgColor: "#21283066" }, bgColor: "#010409" }, | ||||
|   underlineNav: { borderColor: { active: "#f78166" } }, | ||||
|   contribution: { | ||||
|     default: { | ||||
| @@ -72,6 +83,6 @@ export const darkGithubColors: GithubColor = { | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors); | ||||
| export const darkColors = github2ThemeColor(darkGithubColors); | ||||
|  | ||||
| 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"; | ||||
|  | ||||
| export const lightGithubColors: GithubColor = { | ||||
|   isDarkTheme: false, | ||||
|   display: { | ||||
|     blue: { fgColor: "#0969da" }, | ||||
|     brown: { fgColor: "#755f43" }, | ||||
|     cyan: { fgColor: "#006a80" }, | ||||
|     indigo: { fgColor: "#494edf" }, | ||||
| @@ -32,6 +37,7 @@ export const lightGithubColors: GithubColor = { | ||||
|     success: "#1a7f37", | ||||
|     black: "#1f2328", | ||||
|     white: "#ffffff", | ||||
|     onEmphasis: "#ffffff", | ||||
|   }, | ||||
|   bgColor: { | ||||
|     accent: { emphasis: "#0969da", muted: "#ddf4ff" }, | ||||
| @@ -39,6 +45,7 @@ export const lightGithubColors: GithubColor = { | ||||
|     danger: { muted: "#ffebe9" }, | ||||
|     default: "#ffffff", | ||||
|     done: { emphasis: "#8250df" }, | ||||
|     emphasis: "#25292e", | ||||
|     muted: "#f6f8fa", | ||||
|     neutral: { muted: "#818b981f" }, | ||||
|     success: { emphasis: "#1f883d", muted: "#dafbe1" }, | ||||
| @@ -54,15 +61,19 @@ export const lightGithubColors: GithubColor = { | ||||
|     translucent: "#1f232826", | ||||
|   }, | ||||
|   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" } }, | ||||
|     star: { iconColor: "#eac54f" }, | ||||
|   }, | ||||
|   control: { | ||||
|     bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" }, | ||||
|     transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } }, | ||||
|   }, | ||||
|   shadow: { floating: { small: "#25292e0a" } }, | ||||
|   overlay: { backdrop: { bgColor: "#c8d1da66" } }, | ||||
|   shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } }, | ||||
|   overlay: { backdrop: { bgColor: "#c8d1da66" }, bgColor: "#ffffff" }, | ||||
|   underlineNav: { borderColor: { active: "#fd8c73" } }, | ||||
|   contribution: { | ||||
|     default: { | ||||
| @@ -72,6 +83,6 @@ export const lightGithubColors: GithubColor = { | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors); | ||||
| export const lightColors = github2ThemeColor(lightGithubColors); | ||||
|  | ||||
| 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 { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||
| import { darkGithubColors } from "themes/dark"; | ||||
| @@ -27,6 +31,7 @@ export const softDarkGithubColors: GithubColor = { | ||||
|     success: "#57ab5a", | ||||
|     black: "#010409", | ||||
|     white: "#cdd9e5", | ||||
|     onEmphasis: "#ffffff", | ||||
|   }, | ||||
|   bgColor: { | ||||
|     accent: { emphasis: "#316dca", muted: "#4184e41a" }, | ||||
| @@ -34,6 +39,7 @@ export const softDarkGithubColors: GithubColor = { | ||||
|     danger: { muted: "#e5534b1a" }, | ||||
|     default: "#212830", | ||||
|     done: { emphasis: "#8256d0" }, | ||||
|     emphasis: "#3d444d", | ||||
|     muted: "#262c36", | ||||
|     neutral: { muted: "#656c7633" }, | ||||
|     success: { emphasis: "#347d39", muted: "#46954a26" }, | ||||
| @@ -49,15 +55,19 @@ export const softDarkGithubColors: GithubColor = { | ||||
|     translucent: "#cdd9e526", | ||||
|   }, | ||||
|   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" } }, | ||||
|     star: { iconColor: "#daaa3f" }, | ||||
|   }, | ||||
|   control: { | ||||
|     bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" }, | ||||
|     transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } }, | ||||
|   }, | ||||
|   shadow: { floating: { small: "#01040966" } }, | ||||
|   overlay: { backdrop: { bgColor: "#262c3666" } }, | ||||
|   shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } }, | ||||
|   overlay: { backdrop: { bgColor: "#262c3666" }, bgColor: "#2a313c" }, | ||||
|   underlineNav: { borderColor: { active: "#ec775c" } }, | ||||
|   contribution: { | ||||
|     default: { | ||||
| @@ -97,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 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 { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
| 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 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 { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
| 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 default defineTheme(tritanopiaLightColors, tritanopiaLightChroma); | ||||
|   | ||||