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

输入框, svg, 弹窗样式迁移

Browse Source
This commit is contained in:
lutinglt
2025-07-03 17:50:46 +08:00
parent 3015ce8696
commit 7bc47d0720
14 changed files with 109 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/release.md vendored
View File

@@ -16,12 +16,14 @@
- 普通按钮激活背景色同步
- 主色调按钮边框色同步
- 设置界面右上角小按钮样式同步
- 弹窗背景色和叠加背景色同步
## 🎈 Perf
- Actions 日志页面标题间隔优化
- 管理员后台按钮样式优化
- 信息提示颜色优化
- 修复意外点亮其他页面关闭图标的颜色
## 🐞 Fix

17
src/core/github.ts
View File

@@ -58,6 +58,9 @@ export type GithubColor = {
};
};
borderColor: {
accent: {
emphasis: string;
};
default: string;
muted: string;
translucent: string;
@@ -100,6 +103,11 @@ export type GithubColor = {
shadow: {
floating: string;
};
overlay: {
backdrop: {
bgColor: string;
};
};
};
export function defineGithubTheme(githubColor: GithubColor): Theme {
@@ -175,7 +183,7 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
timeline: githubColor.borderColor.muted,
input: {
text: themeVars.color.text.self,
background: themeVars.color.body,
background: githubColor.bgColor.muted,
toggleBackgound: themeVars.color.body,
border: {
self: themeVars.color.light.border,
@@ -239,7 +247,7 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
fg: githubColor.fgColor.attention,
bg: githubColor.bgColor.attention.muted,
},
overlayBackdrop: themeVars.color.body,
overlayBackdrop: githubColor.overlay.backdrop.bgColor,
};
const github: Github = {
@@ -255,6 +263,11 @@ export function defineGithubTheme(githubColor: GithubColor): Theme {
emphasis: githubColor.bgColor.accent.emphasis,
},
},
borderColor: {
accent: {
emphasis: githubColor.borderColor.accent.emphasis,
},
},
button: {
default: {
bgColor: {

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

@@ -19,6 +19,7 @@ export const github = {
success: null,
/** 完成的文本颜色
* @issue `button` 关闭工单按钮文本颜色
* @svg `issueClosed` 工单已关闭图标颜色
*/
done: null,
},
@@ -32,6 +33,14 @@ export const github = {
emphasis: null,
},
},
borderColor: {
accent: {
/** 强调色
* @input `input` 输入框被选中时的边框颜色
*/
emphasis: null,
},
},
button: {
/** 普通按钮 */
default: {

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

@@ -149,6 +149,6 @@ export const other = {
/** 背景色 */
bg: null,
},
/** 不知道啥玩意 dimmer 的背景色 */
/** 叠加背景色, 比如弹窗时遮蔽页面其他部分的背景色 */
overlayBackdrop: "color-overlay-backdrop",
};

9
styles/components.scss
View File

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

13
styles/public.scss
View File

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

7
styles/public/index.tsx
View File

@@ -1,2 +1,5 @@
import "./button";
import "./chroma";
import "./button"; // 按钮
import "./chroma"; // 代码高亮
import "./input"; // 输入框
import "./modal"; // 弹窗
import "./svg"; // svg 图标

34
styles/public/input.scss
View File

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

31
styles/public/input.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { css, otherThemeVars, themeVars } from "src/types/vars";
export const input = css`
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"] {
&:focus,
&:focus-visible {
background: ${themeVars.color.body} !important;
border-radius: ${otherThemeVars.border.radius};
border-color: ${themeVars.github.borderColor.accent.emphasis};
// 向内部添加一个 1px 的边框
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
outline: none;
}
}
`;

45
styles/public/modal.scss
View File

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

24
styles/public/modal.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { css, themeVars } from "src/types/vars";
export const modal = css`
.ui.modal {
border: 1.5px solid ${themeVars.color.light.border};
> .header {
background-color: ${themeVars.color.menu};
border-bottom: 1.5px solid ${themeVars.color.light.border};
}
> .content,
form > .content {
background-color: ${themeVars.color.menu};
}
> .actions,
.content + .actions,
.content + form > .actions {
background-color: ${themeVars.color.menu};
border-top: 1.5px solid ${themeVars.color.light.border};
}
}
`;

15
styles/public/svg.scss
View File

@@ -1,15 +0,0 @@
.text {
.purple {
color: #ab7df8 !important;
}
.green {
color: #3fb950 !important;
}
}
.svg {
&.octicon-issue-closed {
color: #ab7df8 !important;
}
}

11
styles/public/svg.tsx Normal file
View File

@@ -0,0 +1,11 @@
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;
}
}
`;

11
themes/dark.css.tsx
View File

@@ -46,6 +46,9 @@ const github: GithubColor = {
danger: {
muted: "#f851491a",
},
// done: {
// emphasis: "#8957e5",
// },
default: "#0d1117",
inset: "#010409",
muted: "#151b23",
@@ -54,6 +57,9 @@ const github: GithubColor = {
},
},
borderColor: {
accent: {
emphasis: "#1f6feb",
},
default: "#3d444d",
muted: "#3d444db3",
translucent: "#ffffff26",
@@ -96,6 +102,11 @@ const github: GithubColor = {
shadow: {
floating: "#01040966",
},
overlay: {
backdrop: {
bgColor: "#21283066"
}
}
};
export default defineGithubTheme(github);