Compare commits
	
		
			55 Commits
		
	
	
		
			v1.24.4.25
			...
			c8634fb14b
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|   | 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 | ||
|   | 7cd7a48d17 | ||
|   | ebc6463c30 | ||
|   | 77c3842a43 | ||
|   | d311072ca0 | ||
|   | 8b4102d8d9 | ||
|   | 73b5397d77 | ||
|   | 134c383cdb | ||
|   | c6e73000bd | ||
|   | dbf3547ad5 | ||
|   | 5235dae367 | ||
|   | a9df7a31e1 | ||
|   | dd6e97be1d | ||
|   | 29f983cce6 | ||
|   | fca10130a3 | ||
|   | 8676816342 | ||
|   | 9bcea89fcb | ||
|   | 26deec78ff | ||
|   | ffb7fa810b | ||
|   | 2083d3026b | ||
|   | 5037e46447 | ||
|   | cd2f7579b1 | ||
|   | 1b237b12f3 | ||
|   | a8453a87a5 | ||
|   | 6aef26cdc8 | ||
|   | a4c94cb34d | ||
|   | 8c45f44309 | ||
|   | 1c9b02ea88 | ||
|   | 61313d5644 | 
							
								
								
									
										15
									
								
								.github/FUNDING.yml
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,15 @@ | ||||
| # 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'] | ||||
							
								
								
									
										16
									
								
								.github/release-template.md
									
									
									
									
										vendored
									
									
								
							
							
						
						| @@ -1,11 +1,17 @@ | ||||
| ## 🎉 | ||||
| ### 🎉 | ||||
|  | ||||
| ## ✨ Feature | ||||
| ### ✨ Feature | ||||
|  | ||||
| #### CSS 变量 | ||||
|  | ||||
| ## 🌈 Style | ||||
| ### 🌈 Style | ||||
|  | ||||
| #### 更符合 GitHub 风格 | ||||
| ##### 更符合 GitHub 风格 | ||||
|  | ||||
| ## 🐞 Fix | ||||
| ### 🐞 Fix | ||||
|  | ||||
| ## 📃 English | ||||
|  | ||||
| #### CSS Variable | ||||
|  | ||||
| ##### More GitHub-like style | ||||
|   | ||||
							
								
								
									
										74
									
								
								.github/release.md
									
									
									
									
										vendored
									
									
								
							
							
						
						| @@ -1,36 +1,56 @@ | ||||
| ## 🎉 项目已毕业! (这是最后一版开发版本) | ||||
| ### ✨ Feature | ||||
|  | ||||
| 目前项目的主要功能开发已全部完成, 进入维护阶段. | ||||
| #### CSS 变量 | ||||
|  | ||||
| 维护阶段项目发版频率与 Gitea 发版频率保持一致, 版本号将与 Gitea 保持一致(不再附带时间戳). | ||||
| - 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度 | ||||
| - 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度 | ||||
|  | ||||
| 每逢 Gitea 大版本更新时, 项目中间如有修复, 会发布当前版本的最后一个 `.latest` 版本. 之后会发布适配第一个大版本的 `.rc` | ||||
| 预发布版本, 问题不多时会发布正式版本, 正式版本之后的修复会等 Gitea 发布下一个小版本时再发布. | ||||
| ### 🌈 Style | ||||
|  | ||||
| ## 🌈 Style | ||||
| - 优化小型按钮的高度 | ||||
| - 一些列表栏的元素位置居中 | ||||
|  | ||||
| - 优化创建仓库/派生仓库/迁移仓库/创建组织页面的样式与设置页面的样式一致 | ||||
| - 优化消息右上角小图标样式 | ||||
| - 优化组织页面下的 RSS 订阅按钮样式 | ||||
| ##### 更符合 GitHub 风格 | ||||
|  | ||||
| #### 更符合 GitHub 风格 | ||||
| - 同步查看代码文件内容时的样式 | ||||
| - 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验) | ||||
| - 略微减小导航栏创建仓库菜单按钮内的图标间隔 | ||||
| - 微调一些标签的字体大小 | ||||
| - 优化发布页面布局和下载列表样式 | ||||
| - 同步里程碑页面样式 | ||||
| - 同步顶部工单等仪表板样式 | ||||
| - 同步置顶 Issue 样式 | ||||
| - 同步订阅/关注页面样式 | ||||
| - 同步用户菜单样式 | ||||
| - 优化下拉菜单样式 | ||||
| - 同步差异对比页面文件名标题栏样式 | ||||
| - 同步分支菜单宽度 | ||||
| - 同步通知页面样式 | ||||
| - 优化仪表板的仓库组织切换按钮样式 | ||||
| - 同步仓库已标星的星星颜色 | ||||
| - 优化仪表板动态信息间隔 | ||||
| - 微调仓库相关界面元素间隔 | ||||
|  | ||||
| - 同步代码编辑器背景色和字体大小 (修复亮色模式下编辑器背景色问题) #12 | ||||
| - 同步查看代码文件内容页面/文件树样式 (包括滚动时固定的导航栏, 尽量与 GitHub 一致) | ||||
| - 同步分页菜单样式 | ||||
| - 同步登录/注册页面样式 | ||||
| - 同步 Issue/PR 列表样式 | ||||
| - 同步 Issue/PR 详细页面侧边栏样式 | ||||
| - 同步仓库代码文件页 README 导航栏样式 | ||||
| - 同步用户点星仓库列表样式 | ||||
| - 优化私有标签样式 | ||||
| - 优化热力图和动态样式 | ||||
| - 优化仪表板仓库/组织列表样式 | ||||
| - 略微增加仓库代码文件列表的单行高度 | ||||
| ### 🐞 Fix | ||||
|  | ||||
| ## 🐞 Fix | ||||
| - 修复红绿色盲主题的代码高亮色 | ||||
| - 修复仓库中文 README 时的按钮下划线长度 | ||||
| - 修复登录二次验证页面内容位置 | ||||
| - 修复后台管理的运维管理面板的样式 | ||||
| - 取消修改编辑器字体大小, 避免光标错位 | ||||
| - 修复文件预览时文件树右边框过粗 | ||||
| - 修复提交列表尾行圆角 | ||||
| - 修复 wiki 页面和组织页面的用户下拉菜单的圆角问题 | ||||
|  | ||||
| - Action 作业步骤页面标题选中时滚动固定的高度 | ||||
| - 用户公开活动页动态布局 | ||||
| - 顶部导航栏工单管理/请求合并页面搜索框旁的选择下拉框按钮内容过窄 | ||||
| - 手机页面下注册/登录页导航栏注册按钮换行 | ||||
| ## 📃 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 | ||||
|   | ||||
							
								
								
									
										6
									
								
								.github/workflows/release.yml
									
									
									
									
										vendored
									
									
								
							
							
						
						| @@ -18,8 +18,10 @@ jobs: | ||||
