Compare commits

..

110 Commits

Author SHA1 Message Date
lutinglt
c76a8ba7b6 菜单项默认颜色更改 2025-06-30 23:38:02 +08:00
lutinglt
1484496dfb 更新变量和注释 2025-06-30 23:29:05 +08:00
lutinglt
33fbac3c45 action 页面同步 2025-06-30 00:11:27 +08:00
lutinglt
3d34619d79 仅统计源码编程语言 2025-06-29 00:02:26 +08:00
lutinglt
7b363e3e9c diff 细节完善 2025-06-28 23:50:48 +08:00
lutinglt
e113d1c603 diff 页面同步 & Github 全局变量 2025-06-28 23:19:37 +08:00
lutinglt
d2be94ee27 更换themePlugin触发钩子 2025-06-28 19:50:38 +08:00
lutinglt
b4a0c93221 update vite 2025-06-28 19:45:10 +08:00
lutinglt
df6eb8fef8 提取 github 变量 2025-06-28 19:36:06 +08:00
lutinglt
a8bcd45791 更新注释 2025-06-28 16:32:53 +08:00
lutinglt
94c7f81bbf 更新变量注释和颜色分类 2025-06-28 16:32:16 +08:00
lutinglt
59497be05e 添加开发插件建议&.css.tsx兼容插件提示 2025-06-28 14:17:33 +08:00
lutinglt
bedb8befa7 添加开发环境变量 2025-06-28 11:58:36 +08:00
lutinglt
5ae1f2f634 颜色变量计算&颜色主题迁移 2025-06-27 22:55:59 +08:00
lutinglt
16298f2b11 声明全部颜色变量 2025-06-27 01:13:52 +08:00
lutinglt
b5dc00e853 颜色分类 2025-06-24 22:54:16 +08:00
lutinglt
ac17e45069 CI 构建主题 2025-06-24 20:50:12 +08:00
lutinglt
f65338b227 添加版本脚本 2025-06-24 20:48:27 +08:00
lutinglt
711e01b66c src 结构调整, 添加 functions 2025-06-24 20:31:12 +08:00
lutinglt
9a070c5726 添加 sass 预处理 2025-06-24 13:52:03 +08:00
lutinglt
77fe50a4cc test 2025-06-23 01:32:46 +08:00
lutinglt
0f9ee02a7d test 2025-06-23 01:32:02 +08:00
lutinglt
55ac3af9b7 重构基本框架 2025-06-23 01:28:13 +08:00
lutinglt
36a1707b3e 分支按钮高度 2025-06-10 18:04:08 +08:00
lutinglt
2207d56a4e 1.24.0 2025-06-10 17:34:09 +08:00
lutinglt
8e1a01e444 修改编译流程 2025-02-22 10:18:32 +08:00
lutinglt
4365603d56 代码结构调整 2025-02-22 09:53:29 +08:00
lutinglt
8def32e5b9 调整代码结构以支持多种风格 2025-02-21 21:47:54 +08:00
lutinglt
ba895a3f31 Update README.md 2025-02-19 22:38:52 +08:00
lutinglt
04896a3395 支持nodejs 2025-02-19 22:37:25 +08:00
lutinglt
69e0c063de .editorconfig 2025-02-19 12:05:24 +08:00
lutinglt
ce462ff305 Update 2025-02-19 11:53:36 +08:00
lutinglt
af2c71b607 代码布局调整 2025-02-19 11:41:33 +08:00
lutinglt
6a17010a5f 就这样吧 2025-02-19 08:36:57 +08:00
lutinglt
49812f0ee0 Ful佬说的对 2025-02-17 22:22:28 +08:00
lutinglt
5bba897e11 Ful佬说的对 2025-02-17 22:13:15 +08:00
lutinglt
bed93d8777 简化 2025-02-14 00:40:18 +08:00
lutinglt
d83f8e9e10 版本号更改 2025-02-13 01:38:47 +08:00
lutinglt
3ab8c04dee deno 2025-02-13 01:38:00 +08:00
lutinglt
14d79f4e9d deno@v2 2025-02-13 01:32:29 +08:00
lutinglt
d95b59512b deno? 2025-02-13 01:29:08 +08:00
lutinglt
79a1049090 修复工作流 2025-02-13 01:24:45 +08:00
lutinglt
34f72da8b5 nodejs->deno 2025-02-13 01:13:32 +08:00
lutinglt
c0d181278f 发布流程简化 2025-02-12 14:10:25 +08:00
lutinglt
b8d0e43074 Action执行时间位置优化 2025-02-11 12:49:34 +08:00
lutinglt
79f305ee1e 仓库导航栏文字颜色优化 2025-02-11 12:47:07 +08:00
lutinglt
9acfd21a9d Update README.md 2025-02-11 11:11:51 +08:00
lutinglt
a897230f2c 修复英文下Action页面执行时间换行&菜单文字粗细样式优化 2025-02-11 11:06:44 +08:00
lutinglt
1cad42f701 Action工作流页面同步 2025-02-10 22:05:27 +08:00
lutinglt
c5a1c1bdf5 父级目录高度修复 2025-02-10 17:44:50 +08:00
lutinglt
a4958a3539 按钮字体粗细调整 2025-02-10 13:46:54 +08:00
lutinglt
9aae3e7347 父级目录添加悬停颜色 2025-02-10 12:58:38 +08:00
lutinglt
7eff93195b 父级目录图标位置优化 2025-02-10 12:54:41 +08:00
lutinglt
21aa5cdc47 导航栏分割线优化 2025-02-10 12:47:55 +08:00
lutinglt
3119e2f334 首页动态图标大小优化 2025-02-10 12:10:06 +08:00
lutinglt
91f5c77faf 首页动态图标大小优化 2025-02-10 12:08:14 +08:00
lutinglt
0bae3b4533 修复软件包页面下组织标签样式 2025-02-10 11:55:52 +08:00
lutinglt
7a37517034 仓库收藏派生按钮调整 2025-02-10 11:50:18 +08:00
lutinglt
02f22c1f57 输入框大小和颜色优化 2025-02-10 11:38:04 +08:00
lutinglt
aae6409016 动画效果优化 2025-02-10 10:48:46 +08:00
lutinglt
3f34bce95d 修复仓库文件列表整行悬停背景颜色丢失 2025-02-09 23:19:14 +08:00
lutinglt
1b2207a13b 移除字体 2025-02-09 22:58:24 +08:00
lutinglt
cd9a2a504b 仓库导航栏颜色同步&按钮大小优化 2025-02-09 21:42:11 +08:00
lutinglt
7c6ec21e10 顶部导航栏分割线优化 2025-02-09 21:14:54 +08:00
lutinglt
36195e64ee 仓库文件列表文件图标名称位置优化 2025-02-09 21:05:43 +08:00
lutinglt
de133f5aac 手机下隐藏提交信息 2025-02-09 19:19:10 +08:00
lutinglt
e2c52aa95a 加快下拉动画 2025-02-09 14:55:35 +08:00
lutinglt
3f75f5f36b 动画效果优化 2025-02-09 14:27:12 +08:00
lutinglt
6c8f386f9f 代码页侧边栏宽度&下拉菜单分割线调整 2025-02-09 11:14:43 +08:00
lutinglt
53f074ba79 增加克隆协议选择按钮样式 2025-02-06 18:14:43 +08:00
lutinglt
174b643896 修复克隆面板按钮弹跳&统一标签风格 2025-02-06 10:47:49 +08:00
lutinglt
e0080279f9 优化 Action 日志左侧栏宽度 2025-01-14 21:34:29 +08:00
lutinglt
ca8ab147dd 修复侧边栏协议对齐&截图更新 2025-01-14 11:35:41 +08:00
lutinglt
8f80e88ebb Actions 工作流日志页面样式同步 2025-01-14 11:09:47 +08:00
lutinglt
5e8475ab35 action日志hover效果 2025-01-13 21:02:51 +08:00
lutinglt
bc96ec111e Actions日志字体与GitHub相同 2025-01-13 20:42:44 +08:00
lutinglt
532970323a GitHub避免滚动条出现导致元素位移的小妙招 2025-01-13 20:27:02 +08:00
lutinglt
e1d1a2d0f9 Actions和菜单项同步 2025-01-13 20:15:50 +08:00
lutinglt
fe7cb17617 release 2025-01-12 18:14:00 +08:00
lutinglt
5280962bc4 release 2025-01-12 17:49:13 +08:00
lutinglt
915d139d86 修复工作流作业选中效果 2025-01-12 14:14:11 +08:00
lutinglt
d12dba2373 调整工作流步骤状态标签颜色和间隔 2025-01-12 10:44:53 +08:00
lutinglt
63b2f3fa7b 修复分支菜单按钮溢出 2025-01-11 20:17:11 +08:00
lutinglt
1078e4e73a 版本发布整体调整 2025-01-11 19:53:27 +08:00
lutinglt
2c03bd213a 分支及分支菜单按钮优化 2025-01-11 18:39:06 +08:00
lutinglt
7c81b764db 调整发布页左侧栏 2025-01-11 14:05:58 +08:00
lutinglt
596af871ce 微调侧边栏间隔 2025-01-11 13:14:01 +08:00
lutinglt
121b49d43d 微调标签图标和代码页侧边栏图标与文字的距离 2025-01-11 11:43:00 +08:00
lutinglt
cfaef6de31 禁用工作流标签优化 2025-01-11 10:54:59 +08:00
lutinglt
38c3d8f4bf update 2025-01-11 00:17:02 +08:00
lutinglt
608b8d5e2e update 2025-01-11 00:12:48 +08:00
lutinglt
49a1fad12a 精调仓库代码页面侧边栏 2025-01-10 23:53:17 +08:00
lutinglt
12f9f0044c 编程语言精调 2025-01-10 22:29:33 +08:00
lutinglt
eca01fc5c1 仓库代码页面顶部统计栏颜色优化 2025-01-10 22:02:49 +08:00
lutinglt
a624d5ff58 提高日志 Hover 亮度 2025-01-10 12:02:10 +08:00
lutinglt
c787dea53e 弹窗添加动画, 优化 Action 的日志动画 2025-01-10 11:46:31 +08:00
lutinglt
e95a272071 添加默认过渡动画 2025-01-10 11:24:31 +08:00
lutinglt
f4ed01f60c 仓库编程语言字体颜色同步 Github 2025-01-09 17:10:43 +08:00
lutinglt
22b690da8f 仓库编程语言字体颜色调整 2025-01-09 16:32:28 +08:00
lutinglt
f7e1529ca2 1.23 2025-01-09 15:57:15 +08:00
lutinglt
b42b1d9543 去除头像圆角 2025-01-09 11:20:10 +08:00
lutinglt
2f303c70cf 仓库页面时间列绝对时间字体优化 2024-12-28 16:05:49 +08:00
lutinglt
d087fc16d7 提交页面默认字体修改 2024-12-28 00:29:26 +08:00
lutinglt
605a9e0d65 打包字体 2024-12-28 00:07:35 +08:00
lutinglt
70e65ec687 同步 Github 分支列表样式(超还原) 2024-12-27 23:05:05 +08:00
lutinglt
330e4945fd 微调下拉菜单边框阴影 2024-12-27 21:47:04 +08:00
lutinglt
c9534f7a81 微调下拉菜单的选项间隔 2024-12-27 21:02:48 +08:00
lutinglt
9180be8744 修复输入框圆角 2024-12-27 18:06:07 +08:00
lutinglt
9124c83876 Update README.md 2024-12-27 14:27:09 +08:00
lutinglt
73052da7f2 引入 fontface 2024-12-27 14:20:43 +08:00
82 changed files with 3034 additions and 1189 deletions

18
.editorconfig Normal file
View File

@@ -0,0 +1,18 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# EditorConfig is awesome: https://EditorConfig.org
root = true
[*]
charset = utf-8
indent_size = 2
indent_style = space
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
max_line_length = 120
# documentation, utils
[*.{md,mdx,diff}]
trim_trailing_whitespace = false

4
.env.example Normal file
View File

@@ -0,0 +1,4 @@
DEV_THEME=dark
SSH_SERVER=localhost
SSH_USER=root
GITEA_THEME_PATH=/data/gitea/public/assets/css/

5
.gitattributes vendored Normal file
View File

