/* OAS UI 液态玻璃材质层（可选层，机制同 skins.css：opt-in 不引则零影响） * * 用法：主题之上叠加 `data-glass` —— ``。 * 材质本质：半透明 surface + backdrop 模糊 + 高光描边环 + 圆角放大 + 分层深影。 * * 三个效果变量（组件侧统一消费，缺省值天然无效）： * - `--oas-glass-blur`（本文件内置值；不引时为组件侧回落 `none`）： * surface 组件经 `backdrop-filter: var(--oas-glass-blur, none)` 消费（容器级 surface 才接—— * 行级/长列表不接，避免大面积模糊的性能成本）； * - `--oas-glass-ring`（高光描边环）：surface 组件经 * `outline: 1px solid var(--oas-glass-ring, transparent); outline-offset: -1px` 消费 * （贴近玻璃的折光边；默认 transparent 不可见）； * - `--oas-glass-refraction`（边缘折射，仅 9 个 controls/nav/notification 组件消费， * 内容面板不接）：data-URI 自包含 SVG 位移滤镜。 * * 降级：局部停用可对任意容器覆盖 * `--oas-glass-blur: none; --oas-glass-ring: transparent; --oas-glass-refraction: ;` * （折射的停用值必须留空而非 none：button 的 hover/按下/选中态把 brightness() 与该变量 * 组合书写，none 与函数混排会让整条 filter 声明非法、亮度反馈失效——空值则两条路径都合法； * 构建链会吞空值自定义属性时可改用 saturate(1) 恒等滤镜作停用值）。 * 边界：材质依赖背景反差——纯色/同色相背景上玻璃感减弱（文字仍走 token 安全档可读）； * high-contrast 主题下不启用（实心可访问性档优先，选择器已排除）。 */ :root[data-glass]:not([data-theme="high-contrast"]) { /* surface：半透明白（素材感来自背景透出）。alpha 档与文字档联动标定（oklab 实测）： 亮背板亮蓝/品红 + 暗背板深青三类代表面上，主/次文字感知分均 ≥60 */ --oas-color-bg: rgba(255, 255, 255, 0.6); --oas-color-bg-elevated: rgba(255, 255, 255, 0.75); --oas-color-bg-hover: rgba(244, 244, 245, 0.7); --oas-color-bg-disabled: rgba(244, 244, 245, 0.66); /* 玻璃档次要文字加深（busy 背板上默认档不达标——材质感与文字安全分开标定） */ --oas-color-text-secondary: #4a4a52; /* 结构线（内部隔断/控件描边）：深色发丝——白色版在白面板上消失（modal 标题/底部 分割线不可见，用户实抓）；折光边职责归 --oas-glass-ring（白色、走 outline 内缩）， 结构线与折光边分工对齐 iOS 浅色半透明面板（dark 段反向：白色结构线同样分工） */ --oas-color-border: rgba(0, 0, 0, 0.08); --oas-color-border-strong: rgba(0, 0, 0, 0.14); /* 圆角放大一档 */ --oas-radius-xs: 4px; --oas-radius-sm: 6px; --oas-radius-md: 10px; --oas-radius-lg: 16px; --oas-radius-xl: 20px; /* 分层深影 + 发丝线（0 0 0 1px 深色细线）：浅色玻璃在白底/浅底上 surface 与折光边 都是白色系、面板边界消失（用户实抓「对话框放在白色背景下看着不对劲」）—— 发丝线在白底上给出干净边缘，在 busy 背景上隐入投影不可见（iOS 半透明面板同款手法） */ --oas-shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.1); --oas-shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 12px 28px -4px rgba(0, 0, 0, 0.14); --oas-shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.1), 0 24px 48px -8px rgba(0, 0, 0, 0.2); /* 材质效果变量。 折射滤镜用 data-URI 自包含 SVG（不依赖 DOM 注入）：shadow DOM 内 CSS 的 url(#id) 片段引用无法跨 shadow 边界解析到外部文档（实测 Chromium/Firefox 静默忽略）， data-URI 内联滤镜在任何树内天然可解析。CSP 禁 data: 时滤镜引用失效的表现由浏览器 决定（主流按忽略滤镜处理）；严格 CSP 宿主可显式覆盖 --oas-glass-refraction: ;（空值， 理由同上——none 与 brightness() 混排非法）。 滤镜链（法向位移——沿轮廓法线方向的整体微膨胀，非 45° 对角拖影）： ① discrete 阈值（alpha≥0.5→1）：把半透明玻璃面与不透明面统一归一为实心剪影—— 玻璃面 alpha 0.55~0.75 不归一则中心偏离中性（review 实抓），这步是 「中心恒不变形」硬约束与表面透明度无关的前提； ② blur 3px + alpha 入 RGB：实心剪影边缘生成平滑过渡带（梯度的输入）； ③ Sobel 双卷积（kernel 取反 + bias 0.5）：R 通道编码水平梯度、G 通道编码垂直梯度—— 每个边缘带获得沿自身法线的位移矢量（右缘向右、上缘向上），中性区恒 0.5； ④ feDisplacementMap(xChannel=R, yChannel=G) scale=10：膨胀峰值实测 ±4px（外包络宽高各 +8px，双轴对称——R/G 双通道方向性实测）， 控制视觉膨胀与热区偏差。 滤镜区域横向 -50%/200%、纵向 -100%/300%：投影主下探（shadow-md 尾部约 40px）， 纵向留一倍元素高的缓冲防滤镜区域硬切投影（review 实抓 -8%/116% 切投影、-50%/200% 对矮元素仍可能切在衰减段）；位移是渲染后像素操作，布局/命中区不受影响 */ --oas-glass-refraction: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter%20id='oas-glass-refraction'%20x='-50%25'%20y='-100%25'%20width='200%25'%20height='300%25'%20color-interpolation-filters='sRGB'%3E%3CfeComponentTransfer%20in='SourceAlpha'%20result='t'%3E%3CfeFuncA%20type='discrete'%20tableValues='0%201'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur%20in='t'%20stdDeviation='3'%20result='a'/%3E%3CfeColorMatrix%20in='a'%20type='matrix'%20values='0%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%200%200%201'%20result='w'/%3E%3CfeConvolveMatrix%20in='w'%20order='3'%20kernelMatrix='1%200%20-1%202%200%20-2%201%200%20-1'%20divisor='1'%20bias='0.5'%20preserveAlpha='true'%20result='gx'/%3E%3CfeConvolveMatrix%20in='w'%20order='3'%20kernelMatrix='1%202%201%200%200%200%20-1%20-2%20-1'%20divisor='1'%20bias='0.5'%20preserveAlpha='true'%20result='gy'/%3E%3CfeColorMatrix%20in='gx'%20type='matrix'%20values='1%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201'%20result='rx'/%3E%3CfeColorMatrix%20in='gy'%20type='matrix'%20values='0%200%200%200%200%200%201%200%200%200%200%200%200%200%200%200%200%200%200%201'%20result='gy2'/%3E%3CfeComposite%20in='rx'%20in2='gy2'%20operator='arithmetic'%20k1='0'%20k2='1'%20k3='1'%20k4='0'%20result='m'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='m'%20scale='10'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#oas-glass-refraction"); --oas-glass-blur: blur(18px) saturate(1.6); --oas-glass-ring: rgba(255, 255, 255, 0.55); /* 动态流动感：指针镜面高光（运行时 glass-fluid.js 写 --oas-glass-px/py，并把高光样式表 经 adoptedStyleSheets 注入组件 shadow 根；高光层置文字之下，alpha 刻意压低——不拉低文字对比度） */ --oas-glass-sheen: rgba(255, 255, 255, 0.28); --oas-glass-sheen-size: 180px; /* 按压=更强的高光色（真增强；不是压暗） */ --oas-glass-sheen-press: rgba(255, 255, 255, 0.5); } /* dark（同时覆盖库内 [data-theme='dark'] 规范与宿主常见的 html.dark class 式暗色）。 特异性必须压过 light 段：light 是 :root+属性+:not = (0,3,0)；两个 dark 段各带双属性+:not = (0,4,0)，与 light 段拉开（html.dark 裸写只有 (0,2,1) 会被 light 段反超——dark 下实际 吃到 light token，实抓）。HC 排除写在每个 dark 段上（缺一则 HC×该路径下玻璃泄漏）。 维护注意：两 dark 段同特异性，靠源码顺序无关地命中同一声明块——不得把任一 dark 段 挪到 light 段之前（同特异性下顺序反转 = dark 吃 light token 复发） */ :root[data-glass][data-theme="dark"]:not([data-theme="high-contrast"]), :root.dark[data-glass]:not([data-theme="high-contrast"]) { /* dark surface：低 alpha 高透（深色玻璃的材质感主场）。alpha 档与文字档联动标定 （oklab 实测：亮蓝/品红/深青三类代表面上主/次文字感知分均 ≥60）—— 19.3 分事故的根因是 dark 选择器特异性吃错 light token（白底白字）， 不是 dark 材质本身需要高 alpha */ --oas-color-bg: rgba(24, 24, 27, 0.62); --oas-color-bg-elevated: rgba(46, 46, 54, 0.55); --oas-color-bg-hover: rgba(52, 52, 58, 0.62); --oas-color-bg-disabled: rgba(39, 39, 42, 0.6); /* 玻璃档次要文字提亮（busy 背板上默认档不达标） */ --oas-color-text-secondary: #d8d8e0; --oas-color-border: rgba(255, 255, 255, 0.14); --oas-color-border-strong: rgba(255, 255, 255, 0.22); --oas-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5); --oas-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 12px 28px -4px rgba(0, 0, 0, 0.55); --oas-shadow-lg: 0 8px 16px -4px rgba(0, 0, 0, 0.5), 0 24px 48px -8px rgba(0, 0, 0, 0.65); --oas-glass-blur: blur(18px) saturate(1.6); --oas-glass-ring: rgba(255, 255, 255, 0.16); /* 动态流动感高光（暗色）：白高光更低 alpha，避免暗面板上过曝与文字对比度波动 */ --oas-glass-sheen: rgba(255, 255, 255, 0.14); --oas-glass-sheen-size: 180px; --oas-glass-sheen-press: rgba(255, 255, 255, 0.24); }