|       - name: Create release | ||||
|         run: | | ||||
|           export TZ=Asia/Shanghai | ||||
|           TAG="v$(npm run -s version).$(date +%y%m%d%H%M)" | ||||
|           tar -zcf dist/theme-github.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 | ||||
|           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 | ||||
|         env: | ||||
|           GH_TOKEN: ${{ github.token }} | ||||
|   | ||||
| @@ -95,8 +95,8 @@ npm run commit | ||||
|  | ||||
| 请在颜色主题文件头部附加自己的作者信息, 方便 Issue 提问者找到你 `@`. | ||||
|  | ||||
| 推荐使用 `import { defineTheme } from "src"` 导入主题生成框架, 然后使用 `defineTheme` 函数生成主题, | ||||
| defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明. | ||||
| 推荐使用 `import { defineTheme, type ThemeColor } from "src"` 导入主题生成框架, 声明主题颜色, 然后使用 `defineTheme` | ||||
| 函数生成主题所有 CSS 变量, defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工作量, 具体请查看函数说明和定义. | ||||
|  | ||||
| 颜色计算函数可以从 `src/functions` 导入, 例如 `import { scaleColorLight } from "src/functions"`, 或者使用 `polished` 库. | ||||
|  | ||||
| @@ -107,12 +107,15 @@ defineTheme 中设置了一些经过计算得到的 Gitea 变量可以减少工 | ||||
|  * @author 你的名字 | ||||
|  * @description 主题描述 | ||||
|  */ | ||||
| import { defineTheme } from "src"; | ||||
| export default defineTheme({ | ||||
| import { defineTheme, type ThemeColor } from "src"; | ||||
| export const 主题名称DarkColors: ThemeColor = { | ||||
|   ... | ||||
| }); | ||||
| } | ||||
| export default defineTheme(主题名称DarkColors); | ||||
| // 使用其他主题颜色作为基础 | ||||
| import dark from "themes/dark"; | ||||
| import { darkColors } from "themes/dark"; | ||||
| export const 主题名称DarkColors: ThemeColor = darkColors; | ||||
| export default defineTheme({ | ||||
|   ...dark, | ||||
|   ... | ||||
| @@ -130,17 +133,26 @@ export default defineTheme({ | ||||
|  * @author 你的名字 | ||||
|  * @description 主题描述 | ||||
|  */ | ||||
| import type { Theme } from "src"; | ||||
| import type { Theme, Chroma, Primary, Secondary, ... } from "src"; | ||||
| export const primary: Primary = ...; | ||||
| export const secondary: Secondary =...; | ||||
| export const chroma: Chroma =...; | ||||
| ... | ||||
| export default theme: Theme = { | ||||
|  ... | ||||
|   primary, | ||||
|   secondary, | ||||
|   chroma, | ||||
|   ... | ||||
| }; | ||||
| ``` | ||||
|  | ||||
| 完成主题颜色开发后, 请在某个仓库的代码文件列表页, 打开 Code 菜单选择 Tea Cli 进行截图, 并放入 `screenshots` | ||||
| 目录下, 截图名与主题名相同. (推荐克隆 Github 的 actions/checkout 仓库, 该仓库信息较全, 避免泄露个人隐私) | ||||
| 目录下, 截图名与主题名相同. (推荐克隆本仓库, 避免泄露个人隐私) | ||||
|  | ||||
| 然后将截图信息添加到 `README.md` 文件中, 可以在折叠部分中添加自己的说明. | ||||
|  | ||||
| 主题颜色复用案例可以参考本主题的色盲主题. | ||||
|  | ||||
| ## 主题样式贡献 | ||||
|  | ||||
| 主题样式使用 TypeScript 的 css 模板字符串开发, 该模板字符串会经过 sass 预处理器处理, 支持 SCSS 语法并且主题只接受 SCSS 嵌套语法, 请不要使用 CSS 语法, 如果一定要用请说明原因. | ||||
|   | ||||
							
								
								
									
										40
									
								
								README.md
									
									
									
									
									
								
							
							
						
						| @@ -1,11 +1,9 @@ | ||||
| # gitea-github-theme | ||||
| <p align="center"> | ||||
|   中文 | | ||||
|   <a href="./README_EN.md">English</a> | ||||
| </p> | ||||
|  | ||||
| 一个精致模仿 Github 风格的 Gitea 主题 | ||||
|  | ||||
| > [!TIP] | ||||
| > | ||||
| > 推荐搭配文件图标浏览器插件一起使用更佳 | ||||
| > [web-file-explorer-icons](https://github.com/catppuccin/web-file-explorer-icons) | ||||
| # Gitea GitHub Theme | ||||
|  | ||||
| ## 版本号说明 | ||||
|  | ||||
| @@ -15,7 +13,7 @@ Gitea 版本号格式: `1.大版本号.小版本号` | ||||
|  | ||||
| Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版本号适用于所有 Gitea 大版本号相同的 Gitea 版本. | ||||
|  | ||||
| 比如: 主题版本 `1.24.4` 适用于 Gitea 版本 `>=1.24.0` ~ `<1.25.0` | ||||
| 比如: 主题版本 `1.24.5` 适用于 Gitea 版本 `>=1.24.0` `<1.25.0` | ||||
|  | ||||
| 仅维护项目发布中的最新的 Gitea 版本, 其他旧版本主题不接受 Issue 和 PR. | ||||
|  | ||||
| @@ -46,8 +44,14 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github- | ||||
|  | ||||
| ## 截图 | ||||
|  | ||||
| ### 基本主题 | ||||
|  | ||||
| ```ini | ||||
| THEMES = github-auto, github-light, github-dark, github-soft-dark | ||||
| ``` | ||||
|  | ||||
| <details open> | ||||
| <summary>GitHub</summary> | ||||
| <summary>Base</summary> | ||||
| <h4>theme-github-light.css</h4> | ||||
| <img src="screenshots/light.png"/> | ||||
| <h4>theme-github-dark.css</h4> | ||||
| @@ -56,9 +60,19 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github- | ||||
| <img src="screenshots/soft-dark.png"/> | ||||
| </details> | ||||
|  | ||||
| ### 色盲主题 ( Beta ) | ||||
|  | ||||
| ```ini | ||||
| THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark | ||||
| THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | ||||
| ``` | ||||
|  | ||||
| <details> | ||||
| <summary>其他主题</summary> | ||||
| 等待贡献者ing... | ||||
| <summary>Colorblind & Tritanopia (红绿色盲 & 蓝色盲)</summary> | ||||
| <h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4> | ||||
| <img src="screenshots/colorblind-light.png"/> | ||||
| <h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4> | ||||
| <img src="screenshots/colorblind-dark.png"/> | ||||
| </details> | ||||
|  | ||||
| ## 自定义 CSS 变量 | ||||
| @@ -88,7 +102,9 @@ THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github- | ||||
|  | ||||
| | 变量名                            | 描述                        | 默认  | Github | 推荐  | 最小  | 最大  | | ||||
| | :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- | | ||||
| | --custom-clone-menu-width         | 克隆菜单宽度                | Gitea | 332px  | 200px | 150px | 400px | | ||||
| | --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   |       |       | | ||||
|   | ||||
							
								
								
									
										136
									
								
								README_EN.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,136 @@ | ||||
| <p align="center"> | ||||
|   <a href="./README.md">中文</a> | | ||||
|   English | ||||
| </p> | ||||
|  | ||||
| # Gitea GitHub Theme | ||||
|  | ||||
| ## Version Number Explanation | ||||
|  | ||||
| The theme version number is kept consistent with the Gitea version number | ||||
|  | ||||
| Gitea version number format: `1.major.minor` | ||||
|  | ||||
| Theoretically, minor version changes in Gitea do not modify the frontend layout, so the minor version of the theme is | ||||
| applicable to all Gitea versions with the same major version number. | ||||
|  | ||||
| For example: Theme version `1.24.5` is applicable to Gitea versions `>=1.24.0` `<1.25.0` | ||||
|  | ||||
| Only the latest released Gitea version is maintained. Issues and PRs for other older theme versions will not be | ||||
| accepted. | ||||
|  | ||||
| > Development stage theme version number format: `1.major.minor.timestamp` | ||||
|  | ||||
| ## Installation | ||||
|  | ||||
| 1. Download the latest CSS theme file from the release page and place it in the `gitea/public/assets/css` directory | ||||
| 2. Modify `gitea/conf/app.ini` and append the CSS filename without the `theme-` prefix to the end of `THEMES` under the | ||||
|    `[ui]` section | ||||
| 3. Restart Gitea | ||||
| 4. Check the theme in the settings | ||||
|  | ||||
| > [!IMPORTANT] | ||||
| > | ||||
| > Automatic color theme requires both light and dark theme files | ||||
|  | ||||
| Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES` | ||||
|  | ||||
| Example `gitea/conf/app.ini`: | ||||
|  | ||||
| ```ini | ||||
| [ui] | ||||
| THEMES = gitea-auto, gitea-light, gitea-dark, github-auto, github-light, github-dark, github-soft-dark | ||||
| ``` | ||||
|  | ||||
| For details, please refer to the Gitea documentation | ||||
| [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) | ||||
|  | ||||
| ## Screenshots | ||||
|  | ||||
| ### Basic Themes | ||||
|  | ||||
| ```ini | ||||
| THEMES = github-auto, github-light, github-dark, github-soft-dark | ||||
| ``` | ||||
|  | ||||
| <details open> | ||||
| <summary>Base</summary> | ||||
| <h4>theme-github-light.css</h4> | ||||
| <img src="screenshots/en/light.png"/> | ||||
| <h4>theme-github-dark.css</h4> | ||||
| <img src="screenshots/en/dark.png"/> | ||||
| <h4>theme-github-soft-dark.css</h4> | ||||
| <img src="screenshots/en/soft-dark.png"/> | ||||
| </details> | ||||
|  | ||||
| ### Colorblind Themes (Beta) | ||||
|  | ||||
| ```ini | ||||
| THEMES = github-colorblind-auto, github-colorblind-light, github-colorblind-dark | ||||
| THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark | ||||
| ``` | ||||
|  | ||||
| <details> | ||||
| <summary>Colorblind & Tritanopia</summary> | ||||
| <h4>theme-github-colorblind-light.css & theme-github-tritanopia-light.css</h4> | ||||
| <img src="screenshots/en/colorblind-light.png"/> | ||||
| <h4>theme-github-colorblind-dark.css & theme-github-tritanopia-dark.css</h4> | ||||
| <img src="screenshots/en/colorblind-dark.png"/> | ||||
| </details> | ||||
|  | ||||
| ## Custom CSS Variables | ||||
|  | ||||
| You can customize parts of the theme style according to your preferences | ||||
|  | ||||
| ### Usage Method | ||||
|  | ||||
| Add the following code at the beginning or end of the theme's CSS file | ||||
|  | ||||
| ```css | ||||
| :root { | ||||
|   --custom-clone-menu-width: 150px; | ||||
|   ... | ||||
| } | ||||
| ``` | ||||
|  | ||||
| > [!IMPORTANT] | ||||
| > | ||||
| > Please ensure to add custom variables in the `:root` selector, otherwise they will not take effect | ||||
| > | ||||
| > Variables are separated by `;` | ||||
| > | ||||
| > It is recommended to place custom variables in a separate file and append them to the theme file using shell commands | ||||
| > or other methods | ||||
|  | ||||
| ### CSS Variables | ||||
|  | ||||
| | Variable Name                     | Description                                              | Default | Github | Recommend | Min   | Max   | | ||||
| | :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :---- | :---- | | ||||
| | --custom-branch-menu-width        | Branch menu width                                        | 320px   | 320px  | 320px     | Gitea | 640px | | ||||
| | --custom-clone-menu-width         | Clone button menu width                                  | Gitea   | 332px  | 200px     | 150px | 400px | | ||||
| | --custom-user-menu-width          | User menu width                                          | 192px   | 200px  |           | Gitea | 320px | | ||||
| | --custom-explore-repolist-columns | Number of repository list columns on explore page        | 2       | 2      | 2         |       |       | | ||||
| | --custom-explore-userlist-columns | Number of user/organization list columns on explore page | 3       | 1      | 2/3       |       |       | | ||||
| | --custom-user-repolist-columns    | Number of repository list columns on user page           | 2       | 2      | 1/2       |       |       | | ||||
| | --custom-org-repolist-columns     | Number of repository list columns on organization page   | 1       | 1      | 1/2       |       |       | | ||||
| | --custom-org-userlist-columns     | Number of user list columns on organization page         | 2       | 1      | 1/2       |       |       | | ||||
|  | ||||
| ## Using Development Version of the Theme | ||||
|  | ||||
| You might want to use the development version of the theme instead of the released version | ||||
|  | ||||
| Please ensure you have Node.js environment installed, Node.js 20 or above is recommended | ||||
|  | ||||
| ```bash | ||||
| git clone https://github.com/lutinglt/gitea-github-theme.git | ||||
| cd gitea-github-theme | ||||
| npm install | ||||
| npm run build | ||||
| ``` | ||||
|  | ||||
| After compilation, theme files will be generated in the `dist` directory. You can place the theme files into the | ||||
| `gitea/public/assets/css` directory, then add the theme name to the end of `THEMES` in `gitea/conf/app.ini` | ||||
|  | ||||
| ## Contribution | ||||
|  | ||||
| Please refer to [CONTRIBUTING](CONTRIBUTING.md) | ||||
| @@ -1,7 +1,7 @@ | ||||
| { | ||||
|   "name": "gitea-github-theme", | ||||
|   "version": "1.24.4", | ||||
|   "description": "A theme to make Gitea look and feel like GitHub", | ||||
|   "version": "1.24.6", | ||||
|   "description": "A sophisticated theme to make Gitea look and feel like GitHub", | ||||
|   "type": "module", | ||||
|   "scripts": { | ||||
|     "dev": "vite build --mode dev", | ||||
|   | ||||
							
								
								
									
										
											BIN
										
									
								
								screenshots/colorblind-dark.png
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 260 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/colorblind-light.png
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 259 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/dark.png
									
									
									
									
										vendored
									
									
								
							
							
						
						| Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 260 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/en/colorblind-dark.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 278 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/en/colorblind-light.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 278 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/en/dark.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 278 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/en/light.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 278 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/en/soft-dark.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 279 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/light.png
									
									
									
									
										vendored
									
									
								
							
							
						
						| Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 259 KiB | 
							
								
								
									
										
											BIN
										
									
								
								screenshots/soft-dark.png
									
									
									
									
										vendored
									
									
								
							
							
						
						| Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 261 KiB | 
| @@ -1,36 +1,6 @@ | ||||
| import { prettylights2Chroma } from "./prettylights"; | ||||
| import { prettylights2Chroma, type prettylightsColor } from "./prettylights"; | ||||
|  | ||||
| export const defaultDarkChroma = prettylights2Chroma({ | ||||
|   syntax: { | ||||
|     brackethighlighter: { angle: "#9198a1", unmatched: "#f85149" }, | ||||
|     carriage: { return: { bg: "#b62324", text: "#f0f6fc" } }, | ||||
|     comment: "#9198a1", | ||||
|     constant: "#79c0ff", | ||||
|     constantOtherReferenceLink: "#a5d6ff", | ||||
|     entity: "#d2a8ff", | ||||
|     entityTag: "#7ee787", | ||||
|     invalid: { illegal: { bg: "#8e1519", text: "#f0f6fc" } }, | ||||
|     keyword: "#ff7b72", | ||||
|     markup: { | ||||
|       bold: "#f0f6fc", | ||||
|       changed: { bg: "#5a1e02", text: "#ffdfb6" }, | ||||
|       deleted: { bg: "#67060c", text: "#ffdcd7" }, | ||||
|       heading: "#1f6feb", | ||||
|       ignored: { bg: "#1158c7", text: "#f0f6fc" }, | ||||
|       inserted: { bg: "#033a16", text: "#aff5b4" }, | ||||
|       italic: "#f0f6fc", | ||||
|       list: "#f2cc60", | ||||
|     }, | ||||
|     metaDiffRange: "#d2a8ff", | ||||
|     storageModifierImport: "#f0f6fc", | ||||
|     string: "#a5d6ff", | ||||
|     stringRegexp: "#7ee787", | ||||
|     sublimelinterGutterMark: "#3d444d", | ||||
|     variable: "#ffa657", | ||||
|   }, | ||||
| }); | ||||
|  | ||||
| export const defaultLightChroma = prettylights2Chroma({ | ||||
| export const lightPrettylights: prettylightsColor = { | ||||
|   syntax: { | ||||
|     brackethighlighter: { angle: "#59636e", unmatched: "#82071e" }, | ||||
|     carriage: { return: { bg: "#cf222e", text: "#f6f8fa" } }, | ||||
| @@ -58,4 +28,37 @@ export const defaultLightChroma = prettylights2Chroma({ | ||||
|     sublimelinterGutterMark: "#818b98", | ||||
|     variable: "#953800", | ||||
|   }, | ||||
| }); | ||||
| }; | ||||
|  | ||||
| export const darkPrettylights: prettylightsColor = { | ||||
|   syntax: { | ||||
|     brackethighlighter: { angle: "#9198a1", unmatched: "#f85149" }, | ||||
|     carriage: { return: { bg: "#b62324", text: "#f0f6fc" } }, | ||||
|     comment: "#9198a1", | ||||
|     constant: "#79c0ff", | ||||
|     constantOtherReferenceLink: "#a5d6ff", | ||||
|     entity: "#d2a8ff", | ||||
|     entityTag: "#7ee787", | ||||
|     invalid: { illegal: { bg: "#8e1519", text: "#f0f6fc" } }, | ||||
|     keyword: "#ff7b72", | ||||
|     markup: { | ||||
|       bold: "#f0f6fc", | ||||
|       changed: { bg: "#5a1e02", text: "#ffdfb6" }, | ||||
|       deleted: { bg: "#67060c", text: "#ffdcd7" }, | ||||
|       heading: "#1f6feb", | ||||
|       ignored: { bg: "#1158c7", text: "#f0f6fc" }, | ||||
|       inserted: { bg: "#033a16", text: "#aff5b4" }, | ||||
|       italic: "#f0f6fc", | ||||
|       list: "#f2cc60", | ||||
|     }, | ||||
|     metaDiffRange: "#d2a8ff", | ||||
|     storageModifierImport: "#f0f6fc", | ||||
|     string: "#a5d6ff", | ||||
|     stringRegexp: "#7ee787", | ||||
|     sublimelinterGutterMark: "#3d444d", | ||||
|     variable: "#ffa657", | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const defaultLightChroma = prettylights2Chroma(lightPrettylights); | ||||
| export const defaultDarkChroma = prettylights2Chroma(darkPrettylights); | ||||
|   | ||||
| @@ -5,7 +5,7 @@ import { themeVars } from "src/types/vars"; | ||||
| import { defaultDarkChroma, defaultLightChroma } from "./chroma"; | ||||
| import type { Theme } from "./theme"; | ||||
|  | ||||
| type ThemeColor = { | ||||
| export type ThemeColor = { | ||||
|   /** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */ | ||||
|   isDarkTheme: boolean; | ||||
|   /** 主色调(强调色) */ | ||||
| @@ -14,38 +14,41 @@ type ThemeColor = { | ||||
|   primaryContrast: string; | ||||
|   /** 副色调(边框色) */ | ||||
|   secondary: string; | ||||
|   /** 红色 */ | ||||
|   red: string; | ||||
|   /** 橙色 */ | ||||
|   orange: string; | ||||
|   /** 黄色 */ | ||||
|   yellow: string; | ||||
|   /** 黄绿色/橄榄色 */ | ||||
|   olive: string; | ||||
|   /** 绿色 */ | ||||
|   green: string; | ||||
|   /** 蓝绿色/青色(偏绿) */ | ||||
|   teal: string; | ||||
|   /** 蓝绿色/青色(偏蓝) */ | ||||
|   cyan: string; | ||||
|   /** 蓝色 */ | ||||
|   blue: string; | ||||
|   /** 蓝紫色/紫罗兰色 */ | ||||
|   violet: string; | ||||
|   /** 紫色 */ | ||||
|   purple: string; | ||||
|   /** 粉红色 */ | ||||
|   pink: string; | ||||
|   /** 棕色 */ | ||||
|   brown: string; | ||||
|   /** 黑色 */ | ||||
|   black: string; | ||||
|   /** 灰色 */ | ||||
|   grey: string; | ||||
|   /** 金色 */ | ||||
|   gold: string; | ||||
|   /** 白色 */ | ||||
|   white: string; | ||||
|   /** 基础颜色 */ | ||||
|   base: { | ||||
|     /** 红色 */ | ||||
|     red: string; | ||||
|     /** 橙色 */ | ||||
|     orange: string; | ||||
|     /** 黄色 */ | ||||
|     yellow: string; | ||||
|     /** 黄绿色/橄榄色 */ | ||||
|     olive: string; | ||||
|     /** 绿色 */ | ||||
|     green: string; | ||||
|     /** 蓝绿色/青色(偏绿) */ | ||||
|     teal: string; | ||||
|     /** 蓝绿色/青色(偏蓝) */ | ||||
|     cyan: string; | ||||
|     /** 蓝色 */ | ||||
|     blue: string; | ||||
|     /** 蓝紫色/紫罗兰色 */ | ||||
|     violet: string; | ||||
|     /** 紫色 */ | ||||
|     purple: string; | ||||
|     /** 粉红色 */ | ||||
|     pink: string; | ||||
|     /** 棕色 */ | ||||
|     brown: string; | ||||
|     /** 黑色 */ | ||||
|     black: string; | ||||
|     /** 灰色 */ | ||||
|     grey: string; | ||||
|     /** 金色 */ | ||||
|     gold: string; | ||||
|     /** 白色 */ | ||||
|     white: string; | ||||
|   }; | ||||
|   /** Action 日志 */ | ||||
|   console: Console; | ||||
|   /** 提交代码对比 */ | ||||
| @@ -81,7 +84,7 @@ type ThemeColor = { | ||||
|  *   github, | ||||
|  * }) | ||||
|  */ | ||||
| export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null): Theme { | ||||
| export function defineTheme(themeColor: ThemeColor, chroma?: Chroma): Theme { | ||||
|   const brightDir = themeColor.isDarkTheme ? -1 : 1; | ||||
|  | ||||
|   const primary: Primary = { | ||||
| @@ -161,161 +164,187 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null | ||||
|  | ||||
|   const named: Named = { | ||||
|     red: { | ||||
|       self: themeColor.red, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 15) : scaleColorLight(themeColor.red, 25), | ||||
|       self: themeColor.base.red, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.red, 15) | ||||
|         : scaleColorLight(themeColor.base.red, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.red, -10), | ||||
|         num2: scaleColorLight(themeColor.red, -20), | ||||
|         num1: scaleColorLight(themeColor.base.red, -10), | ||||
|         num2: scaleColorLight(themeColor.base.red, -20), | ||||
|       }, | ||||
|       badge: { | ||||
|         self: themeColor.red, | ||||
|         bg: rgba(themeColor.red, 0.1), | ||||
|         self: themeColor.base.red, | ||||
|         bg: rgba(themeColor.base.red, 0.1), | ||||
|         hover: { | ||||
|           bg: rgba(themeColor.red, 0.3), | ||||
|           bg: rgba(themeColor.base.red, 0.3), | ||||
|         }, | ||||
|       }, | ||||
|     }, | ||||
|     orange: { | ||||
|       self: themeColor.orange, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 15) : scaleColorLight(themeColor.orange, 25), | ||||
|       self: themeColor.base.orange, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.orange, 15) | ||||
|         : scaleColorLight(themeColor.base.orange, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.orange, -10), | ||||
|         num2: scaleColorLight(themeColor.orange, -20), | ||||
|         num1: scaleColorLight(themeColor.base.orange, -10), | ||||
|         num2: scaleColorLight(themeColor.base.orange, -20), | ||||
|       }, | ||||
|       badge: { | ||||
|         self: themeColor.orange, | ||||
|         bg: rgba(themeColor.orange, 0.1), | ||||
|         self: themeColor.base.orange, | ||||
|         bg: rgba(themeColor.base.orange, 0.1), | ||||
|         hover: { | ||||
|           bg: rgba(themeColor.orange, 0.3), | ||||
|           bg: rgba(themeColor.base.orange, 0.3), | ||||
|         }, | ||||
|       }, | ||||
|     }, | ||||
|     yellow: { | ||||
|       self: themeColor.yellow, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 15) : scaleColorLight(themeColor.yellow, 25), | ||||
|       self: themeColor.base.yellow, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.yellow, 15) | ||||
|         : scaleColorLight(themeColor.base.yellow, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.yellow, -10), | ||||
|         num2: scaleColorLight(themeColor.yellow, -20), | ||||
|         num1: scaleColorLight(themeColor.base.yellow, -10), | ||||
|         num2: scaleColorLight(themeColor.base.yellow, -20), | ||||
|       }, | ||||
|       badge: { | ||||
|         self: themeColor.yellow, | ||||
|         bg: rgba(themeColor.yellow, 0.1), | ||||
|         self: themeColor.base.yellow, | ||||
|         bg: rgba(themeColor.base.yellow, 0.1), | ||||
|         hover: { | ||||
|           bg: rgba(themeColor.yellow, 0.3), | ||||
|           bg: rgba(themeColor.base.yellow, 0.3), | ||||
|         }, | ||||
|       }, | ||||
|     }, | ||||
|     olive: { | ||||
|       self: themeColor.olive, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 15) : scaleColorLight(themeColor.olive, 25), | ||||
|       self: themeColor.base.olive, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.olive, 15) | ||||
|         : scaleColorLight(themeColor.base.olive, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.olive, -10), | ||||
|         num2: scaleColorLight(themeColor.olive, -20), | ||||
|         num1: scaleColorLight(themeColor.base.olive, -10), | ||||
|         num2: scaleColorLight(themeColor.base.olive, -20), | ||||
|       }, | ||||
|     }, | ||||
|     green: { | ||||
|       self: themeColor.green, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 15) : scaleColorLight(themeColor.green, 25), | ||||
|       self: themeColor.base.green, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.green, 15) | ||||
|         : scaleColorLight(themeColor.base.green, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.green, -10), | ||||
|         num2: scaleColorLight(themeColor.green, -20), | ||||
|         num1: scaleColorLight(themeColor.base.green, -10), | ||||
|         num2: scaleColorLight(themeColor.base.green, -20), | ||||
|       }, | ||||
|       badge: { | ||||
|         self: themeColor.green, | ||||
|         bg: rgba(themeColor.green, 0.1), | ||||
|         self: themeColor.base.green, | ||||
|         bg: rgba(themeColor.base.green, 0.1), | ||||
|         hover: { | ||||
|           bg: rgba(themeColor.green, 0.3), | ||||
|           bg: rgba(themeColor.base.green, 0.3), | ||||
|         }, | ||||
|       }, | ||||
|     }, | ||||
|     teal: { | ||||
|       self: themeColor.teal, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 15) : scaleColorLight(themeColor.teal, 25), | ||||
|       self: themeColor.base.teal, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.teal, 15) | ||||
|         : scaleColorLight(themeColor.base.teal, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.teal, -10), | ||||
|         num2: scaleColorLight(themeColor.teal, -20), | ||||
|         num1: scaleColorLight(themeColor.base.teal, -10), | ||||
|         num2: scaleColorLight(themeColor.base.teal, -20), | ||||
|       }, | ||||
|     }, | ||||
|     blue: { | ||||
|       self: themeColor.blue, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 15) : scaleColorLight(themeColor.blue, 25), | ||||
|       self: themeColor.base.blue, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.blue, 15) | ||||
|         : scaleColorLight(themeColor.base.blue, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.blue, -10), | ||||
|         num2: scaleColorLight(themeColor.blue, -20), | ||||
|         num1: scaleColorLight(themeColor.base.blue, -10), | ||||
|         num2: scaleColorLight(themeColor.base.blue, -20), | ||||
|       }, | ||||
|     }, | ||||
|     violet: { | ||||
|       self: themeColor.violet, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 15) : scaleColorLight(themeColor.violet, 25), | ||||
|       self: themeColor.base.violet, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.violet, 15) | ||||
|         : scaleColorLight(themeColor.base.violet, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.violet, -10), | ||||
|         num2: scaleColorLight(themeColor.violet, -20), | ||||
|         num1: scaleColorLight(themeColor.base.violet, -10), | ||||
|         num2: scaleColorLight(themeColor.base.violet, -20), | ||||
|       }, | ||||
|     }, | ||||
|     purple: { | ||||
|       self: themeColor.purple, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 15) : scaleColorLight(themeColor.purple, 25), | ||||
|       self: themeColor.base.purple, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.purple, 15) | ||||
|         : scaleColorLight(themeColor.base.purple, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.purple, -10), | ||||
|         num2: scaleColorLight(themeColor.purple, -20), | ||||
|         num1: scaleColorLight(themeColor.base.purple, -10), | ||||
|         num2: scaleColorLight(themeColor.base.purple, -20), | ||||
|       }, | ||||
|     }, | ||||
|     pink: { | ||||
|       self: themeColor.pink, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 15) : scaleColorLight(themeColor.pink, 25), | ||||
|       self: themeColor.base.pink, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.pink, 15) | ||||
|         : scaleColorLight(themeColor.base.pink, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.pink, -10), | ||||
|         num2: scaleColorLight(themeColor.pink, -20), | ||||
|         num1: scaleColorLight(themeColor.base.pink, -10), | ||||
|         num2: scaleColorLight(themeColor.base.pink, -20), | ||||
|       }, | ||||
|     }, | ||||
|     brown: { | ||||
|       self: themeColor.brown, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 15) : scaleColorLight(themeColor.brown, 25), | ||||
|       self: themeColor.base.brown, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.brown, 15) | ||||
|         : scaleColorLight(themeColor.base.brown, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.brown, -10), | ||||
|         num2: scaleColorLight(themeColor.brown, -20), | ||||
|         num1: scaleColorLight(themeColor.base.brown, -10), | ||||
|         num2: scaleColorLight(themeColor.base.brown, -20), | ||||
|       }, | ||||
|     }, | ||||
|     black: { | ||||
|       self: themeColor.black, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 15) : scaleColorLight(themeColor.black, 25), | ||||
|       self: themeColor.base.black, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.black, 15) | ||||
|         : scaleColorLight(themeColor.base.black, 25), | ||||
|       dark: { | ||||
|         num1: scaleColorLight(themeColor.black, -10), | ||||
|         num2: scaleColorLight(themeColor.black, -20), | ||||
|         num1: scaleColorLight(themeColor.base.black, -10), | ||||
|         num2: scaleColorLight(themeColor.base.black, -20), | ||||
|       }, | ||||
|     }, | ||||
|     grey: { | ||||
|       self: themeColor.grey, | ||||
|       light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 15) : scaleColorLight(themeColor.grey, 25), | ||||
|       self: themeColor.base.grey, | ||||
|       light: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.grey, 15) | ||||
|         : scaleColorLight(themeColor.base.grey, 25), | ||||
|     }, | ||||
|     gold: themeColor.gold, | ||||
|     white: themeColor.white, | ||||
|     gold: themeColor.base.gold, | ||||
|     white: themeColor.base.white, | ||||
|   }; | ||||
|  | ||||
|   const message: Message = { | ||||
|     error: { | ||||
|       bg: { | ||||
|         self: rgba(themeColor.red, 0.1), | ||||
|         active: rgba(themeColor.red, 0.5), | ||||
|         hover: rgba(themeColor.red, 0.3), | ||||
|         self: rgba(themeColor.base.red, 0.1), | ||||
|         active: rgba(themeColor.base.red, 0.5), | ||||
|         hover: rgba(themeColor.base.red, 0.3), | ||||
|       }, | ||||
|       border: rgba(themeColor.red, 0.4), | ||||
|       text: saturate(0.2, themeColor.red), // 饱和度提高 | ||||
|       border: rgba(themeColor.base.red, 0.4), | ||||
|       text: saturate(0.2, themeColor.base.red), // 饱和度提高 | ||||
|     }, | ||||
|     success: { | ||||
|       bg: rgba(themeColor.green, 0.1), | ||||
|       border: rgba(themeColor.green, 0.4), | ||||
|       text: saturate(0.2, themeColor.green), | ||||
|       bg: rgba(themeColor.base.green, 0.1), | ||||
|       border: rgba(themeColor.base.green, 0.4), | ||||
|       text: saturate(0.2, themeColor.base.green), | ||||
|     }, | ||||
|     warning: { | ||||
|       bg: rgba(themeColor.yellow, 0.1), | ||||
|       border: rgba(themeColor.yellow, 0.4), | ||||
|       text: saturate(0.2, themeColor.yellow), | ||||
|       bg: rgba(themeColor.base.yellow, 0.1), | ||||
|       border: rgba(themeColor.base.yellow, 0.4), | ||||
|       text: saturate(0.2, themeColor.base.yellow), | ||||
|     }, | ||||
|     info: { | ||||
|       bg: rgba(themeColor.blue, 0.1), | ||||
|       border: rgba(themeColor.blue, 0.4), | ||||
|       text: saturate(0.2, themeColor.blue), | ||||
|       bg: rgba(themeColor.base.blue, 0.1), | ||||
|       border: rgba(themeColor.base.blue, 0.4), | ||||
|       text: saturate(0.2, themeColor.base.blue), | ||||
|     }, | ||||
|   }; | ||||
|  | ||||
| @@ -326,7 +355,7 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null | ||||
|     yellow: themeVars.color.yellow.self, | ||||
|     blue: themeVars.color.blue.self, | ||||
|     magenta: themeVars.color.pink.self, | ||||
|     cyan: themeColor.cyan, | ||||
|     cyan: themeColor.base.cyan, | ||||
|     white: themeVars.color.console.fg.subtle, | ||||
|     bright: { | ||||
|       black: themeVars.color.black.light, | ||||
| @@ -335,7 +364,9 @@ export function defineTheme(themeColor: ThemeColor, chroma: Chroma | null = null | ||||
|       yellow: themeVars.color.yellow.light, | ||||
|       blue: themeVars.color.blue.light, | ||||
|       magenta: themeVars.color.pink.light, | ||||
|       cyan: themeColor.isDarkTheme ? scaleColorLight(themeColor.cyan, 10) : scaleColorLight(themeColor.cyan, 25), | ||||
|       cyan: themeColor.isDarkTheme | ||||
|         ? scaleColorLight(themeColor.base.cyan, 10) | ||||
|         : scaleColorLight(themeColor.base.cyan, 25), | ||||
|       white: themeVars.color.console.fg.self, | ||||
|     }, | ||||
|   }; | ||||
|   | ||||
| @@ -1,10 +1,9 @@ | ||||
| import { saturate } from "polished"; | ||||
| import type { Console, Diff, Other } from "src"; | ||||
| import { scaleColorLight } from "src/functions"; | ||||
| import type { Chroma, Github } from "src/types"; | ||||
| import type { Github } from "src/types"; | ||||
| import { themeVars } from "src/types/vars"; | ||||
| import { defineTheme } from "./color"; | ||||
| import type { Theme } from "./theme"; | ||||
| import { type ThemeColor } from "./color"; | ||||
|  | ||||
| export type GithubColor = { | ||||
|   isDarkTheme: boolean; | ||||
| @@ -61,6 +60,7 @@ export type GithubColor = { | ||||
|   button: { | ||||
|     primary: { fgColor: { rest: string }; bgColor: { hover: string } }; | ||||
|     danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } }; | ||||
|     star: { iconColor: string }; | ||||
|   }; | ||||
|   control: { | ||||
|     bgColor: { active: string; hover: string; rest: string }; | ||||
| @@ -77,7 +77,7 @@ export type GithubColor = { | ||||
|   }; | ||||
| }; | ||||
|  | ||||
| export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | null = null): Theme { | ||||
| export function github2ThemeColor(githubColor: GithubColor): ThemeColor { | ||||
|   const console: Console = { | ||||
|     fg: { | ||||
|       self: githubColor.fgColor.default, | ||||
| @@ -282,6 +282,9 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul | ||||
|           hover: githubColor.borderColor.translucent, | ||||
|         }, | ||||
|       }, | ||||
|       star: { | ||||
|         iconColor: githubColor.button.star.iconColor, | ||||
|       }, | ||||
|     }, | ||||
|     control: { | ||||
|       bgColor: { | ||||
| @@ -327,12 +330,12 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul | ||||
|       }, | ||||
|     }, | ||||
|   }; | ||||
|   return defineTheme( | ||||
|     { | ||||
|       isDarkTheme: githubColor.isDarkTheme, | ||||
|       primary: githubColor.fgColor.accent, | ||||
|       primaryContrast: githubColor.fgColor.default, | ||||
|       secondary: githubColor.borderColor.default, | ||||
|   return { | ||||
|     isDarkTheme: githubColor.isDarkTheme, | ||||
|     primary: githubColor.fgColor.accent, | ||||
|     primaryContrast: githubColor.fgColor.default, | ||||
|     secondary: githubColor.borderColor.default, | ||||
|     base: { | ||||
|       red: githubColor.fgColor.danger, | ||||
|       orange: githubColor.fgColor.severe, | ||||
|       yellow: githubColor.fgColor.attention, | ||||
| @@ -349,11 +352,10 @@ export function defineGithubTheme(githubColor: GithubColor, chroma: Chroma | nul | ||||
|       grey: githubColor.fgColor.neutral, | ||||
|       gold: githubColor.display.lemon.fgColor, | ||||
|       white: githubColor.fgColor.white, | ||||
|       console, | ||||
|       diff, | ||||
|       other, | ||||
|       github, | ||||
|     }, | ||||
|     chroma | ||||
|   ); | ||||
|     console, | ||||
|     diff, | ||||
|     other, | ||||
|     github, | ||||
|   }; | ||||
| } | ||||
|   | ||||
| @@ -73,7 +73,7 @@ export function prettylights2Chroma(prettylights: prettylightsColor): Chroma { | ||||
|     string: { | ||||
|       self: prettylights.syntax.string, | ||||
|       affix: prettylights.syntax.string, | ||||
|       backtick: prettylights.syntax.string, | ||||
|       backtick: prettylights.syntax.constant, | ||||
|       char: prettylights.syntax.string, | ||||
|       delimiter: prettylights.syntax.string, | ||||
|       doc: prettylights.syntax.comment, | ||||
|   | ||||
| @@ -1,4 +1,5 @@ | ||||
| export { defineTheme } from "./core/color"; | ||||
| export { defaultDarkChroma, defaultLightChroma } from "./core/chroma"; | ||||
| export { defineTheme, type ThemeColor } from "./core/color"; | ||||
| export type { Theme } from "./core/theme"; | ||||
| export type { Chroma, Console, Diff, Github, Other } from "./types"; | ||||
| export type { Ansi, Chroma, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "./types"; | ||||
| export { otherThemeVars, themeVars } from "./types/vars"; | ||||
|   | ||||
| @@ -37,6 +37,7 @@ export const github = { | ||||
|        * @repo `repoTopic` 仓库主题标签背景颜色 | ||||
|        * @actions `actions` 分支标签按钮背景颜色 | ||||
|        * @actions `actionViewHeader` 分支标签按钮背景颜色 | ||||
|        * @notification `notification` 通知列表悬停时的背景颜色 | ||||
|        */ | ||||
|       muted: null, | ||||
|     }, | ||||
| @@ -62,6 +63,7 @@ export const github = { | ||||
|        * @issue `comment` 评论框被选中时的边框颜色 | ||||
|        * @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色 | ||||
|        * @dropdown `selectionDropdown` 选择输入框的内部边框颜色 | ||||
|        * @notification `notification` 通知列表悬停时的左边框颜色 | ||||
|        */ | ||||
|       emphasis: null, | ||||
|     }, | ||||
| @@ -158,6 +160,10 @@ export const github = { | ||||
|         hover: null, | ||||
|       }, | ||||
|     }, | ||||
|     star: { | ||||
|       /** 已标星的星星颜色 */ | ||||
|       iconColor: null, | ||||
|     }, | ||||
|   }, | ||||
|   control: { | ||||
|     bgColor: { | ||||
| @@ -180,6 +186,7 @@ export const github = { | ||||
|          * @issue `issueSidebar` 操作按钮的悬停背景颜色 | ||||
|          * @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色 | ||||
|          * @dashboard `dashboard` 仓库列表项目的悬停背景颜色 | ||||
|          * @notification `notification` 通知列表的按钮悬停背景颜色 | ||||
|          */ | ||||
|         hover: null, | ||||
|       }, | ||||
|   | ||||
| @@ -33,7 +33,9 @@ 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" }, | ||||
|   | ||||
| @@ -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}; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   | ||||
| @@ -1,19 +1,33 @@ | ||||
| import { css, otherThemeVars, themeVars } from "src/types/vars"; | ||||
|  | ||||
| export const dashboard = css` | ||||
|   .page-content.dashboard { | ||||
|   // 首页仪表板, 避免选中管理员后台的维护管理面板 | ||||
|   .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}; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
| @@ -64,3 +78,59 @@ 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; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -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; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -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 留出足够的空间 | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| @@ -31,8 +31,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 +96,15 @@ 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 { | ||||
|             background: ${themeVars.github.control.transparent.bgColor.hover}; | ||||
|             border-radius: ${otherThemeVars.border.radius}; | ||||
| @@ -104,11 +113,11 @@ export const repoFiles = css` | ||||
|             content: ""; | ||||
|             background: ${themeVars.github.underlineNav.borderColor.active}; | ||||
|             border-radius: ${otherThemeVars.border.radius}; | ||||
|             bottom: 0; | ||||
|             bottom: -7px; | ||||
|             left: 0; | ||||
|             height: 2px; | ||||
|             position: absolute; | ||||
|             left: 12px; | ||||
|             width: 113px; | ||||
|             width: 100%; | ||||
|           } | ||||
|           a.muted:hover { | ||||
|             color: inherit; | ||||
| @@ -146,69 +155,179 @@ export const repoFilesMobile = css` | ||||
|  | ||||
| // 仓库打开文件时的视图 | ||||
| export const repoFileView = css` | ||||
|   // 隐藏主内容的下内容和页脚, 避免滚动文件树时滚动条遮挡 | ||||
|   body > .full.height:has(.repo-view-file-tree-container) { | ||||
|     padding-bottom: 0; | ||||
|     + .page-footer { | ||||
|       display: none; | ||||
|     } | ||||
|   } | ||||
|   .page-content.repository.file.list { | ||||
|     &:has(.repo-view-file-tree-container) { | ||||
|       // 取消下间隔优化观看体验 | ||||
|       .secondary-nav { | ||||
|         margin-bottom: 0 !important; | ||||
|         .ui.tabs.divider { | ||||
|           margin-bottom: 0; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     > .ui.container.fluid { | ||||
|       max-width: calc(100% - calc(2 * 16px)); | ||||
|     } | ||||
|     .repo-view-container { | ||||
|       position: sticky; | ||||
|       top: 0; | ||||
|       // 左侧文件树 | ||||
|       .repo-view-file-tree-container { | ||||
|         height: 100vh; | ||||
|         height: calc(100vh - 64px); // 减去头部高度 | ||||
|         // 固定头部 | ||||
|         position: sticky; | ||||
|         top: 0; | ||||
|         &:after { | ||||
|           content: ""; | ||||
|           position: absolute; | ||||
|           top: -14px; | ||||
|           top: 0; | ||||
|           right: 0; | ||||
|           width: 1px; | ||||
|           height: calc(100% + 14px); | ||||
|           height: calc(100% + 64px); // 头部高度 | ||||
|           background: ${themeVars.color.secondary.self}; | ||||
|         } | ||||
|         > .repo-button-row { | ||||
|           height: 32px; | ||||
|           margin: 16px 0; | ||||
|           align-content: center; | ||||
|           background: ${themeVars.color.body}; | ||||
|           font-size: 16px; | ||||
|           height: 64px; | ||||
|           margin: 0; | ||||
|           // 固定头部, 早期父元素有多余的页脚和内容高度导致滚动时无法固定, 修复后也可保留此属性无需删除 | ||||
|           position: sticky; | ||||
|           top: 0; | ||||
|           &:after { | ||||
|             content: ""; | ||||
|             position: absolute; | ||||
|             top: 32px + 32px; | ||||
|             top: 64px; | ||||
|             left: -16px; | ||||
|             width: calc(100% + 16px); | ||||
|             height: 1px; | ||||
|             background: ${themeVars.color.secondary.self}; | ||||
|           } | ||||
|           .ui.compact.icon.button { | ||||
|             border: 0; | ||||
|           } | ||||
|         } | ||||
|         .view-file-tree-items { | ||||
|           margin-right: 0; | ||||
|           padding: 12px 16px 8px 0; | ||||
|         } | ||||
|       } | ||||
|       // 右侧文件视图内容 | ||||
|       .repo-view-content { | ||||
|         padding-bottom: 40px; | ||||
|         .repo-button-row { | ||||
|           align-items: center; | ||||
|           align-content: center; | ||||
|           background: ${themeVars.color.box.header}; | ||||
|           border: 1px solid ${themeVars.color.secondary.self}; | ||||
|           border-radius: ${otherThemeVars.border.radius}; | ||||
|           margin: 16px 0; | ||||
|           height: 46px; | ||||
|           min-height: 46px; | ||||
|           padding: 8px; | ||||
|           position: sticky; | ||||
|           top: 0; | ||||
|           z-index: 1; | ||||
|           .ui.button { | ||||
|             min-height: 32px; | ||||
|           } | ||||
|           // 打开文件树按钮 | ||||
|           .repo-view-file-tree-toggle-show { | ||||
|             background: initial; | ||||
|             border-color: #0000; | ||||
|             padding: 0; | ||||
|             min-width: 32px; | ||||
|           } | ||||
|           // 分支选择按钮 | ||||
|           .branch-dropdown-button { | ||||
|             padding: 0 12px; | ||||
|           } | ||||
|           // 路径 | ||||
|           .repo-path { | ||||
|             gap: 4px; | ||||
|             .section { | ||||
|               &:first-child, | ||||
|               &.active { | ||||
|                 font-weight: 600; | ||||
|               } | ||||
|             } | ||||
|             .btn { | ||||
|               svg { | ||||
|                 margin-left: 4px; | ||||
|                 color: ${themeVars.color.text.light.num1}; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         .non-diff-file-content { | ||||
|           // 避免分支菜单遮挡 | ||||
|           position: relative; | ||||
|           z-index: 0; | ||||
|           h4.file-header { | ||||
|             padding: 8px 12px !important; | ||||
|             position: sticky; | ||||
|             top: 46px; | ||||
|             // 重叠边框线, 避免过粗 | ||||
|             top: 45px; | ||||
|             z-index: 1; | ||||
|             .file-header-left { | ||||
|               color: ${themeVars.color.text.light.num1}; | ||||
|               font-size: 12px; | ||||
|             } | ||||
|             .file-header-right { | ||||
|               // 按钮组 | ||||
|               > .ui.buttons { | ||||
|                 margin: 0 8px 0 0 !important; // 完全不知道为什么浏览器最终效果没生效, 只能 !important 了 | ||||
|                 .ui.mini.button { | ||||
|                   min-height: 28px; | ||||
|                   height: 28px; | ||||
|                   font-size: 12px; | ||||
|                   padding: 0 8px; | ||||
|                 } | ||||
|               } | ||||
|               // 右侧操作按钮 | ||||
|               > .btn-octicon { | ||||
|                 display: flex; | ||||
|                 align-items: center; | ||||
|                 background: ${themeVars.color.button}; | ||||
|                 border: 1px solid ${themeVars.color.light.border}; | ||||
|                 height: 28px; | ||||
|                 padding: 0 8px; | ||||
|                 svg { | ||||
|                   color: ${themeVars.color.text.light.num1}; | ||||
|                 } | ||||
|                 &:first-of-type { | ||||
|                   border-top-left-radius: ${otherThemeVars.border.radius}; | ||||
|                   border-bottom-left-radius: ${otherThemeVars.border.radius}; | ||||
|                 } | ||||
|                 &:last-of-type { | ||||
|                   border-top-right-radius: ${otherThemeVars.border.radius}; | ||||
|                   border-bottom-right-radius: ${otherThemeVars.border.radius}; | ||||
|                 } | ||||
|                 &:hover { | ||||
|                   background: ${themeVars.color.hover.self}; | ||||
|                   color: ${themeVars.color.text.light.num1}; | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         // 头部提交信息 | ||||
|         .ui.segment#repo-file-commit-box { | ||||
|           padding: 8px 12px; | ||||
|           margin-bottom: 8px !important; | ||||
|           margin-bottom: 16px !important; | ||||
|           min-height: 46px; | ||||
|           > .latest-commit { | ||||
|             gap: 8px; | ||||
|             .commit-summary { | ||||
|               color: ${themeVars.color.text.light.num1}; | ||||
|             } | ||||
|           } | ||||
|           // 右侧提交时间 | ||||
|           > .age { | ||||
| @@ -242,7 +361,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) { | ||||
| @@ -261,11 +381,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}; | ||||
|           } | ||||
|   | ||||
| @@ -74,7 +74,11 @@ export const activity = css` | ||||
|       } | ||||
|       > .flex-item-main { | ||||
|         gap: 8px !important; | ||||
|  | ||||
|         > div:not([class]) { | ||||
|           display: flex; | ||||
|           gap: 8px; | ||||
|           flex-wrap: wrap; | ||||
|         } | ||||
|         relative-time { | ||||
|           color: ${themeVars.color.text.light.num1}; | ||||
|         } | ||||
|   | ||||
| @@ -1,18 +1,20 @@ | ||||
| import "./actions"; | ||||
| import "./chroma"; | ||||
| import "./clone"; | ||||
| import "./commit"; | ||||
| import "./dashboard"; | ||||
| import "./diff"; | ||||
| import "./editor"; | ||||
| import "./explore"; | ||||
| import "./filelist"; | ||||
| import "./heatmap"; | ||||
| import "./issue"; | ||||
| import "./milestones"; | ||||
| import "./newrepo"; | ||||
| import "./notification"; | ||||
| import "./org"; | ||||
| import "./release"; | ||||
| import "./repo"; | ||||
| import "./setting"; | ||||
| import "./signin"; | ||||
| import "./user"; | ||||
| import "./chroma"; | ||||
| import "./editor" | ||||
| @@ -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; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
							
								
								
									
										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; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
							
								
								
									
										179
									
								
								styles/components/notification.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,179 @@ | ||||
| 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 { | ||||
|             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}; | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
| @@ -41,53 +41,111 @@ 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; | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|   | ||||
| @@ -3,11 +3,14 @@ import { css } from "src/types/vars"; | ||||
| // 注册/登录界面 | ||||
| export const signIn = css` | ||||
|   .page-content.user.signin { | ||||
|     .ui.grid > .column { | ||||
|       width: 384px; | ||||
|       padding: 16px; | ||||
|       > .ui.container { | ||||
|         max-width: unset; | ||||
|     .ui.grid { | ||||
|       justify-content: center; | ||||
|       > .column { | ||||
|         width: 384px; | ||||
|         padding: 16px; | ||||
|         > .ui.container { | ||||
|           max-width: unset; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     .ui.top.attached.header { | ||||
| @@ -15,6 +18,7 @@ export const signIn = css` | ||||
|       font-size: 20px; | ||||
|       font-weight: 600; | ||||
|       background-color: unset !important; | ||||
|       text-align: center; | ||||
|       padding: 16px; | ||||
|     } | ||||
|  | ||||
|   | ||||
| @@ -1,4 +1,4 @@ | ||||
| import { css, themeVars, otherThemeVars } from "src/types/vars"; | ||||
| import { css, otherThemeVars, themeVars } from "src/types/vars"; | ||||
|  | ||||
| export const attached = css` | ||||
|   // 设置右面板的内容 | ||||
|   | ||||
| @@ -91,11 +91,25 @@ export const redButton = css` | ||||
|  | ||||
| // 修复按钮高度 | ||||
| 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; | ||||
|   } | ||||
|   | ||||
| @@ -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,18 @@ export const dropdown = css` | ||||
|       > .item:not(.tw-hidden) { | ||||
|         display: flex !important; | ||||
|         align-items: center; | ||||
|         gap: 0.5rem; | ||||
|         padding: 8px 10px !important; | ||||
|         padding: 6px 8px !important; | ||||
|         border-radius: ${otherThemeVars.border.radius} !important; | ||||
|         &:not(.emoji) { | ||||
|           margin: 0 0.5rem; | ||||
|           margin: 0 8px; | ||||
|         } | ||||
|         &:not(.emoji):first-of-type { | ||||
|           margin-top: 0.5rem; | ||||
|           margin-top: 8px; | ||||
|         } | ||||
|         // 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中 | ||||
|         &.cherry-pick-button, | ||||
|         &:not(.emoji):last-of-type { | ||||
|           margin-bottom: 0.5rem; | ||||
|           margin-bottom: 8px; | ||||
|         } | ||||
|         &:hover { | ||||
|           background-color: ${themeVars.github.control.transparent.bgColor.hover} !important; | ||||
| @@ -46,9 +46,17 @@ export const dropdown = css` | ||||
|             ${activeItemAfterStyle}; | ||||
|           } | ||||
|         } | ||||
|         svg { | ||||
|           margin-top: 2px; | ||||
|           margin-right: 8px; | ||||
|         } | ||||
|         // 复选框对齐 | ||||
|         .ui.checkbox input[type="checkbox"] { | ||||
|           height: 100%; | ||||
|         } | ||||
|       } | ||||
|       > .divider { | ||||
|         margin: 0.5rem 0; | ||||
|         margin: 8px 0; | ||||
|       } | ||||
|       &:after { | ||||
|         display: none !important; | ||||
| @@ -58,18 +66,26 @@ 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; | ||||
|   } | ||||
|   // 修复下拉菜单元素溢出问题 | ||||
|   // 用户菜单 | ||||
|   .user-menu>.item, | ||||
| @@ -187,8 +203,12 @@ 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}; | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
|   | ||||
| @@ -13,3 +13,4 @@ import "./modal"; // 弹窗 | ||||
| import "./tippy"; // 提示框 | ||||
| import "./navbar"; // 导航栏 | ||||
| import "./attached"; // 附加样式 | ||||
| import "./other"; // 其他样式 | ||||
| @@ -67,6 +67,12 @@ export const label = css` | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   .ui.small.label { | ||||
|     font-size: 12px; | ||||
|   } | ||||
|   .ui.mini.label { | ||||
|     font-size: 10px; | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 提交中的 SHA 标签 | ||||
|   | ||||
| @@ -236,3 +236,53 @@ 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.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; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|   | ||||
| @@ -1,4 +1,5 @@ | ||||
| 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 { | ||||
| @@ -35,7 +36,7 @@ export const navbarRight = css` | ||||
|             grid-auto-flow: column; | ||||
|             align-items: center; | ||||
|             > svg { | ||||
|               margin-right: 8px; | ||||
|               margin-right: 4px; | ||||
|             } | ||||
|             // 三角号纠正高度保持居中 | ||||
|             .not-mobile { | ||||
| @@ -91,6 +92,24 @@ export const navbarRight = css` | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|     // 用户菜单 | ||||
|     .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 +121,10 @@ export const navbarRight = css` | ||||
|     } | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 二级导航栏 | ||||
| export const secondaryNav = css` | ||||
|   .page-content > :first-child.secondary-nav { | ||||
|     margin-bottom: 16px; | ||||
|   } | ||||
| `; | ||||
|   | ||||
							
								
								
									
										16
									
								
								styles/public/other.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,16 @@ | ||||
| import { css, themeVars } from "src/types/vars"; | ||||
|  | ||||
| // 一些列表头, 比如工单的搜索标签里程碑栏 | ||||
| export const listHeader = css` | ||||
|   .list-header { | ||||
|     align-items: center; | ||||
|     align-content: center; | ||||
|   } | ||||
| `; | ||||
|  | ||||
| // 已标星的图标 | ||||
| export const star = css` | ||||
|   .octicon-star-fill { | ||||
|     color: ${themeVars.github.button.star.iconColor} !important; | ||||
|   } | ||||
| `; | ||||
							
								
								
									
										75
									
								
								themes/colorblind-dark.css.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,75 @@ | ||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | ||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||
| import { darkGithubColors } from "themes/dark"; | ||||
|  | ||||
| export const colorblindDarkGithubColors: GithubColor = { | ||||
|   isDarkTheme: true, | ||||
|   display: darkGithubColors.display, | ||||
|   diffBlob: { | ||||
|     addtionNum: { bgColor: "#58a6ff4d" }, | ||||
|     addtionWord: { bgColor: "#388bfd66" }, | ||||
|     deletionNum: { bgColor: "#db6d284d" }, | ||||
|     deletionWord: { bgColor: "#db6d2866" }, | ||||
|     hunkNum: { bgColor: { rest: "#2f3742" } }, | ||||
|   }, | ||||
|   fgColor: { | ||||
|     ...darkGithubColors.fgColor, | ||||
|     danger: "#f0883e", | ||||
|     success: "#58a6ff", | ||||
|   }, | ||||
|   bgColor: { | ||||
|     ...darkGithubColors.bgColor, | ||||
|     danger: { muted: "#db6d281a" }, | ||||
|     success: { emphasis: "#1f6feb", muted: "#388bfd33" }, | ||||
|   }, | ||||
|   borderColor: { | ||||
|     ...darkGithubColors.borderColor, | ||||
|     success: { emphasis: "#1f6feb" }, | ||||
|   }, | ||||
|   button: { | ||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } }, | ||||
|     danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } }, | ||||
|     star: darkGithubColors.button.star, | ||||
|   }, | ||||
|   control: darkGithubColors.control, | ||||
|   shadow: darkGithubColors.shadow, | ||||
|   overlay: darkGithubColors.overlay, | ||||
|   underlineNav: darkGithubColors.underlineNav, | ||||
|   contribution: darkGithubColors.contribution, | ||||
| }; | ||||
|  | ||||
| export const colorblindDarkPrettylights: prettylightsColor = { | ||||
|   syntax: { | ||||
|     brackethighlighter: { angle: "#9198a1", unmatched: "#db6d28" }, | ||||
|     carriage: { return: { bg: "#9b4215", text: "#f0f6fc" } }, | ||||
|     comment: "#9198a1", | ||||
|     constant: "#79c0ff", | ||||
|     constantOtherReferenceLink: "#a5d6ff", | ||||
|     entity: "#d2a8ff", | ||||
|     entityTag: "#a5d6ff", | ||||
|     invalid: { illegal: { bg: "#762d0a", text: "#f0f6fc" } }, | ||||
|     keyword: "#f0883e", | ||||
|     markup: { | ||||
|       bold: "#f0f6fc", | ||||
|       changed: { bg: "#5a1e02", text: "#ffdfb6" }, | ||||
|       deleted: { bg: "#5a1e02", text: "#ffdfb6" }, | ||||
|       heading: "#1f6feb", | ||||
|       ignored: { bg: "#1158c7", text: "#f0f6fc" }, | ||||
|       inserted: { bg: "#0c2d6b", text: "#cae8ff" }, | ||||
|       italic: "#f0f6fc", | ||||
|       list: "#f2cc60", | ||||
|     }, | ||||
|     metaDiffRange: "#d2a8ff", | ||||
|     storageModifierImport: "#f0f6fc", | ||||
|     string: "#a5d6ff", | ||||
|     stringRegexp: "#a5d6ff", | ||||
|     sublimelinterGutterMark: "#3d444d", | ||||
|     variable: "#ffa657", | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors); | ||||
| export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights); | ||||
|  | ||||
| export default defineTheme(colorblindDarkColors, colorblindDarkChroma); | ||||
							
								
								
									
										75
									
								
								themes/colorblind-light.css.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,75 @@ | ||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | ||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||
| import { lightGithubColors } from "themes/light"; | ||||
|  | ||||
| export const colorblindLightGithubColors: GithubColor = { | ||||
|   isDarkTheme: false, | ||||
|   display: lightGithubColors.display, | ||||
|   diffBlob: { | ||||
|     addtionNum: { bgColor: "#b6e3ff" }, | ||||
|     addtionWord: { bgColor: "#b6e3ff" }, | ||||
|     deletionNum: { bgColor: "#ffd8b5" }, | ||||
|     deletionWord: { bgColor: "#ffd8b5" }, | ||||
|     hunkNum: { bgColor: { rest: "#e6eaef" } }, | ||||
|   }, | ||||
|   fgColor: { | ||||
|     ...lightGithubColors.fgColor, | ||||
|     danger: "#bc4c00", | ||||
|     success: "#0969da", | ||||
|   }, | ||||
|   bgColor: { | ||||
|     ...lightGithubColors.bgColor, | ||||
|     danger: { muted: "#fff1e5" }, | ||||
|     success: { emphasis: "#0969da", muted: "#ddf4ff" }, | ||||
|   }, | ||||
|   borderColor: { | ||||
|     ...lightGithubColors.borderColor, | ||||
|     success: { emphasis: "#0969da" }, | ||||
|   }, | ||||
|   button: { | ||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } }, | ||||
|     danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } }, | ||||
|     star: lightGithubColors.button.star, | ||||
|   }, | ||||
|   control: lightGithubColors.control, | ||||
|   shadow: lightGithubColors.shadow, | ||||
|   overlay: lightGithubColors.overlay, | ||||
|   underlineNav: lightGithubColors.underlineNav, | ||||
|   contribution: lightGithubColors.contribution, | ||||
| }; | ||||
|  | ||||
| export const colorblindLightPrettylights: prettylightsColor = { | ||||
|   syntax: { | ||||
|     brackethighlighter: { angle: "#59636e", unmatched: "#762c00" }, | ||||
|     carriage: { return: { bg: "#bc4c00", text: "#f6f8fa" } }, | ||||
|     comment: "#59636e", | ||||
|     constant: "#0550ae", | ||||
|     constantOtherReferenceLink: "#0a3069", | ||||
|     entity: "#6639ba", | ||||
|     entityTag: "#0550ae", | ||||
|     invalid: { illegal: { bg: "#762c00", text: "#f6f8fa" } }, | ||||
|     keyword: "#bc4c00", | ||||
|     markup: { | ||||
|       bold: "#1f2328", | ||||
|       changed: { bg: "#ffd8b5", text: "#953800" }, | ||||
|       deleted: { bg: "#fff1e5", text: "#762c00" }, | ||||
|       heading: "#0550ae", | ||||
|       ignored: { bg: "#0550ae", text: "#d1d9e0" }, | ||||
|       inserted: { bg: "#ddf4ff", text: "#0550ae" }, | ||||
|       italic: "#1f2328", | ||||
|       list: "#3b2300", | ||||
|     }, | ||||
|     metaDiffRange: "#8250df", | ||||
|     storageModifierImport: "#1f2328", | ||||
|     string: "#0a3069", | ||||
|     stringRegexp: "#0550ae", | ||||
|     sublimelinterGutterMark: "#818b98", | ||||
|     variable: "#953800", | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors); | ||||
| export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights); | ||||
|  | ||||
| export default defineTheme(colorblindLightColors, colorblindLightChroma); | ||||
| @@ -1,6 +1,7 @@ | ||||
| import { defineGithubTheme } from "src/core/github"; | ||||
| import { defineTheme, type ThemeColor } from "src"; | ||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
|  | ||||
| export default defineGithubTheme({ | ||||
| export const darkGithubColors: GithubColor = { | ||||
|   isDarkTheme: true, | ||||
|   display: { | ||||
|     brown: { fgColor: "#b69a6d" }, | ||||
| @@ -22,7 +23,7 @@ export default defineGithubTheme({ | ||||
|     attention: "#d29922", | ||||
|     danger: "#f85149", | ||||
|     default: "#f0f6fc", | ||||
|     disabled: "#656c7699", | ||||
|     disabled: "#656c76", | ||||
|     done: "#ab7df8", | ||||
|     muted: "#9198a1", | ||||
|     neutral: "#9198a1", | ||||
| @@ -35,26 +36,27 @@ export default defineGithubTheme({ | ||||
|   bgColor: { | ||||
|     accent: { emphasis: "#1f6feb", muted: "#388bfd1a" }, | ||||
|     attention: { muted: "#bb800926" }, | ||||
|     success: { emphasis: "#238636", muted: "#2ea04326" }, | ||||
|     danger: { muted: "#f851491a" }, | ||||
|     done: { emphasis: "#8957e5" }, | ||||
|     default: "#0d1117", | ||||
|     inset: "#010409", | ||||
|     done: { emphasis: "#8957e5" }, | ||||
|     muted: "#151b23", | ||||
|     neutral: { muted: "#656c7633" }, | ||||
|     success: { emphasis: "#238636", muted: "#2ea04326" }, | ||||
|     inset: "#010409", | ||||
|   }, | ||||
|   borderColor: { | ||||
|     accent: { emphasis: "#1f6feb" }, | ||||
|     default: "#3d444d", | ||||
|     attention: { emphasis: "#9e6a03" }, | ||||
|     success: { emphasis: "#238636" }, | ||||
|     default: "#3d444d", | ||||
|     done: { emphasis: "#8957e5" }, | ||||
|     success: { emphasis: "#238636" }, | ||||
|     muted: "#3d444db3", | ||||
|     translucent: "#ffffff26", | ||||
|   }, | ||||
|   button: { | ||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } }, | ||||
|     danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } }, | ||||
|     star: { iconColor: "#e3b341" }, | ||||
|   }, | ||||
|   control: { | ||||
|     bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" }, | ||||
| @@ -69,4 +71,8 @@ export default defineGithubTheme({ | ||||
|       borderColor: { num0: "#0104090d" }, | ||||
|     }, | ||||
|   }, | ||||
| }); | ||||
| }; | ||||
|  | ||||
| export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors); | ||||
|  | ||||
| export default defineTheme(darkColors); | ||||
|   | ||||
| @@ -1,6 +1,7 @@ | ||||
| import { defineGithubTheme } from "src/core/github"; | ||||
| import { defineTheme, type ThemeColor } from "src"; | ||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
|  | ||||
| export default defineGithubTheme({ | ||||
| export const lightGithubColors: GithubColor = { | ||||
|   isDarkTheme: false, | ||||
|   display: { | ||||
|     brown: { fgColor: "#755f43" }, | ||||
| @@ -35,26 +36,27 @@ export default defineGithubTheme({ | ||||
|   bgColor: { | ||||
|     accent: { emphasis: "#0969da", muted: "#ddf4ff" }, | ||||
|     attention: { muted: "#fff8c5" }, | ||||
|     success: { emphasis: "#1f883d", muted: "#dafbe1" }, | ||||
|     danger: { muted: "#ffebe9" }, | ||||
|     done: { emphasis: "#8250df" }, | ||||
|     default: "#ffffff", | ||||
|     inset: "#f6f8fa", | ||||
|     done: { emphasis: "#8250df" }, | ||||
|     muted: "#f6f8fa", | ||||
|     neutral: { muted: "#818b981f" }, | ||||
|     success: { emphasis: "#1f883d", muted: "#dafbe1" }, | ||||
|     inset: "#f6f8fa", | ||||
|   }, | ||||
|   borderColor: { | ||||
|     accent: { emphasis: "#0969da" }, | ||||
|     default: "#d1d9e0", | ||||
|     attention: { emphasis: "#9a6700" }, | ||||
|     success: { emphasis: "#1a7f37" }, | ||||
|     default: "#d1d9e0", | ||||
|     done: { emphasis: "#8250df" }, | ||||
|     success: { emphasis: "#1a7f37" }, | ||||
|     muted: "#d1d9e0b3", | ||||
|     translucent: "#1f232826", | ||||
|   }, | ||||
|   button: { | ||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } }, | ||||
|     danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } }, | ||||
|     star: { iconColor: "#eac54f" }, | ||||
|   }, | ||||
|   control: { | ||||
|     bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" }, | ||||
| @@ -69,4 +71,8 @@ export default defineGithubTheme({ | ||||
|       borderColor: { num0: "#1f23280d" }, | ||||
|     }, | ||||
|   }, | ||||
| }); | ||||
| }; | ||||
|  | ||||
| export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors); | ||||
|  | ||||
| export default defineTheme(lightColors); | ||||
|   | ||||
| @@ -1,104 +1,104 @@ | ||||
| import { defineGithubTheme } from "src/core/github"; | ||||
| import { prettylights2Chroma } from "src/core/prettylights"; | ||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | ||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||
| import { darkGithubColors } from "themes/dark"; | ||||
|  | ||||
| export default defineGithubTheme( | ||||
|   { | ||||
|     isDarkTheme: true, | ||||
|     display: { | ||||
|       brown: { fgColor: "#b69a6d" }, | ||||
|       cyan: { fgColor: "#07ace4" }, | ||||
|       indigo: { fgColor: "#9899ec" }, | ||||
|       lemon: { fgColor: "#ba9b12" }, | ||||
|       olive: { fgColor: "#a2a626" }, | ||||
|       teal: { fgColor: "#1cb0ab" }, | ||||
|     }, | ||||
|     diffBlob: { | ||||
|       addtionNum: { bgColor: "#57ab5a4d" }, | ||||
|       addtionWord: { bgColor: "#46954a66" }, | ||||
|       deletionNum: { bgColor: "#e5534b4d" }, | ||||
|       deletionWord: { bgColor: "#e5534b66" }, | ||||
|       hunkNum: { bgColor: { rest: "#143d79" } }, | ||||
|     }, | ||||
|     fgColor: { | ||||
|       accent: "#478be6", | ||||
|       attention: "#c69026", | ||||
|       danger: "#e5534b", | ||||
|       default: "#d1d7e0", | ||||
|       disabled: "#656c76", | ||||
|       done: "#986ee2", | ||||
|       muted: "#9198a1", | ||||
|       neutral: "#9198a1", | ||||
|       severe: "#cc6b2c", | ||||
|       sponsors: "#c96198", | ||||
|       success: "#57ab5a", | ||||
|       black: "#010409", | ||||
|       white: "#cdd9e5", | ||||
|     }, | ||||
|     bgColor: { | ||||
|       accent: { emphasis: "#316dca", muted: "#4184e41a" }, | ||||
|       attention: { muted: "#ae7c1426" }, | ||||
|       success: { emphasis: "#347d39", muted: "#46954a26" }, | ||||
|       danger: { muted: "#e5534b1a" }, | ||||
|       done: { emphasis: "#8256d0" }, | ||||
|       default: "#212830", | ||||
|       inset: "#151b23", | ||||
|       muted: "#262c36", | ||||
|       neutral: { muted: "#656c7633" }, | ||||
|     }, | ||||
|     borderColor: { | ||||
|       accent: { emphasis: "#316dca" }, | ||||
|       default: "#3d444d", | ||||
|       attention: { emphasis: "#966600" }, | ||||
|       success: { emphasis: "#347d39" }, | ||||
|       done: { emphasis: "#8256d0" }, | ||||
|       muted: "#3d444db3", | ||||
|       translucent: "#cdd9e526", | ||||
|     }, | ||||
|     button: { | ||||
|       primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } }, | ||||
|       danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } }, | ||||
|     }, | ||||
|     control: { | ||||
|       bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" }, | ||||
|       transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } }, | ||||
|     }, | ||||
|     shadow: { floating: { small: "#01040966" } }, | ||||
|     overlay: { backdrop: { bgColor: "#262c3666" } }, | ||||
|     underlineNav: { borderColor: { active: "#ec775c" } }, | ||||
|     contribution: { | ||||
|       default: { | ||||
|         bgColor: { num0: "#2a313c", num1: "#1b4721", num2: "#2b6a30", num3: "#46954a", num4: "#6bc46d" }, | ||||
|         borderColor: { num0: "#0104090d" }, | ||||
|       }, | ||||
| export const softDarkGithubColors: GithubColor = { | ||||
|   isDarkTheme: true, | ||||
|   display: darkGithubColors.display, | ||||
|   diffBlob: { | ||||
|     addtionNum: { bgColor: "#57ab5a4d" }, | ||||
|     addtionWord: { bgColor: "#46954a66" }, | ||||
|     deletionNum: { bgColor: "#e5534b4d" }, | ||||
|     deletionWord: { bgColor: "#e5534b66" }, | ||||
|     hunkNum: { bgColor: { rest: "#143d79" } }, | ||||
|   }, | ||||
|   fgColor: { | ||||
|     accent: "#478be6", | ||||
|     attention: "#c69026", | ||||
|     danger: "#e5534b", | ||||
|     default: "#d1d7e0", | ||||
|     disabled: "#656c76", | ||||
|     done: "#986ee2", | ||||
|     muted: "#9198a1", | ||||
|     neutral: "#9198a1", | ||||
|     severe: "#cc6b2c", | ||||
|     sponsors: "#c96198", | ||||
|     success: "#57ab5a", | ||||
|     black: "#010409", | ||||
|     white: "#cdd9e5", | ||||
|   }, | ||||
|   bgColor: { | ||||
|     accent: { emphasis: "#316dca", muted: "#4184e41a" }, | ||||
|     attention: { muted: "#ae7c1426" }, | ||||
|     danger: { muted: "#e5534b1a" }, | ||||
|     default: "#212830", | ||||
|     done: { emphasis: "#8256d0" }, | ||||
|     muted: "#262c36", | ||||
|     neutral: { muted: "#656c7633" }, | ||||
|     success: { emphasis: "#347d39", muted: "#46954a26" }, | ||||
|     inset: "#151b23", | ||||
|   }, | ||||
|   borderColor: { | ||||
|     accent: { emphasis: "#316dca" }, | ||||
|     attention: { emphasis: "#966600" }, | ||||
|     default: "#3d444d", | ||||
|     done: { emphasis: "#8256d0" }, | ||||
|     success: { emphasis: "#347d39" }, | ||||
|     muted: "#3d444db3", | ||||
|     translucent: "#cdd9e526", | ||||
|   }, | ||||
|   button: { | ||||
|     primary: { fgColor: { rest: "#ffffff" }, bgColor: { 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" } }, | ||||
|   underlineNav: { borderColor: { active: "#ec775c" } }, | ||||
|   contribution: { | ||||
|     default: { | ||||
|       bgColor: { num0: "#2a313c", num1: "#1b4721", num2: "#2b6a30", num3: "#46954a", num4: "#6bc46d" }, | ||||
|       borderColor: { num0: "#0104090d" }, | ||||
|     }, | ||||
|   }, | ||||
|   prettylights2Chroma({ | ||||
|     syntax: { | ||||
|       brackethighlighter: { angle: "#9198a1", unmatched: "#e5534b" }, | ||||
|       carriage: { return: { bg: "#ad2e2c", text: "#f0f6fc" } }, | ||||
|       comment: "#9198a1", | ||||
|       constant: "#6cb6ff", | ||||
|       constantOtherReferenceLink: "#96d0ff", | ||||
|       entity: "#dcbdfb", | ||||
|       entityTag: "#8ddb8c", | ||||
|       invalid: { illegal: { bg: "#922323", text: "#f0f6fc" } }, | ||||
|       keyword: "#f47067", | ||||
|       markup: { | ||||
|         bold: "#f0f6fc", | ||||
|         changed: { bg: "#682d0f", text: "#ffddb0" }, | ||||
|         deleted: { bg: "#78191b", text: "#ffd8d3" }, | ||||
|         heading: "#316dca", | ||||
|         ignored: { bg: "#255ab2", text: "#f0f6fc" }, | ||||
|         inserted: { bg: "#1b4721", text: "#b4f1b4" }, | ||||
|         italic: "#f0f6fc", | ||||
|         list: "#eac55f", | ||||
|       }, | ||||
|       metaDiffRange: "#dcbdfb", | ||||
|       storageModifierImport: "#f0f6fc", | ||||
|       string: "#96d0ff", | ||||
|       stringRegexp: "#8ddb8c", | ||||
|       sublimelinterGutterMark: "#3d444d", | ||||
|       variable: "#f69d50", | ||||
| }; | ||||
|  | ||||
| export const softDarkPrettylights: prettylightsColor = { | ||||
|   syntax: { | ||||
|     brackethighlighter: { angle: "#9198a1", unmatched: "#e5534b" }, | ||||
|     carriage: { return: { bg: "#ad2e2c", text: "#f0f6fc" } }, | ||||
|     comment: "#9198a1", | ||||
|     constant: "#6cb6ff", | ||||
|     constantOtherReferenceLink: "#96d0ff", | ||||
|     entity: "#dcbdfb", | ||||
|     entityTag: "#8ddb8c", | ||||
|     invalid: { illegal: { bg: "#922323", text: "#f0f6fc" } }, | ||||
|     keyword: "#f47067", | ||||
|     markup: { | ||||
|       bold: "#f0f6fc", | ||||
|       changed: { bg: "#682d0f", text: "#ffddb0" }, | ||||
|       deleted: { bg: "#78191b", text: "#ffd8d3" }, | ||||
|       heading: "#316dca", | ||||
|       ignored: { bg: "#255ab2", text: "#f0f6fc" }, | ||||
|       inserted: { bg: "#1b4721", text: "#b4f1b4" }, | ||||
|       italic: "#f0f6fc", | ||||
|       list: "#eac55f", | ||||
|     }, | ||||
|   }) | ||||
| ); | ||||
|     metaDiffRange: "#dcbdfb", | ||||
|     storageModifierImport: "#f0f6fc", | ||||
|     string: "#96d0ff", | ||||
|     stringRegexp: "#8ddb8c", | ||||
|     sublimelinterGutterMark: "#3d444d", | ||||
|     variable: "#f69d50", | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors); | ||||
| export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights); | ||||
|  | ||||
| export default defineTheme(softDarkColors, softDarkChroma); | ||||
|   | ||||
							
								
								
									
										45
									
								
								themes/tritanopia-dark.css.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,45 @@ | ||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | ||||
| import { darkPrettylights } from "src/core/chroma"; | ||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||
| import { colorblindDarkGithubColors, colorblindDarkPrettylights } from "themes/colorblind-dark"; | ||||
| import { darkGithubColors } from "themes/dark"; | ||||
|  | ||||
| export const tritanopiaDarkGithubColors: GithubColor = { | ||||
|   ...colorblindDarkGithubColors, | ||||
|   diffBlob: { | ||||
|     ...colorblindDarkGithubColors.diffBlob, | ||||
|     deletionNum: darkGithubColors.diffBlob.deletionNum, | ||||
|     deletionWord: darkGithubColors.diffBlob.deletionWord, | ||||
|   }, | ||||
|   fgColor: { | ||||
|     ...colorblindDarkGithubColors.fgColor, | ||||
|     danger: darkGithubColors.fgColor.danger, | ||||
|   }, | ||||
|   bgColor: { | ||||
|     ...colorblindDarkGithubColors.bgColor, | ||||
|     danger: darkGithubColors.bgColor.danger, | ||||
|   }, | ||||
|   button: { | ||||
|     ...colorblindDarkGithubColors.button, | ||||
|     danger: darkGithubColors.button.danger, | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const tritanopiaDarkPrettylights: prettylightsColor = { | ||||
|   syntax: { | ||||
|     ...darkPrettylights.syntax, | ||||
|     markup: { | ||||
|       ...darkPrettylights.syntax.markup, | ||||
|       changed: { bg: "#67060c", text: "#ffdcd7" }, | ||||
|       inserted: colorblindDarkPrettylights.syntax.markup.inserted, | ||||
|     }, | ||||
|     stringRegexp: colorblindDarkPrettylights.syntax.stringRegexp, | ||||
|     variable: "#ffa198", | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors); | ||||
| export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights); | ||||
|  | ||||
| export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma); | ||||
							
								
								
									
										45
									
								
								themes/tritanopia-light.css.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						| @@ -0,0 +1,45 @@ | ||||
| import { defineTheme, type Chroma, type ThemeColor } from "src"; | ||||
| import { lightPrettylights } from "src/core/chroma"; | ||||
| import { github2ThemeColor, type GithubColor } from "src/core/github"; | ||||
| import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights"; | ||||
| import { colorblindLightGithubColors, colorblindLightPrettylights } from "themes/colorblind-light"; | ||||
| import { lightGithubColors } from "themes/light"; | ||||
|  | ||||
| export const tritanopiaLightGithubColors: GithubColor = { | ||||
|   ...colorblindLightGithubColors, | ||||
|   diffBlob: { | ||||
|     ...colorblindLightGithubColors.diffBlob, | ||||
|     deletionNum: lightGithubColors.diffBlob.deletionNum, | ||||
|     deletionWord: lightGithubColors.diffBlob.deletionWord, | ||||
|   }, | ||||
|   fgColor: { | ||||
|     ...colorblindLightGithubColors.fgColor, | ||||
|     danger: lightGithubColors.fgColor.danger, | ||||
|   }, | ||||
|   bgColor: { | ||||
|     ...colorblindLightGithubColors.bgColor, | ||||
|     danger: lightGithubColors.bgColor.danger, | ||||
|   }, | ||||
|   button: { | ||||
|     ...colorblindLightGithubColors.button, | ||||
|     danger: lightGithubColors.button.danger, | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const tritanopiaLightPrettylights: prettylightsColor = { | ||||
|   syntax: { | ||||
|     ...lightPrettylights.syntax, | ||||
|     markup: { | ||||
|       ...lightPrettylights.syntax.markup, | ||||
|       changed: { bg: "#ffcecb", text: "#a40e26" }, | ||||
|       inserted: colorblindLightPrettylights.syntax.markup.inserted, | ||||
|     }, | ||||
|     stringRegexp: colorblindLightPrettylights.syntax.stringRegexp, | ||||
|     variable: "#a40e26", | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors); | ||||
| export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights); | ||||
|  | ||||
| export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma); | ||||