@@ -0,0 +1,5 @@
.github/* linguist-vendored
.vscode/* linguist-vendored
screenshots/* linguist-vendored
scripts/* linguist-vendored
eslint.config.js linguist-vendored

7
.github/release-template.md vendored Normal file
View File

@@ -0,0 +1,7 @@
## 🌈 Style
#### 更符合 GitHub 风格
## 🎈 Perf
## 🐞 Fix

19
.github/release.md vendored
View File

@@ -1 +1,18 @@
下拉菜单样式同步 Github ## 🌈 Style
#### 更符合 GitHub 风格
- 差异对比折叠行文本颜色同步
- 差异对比行号位置同步
- 差异对比按钮和折叠行高度同步
- Actions 日志页面标题颜色同步
- Actions 日志页面设置菜单背景色同步
- 菜单背景色同步当前最新颜色
## 🎈 Perf
- Actions 日志页面标题间隔优化
## 🐞 Fix
- 修复差异对比分列视图下颜色丢失

View File

@@ -2,10 +2,6 @@ name: release
on: on:
workflow_dispatch: workflow_dispatch:
inputs:
gitea_version:
required: true
type: string
permissions: permissions:
contents: write contents: write
@@ -15,21 +11,14 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- name: Build theme - name: Build theme
run: | run: |
npm install npm install
npm run build:theme npm run build
- uses: actions/upload-artifact@v4
with:
name: theme-github
path: dist/theme-github.css
- name: Create release - name: Create release
run: | run: |
export TZ=Asia/Shanghai export TZ=Asia/Shanghai
TAG="v${{ inputs.gitea_version }}-$(date +%Y%m%d-%H%M)" TAG="v$(npm run -s version).$(date +%y%m%d%H%M)"
gh release create "$TAG" dist/theme-github.css --notes-file .github/release.md --draft -t $TAG gh release create "$TAG" dist/* --notes-file .github/release.md --draft -t $TAG
env: env:
GH_TOKEN: ${{ github.token }} GH_TOKEN: ${{ github.token }}

3
.gitignore vendored
View File

@@ -1,3 +1,4 @@
dist dist
node_modules node_modules
package-lock.json package-lock.json
.env

View File

@@ -1,3 +0,0 @@
dist/
node_modules/
package-lock.json

View File

@@ -1,16 +0,0 @@
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "avoid",
"proseWrap": "always",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf"
}

9
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,9 @@
{
"recommendations": [
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"usernamehw.errorlens",
"mikestead.dotenv",
"styled-components.vscode-styled-components"
]
}

7
CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,7 @@
| 目录 | 说明 |
| ----------------- | ---------------------------- |
| styles | 元素 GitHub 风格 |
| styles/components | 具体页面的元素单独风格 |
| styles/public | 适用大部分页面的元素默认风格 |
| themes | 颜色主题 |
| themes/\<theme> | 具体颜色主题自己的颜色或风格 |

View File

@@ -1,13 +1,13 @@
# gitea-github-theme # gitea-github-theme
尽量保持与 GitHub Dark 相同样式的 Gitea 主题 尽量保持与 GitHub 相同样式的 Gitea 主题
字体说明: ### 主题说明
- UI 默认字体 [Maple Hand](https://github.com/subframe7536/maple-font/tree/other-resources/cn-resource/maple-hand) & [VictorMono Nerd Font](https://github.com/ryanoasis/nerd-fonts/releases/download/v3.3.0/VictorMono.zip) & [汉仪正圆](https://www.hanyi.com.cn/productdetail.php?id=2913) (优先匹配左侧, 需要系统包含相应字体) 添加了短暂的过渡动画优化体验(与 GitHub Code 克隆列表动画一致)
- Actions 日志默认字体 VictorMono 优先
> Victor Mono 相比其他等宽字体更为紧凑, 可以减少换行 推荐搭配文件图标浏览器插件一起使用更佳
[github-file-explorer-icons](https://github.com/catppuccin/github-file-explorer-icons)
## 安装 ## 安装
@@ -17,12 +17,14 @@
4. 在设置中查看主题 4. 在设置中查看主题
`gitea/conf/app.ini` 例: `gitea/conf/app.ini` 例:
```ini ```ini
[ui] [ui]
THEMES = gitea-dark, github THEMES = gitea-dark, github
``` ```
详细请查看 Gitea 文档 [Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea) 详细请查看 Gitea 文档
[Gitea docs](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea)
## 截图 ## 截图
@@ -34,29 +36,12 @@ THEMES = gitea-dark, github
![仓库提交](screenshots/commit.png) ![仓库提交](screenshots/commit.png)
![Actions](screenshots/action.png) ![Actions](screenshots/actions.png)
![Actions Step](screenshots/step.png) ![Action](screenshots/action.png)
## 构建 ![Dispatch](screenshots/dispatch.png)
需要 nodejs 和 npm
```bash
git clone https://github.com/lutinglt/gitea-github-theme.git
cd gitea-github-theme
npm install
npm run build:theme
```
查看用于 Gitea 的主题文件: `./dist/theme-github.css`
在开发过程中实时构建主题文件
```bash
npm run watch
```
## 贡献 ## 贡献
欢迎提交 Issue 或 Pull Request 欢迎提交 Issue 或 Pull Request

24
eslint.config.js vendored Normal file
View File

@@ -0,0 +1,24 @@
import js from "@eslint/js";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import globals from "globals";
import tseslint from "typescript-eslint";
export default tseslint.config(
{ ignores: ["dist"] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ["**/*.{ts,tsx}"],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
},
}
);

View File

@@ -1,24 +1,66 @@
{ {
"name": "gitea-github-theme", "name": "gitea-github-theme",
"version": "1.0.0", "version": "1.24.2",
"description": "尽量保持与 GitHub Dark 相同样式的 Gitea 主题", "description": "A theme to make Gitea look and feel like GitHub",
"type": "module",
"scripts": { "scripts": {
"build": "sass src/theme-github.scss:dist/theme-github.css --no-source-map", "dev": "vite build --mode dev",
"build:theme": "npm run build -- --style=compressed", "build": "tsc -b && vite build",
"watch": "npm run build -- --watch" "lint": "eslint .",
"format": "prettier --write .",
"commit": "npm run lint && npm run format && npm run build",
"version": "node scripts/version.cjs"
}, },
"repository": {
"type": "git",
"url": "git+https://github.com/lutinglt/gitea-github-theme.git"
},
"keywords": [],
"author": "",
"type": "commonjs",
"bugs": {
"url": "https://github.com/lutinglt/gitea-github-theme/issues"
},
"homepage": "https://github.com/lutinglt/gitea-github-theme#readme",
"devDependencies": { "devDependencies": {
"sass": "^1.83.0" "@babel/preset-react": "^7.27.1",
"@babel/preset-typescript": "^7.27.1",
"@eslint/js": "^9.29.0",
"@linaria/core": "^6.3.0",
"@linaria/react": "^6.3.0",
"@types/node": "^24.0.3",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vanilla-extract/css": "^1.17.4",
"@vanilla-extract/vite-plugin": "^5.0.6",
"@vitejs/plugin-react": "^4.5.2",
"@vitejs/plugin-react-swc": "^3.10.2",
"@wyw-in-js/babel-preset": "^0.7.0",
"@wyw-in-js/vite": "^0.7.0",
"dotenv": "^17.0.0",
"eslint": "^9.29.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.2.0",
"lightningcss": "^1.30.1",
"polished": "^4.3.1",
"prettier": "3.5.3",
"prettier-plugin-organize-imports": "^4.1.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"sass-embedded": "^1.89.2",
"typescript": "^5.8.3",
"typescript-eslint": "^8.34.1",
"typescript-plugin-css-modules": "^5.1.0",
"vite": "^6.3.5"
},
"prettier": {
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"bracketSameLine": true,
"arrowParens": "avoid",
"proseWrap": "always",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf",
"plugins": [
"prettier-plugin-organize-imports"
],
"organizeImportsSkipDestructiveCodeActions": false
} }
} }

BIN
screenshots/action.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 109 KiB

BIN
screenshots/actions.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

BIN
screenshots/commit.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 498 KiB

After

Width:  |  Height:  |  Size: 394 KiB

BIN
screenshots/dispatch.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 425 KiB

After

Width:  |  Height:  |  Size: 343 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 187 KiB

BIN
screenshots/repo.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 401 KiB

After

Width:  |  Height:  |  Size: 211 KiB

BIN
screenshots/step.png vendored

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

7
scripts/version.cjs vendored Normal file
View File

@@ -0,0 +1,7 @@
const fs = require("fs");
const path = require("path");
const pkgPath = path.join(__dirname, "..", "package.json");
const pkg = JSON.parse(fs.readFileSync(pkgPath));
console.log(pkg.version);

View File

@@ -1,37 +0,0 @@
// Made by Luting ^-^
.job-step-summary {
color: var(--color-console-fg-subtle);
}
.job-log-line {
color: var(--color-text);
&:hover {
color: var(--color-console-fg);
}
}
.job-brief-item {
position: relative;
border-radius: 0.5rem !important;
&:hover {
background-color: var(--color-hover) !important;
}
&.selected {
background-color: #161a21 !important;
&:after {
overflow: visible;
background: #1f6feb;
border-radius: 0.375rem;
content: '';
height: 1.8rem;
left: calc(0rem * -1);
position: absolute;
top: calc(50% - 13px);
width: 0.25rem;
}
}
}

View File

@@ -1,274 +0,0 @@
// Made by Luting ^-^
.chroma {
background-color: var(--color-code-bg);
.lntd {
vertical-align: top;
border: 0;
margin: 0;
padding: 0;
}
.lntable {
border-spacing: 0;
border: 0;
width: auto;
margin: 0;
padding: 0;
display: block;
overflow: auto;
}
.hl {
width: 100%;
display: block;
}
.lnt,
.ln {
margin-right: 0.4em;
padding: 0 0.4em;
}
.gs {
font-weight: var(--font-weight-semibold);
}
.gl {
text-decoration: underline;
}
.bp {
color: #fabd2f;
}
.c,
.c1,
.ch,
.cm {
color: #777e94;
}
.cp {
color: #8ec07c;
}
.cpf {
color: #79c0ff;
}
.cs {
color: #9075cd;
}
.dl {
color: #79c0ff;
}
.gd {
color: #fff;
background-color: #5f3737;
}
.ge {
color: #ddee30;
}
.gh {
color: #ffaa10;
}
.gi {
color: #fff;
background-color: #3a523a;
}
.go {
color: #777e94;
}
.gp {
color: #ebdbb2;
}
.gr {
color: #f43;
}
.gs {
color: #ebdbb2;
}
.gt {
color: #7ee787;
}
.gu {
color: #a5d6ff;
}
.il {
color: #79c0ff;
}
.k {
color: #ff7b72;
}
.kc {
color: #79c0ff;
}
.kd {
color: #ff7b72;
}
.kn {
color: #ff7b72;
}
.kp {
color: #5f8700;
}
.kr {
color: #7ee787;
}
.kt {
color: #ff7b72;
}
.m,
.mb,
.mf,
.mh,
.mi,
.mo {
color: #79c0ff;
}
.n {
color: #c9d1d9;
}
.na {
color: #d2a8ff;
}
.nb {
color: #a5d6ff;
}
.nc {
color: #e6edf3;
}
.nd {
color: #79c0ff;
}
.ne {
color: #7ee787;
}
.nf,
.ni {
color: #d2a8ff;
}
.nl {
color: #7ee787;
}
.nn {
color: #e6edf3;
}
.no {
color: #79c0ff;
}
.nt {
color: #7ee787;
}
.nv {
color: #ebdbb2;
}
.nx {
color: #b6bac5;
}
.o {
color: #7ee787;
}
.ow {
color: #5f8700;
}
.p {
color: #d2d4db;
}
.s,
.s1,
.s2 {
color: #a5d6ff;
}
.sa {
color: #79c0ff;
}
.sb {
color: #a5d6ff;
}
.sc {
color: #79c0ff;
}
.sd {
color: #777e94;
}
.se {
color: #7ee787;
}
.sh {
color: #79c0ff;
}
.si {
color: #ffaa10;
}
.sr {
color: #9075cd;
}
.ss {
color: #7ee787;
}
.sx {
color: #ffaa10;
}
.vc {
color: #7ee787;
}
.vg,
.vi {
color: #ffaa10;
}
.w {
color: #7f8699;
}
}

356
src/core/color.ts Normal file
View File

