mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-11 18:10:49 +08:00
优化垂直导航栏样式
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user