fix: use neutral sidebar hover colors and remove blurred edge shading
This commit is contained in:
+15
-11
@@ -384,11 +384,15 @@ const menuOptions = computed<MenuOption[]>(() => {
|
|||||||
@media (min-width: 801px) {
|
@media (min-width: 801px) {
|
||||||
.admin-sider.is-collapsed {
|
.admin-sider.is-collapsed {
|
||||||
--admin-nav-reveal-width: 160px;
|
--admin-nav-reveal-width: 160px;
|
||||||
|
--admin-nav-hover-color: #111111;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 30;
|
z-index: 30;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
/* 低透明度磨砂层隔开正文,右侧渐隐避免出现明显的面板边界。 */
|
:root[data-theme='dark'] .admin-sider.is-collapsed {
|
||||||
|
--admin-nav-hover-color: #ffffff;
|
||||||
|
}
|
||||||
|
/* 保留文字下方的磨砂效果,移除右侧渐隐遮罩产生的阴影边缘。 */
|
||||||
.admin-sider.is-collapsed::before {
|
.admin-sider.is-collapsed::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -397,8 +401,6 @@ const menuOptions = computed<MenuOption[]>(() => {
|
|||||||
background: color-mix(in srgb, var(--app-surface) 55%, transparent);
|
background: color-mix(in srgb, var(--app-surface) 55%, transparent);
|
||||||
-webkit-backdrop-filter: blur(14px) saturate(110%);
|
-webkit-backdrop-filter: blur(14px) saturate(110%);
|
||||||
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;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity 0.2s ease;
|
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-menu-label,
|
||||||
.admin-sider.is-collapsed .admin-settings-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);
|
transform: translateX(-6px);
|
||||||
}
|
}
|
||||||
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .n-menu-item-content-header,
|
.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 {
|
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-settings-label {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
/* 以整行作为悬停目标,移入图标或名称都同步高亮,禁用项保持原色。 */
|
/* 未选中项悬停时仅提高中性色对比,选中项保留主题色,禁用项保持原色。 */
|
||||||
.admin-sider.is-collapsed
|
.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,
|
.n-menu-item-content__icon,
|
||||||
.admin-sider.is-collapsed
|
.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-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) .n-button__icon,
|
||||||
.admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label {
|
.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 {
|
.admin-sider.is-collapsed .n-menu .n-menu-item-content::before {
|
||||||
|
|||||||
Reference in New Issue
Block a user