mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-27 22:40:30 +00:00
button 样式迁移
This commit is contained in:
lutinglt
@@ -1,5 +1,4 @@
|
||||
// organize-imports-ignore
|
||||
// tslint:disable:ordered-imports
|
||||
// 组件导入有顺序, 禁止插件优化
|
||||
import "./actions";
|
||||
import "./diff";
|
||||
import "./issue";
|
||||
import "./setting";
|
||||
|
||||
25
styles/components/issue.tsx
Normal file
25
styles/components/issue.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const button = css`
|
||||
.issue-content-left .field.footer {
|
||||
// 关闭工单按钮
|
||||
.ui.red.basic.button#status-button {
|
||||
color: ${themeVars.github.fgColor.done};
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
}
|
||||
|
||||
// 重新开启按钮
|
||||
.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};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
68
styles/components/setting.tsx
Normal file
68
styles/components/setting.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
import { primaryHoverStyle, primaryStyle } from "styles/public/button";
|
||||
|
||||
const tinyStyle = {
|
||||
color: themeVars.github.button.primary.fgColor.accent,
|
||||
backgroundColor: themeVars.color.button,
|
||||
borderColor: themeVars.color.light.border,
|
||||
};
|
||||
|
||||
const tinyHoverStyle = {
|
||||
color: themeVars.github.button.primary.fgColor.rest,
|
||||
backgroundColor: themeVars.github.button.primary.bgColor.hover,
|
||||
borderColor: themeVars.github.button.primary.borderColor.hover,
|
||||
};
|
||||
|
||||
// 设置界面下的按钮
|
||||
export const button = css`
|
||||
// 不包含管理员的设置界面
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content {
|
||||
// 主色调按钮替换为普通按钮
|
||||
.ui.primary.button {
|
||||
color: ${themeVars.color.text.light.self};
|
||||
background-color: ${themeVars.color.button};
|
||||
border-color: ${themeVars.color.light.border};
|
||||
|
||||
&:hover {
|
||||
background-color: ${themeVars.color.hover.self};
|
||||
}
|
||||
}
|
||||
// 迷你按钮替换为自定义的主色调按钮 (例: SSH 验证按钮)
|
||||
.ui.primary.button.tiny {
|
||||
${tinyStyle}
|
||||
&:hover {
|
||||
${tinyHoverStyle}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 右上角迷你按钮替换会主色调按钮
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content,
|
||||
.admin-setting-content {
|
||||
.ui.attached.header > .ui.right {
|
||||
.ui.primary.button.tiny {
|
||||
${primaryStyle}
|
||||
padding: 3px 12px;
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
${primaryHoverStyle}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 管理员设置界面下的自定义主色调按钮
|
||||
.admin-setting-content .ui.primary.button {
|
||||
${tinyStyle}
|
||||
padding: 5px 16px;
|
||||
line-height: 22px;
|
||||
&:hover {
|
||||
${tinyHoverStyle}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,5 +1,8 @@
|
||||
// organize-imports-ignore
|
||||
// tslint:disable:ordered-imports
|
||||
// 组件导入有顺序, 禁止插件优化
|
||||
|
||||
// 全局样式
|
||||
import "./public";
|
||||
// 组件样式
|
||||
import "./components";
|
||||
|
||||
@@ -1,138 +0,0 @@
|
||||
// Made by Luting ^-^
|
||||
.ui.button {
|
||||
min-height: 30px;
|
||||
font-weight: 500;
|
||||
padding: 9px 16px;
|
||||
}
|
||||
.ui.primary.button {
|
||||
background-color: #238636;
|
||||
&:hover {
|
||||
background-color: #29903b;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.basic.button {
|
||||
color: #f0f6fc;
|
||||
}
|
||||
|
||||
.ui.basic.button:hover,
|
||||
.ui.labeled.button > .label:hover {
|
||||
color: #f0f6fc;
|
||||
background: #262c36;
|
||||
border-color: var(--color-light-border);
|
||||
}
|
||||
|
||||
.ui.red.button,
|
||||
.ui.basic.red.buttons .button,
|
||||
.ui.basic.red.button {
|
||||
color: #fa5e55;
|
||||
background-color: var(--color-button);
|
||||
border-color: var(--color-light-border);
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #b62324;
|
||||
border-color: #ffffff1a;
|
||||
}
|
||||
}
|
||||
|
||||
.ui.button.branch-dropdown-button {
|
||||
padding: 3px 12px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.ui.menu button.item:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// 设置界面
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content {
|
||||
.ui.primary.button {
|
||||
color: #f0f6fc;
|
||||
background-color: var(--color-button);
|
||||
border-color: var(--color-light-border);
|
||||
&:hover {
|
||||
background-color: #262c36;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%button-tiny-style {
|
||||
color: #39d353;
|
||||
background-color: var(--color-button);
|
||||
border-color: var(--color-light-border);
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #29903b;
|
||||
border-color: #ffffff1a;
|
||||
}
|
||||
}
|
||||
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content {
|
||||
.ui.primary.button.tiny {
|
||||
@extend %button-tiny-style;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-setting-content .ui.primary.button {
|
||||
@extend %button-tiny-style;
|
||||
}
|
||||
|
||||
.user-main-content,
|
||||
.repo-setting-content,
|
||||
.user-setting-content,
|
||||
.org-setting-content,
|
||||
.admin-setting-content {
|
||||
.ui.right {
|
||||
.ui.primary.button.tiny {
|
||||
color: #fff;
|
||||
background-color: #238636;
|
||||
&:hover {
|
||||
background-color: #29903b;
|
||||
border-color: var(--color-light-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 工单侧边栏
|
||||
.ui.fluid.ui.button,
|
||||
.ui.button.branch-dropdown-button,
|
||||
.ui.ui.icon.button,
|
||||
.ui.two.wide.button {
|
||||
background-color: var(--color-button);
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #262c36;
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭工单按钮
|
||||
.ui.red.basic.button#status-button {
|
||||
color: #ab7df8;
|
||||
border-color: var(--color-light-border);
|
||||
background-color: var(--color-button);
|
||||
&:hover {
|
||||
color: #fff;
|
||||
border-color: #ffffff1a;
|
||||
background-color: var(--color-purple);
|
||||
}
|
||||
}
|
||||
|
||||
// 重新开启按钮
|
||||
.ui.basic.primary.button#status-button {
|
||||
color: #39d353;
|
||||
background-color: var(--color-button);
|
||||
border-color: var(--color-light-border);
|
||||
&:hover {
|
||||
color: #44ff61;
|
||||
background: var(--color-hover);
|
||||
}
|
||||
}
|
||||
70
styles/public/button.tsx
Normal file
70
styles/public/button.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import { css, themeVars } from "src/types/vars";
|
||||
|
||||
export const primaryStyle = {
|
||||
color: themeVars.github.button.primary.fgColor.rest,
|
||||
backgroundColor: themeVars.github.button.primary.bgColor.rest,
|
||||
borderColor: themeVars.github.button.primary.borderColor.rest,
|
||||
};
|
||||
|
||||
export const primaryHoverStyle = {
|
||||
color: themeVars.github.button.primary.fgColor.rest,
|
||||
backgroundColor: themeVars.github.button.primary.bgColor.hover,
|
||||
borderColor: themeVars.github.button.primary.borderColor.hover,
|
||||
};
|
||||
|
||||
// 普通按钮和主色调按钮
|
||||
export const baseButton = css`
|
||||
.ui.button {
|
||||
min-height: 30px;
|
||||
font-weight: 500;
|
||||
padding: 9px 16px;
|
||||
}
|
||||
|
||||
.ui.primary.button {
|
||||
${primaryStyle}
|
||||
&:hover {
|
||||
${primaryHoverStyle}
|
||||
}
|
||||
}
|
||||
/* 普通按钮边框色不变 */
|
||||
.ui.basic.button:hover,
|
||||
/* 仓库点星等数字标签按钮边框色不变 */
|
||||
.ui.labeled.button > .label:hover {
|
||||
border-color: ${themeVars.color.light.border};
|
||||
}
|
||||
/* 普通按钮激活时背景色 */
|
||||
.ui.basic.buttons .button:active,
|
||||
.ui.basic.button:active,
|
||||
.ui.basic.buttons .active.button,
|
||||
.ui.basic.active.button,
|
||||
.ui.basic.buttons .active.button:hover,
|
||||
.ui.basic.active.button:hover {
|
||||
background-color: ${themeVars.github.button.default.bgColor.active};
|
||||
}
|
||||
`;
|
||||
|
||||
// 红色按钮
|
||||
export const redButton = css`
|
||||
.ui.red.button,
|
||||
.ui.basic.red.buttons .button,
|
||||
.ui.basic.red.button {
|
||||
color: ${themeVars.github.button.danger.fgColor.rest};
|
||||
background-color: ${themeVars.github.button.danger.bgColor.rest};
|
||||
/* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */
|
||||
border-color: ${themeVars.color.light.border};
|
||||
|
||||
&:hover {
|
||||
color: ${themeVars.github.button.danger.fgColor.hover};
|
||||
background-color: ${themeVars.github.button.danger.bgColor.hover};
|
||||
border-color: ${themeVars.github.button.danger.borderColor.hover};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// 分支菜单按钮
|
||||
export const branchDropdownButton = css`
|
||||
.ui.button.branch-dropdown-button {
|
||||
padding: 3px 12px;
|
||||
min-height: 30px;
|
||||
}
|
||||
`;
|
||||
@@ -1,4 +1,2 @@
|
||||
// organize-imports-ignore
|
||||
// tslint:disable:ordered-imports
|
||||
// 组件导入有顺序, 禁止插件优化
|
||||
import "./button";
|
||||
import "./chroma";
|
||||
|
||||
Reference in New Issue
Block a user