fix: replace sidebar label backdrop with theme-aware text shadow
This commit is contained in:
+4
-16
@@ -386,18 +386,6 @@ 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: 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-sider-footer {
|
||||
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);
|
||||
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-sider-footer {
|
||||
clip-path: inset(0);
|
||||
@@ -423,6 +408,10 @@ 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,
|
||||
@@ -488,7 +477,6 @@ 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,
|
||||
|
||||
Reference in New Issue
Block a user