一些按钮样式优化

This commit is contained in:
lutinglt
2025-07-06 19:28:54 +08:00
parent 0f8bfe6201
commit 3b0f481be7
3 changed files with 33 additions and 9 deletions

2
.github/release.md vendored
View File

@@ -31,6 +31,7 @@
- Issue/PR 菜单选项样式同步
- 仓库标签页样式和颜色同步
- 仓库发布页样式和颜色同步
- 关注按钮样式同步
## 🎈 Perf
@@ -46,6 +47,7 @@
- 合并请求分支样式统一
- 全局下拉菜单样式统一
- 弹窗按钮样式优化
- 一些小型按钮的高度优化
## 🐞 Fix

View File

@@ -16,11 +16,6 @@ export const button = css`
// 重新开启按钮
.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};
}
}
}
`;

View File

@@ -26,12 +26,27 @@ export const baseButton = css`
${primaryHoverStyle}
}
}
/* 普通按钮边框色不变 */
.ui.basic.button:hover,
/* 仓库点星等数字标签按钮边框色不变 */
.ui.labeled.button > .label:hover {
// 主色调基本按钮和普通按钮一样
// 作者的关注按钮
.ui.basic.primary.button {
background-color: ${themeVars.color.button};
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
&:hover {
background-color: ${themeVars.color.hover.self};
color: ${themeVars.color.text.self};
border-color: ${themeVars.color.light.border};
}
}
/* 普通按钮边框色不变 */
.ui.basic.button,
/* 仓库点星等数字标签按钮边框色不变 */
.ui.labeled.button > .label {
&:hover {
border-color: ${themeVars.color.light.border};
}
}
/* 普通按钮激活时背景色 */
.ui.basic.buttons .button:active,
.ui.basic.button:active,
@@ -68,3 +83,15 @@ export const branchDropdownButton = css`
min-height: 30px;
}
`;
// 修复按钮高度
export const fixButtonHeight = css`
.ui.small.buttons .button,
.ui.ui.ui.ui.small.button {
min-height: 26px;
}
.ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {
min-height: 20px;
}
`;