pi-web-ui 0.69.0 → 0.71.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.
Files changed (24) hide show
  1. package/CHANGELOG.md +302 -0
  2. package/dist/server/agent-service.js +13 -4
  3. package/dist/server/client-state.js +44 -17
  4. package/dist/server/dsh/dsh-agent-service.js +3 -0
  5. package/dist/server/index.js +1 -0
  6. package/dist/server/locales.js +1 -1
  7. package/dist/server/marker-service.js +19 -15
  8. package/dist/server/settings-service.js +1 -0
  9. package/dist/server/subagents.js +13 -6
  10. package/dist/server/terminals.js +12 -1
  11. package/dist/server/webui-context.js +9 -0
  12. package/package.json +2 -1
  13. package/themes/cyberpunk.css +97 -81
  14. package/themes/dazzle.css +97 -81
  15. package/themes/md-preview.css +114 -98
  16. package/themes/translucent.css +78 -0
  17. package/themes/transparent.css +78 -0
  18. package/themes/white.css +176 -160
  19. package/web/dist/assets/{TerminalPanel-Cj8zsjx-.js → TerminalPanel-DXNpevIG.js} +1 -1
  20. package/web/dist/assets/index-4ge_ioPK.css +10 -0
  21. package/web/dist/assets/index-Cue012aF.js +335 -0
  22. package/web/dist/index.html +2 -2
  23. package/web/dist/assets/index-DCOcsPFm.js +0 -334
  24. package/web/dist/assets/index-jH2Bb-0X.css +0 -10
