sky/gitea-github-theme
1
0
Fork 0
mirror of https://github.com/lutinglt/gitea-github-theme.git synced 2025-10-26 13:00:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

action 页面同步

Browse Source
This commit is contained in:
lutinglt
2025-06-30 00:11:27 +08:00
parent 3d34619d79
commit 33fbac3c45
14 changed files with 337 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
scripts/version.cjs vendored
View File

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

6
src/core/vite.ts
View File

@@ -14,11 +14,7 @@ const suffix = ".css.tsx";
* @param mode 模式, 开发模式为 dev `vite build --mode dev`
* @returns vite.rollupOptions.input 的配置
*/
export function themeInput(
outDir: string,
themeDir: string,
mode: string
): { [key: string]: string } {
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 });

19
src/types/color/console.ts
View File

@@ -1,30 +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,
},
};

69
src/types/color/github.ts
View File

@@ -1,56 +1,27 @@
export const github = {
display: {
brown: { fgColor: null },
cyan: { fgColor: null },
indigo: { fgColor: null },
lemon: { fgColor: null },
olive: { fgColor: null },
teal: { fgColor: null },
},
diffBlob: {
addtionNum: {
bgColor: null,
},
addtionWord: {
bgColor: null,
},
deletionNum: {
bgColor: null,
},
deletionWord: {
bgColor: null,
},
hunkNum: {
/** diff 按钮色 */
bgColorRest: null,
},
},
/** 用于 color 属性的颜色 */
fgColor: {
/** 强调色
* @actions 右侧日志标题颜色
*/
accent: null,
attention: null,
danger: null,
/** 默认的文本颜色
* @diff 增加/删除代码块的文本颜色
*/
default: null,
disabled: null,
done: null,
neutral: null,
severe: null,
sponsors: null,
success: null,
black: null,
white: null,
},
bgColor: {
accent: {
emphasis: null,
muted: null,
},
black: null,
success: {
muted: null,
},
danger: {
muted: null,
},
/** 暗淡的文本颜色
* @diff 折叠行的文本颜色
*/
muted: null,
},
/** 用于 background 属性的颜色 */
bgColor: {
accent: {
/** 强调色
* @diff 折叠/展开按钮的悬停颜色
* @actions 左侧子作业激活伪元素颜色
*/
emphasis: null,
},
},
};

1
src/types/color/other.ts
View File

@@ -12,6 +12,7 @@ export const other = {
header: null,
body: {
self: null,
/** diff 按钮行行色 */
highlight: null,
},
},

9
src/types/index.ts
View File

@@ -1,12 +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>;

1
src/types/vars.ts
View File

@@ -18,6 +18,7 @@ const vars = {
...color.named,
primary: color.primary,
secondary: color.secondary,
/** Actions 日志 ANSI 颜色 */
ansi: color.ansi,
console: color.console,
diff: color.diff,

234
styles/components/actions.scss
View File

@@ -1,234 +0,0 @@
// Made by Luting ^-^
.page-content.repository.actions .ui.grid {
.four.wide {
border-right: 1px solid var(--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: var(--color-box-header);
border: 1px solid var(--color-light-border);
border-bottom: 0;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
padding: 16px;
margin-bottom: 0;
.item {
padding: 6px 12px;
}
}
.ui.info.message {
border-radius: 0;
border-left-color: var(--color-light-border);
border-right-color: var(--color-light-border);
margin: 0;
~ .run-list {
border-top: 0;
}
}
.run-list {
border: 1px solid var(--color-light-border);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--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: var(--border-radius);
margin-left: 32px;
}
}
}
}
}
}
@media (max-width: 767.98px) {
.page-content.repository.actions .ui.grid .four.wide {
min-height: auto;
}
}
// 工作流禁用标签
.ui.vertical.menu .item > .ui.red.label {
color: var(--color-error-text);
border: 1px solid var(--color-error-border);
background: var(--color-error-bg);
margin-top: 0.5px;
}
// 手动工作流下拉列表
#runWorkflowDispatchForm {
// 分支选择按钮
.ui.dropdown.button.branch-selector-dropdown .svg.octicon-git-branch {
margin-right: 6px;
}
}
// 日志
.ui.container.action-view-container {
width: auto;
max-width: 100%;
padding: 0 24px 0 16px;
.action-view-header {
margin-top: 20px;
.action-info-summary {
margin-left: 14px;
}
.action-commit-summary {
margin-left: 28 + 14px;
}
}
}
.action-view-left.action-view-left {
width: 16.5%;
}
.action-view-right.action-view-right {
width: 83.5%;
}
@media (max-width: 767.98px) {
.action-view-left.action-view-left,
.action-view-right.action-view-right {
width: 100%;
}
}
.action-view-left {
margin-top: 16px;
margin-right: 28px;
border-top: 1px solid #2f353d;
&:before {
content: "Jobs";
color: #9198a1;
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 #2f353d;
.job-brief-item {
border-radius: 0.5rem !important;
padding: 8px;
position: relative;
margin-left: 0.5rem;
&.selected {
background-color: #161a21;
&:hover {
background-color: var(--color-hover);
}
&:after {
overflow: visible;
background: #1f6feb;
border-radius: 0.375rem;
content: "";
height: 24px;
left: calc(0.5rem * -1);
position: absolute;
top: calc(50% - 12px);
width: 4px;
}
}
}
}
}
.action-view-right {
margin-top: 16px;
min-height: calc(100vh - 245px);
.job-info-header {
padding: 16px 12px 16px 24px;
height: auto;
}
.job-step-container {
.job-step-summary {
color: var(--color-console-fg-subtle);
padding: 8px 10px;
&.step-expandable:hover {
color: var(--color-console-fg-subtle);
}
.tw-mr-2:not(.svg) svg.svg {
margin: 1.5px 6px 0px 2px;
}
svg.svg.text.green {
color: #9198a1 !important;
}
&.selected {
color: var(--color-console-fg) !important;
background-color: var(--color-console-active-bg) !important;
svg.svg.text.green {
color: #f0f6fc !important;
}
}
}
.job-log-line {
color: #f0f6fc;
.log-msg:hover * {
color: #f0f6fc !important;
}
}
}
}