@@ -0,0 +1,356 @@
import { rgba } from "polished";
import { scaleColorLight } from "src/functions";
import type { Ansi, Console, Diff, Github, Message, Named, Other, Primary, Secondary } from "src/types";
import { themeVars } from "src/types/vars";
import type { Theme } from "./theme";
interface ColorTheme {
/** 用于标识当前是否为暗色主题: `true` 暗色 `false` 亮色 */
isDarkTheme: boolean;
/** 主色调 */
primary: string;
/** 主色调的对比色, 一般用于 `color` 属性, primary 用于 `background-color` */
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;
/** Action 日志 */
console: Console;
/** 提交代码对比 */
diff: Diff;
/** 其他 */
other: Other;
/** 仅适用于本主题的全局变量, 取自 Github */
github: Github;
}
/** 定义颜色, 用于生成颜色主题
* @example
* 文件名: "dark.css.tsx"
* import type { Console, Diff, Other } from "src/types";
* import { defineTheme, themeVars } from "src";
*
* const console: Console = {
* fg: {
* self: "#f0f6fc", // self 表示本身等于 --color-console-fg: #f0f6fc, 所有键名为 self 的都将被忽略
* subtle: themeVars.color.body, // 引用别的CSS变量等于 --color-console-fg-subtle: var(--color-body)
* num1: "rgb(125, 133, 144)", // 由于纯数字无法在 TS 中使用点调用, 采用 num 前缀等于 --color-console-fg-1: rgb(125, 133, 144)
* },
* ...
* }
* ...
* // 会经过 lightningcss 打包处理生成最终的 CSS
* export default defineTheme({
* isDarkTheme: true,
* primary: "#0969da",
* ...
* console,
* diff,
* other,
* })
*/
export function defineTheme(theme: ColorTheme): Theme {
const lighten = theme.isDarkTheme ? -1 : 1;
const primary: Primary = {
self: theme.primary,
contrast: theme.primaryContrast,
dark: {
num1: scaleColorLight(theme.primary, -12 * lighten),
num2: scaleColorLight(theme.primary, -24 * lighten),
num3: scaleColorLight(theme.primary, -36 * lighten),
num4: scaleColorLight(theme.primary, -48 * lighten),
num5: scaleColorLight(theme.primary, -60 * lighten),
num6: scaleColorLight(theme.primary, -72 * lighten),
num7: scaleColorLight(theme.primary, -84 * lighten),
},
light: {
num1: scaleColorLight(theme.primary, 12 * lighten),
num2: scaleColorLight(theme.primary, 24 * lighten),
num3: scaleColorLight(theme.primary, 36 * lighten),
num4: scaleColorLight(theme.primary, 48 * lighten),
num5: scaleColorLight(theme.primary, 60 * lighten),
num6: scaleColorLight(theme.primary, 72 * lighten),
num7: scaleColorLight(theme.primary, 84 * lighten),
},
alpha: {
num10: rgba(theme.primary, 0.1),
num20: rgba(theme.primary, 0.2),
num30: rgba(theme.primary, 0.3),
num40: rgba(theme.primary, 0.4),
num50: rgba(theme.primary, 0.5),
num60: rgba(theme.primary, 0.6),
num70: rgba(theme.primary, 0.7),
num80: rgba(theme.primary, 0.8),
num90: rgba(theme.primary, 0.9),
},
hover: theme.isDarkTheme ? themeVars.color.primary.light.num1 : themeVars.color.primary.dark.num1,
active: theme.isDarkTheme ? themeVars.color.primary.light.num2 : themeVars.color.primary.dark.num2,
};
const secondary: Secondary = {
self: theme.secondary,
dark: {
num1: scaleColorLight(theme.secondary, -6 * lighten),
num2: scaleColorLight(theme.secondary, -12 * lighten),
num3: scaleColorLight(theme.secondary, -18 * lighten),
num4: scaleColorLight(theme.secondary, -24 * lighten),
num5: scaleColorLight(theme.secondary, -30 * lighten),
num6: scaleColorLight(theme.secondary, -36 * lighten),
num7: scaleColorLight(theme.secondary, -42 * lighten),
num8: scaleColorLight(theme.secondary, -48 * lighten),
num9: scaleColorLight(theme.secondary, -54 * lighten),
num10: scaleColorLight(theme.secondary, -60 * lighten),
num11: scaleColorLight(theme.secondary, -66 * lighten),
num12: scaleColorLight(theme.secondary, -72 * lighten),
num13: scaleColorLight(theme.secondary, -80 * lighten),
},
light: {
num1: scaleColorLight(theme.secondary, 18 * lighten),
num2: scaleColorLight(theme.secondary, 36 * lighten),
num3: scaleColorLight(theme.secondary, 54 * lighten),
num4: scaleColorLight(theme.secondary, 72 * lighten),
},
alpha: {
num10: rgba(theme.secondary, 0.1),
num20: rgba(theme.secondary, 0.2),
num30: rgba(theme.secondary, 0.3),
num40: rgba(theme.secondary, 0.4),
num50: rgba(theme.secondary, 0.5),
num60: rgba(theme.secondary, 0.6),
num70: rgba(theme.secondary, 0.7),
num80: rgba(theme.secondary, 0.8),
num90: rgba(theme.secondary, 0.9),
},
button: themeVars.color.secondary.dark.num4,
hover: theme.isDarkTheme ? themeVars.color.secondary.dark.num3 : themeVars.color.secondary.dark.num5,
active: theme.isDarkTheme ? themeVars.color.secondary.dark.num2 : themeVars.color.secondary.dark.num6,
};
const named: Named = {
red: {
self: theme.red,
light: theme.isDarkTheme ? scaleColorLight(theme.red, 10) : scaleColorLight(theme.red, 25),
dark: {
num1: scaleColorLight(theme.red, -10),
num2: scaleColorLight(theme.red, -20),
},
badge: {
self: theme.red,
bg: rgba(theme.red, 0.1),
hover: {
bg: rgba(theme.red, 0.3),
},
},
},
orange: {
self: theme.orange,
light: theme.isDarkTheme ? scaleColorLight(theme.orange, 10) : scaleColorLight(theme.orange, 25),
dark: {
num1: scaleColorLight(theme.orange, -10),
num2: scaleColorLight(theme.orange, -20),
},
badge: {
self: theme.orange,
bg: rgba(theme.orange, 0.1),
hover: {
bg: rgba(theme.orange, 0.3),
},
},
},
yellow: {
self: theme.yellow,
light: theme.isDarkTheme ? scaleColorLight(theme.yellow, 10) : scaleColorLight(theme.yellow, 25),
dark: {
num1: scaleColorLight(theme.yellow, -10),
num2: scaleColorLight(theme.yellow, -20),
},
badge: {
self: theme.yellow,
bg: rgba(theme.yellow, 0.1),
hover: {
bg: rgba(theme.yellow, 0.3),
},
},
},
olive: {
self: theme.olive,
light: theme.isDarkTheme ? scaleColorLight(theme.olive, 10) : scaleColorLight(theme.olive, 25),
dark: {
num1: scaleColorLight(theme.olive, -10),
num2: scaleColorLight(theme.olive, -20),
},
},
green: {
self: theme.green,
light: theme.isDarkTheme ? scaleColorLight(theme.green, 10) : scaleColorLight(theme.green, 25),
dark: {
num1: scaleColorLight(theme.green, -10),
num2: scaleColorLight(theme.green, -20),
},
badge: {
self: theme.green,
bg: rgba(theme.green, 0.1),
hover: {
bg: rgba(theme.green, 0.3),
},
},
},
teal: {
self: theme.teal,
light: theme.isDarkTheme ? scaleColorLight(theme.teal, 10) : scaleColorLight(theme.teal, 25),
dark: {
num1: scaleColorLight(theme.teal, -10),
num2: scaleColorLight(theme.teal, -20),
},
},
blue: {
self: theme.blue,
light: theme.isDarkTheme ? scaleColorLight(theme.blue, 10) : scaleColorLight(theme.blue, 25),
dark: {
num1: scaleColorLight(theme.blue, -10),
num2: scaleColorLight(theme.blue, -20),
},
},
violet: {
self: theme.violet,
light: theme.isDarkTheme ? scaleColorLight(theme.violet, 10) : scaleColorLight(theme.violet, 25),
dark: {
num1: scaleColorLight(theme.violet, -10),
num2: scaleColorLight(theme.violet, -20),
},
},
purple: {
self: theme.purple,
light: theme.isDarkTheme ? scaleColorLight(theme.purple, 10) : scaleColorLight(theme.purple, 25),
dark: {
num1: scaleColorLight(theme.purple, -10),
num2: scaleColorLight(theme.purple, -20),
},
},
pink: {
self: theme.pink,
light: theme.isDarkTheme ? scaleColorLight(theme.pink, 10) : scaleColorLight(theme.pink, 25),
dark: {
num1: scaleColorLight(theme.pink, -10),
num2: scaleColorLight(theme.pink, -20),
},
},
brown: {
self: theme.brown,
light: theme.isDarkTheme ? scaleColorLight(theme.brown, 10) : scaleColorLight(theme.brown, 25),
dark: {
num1: scaleColorLight(theme.brown, -10),
num2: scaleColorLight(theme.brown, -20),
},
},
black: {
self: theme.black,
light: theme.isDarkTheme ? scaleColorLight(theme.black, 10) : scaleColorLight(theme.black, 25),
dark: {
num1: scaleColorLight(theme.black, -10),
num2: scaleColorLight(theme.black, -20),
},
},
grey: {
self: theme.grey,
light: theme.isDarkTheme ? scaleColorLight(theme.grey, 10) : scaleColorLight(theme.grey, 25),
},
gold: theme.gold,
white: theme.white,
};
const message: Message = {
error: {
bg: {
self: rgba(theme.red, 0.1),
active: rgba(theme.red, 0.5),
hover: rgba(theme.red, 0.3),
},
border: rgba(theme.red, 0.4),
text: theme.red,
},
success: {
bg: rgba(theme.green, 0.1),
border: rgba(theme.green, 0.4),
text: theme.green,
},
warning: {
bg: rgba(theme.yellow, 0.1),
border: rgba(theme.yellow, 0.4),
text: theme.yellow,
},
info: {
bg: rgba(theme.blue, 0.1),
border: rgba(theme.blue, 0.4),
text: theme.blue,
},
};
const ansi: Ansi = {
black: themeVars.color.black.self,
red: themeVars.color.red.self,
green: themeVars.color.green.self,
yellow: themeVars.color.yellow.self,
blue: themeVars.color.blue.self,
magenta: themeVars.color.pink.self,
cyan: theme.cyan,
white: themeVars.color.console.fg.subtle,
bright: {
black: themeVars.color.black.light,
red: themeVars.color.red.light,
green: themeVars.color.green.light,
yellow: themeVars.color.yellow.light,
blue: themeVars.color.blue.light,
magenta: themeVars.color.pink.light,
cyan: theme.isDarkTheme ? scaleColorLight(theme.cyan, 10) : scaleColorLight(theme.cyan, 25),
white: themeVars.color.console.fg.self,
},
};
return {
isDarkTheme: theme.isDarkTheme.toString(),
color: {
primary,
secondary,
...named,
ansi,
console: theme.console,
diff: theme.diff,
...message,
...theme.other,
},
github: theme.github,
};
}

1
src/core/index.ts Normal file
View File

@@ -0,0 +1 @@
export { createTheme } from "./theme";

27
src/core/theme.ts Normal file
View File

@@ -0,0 +1,27 @@
import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
import { otherThemeVars, themeVars } from "src/types/vars";
import type { MapLeafNodes, WithOptionalLayer } from "./types";
export type Theme = WithOptionalLayer<MapLeafNodes<typeof themeVars, string>>;
function stringToBoolean(str: string, name: string): boolean {
try {
return JSON.parse(str);
} catch (error) {
console.error(error);
throw new Error(`Invalid boolean value(${name}): ${str}`);
}
}
export function createTheme(theme: Theme): void {
createGlobalTheme(":root", themeVars, theme);
createGlobalTheme(":root", otherThemeVars, {
border: {
radius: "6px",
},
});
globalStyle(":root", {
accentColor: themeVars.color.accent,
colorScheme: stringToBoolean(theme.isDarkTheme, "isDarkTheme") ? "dark" : "light",
});
}

12
src/core/types.ts Normal file
View File

@@ -0,0 +1,12 @@
type Primitive = string | boolean | number | null | undefined;
type Tokens = { [key: string]: string | Tokens };
export type WithOptionalLayer<T extends Tokens> = T & { "@layer"?: string };
export type MapLeafNodes<Obj, LeafType> = {
[Prop in keyof Obj]: Obj[Prop] extends Primitive
? LeafType
: Obj[Prop] extends Record<string | number, unknown>
? MapLeafNodes<Obj[Prop], LeafType>
: never;
};

110
src/core/vite.ts Normal file
View File

