mirror of
https://github.com/lutinglt/gitea-github-theme.git
synced 2025-10-27 05:31:04 +00:00
button 样式迁移
This commit is contained in:
lutinglt
@@ -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