222
styles/components/actions.tsx Normal file
View File

@@ -0,0 +1,222 @@
import { css, themeVars } from "src";
import { otherThemeVars } from "src/types/vars";
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.hover.self};
}
&: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;
}
}
}
}
`;

6
styles/components/diff.tsx
View File

@@ -1,12 +1,12 @@
import { css, themeVars } from "src";
export const diff = css`
/* 间隔行多余的颜色 */
/* 折叠行多余的颜色 */
.tag-code {
background-color: unset;
/* 折叠行文本 */
.code-inner {
color: ${themeVars.github.fgColor.neutral};
color: ${themeVars.github.fgColor.muted};
}
}
/* 增加/删除行多余的颜色 */

6
styles/components/index.tsx
View File

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

7
styles/index.tsx
View File

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

5
styles/public/index.tsx
View File

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

75
themes/dark.css.tsx
View File

@@ -11,22 +11,11 @@ const github = {
teal: { fgColor: "#1cb0ab" },
},
diffBlob: {
addtionNum: {
bgColor: "#3fb9504d",
},
addtionWord: {
bgColor: "#2ea04366",
},
deletionNum: {
bgColor: "#f851494d",
},
deletionWord: {
bgColor: "#f8514966",
},
hunkNum: {
/** diff 按钮色 */
bgColorRest: "#0c2d6b",
},
addtionNum: { bgColor: "#3fb9504d" },
addtionWord: { bgColor: "#2ea04366" },
deletionNum: { bgColor: "#f851494d" },
deletionWord: { bgColor: "#f8514966" },
hunkNum: { bgColor: { rest: "#0c2d6b" } },
},
fgColor: {
accent: "#4493f8",
@@ -41,12 +30,16 @@ const github = {
success: "#3fb950",
black: "#010409",
white: "#ffffff",
muted: "#9198a1",
},
bgColor: {
accent: {
emphasis: "#1f6feb",
muted: "#388bfd1a",
},
attention: {
muted: "#bb800926",
},
black: "#010409",
success: {
muted: "#2ea04326",
@@ -54,22 +47,36 @@ const github = {
danger: {
muted: "#f851491a",
},
inset: "#010409",
muted: "#151b23",
},
borderColor: {
muted: "#3d444db3",
},
control: {
bgColor: {
active: "#2a313c",
},
transparent: {
bgColor: {
hover: "#656c7633",
},
},
},
};
const console: Console = {
fg: {
self: "#f0f6fc",
subtle: "#9198a1",
self: github.fgColor.default,
subtle: github.fgColor.muted,
},
bg: github.bgColor.black,
border: "#2b3139",
activeBg: "#2a313c",
hoverBg: "#15191f",
bg: github.bgColor.inset,
border: github.borderColor.muted,
activeBg: github.control.bgColor.active,
hoverBg: github.control.transparent.bgColor.hover,
menu: {
bg: themeVars.color.body,
border: themeVars.color.light.border,
bg: github.bgColor.inset,
border: github.borderColor.muted,
},
};
@@ -100,8 +107,8 @@ const diff: Diff = {
},
moved: {
row: {
bg: "#818044",
border: "#bcca6f",
bg: github.bgColor.attention.muted,
border: github.bgColor.attention.muted,
},
},
inactive: github.bgColor.muted,
@@ -114,7 +121,6 @@ const other: Other = {
header: "#151b23",
body: {
self: "#0d1117",
/** diff 按钮行行色 */
highlight: github.bgColor.accent.muted,
},
},
@@ -165,7 +171,7 @@ const other: Other = {
opaque: "#00000080",
},
secondaryBg: "#ffffff26",
expandButton: github.diffBlob.hunkNum.bgColorRest,
expandButton: github.diffBlob.hunkNum.bgColor.rest,
placeholderText: "#8a8e99",
editorLineHighlight: themeVars.color.primary.light.num5,
projectColumnBg: themeVars.color.secondary.light.num2,
@@ -224,5 +230,16 @@ export default defineTheme({
console,
diff,
other,
github,
github: {
fgColor: {
accent: github.fgColor.accent,
default: github.fgColor.default,
muted: github.fgColor.muted,
},
bgColor: {
accent: {
emphasis: github.bgColor.accent.emphasis,
},
},
},
});