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

setting 迁移

Browse Source
This commit is contained in:
lutinglt
2025-07-06 14:29:55 +08:00
parent aa023116ae
commit 02ac10ecfc
10 changed files with 149 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,6 +57,7 @@ export const github = {
* @input `input` 输入框被选中时的边框颜色
* @clone `clone` 克隆地址框被选中时的边框颜色
* @issue `comment` 评论框被选中时的边框颜色
* @menu `verticalMenu` 垂直菜单项激活时左侧的伪元素颜色
*/
emphasis: null,
},
@@ -161,6 +162,7 @@ export const github = {
* @clone `clone` 克隆按钮下按钮组和面板操作列表的悬停背景颜色
* @input `inputAction` 输入框动作按钮的悬停背景颜色
* @dropdown `dropdown` 下拉框子项的悬停背景颜色
* @menu `verticalMenu` 垂直菜单项的悬停背景颜色
*/
hover: null,
},

2
styles/components/actions.tsx
View File

@@ -149,7 +149,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);

1
styles/components/clone.tsx
View File

@@ -34,6 +34,7 @@ export const clone = css`
width: 100%;
height: 2px;
background: ${themeVars.github.underlineNav.borderColor.active};
border-radius: ${otherThemeVars.border.radius};
}
}
.item.active {

172
styles/components/setting.scss
View File

@@ -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;
}
}

30
styles/components/setting.tsx
View File

@@ -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;
}
}
`;

4
styles/public/dropdown.tsx
View File

@@ -80,8 +80,8 @@ export const selectionDropdown = css`
background-color: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};
border-radius: ${otherThemeVars.border.radius};
padding: 9px 16px;
min-height: 33px;
padding: 8px 16px;
min-height: 32px;
&:focus {
background: ${themeVars.color.button};
border-color: ${themeVars.color.light.border};

1
styles/public/index.tsx
View File

@@ -7,6 +7,7 @@ import "./chroma"; // 代码高亮
import "./dropdown"; // 下拉框
import "./input"; // 输入框
import "./label"; // 标签
import "./menu"; // 菜单
import "./modal"; // 弹窗
import "./svg"; // svg 图标
import "./tippy"; // 提示框

1
styles/public/input.tsx
View File

@@ -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;

110
styles/public/menu.tsx Normal file
View File

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

4
themes/dark.css.tsx
View File

@@ -105,9 +105,7 @@ const github: GithubColor = {
bgColor: {
active: "#656c7640",
hover: "#656c7633",
// 非官方颜色, 实在是太淡了
// selected: "#656c761a",
selected: "#656c762a",
selected: "#656c761a",
},
},
},