fix: emphasize active sidebar labels and dim other labels on hover
This commit is contained in:
+23
-1
@@ -349,7 +349,8 @@ const menuOptions = computed<MenuOption[]>(() => {
|
||||
display: inline-block;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
color 0.18s ease;
|
||||
color 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
}
|
||||
.admin-brand {
|
||||
@apply flex shrink-0 items-center gap-3 h-[74px] overflow-hidden py-0 px-5 text-ink whitespace-nowrap;
|
||||
@@ -457,6 +458,27 @@ const menuOptions = computed<MenuOption[]>(() => {
|
||||
.admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label {
|
||||
color: var(--admin-nav-hover-color);
|
||||
}
|
||||
/* 选中或悬停时强化菜单名称,禁用项不响应悬停。 */
|
||||
.admin-sider.is-collapsed .n-menu-item-content--selected .admin-menu-label,
|
||||
.admin-sider.is-collapsed
|
||||
.n-menu-item-content:not(.n-menu-item-content--disabled):is(:hover, :has(:focus-visible))
|
||||
.admin-menu-label,
|
||||
.admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
/* 悬停未选中入口时,整列其余名称淡化;移开后恢复原有颜色与选中态。 */
|
||||
.admin-sider.is-collapsed:has(
|
||||
.n-menu-item-content:not(.n-menu-item-content--disabled, .n-menu-item-content--selected):hover
|
||||
)
|
||||
.n-menu-item-content:not(:hover)
|
||||
.admin-menu-label,
|
||||
.admin-sider.is-collapsed:has(
|
||||
.n-menu-item-content:not(.n-menu-item-content--disabled, .n-menu-item-content--selected):hover
|
||||
)
|
||||
.admin-settings-label,
|
||||
.admin-sider.is-collapsed:has(.admin-settings-button:hover) .admin-menu-label {
|
||||
opacity: 0.55;
|
||||
}
|
||||
/* 选中、悬停背景仅落在图标轨道内。 */
|
||||
.admin-sider.is-collapsed .n-menu .n-menu-item-content::before {
|
||||
right: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed));
|
||||
|
||||
Reference in New Issue
Block a user