/* ============================================================ iOS 27 Liquid Glass · 通用近似实现（2026-09-18 逐项调到用户验收通过的配方；网页/控制台/小程序/Electron 同一组数值，落地差异见 SKILL.md「平台落地」） 来源：苹果 WWDC25「Meet Liquid Glass」+ HIG Materials + iOS 27 改动（MacRumors / 9to5Mac / Cult of Mac / iDropNews） 用法：给玻璃元素加 class="lg27"，必要时叠 lg27-lens（选中/浮起）。要求元素 position 非 static、有 border-radius、 背景（页面）必须有色相光晕可透，纯白/纯色底做玻璃白费力气。 ============================================================ */ /* 页面底：浅色 + 四团色相光晕（🔴 永远不许纯黑/深灰底，用户定死） */ .lg27-bg { background: radial-gradient(48% 52% at 6% 4%, rgba(99, 102, 241, .40) 0%, transparent 58%), radial-gradient(46% 50% at 96% 2%, rgba(56, 189, 248, .38) 0%, transparent 55%), radial-gradient(52% 58% at 94% 98%, rgba(139, 92, 246, .36) 0%, transparent 60%), radial-gradient(48% 54% at 4% 98%, rgba(34, 211, 238, .32) 0%, transparent 58%), linear-gradient(150deg, #e8ecff 0%, #eaf2ff 50%, #eef0ff 100%); background-attachment: fixed; } html.dark .lg27-bg { background: radial-gradient(40% 60% at 20% 28%, rgba(56, 189, 248, .5), transparent 60%), radial-gradient(46% 56% at 72% 18%, rgba(139, 92, 246, .52), transparent 60%), radial-gradient(52% 62% at 86% 76%, rgba(16, 185, 129, .42), transparent 62%), radial-gradient(46% 56% at 32% 88%, rgba(99, 102, 241, .46), transparent 60%), radial-gradient(70% 90% at 50% 50%, rgba(18, 38, 86, .55), transparent 72%), linear-gradient(140deg, #0a1230 0%, #0e1a3a 52%, #0a1f33 100%); } /* ---------- 材质本体（Regular 档）---------- 层1 填充 .38 + blur 30 sat 170（iOS 27：中等透明 + 强扩散，不是 ultra clear） 层2 四边亮色折光斜面（::after，mask 挖空只留 1.5px；顶 .98 最亮 / 两侧 .55 / 底 .78） 🔴 两侧绝不能用灰/暗线，用户两次打回：「左右灰色线更明显不行」 层3 内侧散射光 24px + 顶缘 1px 高光 + 左右 6~8px 柔和折光 层4 极淡 0.5px 分离圈 + 柔和悬浮投影 */ .lg27 { position: relative; background: rgba(255, 255, 255, 0.38); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); box-shadow: inset 0 0 24px 0 rgba(255, 255, 255, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.90), inset 6px 0 10px -8px rgba(255, 255, 255, 0.55), inset -6px 0 10px -8px rgba(255, 255, 255, 0.55), 0 0 0 0.5px rgba(20, 30, 60, 0.06), 0 14px 36px -16px rgba(20, 30, 60, 0.30); } .lg27::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.70) 10%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.55) 70%, rgba(255, 255, 255, 0.62) 92%, rgba(255, 255, 255, 0.78) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 5; } /* 玻璃上的文字必带 text-shadow（透明度一变才不糊） */ .lg27, .lg27 * { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); } /* ---------- 选中 / 浮起 = 透镜胶囊（同一配方，填充更亮，四边同斜面） ---------- */ .lg27-lens { background: rgba(255, 255, 255, 0.58); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.95), inset 0 0 14px 0 rgba(255, 255, 255, 0.45), 0 2px 6px -2px rgba(20, 30, 60, 0.14); } .lg27-lens::after { padding: 1.2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.50) 18%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.55) 88%, rgba(255, 255, 255, 0.78) 100%); } /* 悬停：只提亮填充 */ .lg27-hover:hover { background: rgba(255, 255, 255, 0.38); } /* ---------- 小控件（按钮 / 输入框 / 选择器 / 分段按钮）：叠在 .lg27 上，填充降到 .24，悬停/聚焦 .38（09-22 用户验收） ---------- */ .lg27.lg27-ctl { background: rgba(255, 255, 255, 0.24); border: none; } .lg27.lg27-ctl:hover, .lg27.lg27-ctl:focus-within { background: rgba(255, 255, 255, 0.38); } html.dark .lg27.lg27-ctl { background: rgba(255, 255, 255, 0.07); } html.dark .lg27.lg27-ctl:hover, html.dark .lg27.lg27-ctl:focus-within { background: rgba(255, 255, 255, 0.12); } /* ---------- echarts 悬停气泡：option 里 className:'lg27-chart-tip' + backgroundColor:'transparent' + borderWidth:0 + padding:0 + extraCssText:'box-shadow:none' echarts 把底色写 inline，这里必须 !important；行结构由 formatter 拼：.lgt-date / .lgt-row(.lgt-dot .lgt-name .lgt-val) ---------- */ .lg27-chart-tip { position: absolute; border-radius: 12px !important; border: none !important; background: rgba(255, 255, 255, 0.42) !important; -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 0 12px 0 rgba(255, 255, 255, 0.35), 0 14px 36px -12px rgba(30, 45, 80, 0.3) !important; padding: 8px 12px !important; color: #16233b !important; font-size: 11px !important; line-height: 1.5 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } .lg27-chart-tip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 30%, rgba(255,255,255,.35) 58%, rgba(120,140,190,.35) 84%, rgba(255,255,255,.85) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* 🔴 echarts 给了 className 就不再写默认 display:none 内联样式，初始化时有个 24×16 空壳在图左上角当白点显示；空的时候藏掉 */ .lg27-chart-tip:empty { display: none !important; } .lg27-chart-tip .lgt-date { font-size: 11px; color: #6b7280; margin-bottom: 4px; } .lg27-chart-tip .lgt-row { display: flex; align-items: center; gap: 6px; min-width: 120px; margin-top: 2px; } .lg27-chart-tip .lgt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .lg27-chart-tip .lgt-name { color: #374151; } .lg27-chart-tip .lgt-val { margin-left: auto; padding-left: 14px; font-weight: 700; color: #111827; } html.dark .lg27-chart-tip { background: rgba(24,30,48,.42) !important; color: #dde5f7 !important; text-shadow: 0 1px 0 rgba(0,0,0,.35); } html.dark .lg27-chart-tip .lgt-date { color: #9aa7c2; } html.dark .lg27-chart-tip .lgt-name { color: #c5cfe6; } html.dark .lg27-chart-tip .lgt-val { color: #fff; } /* ---------- 深色态：同一套结构只换亮度 ---------- */ html.dark .lg27 { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 24px 0 rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.28), inset 6px 0 10px -8px rgba(255, 255, 255, 0.12), inset -6px 0 10px -8px rgba(255, 255, 255, 0.12), 0 14px 36px -16px rgba(0, 0, 0, 0.60); } html.dark .lg27::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.30) 10%, rgba(255, 255, 255, 0.16) 35%, rgba(255, 255, 255, 0.16) 70%, rgba(255, 255, 255, 0.20) 92%, rgba(255, 255, 255, 0.34) 100%); } html.dark .lg27, html.dark .lg27 * { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } html.dark .lg27-lens { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.32), inset 0 0 14px 0 rgba(255, 255, 255, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.40); } /* ---------- 提示气泡（Element Plus el-tooltip popper-class="lg27-tip"；popper 已 portal 到 body） ---------- */ .lg27-tip.el-popper { position: relative; border-radius: 12px !important; border: none !important; background: rgba(255, 255, 255, 0.42) !important; -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), inset 0 0 12px 0 rgba(255, 255, 255, 0.35), 0 14px 36px -12px rgba(30, 45, 80, 0.3) !important; color: #16233b !important; font-size: 12px !important; padding: 8px 12px !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } .lg27-tip.el-popper::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 30%, rgba(255,255,255,.35) 58%, rgba(120,140,190,.35) 84%, rgba(255,255,255,.85) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .lg27-tip.el-popper .el-popper__arrow::before { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.7) !important; } html.dark .lg27-tip.el-popper { background: rgba(24,30,48,.42) !important; color: #dde5f7 !important; text-shadow: 0 1px 0 rgba(0,0,0,.35); } html.dark .lg27-tip.el-popper .el-popper__arrow::before { background: rgba(24,30,48,.55) !important; border-color: rgba(255,255,255,.2) !important; } /* ---------- 无障碍：系统「降低透明度」→ 变磨砂（iOS 27 行为），斜面保留 ---------- */ @media (prefers-reduced-transparency: reduce) { .lg27 { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; } html.dark .lg27 { background: rgba(20, 28, 52, 0.95); } } @media (prefers-reduced-motion: reduce) { .lg27, .lg27-lens { transition: none !important; } }