/* ============================================================ * 液态玻璃子主题 liquid-glass.css * 定位：可选的第二外观（data-style="liquid"），取向贴近 Apple iOS 的 * Liquid Glass —— 半透明材质 + 背景折射 + 边缘透镜高光 + 柔和投影。 * * 生效条件：。默认（minimal）完全不加载本文件的 * 任何效果，极简主题零回归。 * * ⚠️ 设计红线（这个坑踩过两次，务必守住）： * 绝不使用 backdrop-filter: url(#svg-filter)。 * 该写法在 Chromium 的 GPU 合成路径下存在坐标空间 bug，会把滤镜结果 * 放大并左上偏移地泄漏到元素之外，形成「放大模糊的重影副本」， * 无头浏览器（软件渲染）测不出来，真机必现。 * 本文件只用 blur() / saturate() / brightness() 标准函数 + 渐变层， * 不使用任何 SVG 滤镜引用，也不使用 filter: url()。 * * 加载顺序：必须排在 minimal-base.css 之后（用更高特异性覆盖它）。 * ============================================================ */ /* ── 1. 恢复液态参数（minimal-base 把它们全部归零了） ── */ html[data-style="liquid"] { --liquid: 1; --glass-blur: 22px; --glass-saturate: 185%; --glass-bg-op: .46; --glass-border-op: .55; --blob-op: .34; --liquid-radius: 22px; --aberr: .35; /* 玻璃面板的分层色（上下略亮、中间稍透，模拟厚玻璃） */ --lg-sheen-top: rgba(255, 255, 255, .62); --lg-sheen-mid: rgba(255, 255, 255, .44); --lg-sheen-bot: rgba(255, 255, 255, .54); --lg-edge: rgba(255, 255, 255, .58); --lg-bright: 1.05; /* 四边内侧高光（顶/底/左/右）+ 外投影 */ --lg-inset: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(15, 23, 42, .06), inset 1px 0 0 rgba(255, 255, 255, .55), inset -1px 0 0 rgba(15, 23, 42, .04); --lg-shadow: 0 10px 34px rgba(31, 41, 90, .13), 0 2px 8px rgba(31, 41, 90, .07); /* 让 minimal-base 里所有引用 --m-surface 的规则自动变成半透明 */ --m-surface: rgba(255, 255, 255, .46); --m-surface-2: rgba(255, 255, 255, .62); --hair: rgba(255, 255, 255, .58); } html[data-style="liquid"][data-theme="dark"] { --glass-blur: 24px; --glass-saturate: 150%; --glass-bg-op: .40; --glass-border-op: .16; --blob-op: .30; --lg-sheen-top: rgba(46, 53, 70, .56); --lg-sheen-mid: rgba(18, 22, 31, .42); --lg-sheen-bot: rgba(46, 53, 70, .34); --lg-edge: rgba(255, 255, 255, .17); --lg-bright: .92; --lg-inset: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .38), inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(0, 0, 0, .22); --lg-shadow: 0 12px 40px rgba(0, 0, 0, .46), 0 2px 10px rgba(0, 0, 0, .30); --m-surface: rgba(20, 24, 34, .48); --m-surface-2: rgba(28, 33, 45, .62); --hair: rgba(255, 255, 255, .17); } /* ── 2. 玻璃面板集合：材质 / 圆角 / 投影 ── */ html[data-style="liquid"] :is( .glass, .side-card, .post, .cat-bar, .cat-card, .comments, .nav-drop-menu, .mobile-nav, .search-pop, .music-nav-panel, .av-toc, .nc-panel, .poster-card, .av-card, .friend ) { background: linear-gradient(180deg, var(--lg-sheen-top) 0%, var(--lg-sheen-mid) 46%, var(--lg-sheen-bot) 100%), linear-gradient(135deg, hsla(var(--hue), 88%, 68%, .10) 0%, hsla(calc(var(--hue) + 42), 78%, 62%, .07) 50%, hsla(calc(var(--hue) + 200), 70%, 62%, .06) 100%) !important; border: 1px solid var(--lg-edge) !important; border-radius: var(--liquid-radius) !important; box-shadow: var(--lg-inset), var(--lg-shadow) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--lg-bright)) !important; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--lg-bright)) !important; } /* 顶栏：iOS 导航栏式的玻璃条（保持通栏 + 底部发丝线，不参与胶囊变形） */ html[data-style="liquid"] :is(.topbar, .av-topbar) { background: linear-gradient(180deg, var(--lg-sheen-top) 0%, var(--lg-sheen-mid) 100%) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--lg-bright)) !important; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--lg-bright)) !important; border-bottom: 1px solid var(--lg-edge) !important; border-radius: 0 !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .28), 0 6px 26px rgba(31, 41, 90, .10) !important; } /* 顶部导航胶囊：独立玻璃 pill */ html[data-style="liquid"] .topnav.glass-pill { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--lg-sheen-top) 0%, var(--lg-sheen-mid) 55%, var(--lg-sheen-bot) 100%) !important; border: 1px solid var(--lg-edge) !important; border-radius: 999px !important; box-shadow: var(--lg-inset), 0 8px 24px rgba(31, 41, 90, .10) !important; -webkit-backdrop-filter: blur(calc(var(--glass-blur) * .8)) saturate(var(--glass-saturate)) !important; backdrop-filter: blur(calc(var(--glass-blur) * .8)) saturate(var(--glass-saturate)) !important; } html[data-style="liquid"] .topnav a, html[data-style="liquid"] .nav-drop-trigger { background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; } html[data-style="liquid"] .topnav a:hover, html[data-style="liquid"] .nav-drop-trigger:hover { background: rgba(255, 255, 255, .40) !important; border-color: rgba(255, 255, 255, .55) !important; } html[data-style="liquid"][data-theme="dark"] .topnav a:hover, html[data-style="liquid"][data-theme="dark"] .nav-drop-trigger:hover { background: rgba(255, 255, 255, .10) !important; border-color: rgba(255, 255, 255, .18) !important; } /* ── 3. 触发背景光斑：让玻璃有东西可折射 ── */ html[data-style="liquid"] .liquid-bg { display: block !important; } html[data-style="liquid"] .liquid-bg .blob { display: block !important; } html[data-style="liquid"] body .blob { opacity: var(--blob-op) !important; } html[data-style="liquid"] body.wm-wallpaper .blob, html[data-style="liquid"] body.wm-banner .blob { opacity: 0 !important; } /* ── 4. 恢复镜面高光层（minimal-base 把 .glass-glare 伪元素藏了） ── */ html[data-style="liquid"] .glass-glare::before { display: block !important; } /* ── 5. Hero：透出光斑，保留留白排版 ── */ html[data-style="liquid"] .hero-banner { background-color: transparent !important; background-image: none !important; border-bottom: 1px solid var(--hair) !important; } html[data-style="liquid"] .hero-banner h1 { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .45) !important; } html[data-style="liquid"][data-theme="dark"] .hero-banner h1 { text-shadow: 0 1px 0 rgba(0, 0, 0, .45) !important; } /* ── 6. 文章卡：hover 轻微上浮 + 玻璃增亮（不是极简的只换边框） ── */ html[data-style="liquid"] .post { transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, background .28s ease !important; } html[data-style="liquid"] .post:hover, html[data-style="liquid"] .post.is-floating { transform: translateY(-3px) !important; background: linear-gradient(180deg, var(--lg-sheen-top) 0%, rgba(255, 255, 255, .58) 46%, var(--lg-sheen-bot) 100%), linear-gradient(135deg, hsla(var(--hue), 88%, 68%, .13) 0%, hsla(calc(var(--hue) + 42), 78%, 62%, .09) 100%) !important; border-color: var(--lg-edge) !important; box-shadow: var(--lg-inset), 0 18px 44px rgba(31, 41, 90, .18), 0 0 0 1px rgba(255, 255, 255, .35) inset !important; } /* ── 7. 胶囊 / 标签 / 图标按钮 ── */ html[data-style="liquid"] :is(.tag, .cat-chip, .tag-chip) { background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .40)) !important; border: 1px solid var(--lg-edge) !important; border-radius: 999px !important; color: var(--text-muted) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; backdrop-filter: blur(10px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(31, 41, 90, .07) !important; } html[data-style="liquid"][data-theme="dark"] :is(.tag, .cat-chip, .tag-chip) { background: linear-gradient(180deg, rgba(46, 53, 70, .62), rgba(24, 29, 40, .52)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .3) !important; } html[data-style="liquid"] .cat-chip.active { color: var(--accent) !important; border-color: rgba(255, 255, 255, .7) !important; background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5)) !important; } html[data-style="liquid"] .icon-btn { background: rgba(255, 255, 255, .34) !important; border: 1px solid rgba(255, 255, 255, .48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(31, 41, 90, .07) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; backdrop-filter: blur(10px) saturate(160%) !important; } html[data-style="liquid"][data-theme="dark"] .icon-btn { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .28) !important; } /* 分类卡图标：单色 → 玻璃底 */ html[data-style="liquid"] .cat-icon { background: rgba(255, 255, 255, .55) !important; color: var(--accent) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 8px rgba(31, 41, 90, .08) !important; } html[data-style="liquid"][data-theme="dark"] .cat-icon { background: rgba(255, 255, 255, .10) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important; } /* ── 8. 悬浮控件 / 搜索框：玻璃 ── */ html[data-style="liquid"] :is(.back-top, .scroll-down) { background: linear-gradient(180deg, var(--lg-sheen-top), var(--lg-sheen-mid)) !important; border: 1px solid var(--lg-edge) !important; border-radius: 999px !important; box-shadow: var(--lg-inset), var(--lg-shadow) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important; } html[data-style="liquid"] .search-input { background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .44)) !important; border: 1px solid var(--lg-edge) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 4px 16px rgba(31, 41, 90, .09) !important; -webkit-backdrop-filter: blur(14px) saturate(170%) !important; backdrop-filter: blur(14px) saturate(170%) !important; } html[data-style="liquid"][data-theme="dark"] .search-input { background: linear-gradient(180deg, rgba(46, 53, 70, .6), rgba(24, 29, 40, .5)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 16px rgba(0, 0, 0, .3) !important; } /* ── 9. 表单控件：半透明玻璃 ── */ html[data-style="liquid"] :is(.gb-form input, .gb-form textarea, .cm-field input, .cm-field textarea) { background: rgba(255, 255, 255, .52) !important; border: 1px solid var(--lg-edge) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 2px 8px rgba(31, 41, 90, .06) !important; -webkit-backdrop-filter: blur(10px) saturate(160%) !important; backdrop-filter: blur(10px) saturate(160%) !important; } html[data-style="liquid"][data-theme="dark"] :is(.gb-form input, .gb-form textarea, .cm-field input, .cm-field textarea) { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1) !important; } /* ── 10. 文章阅读层：保持高不透明度，优先可读性 ── */ html[data-style="liquid"] #articleView { background: rgba(247, 249, 252, .90) !important; -webkit-backdrop-filter: blur(26px) saturate(160%) !important; backdrop-filter: blur(26px) saturate(160%) !important; } html[data-style="liquid"][data-theme="dark"] #articleView { background: rgba(13, 16, 24, .92) !important; } /* ── 11. 降级：不支持 backdrop-filter 时改用高不透明度实底 ── */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html[data-style="liquid"] :is( .glass, .side-card, .post, .cat-bar, .cat-card, .comments, .nav-drop-menu, .mobile-nav, .search-pop, .music-nav-panel, .av-toc, .nc-panel, .poster-card, .av-card, .friend ) { background: rgba(250, 251, 253, .94) !important; } html[data-style="liquid"][data-theme="dark"] :is( .glass, .side-card, .post, .cat-bar, .cat-card, .comments, .nav-drop-menu, .mobile-nav, .search-pop, .music-nav-panel, .av-toc, .nc-panel, .poster-card, .av-card, .friend ) { background: rgba(19, 23, 32, .95) !important; } } /* ── 12. 尊重"减少动态效果"偏好 ── */ @media (prefers-reduced-motion: reduce) { html[data-style="liquid"] .post { transition: none !important; } html[data-style="liquid"] .post:hover { transform: none !important; } html[data-style="liquid"] .liquid-bg .blob { animation: none !important; } }