/* ========================================================== 玻璃导航组件（LiquidGlass） ① 底部玻璃托盘（固定贴底） ② 独立悬浮玻璃块（可拖可点） 【设计要点：各是各的，不融合】 不用 backdrop-filter 去「透出」背后内容——那样会和页面背景图糊在一起。 改用分层实色：每层都是半透明的白色渐变 + 明确边框 + 独立阴影， 靠亮度差和边框来区分层次。这样每块玻璃都是独立实体， 既能看出玻璃质感，又不会跟背景图或其他玻璃块融合。 ========================================================== */ /* ---------- ① 底部玻璃托盘 ---------- */ .lgn-root { --lgn-accent: #c9a24a; /* 黑金（买家端），中端覆写为蓝紫 */ --lgn-accent-soft: rgba(201, 162, 74, .20); position: fixed; left: 50%; transform: translateX(-50%); z-index: 940; box-sizing: border-box; padding: 5px 6px; display: flex; align-items: stretch; touch-action: pan-y; -webkit-user-select: none; user-select: none; /* 托盘层：中等亮度的不透明底，作为玻璃的「底材」 */ background: linear-gradient(165deg, rgba(46, 52, 74, .82) 0%, rgba(30, 35, 54, .88) 100%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 30px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .18); overflow: hidden; } /* 顶部高光描边：模拟玻璃上沿的反光 */ .lgn-root::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, .02) 62%, rgba(255, 255, 255, .22) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; z-index: 3; } /* ---------- tab 容器 ---------- */ .lgn-list { position: relative; display: flex; width: 100%; height: 100%; } /* ---------- 高亮玻璃块：一块更亮的独立玻璃，可左右拖动 ---------- */ .lgn-pill { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; /* 点击由 item 处理 */ background: linear-gradient(165deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .17) 100%); border: 1px solid rgba(255, 255, 255, .48); box-shadow: 0 3px 12px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), width .3s ease; } /* ---------- 单个 tab：本身就是一块独立玻璃 ---------- 每块都有独立边框与背景，块间留 3px 间隙， 一眼能看出是四块独立玻璃嵌在托盘里，而不是连成一片。 */ .lgn-item { position: relative; z-index: 2; flex: 1; margin: 0 3px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: rgba(255, 255, 255, .62); transition: color .2s ease, background .2s ease; -webkit-tap-highlight-color: transparent; /* 独立玻璃层：比托盘亮一档，形成可辨识的块 */ background: linear-gradient(165deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 100%); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20); } .lgn-item.active { color: var(--lgn-accent); font-weight: 600; } .lgn-item .lgn-ico { display: flex; align-items: center; justify-content: center; line-height: 0; } .lgn-item .lgn-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; } .lgn-item.active .lgn-ico svg { transform: translateY(-1px) scale(1.08); stroke-width: 2; } .lgn-item .lgn-txt { font-size: 10px; line-height: 1.1; white-space: nowrap; letter-spacing: .2px; } /* ---------- ② 独立悬浮玻璃块 ---------- 与托盘同样的玻璃材质，但是完全独立的一块： 自带边框、背景和阴影，悬浮在页面之上，不与托盘或背景融合。 */ .lgn-orb { position: fixed; left: 0; top: 0; z-index: 960; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; will-change: transform; color: rgba(255, 255, 255, .92); background: linear-gradient(165deg, rgba(52, 58, 82, .86) 0%, rgba(32, 37, 57, .92) 100%); border: 1px solid rgba(255, 255, 255, .26); box-shadow: 0 8px 22px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .20); } .lgn-orb.dragging { cursor: grabbing; box-shadow: 0 14px 34px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .34); } .lgn-orb .lgn-orb-ic { display: flex; align-items: center; justify-content: center; line-height: 0; pointer-events: none; } .lgn-orb .lgn-orb-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lgn-orb .lgn-orb-tx { font-size: 9px; line-height: 1.1; white-space: nowrap; pointer-events: none; } /* ---------- 中端蓝紫主题 ---------- */ .lgn-root.lgn-mid { --lgn-accent: #8fa4ff; --lgn-accent-soft: rgba(143, 164, 255, .20); } .lgn-orb.lgn-mid { color: rgba(255, 255, 255, .94); } /* ---------- 浅色环境（页面背景偏白时加深玻璃，保证可读）---------- */ @media (prefers-color-scheme: light) { .lgn-root { background: linear-gradient(165deg, rgba(40, 45, 66, .88) 0%, rgba(26, 30, 47, .94) 100%); } .lgn-orb { background: linear-gradient(165deg, rgba(46, 52, 74, .90) 0%, rgba(28, 32, 50, .95) 100%); } } /* ========================================================== GlassOrb —— 旧版圆形悬浮球（保留兼容，默认不再挂载） ========================================================== */ .glass-orb { position: fixed; left: 0; top: 0; z-index: 800; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; cursor: grab; will-change: transform; -webkit-user-select: none; user-select: none; touch-action: none; box-shadow: 0 8px 24px rgba(20, 24, 40, .28), inset 0 1px 1px rgba(255, 255, 255, .5); background: linear-gradient(150deg, rgba(255,255,255,.28), rgba(255,255,255,.10)); border: 1px solid rgba(255, 255, 255, .38); } .glass-orb.dragging { cursor: grabbing; } .glass-orb .glass-orb-ic { font-size: 20px; line-height: 1; pointer-events: none; } .glass-orb .glass-orb-tx { font-size: 9px; line-height: 1; opacity: .92; pointer-events: none; }