/* dsh-custom-css 示例皮肤 —— 亚克力（Acrylic） * ══════════════════════════════════════════════════════════════════════════ * 怎么用：设置 → 通用 → 自定义 CSS → 「导入」选这个文件。 * * 它做什么：给 DSH 铺一层会缓慢漂移的渐变色壁纸，然后让**界面本身全部变透明**， * 于是壁纸从整个界面透上来 —— 只有一层有颜色，其余都是透明的。 * * ═══ 三条设计原则（都是踩出来的，改这个文件前先读）═══ * * 1) **改令牌，不改元素。** * 实测 DSH 的背景**几乎全是令牌驱动的**：45 条设背景的规则里 44 条用 * `var(--dsw-…)`，只有 `body` 自己是一条字面量。而 `--dsw-alias-bg-base` 这一个 * 令牌就被 **31 条规则**使用（body、frame、tabHost、dockScrim…）。 * 所以让界面变透明**只需要给令牌重新赋值**，不必知道任何组件叫什么名字 —— * 对话框、菜单这些渲染在 root 之外的 portal 也自动跟着变。 * * 2) **绝不做"逐元素覆盖"。** 上一版用 `[class*="_newSession"]` 这类选择器去覆盖， * 结果是**同一个按钮里四层元素各被刷了一层**： * newSession ⊃ newSessionContent ⊃ newSessionLabelMax ⊃ newSessionLabel * 四层 40% 白叠起来就是一块糊的实心 —— 这正是"改来改去不行"的机制原因。 * 容器内部**一个元素都不许自己画东西**；一个区域只有最外层那一个容器有外观。 * * 3) **不碰几何。** 所有描边都用长写法（`border-width` / `border-style` / `border-color`）， * **禁止 `border` 与 `background` 简写** —— 简写会把 `border-radius` / `background-image` * 一起重置。上一版用 `border: 0.5px solid …` 给控件加描边，把「标准模式」按钮的圆角 * 清成了直角。这条没有例外。 * * 4) **交互反馈靠"不覆盖"来保住。** 悬停/选中用的是**另外的令牌** * （`--dsw-alias-interactive-bg-hover` 等），这里一律不动，所以按钮的悬停高亮、 * 输入框的聚焦底色全部照常工作。 * * ═══ 想调 ═══ * 只改下面 §1 的九个 `--dsh-acrylic-*` 变量。 * ══════════════════════════════════════════════════════════════════════════ */ /* ── §1 参数 ──────────────────────────────────────────────────────────── * ⚠ 必须定义在 **body** 上，不能放 `:root`：DSH 把全部 `--dsw-*` 令牌定义在 body 上， * 在 `:root` 里写 `--x: var(--dsw-…)` 会解析成空值，然后**整条依赖它的声明被静默丢弃** * （不报错，只是不生效）。纯字面量的变量放哪儿都行，引用令牌的必须落在 body。 * * ⚠⚠ **选择器必须写成 `body, body[data-ds-dark-theme]`，不能只写 `body`。** * DSH 的深色令牌是定义在 `body[data-ds-dark-theme]{…}` 上的，特异性 **(0,1,1)**； * 只写 `body`（(0,0,1)）在**浅色下赢、深色下输** —— 于是 §3 里那两套 `light-dark()` 值 * 在深色下完全不生效（实测输入卡片的令牌仍是 DSH 的 `#2c2c2e`，不是我的）。 * 把两个选择器并列后特异性打平为 (0,1,1)，再靠"皮肤后注入"取胜。 * 这是唯一一处需要跟 DSH 的**令牌定义**比特异性的地方。 */ body, body[data-ds-dark-theme] { /* 壁纸的三个色相 —— **必须跟着主题走**。 * * ⚠ 第一版直接用 `--dsw-static-blue-400`（`rgb(96,165,250)` 这种**亮**色）。 * 在**深色模式**下，亮色相叠在深底上只会变成一片**灰雾**：既不像有颜色的材质， * 又明显发灰（用户一眼就看出来"很多问题"）。原因是那个令牌是"静态色"， * 它**不随主题变**——它就是给图标用的固定色。 * * 所以用 `light-dark()` 配两套：浅色用原来的亮色相；深色用**更深、更饱和**的色， * 这样叠在深底上呈现的是"颜色的深浅"而不是"灰色的雾"。 */ --dsh-acrylic-tone-a: light-dark(var(--dsw-static-blue-400), #1e4fa8); --dsh-acrylic-tone-b: light-dark(var(--dsw-static-green-400), #17663c); --dsh-acrylic-tone-c: light-dark(var(--dsw-static-amber-400), #9a5a08); /* 壁纸层的整体不透明度。**不能用 `light-dark()`** —— 它只能用于**颜色**类属性， * 而 `opacity` 取的是 ``：实测写 `opacity: var(--x)`（那个变量是 light-dark(...)） * 会整条声明被判非法、回落到初始值 **1**，于是壁纸变成完全不透明（比不调更糟）。 * 所以深色那一档用 DSH 自己的深色钩子单独覆盖，见 §2 末尾。 */ --dsh-acrylic-wallpaper-opacity: 0.62; /* 每个表面的"剩下多少白"。数值越小越透。按面积分： * 壳（base）铺满视口 → 最淡 * 层（layer）是卡片、菜单、对话框 → 稍实一点，字要看得清 * 输入区（input）字最密 → 最实 * 觉得玻璃感不够就**调小**，不是调大 —— 白玻璃叠在浅色壁纸上，浓了就是白的。 */ --dsh-acrylic-base-alpha: 14%; --dsh-acrylic-layer-alpha: 30%; --dsh-acrylic-input-alpha: 46%; --dsh-acrylic-chip-alpha: 34%; /* 层的第二、三级**逐级变实**：`.dsh-genui` 这类扩展用 layer-1 画面板、layer-2 画面板里的 * 卡片，两级同值时层次就消失了。DSH 自己的浅色值也是逐级变的 * （layer-1/2 是 `#fff`、layer-3 仍是 `#fff`，但深色下分别是 `#1b1b1c` / `#232326` / `#2b2b2e`）。 */ --dsh-acrylic-layer-2-alpha: 42%; --dsh-acrylic-layer-3-alpha: 54%; /* 侧栏要比壳体**实一档**：两者用同一个令牌时，深色下它们颜色完全相同， * 侧栏就没有了区分度（实测 frame 与 sidebarCol 都是 rgba(18,16,26,0.19)）。 */ --dsh-acrylic-sidebar-alpha: 30%; /* 壁纸漂移周期：越长越省电 */ --dsh-acrylic-drift: 48s; /* 毛玻璃的饱和度提升。 * ⚠ 这个参数是用户要求"给输入框做毛玻璃"时新加的 —— 不是全站模糊， * 目前只有 §6g 的文本输入框在用（一处、一个元素）。其余地方仍然保持"不模糊"： * 上一版给几十个元素加 backdrop-filter，嵌起来就是一团糊，用户的原话是"糊成散光了"， * 最后整份还原。所以**默认不模糊，要模糊就一处一处指名加**。 */ --dsh-acrylic-saturate: 150%; /* 这里**故意没有"圆角"参数**： * DSH 的对话框、菜单、卡片各有自己的圆角规格，皮肤不动几何。 */ } /* ── §2 唯一的颜色层：壁纸 ────────────────────────────────────────────── * 整个界面只有这一层有颜色。用 fixed 伪元素而不是给 body 加背景， * 这样它待在所有内容后面，且不会参与任何元素的背景计算。 * * ⚠ 渐变盒必须与视口**同尺寸**（`inset: 0`）。 * 第一版写 `inset: -20%` 想给漂移动画留余量，于是元素比视口大 40%， * 而 `radial-gradient(… at 82% …)` 的右边缘落在**元素自身宽度**的 123% 处 —— * 视口之外。结果右半边只剩 `transparent`，看起来像"壁纸只铺了左半边"。 */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: /* 兜底底色：承担主要染色（线性渐变天然均匀，不会一边浓一边淡） */ linear-gradient(118deg, color-mix(in srgb, var(--dsh-acrylic-tone-a) 40%, transparent) 0%, color-mix(in srgb, var(--dsh-acrylic-tone-b) 24%, transparent) 40%, color-mix(in srgb, var(--dsh-acrylic-tone-c) 22%, transparent) 78%, color-mix(in srgb, var(--dsh-acrylic-tone-a) 28%, transparent) 100%), /* 色相来源：四个象限各一团，只做"这是哪儿"的局部差异 */ radial-gradient(58% 66% at 14% 22%, color-mix(in srgb, var(--dsh-acrylic-tone-a) 48%, transparent) 0%, transparent 100%), radial-gradient(58% 66% at 88% 20%, color-mix(in srgb, var(--dsh-acrylic-tone-b) 30%, transparent) 0%, transparent 100%), radial-gradient(60% 68% at 82% 86%, color-mix(in srgb, var(--dsh-acrylic-tone-c) 28%, transparent) 0%, transparent 100%), radial-gradient(62% 64% at 10% 88%, color-mix(in srgb, var(--dsh-acrylic-tone-a) 40%, transparent) 0%, transparent 100%), /* 中带一条很淡的桥，避免左右两半在视觉上"断开" */ radial-gradient(90% 46% at 52% 52%, color-mix(in srgb, var(--dsh-acrylic-tone-b) 18%, transparent) 0%, transparent 100%); /* 浓度跟着主题走（见 §1 的说明：深色下必须更低，否则糊成一片灰罩） */ opacity: var(--dsh-acrylic-wallpaper-opacity); filter: saturate(1.08); } /* 深色模式：DSH 会在 `body` 上加 `data-ds-dark-theme` 属性（它自己的令牌定义里就是这么写的： * `body[data-ds-dark-theme]{--dsw-specific-input-major: …}`）。 * 用这个钩子比 `@media (prefers-color-scheme)` 可靠 —— 它反映的是**应用内**的主题选择， * 而不是操作系统偏好；用户把 DSH 设成深色而系统是浅色时，媒体查询会判错。 */ body[data-ds-dark-theme]::before { opacity: 0.5; } /* 让"色相"可过渡（不声明 @property 的话关键帧之间会硬跳）。 校验器认得这个块 —— 实测过，不会把样式表标红。 */ @property --dsh-acrylic-hue-a { syntax: ''; inherits: true; initial-value: 0; } @property --dsh-acrylic-hue-b { syntax: ''; inherits: true; initial-value: 0; } @keyframes dsh-acrylic-drift { 0% { --dsh-acrylic-hue-a: 0; --dsh-acrylic-hue-b: 0; } 50% { --dsh-acrylic-hue-a: 26deg; --dsh-acrylic-hue-b: -22deg; } 100% { --dsh-acrylic-hue-a: 0; --dsh-acrylic-hue-b: 0; } } @media (prefers-reduced-motion: no-preference) { body::before { animation: dsh-acrylic-drift var(--dsh-acrylic-drift) ease-in-out infinite; } } /* 把 body 自己的底交出去 —— 这是壁纸可见的前提 */ body { background-color: transparent; } /* ── §3 让界面透明：只改令牌 ──────────────────────────────────────────── * 这一段是整个皮肤的核心，也是唯一需要"覆盖"的地方。 * 每个令牌都被若干条规则共用（`bg-base` 有 31 处），所以改一个等于改一片； * 而且**不需要知道任何组件叫什么**，因此不会漏、不会叠。 * * 颜色用 `light-dark()` 一次写两套主题（实测 DSH 的 `color-scheme` 会跟着主题走， * `light-dark()` 在其中正常解析）。 * * ⚠⚠ **这里的选择器同样必须是 `body, body[data-ds-dark-theme]`。** * DSH 的深色令牌定义在 `body[data-ds-dark-theme]{…}`（特异性 (0,1,1)）上， * 只写 `body`（(0,0,1)）会**在深色下被 DSH 压过去** —— 那意味着下面这一整块 * `light-dark(…)` 的深色那一半形同不存在：实测输入卡片的令牌仍是 DSH 的 `#2c2c2e` * 而不是我给的半透明色。这类"浅色下看起来对、深色下悄悄不生效"的错最难发现， * 因为浅色模式一切正常。 */ body, body[data-ds-dark-theme] { /* 最底层：body、frame、tabHost、dockScrim 等 31 处用它 */ --dsw-alias-bg-base: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-base-alpha), transparent), color-mix(in srgb, #16181c var(--dsh-acrylic-base-alpha), transparent)); /* 层：卡片、菜单、对话框、标签条。 * ⚠ **三层的浓度必须彼此区分**，否则"面板里套卡片"的层次会被抹平 —— * 实测 `dsh-genui` 就是靠 `--dsw-alias-bg-layer-1`（面板）⊃ `--dsw-alias-bg-layer-2`（卡片） * 建立层次的：我第一版把三层写成同一个值，结果 GenUI 面板与它里面的候选卡片 * **渲染成完全一样**，看起来像贴在同一张纸上。 */ --dsw-alias-bg-layer-1: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-layer-alpha), transparent), color-mix(in srgb, #1c1f24 var(--dsh-acrylic-layer-alpha), transparent)); --dsw-alias-bg-layer-2: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-layer-2-alpha), transparent), color-mix(in srgb, #262a31 var(--dsh-acrylic-layer-2-alpha), transparent)); --dsw-alias-bg-layer-3: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-layer-3-alpha), transparent), color-mix(in srgb, #30353d var(--dsh-acrylic-layer-3-alpha), transparent)); /* 模块底：铺满一整列，比层再淡一点 */ --dsw-alias-bg-module-platform: light-dark(color-mix(in srgb, #f5f6f7 var(--dsh-acrylic-chip-alpha), transparent), color-mix(in srgb, #1a1d21 var(--dsh-acrylic-chip-alpha), transparent)); /* 侧栏：**用单独一档、比壳体实**。两者同值时深色下颜色完全相同， 侧栏就失去了区分度（实测 frame 与 sidebarCol 都是 rgba(18,16,26,0.19)）。 */ --dsw-specific-sidebar-fill: light-dark(color-mix(in srgb, #f9fafb var(--dsh-acrylic-sidebar-alpha), transparent), color-mix(in srgb, #24272d var(--dsh-acrylic-sidebar-alpha), transparent)); /* 输入相关：字最密，留最多白 */ --dsw-specific-input-major: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-input-alpha), transparent), color-mix(in srgb, #23272d var(--dsh-acrylic-input-alpha), transparent)); --dsw-alias-button-elevated-fill: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-chip-alpha), transparent), color-mix(in srgb, #262a30 var(--dsh-acrylic-chip-alpha), transparent)); /* 设置卡片、文档预览：同一档 */ --dsw-alias-settings-card-fill: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-layer-alpha), transparent), color-mix(in srgb, #1c1f24 var(--dsh-acrylic-layer-alpha), transparent)); --dsw-alias-bg-document-preview: light-dark(color-mix(in srgb, #ebeef2 var(--dsh-acrylic-chip-alpha), transparent), color-mix(in srgb, #1a1d21 var(--dsh-acrylic-chip-alpha), transparent)); /* ---- 内容类表面：行内代码、代码块、标签 ---- * * ⚠ 这一组是**用户报"卡片上的文本背景太白、太突兀"后补的**。 * 根因：`--dsw-alias-markdown-inline-code` 这类令牌**默认是实心近白** * （实测浅色下 `#fafafa`、`alpha: 1`），而我的皮肤只改了"层"那一族令牌， * 没覆盖这一组 —— 于是行内代码在透明界面里像一块**贴上去的白纸** * （实测 155 个近白元素里绝大多数是它）。 * * 修法：映射到皮肤自己的骨架（同样按"面积/密度"分档），而不是保留 DSH 的实心色。 * 深色原值也查过了（DSH 用 `body[data-ds-dark-theme]` 分别覆盖成 * `--dsw-static-neutral-800` / `-bluish-850` 之类），这里统一换成皮肤的两套值。 */ --dsw-alias-markdown-inline-code: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-chip-alpha), transparent), color-mix(in srgb, #292d33 var(--dsh-acrylic-chip-alpha), transparent)); /* 代码块与它的 banner —— 用户先后两次反馈后的取值： * ① 原样（DSH 实心 `#f9fafb`）→ "卡片上的文本背景太白、太突兀"； * ② 改到"层"档（白 30%）→ "2 改成不透明的"； * ③ 改到 92% → "这个卡片没那么透明了"； * ④ 最终定 **75%**（用户原话："透一点，但别像原来那么透"）。 * * 为什么不跟其它表面共用 `--dsh-acrylic-layer-alpha`：代码是要**逐行读**的东西， * 底下的正文透上来会跟代码文字叠在一起（实测代码里是深色文字 `rgb(15,17,21)`）。 * 75% 是"读得清"与"看得出背后有壁纸"之间的平衡点，单独一档、不随全局调。 * banner 比内容区低 3%，保持它与内容之间原来的分层关系。 */ --dsw-alias-markdown-code-block: light-dark(color-mix(in srgb, #ffffff 75%, transparent), color-mix(in srgb, #1c1f24 75%, transparent)); --dsw-alias-markdown-code-block-banner: light-dark(color-mix(in srgb, #ffffff 72%, transparent), color-mix(in srgb, #24282e 72%, transparent)); --dsw-alias-markdown-tag: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-chip-alpha), transparent), color-mix(in srgb, #24282e var(--dsh-acrylic-chip-alpha), transparent)); /* 代码差异块的底色（原来是很实的绿/红），降到与层同档 */ --dsw-alias-code-diff-added: light-dark(color-mix(in srgb, #22c55e 12%, transparent), color-mix(in srgb, #22c55e 16%, transparent)); --dsw-alias-code-diff-deleted: light-dark(color-mix(in srgb, #ec1313 10%, transparent), color-mix(in srgb, #ec1313 14%, transparent)); /* ---- 覆盖层 / 悬浮面 ---- * 这一组默认是**实心浅色**，在透明界面里都会变成突兀的色块。 */ --dsw-alias-bg-overlay: /* 覆盖层（16 处） */ light-dark(color-mix(in srgb, #e9ecf2 var(--dsh-acrylic-layer-alpha), transparent), color-mix(in srgb, #1e2126 var(--dsh-acrylic-layer-alpha), transparent)); --dsw-alias-button-floating-fill: /* 悬浮按钮 */ light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-chip-alpha), transparent), color-mix(in srgb, #262a30 var(--dsh-acrylic-chip-alpha), transparent)); --dsw-alias-bg-mask-drop: /* 拖放遮罩：本来就是半透明白，压淡一档 */ light-dark(color-mix(in srgb, #ffffff 62%, transparent), color-mix(in srgb, #272730 70%, transparent)); /* ---- 状态底色（tertiary）---- * 这些**带色相**（警告淡黄、成功淡绿、业务淡蓝）。不能一律改成中性白 —— * 那会把"这是什么状态"的信息抹掉。所以保留色相、只把不透明度压下来。 */ --dsw-alias-state-warn-tertiary: light-dark(color-mix(in srgb, #f59e0b 14%, transparent), color-mix(in srgb, #f59e0b 16%, transparent)); --dsw-alias-state-success-tertiary: light-dark(color-mix(in srgb, #22c55e 14%, transparent), color-mix(in srgb, #22c55e 16%, transparent)); --dsw-alias-state-business-tertiary: light-dark(color-mix(in srgb, #4176e6 12%, transparent), color-mix(in srgb, #4176e6 18%, transparent)); --dsw-alias-file-diff-added-bg: light-dark(color-mix(in srgb, #22c55e 14%, transparent), color-mix(in srgb, #22c55e 18%, transparent)); --dsw-alias-file-diff-deleted-bg: light-dark(color-mix(in srgb, #ec1313 12%, transparent), color-mix(in srgb, #ec1313 16%, transparent)); /* ---- 交互态（悬停 / 选中 / 激活）---- * ⚠ 这一组**最需要小心**：它们要"看得出来"，全透明化的界面里 * 一个实心浅灰的选中态会像补丁，但压太淡又会失去反馈。 * 所以档位定在 30–46%：可见、但不跳。 */ --dsw-alias-interactive-bg-hover-solid: light-dark(color-mix(in srgb, #0f1115 6%, transparent), color-mix(in srgb, #ffffff 10%, transparent)); --dsw-alias-button-floating-hover: light-dark(color-mix(in srgb, #0f1115 8%, transparent), color-mix(in srgb, #ffffff 12%, transparent)); --dsw-alias-button-ghost-active-fill: light-dark(color-mix(in srgb, #0f1115 9%, transparent), color-mix(in srgb, #ffffff 14%, transparent)); --dsw-alias-button-ghost-active-hover: light-dark(color-mix(in srgb, #0f1115 11%, transparent), color-mix(in srgb, #ffffff 16%, transparent)); --dsw-specific-sidebar-nav-item-hover: light-dark(color-mix(in srgb, #0f1115 6%, transparent), color-mix(in srgb, #ffffff 10%, transparent)); --dsw-specific-sidebar-nav-item-active: light-dark(color-mix(in srgb, #0f1115 9%, transparent), color-mix(in srgb, #ffffff 14%, transparent)); --dsw-specific-sidebar-nav-item-active-accent: light-dark(color-mix(in srgb, #4176e6 12%, transparent), color-mix(in srgb, #4176e6 18%, transparent)); --dsw-specific-selector: /* 下拉选择器的底 */ light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-chip-alpha), transparent), color-mix(in srgb, #262a30 var(--dsh-acrylic-chip-alpha), transparent)); --dsw-specific-bubble: /* 气泡（带淡蓝）*/ light-dark(color-mix(in srgb, #4176e6 10%, transparent), color-mix(in srgb, #4176e6 16%, transparent)); --dsw-alias-turn-trigger-bg: /* 回合触发器：跟随悬停色 */ var(--dsw-alias-interactive-bg-hover); /* ---- 滚动条 ---- */ --dsw-alias-scrollbar-bg-l1: light-dark(color-mix(in srgb, #0f1115 14%, transparent), color-mix(in srgb, #ffffff 16%, transparent)); --dsw-alias-scrollbar-bg-l2: light-dark(color-mix(in srgb, #0f1115 16%, transparent), color-mix(in srgb, #ffffff 18%, transparent)); --dsw-alias-scrollbar-hover-l2: light-dark(color-mix(in srgb, #0f1115 26%, transparent), color-mix(in srgb, #ffffff 30%, transparent)); } /* 注意这里**没有**动下面这些令牌 —— 它们承担"有内容的颜色"，透明化会砸掉语义： * --dsw-alias-button-primary-fill（主按钮的实心蓝） * --dsw-alias-interactive-bg-hover / -active / -hover-danger（悬停与选中反馈） * --dsw-alias-bg-mask-1/2/3（遮罩）、--dsw-alias-bg-skeleton（骨架屏） * --dsw-specific-menu（菜单底，本身已是 58% 半透明，够用） * --dsw-alias-tooltip-bg、--dsw-alias-label-*、--dsw-alias-border-*（文字与描边） */ /* ── §4 容器内部一律透明 ──────────────────────────────────────────────── * 令牌是**继承/共享**的，所以"容器"和"它里面那层同形状的根"往往用的是同一个令牌， * 于是同一个位置被画两遍：实测侧栏容器与它内部的根各自 34%，叠起来实际渲染成 **56%**， * 比设计值浓了一倍。视觉上看不出"两层"，但浓度是错的 —— 而且是那种"怎么调都不对"的错。 * * 所以：**已知容器的内部根，一律透明**，只留最外层那一个容器有外观。 * 这里只用 `background-color` 长写法（不碰 `background-image`、不碰圆角）， * 且只命中"整列型的容器根"，不会波及里面的按钮、卡片 —— 它们靠各自的令牌，照常显示。 * * 为什么不用 `*` 全清：那会把按钮、卡片、徽章的底也清掉（它们本来就该有底）。 * 为什么不用 `[class*="_root"]`：实测命中 19 个元素，其中多个是透明的小控件， * 一刀切会误伤。这里逐个点名，名单由 examples/audit-skin.mjs 核对。 */ :is([data-slot="sidebar"] [class*="_root"], [data-slot="main"] [data-phase], [class*="_centerCol"], [class*="_rightbarCol"]) { background-color: transparent !important; } /* ── §4d 侧栏右面板：内部容器给个不透明底（**只有全屏时**）───────────────── * 用户："改成内部容器不透明白色得了"、"能不能我没有全屏还是透明的，只改CSS行不行"。 * * 全屏面板（`dsh-workbench` 的终端等）铺满整个视口，但它自己链路上每一层 * 都是透明的 —— 底下的聊天界面会透上来。**给内部的 tabHost 一个不透明底** * 就挡住了；而**侧栏（push）状态下保持透明**，因为那时没有东西要盖。 * * ## 怎么用纯 CSS 区分全屏 / push * * 实测 `.P3OORG_panel` 是 `._tabHost_…` 的**祖先**（链路： * `_tabHost_ → _tabCell_ → _tabLayout_ → _surface_ → P3OORG_panelBody → P3OORG_panel`）， * 而 `data-sidebar-right-panel` 属性就在 `P3OORG_panel` 上 * （全屏 `fullscreen`、侧栏 `push`）。所以用 `:has()` 把它串起来即可 —— * **不需要 JS，也不需要在那两个元素之间加任何标记**。 * * ⚠ 这里 `:has()` 是安全的：它是**结构性**判断（tabHost 是不是在这个面板里）， * 而 §4d 早先那版翻车是因为拿 `:has()` 去**追一个会变的属性** * （`:has(.P3OORG_panel[fullscreen])` 在收起时不会重新求值）。这一版把属性 * **写在同一个复合选择器里**，属性一变整条规则就重新匹配，不存在那个问题。 * * ⚠ `:not(._float_…)` 是 DSH 自己的写法：浮动布局下 tabHost 有另一种外观， * 不该被覆盖。`,` 后面那个 `_emptyTabHost_` 是空状态变体。 * * ⚠ 用**精确类名**而不是片段 —— 片段会打到 `_tabHostHeader` / `_tabHostBody` * 等子层，那正是今天栽过多次的"命中太宽"。 * * ⚠ 深色模式用 DSH 的主题属性明确覆盖，不能只靠 `light-dark()`： * 用户点名过"深色模式别漏"。 */ .P3OORG_panel:has(._tabHost_6nhg2_162) ._tabHost_6nhg2_162:not(._float_6nhg2_156), .P3OORG_panel:has(._emptyTabHost_6nhg2_143) ._emptyTabHost_6nhg2_143 { background: #ffffff; } body[data-ds-dark-theme] .P3OORG_panel:has(._tabHost_6nhg2_162) ._tabHost_6nhg2_162:not(._float_6nhg2_156), body[data-ds-dark-theme] .P3OORG_panel:has(._emptyTabHost_6nhg2_143) ._emptyTabHost_6nhg2_143 { background: #16181c; } /* 侧栏（未全屏）状态：撤掉，保持透明 */ .P3OORG_panel[data-sidebar-right-panel='push']:has(._tabHost_6nhg2_162) ._tabHost_6nhg2_162:not(._float_6nhg2_156), .P3OORG_panel[data-sidebar-right-panel='push']:has(._emptyTabHost_6nhg2_143) ._emptyTabHost_6nhg2_143 { background: transparent; } /* ── §5 浮层：唯一允许有"模糊"的地方 ──────────────────────────────────── * 对话框与菜单浮在**内容之上**，背后是文字，纯透明会看不清 —— 所以给它们一层薄雾。 * * ⚠ 三条踩过的坑，全是"命中太宽"： * * ① 必须排除**锚点**：它们是浮层的祖先，会连带被匹配到。实测误伤过 * `_root_4ub78_1._menuAnchor`（「标准模式」触发片）与插件的 `dshCc_menuBtn`。 * * ② **类名片段后面要跟 `-`，否则会命中所有后代。** * 原来写 `[class*="_menu"]`，它命中了 `dshCc_menu` **以及它里面的每一个 span** —— * `dshCc_menuLabel`、`dshCc_menuHint` 都不在 `:not()` 名单里，于是**每个文本元素 * 都被加上了 0.5px 描边**（用户看到的"下拉的文本还有描边框"）。 * 改成 `[class*="_menu-"]` 这种**带分隔符**的片段后只命中真正的容器类。 * * ③ **不要用 `role` 属性选择器。** 原来这里还有 `[role="listbox"]`，它命中了 * 输入框的**斜杠指令候选列表**（`_3e4SsG_viewport`，944×337， * `aria-label="触发候选建议"`）—— 那个列表**自己的容器已经有外观**， * 再给它加一条 1px 描边就成了"内部重复的描边"（用户报的正是这个）。 * 而 `role` 也并不可靠：无障碍角色与"视觉上是不是浮层"并不是一回事。 * DSH 的对话框与菜单**本来就用自己的类名画出外观**，所以 CSS 只需认类名。 * * 用长写法设描边（`border-width/style/color`），不是 `border` 简写 —— 见文件头原则 3。 */ [class*="_dialog"], [class*="_menu-"] { backdrop-filter: blur(28px) saturate(150%); border-width: 0.5px; border-style: solid; border-color: var(--dsw-alias-border-l2); box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 60%, transparent), var(--dsw-elevation-prominent); } /* ── §5b 本插件的元素：一律不参与上面的浮层样式 ───────────────────────── * 即便收紧了 `_menu-`，`[class*="_dialog"]` 与 `[role="…"]` 仍可能命中插件的元素 * （实测 `dshCc_btn` 被加过模糊），所以这里**统一撤销整个 `.dshCc_` 子树**。 * 插件自己的样式表已经把界面调到与 DSH 一致，皮肤不该再糊一层。 * * ⚠ 特异性必须真的赢：`:is(.dshCc_…)` 全是单类，整体只有 (0,1,0)，与 * `[class*="_dialog"]` 同级；用 `html body :is(…)` 抬到 (0,2,1)。 * ⚠ **撤销 ≠ 重设**：撤销只该拿掉，不该赋新值（第一版把圆角塞进撤销那步， * 反而把菜单项的 12px 改成了继承来的 16px）。 * * ⚠⚠ **这里曾经误伤插件自己的毛玻璃**（用户要求"把输入框附近的元素列出来"时发现的）： * `backdrop-filter: none !important` 是"一律关掉"，而插件**自己有三个玻璃表面** * 特意用了 DSH 的毛玻璃令牌： * * `.dshCc_menu` lib/client.js:143 `backdrop-filter: var(--dsw-menu-backdrop-filter)` * `.dshCc_suggest` lib/client.js:326 同上（自动补全浮层） * `.dshCc_selectMenu` lib/client.js:401 同上（选择器下拉） * * 插件源码的注释正好在说这件事："a 58%-opaque fill **with no blur** lets the page * scroll **through** them rather than **behind** them" —— 它知道背景填充是 58% 半透明， * 所以特意配了模糊。**是我的皮肤把它抹掉了**，于是它们退化成"半透明但没模糊"。 * * 修法：把"一律关掉"改成"**只关插件自己没打算模糊的部分**" —— 用 `:not()` 精确放行 * 那三个玻璃表面。放行后它们吃的是**插件自己样式表里的**值（仍是令牌驱动）， * 皮肤不参与，所以不需要 `!important` 去抢。 */ html body :is([class*="dshCc_"], [class*="dshCc_"] *) { border-width: 0 !important; border-style: none !important; box-shadow: none !important; } /* 撤销皮肤可能糊到插件元素上的模糊 —— 但**放行插件自己定义的毛玻璃表面**。 * 只列这三个：它们带着 `backdrop-filter: var(--dsw-menu-backdrop-filter)` 是有意的。 */ html body :is([class*="dshCc_"], [class*="dshCc_"] *):not(.dshCc_menu):not(.dshCc_suggest):not(.dshCc_selectMenu) { backdrop-filter: none !important; } /* ── §6 修掉"渐隐层"：它不该渐隐到颜色，而该渐隐到透明 ────────────────── * DSH 在侧栏会话列表底部放了一层 `.bhn1Oq_fade`（256×24），用来让滚上来的 * 列表行**文字淡出**。它原本是一条 `linear-gradient(transparent, <侧栏底色>)` —— * 在**不透明**的界面上这么做是对的。 * * 但这个皮肤把侧栏底色变成了 34% 半透明，于是这层的终点也跟着变成半透明， * 结果它不是"淡出"，而是**在设置按钮上方留下一条半透明的白带**（用户一眼就看出来了）。 * * 正解是把它改成**真正的渐隐**：让它遮住的不是"颜色"，而是**它自己的内容** —— * 这才是"文本渐隐"该有的语义，而且不依赖任何底色，因此与透明皮肤天然兼容： * * · `background-image: none` 拿掉原来那条"渐隐到颜色"的假淡出； * · 用 `mask-image` 让它自己的内容从下往上淡出（浏览器会自动带上 `-webkit-` 别名， * Chrome 里直接可用；不支持 mask 的环境会退化成"没有淡出"，但**也不会留下白带**）。 * * 这样会话列表滚到底部时，最后几行文字是自然消失的，不会出现一条色带。 * * ⚠ **选择器必须排除"已经有方向遮罩"的那些。** DSH 里 `fade` 家族不止一个： * * x_fade background:linear-gradient(transparent, <侧栏底色>) ← 需要修的就是它 * x_fadeTop mask-image:linear-gradient(#0000 0, #000 24px 100%) ← 顶部渐隐，已有方向 * x_fadeBottom mask-image:linear-gradient(#000 0 calc(100% - 24px), #0000 100%) * _rail-fade-in / _success-fade ← 动画，不是渐隐层 * * 而 `[class*="_fade"]` 会把 `_fadeTop` / `_fadeBottom` **一起命中** —— 我原来那条 * `mask-image` 又带 `!important`，等于把它们的**方向遮反**（顶部渐隐被改成底部淡出）。 * 实测那一版在页面上暂时没炸，只因为当前 DOM 里只有 `_fade` 一个 —— 属于"潜伏的错"。 * * 所以排除掉带方向的后缀与动画类，只留"无方向的渐隐层"（实测这个边界对 * `_fade` / `x_fadeTop` / `y_fadeBottom` / `_rail-fade-in` / `fade-in` 的判断全部正确）。 */ [class*="_fade"]:not([class*="_fadeTop"]):not([class*="_fadeBottom"]):not([class*="-fade-"]) { background-image: none !important; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); } /* ── §6b （已撤销）曾在此给扩展补 --dsl-g-* 变量 ────────────────────── * 我一度认为 `dsh-genui` 引用的 30 个 `--dsl-g-*` 在本环境里全都没有定义， * 于是给它们补了一套映射到 DSH 阶梯的值。**那个判断是错的。** * * 错在哪：我是用 `getComputedStyle(document.body)` 去读的，而 genui 把这些变量 * 定义在 **`.panel` 作用域**内（`body[data-ds-dark-theme] .panel` 里还有深色变体）—— * 在 body 上当然读不到。它自己定义得很完整，而且带**自己的设计尺度**： * 字号 13.5px / 12.5px / 14.5px，圆角 6px / 8px / 12px，间距 4 / 8 / 12 / 16px， * 连 tint 类变量都是"百分比"而不是颜色值。 * * 所以补那套不仅多余，还会**覆盖扩展刻意的紧凑尺度**（我给的 12px 间距 + 16px 圆角 * 比它自己的 12px + 6px 松）。适配第三方扩展的正确姿势是**先读它的定义**， * 不要假定"没定义" —— 作用域内的定义在祖先元素上读不到，这是那次误判的机制。 * * 这条教训与前面几次是同一类：**先量、再改**。这次量错了对象（量了 body 而不是 .panel）。 */ /* ── §6c `dsh-genui` 里三处写死白色的悬停 ─────────────────────────────── * genui 自己有两套悬停实现：八条用 `var(--dsl-g-hover)`（补上 §6b 后就能用）， * 但另外三条**把颜色写死了白色**： * * .V1MMBW_panelToggle:hover { background: rgba(255, 255, 255, 0.04) } * .V1MMBW_panelClose:hover { background: rgba(255, 255, 255, 0.08) } * .V1MMBW_panelTpl:hover { background: rgba(255, 255, 255, 0.08) } * * 浅色模式下那是"白叠白"—— 悬停**完全没有反馈**（实测那三个元素的悬停底色与静止时一样）。 * 这里把它们改成 DSH 自己的交互色，于是跟着主题走。 * * ⚠ 特异性：genui 用的是单类 (0,1,0)，这里加 `html body` 抬到 (0,1,2) 稳赢， * 而且要写在皮肤里（皮肤后注入）。用 `!important` 也行，但那会盖掉扩展将来 * 自己改回令牌的可能 —— 抬特异性更温和。 */ html body [class*="V1MMBW_panelToggle"]:hover, html body [class*="V1MMBW_panelClose"]:hover, html body [class*="V1MMBW_panelTpl"]:hover { background-color: var(--dsw-alias-interactive-bg-hover); } * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--dsw-alias-border-l4) 80%, transparent) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: content-box; background-color: color-mix(in srgb, var(--dsw-alias-border-l4) 80%, transparent); transition: background-color 160ms ease; } *::-webkit-scrollbar-thumb:hover { background-color: var(--dsw-alias-label-tertiary); } *::-webkit-scrollbar-corner { background: transparent; } ::selection { background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 26%, transparent); } /* 焦点环交还 DSH —— 只补 offset，不重写环本身（重写会与全站不一致） */ :focus-visible { outline-offset: 2px; } /* 代码块：半透明底 + 细描边，与整体语言一致；等宽数字更整齐 */ pre, code { font-variant-numeric: tabular-nums; font-variant-ligatures: none; } /* ── §6d 文件卡片改亚克力（用户指定的第 ① 处）────────────────────────── * 用户："1 改成亚克力"（指「已编辑 restore_validated.js」那张卡片）。 * * 实测结构（`hz8-rW_*` 家族，一个"文件改动卡片"扩展）： * * .hz8-rW_card 920×62 bg=白 30% r=16px ← 卡片本体已经是半透明 * .hz8-rW_header 918×60 bg=rgb(245,245,245) ← 里面的头部**不透明** * * 那个不透明的白来自**扩展自己定义的两个令牌**，绑在 DSH 的"静态色"上 * （静态色不随主题、也不随皮肤走 —— 今天已经踩过三次同类问题）： * * .hz8-rW_card { --changes-fill: var(--dsw-static-neutral-50); --changes-hover: var(--dsw-static-neutral-100) } * body[data-ds-dark-theme] .hz8-rW_card { --changes-fill: var(--dsw-static-neutral-850); … } * .hz8-rW_header { background: var(--changes-fill) } * * 修法：**改令牌，不改元素** —— 在卡片作用域里重赋值，头部、以及卡片里其它用 * 同一令牌的地方（`.hz8-rW_tile` 等）会一起变。用实测确认过的**完整类名** * `hz8-rW_card`，而不是 `[class*="hz8"]` 这种片段（片段会打到内部元素，今天栽过 5 次）。 * * 顺带确认：头部的 `border-radius: 0` **不用管** —— 卡片自身 `overflow: hidden` * + 16px 圆角，头部有底也戳不出圆角（实测 918×60 完全落在卡片内）。 */ [class~="hz8-rW_card"] { --changes-fill: light-dark(color-mix(in srgb, #ffffff var(--dsh-acrylic-layer-alpha), transparent), color-mix(in srgb, #1c1f24 var(--dsh-acrylic-layer-alpha), transparent)); --changes-hover: var(--dsw-alias-interactive-bg-hover); } /* ── §6f 代码预览悬浮卡：给它一层实底（用户指定的第 ② 处，真正的那个）──── * 用户澄清："代码预览还是透明的不行，这个出现的条件是鼠标悬浮才显示"。 * * 之前找错对象了 —— 我改的是正文里的行内代码/代码块令牌， * 而用户指的是**鼠标悬浮时弹出的代码预览面板**。实测（悬浮时抓取）： * * ._card_38jqx_9._preview_38jqx_52 872×420 fixed z=100 r=16px * 内联样式只给位置与尺寸；`--dsw-hovercard-bg: #2C2C2E`（它自己的深色默认值） * * 而它为什么是半透明的，是**我的皮肤**造成的，两条规则同特异性、 * `_preview` 写在后面所以赢： * * ._card_38jqx_9 { background: var(--dsw-hovercard-bg) } ← 被覆盖 * ._preview_38jqx_52 { background: var(--dsw-alias-bg-layer-1) } ← 实际生效 * * 它本意是"用图层底、跟主题走"，而我把 `--dsw-alias-bg-layer-1` 改成了 **30% 白** —— * 于是预览面板变成半透明，底下的对话文字透上来，和代码叠在一起。 * （有意思的是：它自己的 `#2C2C2E` 本来是全不透明的，是皮肤把它"透明化"了。） * * 修法：**只给这一张卡**实底，不动 `--dsw-alias-bg-layer-1` 本身 —— * 那个令牌是全局的，改了会影响一大片（今天已经因为"一次改一大片"返工过四轮）。 * 用实测确认的**完整类名** `_preview_38jqx_52`（不是片段，片段会打到内部元素）。 * * 85% 而不是 100%：既保证代码读得清（代码里是深色文字压在浅底上）， * 又保留一丝通透感，与整体的亚克力语言一致。 * 比正文代码块的 75% 更实一点 —— 这块是"悬浮起来逐行读"的地方， * 而且它下面就是正文，透太多会撞字。 * * ## 再补上毛玻璃（用户点名的第 ④ 处："刚刚的代码预览块"） * * 上一轮只给了它实底（修"代码与正文叠字"的问题）。但它是**悬浮卡**， * 背后就是正文文字 —— 这是全站最典型的"背后有东西可糊"的位置（比输入框更典型）。 * 实底 + 模糊一起才是完整的毛玻璃：实底保证代码读得清，模糊保证它"浮"在 * 正文之上而不是"贴"在正文上。 * * 半径给 30px（比输入框的 20px 大）：它是一张 872×420 的大卡、悬浮在密集的 * 正文之上，小半径会在边缘露出可辨认的字形；大一号才把背后的文字彻底推远。 * 面积大、但它只在悬浮时出现（不是常驻重绘），所以这一个可以给足。 */ [class~="_preview_38jqx_52"] { backdrop-filter: blur(30px) saturate(var(--dsh-acrylic-saturate)); background: light-dark( color-mix(in srgb, #ffffff 85%, transparent), color-mix(in srgb, #1c1f24 85%, transparent) ); } /* ── §6g 文本输入框的毛玻璃（用户指定的第 ① 处）────────────────────────── * 用户："需要改的有文本输入框，上面的音乐播放器还有dsh自带的几个控件 * 还有刚刚的代码预览块，你可以先实现文本输入框的，我确认没问题之后把其他的改了"。 * * ## 为什么只加在 `.uV2eYG_card` 这一个元素上 * * 实测输入卡片那一带的层级（从上到下）： * * uV2eYG_input 透明 * uV2eYG_grow 透明 * uV2eYG_scroll 透明 * uV2eYG_card 白 46% r=28px ← **只有这一个有底** * uV2eYG_root 透明 * composerStack 透明 * * `backdrop-filter` 要加在**拥有底色的那个元素**上 —— 加在透明的包装层上 * 就是"外面糊、里面透明"（这个错我今天犯过，用户当场指出）。 * * ## 为什么它确实需要毛玻璃 * * `wSkVaW_composerSeat` 实测是 **`position: sticky; z-index: 7`**， * 它位于滚动容器**内部** —— 也就是正文会**从它底下滚过去**。 * 这正是"会移动导致下面有文本"的场景，所以模糊有意义（不是给静态区域白加）。 * * ## 验证方式（不是看截图猜） * * 背后是平滑壁纸时，20px 模糊**肉眼看不出差别** —— 所以我在卡片背后临时插了一条 * 高对比黑白竖纹（`repeating-linear-gradient(90deg,#000 0 6px,#fff 6px 12px)`）： * * 有 blur → 竖纹被糊成一片平滑的灰（截图确认） * 无 blur → 竖纹清晰可见 * * 这条"造高对比背景来验证模糊"的办法值得留给以后 —— 它把"看起来没变化" * 和"真的没生效"区分开了（今天就吃过一次亏：`frame` 的 blur 写了但从未生效）。 * * ⚠ 半径取 20px 而不是更大：这个元素在滚动时会跟随重绘，半径越大采样越贵； * 而它面积只有 952×98，20px 已经足够把背面内容糊干净。 */ [data-composer-card="true"] { backdrop-filter: blur(20px) saturate(var(--dsh-acrylic-saturate)); } /* ── §6h 音乐播放器的毛玻璃（用户点名的第 ② 处）────────────────────────── * 用户："需要改的有文本输入框，**上面的音乐播放器**还有dsh自带的几个控件 * 还有刚刚的代码预览块"。 * * 实测这一族（只有三个元素**有底**，其余全是透明的）： * * .dsh-music-bar 952×34 白 30%（走 `--dsw-alias-bg-layer-1`，皮肤已给）圆角 8px * .dsh-music-bar-btn 24×24 白 42% 圆形（±、播放、停止） * .dsh-music-mode-trigger 24×24 白 42% 圆形（顺序播放、音量、播放列表） * .dsh-music-bar-wrap 1622×34 **透明** ← 不加 * * 它的背景本来就是 `--dsw-alias-bg-layer-1` 令牌 —— 也就是皮肤把它变半透明的， * 所以这里**只需要补模糊**，不用动颜色（改颜色会让它与其它表面脱节）。 * * ⚠ 只列这三个有底的元素。`-wrap` 是透明的包装层 —— 给它加就回到"外面糊、 * 里面透明"（用户纠正过的那个错）。也**不用** `[class*="dsh-music"]` 这种片段： * 它会连名字/歌手/进度条一起糊，而它们都没有底、糊了没有意义还白付采样。 * * ⚠ 半径 20px：与输入框同一档。它面积只有 952×34（比输入框小得多）， * 20px 足够；按钮更小（24×24），同半径下采样量可以忽略。 * * ## 底色统一到与输入框一样（用户后续要求） * * 用户："把音乐控件的透明度改的和输入框一样"。 * * 实测三者的底色**原来各不相同**（因为走的不是同一个令牌）： * * .uV2eYG_card （输入框） 白 **46%** ← 基准（`--dsw-specific-input-major`） * .dsh-music-bar（音乐条本体） 白 30% ← 走 `--dsw-alias-bg-layer-1` * .dsh-music-bar-btn（按钮） 白 42% ← 走 `--dsw-alias-bg-layer-2` * * ⚠ 为什么**不能靠改那三个令牌**统一：它们是**共享**的（`-bg-layer-1` 有 60 处引用、 * `-input-major` 有 10 处），改令牌会把别的表面一起动 —— 那正是用户今天返工过四轮的原因。 * 所以这里**只给音乐控件这三个元素**直接设底色，把它们"钉"在输入框那一档。 * * 数值与输入框**同源**：直接引用 `--dsh-acrylic-input-alpha`， * 且深/浅两套色值与 `--dsw-specific-input-major` 的定义**逐字一致** * （`#ffffff` / `#23272d`）。这样以后只要在 §1 改那**一个**参数， * 音乐控件与输入框会一起变 —— 不会出现"改了输入框、音乐条忘了跟"的漂移。 */ .dsh-music-bar, .dsh-music-bar-btn, .dsh-music-mode-trigger { backdrop-filter: blur(20px) saturate(var(--dsh-acrylic-saturate)); background-color: light-dark( color-mix(in srgb, #ffffff var(--dsh-acrylic-input-alpha), transparent), color-mix(in srgb, #23272d var(--dsh-acrylic-input-alpha), transparent) ); } /* ── §6i DSH 自带的控件：底部面板（用户点名的第 ③ 处）──────────────────── * 用户："需要改的有文本输入框，上面的音乐播放器**还有dsh自带的几个控件** * 还有刚刚的代码预览块"。 * * 先把"哪些算 DSH 自带"量清楚 —— 扫描全页符合 DSH 类名形式（`_`）的 * 有底元素，其中**真正属于 DSH 的核心控件**是底部面板这一组： * * .nArs4W_bottomPanel 1634×221 白 30% 整块面板 * .nArs4W_tabBar 1634×35 白 30% 它顶部的标签条 * .nArs4W_pane 1634×220 白 **14%** 面板内容区（比整块更淡） * * ⚠ **不给 `nArs4W_pane` 加**：它实测只有 14%（"平台"那一档），而且是**嵌在 * `bottomPanel` 内部**的 —— 给内外两层都加 blur 就是"同一片玻璃叠两层"， * 正是前面栽过的那种。面板整体已经有模糊，透过它的内容就已经是糊的。 * 这一条与之前"每层都加"的返工教训一致：**一片玻璃只糊一次**。 * * ⚠ **也不给** `_tabHost_6nhg2_162`（右栏）加：它是整列 861×938，背后同样只有壁纸， * 而且用户这次没提右栏。宁可少做，不要又铺开一片。 * * ⚠ 用实测确认的完整类名（`nArs4W_` 前缀），不用 `[class*="bottomPanel"]` 这类片段 —— * 片段会打到内部元素，今天已经栽过多次。 */ .nArs4W_bottomPanel, .nArs4W_tabBar { backdrop-filter: blur(20px) saturate(var(--dsh-acrylic-saturate)); } /* ── §6j 两个"看起来透明"的面板：命令面板与 GenUI 面板 ──────────────────── * 用户："输入框的命令面板和genui的面板还是透明的没有模糊"。 * * 这两个面板**结构完全不同**，所以修法也不同 —— 先把两者量清楚： * * ① 命令面板（输入 `/` 弹出） * ._surface_ri079_1 952×400 bg=**透明** bf=— * ._material_ri079_21 952×400 bg=白 58% bf=**blur(40px)** ← 玻璃层 * ._3e4SsG_viewport 944×392 bg=透明（内容） * * **它的模糊一直在！**（DSH 的 `--dsw-menu-backdrop-filter` = 40px） * 真正的问题是那层玻璃的**填充只有 58%** —— 糊过的背景仍能透出 42%， * 所以看上去"还是透明的"。 * * ⬅ 我一开始误判成"模糊没渲染"，还编了个 `z-index:-1` 的解释。用高对比竖纹 * 一比才看清：条纹在 58% 下是"灰底带淡竖纹"＝**已经糊了**， * 在 85% 下才彻底看不见。**决定性变量是填充浓度，不是模糊。** * （教训：把"糊了但太透"误读成"没糊"，会让人去修错的地方。） * * ② GenUI 面板（`render_ui` 的会话面板） * .V1MMBW_panel 922×642 bg=白 30% bf=**—** ← 有底、无模糊 * * 它和输入框一样：**自己有底、但没有任何模糊** —— 所以【直接加 blur】即可。 * * 两处都用竖纹验证过（条纹插在背后）： * · 命令面板：填充提到 85% 后条纹被糊掉且几乎不可见 * · GenUI 面板：加 blur 后条纹被糊掉，内容清晰 * * ⚠ 命令面板**不动它自己的 `backdrop-filter`** —— 它读的是 * `--dsw-menu-backdrop-filter`（40px），比我给的半径更足，改它没有意义。 * 只覆盖填充浓度这一件事。 * * ⚠ 用**子代组合**（`._surface_ri079_1 > ._material_ri079_21`）而不是单独的材料层类名： * 实测全页只有一处材料层，但限定在"命令面板的子元素"上更稳 —— * 万一别的浮层也用同一个材料类，不会被我一起改浓。 */ /* 材料层的填充浓度（**输入框附近的三个下拉 + 命令面板共用这一层**）。 * * 取值过程： * · 58%（原值）—— 太透，底下正文透上来； * · 85% —— 用户判"还没好"（滚动正文仍能透出可辨认的字形）； * · 95% —— 不透了，但**磨砂感也没了**（95% 把模糊完全盖住）； * · 80% —— 用户："下拉列表没事可以改低"； * · **46%** —— 用户："下拉还不够透明改成和输入框一样的"。 * * ## 最终值 = 输入框那一档，而且**同源引用** * * 直接引用 `--dsh-acrylic-input-alpha`，色值与 §3 的 `--dsw-specific-input-major` * （输入框用的令牌）**逐字一致**（`#ffffff` / `#23272d`）。 * 这样以后改 §1 那**一个**参数，输入框 / 音乐条 / 下拉会一起变，不会漂移。 * * ## 为什么"更透反而更像毛玻璃" * * 这一层有 40px 模糊（`--dsw-menu-backdrop-filter`），只是那段模糊在浏览器的 * 合成层里**渲染不出来**（见 §6j 的完整排查）。填充浓度决定"**糊过的背景能透出多少**"： * * 95% → 透出 5% = 不透明的白卡片（磨砂感被盖住） * 80% → 透出 20% = 有一点磨砂感 * 46% → 透出 54% = 与输入框一致的"玻璃感" * * ⚠ 这一层被三处共用：命令面板、附件 listbox 菜单、权限菜单、模型下拉 * （实测它们的材料层尺寸分别是 952×400 / 952×343 / 144×144 / 248×76）。 * 改这一个值三处一起变 —— 这是有意的，它们本来就该长得一样。 */ ._surface_ri079_1 > ._material_ri079_21 { /* ── ⚠ 这里**不要**再给它加任何东西 —— 它本来就是好的 ──────────────── * * 这一层的 `backdrop-filter` 来自 DSH 自己的令牌 * （`--dsw-menu-backdrop-filter` = `blur(40px) saturate(150%)`，见 §6j）， * **它是正常渲染的**。菜单读起来是实底 + 磨砂的，一直没问题。 * * 我曾经在这里绕过一大圈，写了一整套"这个组件糊不了"的排查记录。 * **那个结论是错的。** 真正的原因是同一时间我在 `lib/client.js` 里加了一段 * 示例代码，里面有一句： * * material.style.backdropFilter = 'none'; // ← 把菜单自己的模糊关掉了 * * 我为了让自己新建的那层去糊，先把原来能用的模糊禁用了 —— 于是"模糊没了"， * 而我又拿这个结果去论证"引擎不渲染"。**是自己制造的故障，再拿它当证据。** * 那段扩展示例代码已经整体撤销（`git checkout -- lib/client.js`）。 * * 教训有两条，都写在这里： * ① **改之前先确认现状**。用户说"之前是好的"时，第一件事应该是查 * 「我最近改了什么」，而不是去研究引擎。 * ② 我在这上面的"验证"误判过两次，都源于同一个毛病 —— 验证手段本身 * 改变了被测对象（插 DOM 触发 React 重渲染、把填充从 46% 降到 12% * 再拿亮度变化当证据）。**可靠的判据只有"看菜单背后的文字糊不糊"。** * * 保留 46% 的填充：与输入框同档，这是刻意的（用户明确要求过对齐）。 */ background: light-dark( color-mix(in srgb, #ffffff var(--dsh-acrylic-input-alpha), transparent), color-mix(in srgb, #23272d var(--dsh-acrylic-input-alpha), transparent) ); } /* ── §6j-2 菜单里的**单个选项**：给它们自己的实心底 ───────────────────────── * 用户："不是整个菜单而是单个选项"、"要有一样的底座实心的就行"、"不要透明显示"。 * * 原本每个 `_3e4SsG_item` 都是透明的，只有鼠标悬停的那一项才有底 —— * 于是整列选项看起来"浮"在菜单底板上，没有条目感。这里给每一项一个**不透明**的 * 底，各项之间就有了分隔。 * * ⚠ **取值是"不透明"而不是跟菜单一样半透明。** 第一版用了与输入框同档的 * `--dsw-specific-input-major`（46%），用户立刻指出"不要透明显示" —— * 那 46% 会把菜单背后的正文透上来，压在选项的文字上，读起来发花。 * 改成 `light-dark(#ffffff, #23272d)` 之后文字清晰、条目分明。 * （教训：这一类"底"要的是**可读性**，跟界面其它地方的"玻璃感"不是一回事。） * * ⚠ **必须带强声明。** §4 那条 `[class*="_centerCol"] { background-color: * transparent !important }` 的覆盖面是**整棵子树**，菜单正好长在里面， * 不带强声明的话这里写了也不生效（实测：加了规则但计算值仍是 `rgba(0,0,0,0)`）。 * * ⚠ 用 `[class~="…"]` 精确匹配而不是 `[class*="…"]`：后者会连带命中 * `_3e4SsG_itemIcon` / `itemName` / `itemAlias` / `itemDescription` * —— 那样每个选项里会叠出四五个色块。这类"片段命中太宽"今天已经栽过多次。 * * ⚠ `margin-block: 2px` 是**上下各 2px → 实际缝 4px**（相邻项的外边距叠加）。 * 最初各项是 0 间隙、34px 高，紧挨着像一整条；加 2px 之后实测相邻缝 4px， * 条目之间有了分隔，菜单总高从 343 涨到 375 —— 仍在 DSH 的 `max-height: 400px` * 之内，不会把菜单撑出滚动条。 * * ⚠ 只有 `background-color` 带强声明 —— 它要压过 §4 那条 `_centerCol` 的 * 透明化。`margin` / `border-radius` **不带**：没有任何规则跟它们抢， * 加了只是白白抬高强声明的计数（审计有上限 18 处，是硬门禁）。 */ [data-trigger-menu] [class~="_3e4SsG_item"] { background-color: light-dark(#ffffff, #23272d) !important; border-radius: 12px; margin-block: 2px; } /* ── §6j-3 抬高菜单的高度上限 —— 上面那 2px 间隔会把滚动条挤出来 ────────── * 用户："你加间隔把滚动条干出来了，把最大高度改一下"。 * * **根因**：DSH 把可用高度**写成内联样式**（实测 `style="max-height: 374px; …"`）， * 它按"触发器到屏幕边缘还剩多少"算。加了 2px 间隔后内容长了 32px， * 内联值也跟着算到 374 —— 但内容量到 367px、可视区只有 366px，**差 1 像素**， * 于是 `_3e4SsG_viewport`（`overflow-y: auto`）就冒出了滚动条。 * * ⚠ **不能用 `max-height: none`**：那样菜单会一直顶到屏幕底部。 * 取一个比内容大、又明显小于整屏的值（560px）—— 菜单自然高度是 375px， * 560 留了充足余量；而它仍会在真正放不下时被 DSH 的锚点逻辑约束。 * * ⚠ 必须带强声明：内联样式在层叠里级别最高，不带强声明压不过它。 */ [data-trigger-menu] { max-height: 560px !important; } /* ⚠ 这里必须用**精确类名** `[class~="V1MMBW_panel"]`，不能用片段 `[class*="V1MMBW_panel"]`。 * 我第一版就写成了片段 —— 它把 `panelHeader` / `panelToggle` / `panelBadge` / * `panelTitle` / `panelTpl` / `panelClose` **全部命中**（全页从 11 个带模糊的元素 * 涨到 20 个），也就是**同一个面板里叠了七层模糊** —— 正是前面栽过的那种。 * 片段选择器与"命中太宽"是同一个坑，今天已经栽过五次，这是第六次。 */ [class~="V1MMBW_panel"] { backdrop-filter: blur(30px) saturate(var(--dsh-acrylic-saturate)); } /* ── §6k 所有面板型覆盖层：设置、远程访问、任务面板、抽屉、弹窗… ────────── * 用户："把所有的覆盖层也检查一遍比如设置面板，这种的要模糊"。 * * ## 怎么找齐的 * * 没有靠"一个个点开" —— 那样既慢又会打乱用户的会话。改为**从样式表里枚举**： * 扫全部 CSS 规则，筛出选择器含 overlay / modal / dialog / sheet / portal / * popover / drawer / panel，**有 z-index、有底色**的那些 —— 得到 **31 个**。 * * ## 再按"是不是面板"分两类 * * **要模糊的（面板）**：有底、有 z-index、是一个**内容容器**。就是下面这一批。 * * **不要模糊的（遮罩/背板）**：`bg-mask-1` / `bg-mask-drop` / `rgba(0,0,0,.45)` * 这类**全屏暗化层** —— 它们的功能是"把背后的东西压暗"，糊了只会让整屏发虚， * 而且它们**没有自己的边界**（全屏），加模糊就是缩小版的"糊成散光"。 * 例：`_7D6uKa_modalBackdrop`、`dsh-music-picker-overlay`、`lc-modal-backdrop`、 * `dsh-sh__modal-overlay`、`dsh-sh__drawer`、`_7rgC5q_backdrop`。 * * ## 已经自带模糊的（不动它们） * * `JObwrW_panel`、`bRhRbq_panel`、`_7yHdaG_panel::before`、`Nqubda_panel::before` * —— 它们读 `--dsw-menu-backdrop-filter`，本来就是 DSH 的毛玻璃。 * * ## 实测 * * 打开**设置面板**那一个（`.`VOzbGW_panel`，800×800，白 42%）实测量过： * 它的祖先链是 `VOzbGW_overlay → BODY → HTML`，**没有 isolate / transform / filter** * —— 所以模糊**真的渲染**（截图确认：面板背后的正文被糊掉、不可辨认）。 * 这与命令面板不同（那个是合成层问题，见 §6j）。 * * ⚠ 全部用**完整类名**。这一批有 20 多个，正是最容易滑向片段选择器的地方 —— * 而片段会打到 `panelTitle` / `panelClose` 这类内部元素（§6j 刚栽过）。 * 用完整类名的代价是 DSH 换版本会失效，但失效是**温和**的（少一处模糊，不会坏界面）。 */ .VOzbGW_panel, .fThDlq_panel, ._dialog_o6lrb_33, .JqwYuG_panel, ._367UGW_taskPanel, ._367UGW_dialogCard, ._6TTfZq_panel, .d2hvtW_jobsDrawer, .lyqg2a_panel, .nUhMVa_opPanel, ._7rgC5q_dialog, ._7rgC5q_popover, .dsh-music-panel, .dsh-music-lyric-panel, ._44HXVa_overlay, .l5v9sv_editorOfficeOverlay, .tQSFJa_onboardingOverlay { backdrop-filter: blur(30px) saturate(var(--dsh-acrylic-saturate)); } /* ── §6l 返回底部按钮（用户："返回底部按钮没用毛玻璃"）────────────────── * 实测：`.EvIC1a_toBottom` 34×34，白 34%，**无模糊** —— 悬浮在对话正文之上。 * * 它是最典型的"背后有东西可糊"的小控件：正文从它底下滚过去， * 而且它是圆形的、面积很小，采样成本可忽略。 * * 半径给 20px（与输入框同档）：它只有 34×34，比输入框小得多，20px 足够； * 半径越小边缘越干净，这对小圆形控件尤其重要。 */ .EvIC1a_toBottom { backdrop-filter: blur(20px) saturate(var(--dsh-acrylic-saturate)); } /* ── §7 终端：盖一层浅色底，因为它的主题改不了 ────────────────────────── * 现象：皮肤装上后右侧终端**变成纯黑**（用户一眼看出"之前不是白的吗"）。 * * 根因分两步，都是实测出来的： * * 1) **黑底不是皮肤加的，是终端本来就黑的。** xterm 用**内联样式**写了 * `background-color: rgb(0, 0, 0)`（在 `.xterm-scrollable-element` 上）， * 并配了浅灰文字 `rgb(115,117,118)`。以前看不到黑，是因为 DSH 的 * `_UE8Aa_screen` / `.xterm-viewport` 是不透明白底把它**盖住**了； * 皮肤把那层白底变成 14% 半透明之后，黑底就露出来了。 * * 2) **这个主题 CSS 改不了。** DSH 把 `ctx.theme.getTheme()` 作为 **JS 主题对象** * 交给 xterm（`lib/client.js` 里 `hooks: { theme }`），颜色是 JS 写的内联样式。 * 实测：覆盖 `--terminal-cursor-cell-background` 等一组 `--terminal-*` 变量后， * 内联的 `rgb(0,0,0)` **一字未动** —— 那些变量不是它的主题来源。 * * 所以只能**盖**，而且浓度不能低：文字是 `rgb(115,117,118)`（偏浅）， * 压在薄底上会看不清。92% 白实测可读（相当于深灰字压浅底）， * 而且仍能透出一点壁纸，与整体材质一致。 * * 用 `!important` 是必要的：要压过 xterm 的**内联样式**。这是整个皮肤里唯一 * 必须跟第三方内联样式抢优先级的地方，所以注释写清楚原因。 * 也不做"完全透明"—— 终端是等宽文本，需要稳定底色才看得清。 * * ⚠ **浓度必须跟着主题走，不能写死白色。** 第一版就是写死 `#ffffff`， * 结果**深色模式下终端也变成白底**（用户立刻看出来了）。 * 用 `light-dark()` 给两套值，而且它们各自的理由不同： * · 浅色 → 接近白的底。字是浅灰 `rgb(115,117,118)`，压浅底可读； * 不盖的话会露出 xterm 的黑底，浅色界面里一块黑很突兀。 * · 深色 → 接近 DSH 深色底（`--dsw-alias-bg-base` 在深色下是 `#151517`）的底。 * 终端**本来就是深色主题**（黑底浅灰字），深色模式下它是顺理成章的， * 只要让这层底与界面同色系，而不是纯黑或纯白。 */ .xterm-viewport, .xterm-scrollable-element, .xterm-screen { background-color: light-dark( color-mix(in srgb, #ffffff 92%, transparent), color-mix(in srgb, #151517 92%, transparent) ) !important; } /* ── §7b `dsh-genui` 面板滚不到底 —— 查清根因，但**不在皮肤里修** ────── * 用户报："面板没办法滚动到底部，或者滚动到底部但是看不到"。 * 读扩展源码（`src/client/panel.tsx` + `GenuiBlock.module.css`）+ 实测布局链后的结论。 * * ## 事实 * * .panelBody { height: 360px; overflow-y: auto } ← 固定高，自己滚 * .panel { overflow: hidden } ← 面板裁剪 * 面板挂在 `conversation.input.dock`（输入框上方的座位区） * * 实测（1914×938 视口）：座位区 `composerSeat` 共 707px 且**自身已在溢出** * （`scrollHeight` 等于容器高，说明内容装不下），面板只拿到 **170px**， * 而 body 是 **360px** —— **超出面板约 190px 被裁掉**，于是"滚得到底但看不见"。 * * ## 为什么不在皮肤里修（四次尝试全败，记下来免得再试） * * | 尝试 | body 高 | 面板高 | * | --- | --- | --- | * | 原样 | 360 | 170 | * | `flex-shrink: 0` | 360 | 170 | * | `flex-shrink: 1` / `min-height: 0` | 360 | 170 | * | `height: auto` | 360 | 170 | * | `max-height: calc(40vh - 160px)` | 215 | **170 → 102** | * * 两个机制原因： * ① **面板是 `display: block`，不是 flex 容器** —— body 在块布局里不是 flex 子项， * 所有 flex 属性对它无效（扩展的 `.panel` 没声明 display，默认就是 block）。 * ② **面板自己的高度会跟着缩**（170 → 102）：它由座位区的内容分配决定， * 而座位区已经装不下里面的东西。我压 body，面板就一起压，净效果更差 —— * 第一版甚至让用户**看到更少**内容。 * * ## 真正的修法（属于扩展的布局 bug） * * 面板缺的是"**高度受约束的 flex 上下文**"：让 `.panel` 成为 flex 列、 * `.panelBody` 用 `flex: 1 1 auto; min-height: 0` 吃掉剩余空间；或者由座位区 * 给面板一个明确的高度上限。这不该由皮肤用 `!important` 去抢 —— * 皮肤越权只会把问题挪个位置，而这次四处尝试已经证明"挪不动"。 * * 所以这里**只留结论，不留规则**：先前那条 `max-height` 已撤回。 * 把"查过了、不是皮肤的锅、原因是什么"写下来本身就是交付物 —— * 下一次（我或别人）看到同一现象时不必再花四轮试错。 * * ## ✅ 实际采用的"凑合改法"（用户要求先在皮肤里兜住） * * 上面那条结论说"不该皮肤修"，但用户要的是**能用**。所以这里给一个最小、 * 可逆的兜底 —— 做的事正好是上面写的"真正修法"，只是由皮肤来实施： * * ① 把面板变成 **flex 列**并给一个**随视口的高度上限** → 它不再无限高； * ② body 用 `flex: 1 1 auto; min-height: 0` 吃掉剩余空间 → 不再溢出被裁。 * * 上限 `calc(100vh - 260px)` 由实测倒推：面板上方有题头与输入卡片、 * 下方还有页脚，260px 是它们加起来的下限余量；下限 160px 保证矮屏仍能滚。 * * 这是**替扩展打的补丁**，所以要认账： * · 用 `[data-genui-panel]` 这种扩展**自己声明的**属性（不是哈希类名）， * 它换构建也不会失效； * · 只动"高度分配"，不碰它的配色与圆角 —— 扩展将来自己修好时，这两条 * 与它的新布局不会冲突（flex 列 + 让 body 吃剩余空间本来就是它该有的写法）； * · 万一将来冲突，删掉这一段即可，不影响皮肤其它部分。 */ [data-genui-panel="true"] { display: flex; flex-direction: column; max-height: clamp(160px, calc(100vh - 260px), 640px); } [data-genui-panel="true"] > [data-genui-panel-body] { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; } /* ── §8 降级 ──────────────────────────────────────────────────────────── * `light-dark()` 或 `color-mix()` 不可用时（很老的引擎），令牌会解析失败 —— * 那时界面保持 DSH 原本的纯色，**不会坏**，只是没有亚克力效果。 * 这是有意的：宁可退成原样，也不要退成"半坏的透明"。 */ @supports not (color: light-dark(#000, #fff)) { body { --dsh-acrylic-base-alpha: 0%; --dsh-acrylic-layer-alpha: 0%; --dsh-acrylic-input-alpha: 0%; --dsh-acrylic-chip-alpha: 0%; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }