#nav-right{ flex:1 1 auto; justify-content: flex-end; margin-left: auto; display: flex; flex-wrap:nowrap; } /* 导航栏居中 */ #sidebar #sidebar-menus .menus_items .menus_item { margin: 10px 0; } #sidebar #sidebar-menus .menus_items a.site-page { padding-left: 0; } #sidebar #sidebar-menus .menus_items .site-page { position: relative; display: block; padding: 6px 30px 6px 22px; color: var(--font-color); font-size: 1.15em; border: var(--style-border-always); background: var(--icat-card-bg); font-size: 14px; border-radius: 12px; } #sidebar #sidebar-menus .menus_items .site-page i:first-child { text-align: left; padding-left: 10px; } #nav #menus { display: flex; justify-content: center; width: 100%; position: absolute; left: 0; margin: 0; transform: translateZ(0); } #nav #blog-info { flex-wrap: nowrap; display: flex; align-items: center; z-index: 102; max-width: fit-content; } @media screen and (max-width: 900px) { #nav { padding: 0 15px; } #nav-group { padding: 0 0.2rem; } #rightside { right: -42px; } } /* IPAD菜单栏调整 */ /* 1. 容器溢出穿透 */ #nav, #blog-info, #nav-group { overflow: visible !important; } #ls-menu-container { position: relative !important; display: inline-flex !important; align-items: center; height: 100%; padding: 0 15px; cursor: pointer !important; z-index: 2000 !important; } /* 2. 悬浮面板:宽大且高不透明度 */ #ls-menu-panel { position: absolute !important; top: 100% !important; left: 0 !important; margin-top: 15px !important; width: 420px; padding: 24px; border-radius: 18px; /* 高不透明度磨砂玻璃 (0.9) */ background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: 999999 !important; cursor: default; } /* 3. 透明感应桥梁 */ #ls-menu-panel::before { content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 25px; background: transparent !important; } /* 4. 触发效果 */ #ls-menu-container:hover #ls-menu-panel { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } #ls-menu-container:hover i.fa-fingerprint { color: #49b1f5; transform: scale(1.1); } /* 5. 内部网格:保持两列 */ .ls-section { margin-bottom: 22px; } .ls-section:last-child { margin-bottom: 0; } .ls-title { color: #333; font-weight: 800; font-size: 15px; margin-bottom: 12px; opacity: 0.9; } .ls-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); /* 恢复为两列 */ gap: 10px; } .ls-grid a { color: #444 !important; font-size: 14px !important; padding: 10px 12px; border-radius: 12px; display: flex; align-items: center; transition: all 0.2s ease; background: rgba(0, 0, 0, 0.02); } .ls-grid a:hover { background: #49b1f5 !important; color: #fff !important; transform: translateX(4px); /* 悬停时轻微右移,增加动感 */ } .ls-grid a i { margin-right: 12px; width: 20px; text-align: center; font-size: 15px; } /* 6. 深色模式适配 */ [data-theme='dark'] #ls-menu-panel { background: rgba(30, 30, 30, 0.95) !important; border-color: rgba(255, 255, 255, 0.1) !important; } [data-theme='dark'] .ls-title { color: #eee; } [data-theme='dark'] .ls-grid a { color: #ccc !important; background: rgba(255, 255, 255, 0.05); } /* --- 附加补丁:确保文章标题正常显示且居中 --- */ /* 1. 当文章标题显示类名触发时,确保它能浮现 */ #nav.show-title .nav-page-title { display: flex !important; opacity: 1 !important; visibility: visible !important; /* 强制居中,不影响你原本的 blog-info 和 nav-right */ position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; white-space: nowrap !important; z-index: 1000 !important; /* 确保层级高于你原本的 menus */ } /* 2. 滚动时自动隐藏原本占据 100% 宽度的菜单和站点标题,防止重叠 */ #nav.show-title #menus, #nav.show-title .nav-site-title { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* 3. 修正文章标题的基础状态,防止它在页面顶端时乱入 */ #nav .nav-page-title { display: none; /* 默认隐藏,由 show-title 类名控制 */ transition: opacity 0.3s ease; } /* 4. 保持你原本 blog-info 的溢出显示,确保指纹菜单可用 */ #nav #blog-info { overflow: visible !important; }