修复嵌套下拉菜单样式和双选项切换按钮

This commit is contained in:
lutinglt
2025-09-07 23:05:26 +08:00
parent 6c0fd14119
commit f08c7a0c8c
5 changed files with 62 additions and 44 deletions

1
.github/release.md vendored
View File

@@ -38,6 +38,7 @@
- 取消修改编辑器字体大小, 避免光标错位 - 取消修改编辑器字体大小, 避免光标错位
- 修复文件预览时文件树右边框过粗 - 修复文件预览时文件树右边框过粗
- 修复提交列表尾行圆角 - 修复提交列表尾行圆角
- 修复 wiki 页面和组织页面的用户下拉菜单的圆角问题
## 📃 English (From AI) ## 📃 English (From AI)

View File

@@ -22,8 +22,9 @@ export const dashboard = css`
display: none; display: none;
} }
&:not(.active) { &:not(.active) {
margin: 4px !important; border-radius: ${otherThemeVars.border.radius};
width: calc(50% - 8px); margin: 6px !important;
width: calc(50% - 12px);
&:hover { &:hover {
background: ${themeVars.github.control.transparent.bgColor.hover}; background: ${themeVars.github.control.transparent.bgColor.hover};
} }

View File

@@ -4,48 +4,6 @@ import { css, otherThemeVars, themeVars } from "src/types/vars";
export const notification = css` export const notification = css`
.page-content.user.notification { .page-content.user.notification {
> .ui.container { > .ui.container {
// 应只选中订阅/关注页面, 不能选中通知页面
&:has(.flex-list) {
// 订阅/关注切换菜单
.ui.compact.small.menu.small-menu-items {
background: ${themeVars.color.hover.self} !important;
border: 0;
font-size: 14px;
gap: 8px;
> .item {
background: unset !important;
border: 1px solid ${themeVars.color.hover.self};
border-radius: ${otherThemeVars.border.radius};
padding: 6px 12px !important;
&.active {
background: ${themeVars.color.menu} !important;
border-color: ${themeVars.color.light.border};
font-weight: 600;
}
&::before {
display: none;
}
&:not(.active) {
// padding 纵向数值 + top 数值 = 8px 就居中
// 不明白啥原理, 反正 height 设为 100% 就可以了
top: 4px;
padding: 4px 12px !important;
height: 100%;
// 该方案只适用于 2 个 item 的情况
// left / right 数值为 gap 数值的一半
&:first-child {
left: 4px;
}
&:last-child {
right: 4px;
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
}
}
}
}
}
> .ui.attached.segment { > .ui.attached.segment {
border: 0; border: 0;
padding: 0; padding: 0;

View File

@@ -78,6 +78,14 @@ export const dropdown = css`
margin-bottom: 4px !important; margin-bottom: 4px !important;
} }
} }
// 修复 wiki 的页面下拉菜单圆角
.ui.floating.dropdown > .menu {
border-radius: 12px !important;
}
// 修复嵌套菜单的圆角问题, wiki 页面和组织页面的用户下拉菜单
.ui.dropdown .menu .scrolling.menu {
border-radius: 0 0 12px 12px !important;
}
// 修复下拉菜单元素溢出问题 // 修复下拉菜单元素溢出问题
// 用户菜单 // 用户菜单
.user-menu>.item, .user-menu>.item,

View File

@@ -236,3 +236,53 @@ export const paginationMenu = css`
} }
} }
`; `;
// 单行双选项菜单
export const smallCompactMenu = css`
// 订阅/关注切换菜单(应只选中订阅/关注页面, 不能选中通知页面)
.page-content.user.notification > .ui.container:has(.flex-list),
// 里程碑/标签切换菜单(里程碑页)
.page-content.repository.milestones .list-header,
// 里程碑/标签切换菜单(标签页)
.page-content.repository.labels .issue-navbar {
.ui.compact.small.menu.small-menu-items {
background: ${themeVars.color.hover.self} !important;
border: 0;
font-size: 14px;
gap: 8px;
height: 32px;
min-height: 32px !important;
> .item {
background: unset !important;
border: 1px solid ${themeVars.color.hover.self};
border-radius: ${otherThemeVars.border.radius};
padding: 6px 12px !important;
&.active {
background: ${themeVars.color.menu} !important;
border-color: ${themeVars.color.light.border};
font-weight: 600;
}
&::before {
display: none;
}
&:not(.active) {
top: 4px;
padding: 4px 12px !important;
height: calc(100% - 8px);
position: relative;
// 该方案只适用于 2 个 item 的情况
// left / right 数值为 gap 数值的一半
&:first-child {
left: 4px;
}
&:last-child {
right: 4px;
}
&:hover {
background: ${themeVars.github.control.transparent.bgColor.hover} !important;
}
}
}
}
}
`;