mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-26 21:20:31 +00:00
Compare commits
16 Commits
c6d132ef0a
...
v1.24.2.25
| Author | SHA1 | Date | |
|---|---|---|---|
|
4b2916a75b | ||
|
|
5116ca5cae | ||
|
|
15076d2996 | ||
|
|
dc6605d780 | ||
|
|
3b0f481be7 | ||
|
|
0f8bfe6201 | ||
|
|
6421704cda | ||
|
|
02ac10ecfc | ||
|
|
aa023116ae | ||
|
|
a6efed8f03 | ||
|
|
98446a9bb3 | ||
|
|
7fe76d6444 | ||
|
|
ce1bc3b762 | ||
|
|
f68ad71ddb | ||
|
|
49b08975d2 | ||
|
|
ee455ac255 |
41
.github/release.md
vendored
41
.github/release.md
vendored
@@ -2,41 +2,18 @@
|
||||
|
||||
#### 更符合 GitHub 风格
|
||||
|
||||
- 代码差异对比折叠行文本颜色同步
|
||||
- 代码差异对比行号位置同步
|
||||
- 代码差异对比按钮和折叠行高度同步
|
||||
- Actions 日志页面标题颜色同步
|
||||
- Actions 日志页面设置菜单背景色同步
|
||||
- 菜单背景色同步当前最新颜色
|
||||
- Markdown 背景色同步
|
||||
- 补充 Markdown 代码块背景色
|
||||
- 弹窗阴影颜色同步
|
||||
- 仓库项目页面列背景色同步
|
||||
- Issue/PR 表情背景色同步
|
||||
- 普通按钮激活背景色同步
|
||||
- 主色调按钮边框色同步
|
||||
- 设置界面右上角小按钮样式同步
|
||||
- 弹窗背景色和叠加背景色同步
|
||||
- 全局圆角样式同步
|
||||
- 工单标签颜色同步
|
||||
- 提交列表样式和颜色同步
|
||||
- 提交 SHA 颜色和样式优化
|
||||
- 软件包标签颜色同步
|
||||
- Issue/PR 评论边框样式同步
|
||||
- 导航栏右侧按钮和头像颜色和样式同步
|
||||
|
||||
## 🎈 Perf
|
||||
|
||||
- Actions 日志页面标题间隔优化
|
||||
- 管理员后台按钮样式优化
|
||||
- 信息提示颜色优化
|
||||
- 修复意外点亮其他页面关闭图标的颜色
|
||||
- 统一全局标签圆角
|
||||
- 仪表板动态信息图标大小优化
|
||||
- Runner 列表标签颜色优化
|
||||
- 仓库动态活动标签样式统一
|
||||
- 合并请求分支样式统一
|
||||
- 优化输入框高度
|
||||
- 优化二级菜单按钮高度
|
||||
- 优化提交/分支/标签统计栏的激活颜色
|
||||
|
||||
## 🐞 Fix
|
||||
|
||||
- 修复代码差异对比分列视图下颜色丢失
|
||||
- 修复 Runner 状态离线时标签
|
||||
- 修复多个标签组合的范围标签圆角 #4
|
||||
- 修复探索/组织/用户页下的仓库主题标签样式
|
||||
- 修复仓库标签页右侧按钮大小
|
||||
- 修复管理员页面 Runner 任务状态标签的边框色
|
||||
- 修复 Actions 页面下的分支标签按钮颜色
|
||||
1
.github/todo.md
vendored
Normal file
1
.github/todo.md
vendored
Normal file
@@ -0,0 +1 @@
|
||||
action 下的分支标签颜色
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
## 安装
|
||||
|
||||
1. 在发布页下载最新的 `theme-github.css` 放入 `gitea/public/assets/css` 目录下
|
||||
1. 在发布页下载最新的 `theme-github-dark.css` 放入 `gitea/public/assets/css` 目录下
|
||||
2. 修改 `gitea/conf/app.ini`，并将 `, github` 附加到 `[ui]` 下的 `THEMES` 末尾
|
||||
3. 重启 Gitea
|
||||
4. 在设置中查看主题
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
```ini
|
||||
[ui]
|
||||
THEMES = gitea-dark, github
|
||||
THEMES = gitea-dark, github-dark
|
||||
```
|
||||
|
||||
详细请查看 Gitea 文档
|
||||
|
||||
@@ -62,5 +62,8 @@
|
||||
"prettier-plugin-organize-imports"
|
||||
],
|
||||
"organizeImportsSkipDestructiveCodeActions": false
|
||||
},
|
||||
"dependencies": {
|
||||
"typescript-styled-plugin": "^0.18.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -161,7 +161,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
const named: Named = {
|
||||
red: {
|
||||
self: themeColor.red,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 10) : scaleColorLight(themeColor.red, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.red, 15) : scaleColorLight(themeColor.red, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.red, -10),
|
||||
num2: scaleColorLight(themeColor.red, -20),
|
||||
@@ -176,7 +176,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
orange: {
|
||||
self: themeColor.orange,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 10) : scaleColorLight(themeColor.orange, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.orange, 15) : scaleColorLight(themeColor.orange, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.orange, -10),
|
||||
num2: scaleColorLight(themeColor.orange, -20),
|
||||
@@ -191,7 +191,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
yellow: {
|
||||
self: themeColor.yellow,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 10) : scaleColorLight(themeColor.yellow, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.yellow, 15) : scaleColorLight(themeColor.yellow, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.yellow, -10),
|
||||
num2: scaleColorLight(themeColor.yellow, -20),
|
||||
@@ -206,7 +206,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
olive: {
|
||||
self: themeColor.olive,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 10) : scaleColorLight(themeColor.olive, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.olive, 15) : scaleColorLight(themeColor.olive, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.olive, -10),
|
||||
num2: scaleColorLight(themeColor.olive, -20),
|
||||
@@ -214,7 +214,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
green: {
|
||||
self: themeColor.green,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 10) : scaleColorLight(themeColor.green, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.green, 15) : scaleColorLight(themeColor.green, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.green, -10),
|
||||
num2: scaleColorLight(themeColor.green, -20),
|
||||
@@ -229,7 +229,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
teal: {
|
||||
self: themeColor.teal,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 10) : scaleColorLight(themeColor.teal, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.teal, 15) : scaleColorLight(themeColor.teal, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.teal, -10),
|
||||
num2: scaleColorLight(themeColor.teal, -20),
|
||||
@@ -237,7 +237,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
blue: {
|
||||
self: themeColor.blue,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 10) : scaleColorLight(themeColor.blue, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.blue, 15) : scaleColorLight(themeColor.blue, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.blue, -10),
|
||||
num2: scaleColorLight(themeColor.blue, -20),
|
||||
@@ -245,7 +245,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
violet: {
|
||||
self: themeColor.violet,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 10) : scaleColorLight(themeColor.violet, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.violet, 15) : scaleColorLight(themeColor.violet, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.violet, -10),
|
||||
num2: scaleColorLight(themeColor.violet, -20),
|
||||
@@ -253,7 +253,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
purple: {
|
||||
self: themeColor.purple,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 10) : scaleColorLight(themeColor.purple, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.purple, 15) : scaleColorLight(themeColor.purple, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.purple, -10),
|
||||
num2: scaleColorLight(themeColor.purple, -20),
|
||||
@@ -261,7 +261,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
pink: {
|
||||
self: themeColor.pink,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 10) : scaleColorLight(themeColor.pink, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.pink, 15) : scaleColorLight(themeColor.pink, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.pink, -10),
|
||||
num2: scaleColorLight(themeColor.pink, -20),
|
||||
@@ -269,7 +269,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
brown: {
|
||||
self: themeColor.brown,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 10) : scaleColorLight(themeColor.brown, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.brown, 15) : scaleColorLight(themeColor.brown, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.brown, -10),
|
||||
num2: scaleColorLight(themeColor.brown, -20),
|
||||
@@ -277,7 +277,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
black: {
|
||||
self: themeColor.black,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 10) : scaleColorLight(themeColor.black, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.black, 15) : scaleColorLight(themeColor.black, 25),
|
||||
dark: {
|
||||
num1: scaleColorLight(themeColor.black, -10),
|
||||
num2: scaleColorLight(themeColor.black, -20),
|
||||
@@ -285,7 +285,7 @@ export function defineTheme(themeColor: ThemeColor): Theme {
|
||||
},
|
||||
grey: {
|
||||
self: themeColor.grey,
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 10) : scaleColorLight(themeColor.grey, 25),
|
||||
light: themeColor.isDarkTheme ? scaleColorLight(themeColor.grey, 15) : scaleColorLight(themeColor.grey, 25),
|
||||
},
|
||||
gold: themeColor.gold,
|
||||
white: themeColor.white,
|
||||
|
||||
@@ -121,6 +121,26 @@ export type GithubColor = {
|
||||
bgColor: string;
|
||||
};
|
||||
};
|
||||
underlineNav: {
|
||||
borderColor: {
|
||||
active: string;
|
||||
};
|
||||
};
|
||||
contribution: {
|
||||
default: {
|
||||
bgColor: {
|
||||
num0: string;
|
||||
num1: string;
|
||||
num2: string;
|
||||
num3: string;
|
||||
num4: string;
|
||||
num5: string;
|
||||
};
|
||||
borderColor: {
|
||||
num0: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
export function defineGithubTheme(githubColor: GithubColor): Theme {
|
||||
@@ -266,8 +286,6 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
|
||||
const github: Github = {
|
||||
fgColor: {
|
||||
accent: githubColor.fgColor.accent,
|
||||
default: githubColor.fgColor.default,
|
||||
muted: githubColor.fgColor.muted,
|
||||
success: githubColor.fgColor.success,
|
||||
done: githubColor.fgColor.done,
|
||||
},
|
||||
@@ -331,6 +349,43 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
|
||||
},
|
||||
},
|
||||
},
|
||||
control: {
|
||||
transparent: {
|
||||
bgColor: {
|
||||
hover: githubColor.control.transparent.bgColor.hover,
|
||||
},
|
||||
},
|
||||
},
|
||||
shadow: {
|
||||
floating: {
|
||||
small: `0px 0px 0px 1px ${themeVars.color.light.border}, 0px 6px 12px -3px ${themeVars.color.shadow.self}, 0px 6px 18px 0px ${themeVars.color.shadow.self};`,
|
||||
},
|
||||
},
|
||||
underlineNav: {
|
||||
borderColor: {
|
||||
active: githubColor.underlineNav.borderColor.active,
|
||||
},
|
||||
},
|
||||
contribution: {
|
||||
default: {
|
||||
bgColor: {
|
||||
num0: githubColor.contribution.default.bgColor.num0,
|
||||
num1: githubColor.contribution.default.bgColor.num1,
|
||||
num2: githubColor.contribution.default.bgColor.num2,
|
||||
num3: githubColor.contribution.default.bgColor.num3,
|
||||
num4: githubColor.contribution.default.bgColor.num4,
|
||||
num5: githubColor.contribution.default.bgColor.num5,
|
||||
},
|
||||
borderColor: {
|
||||
num0: githubColor.contribution.default.borderColor.num0,
|
||||
num1: themeVars.github.contribution.default.borderColor.num0,
|
||||
num2: themeVars.github.contribution.default.borderColor.num0,
|
||||
num3: themeVars.github.contribution.default.borderColor.num0,
|
||||
num4: themeVars.github.contribution.default.borderColor.num0,
|
||||
num5: themeVars.github.contribution.default.borderColor.num0,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
return defineTheme({
|
||||
isDarkTheme: githubColor.isDarkTheme,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { createGlobalTheme, globalStyle } from "@vanilla-extract/css";
|
||||
import { createGlobalTheme, globalKeyframes, globalStyle } from "@vanilla-extract/css";
|
||||
import { otherThemeVars, themeVars } from "src/types/vars";
|
||||
import type { MapLeafNodes, WithOptionalLayer } from "./types";
|
||||
|
||||
@@ -13,7 +13,10 @@ function stringToBoolean(str: string, name: string): boolean {
|
||||
}
|
||||
}
|
||||
|
||||
const dark_emoji = `
|
||||
export const overlayAppear = "overlay-appear";
|
||||
export const animation = `200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running ${overlayAppear}`;
|
||||
|
||||
const emoji = `
|
||||
.emoji[aria-label="check mark"],
|
||||
.emoji[aria-label="currency exchange"],
|
||||
.emoji[aria-label="TOP arrow"],
|
||||
@@ -39,7 +42,7 @@ const dark_emoji = `
|
||||
export function createTheme(theme: Theme): void {
|
||||
const isDarkTheme = stringToBoolean(theme.isDarkTheme, "isDarkTheme");
|
||||
if (isDarkTheme) {
|
||||
globalStyle(dark_emoji, { filter: "invert(100%) hue-rotate(180deg)" });
|
||||
globalStyle(emoji, { filter: "invert(100%) hue-rotate(180deg)" });
|
||||
}
|
||||
createGlobalTheme(":root", themeVars, theme);
|
||||
createGlobalTheme(":root", otherThemeVars, {
|
||||
@@ -57,4 +60,8 @@ export function createTheme(theme: Theme): void {
|
||||
accentColor: themeVars.color.accent,
|
||||
colorScheme: isDarkTheme ? "dark" : "light",
|
||||
});
|
||||
globalKeyframes(overlayAppear, {
|
||||
"0%": { opacity: 0, transform: "translateY(-12px)" },
|
||||
"100%": { opacity: 1, transform: "translateY(0)" },
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4,16 +4,11 @@ export const github = {
|
||||
/** 强调色
|
||||
* @actions `actionViewRight` 右侧日志标题颜色
|
||||
* @issue `prBranch` 分支名称文本颜色
|
||||
* @repo `repoTopic` 仓库主题标签文本颜色
|
||||
* @actions `actions` 分支标签按钮文本颜色
|
||||
* @actions `actionViewHeader` 分支标签按钮文本颜色
|
||||
*/
|
||||
accent: null,
|
||||
/** 默认的文本颜色
|
||||
* @diff 增加/删除代码块的文本颜色
|
||||
*/
|
||||
default: null,
|
||||
/** 暗淡的文本颜色
|
||||
* @diff 折叠行的文本颜色
|
||||
*/
|
||||
muted: null,
|
||||
/** 成功的文本颜色
|
||||
* @issue `button` 重新开启按钮文本颜色
|
||||
* @label `label` 绿色标签的文本颜色
|
||||
@@ -31,10 +26,15 @@ export const github = {
|
||||
/** 强调色
|
||||
* @diff 折叠/展开按钮的悬停颜色
|
||||
* @actions `actionViewLeft` 左侧子作业激活伪元素颜色
|
||||
* @release `releaseTagMenu` 顶部栏左侧按钮激活背景色
|
||||
* @navbar `navbarRight` 头像管理员标识背景颜色
|
||||
*/
|
||||
emphasis: null,
|
||||
/** 暗淡的背景颜色
|
||||
* @issue `prBranch` 分支名称背景颜色
|
||||
* @repo `repoTopic` 仓库主题标签背景颜色
|
||||
* @actions `actions` 分支标签按钮背景颜色
|
||||
* @actions `actionViewHeader` 分支标签按钮背景颜色
|
||||
*/
|
||||
muted: null,
|
||||
},
|
||||
@@ -55,7 +55,9 @@ export const github = {
|
||||
accent: {
|
||||
/** 强调色
|
||||
* @input `input` 输入框被选中时的边框颜色
|
||||
* @clone `clone` 克隆地址框被选中时的边框颜色
|
||||
* @issue `comment` 评论框被选中时的边框颜色
|
||||
* @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
|
||||
*/
|
||||
emphasis: null,
|
||||
},
|
||||
@@ -153,4 +155,65 @@ export const github = {
|
||||
},
|
||||
},
|
||||
},
|
||||
control: {
|
||||
transparent: {
|
||||
bgColor: {
|
||||
/** 悬停色
|
||||
* @clone `clone` 克隆按钮下按钮组和面板操作列表的悬停背景颜色
|
||||
* @input `inputAction` 输入框动作按钮的悬停背景颜色
|
||||
* @dropdown `dropdown` 下拉框子项的悬停背景颜色
|
||||
* @menu `verticalMenu` 垂直菜单项的悬停背景颜色
|
||||
* @menu `menu` 菜单项的悬停背景颜色
|
||||
* @repo `repoHeader` 仓库标题的悬停背景颜色
|
||||
* @commit `commit` 提交信息的 Action 按钮的悬停背景颜色
|
||||
*/
|
||||
hover: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
shadow: {
|
||||
floating: {
|
||||
/** 悬浮阴影
|
||||
* @tippy `tippyBox` 悬浮框阴影
|
||||
* @dropdown `dropdown` 下拉框阴影
|
||||
*/
|
||||
small: null,
|
||||
},
|
||||
},
|
||||
underlineNav: {
|
||||
borderColor: {
|
||||
/** 下划线导航栏的边框颜色
|
||||
* @clone `clone` 按钮组的按钮下划线颜色
|
||||
* @menu `secondaryMenu` 二级菜单按钮的下划线颜色
|
||||
*/
|
||||
active: null,
|
||||
},
|
||||
},
|
||||
/** 热力图 */
|
||||
contribution: {
|
||||
default: {
|
||||
bgColor: {
|
||||
num0: null,
|
||||
num1: null,
|
||||
num2: null,
|
||||
num3: null,
|
||||
num4: null,
|
||||
/** github 无此颜色需自行计算
|
||||
* @example 可参考这个颜色 `--color-prettylights-syntax-string-regexp`
|
||||
*/
|
||||
num5: null,
|
||||
},
|
||||
borderColor: {
|
||||
num0: null,
|
||||
num1: null,
|
||||
num2: null,
|
||||
num3: null,
|
||||
num4: null,
|
||||
/** github 无此颜色需自行计算
|
||||
* @example 目前均取 num0 的值
|
||||
*/
|
||||
num5: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -35,10 +35,6 @@ export const actions = css`
|
||||
border-top-right-radius: ${otherThemeVars.border.radius};
|
||||
padding: 16px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.item {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.info.message {
|
||||
@@ -57,6 +53,22 @@ export const actions = css`
|
||||
border-bottom-left-radius: ${otherThemeVars.border.radius};
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
|
||||
// 分支标签按钮
|
||||
.run-list-ref {
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
font-weight: 400;
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
text-decoration-line: underline !important;
|
||||
}
|
||||
}
|
||||
// 标签右侧任务信息
|
||||
.run-list-item-right {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
padding: 16px;
|
||||
|
||||
@@ -112,6 +124,23 @@ export const runWorkflow = css`
|
||||
}
|
||||
`;
|
||||
|
||||
// 工作流详情页标题
|
||||
export const actionViewHeader = css`
|
||||
.action-view-header {
|
||||
.action-commit-summary {
|
||||
// 分支标签按钮
|
||||
.ui.label {
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
font-weight: 400;
|
||||
> a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 工作流左侧作业列表
|
||||
export const actionViewLeft = css`
|
||||
.action-view-left {
|
||||
@@ -149,7 +178,7 @@ export const actionViewLeft = css`
|
||||
&:after {
|
||||
overflow: visible;
|
||||
background: ${themeVars.github.bgColor.accent.emphasis};
|
||||
border-radius: 0.375rem;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
content: "";
|
||||
height: 24px;
|
||||
left: calc(0.5rem * -1);
|
||||
|
||||
93
styles/components/clone.tsx
Normal file
93
styles/components/clone.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 克隆按钮的弹窗
|
||||
export const clone = css`
|
||||
.tippy-box {
|
||||
.clone-panel-popup {
|
||||
//标题
|
||||
.clone-panel-field:first-of-type {
|
||||
font-weight: bold;
|
||||
margin-top: 16px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
// 按钮组
|
||||
.clone-panel-tab {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-left: 12px;
|
||||
// 按钮
|
||||
.item {
|
||||
color: ${themeVars.color.text.self};
|
||||
font-weight: 600;
|
||||
padding: 6px 8px;
|
||||
margin: 8px 0;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
&.active:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: ${themeVars.github.underlineNav.borderColor.active};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
.item.active {
|
||||
border-bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
// 克隆地址
|
||||
.ui.input.action {
|
||||
> input,
|
||||
> input:hover {
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
> input:focus,
|
||||
> input:focus-visible {
|
||||
border-color: ${themeVars.github.borderColor.accent.emphasis};
|
||||
}
|
||||
.ui.ui.ui.button {
|
||||
background-color: unset;
|
||||
border: unset;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
padding: 5px 10px;
|
||||
margin-left: 5px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
// 面板操作列表之间的分割线
|
||||
.divider {
|
||||
margin: 0;
|
||||
}
|
||||
// 面板操作列表
|
||||
.clone-panel-list {
|
||||
margin: 8px;
|
||||
.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 8px;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
> .item:hover {
|
||||
color: ${themeVars.color.text.self};
|
||||
text-decoration: none;
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
66
styles/components/commit.tsx
Normal file
66
styles/components/commit.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 提交列表
|
||||
export const commit = css`
|
||||
.page-content.repository {
|
||||
// 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
|
||||
#commits-table.ui.basic.striped.table tbody.commit-list {
|
||||
// 作者
|
||||
.author {
|
||||
// 作者名称
|
||||
a.author-wrapper {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// SHA 标签
|
||||
.sha {
|
||||
a.ui.label.commit-id-short {
|
||||
padding: 2px 8px;
|
||||
height: 28px;
|
||||
margin-top: 0.375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
// 提交信息
|
||||
.message {
|
||||
// tag 标签
|
||||
a.ui.basic.primary.label {
|
||||
border-radius: 25px;
|
||||
border-width: 1.5px;
|
||||
padding: 5px 8px !important;
|
||||
}
|
||||
}
|
||||
// 提交信息右侧
|
||||
.tw-text-right {
|
||||
// 时间标签
|
||||
relative-time,
|
||||
// 复制 SHA 按钮
|
||||
.btn.copy-commit-id,
|
||||
// 查看提交路径按钮
|
||||
.btn.view-commit-path {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// 整行悬停色
|
||||
tr:hover {
|
||||
background-color: ${themeVars.color.hover.opaque};
|
||||
}
|
||||
// 偶数行悬停色
|
||||
tr:nth-child(2n):hover {
|
||||
background-color: ${themeVars.color.hover.opaque} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const commitStatus = css`
|
||||
.flex-text-inline[data-global-init="initCommitStatuses"] {
|
||||
padding: 6px;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin-right: 6px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -2,9 +2,14 @@ import { css } from "src/types/vars";
|
||||
|
||||
export const dashboard = css`
|
||||
.page-content.dashboard {
|
||||
// 动态的右侧 svg 图标
|
||||
.flex-item .flex-item-trailing svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
// 仓库列表的仓库/组织切换按钮
|
||||
.ui.two.item.menu {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -6,7 +6,7 @@ export const diff = css`
|
||||
background-color: unset;
|
||||
/* 折叠行文本 */
|
||||
.code-inner {
|
||||
color: ${themeVars.github.fgColor.muted};
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
/* 增加/删除行多余的颜色 */
|
||||
@@ -21,10 +21,10 @@ export const diff = css`
|
||||
.added-code,
|
||||
.removed-code {
|
||||
border-radius: 0.1875rem;
|
||||
color: ${themeVars.github.fgColor.default};
|
||||
color: ${themeVars.color.text.self};
|
||||
/* 覆盖掉 chroma 的颜色 */
|
||||
* {
|
||||
color: ${themeVars.github.fgColor.default} !important;
|
||||
color: ${themeVars.color.text.self} !important;
|
||||
}
|
||||
}
|
||||
/* 展开/收缩按钮 */
|
||||
|
||||
211
styles/components/filelist.tsx
Normal file
211
styles/components/filelist.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
// 文件列表页面下的分支按钮
|
||||
export const branchButton = css`
|
||||
.page-content.repository.file.list {
|
||||
.ui.dropdown.branch-selector-dropdown > .menu > .menu {
|
||||
// 显示默认分支的标签
|
||||
.ui.label {
|
||||
background-color: ${themeVars.color.menu};
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
margin-top: 1px;
|
||||
margin-left: auto;
|
||||
margin-right: 16px; // gitea 有 RSS 留出足够的空间
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 仓库按钮
|
||||
export const repoButton = css`
|
||||
.page-content.repository.file.list {
|
||||
// clone 按钮调整
|
||||
.repo-button-row .repo-button-row-right .ui.primary.button span {
|
||||
margin: 0px 3px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 仓库文件列表
|
||||
export const repoFiles = css`
|
||||
.repository.file.list {
|
||||
#repo-files-table {
|
||||
// 头部最后一次提交
|
||||
.repo-file-line {
|
||||
padding-right: 16px;
|
||||
// 父目录
|
||||
&.parent-link {
|
||||
gap: 0.5rem;
|
||||
padding-left: 16px;
|
||||
svg {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
// 最后一次提交
|
||||
&.repo-file-last-commit {
|
||||
min-height: 3.725rem;
|
||||
.latest-commit {
|
||||
.commit-summary {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
img.tw-align-middle {
|
||||
margin-top: -1px;
|
||||
margin-left: 1px;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
// 作者
|
||||
.author-wrapper {
|
||||
margin-right: 6px;
|
||||
&:hover {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
// 提交哈希值
|
||||
.ui.label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
relative-time {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
}
|
||||
// 文件列表
|
||||
.repo-file-item {
|
||||
.repo-file-cell {
|
||||
&.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding-left: 16px;
|
||||
}
|
||||
&.age {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 手机下隐藏提交信息
|
||||
export const repoFilesMobile = css`
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 仓库代码布局调整, 侧边栏宽度调整
|
||||
export const repoGrid = css`
|
||||
.repo-grid-filelist-sidebar {
|
||||
grid-template-columns: auto 296px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.repo-grid-filelist-sidebar {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 仓库代码页面侧边栏上半部, 版本发布以上
|
||||
export const repoSidebarTop = css`
|
||||
.page-content.repository.file.list {
|
||||
.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: ${themeVars.color.text.self};
|
||||
}
|
||||
#repo-topics {
|
||||
margin: 10px 0px !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 仓库代码页面侧边栏下半部, 版本发布以下
|
||||
export const repoSidebarBottom = css`
|
||||
.page-content.repository.file.list {
|
||||
.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: ${themeVars.color.green.self};
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.flex-item-header .flex-item-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.flex-item-body {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// 编程语言
|
||||
.language-stats {
|
||||
height: 8px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.language-stats-details .item {
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
.color-icon {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.tw-font-semibold {
|
||||
color: ${themeVars.color.text.self};
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,51 +0,0 @@
|
||||
// Made by Luting ^-^
|
||||
.vch__day__square,
|
||||
.vch__legend__wrapper rect {
|
||||
rx: 2px;
|
||||
ry: 2px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
outline: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 0.5px;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.vch__legend__wrapper rect {
|
||||
rx: 3px;
|
||||
ry: 3px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.vch__day__square,
|
||||
.vch__legend__wrapper rect {
|
||||
&[style="fill: var(--color-secondary-alpha-60);"] {
|
||||
outline: 1px solid rgba(27, 31, 35, 0.06);
|
||||
background: #161b22;
|
||||
fill: #161b22 !important;
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-light-4);"] {
|
||||
background: #0e4429;
|
||||
fill: #0e4429 !important;
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-light-2);"] {
|
||||
background: #006d32;
|
||||
fill: #006d32 !important;
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary);"] {
|
||||
background: #238636;
|
||||
fill: #238636 !important;
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-dark-2);"] {
|
||||
background: #39d353;
|
||||
fill: #39d353 !important;
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-dark-4);"] {
|
||||
background: #44ff61;
|
||||
fill: #44ff61 !important;
|
||||
}
|
||||
}
|
||||
51
styles/components/heatmap.tsx
Normal file
51
styles/components/heatmap.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const heatmap = css`
|
||||
.vch__container {
|
||||
// 覆盖热力图和图例的背景色
|
||||
.vch__day__square,
|
||||
.vch__legend__wrapper rect {
|
||||
// 圆角
|
||||
rx: 2.5px;
|
||||
ry: 2.5px;
|
||||
// hover 时的圆角
|
||||
border-radius: 0.75px;
|
||||
// 宽度和高度可以用来控制间隔
|
||||
width: 9.5px;
|
||||
height: 9.5px;
|
||||
// 边框
|
||||
outline: 0.5px solid ${themeVars.github.contribution.default.borderColor.num0};
|
||||
// 边框向内偏移
|
||||
outline-offset: -0.5px;
|
||||
|
||||
&[style="fill: var(--color-secondary-alpha-60);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num0} !important;
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-light-4);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num1} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num1};
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-light-2);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num2} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num2};
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num3} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num3};
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-dark-2);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num4} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num4};
|
||||
}
|
||||
|
||||
&[style="fill: var(--color-primary-dark-4);"] {
|
||||
fill: ${themeVars.github.contribution.default.bgColor.num5} !important;
|
||||
outline-color: ${themeVars.github.contribution.default.borderColor.num5};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,6 +1,11 @@
|
||||
import "./actions";
|
||||
import "./clone";
|
||||
import "./commit";
|
||||
import "./dashboard";
|
||||
import "./diff";
|
||||
import "./filelist";
|
||||
import "./heatmap";
|
||||
import "./issue";
|
||||
import "./release";
|
||||
import "./repo";
|
||||
import "./setting";
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
import { activeItemAfterStyle } from "styles/public/menu";
|
||||
|
||||
export const button = css`
|
||||
.issue-content-left .field.footer {
|
||||
@@ -15,11 +16,6 @@ export const button = css`
|
||||
// 重新开启按钮
|
||||
.ui.basic.primary.button#status-button {
|
||||
color: ${themeVars.github.fgColor.success};
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -97,5 +93,31 @@ export const comment = css`
|
||||
box-shadow: 0 0 0 1px ${themeVars.color.primary.self} !important;
|
||||
}
|
||||
}
|
||||
.comment-header-right {
|
||||
.context-dropdown {
|
||||
// 评论菜单的删除按钮
|
||||
.menu .item.delete-comment {
|
||||
color: ${themeVars.color.red.self};
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.red.badge.bg} !important;
|
||||
color: ${themeVars.color.red.light};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const dropdown = css`
|
||||
.repository {
|
||||
// Issue/PR 列表下的所有筛选菜单
|
||||
&.issue-list .ui.dropdown .menu, .ui.menu .ui.dropdown .menu,
|
||||
// Issue/PR 详情下的右侧的上半部分选项菜单
|
||||
&.issue.view .issue-content-right .ui.dropdown .scrolling.menu {
|
||||
.item:hover:after {
|
||||
content: "";
|
||||
${activeItemAfterStyle}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
109
styles/components/release.tsx
Normal file
109
styles/components/release.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
// release 顶部栏左侧按钮组
|
||||
export const releaseTagMenu = css`
|
||||
.page-content.repository {
|
||||
&.releases,
|
||||
&.tags {
|
||||
h2.small.menu {
|
||||
.item {
|
||||
background-color: unset !important;
|
||||
font-weight: 500;
|
||||
&.active {
|
||||
background: ${themeVars.github.bgColor.accent.emphasis} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 标签页样式
|
||||
export const tags = css`
|
||||
.page-content.repository.tags {
|
||||
// 标签的选项取消下划线
|
||||
.tag-list-row {
|
||||
.tag-list-row-title {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.download {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
font-size: 12px;
|
||||
a.muted:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 发布页样式
|
||||
export const releases = css`
|
||||
.page-content.repository.releases {
|
||||
#release-list .release-entry {
|
||||
// 左侧发布元信息
|
||||
.meta {
|
||||
gap: 0.5rem;
|
||||
padding-top: 24px;
|
||||
padding-right: 40px;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
flex: 0.125;
|
||||
a.muted {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
svg {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
svg.tw-mr-1.svg.octicon-tag {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
.js-branch-tag-selector {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
// 右侧发布详细信息
|
||||
.segment.detail {
|
||||
.svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
p.text.grey {
|
||||
margin: 16px 0;
|
||||
.time {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
.markup {
|
||||
> *:first-child {
|
||||
margin-top: 16px !important;
|
||||
}
|
||||
> *:last-child {
|
||||
margin-bottom: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 顶部右侧按钮组
|
||||
export const rightButton = css`
|
||||
.page-content.repository {
|
||||
&.releases,
|
||||
&.tags {
|
||||
.ui.small.button {
|
||||
background-color: ${themeVars.color.button};
|
||||
padding: 5px 16px;
|
||||
min-height: auto;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,393 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,105 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
export const commit = css`
|
||||
.page-content.repository {
|
||||
// 提交列表 (选择器保证同等优先级覆盖了 gitea 原生的样式)
|
||||
#commits-table.ui.basic.striped.table tbody.commit-list {
|
||||
// 作者
|
||||
.author {
|
||||
// 作者名称
|
||||
a.author-wrapper {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
// 仓库头信息
|
||||
export const repoHeader = css`
|
||||
.page-content.repository .repo-header {
|
||||
// 点星/关注/克隆/RSS 按钮
|
||||
.ui.compact.button {
|
||||
padding: 3px 12px;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
// 文本跟图标间隔, 文本在手机下不显示
|
||||
span {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
// 仓库图标
|
||||
img.ui.avatar {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
margin-block-start: 0.5rem;
|
||||
margin-block-end: 0.5rem;
|
||||
}
|
||||
|
||||
.flex-item {
|
||||
.flex-item-title {
|
||||
// 间隔线颜色
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
// 仓库名称
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: ${themeVars.color.text.self};
|
||||
font-size: 16px;
|
||||
text-decoration: none !important;
|
||||
min-width: 3ch;
|
||||
padding: 4px 6px;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
&.muted:not(.tw-font-normal) {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
// SHA 标签
|
||||
.sha {
|
||||
a.ui.label.commit-id-short {
|
||||
padding: 2px 8px;
|
||||
height: 28px;
|
||||
margin-top: 0.375rem;
|
||||
margin-bottom: 0.375rem;
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
// 提交信息右侧
|
||||
.tw-text-right {
|
||||
// 时间标签
|
||||
relative-time,
|
||||
// 复制 SHA 按钮
|
||||
.btn.copy-commit-id,
|
||||
// 查看提交路径按钮
|
||||
.btn.view-commit-path {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
// 整行悬停色
|
||||
tr:hover {
|
||||
background-color: ${themeVars.color.hover.opaque};
|
||||
}
|
||||
// 偶数行悬停色
|
||||
tr:nth-child(2n):hover {
|
||||
background-color: ${themeVars.color.hover.opaque} !important;
|
||||
// 默认的 hover 为 primary 颜色, 修正
|
||||
a:not(.label, .button):hover {
|
||||
color: ${themeVars.color.text.self} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 顶部提交, 标签, 分支统计
|
||||
export const repoMenu = css`
|
||||
.page-content.repository {
|
||||
.repository-summary .repository-menu {
|
||||
background-color: ${themeVars.color.box.header};
|
||||
.item {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
height: 31px; // 文件列表下与右侧输入框对齐
|
||||
b {
|
||||
color: ${themeVars.color.text.self};
|
||||
margin: 0 2px;
|
||||
}
|
||||
&.active {
|
||||
background-color: ${themeVars.color.active};
|
||||
color: ${themeVars.color.text.self};
|
||||
font-weight: 500;
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const repoTopic = css`
|
||||
// 理应只能覆盖探索/组织/用户下仓库的 topic 标签
|
||||
.label-list .ui.label,
|
||||
// 仓库文件列表下的 topic 标签
|
||||
#repo-topics .ui.label.repo-topic {
|
||||
border-radius: 25px;
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
margin: 0px 1.5px 3.5px 0px;
|
||||
background-color: ${themeVars.github.bgColor.accent.muted};
|
||||
color: ${themeVars.github.fgColor.accent};
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.bgColor.accent.emphasis};
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 仓库动态页面关闭工单状态条颜色
|
||||
export const closedIssueTableCell = css`
|
||||
.stats-table .table-cell.tw-bg-red[href="#closed-issues"] {
|
||||
background-color: ${themeVars.color.purple.self} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
// Made by Luting ^-^
|
||||
// 设置左边栏(包含 Actions 的工作流栏)
|
||||
|
||||
%active-item-after-style {
|
||||
background: #1f6feb;
|
||||
border-radius: 0.375rem;
|
||||
content: "";
|
||||
height: 24px;
|
||||
left: calc(0.5rem * -1);
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.ui.vertical.menu {
|
||||
background: var(--color-body);
|
||||
border: 0;
|
||||
|
||||
.header.item {
|
||||
color: #9198a1 !important;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: unset;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.menu .item:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
||||
.item,
|
||||
.item > summary {
|
||||
font-size: 1.1rem;
|
||||
background: unset;
|
||||
padding: 6px 8px;
|
||||
color: var(--color-white) !important;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.active.item,
|
||||
.active.item > summary {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.active.item:after {
|
||||
@extend %active-item-after-style;
|
||||
}
|
||||
|
||||
details {
|
||||
&:has(.active.item) {
|
||||
> summary {
|
||||
font-weight: 600;
|
||||
background: #161a21;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.active.item {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
> summary {
|
||||
background: unset;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
@extend %active-item-after-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui.vertical.menu,
|
||||
.ui.fluid.vertical.menu {
|
||||
.active.item {
|
||||
background: #161a21 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item,
|
||||
.item > summary {
|
||||
border-radius: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置右面版
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content,
|
||||
.admin-setting-content {
|
||||
.ui.top.attached.header {
|
||||
border: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
background-color: unset !important;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.ui.attached.segment {
|
||||
background-color: unset;
|
||||
border-radius: 0.5rem !important;
|
||||
}
|
||||
|
||||
.ui.attached.segment:not(.error) {
|
||||
border: 1px solid var(--color-light-border) !important;
|
||||
}
|
||||
|
||||
.ui.attached.segment.error {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -76,3 +76,33 @@ export const label = css`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 设置右面板的内容
|
||||
export const content = css`
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content,
|
||||
.admin-setting-content {
|
||||
.ui.top.attached.header {
|
||||
border: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
background-color: unset !important;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.ui.attached.segment {
|
||||
background-color: unset;
|
||||
border-radius: 0.5rem !important;
|
||||
}
|
||||
|
||||
.ui.attached.segment:not(.error) {
|
||||
border: 1px solid ${themeVars.color.light.border} !important;
|
||||
}
|
||||
|
||||
.ui.attached.segment.error {
|
||||
border: 1px solid ${themeVars.color.error.border} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -26,12 +26,27 @@ export const baseButton = css`
|
||||
${primaryHoverStyle}
|
||||
}
|
||||
}
|
||||
/* 普通按钮边框色不变 */
|
||||
.ui.basic.button:hover,
|
||||
/* 仓库点星等数字标签按钮边框色不变 */
|
||||
.ui.labeled.button > .label:hover {
|
||||
// 主色调基本按钮和普通按钮一样
|
||||
// 作者的关注按钮
|
||||
.ui.basic.primary.button {
|
||||
background-color: ${themeVars.color.button};
|
||||
color: ${themeVars.color.text.self};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
color: ${themeVars.color.text.self};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
}
|
||||
}
|
||||
/* 普通按钮边框色不变 */
|
||||
.ui.basic.button,
|
||||
/* 仓库点星等数字标签按钮边框色不变 */
|
||||
.ui.labeled.button > .label {
|
||||
&:hover {
|
||||
border-color: ${themeVars.color.light.border};
|
||||
}
|
||||
}
|
||||
|
||||
/* 普通按钮激活时背景色 */
|
||||
.ui.basic.buttons .button:active,
|
||||
.ui.basic.button:active,
|
||||
@@ -68,3 +83,22 @@ export const branchDropdownButton = css`
|
||||
min-height: 30px;
|
||||
}
|
||||
`;
|
||||
|
||||
// 修复按钮高度
|
||||
export const fixButtonHeight = css`
|
||||
.ui.small.buttons .button,
|
||||
.ui.ui.ui.ui.small.button {
|
||||
min-height: 26px;
|
||||
}
|
||||
.ui.tiny.buttons .button,
|
||||
.ui.ui.ui.ui.tiny.button {
|
||||
min-height: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const fixButton = css`
|
||||
// 修复关注&派生 hover 意外点亮右侧 label 左边框
|
||||
.ui.ui.ui.ui.small.button {
|
||||
z-index: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
import { css } from "src/types/vars";
|
||||
|
||||
export const codemirror = css`
|
||||
.CodeMirror.cm-s-default,
|
||||
.CodeMirror.cm-s-paper {
|
||||
.cm-property {
|
||||
color: #a0cc75;
|
||||
}
|
||||
.cm-header {
|
||||
color: #9daccc;
|
||||
}
|
||||
|
||||
.cm-quote {
|
||||
color: #090;
|
||||
}
|
||||
|
||||
.cm-keyword {
|
||||
color: #cc8a61;
|
||||
}
|
||||
|
||||
.cm-atom {
|
||||
color: #ef5e77;
|
||||
}
|
||||
|
||||
.cm-number {
|
||||
color: #ff5656;
|
||||
}
|
||||
|
||||
.cm-def {
|
||||
color: #e4e4e4;
|
||||
}
|
||||
|
||||
.cm-variable-2 {
|
||||
color: #00bdbf;
|
||||
}
|
||||
|
||||
.cm-variable-3 {
|
||||
color: #085;
|
||||
}
|
||||
|
||||
.cm-comment {
|
||||
color: #8e9ab3;
|
||||
}
|
||||
|
||||
.cm-string {
|
||||
color: #a77272;
|
||||
}
|
||||
|
||||
.cm-string-2 {
|
||||
color: #f50;
|
||||
}
|
||||
|
||||
.cm-meta,
|
||||
.cm-qualifier {
|
||||
color: #ffb176;
|
||||
}
|
||||
|
||||
.cm-builtin {
|
||||
color: #b7c951;
|
||||
}
|
||||
|
||||
.cm-bracket {
|
||||
color: #997;
|
||||
}
|
||||
|
||||
.cm-tag {
|
||||
color: #f1d273;
|
||||
}
|
||||
|
||||
.cm-attribute {
|
||||
color: #bfcc70;
|
||||
}
|
||||
|
||||
.cm-hr {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.cm-url {
|
||||
color: #c5cfd0;
|
||||
}
|
||||
|
||||
.cm-link {
|
||||
color: #d8c792;
|
||||
}
|
||||
.cm-error {
|
||||
color: #dbdbeb;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,222 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
112
styles/public/dropdown.tsx
Normal file
112
styles/public/dropdown.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { animation } from "src/core/theme";
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
import { activeItemAfterStyle } from "styles/public/menu";
|
||||
|
||||
export const dropdown = css`
|
||||
.ui.dropdown,
|
||||
.ui.menu .ui.dropdown {
|
||||
.menu {
|
||||
animation: ${animation};
|
||||
// 统一所有下拉菜单的样式
|
||||
margin-top: 0.35em !important;
|
||||
background-color: ${themeVars.color.menu} !important;
|
||||
border: unset !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small} !important;
|
||||
// 忽略隐藏
|
||||
> .item:not(.tw-hidden) {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 8px 10px !important;
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
margin: 0 0.5rem;
|
||||
&:first-of-type {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
// 不知道为什么提交差异对比页面操作中的 cherrypick 按钮无法被选中
|
||||
&.cherry-pick-button,
|
||||
&:last-of-type {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
&.selected {
|
||||
background-color: ${themeVars.color.active} !important;
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&.active,
|
||||
&.selected {
|
||||
&:after {
|
||||
content: "";
|
||||
${activeItemAfterStyle};
|
||||
}
|
||||
}
|
||||
}
|
||||
> .divider {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 修复下拉菜单元素溢出问题
|
||||
// 用户菜单
|
||||
.user-menu>.item,
|
||||
// Issue/PR 菜单
|
||||
.ui.menu .ui.dropdown.item .menu .item {
|
||||
width: auto;
|
||||
}
|
||||
// 去掉下拉菜单的边框线
|
||||
// 设置里的下拉菜单
|
||||
.ui.selection.dropdown .menu > .item {
|
||||
border: unset;
|
||||
}
|
||||
// 修复一些菜单下的菜单元素溢出问题
|
||||
// 目前主要为分支菜单
|
||||
.ui.dropdown .menu .menu {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
// 修复仪表板切换控制用户按钮阴影被覆盖缺少边框线的问题
|
||||
.ui.dropdown .menu.context-user-switch .scrolling.menu {
|
||||
box-shadow: ${themeVars.github.shadow.floating.small} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
// 选择框的下拉菜单看起来像普通按钮
|
||||
export const selectionDropdown = css`
|
||||
.ui.selection.dropdown,
|
||||
.ui.selection.dropdown.active {
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 8px 16px;
|
||||
min-height: 32px;
|
||||
&:focus {
|
||||
background: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
}
|
||||
&:hover {
|
||||
background: ${themeVars.color.hover.self};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
}
|
||||
// 悬停提供伪元素
|
||||
.item:hover:after {
|
||||
content: "";
|
||||
${activeItemAfterStyle};
|
||||
}
|
||||
}
|
||||
// 排除一些小按钮, 例如软件包类型, 通常相邻有元素
|
||||
.ui.selection.dropdown.active:not(.small) {
|
||||
border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
|
||||
}
|
||||
`;
|
||||
@@ -1,8 +1,14 @@
|
||||
// organize-imports-ignore
|
||||
// tslint:disable:ordered-imports
|
||||
// 组件导入有顺序, 禁止插件优化
|
||||
import "./radius"; // 圆角, 此样式为基础样式, 确保在其他样式之前导入
|
||||
import "./text"; // 文本或 SVG 的基本颜色
|
||||
import "./button"; // 按钮
|
||||
import "./chroma"; // 代码高亮
|
||||
import "./codemirror"; // codemirror 样式
|
||||
import "./dropdown"; // 下拉框
|
||||
import "./input"; // 输入框
|
||||
import "./label"; // 标签
|
||||
import "./menu"; // 菜单
|
||||
import "./modal"; // 弹窗
|
||||
import "./radius"; // 圆角
|
||||
import "./svg"; // svg 图标
|
||||
import "./tippy"; // 提示框
|
||||
import "./navbar"; // 导航栏
|
||||
|
||||
@@ -18,6 +18,7 @@ export const input = css`
|
||||
.ui.form input[type="text"],
|
||||
.ui.form input[type="time"],
|
||||
.ui.form input[type="url"] {
|
||||
padding: 8px 12px;
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
background: ${themeVars.color.body} !important;
|
||||
@@ -28,4 +29,8 @@ export const input = css`
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.input {
|
||||
height: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -8,6 +8,20 @@ export const label = css`
|
||||
&.ui.ui.ui {
|
||||
&.label {
|
||||
border-radius: 25px;
|
||||
// 多个标签的组合标签的圆角修复
|
||||
&.scope-parent {
|
||||
.scope-left {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.scope-middle {
|
||||
border-radius: 0;
|
||||
}
|
||||
.scope-right {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
/* 主色调标签 */
|
||||
&.primary {
|
||||
background-color: unset;
|
||||
@@ -87,40 +101,28 @@ export const shaLabel = css`
|
||||
&.sign-trusted {
|
||||
border: 1.5px solid ${themeVars.color.green.badge.self} !important;
|
||||
color: ${themeVars.color.green.badge.self} !important;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.green.badge.hover.bg} !important;
|
||||
}
|
||||
}
|
||||
// 验证未信任
|
||||
&.sign-untrusted {
|
||||
border: 1.5px solid ${themeVars.color.yellow.badge.self} !important;
|
||||
color: ${themeVars.color.yellow.badge.self} !important;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.yellow.badge.hover.bg} !important;
|
||||
}
|
||||
}
|
||||
// 验证未匹配
|
||||
&.sign-unmatched {
|
||||
border: 1.5px solid ${themeVars.color.orange.badge.self} !important;
|
||||
color: ${themeVars.color.orange.badge.self} !important;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.orange.badge.hover.bg} !important;
|
||||
}
|
||||
}
|
||||
// 验证警告
|
||||
&.sign-warning {
|
||||
border: 1.5px solid ${themeVars.color.red.badge.self} !important;
|
||||
color: ${themeVars.color.red.badge.self} !important;
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.red.badge.hover.bg} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 任务状态标签, 目前仅在管理员页面 Runner 状态中看到
|
||||
export const taskStatusLabel = css`
|
||||
.ui.label.task-status- {
|
||||
.runner-container .ui.label.task-status- {
|
||||
&success {
|
||||
color: ${themeVars.color.success.text};
|
||||
border: 1px solid ${themeVars.color.success.border};
|
||||
@@ -155,6 +157,7 @@ export const repoLabel = css`
|
||||
.org-visibility div {
|
||||
&.ui.basic.label {
|
||||
background-color: unset;
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -166,6 +169,7 @@ export const packagesLabel = css`
|
||||
> .ui.container > div > .flex-list {
|
||||
// 软件包类型的标签
|
||||
.ui.label {
|
||||
background-color: unset;
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
color: ${themeVars.color.primary.self};
|
||||
}
|
||||
|
||||
193
styles/public/menu.tsx
Normal file
193
styles/public/menu.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
export const activeItemAfterStyle = {
|
||||
backgroundColor: themeVars.github.borderColor.accent.emphasis,
|
||||
borderRadius: otherThemeVars.border.radius,
|
||||
height: "24px",
|
||||
left: "calc(0.5rem * -1)",
|
||||
position: "absolute",
|
||||
top: "calc(50% - 12px)",
|
||||
width: "4px",
|
||||
};
|
||||
|
||||
export const verticalMenu = css`
|
||||
// 垂直菜单, 用于左侧边栏
|
||||
// 设置页面中的菜单, Actions 工作流菜单, WorkflowRuns Job 菜单
|
||||
.ui.vertical.menu {
|
||||
// 去除边框, 和背景色同色
|
||||
background: ${themeVars.color.body};
|
||||
border: 0;
|
||||
// 设置页面的菜单头部
|
||||
.header.item {
|
||||
color: ${themeVars.color.text.light.num1} !important;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: unset;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
// 菜单项被悬停时的背景色, 限制a标签, 避免为子菜单多余渲染
|
||||
a.item:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
// 菜单项
|
||||
.item,
|
||||
.item > summary {
|
||||
font-size: 1.1rem;
|
||||
background: unset;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
padding: 6px 8px;
|
||||
}
|
||||
// Actions 菜单的圆角覆盖
|
||||
> .item,
|
||||
> .active.item {
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
}
|
||||
// 去除菜单项的边框线
|
||||
.item:before {
|
||||
background: unset;
|
||||
}
|
||||
// 激活的菜单项
|
||||
.active.item,
|
||||
.active.item > summary {
|
||||
font-weight: 600;
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
// 添加伪元素, 用于指示当前激活的菜单项
|
||||
.active.item:after {
|
||||
content: "";
|
||||
${activeItemAfterStyle};
|
||||
}
|
||||
// 部分菜单项的子菜单
|
||||
details.item {
|
||||
// 子菜单的标题
|
||||
summary:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
// 子菜单的选项
|
||||
.menu .item {
|
||||
color: ${themeVars.color.text.self};
|
||||
}
|
||||
// 子菜单的选项被激活
|
||||
&:has(.active.item) {
|
||||
> summary {
|
||||
font-weight: 600;
|
||||
background: ${themeVars.color.active};
|
||||
// 收回状态,悬停色
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
${activeItemAfterStyle};
|
||||
}
|
||||
// 子菜单的选项
|
||||
.active.item {
|
||||
background: ${themeVars.color.active};
|
||||
font-weight: 400;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
// 子菜单展开时
|
||||
&[open] {
|
||||
> summary {
|
||||
background: unset;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const menu = css`
|
||||
// 菜单默认悬浮色更改
|
||||
.ui.menu a.item,
|
||||
.ui.secondary.pointing.menu a.item,
|
||||
.ui.secondary.menu .dropdown.item {
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
// 一些水平小型菜单的颜色更改
|
||||
.small-menu-items .item {
|
||||
background-color: ${themeVars.color.body} !important;
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
|
||||
}
|
||||
}
|
||||
// 一些菜单的悬浮色更改
|
||||
.ui.segment .ui.tabular.menu,
|
||||
.header-wrapper .ui.tabular.menu,
|
||||
.ui.secondary.pointing.menu {
|
||||
.item,
|
||||
.active.item {
|
||||
&:hover {
|
||||
background: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const secondaryMenu = css`
|
||||
// 二级菜单, 比如 Issue/PR/Actions 的筛选菜单
|
||||
.ui.secondary.menu {
|
||||
.item {
|
||||
padding: 0px 12px;
|
||||
height: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
// 二级导航栏, 比如仓库的导航栏, 仓库列表的导航栏, 探索的类型导航栏
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
font-weight: 400; // 二级导航栏不需要加粗
|
||||
}
|
||||
.active.item,
|
||||
.dropdown.item,
|
||||
.link.item,
|
||||
a.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
color: ${themeVars.color.text.self};
|
||||
svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.active.item {
|
||||
// 取消激活时的下划线, 需要为透明, 保持间距
|
||||
border-color: #ffffff00;
|
||||
// 模仿 github 的下划线
|
||||
span:after {
|
||||
content: "";
|
||||
background: ${themeVars.github.underlineNav.borderColor.active};
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
bottom: calc(50% - 1.8rem);
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -20,5 +20,8 @@ export const modal = css`
|
||||
background-color: ${themeVars.color.menu};
|
||||
border-top: 1.5px solid ${themeVars.color.light.border};
|
||||
}
|
||||
.actions > .ui.button {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
86
styles/public/navbar.tsx
Normal file
86
styles/public/navbar.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const navbarRight = css`
|
||||
#navbar {
|
||||
.navbar-right {
|
||||
gap: 8px;
|
||||
// 右侧按钮, 但不包括头像
|
||||
> .item:not(:last-child) {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
grid-auto-columns: max-content;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
border: 1px solid ${themeVars.color.light.border};
|
||||
padding: unset;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
// 纠正内容保证居中
|
||||
.tw-relative {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.svg {
|
||||
color: ${themeVars.color.text.light.num1};
|
||||
}
|
||||
// 带下拉菜单的按钮
|
||||
&.ui.dropdown {
|
||||
padding: 0 8px;
|
||||
.text {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
> svg {
|
||||
margin-right: 8px;
|
||||
}
|
||||
// 三角号纠正高度保持居中
|
||||
.not-mobile {
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item.ui.dropdown {
|
||||
// 头像菜单
|
||||
&:last-child {
|
||||
padding-left: 2px; // 调整此选项需同步增减相同的标识的 left
|
||||
padding-right: 16px;
|
||||
.text {
|
||||
// 不显示小箭头标识
|
||||
> .not-mobile {
|
||||
display: none;
|
||||
}
|
||||
// 头像
|
||||
img {
|
||||
border-radius: 25px;
|
||||
height: 32px;
|
||||
max-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 用户头像的管理员标识
|
||||
.navbar-profile-admin {
|
||||
background-color: ${themeVars.github.bgColor.accent.emphasis};
|
||||
border-radius: 25px;
|
||||
color: ${themeVars.color.text.self};
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
padding: 2px 5px;
|
||||
top: -3px;
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 手机下的创建菜单按钮
|
||||
@media (max-width: 767.98px) {
|
||||
#navbar .navbar-right > .item:not(:last-child) {
|
||||
display: none;
|
||||
}
|
||||
#navbar.navbar-menu-open .navbar-right > .item:not(:last-child) {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -76,6 +76,13 @@ export const radiusImportant = css`
|
||||
.ui.secondary.vertical.menu > .item {
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
}
|
||||
// 目前为仓库列表/探索的二级菜单, 改版需要替换为全圆角
|
||||
.ui.tabular.menu .active.item {
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
&:hover {
|
||||
border-radius: ${otherThemeVars.border.radius} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 上半部分圆角替换
|
||||
@@ -105,12 +112,6 @@ export const radiusTop = css`
|
||||
|
||||
// 上半部分圆角替换(原CSS带!important)
|
||||
export const radiusTopImportant = css`
|
||||
.ui.tabular.menu .active.item {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
|
||||
&:hover {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
|
||||
}
|
||||
}
|
||||
.ui.simple.upward.dropdown {
|
||||
&.active {
|
||||
border-radius: ${otherThemeVars.border.radius} ${otherThemeVars.border.radius} 0 0 !important;
|
||||
@@ -280,3 +281,11 @@ export const fixRadius = css`
|
||||
border-bottom-right-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
// 修复一些根本无法理解的生效顺序
|
||||
export const fixWhyRadius = css`
|
||||
// Issue 菜单第一个按钮
|
||||
.ui.secondary.menu .item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
// 关闭工单按钮设置为紫色
|
||||
export const issueClosed = css`
|
||||
.text.red .svg,
|
||||
.text.red.svg {
|
||||
&.octicon-issue-closed {
|
||||
color: ${themeVars.github.fgColor.done} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
19
styles/public/text.tsx
Normal file
19
styles/public/text.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const red = css`
|
||||
.text.red .svg,
|
||||
.text.red.svg {
|
||||
// 关闭工单按钮设置为紫色
|
||||
&.octicon-issue-closed {
|
||||
color: ${themeVars.github.fgColor.done} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const grey = css`
|
||||
// 默认颜色是 --color-text-light, 主题下此颜色是亮白色, 修改为灰色
|
||||
// release 页面下一些描述信息的文本颜色
|
||||
.text.grey {
|
||||
color: ${themeVars.color.text.light.num1} !important;
|
||||
}
|
||||
`;
|
||||
39
styles/public/tippy.tsx
Normal file
39
styles/public/tippy.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { animation } from "src/core/theme";
|
||||
import { css, otherThemeVars, themeVars } from "src/types/vars";
|
||||
|
||||
// 一些界面内的提示框, 比如克隆按钮, PR信息, Runner信息 等
|
||||
export const tippyBox = css`
|
||||
.tippy-box {
|
||||
margin-top: -3px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
animation: ${animation};
|
||||
// 边框线同步 github 样式
|
||||
&[data-theme="default"],
|
||||
&[data-theme="box-with-header"] {
|
||||
border: unset;
|
||||
box-shadow: ${themeVars.github.shadow.floating.small};
|
||||
}
|
||||
// 带标题的提示框 (Runner信息)
|
||||
&[data-theme="box-with-header"] {
|
||||
.tippy-content {
|
||||
background-color: ${themeVars.color.menu};
|
||||
.ui.attached.header {
|
||||
background-color: ${themeVars.color.body};
|
||||
}
|
||||
}
|
||||
}
|
||||
// 差异对比中文件路径行右侧的三个点菜单
|
||||
&[data-theme="menu"] {
|
||||
.tippy-content {
|
||||
padding: 0.5rem;
|
||||
.item {
|
||||
border-radius: ${otherThemeVars.border.radius};
|
||||
&:hover {
|
||||
background-color: ${themeVars.github.control.transparent.bgColor.hover};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -33,88 +33,40 @@ const github: GithubColor = {
|
||||
muted: "#9198a1",
|
||||
},
|
||||
bgColor: {
|
||||
accent: {
|
||||
emphasis: "#1f6feb",
|
||||
muted: "#388bfd1a",
|
||||
},
|
||||
attention: {
|
||||
muted: "#bb800926",
|
||||
},
|
||||
success: {
|
||||
emphasis: "#238636",
|
||||
muted: "#2ea04326",
|
||||
},
|
||||
danger: {
|
||||
muted: "#f851491a",
|
||||
},
|
||||
done: {
|
||||
emphasis: "#8957e5",
|
||||
},
|
||||
accent: { emphasis: "#1f6feb", muted: "#388bfd1a" },
|
||||
attention: { muted: "#bb800926" },
|
||||
success: { emphasis: "#238636", muted: "#2ea04326" },
|
||||
danger: { muted: "#f851491a" },
|
||||
done: { emphasis: "#8957e5" },
|
||||
default: "#0d1117",
|
||||
inset: "#010409",
|
||||
muted: "#151b23",
|
||||
neutral: {
|
||||
muted: "#656c7633",
|
||||
},
|
||||
neutral: { muted: "#656c7633" },
|
||||
},
|
||||
borderColor: {
|
||||
accent: {
|
||||
emphasis: "#1f6feb",
|
||||
},
|
||||
accent: { emphasis: "#1f6feb" },
|
||||
default: "#3d444d",
|
||||
attention: {
|
||||
emphasis: "#9e6a03",
|
||||
},
|
||||
success: {
|
||||
emphasis: "#238636",
|
||||
},
|
||||
done: {
|
||||
emphasis: "#8957e5",
|
||||
},
|
||||
attention: { emphasis: "#9e6a03" },
|
||||
success: { emphasis: "#238636" },
|
||||
done: { emphasis: "#8957e5" },
|
||||
muted: "#3d444db3",
|
||||
translucent: "#ffffff26",
|
||||
},
|
||||
button: {
|
||||
primary: {
|
||||
fgColor: {
|
||||
accent: "#39d353",
|
||||
rest: "#ffffff",
|
||||
},
|
||||
bgColor: {
|
||||
rest: "#238636",
|
||||
hover: "#29903b",
|
||||
},
|
||||
},
|
||||
danger: {
|
||||
fgColor: {
|
||||
rest: "#fa5e55",
|
||||
hover: "#ffffff",
|
||||
},
|
||||
bgColor: {
|
||||
hover: "#b62324",
|
||||
},
|
||||
},
|
||||
primary: { fgColor: { accent: "#39d353", rest: "#ffffff" }, bgColor: { rest: "#238636", hover: "#29903b" } },
|
||||
danger: { fgColor: { rest: "#fa5e55", hover: "#ffffff" }, bgColor: { hover: "#b62324" } },
|
||||
},
|
||||
control: {
|
||||
bgColor: {
|
||||
active: "#2a313c",
|
||||
hover: "#262c36",
|
||||
rest: "#212830",
|
||||
},
|
||||
transparent: {
|
||||
bgColor: {
|
||||
active: "#656c7640",
|
||||
hover: "#656c7633",
|
||||
selected: "#656c761a",
|
||||
},
|
||||
},
|
||||
bgColor: { active: "#2a313c", hover: "#262c36", rest: "#212830" },
|
||||
transparent: { bgColor: { active: "#656c7640", hover: "#656c7633", selected: "#656c761a" } },
|
||||
},
|
||||
shadow: {
|
||||
floating: "#01040966",
|
||||
},
|
||||
overlay: {
|
||||
backdrop: {
|
||||
bgColor: "#21283066",
|
||||
shadow: { floating: "#01040966" },
|
||||
overlay: { backdrop: { bgColor: "#21283066" } },
|
||||
underlineNav: { borderColor: { active: "#f78166" } },
|
||||
contribution: {
|
||||
default: {
|
||||
bgColor: { num0: "#151b23", num1: "#033a16", num2: "#196c2e", num3: "#2ea043", num4: "#56d364", num5: "#7ee787" },
|
||||
borderColor: { num0: "#0104090d" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -3,6 +3,12 @@
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-plugin-css-modules"
|
||||
},
|
||||
{
|
||||
"name": "typescript-styled-plugin",
|
||||
"lint": {
|
||||
"validProperties": "rx,ry"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
@@ -11,7 +17,6 @@
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
@@ -19,7 +24,6 @@
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
|
||||
Reference in New Issue
Block a user