/* ========================================================================== 3. ✨ 状态栏:高度自适应,但绝对禁止换行 ========================================================================== */ .mac-statusbar { height: auto; min-height: 22px; background-color: #1a1a1a; border-bottom: 1px solid var(--mac-border); display: flex; align-items: center; justify-content: space-between; padding: 3px 10px; font-size: 11px; color: var(--mac-text-muted); user-select: none; flex-shrink: 0; z-index: 1000; } .mac-sb-section { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; white-space: nowrap; } .mac-sb-section.justify-center { justify-content: center; } .mac-sb-section.justify-end { justify-content: flex-end; } .mac-sb-text { font-weight: 400; letter-spacing: 0.1px; text-overflow: ellipsis; overflow: hidden; } /* 状态栏微缩胶囊 */ .mac-sb-pill { background-color: rgba(255, 255, 255, 0.03); padding: 1px 6px; border-radius: 2px; border: 1px solid var(--mac-border); color: var(--mac-text-secondary); display: flex; align-items: center; gap: 4px; font-weight: 500; flex-shrink: 0; } .mac-sb-divider { width: 1px; height: 8px; background-color: var(--mac-border); flex-shrink: 0; } /* -------------------------------------------------------------------------- 统一状态栏内嵌汉堡触发器(🎯 终极微调版:刚性物理对齐补偿,绝不偏心) -------------------------------------------------------------------------- */ .mac-statusbar .mac-global-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 22px !important; cursor: pointer !important; user-select: none !important; position: relative !important; /* margin-right: 6px;*/ /* margin-left: 2px;*/ flex-shrink: 0 !important; background: transparent !important; font-size: 19px !important; color: var(--mac-text-muted) !important; font-weight: 700 !important; transition: color 0.15s ease !important; /* 🎯 核心大招:死锁行高,并利用绝对像素向上补偿字形自身的下沉偏置 */ line-height: 0 !important; /* 强制将字符基准线压缩为一个点 */ top: -3px !important; /* 纵向硬性向上提 1px,完美矫正视差偏移 */ } /* 隐形触控热区:把 top 的偏移在热区里校正回来,确保点击热区完全上下对称 */ .mac-statusbar .mac-global-trigger::before { content: ""; position: absolute; top: calc(50% + 1px); /* 刚性对齐状态栏中心线 */ left: 50%; width: 34px; height: 22px; transform: translate(-50%, -50%); background: transparent !important; z-index: 1; } /* 鼠标经过(Hover)时,字符极速提亮 */ .mac-statusbar .mac-global-trigger:hover { color: var(--mac-text-primary) !important; } /* ========================================================================== 4. 整站大骨架布局 ========================================================================== */ .mac-app-wrapper { display: flex; flex-direction: column; width: 100vw; height: 100vh; } .mac-main-body { display: flex; flex: 1; /* overflow: hidden;*/ position: relative; } /* 主舞台画布 */ .mac-stage { flex: 1; min-width: 0; background-color: var(--mac-bg-main); display: flex; flex-direction: column; overflow: hidden; border-radius: 0 !important; } .mac-stage-content { flex: 1; overflow-y: auto; width: 100%; } .mac-stage-container { padding: 20px; width: 100%; margin: 0; max-width: 100% !important; } /* -------------------------------------------------------------------------- 一、二级大侧边栏骨架 -------------------------------------------------------------------------- */ /* 一级大侧边栏 */ .mac-sidebar { width: 0px; background-color: var(--mac-bg-panel); border-right: 0 solid var(--mac-border); display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0; flex-shrink: 0; overflow: hidden; z-index: 10; transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-right-width 0.2s ease, padding 0.2s ease; } /* 二级大侧边栏 */ .mac-sidebar-second { width: 0px; background-color: var(--mac-bg-subnav); border-right: 0 solid var(--mac-border); display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0; flex-shrink: 0; overflow: hidden; z-index: 9; transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-right-width 0.2s ease, padding 0.2s ease; } /* PC端激活态物理拉伸 */ .pc-menu-open .mac-sidebar { width: auto; /* min-width: 120px;*/ border-right: 1px solid var(--mac-border); padding: 10px 2px; } .pc-menu-open .mac-sidebar-second { width: auto; /* min-width: 120px;*/ border-right: 1px solid var(--mac-border); padding: 10px 2px; } .mac-sidebar-top, .mac-sidebar-bottom { display: flex; flex-direction: column; gap: 2px; } .mac-sidebar-top { flex: 1; overflow-y: auto; padding: 0 6px; } .mac-sidebar-bottom { border-top: 1px solid var(--mac-border); padding: 8px 6px 0 6px; margin-top: 8px; } /* -------------------------------------------------------------------------- 🎯 导航项版式、Hover行为、Active状态绝对平权绑定 -------------------------------------------------------------------------- */ /* 1. 统一基础排版:消除一、二级间距与字号差异,全部对齐高标准 */ .mac-sidebar .mac-item, .mac-sidebar-second .mac-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; color: var(--mac-text-muted); font-size: 12px; font-weight: 500; cursor: pointer; position: relative; border-radius: 0; transition: color 0.15s ease, background-color 0.15s ease; user-select: none; white-space: nowrap; background: none !important; box-shadow: none !important; } /* 2. 统一 Hover 行为:只提升文字亮度,不触发任何 background 色块 */ .mac-sidebar .mac-item:hover, .mac-sidebar-second .mac-item:hover { color: var(--mac-text-primary) !important; background: none !important; box-shadow: none !important; } /* 3. 统一 Active 激活态:文字强制纯白,字重加粗 */ .mac-sidebar .mac-item.active-has-sub, .mac-sidebar .mac-item.active-no-sub, .mac-sidebar-second .mac-item.active { color: var(--mac-text-primary) !important; font-weight: 500; background: none !important; box-shadow: none !important; } /* 4. 统一底部霓虹高亮线:利用伪元素注入完全一致的刚性纯紫下划线 */ .mac-sidebar .mac-item.active-has-sub::after, .mac-sidebar .mac-item.active-no-sub::after, .mac-sidebar-second .mac-item.active::after { content: ""; position: absolute; bottom: 1px; left: 12px; right: 12px; height: 1.5px; background-color: var(--mac-gradient-vitepress); box-shadow: 0 -1px 6px rgba(168, 85, 247, 0.5); } /* -------------------------------------------------------------------------- 横向二级顶 Nav -------------------------------------------------------------------------- */ .mac-sub-navbar { min-height: 32px; height: 32px; background-color: var(--mac-bg-subnav) !important; border-bottom: 1px solid var(--mac-border); display: flex; align-items: center; padding: 0 20px; gap: 20px; flex-shrink: 0; z-index: 9; } .mac-sub-nav-item { font-size: 12px; color: var(--mac-text-muted); font-weight: 500; cursor: pointer; height: 32px; display: flex; align-items: center; position: relative; transition: color 0.15s ease; user-select: none; flex-shrink: 0; will-change: transform, opacity; transform: translateZ(0); } .mac-sub-nav-item:hover { color: var(--mac-text-primary); } .mac-sub-nav-item.active { color: var(--mac-text-primary) !important; font-weight: 500; } .mac-sub-nav-item.active::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1.5px; background-color: var(--mac-gradient-vitepress); box-shadow: 0 -1px 6px rgba(168, 85, 247, 0.5); }