Compare commits
46 Commits
796c6f1519
...
v1.24.6
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
987144a594 | ||
|
|
2caf68e290 | ||
|
|
e2ccc8c9f7 | ||
|
|
7287aad198 | ||
|
|
b3ce1a8439 | ||
|
|
5d96a6896d | ||
|
|
ced954c1d0 | ||
|
|
bfb27ab4a2 | ||
|
|
3a5306b1a6 | ||
|
|
6608abc39b | ||
|
|
7eeafae4da | ||
|
|
89ac2720c7 | ||
|
|
472647e7c1 | ||
|
|
84a2f5a1ee | ||
|
|
e45c73d850 | ||
|
|
10d0a3dbd8 | ||
|
|
ae9bc3cbb5 | ||
|
|
dc0f43a082 | ||
|
|
5fb9ef2a61 | ||
|
|
247c6fd987 | ||
|
|
865642eb3b | ||
|
|
392c82fcd5 | ||
|
|
02087941f4 | ||
|
|
0560aad59e | ||
|
|
8e8416507e | ||
|
|
1a702c9526 | ||
|
|
46c2d46482 | ||
|
|
8b15abe30b | ||
|
|
9756cbd409 | ||
|
|
b529cefd04 | ||
|
|
dded6b1948 | ||
|
|
5e8f62c79f | ||
|
|
9b2a1783ef | ||
|
|
6bb138e964 | ||
|
|
e387008ee5 | ||
|
|
c8634fb14b | ||
|
|
fc10a1f54b | ||
|
|
f08c7a0c8c | ||
|
|
6c0fd14119 | ||
|
|
cb49b12ff0 | ||
|
|
468a97994a | ||
|
|
1986956191 | ||
|
|
979af2a756 | ||
|
|
a34bd93894 | ||
|
|
64684a51da | ||
|
|
e89c26e753 |
2
.github/FUNDING.yml
vendored
@@ -12,4 +12,4 @@ lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cl
|
||||
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']
|
||||
custom: ["https://afdian.com/a/luting"]
|
||||
|
||||
71
.github/release.md
vendored
@@ -1,28 +1,38 @@
|
||||
### 🎉 已完成大部分页面的 GitHub 风格 ( GitHub Style Completed for Most Pages )
|
||||
|
||||
如果您仍在使用旧版本,强烈建议更新至本版本。此版本已为大部分常用页面实现了 GitHub 风格设计,提供了更强的一致性,并修复了若干已知问题。
|
||||
|
||||
由于布局限制,项目和百科页面的 GitHub 风格适配方案尚未确定。
|
||||
|
||||
If you are still using an older version, we highly recommend updating to this release. This version has implemented the
|
||||
GitHub-style design for most commonly used pages, ensuring stronger consistency, and addresses several known issues.
|
||||
|
||||
Due to layout constraints, the approach for adapting the GitHub style to Project and Wiki pages has not yet been
|
||||
determined.
|
||||
|
||||
### ✨ Feature
|
||||
|
||||
- 新增粉色颜色主题
|
||||
- 修改外观设置中显示的主题名称
|
||||
|
||||
#### CSS 变量
|
||||
|
||||
- 新增 `--custom-branch-menu-width` 变量, 用于设置分支菜单的宽度
|
||||
- 新增 `--custom-user-menu-width` 变量, 用于设置用户菜单的宽度
|
||||
|
||||
### 🌈 Style
|
||||
|
||||
- 优化小型按钮的高度
|
||||
- 一些列表栏的元素位置居中
|
||||
- 优化用户首页仪表板的样式
|
||||
|
||||
##### 更符合 GitHub 风格
|
||||
|
||||
- 同步查看代码文件内容时的样式
|
||||
- 优化查看代码文件内容时的体验 (去掉了一些底部元素, 优化滚动体验)
|
||||
- 略微减小导航栏创建仓库菜单按钮内的图标间隔
|
||||
- 微调一些标签的字体大小
|
||||
- 优化发布页面布局和下载列表样式
|
||||
- 同步里程碑页面样式
|
||||
- 同步顶部工单等仪表板样式
|
||||
- 同步置顶 Issue 样式
|
||||
- 同步订阅页面样式
|
||||
- 同步用户菜单样式
|
||||
- 优化下拉菜单样式
|
||||
- 同步差异对比页面文件名标题栏样式
|
||||
- 同步查看代码文件内容时的样式 (去掉了一些底部元素, 优化滚动体验)
|
||||
- 整体调整了页面元素的间隔, 样式和字体大小
|
||||
- 同步顶部工单/合并请求/里程碑下的仪表板样式
|
||||
- 同步里程碑/置顶 Issue 的样式
|
||||
- 同步通知/订阅/关注/软件包/提示框/用户头像菜单的页面样式
|
||||
- 同步分支菜单宽度
|
||||
- 同步仓库已标星的星星颜色
|
||||
|
||||
### 🐞 Fix
|
||||
|
||||
@@ -31,18 +41,47 @@
|
||||
- 修复登录二次验证页面内容位置
|
||||
- 修复后台管理的运维管理面板的样式
|
||||
- 取消修改编辑器字体大小, 避免光标错位
|
||||
- 修复文件预览时文件树右边框过粗
|
||||
- 修复提交列表尾行圆角
|
||||
- 修复 Wiki 页面和二级导航栏组织下团队菜单的圆角问题
|
||||
- 修复创建工单页面样式
|
||||
- 修复归档仓库 Issue 时间线过长插入归档信息框
|
||||
- 修复亮色主题下的 PR 合并操作评论的头像和按钮图标颜色
|
||||
|
||||
## 📃 English (From AI)
|
||||
|
||||
### ✨ Feature
|
||||
|
||||
- Added pink color theme
|
||||
- Modified theme names displayed in appearance settings
|
||||
|
||||
#### CSS Variables
|
||||
|
||||
- Added `--custom-branch-menu-width` variable for setting branch menu width
|
||||
- Added `--custom-user-menu-width` variable for setting user menu width
|
||||
|
||||
### 🌈 Style
|
||||
|
||||
- Optimized dashboard style on user homepage
|
||||
|
||||
##### More GitHub-like style
|
||||
|
||||
- Improved code file viewing experience (scrolling to bottom no longer causes file tree content overlap)
|
||||
- Synced styles when viewing code file content (removed some bottom elements, optimized scrolling experience)
|
||||
- Adjusted spacing, styles, and font sizes of page elements overall
|
||||
- Synced dashboard styles under top issues/pull requests/milestones
|
||||
- Synced styles of milestones/pinned Issues
|
||||
- Synced page styles of notifications/subscriptions/follows/packages/tooltips/user avatar menus
|
||||
- Synced branch menu width
|
||||
- Synced star color for starred repositories
|
||||
|
||||
### 🐞 Fix
|
||||
|
||||
- Fixed code highlight colors for red-green color blindness theme
|
||||
- Fixed button underline length for Chinese README in repositories
|
||||
- Fixed content position on login two-factor authentication page
|
||||
- Fixed style of operation and maintenance management panel in admin backend
|
||||
- Reverted editor font size changes to avoid cursor misalignment
|
||||
- Fixed rounded corners of last row in commit list
|
||||
- Fixed rounded corners issue in Wiki pages and team menus under secondary navigation bar organization
|
||||
- Fixed style of issue creation page
|
||||
- Fixed issue where archive information box is inserted when issue timeline is too long in archived repositories
|
||||
- Fixed avatar and button icon colors in PR merge operation comments under light theme
|
||||
|
||||
16
.github/workflows/release.yml
vendored
@@ -17,11 +17,19 @@ jobs:
|
||||
npm run build
|
||||
- name: Create release
|
||||
run: |
|
||||
export TZ=Asia/Shanghai
|
||||
tar -zcf dist/theme-github-base.tar.gz --remove-files \
|
||||
dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
|
||||
|
||||
tar -zcf dist/theme-github-colorblindness-colorblind.tar.gz --remove-files \
|
||||
dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
|
||||
|
||||
tar -zcf dist/theme-github-colorblindness-tritanopia.tar.gz --remove-files \
|
||||
dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
|
||||
|
||||
tar -zcf dist/theme-github-extra-pink.tar.gz --remove-files \
|
||||
dist/theme-github-pink-auto.css dist/theme-github-pink-light.css dist/theme-github-pink-dark.css dist/theme-github-pink-soft-dark.css
|
||||
|
||||
TAG="v$(npm run -s version)"
|
||||
tar -zcf dist/theme-github-base.tar.gz --remove-files dist/theme-github-auto.css dist/theme-github-light.css dist/theme-github-dark.css dist/theme-github-soft-dark.css
|
||||
tar -zcf dist/theme-github-colorblind.tar.gz --remove-files dist/theme-github-colorblind-auto.css dist/theme-github-colorblind-light.css dist/theme-github-colorblind-dark.css
|
||||
tar -zcf dist/theme-github-colorblind-tritanopia.tar.gz --remove-files dist/theme-github-tritanopia-auto.css dist/theme-github-tritanopia-light.css dist/theme-github-tritanopia-dark.css
|
||||
gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG
|
||||
env:
|
||||
GH_TOKEN: ${{ github.token }}
|
||||
|
||||
44
README.md
@@ -30,6 +30,11 @@ Gitea 理论上小版本号变更不会修改前端布局, 所以主题的小版
|
||||
>
|
||||
> 自动颜色主题需要亮色和暗色的主题文件
|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
> 推荐搭配 Catppuccin 文件图标浏览器插件一起使用更佳
|
||||
> [github-file-explorer-icons](https://github.com/catppuccin/github-file-explorer-icons)
|
||||
|
||||
例: 主题文件名为 `theme-github-dark.css`,则添加 `github-dark` 到 `THEMES` 末尾
|
||||
|
||||
`gitea/conf/app.ini` 例:
|
||||
@@ -44,13 +49,15 @@ 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>
|
||||
<details>
|
||||
<summary>Base</summary>
|
||||
<h4>theme-github-light.css</h4>
|
||||
<img src="screenshots/light.png"/>
|
||||
@@ -75,6 +82,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
|
||||
<img src="screenshots/colorblind-dark.png"/>
|
||||
</details>
|
||||
|
||||
### 粉色主题
|
||||
|
||||
```ini
|
||||
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Pink</summary>
|
||||
<h4>theme-github-pink-light.css</h4>
|
||||
<img src="screenshots/pink/pink-light.png"/>
|
||||
<h4>theme-github-pink-dark.css</h4>
|
||||
<img src="screenshots/pink/pink-dark.png"/>
|
||||
<h4>theme-github-pink-soft-dark.css</h4>
|
||||
<img src="screenshots/pink/pink-soft-dark.png"/>
|
||||
</details>
|
||||
|
||||
## 自定义 CSS 变量
|
||||
|
||||
可以根据自己的偏好自定义主题的一部分样式
|
||||
@@ -100,15 +123,16 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
|
||||
|
||||
### CSS 变量
|
||||
|
||||
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
|
||||
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :------- | :---- |
|
||||
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | 内容宽度 | 320px |
|
||||
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | |
|
||||
| 变量名 | 描述 | 默认 | Github | 推荐 | 最小 | 最大 |
|
||||
| :-------------------------------- | :-------------------------- | :---- | :----- | :---- | :---- | :---- |
|
||||
| --custom-branch-menu-width | 分支菜单的宽度 | 320px | 320px | 320px | Gitea | 640px |
|
||||
| --custom-clone-menu-width | 克隆按钮的菜单宽度 | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | 用户菜单的宽度 | 192px | 256px | | Gitea | 320px |
|
||||
| --custom-explore-repolist-columns | 探索页面的仓库列表列数 | 2 | 2 | 2 | | |
|
||||
| --custom-explore-userlist-columns | 探索页面的用户/组织列表列数 | 3 | 1 | 2/3 | | |
|
||||
| --custom-user-repolist-columns | 用户页面的仓库列表列数 | 2 | 2 | 1/2 | | |
|
||||
| --custom-org-repolist-columns | 组织页面的仓库列表列数 | 1 | 1 | 1/2 | | |
|
||||
| --custom-org-userlist-columns | 组织页面的用户列表列数 | 2 | 1 | 1/2 | | |
|
||||
|
||||
## 使用开发中的主题
|
||||
|
||||
|
||||
46
README_EN.md
@@ -31,7 +31,12 @@ accepted.
|
||||
|
||||
> [!IMPORTANT]
|
||||
>
|
||||
> Automatic color theme requires both light and dark theme files
|
||||
> Automatic color theme requires both light and dark theme files.
|
||||
|
||||
> [!TIP]
|
||||
>
|
||||
> Recommend using Catppuccin file icon browser plugin together for better performance.
|
||||
> [github-file-explorer-icons](https://github.com/catppuccin/github-file-explorer-icons)
|
||||
|
||||
Example: If the theme filename is `theme-github-dark.css`, add `github-dark` to the end of `THEMES`
|
||||
|
||||
@@ -47,13 +52,15 @@ For details, please refer to the Gitea documentation
|
||||
|
||||
## Screenshots
|
||||
|
||||

|
||||
|
||||
### Basic Themes
|
||||
|
||||
```ini
|
||||
THEMES = github-auto, github-light, github-dark, github-soft-dark
|
||||
```
|
||||
|
||||
<details open>
|
||||
<details>
|
||||
<summary>Base</summary>
|
||||
<h4>theme-github-light.css</h4>
|
||||
<img src="screenshots/en/light.png"/>
|
||||
@@ -78,6 +85,22 @@ THEMES = github-tritanopia-auto, github-tritanopia-light, github-tritanopia-dark
|
||||
<img src="screenshots/en/colorblind-dark.png"/>
|
||||
</details>
|
||||
|
||||
### Pink Themes
|
||||
|
||||
```ini
|
||||
THEMES = github-pink-auto, github-pink-light, github-pink-dark, github-pink-soft-dark
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Pink</summary>
|
||||
<h4>theme-github-pink-light.css</h4>
|
||||
<img src="screenshots/pink/en/pink-light-en.png"/>
|
||||
<h4>theme-github-pink-dark.css</h4>
|
||||
<img src="screenshots/pink/en/pink-dark-en.png"/>
|
||||
<h4>theme-github-pink-soft-dark.css</h4>
|
||||
<img src="screenshots/pink/en/pink-soft-dark-en.png"/>
|
||||
</details>
|
||||
|
||||
## Custom CSS Variables
|
||||
|
||||
You can customize parts of the theme style according to your preferences
|
||||
@@ -104,15 +127,16 @@ Add the following code at the beginning or end of the theme's CSS file
|
||||
|
||||
### CSS Variables
|
||||
|
||||
| Variable Name | Description | Default | Github | Recommend | Min | Max |
|
||||
| :-------------------------------- | :------------------------------------------------------- | :------ | :----- | :-------- | :------------ | :---- |
|
||||
| --custom-clone-menu-width | Clone button menu width | Gitea | 332px | 200px | 150px | 400px |
|
||||
| --custom-user-menu-width | User menu width | 192px | 200px | | Content Width | 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 | | |
|
||||
| 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
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"name": "gitea-github-theme",
|
||||
"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/dashboard.png
vendored
Normal file
|
After Width: | Height: | Size: 269 KiB |
BIN
screenshots/en/dashboard-en.png
Normal file
|
After Width: | Height: | Size: 295 KiB |
BIN
screenshots/pink/en/pink-dark-en.png
Normal file
|
After Width: | Height: | Size: 191 KiB |
BIN
screenshots/pink/en/pink-light-en.png
Normal file
|
After Width: | Height: | Size: 193 KiB |
BIN
screenshots/pink/en/pink-soft-dark-en.png
Normal file
|
After Width: | Height: | Size: 190 KiB |
BIN
screenshots/pink/pink-dark.png
Normal file
|
After Width: | Height: | Size: 210 KiB |
BIN
screenshots/pink/pink-light.png
Normal file
|
After Width: | Height: | Size: 191 KiB |
BIN
screenshots/pink/pink-soft-dark.png
Normal file
|
After Width: | Height: | Size: 210 KiB |
85
src/core/display.ts
Normal file
@@ -0,0 +1,85 @@
|
||||
import { saturate } from "polished";
|
||||
import { scaleColorLight } from "src/functions";
|
||||
import { type GithubColor } from "./github";
|
||||
|
||||
export type DisplayColor = {
|
||||
num0: string;
|
||||
num1: string;
|
||||
num2: string;
|
||||
num3: string;
|
||||
num4: string;
|
||||
num5: string;
|
||||
num6: string;
|
||||
num7: string;
|
||||
num8: string;
|
||||
num9: string;
|
||||
};
|
||||
|
||||
export function display2GithubColor(
|
||||
displayColor: DisplayColor,
|
||||
baseGithubColor: GithubColor,
|
||||
soft?: boolean
|
||||
): GithubColor {
|
||||
return {
|
||||
...baseGithubColor,
|
||||
diffBlob: {
|
||||
...baseGithubColor.diffBlob,
|
||||
hunkNum: { bgColor: { rest: soft ? displayColor.num2 : displayColor.num1 } },
|
||||
},
|
||||
fgColor: {
|
||||
...baseGithubColor.fgColor,
|
||||
accent: soft ? displayColor.num7 : displayColor.num6,
|
||||
},
|
||||
bgColor: {
|
||||
...baseGithubColor.bgColor,
|
||||
accent: {
|
||||
emphasis: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5,
|
||||
muted: soft ? displayColor.num1 : displayColor.num0,
|
||||
},
|
||||
},
|
||||
borderColor: {
|
||||
...baseGithubColor.borderColor,
|
||||
accent: {
|
||||
emphasis: soft ? displayColor.num6 : displayColor.num5,
|
||||
},
|
||||
},
|
||||
button: {
|
||||
...baseGithubColor.button,
|
||||
primary: {
|
||||
...baseGithubColor.button.primary,
|
||||
fgColor: {
|
||||
...baseGithubColor.button.primary.fgColor,
|
||||
accent: soft ? displayColor.num7 : displayColor.num6,
|
||||
},
|
||||
bgColor: {
|
||||
...baseGithubColor.button.primary.bgColor,
|
||||
rest: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -2)) : displayColor.num5,
|
||||
hover: soft ? saturate(-0.1, scaleColorLight(displayColor.num5, -7)) : scaleColorLight(displayColor.num5, 5),
|
||||
},
|
||||
},
|
||||
star: {
|
||||
iconColor: soft
|
||||
? scaleColorLight(displayColor.num6, -2)
|
||||
: saturate(0.1, scaleColorLight(displayColor.num6, -2)),
|
||||
},
|
||||
},
|
||||
underlineNav: {
|
||||
borderColor: {
|
||||
active: soft ? scaleColorLight(saturate(0.1, displayColor.num6), -5) : saturate(0.2, displayColor.num6),
|
||||
},
|
||||
},
|
||||
contribution: {
|
||||
...baseGithubColor.contribution,
|
||||
default: {
|
||||
...baseGithubColor.contribution.default,
|
||||
bgColor: {
|
||||
num0: baseGithubColor.contribution.default.bgColor.num0,
|
||||
num1: soft ? displayColor.num2 : displayColor.num1,
|
||||
num2: soft ? displayColor.num3 : displayColor.num2,
|
||||
num3: soft ? displayColor.num5 : displayColor.num4,
|
||||
num4: soft ? displayColor.num7 : displayColor.num6,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import { type ThemeColor } from "./color";
|
||||
export type GithubColor = {
|
||||
isDarkTheme: boolean;
|
||||
display: {
|
||||
blue: { fgColor: string };
|
||||
brown: { fgColor: string };
|
||||
cyan: { fgColor: string };
|
||||
indigo: { fgColor: string };
|
||||
@@ -36,10 +37,12 @@ export type GithubColor = {
|
||||
black: string;
|
||||
white: string;
|
||||
muted: string;
|
||||
onEmphasis: string;
|
||||
};
|
||||
bgColor: {
|
||||
accent: { emphasis: string; muted: string };
|
||||
attention: { muted: string };
|
||||
emphasis: string;
|
||||
success: { emphasis: string; muted: string };
|
||||
danger: { muted: string };
|
||||
done: { emphasis: string };
|
||||
@@ -58,14 +61,15 @@ export type GithubColor = {
|
||||
translucent: string;
|
||||
};
|
||||
button: {
|
||||
primary: { fgColor: { rest: string }; bgColor: { hover: string } };
|
||||
primary: { fgColor: { accent: string; rest: string }; bgColor: { rest: string; hover: string } };
|
||||
danger: { fgColor: { rest: string; hover: string }; bgColor: { hover: string } };
|
||||
star: { iconColor: string };
|
||||
};
|
||||
control: {
|
||||
bgColor: { active: string; hover: string; rest: string };
|
||||
transparent: { bgColor: { active: string; hover: string; selected: string } };
|
||||
};
|
||||
shadow: { floating: { small: string } };
|
||||
shadow: { floating: { small: string }; resting: { small: string } };
|
||||
overlay: { backdrop: { bgColor: string } };
|
||||
underlineNav: { borderColor: { active: string } };
|
||||
contribution: {
|
||||
@@ -192,8 +196,8 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
activeBg: githubColor.bgColor.accent.muted,
|
||||
},
|
||||
tooltip: {
|
||||
text: githubColor.fgColor.default,
|
||||
bg: githubColor.bgColor.default,
|
||||
text: githubColor.fgColor.onEmphasis,
|
||||
bg: githubColor.bgColor.emphasis,
|
||||
},
|
||||
nav: {
|
||||
bg: githubColor.bgColor.inset,
|
||||
@@ -256,11 +260,14 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
},
|
||||
primary: {
|
||||
fgColor: {
|
||||
accent: saturate(0.1, scaleColorLight(githubColor.fgColor.success, githubColor.isDarkTheme ? 10 : -10)),
|
||||
accent: saturate(
|
||||
0.1,
|
||||
scaleColorLight(githubColor.button.primary.fgColor.accent, githubColor.isDarkTheme ? 10 : -10)
|
||||
),
|
||||
rest: githubColor.button.primary.fgColor.rest,
|
||||
},
|
||||
bgColor: {
|
||||
rest: themeVars.github.bgColor.success.emphasis,
|
||||
rest: githubColor.button.primary.bgColor.rest,
|
||||
hover: githubColor.button.primary.bgColor.hover,
|
||||
},
|
||||
borderColor: {
|
||||
@@ -281,6 +288,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
hover: githubColor.borderColor.translucent,
|
||||
},
|
||||
},
|
||||
star: {
|
||||
iconColor: githubColor.button.star.iconColor,
|
||||
},
|
||||
},
|
||||
control: {
|
||||
bgColor: {
|
||||
@@ -296,6 +306,9 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
floating: {
|
||||
small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`,
|
||||
},
|
||||
resting: {
|
||||
small: `0px 1px 1px 0px ${githubColor.shadow.resting.small}, 0px 1px 3px 0px ${githubColor.shadow.resting.small};`,
|
||||
},
|
||||
},
|
||||
underlineNav: {
|
||||
borderColor: {
|
||||
@@ -339,7 +352,7 @@ export function github2ThemeColor(githubColor: GithubColor): ThemeColor {
|
||||
green: githubColor.fgColor.success,
|
||||
cyan: githubColor.display.cyan.fgColor,
|
||||
teal: githubColor.display.teal.fgColor,
|
||||
blue: githubColor.fgColor.accent,
|
||||
blue: githubColor.display.blue.fgColor,
|
||||
violet: githubColor.display.indigo.fgColor,
|
||||
purple: githubColor.fgColor.done,
|
||||
pink: githubColor.fgColor.sponsors,
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
|
||||
import { otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import { otherThemeVars, themeInfoVars, themeVars } from "src/types/vars";
|
||||
import type { MapLeafNodes, WithOptionalLayer } from "./types";
|
||||
|
||||
export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
|
||||
@@ -32,11 +34,19 @@ const emoji = `
|
||||
.emoji[aria-label="musical notes"]
|
||||
`;
|
||||
|
||||
// 版本号: 版本号.YYMMDD
|
||||
const now = new Date();
|
||||
const year = now.getFullYear().toString().slice(-2);
|
||||
const month = (now.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = now.getDate().toString().padStart(2, "0");
|
||||
|
||||
const pkgPath = path.join(__dirname, "../..", "package.json");
|
||||
const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
|
||||
const version = `"${pkg.version}.${year}${month}${day}"`;
|
||||
|
||||
export function createTheme(theme: Theme): void {
|
||||
const isDarkTheme: boolean = JSON.parse(theme.isDarkTheme);
|
||||
if (isDarkTheme) {
|
||||
globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
|
||||
}
|
||||
createGlobalTheme(":root", themeInfoVars, { version });
|
||||
createGlobalTheme(":root", themeVars, theme);
|
||||
createGlobalTheme(":root", otherThemeVars, {
|
||||
border: { radius: "6px" },
|
||||
@@ -53,12 +63,5 @@ export function createTheme(theme: Theme): void {
|
||||
accentColor: themeVars.color.accent,
|
||||
colorScheme: isDarkTheme ? "dark" : "light",
|
||||
});
|
||||
globalKeyframes(overlayAppearDown, {
|
||||
"0%": { opacity: 0, transform: "translateY(-8px)" },
|
||||
"100%": { opacity: 1, transform: "translateY(0)" },
|
||||
});
|
||||
globalKeyframes(overlayAppearUp, {
|
||||
"0%": { opacity: 0, transform: "translateY(8px)" },
|
||||
"100%": { opacity: 1, transform: "translateY(0)" },
|
||||
});
|
||||
if (isDarkTheme) globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
|
||||
}
|
||||
|
||||
@@ -50,6 +50,11 @@ export function themeInput(outDir: string, themeDir: string, mode: string): { [k
|
||||
return input;
|
||||
}
|
||||
|
||||
function giteaThemeMetaInfo(nameGroup: string[]): string {
|
||||
const displayName = nameGroup.map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
|
||||
return `gitea-theme-meta-info{--theme-display-name:"GitHub ${displayName}";}`; // 不要省略分号, 也不要追加任何变量, 否则 Gitea 不识别
|
||||
}
|
||||
|
||||
const prefix = "theme-github-";
|
||||
|
||||
/**
|
||||
@@ -82,23 +87,28 @@ export function themePlugin(): Plugin {
|
||||
const fileName = `${prefix}${value.fileName}`;
|
||||
const originalFileName = value.originalFileNames.pop();
|
||||
const type = value.type;
|
||||
const source = `${styles}${value.source.toString()}`;
|
||||
// 合并样式文件和主题信息
|
||||
const meta = giteaThemeMetaInfo(key.split(".")[0].split("-"));
|
||||
const source = `${meta}${value.source.toString()}${styles}`;
|
||||
// 添加主题到输出
|
||||
this.emitFile({ name, fileName, source, type, originalFileName });
|
||||
// 自动颜色主题
|
||||
const isDark = key.endsWith("dark.css");
|
||||
const darkName = key.replace("light.css", "dark.css");
|
||||
const lightName = key.replace("dark.css", "light.css");
|
||||
const autoName = `${prefix}${key.replace("dark.css", "auto.css").replace("light.css", "auto.css")}`;
|
||||
const darkName = key.replace("light", "dark");
|
||||
const lightName = darkName.replace("dark", "light");
|
||||
const findTheme = isDark ? lightName : darkName;
|
||||
if (findTheme in bundle) {
|
||||
const autoName = `${prefix}${darkName.replace("dark", "auto")}`;
|
||||
const lightContent = `@import "./${prefix}${lightName}" (prefers-color-scheme: light);`;
|
||||
const darkContent = `@import "./${prefix}${darkName}" (prefers-color-scheme: dark);`;
|
||||
const nameGroup = key.split(".")[0].split("-").slice(0, -1);
|
||||
nameGroup.push("auto");
|
||||
const metaInfo = giteaThemeMetaInfo(nameGroup);
|
||||
this.emitFile({
|
||||
name: autoName,
|
||||
fileName: autoName,
|
||||
type: "asset",
|
||||
source: `${lightContent}\n${darkContent}`,
|
||||
source: `${lightContent}\n${darkContent}\n${metaInfo}`,
|
||||
});
|
||||
}
|
||||
// 删除原始的样式文件, 自动颜色主题因为删除, 永远不会生成两次
|
||||
|
||||
@@ -25,7 +25,6 @@ export const github = {
|
||||
accent: {
|
||||
/** 强调色
|
||||
* @diff 折叠/展开按钮的悬停颜色
|
||||
* @actions `actionViewLeft` 左侧子作业激活伪元素颜色
|
||||
* @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
|
||||
* @navbar `navbarRight` 头像管理员标识背景颜色
|
||||
* @dropdown `dropdown` emoji 的悬停背景色
|
||||
@@ -37,6 +36,7 @@ export const github = {
|
||||
* @repo `repoTopic` 仓库主题标签背景颜色
|
||||
* @actions `actions` 分支标签按钮背景颜色
|
||||
* @actions `actionViewHeader` 分支标签按钮背景颜色
|
||||
* @notification `notification` 通知列表悬停时的背景颜色
|
||||
*/
|
||||
muted: null,
|
||||
},
|
||||
@@ -60,8 +60,10 @@ export const github = {
|
||||
* @input `input` 输入框被选中时的边框颜色
|
||||
* @clone `clone` 克隆地址框被选中时的边框颜色
|
||||
* @issue `comment` 评论框被选中时的边框颜色
|
||||
* @actions `actionViewLeft` 左侧子作业激活伪元素颜色
|
||||
* @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
|
||||
* @dropdown `selectionDropdown` 选择输入框的内部边框颜色
|
||||
* @notification `notification` 通知列表悬停时的左边框颜色
|
||||
*/
|
||||
emphasis: null,
|
||||
},
|
||||
@@ -158,6 +160,10 @@ export const github = {
|
||||
hover: null,
|
||||
},
|
||||
},
|
||||
star: {
|
||||
/** 已标星的星星颜色 */
|
||||
iconColor: null,
|
||||
},
|
||||
},
|
||||
control: {
|
||||
bgColor: {
|
||||
@@ -180,6 +186,7 @@ export const github = {
|
||||
* @issue `issueSidebar` 操作按钮的悬停背景颜色
|
||||
* @issue `issueList` 头部菜单左侧开启关闭菜单的悬停背景颜色
|
||||
* @dashboard `dashboard` 仓库列表项目的悬停背景颜色
|
||||
* @notification `notification` 通知列表的按钮悬停背景颜色
|
||||
*/
|
||||
hover: null,
|
||||
},
|
||||
@@ -190,6 +197,17 @@ export const github = {
|
||||
/** 悬浮阴影
|
||||
* @tippy `tippyBox` 悬浮框阴影
|
||||
* @dropdown `dropdown` 下拉框阴影
|
||||
* @dashboard `dashboard` 仓库/组织切换按钮和列表边框和阴影
|
||||
* @heatmap `heatmap` 热力图阴影
|
||||
* @heatmap `activity` 动态活动阴影
|
||||
*/
|
||||
small: null,
|
||||
},
|
||||
resting: {
|
||||
/** 静止阴影
|
||||
* @button `primaryStyle` 主色调按钮阴影
|
||||
* @button `redButton` 红色按钮悬浮阴影
|
||||
* @setting `button` 红色按钮阴影
|
||||
*/
|
||||
small: null,
|
||||
},
|
||||
|
||||
@@ -114,7 +114,7 @@ export const other = {
|
||||
/** 点击后颜色 */
|
||||
activeBg: "color-reaction-active-bg",
|
||||
},
|
||||
/** 不知道是干啥的 */
|
||||
/** 鼠标悬浮时的提示文本, 比如提交的具体时间, 任务状态等 */
|
||||
tooltip: {
|
||||
text: null,
|
||||
bg: null,
|
||||
|
||||
@@ -33,6 +33,7 @@ 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" },
|
||||
@@ -40,8 +41,13 @@ const customVars = {
|
||||
org: { repolistColumns: "org-repolist-columns", userlistColumns: "org-userlist-columns" },
|
||||
};
|
||||
|
||||
const themeInfo = {
|
||||
version: null,
|
||||
};
|
||||
|
||||
export const themeVars = createGlobalThemeContract(vars, varMapper());
|
||||
export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper());
|
||||
export const customThemeVars = createGlobalThemeContract(customVars, varMapper("custom"));
|
||||
export const themeInfoVars = createGlobalThemeContract(themeInfo, varMapper("theme"));
|
||||
|
||||
export { css } from "@linaria/core";
|
||||
|
||||
@@ -180,7 +180,7 @@ export const actionViewLeft = css`
|
||||
|
||||
&:after {
|
||||
overflow: visible;
|
||||
background: ${themeVars.github.bgColor.accent.emphasis};
|
||||
background: ${themeVars.github.borderColor.accent.emphasis};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
content: "";
|
||||
height: 24px;
|
||||
|
||||
@@ -5,16 +5,29 @@ export const dashboard = css`
|
||||
.page-content.dashboard.feeds {
|
||||
// 仓库列表的仓库/组织切换按钮
|
||||
.ui.two.item.menu {
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
border: unset;
|
||||
background: ${themeVars.color.hover.self};
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
> .item {
|
||||
&:first-child {
|
||||
border-radius: 12px 0 0 12px;
|
||||
background: unset;
|
||||
border-radius: 12px;
|
||||
padding: 6px 12px !important;
|
||||
&.active {
|
||||
background: ${themeVars.color.menu};
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
font-weight: 600;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 12px 12px 0;
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
&:not(.active) {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin: 6px !important;
|
||||
width: calc(50% - 12px);
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -44,6 +57,7 @@ export const dashboard = css`
|
||||
padding: 8px;
|
||||
li {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 8px !important;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
@@ -66,6 +80,7 @@ export const dashboard = css`
|
||||
}
|
||||
`;
|
||||
|
||||
// 导航栏的工单/PR/里程碑仪表板
|
||||
export const dashboardIssues = css`
|
||||
.page-content.dashboard.issues {
|
||||
.list-header {
|
||||
|
||||
@@ -10,7 +10,7 @@ export const branchButton = css`
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
margin-top: 1px;
|
||||
margin-left: auto;
|
||||
margin-right: 16px; // gitea 有 RSS 留出足够的空间
|
||||
margin-right: 20px; // gitea 有 RSS 留出足够的空间
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,6 +22,7 @@ export const syncFork = css`
|
||||
.repo-home-filelist > .ui.message {
|
||||
background: ${themeVars.color.box.header};
|
||||
padding: 8px 8px 8px 16px;
|
||||
margin: 16px 0px;
|
||||
.ui.button {
|
||||
min-width: 96px;
|
||||
}
|
||||
@@ -31,8 +32,13 @@ export const syncFork = css`
|
||||
|
||||
// 仓库文件列表
|
||||
export const repoFiles = css`
|
||||
// 文件列表和提交列表的按钮组
|
||||
.repo-button-row {
|
||||
margin: 16px 0;
|
||||
}
|
||||
.repository.file.list {
|
||||
#repo-files-table {
|
||||
margin: 16px 0;
|
||||
// 头部最后一次提交
|
||||
.repo-file-line {
|
||||
padding-right: 16px;
|
||||
@@ -91,11 +97,13 @@ export const repoFiles = css`
|
||||
#readme {
|
||||
.file-header {
|
||||
background: ${themeVars.color.body};
|
||||
min-height: 48px;
|
||||
padding: 0px 8px !important;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
.file-header-left {
|
||||
padding: 6px 8px !important;
|
||||
padding: 8px !important;
|
||||
// 伪元素宽度等于按钮宽度而不是父元素宽度
|
||||
position: relative;
|
||||
&:hover {
|
||||
@@ -106,7 +114,7 @@ export const repoFiles = css`
|
||||
content: "";
|
||||
background: ${themeVars.github.underlineNav.borderColor.active};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
bottom: -8px;
|
||||
bottom: -7px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
@@ -354,7 +362,8 @@ export const repoFileViewMobile = css`
|
||||
// 仓库代码布局调整, 侧边栏宽度调整
|
||||
export const repoGrid = css`
|
||||
.repo-grid-filelist-sidebar {
|
||||
grid-template-columns: auto 296px;
|
||||
grid-template-columns: auto 312px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
@@ -373,11 +382,15 @@ export const repoSidebarTop = css`
|
||||
}
|
||||
.flex-item {
|
||||
padding: 10px 0 0 0;
|
||||
// 仓库描述本身
|
||||
.flex-item-title {
|
||||
margin-top: 2px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
// 仓库描述内容
|
||||
.flex-item-body {
|
||||
padding: 8px 0 0 0;
|
||||
> .tw-flex:first-child {
|
||||
margin-top: 21px !important;
|
||||
}
|
||||
.repo-description {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const heatmap = css`
|
||||
#user-heatmap {
|
||||
+ .divider:not(.divider-text) {
|
||||
border-color: #0000;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
.total-contributions {
|
||||
left: 25px + 20px;
|
||||
bottom: 0 + 12px;
|
||||
@@ -12,8 +16,8 @@ export const heatmap = css`
|
||||
}
|
||||
.vch__container {
|
||||
padding: 12px 20px;
|
||||
border: 1px solid ${themeVars.color.secondary.self};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
border-radius: 12px;
|
||||
// 覆盖热力图和图例的背景色
|
||||
.vch__day__square,
|
||||
.vch__legend__wrapper rect {
|
||||
@@ -65,16 +69,19 @@ export const heatmap = css`
|
||||
|
||||
// 动态
|
||||
export const activity = css`
|
||||
#activity-feed {
|
||||
.flex-item {
|
||||
.flex-list#activity-feed {
|
||||
border-radius: 12px;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
> .flex-item {
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
&:first-child {
|
||||
padding-top: 6px;
|
||||
}
|
||||
padding: 12px 8px 16px 14px;
|
||||
> .flex-item-main {
|
||||
gap: 8px !important;
|
||||
|
||||
> div:not([class]) {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
relative-time {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
@@ -85,5 +92,9 @@ export const activity = css`
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
> .page.buttons {
|
||||
border-top: 1px solid ${themeVars.color.secondary.self};
|
||||
padding: 12px 0px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -13,6 +13,7 @@ import "./milestones";
|
||||
import "./newrepo";
|
||||
import "./notification";
|
||||
import "./org";
|
||||
import "./packages";
|
||||
import "./release";
|
||||
import "./repo";
|
||||
import "./setting";
|
||||
|
||||
@@ -18,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 {
|
||||
@@ -47,9 +48,6 @@ export const issueList = css`
|
||||
}
|
||||
.issue-list-toolbar-right > .ui.menu {
|
||||
align-items: center;
|
||||
> .item {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
> .ui.button {
|
||||
padding: 0 12px;
|
||||
height: 32px;
|
||||
@@ -154,7 +152,7 @@ export const issueListMobile = css`
|
||||
export const issuePins = css`
|
||||
#issue-pins {
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
margin-bottom: 16px;
|
||||
.issue-card {
|
||||
padding: 16px 12px;
|
||||
.content {
|
||||
@@ -362,6 +360,16 @@ export const comment = css`
|
||||
}
|
||||
`;
|
||||
|
||||
// 评论书写框
|
||||
export const commentForm = css`
|
||||
.repository .comment.form .content .segment {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const dropdown = css`
|
||||
.repository {
|
||||
// Issue/PR 列表下的所有筛选菜单
|
||||
@@ -381,7 +389,7 @@ export const prMerge = css`
|
||||
.repository.view.issue .comment-list .timeline-item.pull-merge-box {
|
||||
// 头像
|
||||
.timeline-avatar {
|
||||
color: ${themeVars.color.text.self} !important;
|
||||
color: ${themeVars.color.white} !important;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@@ -461,6 +469,12 @@ export const prMerge = css`
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
&.no-header {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -469,6 +483,11 @@ export const prMerge = css`
|
||||
export const timeline = css`
|
||||
.repository.view.issue {
|
||||
.comment-list {
|
||||
// 时间线本线
|
||||
.timeline::before {
|
||||
// 不遮挡归档信息框, 归档信息框背景色有透明度时会漏出线
|
||||
height: calc(100% - 62px);
|
||||
}
|
||||
.timeline-item,
|
||||
.timeline-item-group {
|
||||
padding: 16px 0;
|
||||
@@ -521,37 +540,62 @@ const sidebarPadding = {
|
||||
|
||||
// 侧边栏
|
||||
export const issueSidebar = css`
|
||||
.issue-content {
|
||||
gap: 24px;
|
||||
.issue-content-right {
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
.ui.button {
|
||||
// 工单&创建工单&PR页面侧边栏
|
||||
.page-content.repository.issue {
|
||||
.issue-content {
|
||||
gap: 24px;
|
||||
.issue-content-right {
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.ui.form,
|
||||
a.fixed-text.muted,
|
||||
span.text,
|
||||
// 列表项为空时的文字
|
||||
span.item.empty-list,
|
||||
p {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
}
|
||||
.ui.dropdown.select-branch,
|
||||
.ui.form,
|
||||
a.fixed-text.muted,
|
||||
span.text,
|
||||
.ui.watching > div,
|
||||
.ui.depending > div,
|
||||
.flex-text-block,
|
||||
.ui.list,
|
||||
p {
|
||||
${sidebarPadding};
|
||||
}
|
||||
.issue-sidebar-combo {
|
||||
.ui.dropdown > a.fixed-text.muted {
|
||||
padding: 0;
|
||||
.ui.button {
|
||||
font-size: 12px;
|
||||
}
|
||||
.ui.form,
|
||||
a.fixed-text.muted,
|
||||
span.text,
|
||||
// 列表项为空时的文字
|
||||
span.item.empty-list,
|
||||
p {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
}
|
||||
.ui.dropdown.select-branch,
|
||||
.ui.form,
|
||||
a.fixed-text.muted,
|
||||
span.text,
|
||||
.ui.watching > div,
|
||||
.ui.depending > div,
|
||||
.flex-text-block,
|
||||
.ui.list,
|
||||
.toggle-wip,
|
||||
p {
|
||||
${sidebarPadding};
|
||||
}
|
||||
// 允许维护者编辑
|
||||
> .ui.checkbox {
|
||||
margin: 4px 8px;
|
||||
strong {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.issue-sidebar-combo {
|
||||
.ui.dropdown > a.fixed-text.muted {
|
||||
align-items: center;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
text-decoration-line: none;
|
||||
height: 28px;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
.ui.list {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
// 时间追踪
|
||||
> div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
|
||||
align-items: center;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
text-decoration-line: none;
|
||||
@@ -560,62 +604,48 @@ export const issueSidebar = css`
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
.ui.list {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
// 选中日期颜色
|
||||
.ui.form .due-date {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
// 时间追踪
|
||||
> div:not([class]):not([id]) > .ui.dropdown.jump > a.fixed-text.muted {
|
||||
align-items: center;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
text-decoration-line: none;
|
||||
height: 28px;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
.divider {
|
||||
margin: 12px 0 12px 8px;
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
}
|
||||
// 选中日期颜色
|
||||
.ui.form .due-date {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
.divider {
|
||||
margin: 12px 0 12px 8px;
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
// 订阅按钮
|
||||
.ui.watching .ui.button {
|
||||
padding: 0px 8px;
|
||||
height: 28px;
|
||||
svg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
// PIN 按钮
|
||||
.form-fetch-action.single-button-form .ui.button,
|
||||
// 底部操作按钮
|
||||
.ui.show-modal.button {
|
||||
border: 0;
|
||||
background: unset;
|
||||
font-weight: 400;
|
||||
${sidebarPadding};
|
||||
// 好像是浏览器 BUG, 最后不生效, 必须 !important
|
||||
margin: 0 !important;
|
||||
justify-content: left;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
.ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
|
||||
color: ${themeVars.color.red.self};
|
||||
svg {
|
||||
color: ${themeVars.color.red.self};
|
||||
}
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.red.badge.bg};
|
||||
color: ${themeVars.color.red.light};
|
||||
// 订阅按钮
|
||||
.ui.watching .ui.button {
|
||||
padding: 0px 8px;
|
||||
height: 28px;
|
||||
svg {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
// PIN 按钮
|
||||
.form-fetch-action.single-button-form .ui.button,
|
||||
// 底部操作按钮
|
||||
.ui.show-modal.button {
|
||||
border: 0;
|
||||
background: unset;
|
||||
font-weight: 400;
|
||||
${sidebarPadding};
|
||||
// 好像是浏览器 BUG, 最后不生效, 必须 !important
|
||||
margin: 0 !important;
|
||||
justify-content: left;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
.ui.show-modal.button[data-modal="#sidebar-delete-issue"] {
|
||||
color: ${themeVars.color.red.self};
|
||||
svg {
|
||||
color: ${themeVars.color.red.self};
|
||||
}
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.red.badge.bg};
|
||||
color: ${themeVars.color.red.light};
|
||||
svg {
|
||||
color: ${themeVars.color.red.light};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,6 +57,122 @@ export const notification = css`
|
||||
}
|
||||
}
|
||||
}
|
||||
// 关注列表
|
||||
> .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};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
124
styles/components/packages.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 组织/仓库的软件包列表(包含用户但未测试)
|
||||
export const packagesList = css`
|
||||
.page-content.packages {
|
||||
// 这里必须要用 >, 否则会影响到软件包详细信息页的样式
|
||||
> .ui.container > div:not([class]) {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin-top: 16px;
|
||||
.flex-list {
|
||||
border-top: 1px solid ${themeVars.color.light.border};
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.flex-item {
|
||||
padding: 16px;
|
||||
.flex-item-main {
|
||||
.flex-item-title {
|
||||
gap: 8px;
|
||||
> a {
|
||||
min-height: 25px;
|
||||
}
|
||||
// 软件包类型的标签
|
||||
.ui.label {
|
||||
gap: 4px;
|
||||
padding: 3px 6px;
|
||||
min-height: 24.5px;
|
||||
background-color: unset;
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
color: ${themeVars.color.primary.self};
|
||||
}
|
||||
}
|
||||
.flex-item-body {
|
||||
font-size: 12px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 软件包详细信息页
|
||||
export const packagesDetail = css`
|
||||
.page-content.packages {
|
||||
.issue-title-header > div {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
.issue-content {
|
||||
.issue-content-left {
|
||||
.ui.top.attached.header {
|
||||
font-size: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
.ui.attached.segment {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 16px;
|
||||
.ui.table,
|
||||
.ui.form .field > label {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
.ui.form .field > label {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.markup {
|
||||
color: ${themeVars.color.text.self};
|
||||
pre {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
+ .ui.top.attached.header {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.issue-content-right {
|
||||
border: 0;
|
||||
padding: 0px 16px;
|
||||
> strong {
|
||||
font-size: 16px;
|
||||
}
|
||||
> .divider {
|
||||
margin: 16px 0px;
|
||||
}
|
||||
// 详情
|
||||
> .ui.relaxed.list {
|
||||
margin: 16px 0px;
|
||||
.item {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
svg {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
// 应该只选中版本中的 a 标签
|
||||
&.tw-flex {
|
||||
justify-content: space-between;
|
||||
> a {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: 25px;
|
||||
font-size: 12px;
|
||||
padding: 0px 6px;
|
||||
min-height: 20px;
|
||||
flex: none !important;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
// 不知道什么东西
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -19,6 +19,27 @@ export const releaseTagMenu = css`
|
||||
}
|
||||
`;
|
||||
|
||||
// 顶部右侧按钮组
|
||||
export const rightButton = css`
|
||||
.page-content.repository {
|
||||
&.releases,
|
||||
&.tags {
|
||||
.ui.small.button {
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
box-shadow: none;
|
||||
color: ${themeVars.color.text.light.self};
|
||||
padding: 5px 16px;
|
||||
min-height: auto;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 标签页样式
|
||||
export const tags = css`
|
||||
.page-content.repository.tags {
|
||||
@@ -41,101 +62,108 @@ 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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
// 右侧发布详细信息
|
||||
.segment.detail {
|
||||
padding: 16px;
|
||||
.svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
// 标题
|
||||
.release-list-title {
|
||||
font-size: 32px;
|
||||
gap: 16px;
|
||||
}
|
||||
// 提交信息
|
||||
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;
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
.attachment-list {
|
||||
margin-top: 16px;
|
||||
.item {
|
||||
align-items: center;
|
||||
line-height: 17px;
|
||||
padding: 8px 16px;
|
||||
.flex-text-inline {
|
||||
gap: 8px;
|
||||
// 分支选择按钮
|
||||
.ui.button.branch-dropdown-button {
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 3px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 右侧发布详细信息
|
||||
.segment.detail {
|
||||
padding: 16px;
|
||||
.svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
// 标题
|
||||
.release-list-title {
|
||||
font-size: 32px;
|
||||
gap: 16px;
|
||||
}
|
||||
// 提交信息
|
||||
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;
|
||||
}
|
||||
// 只选中左侧文件名称
|
||||
strong.flex-text-inline:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.attachment-right-info {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
.svg {
|
||||
height: 28px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -145,23 +173,3 @@ export const releases = css`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 顶部右侧按钮组
|
||||
export const rightButton = css`
|
||||
.page-content.repository {
|
||||
&.releases,
|
||||
&.tags {
|
||||
.ui.small.button {
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
color: ${themeVars.color.text.light.self};
|
||||
padding: 5px 16px;
|
||||
min-height: auto;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -25,7 +25,7 @@ export const button = css`
|
||||
color: ${themeVars.color.text.light.self};
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
@@ -57,12 +57,19 @@ export const button = css`
|
||||
}
|
||||
}
|
||||
// 管理员设置界面下的自定义主色调按钮
|
||||
.admin-setting-content .ui.primary.button {
|
||||
${tinyStyle}
|
||||
padding: 5px 16px;
|
||||
line-height: 22px;
|
||||
&:hover {
|
||||
${tinyHoverStyle}
|
||||
.admin-setting-content {
|
||||
.ui.primary.button {
|
||||
${tinyStyle}
|
||||
padding: 5px 16px;
|
||||
line-height: 22px;
|
||||
&:hover {
|
||||
${tinyHoverStyle}
|
||||
}
|
||||
}
|
||||
.ui.red.button {
|
||||
box-shadow: ${themeVars.github.shadow.resting.small};
|
||||
padding: 5px 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -40,6 +40,15 @@ export const signIn = css`
|
||||
.button {
|
||||
height: 40px;
|
||||
}
|
||||
.divider.divider-text {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
#oauth2-login-navigator-inner {
|
||||
gap: 8px;
|
||||
.ui.button svg {
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui.top.attached.header.segment {
|
||||
font-size: 14px;
|
||||
|
||||
27
styles/public/animation.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { overlayAppearDown, overlayAppearUp } from "src/core/theme";
|
||||
import { css } from "src/types/vars";
|
||||
|
||||
export const keyframe = css`
|
||||
// 向下出现动画
|
||||
@keyframes ${overlayAppearDown} {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
// 向上出现动画
|
||||
@keyframes ${overlayAppearUp} {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -4,6 +4,7 @@ export const primaryStyle = {
|
||||
color: themeVars.github.button.primary.fgColor.rest,
|
||||
backgroundColor: themeVars.github.button.primary.bgColor.rest,
|
||||
borderColor: themeVars.github.button.primary.borderColor.rest,
|
||||
boxShadow: themeVars.github.shadow.resting.small,
|
||||
};
|
||||
|
||||
export const primaryHoverStyle = {
|
||||
@@ -27,7 +28,7 @@ export const baseButton = css`
|
||||
}
|
||||
// 主色调按钮保持白色
|
||||
.ui.primary.buttons .button svg {
|
||||
color: ${themeVars.color.text.self};
|
||||
color: ${themeVars.color.white};
|
||||
}
|
||||
.ui.primary {
|
||||
&.button,
|
||||
@@ -45,6 +46,7 @@ export const baseButton = css`
|
||||
background-color: ${themeVars.color.button};
|
||||
color: ${themeVars.color.text.self};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
color: ${themeVars.color.text.self};
|
||||
@@ -85,6 +87,7 @@ export const redButton = css`
|
||||
color: ${themeVars.github.button.danger.fgColor.hover};
|
||||
background-color: ${themeVars.github.button.danger.bgColor.hover};
|
||||
border-color: ${themeVars.github.button.danger.borderColor.hover};
|
||||
box-shadow: ${themeVars.github.shadow.resting.small};
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -97,13 +100,19 @@ export const fixButtonHeight = css`
|
||||
min-height: 26px;
|
||||
height: 32px;
|
||||
}
|
||||
// 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
|
||||
.ui.labeled.button > .label,
|
||||
.ui.ui.ui.ui.small.button.compact {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
// 修复仓库页仓库操作按钮高度对齐和修正
|
||||
.repo-button-row .ui.button {
|
||||
min-height: 32px;
|
||||
}
|
||||
.ui.tiny.buttons .button,
|
||||
// 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
|
||||
.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;
|
||||
}
|
||||
@@ -114,4 +123,9 @@ export const fixButton = css`
|
||||
.ui.ui.ui.ui.small.button {
|
||||
z-index: 0;
|
||||
}
|
||||
// 代码复制按钮
|
||||
.ui.button.code-copy {
|
||||
padding: 4px 6px;
|
||||
min-height: 28px;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { animationDown, animationUp } from "src/core/theme";
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { fallbackVar } from "src/functions";
|
||||
import { css, customThemeVars, otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { activeItemAfterStyle } from "styles/public/menu";
|
||||
|
||||
export const dropdown = css`
|
||||
@@ -65,18 +66,26 @@ export const dropdown = css`
|
||||
// 向下弹出的下拉菜单向下偏移
|
||||
.ui.dropdown:not(.upward),
|
||||
.ui.menu .ui.dropdown:not(.upward) {
|
||||
.menu {
|
||||
> .menu {
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
}
|
||||
// 向上弹出的下拉菜单向上偏移
|
||||
.ui.dropdown.upward,
|
||||
.ui.menu .ui.dropdown.upward {
|
||||
.menu {
|
||||
> .menu {
|
||||
animation: ${animationUp};
|
||||
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,
|
||||
@@ -194,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};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
// tslint:disable:ordered-imports
|
||||
// 组件导入有顺序, 禁止插件优化
|
||||
import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
|
||||
import "./animation"; // 动画效果
|
||||
import "./transition"; // 过渡效果
|
||||
import "./text"; // 文本或 SVG 的基本颜色
|
||||
import "./button"; // 按钮
|
||||
@@ -13,4 +14,4 @@ import "./modal"; // 弹窗
|
||||
import "./tippy"; // 提示框
|
||||
import "./navbar"; // 导航栏
|
||||
import "./attached"; // 附加样式
|
||||
import "./other"; // 其他样式
|
||||
import "./other"; // 其他样式
|
||||
|
||||
@@ -35,7 +35,8 @@ export const input = css`
|
||||
height: 32px;
|
||||
}
|
||||
// 由于输入框高度, 需要输入框在表单中垂直居中
|
||||
.ui.form {
|
||||
// 管理员页面仓库搜索表单
|
||||
.ui.form#repo-search-form {
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -84,6 +84,8 @@ export const shaLabel = css`
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
// 仪表盘页的提交 SHA 标签居中对齐
|
||||
margin-top: 2px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.label.hoverBg};
|
||||
}
|
||||
@@ -186,19 +188,3 @@ export const repoLabel = css`
|
||||
font-size: 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
// 软件包列表
|
||||
export const packagesLabel = css`
|
||||
.page-content {
|
||||
&.packages {
|
||||
> .ui.container > div > .flex-list {
|
||||
// 软件包类型的标签
|
||||
.ui.label {
|
||||
background-color: unset;
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
color: ${themeVars.color.primary.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -148,6 +148,7 @@ export const secondaryMenu = css`
|
||||
padding: 0px 12px;
|
||||
height: 32px;
|
||||
font-weight: 500;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
|
||||
@@ -201,6 +202,7 @@ export const paginationMenu = css`
|
||||
background-color: unset;
|
||||
border: 0;
|
||||
gap: 4px;
|
||||
min-height: fit-content;
|
||||
.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
min-width: 32px;
|
||||
@@ -236,3 +238,55 @@ export const paginationMenu = css`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 单行双选项菜单
|
||||
export const smallCompactMenu = css`
|
||||
// 订阅/关注切换菜单(应只选中订阅/关注页面, 不能选中通知页面)
|
||||
.page-content.user.notification > .ui.container:has(.flex-list),
|
||||
// 里程碑/标签切换菜单(里程碑页)
|
||||
.page-content.repository.milestones .list-header,
|
||||
// 里程碑/标签切换菜单(新建里程碑页)
|
||||
.page-content.repository.new.milestone .issue-navbar,
|
||||
// 里程碑/标签切换菜单(标签页)
|
||||
.page-content.repository.labels .issue-navbar {
|
||||
.ui.compact.small.menu.small-menu-items {
|
||||
background: ${themeVars.color.hover.self} !important;
|
||||
border: 0;
|
||||
font-size: 14px;
|
||||
gap: 8px;
|
||||
height: 32px;
|
||||
min-height: 32px !important;
|
||||
> .item {
|
||||
background: unset !important;
|
||||
border: 1px solid ${themeVars.color.hover.self};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 12px !important;
|
||||
&.active {
|
||||
background: ${themeVars.color.menu} !important;
|
||||
border-color: ${themeVars.color.light.border};
|
||||
font-weight: 600;
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
&:not(.active) {
|
||||
top: 4px;
|
||||
padding: 4px 12px !important;
|
||||
height: calc(100% - 8px);
|
||||
position: relative;
|
||||
// 该方案只适用于 2 个 item 的情况
|
||||
// left / right 数值为 gap 数值的一半
|
||||
&:first-child {
|
||||
left: 4px;
|
||||
}
|
||||
&:last-child {
|
||||
right: 4px;
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -121,3 +121,10 @@ export const navbarRight = css`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 二级导航栏
|
||||
export const secondaryNav = css`
|
||||
.page-content > :first-child.secondary-nav {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { css } from "src/types/vars";
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
// 一些列表头, 比如工单的搜索标签里程碑栏
|
||||
export const listHeader = css`
|
||||
@@ -7,3 +7,10 @@ export const listHeader = css`
|
||||
align-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
// 已标星的图标
|
||||
export const star = css`
|
||||
.octicon-star-fill {
|
||||
color: ${themeVars.github.button.star.iconColor} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -5,16 +5,19 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
export const tippyBox = css`
|
||||
.tippy-box {
|
||||
margin-top: -3px;
|
||||
border-radius: 12px;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
overflow: hidden;
|
||||
animation: ${animationDown};
|
||||
// 边框线同步 github 样式
|
||||
// 克隆菜单和PR提示框为 default
|
||||
&[data-theme="default"],
|
||||
// 带标题的提示框 (Runner信息)
|
||||
&[data-theme="box-with-header"] {
|
||||
border: unset;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
}
|
||||
// 带标题的提示框 (Runner信息)
|
||||
&[data-theme="default"] {
|
||||
border-radius: 12px;
|
||||
}
|
||||
&[data-theme="box-with-header"] {
|
||||
.tippy-content {
|
||||
background-color: ${themeVars.color.menu};
|
||||
@@ -26,7 +29,7 @@ export const tippyBox = css`
|
||||
// 差异对比中文件路径行右侧的三个点菜单
|
||||
&[data-theme="menu"] {
|
||||
.tippy-content {
|
||||
padding: 0.5rem;
|
||||
padding: 8px;
|
||||
.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
&:hover {
|
||||
@@ -35,5 +38,13 @@ export const tippyBox = css`
|
||||
}
|
||||
}
|
||||
}
|
||||
// 专门用于提示信息的提示框, 比如提交的具体时间, 任务状态等
|
||||
&[data-theme="tooltip"] {
|
||||
.tippy-content {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { defineTheme, type Chroma, type ThemeColor } from "src";
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme, themeVars, type Chroma } from "src";
|
||||
import { github2ThemeColor, type GithubColor } from "src/core/github";
|
||||
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
|
||||
import { darkGithubColors } from "themes/dark";
|
||||
@@ -28,8 +32,12 @@ export const colorblindDarkGithubColors: GithubColor = {
|
||||
success: { emphasis: "#1f6feb" },
|
||||
},
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#2a7aef" } },
|
||||
primary: {
|
||||
fgColor: { accent: "#58a6ff", rest: "#ffffff" },
|
||||
bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#2a7aef" },
|
||||
},
|
||||
danger: { fgColor: { rest: "#f0883e", hover: "#ffffff" }, bgColor: { hover: "#9b4215" } },
|
||||
star: darkGithubColors.button.star,
|
||||
},
|
||||
control: darkGithubColors.control,
|
||||
shadow: darkGithubColors.shadow,
|
||||
@@ -68,7 +76,7 @@ export const colorblindDarkPrettylights: prettylightsColor = {
|
||||
},
|
||||
};
|
||||
|
||||
export const colorblindDarkColors: ThemeColor = github2ThemeColor(colorblindDarkGithubColors);
|
||||
export const colorblindDarkColors = github2ThemeColor(colorblindDarkGithubColors);
|
||||
export const colorblindDarkChroma: Chroma = prettylights2Chroma(colorblindDarkPrettylights);
|
||||
|
||||
export default defineTheme(colorblindDarkColors, colorblindDarkChroma);
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { defineTheme, type Chroma, type ThemeColor } from "src";
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme, themeVars, type Chroma } from "src";
|
||||
import { github2ThemeColor, type GithubColor } from "src/core/github";
|
||||
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
|
||||
import { lightGithubColors } from "themes/light";
|
||||
@@ -28,8 +32,12 @@ export const colorblindLightGithubColors: GithubColor = {
|
||||
success: { emphasis: "#0969da" },
|
||||
},
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#0864d1" } },
|
||||
primary: {
|
||||
fgColor: { accent: "#0969da", rest: "#ffffff" },
|
||||
bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#0864d1" },
|
||||
},
|
||||
danger: { fgColor: { rest: "#bc4c00", hover: "#ffffff" }, bgColor: { hover: "#bc4c00" } },
|
||||
star: lightGithubColors.button.star,
|
||||
},
|
||||
control: lightGithubColors.control,
|
||||
shadow: lightGithubColors.shadow,
|
||||
@@ -68,7 +76,7 @@ export const colorblindLightPrettylights: prettylightsColor = {
|
||||
},
|
||||
};
|
||||
|
||||
export const colorblindLightColors: ThemeColor = github2ThemeColor(colorblindLightGithubColors);
|
||||
export const colorblindLightColors = github2ThemeColor(colorblindLightGithubColors);
|
||||
export const colorblindLightChroma: Chroma = prettylights2Chroma(colorblindLightPrettylights);
|
||||
|
||||
export default defineTheme(colorblindLightColors, colorblindLightChroma);
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
import { defineTheme, type ThemeColor } from "src";
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme, themeVars } from "src";
|
||||
import { github2ThemeColor, type GithubColor } from "src/core/github";
|
||||
|
||||
export const darkGithubColors: GithubColor = {
|
||||
isDarkTheme: true,
|
||||
display: {
|
||||
blue: { fgColor: "#4493f8" },
|
||||
brown: { fgColor: "#b69a6d" },
|
||||
cyan: { fgColor: "#07ace4" },
|
||||
indigo: { fgColor: "#9899ec" },
|
||||
@@ -32,6 +37,7 @@ export const darkGithubColors: GithubColor = {
|
||||
success: "#3fb950",
|
||||
black: "#010409",
|
||||
white: "#ffffff",
|
||||
onEmphasis: "#ffffff",
|
||||
},
|
||||
bgColor: {
|
||||
accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
|
||||
@@ -39,6 +45,7 @@ export const darkGithubColors: GithubColor = {
|
||||
danger: { muted: "#f851491a" },
|
||||
default: "#0d1117",
|
||||
done: { emphasis: "#8957e5" },
|
||||
emphasis: "#3d444d",
|
||||
muted: "#151b23",
|
||||
neutral: { muted: "#656c7633" },
|
||||
success: { emphasis: "#238636", muted: "#2ea04326" },
|
||||
@@ -54,14 +61,18 @@ export const darkGithubColors: GithubColor = {
|
||||
translucent: "#ffffff26",
|
||||
},
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#29903b" } },
|
||||
primary: {
|
||||
fgColor: { accent: "#3fb950", rest: "#ffffff" },
|
||||
bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#29903b" },
|
||||
},
|
||||
danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
|
||||
star: { iconColor: "#e3b341" },
|
||||
},
|
||||
control: {
|
||||
bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
|
||||
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
|
||||
},
|
||||
shadow: { floating: { small: "#01040966" } },
|
||||
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
|
||||
overlay: { backdrop: { bgColor: "#21283066" } },
|
||||
underlineNav: { borderColor: { active: "#f78166" } },
|
||||
contribution: {
|
||||
@@ -72,6 +83,6 @@ export const darkGithubColors: GithubColor = {
|
||||
},
|
||||
};
|
||||
|
||||
export const darkColors: ThemeColor = github2ThemeColor(darkGithubColors);
|
||||
export const darkColors = github2ThemeColor(darkGithubColors);
|
||||
|
||||
export default defineTheme(darkColors);
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
import { defineTheme, type ThemeColor } from "src";
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme, themeVars } from "src";
|
||||
import { github2ThemeColor, type GithubColor } from "src/core/github";
|
||||
|
||||
export const lightGithubColors: GithubColor = {
|
||||
isDarkTheme: false,
|
||||
display: {
|
||||
blue: { fgColor: "#0969da" },
|
||||
brown: { fgColor: "#755f43" },
|
||||
cyan: { fgColor: "#006a80" },
|
||||
indigo: { fgColor: "#494edf" },
|
||||
@@ -32,6 +37,7 @@ export const lightGithubColors: GithubColor = {
|
||||
success: "#1a7f37",
|
||||
black: "#1f2328",
|
||||
white: "#ffffff",
|
||||
onEmphasis: "#ffffff",
|
||||
},
|
||||
bgColor: {
|
||||
accent: { emphasis: "#0969da", muted: "#ddf4ff" },
|
||||
@@ -39,6 +45,7 @@ export const lightGithubColors: GithubColor = {
|
||||
danger: { muted: "#ffebe9" },
|
||||
default: "#ffffff",
|
||||
done: { emphasis: "#8250df" },
|
||||
emphasis: "#25292e",
|
||||
muted: "#f6f8fa",
|
||||
neutral: { muted: "#818b981f" },
|
||||
success: { emphasis: "#1f883d", muted: "#dafbe1" },
|
||||
@@ -54,14 +61,18 @@ export const lightGithubColors: GithubColor = {
|
||||
translucent: "#1f232826",
|
||||
},
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#1c8139" } },
|
||||
primary: {
|
||||
fgColor: { accent: "#1a7f37", rest: "#ffffff" },
|
||||
bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#1c8139" },
|
||||
},
|
||||
danger: { fgColor: { rest: "#d1242f", hover: "#ffffff" }, bgColor: { hover: "#cf222e" } },
|
||||
star: { iconColor: "#eac54f" },
|
||||
},
|
||||
control: {
|
||||
bgColor: { active: "#e6eaef", hover: "#eff2f5", rest: "#f6f8fa" },
|
||||
transparent: { bgColor: { active: "#818b9826", hover: "#818b981a", selected: "#818b9826" } },
|
||||
},
|
||||
shadow: { floating: { small: "#25292e0a" } },
|
||||
shadow: { floating: { small: "#25292e0a" }, resting: { small: "#1f23280f" } },
|
||||
overlay: { backdrop: { bgColor: "#c8d1da66" } },
|
||||
underlineNav: { borderColor: { active: "#fd8c73" } },
|
||||
contribution: {
|
||||
@@ -72,6 +83,6 @@ export const lightGithubColors: GithubColor = {
|
||||
},
|
||||
};
|
||||
|
||||
export const lightColors: ThemeColor = github2ThemeColor(lightGithubColors);
|
||||
export const lightColors = github2ThemeColor(lightGithubColors);
|
||||
|
||||
export default defineTheme(lightColors);
|
||||
|
||||
26
themes/pink-dark.css.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme } from "src";
|
||||
import { display2GithubColor, type DisplayColor } from "src/core/display";
|
||||
import { github2ThemeColor } from "src/core/github";
|
||||
import { darkGithubColors } from "themes/dark";
|
||||
|
||||
export const pinkDarkDisplayColors: DisplayColor = {
|
||||
num0: "#2d1524",
|
||||
num1: "#451c35",
|
||||
num2: "#65244a",
|
||||
num3: "#842a5d",
|
||||
num4: "#ac2f74",
|
||||
num5: "#d34591",
|
||||
num6: "#e57bb2",
|
||||
num7: "#ec8dbd",
|
||||
num8: "#f4a9cd",
|
||||
num9: "#f9bed9",
|
||||
};
|
||||
|
||||
export const pinkDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, darkGithubColors);
|
||||
export const pinkDarkColors = github2ThemeColor(pinkDarkGithubColors);
|
||||
|
||||
export default defineTheme(pinkDarkColors);
|
||||
26
themes/pink-light.css.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme } from "src";
|
||||
import { display2GithubColor, type DisplayColor } from "src/core/display";
|
||||
import { github2ThemeColor } from "src/core/github";
|
||||
import { lightGithubColors } from "themes/light";
|
||||
|
||||
export const pinkLightDisplayColors: DisplayColor = {
|
||||
num0: "#ffe5f1",
|
||||
num1: "#fdc9e2",
|
||||
num2: "#f8a5cf",
|
||||
num3: "#f184bc",
|
||||
num4: "#e55da5",
|
||||
num5: "#ce2c85",
|
||||
num6: "#b12f79",
|
||||
num7: "#8e2e66",
|
||||
num8: "#6e2b53",
|
||||
num9: "#4d233d",
|
||||
};
|
||||
|
||||
export const pinkLightGithubColors = display2GithubColor(pinkLightDisplayColors, lightGithubColors);
|
||||
export const pinkLightColors = github2ThemeColor(pinkLightGithubColors);
|
||||
|
||||
export default defineTheme(pinkLightColors);
|
||||
14
themes/pink-soft-dark.css.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme } from "src";
|
||||
import { display2GithubColor } from "src/core/display";
|
||||
import { github2ThemeColor } from "src/core/github";
|
||||
import { softDarkGithubColors } from "themes/soft-dark";
|
||||
import { pinkDarkDisplayColors } from "./pink-dark.css";
|
||||
|
||||
export const pinkSoftDarkGithubColors = display2GithubColor(pinkDarkDisplayColors, softDarkGithubColors, true);
|
||||
export const pinkSoftDarkColors = github2ThemeColor(pinkSoftDarkGithubColors);
|
||||
|
||||
export default defineTheme(pinkSoftDarkColors);
|
||||
@@ -1,4 +1,8 @@
|
||||
import { defineTheme, type Chroma, type ThemeColor } from "src";
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme, themeVars, type Chroma } from "src";
|
||||
import { github2ThemeColor, type GithubColor } from "src/core/github";
|
||||
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
|
||||
import { darkGithubColors } from "themes/dark";
|
||||
@@ -27,6 +31,7 @@ export const softDarkGithubColors: GithubColor = {
|
||||
success: "#57ab5a",
|
||||
black: "#010409",
|
||||
white: "#cdd9e5",
|
||||
onEmphasis: "#ffffff",
|
||||
},
|
||||
bgColor: {
|
||||
accent: { emphasis: "#316dca", muted: "#4184e41a" },
|
||||
@@ -34,6 +39,7 @@ export const softDarkGithubColors: GithubColor = {
|
||||
danger: { muted: "#e5534b1a" },
|
||||
default: "#212830",
|
||||
done: { emphasis: "#8256d0" },
|
||||
emphasis: "#3d444d",
|
||||
muted: "#262c36",
|
||||
neutral: { muted: "#656c7633" },
|
||||
success: { emphasis: "#347d39", muted: "#46954a26" },
|
||||
@@ -49,14 +55,18 @@ export const softDarkGithubColors: GithubColor = {
|
||||
translucent: "#cdd9e526",
|
||||
},
|
||||
button: {
|
||||
primary: { fgColor: { rest: "#ffffff" }, bgColor: { hover: "#3b8640" } },
|
||||
primary: {
|
||||
fgColor: { accent: "#57ab5a", rest: "#ffffff" },
|
||||
bgColor: { rest: themeVars.github.bgColor.success.emphasis, hover: "#3b8640" },
|
||||
},
|
||||
danger: { fgColor: { rest: "#ea5c53", hover: "#ffffff" }, bgColor: { hover: "#ad2e2c" } },
|
||||
star: { iconColor: "#daaa3f" },
|
||||
},
|
||||
control: {
|
||||
bgColor: { active: "#3d444d", hover: "#2f3742", rest: "#2a313c" },
|
||||
transparent: { bgColor: { active: "#656c7633", hover: "#656c7626", selected: "#656c761a" } },
|
||||
},
|
||||
shadow: { floating: { small: "#01040966" } },
|
||||
shadow: { floating: { small: "#01040966" }, resting: { small: "#01040999" } },
|
||||
overlay: { backdrop: { bgColor: "#262c3666" } },
|
||||
underlineNav: { borderColor: { active: "#ec775c" } },
|
||||
contribution: {
|
||||
@@ -97,7 +107,7 @@ export const softDarkPrettylights: prettylightsColor = {
|
||||
},
|
||||
};
|
||||
|
||||
export const softDarkColors: ThemeColor = github2ThemeColor(softDarkGithubColors);
|
||||
export const softDarkColors = github2ThemeColor(softDarkGithubColors);
|
||||
export const softDarkChroma: Chroma = prettylights2Chroma(softDarkPrettylights);
|
||||
|
||||
export default defineTheme(softDarkColors, softDarkChroma);
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { defineTheme, type Chroma, type ThemeColor } from "src";
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme, type Chroma } from "src";
|
||||
import { darkPrettylights } from "src/core/chroma";
|
||||
import { github2ThemeColor, type GithubColor } from "src/core/github";
|
||||
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
|
||||
@@ -39,7 +43,7 @@ export const tritanopiaDarkPrettylights: prettylightsColor = {
|
||||
},
|
||||
};
|
||||
|
||||
export const tritanopiaDarkColors: ThemeColor = github2ThemeColor(tritanopiaDarkGithubColors);
|
||||
export const tritanopiaDarkColors = github2ThemeColor(tritanopiaDarkGithubColors);
|
||||
export const tritanopiaDarkChroma: Chroma = prettylights2Chroma(tritanopiaDarkPrettylights);
|
||||
|
||||
export default defineTheme(tritanopiaDarkColors, tritanopiaDarkChroma);
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { defineTheme, type Chroma, type ThemeColor } from "src";
|
||||
/**
|
||||
* @author lutinglt
|
||||
*/
|
||||
|
||||
import { defineTheme, type Chroma } from "src";
|
||||
import { lightPrettylights } from "src/core/chroma";
|
||||
import { github2ThemeColor, type GithubColor } from "src/core/github";
|
||||
import { prettylights2Chroma, type prettylightsColor } from "src/core/prettylights";
|
||||
@@ -39,7 +43,7 @@ export const tritanopiaLightPrettylights: prettylightsColor = {
|
||||
},
|
||||
};
|
||||
|
||||
export const tritanopiaLightColors: ThemeColor = github2ThemeColor(tritanopiaLightGithubColors);
|
||||
export const tritanopiaLightColors = github2ThemeColor(tritanopiaLightGithubColors);
|
||||
export const tritanopiaLightChroma: Chroma = prettylights2Chroma(tritanopiaLightPrettylights);
|
||||
|
||||
export default defineTheme(tritanopiaLightColors, tritanopiaLightChroma);
|
||||
|
||||