@@ -0,0 +1,110 @@
import { execSync } from "node:child_process";
import crypto from "node:crypto";
import fs from "node:fs";
import path from "node:path";
import type { Plugin } from "vite";
const suffix = ".css.tsx";
/**
* 生成主题输入
* @param outDir 输出目录与 vite 配置中的 outDir 一致, 用于生成临时目录
* @param themeDir 颜色主题目录
* @param devTheme 开发模式下的主题, 仅打包该主题
* @param mode 模式, 开发模式为 dev `vite build --mode dev`
* @returns vite.rollupOptions.input 的配置
*/
export function themeInput(outDir: string, themeDir: string, mode: string): { [key: string]: string } {
const hash = crypto.randomBytes(6).toString("hex");
const tmpDir = `${outDir}/tmp-${hash}`; // 输出目录下的临时目录
fs.mkdirSync(tmpDir, { recursive: true });
const input: { [key: string]: string } = {};
const themeEntries = fs.readdirSync(themeDir, { withFileTypes: true });
const devTheme = process.env.DEV_THEME || "dark"; // 开发模式仅打包单个颜色主题
for (const entry of themeEntries) {
// 目录下所有的 css.ts 文件都作为主题入口
if (entry.isFile() && entry.name.endsWith(suffix)) {
const fileName = entry.name.replace(suffix, "");
// 开发模式只打包 devTheme 主题
if (mode === "dev" && fileName !== devTheme) continue;
// 创建颜色主题的 css.ts 文件, vanilla-extract 需要这个文件后缀名并生成 css
const tmpCssTs = path.join(tmpDir, `${fileName}${suffix}`);
const createImport = `import { createTheme } from "src/core";`;
const themeImport = `import theme from "themes/${fileName}";`;
const createFn = `createTheme(theme);`;
fs.writeFileSync(tmpCssTs, `${createImport}\n${themeImport}\n${createFn}`);
// 生成主题入口的 .ts 文件, 合并样式和颜色主题
const tmpInputTs = path.join(tmpDir, `${fileName}.ts`);
const stylesImport = `import "styles";`;
const cssImport = `import "./${fileName}${suffix}";`;
fs.writeFileSync(tmpInputTs, `${stylesImport}\n${cssImport}`);
input[fileName] = tmpInputTs;
}
}
if (mode === "dev") {
console.log("[themeInput] devTheme:", devTheme);
}
return input;
}
const prefix = "theme-github-";
/**
* 生成主题文件
* @important vite.rollupOptions.output 配置 `assetFileNames: "[name].[ext]"`
*/
export function themePlugin(): Plugin {
return {
name: "themePlugin",
generateBundle(this, _, bundle) {
let styles = "";
for (const [key, value] of Object.entries(bundle)) {
if (value.type === "chunk") {
delete bundle[key]; // 删除 chunk
} else {
// 样式文件是通过入口导入的, 没有原始文件名
if (value.originalFileNames.length === 0) {
// 收集所有的样式文件(逻辑上只有一个)
// vite 会在尾部添加注释, 后续会合并到颜色主题, 此处需要删除注释
styles += value.source.toString().replace("/*$vite$:1*/", "");
delete bundle[key];
}
}
}
// 生成所有的主题文件
for (const [key, value] of Object.entries(bundle)) {
// 仅为了类型检查, 逻辑上输出中全是 asset 类型
if (value.type === "asset") {
const name = `${prefix}${value.names[0]}`;
const fileName = `${prefix}${value.fileName}`;
const originalFileName = value.originalFileNames.pop();
const type = value.type;
const source = `${styles}${value.source.toString()}`;
// 添加主题到输出
this.emitFile({ name, fileName, source, type, originalFileName });
delete bundle[key];
}
}
},
writeBundle() {
const server = process.env.SSH_SERVER;
const user = process.env.SSH_USER || "root";
const path = process.env.GITEA_THEME_PATH;
if (server && path) {
const cmd = `scp dist/${prefix}*.css ${user}@${server}:${path}`;
console.log("[themePlugin] exec:", cmd);
try {
execSync(cmd, { stdio: "inherit" });
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (_) {
// continue regardless of error
}
} else {
console.log("[themePlugin] no SSH_SERVER or GITEA_THEME_PATH, skip upload");
}
},
};
}

View File

@@ -1,42 +0,0 @@
// Made by Luting ^-^
.added-code,
.removed-code {
color: #fff !important;
border-radius: 0.1875rem;
* {
color: #fff !important;
border-radius: 0.1875rem;
}
}
.code-diff-unified {
.add-code {
.lines-num,
.lines-escape {
background-color: #1c4428;
}
}
.del-code {
.lines-num,
.lines-escape {
background-color: #542426;
}
}
}
.code-diff-unified .tag-code td,
.diff-file-body tr.tag-code:last-child > td {
background-color: #121d2f;
}
.code-expander-button,
.code-diff-unified .tag-code .lines-num,
.code-diff-unified .tag-code .lines-escape,
.diff-file-body tr.tag-code:last-child > td.lines-num,
.diff-file-body tr.tag-code:last-child > td.lines-escape {
background-color: #0c2d6b;
}
.code-expander-button:hover {
background: #1f6feb;
}

View File

@@ -1,67 +0,0 @@
// Made by Luting ^-^
// 下拉菜单动画
@keyframes overlay-appear {
0% {
opacity: 0;
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.ui.dropdown .menu {
margin-top: 3.75px !important;
border-radius: 12px !important;
overflow: hidden auto;
box-shadow: #30363d 0px 0px 0px 0.5px;
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
}
.ui.dropdown .menu,
.branch-tag-item.active,
.ui.pointing.dropdown > .menu:not(.hidden):after {
background: var(--color-box-header) !important;
}
%item-style {
background: #1f6feb;
}
.ui.dropdown .menu > .item.context:hover {
@extend %item-style;
}
.user-main-content,
.repo-setting-content,
.user-setting-content,
.org-setting-content,
.admin-setting-content {
.ui.dropdown .menu > .item {
&:hover {
@extend %item-style;
a {
color: var(--color-text);
}
}
}
}
// 按钮菜单选项(主要为仓库)
.ui.button.dropdown .menu .item {
border-radius: var(--border-radius);
margin: 0 6px;
&:first-of-type {
border-radius: var(--border-radius);
margin-top: 6px;
}
&:last-of-type {
border-radius: var(--border-radius);
margin-bottom: 6px;
}
}

View File

@@ -1,23 +0,0 @@
// Made by Luting ^-^
.emoji[aria-label='check\\ mark'],
.emoji[aria-label='currency\\ exchange'],
.emoji[aria-label='TOP\\ arrow'],
.emoji[aria-label='END\\ arrow'],
.emoji[aria-label='ON! arrow'],
.emoji[aria-label='SOON\\ arrow'],
.emoji[aria-label='heavy dollar sign'],
.emoji[aria-label='copyright'],
.emoji[aria-label='registered'],
.emoji[aria-label='trade\\ mark'],
.emoji[aria-label='multiply'],
.emoji[aria-label='plus'],
.emoji[aria-label='minus'],
.emoji[aria-label='divide'],
.emoji[aria-label='curly\\ loop'],
.emoji[aria-label='double curly loop'],
.emoji[aria-label='wavy\\ dash'],
.emoji[aria-label='paw\\ prints'],
.emoji[aria-label='musical\\ note'],
.emoji[aria-label='musical\\ notes'] {
filter: invert(100%) hue-rotate(180deg);
}

View File

@@ -1,26 +0,0 @@
// Made by Luting ^-^
.lines-num span:after {
color: var(--color-text);
}
.ui.secondary.pointing.menu {
.active.item {
color: var(--color-text);
}
.active.item,
.dropdown.item,
.link.item,
a.item {
&:hover {
color: var(--color-text);
}
}
}
.ui.cards > .card,
.ui.card {
> .extra a:not(.ui):hover {
color: var(--color-blue);
}
}

1
src/functions/index.ts Normal file
View File

@@ -0,0 +1 @@
export { scaleColorLight } from "./scss";

27
src/functions/scss.ts Normal file
View File

@@ -0,0 +1,27 @@
import { hsl, parseToHsl } from "polished";
/**
* 改变颜色的亮度, 等同于 sass 中的 `color.scale` 函数
* @param color 颜色值
* @param lightnessScale 亮度变化比例,负数表示变暗,正数表示变亮
* @returns 新的颜色值
* @example
* const newColor = scaleColorLight("#ff0000", 20); // 变亮
* const newColor = scaleColorLight("#ff0000", -20); // 变暗
* 等同于 sass `@use "sass:color"`;
* color: color.scale(#ff0000, $lightness: 20%)
* color: color.scale(#ff0000, $lightness: -20%)
*/
export function scaleColorLight(color: string, lightness: number) {
const hslColor = parseToHsl(color);
let newLightness;
if (lightness < 0) {
newLightness = hslColor.lightness * (1 + lightness / 100); // 变暗
} else {
newLightness = hslColor.lightness + (1 - hslColor.lightness) * (lightness / 100); // 变亮
}
newLightness = Math.min(1, Math.max(0, newLightness)); // 确保亮度值在 0 到 1 之间
return hsl(hslColor.hue, hslColor.saturation, newLightness);
}

3
src/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { defineTheme } from "./core/color";
export type { Console, Diff, Other } from "./types";
export { themeVars } from "./types/vars";

View File

@@ -1,27 +0,0 @@
// Made by Luting ^-^
input,
textarea,
.ui.input input,
.ui.form input:not([type]),
.ui.form select,
.ui.form textarea,
.ui.form input[type='date'],
.ui.form input[type='datetime-local'],
.ui.form input[type='email'],
.ui.form input[type='file'],
.ui.form input[type='number'],
.ui.form input[type='password'],
.ui.form input[type='search'],
.ui.form input[type='tel'],
.ui.form input[type='text'],
.ui.form input[type='time'],
.ui.form input[type='url'],
.ui.selection.dropdown {
&:focus,
&:focus-visible {
border-radius: var(--border-radius);
border-color: #1f6feb;
outline: none;
box-shadow: inset 0 0 0 1px #1f6feb;
}
}

View File

@@ -1,21 +0,0 @@
// Made by Luting ^-^
.ui.modal {
border: 1.5px solid var(--color-light-border);
> .header {
background-color: var(--color-box-header);
border-bottom: 1.5px solid var(--color-light-border);
}
> .content,
form > .content {
background-color: var(--color-box-header);
}
> .actions,
.content + .actions,
.content + form > .actions {
background-color: var(--color-box-header);
border-top: 1.5px solid var(--color-light-border);
}
}

View File

@@ -1,35 +0,0 @@
// Made by Luting ^-^
.page-content.repository.releases {
svg.tw-mr-1.svg.octicon-tag {
color: #3fb950;
}
.ui.small.primary.button {
background-color: var(--color-button);
font-size: 14px;
&:hover {
background-color: #262c36;
}
}
}
.page-content.repository.tags {
.tag-list-row .download a.muted:hover {
text-decoration: none;
}
}
.page-content.repository.tags,
.page-content.repository.releases {
.ui.small.menu {
.item {
font-size: 14px;
}
.active.item {
color: #fff;
background: #1f6feb !important;
}
}
}

View File

@@ -1,182 +0,0 @@
// Made by Luting ^-^
/* 用户仓库列表字体颜色 */
/* .repo-list-link {
color: var(--color-blue) !important;
} */
/* 头部 */
/* #navbar {
border-bottom: 0;
} */
.page-content > :first-child.secondary-nav {
border-top: 0;
background-color: var(--color-nav-bg) !important;
}
// 修复关注&派生 hover 意外点亮右侧 label 左边框
.ui.ui.ui.ui.small.button {
z-index: 0;
}
// 仓库页面头部名称
.page-content.repository .repo-header {
img.ui.avatar {
height: 32px;
width: 32px;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
}
.flex-item {
.flex-item-title {
color: #9198a1;
a {
display: flex;
align-items: center;
color: #f0f6fc;
font-size: 16px;
text-decoration: none !important;
min-width: 3ch;
padding: 6px 8px;
padding-inline: 0.5rem;
padding-block: 6px;
border-radius: 0.375rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
&:hover {
background: #15191f;
}
&.muted.tw-font-normal {
color: #9198a1;
&:hover {
color: #9198a1 !important;
}
}
}
}
a:not(.label, .button):hover {
color: #f0f6fc !important;
}
}
}
// 仓库导航栏
.ui.secondary.pointing.menu {
.overflow-menu-items {
gap: 0.5rem;
.item {
padding: 5px 8px !important;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-bottom: 0.5rem !important;
}
}
.active.item {
border-color: #ffffff00;
span:after {
background: #f78166;
border-radius: 0.375rem;
bottom: calc(50% - 1.8rem);
content: '';
height: 2px;
position: absolute;
right: 50%;
transform: translate(50%, -50%);
width: 100%;
z-index: 1;
}
}
}
.header-wrapper .ui.tabular.menu,
.ui.secondary.pointing.menu {
.item:hover {
background: #15191f !important;
}
}
// 仓库文件&提交列表
.page-content.repository {
tr.commit-list {
height: 3.725rem;
}
.commit-list .latest-commit {
.commit-summary {
color: #9198a1;
}
img.tw-align-middle {
border-radius: 25px;
margin-top: -1px;
margin-left: 1px;
margin-right: 8px !important;
}
.author-wrapper {
margin-right: 6px;
&:hover {
color: var(--color-text);
}
}
.ui.sha.label {
display: none;
}
}
.tw-flex,
.commit-list {
.tw-align-middle:not(img) {
padding: 6px;
border-radius: var(--border-radius);
margin-right: 6px;
&:hover {
background-color: var(--color-hover);
}
}
}
}
.repository.file.list {
#repo-files-table {
tbody {
.svg.octicon-file-directory-fill,
.svg.octicon-file-submodule {
color: #7d8590;
}
}
tr:hover {
background-color: var(--color-box-header);
}
}
}
.repository #commits-table {
.author {
a {
color: var(--color-text);
}
img {
border-radius: 25px;
margin-right: 8px !important;
}
}
.text.right.aligned {
color: #919894;
}
}

View File

@@ -1,238 +0,0 @@
// Made by Luting ^-^
:root :lang(zh-CN) {
--fonts-override: 'Maple Hand', 'VictorMono Nerd Font', 'HYZhengYuan';
}
.job-step-logs {
font-family: 'VictorMono Nerd Font', 'Maple Hand', 'HYZhengYuan' !important;
font-weight: 500;
}
:root {
--is-dark-theme: true;
--border-radius: 6px;
--color-primary: var(--color-blue);
--color-primary-contrast: #fff;
--color-primary-dark-1: #739cb3;
--color-primary-dark-2: #40aaff;
--color-primary-dark-3: #92b4c4;
--color-primary-dark-4: #a1bbcd;
--color-primary-dark-5: #cfddc1;
--color-primary-dark-6: #e7eee0;
--color-primary-dark-7: #f8faf6;
--color-primary-light-1: var(--color-blue);
--color-primary-light-2: #437aad;
--color-primary-light-3: #415b8b;
--color-primary-light-4: #25425a;
--color-primary-light-5: #223546;
--color-primary-light-6: #131923;
--color-primary-light-7: #06090b;
--color-primary-alpha-10: #3683c019;
--color-primary-alpha-20: #3683c033;
--color-primary-alpha-30: #3683c04b;
--color-primary-alpha-40: #3683c066;
--color-primary-alpha-50: #3683c080;
--color-primary-alpha-60: #3683c099;
--color-primary-alpha-70: #3683c0b3;
--color-primary-alpha-80: #3683c0cc;
--color-primary-alpha-90: #3683c0e1;
--color-primary-hover: var(--color-primary-light-1);
--color-primary-active: var(--color-primary-light-2);
--color-secondary: #3d444d;
--color-secondary-dark-1: #505665;
--color-secondary-dark-2: #5b6273;
--color-secondary-dark-3: #71798e;
--color-secondary-dark-4: #7f8699;
--color-secondary-dark-5: #8c93a4;
--color-secondary-dark-6: #9aa0af;
--color-secondary-dark-7: #a8adba;
--color-secondary-dark-8: #c4c7d0;
--color-secondary-dark-9: #dfe1e6;
--color-secondary-dark-10: #edeef1;
--color-secondary-dark-11: #fbfbfc;
--color-secondary-dark-12: #eeeff2;
--color-secondary-dark-13: #fbfbfc;
--color-secondary-light-1: #373b46;
--color-secondary-light-2: #292c34;
--color-secondary-light-3: #1c1e23;
--color-secondary-light-4: #0e0f11;
--color-secondary-alpha-10: #2c2f35;
--color-secondary-alpha-20: #2c2f3533;
--color-secondary-alpha-30: #2c2f354b;
--color-secondary-alpha-40: #2c2f3566;
--color-secondary-alpha-50: #ffffff28;
--color-secondary-alpha-60: #161b22;
--color-secondary-alpha-70: #2c2f35b3;
--color-secondary-alpha-80: #2c2f35cc;
--color-secondary-alpha-90: #2c2f35e1;
--color-red: #da3737;
--color-orange: #f17a2b;
--color-yellow: #f3c640;
--color-olive: #c8df36;
--color-green: #39d353;
--color-teal: #69d4cf;
--color-blue: #4493f8;
--color-violet: #754ad3;
--color-purple: #8957e5;
--color-pink: #e04b9f;
--color-brown: #a86d45;
--color-black: #141516;
--color-grey: #797c85;
--color-gold: #d4b74c;
--color-white: #ffffff;
--color-red-light: #d15a5a;
--color-orange-light: #f6a066;
--color-yellow-light: #eaaf03;
--color-olive-light: #abc016;
--color-green-light: #93b373;
--color-teal-light: #00b6ad;
--color-blue-light: #4e96cc;
--color-violet-light: #9b79e4;
--color-purple-light: #ba6ad5;
--color-pink-light: #d74397;
--color-brown-light: #b08061;
--color-black-light: #3f4555;
--color-red-dark-1: #c23636;
--color-orange-dark-1: #f38236;
--color-yellow-dark-1: #b88a03;
--color-olive-dark-1: #839311;
--color-green-dark-1: #238636;
--color-teal-dark-1: #00837c;
--color-blue-dark-1: #347cb3;
--color-violet-dark-1: #7b4edb;
--color-purple-dark-1: #a742c9;
--color-pink-dark-1: #be297d;
--color-brown-dark-1: #94674a;
--color-black-dark-1: #292d38;
--color-red-dark-2: #ad3030;
--color-orange-dark-2: #f16e17;
--color-yellow-dark-2: #a37a02;
--color-olive-dark-2: #74820f;
--color-green-dark-2: #6c8c4c;
--color-teal-dark-2: #00746e;
--color-blue-dark-2: #2e6e9f;
--color-violet-dark-2: #6733d6;
--color-purple-dark-2: #9834b9;
--color-pink-dark-2: #a9246f;
--color-brown-dark-2: #835b42;
--color-black-dark-2: #252832;
--color-ansi-black: var(--color-black);
--color-ansi-red: var(--color-red);
--color-ansi-green: var(--color-green);
--color-ansi-yellow: var(--color-yellow);
--color-ansi-blue: var(--color-blue);
--color-ansi-magenta: var(--color-pink);
--color-ansi-cyan: var(--color-teal);
--color-ansi-white: var(--color-console-fg-subtle);
--color-ansi-bright-black: var(--color-black-light);
--color-ansi-bright-red: var(--color-red-light);
--color-ansi-bright-green: var(--color-green-light);
--color-ansi-bright-yellow: var(--color-yellow-light);
--color-ansi-bright-blue: var(--color-blue-light);
--color-ansi-bright-magenta: var(--color-pink-light);
--color-ansi-bright-cyan: var(--color-teal-light);
--color-ansi-bright-white: var(--color-console-fg);
--color-console-fg: #f0f6fc;
--color-console-fg-subtle: #9198a1;
--color-console-bg: #010409;
--color-console-border: #2b3139;
--color-console-active-bg: var(--color-active);
--color-console-hover-bg: var(--color-hover);
--color-console-menu-bg: var(--color-body);
--color-console-menu-border: var(--color-light-border);
--color-grey: #505665;
--color-grey-light: #a1a6b7;
--color-gold: #b1983b;
--color-white: #fff;
--color-diff-removed-word-bg: #792e2d;
--color-diff-added-word-bg: #1d572d;
--color-diff-removed-row-bg: #25171c;
--color-diff-moved-row-bg: #818044;
--color-diff-added-row-bg: #12261e;
--color-diff-removed-row-border: #634343;
--color-diff-moved-row-border: #bcca6f;
--color-diff-added-row-border: #314a37;
--color-diff-inactive: #353846;
--color-error-border: #792e2e;
--color-error-bg: #26181d;
--color-error-bg-active: #744;
--color-error-bg-hover: #633;
--color-error-text: #f85149;
--color-success-border: #1d572d;
--color-success-bg: #12261e;
--color-success-text: #39d353;
--color-warning-border: #624711;
--color-warning-bg: #272115;
--color-warning-text: #fbbd08;
--color-info-border: #214a81;
--color-info-bg: #121d2f;
--color-info-text: #4493f8;
--color-red-badge: #db2828;
--color-red-badge-bg: #db28281a;
--color-red-badge-hover-bg: #db28284d;
--color-green-badge: #39d353;
--color-green-badge-bg: #12261e;
--color-green-badge-hover-bg: #153d22;
--color-yellow-badge: #fbbd08;
--color-yellow-badge-bg: #fbbd081a;
--color-yellow-badge-hover-bg: #fbbd084d;
--color-orange-badge: #f2711c;
--color-orange-badge-bg: #f2711c1a;
--color-orange-badge-hover-bg: #f2711c4d;
--color-git: #f05133;
--color-body: #0d1117;
--color-box-header: #151b23;
--color-box-body: #0d1117;
--color-box-body-highlight: #262c36;
--color-text-dark: #dbe0ea;
--color-text: #dce2e7;
--color-text-light: #a6aab5;
--color-text-light-1: rgb(125, 133, 144);
--color-text-light-2: #8a8e99;
--color-text-light-3: #707687;
--color-footer: #010409;
--color-timeline: #4c525e;
--color-input-text: #d5dbe6;
--color-input-background: #2c2f35;
--color-input-toggle-background: #454a57;
--color-input-border: var(--color-light-border);
--color-input-border-hover: var(--color-light-border);
--color-header-wrapper: #0d1117;
--color-header-wrapper-transparent: #20243000;
--color-light: #00000028;
--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
--color-light-border: #3d444d;
--color-hover: #252c34;
--color-active: #2a313c;
--color-menu: #0d1117;
--color-card: #0d1117;
--color-markup-table-row: #ffffff06;
--color-markup-code-block: #ffffff16;
--color-button: #212830;
--color-code-bg: #0d1117;
--color-code-sidebar-bg: #232834;
--color-shadow: #00000060;
--color-secondary-bg: #ffffff26;
--color-text-focus: #fff;
--color-expand-button: #3c404d;
--color-placeholder-text: #8a8e99;
--color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2);
--color-caret: var(--color-text);
--color-reaction-bg: #ffffff12;
--color-reaction-hover-bg: var(--color-primary-light-4);
--color-reaction-active-bg: var(--color-primary-light-5);
--color-tooltip-text: #fff;
--color-tooltip-bg: #000000f0;
--color-nav-bg: #010409;
--color-nav-hover-bg: var(--color-hover);
--color-label-text: #fff;
--color-label-bg: #7c84974b;
--color-label-hover-bg: #7c8497a0;
--color-label-active-bg: #7c8497;
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-5);
--color-active-line: #534d1b;
accent-color: var(--color-accent);
color-scheme: dark;
}

