92 lines
3.1 KiB
CSS
92 lines
3.1 KiB
CSS
/* ==========================================================================
|
||
📱 6. 移动端高标准解耦抽屉（完美根除高度写死与溢出裁剪导致的滑不出 Bug）
|
||
========================================================================== */
|
||
@media (max-width: 767px) {
|
||
/* 1. 隐藏手机端无用大长段状态 */
|
||
.mac-statusbar .mac-sb-section.justify-end,
|
||
.mac-statusbar .mac-sb-section.justify-center,
|
||
.mac-statusbar .mac-sb-divider {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 2. 核心解法：解除裁剪，允许侧边栏无缝滑出大骨架 */
|
||
.mac-main-body {
|
||
overflow: visible !important;
|
||
position: relative !important;
|
||
}
|
||
|
||
/* 3. 刚性锁死汉堡按钮宽度 */
|
||
.mac-statusbar .mac-global-trigger {
|
||
flex-shrink: 0 !important;
|
||
min-width: 14px !important;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
🎯 终极无缝贴合 + 右侧刚性阴影控制（完美降权至状态栏下层）
|
||
========================================================================== */
|
||
.mac-sidebar,
|
||
.mac-sidebar-second {
|
||
position: absolute !important;
|
||
top: 0 !important;
|
||
bottom: 0 !important;
|
||
height: 100% !important;
|
||
border-right: 1px solid var(--mac-border) !important;
|
||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||
}
|
||
|
||
/* 一级面板：无缝贴合左侧，z-index 降至 99（低于状态栏的 1000） */
|
||
.mac-sidebar {
|
||
width: 200px !important;
|
||
left: 0 !important;
|
||
transform: translateX(-100%) !important;
|
||
z-index: 99 !important;
|
||
padding: 10px 2px !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* 二级面板：z-index 降至 98，初始无阴影 */
|
||
.mac-sidebar-second {
|
||
width: 180px !important;
|
||
left: 0 !important;
|
||
transform: translateX(-200%) !important;
|
||
z-index: 98 !important;
|
||
padding: 10px 2px !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
/* 4. 唤醒联动控制流 */
|
||
.mobile-menu-open .mac-sidebar {
|
||
transform: translateX(0) !important;
|
||
}
|
||
|
||
/* 二级菜单阶梯式无缝滑出 */
|
||
.mobile-menu-open .mac-sidebar-second {
|
||
transform: translateX(200px) !important;
|
||
/* 🎯 关键修正：确保展开时也在状态栏（1000）下方，同时依靠 X 轴正向偏移实现【仅右侧外漏阴影】 */
|
||
z-index: 100 !important;
|
||
|
||
/* 刚性右侧投影：垂直不偏移（0px），模糊 16px，只有右侧（8px）有黄昏黑投影 */
|
||
box-shadow: 8px 0 16px rgba(0, 0, 0, 0.6) !important;
|
||
}
|
||
|
||
/* 5. 舞台区自适应 */
|
||
.mac-stage {
|
||
width: 100vw !important;
|
||
}
|
||
|
||
.mac-stage-container {
|
||
padding: 12px !important;
|
||
}
|
||
|
||
.mac-sub-navbar {
|
||
padding-left: 20px !important;
|
||
}
|
||
|
||
.pc-menu-open .mac-sidebar,
|
||
.pc-menu-open .mac-sidebar-second {
|
||
width: 0px !important;
|
||
border-right-width: 0px !important;
|
||
padding: 10px 0 !important;
|
||
}
|
||
}
|