/* ============================================================================= 澄光 · 液态玻璃主题 [2026-11-01] ----------------------------------------------------------------------------- 设计参考：Apple Vision Pro 的空间界面 —— 玻璃不是"半透明白块"，而是 一块**有厚度的材质**：顶面接收环境光（棱光）、底面发生折射（偏色）、 侧面有菲涅耳反射，浮在空间里并投下两层阴影（接触 + 环境）。 落地方式：只覆盖**设计令牌** + 少量材质规则，不动任何结构。 · 令牌（--surface-* / --border-glass / --shadow-glass …）一改， 全站所有用令牌的组件自动跟着变 —— 这是不破坏功能的前提 · 材质规则只加在 .glass / .glass-soft / .card / .bubble 这几个"表面"上 · 3D 与动效由 liquid.js 驱动（CSS 只负责过渡曲线和降级） 作用域：html[data-skin="liquid"]。切回 default / autumn 就是原样，零残留。 ========================================================================== */ /* --------------------------------------------------------------------------- 1. 令牌 · 浅色（珍珠玻璃） 背景不是白，而是"有一点点雾的晨光"；玻璃压到 30% 透明度， 这样能看见底下流动的光，而不是一整片死白。 --------------------------------------------------------------------------- */ html[data-skin='liquid'] { --bg-canvas: radial-gradient(120% 95% at 12% -8%, rgba(148, 190, 255, 0.55), transparent 58%), radial-gradient(110% 90% at 92% 4%, rgba(214, 170, 255, 0.45), transparent 55%), radial-gradient(120% 100% at 50% 108%, rgba(150, 235, 235, 0.42), transparent 60%), linear-gradient(168deg, #eef3ff 0%, #e7ecfb 40%, #eaf3fb 100%); --surface-1: rgba(255, 255, 255, 0.30); --surface-2: rgba(255, 255, 255, 0.42); --surface-3: rgba(250, 252, 255, 0.86); --surface-sunken: rgba(219, 229, 246, 0.42); --surface-hover: rgba(255, 255, 255, 0.46); --surface-active: rgba(255, 255, 255, 0.62); --border-glass: rgba(255, 255, 255, 0.58); --border-line: rgba(96, 118, 160, 0.16); --glass-blur: 34px; --glass-saturate: 175%; /* 材质的光学参数：棱光 / 折射 / 悬浮阴影 / 高光 */ --liquid-rim-top: rgba(255, 255, 255, 0.92); --liquid-rim-bottom: rgba(174, 206, 255, 0.42); --liquid-rim-side: rgba(255, 255, 255, 0.36); --liquid-spec: rgba(255, 255, 255, 0.30); --liquid-shadow: rgba(84, 112, 168, 0.40); --liquid-contact: rgba(60, 82, 130, 0.14); --liquid-fresnel: rgba(255, 255, 255, 0.72); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92); --shadow-glass: 0 28px 64px -22px var(--liquid-shadow); --r-xl: 24px; --r-2xl: 32px; } /* --------------------------------------------------------------------------- 2. 令牌 · 深色（空间玻璃） 背景是接近黑的空间，靠三团低饱和冷光撑起景深；玻璃透明度反过来提一点， 因为深色背景上太透会看清底噪。 --------------------------------------------------------------------------- */ html[data-skin='liquid'][data-theme='dark'] { /* 参考图的底子是一张"星云 + 发光玻璃体"的照片。这里用多层径向渐变逼近： 中心偏上一点给一团青白色高光（充当那个发光体），四周散青 / 紫 / 粉 / 暖橙。 玻璃面板要"有东西可透"，这张底必须够鲜艳，否则再怎么调都是灰板。 */ --bg-canvas: radial-gradient(32% 28% at 53% 44%, rgba(206, 248, 255, 0.44), transparent 62%), radial-gradient(56% 48% at 51% 42%, rgba(56, 189, 248, 0.36), transparent 66%), radial-gradient(46% 40% at 13% 80%, rgba(34, 211, 238, 0.40), transparent 62%), radial-gradient(44% 38% at 88% 18%, rgba(168, 85, 247, 0.40), transparent 62%), radial-gradient(40% 34% at 76% 64%, rgba(236, 72, 153, 0.26), transparent 64%), radial-gradient(44% 32% at 58% 98%, rgba(245, 158, 11, 0.20), transparent 66%), radial-gradient(90% 70% at 50% 0%, rgba(30, 64, 175, 0.30), transparent 62%), linear-gradient(170deg, #04060e 0%, #060a16 48%, #03050b 100%); /* 面板要能"透出"背景：填充压到 6~9%，靠 blur 保住可读性 */ --surface-1: rgba(255, 255, 255, 0.055); --surface-2: rgba(255, 255, 255, 0.075); --surface-3: rgba(22, 27, 42, 0.94); --surface-sunken: rgba(0, 0, 0, 0.34); --surface-hover: rgba(255, 255, 255, 0.075); --surface-active: rgba(255, 255, 255, 0.11); --border-glass: rgba(255, 255, 255, 0.10); --border-line: rgba(255, 255, 255, 0.075); --glass-blur: 42px; --glass-saturate: 185%; /* 色散：四条边四个色相 —— 上青、下暖橙、左蓝、右粉紫。 参考图就是这样，不是单色白边。 */ --liquid-rim-top: rgba(170, 255, 248, 0.78); --liquid-rim-bottom: rgba(255, 178, 104, 0.58); --liquid-rim-side: rgba(150, 198, 255, 0.46); --liquid-rim-right: rgba(230, 162, 255, 0.50); --liquid-bloom: rgba(56, 189, 248, 0.42); --liquid-inner-glow: rgba(56, 189, 248, 0.11); --liquid-spec: rgba(255, 255, 255, 0.065); --liquid-shadow: rgba(0, 0, 0, 0.80); --liquid-contact: rgba(0, 0, 0, 0.55); --liquid-fresnel: rgba(255, 255, 255, 0.42); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12); --shadow-glass: 0 34px 80px -24px rgba(0, 0, 0, 0.82); } /* --------------------------------------------------------------------------- 3. 画布：把背景铺到 上，body 保持透明 这样 fixed 的流光层（liquid.js 插入）才不会被 body 背景盖住。 --------------------------------------------------------------------------- */ html[data-skin='liquid'] { background: var(--bg-canvas) fixed; background-size: cover; } html[data-skin='liquid'] body { background: transparent; /* 深色下给文字加一点抗光晕，玻璃后面有亮光时字依然立得住 */ -webkit-font-smoothing: antialiased; } /* 流光层：三团缓慢漂移的光斑，纯 transform 动画（GPU），不触发重排 */ html[data-skin='liquid'] .cx-liquid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* 视差由 JS 写这两个变量（指针位置 -1 ~ 1） */ transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 14px), 0); transition: transform .9s cubic-bezier(.22, 1, .36, 1); } html[data-skin='liquid'] .cx-liquid-bg i { position: absolute; display: block; border-radius: 50%; filter: blur(46px); opacity: .62; will-change: transform; } html[data-skin='liquid'] .cx-liquid-bg i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: radial-gradient(circle at 40% 40%, rgba(120, 160, 255, .55), transparent 66%); animation: lqDrift1 34s ease-in-out infinite alternate; } html[data-skin='liquid'] .cx-liquid-bg i:nth-child(2) { width: 40vmax; height: 40vmax; right: -10vmax; top: -8vmax; background: radial-gradient(circle at 50% 50%, rgba(178, 128, 255, .48), transparent 66%); animation: lqDrift2 44s ease-in-out infinite alternate; } html[data-skin='liquid'] .cx-liquid-bg i:nth-child(3) { width: 52vmax; height: 52vmax; left: 22vmax; bottom: -26vmax; background: radial-gradient(circle at 50% 50%, rgba(96, 226, 232, .40), transparent 68%); animation: lqDrift3 52s ease-in-out infinite alternate; } html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg i { opacity: .78; filter: blur(62px); } /* 深色下把第二团光挪到中右侧，正好压在右侧面板后面 */ html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg i:nth-child(2) { right: -4vmax; top: 4vh; } html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg i:nth-child(1) { left: -8vmax; top: -10vmax; } html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg i:nth-child(3) { left: 26vmax; bottom: -28vmax; opacity: .58; } @keyframes lqDrift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw, 5vh, 0) scale(1.12); } } @keyframes lqDrift2 { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-7vw, 6vh, 0) scale(0.95); } } @keyframes lqDrift3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5vw, -6vh, 0) scale(1.1); } } /* 极细颗粒：让大块玻璃看起来有"材质"而不是纯色块（SVG 噪点，无网络请求） */ html[data-skin='liquid'] body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } html[data-skin='liquid'][data-theme='dark'] body::after { opacity: .10; } /* 内容层压在流光之上 */ html[data-skin='liquid'] .flex.h-screen { position: relative; z-index: 2; } /* --------------------------------------------------------------------------- 4. 玻璃材质 用三层背景叠出"厚度"，这是和普通毛玻璃最大的区别： ① 高光层（padding-box）—— 跟随指针的镜面反光 ② 填充层（padding-box）—— 玻璃本体，半透明，让底下透上来 ③ 折射环（border-box）—— conic 渐变做的 1px 边框： 左上亮、右下偏冷蓝，模拟光穿过玻璃边缘时的色散 边框用 `border: 1px solid transparent` + `background-clip: border-box` 实现，视觉上有 1px 的"棱"，但不会像 box-shadow 那样被圆角裁掉。 --------------------------------------------------------------------------- */ html[data-skin='liquid'] .glass, html[data-skin='liquid'] .card { border: 1px solid var(--border-glass); background-color: transparent; background-image: /* ① 镜面高光：位置由指针驱动（--spec-x/--spec-y） */ radial-gradient(120% 96% at var(--spec-x, 24%) var(--spec-y, -6%), var(--liquid-spec), transparent 58%), /* ② 斜向反光带：玻璃最容易被认出来的那道"眩光" */ linear-gradient(112deg, rgba(255, 255, 255, .20) 0 8%, rgba(255, 255, 255, .05) 20%, transparent 36%), /* ③ 本体 */ linear-gradient(var(--surface-1), var(--surface-1)); background-origin: padding-box; background-clip: padding-box; /* 棱边用 inset 阴影做。 最初用 conic 渐变按 border-box 上色，看着更像"折射环"，但填充层是半透明的， 挡不住那层渐变 —— 整块玻璃上会出现一块亮一块暗的脏斑（朋友圈卡片上很明显）。 inset 阴影只画在边缘 1px，不会渗到中间。 */ box-shadow: inset 0 1px 0 var(--liquid-rim-top), inset 0 -1px 0 var(--liquid-rim-bottom), inset 1px 0 0 var(--liquid-rim-side), inset -1px 0 0 var(--liquid-rim-side), 0 1px 2px var(--liquid-contact), 0 26px 62px -24px var(--liquid-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition: background-color .28s ease, box-shadow .28s ease, border-color .28s ease; } html[data-skin='liquid'][data-theme='dark'] .glass, html[data-skin='liquid'][data-theme='dark'] .card { border-color: transparent; background-image: /* 镜面高光（跟随指针） */ radial-gradient(120% 96% at var(--spec-x, 24%) var(--spec-y, -6%), rgba(255, 255, 255, .11), transparent 58%), /* 斜向眩光 */ linear-gradient(112deg, rgba(255, 255, 255, .05) 0 8%, rgba(255, 255, 255, .012) 20%, transparent 36%), /* 本体：深色 + 一点点冷调，透出背后的星云 */ linear-gradient(rgba(9, 14, 26, .34), rgba(6, 10, 20, .42)); box-shadow: /* 四边色散：不同边不同色相，是"折射"最直观的表达 */ inset 0 1px 0 var(--liquid-rim-top), inset 0 -1px 0 var(--liquid-rim-bottom), inset 1px 0 0 var(--liquid-rim-side), inset -1px 0 0 var(--liquid-rim-right), /* 内壁的青色辉光，让玻璃"自己发一点光" */ inset 0 0 64px var(--liquid-inner-glow), /* 外溢光：贴在背景上的一圈 bloom */ 0 0 42px -14px var(--liquid-bloom), 0 1px 2px var(--liquid-contact), 0 40px 90px -30px var(--liquid-shadow); } html[data-skin='liquid'] .glass-soft { border: 1px solid var(--border-glass); background-color: transparent; background-image: linear-gradient(var(--surface-2), var(--surface-2)); background-origin: padding-box; background-clip: padding-box; box-shadow: inset 0 1px 0 var(--liquid-rim-top), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 1px 2px var(--liquid-contact); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-saturate)); backdrop-filter: blur(calc(var(--glass-blur) * .55)) saturate(var(--glass-saturate)); } /* 顶栏 / 底栏：把它们做成"玻璃条"，与主面板之间有 1px 的接缝阴影 */ html[data-skin='liquid'] #head { border-bottom-color: var(--border-glass); box-shadow: 0 1px 0 -0px rgba(255, 255, 255, .06), 0 10px 30px -24px var(--liquid-shadow); border-radius: var(--r-2xl) var(--r-2xl) 0 0; } html[data-skin='liquid'] main footer { background-image: linear-gradient(180deg, transparent, rgba(255, 255, 255, .05)); border-top-color: var(--border-glass); } /* 气泡：也是玻璃，但要更"实"一点，否则文字压在亮背景上读不动 */ html[data-skin='liquid'] .bubble { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 1px 2px var(--liquid-contact), 0 12px 28px -18px var(--liquid-shadow); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } /* 会话行 / 竖排标签：hover 时像被光"擦过" */ html[data-skin='liquid'] .conv, html[data-skin='liquid'] .vtab { transition: background-color .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, color .22s ease; } html[data-skin='liquid'] .conv:hover, html[data-skin='liquid'] .vtab:hover { transform: translateZ(0) translateY(-1px); box-shadow: 0 8px 22px -16px var(--liquid-shadow); } /* --------------------------------------------------------------------------- 5. 3D 景深 外壳给 perspective，可倾斜的元素由 JS 写 --tilt-x / --tilt-y。 倾斜角度很小（≤3.2deg），只为"这块玻璃浮着"，不做旋转木马。 --------------------------------------------------------------------------- */ html[data-skin='liquid'] .flex.h-screen { perspective: 2200px; perspective-origin: 50% 40%; } html[data-skin='liquid'] .cx-tilt { transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translate3d(0, 0, var(--lift, 0px)); transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; will-change: transform; } html[data-skin='liquid'] .cx-tilt.is-tilting { transition-duration: .08s; z-index: 3; } /* 横幅里的头像浮在封面之上，增强"分层"的观感 */ html[data-skin='liquid'] .cx-cover-avatar { transform: translateZ(34px); box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 18px 40px -18px rgba(0, 0, 0, .55); } html[data-skin='liquid'] .cx-cover-name { transform: translateZ(18px); } /* --------------------------------------------------------------------------- 6. 微交互 --------------------------------------------------------------------------- */ html[data-skin='liquid'] button, html[data-skin='liquid'] .interactive { transition: transform .18s cubic-bezier(.22, 1, .36, 1), background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; } html[data-skin='liquid'] button:active, html[data-skin='liquid'] .interactive:active { transform: translateY(1px) scale(.982); } html[data-skin='liquid'] :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand), 0 0 0 5px var(--brand-soft); } /* 滚动区：上下边缘柔化，内容"从雾里出来" */ html[data-skin='liquid'] #messages, html[data-skin='liquid'] #tabContent { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--border-glass) transparent; } html[data-skin='liquid'] #messages::-webkit-scrollbar { width: 9px; } html[data-skin='liquid'] #messages::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .16)); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } html[data-skin='liquid'] #messages::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25)); background-clip: padding-box; } /* --------------------------------------------------------------------------- 7. 动效：入场 / 切换 --dur-* 是原站令牌，这里只把它调到"更慢、更有惯性"的一档 --------------------------------------------------------------------------- */ html[data-skin='liquid'] { --dur-1: 140ms; --dur-2: 240ms; --dur-3: 380ms; --dur-4: 620ms; } @keyframes lqRise { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes lqFadeIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } } html[data-skin='liquid'] .cx-enter { animation: lqRise .62s cubic-bezier(.22, 1, .36, 1) both; } html[data-skin='liquid'] .cx-enter-soft { animation: lqFadeIn .42s cubic-bezier(.22, 1, .36, 1) both; } /* 逐条浮现：JS 只负责加 class 与 delay，动画本身交给 CSS */ html[data-skin='liquid'] .cx-reveal { animation: lqFadeIn .46s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--rv-delay, 0ms); } /* --------------------------------------------------------------------------- 8. 降级与性能 ① 不支持 backdrop-filter：把玻璃做"实"，否则文字会糊在背景上 ② 移动端：模糊半径减半、关掉倾斜与视差（GPU 与省电） ③ 减弱动效：全部动画归零，只保留透明度过渡 --------------------------------------------------------------------------- */ @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { html[data-skin='liquid'] { --surface-1: rgba(255, 255, 255, .90); --surface-2: rgba(255, 255, 255, .94); } html[data-skin='liquid'][data-theme='dark'] { --surface-1: rgba(22, 27, 41, .94); --surface-2: rgba(30, 36, 52, .96); } } @media (max-width: 900px) { /* 注意：深色令牌的选择器权重更高，这里必须带上 [data-theme='dark']， 否则 --glass-blur 会被深色那一条压回 36px（移动端白烧 GPU）。 */ html[data-skin='liquid'], html[data-skin='liquid'][data-theme='dark'] { --glass-blur: 20px; --glass-saturate: 150%; } html[data-skin='liquid'] .cx-liquid-bg i { filter: blur(34px); opacity: .5; } html[data-skin='liquid'] .glass, html[data-skin='liquid'] .card { box-shadow: inset 0 1px 0 var(--liquid-rim-top), 0 1px 2px var(--liquid-contact), 0 14px 34px -20px var(--liquid-shadow); } /* 触屏没有 hover，倾斜反而会让布局抖，直接关掉 */ html[data-skin='liquid'] .cx-tilt { transform: none !important; } } @media (prefers-reduced-motion: reduce) { html[data-skin='liquid'] .cx-liquid-bg i { animation: none; } html[data-skin='liquid'] .cx-enter, html[data-skin='liquid'] .cx-enter-soft, html[data-skin='liquid'] .cx-reveal { animation: none; } } html[data-motion='reduced'][data-skin='liquid'] .cx-liquid-bg i { animation: none; } html[data-motion='reduced'][data-skin='liquid'] .cx-enter, html[data-motion='reduced'][data-skin='liquid'] .cx-enter-soft, html[data-motion='reduced'][data-skin='liquid'] .cx-reveal { animation: none; } html[data-motion='reduced'][data-skin='liquid'] .cx-tilt { transform: none !important; } html[data-motion='reduced'][data-skin='liquid'] * { transition-duration: .01ms !important; animation-duration: .01ms !important; } /* 屏蔽动画期间的重绘抖动 */ html[data-skin='liquid'] .cx-tilt, html[data-skin='liquid'] .glass, html[data-skin='liquid'] .card { backface-visibility: hidden; } /* 输入区：深色下必须压深，否则玻璃把底部光斑透上来，占位文字会糊在亮底上 */ html[data-skin='liquid'][data-theme='dark'] footer > table { background: rgba(13, 17, 27, 0.72) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 18px 44px -24px rgba(0, 0, 0, .85) !important; } /* 底部光斑下移，别正好在输入框后面发白 */ html[data-skin='liquid'] .cx-liquid-bg i:nth-child(3) { bottom: -34vmax; } /* ============================================================================= [2026-11-01 v90] 按参考图重做：星点 / 暗角 / 青紫气泡 / 琥珀选中 / 输入区 ----------------------------------------------------------------------------- 参考图（Vision Pro 风格聊天界面）的辨识度来自四件事： ① 背景是鲜艳的星云 + 星点，不是纯黑 ② 面板四边不同色相（色散），并且有内发光 + 外辉光 ③ 气泡分色：我方青绿、对方紫罗兰，各带同色描边 ④ 选中的会话是琥珀色胶囊 ①② 在上面改了；这一段补 ③④ 和星点/暗角。 ============================================================================= */ /* ---- 星点 + 暗角：挂在流光层上，不额外增加 DOM ---- */ html[data-skin='liquid'] .cx-liquid-bg::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23ffffff'%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 220px; opacity: .55; mix-blend-mode: screen; } html[data-skin='liquid'] .cx-liquid-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(126% 106% at 50% 42%, transparent 46%, rgba(0, 0, 0, .48) 100%); } html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg::before { opacity: .7; } html[data-skin='liquid'][data-theme='light'] .cx-liquid-bg::before { opacity: .18; mix-blend-mode: multiply; } /* ---- 气泡：我方青绿玻璃 / 对方紫罗兰玻璃 ---- */ html[data-skin='liquid'][data-theme='dark'] .bubble.mine { background: linear-gradient(155deg, rgba(45, 212, 191, .26), rgba(13, 116, 144, .42)) !important; border: 1px solid rgba(94, 234, 212, .42) !important; color: #eafffb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 26px -8px rgba(45, 212, 191, .45), 0 12px 30px -20px rgba(0, 0, 0, .8) !important; -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); } html[data-skin='liquid'][data-theme='dark'] .bubble.theirs { background: linear-gradient(155deg, rgba(139, 92, 246, .24), rgba(67, 24, 132, .44)) !important; border: 1px solid rgba(196, 181, 253, .34) !important; color: #f4ecff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 24px -10px rgba(139, 92, 246, .5), 0 12px 30px -20px rgba(0, 0, 0, .8) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); } /* 气泡里的元信息（时间）跟着换成浅色，否则在深色气泡上糊成一片 */ html[data-skin='liquid'][data-theme='dark'] .bubble.mine .mb-1.text-\[11px\], html[data-skin='liquid'][data-theme='dark'] .bubble.mine .text-\[11px\] { color: rgba(224, 255, 251, .78) !important; } html[data-skin='liquid'][data-theme='dark'] .bubble.theirs .mb-1.text-\[11px\], html[data-skin='liquid'][data-theme='dark'] .bubble.theirs .text-\[11px\] { color: rgba(238, 228, 255, .72) !important; } /* ---- 选中的会话：琥珀色玻璃胶囊（参考图里最醒目的那个橙） ---- */ html[data-skin='liquid'][data-theme='dark'] #tabContent .contact[class*='ring-indigo-300'] { background: linear-gradient(140deg, rgba(245, 158, 11, .26), rgba(180, 83, 9, .24)) !important; box-shadow: inset 0 1px 0 rgba(255, 214, 150, .45), inset 0 -1px 0 rgba(255, 170, 90, .18), 0 0 26px -10px rgba(245, 158, 11, .65) !important; color: #fff7ea; } html[data-skin='liquid'][data-theme='dark'] #tabContent .contact[class*='ring-indigo-300'] .text-slate-400, html[data-skin='liquid'][data-theme='dark'] #tabContent .contact[class*='ring-indigo-300'] .text-\[11px\] { color: rgba(255, 236, 210, .72) !important; } /* ---- 输入区：深玻璃长条 + 琥珀发送键 ---- */ html[data-skin='liquid'][data-theme='dark'] footer > table { background: linear-gradient(rgba(10, 15, 27, .58), rgba(7, 11, 21, .68)) !important; box-shadow: inset 0 1px 0 rgba(150, 255, 246, .22), inset 0 0 48px rgba(56, 189, 248, .05), 0 0 32px -14px rgba(56, 189, 248, .35) !important; } html[data-skin='liquid'][data-theme='dark'] footer table button[data-act='send'] { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #3a2205 !important; font-weight: 700; box-shadow: 0 0 26px -6px rgba(251, 191, 36, .7), inset 0 1px 0 rgba(255, 255, 255, .45) !important; } /* ---- 顶栏：底部一道冷光，和内容区分开 ---- */ html[data-skin='liquid'][data-theme='dark'] #head { background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent); box-shadow: inset 0 -1px 0 rgba(150, 255, 246, .12); } /* ============================================================================= [2026-11-01 v92] 主面板的真·色散描边 ----------------------------------------------------------------------------- 前面用四条 inset 阴影做"每边一色"，够稳但只有 1px 且不会过渡。 参考图里最抓眼的是**边缘像棱镜一样连续变色**，所以这两块主面板加一层 conic 渐变环：用 padding-box 遮罩挖空中间，只留 1.2px，因此不会像 border-box 填充那样从半透明玻璃里透出来（那个坑之前踩过）。 只给 main / sidebar 加，卡片级元素保持 inset 方案（数量多，省性能）。 ============================================================================= */ html[data-skin='liquid'][data-theme='dark'] main.glass, html[data-skin='liquid'][data-theme='dark'] aside.sidebar { position: relative; } html[data-skin='liquid'][data-theme='dark'] main.glass::after, html[data-skin='liquid'][data-theme='dark'] aside.sidebar::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; padding: 1.2px; background: conic-gradient(from 148deg at 50% 48%, #8ff7ff, #7fb4ff 18%, #a78bfa 38%, #ff9ad5 58%, #ffb066 78%, #8ff7ff 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; opacity: .58; pointer-events: none; filter: saturate(1.15); } /* 浅色下同样来一层，但收敛一些 */ html[data-skin='liquid'][data-theme='light'] main.glass, html[data-skin='liquid'][data-theme='light'] aside.sidebar { position: relative; } html[data-skin='liquid'][data-theme='light'] main.glass::after, html[data-skin='liquid'][data-theme='light'] aside.sidebar::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; padding: 1.2px; background: conic-gradient(from 148deg at 50% 48%, #ffffff, #b9d8ff 20%, #d9bcff 42%, #ffc9e4 62%, #ffe0b8 80%, #ffffff 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; opacity: .85; pointer-events: none; } /* ============================================================================= [2026-11-01 v100] 参考图对齐层 ----------------------------------------------------------------------------- 这一层是照着用户给的参考图逐项量的，不靠感觉： · 背景 —— 星云玻璃柱照片（CSS 生成不了，用图） · 面板圆角 —— 参考图 52px/420px 宽 ≈ 12.4% → 本站侧栏 344 × 12.4% ≈ 42px · 面板填充 —— 实测内部 rgb(23,30,49)，是"深色玻璃"而不是"白色叠加" · 描边 —— 实测上左 #245f6f / 上中 #262128 / 上右 #12314a / 右 #342a6f / 下右 #9681a3 / 下左 #3b8291 / 左 #061220 → 亮部集中在底部，左暗右紫，用 conic 连续过渡 · 选中态 —— 琥珀橙（实测胶囊 rgb(133,84,44) + 边框 rgb(162,107,58)） · 气泡 —— 青绿 rgb(16,122,129) / 蓝紫 / 紫罗兰 rgb(81,58,171) · 发送键 —— 橙黄 rgb(250,213,134) 全部作用域 html[data-skin='liquid']，切回经典即整体失效。 ============================================================================= */ /* --------------------------------------------------------------------------- 1. 背景：星云玻璃柱 --------------------------------------------------------------------------- */ html[data-skin='liquid'] .cx-liquid-bg { background-image: url('/assets/bg-nebula.jpg'); background-size: cover; background-position: 50% 46%; background-repeat: no-repeat; } /* 原三团光斑降为辅助（背景图本身已经够亮，再叠会糊） */ html[data-skin='liquid'] .cx-liquid-bg i { opacity: .16 !important; } html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg i { opacity: .20 !important; } /* 深色画布改成中性黑，别和照片打架 */ html[data-skin='liquid'][data-theme='dark'] { --bg-canvas: #05070c; } /* 暗角：照片四周压暗，视线集中到面板 */ html[data-skin='liquid'] body::after { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(126% 108% at 50% 44%, transparent 42%, rgba(0, 0, 0, .55) 100%); } /* --------------------------------------------------------------------------- 2. 面板：真·透明玻璃（不是白叠白） --------------------------------------------------------------------------- */ html[data-skin='liquid'] .glass, html[data-skin='liquid'] .sidebar, html[data-skin='liquid'] main { border-radius: 42px !important; background-color: rgba(7, 13, 26, 0.34) !important; background-image: linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 42%) !important; -webkit-backdrop-filter: blur(30px) saturate(155%) !important; backdrop-filter: blur(30px) saturate(155%) !important; border: 1px solid rgba(255, 255, 255, .05) !important; box-shadow: inset 0 1px 0 rgba(214, 238, 255, .32), inset 0 -1px 0 rgba(255, 186, 130, .20), inset 1px 0 0 rgba(140, 200, 255, .09), inset -1px 0 0 rgba(200, 150, 255, .12), 0 26px 80px -32px rgba(0, 0, 0, .92), 0 0 70px -18px rgba(64, 140, 210, .26) !important; } /* 两块主面板的连续色散边（mask 只留 1.2px，不渗色） */ html[data-skin='liquid'] main::after, html[data-skin='liquid'] aside.sidebar::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; padding: 1.2px; background: conic-gradient(from 0deg at 50% 50%, #23303e 0deg, #2f6b7d 34deg, #4a6f96 72deg, #503a78 104deg, #6d4a92 136deg, #a281b6 164deg, #7fa8bb 182deg, #4a9fb0 206deg, #2d6c7c 238deg, #17303d 274deg, #1b3a4a 310deg, #23303e 360deg); -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; opacity: .9; pointer-events: none; } /* --------------------------------------------------------------------------- 3. 导航：图标位 + 琥珀选中胶囊（参考图选中态 rgb(133,84,44)） --------------------------------------------------------------------------- */ html[data-skin='liquid'] .vtab { position: relative; min-height: 60px; border-radius: 17px !important; border: 1.4px solid transparent; color: rgba(226, 232, 240, .58) !important; font-size: 11px; letter-spacing: .02em; } html[data-skin='liquid'] .vtab:hover { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .08); color: rgba(241, 245, 249, .88) !important; transform: none !important; box-shadow: none !important; } html[data-skin='liquid'] .vtab.nav-active { background: linear-gradient(158deg, rgba(245, 158, 11, .30), rgba(180, 83, 9, .16)) !important; border-color: rgba(251, 191, 36, .72) !important; color: #fde9b8 !important; box-shadow: 0 0 0 1px rgba(245, 158, 11, .16), 0 0 26px -6px rgba(245, 158, 11, .6), inset 0 1px 0 rgba(255, 232, 180, .30) !important; } /* 选中项左侧的琥珀竖条 */ html[data-skin='liquid'] .vtab.nav-active::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 2px; background: linear-gradient(180deg, #fbbf24, #f59e0b); box-shadow: 0 0 10px rgba(245, 158, 11, .9); } /* --------------------------------------------------------------------------- 4. 会话行：选中 = 琥珀描边整行；头像 = 青色渐变圆角方 --------------------------------------------------------------------------- */ html[data-skin='liquid'] #tabContent .contact[class*='ring-indigo-300'] { background: linear-gradient(96deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .035)) !important; box-shadow: 0 0 0 1.5px rgba(251, 191, 36, .62), 0 0 26px -9px rgba(245, 158, 11, .75) !important; } html[data-skin='liquid'] #tabContent .contact[class*='ring-indigo-300'] .n, html[data-skin='liquid'] #tabContent .contact[class*='ring-indigo-300'] .who { color: #fde9b8 !important; } html[data-skin='liquid'] .contact .avatar { border-radius: 14px !important; background: linear-gradient(155deg, #bdf3ff 0%, #7dd3fc 45%, #38bdf8 100%) !important; color: #07364f !important; font-weight: 700; box-shadow: 0 0 20px -7px rgba(56, 189, 248, .9), inset 0 1px 0 rgba(255, 255, 255, .65) !important; } /* 顶栏 / 消息旁的头像按参考图是正圆 */ html[data-skin='liquid'] .sidebar > .flex > .avatar, html[data-skin='liquid'] .msgwrap > .avatar { border-radius: 999px !important; box-shadow: 0 0 0 1.5px rgba(226, 240, 255, .55), 0 0 14px -6px rgba(120, 200, 255, .7) !important; } html[data-skin='liquid'] .msgwrap > .avatar { border-radius: 999px !important; box-shadow: 0 0 0 1.5px rgba(226, 240, 255, .5), 0 0 12px -6px rgba(120, 200, 255, .6) !important; } /* 搜索框：参考图是中性灰玻璃，圆角大 */ html[data-skin='liquid'] .search { border-radius: 18px !important; background: rgba(120, 132, 160, .14) !important; border: 1px solid rgba(255, 255, 255, .055) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important; } /* --------------------------------------------------------------------------- 5. 气泡：青绿 / 蓝紫 / 紫罗兰 三色（实测值） 按内容类型分色：附件→青绿、链接→蓝紫、其余交替 --------------------------------------------------------------------------- */ html[data-skin='liquid'] .bubble { border-radius: 18px 18px 18px 18px !important; border: 1.4px solid transparent; padding: 10px 14px; position: relative; } html[data-skin='liquid'] .bubble.mine { color: #eafcff; background: linear-gradient(158deg, rgba(23, 150, 160, .62), rgba(8, 84, 96, .52)) !important; border-color: rgba(94, 234, 212, .52) !important; border-bottom-right-radius: 7px !important; box-shadow: 0 0 30px -8px rgba(45, 212, 191, .55), inset 0 1px 0 rgba(200, 255, 250, .28), inset 0 -1px 0 rgba(0, 40, 50, .35) !important; } html[data-skin='liquid'] .bubble.theirs { color: #e2ecf7; background: linear-gradient(158deg, rgba(60, 78, 116, .55), rgba(26, 36, 58, .5)) !important; border-color: rgba(148, 178, 220, .34) !important; border-bottom-left-radius: 7px !important; box-shadow: 0 0 26px -10px rgba(90, 130, 190, .5), inset 0 1px 0 rgba(210, 230, 255, .22) !important; } /* 附件卡片：青绿（参考图那个 dockers compose.tar） */ html[data-skin='liquid'] .bubble.mine.has-file { background: linear-gradient(158deg, rgba(23, 150, 160, .66), rgba(8, 84, 96, .56)) !important; border-color: rgba(125, 240, 225, .6) !important; } /* 带链接的：蓝紫 */ html[data-skin='liquid'] .bubble.mine:has(a[href^='http']) { background: linear-gradient(158deg, rgba(48, 96, 178, .68), rgba(26, 58, 128, .58)) !important; border-color: rgba(120, 170, 250, .56) !important; box-shadow: 0 0 28px -9px rgba(59, 130, 246, .6), inset 0 1px 0 rgba(190, 215, 255, .26) !important; } /* 纯文本隔条换紫罗兰，形成参考图那种青/紫相间的观感 */ html[data-skin='liquid'] .message-in:nth-of-type(3n) .bubble.mine:not(.has-file):not(:has(a[href^='http'])) { background: linear-gradient(158deg, rgba(124, 88, 210, .66), rgba(78, 52, 160, .56)) !important; border-color: rgba(178, 150, 250, .55) !important; box-shadow: 0 0 28px -9px rgba(139, 92, 246, .58), inset 0 1px 0 rgba(220, 205, 255, .26) !important; } /* 气泡内那行「我 · 08:26」 */ html[data-skin='liquid'] .bubble > div:first-child { color: rgba(230, 244, 255, .62) !important; letter-spacing: .01em; } html[data-skin='liquid'] .bubble a { color: #bfe9ff !important; } /* --------------------------------------------------------------------------- 6. 输入区：参考图是深玻璃长条 + 琥珀圆角方发送键 --------------------------------------------------------------------------- */ html[data-skin='liquid'] main footer { border-top: none !important; } html[data-skin='liquid'] main footer > table { background: rgba(8, 15, 30, .52) !important; border: 1px solid rgba(255, 255, 255, .085) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 46px -26px rgba(0, 0, 0, .9) !important; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); } html[data-skin='liquid'] main footer > table textarea, html[data-skin='liquid'] main footer > table input { color: #e8f2ff !important; caret-color: #fbbf24; } html[data-skin='liquid'] main footer > table textarea::placeholder, html[data-skin='liquid'] main footer > table input::placeholder { color: rgba(214, 228, 245, .42) !important; } /* 发送键：琥珀渐变 + 圆角方 + 光晕 */ html[data-skin='liquid'] main footer > table button[data-act='send'] { background: linear-gradient(160deg, #fde68a 0%, #fbbf24 42%, #f59e0b 100%) !important; border-radius: 15px !important; color: #1b1206 !important; font-weight: 700 !important; box-shadow: 0 0 26px -4px rgba(245, 158, 11, .85), 0 4px 14px -6px rgba(180, 83, 9, .8), inset 0 1px 0 rgba(255, 250, 220, .7) !important; } html[data-skin='liquid'] main footer > table button[data-act='togglePlusMenu'] { color: rgba(214, 228, 245, .55) !important; } html[data-skin='liquid'] main footer > table button[data-act='togglePlusMenu']:hover { color: #fbbf24 !important; } /* --------------------------------------------------------------------------- 7. 顶栏：圆形头像 + 冷光分隔 --------------------------------------------------------------------------- */ html[data-skin='liquid'] #head .glass-soft { background: rgba(255, 255, 255, .045) !important; border-color: rgba(255, 255, 255, .06) !important; } html[data-skin='liquid'] #head { border-bottom: 1px solid rgba(120, 180, 240, .10) !important; } /* --------------------------------------------------------------------------- 8. 浅色主题：同样结构，换成白色玻璃（参考图只给了深色，浅色保持同一语言） --------------------------------------------------------------------------- */ html[data-skin='liquid'][data-theme='light'] .cx-liquid-bg { filter: brightness(2.35) saturate(.55) contrast(.92); opacity: .5; } html[data-skin='liquid'][data-theme='light'] .glass, html[data-skin='liquid'][data-theme='light'] .sidebar, html[data-skin='liquid'][data-theme='light'] main { background-color: rgba(255, 255, 255, .42) !important; border-color: rgba(255, 255, 255, .5) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .35), 0 22px 60px -30px rgba(60, 80, 120, .5), 0 0 50px -20px rgba(120, 170, 240, .3) !important; } html[data-skin='liquid'][data-theme='light'] .vtab.nav-active { background: linear-gradient(158deg, rgba(245, 158, 11, .22), rgba(217, 119, 6, .10)) !important; border-color: rgba(245, 158, 11, .65) !important; color: #92400e !important; } html[data-skin='liquid'][data-theme='light'] .bubble.mine { color: #04303a; background: linear-gradient(158deg, rgba(120, 226, 220, .62), rgba(80, 190, 200, .5)) !important; border-color: rgba(45, 190, 180, .5) !important; } html[data-skin='liquid'][data-theme='light'] main footer > table { background: rgba(255, 255, 255, .58) !important; border-color: rgba(255, 255, 255, .8) !important; } /* --------------------------------------------------------------------------- 9. 移动端：面板圆角收小、间隙减小、模糊降档 --------------------------------------------------------------------------- */ @media (max-width: 900px) { html[data-skin='liquid'] .glass, html[data-skin='liquid'] .sidebar, html[data-skin='liquid'] main { border-radius: 26px !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important; } html[data-skin='liquid'] .vtab { min-height: 52px; border-radius: 14px !important; } html[data-skin='liquid'] .bubble { border-radius: 15px !important; } } /* ============================================================================= [2026-11-01 v94] 对齐修正第二轮 ----------------------------------------------------------------------------- 第一轮截图对比后发现 5 处偏差，逐条修： 1. 气泡分色没生效 —— v90 的 `[data-theme='dark'] .bubble.mine` 权重 (0,3,1) 高于新写的 (0,2,1)，得同权重覆盖。实测参考图三色： 青绿 rgb(16,122,129) / 蓝紫 / 紫罗兰 rgb(81,58,171) 2. 面板偏暗 —— 参考图能清楚看到背后星云，填充要更透、暗角要更轻 3. 彩色描边太弱 —— 参考图边框是"白高光 + 彩色过渡"，峰值接近白 4. 顶栏头像是圆角方 —— 参考图是正圆 + 白色细环 5. 顶栏缺一条彩色分隔光带（参考图顶部那条青→橙→粉） ============================================================================= */ /* ---------- 1. 面板更透、暗角更轻 ---------- */ html[data-skin='liquid'][data-theme='dark'] .glass, html[data-skin='liquid'][data-theme='dark'] .sidebar, html[data-skin='liquid'][data-theme='dark'] main { background-color: rgba(17, 27, 48, 0.285) !important; background-image: linear-gradient(158deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 44%) !important; } html[data-skin='liquid'] body::after { background: radial-gradient(132% 114% at 50% 44%, transparent 50%, rgba(0, 0, 0, .40) 100%) !important; } /* 背景图稍微提亮，玻璃才有"可折射的东西" */ html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg { filter: brightness(1.12) saturate(1.05); } /* ---------- 2. 描边：白高光 + 彩色过渡 ---------- */ html[data-skin='liquid'] main::after, html[data-skin='liquid'] aside.sidebar::after { background: conic-gradient(from 0deg at 50% 50%, #cfe2f5 0deg, #64b8cc 30deg, #7f9fd8 68deg, #9d78c8 100deg, #cf9ad8 132deg, #e8c4ee 160deg, #a9d6e4 186deg, #62c6cf 214deg, #3f8fa2 248deg, #2a4a5e 282deg, #4a7fa0 318deg, #cfe2f5 360deg) !important; opacity: .92 !important; filter: saturate(1.25) brightness(1.06); } /* 面板外侧再加一层柔光，玻璃"悬"起来 */ html[data-skin='liquid'][data-theme='dark'] main, html[data-skin='liquid'][data-theme='dark'] aside.sidebar { box-shadow: inset 0 1px 0 rgba(224, 242, 255, .40), inset 0 -1px 0 rgba(255, 196, 140, .22), inset 1px 0 0 rgba(150, 205, 255, .10), inset -1px 0 0 rgba(210, 160, 255, .14), 0 28px 88px -34px rgba(0, 0, 0, .95), 0 0 86px -22px rgba(72, 150, 220, .34) !important; } /* ---------- 3. 气泡分色（同权重覆盖 v90） ---------- */ html[data-skin='liquid'][data-theme='dark'] .bubble.mine { color: #eafcff !important; background: linear-gradient(158deg, rgba(24, 154, 164, .60), rgba(8, 86, 98, .50)) !important; border: 1.4px solid rgba(102, 236, 224, .50) !important; border-radius: 18px 18px 7px 18px !important; box-shadow: 0 0 32px -9px rgba(45, 212, 191, .58), inset 0 1px 0 rgba(205, 255, 250, .26), inset 0 -1px 0 rgba(0, 40, 50, .30) !important; } html[data-skin='liquid'][data-theme='dark'] .bubble.mine.has-file { background: linear-gradient(158deg, rgba(26, 162, 172, .66), rgba(8, 92, 104, .56)) !important; border-color: rgba(125, 244, 230, .58) !important; } html[data-skin='liquid'][data-theme='dark'] .bubble.mine:has(a[href^='http']) { background: linear-gradient(158deg, rgba(50, 100, 184, .66), rgba(26, 58, 130, .56)) !important; border-color: rgba(126, 176, 252, .56) !important; box-shadow: 0 0 30px -10px rgba(59, 130, 246, .62), inset 0 1px 0 rgba(196, 220, 255, .24) !important; } html[data-skin='liquid'][data-theme='dark'] .message-in:nth-of-type(3n) .bubble.mine:not(.has-file):not(:has(a[href^='http'])) { background: linear-gradient(158deg, rgba(126, 90, 214, .64), rgba(80, 54, 164, .54)) !important; border-color: rgba(182, 156, 252, .54) !important; box-shadow: 0 0 30px -10px rgba(139, 92, 246, .60), inset 0 1px 0 rgba(222, 208, 255, .24) !important; } html[data-skin='liquid'][data-theme='dark'] .bubble.theirs { color: #e4eefa !important; background: linear-gradient(158deg, rgba(64, 84, 124, .52), rgba(28, 38, 60, .48)) !important; border: 1.4px solid rgba(152, 182, 224, .32) !important; border-radius: 18px 18px 18px 7px !important; box-shadow: 0 0 26px -12px rgba(90, 130, 190, .46), inset 0 1px 0 rgba(214, 234, 255, .20) !important; } /* 气泡内「我 · 08:26」 */ html[data-skin='liquid'][data-theme='dark'] .bubble .text-\[11px\] { color: rgba(226, 242, 255, .66) !important; } /* ---------- 4. 顶栏头像改正圆 + 白色细环 ---------- */ html[data-skin='liquid'] aside.sidebar > .flex:first-child .avatar { border-radius: 999px !important; box-shadow: 0 0 0 2px rgba(232, 244, 255, .55), 0 0 20px -8px rgba(140, 205, 255, .75) !important; } /* 会话列表头像保持青色圆角方（参考图如此），但要更亮一点 */ html[data-skin='liquid'][data-theme='dark'] .contact .avatar { background: linear-gradient(155deg, #d3f6ff 0%, #8ddcfb 46%, #46c3f7 100%) !important; color: #073247 !important; box-shadow: 0 0 22px -8px rgba(80, 200, 250, .9), inset 0 1px 0 rgba(255, 255, 255, .7) !important; } /* ---------- 5. 顶栏彩色分隔光带 + 顶栏底缘 ---------- */ html[data-skin='liquid'] main #head { border-bottom: none !important; position: relative; } html[data-skin='liquid'] main #head::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(110, 210, 230, .42) 14%, rgba(255, 190, 120, .40) 46%, rgba(230, 140, 210, .42) 78%, transparent); pointer-events: none; } /* ---------- 6. 会话行：未选中更透，选中更亮 ---------- */ html[data-skin='liquid'][data-theme='dark'] #tabContent .contact:not([class*='ring-indigo-300']) { background: transparent !important; } html[data-skin='liquid'][data-theme='dark'] #tabContent .contact[class*='ring-indigo-300'] { background: linear-gradient(96deg, rgba(245, 158, 11, .17), rgba(245, 158, 11, .03)) !important; box-shadow: 0 0 0 1.5px rgba(251, 191, 36, .68), 0 0 28px -9px rgba(245, 158, 11, .8) !important; } /* ---------- 7. 日期分隔：参考图是极细的居中灰字 ---------- */ html[data-skin='liquid'][data-theme='dark'] #messages .cx-date { color: rgba(206, 224, 245, .30) !important; background: none !important; font-size: 11px; letter-spacing: .08em; } /* ---------- 8. 输入区再压深一点，和参考图的"深玻璃条"一致 ---------- */ html[data-skin='liquid'][data-theme='dark'] main footer > table { background: rgba(9, 16, 32, .60) !important; border-color: rgba(255, 255, 255, .075) !important; border-radius: 24px !important; } /* ============================================================================= [2026-11-01 v95] 对齐修正第三轮（局部放大对比后） ----------------------------------------------------------------------------- 放大 3-5 倍逐块比对，剩下这些差距： · 描边宽度 1.2px 在 1440 下只剩 1 个抗锯齿像素 → 加粗到 1.6px 并提饱和 · 面板内部比参考图暗一档（参考图能看到星云颜色）→ 提填充亮度、降暗角 · 导航图标 17px 偏小偏灰 → 19px + 提亮；项高 60 → 56 收紧 · 气泡外发光弱一半 → 扩大 shadow 半径 · 消息旁头像环偏紫 → 明确覆盖成白色细环 · 输入条偏高 → 压缩 footer 内边距 ============================================================================= */ /* ---------- 1. 描边：加粗 + 提饱和 ---------- */ html[data-skin='liquid'] main::after, html[data-skin='liquid'] aside.sidebar::after { padding: 1.6px !important; background: conic-gradient(from 0deg at 50% 50%, #eef7ff 0deg, #7ed6ea 24deg, #93b4f2 58deg, #b78fe2 94deg, #e8abe4 126deg, #f8d8f4 154deg, #cbeaf6 182deg, #6cd8e4 208deg, #48a8bc 242deg, #35596f 280deg, #5e97bc 318deg, #eef7ff 360deg) !important; opacity: 1 !important; } /* ---------- 2. 面板更通透 ---------- */ html[data-skin='liquid'][data-theme='dark'] .glass, html[data-skin='liquid'][data-theme='dark'] .sidebar, html[data-skin='liquid'][data-theme='dark'] main { background-color: rgba(24, 38, 64, 0.255) !important; } html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg { filter: brightness(1.22) saturate(1.08) !important; } html[data-skin='liquid'] body::after { background: radial-gradient(134% 116% at 50% 44%, transparent 54%, rgba(0, 0, 0, .34) 100%) !important; } /* ---------- 3. 导航：图标更大更亮、间距收紧 ---------- */ html[data-skin='liquid'] .vtab { min-height: 56px !important; gap: 4px !important; } html[data-skin='liquid'] .vtab-ico { color: rgba(208, 222, 240, .80) !important; height: 20px !important; } html[data-skin='liquid'] .vtab-ico svg { width: 19px !important; height: 19px !important; stroke-width: 1.6; } html[data-skin='liquid'] .vtab:hover .vtab-ico { color: rgba(236, 244, 255, .95) !important; } html[data-skin='liquid'] .vtab.nav-active .vtab-ico { color: #ffe6b0 !important; filter: drop-shadow(0 0 8px rgba(245, 158, 11, .75)); } html[data-skin='liquid'] .vtab:not(.nav-active) { color: rgba(214, 226, 242, .50) !important; } /* ---------- 4. 气泡：外发光放大 ---------- */ html[data-skin='liquid'][data-theme='dark'] .bubble.mine { box-shadow: 0 0 44px -6px rgba(45, 212, 191, .52), 0 0 88px -22px rgba(45, 212, 191, .34), inset 0 1px 0 rgba(205, 255, 250, .26), inset 0 -1px 0 rgba(0, 40, 50, .30) !important; } html[data-skin='liquid'][data-theme='dark'] .bubble.mine:has(a[href^='http']) { box-shadow: 0 0 44px -8px rgba(59, 130, 246, .55), 0 0 88px -24px rgba(59, 130, 246, .32), inset 0 1px 0 rgba(196, 220, 255, .24) !important; } html[data-skin='liquid'][data-theme='dark'] .message-in:nth-of-type(3n) .bubble.mine:not(.has-file):not(:has(a[href^='http'])) { box-shadow: 0 0 44px -8px rgba(139, 92, 246, .52), 0 0 88px -24px rgba(139, 92, 246, .30), inset 0 1px 0 rgba(222, 208, 255, .24) !important; } /* ---------- 5. 消息旁头像：白色细环（原来偏紫） ---------- */ html[data-skin='liquid'] .message-in .avatar { background: linear-gradient(150deg, #3a4a63, #1d2739) !important; border-radius: 999px !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 0 18px -8px rgba(150, 200, 255, .6) !important; } html[data-skin='liquid'] .message-in .avatar img { border-radius: 999px !important; object-fit: cover !important; } /* ---------- 6. 输入条压扁一点 ---------- */ html[data-skin='liquid'] main footer { padding-top: 6px !important; padding-bottom: 12px !important; } html[data-skin='liquid'] main footer > table { border-spacing: 10px !important; padding: 8px !important; } html[data-skin='liquid'] main footer > table > tbody > tr > td:last-child button[data-act='send'] { width: 44px !important; height: 44px !important; border-radius: 14px !important; } html[data-skin='liquid'] main footer > table > tbody > tr > td:first-child button[data-act='togglePlusMenu'] { width: 44px !important; height: 44px !important; font-size: 20px !important; } /* ---------- 7. 面板外发光再强一点（"浮起来"） ---------- */ html[data-skin='liquid'][data-theme='dark'] main, html[data-skin='liquid'][data-theme='dark'] aside.sidebar { box-shadow: inset 0 1px 0 rgba(224, 242, 255, .42), inset 0 -1px 0 rgba(255, 196, 140, .24), inset 1px 0 0 rgba(150, 205, 255, .10), inset -1px 0 0 rgba(210, 160, 255, .14), 0 30px 96px -36px rgba(0, 0, 0, .96), 0 0 110px -26px rgba(78, 158, 228, .40) !important; } /* ============================================================================= [2026-11-01 v96] 对齐修正第四轮：边色按实测重排 + 玻璃底部辉光 ----------------------------------------------------------------------------- 参考图四条边的真实色相（7x7 均值实测）： 左上 #245f6f 青 · 顶部中 #262128 暖灰 · 右上 #12314a 蓝 右 #342a6f 紫 · 右下 #9681a3 紫粉(亮) · 左下 #3b8291 青绿(亮) · 左 #061220 极暗 → 左上角有一道白色高光，底部整体最亮，左边最暗。 ============================================================================= */ /* ---------- 1. 重排 conic 色标（角度按"上=0deg 顺时针"） ---------- */ html[data-skin='liquid'] main::after, html[data-skin='liquid'] aside.sidebar::after { background: conic-gradient(from 0deg at 50% 50%, /* 顶部中段：暖灰（被两侧光源夹在中间，最暗） */ #3a3439 0deg, /* 右上：蓝 */ #2f5074 22deg, #3a5c8c 48deg, /* 右：紫 */ #4a3a78 84deg, #6a4a92 112deg, /* 右下：紫粉最亮 */ #b892c4 148deg, #d9b4dc 168deg, /* 底中：过渡 */ #9fc8dc 186deg, /* 左下：青绿最亮 */ #6cc8d4 206deg, #48a2b4 232deg, /* 左：极暗 */ #1d3a4a 268deg, #26505f 292deg, /* 左上：白高光 */ #eaf6ff 316deg, #8fcadd 334deg, #3a3439 360deg) !important; opacity: 1 !important; } /* ---------- 2. 玻璃底部辉光 + 顶部冷光（参考图的"厚度感"） ---------- */ html[data-skin='liquid'][data-theme='dark'] main, html[data-skin='liquid'][data-theme='dark'] aside.sidebar { box-shadow: inset 0 1px 0 rgba(228, 244, 255, .46), inset 0 -1px 0 rgba(255, 200, 150, .26), inset 1px 0 0 rgba(150, 205, 255, .10), inset -1px 0 0 rgba(210, 160, 255, .16), /* 顶部内侧冷光 */ inset 0 46px 64px -52px rgba(198, 230, 255, .55), /* 底部内侧紫粉辉光 */ inset 0 -52px 72px -54px rgba(176, 128, 226, .55), /* 接触阴影 + 环境光晕 */ 0 30px 96px -36px rgba(0, 0, 0, .96), 0 0 110px -26px rgba(78, 158, 228, .40) !important; } /* ---------- 3. 会话行：给未选中行一点呼吸（参考图行距更松） ---------- */ html[data-skin='liquid'][data-theme='dark'] #tabContent .contact { min-height: 56px; } html[data-skin='liquid'][data-theme='dark'] #tabContent .contact:not([class*='ring-indigo-300']):hover { background: rgba(255, 255, 255, .05) !important; } /* ---------- 4. 输入条：随 rows=1 收窄后的比例微调 ---------- */ html[data-skin='liquid'][data-theme='dark'] main footer > table { border-radius: 26px !important; border-spacing: 9px !important; padding: 7px !important; } html[data-skin='liquid'] #input { min-height: 44px !important; max-height: 168px !important; } /* ---------- 5. 顶栏：参考图顶栏更矮、更透 ---------- */ html[data-skin='liquid'][data-theme='dark'] main #head { background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent) !important; } /* ---------- 6. 发送键：参考图是"橙黄→深橙"竖向渐变 + 强光晕 ---------- */ html[data-skin='liquid'][data-theme='dark'] main footer > table button[data-act='send'] { background: linear-gradient(170deg, #ffe08a 0%, #fbbf24 38%, #f0930a 100%) !important; box-shadow: 0 0 30px -3px rgba(245, 158, 11, .95), 0 0 60px -18px rgba(245, 158, 11, .7), 0 5px 16px -6px rgba(160, 72, 4, .8), inset 0 1px 0 rgba(255, 252, 230, .8) !important; } /* ---------- 7. 背景：把球体稍微右移，避开左侧面板（参考图球体偏右） ---------- */ html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg { background-position: 56% 46% !important; background-size: 108% auto !important; } /* ============================================================================= [2026-11-01 v97] 辉光收敛：上一版底部紫光过头，把左面板下部的导航文字糊掉了 ----------------------------------------------------------------------------- 参考图的底部辉光是"贴着边框的一圈"，不是大面积泛光；侧栏更淡（面积小、内容密）。 ============================================================================= */ /* 主面板：辉光收窄、透明度降低 */ html[data-skin='liquid'][data-theme='dark'] main { box-shadow: inset 0 1px 0 rgba(228, 244, 255, .46), inset 0 -1px 0 rgba(255, 200, 150, .24), inset 1px 0 0 rgba(150, 205, 255, .10), inset -1px 0 0 rgba(210, 160, 255, .16), inset 0 34px 52px -48px rgba(198, 230, 255, .38), inset 0 -34px 56px -50px rgba(176, 128, 226, .34), 0 30px 96px -36px rgba(0, 0, 0, .96), 0 0 110px -26px rgba(78, 158, 228, .40) !important; } /* 侧栏：几乎不加辉光，保证列表文字干净 */ html[data-skin='liquid'][data-theme='dark'] aside.sidebar { box-shadow: inset 0 1px 0 rgba(228, 244, 255, .46), inset 0 -1px 0 rgba(255, 200, 150, .22), inset 1px 0 0 rgba(150, 205, 255, .10), inset -1px 0 0 rgba(210, 160, 255, .16), inset 0 26px 40px -40px rgba(198, 230, 255, .26), inset 0 -26px 44px -42px rgba(176, 128, 226, .16), 0 30px 96px -36px rgba(0, 0, 0, .96), 0 0 100px -30px rgba(78, 158, 228, .34) !important; } /* 侧栏底部导航文字提亮一档（辉光收敛后仍要保证可读） */ html[data-skin='liquid'][data-theme='dark'] .vtab:not(.nav-active) { color: rgba(219, 231, 246, .62) !important; } html[data-skin='liquid'][data-theme='dark'] .vtab-ico { color: rgba(214, 228, 246, .86) !important; } /* ============================================================================= [2026-11-01 v98] 背景两侧压暗 + 气泡三色循环 ----------------------------------------------------------------------------- 两个问题： 1. 生成的背景图左右两侧星云很宽，正好压在面板下面 —— 透过玻璃后 侧栏下半部的「搜索 / 设置」被冲成灰白，读不出来。参考图两侧是黑的、 只有中间球体亮，所以给背景加一层"两侧压暗、中间透亮"的遮罩。 2. 链接气泡没变蓝 —— 消息里的 URL 不一定渲染成 ，:has() 匹配不到。 改成按消息序号三色循环（青绿 / 蓝紫 / 紫罗兰），稳定且和参考图的多彩观感一致。 ============================================================================= */ /* 背景两侧压暗，中间（球体）保留亮度 */ html[data-skin='liquid'] .cx-liquid-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2, 4, 9, .80) 0%, rgba(2, 4, 9, .60) 12%, rgba(2, 4, 9, .30) 26%, rgba(2, 4, 9, 0) 40%, rgba(2, 4, 9, 0) 60%, rgba(2, 4, 9, .30) 74%, rgba(2, 4, 9, .60) 88%, rgba(2, 4, 9, .80) 100%); } /* 气泡三色循环：3n+1 青绿（默认） / 3n+2 蓝紫 / 3n 紫罗兰 */ html[data-skin='liquid'][data-theme='dark'] .message-in:nth-of-type(3n+2) .bubble.mine:not(.has-file) { background: linear-gradient(158deg, rgba(50, 100, 184, .66), rgba(26, 58, 130, .56)) !important; border-color: rgba(126, 176, 252, .56) !important; box-shadow: 0 0 44px -8px rgba(59, 130, 246, .55), 0 0 88px -24px rgba(59, 130, 246, .32), inset 0 1px 0 rgba(196, 220, 255, .24) !important; } /* 侧栏文字可读性兜底：背景压暗后就够了，再把未选中项提亮半档 */ html[data-skin='liquid'][data-theme='dark'] .vtab:not(.nav-active) { color: rgba(224, 235, 248, .70) !important; } /* ============================================================================= [2026-11-01 v99] 边缘光锐化 + 列表字号对齐 ----------------------------------------------------------------------------- 参考图的边框"细而锐、带一圈近距辉光"；我的偏柔。加近距光晕 + 提对比。 参考图会话名 22px@1920 ≈ 16.5px@1440，我的是 13.5 → 提到 15。 ============================================================================= */ /* 近距辉光：让边缘"亮一下"，不是大范围泛光 */ html[data-skin='liquid'][data-theme='dark'] main, html[data-skin='liquid'][data-theme='dark'] aside.sidebar { box-shadow: inset 0 1px 0 rgba(230, 246, 255, .50), inset 0 -1px 0 rgba(255, 200, 150, .26), inset 1px 0 0 rgba(150, 205, 255, .12), inset -1px 0 0 rgba(210, 160, 255, .18), inset 0 34px 52px -48px rgba(198, 230, 255, .32), inset 0 -34px 56px -50px rgba(176, 128, 226, .30), 0 0 0 1px rgba(180, 215, 255, .10), 0 0 22px -6px rgba(126, 192, 244, .30), 0 30px 96px -36px rgba(0, 0, 0, .96), 0 0 110px -26px rgba(78, 158, 228, .42) !important; } /* 边框再锐一点（mask 环加对比） */ html[data-skin='liquid'] main::after, html[data-skin='liquid'] aside.sidebar::after { filter: saturate(1.35) brightness(1.12) contrast(1.08) !important; } /* 会话列表：名字与预览文字放大一档，和参考图的密度接近 */ html[data-skin='liquid'][data-theme='dark'] #tabContent .contact .n, html[data-skin='liquid'][data-theme='dark'] #tabContent .contact .who .n { font-size: 15px !important; } html[data-skin='liquid'][data-theme='dark'] #tabContent .contact .who + div, html[data-skin='liquid'][data-theme='dark'] #tabContent .contact .preview { font-size: 12px !important; } /* 会话头像按参考图再大一点（44px） */ html[data-skin='liquid'][data-theme='dark'] .contact .avatar { width: 44px !important; height: 44px !important; min-width: 44px !important; border-radius: 15px !important; font-size: 16px !important; } /* 会话行高度跟着放大，行距更松 */ html[data-skin='liquid'][data-theme='dark'] #tabContent .contact { min-height: 62px; padding-top: 8px !important; padding-bottom: 8px !important; } /* ============================================================================= [2026-11-01 v100] 浅色模式修复 ----------------------------------------------------------------------------- 截图发现：浅色下左侧导航「联系人 / 找人 / 朋友圈 …」几乎看不见。 原因：v93 那条 `html[data-skin='liquid'] .vtab { color: rgba(226,232,240,.58) }` **没有限定 data-theme='dark'**，浅色下也生效 → 近白字压在白底上。 这类"只在深色下成立"的颜色必须成对写。 ============================================================================= */ /* 浅色：导航文字改深色 */ html[data-skin='liquid'][data-theme='light'] .vtab { color: rgba(51, 65, 85, .76) !important; } html[data-skin='liquid'][data-theme='light'] .vtab-ico { color: rgba(51, 65, 85, .74) !important; } html[data-skin='liquid'][data-theme='light'] .vtab:hover { color: rgba(15, 23, 42, .92) !important; background: rgba(255, 255, 255, .55) !important; } html[data-skin='liquid'][data-theme='light'] .vtab.nav-active { color: #8a4708 !important; } html[data-skin='liquid'][data-theme='light'] .vtab.nav-active .vtab-ico { color: #b45309 !important; filter: none; } /* 浅色：面板更"实"一点，背景不要过曝 */ html[data-skin='liquid'][data-theme='light'] .glass, html[data-skin='liquid'][data-theme='light'] .sidebar, html[data-skin='liquid'][data-theme='light'] main { background-color: rgba(255, 255, 255, .60) !important; background-image: linear-gradient(158deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18) 48%) !important; border-color: rgba(255, 255, 255, .72) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .45), 0 22px 60px -30px rgba(58, 78, 118, .45), 0 0 60px -22px rgba(120, 170, 240, .35) !important; } html[data-skin='liquid'][data-theme='light'] .cx-liquid-bg { filter: brightness(1.55) saturate(.42) contrast(.92) !important; opacity: .42 !important; } html[data-skin='liquid'][data-theme='light'] .cx-liquid-bg::after { background: linear-gradient(90deg, rgba(240, 245, 255, .55) 0%, rgba(240, 245, 255, .28) 22%, rgba(240, 245, 255, 0) 44%, rgba(240, 245, 255, 0) 56%, rgba(240, 245, 255, .28) 78%, rgba(240, 245, 255, .55) 100%) !important; } html[data-skin='liquid'][data-theme='light'] body::after { background: radial-gradient(132% 114% at 50% 44%, transparent 58%, rgba(180, 198, 224, .30) 100%) !important; } /* 浅色：气泡与文字 */ html[data-skin='liquid'][data-theme='light'] .bubble.mine { color: #03303a !important; } html[data-skin='liquid'][data-theme='light'] .bubble.theirs { color: #1e293b !important; background: linear-gradient(158deg, rgba(255, 255, 255, .82), rgba(240, 245, 252, .78)) !important; border-color: rgba(148, 178, 220, .5) !important; box-shadow: 0 10px 30px -18px rgba(60, 90, 140, .4), inset 0 1px 0 rgba(255, 255, 255, .9) !important; } html[data-skin='liquid'][data-theme='light'] .bubble > div:first-child { color: rgba(51, 65, 85, .60) !important; } html[data-skin='liquid'][data-theme='light'] .bubble a { color: #1d4ed8 !important; } /* 浅色：输入条 */ html[data-skin='liquid'][data-theme='light'] main footer > table { background: rgba(255, 255, 255, .72) !important; border-color: rgba(180, 200, 228, .45) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 34px -22px rgba(60, 90, 140, .45) !important; } html[data-skin='liquid'][data-theme='light'] #input { color: #1e293b !important; } html[data-skin='liquid'][data-theme='light'] #input::placeholder { color: rgba(71, 85, 105, .48) !important; } /* 浅色：会话行选中态 */ html[data-skin='liquid'][data-theme='light'] #tabContent .contact[class*='ring-indigo-300'] { background: linear-gradient(96deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .04)) !important; box-shadow: 0 0 0 1.5px rgba(245, 158, 11, .55), 0 8px 22px -14px rgba(245, 158, 11, .7) !important; } html[data-skin='liquid'][data-theme='light'] #tabContent .contact[class*='ring-indigo-300'] .n { color: #7c3d06 !important; } /* ============================================================================= [2026-11-01 v101] 浅色收尾：背景别漂白、列表副文字加深 ============================================================================= */ html[data-skin='liquid'][data-theme='light'] .cx-liquid-bg { filter: brightness(1.18) saturate(.52) contrast(1.02) !important; opacity: .55 !important; } html[data-skin='liquid'][data-theme='light'] .glass, html[data-skin='liquid'][data-theme='light'] .sidebar, html[data-skin='liquid'][data-theme='light'] main { background-color: rgba(255, 255, 255, .56) !important; } /* 会话列表的预览文字、时间：浅色下要压深，否则白底上读不出 */ html[data-skin='liquid'][data-theme='light'] #tabContent .contact .text-slate-400, html[data-skin='liquid'][data-theme='light'] #tabContent .contact .text-slate-500, html[data-skin='liquid'][data-theme='light'] #tabContent .contact [class*='text-slate-4'], html[data-skin='liquid'][data-theme='light'] #tabContent .contact [class*='text-slate-5'] { color: rgba(71, 85, 105, .78) !important; } html[data-skin='liquid'][data-theme='light'] #tabContent .contact .n { color: #1e293b !important; } /* 气泡内时间行 */ html[data-skin='liquid'][data-theme='light'] .bubble > div:first-child { color: rgba(30, 41, 59, .62) !important; } /* 日期分隔 */ html[data-skin='liquid'][data-theme='light'] #messages .cx-date { color: rgba(71, 85, 105, .45) !important; } /* [2026-11-01 v102] 日期分隔被上一版调过头（.30 几乎不可见），回到可读的中灰 */ html[data-skin='liquid'][data-theme='dark'] #messages .cx-date { color: rgba(206, 224, 245, .52) !important; } /* 会话区的「会话 / 好友 / 群聊」小标题与按钮，参考图是清晰的浅灰 */ html[data-skin='liquid'][data-theme='dark'] #tabContent .text-slate-400, html[data-skin='liquid'][data-theme='dark'] #tabContent .text-slate-500 { color: rgba(188, 204, 224, .66) !important; } /* 「+ 好友 / + 群聊」胶囊按钮 */ html[data-skin='liquid'][data-theme='dark'] #tabContent button[class*='rounded-full'] { color: rgba(214, 228, 246, .82) !important; background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .10) !important; } /* ============================================================================= [2026-11-01 v103] 边缘重做：从"一条细线"改成"有厚度的发光玻璃边" ----------------------------------------------------------------------------- 用户放大对比后指出：例图的圆角是「白高光 + 彩色渐变 + 外侧多层辉光 + 内侧暗线」， 我的只有一条 1.6px 的线，四个角几乎是空的。 例图的边缘其实是 5 层叠加（从外到内）： ① 远距柔光 60-100px，很淡，青/紫 ② 近距辉光 6-20px，中等强度 ③ 边框本体 2-2.5px，白到彩色的连续渐变 ④ 内侧暗线 1px 深色 —— 这一层是"厚度"的关键，没有它看起来就是贴纸 ⑤ 内侧反射 1px 亮线 + 四角聚光 另：背景图换了（150→199KB、质量 90、1536×845），并且不再放大 8%。 ============================================================================= */ /* ---------- 1. 背景：cover 铺满，不再放大 ---------- */ html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg { background-image: url('/assets/bg-nebula.jpg?v=2') !important; background-size: cover !important; background-position: 50% 44% !important; background-repeat: no-repeat !important; } /* ---------- 2. 五层边缘：外发光 + 厚度 ---------- */ html[data-skin='liquid'][data-theme='dark'] main, html[data-skin='liquid'][data-theme='dark'] aside.sidebar { box-shadow: /* ⑤ 内侧顶部亮边 / 底部暖边 */ inset 0 1.5px 0 rgba(240, 250, 255, .62), inset 0 -1px 0 rgba(255, 208, 165, .34), inset 1.5px 0 0 rgba(165, 215, 255, .16), inset -1.5px 0 0 rgba(220, 175, 255, .22), /* ④ 内侧暗线（厚度感的关键） */ inset 0 0 0 2.5px rgba(4, 8, 16, .30), /* ⑤ 内侧顶/底辉光 */ inset 0 40px 60px -52px rgba(204, 236, 255, .40), inset 0 -42px 64px -54px rgba(182, 134, 232, .36), /* ③ 紧贴边框的一圈亮线 */ 0 0 0 1px rgba(200, 228, 255, .30), /* ② 近距辉光 */ 0 0 7px 0 rgba(154, 208, 255, .42), 0 0 20px 2px rgba(130, 190, 248, .34), /* ① 中/远距柔光 */ 0 0 48px 6px rgba(106, 156, 228, .22), 0 0 96px 14px rgba(88, 136, 214, .14), /* 接触阴影 */ 0 30px 96px -36px rgba(0, 0, 0, .96) !important; } /* ---------- 3. 边框本体加粗到 2.2px，四个角最亮 ---------- */ html[data-skin='liquid'] main::after, html[data-skin='liquid'] aside.sidebar::after { padding: 2.2px !important; background: conic-gradient(from 0deg at 50% 50%, /* 顶中：青 */ #56b6c8 0deg, #7fc8de 18deg, /* 右上角：浅蓝白（亮） */ #b8e0ff 42deg, #9fc4e8 62deg, /* 右中：紫 */ #6a52a0 88deg, #8a6ab8 108deg, /* 右下角：粉紫（最亮） */ #e8bce4 134deg, #f0d0f0 152deg, /* 底中：青蓝 */ #7ab8d0 178deg, #62a8c4 196deg, /* 左下角：青绿（亮） */ #9ce6ee 222deg, #7cd4e0 240deg, /* 左中：暗 */ #22505f 268deg, #1a3a48 288deg, /* 左上角：纯白高光 */ #f4fbff 312deg, #d4ecfa 328deg, #8fd0e0 344deg, #56b6c8 360deg) !important; opacity: 1 !important; filter: saturate(1.4) brightness(1.15) !important; } /* ---------- 4. 四角聚光（例图四个角明显更亮） ---------- */ html[data-skin='liquid'] main::before, html[data-skin='liquid'] aside.sidebar::before { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; background: radial-gradient(130px 130px at 0% 0%, rgba(226, 246, 255, .18), transparent 68%), radial-gradient(110px 110px at 100% 0%, rgba(206, 232, 255, .12), transparent 68%), radial-gradient(120px 120px at 0% 100%, rgba(172, 242, 250, .15), transparent 68%), radial-gradient(140px 140px at 100% 100%, rgba(226, 180, 244, .16), transparent 68%); } /* ---------- 5. 浅色：同样五层逻辑，换成白色系 ---------- */ html[data-skin='liquid'][data-theme='light'] main, html[data-skin='liquid'][data-theme='light'] aside.sidebar { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, .55), inset 0 0 0 2.5px rgba(255, 255, 255, .32), 0 0 0 1px rgba(255, 255, 255, .9), 0 0 10px 1px rgba(196, 220, 250, .55), 0 0 34px 5px rgba(176, 204, 240, .35), 0 22px 60px -30px rgba(58, 78, 118, .42) !important; } html[data-skin='liquid'][data-theme='light'] main::after, html[data-skin='liquid'][data-theme='light'] aside.sidebar::after { padding: 2px !important; background: conic-gradient(from 0deg at 50% 50%, #ffffff 0deg, #dff0ff 40deg, #c9d8f0 88deg, #efd8f4 136deg, #f5f0ff 178deg, #d8f2f8 224deg, #c4d4e8 270deg, #ffffff 312deg, #ffffff 360deg) !important; opacity: .95 !important; } /* ============================================================================= [2026-11-01 v104] 背景换成"高清晰 + 竖高柱"版本，并消除地平线接缝 ----------------------------------------------------------------------------- 用户反馈：柱子"很显大、像裁剪过、清晰度不够"。 换图（265KB / 质量 92 / 1536×845）：柱子高宽比从 0.96 改到 1.14、粒子更密、 玻璃边缘有明确的彩虹折射（粉紫黄）。 另外两条 CSS 修正： ① 底部加渐隐 —— 原图的地面反射在画面 55% 处形成一条水平亮带，看起来像被裁过 ② 提高对比度 —— AI 图普遍偏软，加 contrast 找回"实"的那一半 ============================================================================= */ html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg { background-image: url('/assets/bg-nebula.jpg?v=3') !important; background-size: cover !important; background-position: 50% 38% !important; filter: brightness(1.16) saturate(1.06) contrast(1.08) !important; } /* 底部渐隐：把那条"地平线"化掉，视觉上接成纯黑，不再像裁剪 */ html[data-skin='liquid'] .cx-liquid-bg::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(3, 5, 10, 0) 0%, rgba(3, 5, 10, .35) 42%, rgba(3, 5, 10, .72) 72%, rgba(3, 5, 10, .92) 100%); } /* 两侧压暗层要在渐隐之上 */ html[data-skin='liquid'] .cx-liquid-bg::after { z-index: 2; } /* 浅色下同样吃新图，只是提亮到"淡彩" */ html[data-skin='liquid'][data-theme='light'] .cx-liquid-bg { background-image: url('/assets/bg-nebula.jpg?v=3') !important; background-size: cover !important; background-position: 50% 38% !important; filter: brightness(1.55) saturate(.45) contrast(.95) !important; opacity: .5 !important; } /* ============================================================================= [2026-11-01 v105] 背景缩到 92%：柱子不再"显大" ----------------------------------------------------------------------------- cover 会把图放大到铺满，柱子跟着变大（占消息区 40%，参考图只有 22%）。 改成 92% 后：柱子宽占 22%、四周留出黑边。 黑边不会露馅 —— 左右被"两侧压暗"层吃掉，底部被渐隐层吃掉，顶部本来就是黑的。 ============================================================================= */ html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg { background-size: 92% auto !important; background-position: 50% 46% !important; background-color: #030508 !important; } html[data-skin='liquid'][data-theme='light'] .cx-liquid-bg { background-size: 92% auto !important; background-position: 50% 46% !important; background-color: #eef3fb !important; } /* ============================================================================= [2026-11-01 v106] 边缘再厚一档（对照 5 倍放大后） ----------------------------------------------------------------------------- 放大比对发现还差两点：边框偏细（2.2 vs 例图约 2.5）、内侧只有暗线没有反射。 补上"暗线 + 内侧反射"这对组合 —— 这一对才是玻璃厚度感的来源。 ============================================================================= */ html[data-skin='liquid'][data-theme='dark'] main, html[data-skin='liquid'][data-theme='dark'] aside.sidebar { box-shadow: inset 0 2px 0 rgba(244, 251, 255, .70), inset 0 -1.5px 0 rgba(255, 212, 170, .38), inset 2px 0 0 rgba(172, 220, 255, .18), inset -2px 0 0 rgba(226, 182, 255, .24), /* 内侧暗线 */ inset 0 0 0 2px rgba(3, 7, 14, .38), /* 暗线里再收一圈淡反射（厚度感的第二层） */ inset 0 0 0 4px rgba(176, 218, 255, .055), /* 内侧顶/底辉光 */ inset 0 44px 64px -54px rgba(208, 238, 255, .44), inset 0 -46px 70px -56px rgba(186, 138, 236, .40), /* 紧贴亮边 */ 0 0 0 1px rgba(206, 232, 255, .34), /* 近距辉光（加强） */ 0 0 8px 1px rgba(160, 212, 255, .48), 0 0 24px 3px rgba(134, 194, 250, .38), /* 中/远距柔光 */ 0 0 54px 8px rgba(108, 158, 230, .24), 0 0 104px 16px rgba(90, 138, 216, .15), 0 30px 96px -36px rgba(0, 0, 0, .96) !important; } /* 边框本体 2.2 → 2.4px，四角更白 */ html[data-skin='liquid'] main::after, html[data-skin='liquid'] aside.sidebar::after { padding: 2.4px !important; filter: saturate(1.5) brightness(1.22) !important; } /* 底部渐隐放宽（40% → 32%），下方多留一点星云 */ html[data-skin='liquid'] .cx-liquid-bg::before { height: 32% !important; background: linear-gradient(180deg, rgba(3, 5, 10, 0) 0%, rgba(3, 5, 10, .28) 40%, rgba(3, 5, 10, .68) 74%, rgba(3, 5, 10, .90) 100%) !important; } /* ============================================================================= [2026-11-01 v107] 背景位置：柱子底部要给输入条留出呼吸 ----------------------------------------------------------------------------- 例图：柱子底座在画面 65% 处，输入条在 84%，中间留 19% 的空隙。 我的：底座在 84%，几乎贴着输入条 —— 看起来像被裁掉半截。 改成 88% + 垂直 70% 对齐，底座落到 60%，下方留 15% 空隙。 ============================================================================= */ html[data-skin='liquid'][data-theme='dark'] .cx-liquid-bg { background-size: 88% auto !important; background-position: 50% 70% !important; } html[data-skin='liquid'][data-theme='light'] .cx-liquid-bg { background-size: 88% auto !important; background-position: 50% 70% !important; } /* ============================================================================= [2026-11-01 v108] 修登录页被背景盖住 ----------------------------------------------------------------------------- 症状：未登录时整页只有背景图，登录表单看不见。 根因：`.cx-liquid-bg` 是 `position: fixed; z-index: 0`，且被 append 到 body 末尾。 z-index: 0 会形成层叠上下文，按规范绘制在所有 z-index: auto 的静态内容之上 → 登录容器（`min-h-screen` 那层，static/auto）被整个盖住。 深色下背景 opacity: 1，于是"只剩一张图"。 主界面之所以没暴露，是因为里面 `.glass` 带 backdrop-filter，各自又形成 层叠上下文，碰巧隔开了 —— 这不是设计，是运气。 正确层级（从下到上）： -2 背景图 .cx-liquid-bg -1 暗角 body::after 0 页面内容（默认 auto） ============================================================================= */ html[data-skin='liquid'] .cx-liquid-bg { z-index: -2 !important; } html[data-skin='liquid'] body::after { z-index: -1 !important; } /* 兜底：登录容器显式抬一层，避免以后再有全屏 fixed 层抢位置 */ html[data-skin='liquid'] body > div.min-h-screen { position: relative; z-index: 0; } /* body / html 必须透明，否则 z-index:-1 的背景会被底色盖掉 */ html[data-skin='liquid'], html[data-skin='liquid'] body { background-color: transparent !important; } /* ============================================================================= [2026-11-01 v109] 登录页细节：背景铺满 + 按钮统一成琥珀 ----------------------------------------------------------------------------- 1. 登录页没有面板遮挡，背景用 88%（为让主界面的柱子变小）会露出四周黑边。 用 :has(.sidebar) 区分 —— 主界面 88%，登录/注册/忘记密码用 cover。 2. 登录按钮原来是 indigo→violet 渐变，和现在整套琥珀色主题不搭。 ============================================================================= */ /* 没有侧栏 = 登录/注册/忘记密码页 → 背景铺满，不留边 */ html[data-skin='liquid'] body:not(:has(.sidebar)) .cx-liquid-bg { background-size: cover !important; background-position: 50% 46% !important; } html[data-skin='liquid'][data-theme='dark'] body:not(:has(.sidebar)) .cx-liquid-bg { background-color: #030508 !important; filter: brightness(1.02) saturate(1.04) contrast(1.04) !important; } /* 登录页的压暗与渐隐可以轻一些（卡片本身不大，背景要透） */ html[data-skin='liquid'] body:not(:has(.sidebar)) .cx-liquid-bg::before { height: 26% !important; } html[data-skin='liquid'] body:not(:has(.sidebar)) .cx-liquid-bg::after { background: linear-gradient(90deg, rgba(2, 4, 9, .45) 0%, rgba(2, 4, 9, .20) 18%, rgba(2, 4, 9, 0) 38%, rgba(2, 4, 9, 0) 62%, rgba(2, 4, 9, .20) 82%, rgba(2, 4, 9, .45) 100%) !important; } /* 登录主按钮：琥珀渐变，和发送键同一套 */ html[data-skin='liquid'] #authForm > button { background: linear-gradient(160deg, #fde68a 0%, #fbbf24 44%, #f59e0b 100%) !important; color: #1b1206 !important; font-weight: 600 !important; border-radius: 18px !important; box-shadow: 0 0 30px -6px rgba(245, 158, 11, .75), 0 6px 18px -8px rgba(160, 72, 4, .7), inset 0 1px 0 rgba(255, 252, 226, .75) !important; transition: transform .16s ease, box-shadow .2s ease, filter .2s ease; } html[data-skin='liquid'] #authForm > button:hover { filter: brightness(1.06); box-shadow: 0 0 40px -4px rgba(245, 158, 11, .9), 0 8px 22px -8px rgba(160, 72, 4, .8), inset 0 1px 0 rgba(255, 252, 226, .85) !important; } html[data-skin='liquid'] #authForm > button:active { transform: scale(.988); } /* 登录卡片的输入框：深色下要更"实"一点，否则 placeholder 糊在背景上 */ html[data-skin='liquid'][data-theme='dark'] #authForm input, html[data-skin='liquid'][data-theme='dark'] #forgotForm input { background: rgba(8, 16, 32, .55) !important; border: 1px solid rgba(255, 255, 255, .08) !important; color: #e8f2ff !important; } html[data-skin='liquid'][data-theme='dark'] #authForm input::placeholder, html[data-skin='liquid'][data-theme='dark'] #forgotForm input::placeholder { color: rgba(200, 216, 236, .48) !important; } html[data-skin='liquid'][data-theme='light'] #authForm input, html[data-skin='liquid'][data-theme='light'] #forgotForm input { background: rgba(255, 255, 255, .72) !important; border: 1px solid rgba(180, 200, 228, .5) !important; } /* 卡片本体：登录页的玻璃要更"实"，否则文字压不住背景 */ html[data-skin='liquid'][data-theme='dark'] body:not(:has(.sidebar)) .glass.modal { background-color: rgba(12, 20, 38, .58) !important; box-shadow: inset 0 1.5px 0 rgba(240, 250, 255, .40), inset 0 0 0 2px rgba(3, 7, 14, .34), 0 0 0 1px rgba(200, 228, 255, .22), 0 0 24px 3px rgba(130, 190, 248, .26), 0 0 70px 10px rgba(96, 146, 220, .16), 0 30px 90px -34px rgba(0, 0, 0, .9) !important; } /* [2026-11-01 v110] 登录卡片的 logo 统一到主题青色（原来紫色和琥珀按钮打架） */ html[data-skin='liquid'] .glass.modal .avatar { background: linear-gradient(155deg, #d3f6ff 0%, #8ddcfb 48%, #46c3f7 100%) !important; color: #073247 !important; box-shadow: 0 0 28px -6px rgba(80, 200, 250, .8), inset 0 1px 0 rgba(255, 255, 255, .75) !important; } /* [2026-11-01 v111] 忘记密码页的按钮也是紫的 —— 它在 #forgotForm 里，不是 #authForm */ html[data-skin='liquid'] #forgotForm > button { background: linear-gradient(160deg, #fde68a 0%, #fbbf24 44%, #f59e0b 100%) !important; color: #1b1206 !important; font-weight: 600 !important; border-radius: 18px !important; box-shadow: 0 0 30px -6px rgba(245, 158, 11, .75), 0 6px 18px -8px rgba(160, 72, 4, .7), inset 0 1px 0 rgba(255, 252, 226, .75) !important; } html[data-skin='liquid'] #forgotForm > button:hover { filter: brightness(1.06); } /* [2026-11-01 v112] 登录/注册页的"立即注册 / 忘记密码 / 返回登录"还是靛蓝，统一成主题青 */ html[data-skin='liquid'] body:not(:has(.sidebar)) [data-act='forgotScreen'], html[data-skin='liquid'] body:not(:has(.sidebar)) [data-act='authScreen'] { color: rgba(126, 226, 250, .92) !important; } html[data-skin='liquid'] body:not(:has(.sidebar)) [data-act='forgotScreen']:hover, html[data-skin='liquid'] body:not(:has(.sidebar)) [data-act='authScreen']:hover { color: #b8f0ff !important; } /* 未绑手机号的提示文案用琥珀，保持"提醒"语义 */ html[data-skin='liquid'] body:not(:has(.sidebar)) .text-amber-500 { color: #fbbf24 !important; }