View File

@@ -1,21 +0,0 @@
/* Made by Luting ^-^ */
@use 'chroma';
@use 'codemirror';
@use 'root';
@use 'emoji';
@use 'transition'; // 添加过渡动画
@use 'modal'; // 弹窗
@use 'input'; // 输入框
@use 'repo'; // 仓库
@use 'button'; // 按钮
@use 'issue'; // 工单&拉取请求
@use 'dropdown'; // 下拉菜单
@use 'setting'; // 设置
@use 'label'; // 标签
@use 'release'; // 发布
@use 'actions'; // 操作
@use 'svg'; // svg
@use 'fontcolor'; // 字体颜色
@use 'radius'; // 圆角
@use 'heatmap'; // 热力图
@use 'diff'; // 对比

View File

@@ -1,45 +0,0 @@
// Made by Luting ^-^
input,
textarea,
tr,
td,
button,
details summary,
#navbar .item,
.header-wrapper .ui.tabular.menu .item,
.job-step-summary,
.job-log-line,
.job-brief-item,
.menu .item,
.page-content.repository .flex-item .flex-item-title a,
.ui.input > input,
.ui.form input:not([type]),
.ui.form select,
.ui.form textarea,
.ui.form input[type='date'],
.ui.form input[type='datetime-local'],
.ui.form input[type='email'],
.ui.form input[type='file'],
.ui.form input[type='number'],
.ui.form input[type='password'],
.ui.form input[type='search'],
.ui.form input[type='tel'],
.ui.form input[type='text'],
.ui.form input[type='time'],
.ui.form input[type='url'],
.ui.label,
.ui.selection.dropdown,
.ui.checkbox label:before,
.ui.checkbox input:checked ~ label:before,
.ui.checkbox input:not([type='radio']):indeterminate ~ label:before,
.ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu,
.ui.selection.active.dropdown:hover .menu,
.ui.button,
.ui.button:hover,
.ui.menu .item,
.ui.vertical.menu .header.item,
.ui.secondary.menu .item {
transition: 0.2s;
}

View File

@@ -0,0 +1,49 @@
const ansiColor = {
/** 黑色 */
black: null,
/** 红色 */
red: null,
/** 绿色 */
green: null,
/** 黄色 */
yellow: null,
/** 蓝色 */
blue: null,
/** 品红 */
magenta: null,
/** 青色 */
cyan: null,
/** 白色 */
white: null,
};
export const ansi = {
/** 亮色 */
bright: ansiColor,
...ansiColor,
};
export const console = {
/** Action 页面日志部分字体颜色 */
fg: {
/** 亮色用于标题或步骤标题激活时 */
self: null,
/** 暗色用于副标题或步骤标题 */
subtle: null,
},
/** Action 页面日志部分背景色 */
bg: null,
/** Action 页面日志部分边框色 */
border: null,
/** Action 页面日志部分步骤标题激活颜色 */
activeBg: "color-console-active-bg",
/** Action 页面日志部分步骤标题悬停颜色 */
hoverBg: "color-console-hover-bg",
/** Action 页面日志部分设置菜单颜色 */
menu: {
/** 菜单背景色 */
bg: null,
/** 菜单边框色 */
border: null,
},
};

23
src/types/color/diff.ts Normal file
View File

@@ -0,0 +1,23 @@
const row = {
bg: null,
border: null,
};
const line = {
linenum: {
bg: null,
},
row: row,
word: {
bg: null,
},
};
export const diff = {
added: line,
moved: {
row: row,
},
removed: line,
inactive: null,
};

27
src/types/color/github.ts Normal file
View File

@@ -0,0 +1,27 @@
export const github = {
/** 用于 color 属性的颜色 */
fgColor: {
/** 强调色
* @actions 右侧日志标题颜色
*/
accent: null,
/** 默认的文本颜色
* @diff 增加/删除代码块的文本颜色
*/
default: null,
/** 暗淡的文本颜色
* @diff 折叠行的文本颜色
*/
muted: null,
},
/** 用于 background 属性的颜色 */
bgColor: {
accent: {
/** 强调色
* @diff 折叠/展开按钮的悬停颜色
* @actions 左侧子作业激活伪元素颜色
*/
emphasis: null,
},
},
};

7
src/types/color/index.ts Normal file
View File

@@ -0,0 +1,7 @@
export { ansi, console } from "./console";
export { diff } from "./diff";
export { github } from "./github";
export { primary, secondary } from "./main";
export { message } from "./message";
export { named } from "./named";
export { other } from "./other";

54
src/types/color/main.ts Normal file
View File

@@ -0,0 +1,54 @@
const num = {
num1: null,
num2: null,
num3: null,
num4: null,
num5: null,
num6: null,
num7: null,
};
const alpha = {
num10: null,
num20: null,
num30: null,
num40: null,
num50: null,
num60: null,
num70: null,
num80: null,
num90: null,
};
export const primary = {
self: null,
contrast: null,
dark: num,
light: num,
alpha: alpha,
hover: null,
active: null,
};
export const secondary = {
self: null,
dark: {
num8: null,
num9: null,
num10: null,
num11: null,
num12: null,
num13: null,
...num,
},
light: {
num1: null,
num2: null,
num3: null,
num4: null,
},
alpha: alpha,
button: null,
hover: null,
active: null,
};

View File

@@ -0,0 +1,32 @@
const msg = {
bg: null,
border: null,
text: null,
};
const error = {
...msg,
bg: {
self: null,
active: null,
hover: null,
},
};
const success = {
...msg,
};
const warning = {
...msg,
};
const info = {
...msg,
};
export const message = {
error,
success,
warning,
info,
};

59
src/types/color/named.ts Normal file
View File

@@ -0,0 +1,59 @@
const baseColor = {
self: null,
light: null,
dark: {
num1: null,
num2: null,
},
};
const commitColor = {
/** 提交哈希值颜色 */
badge: {
/** 边框色 */
self: null,
/** 背景色 */
bg: null,
/** 悬停时背景色 */
hover: {
bg: null,
},
},
};
export const named = {
/** 红色/提交警告签名颜色 */
red: {
...commitColor,
...baseColor,
},
/** 橙色/提交未匹配签名颜色 */
orange: {
...commitColor,
...baseColor,
},
/** 黄色/提交未信任签名颜色 */
yellow: {
...commitColor,
...baseColor,
},
olive: baseColor,
/** 绿色/提交信任签名颜色 */
green: {
...commitColor,
...baseColor,
},
teal: baseColor,
blue: baseColor,
violet: baseColor,
purple: baseColor,
pink: baseColor,
brown: baseColor,
black: baseColor,
grey: {
self: null,
light: null,
},
gold: null,
white: null,
};

118
src/types/color/other.ts Normal file
View File

@@ -0,0 +1,118 @@
export const other = {
/** 未知 */
git: null,
/** 主要背景色 */
body: null,
/** 页面底部状态栏背景色 */
footer: null,
/** Issue 等页面时间线的线颜色 */
timeline: null,
/** 一些盒子颜色, 比如仓库文件列表 */
box: {
/** 仓库文件列表最后一次提交, 头行背景色 */
header: null,
body: {
/** 仓库文件列表背景色 */
self: null,
/** diff 按钮行行色 */
highlight: null,
},
},
/** 文本 */
text: {
/** 主文本/主标题颜色 */
self: null,
light: {
/** 普通basic按钮的文本颜色 */
self: null,
/** 仓库文件列表的commit信息和时间文本 */
num1: null,
/** 副标题颜色 */
num2: null,
/** git 提交图里的提交时间文本 */
num3: null,
},
/** 弹窗标题色/一些激活的标题色 */
dark: null,
},
/** 输入框 */
input: {
/** 选中时的文字颜色 */
text: null,
background: null,
/** 找不到, 不知道啥玩意, 似乎是和复选框有关的东西 */
toggleBackgound: "color-input-toggle-background",
border: {
self: null,
hover: null,
},
},
light: {
/** 多行下交替行的强调色, 例提交历史 */
self: null,
/** 不知道什么用, gitea css 中没有使用这个属性的 */
mimicEnabled: "color-light-mimic-enabled",
/** 基础按钮/标签的边框色 */
border: null,
},
hover: {
/** 按钮悬停背景色 */
self: null,
/** 仓库文件列表悬停背景色 */
opaque: null,
},
/** 设置页面菜单项当前项的背景色 */
active: null,
/** 菜单背景色 */
menu: null,
/** 卡片背景色, 但是找不到元素, 可能是个人 README */
card: null,
markup: {
tableRow: "color-markup-table-row",
code: {
block: null,
inline: null,
},
},
button: null,
codeBg: "color-code-bg",
shadow: {
self: null,
opaque: null,
},
secondaryBg: "color-secondary-bg",
expandButton: "color-expand-button",
placeholderText: "color-placeholder-text",
editorLineHighlight: "color-editor-line-highlight",
projectColumnBg: "color-project-column-bg",
caret: null,
reaction: {
bg: null,
hoverBg: "color-reaction-hover-bg",
activeBg: "color-reaction-active-bg",
},
tooltip: {
text: null,
bg: null,
},
nav: {
bg: null,
hoverBg: "color-nav-hover-bg",
text: null,
},
secondaryNavBg: "color-secondary-nav-bg",
/** 标签 */
label: {
text: null,
bg: null,
hoverBg: "color-label-hover-bg",
activeBg: "color-label-active-bg",
},
accent: null,
smallAccent: "color-small-accent",
highlight: {
bg: null,
fg: null,
},
overlayBackdrop: "color-overlay-backdrop",
};

21
src/types/index.ts Normal file
View File

@@ -0,0 +1,21 @@
import type { MapLeafNodes } from "src/core/types";
import * as color from "./color";
/** 主色调 */
export type Primary = MapLeafNodes<typeof color.primary, string>;
/** 副色调 */
export type Secondary = MapLeafNodes<typeof color.secondary, string>;
/** 基础颜色 */
export type Named = MapLeafNodes<typeof color.named, string>;
/** 提示消息 */
export type Message = MapLeafNodes<typeof color.message, string>;
/** Actions 日志 ANSI 颜色 */
export type Ansi = MapLeafNodes<typeof color.ansi, string>;
/** Actions 颜色 */
export type Console = MapLeafNodes<typeof color.console, string>;
/** 代码差异对比颜色 */
export type Diff = MapLeafNodes<typeof color.diff, string>;
/** 其他颜色 */
export type Other = MapLeafNodes<typeof color.other, string>;
/** 仅限本主题的 Github 颜色 */
export type Github = MapLeafNodes<typeof color.github, string>;

38
src/types/vars.ts Normal file
View File

@@ -0,0 +1,38 @@
import { createGlobalThemeContract } from "@vanilla-extract/css";
import * as color from "./color";
export function varMapper(value: string | null, path: string[]) {
if (value === null) {
path = path.filter(item => item !== "self");
path = path.map(item => item.replace(/^num/, ""));
return path.join("-");
}
return value;
}
const vars = {
isDarkTheme: "is-dark-theme",
color: {
...color.other,
...color.message,
...color.named,
primary: color.primary,
secondary: color.secondary,
/** Actions 日志 ANSI 颜色 */
ansi: color.ansi,
console: color.console,
diff: color.diff,
},
github: color.github,
};
const otherVars = {
border: {
radius: null,
},
};
export const themeVars = createGlobalThemeContract(vars, varMapper);
export const otherThemeVars = createGlobalThemeContract(otherVars, varMapper);
export { css } from "@linaria/core";

9
styles/components.scss Normal file
View File

