修复一些下拉菜单在向上弹出时与向下弹出不一致的问题

This commit is contained in:
lutinglt
2025-07-08 14:25:32 +08:00
parent 9ccc65ac1c
commit 5ac3a3044e
3 changed files with 26 additions and 3 deletions

1
.github/release.md vendored
View File

@@ -14,3 +14,4 @@
- 修复选择输入框的样式 - 修复选择输入框的样式
- 修复创建仓库时拥有者按钮的高度 - 修复创建仓库时拥有者按钮的高度
- 修复一些输入框在整体元素中不居中 - 修复一些输入框在整体元素中不居中
- 修复一些下拉菜单在向上弹出时与向下弹出不一致的问题

View File

@@ -3,7 +3,6 @@
- hover 动画迁移 - hover 动画迁移
- 列表部分 item 展开动画迁移 - 列表部分 item 展开动画迁移
### 重大 ### 重大
- gitea issue 默认标签颜色匹配使用 github 样式 - gitea issue 默认标签颜色匹配使用 github 样式

View File

@@ -8,7 +8,6 @@ export const dropdown = css`
.menu { .menu {
animation: ${animation}; animation: ${animation};
// 统一所有下拉菜单的样式 // 统一所有下拉菜单的样式
margin-top: 0.35em !important;
background-color: ${themeVars.color.menu} !important; background-color: ${themeVars.color.menu} !important;
border: unset !important; border: unset !important;
border-radius: 12px !important; border-radius: 12px !important;
@@ -58,6 +57,20 @@ export const dropdown = css`
} }
} }
} }
// 向下弹出的下拉菜单向下偏移
.ui.dropdown:not(.upward),
.ui.menu .ui.dropdown:not(.upward) {
.menu {
margin-top: 0.35em !important;
}
}
// 向上弹出的下拉菜单向上偏移
.ui.dropdown.upward,
.ui.menu .ui.dropdown.upward {
.menu {
margin-bottom: 0.35em !important;
}
}
// 修复下拉菜单元素溢出问题 // 修复下拉菜单元素溢出问题
// 用户菜单 // 用户菜单
.user-menu>.item, .user-menu>.item,
@@ -125,8 +138,12 @@ export const selectionDropdown = css`
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis}; box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
outline: none; outline: none;
} }
// 覆盖选择输入框向上弹出时的 hover 效果, 原阴影会覆盖加厚的边框线
.ui.upward.active.selection.dropdown:hover {
box-shadow: inset 0 0 0 1px ${themeVars.github.borderColor.accent.emphasis};
}
// 由于之前的排除导致样式优先级变高, 小按钮去除圆角 // 由于之前的排除导致样式优先级变高, 小按钮去除圆角
.ui.action.input>.dropdown.small:not(:first-child) { .ui.action.input > .dropdown.small:not(:first-child) {
border-radius: 0; border-radius: 0;
} }
// 排除一些小按钮, 例如软件包类型, 通常相邻有元素 // 排除一些小按钮, 例如软件包类型, 通常相邻有元素
@@ -134,4 +151,10 @@ export const selectionDropdown = css`
border-bottom-left-radius: ${otherThemeVars.border.radius} !important; border-bottom-left-radius: ${otherThemeVars.border.radius} !important;
border-bottom-right-radius: ${otherThemeVars.border.radius} !important; border-bottom-right-radius: ${otherThemeVars.border.radius} !important;
} }
// 修复选择框的下拉菜单向上显示时的样式问题
.ui.upward.selection.dropdown.visible:not(.small),
.ui.active.upward.selection.dropdown:not(.small) {
border-top-left-radius: ${otherThemeVars.border.radius}!important;
border-top-right-radius: ${otherThemeVars.border.radius}!important;
}
`; `;