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

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

View File

@@ -22,8 +22,9 @@ export const dashboard = css`
display: none;
}
&:not(.active) {
margin: 4px !important;
width: calc(50% - 8px);
border-radius: ${otherThemeVars.border.radius};
margin: 6px !important;
width: calc(50% - 12px);
&: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`
.page-content.user.notification {
> .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 {
border: 0;
padding: 0;

View File

@@ -78,6 +78,14 @@ export const dropdown = css`
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,

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