dsh-shell-themes 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +68 -0
- package/cordis.patch.yml +19 -0
- package/package.json +39 -0
- package/src/index.mjs +122 -0
- package/src/themes.mjs +263 -0
- package/themes/aurora-glass/content.css +1198 -0
- package/themes/aurora-glass/theme.json +19 -0
- package/themes/native/content.css +14 -0
- package/themes/native/theme.json +19 -0
|
@@ -0,0 +1,1198 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
* DSH — 液态玻璃 (Liquid Glass) 主题 v15
|
|
3
|
+
* ----------------------------------------------------------------------------
|
|
4
|
+
* 设计方向：Apple Liquid Glass —— 在流动的环境光 (Aurora) 之上叠加
|
|
5
|
+
* 半透明磨砂面板，用「内高光描边 + 外层柔影 + 圆角」刻画出玻璃边缘的
|
|
6
|
+
* 液态高光。规则全部以 body 前缀提升特异性，压过运行时注入的组件样式。
|
|
7
|
+
*
|
|
8
|
+
* 本文件是 dsh-electron 桌面壳的**内置主题数据**，属于 dsh-shell-themes 包的
|
|
9
|
+
* themes/aurora-glass/。壳启动时把该包经 `dsh plugin add file:` 装入 web profile；
|
|
10
|
+
* 插件在 webserver/index-inject 时把本文件作为 <style> 注入每次渲染的 index.html
|
|
11
|
+
* <head>（第一帧即生效，不改写 dsh 前端 dist）。改主题只需改本文件再重载窗口。
|
|
12
|
+
*
|
|
13
|
+
* 覆盖策略：
|
|
14
|
+
* 1. 先重映射 --dsw-alias-* / --dsw-specific-* 设计令牌（结构性、稳健）；
|
|
15
|
+
* 2. 再对关键表面（三栏、头部、输入卡、气泡、卡片、浮层）做玻璃化。
|
|
16
|
+
* 浅色 / 深色两套均支持，由 body[data-ds-dark-theme] 区分。
|
|
17
|
+
*
|
|
18
|
+
* ── v3 性能优化 ─────────────────────────────────────────────────────────
|
|
19
|
+
* 之前大量表面同时使用 backdrop-filter: blur(...) saturate(...)，
|
|
20
|
+
* 而且背景层还在持续动画，导致浏览器每帧都要对背景重新采样模糊，
|
|
21
|
+
* 在滚动/交互时明显卡顿。v3 的取舍：
|
|
22
|
+
* · 去掉所有 saturate()（颜色矩阵滤镜很贵）；
|
|
23
|
+
* · 大幅调低 blur 半径；
|
|
24
|
+
* · 大块三栏、细条状态卡不再用 backdrop-filter（改回半透明渐变 + 内高光，
|
|
25
|
+
* 视觉仍是玻璃，但不再每帧重模糊）；
|
|
26
|
+
* · 只在「真正需要毛玻璃的小面积」保留 backdrop-filter（头部、输入 Hero 卡、
|
|
27
|
+
* 消息气泡、任务坞、浮层）；
|
|
28
|
+
* · 背景动画只走 transform（不缩放、避免重栅格化），并新增一层飘浮光斑，
|
|
29
|
+
* 让背景“活”起来。
|
|
30
|
+
* ── v9 修复 ─────────────────────────────────────────────────────────────
|
|
31
|
+
* · 顶部标签（对话/轨迹）文字颜色原先写在无主题前缀的共享规则里
|
|
32
|
+
* （浅灰/近白，是深色配色），浅色模式下几乎不可读 —— 拆分为深浅两套；
|
|
33
|
+
* · 浮层 backdrop-filter 残留的 saturate(170%) 与 v3「去掉所有 saturate」
|
|
34
|
+
* 的约定矛盾 —— 移除并把 blur 24 → 18。
|
|
35
|
+
* ── v10 修复 ─────────────────────────────────────────────────────────────
|
|
36
|
+
* · 会话列左右宽度拖拽把手（dsh-client-ui-conversation 的
|
|
37
|
+
* .wSkVaW_widthHandle）默认会在 hover 时弹出一根 3px×104px 的跟手
|
|
38
|
+
* 彩色竖条，在玻璃环境里显得突兀 —— 与侧栏把手统一为 1px 极细
|
|
39
|
+
* 磨砂分隔线（平时近不可见，悬停/拖拽泛蓝光），热区与拖拽功能不变。
|
|
40
|
+
* ── v11 修复 ─────────────────────────────────────────────────────────────
|
|
41
|
+
* · 侧栏会话树（工作区/会话列表，[data-slot="sidebar.workspaces"] 内
|
|
42
|
+
* 的 [role="tree"]）并不是浮层，却被第 8 节「浮层：[role="tree"]」
|
|
43
|
+
* 通用规则涂成近不透明白面板（浅色 rgba(250,252,255,.94) / 深色
|
|
44
|
+
* rgba(24,30,48,.92)）+ blur(18px) —— 这就是会话列表区域“一整块白、
|
|
45
|
+
* 与玻璃侧栏割裂”的来源。为侧栏内的会话树剥掉这层浮层涂装并压成
|
|
46
|
+
* 透明，让玻璃侧栏的半透明渐变完整连贯地透出；会话行悬停/选中的
|
|
47
|
+
* 玻璃微光仍由第 11 节既有 .YDXeBa_sessionRow 规则负责。
|
|
48
|
+
* ── v12 修复（实测驱动） ─────────────────────────────────────────────────
|
|
49
|
+
* · 正文被极光洗掉：两层全屏极光 z-index 为 0 且位于 DOM 末尾，实测
|
|
50
|
+
* （elementFromPoint 探针 + 阳性对照）确认它们绘制在会话/输入区内容之上，
|
|
51
|
+
* 正文对比度由 18.9:1 掉到最亮处 4.04:1 并随 breathe 脉动 —— 根因是
|
|
52
|
+
* 绘制顺序，不是配色。改为把应用框架 .pI_x6G_frame 抬到 z-index: 1。
|
|
53
|
+
* · 右栏玻璃底从未生效：前端已把 .pI_x6G_detailsCol 改名为
|
|
54
|
+
* .pI_x6G_rightbarCol（实测 DOM 中 detailsCol 0 个、rightbarCol 1 个），
|
|
55
|
+
* 第 3/10/13 节共 4 处选择器同步改名。
|
|
56
|
+
* · 气泡玻璃化整段失效：类名已从 .gdEzaW_bubble 改为 .Sixlwa_bubble
|
|
57
|
+
* （实测 DOM 3 个，并在 dsh-client-ui-chat/lib/client.js 核实），
|
|
58
|
+
* 第 6/13 节共 7 处同步改名，气泡描边/圆角/入场动画与减弱动效分支恢复。
|
|
59
|
+
* · 宽度把手仍被浮层涂装：第 8b 节剥涂装的规则多要求了一个
|
|
60
|
+
* [data-dsh-part="resize-handle"]，而 dsh 只用 [data-width-handle]
|
|
61
|
+
* （实测 data-dsh-part 0 个、data-width-handle 2 个），规则永不匹配 ——
|
|
62
|
+
* 把手因此一直保留浮层的 backdrop-filter: blur(18px) 与近不透明面板。
|
|
63
|
+
* 去掉失效条件，7 处选择器统一到 [data-width-handle]。
|
|
64
|
+
* · 侧栏 z-index 100 吃掉把手热区：把手 z-index 11 且与侧栏右边缘重叠，
|
|
65
|
+
* 100 把它压成半宽（实测 8px → 4px）。降为 5：高于三栏，低于把手与遮罩。
|
|
66
|
+
* · 键盘焦点环对比度不足：实色 #3b6eff 替换 rgba(125,165,255,.65)
|
|
67
|
+
* （实测 1.73:1 / 1.24:1 → ≥4.2:1），并去掉 border-radius 改写。
|
|
68
|
+
* ── v13 修复（实测驱动） ─────────────────────────────────────────────────
|
|
69
|
+
* · §8 浮层规则不再把 [role="tree"] 当浮层涂装：面板型树不是弹出层。
|
|
70
|
+
* dsh-better-sidebar 等三方插件的任务管理子代理树渲染在侧栏内，但不
|
|
71
|
+
* 属于 v11 豁免的 [data-slot="sidebar.workspaces"]（侧栏列本身不带
|
|
72
|
+
* data-side="sidebar"，带这个属性的只有拖拽把手），会被 §8 误涂成
|
|
73
|
+
* 近不透明面板 + blur(18px)。从三组选择器中去掉 [role="tree"]；
|
|
74
|
+
* v11 对会话树的豁免规则随之冗余但无害，保留。只改主题，不碰插件。
|
|
75
|
+
* ── v14 修复（实测驱动） ─────────────────────────────────────────────────
|
|
76
|
+
* · 右栏拖拽把手（.pI_x6G_handle[data-side="rightbar"]，新版前端带
|
|
77
|
+
* data-dsh-part="resize-handle"）会被 §8 的 [data-side]:not([data-side=
|
|
78
|
+
* "sidebar"]) 误染成近不透明条。把手剥离规则加码到与 §8 **同特异性**
|
|
79
|
+
* （body .pI_x6G_handle[data-side][data-dsh-part="resize-handle"]，
|
|
80
|
+
* 含属性计数后特异性同为 (0,3,1)）并按源码顺序排在后面覆盖，
|
|
81
|
+
* 让右栏把手与侧栏把手完全一致（透明底 + 1px 磨砂线 + 悬停泛蓝光）。
|
|
82
|
+
* ── v15 修复（实测驱动） ─────────────────────────────────────────────────
|
|
83
|
+
* · 会话轨迹表（dsh-client-ui-trajectory 插件渲染，.Y0dWHa_* 为构建哈希
|
|
84
|
+
* 类名）与审批空态（.ag-empty）玻璃化：轨迹区整体落一层薄玻璃面
|
|
85
|
+
* （渐变 + 发丝边 + 内高光），表格本体透明；会话分隔线 2px 粗线改
|
|
86
|
+
* 1px 发丝线；类型标签改磨砂玻璃小胶囊（保留种类色）；加载历史按钮
|
|
87
|
+
* 由扁平全宽条改为玻璃胶囊条；审批空态提示文字深浅两套配色。
|
|
88
|
+
* 只改主题，不碰插件。
|
|
89
|
+
* ── v16 修复（实测驱动） ─────────────────────────────────────────────────
|
|
90
|
+
* · v14 给右栏把手加码的 [data-dsh-part="resize-handle"] 在安装版
|
|
91
|
+
* 0.1.5-rc.2 前端中不存在（全仓 0 命中；把手实际只带 data-side /
|
|
92
|
+
* data-dragging / data-width-handle），该规则永不匹配，右栏把手仍被
|
|
93
|
+
* §8 误染成近不透明条。第 8a 节改为与 §8 同特异性 (0,3,1) 的
|
|
94
|
+
* [data-side]:not([data-side="sidebar"]) 并靠后置覆盖。
|
|
95
|
+
* · 清理 6 处随构建腐烂的哈希类：qDHVXG_iconButton / qDHVXG_searchButton /
|
|
96
|
+
* nL4_yW_sessionLogButton / uV2eYG_backdrop / uV2eYG_mirror（安装版
|
|
97
|
+
* bundle 全 0 命中，侧栏按钮现为 hHd-Xa_* 等），hover 玻璃效果只保留
|
|
98
|
+
* 现存类；类名轮检测试（test/shell-themes-classes.test.js）在升级时兜底。
|
|
99
|
+
* ========================================================================== */
|
|
100
|
+
|
|
101
|
+
/* ───────────────────────── 1. 环境背景（Aurora + 光斑） ────────────────── */
|
|
102
|
+
/* 基座渐变（静态，深色） */
|
|
103
|
+
body[data-ds-dark-theme] {
|
|
104
|
+
background:
|
|
105
|
+
radial-gradient(1400px 900px at 82% -12%, rgba(66, 133, 244, 0.20), transparent 58%),
|
|
106
|
+
radial-gradient(1100px 760px at -12% 112%, rgba(147, 92, 246, 0.18), transparent 60%),
|
|
107
|
+
radial-gradient(900px 700px at 50% 120%, rgba(34, 211, 238, 0.10), transparent 60%),
|
|
108
|
+
linear-gradient(180deg, #0c101e 0%, #111730 48%, #0d1222 100%);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* 基座渐变（浅色） */
|
|
112
|
+
body:not([data-ds-dark-theme]) {
|
|
113
|
+
background:
|
|
114
|
+
radial-gradient(1300px 820px at 86% -10%, rgba(122, 165, 255, 0.28), transparent 58%),
|
|
115
|
+
radial-gradient(1050px 760px at -8% 110%, rgba(198, 168, 255, 0.24), transparent 60%),
|
|
116
|
+
radial-gradient(880px 680px at 55% 118%, rgba(150, 238, 224, 0.18), transparent 60%),
|
|
117
|
+
linear-gradient(180deg, #edf1fa 0%, #e6ecf8 52%, #eaeef5 100%);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* 飘移光斑层 A（body::after，极光 + 光斑合并）与 B（#root::before）：
|
|
121
|
+
* 整层缓慢平移 + 轻微旋转，模拟液态光线流动；两层方向相反、转速不同。
|
|
122
|
+
* 性能优化（GPU 修复后放宽）：
|
|
123
|
+
* · 只保留 2 个动画合成层（把原独立光斑层并入 A），减少层数量；
|
|
124
|
+
* · 只做 transform（不缩放、避免重栅格化），动画交给合成器线程跑，
|
|
125
|
+
* 不占主线程、不和聊天滚动抢资源。 */
|
|
126
|
+
body::after,
|
|
127
|
+
#root::before {
|
|
128
|
+
content: "";
|
|
129
|
+
position: fixed;
|
|
130
|
+
inset: -6%;
|
|
131
|
+
pointer-events: none;
|
|
132
|
+
z-index: 0;
|
|
133
|
+
/* 强制提升到 GPU 合成层：transform 动画交给合成器跑，
|
|
134
|
+
* 不占主线程，避免和聊天滚动抢资源（弱 GPU 真机尤其明显）。 */
|
|
135
|
+
will-change: transform;
|
|
136
|
+
transform: translateZ(0);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
body[data-ds-dark-theme]::after {
|
|
140
|
+
/* 四周光斑（7 个，主次分明）：两个大光斑是主光源（更亮），
|
|
141
|
+
* 五个次光斑环绕补光，让极光更饱满、有层次。GPU 修复后恢复。 */
|
|
142
|
+
background:
|
|
143
|
+
radial-gradient(46% 40% at 24% 20%, rgba(66, 133, 244, 0.42), transparent 62%),
|
|
144
|
+
radial-gradient(40% 36% at 80% 70%, rgba(147, 92, 246, 0.36), transparent 62%),
|
|
145
|
+
radial-gradient(34% 30% at 78% 18%, rgba(34, 211, 238, 0.22), transparent 60%),
|
|
146
|
+
radial-gradient(30% 28% at 30% 82%, rgba(125, 165, 255, 0.17), transparent 66%),
|
|
147
|
+
radial-gradient(32% 28% at 88% 46%, rgba(100, 140, 255, 0.15), transparent 62%),
|
|
148
|
+
radial-gradient(28% 26% at 10% 52%, rgba(80, 120, 240, 0.14), transparent 64%),
|
|
149
|
+
radial-gradient(30% 28% at 54% 90%, rgba(167, 120, 255, 0.16), transparent 62%);
|
|
150
|
+
animation:
|
|
151
|
+
dsh-glass-drift-a 8.3s ease-in-out infinite,
|
|
152
|
+
dsh-glass-breathe 10s ease-in-out infinite;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
body[data-ds-dark-theme] #root::before {
|
|
156
|
+
/* 全屏柔和环境光：只微微提亮，让光斑中心更亮、周围略暗。 */
|
|
157
|
+
background:
|
|
158
|
+
radial-gradient(120% 110% at 50% 48%, rgba(70, 105, 190, 0.14), transparent 82%),
|
|
159
|
+
radial-gradient(160% 140% at 50% 50%, rgba(40, 58, 104, 0.09), transparent 88%);
|
|
160
|
+
animation:
|
|
161
|
+
dsh-glass-drift-b 10.6s ease-in-out infinite,
|
|
162
|
+
dsh-glass-breathe 12s ease-in-out infinite;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
body:not([data-ds-dark-theme])::after {
|
|
166
|
+
background:
|
|
167
|
+
radial-gradient(46% 40% at 24% 20%, rgba(140, 178, 255, 0.52), transparent 62%),
|
|
168
|
+
radial-gradient(40% 36% at 80% 70%, rgba(198, 168, 255, 0.46), transparent 62%),
|
|
169
|
+
radial-gradient(34% 30% at 78% 18%, rgba(150, 238, 224, 0.34), transparent 60%),
|
|
170
|
+
radial-gradient(30% 28% at 30% 82%, rgba(255, 255, 255, 0.36), transparent 66%),
|
|
171
|
+
radial-gradient(32% 28% at 88% 46%, rgba(170, 190, 255, 0.30), transparent 62%),
|
|
172
|
+
radial-gradient(28% 26% at 10% 52%, rgba(160, 180, 250, 0.28), transparent 64%),
|
|
173
|
+
radial-gradient(30% 28% at 54% 90%, rgba(205, 170, 255, 0.30), transparent 62%);
|
|
174
|
+
animation:
|
|
175
|
+
dsh-glass-drift-a 8.3s ease-in-out infinite,
|
|
176
|
+
dsh-glass-breathe 9s ease-in-out infinite;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
body:not([data-ds-dark-theme]) #root::before {
|
|
180
|
+
background:
|
|
181
|
+
radial-gradient(120% 110% at 50% 48%, rgba(160, 190, 240, 0.20), transparent 82%),
|
|
182
|
+
radial-gradient(160% 140% at 50% 50%, rgba(120, 150, 205, 0.13), transparent 88%);
|
|
183
|
+
animation:
|
|
184
|
+
dsh-glass-drift-b 10.6s ease-in-out infinite,
|
|
185
|
+
dsh-glass-breathe 11s ease-in-out infinite;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* 颗粒噪点（#root::after）：压在玻璃之上的一层极淡胶片颗粒，
|
|
189
|
+
* 去掉纯渐变的“塑料感”，给玻璃一点物理质感。静态、只合成一次。 */
|
|
190
|
+
#root::after {
|
|
191
|
+
content: "";
|
|
192
|
+
position: fixed;
|
|
193
|
+
inset: 0;
|
|
194
|
+
pointer-events: none;
|
|
195
|
+
z-index: 9999;
|
|
196
|
+
opacity: 0.03;
|
|
197
|
+
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* 极光：四周光斑缓慢漂浮流动（上下起伏 + 环绕 + 轻微旋转）。
|
|
201
|
+
* 改成闭环椭圆轨道（0% 与 100% 完全重合），像悬浮的液态光轻盈绕动，
|
|
202
|
+
* 两层方向相反、幅度略不同，错开相位更有机。仍只用 transform，
|
|
203
|
+
* 配合 will-change 走 GPU 合成，不占主线程。 */
|
|
204
|
+
@keyframes dsh-glass-drift-a {
|
|
205
|
+
0% { transform: translate3d(0%, -1.6%, 0) rotate(-1deg); }
|
|
206
|
+
25% { transform: translate3d(1.8%, 0%, 0) rotate(0deg); }
|
|
207
|
+
50% { transform: translate3d(0%, 1.6%, 0) rotate(1deg); }
|
|
208
|
+
75% { transform: translate3d(-1.8%, 0%, 0) rotate(0deg); }
|
|
209
|
+
100% { transform: translate3d(0%, -1.6%, 0) rotate(-1deg); }
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@keyframes dsh-glass-drift-b {
|
|
213
|
+
0% { transform: translate3d(0%, 2%, 0) rotate(1.2deg); }
|
|
214
|
+
25% { transform: translate3d(-2.2%, 0%, 0) rotate(0deg); }
|
|
215
|
+
50% { transform: translate3d(0%, -2%, 0) rotate(-1.2deg); }
|
|
216
|
+
75% { transform: translate3d(2.2%, 0%, 0) rotate(0deg); }
|
|
217
|
+
100% { transform: translate3d(0%, 2%, 0) rotate(1.2deg); }
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
/* 呼吸感：整层亮度缓慢起伏（opacity），配合漂移让极光“活”起来。
|
|
221
|
+
* opacity 与 transform 都是合成层友好属性，不会触发重排/重模糊。 */
|
|
222
|
+
@keyframes dsh-glass-breathe {
|
|
223
|
+
0%, 100% { opacity: 1; }
|
|
224
|
+
50% { opacity: 0.78; }
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* ───────────────────────── 2. 设计令牌重映射 ────────────────────────────── */
|
|
228
|
+
|
|
229
|
+
/* ---- 深色：面板、描边、交互 ---- */
|
|
230
|
+
body[data-ds-dark-theme] {
|
|
231
|
+
--dsw-alias-bg-base: transparent; /* 主底交给环境光 */
|
|
232
|
+
--dsw-alias-bg-layer-1: rgba(255, 255, 255, 0.05);
|
|
233
|
+
--dsw-alias-bg-layer-2: rgba(255, 255, 255, 0.07);
|
|
234
|
+
--dsw-alias-bg-layer-3: rgba(255, 255, 255, 0.09);
|
|
235
|
+
--dsw-alias-bg-module-platform: rgba(255, 255, 255, 0.06);
|
|
236
|
+
--dsw-alias-bg-overlay: rgba(17, 21, 34, 0.78);
|
|
237
|
+
--dsw-alias-bg-mask-1: rgba(4, 7, 15, 0.60);
|
|
238
|
+
--dsw-alias-bg-mask-2: rgba(4, 7, 15, 0.36);
|
|
239
|
+
--dsw-alias-bg-mask-3: rgba(4, 7, 15, 0.70);
|
|
240
|
+
--dsw-alias-bg-mask-drop: rgba(10, 13, 24, 0.52);
|
|
241
|
+
--dsw-alias-bg-skeleton: rgba(255, 255, 255, 0.08);
|
|
242
|
+
|
|
243
|
+
--dsw-alias-border-l1: rgba(255, 255, 255, 0.11);
|
|
244
|
+
--dsw-alias-border-l2: rgba(255, 255, 255, 0.15);
|
|
245
|
+
--dsw-alias-border-l3: rgba(255, 255, 255, 0.19);
|
|
246
|
+
--dsw-alias-border-l4: rgba(255, 255, 255, 0.26);
|
|
247
|
+
|
|
248
|
+
--dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.10);
|
|
249
|
+
--dsw-alias-interactive-bg-active: rgba(255, 255, 255, 0.16);
|
|
250
|
+
|
|
251
|
+
--dsw-specific-sidebar-fill: rgba(15, 19, 31, 0.42);
|
|
252
|
+
--dsw-specific-sidebar-nav-item-hover: rgba(255, 255, 255, 0.08);
|
|
253
|
+
--dsw-specific-sidebar-nav-item-active: rgba(86, 134, 254, 0.22);
|
|
254
|
+
--dsw-specific-menu: rgba(23, 29, 45, 0.74);
|
|
255
|
+
--dsw-specific-bubble: rgba(86, 134, 254, 0.26);
|
|
256
|
+
--dsw-specific-bubble-highlight: rgba(86, 134, 254, 0.42);
|
|
257
|
+
--dsw-specific-input-major: rgba(255, 255, 255, 0.05);
|
|
258
|
+
--dsw-specific-tip: rgba(23, 29, 45, 0.80);
|
|
259
|
+
|
|
260
|
+
--dsw-alias-scrollbar-bg-l1: rgba(255, 255, 255, 0.13);
|
|
261
|
+
--dsw-alias-scrollbar-bg-l2: rgba(255, 255, 255, 0.17);
|
|
262
|
+
--dsw-alias-scrollbar-hover-l1: rgba(255, 255, 255, 0.28);
|
|
263
|
+
--dsw-alias-scrollbar-hover-l2: rgba(255, 255, 255, 0.34);
|
|
264
|
+
|
|
265
|
+
--dsw-alias-label-tertiary: rgb(188, 194, 204);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* ---- 浅色 ---- */
|
|
269
|
+
body:not([data-ds-dark-theme]) {
|
|
270
|
+
--dsw-alias-bg-base: transparent;
|
|
271
|
+
--dsw-alias-bg-layer-1: rgba(255, 255, 255, 0.52);
|
|
272
|
+
--dsw-alias-bg-layer-2: rgba(255, 255, 255, 0.60);
|
|
273
|
+
--dsw-alias-bg-layer-3: rgba(255, 255, 255, 0.68);
|
|
274
|
+
--dsw-alias-bg-module-platform: rgba(255, 255, 255, 0.52);
|
|
275
|
+
--dsw-alias-bg-overlay: rgba(244, 247, 252, 0.84);
|
|
276
|
+
--dsw-alias-bg-mask-1: rgba(28, 36, 58, 0.36);
|
|
277
|
+
--dsw-alias-bg-mask-2: rgba(28, 36, 58, 0.20);
|
|
278
|
+
--dsw-alias-bg-mask-3: rgba(28, 36, 58, 0.46);
|
|
279
|
+
--dsw-alias-bg-mask-drop: rgba(244, 247, 252, 0.64);
|
|
280
|
+
--dsw-alias-bg-skeleton: rgba(20, 30, 60, 0.09);
|
|
281
|
+
|
|
282
|
+
--dsw-alias-border-l1: rgba(255, 255, 255, 0.74);
|
|
283
|
+
--dsw-alias-border-l2: rgba(255, 255, 255, 0.86);
|
|
284
|
+
--dsw-alias-border-l3: rgba(28, 36, 58, 0.10);
|
|
285
|
+
--dsw-alias-border-l4: rgba(28, 36, 58, 0.16);
|
|
286
|
+
|
|
287
|
+
--dsw-alias-interactive-bg-hover: rgba(28, 36, 58, 0.06);
|
|
288
|
+
--dsw-alias-interactive-bg-active: rgba(28, 36, 58, 0.10);
|
|
289
|
+
|
|
290
|
+
--dsw-specific-sidebar-fill: rgba(226, 234, 246, 0.45);
|
|
291
|
+
--dsw-specific-sidebar-nav-item-hover: rgba(28, 36, 58, 0.06);
|
|
292
|
+
--dsw-specific-sidebar-nav-item-active: rgba(59, 110, 255, 0.14);
|
|
293
|
+
--dsw-specific-menu: rgba(250, 252, 255, 0.80);
|
|
294
|
+
--dsw-specific-bubble: rgba(59, 110, 255, 0.10);
|
|
295
|
+
--dsw-specific-bubble-highlight: rgba(59, 110, 255, 0.18);
|
|
296
|
+
--dsw-specific-input-major: rgba(255, 255, 255, 0.58);
|
|
297
|
+
--dsw-specific-tip: rgba(250, 252, 255, 0.86);
|
|
298
|
+
|
|
299
|
+
--dsw-alias-scrollbar-bg-l1: rgba(28, 36, 58, 0.15);
|
|
300
|
+
--dsw-alias-scrollbar-bg-l2: rgba(28, 36, 58, 0.19);
|
|
301
|
+
--dsw-alias-scrollbar-hover-l1: rgba(28, 36, 58, 0.32);
|
|
302
|
+
--dsw-alias-scrollbar-hover-l2: rgba(28, 36, 58, 0.38);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* ───────────────────────── 3. 玻璃面板（三栏框架） ─────────────────────── */
|
|
306
|
+
/* v3：三栏不再用 backdrop-filter（面积大、背景又在动，每帧重模糊很贵）。
|
|
307
|
+
* 改为半透明渐变 + 内高光描边 + 圆角，环境光从半透明处透出，
|
|
308
|
+
* 视觉上仍是玻璃，但完全不触发逐帧重模糊。 */
|
|
309
|
+
|
|
310
|
+
/* 框架本体：透明，让环境光从缝隙透出。
|
|
311
|
+
* v12：同时把整棵应用树抬到极光层之上 —— 两层全屏极光（第 1 节，z-index: 0）
|
|
312
|
+
* 位于 DOM 末尾，实测（elementFromPoint 探针 + 阳性对照）确认它们绘制在会话/
|
|
313
|
+
* 输入区内容之上，正文对比度被从 18.9:1 洗到最亮处 4.04:1 并随 breathe 脉动。
|
|
314
|
+
* 框架本体透明，极光仍从半透明三栏完整透出，玻璃观感不变。 */
|
|
315
|
+
body .pI_x6G_frame {
|
|
316
|
+
position: relative;
|
|
317
|
+
z-index: 1;
|
|
318
|
+
background: transparent !important;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
body[data-ds-dark-theme] .pI_x6G_sidebarCol {
|
|
322
|
+
background: linear-gradient(180deg, rgba(22, 28, 46, 0.62), rgba(11, 15, 26, 0.58));
|
|
323
|
+
border-right: 1px solid rgba(255, 255, 255, 0.10);
|
|
324
|
+
box-shadow:
|
|
325
|
+
inset -1px 0 0 rgba(255, 255, 255, 0.06),
|
|
326
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.09);
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
body[data-ds-dark-theme] .pI_x6G_rightbarCol {
|
|
330
|
+
background: linear-gradient(180deg, rgba(20, 26, 43, 0.56), rgba(12, 16, 27, 0.54));
|
|
331
|
+
border-left: 1px solid rgba(255, 255, 255, 0.10);
|
|
332
|
+
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
body[data-ds-dark-theme] .pI_x6G_centerCol {
|
|
336
|
+
background: linear-gradient(180deg, rgba(10, 14, 24, 0.30), rgba(8, 11, 20, 0.24));
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
body:not([data-ds-dark-theme]) .pI_x6G_sidebarCol {
|
|
340
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.42));
|
|
341
|
+
border-right: 1px solid rgba(255, 255, 255, 0.72);
|
|
342
|
+
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.5);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
body:not([data-ds-dark-theme]) .pI_x6G_rightbarCol {
|
|
346
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.40));
|
|
347
|
+
border-left: 1px solid rgba(255, 255, 255, 0.72);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
body:not([data-ds-dark-theme]) .pI_x6G_centerCol {
|
|
351
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.22));
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
/* ───────────────────────── 4. 顶部会话条（滚动浮现的磨砂玻璃） ─────────── */
|
|
355
|
+
/* 保留毛玻璃（窄条，成本可控），去掉 saturate、降低 blur。 */
|
|
356
|
+
body .wSkVaW_header {
|
|
357
|
+
backdrop-filter: blur(9px);
|
|
358
|
+
-webkit-backdrop-filter: blur(9px);
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
body[data-ds-dark-theme] .wSkVaW_header {
|
|
362
|
+
background: rgba(12, 16, 27, 0.48);
|
|
363
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
|
|
364
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
body:not([data-ds-dark-theme]) .wSkVaW_header {
|
|
368
|
+
background: rgba(255, 255, 255, 0.56);
|
|
369
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.62);
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
/* 标签页（对话/轨迹）：磨砂玻璃胶囊 */
|
|
373
|
+
body .wSkVaW_tabs {
|
|
374
|
+
gap: 10px !important;
|
|
375
|
+
padding-left: 4px !important;
|
|
376
|
+
}
|
|
377
|
+
body .wSkVaW_tab {
|
|
378
|
+
padding: 7px 16px !important;
|
|
379
|
+
border-radius: 11px !important;
|
|
380
|
+
line-height: 1;
|
|
381
|
+
transition: background var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
382
|
+
color var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
383
|
+
box-shadow var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease);
|
|
384
|
+
}
|
|
385
|
+
/* v9 修复：标签文字颜色原先写在无主题前缀的共享规则里（浅灰/近白，是深色
|
|
386
|
+
* 配色），浅色模式下几乎不可读。拆分为深浅两套：深色沿用原值，浅色换成
|
|
387
|
+
* 深蓝灰，保证两种模式下都有足够对比度。 */
|
|
388
|
+
body[data-ds-dark-theme] .wSkVaW_tab {
|
|
389
|
+
color: rgb(176, 184, 198);
|
|
390
|
+
}
|
|
391
|
+
body[data-ds-dark-theme] .wSkVaW_tab:hover {
|
|
392
|
+
background: rgba(120, 150, 220, 0.10);
|
|
393
|
+
color: rgb(224, 231, 244);
|
|
394
|
+
}
|
|
395
|
+
body:not([data-ds-dark-theme]) .wSkVaW_tab {
|
|
396
|
+
color: rgb(74, 86, 112);
|
|
397
|
+
}
|
|
398
|
+
body:not([data-ds-dark-theme]) .wSkVaW_tab:hover {
|
|
399
|
+
background: rgba(59, 110, 255, 0.08);
|
|
400
|
+
color: rgb(24, 38, 74);
|
|
401
|
+
}
|
|
402
|
+
body .wSkVaW_tabActive,
|
|
403
|
+
body .wSkVaW_tab.wSkVaW_tabActive {
|
|
404
|
+
background: linear-gradient(180deg, rgba(120, 170, 255, 0.22), rgba(86, 134, 254, 0.12)) !important;
|
|
405
|
+
border: 1px solid rgba(120, 170, 255, 0.30) !important;
|
|
406
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px -8px rgba(86, 134, 254, 0.55) !important;
|
|
407
|
+
backdrop-filter: blur(8px);
|
|
408
|
+
-webkit-backdrop-filter: blur(8px);
|
|
409
|
+
}
|
|
410
|
+
body[data-ds-dark-theme] .wSkVaW_tab.wSkVaW_tabActive {
|
|
411
|
+
color: #dbe6ff !important;
|
|
412
|
+
}
|
|
413
|
+
body:not([data-ds-dark-theme]) .wSkVaW_tab.wSkVaW_tabActive {
|
|
414
|
+
color: #16337a !important;
|
|
415
|
+
border-color: rgba(59, 110, 255, 0.38) !important;
|
|
416
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 6px 18px -8px rgba(59, 110, 255, 0.45) !important;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
/* ───────────────────────── 5. 输入卡（Hero 玻璃） ──────────────────────── */
|
|
420
|
+
/* 主角玻璃。v5：去掉 backdrop-filter —— 它和滚动区在底部重叠了 94px，
|
|
421
|
+
* 聊天内容滚动时会从它下方经过，导致每帧重模糊、滚动卡顿。
|
|
422
|
+
* 改回半透明渐变 + 内高光 + 边框，环境光透出即呈玻璃，滚动零负担。 */
|
|
423
|
+
body .uV2eYG_card {
|
|
424
|
+
border-radius: 22px;
|
|
425
|
+
transition: transform var(--ds-transition-duration-slow, 300ms) var(--ds-ease-in-out, ease),
|
|
426
|
+
box-shadow var(--ds-transition-duration-slow, 300ms) var(--ds-ease-in-out, ease),
|
|
427
|
+
border-color var(--ds-transition-duration-slow, 300ms) var(--ds-ease-in-out, ease);
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
body[data-ds-dark-theme] .uV2eYG_card {
|
|
431
|
+
background: linear-gradient(180deg, rgba(38, 46, 68, 0.90), rgba(22, 28, 46, 0.92));
|
|
432
|
+
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
433
|
+
box-shadow:
|
|
434
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
|
435
|
+
inset 0 -1px 0 rgba(255, 255, 255, 0.04),
|
|
436
|
+
0 24px 48px -20px rgba(2, 6, 16, 0.65),
|
|
437
|
+
0 0 0 1px rgba(59, 130, 246, 0.10);
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
body[data-ds-dark-theme] .uV2eYG_card:hover {
|
|
441
|
+
transform: translateY(-1px);
|
|
442
|
+
border-color: rgba(255, 255, 255, 0.24);
|
|
443
|
+
box-shadow:
|
|
444
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.26),
|
|
445
|
+
0 28px 56px -20px rgba(2, 6, 16, 0.70),
|
|
446
|
+
0 0 26px -6px rgba(59, 130, 246, 0.24);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
body[data-ds-dark-theme] .uV2eYG_card:focus-within {
|
|
450
|
+
border-color: rgba(125, 165, 255, 0.46);
|
|
451
|
+
box-shadow:
|
|
452
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
|
453
|
+
0 24px 48px -20px rgba(2, 6, 16, 0.65),
|
|
454
|
+
0 0 0 3px rgba(86, 134, 254, 0.22);
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
body:not([data-ds-dark-theme]) .uV2eYG_card {
|
|
458
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.88));
|
|
459
|
+
border: 1px solid rgba(255, 255, 255, 0.86);
|
|
460
|
+
box-shadow:
|
|
461
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
|
462
|
+
0 24px 48px -20px rgba(31, 45, 80, 0.25),
|
|
463
|
+
0 0 0 1px rgba(31, 45, 80, 0.05);
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
body:not([data-ds-dark-theme]) .uV2eYG_card:hover {
|
|
467
|
+
transform: translateY(-1px);
|
|
468
|
+
box-shadow:
|
|
469
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.96),
|
|
470
|
+
0 28px 56px -20px rgba(31, 45, 80, 0.30);
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
body:not([data-ds-dark-theme]) .uV2eYG_card:focus-within {
|
|
474
|
+
border-color: rgba(59, 110, 255, 0.46);
|
|
475
|
+
box-shadow:
|
|
476
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.92),
|
|
477
|
+
0 24px 48px -20px rgba(31, 45, 80, 0.25),
|
|
478
|
+
0 0 0 3px rgba(59, 110, 255, 0.20);
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
/* 输入区内部：透出卡片玻璃（.uV2eYG_backdrop/.uV2eYG_mirror 已在
|
|
482
|
+
* 0.1.5-rc.2 前端消失，保留仅存活的 .uV2eYG_input） */
|
|
483
|
+
body .uV2eYG_input {
|
|
484
|
+
background: transparent !important;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
/* 主发送 / 停止按钮：蓝→紫的液态渐变 + 光晕 */
|
|
488
|
+
body .uV2eYG_primary {
|
|
489
|
+
background: linear-gradient(135deg, #4a8bff 0%, #7b6cff 100%) !important;
|
|
490
|
+
box-shadow: 0 6px 18px -6px rgba(74, 139, 255, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
|
|
491
|
+
transition: transform var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
492
|
+
box-shadow var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease) !important;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
body .uV2eYG_primary:hover {
|
|
496
|
+
transform: translateY(-1px);
|
|
497
|
+
box-shadow: 0 12px 26px -8px rgba(74, 139, 255, 0.80), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
body .uV2eYG_primary:active {
|
|
501
|
+
transform: translateY(0);
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
/* 添加按钮（+ / 命令）：玻璃胶囊 */
|
|
505
|
+
/* 输入框左下"+"加号：默认也做冷调磨砂玻璃，避免应用中性灰过于突兀 */
|
|
506
|
+
body .uV2eYG_add {
|
|
507
|
+
border-radius: 12px;
|
|
508
|
+
transition:
|
|
509
|
+
background var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
510
|
+
border-color var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
511
|
+
box-shadow var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease);
|
|
512
|
+
}
|
|
513
|
+
body[data-ds-dark-theme] .uV2eYG_add {
|
|
514
|
+
background: linear-gradient(180deg, rgba(86, 134, 254, 0.14), rgba(30, 40, 66, 0.46));
|
|
515
|
+
border: 1px solid rgba(86, 134, 254, 0.26);
|
|
516
|
+
box-shadow:
|
|
517
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
|
518
|
+
0 4px 14px -8px rgba(86, 134, 254, 0.35);
|
|
519
|
+
}
|
|
520
|
+
body[data-ds-dark-theme] .uV2eYG_add:hover {
|
|
521
|
+
background: linear-gradient(180deg, rgba(86, 134, 254, 0.26), rgba(44, 58, 92, 0.5));
|
|
522
|
+
border-color: rgba(120, 160, 255, 0.44);
|
|
523
|
+
}
|
|
524
|
+
body:not([data-ds-dark-theme]) .uV2eYG_add {
|
|
525
|
+
background: linear-gradient(180deg, rgba(86, 134, 254, 0.22), rgba(255, 255, 255, 0.6));
|
|
526
|
+
border: 1px solid rgba(86, 134, 254, 0.30);
|
|
527
|
+
box-shadow:
|
|
528
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
|
529
|
+
0 4px 14px -8px rgba(86, 134, 254, 0.28);
|
|
530
|
+
}
|
|
531
|
+
body:not([data-ds-dark-theme]) .uV2eYG_add:hover {
|
|
532
|
+
background: linear-gradient(180deg, rgba(86, 134, 254, 0.32), rgba(255, 255, 255, 0.72));
|
|
533
|
+
border-color: rgba(86, 134, 254, 0.5);
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
/* ───────────────────────── 6. 消息气泡 ─────────────────────────────────── */
|
|
537
|
+
/* v5：去掉 backdrop-filter —— 气泡在滚动区内，滚动时会逐条重模糊，
|
|
538
|
+
* 长对话里几十条气泡会拖累滚动。改回半透明渐变 + 内高光 + 描边。 */
|
|
539
|
+
/* v6：加回轻量动画 —— 每条消息出现时淡入 + 上浮（仅 transform/opacity，
|
|
540
|
+
* 一次性播完即回到自然态，不会长期占用合成层），悬停时轻微上抬 + 描边发光。 */
|
|
541
|
+
body .Sixlwa_bubble {
|
|
542
|
+
border: 1px solid transparent;
|
|
543
|
+
box-shadow: 0 8px 20px -12px rgba(2, 6, 16, 0.5);
|
|
544
|
+
border-radius: 14px;
|
|
545
|
+
animation: dsh-bubble-in 300ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
|
|
546
|
+
transition:
|
|
547
|
+
border-color var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
548
|
+
box-shadow var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
549
|
+
transform var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease);
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
body .Sixlwa_bubble:hover {
|
|
553
|
+
transform: translateY(-1px);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
body[data-ds-dark-theme] .Sixlwa_bubble {
|
|
557
|
+
border-color: rgba(125, 165, 255, 0.22);
|
|
558
|
+
}
|
|
559
|
+
body[data-ds-dark-theme] .Sixlwa_bubble:hover {
|
|
560
|
+
border-color: rgba(125, 165, 255, 0.42);
|
|
561
|
+
box-shadow: 0 12px 28px -12px rgba(2, 6, 16, 0.55), 0 0 18px -6px rgba(125, 165, 255, 0.35);
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
body:not([data-ds-dark-theme]) .Sixlwa_bubble {
|
|
565
|
+
border-color: rgba(255, 255, 255, 0.80);
|
|
566
|
+
box-shadow: 0 8px 20px -12px rgba(31, 45, 80, 0.25);
|
|
567
|
+
}
|
|
568
|
+
body:not([data-ds-dark-theme]) .Sixlwa_bubble:hover {
|
|
569
|
+
border-color: rgba(255, 255, 255, 0.95);
|
|
570
|
+
box-shadow: 0 12px 28px -12px rgba(31, 45, 80, 0.30), 0 0 18px -6px rgba(140, 178, 255, 0.40);
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
/* 消息入场：淡入 + 轻微上浮。一次性动画，结束后回到自然态。 */
|
|
574
|
+
@keyframes dsh-bubble-in {
|
|
575
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
576
|
+
to { opacity: 1; transform: translateY(0); }
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
/* ───────────────────────── 7. 工具 / 状态卡片 ──────────────────────────── */
|
|
580
|
+
/* v3：iWrAna_card / CY-8Ka_card 是细条状态卡（高约 26px），出现几十次，
|
|
581
|
+
* 之前各自 blur(20px)，是卡顿主因之一。改为纯半透明渐变 + 描边，
|
|
582
|
+
* 不再用 backdrop-filter（这么细的条子毛玻璃几乎看不出来）。
|
|
583
|
+
* 任务坞 nLMEza_dock 是真正的大卡片，保留毛玻璃（blur 12）。 */
|
|
584
|
+
body .iWrAna_card,
|
|
585
|
+
body .CY-8Ka_card {
|
|
586
|
+
border: 1px solid transparent;
|
|
587
|
+
border-radius: 12px;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
body[data-ds-dark-theme] .iWrAna_card,
|
|
591
|
+
body[data-ds-dark-theme] .CY-8Ka_card {
|
|
592
|
+
background: linear-gradient(180deg, rgba(30, 37, 57, 0.50), rgba(20, 26, 43, 0.48));
|
|
593
|
+
border-color: rgba(255, 255, 255, 0.12);
|
|
594
|
+
box-shadow:
|
|
595
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
|
596
|
+
0 8px 20px -14px rgba(2, 6, 16, 0.5);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
body:not([data-ds-dark-theme]) .iWrAna_card,
|
|
600
|
+
body:not([data-ds-dark-theme]) .CY-8Ka_card {
|
|
601
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.52));
|
|
602
|
+
border-color: rgba(255, 255, 255, 0.82);
|
|
603
|
+
box-shadow:
|
|
604
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
|
605
|
+
0 8px 20px -14px rgba(31, 45, 80, 0.20);
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
/* 任务坞：保留毛玻璃 */
|
|
609
|
+
body .nLMEza_dock {
|
|
610
|
+
backdrop-filter: blur(9px);
|
|
611
|
+
-webkit-backdrop-filter: blur(9px);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
body[data-ds-dark-theme] .nLMEza_dock {
|
|
615
|
+
background: linear-gradient(180deg, rgba(30, 37, 57, 0.56), rgba(20, 26, 43, 0.54));
|
|
616
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
617
|
+
box-shadow:
|
|
618
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.14),
|
|
619
|
+
0 12px 28px -16px rgba(2, 6, 16, 0.55);
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
body:not([data-ds-dark-theme]) .nLMEza_dock {
|
|
623
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.54));
|
|
624
|
+
border: 1px solid rgba(255, 255, 255, 0.82);
|
|
625
|
+
box-shadow:
|
|
626
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
|
627
|
+
0 12px 28px -16px rgba(31, 45, 80, 0.22);
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
/* 目标坞内条（进行中的目标）：磨砂玻璃胶囊，替代默认平涂深色灰块 */
|
|
631
|
+
body .nLMEza_bar {
|
|
632
|
+
backdrop-filter: none;
|
|
633
|
+
-webkit-backdrop-filter: none;
|
|
634
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
635
|
+
transition: background var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease);
|
|
636
|
+
}
|
|
637
|
+
body[data-ds-dark-theme] .nLMEza_bar {
|
|
638
|
+
background: rgba(255, 255, 255, 0.06) !important;
|
|
639
|
+
border: 1px solid rgba(255, 255, 255, 0.10) !important;
|
|
640
|
+
}
|
|
641
|
+
body:not([data-ds-dark-theme]) .nLMEza_bar {
|
|
642
|
+
background: rgba(255, 255, 255, 0.34) !important;
|
|
643
|
+
border: 1px solid rgba(255, 255, 255, 0.5) !important;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
/* 目标坞内条上的操作小图标（详情/编辑/删除）：悬停微光 */
|
|
647
|
+
body .nLMEza_iconBtn {
|
|
648
|
+
transition: background var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
649
|
+
color var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease);
|
|
650
|
+
}
|
|
651
|
+
body[data-ds-dark-theme] .nLMEza_iconBtn:hover {
|
|
652
|
+
background: rgba(255, 255, 255, 0.12);
|
|
653
|
+
}
|
|
654
|
+
body:not([data-ds-dark-theme]) .nLMEza_iconBtn:hover {
|
|
655
|
+
background: rgba(28, 36, 58, 0.08);
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
/* 侧栏导航按钮：玻璃胶囊（qDHVXG_*/nL4_yW_* 已在 0.1.5-rc.2 前端消失，
|
|
659
|
+
* 仅保留现存的 .hHd-Xa_iconButton；其余按钮类随前端构建会再次漂移，
|
|
660
|
+
* 由主题类名轮检测试兜底） */
|
|
661
|
+
body .hHd-Xa_iconButton {
|
|
662
|
+
transition: background var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
663
|
+
box-shadow var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
body[data-ds-dark-theme] .hHd-Xa_iconButton:hover {
|
|
667
|
+
background: rgba(255, 255, 255, 0.10);
|
|
668
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
body:not([data-ds-dark-theme]) .hHd-Xa_iconButton:hover {
|
|
672
|
+
background: rgba(28, 36, 58, 0.06);
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
/* 「新会话」按钮：磨砂玻璃胶囊 */
|
|
676
|
+
body .hHd-Xa_newSession {
|
|
677
|
+
background: linear-gradient(180deg, rgba(120, 170, 255, 0.22), rgba(86, 134, 254, 0.12)) !important;
|
|
678
|
+
border: 1px solid rgba(120, 170, 255, 0.28) !important;
|
|
679
|
+
color: #e3ecff !important;
|
|
680
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px -8px rgba(86, 134, 254, 0.50) !important;
|
|
681
|
+
backdrop-filter: blur(8px);
|
|
682
|
+
-webkit-backdrop-filter: blur(8px);
|
|
683
|
+
transition: background var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
684
|
+
box-shadow var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
685
|
+
color var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease);
|
|
686
|
+
}
|
|
687
|
+
body[data-ds-dark-theme] .hHd-Xa_newSession:hover {
|
|
688
|
+
background: linear-gradient(180deg, rgba(120, 170, 255, 0.32), rgba(86, 134, 254, 0.20)) !important;
|
|
689
|
+
color: #f2f6ff !important;
|
|
690
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 24px -8px rgba(86, 134, 254, 0.62) !important;
|
|
691
|
+
}
|
|
692
|
+
body:not([data-ds-dark-theme]) .hHd-Xa_newSession {
|
|
693
|
+
background: linear-gradient(180deg, rgba(120, 170, 255, 0.30), rgba(86, 134, 254, 0.16)) !important;
|
|
694
|
+
border: 1px solid rgba(59, 110, 255, 0.28) !important;
|
|
695
|
+
color: #0b1a3d !important;
|
|
696
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 18px -8px rgba(59, 110, 255, 0.45) !important;
|
|
697
|
+
backdrop-filter: blur(8px);
|
|
698
|
+
-webkit-backdrop-filter: blur(8px);
|
|
699
|
+
}
|
|
700
|
+
body:not([data-ds-dark-theme]) .hHd-Xa_newSession:hover {
|
|
701
|
+
background: linear-gradient(180deg, rgba(120, 170, 255, 0.40), rgba(86, 134, 254, 0.24)) !important;
|
|
702
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px -8px rgba(59, 110, 255, 0.55) !important;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
/* ───────────────────────── 8. 浮层：菜单 / 弹窗 / 弹出层 ────────────────── */
|
|
706
|
+
/* 只在使用时出现，保留毛玻璃。v9：补齐 v3 约定 —— 去掉 saturate(170%)
|
|
707
|
+
*（颜色矩阵滤镜很贵），blur 24 → 18。 */
|
|
708
|
+
body [data-side]:not([data-side="sidebar"]),
|
|
709
|
+
body [data-radix-popper-content],
|
|
710
|
+
body [role="menu"],
|
|
711
|
+
body [role="listbox"],
|
|
712
|
+
body [role="dialog"],
|
|
713
|
+
body [role="tooltip"],
|
|
714
|
+
body [class$="_menu"] {
|
|
715
|
+
backdrop-filter: blur(18px);
|
|
716
|
+
-webkit-backdrop-filter: blur(18px);
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
body[data-ds-dark-theme] [role="menu"],
|
|
720
|
+
body[data-ds-dark-theme] [role="listbox"],
|
|
721
|
+
body[data-ds-dark-theme] [role="dialog"],
|
|
722
|
+
body[data-ds-dark-theme] [role="tooltip"],
|
|
723
|
+
body[data-ds-dark-theme] [data-side]:not([data-side="sidebar"]),
|
|
724
|
+
body[data-ds-dark-theme] [data-radix-popper-content],
|
|
725
|
+
body[data-ds-dark-theme] [class$="_menu"] {
|
|
726
|
+
background-color: rgba(24, 30, 48, 0.92) !important;
|
|
727
|
+
border-color: rgba(255, 255, 255, 0.16) !important;
|
|
728
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 48px -16px rgba(2, 6, 16, 0.7) !important;
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
body:not([data-ds-dark-theme]) [role="menu"],
|
|
732
|
+
body:not([data-ds-dark-theme]) [role="listbox"],
|
|
733
|
+
body:not([data-ds-dark-theme]) [role="dialog"],
|
|
734
|
+
body:not([data-ds-dark-theme]) [role="tooltip"],
|
|
735
|
+
body:not([data-ds-dark-theme]) [data-side]:not([data-side="sidebar"]),
|
|
736
|
+
body:not([data-ds-dark-theme]) [data-radix-popper-content],
|
|
737
|
+
body:not([data-ds-dark-theme]) [class$="_menu"] {
|
|
738
|
+
background-color: rgba(250, 252, 255, 0.94) !important;
|
|
739
|
+
border-color: rgba(255, 255, 255, 0.94) !important;
|
|
740
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 24px 48px -16px rgba(31, 45, 80, 0.3) !important;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
/* 拖拽把手：去掉被 §8 浮层规则（[data-side]:not([data-side="sidebar"])）误染的
|
|
744
|
+
* 近不透明"黑条/白条"，统一成极细磨砂分隔线。覆盖三类把手：
|
|
745
|
+
* · 侧栏把手 .pI_x6G_handle[data-side="sidebar"]（§8 不匹配它，无需加码）
|
|
746
|
+
* · 右栏把手 .pI_x6G_handle[data-side="rightbar"]（被 §8 误染；v14 曾用
|
|
747
|
+
* [data-dsh-part="resize-handle"] 抬特异性，实测 0.1.5-rc.2 中该属性
|
|
748
|
+
* 不存在（dsh 只用 [data-width-handle]），规则永不匹配——v16 改为与 §8
|
|
749
|
+
* 同特异性 (0,3,1) 的 [data-side]:not([data-side="sidebar"])，靠后置覆盖）
|
|
750
|
+
* · 会话列宽度把手 .wSkVaW_widthHandle 由 8b 单独处理 */
|
|
751
|
+
body .pI_x6G_handle,
|
|
752
|
+
body .pI_x6G_handle[data-side]:not([data-side="sidebar"]) {
|
|
753
|
+
background: transparent !important;
|
|
754
|
+
backdrop-filter: none !important;
|
|
755
|
+
-webkit-backdrop-filter: none !important;
|
|
756
|
+
box-shadow: none !important;
|
|
757
|
+
border: 0 !important;
|
|
758
|
+
}
|
|
759
|
+
body .pI_x6G_handle::after {
|
|
760
|
+
content: "";
|
|
761
|
+
position: absolute;
|
|
762
|
+
top: 0;
|
|
763
|
+
bottom: 0;
|
|
764
|
+
left: 50%;
|
|
765
|
+
width: 1px;
|
|
766
|
+
transform: translateX(-50%);
|
|
767
|
+
background: rgba(255, 255, 255, 0.05);
|
|
768
|
+
transition: background 0.18s ease, box-shadow 0.18s ease;
|
|
769
|
+
}
|
|
770
|
+
body[data-ds-dark-theme] .pI_x6G_handle:hover::after,
|
|
771
|
+
body[data-ds-dark-theme] .pI_x6G_handle:active::after {
|
|
772
|
+
background: rgba(120, 170, 255, 0.42);
|
|
773
|
+
box-shadow: 0 0 10px 0 rgba(120, 170, 255, 0.5);
|
|
774
|
+
}
|
|
775
|
+
body:not([data-ds-dark-theme]) .pI_x6G_handle:hover::after,
|
|
776
|
+
body:not([data-ds-dark-theme]) .pI_x6G_handle:active::after {
|
|
777
|
+
background: rgba(70, 120, 220, 0.38);
|
|
778
|
+
box-shadow: 0 0 10px 0 rgba(70, 120, 220, 0.35);
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
/* ───────────────────────── 8b. 会话列宽度拖拽把手 ─────────────────────── */
|
|
782
|
+
/* dsh-client-ui-conversation 的 .wSkVaW_widthHandle（data-width-handle，
|
|
783
|
+
* 会话列左右两侧）。两个问题：
|
|
784
|
+
* · 上面 [data-side]:not([data-side="sidebar"]) 的弹层规则把 data-side 为
|
|
785
|
+
* left/right 的把手整个涂成半透明面板（浅色亮白块 / 深色深块）+边框+内
|
|
786
|
+
* 高光 —— 这就是"突兀"的主体；先像侧栏把手一样剥掉这层涂装。
|
|
787
|
+
* · 默认 hover 时还会弹出一根 3px×104px 的跟手彩色竖条（scrollbar-hover
|
|
788
|
+
* 色）。统一为「极细磨砂分隔线」：平时 1px 近不可见，悬停/拖拽泛蓝光。
|
|
789
|
+
* 热区（最宽 40px、col-resize）与拖拽功能保持不变。用属性选择器而非哈希
|
|
790
|
+
* 类名，避免插件升级后失效。 */
|
|
791
|
+
body[data-ds-dark-theme] [data-side][data-width-handle],
|
|
792
|
+
body:not([data-ds-dark-theme]) [data-side][data-width-handle] {
|
|
793
|
+
background: transparent !important;
|
|
794
|
+
backdrop-filter: none !important;
|
|
795
|
+
-webkit-backdrop-filter: none !important;
|
|
796
|
+
box-shadow: none !important;
|
|
797
|
+
border: 0 !important;
|
|
798
|
+
}
|
|
799
|
+
body [data-width-handle]::after {
|
|
800
|
+
content: "";
|
|
801
|
+
position: absolute;
|
|
802
|
+
top: 0;
|
|
803
|
+
bottom: 0;
|
|
804
|
+
left: 50%;
|
|
805
|
+
width: 1px !important;
|
|
806
|
+
transform: translateX(-50%);
|
|
807
|
+
border-radius: 0 !important;
|
|
808
|
+
background: rgba(255, 255, 255, 0.06) !important;
|
|
809
|
+
opacity: 1 !important;
|
|
810
|
+
pointer-events: none !important;
|
|
811
|
+
transition: background 0.18s ease, box-shadow 0.18s ease;
|
|
812
|
+
}
|
|
813
|
+
body[data-ds-dark-theme] [data-width-handle]:hover::after,
|
|
814
|
+
body[data-ds-dark-theme] [data-width-handle][data-dragging]::after {
|
|
815
|
+
background: rgba(120, 170, 255, 0.42) !important;
|
|
816
|
+
box-shadow: 0 0 10px 0 rgba(120, 170, 255, 0.5) !important;
|
|
817
|
+
}
|
|
818
|
+
body:not([data-ds-dark-theme]) [data-width-handle]:hover::after,
|
|
819
|
+
body:not([data-ds-dark-theme]) [data-width-handle][data-dragging]::after {
|
|
820
|
+
background: rgba(70, 120, 220, 0.38) !important;
|
|
821
|
+
box-shadow: 0 0 10px 0 rgba(70, 120, 220, 0.35) !important;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
/* ───────────────────────── 8c. 侧栏会话树（工作区/会话列表） ────────────── */
|
|
825
|
+
/* 侧栏里的会话树不是浮层，却被第 8 节「浮层：[role="tree"]」的通用规则涂成
|
|
826
|
+
* 近不透明白面板（浅色 rgba(250,252,255,.94) / 深色 rgba(24,30,48,.92)）+
|
|
827
|
+
* blur(18px)——这就是会话列表区域“一整块白、与玻璃侧栏割裂”的来源。
|
|
828
|
+
* 剥掉这层涂装：恢复玻璃侧栏的半透明渐变底，颜色与侧栏连贯；会话行的
|
|
829
|
+
* 悬停/选中玻璃微光由第 11 节既有 .YDXeBa_sessionRow 规则负责。
|
|
830
|
+
* 优先用属性选择器（data-side / data-slot / role），不随前端版本失效；
|
|
831
|
+
* 哈希类名（.bhn1Oq_*）与文件其余规则一样随 dsh-web-frontend 版本钉版。 */
|
|
832
|
+
body [data-side="sidebar"] [role="tree"],
|
|
833
|
+
body [data-slot="sidebar.workspaces"] [role="tree"] {
|
|
834
|
+
background: transparent !important;
|
|
835
|
+
backdrop-filter: none !important;
|
|
836
|
+
-webkit-backdrop-filter: none !important;
|
|
837
|
+
box-shadow: none !important;
|
|
838
|
+
border: 0 !important;
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
/* 会话树容器若被组件默认样式铺白底，一并压成透明，让玻璃侧栏渐变完整透出。 */
|
|
842
|
+
body [data-slot="sidebar.workspaces"] > div,
|
|
843
|
+
body [data-slot="sidebar.workspaces"] [class$="_listArea"],
|
|
844
|
+
body [data-slot="sidebar.workspaces"] [class$="_treeBody"] {
|
|
845
|
+
background: transparent !important;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
/* 层次过渡：「工作区」标题区与会话列表之间留一条极细磨砂分隔线，
|
|
849
|
+
* 与侧栏把手/浮层同款边框语言，不抢玻璃底，只做清晰的层级过渡。 */
|
|
850
|
+
body [data-slot="sidebar.workspaces"] [class$="_sectionHeader"] {
|
|
851
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
852
|
+
}
|
|
853
|
+
body:not([data-ds-dark-theme]) [data-slot="sidebar.workspaces"] [class$="_sectionHeader"] {
|
|
854
|
+
border-bottom: 1px solid rgba(28, 36, 58, 0.08);
|
|
855
|
+
}
|
|
856
|
+
|
|
857
|
+
/* ───────────────────────── 9. 排版与细节 ───────────────────────────────── */
|
|
858
|
+
|
|
859
|
+
body {
|
|
860
|
+
--dsw-font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system,
|
|
861
|
+
BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
|
|
862
|
+
"Helvetica Neue", Arial, sans-serif;
|
|
863
|
+
font-family: var(--dsw-font-family);
|
|
864
|
+
-webkit-font-smoothing: antialiased;
|
|
865
|
+
/* v3：去掉 text-rendering: optimizeLegibility —— 在长对话文本上会显著
|
|
866
|
+
* 增加排版开销，是滚动/渲染发卡的一个次要因素。 */
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
/* 文本选中 */
|
|
870
|
+
body ::selection {
|
|
871
|
+
background: rgba(86, 134, 254, 0.38);
|
|
872
|
+
color: inherit;
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
body:not([data-ds-dark-theme]) ::selection {
|
|
876
|
+
background: rgba(86, 134, 254, 0.25);
|
|
877
|
+
}
|
|
878
|
+
|
|
879
|
+
/* 键盘焦点环：v12 改为实色高对比（原 rgba(125,165,255,.65) 对白玻璃仅 1.73:1、
|
|
880
|
+
* 对极光底 1.24:1，均低于 3:1 要求）；并去掉 border-radius 改写，
|
|
881
|
+
* 避免 22px 圆角气泡/圆形按钮在聚焦瞬间被压成方角。 */
|
|
882
|
+
body :focus-visible {
|
|
883
|
+
outline: 2px solid #3b6eff;
|
|
884
|
+
outline-offset: 2px;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
/* ───────────────────────── 10. 入场动效 ────────────────────────────────── */
|
|
888
|
+
|
|
889
|
+
body .wSkVaW_composerSeat {
|
|
890
|
+
animation: dsh-glass-rise 0.6s var(--ds-ease-in-out, ease) both;
|
|
891
|
+
animation-delay: 0.15s;
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
body .pI_x6G_sidebarCol {
|
|
895
|
+
animation: dsh-glass-fade 0.8s var(--ds-ease-in-out, ease) both;
|
|
896
|
+
}
|
|
897
|
+
/* 设置对话框是侧栏的子节点；入场动画让侧栏形成堆叠上下文，会把设置面板限制在聊天之下。
|
|
898
|
+
抬高侧栏层级使设置面板浮到聊天内容之上。v12：z-index 100 → 5 —— 会话列宽度把手
|
|
899
|
+
z-index 为 11 且与侧栏右边缘重叠，100 会把它的热区压掉一半（实测 8px → 4px），
|
|
900
|
+
而 5 既高于三栏（auto）让设置面板生效，又低于把手（11）与拖拽遮罩（20）。 */
|
|
901
|
+
body .pI_x6G_sidebarCol {
|
|
902
|
+
position: relative;
|
|
903
|
+
z-index: 5;
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
body .pI_x6G_rightbarCol {
|
|
907
|
+
animation: dsh-glass-fade 0.8s var(--ds-ease-in-out, ease) both;
|
|
908
|
+
animation-delay: 0.1s;
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
@keyframes dsh-glass-rise {
|
|
912
|
+
from { opacity: 0; transform: translateY(14px); }
|
|
913
|
+
to { opacity: 1; transform: translateY(0); }
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
@keyframes dsh-glass-fade {
|
|
917
|
+
from { opacity: 0; }
|
|
918
|
+
to { opacity: 1; }
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
/* ───────────────────────── 11. 侧栏任务栏动效 ──────────────────────────── */
|
|
922
|
+
/* 会话行：悬停微右移 + 左侧柔光；选中项常亮描边；入场轻柔上浮淡入。 */
|
|
923
|
+
body .YDXeBa_sessionRow {
|
|
924
|
+
transition: background var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
925
|
+
transform var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease),
|
|
926
|
+
box-shadow var(--ds-transition-duration-fast, 150ms) var(--ds-ease-in-out, ease);
|
|
927
|
+
}
|
|
928
|
+
body .YDXeBa_sessionRow:hover {
|
|
929
|
+
transform: translateX(2px);
|
|
930
|
+
}
|
|
931
|
+
body[data-ds-dark-theme] .YDXeBa_sessionRow:hover {
|
|
932
|
+
background: rgba(255, 255, 255, 0.06);
|
|
933
|
+
box-shadow: inset 2px 0 0 rgba(125, 165, 255, 0.55);
|
|
934
|
+
}
|
|
935
|
+
body[data-ds-dark-theme] .YDXeBa_sessionRow.YDXeBa_selected {
|
|
936
|
+
box-shadow: inset 2px 0 0 rgba(125, 165, 255, 0.9);
|
|
937
|
+
}
|
|
938
|
+
body:not([data-ds-dark-theme]) .YDXeBa_sessionRow:hover {
|
|
939
|
+
background: rgba(28, 36, 58, 0.06);
|
|
940
|
+
box-shadow: inset 2px 0 0 rgba(59, 110, 255, 0.5);
|
|
941
|
+
}
|
|
942
|
+
body:not([data-ds-dark-theme]) .YDXeBa_sessionRow.YDXeBa_selected {
|
|
943
|
+
box-shadow: inset 2px 0 0 rgba(59, 110, 255, 0.9);
|
|
944
|
+
}
|
|
945
|
+
body .YDXeBa_sessionRow {
|
|
946
|
+
animation: dsh-glass-row-in 0.4s var(--ds-ease-in-out, ease) both;
|
|
947
|
+
}
|
|
948
|
+
@keyframes dsh-glass-row-in {
|
|
949
|
+
from { opacity: 0; transform: translateY(5px); }
|
|
950
|
+
to { opacity: 1; transform: translateY(0); }
|
|
951
|
+
}
|
|
952
|
+
|
|
953
|
+
/* ───────────────────────── 12. 设置面板玻璃化 ──────────────────────────── */
|
|
954
|
+
/* 面板：渐变玻璃背景 + 柔和光晕 + 描边 + 圆角，避免平铺的深色块显得单调。
|
|
955
|
+
底色保持近不透明，避免背景内容透出造成「叠字」凌乱。 */
|
|
956
|
+
body[data-ds-dark-theme] .VOzbGW_panel {
|
|
957
|
+
background:
|
|
958
|
+
radial-gradient(120% 70% at 100% 0%, rgba(96, 140, 255, 0.16) 0%, rgba(96, 140, 255, 0) 46%),
|
|
959
|
+
radial-gradient(130% 80% at 0% 100%, rgba(150, 96, 255, 0.11) 0%, rgba(150, 96, 255, 0) 50%),
|
|
960
|
+
linear-gradient(180deg, rgba(22, 28, 48, 0.86) 0%, rgba(15, 19, 32, 0.78) 100%) !important;
|
|
961
|
+
border: 1px solid rgba(255, 255, 255, 0.09);
|
|
962
|
+
box-shadow:
|
|
963
|
+
0 30px 80px rgba(0, 0, 0, 0.55),
|
|
964
|
+
0 1px 0 rgba(255, 255, 255, 0.10) inset,
|
|
965
|
+
0 0 0 1px rgba(96, 140, 255, 0.07) inset,
|
|
966
|
+
0 0 44px rgba(96, 140, 255, 0.07);
|
|
967
|
+
backdrop-filter: blur(10px);
|
|
968
|
+
-webkit-backdrop-filter: blur(10px);
|
|
969
|
+
animation: dsh-glass-panel-in 0.28s var(--ds-ease-in-out, ease) both;
|
|
970
|
+
}
|
|
971
|
+
body[data-ds-dark-theme] .VOzbGW_mask {
|
|
972
|
+
background: rgba(4, 7, 15, 0.82) !important;
|
|
973
|
+
}
|
|
974
|
+
/* 导航标题：渐变字。 */
|
|
975
|
+
body[data-ds-dark-theme] .VOzbGW_navTitle {
|
|
976
|
+
background: linear-gradient(92deg, #cbd7ff 0%, #e6d8ff 100%);
|
|
977
|
+
-webkit-background-clip: text;
|
|
978
|
+
background-clip: text;
|
|
979
|
+
color: transparent;
|
|
980
|
+
-webkit-text-fill-color: transparent;
|
|
981
|
+
font-weight: 600;
|
|
982
|
+
letter-spacing: 0.02em;
|
|
983
|
+
}
|
|
984
|
+
/* 导航项：悬停玻璃块 + 左侧柔光；选中渐变胶囊 + 外发光。 */
|
|
985
|
+
body[data-ds-dark-theme] .VOzbGW_navCell {
|
|
986
|
+
border-radius: 12px;
|
|
987
|
+
transition: background 160ms var(--ds-ease-in-out, ease),
|
|
988
|
+
box-shadow 160ms var(--ds-ease-in-out, ease),
|
|
989
|
+
transform 160ms var(--ds-ease-in-out, ease);
|
|
990
|
+
}
|
|
991
|
+
body[data-ds-dark-theme] .VOzbGW_navCell:not(.VOzbGW_active):hover {
|
|
992
|
+
background: rgba(255, 255, 255, 0.05);
|
|
993
|
+
box-shadow: inset 2px 0 0 rgba(125, 165, 255, 0.5);
|
|
994
|
+
transform: translateX(2px);
|
|
995
|
+
}
|
|
996
|
+
body[data-ds-dark-theme] .VOzbGW_navCell.VOzbGW_active {
|
|
997
|
+
background: linear-gradient(90deg, rgba(96, 140, 255, 0.30), rgba(96, 140, 255, 0.05)) !important;
|
|
998
|
+
box-shadow:
|
|
999
|
+
0 6px 18px rgba(96, 140, 255, 0.16),
|
|
1000
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.10);
|
|
1001
|
+
}
|
|
1002
|
+
/* 头部：细分隔线 + 顶部微亮。 */
|
|
1003
|
+
body[data-ds-dark-theme] .VOzbGW_header {
|
|
1004
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
1005
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
|
|
1006
|
+
}
|
|
1007
|
+
/* 关闭按钮：悬停玻璃块。 */
|
|
1008
|
+
body[data-ds-dark-theme] .VOzbGW_close {
|
|
1009
|
+
border-radius: 9px;
|
|
1010
|
+
transition: background 150ms var(--ds-ease-in-out, ease), box-shadow 150ms var(--ds-ease-in-out, ease);
|
|
1011
|
+
}
|
|
1012
|
+
body[data-ds-dark-theme] .VOzbGW_close:hover {
|
|
1013
|
+
background: rgba(255, 255, 255, 0.09);
|
|
1014
|
+
box-shadow: 0 0 14px rgba(255, 255, 255, 0.10);
|
|
1015
|
+
}
|
|
1016
|
+
/* 选项行：圆角卡片 + 悬停微亮，避免平铺。 */
|
|
1017
|
+
body[data-ds-dark-theme] .VOzbGW_options [class$="_row"] {
|
|
1018
|
+
border-radius: 14px;
|
|
1019
|
+
transition: background 150ms var(--ds-ease-in-out, ease), box-shadow 150ms var(--ds-ease-in-out, ease);
|
|
1020
|
+
}
|
|
1021
|
+
body[data-ds-dark-theme] .VOzbGW_options [class$="_row"]:hover {
|
|
1022
|
+
background: rgba(255, 255, 255, 0.03);
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
/* ── 浅色主题 ── */
|
|
1026
|
+
body:not([data-ds-dark-theme]) .VOzbGW_panel {
|
|
1027
|
+
background:
|
|
1028
|
+
radial-gradient(120% 70% at 100% 0%, rgba(96, 140, 255, 0.14) 0%, rgba(96, 140, 255, 0) 46%),
|
|
1029
|
+
radial-gradient(130% 80% at 0% 100%, rgba(150, 96, 255, 0.10) 0%, rgba(150, 96, 255, 0) 50%),
|
|
1030
|
+
linear-gradient(180deg, rgba(252, 254, 255, 0.88) 0%, rgba(248, 251, 255, 0.82) 100%) !important;
|
|
1031
|
+
border: 1px solid rgba(255, 255, 255, 0.65);
|
|
1032
|
+
box-shadow:
|
|
1033
|
+
0 30px 80px rgba(40, 60, 100, 0.28),
|
|
1034
|
+
0 1px 0 rgba(255, 255, 255, 0.9) inset,
|
|
1035
|
+
0 0 0 1px rgba(96, 140, 255, 0.10) inset;
|
|
1036
|
+
backdrop-filter: blur(10px);
|
|
1037
|
+
-webkit-backdrop-filter: blur(10px);
|
|
1038
|
+
animation: dsh-glass-panel-in 0.28s var(--ds-ease-in-out, ease) both;
|
|
1039
|
+
}
|
|
1040
|
+
body:not([data-ds-dark-theme]) .VOzbGW_mask {
|
|
1041
|
+
background: rgba(30, 40, 60, 0.48) !important;
|
|
1042
|
+
}
|
|
1043
|
+
body:not([data-ds-dark-theme]) .VOzbGW_navTitle {
|
|
1044
|
+
background: linear-gradient(92deg, #2b6cff 0%, #7a3bff 100%);
|
|
1045
|
+
-webkit-background-clip: text;
|
|
1046
|
+
background-clip: text;
|
|
1047
|
+
color: transparent;
|
|
1048
|
+
-webkit-text-fill-color: transparent;
|
|
1049
|
+
font-weight: 600;
|
|
1050
|
+
letter-spacing: 0.02em;
|
|
1051
|
+
}
|
|
1052
|
+
body:not([data-ds-dark-theme]) .VOzbGW_navCell {
|
|
1053
|
+
border-radius: 12px;
|
|
1054
|
+
transition: background 160ms var(--ds-ease-in-out, ease),
|
|
1055
|
+
box-shadow 160ms var(--ds-ease-in-out, ease),
|
|
1056
|
+
transform 160ms var(--ds-ease-in-out, ease);
|
|
1057
|
+
}
|
|
1058
|
+
body:not([data-ds-dark-theme]) .VOzbGW_navCell:not(.VOzbGW_active):hover {
|
|
1059
|
+
background: rgba(59, 110, 255, 0.06);
|
|
1060
|
+
box-shadow: inset 2px 0 0 rgba(59, 110, 255, 0.5);
|
|
1061
|
+
transform: translateX(2px);
|
|
1062
|
+
}
|
|
1063
|
+
body:not([data-ds-dark-theme]) .VOzbGW_navCell.VOzbGW_active {
|
|
1064
|
+
background: linear-gradient(90deg, rgba(59, 110, 255, 0.22), rgba(59, 110, 255, 0.04)) !important;
|
|
1065
|
+
box-shadow:
|
|
1066
|
+
0 6px 18px rgba(59, 110, 255, 0.18),
|
|
1067
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
1068
|
+
}
|
|
1069
|
+
body:not([data-ds-dark-theme]) .VOzbGW_header {
|
|
1070
|
+
border-bottom: 1px solid rgba(40, 60, 100, 0.10);
|
|
1071
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
|
|
1072
|
+
}
|
|
1073
|
+
body:not([data-ds-dark-theme]) .VOzbGW_close {
|
|
1074
|
+
border-radius: 9px;
|
|
1075
|
+
transition: background 150ms var(--ds-ease-in-out, ease), box-shadow 150ms var(--ds-ease-in-out, ease);
|
|
1076
|
+
}
|
|
1077
|
+
body:not([data-ds-dark-theme]) .VOzbGW_close:hover {
|
|
1078
|
+
background: rgba(40, 60, 100, 0.08);
|
|
1079
|
+
box-shadow: 0 0 14px rgba(40, 60, 100, 0.10);
|
|
1080
|
+
}
|
|
1081
|
+
body:not([data-ds-dark-theme]) .VOzbGW_options [class$="_row"] {
|
|
1082
|
+
border-radius: 14px;
|
|
1083
|
+
transition: background 150ms var(--ds-ease-in-out, ease), box-shadow 150ms var(--ds-ease-in-out, ease);
|
|
1084
|
+
}
|
|
1085
|
+
body:not([data-ds-dark-theme]) .VOzbGW_options [class$="_row"]:hover {
|
|
1086
|
+
background: rgba(40, 60, 100, 0.03);
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
@keyframes dsh-glass-panel-in {
|
|
1090
|
+
from { opacity: 0; transform: translateY(8px) scale(0.985); }
|
|
1091
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
/* ───────────────────────── 13. 无障碍：减弱动效 ────────────────────────── */
|
|
1095
|
+
|
|
1096
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1097
|
+
body::after,
|
|
1098
|
+
#root::before {
|
|
1099
|
+
animation: none !important;
|
|
1100
|
+
}
|
|
1101
|
+
body .wSkVaW_composerSeat,
|
|
1102
|
+
body .pI_x6G_sidebarCol,
|
|
1103
|
+
body .pI_x6G_rightbarCol,
|
|
1104
|
+
body .VOzbGW_panel {
|
|
1105
|
+
animation: none !important;
|
|
1106
|
+
}
|
|
1107
|
+
body .uV2eYG_card {
|
|
1108
|
+
transition: none !important;
|
|
1109
|
+
}
|
|
1110
|
+
body .Sixlwa_bubble {
|
|
1111
|
+
animation: none !important;
|
|
1112
|
+
transition: none !important;
|
|
1113
|
+
}
|
|
1114
|
+
body .YDXeBa_sessionRow {
|
|
1115
|
+
animation: none !important;
|
|
1116
|
+
transition: none !important;
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
|
|
1120
|
+
/* ───────────────────── 15. 会话轨迹 + 审批空态玻璃化 ──────────────────── */
|
|
1121
|
+
/* 会话轨迹表（dsh-client-ui-trajectory 插件渲染，.Y0dWHa_* 为构建哈希类名，
|
|
1122
|
+
* 升级前端后可能漂移）：轨迹区整体落薄玻璃面（渐变 + 发丝边 + 内高光），
|
|
1123
|
+
* 表格本体透明露出玻璃；类型标签、会话分隔线、加载历史按钮统一玻璃化，
|
|
1124
|
+
* 与主题其余面板同一套语言。 */
|
|
1125
|
+
body[data-ds-dark-theme] .Y0dWHa_tablePane {
|
|
1126
|
+
background: linear-gradient(180deg, rgba(30, 38, 60, 0.32), rgba(19, 26, 44, 0.42));
|
|
1127
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
1128
|
+
border-radius: 16px;
|
|
1129
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
|
|
1130
|
+
}
|
|
1131
|
+
body:not([data-ds-dark-theme]) .Y0dWHa_tablePane {
|
|
1132
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.24));
|
|
1133
|
+
border: 1px solid rgba(255, 255, 255, 0.62);
|
|
1134
|
+
border-radius: 16px;
|
|
1135
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
|
|
1136
|
+
}
|
|
1137
|
+
body .Y0dWHa_table {
|
|
1138
|
+
background: transparent !important;
|
|
1139
|
+
}
|
|
1140
|
+
/* 会话（turn）分隔线：2px 粗线 → 1px 发丝线 */
|
|
1141
|
+
body .Y0dWHa_table tbody tr[data-turn-start=true]:not(:first-child) td:before {
|
|
1142
|
+
height: 1px;
|
|
1143
|
+
}
|
|
1144
|
+
body[data-ds-dark-theme] .Y0dWHa_table tbody tr[data-turn-start=true]:not(:first-child) td:before {
|
|
1145
|
+
background: rgba(255, 255, 255, 0.08);
|
|
1146
|
+
}
|
|
1147
|
+
body:not([data-ds-dark-theme]) .Y0dWHa_table tbody tr[data-turn-start=true]:not(:first-child) td:before {
|
|
1148
|
+
background: rgba(28, 36, 58, 0.10);
|
|
1149
|
+
}
|
|
1150
|
+
/* 类型标签（工具/助手/请求等）：磨砂玻璃小胶囊，保留种类色 */
|
|
1151
|
+
body .Y0dWHa_kindTag {
|
|
1152
|
+
border-radius: 7px;
|
|
1153
|
+
backdrop-filter: blur(6px);
|
|
1154
|
+
-webkit-backdrop-filter: blur(6px);
|
|
1155
|
+
}
|
|
1156
|
+
body[data-ds-dark-theme] .Y0dWHa_kindTag {
|
|
1157
|
+
border-color: rgba(255, 255, 255, 0.16);
|
|
1158
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
|
1159
|
+
}
|
|
1160
|
+
body:not([data-ds-dark-theme]) .Y0dWHa_kindTag {
|
|
1161
|
+
border-color: rgba(31, 45, 80, 0.14);
|
|
1162
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
|
|
1163
|
+
}
|
|
1164
|
+
/* 加载更早历史：扁平全宽条 → 玻璃胶囊条 */
|
|
1165
|
+
body .Y0dWHa_historyLoadButton {
|
|
1166
|
+
width: auto;
|
|
1167
|
+
min-width: 170px;
|
|
1168
|
+
height: 28px;
|
|
1169
|
+
margin: 5px auto;
|
|
1170
|
+
border-radius: 999px;
|
|
1171
|
+
}
|
|
1172
|
+
body[data-ds-dark-theme] .Y0dWHa_historyLoadButton {
|
|
1173
|
+
background: linear-gradient(180deg, rgba(120, 150, 220, 0.16), rgba(86, 134, 254, 0.10));
|
|
1174
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
1175
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
|
|
1176
|
+
}
|
|
1177
|
+
body[data-ds-dark-theme] .Y0dWHa_historyLoadButton:hover {
|
|
1178
|
+
background: linear-gradient(180deg, rgba(120, 150, 220, 0.26), rgba(86, 134, 254, 0.16));
|
|
1179
|
+
border-color: rgba(255, 255, 255, 0.20);
|
|
1180
|
+
}
|
|
1181
|
+
body:not([data-ds-dark-theme]) .Y0dWHa_historyLoadButton {
|
|
1182
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.60));
|
|
1183
|
+
border: 1px solid rgba(31, 45, 80, 0.14);
|
|
1184
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
|
|
1185
|
+
}
|
|
1186
|
+
body:not([data-ds-dark-theme]) .Y0dWHa_historyLoadButton:hover {
|
|
1187
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(222, 231, 250, 0.72));
|
|
1188
|
+
border-color: rgba(59, 110, 255, 0.32);
|
|
1189
|
+
}
|
|
1190
|
+
/* 审批空态（dsh-approval-gate-safe 插件）：玻璃面板内的弱化提示文字，
|
|
1191
|
+
* 深浅两套配色，避免默认次生色在极光底上发灰。 */
|
|
1192
|
+
body[data-ds-dark-theme] .ag-empty {
|
|
1193
|
+
color: rgb(154, 165, 186);
|
|
1194
|
+
}
|
|
1195
|
+
body:not([data-ds-dark-theme]) .ag-empty {
|
|
1196
|
+
color: rgb(102, 115, 142);
|
|
1197
|
+
}
|
|
1198
|
+
|