fix: use neutral sidebar hover colors and remove blurred edge shading

This commit is contained in:
GouJ
2026-09-14 14:41:21 +08:00
parent cc8202e156
commit 8d4e9d2af7
+15 -11
View File
@@ -384,11 +384,15 @@ const menuOptions = computed<MenuOption[]>(() => {
@media (min-width: 801px) {
.admin-sider.is-collapsed {
--admin-nav-reveal-width: 160px;
--admin-nav-hover-color: #111111;
position: relative;
z-index: 30;
overflow: visible;
}
/* 低透明度磨砂层隔开正文,右侧渐隐避免出现明显的面板边界。 */
:root[data-theme='dark'] .admin-sider.is-collapsed {
--admin-nav-hover-color: #ffffff;
}
/* 保留文字下方的磨砂效果,移除右侧渐隐遮罩产生的阴影边缘。 */
.admin-sider.is-collapsed::before {
content: '';
position: absolute;
@@ -397,8 +401,6 @@ const menuOptions = computed<MenuOption[]>(() => {
background: color-mix(in srgb, var(--app-surface) 55%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(110%);
backdrop-filter: blur(14px) saturate(110%);
-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
mask-image: linear-gradient(to right, #000 85%, transparent);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
@@ -428,10 +430,6 @@ const menuOptions = computed<MenuOption[]>(() => {
}
.admin-sider.is-collapsed .admin-menu-label,
.admin-sider.is-collapsed .admin-settings-label {
/* 柔和字形阴影辅助磨砂层,保持浅色和暗色主题下的可读性。 */
text-shadow:
0 0 3px var(--app-surface),
0 1px 6px var(--app-surface);
transform: translateX(-6px);
}
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .n-menu-item-content-header,
@@ -442,16 +440,22 @@ const menuOptions = computed<MenuOption[]>(() => {
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-settings-label {
transform: translateX(0);
}
/* 以整行作为悬停目标,移入图标或名称都同步高亮,禁用项保持原色。 */
/* 未选中项悬停时仅提高中性色对比,选中项保留主题色,禁用项保持原色。 */
.admin-sider.is-collapsed
.n-menu-item-content:not(.n-menu-item-content--disabled):is(:hover, :has(:focus-visible))
.n-menu-item-content:not(.n-menu-item-content--disabled, .n-menu-item-content--selected):is(
:hover,
:has(:focus-visible)
)
.n-menu-item-content__icon,
.admin-sider.is-collapsed
.n-menu-item-content:not(.n-menu-item-content--disabled):is(:hover, :has(:focus-visible))
.n-menu-item-content:not(.n-menu-item-content--disabled, .n-menu-item-content--selected):is(
:hover,
:has(:focus-visible)
)
.admin-menu-label,
.admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .n-button__icon,
.admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label {
color: var(--app-accent-text);
color: var(--admin-nav-hover-color);
}
/* 选中、悬停背景仅落在图标轨道内。 */
.admin-sider.is-collapsed .n-menu .n-menu-item-content::before {