@@ -0,0 +1,9 @@
// Made by Luting ^-^
@use "components/dashboard"; // 首页
@use "components/repo"; // 仓库
@use "components/issue"; // 工单&拉取请求
@use "components/setting"; // 设置
@use "components/release"; // 发布
@use "components/actions"; // 操作
@use "components/heatmap"; // 热力图
@use "components/diff"; // 对比

View File

@@ -0,0 +1,222 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
// 仓库 Actions 页面
export const actions = css`
.page-content.repository.actions .ui.grid {
.four.wide {
border-right: 1px solid ${themeVars.color.light.border};
min-height: calc(-104px + 100vh);
&:before {
content: "Actions";
display: block;
font-size: 20px;
font-weight: 600;
margin-top: 6px;
margin-bottom: 24px;
}
}
.twelve.wide {
&:before {
content: "Workflow Runs";
display: block;
font-size: 20px;
margin-top: 6px;
margin-bottom: 24px;
margin-left: 2px;
}
.ui.secondary.menu {
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};
padding: 16px;
margin-bottom: 0;
.item {
padding: 6px 12px;
}
}
.ui.info.message {
border-radius: 0;
border-left-color: ${themeVars.color.light.border};
border-right-color: ${themeVars.color.light.border};
margin: 0;
~ .run-list {
border-top: 0;
}
}
.run-list {
border: 1px solid ${themeVars.color.light.border};
border-bottom-left-radius: ${otherThemeVars.border.radius};
border-bottom-right-radius: ${otherThemeVars.border.radius};
.flex-item {
padding: 16px;
.flex-item-leading {
align-self: flex-start;
margin-top: 2px;
}
.flex-item-main {
gap: 0.5rem;
}
.flex-item-trailing {
justify-content: space-between;
> .ui.label {
border-radius: ${otherThemeVars.border.radius};
margin-left: 32px;
}
}
}
}
}
}
`;
// 避免手机下左侧工作流项空白过长
export const actionsMedia = css`
@media (max-width: 767.98px) {
.page-content.repository.actions .ui.grid .four.wide {
min-height: auto;
}
}
`;
// 工作流禁用标签
export const label = css`
.ui.vertical.menu .item > .ui.red.label {
color: ${themeVars.color.error.text};
border: 1px solid ${themeVars.color.error.border};
background: ${themeVars.color.error.bg.self};
margin-top: 0.5px;
}
`;
// 手动工作流下拉列表
export const runWorkflow = css`
#runWorkflowDispatchForm {
// 分支选择按钮
.ui.dropdown.button.branch-selector-dropdown .svg.octicon-git-branch {
margin-right: 6px;
}
}
`;
// 工作流左侧作业列表
export const actionViewLeft = css`
.action-view-left {
margin-right: 28px;
border-top: 1px solid ${themeVars.color.console.border};
&:before {
content: "Jobs";
color: ${themeVars.color.console.fg.subtle};
font-size: 12px;
font-weight: 600;
position: relative;
display: inline-block;
margin-top: 22px;
top: -8px;
left: 15px;
}
.job-group-section {
padding-right: 8px;
padding-bottom: 8px;
border-bottom: 1px solid ${themeVars.color.console.border};
.job-brief-item {
border-radius: ${otherThemeVars.border.radius} !important;
padding: 8px;
position: relative;
margin-left: 0.5rem;
&.selected {
&:hover {
background-color: ${themeVars.color.console.hoverBg};
}
&:after {
overflow: visible;
background: ${themeVars.github.bgColor.accent.emphasis};
border-radius: 0.375rem;
content: "";
height: 24px;
left: calc(0.5rem * -1);
position: absolute;
top: calc(50% - 12px);
width: 4px;
}
}
}
}
}
`;
// 工作流右侧作业步骤日志详情
export const actionViewRight = css`
.action-view-right {
/* 提前加载高度和滚动条 */
min-height: calc(100vh - 245px);
.job-info-header {
padding: 16px 12px 16px 24px;
height: auto;
.job-info-header-title {
color: ${themeVars.github.fgColor.accent};
}
.job-info-header-detail {
margin-top: 8px;
}
}
.job-step-container {
.job-step-summary {
color: ${themeVars.color.console.fg.subtle};
padding: 8px 10px;
&.step-expandable:hover {
color: ${themeVars.color.console.fg.subtle};
}
.tw-mr-2:not(.svg) svg.svg {
margin: 1.5px 6px 0px 2px;
}
/* 绿色步骤状态改为白色 */
svg.svg.text.green {
color: ${themeVars.color.console.fg.subtle} !important;
}
&.selected {
/* 不被 hover 效果影响 */
color: ${themeVars.color.console.fg.self} !important;
background-color: ${themeVars.color.console.activeBg} !important;
svg.svg.text.green {
color: ${themeVars.color.console.fg.self} !important;
}
}
}
/* 日志字体颜色白色 */
.job-log-line {
color: ${themeVars.color.console.fg.self};
/* 被 hover 时覆盖 ANSI 颜色 */
.log-msg:hover * {
color: ${themeVars.color.console.fg.self} !important;
}
}
}
}
`;

View File

@@ -0,0 +1,7 @@
// Made by Luting ^-^
.page-content.dashboard {
.flex-item .flex-item-trailing svg {
height: 18px;
width: 18px;
}
}

View File

@@ -0,0 +1,43 @@
import { css, themeVars } from "src/types/vars";
export const diff = css`
/* 折叠行多余的颜色 */
.tag-code {
background-color: unset;
/* 折叠行文本 */
.code-inner {
color: ${themeVars.github.fgColor.muted};
}
}
/* 增加/删除行多余的颜色 */
.code-diff-unified {
.del-code,
.add-code {
background: unset;
border-color: unset;
}
}
/* 增加/删除相关代码背景色圆角 */
.added-code,
.removed-code {
border-radius: 0.1875rem;
color: ${themeVars.github.fgColor.default};
/* 覆盖掉 chroma 的颜色 */
* {
color: ${themeVars.github.fgColor.default} !important;
}
}
/* 展开/收缩按钮 */
.code-expander-button {
height: 24px !important;
line-height: 24px;
&:hover {
background: ${themeVars.github.bgColor.accent.emphasis};
}
}
/* 行号居中 */
.lines-num {
text-align: center !important;
}
`;

View File

@@ -18,33 +18,33 @@
.vch__day__square, .vch__day__square,
.vch__legend__wrapper rect { .vch__legend__wrapper rect {
&[style='fill: var(--color-secondary-alpha-60);'] { &[style="fill: var(--color-secondary-alpha-60);"] {
outline: 1px solid rgba(27, 31, 35, 0.06); outline: 1px solid rgba(27, 31, 35, 0.06);
background: #161b22; background: #161b22;
fill: #161b22 !important; fill: #161b22 !important;
} }
&[style='fill: var(--color-primary-light-4);'] { &[style="fill: var(--color-primary-light-4);"] {
background: #0e4429; background: #0e4429;
fill: #0e4429 !important; fill: #0e4429 !important;
} }
&[style='fill: var(--color-primary-light-2);'] { &[style="fill: var(--color-primary-light-2);"] {
background: #006d32; background: #006d32;
fill: #006d32 !important; fill: #006d32 !important;
} }
&[style='fill: var(--color-primary);'] { &[style="fill: var(--color-primary);"] {
background: #238636; background: #238636;
fill: #238636 !important; fill: #238636 !important;
} }
&[style='fill: var(--color-primary-dark-2);'] { &[style="fill: var(--color-primary-dark-2);"] {
background: #39d353; background: #39d353;
fill: #39d353 !important; fill: #39d353 !important;
} }
&[style='fill: var(--color-primary-dark-4);'] { &[style="fill: var(--color-primary-dark-4);"] {
background: #44ff61; background: #44ff61;
fill: #44ff61 !important; fill: #44ff61 !important;
} }

View File

@@ -0,0 +1,5 @@
// organize-imports-ignore
// tslint:disable:ordered-imports
// 组件导入有顺序, 禁止插件优化
import "./actions";
import "./diff";

View File

@@ -0,0 +1,81 @@
// Made by Luting ^-^
.page-content.repository.releases {
h2 .item {
font-weight: 500;
}
#release-list .release-entry {
.meta {
gap: 2px;
padding-top: 24px;
padding-right: 40px;
text-align: left;
min-width: 0;
flex: 0.125;
a.muted {
color: #9198a1;
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;
}
}
.js-branch-tag-selector {
margin-top: 8px;
}
}
.segment.detail {
p.text.grey {
margin: 16px 0;
.time {
color: #f0f6fc;
}
}
.markup {
> *:first-child {
margin-top: 16px !important;
}
> *:last-child {
margin-bottom: 16px !important;
}
}
}
}
.ui.small.primary.button {
background-color: var(--color-button);
&:hover {
background-color: #262c36;
}
}
}
.page-content.repository.tags {
.tag-list-row .download a.muted:hover {
text-decoration: none;
}
}
.page-content.repository.tags,
.page-content.repository.releases {
.ui.small.menu {
.active.item {
color: #fff;
background: #1f6feb !important;
}
}
}

393
styles/components/repo.scss Normal file
View File

@@ -0,0 +1,393 @@
// Made by Luting ^-^
#navbar {
border-bottom-width: 1.5px;
}
.page-content > :first-child.secondary-nav {
border-top: 0;
background-color: var(--color-nav-bg) !important;
}
// 修复关注&派生 hover 意外点亮右侧 label 左边框
.ui.ui.ui.ui.small.button {
z-index: 0;
}
.secondary-nav > .divider {
border-top-width: 1.5px;
}
// 仓库页面头部名称
.page-content.repository .repo-header {
.ui.compact.button {
padding: 3px 12px;
svg {
color: #9198a1;
}
}
img.ui.avatar {
height: 32px;
width: 32px;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
}
.flex-item {
.flex-item-title {
color: #9198a1;
a {
display: flex;
align-items: center;
color: #f0f6fc;
font-size: 16px;
text-decoration: none !important;
min-width: 3ch;
padding: 6px 8px;
padding-inline: 0.5rem;
padding-block: 6px;
border-radius: 0.375rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
&:hover {
background: #15191f;
}
&.muted:not(.tw-font-normal) {
font-weight: 600;
}
}
}
a:not(.label, .button):hover {
color: #f0f6fc !important;
}
}
}
// 仓库导航栏
.ui.secondary.pointing.menu {
.overflow-menu-items {
gap: 0.5rem;
.item {
padding: 5px 8px !important;
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-bottom: 0.5rem !important;
}
}
.active.item,
.dropdown.item,
.link.item,
a.item {
color: #f0f6fc;
svg {
color: #9198a1;
margin-right: 8px;
}
}
.active.item {
border-color: #ffffff00;
span:after {
background: #f78166;
border-radius: 0.375rem;
bottom: calc(50% - 1.8rem);
content: "";
height: 2px;
position: absolute;
right: 50%;
transform: translate(50%, -50%);
width: 100%;
z-index: 1;
}
}
}
.header-wrapper .ui.tabular.menu,
.ui.secondary.pointing.menu {
.item:hover {
background: #15191f !important;
}
}
// 仓库文件&提交列表
.page-content.repository {
// 顶部提交, 标签, 分支
.repository-summary .segment.sub-menu {
&.ui.segment {
background-color: var(--color-box-header);
}
.item {
color: #9198a1;
b {
color: #f0f6fc;
margin: 0 2px;
}
}
}
// clone 按钮调整
.repo-button-row .repo-button-row-right .ui.primary.button span {
margin: 0px 3px;
}
// 提交的Action状态
.commit-list,
#repo-files-table {
.flex-text-inline:not(img) {
padding: 6px;
border-radius: var(--border-radius);
margin-right: 6px;
&:hover {
background-color: var(--color-hover);
}
}
}
}
// 仓库文件列表
.repository.file.list {
#repo-files-table {
// 头部最后一次提交
.repo-file-line {
padding-right: 16px;
&.parent-link {
gap: 0.5rem;
padding-left: 16px;
svg {
margin-right: 2px;
}
&:hover {
background-color: var(--color-box-header);
}
}
&.repo-file-last-commit {
height: 3.725rem;
.latest-commit {
.commit-summary {
color: #9198a1;
}
img.tw-align-middle {
margin-top: -1px;
margin-left: 1px;
margin-right: 8px !important;
}
.author-wrapper {
margin-right: 6px;
&:hover {
color: var(--color-text);
}
}
.ui.label {
display: none;
}
}
}
}
// 文件列表
.repo-file-item {
.repo-file-cell {
&.name {
display: flex;
align-items: center;
gap: 0.5rem;
padding-left: 16px;
}
&.age {
padding-right: 16px;
}
}
.svg.octicon-file-directory-fill,
.svg.octicon-file-submodule {
color: #7d8590;
}
// 整行背景颜色效果
&:hover .repo-file-cell {
background-color: var(--color-box-header) !important;
}
}
}
}
.repository #commits-table {
.author {
a {
color: var(--color-text);
}
img {
margin-right: 8px !important;
}
}
.text.right.aligned {
color: #919894;
}
}
// 手机下隐藏提交信息
@media (max-width: 767.98px) {
#repo-files-table {
grid-template-columns: 1fr auto;
.repo-file-line {
grid-column: 1 / span 2;
}
.repo-file-cell {
&.name {
max-width: none;
}
&.message {
display: none;
}
}
}
}
// 仓库代码布局调整, 侧边栏宽度调整
.repo-grid-filelist-sidebar {
grid-template-columns: auto 296px;
}
@media (max-width: 767.98px) {
.repo-grid-filelist-sidebar {
grid-template-columns: 100%;
}
}
// 仓库代码页面侧边栏
.page-content.repository {
.repo-home-sidebar-top {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 10px 0 0 0;
.flex-item-title {
margin-top: 2px;
}
.flex-item-body {
padding: 8px 0 0 0;
.repo-description {
color: #f0f6fc;
}
#repo-topics {
margin: 10px 0px !important;
.repo-topic.ui.label {
font-size: 12px;
padding: 5px 10px;
margin: 0px 1.5px 3.5px 0px;
}
}
.flex-text-block {
font-size: 14px;
font-weight: 600;
margin-top: 10px;
&.muted {
margin-top: 2px;
font-weight: normal;
}
svg.svg {
margin-right: 4px;
&.octicon-database,
&.octicon-law {
margin-right: 6px;
}
}
}
}
}
}
.repo-home-sidebar-bottom {
a.muted:hover {
text-decoration: none;
}
.flex-item {
padding: 16px 0;
.flex-item {
padding: 16px 0 0 0;
.flex-item-icon {
svg.svg.octicon-tag {
color: #3fb950;
margin-top: 2px;
}
}
.flex-item-header .flex-item-title {
font-size: 14px;
}
}
.flex-item-title .ui.small.label {
background: var(--color-label-bg);
color: var(--color-label-text);
}
.flex-item-body {
font-size: 12px;
}
}
// 编程语言
.language-stats {
height: 8px;
margin-bottom: 0px;
}
.language-stats-details .item {
font-size: 12px;
margin-right: 16px;
.color-icon {
height: 8px;
width: 8px;
margin-right: 8px;
}
.tw-font-semibold {
color: #f0f6fc;
margin-right: 2px;
}
}
}
}

