* * 内容底部留白:JS 会给 body 加 has-bottom-nav 类,统一撑开 padding-bottom, * 因此各页面不需要再自己设。若某页面已有 padding-bottom 需先移除。 */ body.has-bottom-nav { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; padding: 0 var(--bnav-side-padding, 16px) calc(8px + env(safe-area-inset-bottom)); pointer-events: none; } @media (min-width: 768px) { .bottom-nav { left: 50%; transform: translateX(-50%); max-width: 428px; } } .bottom-nav .nav-items { display: flex; align-items: center; justify-content: space-around; gap: 4px; padding: var(--bnav-inner-padding, 4px); border-radius: 24px; background: var(--bnav-bg, rgba(255, 255, 255, 0.15)); border: 1px solid var(--bnav-border, rgba(255, 255, 255, 0.2)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--bnav-shadow, none); pointer-events: auto; transition: all 0.3s; } .bottom-nav .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 16px; cursor: pointer; transition: transform 0.15s ease, background 0.3s; /* 覆盖的默认样式 */ text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } /* 按下手感:轻微下陷。active 项()是不可点击的,不需要动效 */ .bottom-nav a.nav-item:active { transform: scale(0.94); transition: transform 0.1s ease; } .bottom-nav .nav-item.active { background: var(--bnav-active-bg, rgba(255, 255, 255, 0.2)); cursor: default; } /* 图标占位:避免 iconify 加载前塌陷 */ .bottom-nav .nav-icon { width: 20px; height: 20px; font-size: 20px; line-height: 1; color: var(--bnav-fg, rgba(255, 255, 255, 0.7)); transition: color 0.3s; } .bottom-nav .nav-label { font-size: 11px; font-weight: 500; color: var(--bnav-fg, rgba(255, 255, 255, 0.7)); } .bottom-nav .nav-item.active .nav-icon, .bottom-nav .nav-item.active .nav-label { color: var(--bnav-fg-active, #fff); } .bottom-nav .nav-item.active .nav-label { font-weight: 600; } /* 深色玻璃预设 —— 用于 profile / timeline 等深色背景页 */ .bottom-nav[data-theme="dark"], body[data-nav-theme="dark"] .bottom-nav { --bnav-side-padding: 16px; --bnav-inner-padding: 5px; --bnav-bg: rgba(9, 23, 33, 0.84); --bnav-border: rgba(188, 214, 224, 0.12); --bnav-shadow: 0 16px 32px rgba(4, 11, 18, 0.32); --bnav-active-bg: rgba(255, 255, 255, 0.08); --bnav-fg: rgba(226, 236, 241, 0.62); --bnav-fg-active: rgba(248, 250, 251, 0.95); }