package/themes/cyberpunk.css CHANGED
@@ -1,81 +1,97 @@
1
- /* theme-name: 赛博朋克 */
2
- /* theme-name-en: Cyberpunk */
3
- :root {
4
- color-scheme: dark;
5
- --bg: #0a0a0f;
6
- --bg-elev: #12121e;
7
- --bg-elev2: #1a1a2e;
8
- --border: #2b2b4a;
9
- --border-soft: #20203a;
10
- --text: #e6e6ff;
11
- --text-dim: #9a9ac4;
12
- --text-faint: #6a6a8e;
13
- --accent: #00d4ff;
14
- --accent-soft: rgba(0, 212, 255, 0.14);
15
- --green: #00ff41;
16
- --green-soft: rgba(0, 255, 65, 0.12);
17
- --red: #ff006e;
18
- --red-soft: rgba(255, 0, 110, 0.12);
19
- --amber: #ffd700;
20
- --term-bg: #0a0a0f;
21
- --term-fg: #e6e6ff;
22
- --term-cursor: #00d4ff;
23
- --term-cursor-accent: #0a0a0f;
24
- --term-selection: rgba(0, 212, 255, 0.35);
25
- --term-black: #1a1a2e;
26
- --term-red: #ff006e;
27
- --term-green: #00ff41;
28
- --term-yellow: #ffd700;
29
- --term-blue: #00d4ff;
30
- --term-magenta: #ff00ff;
31
- --term-cyan: #00f5ff;
32
- --term-white: #e6e6ff;
33
- --term-bright-black: #6a6a8e;
34
- --term-bright-red: #ff006e;
35
- --term-bright-green: #00ff41;
36
- --term-bright-yellow: #ffd700;
37
- --term-bright-blue: #00d4ff;
38
- --term-bright-magenta: #ff00ff;
39
- --term-bright-cyan: #00f5ff;
40
- --term-bright-white: #ffffff;
41
- --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
42
- --tooltip-bg: #232733;
43
- --code-bg: #0b0d12;
44
- --code-text: #c9d1d9;
45
- --err-text: #f0a5a5;
46
- --red-text: #fca5a5;
47
- --amber-text: #fcd34d;
48
- --info-blue: #00d4ff;
49
- --link: #a78bfa;
50
- --link-hover: #c4b5fd;
51
- --link-soft: #ddd6fe;
52
- --md-strong: #f3f4f6;
53
- --skill-blue: #5eb3ff;
54
- --plugin-purple: #ff00ff;
55
- --auth-green: #6ee7a0;
56
- --scroll-thumb: #2a2f3d;
57
- --scroll-thumb-hover: #3a4152;
58
- --notice-err-bg: #401d23;
59
- --notice-warn-bg: #38251f;
60
- --notice-info-bg: #1b2544;
61
- --notice-err-border: #ef4444;
62
- --notice-warn-border: #f59e0b;
63
- --notice-info-border: #3b82f6;
64
- --send-blue: #00d4ff;
65
- --send-blue-hover: #00b8d4;
66
- --brand-grad-a: #00d4ff;
67
- --brand-grad-b: #ff006e;
68
- --on-amber: #1a1a1a;
69
- --search-active-fg: #1a1d26;
70
- --switch-knob: #ffffff;
71
- --bg-elev3: rgba(255, 255, 255, 0.06);
72
- --glow-015: rgba(255, 255, 255, 0.015);
73
- --glow-025: rgba(255, 255, 255, 0.025);
74
- --glow-03: rgba(255, 255, 255, 0.03);
75
- --glow-04: rgba(255, 255, 255, 0.04);
76
- --glow-05: rgba(255, 255, 255, 0.05);
77
- --glow-12: rgba(255, 255, 255, 0.12);
78
- --glow-18: rgba(255, 255, 255, 0.18);
79
- --glow-22: rgba(255, 255, 255, 0.22);
80
- --glow-38: rgba(255, 255, 255, 0.38);
81
- }
1
+ /* theme-name: 赛博朋克 */
2
+ /* theme-name-en: Cyberpunk */
3
+ :root {
4
+ color-scheme: dark;
5
+ --bg: #0a0a0f;
6
+ --bg-elev: #12121e;
7
+ --bg-elev2: #1a1a2e;
8
+ --border: #2b2b4a;
9
+ --border-soft: #20203a;
10
+ --text: #e6e6ff;
11
+ --text-dim: #9a9ac4;
12
+ --text-faint: #6a6a8e;
13
+ --accent: #00d4ff;
14
+ --accent-soft: rgba(0, 212, 255, 0.14);
15
+ --green: #00ff41;
16
+ --green-soft: rgba(0, 255, 65, 0.12);
17
+ --red: #ff006e;
18
+ --red-soft: rgba(255, 0, 110, 0.12);
19
+ --amber: #ffd700;
20
+ --term-bg: #0a0a0f;
21
+ --term-fg: #e6e6ff;
22
+ --term-cursor: #00d4ff;
23
+ --term-cursor-accent: #0a0a0f;
24
+ --term-selection: rgba(0, 212, 255, 0.35);
25
+ --term-black: #1a1a2e;
26
+ --term-red: #ff006e;
27
+ --term-green: #00ff41;
28
+ --term-yellow: #ffd700;
29
+ --term-blue: #00d4ff;
30
+ --term-magenta: #ff00ff;
31
+ --term-cyan: #00f5ff;
32
+ --term-white: #e6e6ff;
33
+ --term-bright-black: #6a6a8e;
34
+ --term-bright-red: #ff006e;
35
+ --term-bright-green: #00ff41;
36
+ --term-bright-yellow: #ffd700;
37
+ --term-bright-blue: #00d4ff;
38
+ --term-bright-magenta: #ff00ff;
39
+ --term-bright-cyan: #00f5ff;
40
+ --term-bright-white: #ffffff;
41
+ --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
42
+ --mermaid-font-size: 12px;
43
+ --tooltip-bg: #232733;
44
+ --code-bg: #0b0d12;
45
+ --code-text: #c9d1d9;
46
+ --err-text: #f0a5a5;
47
+ --red-text: #fca5a5;
48
+ --amber-text: #fcd34d;
49
+ --info-blue: #00d4ff;
50
+ --link: #a78bfa;
51
+ --link-hover: #c4b5fd;
52
+ --link-soft: #ddd6fe;
53
+ --md-strong: #f3f4f6;
54
+ --skill-blue: #5eb3ff;
55
+ --plugin-purple: #ff00ff;
56
+ --auth-green: #6ee7a0;
57
+ --scroll-thumb: #2a2f3d;
58
+ --scroll-thumb-hover: #3a4152;
59
+ --notice-err-bg: #401d23;
60
+ --notice-warn-bg: #38251f;
61
+ --notice-info-bg: #1b2544;
62
+ --notice-err-border: #ef4444;
63
+ --notice-warn-border: #f59e0b;
64
+ --notice-info-border: #3b82f6;
65
+ --send-blue: #00d4ff;
66
+ --send-blue-hover: #00b8d4;
67
+ --brand-grad-a: #00d4ff;
68
+ --brand-grad-b: #ff006e;
69
+ --on-amber: #1a1a1a;
70
+ --search-active-fg: #1a1d26;
71
+ --switch-knob: #ffffff;
72
+ --bg-elev3: rgba(255, 255, 255, 0.06);
73
+ --glow-015: rgba(255, 255, 255, 0.015);
74
+ --glow-025: rgba(255, 255, 255, 0.025);
75
+ --glow-03: rgba(255, 255, 255, 0.03);
76
+ --glow-04: rgba(255, 255, 255, 0.04);
77
+ --glow-05: rgba(255, 255, 255, 0.05);
78
+ --glow-12: rgba(255, 255, 255, 0.12);
79
+ --glow-18: rgba(255, 255, 255, 0.18);
80
+ --glow-22: rgba(255, 255, 255, 0.22);
81
+ --glow-38: rgba(255, 255, 255, 0.38);
82
+ --control-fg: #9aa1b4;
83
+ --control-bg: #1a1d26;
84
+ --control-border: #262a35;
85
+ --bg-image: none;
86
+ --bg-image-dim: 0.78;
87
+ --bg-image-blur: 0px;
88
+ --wallpaper-panel-alpha: 62%;
89
+ --topbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
90
+ --statusbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
91
+ --panel-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
92
+ --card-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
93
+ --chip-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
94
+ --msgs-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
95
+ --inputbox-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
96
+ --menu-bg: var(--chip-bg);
97
+ }
package/themes/dazzle.css CHANGED
@@ -1,81 +1,97 @@
1
- /* theme-name: 炫彩 */
2
- /* theme-name-en: Dazzle */
3
- :root {
4
- color-scheme: dark;
5
- --bg: #0b0b14;
6
- --bg-elev: #13131e;
7
- --bg-elev2: #1b1b2e;
8
- --border: #2a2a48;
9
- --border-soft: #1f1f38;
10
- --text: #e8e8f0;
11
- --text-dim: #a0a0c0;
12
- --text-faint: #707090;
13
- --accent: #818cf8;
14
- --accent-soft: rgba(129, 140, 248, 0.14);
15
- --green: #34d399;
16
- --green-soft: rgba(52, 211, 153, 0.12);
17
- --red: #f43f5e;
18
- --red-soft: rgba(244, 63, 94, 0.12);
19
- --amber: #f59e0b;
20
- --term-bg: #0b0b14;
21
- --term-fg: #e8e8f0;
22
- --term-cursor: #818cf8;
23
- --term-cursor-accent: #0b0b14;
24
- --term-selection: rgba(129, 140, 248, 0.35);
25
- --term-black: #1b1b2e;
26
- --term-red: #f43f5e;
27
- --term-green: #34d399;
28
- --term-yellow: #f59e0b;
29
- --term-blue: #60a5fa;
30
- --term-magenta: #c084fc;
31
- --term-cyan: #22d3ee;
32
- --term-white: #e8e8f0;
33
- --term-bright-black: #707090;
34
- --term-bright-red: #f43f5e;
35
- --term-bright-green: #34d399;
36
- --term-bright-yellow: #f59e0b;
37
- --term-bright-blue: #60a5fa;
38
- --term-bright-magenta: #c084fc;
39
- --term-bright-cyan: #22d3ee;
40
- --term-bright-white: #ffffff;
41
- --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
42
- --tooltip-bg: #232733;
43
- --code-bg: #0b0d12;
44
- --code-text: #c9d1d9;
45
- --err-text: #f0a5a5;
46
- --red-text: #fca5a5;
47
- --amber-text: #fcd34d;
48
- --info-blue: #60a5fa;
49
- --link: #a78bfa;
50
- --link-hover: #c4b5fd;
51
- --link-soft: #ddd6fe;
52
- --md-strong: #f3f4f6;
53
- --skill-blue: #5eb3ff;
54
- --plugin-purple: #b58cff;
55
- --auth-green: #6ee7a0;
56
- --scroll-thumb: #2a2f3d;
57
- --scroll-thumb-hover: #3a4152;
58
- --notice-err-bg: #401d23;
59
- --notice-warn-bg: #38251f;
60
- --notice-info-bg: #1b2544;
61
- --notice-err-border: #ef4444;
62
- --notice-warn-border: #f59e0b;
63
- --notice-info-border: #3b82f6;
64
- --send-blue: #818cf8;
65
- --send-blue-hover: #6366f1;
66
- --brand-grad-a: #818cf8;
67
- --brand-grad-b: #c084fc;
68
- --on-amber: #1a1a1a;
69
- --search-active-fg: #1a1d26;
70
- --switch-knob: #ffffff;
71
- --bg-elev3: rgba(255, 255, 255, 0.06);
72
- --glow-015: rgba(255, 255, 255, 0.015);
73
- --glow-025: rgba(255, 255, 255, 0.025);
74
- --glow-03: rgba(255, 255, 255, 0.03);
75
- --glow-04: rgba(255, 255, 255, 0.04);
76
- --glow-05: rgba(255, 255, 255, 0.05);
77
- --glow-12: rgba(255, 255, 255, 0.12);
78
- --glow-18: rgba(255, 255, 255, 0.18);
79
- --glow-22: rgba(255, 255, 255, 0.22);
80
- --glow-38: rgba(255, 255, 255, 0.38);
81
- }
1
+ /* theme-name: 炫彩 */
2
+ /* theme-name-en: Dazzle */
3
+ :root {
4
+ color-scheme: dark;
5
+ --bg: #0b0b14;
6
+ --bg-elev: #13131e;
7
+ --bg-elev2: #1b1b2e;
8
+ --border: #2a2a48;
9
+ --border-soft: #1f1f38;
10
+ --text: #e8e8f0;
11
+ --text-dim: #a0a0c0;
12
+ --text-faint: #707090;
13
+ --accent: #818cf8;
14
+ --accent-soft: rgba(129, 140, 248, 0.14);
15
+ --green: #34d399;
16
+ --green-soft: rgba(52, 211, 153, 0.12);
17
+ --red: #f43f5e;
18
+ --red-soft: rgba(244, 63, 94, 0.12);
19
+ --amber: #f59e0b;
20
+ --term-bg: #0b0b14;
21
+ --term-fg: #e8e8f0;
22
+ --term-cursor: #818cf8;
23
+ --term-cursor-accent: #0b0b14;
24
+ --term-selection: rgba(129, 140, 248, 0.35);
25
+ --term-black: #1b1b2e;
26
+ --term-red: #f43f5e;
27
+ --term-green: #34d399;
28
+ --term-yellow: #f59e0b;
29
+ --term-blue: #60a5fa;
30
+ --term-magenta: #c084fc;
31
+ --term-cyan: #22d3ee;
32
+ --term-white: #e8e8f0;
33
+ --term-bright-black: #707090;
34
+ --term-bright-red: #f43f5e;
35
+ --term-bright-green: #34d399;
36
+ --term-bright-yellow: #f59e0b;
37
+ --term-bright-blue: #60a5fa;
38
+ --term-bright-magenta: #c084fc;
39
+ --term-bright-cyan: #22d3ee;
40
+ --term-bright-white: #ffffff;
41
+ --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
42
+ --mermaid-font-size: 12px;
43
+ --tooltip-bg: #232733;
44
+ --code-bg: #0b0d12;
45
+ --code-text: #c9d1d9;
46
+ --err-text: #f0a5a5;
47
+ --red-text: #fca5a5;
48
+ --amber-text: #fcd34d;
49
+ --info-blue: #60a5fa;
50
+ --link: #a78bfa;
51
+ --link-hover: #c4b5fd;
52
+ --link-soft: #ddd6fe;
53
+ --md-strong: #f3f4f6;
54
+ --skill-blue: #5eb3ff;
55
+ --plugin-purple: #b58cff;
56
+ --auth-green: #6ee7a0;
57
+ --scroll-thumb: #2a2f3d;
58
+ --scroll-thumb-hover: #3a4152;
59
+ --notice-err-bg: #401d23;
60
+ --notice-warn-bg: #38251f;
61
+ --notice-info-bg: #1b2544;
62
+ --notice-err-border: #ef4444;
63
+ --notice-warn-border: #f59e0b;
64
+ --notice-info-border: #3b82f6;
65
+ --send-blue: #818cf8;
66
+ --send-blue-hover: #6366f1;
67
+ --brand-grad-a: #818cf8;
68
+ --brand-grad-b: #c084fc;
69
+ --on-amber: #1a1a1a;
70
+ --search-active-fg: #1a1d26;
71
+ --switch-knob: #ffffff;
72
+ --bg-elev3: rgba(255, 255, 255, 0.06);
73
+ --glow-015: rgba(255, 255, 255, 0.015);
74
+ --glow-025: rgba(255, 255, 255, 0.025);
75
+ --glow-03: rgba(255, 255, 255, 0.03);
76
+ --glow-04: rgba(255, 255, 255, 0.04);
77
+ --glow-05: rgba(255, 255, 255, 0.05);
78
+ --glow-12: rgba(255, 255, 255, 0.12);
79
+ --glow-18: rgba(255, 255, 255, 0.18);
80
+ --glow-22: rgba(255, 255, 255, 0.22);
81
+ --glow-38: rgba(255, 255, 255, 0.38);
82
+ --control-fg: #9aa1b4;
83
+ --control-bg: #1a1d26;
84
+ --control-border: #262a35;
85
+ --bg-image: none;
86
+ --bg-image-dim: 0.78;
87
+ --bg-image-blur: 0px;
88
+ --wallpaper-panel-alpha: 62%;
89
+ --topbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
90
+ --statusbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
91
+ --panel-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
92
+ --card-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
93
+ --chip-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
94
+ --msgs-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
95
+ --inputbox-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
96
+ --menu-bg: var(--chip-bg);
97
+ }
package/themes/md-preview.css CHANGED
@@ -1,98 +1,114 @@
1
- /* theme-name: 紫晕 */
2
- /* theme-name-en: Purple Haze */
3
- :root {
4
- color-scheme: dark;
5
- --bg: #0d0e12;
6
- --bg-elev: #14161c;
7
- --bg-elev2: #1a1d26;
8
- --border: #262a35;
9
- --border-soft: #1e2230;
10
- --text: #e6e8ef;
11
- --text-dim: #9aa1b4;
12
- --text-faint: #6b7284;
13
- --accent: #8b5cf6;
14
- --accent-soft: rgba(139, 92, 246, 0.14);
15
- --green: #34d399;
16
- --green-soft: rgba(52, 211, 153, 0.12);
17
- --red: #f87171;
18
- --red-soft: rgba(248, 113, 113, 0.12);
19
- --amber: #fbbf24;
20
- --term-bg: #0b0d12;
21
- --term-fg: #e6e8ef;
22
- --term-cursor: #8b5cf6;
23
- --term-cursor-accent: #0b0d12;
24
- --term-selection: rgba(139, 92, 246, 0.35);
25
- --term-black: #1a1d26;
26
- --term-red: #f87171;
27
- --term-green: #34d399;
28
- --term-yellow: #fbbf24;
29
- --term-blue: #60a5fa;
30
- --term-magenta: #c084fc;
31
- --term-cyan: #22d3ee;
32
- --term-white: #e6e8ef;
33
- --term-bright-black: #6b7284;
34
- --term-bright-red: #f87171;
35
- --term-bright-green: #34d399;
36
- --term-bright-yellow: #fbbf24;
37
- --term-bright-blue: #60a5fa;
38
- --term-bright-magenta: #c084fc;
39
- --term-bright-cyan: #22d3ee;
40
- --term-bright-white: #ffffff;
41
- --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
42
- --tooltip-bg: #232733;
43
- --code-bg: #0b0d12;
44
- --code-text: #c9d1d9;
45
- --err-text: #f0a5a5;
46
- --red-text: #fca5a5;
47
- --amber-text: #fcd34d;
48
- --info-blue: #60a5fa;
49
- --link: #a78bfa;
50
- --link-hover: #c4b5fd;
51
- --link-soft: #ddd6fe;
52
- --md-strong: #f3f4f6;
53
- --skill-blue: #5eb3ff;
54
- --plugin-purple: #b58cff;
55
- --auth-green: #6ee7a0;
56
- --scroll-thumb: #2a2f3d;
57
- --scroll-thumb-hover: #3a4152;
58
- --notice-err-bg: #401d23;
59
- --notice-warn-bg: #38251f;
60
- --notice-info-bg: #1b2544;
61
- --notice-err-border: #ef4444;
62
- --notice-warn-border: #f59e0b;
63
- --notice-info-border: #3b82f6;
64
- --send-blue: #3b82f6;
65
- --send-blue-hover: #2563eb;
66
- --brand-grad-a: #8b5cf6;
67
- --brand-grad-b: #6366f1;
68
- --on-amber: #1a1a1a;
69
- --search-active-fg: #1a1d26;
70
- --switch-knob: #ffffff;
71
- --bg-elev3: rgba(255, 255, 255, 0.06);
72
- --glow-015: rgba(255, 255, 255, 0.015);
73
- --glow-025: rgba(255, 255, 255, 0.025);
74
- --glow-03: rgba(255, 255, 255, 0.03);
75
- --glow-04: rgba(255, 255, 255, 0.04);
76
- --glow-05: rgba(255, 255, 255, 0.05);
77
- --glow-12: rgba(255, 255, 255, 0.12);
78
- --glow-18: rgba(255, 255, 255, 0.18);
79
- --glow-22: rgba(255, 255, 255, 0.22);
80
- --glow-38: rgba(255, 255, 255, 0.38);
81
- }
82
-
83
- /* ---- ambient gradient（镜像 .fp-markdown 预览底色，覆盖整个窗口）---- */
84
- :root {
85
- --bg: #0a0b10;
86
- }
87
- body {
88
- background:
89
- radial-gradient(circle at 10% 0%, rgba(139, 92, 246, 0.14), transparent 38%),
90
- radial-gradient(circle at 88% 100%, rgba(139, 92, 246, 0.07), transparent 44%),
91
- #0a0b10;
92
- }
93
- /* 让渐变直接成为整个窗口的底色：铬件全部透明，只留边框定结构 */
94
- .topbar,
95
- .panel,
96
- .statusbar {
97
- background: transparent;
98
- }
1
+ /* theme-name: 紫晕 */
2
+ /* theme-name-en: Purple Haze */
3
+ :root {
4
+ color-scheme: dark;
5
+ --bg: #0d0e12;
6
+ --bg-elev: #14161c;
7
+ --bg-elev2: #1a1d26;
8
+ --border: #262a35;
9
+ --border-soft: #1e2230;
10
+ --text: #e6e8ef;
11
+ --text-dim: #9aa1b4;
12
+ --text-faint: #6b7284;
13
+ --accent: #8b5cf6;
14
+ --accent-soft: rgba(139, 92, 246, 0.14);
15
+ --green: #34d399;
16
+ --green-soft: rgba(52, 211, 153, 0.12);
17
+ --red: #f87171;
18
+ --red-soft: rgba(248, 113, 113, 0.12);
19
+ --amber: #fbbf24;
20
+ --term-bg: #0b0d12;
21
+ --term-fg: #e6e8ef;
22
+ --term-cursor: #8b5cf6;
23
+ --term-cursor-accent: #0b0d12;
24
+ --term-selection: rgba(139, 92, 246, 0.35);
25
+ --term-black: #1a1d26;
26
+ --term-red: #f87171;
27
+ --term-green: #34d399;
28
+ --term-yellow: #fbbf24;
29
+ --term-blue: #60a5fa;
30
+ --term-magenta: #c084fc;
31
+ --term-cyan: #22d3ee;
32
+ --term-white: #e6e8ef;
33
+ --term-bright-black: #6b7284;
34
+ --term-bright-red: #f87171;
35
+ --term-bright-green: #34d399;
36
+ --term-bright-yellow: #fbbf24;
37
+ --term-bright-blue: #60a5fa;
38
+ --term-bright-magenta: #c084fc;
39
+ --term-bright-cyan: #22d3ee;
40
+ --term-bright-white: #ffffff;
41
+ --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
42
+ --mermaid-font-size: 12px;
43
+ --tooltip-bg: #232733;
44
+ --code-bg: #0b0d12;
45
+ --code-text: #c9d1d9;
46
+ --err-text: #f0a5a5;
47
+ --red-text: #fca5a5;
48
+ --amber-text: #fcd34d;
49
+ --info-blue: #60a5fa;
50
+ --link: #a78bfa;
51
+ --link-hover: #c4b5fd;
52
+ --link-soft: #ddd6fe;
53
+ --md-strong: #f3f4f6;
54
+ --skill-blue: #5eb3ff;
55
+ --plugin-purple: #b58cff;
56
+ --auth-green: #6ee7a0;
57
+ --scroll-thumb: #2a2f3d;
58
+ --scroll-thumb-hover: #3a4152;
59
+ --notice-err-bg: #401d23;
60
+ --notice-warn-bg: #38251f;
61
+ --notice-info-bg: #1b2544;
62
+ --notice-err-border: #ef4444;
63
+ --notice-warn-border: #f59e0b;
64
+ --notice-info-border: #3b82f6;
65
+ --send-blue: #3b82f6;
66
+ --send-blue-hover: #2563eb;
67
+ --brand-grad-a: #8b5cf6;
68
+ --brand-grad-b: #6366f1;
69
+ --on-amber: #1a1a1a;
70
+ --search-active-fg: #1a1d26;
71
+ --switch-knob: #ffffff;
72
+ --bg-elev3: rgba(255, 255, 255, 0.06);
73
+ --glow-015: rgba(255, 255, 255, 0.015);
74
+ --glow-025: rgba(255, 255, 255, 0.025);
75
+ --glow-03: rgba(255, 255, 255, 0.03);
76
+ --glow-04: rgba(255, 255, 255, 0.04);
77
+ --glow-05: rgba(255, 255, 255, 0.05);
78
+ --glow-12: rgba(255, 255, 255, 0.12);
79
+ --glow-18: rgba(255, 255, 255, 0.18);
80
+ --glow-22: rgba(255, 255, 255, 0.22);
81
+ --glow-38: rgba(255, 255, 255, 0.38);
82
+ --control-fg: #9aa1b4;
83
+ --control-bg: #1a1d26;
84
+ --control-border: #262a35;
85
+ --bg-image: none;
86
+ --bg-image-dim: 0.78;
87
+ --bg-image-blur: 0px;
88
+ --wallpaper-panel-alpha: 62%;
89
+ --topbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
90
+ --statusbar-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
91
+ --panel-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
92
+ --card-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
93
+ --chip-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
94
+ --msgs-bg: color-mix(in srgb, var(--bg-elev) var(--wallpaper-panel-alpha, 62%), transparent);
95
+ --inputbox-bg: color-mix(in srgb, var(--bg-elev2) var(--wallpaper-panel-alpha, 62%), transparent);
96
+ --menu-bg: var(--chip-bg);
97
+ }
98
+
99
+ /* ---- ambient gradient（镜像 .fp-markdown 预览底色，覆盖整个窗口）---- */
100
+ :root {
101
+ --bg: #0a0b10;
102
+ }
103
+ body {
104
+ background:
105
+ radial-gradient(circle at 10% 0%, rgba(139, 92, 246, 0.14), transparent 38%),
106
+ radial-gradient(circle at 88% 100%, rgba(139, 92, 246, 0.07), transparent 44%),
107
+ #0a0b10;
108
+ }
109
+ /* 让渐变直接成为整个窗口的底色：铬件全部透明，只留边框定结构 */
110
+ .topbar,
111
+ .panel,
112
+ .statusbar {
113
+ background: transparent;
114
+ }
package/themes/translucent.css ADDED
@@ -0,0 +1,78 @@
1
+ /* theme-name: 半透明 */
2
+ /* theme-name-en: Translucent */
3
+ /*
4
+ * 半透明主题——专为聊天背景图（壁纸，issue #100）设计：
5
+ * 调色板与默认暗色一致，但把所有底板统一降到半透明（顶栏/底栏/左右面板、
6
+ * 卡片/控件/代码面、输入框盒子、终端视图都走同一 --wallpaper-panel-alpha），
7
+ * 让壁纸从各处透出、整体融合成一张画。配壁纸用最佳；不配壁纸时这些区域会
8
+ * 透出纯色底（--bg），观感略偏暗沉，属预期。
9
+ *
10
+ * 统一透图率：--wallpaper-panel-alpha: 45%（45% 容器色 + 55% 透图）。
11
+ * 已覆盖的面：顶栏/底栏/左右面板、左右折叠按钮（.panel-collapse-btn /
12
+ * .panel-rail）、工具调用卡及其参数/输出块（.toolcall / .toolcall-args pre /
13
+ * .toolcall-output pre）、bash 块（.bashblock/.termline）、消息代码块
14
+ * （.codeblock pre）、全部消息气泡（.thinking/.toolcall/.bashblock/
15
+ * .skillcard/.attachcard/.queued-bubble/.retry-notice/.msg-collapsed（含 hover））、
16
+ * 快捷短语（.quick-chip）、新对话提示词模板卡（.empty-template）、顶栏
17
+ * chips / 视图切换（.chip/.view-switch）——走 styles.css
18
+ * 的 --card-bg/--chip-bg/--inputbox-bg，随 --wallpaper-panel-alpha 统一联动；
19
+ * 中间的聊天/消息区用 --msgs-bg（同式 45%），气泡立在统一玻璃面上略实
20
+ * 一层形成层次。**下拉弹窗保持实色**：声音/语言/主题/模型选择/思考强度等
21
+ * 点出来的 .dd-menu 背景用 --menu-bg（这里覆盖回 var(--bg-elev2) 实色，
22
+ * 弹窗内容多为密集列表，实色保可读）。终端视图（xterm canvas/容器）读
23
+ * --term-bg，这里同样设半透明。
24
+ * 各变量都可单独覆盖回实色（如 var(--bg-elev)）即关闭对应面的透图；
25
+ * --msgs-bg 覆盖回 transparent 可恢复「消息区全透、壁纸从卡片间隙露出」。
26
+ */
27
+ :root {
28
+ color-scheme: dark;
29
+ --bg: #0d0e12;
30
+ --bg-elev: #14161c;
31
+ --bg-elev2: #1a1d26;
32
+ --border: #262a35;
33
+ --border-soft: #1e2230;
34
+ --text: #e6e8ef;
35
+ --text-dim: #9aa1b4;
36
+ --text-faint: #6b7284;
37
+ --accent: #8b5cf6;
38
+ --accent-soft: rgba(139, 92, 246, 0.14);
39
+ --green: #34d399;
40
+ --green-soft: rgba(52, 211, 153, 0.12);
41
+ --red: #f87171;
42
+ --red-soft: rgba(248, 113, 113, 0.12);
43
+ --amber: #fbbf24;
44
+ --term-bg: #0b0d12;
45
+ --term-fg: #e6e8ef;
46
+ --term-cursor: #8b5cf6;
47
+ --term-cursor-accent: #0b0d12;
48
+ --term-selection: rgba(139, 92, 246, 0.35);
49
+ --term-black: #1a1d26;
50
+ --term-red: #f87171;
51
+ --term-green: #34d399;
52
+ --term-yellow: #fbbf24;
53
+ --term-blue: #60a5fa;
54
+ --term-magenta: #c084fc;
55
+ --term-cyan: #22d3ee;
56
+ --term-white: #e6e8ef;
57
+ --term-bright-black: #6b7284;
58
+ --term-bright-red: #f87171;
59
+ --term-bright-green: #34d399;
60
+ --term-bright-yellow: #fbbf24;
61
+ --term-bright-blue: #60a5fa;
62
+ --term-bright-magenta: #c084fc;
63
+ --term-bright-cyan: #22d3ee;
64
+ --term-bright-white: #ffffff;
65
+
66
+ /* ---- 壁纸适配：三大区域（顶栏/底栏/左右面板）背景链式引用此变量，
67
+ 从默认 62% 降到 45% → 容器色更薄、图更透（45% 容器色 + 55% 透图）---- */
68
+ --wallpaper-panel-alpha: 45%;
69
+ /* 下拉弹窗（声音/语言/主题/模型/思考强度）：实色底保密集列表可读，
70
+ 覆盖 styles.css 默认的半透 --menu-bg */
71
+ --menu-bg: var(--bg-elev2);
72
+ /* 压暗略放轻（默认 0.78）：让图更鲜活，文字靠压暗与半透明底板仍可读 */
73
+ --bg-image-dim: 0.72;
74
+ /* 输入框盒子：styles.css 默认已与控件级底板同式跟随 --wallpaper-panel-alpha，
75
+ 这里不单独覆盖；想比整体厚/薄就设一个独立值 */
76
+ /* 终端视图：xterm canvas + 容器都读 --term-bg，改成半透明随整体透图 */
77
+ --term-bg: color-mix(in srgb, #0b0d12 45%, transparent);
78
+ }