short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add subtle blurred sidebar backdrop and synchronized hover colors

Browse Source
This commit is contained in:
GouJ
2026-09-14 14:34:19 +08:00
parent bddf3379df
commit cc8202e156
1 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+34 -2
View File
@@ -347,7 +347,9 @@ const menuOptions = computed<MenuOption[]>(() => {
}
.admin-menu-label {
display: inline-block;
transition: transform 0.2s ease;
transition:
transform 0.2s ease,
color 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;
@@ -386,6 +388,24 @@ const menuOptions = computed<MenuOption[]>(() => {
z-index: 30;
overflow: visible;
}
/* 低透明度磨砂层隔开正文，右侧渐隐避免出现明显的面板边界。 */
.admin-sider.is-collapsed::before {
content: '';
position: absolute;
inset: 0 auto 0 var(--admin-sider-collapsed);
width: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed));
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;
}
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible))::before {
opacity: 1;
}
.admin-sider.is-collapsed .admin-nav-scroll.n-scrollbar,
.admin-sider.is-collapsed .admin-sider-footer {
position: relative;
@@ -408,7 +428,7 @@ 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);
@@ -422,6 +442,17 @@ 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__icon,
.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) .n-button__icon,
.admin-sider.is-collapsed .admin-settings-button:is(:hover, :focus-visible) .admin-settings-label {
color: var(--app-accent-text);
}
/* 选中、悬停背景仅落在图标轨道内。 */
.admin-sider.is-collapsed .n-menu .n-menu-item-content::before {
right: calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed));
@@ -477,6 +508,7 @@ const menuOptions = computed<MenuOption[]>(() => {
@media (prefers-reduced-motion: reduce) {
.admin-sider,
.admin-sider.is-collapsed,
.admin-sider.is-collapsed::before,
.admin-sider.is-collapsed .admin-nav-scroll.n-scrollbar,
.admin-sider.is-collapsed .admin-sider-footer,
.admin-sider .n-menu-item-content-header,