View File

@@ -4,12 +4,12 @@
%active-item-after-style { %active-item-after-style {
background: #1f6feb; background: #1f6feb;
border-radius: 0.375rem; border-radius: 0.375rem;
content: ''; content: "";
height: 1.8rem; height: 24px;
left: calc(0.5rem * -1); left: calc(0.5rem * -1);
position: absolute; position: absolute;
top: calc(50% - 13px); top: calc(50% - 12px);
width: 0.25rem; width: 4px;
} }
.ui.vertical.menu { .ui.vertical.menu {
@@ -31,9 +31,8 @@
.item, .item,
.item > summary { .item > summary {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 500;
background: unset; background: unset;
padding: 8px; padding: 6px 8px;
color: var(--color-white) !important; color: var(--color-white) !important;
} }
@@ -41,6 +40,11 @@
background: unset; background: unset;
} }
.active.item,
.active.item > summary {
font-weight: 600;
}
.active.item:after { .active.item:after {
@extend %active-item-after-style; @extend %active-item-after-style;
} }
@@ -48,6 +52,7 @@
details { details {
&:has(.active.item) { &:has(.active.item) {
> summary { > summary {
font-weight: 600;
background: #161a21; background: #161a21;
&:hover { &:hover {
@@ -55,6 +60,10 @@
} }
} }
.active.item {
font-weight: 400;
}
&[open] { &[open] {
> summary { > summary {
background: unset; background: unset;
@@ -118,4 +127,46 @@
.ui.attached.segment.error { .ui.attached.segment.error {
border: 1px solid var(--color-error-border) !important; border: 1px solid var(--color-error-border) !important;
} }
input,
textarea,
.ui.input input,
.ui.form input:not([type]),
.ui.form select,
.ui.form textarea,
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.selection.dropdown {
background: var(--color-box-header);
}
.ui.form input:not([type]),
.ui.form select,
.ui.form textarea,
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"] {
padding: 7px 12px;
}
.ui.selection.dropdown {
padding: 7px 24px 7px 12px;
}
} }

5
styles/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
// organize-imports-ignore
// tslint:disable:ordered-imports
// 组件导入有顺序, 禁止插件优化
import "./public";
import "./components";

13
styles/public.scss Normal file
View File

@@ -0,0 +1,13 @@
// Made by Luting ^-^
@use "public/chroma"; // 代码高亮
@use "public/codemirror";
@use "public/emoji";
@use "public/transition"; // 添加过渡动画
@use "public/modal"; // 弹窗
@use "public/input"; // 输入框
@use "public/button"; // 按钮
@use "public/label"; // 标签
@use "public/dropdown"; // 下拉菜单
@use "public/svg"; // svg
@use "public/fontcolor"; // 字体颜色
@use "public/radius"; // 圆角

View File

@@ -1,4 +1,9 @@
// Made by Luting ^-^ // Made by Luting ^-^
.ui.button {
min-height: 30px;
font-weight: 500;
padding: 9px 16px;
}
.ui.primary.button { .ui.primary.button {
background-color: #238636; background-color: #238636;
&:hover { &:hover {
@@ -31,8 +36,8 @@
} }
.ui.button.branch-dropdown-button { .ui.button.branch-dropdown-button {
padding: 6px 12px; padding: 3px 12px;
min-height: 28px; min-height: 30px;
} }
.ui.menu button.item:hover { .ui.menu button.item:hover {

277
styles/public/chroma.tsx Normal file
View File

@@ -0,0 +1,277 @@
import { css } from "src/types/vars";
export const chroma = css`
.chroma {
background-color: var(--color-code-bg);
.lntd {
vertical-align: top;
border: 0;
margin: 0;
padding: 0;
}
.lntable {
border-spacing: 0;
border: 0;
width: auto;
margin: 0;
padding: 0;
display: block;
overflow: auto;
}
.hl {
width: 100%;
display: block;
}
.lnt,
.ln {
margin-right: 0.4em;
padding: 0 0.4em;
}
.gs {
font-weight: var(--font-weight-semibold);
}
.gl {
text-decoration: underline;
}
.bp {
color: #fabd2f;
}
.c,
.c1,
.ch,
.cm {
color: #777e94;
}
.cp {
color: #8ec07c;
}
.cpf {
color: #79c0ff;
}
.cs {
color: #9075cd;
}
.dl {
color: #79c0ff;
}
.gd {
color: #fff;
background-color: #5f3737;
}
.ge {
color: #ddee30;
}
.gh {
color: #ffaa10;
}
.gi {
color: #fff;
background-color: #3a523a;
}
.go {
color: #777e94;
}
.gp {
color: #ebdbb2;
}
.gr {
color: #f43;
}
.gs {
color: #ebdbb2;
}
.gt {
color: #7ee787;
}
.gu {
color: #a5d6ff;
}
.il {
color: #79c0ff;
}
.k {
color: #ff7b72;
}
.kc {
color: #79c0ff;
}
.kd {
color: #ff7b72;
}
.kn {
color: #ff7b72;
}
.kp {
color: #5f8700;
}
.kr {
color: #7ee787;
}
.kt {
color: #ff7b72;
}
.m,
.mb,
.mf,
.mh,
.mi,
.mo {
color: #79c0ff;
}
.n {
color: #c9d1d9;
}
.na {
color: #d2a8ff;
}
.nb {
color: #a5d6ff;
}
.nc {
color: #e6edf3;
}
.nd {
color: #79c0ff;
}
.ne {
color: #7ee787;
}
.nf,
.ni {
color: #d2a8ff;
}
.nl {
color: #7ee787;
}
.nn {
color: #e6edf3;
}
.no {
color: #79c0ff;
}
.nt {
color: #7ee787;
}
.nv {
color: #ebdbb2;
}
.nx {
color: #b6bac5;
}
.o {
color: #7ee787;
}
.ow {
color: #5f8700;
}
.p {
color: #d2d4db;
}
.s,
.s1,
.s2 {
color: #a5d6ff;
}
.sa {
color: #79c0ff;
}
.sb {
color: #a5d6ff;
}
.sc {
color: #79c0ff;
}
.sd {
color: #777e94;
}
.se {
color: #7ee787;
}
.sh {
color: #79c0ff;
}
.si {
color: #ffaa10;
}
.sr {
color: #9075cd;
}
.ss {
color: #7ee787;
}
.sx {
color: #ffaa10;
}
.vc {
color: #7ee787;
}
.vg,
.vi {
color: #ffaa10;
}
.w {
color: #7f8699;
}
}
`;

View File

@@ -1,4 +1,4 @@
// Made by Luting ^-^ // Made by Rainnny <3
.CodeMirror.cm-s-default, .CodeMirror.cm-s-default,
.CodeMirror.cm-s-paper { .CodeMirror.cm-s-paper {
.cm-property { .cm-property {

222
styles/public/dropdown.scss Normal file
View File

@@ -0,0 +1,222 @@
// Made by Luting ^-^
// 下拉菜单动画
@keyframes overlay-appear {
0% {
opacity: 0;
transform: translateY(-12px);
}
35% {
transform: translateY(-2px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
// clone 下拉菜单
.tippy-box {
margin-top: -3px;
background: var(--color-box-header);
border-radius: 12px;
overflow: hidden;
box-shadow:
0px 0px 0px 0.5px #30363d,
0px 6px 12px -3px rgba(1, 4, 9, 0.4),
0px 6px 18px 0px rgba(1, 4, 9, 0.4);
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
.clone-panel-field {
margin-top: 16px;
}
.flex-text-block.clone-panel-field {
color: #fff;
font-weight: bold;
margin-left: 16px;
}
.clone-panel-tab {
margin-left: 16px;
button {
color: #f0f6fc !important;
font-weight: 600;
padding: 6px 8px;
margin: 8px 0;
&:hover {
background: var(--color-hover);
border-radius: var(--border-radius);
}
&.active:after {
content: "";
display: block;
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 2px;
background: #f78166;
}
}
.item.active {
border-bottom: 0;
position: relative;
}
}
.flex-items-block {
margin: 0;
.item {
display: block;
padding: 8px 10px;
text-align: left;
text-transform: none;
line-height: 1em;
margin: 0;
svg {
margin-right: 0.5rem;
}
}
> .item:hover {
color: var(--color-text);
text-decoration: none;
background: var(--color-hover);
}
}
}
// 下拉菜单
.ui.dropdown .menu {
margin-top: 3.75px !important;
border-radius: 12px !important;
overflow: hidden auto;
box-shadow:
0px 0px 0px 0.5px #30363d,
0px 6px 12px -3px #01040966,
0px 6px 18px 0px #01040966;
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
> .item {
padding: 8px 10px !important;
}
}
.ui.dropdown .menu,
.branch-tag-item.active,
.ui.pointing.dropdown > .menu:not(.hidden):after {
background: var(--color-box-header) !important;
}
%item-style {
background: #1f6feb;
}
.ui.dropdown .menu > .item.context:hover {
@extend %item-style;
}
.user-main-content,
.repo-setting-content,
.user-setting-content,
.org-setting-content,
.admin-setting-content {
.ui.dropdown .menu > .item {
&:hover {
@extend %item-style;
a {
color: var(--color-text);
}
}
}
}
// 按钮菜单选项(主要为仓库)
.tippy-box .flex-items-block,
.ui.dropdown > .visible.menu .scrolling.menu,
.ui.button.dropdown .menu {
.item {
display: flex;
align-items: center;
border-radius: var(--border-radius);
margin: 0 8px;
&:first-of-type {
border-radius: var(--border-radius);
margin-top: 8px;
}
&:last-of-type {
border-radius: var(--border-radius);
margin-bottom: 8px;
}
}
}
// 下拉菜单分隔线
.ui.dropdown .menu > .divider {
border: 0;
height: 1px;
background-color: #3d444db3;
margin-top: calc(7px);
margin-bottom: 8px;
list-style: none;
}
.ui.dropdown.branch-selector-dropdown > .visible.menu {
// 仓库分支列表下查看操作按钮
> .item {
display: flex;
align-items: center;
border-radius: var(--border-radius);
margin: 8px;
padding: 6px 8px !important;
}
.scrolling.menu .item {
padding: 6px 16px !important;
// 分支菜单下划线
&:before {
content: " ";
display: block;
position: absolute;
width: 100%;
top: 0px;
left: 0px;
border-width: 1px 0px 0px;
border-style: solid;
border-image: initial;
border-color: #3d444db3;
}
&:first-of-type:before {
border-color: transparent;
}
&:hover {
&:before {
border-color: transparent;
}
+ :before {
border-color: transparent;
}
}
.ui.label {
margin-top: 1px;
margin-left: auto;
margin-right: 0;
}
}
}

23
styles/public/emoji.scss Normal file
View File

@@ -0,0 +1,23 @@
// Made by Luting ^-^
.emoji[aria-label="check\\ mark"],
.emoji[aria-label="currency\\ exchange"],
.emoji[aria-label="TOP\\ arrow"],
.emoji[aria-label="END\\ arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON\\ arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade\\ mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly\\ loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy\\ dash"],
.emoji[aria-label="paw\\ prints"],
.emoji[aria-label="musical\\ note"],
.emoji[aria-label="musical\\ notes"] {
filter: invert(100%) hue-rotate(180deg);
}

View File

@@ -0,0 +1,11 @@
// Made by Luting ^-^
.lines-num span:after {
color: var(--color-text);
}
.ui.cards > .card,
.ui.card {
> .extra a:not(.ui):hover {
color: var(--color-blue);
}
}

4
styles/public/index.tsx Normal file
View File

@@ -0,0 +1,4 @@
// organize-imports-ignore
// tslint:disable:ordered-imports
// 组件导入有顺序, 禁止插件优化
import "./chroma";

34
styles/public/input.scss Normal file
View File

@@ -0,0 +1,34 @@
// Made by Luting ^-^
input,
textarea,
.ui.input input,
.ui.form input:not([type]),
.ui.form select,
.ui.form textarea,
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.selection.dropdown {
background: unset;
&:hover {
background: unset;
}
&:focus,
&:focus-visible {
background: unset !important;
border-radius: var(--border-radius);
border-color: #1f6feb;
outline: none;
box-shadow: inset 0 0 0 1px #1f6feb;
}
}

View File

@@ -9,14 +9,12 @@ a.ui.basic.label:hover {
border-color: var(--color-light-border); border-color: var(--color-light-border);
} }
.ui.basic.label.not-mobile, span,
.ui.basic.label.role-label, .org-visibility div {
.page-content.dashboard.feeds .ui.basic.label, &.ui.basic.label {
.page-content.explore .ui.basic.label, border-radius: 25px;
.page-content.organization .ui.basic.label, background-color: unset;
.admin-setting-content .ui.basic.label { }
border-radius: 25px;
background-color: unset;
} }
.badge.tw-bg-green, .badge.tw-bg-green,
@@ -47,14 +45,12 @@ a.ui.basic.label:hover {
color: var(--color-blue); color: var(--color-blue);
background-color: #388bfd33; background-color: #388bfd33;
border: 1px solid var(--color-blue); border: 1px solid var(--color-blue);
border-radius: 25px;
} }
&.basic.primary.label { &.basic.primary.label {
color: var(--color-blue); color: var(--color-blue);
background-color: #388bfd33 !important; background-color: #388bfd33 !important;
border-color: #1f6feb !important; border-color: #1f6feb !important;
border-radius: 25px !important;
} }
// 发布&Runner 状态标签 // 发布&Runner 状态标签
@@ -105,7 +101,7 @@ a.ui.ui.ui {
} }
} }
&:not(.basic, .sha) { &:not(.basic, .sha, .commit-id-short, .commit-sign-badge) {
color: var(--color-blue); color: var(--color-blue);
background: #121d2f; background: #121d2f;
border-radius: 25px; border-radius: 25px;
@@ -141,7 +137,7 @@ a.ui.ui.ui {
opacity: 1; opacity: 1;
} }
} }
a.ui.label:not(.basic, .sha):hover { a.ui.label:not(.basic, .sha, .commit-id-short, .commit-sign-badge):hover {
color: #fff; color: #fff;
background: #1f6feb; background: #1f6feb;
border-radius: 25px; border-radius: 25px;
@@ -150,35 +146,9 @@ a.ui.label:not(.basic, .sha):hover {
border: 0 !important; border: 0 !important;
} }
.repository #commits-table .commit-list .ui.label.sha { .repository #commits-table .commit-list .sha .ui.label {
line-height: 18px; line-height: 18px;
margin-top: 0.375rem; margin-top: 0.375rem;
margin-bottom: 0.375rem; margin-bottom: 0.375rem;
margin-left: -2px; margin-left: -2px;
} }
.repository {
#commits-table td.sha,
#repo-files-table,
#repo-file-commit-box,
#rev-list,
.timeline-item.commits-list .singular-commit {
.sha.label {
.detail.icon {
border: 0;
background: unset;
}
&.isSigned {
&.isWarning,
&.isVerified,
&.isVerifiedUntrusted,
&.isVerifiedUnmatched {
.detail.icon {
border: 0;
background: unset;
}
}
}
}
}
}

45
styles/public/modal.scss Normal file
View File

@@ -0,0 +1,45 @@
// Made by Luting ^-^
.ui.modal {
border: 1.5px solid var(--color-light-border);
> .header {
background-color: var(--color-box-header);
border-bottom: 1.5px solid var(--color-light-border);
}
> .content,
form > .content {
background-color: var(--color-box-header);
}
> .actions,
.content + .actions,
.content + form > .actions {
background-color: var(--color-box-header);
border-top: 1.5px solid var(--color-light-border);
}
input,
textarea,
.ui.input input,
.ui.form input:not([type]),
.ui.form select,
.ui.form textarea,
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.selection.dropdown {
&:focus,
&:focus-visible {
background: #0d1117 !important;
}
}
}

View File

@@ -1,23 +1,23 @@
// Made by Luting ^-^
.ui { .ui {
&.button, &.button,
&.basic.buttons .button, &.basic.buttons .button,
&.basic.button, &.basic.button,
&.dropdown .menu, &.dropdown .menu,
&.form input:not([type]), &.form input:not([type]),
&.form input[type='date'], &.form input[type="date"],
&.form input[type='datetime-local'], &.form input[type="datetime-local"],
&.form input[type='email'], &.form input[type="email"],
&.form input[type='number'], &.form input[type="number"],
&.form input[type='password'], &.form input[type="password"],
&.form input[type='search'], &.form input[type="search"],
&.form input[type='tel'], &.form input[type="tel"],
&.form input[type='time'], &.form input[type="time"],
&.form input[type='text'], &.form input[type="text"],
&.form input[type='file'], &.form input[type="file"],
&.form input[type='url'], &.form input[type="url"],
&.form textarea, &.form textarea,
&.input textarea, &.input textarea,
&.ui.input > input,
&.label, &.label,
&.menu, &.menu,
&.segment, &.segment,
@@ -41,7 +41,7 @@
} }
} }
// 左边框圆角 /* 左边框圆角 */
.ui { .ui {
&.action.input > .dropdown:first-child, &.action.input > .dropdown:first-child,
&.action.input > .button:first-child, &.action.input > .button:first-child,
@@ -52,7 +52,7 @@
} }
} }
// 右边框圆角 /* 右边框圆角 */
.ui { .ui {
&.action.input > .dropdown:last-child, &.action.input > .dropdown:last-child,
&.action.input > .button:last-child, &.action.input > .button:last-child,
@@ -63,7 +63,7 @@
} }
} }
// 上边框圆角 /* 上边框圆角 */
.ui.secondary.pointing.menu { .ui.secondary.pointing.menu {
.active.item, .active.item,
.item:hover { .item:hover {
@@ -77,13 +77,13 @@
border-top-right-radius: var(--border-radius) !important; border-top-right-radius: var(--border-radius) !important;
} }
// 按钮边框圆角 /* 按钮边框圆角 */
.ui.active.selection.dropdown { .ui.active.selection.dropdown {
border-bottom-left-radius: var(--border-radius) !important; border-bottom-left-radius: var(--border-radius) !important;
border-bottom-right-radius: var(--border-radius) !important; border-bottom-right-radius: var(--border-radius) !important;
} }
.ui.segment[class*='bottom attached'] { .ui.segment[class*="bottom attached"] {
border-radius: 0 0 var(--border-radius) var(--border-radius); border-radius: 0 0 var(--border-radius) var(--border-radius);
} }

View File

@@ -1,9 +1,15 @@
// Made by Luting ^-^
.text { .text {
.purple { .purple {
color: #ab7df8 !important; color: #ab7df8 !important;
} }
.green { .green {
color: #3fb950 !important; color: #3fb950 !important;
} }
} }
.svg {
&.octicon-issue-closed {
color: #ab7df8 !important;
}
}

View File

@@ -0,0 +1,45 @@
// Made by Luting ^-^
@keyframes overlay-appear {
0% {
opacity: 0;
transform: translateY(-12px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#navbar .item,
.header-wrapper .ui.tabular.menu .item,
.job-step-summary,
.job-step-logs,
.job-brief-item,
.tippy-box .flex-items-block .item,
.clone-panel-tab .item,
.ui.form select,
.ui.label,
.ui.modal,
.ui.selection.dropdown,
.ui.checkbox label:before,
.ui.checkbox input:checked ~ label:before,
.ui.checkbox input:not([type="radio"]):indeterminate ~ label:before,
.ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover,
.ui.selection.active.dropdown .menu,
.ui.selection.active.dropdown:hover .menu,
.ui.vertical.menu .header.item,
.ui.secondary.menu .item {
transition: 0.12s ease-out;
}
textarea,
.ui.form input,
.menu .item,
.ui.modal,
.job-step-summary,
.job-step-logs,
.job-brief-item {
animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running overlay-appear;
}

250
themes/dark.css.tsx Normal file
View File

@@ -0,0 +1,250 @@
import type { Console, Diff, Other } from "src";
import { defineTheme, themeVars } from "src";
const isDarkTheme = true;
const github = {
display: {
brown: { fgColor: "#b69a6d" },
cyan: { fgColor: "#07ace4" },
indigo: { fgColor: "#9899ec" },
lemon: { fgColor: "#ba9b12" },
olive: { fgColor: "#a2a626" },
teal: { fgColor: "#1cb0ab" },
},
diffBlob: {
addtionNum: { bgColor: "#3fb9504d" },
addtionWord: { bgColor: "#2ea04366" },
deletionNum: { bgColor: "#f851494d" },
deletionWord: { bgColor: "#f8514966" },
hunkNum: { bgColor: { rest: "#0c2d6b" } },
},
fgColor: {
accent: "#4493f8",
attention: "#d29922",
danger: "#f85149",
default: "#f0f6fc",
disabled: "#656c7699",
done: "#ab7df8",
neutral: "#9198a1",
severe: "#db6d28",
sponsors: "#db61a2",
success: "#3fb950",
black: "#010409",
white: "#ffffff",
muted: "#9198a1",
},
bgColor: {
accent: {
emphasis: "#1f6feb",
muted: "#388bfd1a",
},
attention: {
muted: "#bb800926",
},
success: {
muted: "#2ea04326",
},
danger: {
muted: "#f851491a",
},
default: "#0d1117",
inset: "#010409",
muted: "#151b23",
},
borderColor: {
default: "#3d444d",
muted: "#3d444db3",
},
control: {
bgColor: {
active: "#2a313c",
hover: "#262c36",
},
transparent: {
bgColor: {
selected: "#656c761a",
hover: "#656c7633",
},
},
},
};
const console: Console = {
fg: {
self: github.fgColor.default,
subtle: github.fgColor.muted,
},
bg: github.bgColor.inset,
border: github.borderColor.muted,
activeBg: github.control.bgColor.active,
hoverBg: github.control.transparent.bgColor.hover,
menu: {
bg: github.bgColor.inset,
border: github.borderColor.muted,
},
};
const diff: Diff = {
added: {
linenum: {
bg: github.diffBlob.addtionNum.bgColor,
},
row: {
bg: github.bgColor.success.muted,
border: github.bgColor.success.muted,
},
word: {
bg: github.diffBlob.addtionWord.bgColor,
},
},
removed: {
linenum: {
bg: github.diffBlob.deletionNum.bgColor,
},
row: {
bg: github.bgColor.danger.muted,
border: github.bgColor.danger.muted,
},
word: {
bg: github.diffBlob.deletionWord.bgColor,
},
},
moved: {
row: {
bg: github.bgColor.attention.muted,
border: github.bgColor.attention.muted,
},
},
inactive: github.bgColor.muted,
};
const other: Other = {
git: "#f05133",
body: github.bgColor.default,
box: {
header: github.bgColor.muted,
body: {
self: themeVars.color.body,
highlight: github.bgColor.accent.muted,
},
},
text: {
self: github.fgColor.default,
light: {
self: github.fgColor.default,
num1: github.fgColor.muted,
num2: github.fgColor.muted,
num3: github.fgColor.muted,
},
dark: github.fgColor.default,
},
footer: github.bgColor.inset,
timeline: github.borderColor.muted,
input: {
text: themeVars.color.text.self,
background: themeVars.color.body,
toggleBackgound: themeVars.color.body,
border: {
self: themeVars.color.light.border,
hover: themeVars.color.light.border,
},
},
light: {
self: themeVars.color.body,
mimicEnabled: "rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)))",
border: github.borderColor.default,
},
hover: {
self: github.control.bgColor.hover,
opaque: themeVars.color.box.header,
},
active: github.control.transparent.bgColor.selected,
menu: themeVars.color.body, // 此菜单项涉及太多, 不仅仅是下拉菜单, 默认使用 body 颜色
card: themeVars.color.body,
markup: {
tableRow: "#ffffff06",
code: {
block: "#ffffff16",
inline: "#ffffff26",
},
},
button: "#212830",
codeBg: "#0d1117",
shadow: {
self: "#00000060",
opaque: "#00000080",
},
secondaryBg: "#ffffff26",
expandButton: github.diffBlob.hunkNum.bgColor.rest,
placeholderText: "#8a8e99",
editorLineHighlight: themeVars.color.primary.light.num5,
projectColumnBg: themeVars.color.secondary.light.num2,
caret: themeVars.color.text.self,
reaction: {
bg: "#ffffff12",
hoverBg: themeVars.color.primary.light.num4,
activeBg: themeVars.color.primary.light.num5,
},
tooltip: {
text: "#fff",
bg: "#000000f0",
},
nav: {
bg: github.bgColor.inset,
hoverBg: themeVars.color.hover.self,
text: themeVars.color.text.self,
},
secondaryNavBg: themeVars.color.nav.bg,
label: {
text: "#fff",
bg: "#7c84974b",
hoverBg: "#7c8497a0",
activeBg: "#7c8497",
},
accent: themeVars.color.primary.light.num1,
smallAccent: themeVars.color.primary.light.num5,
highlight: {
bg: "#87651e",
fg: "#352c1c",
},
overlayBackdrop: "#080808c0",
};
export default defineTheme({
isDarkTheme,
primary: github.fgColor.accent,
primaryContrast: github.fgColor.default,
secondary: "#3d444d",
red: github.fgColor.danger,
orange: github.fgColor.severe,
yellow: github.fgColor.attention,
olive: github.display.olive.fgColor,
green: github.fgColor.success,
cyan: github.display.cyan.fgColor,
teal: github.display.teal.fgColor,
blue: github.fgColor.accent,
violet: github.display.indigo.fgColor,
purple: github.fgColor.done,
pink: github.fgColor.sponsors,
brown: github.display.brown.fgColor,
black: github.fgColor.black,
grey: github.fgColor.neutral,
gold: github.display.lemon.fgColor,
white: github.fgColor.white,
console,
diff,
other,
github: {
fgColor: {
accent: github.fgColor.accent,
default: github.fgColor.default,
muted: github.fgColor.muted,
},
bgColor: {
accent: {
emphasis: github.bgColor.accent.emphasis,
},
},
},
});

38
tsconfig.json Normal file
View File

@@ -0,0 +1,38 @@
{
"compilerOptions": {
"plugins": [
{
"name": "typescript-plugin-css-modules"
}
],
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"useDefineForClassFields": true,
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": {
"src/*": ["src/*"],
"styles/*": ["styles/*"],
"themes/*": ["themes/*", "themes/*.css"]
}
},
"include": ["src", "styles", "themes", "vite.config.ts"]
}

63
vite.config.ts Normal file
View File

@@ -0,0 +1,63 @@
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import react from "@vitejs/plugin-react";
import linaria from "@wyw-in-js/vite";
import * as dotenv from "dotenv";
import { Features } from "lightningcss";
import { createRequire } from "node:module";
import path from "node:path";
import * as sass from "sass-embedded";
import { defineConfig } from "vite";
import { themeInput, themePlugin } from "./src/core/vite";
dotenv.config({ quiet: true });
const require = createRequire(import.meta.url);
const outDir = "dist"; // 输出目录
const themesDir = "themes"; // 颜色主题目录
export default defineConfig(({ mode }) => {
return {
resolve: {
alias: {
src: path.resolve(__dirname, "src"),
styles: path.resolve(__dirname, "styles"),
themes: path.resolve(__dirname, "themes"),
},
extensions: [".js", ".jsx", ".ts", ".tsx", ".css.tsx"],
},
css: {
transformer: "lightningcss",
lightningcss: {
minify: true,
exclude: Features.LightDark, // 不生成 lightningcss 的主题变量
},
},
plugins: [
linaria({
include: ["**/*.{ts,tsx}"],
babelOptions: {
presets: ["@babel/preset-typescript", "@babel/preset-react"],
},
preprocessor: (_selector, cssText) => sass.compileString(cssText).css, // 默认为全局样式并使用 sass-embedded 预处理 css
tagResolver: (source, tag) =>
// 识别从 src 导出的 css 标签,使用 @linaria/core/processors/css 处理
source === "src/types/vars" && tag === "css" ? require.resolve("@linaria/core/processors/css") : null,
}),
react(),
vanillaExtractPlugin(),
themePlugin(),
],
build: {
cssMinify: "lightningcss",
cssCodeSplit: true,
outDir: outDir,
rollupOptions: {
input: themeInput(outDir, themesDir, mode),
output: {
assetFileNames: "[name].[ext]",
},
},
},
};
});