fix: replace sidebar label backdrop with theme-aware text shadow

This commit is contained in:
GouJ
2026-09-14 14:03:50 +08:00
parent 01f01a6613
commit bddf3379df
+4 -16
View File
@@ -386,18 +386,6 @@ const menuOptions = computed<MenuOption[]>(() => {
z-index: 30; z-index: 30;
overflow: visible; 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: var(--app-surface);
border-right: 1px solid var(--app-border);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.admin-sider.is-collapsed .admin-nav-scroll.n-scrollbar, .admin-sider.is-collapsed .admin-nav-scroll.n-scrollbar,
.admin-sider.is-collapsed .admin-sider-footer { .admin-sider.is-collapsed .admin-sider-footer {
position: relative; position: relative;
@@ -407,9 +395,6 @@ const menuOptions = computed<MenuOption[]>(() => {
clip-path: inset(0 calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed)) 0 0); clip-path: inset(0 calc(var(--admin-nav-reveal-width) - var(--admin-sider-collapsed)) 0 0);
transition: clip-path 0s 0.2s; transition: clip-path 0s 0.2s;
} }
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible))::before {
opacity: 1;
}
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-nav-scroll.n-scrollbar, .admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-nav-scroll.n-scrollbar,
.admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-sider-footer { .admin-sider.is-collapsed:is(:hover, :has(:focus-visible)) .admin-sider-footer {
clip-path: inset(0); clip-path: inset(0);
@@ -423,6 +408,10 @@ 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,
@@ -488,7 +477,6 @@ const menuOptions = computed<MenuOption[]>(() => {
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.admin-sider, .admin-sider,
.admin-sider.is-collapsed, .admin-sider.is-collapsed,
.admin-sider.is-collapsed::before,
.admin-sider.is-collapsed .admin-nav-scroll.n-scrollbar, .admin-sider.is-collapsed .admin-nav-scroll.n-scrollbar,
.admin-sider.is-collapsed .admin-sider-footer, .admin-sider.is-collapsed .admin-sider-footer,
.admin-sider .n-menu-item-content-header, .admin-sider .n-menu-item-content-header,