/* ============================================================================ * liquid-glass.css v2 — iOS 26 液态玻璃（真折射，非毛玻璃） * ---------------------------------------------------------------------------- * 与 v1 的根本差别：v1 只有渐变高光（假玻璃，所以"看不出来"）。v2 用 * **SVG 位移滤镜做背景折射** —— Apple Liquid Glass 的核心做法： * backdrop-filter: url(#lg-refract) saturate() brightness() * 滤镜由 liquid-glass.js 注入（feTurbulence → feGaussianBlur → feDisplacementMap）， * X 轴走 R 通道、Y 轴走 G 通道。Chromium 专属能力，本机 Chrome 已实测生效； * 不支持时（Safari/Firefox）自动回退成 saturate+brightness 的通透玻璃。 * 参考实现：https://kube.io/blog/liquid-glass-css-svg/ · https://github.com/nikdelvin/liquid-glass * * 硬约束（零布局改动）：只改 background / border-color / border-radius / box-shadow / * backdrop-filter / filter / color / opacity；绝不碰 width·height·padding·margin·gap· * display·position·inset·transform·font·border-width → 元素位置尺寸与按钮行为不变。 * ==========================================================================*/ :root { --lg-x: 50%; --lg-y: 0%; --lg-hi: rgba(255, 255, 255, .62); --lg-hi-soft: rgba(255, 255, 255, .18); --lg-hi-foot: rgba(255, 255, 255, .12); --lg-tint: rgba(255, 255, 255, .18); --lg-edge: rgba(255, 255, 255, .28); --lg-shadow: rgba(2, 6, 23, .40); /* 玻璃本体底色（半透，才看得见后面的折射） */ --lg-surface: rgba(14, 19, 32, .46); --lg-surface-solid: rgba(12, 17, 28, .68); --lg-tint-color: rgba(120, 180, 255, .06); } [data-theme=light] { --lg-hi: rgba(255, 255, 255, .95); --lg-hi-soft: rgba(255, 255, 255, .6); --lg-hi-foot: rgba(15, 23, 42, .05); --lg-tint: rgba(255, 255, 255, .35); --lg-edge: rgba(15, 23, 42, .10); --lg-shadow: rgba(15, 23, 42, .14); --lg-surface: rgba(255, 255, 255, .46); --lg-surface-solid: rgba(255, 255, 255, .70); --lg-tint-color: rgba(120, 160, 255, .05); } /* ============================================================ * ① 极光底（liquid-glass.js 注入 #lg-backdrop） * —— 玻璃只有在"背后有东西"时才看得出折射；这一层提供色彩与纹理， * 本身不动布局（fixed + pointer-events:none），可以整层删掉。 * ============================================================ */ #lg-backdrop { background-color: #05070d; } [data-theme=light] #lg-backdrop { background-color: #eef2fa; } #lg-backdrop .lg-aurora { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(60px); opacity: .82; will-change: transform; } #lg-backdrop .lg-a1 { left: -18vmax; top: -22vmax; background: radial-gradient(circle at 50% 50%, rgba(64, 146, 255, .85), transparent 64%); animation: lg-drift-1 46s ease-in-out infinite alternate; } #lg-backdrop .lg-a2 { right: -20vmax; top: 6vmax; background: radial-gradient(circle at 50% 50%, rgba(178, 96, 255, .7), transparent 64%); animation: lg-drift-2 58s ease-in-out infinite alternate; } #lg-backdrop .lg-a3 { left: 24vmax; bottom: -26vmax; background: radial-gradient(circle at 50% 50%, rgba(20, 205, 145, .6), transparent 64%); animation: lg-drift-3 68s ease-in-out infinite alternate; } #lg-backdrop .lg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%); } [data-theme=light] #lg-backdrop .lg-grid { background-image: linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px); } @keyframes lg-drift-1 { from { transform: translate3d(0,0,0) } to { transform: translate3d(6vmax,4vmax,0) } } @keyframes lg-drift-2 { from { transform: translate3d(0,0,0) } to { transform: translate3d(-7vmax,5vmax,0) } } @keyframes lg-drift-3 { from { transform: translate3d(0,0,0) } to { transform: translate3d(4vmax,-6vmax,0) } } /* 指针关闭时停止漂移（省电） */ [data-lg-static] #lg-backdrop .lg-aurora { animation: none !important; } /* ============================================================ * ② 壳层半透：让极光透上来，玻璃才有东西可折射 * ============================================================ */ .rc-shell.rc-shell { background-color: rgba(6, 9, 16, .30) !important; } [data-theme=light] .rc-shell.rc-shell { background-color: rgba(248, 250, 255, .42) !important; } /* ============================================================ * ③ 真折射：把 SVG 位移滤镜挂到 backdrop-filter 上 * · 面板/卡片/弹窗 → lg-refract（折射明显） * · 大块表面（侧栏/顶栏/表格/控制中心） → lg-refract-soft（轻微，保文字清晰） * ============================================================ */ /* 真折射：Chromium 专属（SVG 滤镜当 backdrop-filter）。不支持时下面的 fallback 分支生效 */ html[data-lg="lens"] .panel.panel, html[data-lg="lens"] .device-card.device-card, html[data-lg="lens"] .s-card.s-card, html[data-lg="lens"] .modal-box.modal-box, html[data-lg="lens"] .rc-pagination.rc-pagination, html[data-lg="lens"] .batch-bar.batch-bar, html[data-lg="lens"] .ctrl-tab-panel.ctrl-tab-panel, html[data-lg="lens"] .ctrl-sidebar-panel.ctrl-sidebar-panel, html[data-lg="lens"] .a11y-screen-header.a11y-screen-header, html[data-lg="lens"] .reader-style-bar.reader-style-bar, html[data-lg="lens"] .a11y-text-input.a11y-text-input, html[data-lg="lens"] .a11y-nav.a11y-nav { -webkit-backdrop-filter: saturate(185%) brightness(1.06) !important; backdrop-filter: url("#lg-lens") saturate(185%) brightness(1.06) !important; } html[data-lg="lens"] .rc-sidebar.rc-sidebar, html[data-lg="lens"] .rc-topbar.rc-topbar, html[data-lg="lens"] .rc-table-wrap.rc-table-wrap, html[data-lg="lens"] .rc-table.rc-table, html[data-lg="lens"] .rc-device-toolbar.rc-device-toolbar, html[data-lg="lens"] .rc-header-elevated.rc-header-elevated, html[data-lg="lens"] .home-tab-topbar.home-tab-topbar, html[data-lg="lens"] .ctrl-tab-content.ctrl-tab-content, html[data-lg="lens"] .ctrl-screen-area.ctrl-screen-area, html[data-lg="lens"] .ctrl-header.ctrl-header, html[data-lg="lens"] .ctrl-tabs.ctrl-tabs { -webkit-backdrop-filter: saturate(180%) brightness(1.05) !important; backdrop-filter: url("#lg-lens-soft") saturate(180%) brightness(1.05) !important; } /* 回退（Safari/Firefox 不支持 url() 当 backdrop-filter）：通透玻璃但不折射 */ html[data-lg="fallback"] .rc-sidebar.rc-sidebar, html[data-lg="fallback"] .rc-topbar.rc-topbar, html[data-lg="fallback"] .panel.panel, html[data-lg="fallback"] .modal-box.modal-box, html[data-lg="fallback"] .device-card.device-card, html[data-lg="fallback"] .s-card.s-card, html[data-lg="fallback"] .rc-table-wrap.rc-table-wrap, html[data-lg="fallback"] .ctrl-sidebar-panel.ctrl-sidebar-panel, html[data-lg="fallback"] .ctrl-tab-panel.ctrl-tab-panel, html[data-lg="fallback"] .ctrl-screen-area.ctrl-screen-area { -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.06) !important; backdrop-filter: blur(10px) saturate(180%) brightness(1.06) !important; } /* ============================================================ * ④ 玻璃本体：半透底色 + 折射光带 + 指针高光 + 镜面边缘 * ============================================================ */ .rc-sidebar.rc-sidebar, .rc-topbar.rc-topbar, .rc-table-wrap.rc-table-wrap, .rc-table.rc-table, .rc-device-toolbar.rc-device-toolbar, .rc-header-elevated.rc-header-elevated, .rc-pagination.rc-pagination, .panel.panel, .modal-box.modal-box, .device-card.device-card, .s-card.s-card, .batch-bar.batch-bar, .home-tab-topbar.home-tab-topbar, .ctrl-sidebar-panel.ctrl-sidebar-panel, .ctrl-tab-panel.ctrl-tab-panel, .ctrl-tab-content.ctrl-tab-content, .ctrl-screen-area.ctrl-screen-area, .ctrl-header.ctrl-header, .ctrl-tabs.ctrl-tabs, .a11y-screen-header.a11y-screen-header, .reader-style-bar.reader-style-bar, .a11y-text-input.a11y-text-input, .a11y-nav.a11y-nav { background-color: var(--lg-surface) !important; background-image: /* 指针跟随的液态高光 */ radial-gradient(360px circle at var(--lg-x) var(--lg-y), var(--lg-tint), transparent 56%), /* 顶部折射光带 */ linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 15%, rgba(255, 255, 255, 0) 40%), /* 底部内反射 */ linear-gradient(0deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 24%), /* 极淡玻璃本体染色 */ linear-gradient(135deg, var(--lg-tint-color), transparent 60%) !important; border-color: var(--lg-edge) !important; box-shadow: inset 0 1px 0 var(--lg-hi), inset 1px 0 0 var(--lg-hi-soft), inset -1px 0 0 var(--lg-hi-soft), inset 0 -1px 0 var(--lg-hi-foot), inset 0 0 0 1px rgba(130, 185, 255, .16), inset 0 0 0 2px rgba(255, 150, 220, .08), inset 0 0 34px rgba(255, 255, 255, .07), 0 12px 34px var(--lg-shadow), 0 2px 8px rgba(2, 6, 23, .22) !important; } /* 大块表面（侧栏/顶栏）：底色更透一点，折射更明显 */ .rc-sidebar.rc-sidebar, .rc-topbar.rc-topbar { background-color: rgba(10, 14, 24, .5) !important; } [data-theme=light] .rc-sidebar.rc-sidebar, [data-theme=light] .rc-topbar.rc-topbar { background-color: rgba(255, 255, 255, .55) !important; } /* 内容型表面（表格/卡片）：底色更实，保证可读性 */ .rc-table-wrap.rc-table-wrap, .rc-table.rc-table, .panel.panel, .s-card.s-card, .device-card.device-card, .ctrl-tab-panel.ctrl-tab-panel { background-color: var(--lg-surface-solid) !important; } /* 弹窗遮罩 */ .modal-mask, .modal-overlay, .overlay-mask { background-color: rgba(3, 7, 18, .38) !important; -webkit-backdrop-filter: saturate(160%) brightness(.96) !important; backdrop-filter: saturate(160%) brightness(.96) !important; } /* 滚动条 / 选中文字 */ .rc-main::-webkit-scrollbar-thumb, .ctrl-tab-content::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .14)) !important; border-radius: 4px !important; } ::selection { background: color-mix(in srgb, var(--fc-accent, #2563eb) 42%, transparent); color: #fff; } /* 浅色主题的边缘光换一套 */ [data-theme=light] .rc-sidebar.rc-sidebar, [data-theme=light] .rc-topbar.rc-topbar, [data-theme=light] .panel.panel, [data-theme=light] .modal-box.modal-box, [data-theme=light] .device-card.device-card, [data-theme=light] .s-card.s-card, [data-theme=light] .rc-table-wrap.rc-table-wrap, [data-theme=light] .rc-pagination.rc-pagination, [data-theme=light] .ctrl-sidebar-panel.ctrl-sidebar-panel, [data-theme=light] .ctrl-tab-panel.ctrl-tab-panel, [data-theme=light] .ctrl-screen-area.ctrl-screen-area { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), inset 1px 0 0 rgba(255, 255, 255, .65), inset 0 -1px 0 rgba(15, 23, 42, .05), inset 0 0 0 1px rgba(80, 130, 255, .06), 0 12px 30px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .07) !important; }