diff --git a/src/@core/scss/template/_default-layout-w-vertical-nav.scss b/src/@core/scss/template/_default-layout-w-vertical-nav.scss index 3ad6ed5a..92ba9ed9 100644 --- a/src/@core/scss/template/_default-layout-w-vertical-nav.scss +++ b/src/@core/scss/template/_default-layout-w-vertical-nav.scss @@ -28,10 +28,9 @@ $header: ".layout-navbar"; // Scrolled styles for sticky navbar @at-root { - /* ℹ️ This html selector with not selector is required when: - dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke + /* ℹ️ Only apply scrolled styles when window is actually scrolled, + not when dialog is opened without scroll */ - html.v-overlay-scroll-blocked .layout-navbar-fixed, &.window-scrolled.layout-navbar-fixed { #{$header} { @@ -43,6 +42,21 @@ $header: ".layout-navbar"; @extend %blurry-bg; } } + + /* ℹ️ Ensure header styles are preserved when dialog is opened, + regardless of scroll state + */ + html.v-overlay-scroll-blocked &.window-scrolled.layout-navbar-fixed { + + #{$header} { + @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav; + @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled; + } + + .navbar-blur#{$header} { + @extend %blurry-bg; + } + } } } diff --git a/src/@core/scss/template/placeholders/_misc.scss b/src/@core/scss/template/placeholders/_misc.scss index 7851f401..56116a3d 100644 --- a/src/@core/scss/template/placeholders/_misc.scss +++ b/src/@core/scss/template/placeholders/_misc.scss @@ -1,6 +1,5 @@ %blurry-bg { position: relative; - background: rgba(var(--v-theme-background), 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 4%), 0 1px 2px rgba(0, 0, 0, 2%); @media (width > 768px) { diff --git a/src/styles/custom.scss b/src/styles/custom.scss index f294d4b5..bd3ebaba 100644 --- a/src/styles/custom.scss +++ b/src/styles/custom.scss @@ -6,21 +6,15 @@ html.v-overlay-scroll-blocked { position: fixed; + position: relative; + + --v-body-scroll-y: 0px !important; } -/* 防止Chrome移动端下拉刷新干扰 */ body { overscroll-behavior: none; } -@media (width <= 768px){ - html.v-overlay-scroll-blocked { - position: relative; - - --v-body-scroll-y: 0px !important; - } -} - @mixin hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none;