/* ============================================================================
Magnific-Style Sidebar · 暗色主题
Flex 固定列方案 · 图标纹丝不动 · 文字淡入淡出
========================================================================== */
/* ===================== 0. CSS 变量 ===================== */
:root {
--sb-w-expanded: 230px;
--sb-w-collapsed: 72px;
--sb-icon-col: 32px;
--sb-item-h: 36px;
--sb-radius: 8px;
--sb-bg: var(--main-bg-color, #FBF9F5);
--sb-bg-hover: color-mix(in srgb, var(--main-color) 7%, transparent);
--sb-bg-active: color-mix(in srgb, var(--main-color) 12%, transparent);
--sb-bg-ghost: color-mix(in srgb, var(--main-color) 4%, transparent);
--sb-text: var(--main-color, #242019);
--sb-text-muted: color-mix(in srgb, var(--main-color) 58%, transparent);
--sb-text-dim: color-mix(in srgb, var(--main-color) 45%, transparent);
--sb-accent: var(--theme-color, #f04494);
--sb-border: var(--main-border-color, rgba(50, 50, 50, 0.1));
--sb-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
/* ===== 统一动画令牌：折叠/展开/嵌套层全部走同一时长与缓动，消除速度差异 ===== */
--sb-dur: 300ms; /* 主过渡时长：折叠/展开/嵌套层统一 */
--sb-dur-fast: 180ms; /* 悬浮微反馈（背景/颜色），轻快不拖沓 */
--sb-ease: cubic-bezier(0.4, 0, 0.2, 1); /* 统一缓动曲线 */
--sb-tr: var(--sb-dur) var(--sb-ease); /* 兼容旧引用：结构过渡 */
--sb-tr-fast: var(--sb-dur-fast) var(--sb-ease); /* 兼容旧引用：微反馈 */
}
/* ===================== 0b. 暗色覆盖（关键：让 token 在 body 作用域重新解析） =====================
根因：--sb-bg: var(--main-bg-color) 写在 :root（html 级），而 .dark-theme 类挂在 上，
永远不带 .dark-theme，所以 --sb-* 永远解析到 :root 的浅色值 → 侧栏恒白。
这里把 --sb-* 颜色变量在 body.dark-theme / body.dark 作用域重新声明，使其解析到暗色 --main-* token。
*/
body.dark-theme,
body.dark {
--sb-bg: var(--main-bg-color, #242019);
--sb-bg-hover: color-mix(in srgb, var(--main-color) 9%, transparent);
--sb-bg-active: color-mix(in srgb, var(--main-color) 15%, transparent);
--sb-bg-ghost: color-mix(in srgb, var(--main-color) 5%, transparent);
--sb-text: var(--main-color, #F2EDE6);
--sb-text-muted: color-mix(in srgb, var(--main-color) 60%, transparent);
--sb-text-dim: color-mix(in srgb, var(--main-color) 46%, transparent);
--sb-accent: var(--theme-color, #f04494);
--sb-border: var(--main-border-color, rgba(255, 255, 255, 0.08));
--sb-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
}
/* ===================== 1. 全局让位 ===================== */
/* 折叠↔展开宽度动画中途可能出现瞬时横向溢出 → 页面底部闪一下横向滚动条。
这里锁死 body 横向溢出，根除此闪动（overflow-y 仍保持页面正常纵向滚动）。 */
body {
overflow-x: hidden;
}
body.hezi-has-sidebar {
padding-left: var(--sb-w-expanded);
transition: padding-left var(--sb-tr);
}
body.hezi-has-sidebar.hezi-sb-collapsed {
padding-left: var(--sb-w-collapsed);
}
body.hezi-has-sidebar.nav-fixed .header {
left: var(--sb-w-expanded);
right: 0;
width: auto;
transition: left var(--sb-tr), right var(--sb-tr);
}
body.hezi-has-sidebar.nav-fixed.hezi-sb-collapsed .header {
left: var(--sb-w-collapsed);
}
html.hezi-sb-collapsed body.hezi-has-sidebar {
padding-left: var(--sb-w-collapsed);
}
html.hezi-sb-collapsed body.hezi-has-sidebar.nav-fixed .header {
left: var(--sb-w-collapsed);
}
/* ===================== 2. 侧栏容器 ===================== */
.hezi-aside {
position: fixed;
left: 0;
top: 0;
width: var(--sb-w-expanded);
height: 100vh;
z-index: 900;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 16px 20px;
background: var(--sb-bg);
border-right: 1px solid var(--sb-border);
box-shadow: none;
cursor: ew-resize;
transition: width var(--sb-tr), transform var(--sb-tr);
overflow: visible;
color: var(--sb-text);
}
body.hezi-sb-collapsed .hezi-aside {
width: var(--sb-w-collapsed);
padding: 16px 20px;
transition: width var(--sb-tr), transform var(--sb-tr);
cursor: ew-resize;
}
/* fix4（首页大图下侧栏顶部渐变）已随设计变更移除：侧栏现在到顶（top:0），
整段占满高度，不再有"飘在大图上"的视觉缝。该规则可省。 */
/* ===================== 3. 顶部 LOGO 区 ===================== */
.hezi-aside__top {
position: relative;
flex: 0 0 var(--sb-item-h);
height: var(--sb-item-h);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0;
margin-bottom: 8px;
}
body:not(.hezi-sb-collapsed) .hezi-aside__top {
justify-content: center;
}
body.hezi-sb-collapsed .hezi-aside__top {
justify-content: center !important;
}
/* LOGO 下方分隔线（与 .hezi-aside__divider 一致：展开满宽，折叠 24px 居中） */
.hezi-aside__top::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px;
border-top: 1px solid var(--sb-border);
transition: width var(--sb-tr);
}
body.hezi-sb-collapsed .hezi-aside__top::after {
left: 50%;
right: auto;
width: 24px;
transform: translateX(-50%);
}
.hezi-aside__logo {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
max-width: calc(100% - 48px);
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: var(--sb-text);
transition: opacity var(--sb-tr-fast);
}
.hezi-aside__logo img {
max-height: 28px;
width: auto;
display: block;
flex-shrink: 0;
}
.hezi-aside__logo-text {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 24px;
color: currentColor;
white-space: nowrap;
opacity: 0;
overflow: visible;
transition: opacity var(--sb-dur) var(--sb-ease);
}
body:not(.hezi-sb-collapsed) .hezi-aside__logo-text {
opacity: 1;
}
body.hezi-sb-collapsed .hezi-aside__logo img {
max-width: 28px;
object-fit: contain;
}
/* 折叠态 logo 不被 max-width/overflow 挤压，居中显示 */
body.hezi-sb-collapsed .hezi-aside__logo {
max-width: none;
overflow: visible;
justify-content: center;
}
/* ===================== 4. 折叠切换按钮（旧版样式） ===================== */
.hezi-aside__collapse {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; border: none; border-radius: var(--hezi-radius, 8px); background: transparent;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
color: var(--main-color, #4e5358); transition: background var(--sb-dur-fast) var(--sb-ease); z-index: 1090;
}
.hezi-aside__collapse:hover { background: var(--focus-color-opacity1, rgba(0, 0, 0, .05)); }
.hezi-aside__collapse svg { display: block; transition: transform var(--sb-dur) var(--sb-ease); }
body:not(.hezi-sb-collapsed) .hezi-aside__collapse svg { transform: rotate(180deg); }
body.hezi-sb-collapsed .hezi-aside__collapse {
display: none;
}
body.hezi-sb-collapsed .hezi-aside__top:hover .hezi-aside__collapse {
display: inline-flex;
left: 50%; right: auto; transform: translate(-50%, -50%);
opacity: 1; visibility: visible; pointer-events: auto;
}
/* 折叠态 hover 顶部时隐藏 logo，露出折叠箭头 */
body.hezi-sb-collapsed .hezi-aside__top:hover .hezi-aside__logo {
opacity: 0;
}
/* ===================== 5. 顶部快捷按钮 ===================== */
.hezi-aside__topquick {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 0;
}
.hezi-topquick-item {
position: relative;
display: grid;
grid-template-columns: 1fr;
column-gap: 0;
align-items: center;
min-height: var(--sb-item-h);
height: var(--sb-item-h);
padding: 0 10px 0 32px;
border-radius: var(--sb-radius);
font-size: 13px;
line-height: 1;
color: var(--sb-text) !important;
text-decoration: none !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background var(--sb-tr-fast),
color var(--sb-tr-fast);
}
.hezi-topquick-item .hezi-topquick-icon {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: var(--sb-icon-col);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
color: var(--sb-text-muted);
margin: 0;
padding: 0;
background: transparent;
transition: color var(--sb-tr-fast),
opacity var(--sb-tr-fast);
will-change: transform;
transform: translateZ(0);
}
.hezi-topquick-item .hezi-topquick-icon > svg,
.hezi-topquick-item .hezi-topquick-icon > i,
.hezi-topquick-item .hezi-topquick-icon > img {
width: 18px !important;
height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
font-size: 18px;
color: var(--sb-text-muted) !important;
opacity: 0.85;
display: block;
transition: color var(--sb-tr-fast),
opacity var(--sb-tr-fast);
}
.hezi-topquick-item .hezi-topquick-label {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
margin-left: 10px;
display: flex;
align-items: center;
overflow: visible;
opacity: 1;
transition: opacity var(--sb-dur) var(--sb-ease);
}
.hezi-topquick-item:hover {
background: var(--sb-bg-hover) !important;
}
.hezi-topquick-item:hover .hezi-topquick-icon {
color: var(--sb-text);
}
.hezi-topquick-item:active {
background: var(--sb-bg-active);
}
body.hezi-sb-collapsed .hezi-aside__topquick {
align-items: stretch;
padding: 4px 0 8px 0;
gap: 2px;
}
body.hezi-sb-collapsed .hezi-topquick-item {
width: 100%;
height: var(--sb-item-h);
padding: 0 !important;
justify-content: flex-start;
border-radius: var(--sb-radius);
background: transparent !important;
}
body.hezi-sb-collapsed .hezi-topquick-item .hezi-topquick-label {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity var(--sb-dur) var(--sb-ease);
}
/* 创建按钮（--icon 变体）：粉色方块 + 白色加号，两态一致 */
.hezi-topquick-item--icon .hezi-topquick-icon {
background: var(--hezi-top-btn-bg, #ff69b4);
color: #fff;
border-radius: var(--sb-radius);
}
.hezi-topquick-item--icon .hezi-topquick-icon > svg,
.hezi-topquick-item--icon .hezi-topquick-icon > i,
.hezi-topquick-item--icon .hezi-topquick-icon > img {
color: #fff !important;
opacity: 1 !important;
}
/* 折叠态：创建按钮居中成 32×32 粉色方块 */
body.hezi-sb-collapsed .hezi-topquick-item--icon {
justify-content: center;
}
body.hezi-sb-collapsed .hezi-topquick-item--icon .hezi-topquick-icon {
width: 32px;
height: 32px;
top: 50%;
transform: translateY(-50%);
background: var(--hezi-top-btn-bg, #ff69b4);
color: #fff;
}
/* ===================== 6. 菜单区 ===================== */
.hezi-aside__menu {
flex: 0 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 0;
/* css38：删除滚动条占位——隐藏滚动条视觉（不占横向空间），
菜单项恢复满宽对齐；滚动仍可用（鼠标滚轮 / 触控板）。 */
-ms-overflow-style: none; /* 旧 Edge/IE */
scrollbar-width: none; /* Firefox：不渲染滚动条 */
/* css38b：侧栏右内边距 20px 会让菜单底色右缘留一道空白条（看似被遮挡）。
css38c：css38b 改全宽撞到边框又不透气，留 8px 透气缝——`margin-right:-12px`（20-12=8px）。
仅影响菜单区，顶部 LOGO 区不动。 */
margin-right: -12px;
}
.hezi-aside__menu::-webkit-scrollbar {
width: 0;
height: 0;
display: none; /* WebKit：滚动条不占位 */
}
.hezi-side-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.hezi-side-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.hezi-side-menu .menu-item {
position: relative;
}
/* 一级菜单项 */
.hezi-side-menu .menu-item > a {
position: relative;
/* flex 行布局：图标 absolute 不占流，标题与徽章作为弹性子项依次排开。
用 flex 而非 grid —— 折叠时不会有 grid 列重排，徽章位置恒定不跳变（旧版 grid 跳变根因） */
display: flex;
align-items: center;
min-height: var(--sb-item-h);
height: var(--sb-item-h);
width: 100%;
box-sizing: border-box;
padding: 0 10px 0 32px;
border-radius: var(--sb-radius);
font-size: 13px;
line-height: 1;
color: var(--sb-text) !important;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background var(--sb-tr-fast),
color var(--sb-tr-fast);
}
.hezi-side-menu .menu-item > a:hover {
background: var(--sb-bg-hover);
}
.hezi-side-menu .menu-item > a:active {
background: var(--sb-bg-active);
}
.hezi-side-menu .current-menu-item > a,
.hezi-side-menu .current-menu-ancestor > a {
background: var(--sb-bg-active);
font-weight: 600;
color: var(--sb-text) !important;
}
/* 图标绝对锚定 — 核心：position:absolute 钉在 item 左侧，与容器宽度动画彻底解耦，零位移 */
.hezi-side-menu > .menu-item > a > .menu-item-icon {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: var(--sb-icon-col);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
font-size: 18px;
color: var(--sb-text-muted);
margin: 0;
padding: 0;
background: transparent;
transition: color var(--sb-tr-fast),
opacity var(--sb-tr-fast);
will-change: transform;
transform: translateZ(0);
}
.hezi-side-menu > .menu-item > a > .menu-item-icon > i,
.hezi-side-menu > .menu-item > a > .menu-item-icon > svg,
.hezi-side-menu > .menu-item > a > .menu-item-icon > img {
width: 18px;
height: 18px;
max-width: 18px;
max-height: 18px;
font-size: 18px;
transform: translateX(0);
display: block;
}
.hezi-side-menu .menu-item > a:hover .menu-item-icon {
color: var(--sb-text);
}
.hezi-side-menu .current-menu-item > a .menu-item-icon,
.hezi-side-menu .current-menu-ancestor > a .menu-item-icon {
color: var(--sb-text);
opacity: 1;
}
/* 文字标签 — 纯淡入淡出（原地，零位移） */
.hezi-side-menu .menu-item-title {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
margin-left: 10px;
display: flex;
align-items: center;
overflow: visible;
opacity: 1;
pointer-events: none;
transition: opacity var(--sb-dur) var(--sb-ease);
}
/* 徽章 — 回到文档流，紧跟标题右侧 10px（距字右侧 10px）
不再 absolute 钉容器最右（那会盖住 .hezi-caret 三角箭头，并违背“距字 10px”的设计）。
折叠跳变靠 .menu-item > a 改用 flex 解决：grid 列重排才会导致徽章跳动，flex 下标题淡出
不改变徽章布局盒，徽章位置恒定；过渡只剩 opacity + transform 两项平滑曲线，原地淡出零跳变。 */
.hezi-side-menu .menu-item-badge {
/* 文档流内，紧跟标题右侧 10px */
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-left: 10px; /* 距字右侧 10px */
height: 14px;
min-width: 18px;
padding: 0 4px;
font-size: 9px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.3px;
white-space: nowrap;
border-radius: 7px;
color: #fff;
background: var(--sb-accent) !important;
max-width: 60px;
overflow: visible;
/* 过渡仅服务折叠淡出：opacity 控制淡出，transform 控制原地收缩微感；
transform 不影响布局盒，故零跳变。hover 无任何动效（扁平静态）。 */
transition: opacity var(--sb-dur) var(--sb-ease),
transform var(--sb-dur) var(--sb-ease);
}
/* 徽章 hover：无动效（扁平化要求：鼠标经过徽章不缩放/不变形，保持静态） */
/* 三角箭头 — 绝对定位固定右对齐，不受 badge/grid 列影响 */
.hezi-caret {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 6px solid var(--sb-text-dim);
opacity: 0.6;
transition: transform var(--sb-tr-fast),
border-left-color var(--sb-tr-fast),
opacity var(--sb-tr-fast);
cursor: pointer;
}
.hezi-side-menu .menu-item > a:hover .hezi-caret {
border-left-color: var(--sb-text);
opacity: 1;
}
/* ===================== 7. 二级 Flyout 菜单 ===================== */
.hezi-side-menu .sub-menu {
position: fixed;
top: 0;
/* css37：base left 直接等于展开态位置（而非 0）。
此前 base left:0，JS 未注入 inline left 的瞬间（或折叠态关闭时）会回落到 0，
在浏览器最左边闪一下。改为与打开态一致的 calc(expanded-1)，配合下方折叠态 base，
无论 JS 是否注入 inline left，left 都不会跳变。 */
left: calc(var(--sb-w-expanded) - 1px);
width: 280px;
margin: 0;
padding: 14px 16px;
background: var(--sb-bg);
border: 1px solid var(--sb-border);
border-radius: 0 12px 12px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 10px;
opacity: 0;
visibility: hidden;
transition: opacity var(--sb-dur) var(--sb-ease),
visibility var(--sb-dur),
left var(--sb-dur) var(--sb-ease);
z-index: 1080;
pointer-events: none;
}
.hezi-side-menu .menu-item.hezi-flyout-open > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: none;
left: calc(var(--sb-w-expanded) - 1px) !important;
}
.hezi-side-menu .menu-item.hezi-flyout-open > .sub-menu > .menu-item {
pointer-events: auto;
}
body.hezi-sb-collapsed .hezi-side-menu .menu-item.hezi-flyout-open > .sub-menu {
left: calc(var(--sb-w-collapsed) - 1px) !important;
}
/* css39：hezi-flyout-open 态的 之前 border-radius:0 导致点击/悬停带子菜单项时
底色变直角，跟其他一级菜单圆角风格不一致。恢复圆角、保留背景与侧栏融合。
margin-right:0 仍保留（子菜单框接管视觉延伸，不再需要菜单区外溢到边）。 */
.hezi-side-menu .menu-item.hezi-flyout-open > a,
.hezi-side-menu .menu-item.hezi-flyout-open > a:hover {
background: var(--sb-bg) !important;
border-radius: var(--sb-radius);
margin-right: 0;
}
.hezi-side-menu .sub-menu .menu-item > a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
color: var(--sb-text-muted);
text-decoration: none;
overflow: hidden;
transition: background var(--sb-tr-fast),
color var(--sb-tr-fast);
opacity: 0;
transform: translateY(8px);
}
.hezi-side-menu .sub-menu .menu-item > a:hover {
background: var(--sb-bg-hover);
color: var(--sb-text);
}
.hezi-side-menu .sub-menu .current-menu-item > a,
.hezi-side-menu .sub-menu .current-menu-ancestor > a {
background: var(--sb-bg-active);
font-weight: 600;
color: var(--sb-text);
}
.hezi-side-menu .menu-item.hezi-flyout-open > .sub-menu > .menu-item > a {
animation: heziSubIn var(--sb-dur) var(--sb-ease) both;
animation-delay: calc(40ms + var(--i, 0) * 40ms);
}
@keyframes heziSubIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hezi-flyout-head {
grid-column: 1 / -1;
flex: 0 0 100%;
order: -1;
display: flex;
flex-direction: column;
gap: 7px;
margin: 0 0 8px;
pointer-events: none;
}
/* css37：flyout-head 图标↔文字 间距/尺寸 对齐展开态一级菜单项
（展开态：图标 18px、图标↔标题 gap 10px、标题 13px） */
.hezi-flyout-head__title {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
font-size: 13px;
font-weight: 700;
color: var(--sb-text);
user-select: none;
white-space: nowrap;
}
.hezi-flyout-head__icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--sb-text);
}
.hezi-flyout-head__icon img,
.hezi-flyout-head__icon img.menu-img-icon {
width: 18px;
height: 18px;
border-radius: 3px;
object-fit: cover;
}
.hezi-flyout-head__name {
font-size: 13px;
line-height: 18px;
}
.hezi-flyout-head__line {
display: block;
height: 0;
border-top: 1px solid var(--sb-border);
}
/* ===================== 8. 通知圆点（脉冲动画） ===================== */
.hezi-notification-dot {
position: absolute;
left: calc(var(--sb-icon-col) - 6px);
top: 6px;
width: 7px;
height: 7px;
border-radius: 9999px;
background: var(--sb-accent);
pointer-events: none;
z-index: 2;
animation: heziPulse 2s var(--sb-ease) infinite;
}
@keyframes heziPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.85;
}
}
/* ===================== 9. 折叠态（图标纹丝不动） ===================== */
body.hezi-sb-collapsed .hezi-side-menu {
padding: 0 !important;
margin: 0 !important;
}
body.hezi-sb-collapsed .hezi-side-menu .sub-menu {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.hezi-sb-collapsed .hezi-side-menu .hezi-caret {
opacity: 0 !important;
visibility: hidden !important;
transition: opacity var(--sb-dur) var(--sb-ease),
visibility var(--sb-dur) var(--sb-ease);
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a .menu-item-title {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity var(--sb-dur) var(--sb-ease);
}
body.hezi-sb-collapsed .hezi-side-menu .menu-item-badge {
/* 原地淡出 + 轻微缩小：flex 流下物理位置恒定，仅透明度+缩放过渡 */
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
/* 缩到 0.6 配合 opacity 渐变，给视觉上「原地淡入虚空」的柔和退场感，
避免单纯 opacity 0 时的「啪一下不见」 */
transform: scale(0.6) !important;
transition: opacity var(--sb-dur) var(--sb-ease),
visibility var(--sb-dur) var(--sb-ease),
transform var(--sb-dur) var(--sb-ease);
}
/* 折叠态下取消 hover 的放大反馈（即将淡出，无需放大） */
body.hezi-sb-collapsed .hezi-side-menu .menu-item > a:hover .menu-item-badge {
transform: scale(0.6) !important;
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item {
display: flex !important;
/* css36：justify-content 必须 flex-start，不能 center。
在折叠态被「opacity:0 但仍占布局流的标题文字」撑宽，若此处 center，
会整体左溢出偏移，图标（absolute 相对 ）随之偏左 5.5px（实测）。
flex-start 让 左对齐到 x=20，图标与展开态零误差。 */
justify-content: flex-start !important;
align-items: center !important;
width: 100% !important;
min-height: var(--sb-item-h);
margin-top: 0;
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a {
/* 与展开态同为 flex + flex-start + 同款 padding：徽章锚定在文字右侧原位，
折叠瞬间 padding 不塌缩 → 徽章零位移起手，随后只随 opacity/transform 原地淡出，
不被居中/缩进逻辑带着滑动（避免“原地淡出”变“滑动淡出”或起手跳变） */
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
margin: 0 !important;
padding: 0 10px 0 32px !important; /* 与展开态一致，徽章/文字 x 恒定 */
background: transparent !important;
transition: none;
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a > .menu-item-icon {
position: absolute !important;
/* css35 修正：折叠态与展开态图标位置必须完全一致（都 left:0）。
css34 曾用 left:50% + translateX(-50%) "居中"，但 left:% 相对于 宽度，
在 190→32px 动画中图标跟着跑，过渡期间位移 78.5px（实测）。
left:0 与 width 完全解耦，物理上不可能位移；视觉上由于 aside 自身有 20px
对称 padding，left:0 在 72px 侧栏里几何居中（左右各空 20px）。
「图标哪怕 1px 都不能动」铁律优先于「居中观感」——居中靠布局，不靠动画期定位。 */
left: 0 !important;
top: 0 !important;
height: 100% !important;
width: var(--sb-icon-col) !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
box-sizing: border-box !important;
line-height: 0 !important;
transform: none !important; /* 不再 translateX(-50%) */
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a:hover,
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a:active {
background: transparent !important;
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a > .menu-item-icon::after {
content: '';
position: absolute;
width: 32px;
height: 32px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: var(--sb-radius);
background: transparent;
transition: background var(--sb-tr-fast);
pointer-events: none;
z-index: -1;
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a:hover .menu-item-icon::after {
background: var(--sb-bg-hover);
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a:hover .menu-item-icon {
color: var(--sb-text);
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a > .menu-item-icon > i,
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a > .menu-item-icon > svg,
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a > .menu-item-icon > img {
transform: translateX(0) !important;
}
/* ===================== 10. 快捷入口（底部区） ===================== */
.hezi-aside__quick {
flex: 0 0 auto;
margin-top: auto;
padding: 8px 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.hezi-quick-item {
position: relative;
display: grid;
grid-template-columns: 1fr;
column-gap: 0;
align-items: center;
min-height: var(--sb-item-h);
padding: 0 10px 0 32px;
border-radius: var(--sb-radius);
border: 0;
background: transparent;
font-size: 13px;
line-height: 1.4;
color: var(--sb-text) !important;
text-decoration: none;
white-space: nowrap;
transition: background var(--sb-tr-fast),
color var(--sb-tr-fast);
}
.hezi-quick-item .hezi-quick-icon {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: var(--sb-icon-col);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
will-change: transform;
transform: translateZ(0);
}
.hezi-quick-item .hezi-quick-icon > svg,
.hezi-quick-item .hezi-quick-icon > .hezi-icon,
.hezi-quick-item .hezi-quick-icon > i,
.hezi-quick-item .hezi-quick-icon > img {
width: 18px;
height: 18px;
max-width: 18px;
max-height: 18px;
font-size: 18px;
color: var(--sb-text-muted);
opacity: 0.85;
transform: translateX(0);
display: block;
transition: color var(--sb-tr-fast),
opacity var(--sb-tr-fast);
}
.hezi-quick-item .hezi-quick-label {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
margin-left: 10px;
display: flex;
align-items: center;
overflow: visible;
opacity: 1;
transition: opacity var(--sb-dur) var(--sb-ease);
}
.hezi-quick-item:hover {
background: var(--sb-bg-hover) !important;
}
.hezi-quick-item:active {
background: var(--sb-bg-active);
}
.hezi-quick-item:hover .hezi-quick-icon > svg,
.hezi-quick-item:hover .hezi-quick-icon > .hezi-icon,
.hezi-quick-item:hover .hezi-quick-icon > i,
.hezi-quick-item:hover .hezi-quick-icon > img {
color: var(--sb-text);
opacity: 1;
}
body.hezi-sb-collapsed .hezi-quick-item {
display: grid;
grid-template-columns: 1fr;
column-gap: 0;
align-items: center;
justify-content: center;
padding: 0 !important;
background: transparent !important;
transition: none;
}
body.hezi-sb-collapsed .hezi-quick-item .hezi-quick-icon::after {
content: '';
position: absolute;
width: 32px;
height: 32px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: var(--sb-radius);
background: transparent;
transition: background var(--sb-tr-fast);
pointer-events: none;
z-index: -1;
}
body.hezi-sb-collapsed .hezi-quick-item:hover .hezi-quick-icon::after,
body.hezi-sb-collapsed .hezi-quick-item:active .hezi-quick-icon::after {
background: var(--sb-bg-hover);
}
body.hezi-sb-collapsed .hezi-quick-item .hezi-quick-label {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity var(--sb-dur) var(--sb-ease);
}
/* ===================== 11. 中间快捷组 ===================== */
.hezi-aside__midquick {
flex: 0 0 auto;
padding: 8px 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.hezi-midquick-item {
position: relative;
display: grid;
grid-template-columns: 1fr;
column-gap: 0;
align-items: center;
min-height: var(--sb-item-h);
padding: 0 10px 0 32px;
border-radius: var(--sb-radius);
border: 0;
background: transparent;
font-size: 13px;
line-height: 1.4;
color: var(--sb-text) !important;
text-decoration: none;
white-space: nowrap;
transition: background var(--sb-tr-fast),
color var(--sb-tr-fast);
}
.hezi-midquick-item .hezi-midquick-icon {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: var(--sb-icon-col);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
will-change: transform;
transform: translateZ(0);
}
.hezi-midquick-item .hezi-midquick-icon > svg,
.hezi-midquick-item .hezi-midquick-icon > .hezi-icon,
.hezi-midquick-item .hezi-midquick-icon > i,
.hezi-midquick-item .hezi-midquick-icon > img {
width: 18px;
height: 18px;
max-width: 18px;
max-height: 18px;
font-size: 18px;
color: var(--sb-text-muted);
opacity: 0.85;
transform: translateX(0);
display: block;
transition: color var(--sb-tr-fast),
opacity var(--sb-tr-fast);
}
.hezi-midquick-item .hezi-midquick-label {
font-size: 13px;
font-weight: 500;
white-space: nowrap;
margin-left: 10px;
display: flex;
align-items: center;
overflow: visible;
opacity: 1;
transition: opacity var(--sb-dur) var(--sb-ease);
}
.hezi-midquick-item:hover {
background: var(--sb-bg-hover) !important;
}
.hezi-midquick-item:active {
background: var(--sb-bg-active);
}
.hezi-midquick-item:hover .hezi-midquick-icon > svg,
.hezi-midquick-item:hover .hezi-midquick-icon > .hezi-icon,
.hezi-midquick-item:hover .hezi-midquick-icon > i,
.hezi-midquick-item:hover .hezi-midquick-icon > img {
color: var(--sb-text);
opacity: 1;
}
body.hezi-sb-collapsed .hezi-midquick-item {
display: grid;
grid-template-columns: 1fr;
column-gap: 0;
align-items: center;
justify-content: center;
padding: 0 !important;
background: transparent !important;
transition: none;
}
body.hezi-sb-collapsed .hezi-midquick-item .hezi-midquick-label {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity var(--sb-dur) var(--sb-ease);
}
body.hezi-sb-collapsed .hezi-midquick-item .hezi-midquick-icon::after {
content: '';
position: absolute;
width: 32px;
height: 32px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: var(--sb-radius);
background: transparent;
transition: background var(--sb-tr-fast);
pointer-events: none;
z-index: -1;
}
body.hezi-sb-collapsed .hezi-midquick-item:hover .hezi-midquick-icon::after,
body.hezi-sb-collapsed .hezi-midquick-item:active .hezi-midquick-icon::after {
background: var(--sb-bg-hover);
}
/* ===================== 12. 分割线 ===================== */
.hezi-aside__divider {
flex: 0 0 auto;
height: 0;
margin: 8px 0;
border: 0;
border-top: 1px solid var(--sb-border);
transition: width var(--sb-tr);
}
body.hezi-sb-collapsed .hezi-aside__divider {
width: 24px;
margin: 8px auto;
}
body:not(.hezi-sb-collapsed) .hezi-aside__divider {
width: 100%;
}
/* ===================== 13. 折叠态 Tooltip ===================== */
.hezi-sb-tip {
position: fixed;
z-index: 1300;
transform: translateY(-50%);
max-width: 240px;
padding: 7px 12px;
background: #2b2b2b;
color: #fff;
font-size: 13px;
line-height: 1.35;
white-space: nowrap;
border-radius: 6px;
box-shadow: none;
pointer-events: none;
user-select: none;
opacity: 0;
visibility: hidden;
transition: opacity var(--sb-dur-fast) var(--sb-ease),
visibility var(--sb-dur-fast);
}
.hezi-sb-tip.is-show {
opacity: 1;
visibility: visible;
}
/* ===================== 14. 移动端抽屉 ===================== */
.hezi-aside__overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1049;
opacity: 0;
visibility: hidden;
transition: opacity var(--sb-dur) var(--sb-ease);
}
.hezi-aside__mobtn {
display: none;
position: fixed;
left: 14px;
bottom: 18px;
z-index: 1055;
width: 46px;
height: 46px;
border: none;
border-radius: 50%;
background: var(--sb-accent);
box-shadow: none;
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.hezi-aside__mobtn span {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: #fff;
}
@media (max-width: 768px) {
body.hezi-has-sidebar,
body.hezi-has-sidebar.hezi-sb-collapsed {
padding-left: 0;
padding-right: 0;
}
body.hezi-has-sidebar.nav-fixed .header {
left: 0;
right: 0;
width: 100%;
}
.hezi-aside {
width: 230px !important;
transform: translateX(-100%);
}
body.hezi-sb-open .hezi-aside {
transform: translateX(0);
}
body.hezi-sb-open .hezi-aside__overlay {
opacity: 1;
visibility: visible;
}
.hezi-aside__mobtn {
display: inline-flex;
}
body.hezi-sb-collapsed .hezi-aside {
width: 230px !important;
transition: width var(--sb-tr) 0s,
transform var(--sb-tr) 0s;
}
.hezi-side-menu > .menu-item > a > .menu-item-icon,
.hezi-topquick-item .hezi-topquick-icon,
.hezi-quick-item .hezi-quick-icon,
.hezi-midquick-item .hezi-midquick-icon {
position: static !important;
left: auto !important;
top: auto !important;
height: var(--sb-item-h) !important;
width: var(--sb-icon-col) !important;
flex: 0 0 var(--sb-icon-col) !important;
}
.hezi-side-menu .menu-item > a,
.hezi-topquick-item,
.hezi-quick-item,
.hezi-midquick-item {
grid-template-columns: 32px 1fr !important;
padding-left: 12px !important;
}
body.hezi-sb-collapsed .hezi-side-menu .menu-item > a {
font-size: 14px;
justify-content: flex-start;
padding: 9px 12px;
}
body.hezi-sb-collapsed .hezi-side-menu .menu-item-badge {
display: inline-flex;
}
body.hezi-sb-collapsed .hezi-side-menu .menu-item-icon {
font-size: 15px;
}
body.hezi-sb-collapsed .hezi-side-menu .hezi-caret {
display: inline-flex;
}
body.hezi-sb-collapsed .hezi-aside__menu {
padding-left: 10px !important;
padding-right: 10px !important;
}
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a .menu-item-title {
max-width: 160px;
width: auto !important;
opacity: 1;
overflow: visible;
flex: 0 1 auto;
transition: none;
margin-left: 10px;
}
body.hezi-sb-collapsed .hezi-side-menu .menu-item-badge {
max-width: 60px;
opacity: 1;
overflow: visible;
flex: 0 0 auto;
visibility: visible;
transition: none;
}
body.hezi-sb-collapsed .hezi-aside__quick {
padding: 2px 10px;
}
body.hezi-sb-collapsed .hezi-quick-item {
justify-content: flex-start;
padding: 9px 12px;
gap: 10px;
}
body.hezi-sb-collapsed .hezi-quick-item .hezi-quick-label {
max-width: 160px;
width: auto !important;
min-width: 0;
flex: 0 1 auto;
opacity: 1;
overflow: hidden;
margin-left: 10px;
transition: none;
}
body.hezi-sb-collapsed .hezi-aside__midquick {
padding: 2px 10px;
}
body.hezi-sb-collapsed .hezi-midquick-item {
justify-content: flex-start;
padding: 9px 12px;
gap: 10px;
}
body.hezi-sb-collapsed .hezi-midquick-item .hezi-midquick-label {
max-width: 160px;
width: auto !important;
min-width: 0;
flex: 0 1 auto;
opacity: 1;
overflow: hidden;
margin-left: 10px;
transition: none;
}
.hezi-side-menu .sub-menu {
position: static !important;
display: none;
grid-template-columns: 1fr;
width: auto;
margin: 2px 0 2px 14px;
padding-left: 12px;
background: transparent;
border: 0;
border-left: 1px solid var(--sb-border);
box-shadow: none;
border-radius: 0;
transform: none !important;
}
.hezi-side-menu .menu-item.hezi-flyout-open > .sub-menu {
display: block;
}
.hezi-side-menu .sub-menu .menu-item > a {
opacity: 1;
transform: none;
animation: none;
}
}
/* ===================== 15. 高级子菜单面板 ===================== */
.hezi-side-menu .hezi-senior-panel {
position: fixed;
top: 0;
left: calc(var(--sb-w-expanded) - 1px);
margin: 0;
padding: 20px 24px;
background: var(--sb-bg);
border: 1px solid var(--sb-border);
border-radius: 12px;
opacity: 0;
visibility: hidden;
transition: opacity var(--sb-dur) var(--sb-ease),
visibility var(--sb-dur);
z-index: 1080;
pointer-events: none;
}
.hezi-side-menu .menu-item.hezi-flyout-open > .hezi-senior-panel {
opacity: 1 !important;
visibility: visible !important;
/* css40：原 pointer-events: none 让 panel 整体（含 padding）不接收 hover 事件，
鼠标从侧栏 往右穿越 panel padding 时 mouseenter sub 不触发 → mouseleave
的 180ms timer 触发 close → 折叠态断触。改 auto 让 panel（含 padding）整体接收 hover，
鼠标穿越任何位置都能 mouseenter sub、清除 li._hoverTimer、不再断触。
两个态都改：展开态下鼠标穿越 panel 同样是连续 hover，也应自动保持打开。 */
pointer-events: auto !important;
left: calc(var(--sb-w-expanded) - 1px) !important;
}
.hezi-side-menu .menu-item.hezi-flyout-open > .hezi-senior-panel .hezi-column,
.hezi-side-menu .menu-item.hezi-flyout-open > .hezi-senior-panel .hezi-card-item,
.hezi-side-menu .menu-item.hezi-flyout-open > .hezi-senior-panel .column-link,
.hezi-side-menu .menu-item.hezi-flyout-open > .hezi-senior-panel a {
pointer-events: auto;
}
body.hezi-sb-collapsed .hezi-side-menu .menu-item.hezi-flyout-open > .hezi-senior-panel {
left: calc(var(--sb-w-collapsed) - 1px) !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
/* css41：折叠态下 pointer-events: none 会把 css40 panel base 的 auto !important 覆盖掉
（折叠态 specificity 更高 + 后写胜出），导致折叠态鼠标穿越 panel padding 时仍然断触。
改 auto !important，强制折叠态 panel 整体（含 padding）也接收 hover、清除 li._hoverTimer。 */
pointer-events: auto !important;
/* === 修复 #5：折叠态"高级菜单"面板从顶栏（58px）下边缘开始 ===
旧 height:100vh + top:0 会让面板从浏览器最顶冒出来盖住顶栏。
改成 top:58px + height:calc(100vh - 58px)，正好填满顶栏下剩余视口。 */
top: 58px !important;
height: calc(100vh - 58px) !important;
border-radius: 0 12px 12px 0 !important;
}
/* css37：折叠态下满高高级面板已绑在上条规则（top:58px / 减顶栏高度），
旧的 top:0 !important 已被覆盖，删除避免重复定义。 */
.hezi-senior-panel .hezi-senior-inner {
max-height: 70vh;
overflow-y: auto;
overflow-x: hidden;
}
.hezi-senior-panel.hezi-senior-multi-column-links {
min-width: 340px;
max-width: 560px;
/* css41：恢复 height: 100vh（用户要通高——通高才能跟其他菜单区分开，css40 误删后用户否决）。
配套 inner 恢复 height:100% + max-height:none。CSS 强制 100vh + JS 推算 top=max(0,
innerHeight-fh-8)≈0 让面板顶到浏览器顶部，跟其他菜单在视觉上明确区分（侧栏 + 通高面板）。
「flyout-head 往下挪一点」诉求单独由 padding-top 25px 实现。 */
height: 100vh;
border-radius: 0 12px 12px 0;
/* css41：原 padding-top:15px，flyout-head（图标+菜单名）贴着面板顶部，看着被挡。
改成 25px（+10px），让 flyout-head 视觉上从面板顶部自然下沉一截，不再有"被挡"感。 */
padding-top: 25px;
}
.hezi-senior-panel.hezi-senior-multi-column-links .hezi-senior-inner {
/* css41：恢复 height:100% + max-height:none（与父 100vh 联动，撑满通高）。 */
height: 100%;
max-height: none;
padding: 0;
}
.hezi-senior-multi-column-links .hezi-column {
min-width: 0;
padding: 8px 0 12px;
border-bottom: 1px solid var(--sb-border);
}
.hezi-senior-multi-column-links .hezi-column:first-child {
padding-top: 4px;
}
.hezi-senior-multi-column-links .hezi-column:last-child {
border-bottom: none;
padding-bottom: 4px;
}
.hezi-senior-multi-column-links .column-title {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
font-weight: 600;
color: var(--sb-text);
padding: 8px 6px 6px;
margin-bottom: 4px;
border-bottom: 1px solid var(--sb-border);
}
.hezi-senior-multi-column-links .column-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--sb-accent);
}
.hezi-senior-multi-column-links .column-items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 18px;
}
.hezi-senior-multi-column-links .column-link {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 8px;
border-radius: 6px;
font-size: 13px;
color: var(--sb-text-muted);
text-decoration: none;
transition: background var(--sb-tr-fast),
color var(--sb-tr-fast);
}
.hezi-senior-multi-column-links .column-link:hover {
background: var(--sb-bg-hover);
color: var(--sb-text);
}
.hezi-senior-multi-column-links .link-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--sb-text-dim);
}
.hezi-senior-multi-column-links .link-icon img.menu-img-icon {
width: 16px;
height: 16px;
border-radius: 3px;
object-fit: cover;
}
.hezi-senior-multi-column-links .link-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hezi-senior-panel.hezi-senior-graphic-card {
--card-img-size: 100px;
min-width: 340px;
max-width: 500px;
}
.hezi-senior-panel.hezi-senior-graphic-card .hezi-senior-inner {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 8px 4px;
}
.hezi-senior-graphic-card .hezi-card-item {
flex: 0 0 calc(var(--card-img-size) + 10px);
text-align: center;
}
.hezi-senior-graphic-card .hezi-card-item a {
text-decoration: none;
display: block;
}
.hezi-senior-graphic-card .card-img-wrap {
position: relative;
width: var(--card-img-size);
height: var(--card-img-size);
margin: 0 auto 6px;
border-radius: 10px;
overflow: hidden;
transition: transform var(--sb-dur-fast) var(--sb-ease);
}
.hezi-senior-graphic-card .hezi-card-item a:hover .card-img-wrap {
transform: translateY(-3px);
}
.hezi-senior-graphic-card .card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hezi-senior-graphic-card .card-badge {
position: absolute;
top: 6px;
left: 6px;
padding: 2px 8px;
border-radius: 20px;
font-size: 11px;
line-height: 1.4;
font-weight: 600;
color: #fff;
background: var(--sb-accent);
}
.hezi-senior-graphic-card .card-badge.hot {
background: #ff6b35;
}
.hezi-senior-graphic-card .card-badge.new {
background: #11998e;
}
.hezi-senior-graphic-card .card-title {
font-size: 12.5px;
color: var(--sb-text-muted);
line-height: 1.3;
padding: 0 4px;
transition: color var(--sb-tr-fast);
}
.hezi-senior-graphic-card .hezi-card-item a:hover .card-title {
color: var(--sb-text);
}
/* ===================== 16. 播放器区 ===================== */
.hezi-aside__player {
flex: 0 0 82px;
height: 82px;
margin-top: auto;
box-sizing: border-box;
padding: 4px 12px;
display: flex;
align-items: center;
justify-content: center;
}
body.hezi-sb-collapsed .hezi-aside__player {
width: 36px;
height: 36px;
flex: 0 0 36px;
padding: 0;
}
/* ===================== 17. 通用图标尺寸修正 ===================== */
.hezi-aside .hezi-icon {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
}
/* ===================== 18. 禁用父主题伪元素 ===================== */
.hezi-side-menu .menu-item-icon::before,
body.hezi-sb-collapsed .hezi-side-menu > .menu-item > a::before {
content: none !important;
display: none !important;
border: none !important;
width: 0 !important;
height: 0 !important;
}
/* ===================== 19. 折叠态 hover 自动弹出二级 ===================== */
body.hezi-sb-collapsed .hezi-side-menu .menu-item.hezi-flyout-open > .sub-menu {
display: grid !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}