dsh-skin-galactic-opera 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.
Files changed (7) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/LICENSE +21 -0
  3. package/README.md +124 -0
  4. package/cordis.patch.yml +5 -0
  5. package/lib/client.js +1004 -0
  6. package/lib/index.js +2 -0
  7. package/package.json +57 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,14 @@
1
+ # Changelog
2
+
3
+ All notable changes to this package will be documented in this file.
4
+
5
+ ## 0.1.0 - 2026-08-27
6
+
7
+ Initial public package version.
8
+
9
+ ### Added
10
+
11
+ - `galactic-opera` dark theme registration for DSH Web GUI.
12
+ - Space-opera visual layer with star fields, hyperspace lanes, black-hole accretion disk, planet, moon, satellite orbit, scanner HUD, route map, energy beams, comets, V-shaped starfighters, and mission-briefing crawl.
13
+ - Pointer parallax, click pulse, hover glow, scanner target tracking, and automatic hyperspace burst on message submission.
14
+ - Reduced-motion handling for users who prefer fewer animations.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 dsh-skin-galactic-opera contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,124 @@
1
+ # dsh-skin-galactic-opera
2
+
3
+ Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.
4
+
5
+ 非官方 DSH Web GUI 太空歌剧暗色皮肤插件。它使用通用科幻视觉语言，包括深空背景、霓虹 HUD、黑洞吸积盘、行星与卫星轨道、流星、V 形战机剪影和提交消息时的超空间跃迁效果。
6
+
7
+ This package does not include or recreate any official franchise logos, characters, ship designs, quotes, or proprietary names.
8
+
9
+ 本插件不包含也不复刻任何特定影视作品的官方 logo、角色、飞船设计、台词或专有名称。
10
+
11
+ ## Features
12
+
13
+ - Registers and enables the `galactic-opera` dark theme.
14
+ - Overrides DSH Web GUI theme tokens for backgrounds, borders, text, brand colors, state colors, scrollbars, and sidebar surfaces.
15
+ - Adds global visual styling for star fields, diagonal hyperspace lanes, hover glow, selection highlight, and code block glow.
16
+ - Adds decorative space-opera elements:
17
+ - Central black-hole accretion disk.
18
+ - Top-right planet, one moon, and an elliptical satellite orbit.
19
+ - Bottom-left rotating scanner HUD and holographic route map.
20
+ - Red, cyan, and gold energy beams.
21
+ - Sparse twinkling stars, comets, and generic V-shaped starfighter silhouettes.
22
+ - Gold mission-briefing crawl panel.
23
+ - Adds interactions:
24
+ - Subtle mouse parallax.
25
+ - Click energy pulse.
26
+ - Hover energy outlines on buttons, inputs, messages, and code blocks.
27
+ - Scanner target dot projected from the pointer direction relative to the viewport center; the target lights only when the scanner sweep passes it.
28
+ - Automatic hyperspace burst after submitting a new instruction or message.
29
+ - Respects `prefers-reduced-motion: reduce` by disabling major animations.
30
+
31
+ ## Installation
32
+
33
+ ### From npm
34
+
35
+ After this package is published to npm:
36
+
37
+ ```powershell
38
+ dsh plugin --profile web add dsh-skin-galactic-opera
39
+ ```
40
+
41
+ ### From a local checkout
42
+
43
+ From the parent directory of this package:
44
+
45
+ ```powershell
46
+ dsh plugin --profile web add ./dsh-skin-galactic-opera
47
+ ```
48
+
49
+ Or with an absolute path:
50
+
51
+ ```powershell
52
+ dsh plugin --profile web add D:\path\to\dsh-skin-galactic-opera
53
+ ```
54
+
55
+ Then refresh the DSH Web GUI, usually available at:
56
+
57
+ ```text
58
+ http://127.0.0.1:3080
59
+ ```
60
+
61
+ If the browser keeps an older client bundle, use a hard refresh:
62
+
63
+ ```text
64
+ Ctrl + F5
65
+ ```
66
+
67
+ ## Uninstall
68
+
69
+ ```powershell
70
+ dsh plugin --profile web remove dsh-skin-galactic-opera
71
+ ```
72
+
73
+ Refresh the Web GUI after uninstalling.
74
+
75
+ ## Development
76
+
77
+ Check browser-side JavaScript syntax:
78
+
79
+ ```powershell
80
+ npm run check
81
+ ```
82
+
83
+ Preview the npm package contents before publishing:
84
+
85
+ ```powershell
86
+ npm run pack:dry
87
+ ```
88
+
89
+ Publish to npm:
90
+
91
+ ```powershell
92
+ npm publish
93
+ ```
94
+
95
+ ## Package structure
96
+
97
+ ```text
98
+ dsh-skin-galactic-opera/
99
+ ├─ package.json
100
+ ├─ cordis.patch.yml
101
+ ├─ README.md
102
+ ├─ LICENSE
103
+ ├─ CHANGELOG.md
104
+ └─ lib/
105
+ ├─ index.js
106
+ └─ client.js
107
+ ```
108
+
109
+ - `package.json`: package metadata, npm publish settings, DSH bundle declaration, and Web client plugin declaration.
110
+ - `cordis.patch.yml`: inserts the `dsh-skin-galactic-opera` client plugin into the Web profile.
111
+ - `lib/index.js`: host-side no-op entry.
112
+ - `lib/client.js`: browser-side theme, decoration, and interaction implementation.
113
+
114
+ ## GitHub topics
115
+
116
+ Recommended repository topics:
117
+
118
+ ```text
119
+ dsh deepseek-harness dsh-plugin dsh-skin dsh-theme space-opera sci-fi dark-theme hud web-ui
120
+ ```
121
+
122
+ ## License
123
+
124
+ MIT
package/cordis.patch.yml ADDED
@@ -0,0 +1,5 @@
1
+ # Adds the Galactic Opera browser skin to a DSH web profile.
2
+ # This package is both a profile bundle and the inserted client plugin row.
3
+ - insert:
4
+ - id: dsh-skin-galactic-opera
5
+ name: dsh-skin-galactic-opera
package/lib/client.js ADDED
@@ -0,0 +1,1004 @@
1
+ window.__ModuleLoader__.load({
2
+ id: "dsh-skin-galactic-opera",
3
+ factory: (require) => {
4
+ var module = { exports: {} };
5
+ var exports = module.exports;
6
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
7
+
8
+ const PLUGIN_ID = "dsh-skin-galactic-opera";
9
+ const THEME_ID = "galactic-opera";
10
+ const THEME_LABEL = "Galactic Opera";
11
+ const STYLE_ID = "dsh-skin-galactic-opera-style";
12
+ const DECOR_ID = "dsh-skin-galactic-opera-decor";
13
+ const CSS_TAG_ID = `${PLUGIN_ID}/global.css`;
14
+
15
+ const TOKENS = Object.freeze({
16
+ "--dsw-alias-bg-base": "#03040b",
17
+ "--dsw-alias-bg-layer-1": "rgba(7, 11, 28, 0.92)",
18
+ "--dsw-alias-bg-layer-2": "rgba(12, 18, 43, 0.94)",
19
+ "--dsw-alias-bg-overlay": "rgba(5, 8, 24, 0.98)",
20
+ "--dsw-alias-bg-module-platform": "rgba(16, 25, 61, 0.98)",
21
+ "--dsw-alias-border-l1": "rgba(98, 213, 255, 0.38)",
22
+ "--dsw-alias-border-l2": "rgba(255, 207, 92, 0.42)",
23
+ "--dsw-alias-border-l3": "rgba(255, 71, 120, 0.62)",
24
+ "--dsw-alias-brand-primary": "#7de3ff",
25
+ "--dsw-alias-label-primary": "#f8fbff",
26
+ "--dsw-alias-label-secondary": "#b7c3e8",
27
+ "--dsw-alias-label-tertiary": "#8490bb",
28
+ "--dsw-alias-interactive-bg-hover": "rgba(125, 227, 255, 0.16)",
29
+ "--dsw-alias-button-floating-fill": "rgba(9, 14, 36, 0.92)",
30
+ "--dsw-alias-button-floating-hover": "rgba(33, 47, 91, 0.98)",
31
+ "--dsw-alias-scrollbar-bg-l1": "rgba(125, 227, 255, 0.30)",
32
+ "--dsw-alias-scrollbar-hover-l1": "rgba(255, 207, 92, 0.68)",
33
+ "--dsw-alias-scrollbar-bg-l2": "rgba(255, 71, 120, 0.24)",
34
+ "--dsw-alias-scrollbar-hover-l2": "rgba(125, 227, 255, 0.72)",
35
+ "--dsw-alias-state-error-primary": "#ff4778",
36
+ "--dsw-alias-state-success-primary": "#66ffc7",
37
+ "--dsw-alias-state-warn-primary": "#ffcf5c",
38
+ "--dsw-specific-sidebar-fill": "rgba(4, 7, 22, 0.98)"
39
+ });
40
+
41
+ const TOKEN_OVERRIDES = Object.freeze(Object.fromEntries(
42
+ Object.entries(TOKENS).map(([name, value]) => [name, { light: value, dark: value }])
43
+ ));
44
+
45
+ const CSS = `
46
+ body.dsh-skin-galactic-opera {
47
+ --dsh-skin-cyan: #7de3ff;
48
+ --dsh-skin-gold: #ffcf5c;
49
+ --dsh-skin-red: #ff4778;
50
+ --dsh-skin-green: #66ffc7;
51
+ --dsh-skin-void: #03040b;
52
+ --dsh-skin-parallax-x: 0px;
53
+ --dsh-skin-parallax-y: 0px;
54
+ --dsh-skin-scanner-dot-x: 18vmin;
55
+ --dsh-skin-scanner-dot-y: calc(100vh - 18vmin);
56
+ --dsw-alias-bg-base: #03040b !important;
57
+ --dsw-alias-bg-layer-1: rgba(7, 11, 28, 0.92) !important;
58
+ --dsw-alias-bg-layer-2: rgba(12, 18, 43, 0.94) !important;
59
+ --dsw-alias-bg-overlay: rgba(5, 8, 24, 0.98) !important;
60
+ --dsw-alias-bg-module-platform: rgba(16, 25, 61, 0.98) !important;
61
+ --dsw-alias-border-l1: rgba(98, 213, 255, 0.42) !important;
62
+ --dsw-alias-border-l2: rgba(255, 207, 92, 0.48) !important;
63
+ --dsw-alias-border-l3: rgba(255, 71, 120, 0.68) !important;
64
+ --dsw-alias-brand-primary: #7de3ff !important;
65
+ --dsw-alias-label-primary: #f8fbff !important;
66
+ --dsw-alias-label-secondary: #b7c3e8 !important;
67
+ --dsw-alias-label-tertiary: #8490bb !important;
68
+ --dsw-alias-interactive-bg-hover: rgba(125, 227, 255, 0.18) !important;
69
+ --dsw-alias-button-floating-fill: rgba(9, 14, 36, 0.94) !important;
70
+ --dsw-alias-button-floating-hover: rgba(33, 47, 91, 0.98) !important;
71
+ --dsw-alias-state-error-primary: #ff4778 !important;
72
+ --dsw-alias-state-success-primary: #66ffc7 !important;
73
+ --dsw-alias-state-warn-primary: #ffcf5c !important;
74
+ --dsw-specific-sidebar-fill: rgba(4, 7, 22, 0.98) !important;
75
+ background-color: #03040b !important;
76
+ background-image:
77
+ radial-gradient(circle at 13% 16%, rgba(125, 227, 255, 0.26), transparent 29rem),
78
+ radial-gradient(circle at 84% 8%, rgba(255, 207, 92, 0.18), transparent 26rem),
79
+ radial-gradient(circle at 62% 83%, rgba(255, 71, 120, 0.20), transparent 34rem),
80
+ radial-gradient(circle at 32% 74%, rgba(102, 255, 199, 0.10), transparent 28rem),
81
+ linear-gradient(180deg, #02030a 0%, #03040b 44%, #080b1c 100%) !important;
82
+ }
83
+
84
+ body.dsh-skin-galactic-opera::before,
85
+ body.dsh-skin-galactic-opera::after {
86
+ content: "";
87
+ position: fixed;
88
+ inset: 0;
89
+ pointer-events: none;
90
+ }
91
+
92
+ body.dsh-skin-galactic-opera::before {
93
+ z-index: 0;
94
+ opacity: 0.78;
95
+ background-image:
96
+ radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.5px),
97
+ radial-gradient(circle, rgba(125,227,255,0.92) 0 1px, transparent 1.4px),
98
+ radial-gradient(circle, rgba(255,207,92,0.84) 0 1px, transparent 1.6px),
99
+ radial-gradient(circle, rgba(255,71,120,0.62) 0 1px, transparent 1.5px);
100
+ background-position: 0 0, 28px 41px, 67px 11px, 110px 84px;
101
+ background-size: 115px 115px, 170px 170px, 235px 235px, 290px 290px;
102
+ animation: dsh-skin-stars-drift 38s linear infinite;
103
+ }
104
+
105
+ body.dsh-skin-galactic-opera::after {
106
+ z-index: 0;
107
+ opacity: 0.34;
108
+ background:
109
+ linear-gradient(112deg, transparent 0 26%, rgba(125,227,255,0.32) 27%, transparent 29% 58%, rgba(255,207,92,0.24) 59%, transparent 61% 78%, rgba(255,71,120,0.20) 79%, transparent 81%),
110
+ repeating-linear-gradient(112deg, transparent 0 42px, rgba(125,227,255,0.13) 44px, transparent 49px);
111
+ filter: blur(0.15px);
112
+ mix-blend-mode: screen;
113
+ animation: dsh-skin-warp-lanes 9s ease-in-out infinite alternate;
114
+ }
115
+
116
+ body.dsh-skin-galactic-opera #root {
117
+ isolation: isolate;
118
+ position: relative;
119
+ z-index: 1;
120
+ }
121
+
122
+ body.dsh-skin-galactic-opera #root::before {
123
+ content: "";
124
+ position: fixed;
125
+ inset: 0;
126
+ z-index: 2147483646;
127
+ pointer-events: none;
128
+ opacity: 0.36;
129
+ mix-blend-mode: screen;
130
+ background-image:
131
+ radial-gradient(circle at 8% 12%, rgba(125,227,255,0.48) 0 1px, transparent 1.8px),
132
+ radial-gradient(circle at 74% 18%, rgba(255,207,92,0.38) 0 1px, transparent 1.6px),
133
+ radial-gradient(circle at 44% 72%, rgba(255,71,120,0.28) 0 1px, transparent 1.8px),
134
+ linear-gradient(105deg, transparent 0 32%, rgba(125,227,255,0.18) 33%, transparent 35% 69%, rgba(255,207,92,0.16) 70%, transparent 72%),
135
+ repeating-linear-gradient(90deg, transparent 0 72px, rgba(125,227,255,0.05) 73px, transparent 74px),
136
+ repeating-linear-gradient(0deg, transparent 0 72px, rgba(255,207,92,0.04) 73px, transparent 74px);
137
+ background-size: 150px 150px, 230px 230px, 310px 310px, 100% 100%, 100% 100%, 100% 100%;
138
+ transform: translate3d(var(--dsh-skin-parallax-x), var(--dsh-skin-parallax-y), 0);
139
+ will-change: transform;
140
+ }
141
+
142
+ body.dsh-skin-galactic-opera #root > *,
143
+ body.dsh-skin-galactic-opera main,
144
+ body.dsh-skin-galactic-opera aside,
145
+ body.dsh-skin-galactic-opera section,
146
+ body.dsh-skin-galactic-opera [class*="frame"],
147
+ body.dsh-skin-galactic-opera [class*="Frame"] {
148
+ background-color: transparent !important;
149
+ }
150
+
151
+ body.dsh-skin-galactic-opera [class*="sidebar"],
152
+ body.dsh-skin-galactic-opera [class*="Sidebar"] {
153
+ background:
154
+ radial-gradient(circle at 0 0, rgba(125, 227, 255, 0.14), transparent 21rem),
155
+ linear-gradient(180deg, rgba(4, 7, 19, 0.98), rgba(9, 14, 34, 0.94) 46%, rgba(18, 12, 29, 0.98)) !important;
156
+ box-shadow:
157
+ inset -1px 0 rgba(125, 227, 255, 0.28),
158
+ inset -7px 0 28px rgba(255, 71, 120, 0.08),
159
+ 0 0 40px rgba(125, 227, 255, 0.12) !important;
160
+ }
161
+
162
+ body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor {
163
+ position: fixed;
164
+ inset: -2vmax;
165
+ z-index: 2147483645;
166
+ pointer-events: none;
167
+ overflow: hidden;
168
+ mix-blend-mode: screen;
169
+ }
170
+
171
+ body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor::before {
172
+ content: "";
173
+ position: absolute;
174
+ inset: -12vmax;
175
+ opacity: 0;
176
+ pointer-events: none;
177
+ background:
178
+ repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 5deg, rgba(125,227,255,0.72) 5.4deg 6deg, transparent 6.4deg 12deg),
179
+ radial-gradient(circle at 50% 50%, rgba(255,255,255,0.82), transparent 8vmin, rgba(255,207,92,0.26) 12vmin, transparent 36vmin);
180
+ transform: scale(0.5);
181
+ filter: blur(0.2px);
182
+ }
183
+
184
+ body.dsh-skin-galactic-opera.dsh-skin-hyperspace .dsh-skin-galactic-opera-decor::before {
185
+ animation: dsh-skin-hyperspace-burst 880ms cubic-bezier(.16,.8,.25,1) both;
186
+ }
187
+
188
+ body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor span {
189
+ position: absolute;
190
+ display: block;
191
+ pointer-events: none;
192
+ }
193
+
194
+ body.dsh-skin-galactic-opera .dsh-skin-twinkle {
195
+ width: 2px;
196
+ height: 2px;
197
+ border-radius: 999px;
198
+ background: rgba(255,255,255,0.96);
199
+ opacity: 0.18;
200
+ filter: drop-shadow(0 0 8px rgba(125,227,255,0.68));
201
+ animation: dsh-skin-twinkle 3.8s ease-in-out infinite;
202
+ }
203
+
204
+ body.dsh-skin-galactic-opera .dsh-skin-twinkle-a {
205
+ left: 46vw;
206
+ top: 28vh;
207
+ box-shadow:
208
+ 18vw 8vh 0 0 rgba(125,227,255,0.82),
209
+ -14vw 21vh 0 0 rgba(255,255,255,0.74),
210
+ 24vw 33vh 0 0 rgba(255,207,92,0.66),
211
+ -24vw 6vh 0 0 rgba(255,71,120,0.54);
212
+ }
213
+
214
+ body.dsh-skin-galactic-opera .dsh-skin-twinkle-b {
215
+ left: 58vw;
216
+ top: 46vh;
217
+ width: 2.5px;
218
+ height: 2.5px;
219
+ animation-delay: -1.25s;
220
+ animation-duration: 4.7s;
221
+ box-shadow:
222
+ -20vw -12vh 0 0 rgba(125,227,255,0.72),
223
+ 12vw -18vh 0 0 rgba(255,255,255,0.70),
224
+ -8vw 27vh 0 0 rgba(255,207,92,0.62),
225
+ 28vw 8vh 0 0 rgba(125,227,255,0.58);
226
+ }
227
+
228
+ body.dsh-skin-galactic-opera .dsh-skin-twinkle-c {
229
+ left: 35vw;
230
+ top: 62vh;
231
+ width: 1.5px;
232
+ height: 1.5px;
233
+ animation-delay: -2.1s;
234
+ animation-duration: 5.4s;
235
+ box-shadow:
236
+ 10vw -28vh 0 0 rgba(255,255,255,0.74),
237
+ 33vw -6vh 0 0 rgba(255,71,120,0.46),
238
+ -17vw -8vh 0 0 rgba(125,227,255,0.64),
239
+ 20vw 17vh 0 0 rgba(255,207,92,0.58);
240
+ }
241
+
242
+ body.dsh-skin-galactic-opera .dsh-skin-nebula-core {
243
+ width: 56vmin;
244
+ height: 56vmin;
245
+ left: 48%;
246
+ top: 50%;
247
+ transform: translate(-50%, -50%);
248
+ border-radius: 999px;
249
+ opacity: 0.24;
250
+ background:
251
+ radial-gradient(circle at 50% 50%, #000 0 12%, rgba(0,0,0,0.96) 13% 18%, transparent 19%),
252
+ radial-gradient(circle at 50% 50%, transparent 0 19%, rgba(255,248,215,0.68) 20%, rgba(255,207,92,0.44) 22%, rgba(255,71,120,0.26) 26%, transparent 32%),
253
+ radial-gradient(ellipse at 44% 54%, transparent 0 17%, rgba(125,227,255,0.34) 19%, rgba(255,207,92,0.24) 26%, transparent 42%),
254
+ conic-gradient(from 18deg, transparent 0 9%, rgba(125,227,255,0.36) 13%, transparent 21%, rgba(255,71,120,0.24) 29%, transparent 43%, rgba(255,207,92,0.32) 55%, transparent 70%, rgba(125,227,255,0.24) 82%, transparent 100%);
255
+ box-shadow:
256
+ inset 0 0 36px 18px rgba(0,0,0,0.92),
257
+ 0 0 32px rgba(0,0,0,0.85),
258
+ 0 0 76px rgba(125,227,255,0.16),
259
+ 0 0 112px rgba(255,71,120,0.10);
260
+ filter: blur(0.55px) saturate(1.22);
261
+ mix-blend-mode: screen;
262
+ animation: dsh-skin-blackhole-breathe 7.2s ease-in-out infinite;
263
+ }
264
+
265
+ body.dsh-skin-galactic-opera .dsh-skin-orb {
266
+ border-radius: 999px;
267
+ filter: drop-shadow(0 0 34px rgba(125, 227, 255, 0.36));
268
+ }
269
+
270
+ body.dsh-skin-galactic-opera .dsh-skin-orb-primary {
271
+ z-index: 7;
272
+ width: 20vmin;
273
+ height: 20vmin;
274
+ right: 8vmin;
275
+ top: 6vmin;
276
+ opacity: 1;
277
+ mix-blend-mode: normal;
278
+ background:
279
+ radial-gradient(circle at 34% 27%, rgba(255,255,255,0.9), transparent 0 9%, transparent 10%),
280
+ radial-gradient(circle at 35% 30%, #ffe39a 0 10%, #d1782c 27%, #7b2755 51%, #111a44 74%, #050712 100%);
281
+ box-shadow:
282
+ inset -28px -18px 46px rgba(0,0,0,0.64),
283
+ 0 0 72px rgba(255, 207, 92, 0.28),
284
+ 0 0 120px rgba(255, 71, 120, 0.12);
285
+ animation: dsh-skin-orb-hover 8s ease-in-out infinite;
286
+ }
287
+
288
+ body.dsh-skin-galactic-opera .dsh-skin-orb-moon-a {
289
+ z-index: 10;
290
+ width: 5.8vmin;
291
+ height: 5.8vmin;
292
+ right: 25vmin;
293
+ top: 23vmin;
294
+ opacity: 1;
295
+ mix-blend-mode: normal;
296
+ background: radial-gradient(circle at 36% 30%, #f6fbff, #8aa0c7 48%, #222a49 72%, #080c1a 100%);
297
+ animation: dsh-skin-moon-a 11s ease-in-out infinite;
298
+ }
299
+
300
+
301
+ body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit,
302
+ body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit-front,
303
+ body.dsh-skin-galactic-opera .dsh-skin-satellite {
304
+ right: 4vmin;
305
+ top: 5.4vmin;
306
+ width: 28vmin;
307
+ height: 21vmin;
308
+ transform: rotate(-19deg);
309
+ transform-origin: 50% 50%;
310
+ }
311
+
312
+ body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit {
313
+ z-index: 5;
314
+ opacity: 0.56;
315
+ }
316
+
317
+ body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit-front {
318
+ z-index: 9;
319
+ opacity: 0.66;
320
+ }
321
+
322
+ body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit::before,
323
+ body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit-front::before {
324
+ content: "";
325
+ position: absolute;
326
+ inset: 2.8vmin 1.2vmin;
327
+ border: 1px solid rgba(125,227,255,0.24);
328
+ border-left-color: rgba(255,207,92,0.38);
329
+ border-bottom-color: rgba(255,71,120,0.18);
330
+ border-radius: 50%;
331
+ box-shadow: 0 0 18px rgba(125,227,255,0.12), inset 0 0 12px rgba(255,207,92,0.05);
332
+ }
333
+
334
+ body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit::before {
335
+ clip-path: inset(0 0 50% 0);
336
+ }
337
+
338
+ body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit-front::before {
339
+ clip-path: inset(50% 0 0 0);
340
+ border-color: rgba(125,227,255,0.34);
341
+ border-left-color: rgba(255,207,92,0.44);
342
+ border-bottom-color: rgba(255,71,120,0.30);
343
+ box-shadow: 0 0 20px rgba(125,227,255,0.18), inset 0 0 12px rgba(255,207,92,0.06);
344
+ }
345
+
346
+ body.dsh-skin-galactic-opera .dsh-skin-satellite {
347
+ z-index: 4;
348
+ animation: dsh-skin-satellite-depth 6.2s steps(1, end) infinite;
349
+ }
350
+
351
+ body.dsh-skin-galactic-opera .dsh-skin-satellite::before {
352
+ content: "";
353
+ position: absolute;
354
+ left: 50%;
355
+ top: 50%;
356
+ width: 1.9vmin;
357
+ height: 1.9vmin;
358
+ border-radius: 999px;
359
+ transform: translate(-50%, -50%) translate3d(12.8vmin, 0, 0) scale(0.84);
360
+ will-change: transform, opacity;
361
+ background: radial-gradient(circle at 35% 30%, #eafff7, #66ffc7 34%, #1fb7a7 58%, #102b45 78%);
362
+ box-shadow: 0 0 14px rgba(102,255,199,0.76), 0 0 30px rgba(31,183,167,0.34);
363
+ animation: dsh-skin-satellite-orbit 6.2s linear infinite;
364
+ }
365
+
366
+ body.dsh-skin-galactic-opera .dsh-skin-scanner {
367
+ width: 30vmin;
368
+ height: 30vmin;
369
+ left: max(18px, 3vmin);
370
+ bottom: max(18px, 4vmin);
371
+ opacity: 0.48;
372
+ border: 1px solid rgba(125, 227, 255, 0.62);
373
+ border-radius: 999px;
374
+ background:
375
+ radial-gradient(circle, transparent 0 28%, rgba(125, 227, 255, 0.18) 29% 30%, transparent 31% 51%, rgba(255, 207, 92, 0.16) 52% 53%, transparent 54% 70%, rgba(255,71,120,0.14) 71% 72%, transparent 73%),
376
+ conic-gradient(from 18deg, rgba(125, 227, 255, 0.60), transparent 22%, transparent 74%, rgba(255, 207, 92, 0.48), rgba(255,71,120,0.26));
377
+ box-shadow:
378
+ 0 0 36px rgba(125, 227, 255, 0.30),
379
+ inset 0 0 28px rgba(125, 227, 255, 0.14);
380
+ animation: dsh-skin-scanner-spin 7s linear infinite;
381
+ }
382
+
383
+ body.dsh-skin-galactic-opera .dsh-skin-scanner::after {
384
+ content: "";
385
+ position: absolute;
386
+ left: 50%;
387
+ top: 50%;
388
+ width: 50%;
389
+ height: 2px;
390
+ border-radius: 999px;
391
+ transform-origin: 0 50%;
392
+ background: linear-gradient(90deg, rgba(255,255,255,0.92), rgba(125,227,255,0.82), transparent);
393
+ box-shadow: 0 0 16px rgba(125,227,255,0.58);
394
+ animation: dsh-skin-scanner-hand 1.5s ease-in-out infinite;
395
+ }
396
+
397
+ body.dsh-skin-galactic-opera .dsh-skin-scanner-target {
398
+ position: fixed !important;
399
+ left: var(--dsh-skin-scanner-dot-x);
400
+ top: var(--dsh-skin-scanner-dot-y);
401
+ width: 9px;
402
+ height: 9px;
403
+ border-radius: 999px;
404
+ transform: translate(-50%, -50%) scale(0.72);
405
+ opacity: 0.04;
406
+ background: #fff9da;
407
+ box-shadow:
408
+ 0 0 0 1px rgba(255,207,92,0.20),
409
+ 0 0 8px rgba(125,227,255,0.18);
410
+ transition: opacity 120ms ease-out, transform 120ms ease-out, box-shadow 120ms ease-out;
411
+ }
412
+
413
+ body.dsh-skin-galactic-opera .dsh-skin-scanner-target[data-lit="true"] {
414
+ opacity: 1;
415
+ transform: translate(-50%, -50%) scale(1.18);
416
+ box-shadow:
417
+ 0 0 0 1px rgba(255,207,92,0.92),
418
+ 0 0 14px rgba(255,207,92,0.96),
419
+ 0 0 30px rgba(125,227,255,0.68),
420
+ 0 0 54px rgba(255,71,120,0.28);
421
+ animation: dsh-skin-scanner-target-ping 260ms ease-out both;
422
+ }
423
+
424
+ body.dsh-skin-galactic-opera .dsh-skin-route-map {
425
+ left: max(18px, 3.1vmin);
426
+ top: max(18px, 4vmin);
427
+ width: 24vmin;
428
+ height: 15vmin;
429
+ opacity: 0.45;
430
+ border: 1px solid rgba(125, 227, 255, 0.34);
431
+ border-radius: 18px;
432
+ background:
433
+ radial-gradient(circle at 14% 70%, rgba(255,207,92,0.98) 0 3px, transparent 4px),
434
+ radial-gradient(circle at 39% 34%, rgba(125,227,255,0.98) 0 2px, transparent 3px),
435
+ radial-gradient(circle at 67% 60%, rgba(255,255,255,0.92) 0 2px, transparent 3px),
436
+ radial-gradient(circle at 85% 24%, rgba(255,71,120,0.88) 0 2px, transparent 3px),
437
+ linear-gradient(28deg, transparent 0 20%, rgba(255,207,92,0.48) 21%, transparent 22% 47%, rgba(125,227,255,0.42) 48%, transparent 49% 73%, rgba(255,71,120,0.32) 74%, transparent 75%),
438
+ repeating-linear-gradient(0deg, transparent 0 21px, rgba(125,227,255,0.12) 22px, transparent 23px),
439
+ repeating-linear-gradient(90deg, transparent 0 25px, rgba(125,227,255,0.10) 26px, transparent 27px);
440
+ box-shadow:
441
+ 0 0 30px rgba(125, 227, 255, 0.22),
442
+ inset 0 0 22px rgba(125, 227, 255, 0.10);
443
+ animation: dsh-skin-route-pulse 4.8s ease-in-out infinite;
444
+ }
445
+
446
+ body.dsh-skin-galactic-opera .dsh-skin-energy {
447
+ height: 3px;
448
+ border-radius: 999px;
449
+ opacity: 0.72;
450
+ transform-origin: 50% 50%;
451
+ filter: blur(0.1px);
452
+ }
453
+
454
+ body.dsh-skin-galactic-opera .dsh-skin-energy-cyan {
455
+ width: 48vmin;
456
+ right: -8vmin;
457
+ bottom: 16vmin;
458
+ transform: rotate(-36deg);
459
+ background: linear-gradient(90deg, transparent, rgba(125,227,255,0.98), #f5fdff, rgba(125,227,255,0.88), transparent);
460
+ box-shadow: 0 0 20px rgba(125, 227, 255, 0.82), 0 0 52px rgba(125, 227, 255, 0.34);
461
+ animation: dsh-skin-energy-cyan 3.2s ease-in-out infinite;
462
+ }
463
+
464
+ body.dsh-skin-galactic-opera .dsh-skin-energy-red {
465
+ width: 50vmin;
466
+ left: -12vmin;
467
+ top: 18vmin;
468
+ transform: rotate(-32deg);
469
+ background: linear-gradient(90deg, transparent, rgba(255,71,120,0.94), #fff4f7, rgba(255,71,120,0.84), transparent);
470
+ box-shadow: 0 0 20px rgba(255, 71, 120, 0.76), 0 0 54px rgba(255, 71, 120, 0.30);
471
+ animation: dsh-skin-energy-red 3.9s ease-in-out infinite;
472
+ }
473
+
474
+ body.dsh-skin-galactic-opera .dsh-skin-energy-gold {
475
+ width: 38vmin;
476
+ right: 18vmin;
477
+ top: 9vmin;
478
+ transform: rotate(18deg);
479
+ background: linear-gradient(90deg, transparent, rgba(255,207,92,0.94), #fff9da, rgba(255,207,92,0.76), transparent);
480
+ box-shadow: 0 0 18px rgba(255, 207, 92, 0.70), 0 0 48px rgba(255, 207, 92, 0.26);
481
+ animation: dsh-skin-energy-gold 4.4s ease-in-out infinite;
482
+ }
483
+
484
+ body.dsh-skin-galactic-opera .dsh-skin-comet {
485
+ width: 22vmin;
486
+ height: 2px;
487
+ opacity: 0;
488
+ border-radius: 999px;
489
+ background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(125,227,255,0.78), transparent);
490
+ box-shadow: 0 0 20px rgba(125, 227, 255, 0.58);
491
+ transform: rotate(-24deg) translate3d(0, 0, 0);
492
+ }
493
+
494
+ body.dsh-skin-galactic-opera .dsh-skin-comet-1 { left: -24vmin; top: 13%; animation: dsh-skin-comet-flight 5.5s linear infinite; }
495
+ body.dsh-skin-galactic-opera .dsh-skin-comet-2 { left: -30vmin; top: 34%; animation: dsh-skin-comet-flight 6.8s 1.1s linear infinite; }
496
+ body.dsh-skin-galactic-opera .dsh-skin-comet-3 { left: -20vmin; top: 62%; animation: dsh-skin-comet-flight 6.2s 2.3s linear infinite; }
497
+ body.dsh-skin-galactic-opera .dsh-skin-comet-4 { left: -32vmin; top: 82%; animation: dsh-skin-comet-flight 7.6s 3.8s linear infinite; }
498
+ body.dsh-skin-galactic-opera .dsh-skin-comet-5 { left: -26vmin; top: 49%; animation: dsh-skin-comet-flight 8s 4.7s linear infinite; }
499
+ body.dsh-skin-galactic-opera .dsh-skin-comet-6 { left: -28vmin; top: 73%; animation: dsh-skin-comet-flight 9s 5.5s linear infinite; }
500
+
501
+
502
+ /* Generic angular starfighters: V silhouettes only, no copied ship geometry. Nose points left, matching the right-to-left pass. */
503
+ body.dsh-skin-galactic-opera .dsh-skin-starfighter {
504
+ width: 4.1vmin;
505
+ height: 2.7vmin;
506
+ opacity: 0;
507
+ --dsh-skin-fighter-angle: -18deg;
508
+ /* left tip = nose; right forks = wings/engines */
509
+ clip-path: polygon(0 50%, 100% 0, 72% 50%, 100% 100%);
510
+ background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(125,227,255,0.82) 42%, rgba(255,207,92,0.66) 78%, rgba(255,71,120,0.52));
511
+ box-shadow: 0 0 16px rgba(125,227,255,0.58), 0 0 28px rgba(255,207,92,0.22);
512
+ transform: rotate(var(--dsh-skin-fighter-angle)) translate3d(0, 0, 0);
513
+ }
514
+
515
+ body.dsh-skin-galactic-opera .dsh-skin-starfighter-1 { right: -6vmin; top: 24%; --dsh-skin-fighter-angle: -18deg; animation: dsh-skin-fighter-pass 7.8s 0.8s linear infinite; }
516
+ body.dsh-skin-galactic-opera .dsh-skin-starfighter-2 { right: -7vmin; top: 41%; --dsh-skin-fighter-angle: -23deg; animation: dsh-skin-fighter-pass 9.3s 3.6s linear infinite; }
517
+ body.dsh-skin-galactic-opera .dsh-skin-starfighter-3 { right: -5vmin; top: 69%; --dsh-skin-fighter-angle: -12deg; animation: dsh-skin-fighter-pass 10.4s 6.2s linear infinite; }
518
+
519
+ body.dsh-skin-galactic-opera .dsh-skin-mission-crawl {
520
+ left: 50%;
521
+ bottom: -3vmin;
522
+ width: 48vmin;
523
+ height: 18vmin;
524
+ opacity: 0.32;
525
+ transform: translateX(-50%) perspective(420px) rotateX(58deg);
526
+ transform-origin: 50% 100%;
527
+ border-top: 1px solid rgba(255,207,92,0.34);
528
+ background:
529
+ linear-gradient(180deg, rgba(255,207,92,0.28) 0 2px, transparent 3px 18px, rgba(255,207,92,0.18) 19px 21px, transparent 22px 38px),
530
+ linear-gradient(90deg, transparent 0 8%, rgba(255,207,92,0.16) 9%, transparent 10% 90%, rgba(255,207,92,0.16) 91%, transparent 92%);
531
+ background-size: 100% 42px, 100% 100%;
532
+ filter: drop-shadow(0 0 18px rgba(255,207,92,0.28));
533
+ animation: dsh-skin-crawl-rise 9s linear infinite;
534
+ }
535
+
536
+ body.dsh-skin-galactic-opera .dsh-skin-mission-crawl::before {
537
+ content: "MISSION BRIEFING · HYPERSPACE ROUTE · ALL WINGS STAND BY";
538
+ position: absolute;
539
+ left: 0;
540
+ right: 0;
541
+ top: 14px;
542
+ color: rgba(255, 207, 92, 0.82);
543
+ font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
544
+ letter-spacing: 0.18em;
545
+ text-align: center;
546
+ text-shadow: 0 0 14px rgba(255,207,92,0.46);
547
+ }
548
+
549
+ body.dsh-skin-galactic-opera .dsh-skin-pulse {
550
+ position: fixed;
551
+ left: var(--dsh-skin-pulse-x);
552
+ top: var(--dsh-skin-pulse-y);
553
+ width: 18px;
554
+ height: 18px;
555
+ border-radius: 999px;
556
+ transform: translate(-50%, -50%);
557
+ opacity: 0;
558
+ border: 1px solid var(--dsh-skin-pulse-color, rgba(125,227,255,0.9));
559
+ box-shadow:
560
+ 0 0 22px var(--dsh-skin-pulse-color, rgba(125,227,255,0.7)),
561
+ inset 0 0 18px rgba(255,255,255,0.22);
562
+ animation: dsh-skin-click-pulse 780ms ease-out both;
563
+ }
564
+
565
+ body.dsh-skin-galactic-opera button,
566
+ body.dsh-skin-galactic-opera input,
567
+ body.dsh-skin-galactic-opera textarea,
568
+ body.dsh-skin-galactic-opera select {
569
+ text-shadow: 0 0 12px rgba(125, 227, 255, 0.18);
570
+ }
571
+
572
+ body.dsh-skin-galactic-opera textarea,
573
+ body.dsh-skin-galactic-opera input {
574
+ caret-color: var(--dsh-skin-gold);
575
+ }
576
+
577
+ body.dsh-skin-galactic-opera button:hover,
578
+ body.dsh-skin-galactic-opera [role="button"]:hover {
579
+ box-shadow:
580
+ 0 0 0 1px rgba(125, 227, 255, 0.48),
581
+ 0 0 26px rgba(125, 227, 255, 0.26),
582
+ 0 0 42px rgba(255, 71, 120, 0.12),
583
+ inset 0 0 20px rgba(255, 207, 92, 0.08) !important;
584
+ }
585
+
586
+ body.dsh-skin-galactic-opera a,
587
+ body.dsh-skin-galactic-opera [data-link] {
588
+ color: var(--dsh-skin-cyan);
589
+ text-shadow: 0 0 16px rgba(125, 227, 255, 0.30);
590
+ }
591
+
592
+ body.dsh-skin-galactic-opera pre,
593
+ body.dsh-skin-galactic-opera code {
594
+ border-color: rgba(125, 227, 255, 0.30) !important;
595
+ text-shadow: 0 0 12px rgba(125, 227, 255, 0.16);
596
+ }
597
+
598
+ body.dsh-skin-galactic-opera pre {
599
+ box-shadow:
600
+ inset 0 0 0 1px rgba(255, 207, 92, 0.10),
601
+ 0 0 34px rgba(4, 8, 18, 0.45) !important;
602
+ }
603
+
604
+ body.dsh-skin-galactic-opera :is(pre, code, textarea, input, select, [class*="message"], [class*="Message"]):hover {
605
+ outline: 1px solid rgba(125, 227, 255, 0.20);
606
+ outline-offset: 2px;
607
+ box-shadow:
608
+ 0 0 0 1px rgba(125, 227, 255, 0.16),
609
+ 0 0 24px rgba(125, 227, 255, 0.12),
610
+ inset 0 0 20px rgba(255, 207, 92, 0.035) !important;
611
+ }
612
+
613
+ body.dsh-skin-galactic-opera ::selection {
614
+ color: #03040b;
615
+ background: rgba(255, 207, 92, 0.86);
616
+ }
617
+
618
+ body.dsh-skin-galactic-opera * {
619
+ scrollbar-color: rgba(125, 227, 255, 0.42) rgba(5, 7, 17, 0.40);
620
+ }
621
+
622
+ @keyframes dsh-skin-stars-drift {
623
+ from { transform: translate3d(0, 0, 0); }
624
+ to { transform: translate3d(-115px, 115px, 0); }
625
+ }
626
+
627
+ @keyframes dsh-skin-twinkle {
628
+ 0%, 100% { opacity: 0.12; transform: scale(0.78); filter: drop-shadow(0 0 4px rgba(125,227,255,0.30)); }
629
+ 45% { opacity: 0.88; transform: scale(1.45); filter: drop-shadow(0 0 13px rgba(255,207,92,0.58)); }
630
+ 62% { opacity: 0.34; transform: scale(0.96); }
631
+ }
632
+
633
+ @keyframes dsh-skin-satellite-orbit {
634
+ 0%, 100% { transform: translate(-50%, -50%) translate3d(12.8vmin, 0, 0) scale(0.84); opacity: 0.52; }
635
+ 6.25% { transform: translate(-50%, -50%) translate3d(11.8vmin, -2.95vmin, 0) scale(0.88); opacity: 0.64; }
636
+ 12.5% { transform: translate(-50%, -50%) translate3d(9.05vmin, -5.45vmin, 0) scale(0.92); opacity: 0.78; }
637
+ 18.75% { transform: translate(-50%, -50%) translate3d(4.9vmin, -7.12vmin, 0) scale(0.98); opacity: 0.88; }
638
+ 25% { transform: translate(-50%, -50%) translate3d(0, -7.7vmin, 0) scale(1.04); opacity: 0.96; }
639
+ 31.25% { transform: translate(-50%, -50%) translate3d(-4.9vmin, -7.12vmin, 0) scale(1.08); opacity: 0.92; }
640
+ 37.5% { transform: translate(-50%, -50%) translate3d(-9.05vmin, -5.45vmin, 0) scale(1.10); opacity: 0.86; }
641
+ 43.75% { transform: translate(-50%, -50%) translate3d(-11.8vmin, -2.95vmin, 0) scale(1.14); opacity: 0.80; }
642
+ 50% { transform: translate(-50%, -50%) translate3d(-12.8vmin, 0, 0) scale(1.16); opacity: 0.74; }
643
+ 56.25% { transform: translate(-50%, -50%) translate3d(-11.8vmin, 2.95vmin, 0) scale(1.12); opacity: 0.70; }
644
+ 62.5% { transform: translate(-50%, -50%) translate3d(-9.05vmin, 5.45vmin, 0) scale(1.08); opacity: 0.66; }
645
+ 68.75% { transform: translate(-50%, -50%) translate3d(-4.9vmin, 7.12vmin, 0) scale(1.02); opacity: 0.62; }
646
+ 75% { transform: translate(-50%, -50%) translate3d(0, 7.7vmin, 0) scale(0.96); opacity: 0.58; }
647
+ 81.25% { transform: translate(-50%, -50%) translate3d(4.9vmin, 7.12vmin, 0) scale(0.92); opacity: 0.54; }
648
+ 87.5% { transform: translate(-50%, -50%) translate3d(9.05vmin, 5.45vmin, 0) scale(0.88); opacity: 0.48; }
649
+ 93.75% { transform: translate(-50%, -50%) translate3d(11.8vmin, 2.95vmin, 0) scale(0.86); opacity: 0.46; }
650
+ }
651
+
652
+ @keyframes dsh-skin-satellite-depth {
653
+ 0%, 13.9% { z-index: 4; opacity: 1; }
654
+ 14%, 36% { z-index: 4; opacity: 0; }
655
+ 36.1%, 49.9% { z-index: 4; opacity: 1; }
656
+ 50%, 100% { z-index: 9; opacity: 1; }
657
+ }
658
+
659
+ @keyframes dsh-skin-warp-lanes {
660
+ from { transform: translate3d(-2%, 0, 0); opacity: 0.22; }
661
+ to { transform: translate3d(2%, 0, 0); opacity: 0.38; }
662
+ }
663
+
664
+ @keyframes dsh-skin-blackhole-breathe {
665
+ 0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.96) rotate(0deg); filter: blur(0.65px) saturate(1.08); }
666
+ 50% { opacity: 0.30; transform: translate(-50%, -50%) scale(1.05) rotate(7deg); filter: blur(0.45px) saturate(1.36); }
667
+ }
668
+
669
+ @keyframes dsh-skin-orb-hover {
670
+ 0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
671
+ 50% { transform: translate3d(-1.4vmin, 1.1vmin, 0) scale(1.04); }
672
+ }
673
+
674
+ @keyframes dsh-skin-moon-a {
675
+ 0%, 100% { transform: translate3d(0, 0, 0); }
676
+ 50% { transform: translate3d(2.4vmin, -1.8vmin, 0); }
677
+ }
678
+
679
+
680
+
681
+ @keyframes dsh-skin-scanner-spin {
682
+ from { transform: rotate(0deg); }
683
+ to { transform: rotate(360deg); }
684
+ }
685
+
686
+ @keyframes dsh-skin-scanner-hand {
687
+ 0%, 100% { opacity: 0.55; transform: rotate(-7deg) scaleX(0.84); }
688
+ 50% { opacity: 1; transform: rotate(7deg) scaleX(1); }
689
+ }
690
+
691
+ @keyframes dsh-skin-scanner-target-ping {
692
+ 0%, 100% { transform: translate(-50%, -50%) scale(0.86); opacity: 0.68; }
693
+ 50% { transform: translate(-50%, -50%) scale(1.22); opacity: 1; }
694
+ }
695
+
696
+ @keyframes dsh-skin-click-pulse {
697
+ 0% { opacity: 0.92; width: 12px; height: 12px; filter: brightness(1.45); }
698
+ 65% { opacity: 0.34; }
699
+ 100% { opacity: 0; width: 132px; height: 132px; filter: brightness(0.8); }
700
+ }
701
+
702
+ @keyframes dsh-skin-hyperspace-burst {
703
+ 0% { opacity: 0; transform: scale(0.32) rotate(0deg); }
704
+ 15% { opacity: 0.9; }
705
+ 100% { opacity: 0; transform: scale(1.45) rotate(10deg); }
706
+ }
707
+
708
+ @keyframes dsh-skin-route-pulse {
709
+ 0%, 100% { opacity: 0.32; filter: saturate(0.9); }
710
+ 50% { opacity: 0.56; filter: saturate(1.35); }
711
+ }
712
+
713
+ @keyframes dsh-skin-energy-cyan {
714
+ 0%, 100% { opacity: 0.44; filter: brightness(0.9); }
715
+ 45% { opacity: 0.90; filter: brightness(1.42); }
716
+ 60% { opacity: 0.58; }
717
+ }
718
+
719
+ @keyframes dsh-skin-energy-red {
720
+ 0%, 100% { opacity: 0.38; filter: brightness(0.85); }
721
+ 40% { opacity: 0.86; filter: brightness(1.52); }
722
+ 58% { opacity: 0.50; }
723
+ }
724
+
725
+ @keyframes dsh-skin-energy-gold {
726
+ 0%, 100% { opacity: 0.34; filter: brightness(0.9); }
727
+ 50% { opacity: 0.78; filter: brightness(1.38); }
728
+ }
729
+
730
+ @keyframes dsh-skin-comet-flight {
731
+ 0% { opacity: 0; transform: rotate(-24deg) translate3d(-24vmin, 0, 0); }
732
+ 8% { opacity: 0.92; }
733
+ 34% { opacity: 0; transform: rotate(-24deg) translate3d(138vw, 0, 0); }
734
+ 100% { opacity: 0; transform: rotate(-24deg) translate3d(138vw, 0, 0); }
735
+ }
736
+
737
+
738
+ @keyframes dsh-skin-fighter-pass {
739
+ 0% { opacity: 0; transform: rotate(var(--dsh-skin-fighter-angle)) translate3d(10vw, 0, 0) scale(0.74); }
740
+ 9% { opacity: 0.78; }
741
+ 24% { opacity: 0.42; transform: rotate(var(--dsh-skin-fighter-angle)) translate3d(-52vw, 9vh, 0) scale(1.0); }
742
+ 42% { opacity: 0; transform: rotate(var(--dsh-skin-fighter-angle)) translate3d(-126vw, 20vh, 0) scale(1.16); }
743
+ 100% { opacity: 0; transform: rotate(var(--dsh-skin-fighter-angle)) translate3d(-126vw, 20vh, 0) scale(1.16); }
744
+ }
745
+
746
+ @keyframes dsh-skin-crawl-rise {
747
+ from { background-position: 0 0, 0 0; opacity: 0.22; }
748
+ 45% { opacity: 0.38; }
749
+ to { background-position: 0 -84px, 0 0; opacity: 0.22; }
750
+ }
751
+
752
+ @media (prefers-reduced-motion: reduce) {
753
+ body.dsh-skin-galactic-opera::before,
754
+ body.dsh-skin-galactic-opera::after,
755
+ body.dsh-skin-galactic-opera #root::before,
756
+ body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor * {
757
+ animation: none !important;
758
+ }
759
+
760
+ body.dsh-skin-galactic-opera .dsh-skin-comet,
761
+ body.dsh-skin-galactic-opera .dsh-skin-starfighter,
762
+ body.dsh-skin-galactic-opera .dsh-skin-mission-crawl,
763
+ body.dsh-skin-galactic-opera .dsh-skin-pulse,
764
+ body.dsh-skin-galactic-opera .dsh-skin-nebula-core {
765
+ display: none;
766
+ }
767
+
768
+ body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor {
769
+ transform: none;
770
+ }
771
+ }
772
+ `;
773
+
774
+ function ensureStyle() {
775
+ if (typeof document === "undefined") return undefined;
776
+ let tag = document.getElementById(STYLE_ID);
777
+ if (tag instanceof HTMLStyleElement) return tag;
778
+ tag = document.createElement("style");
779
+ tag.id = STYLE_ID;
780
+ tag.dataset.plugin = PLUGIN_ID;
781
+ tag.dataset.pluginCss = CSS_TAG_ID;
782
+ tag.textContent = CSS;
783
+ document.head.appendChild(tag);
784
+ return tag;
785
+ }
786
+
787
+ function ensureDecor() {
788
+ if (typeof document === "undefined") return undefined;
789
+ let decor = document.getElementById(DECOR_ID);
790
+ if (decor instanceof HTMLDivElement) return decor;
791
+ decor = document.createElement("div");
792
+ decor.id = DECOR_ID;
793
+ decor.className = "dsh-skin-galactic-opera-decor";
794
+ decor.setAttribute("aria-hidden", "true");
795
+ decor.dataset.plugin = PLUGIN_ID;
796
+ decor.innerHTML = [
797
+ "<span class=\"dsh-skin-nebula-core\"></span>",
798
+ "<span class=\"dsh-skin-twinkle dsh-skin-twinkle-a\"></span>",
799
+ "<span class=\"dsh-skin-twinkle dsh-skin-twinkle-b\"></span>",
800
+ "<span class=\"dsh-skin-twinkle dsh-skin-twinkle-c\"></span>",
801
+ "<span class=\"dsh-skin-orb dsh-skin-orb-primary\"></span>",
802
+ "<span class=\"dsh-skin-orb dsh-skin-orb-moon-a\"></span>",
803
+ "<span class=\"dsh-skin-satellite-orbit\"></span>",
804
+ "<span class=\"dsh-skin-satellite-orbit-front\"></span>",
805
+ "<span class=\"dsh-skin-satellite\"></span>",
806
+ "<span class=\"dsh-skin-scanner\"></span>",
807
+ "<span class=\"dsh-skin-scanner-target\"></span>",
808
+ "<span class=\"dsh-skin-route-map\"></span>",
809
+ "<span class=\"dsh-skin-energy dsh-skin-energy-cyan\"></span>",
810
+ "<span class=\"dsh-skin-energy dsh-skin-energy-red\"></span>",
811
+ "<span class=\"dsh-skin-energy dsh-skin-energy-gold\"></span>",
812
+ "<span class=\"dsh-skin-starfighter dsh-skin-starfighter-1\"></span>",
813
+ "<span class=\"dsh-skin-starfighter dsh-skin-starfighter-2\"></span>",
814
+ "<span class=\"dsh-skin-starfighter dsh-skin-starfighter-3\"></span>",
815
+ "<span class=\"dsh-skin-mission-crawl\"></span>",
816
+ "<span class=\"dsh-skin-comet dsh-skin-comet-1\"></span>",
817
+ "<span class=\"dsh-skin-comet dsh-skin-comet-2\"></span>",
818
+ "<span class=\"dsh-skin-comet dsh-skin-comet-3\"></span>",
819
+ "<span class=\"dsh-skin-comet dsh-skin-comet-4\"></span>",
820
+ "<span class=\"dsh-skin-comet dsh-skin-comet-5\"></span>",
821
+ "<span class=\"dsh-skin-comet dsh-skin-comet-6\"></span>"
822
+ ].join("");
823
+ document.body.appendChild(decor);
824
+ return decor;
825
+ }
826
+
827
+ function isReducedMotion() {
828
+ return typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
829
+ }
830
+
831
+ function isEditableTarget(target) {
832
+ if (!(target instanceof Element)) return false;
833
+ const tag = target.tagName.toLowerCase();
834
+ return tag === "input" || tag === "textarea" || tag === "select" || target.closest("[contenteditable=true]") !== null;
835
+ }
836
+
837
+ function isInstructionInputTarget(target) {
838
+ if (!(target instanceof Element)) return false;
839
+ const tag = target.tagName.toLowerCase();
840
+ return tag === "textarea" || target.closest("[contenteditable=true]") !== null;
841
+ }
842
+
843
+ function isLikelySendButton(target) {
844
+ if (!(target instanceof Element)) return false;
845
+ const button = target.closest("button");
846
+ if (!(button instanceof HTMLButtonElement)) return false;
847
+ const form = button.closest("form");
848
+ if (form !== null && form.querySelector("textarea, [contenteditable=true]") !== null && button.type === "submit") return true;
849
+ const label = `${button.getAttribute("aria-label") ?? ""} ${button.getAttribute("title") ?? ""} ${button.textContent ?? ""}`.toLowerCase();
850
+ return /send|submit|发送|提交|送出|传送/.test(label);
851
+ }
852
+
853
+ function installInteractions(decor) {
854
+ if (typeof document === "undefined" || typeof window === "undefined" || decor === undefined) return () => {};
855
+ let frame = 0;
856
+ let sweepFrame = 0;
857
+ let latestX = window.innerWidth / 2;
858
+ let latestY = window.innerHeight / 2;
859
+ let targetAngle = 0;
860
+ let pulseIndex = 0;
861
+ let hyperspaceTimer;
862
+ let lastHyperspaceAt = 0;
863
+ const scannerTarget = decor.querySelector(".dsh-skin-scanner-target");
864
+ const scannerStartedAt = performance.now();
865
+ const pulseColors = ["rgba(125,227,255,0.94)", "rgba(255,207,92,0.92)", "rgba(255,71,120,0.88)"];
866
+ const updatePointer = () => {
867
+ frame = 0;
868
+ const nx = (latestX / Math.max(1, window.innerWidth) - 0.5) * 2;
869
+ const ny = (latestY / Math.max(1, window.innerHeight) - 0.5) * 2;
870
+ document.body.style.setProperty("--dsh-skin-parallax-x", `${Math.round(nx * -10)}px`);
871
+ document.body.style.setProperty("--dsh-skin-parallax-y", `${Math.round(ny * -8)}px`);
872
+ const scanner = decor.querySelector(".dsh-skin-scanner");
873
+ if (scanner instanceof HTMLElement) {
874
+ const rect = scanner.getBoundingClientRect();
875
+ const scannerCenterX = rect.left + rect.width / 2;
876
+ const scannerCenterY = rect.top + rect.height / 2;
877
+ // Navigation mode: direction is measured from the viewport center,
878
+ // then projected onto the scanner disk so it behaves like a HUD compass.
879
+ const viewportCenterX = window.innerWidth / 2;
880
+ const viewportCenterY = window.innerHeight / 2;
881
+ const angle = Math.atan2(latestY - viewportCenterY, latestX - viewportCenterX);
882
+ targetAngle = (angle * 180 / Math.PI + 360) % 360;
883
+ const radius = Math.max(10, Math.min(rect.width, rect.height) * 0.38);
884
+ document.body.style.setProperty("--dsh-skin-scanner-dot-x", `${Math.round(scannerCenterX + Math.cos(angle) * radius)}px`);
885
+ document.body.style.setProperty("--dsh-skin-scanner-dot-y", `${Math.round(scannerCenterY + Math.sin(angle) * radius)}px`);
886
+ }
887
+ };
888
+ const onPointerMove = (event) => {
889
+ if (isReducedMotion()) return;
890
+ latestX = event.clientX;
891
+ latestY = event.clientY;
892
+ if (frame === 0) frame = requestAnimationFrame(updatePointer);
893
+ };
894
+ const triggerHyperspace = () => {
895
+ if (isReducedMotion()) return;
896
+ const now = performance.now();
897
+ if (now - lastHyperspaceAt < 1200) return;
898
+ lastHyperspaceAt = now;
899
+ document.body.classList.add("dsh-skin-hyperspace");
900
+ window.clearTimeout(hyperspaceTimer);
901
+ hyperspaceTimer = window.setTimeout(() => {
902
+ document.body.classList.remove("dsh-skin-hyperspace");
903
+ }, 900);
904
+ };
905
+ const onPointerDown = (event) => {
906
+ if (isReducedMotion()) return;
907
+ const pulse = document.createElement("span");
908
+ pulse.className = "dsh-skin-pulse";
909
+ pulse.style.setProperty("--dsh-skin-pulse-x", `${event.clientX}px`);
910
+ pulse.style.setProperty("--dsh-skin-pulse-y", `${event.clientY}px`);
911
+ pulse.style.setProperty("--dsh-skin-pulse-color", pulseColors[pulseIndex % pulseColors.length]);
912
+ pulseIndex += 1;
913
+ decor.appendChild(pulse);
914
+ const remove = () => { pulse.remove(); };
915
+ pulse.addEventListener("animationend", remove, { once: true });
916
+ window.setTimeout(remove, 900);
917
+ if (isLikelySendButton(event.target)) window.setTimeout(triggerHyperspace, 40);
918
+ };
919
+ const onKeyDown = (event) => {
920
+ if (isReducedMotion() || event.isComposing) return;
921
+ if (!isInstructionInputTarget(event.target)) return;
922
+ if (event.code !== "Enter" || event.shiftKey || event.altKey) return;
923
+ window.setTimeout(triggerHyperspace, 40);
924
+ };
925
+ const sweepLoop = () => {
926
+ if (scannerTarget instanceof HTMLElement) {
927
+ if (isReducedMotion()) {
928
+ scannerTarget.removeAttribute("data-lit");
929
+ } else {
930
+ // The scanner disk rotates once every 7s. Offset roughly matches the bright conic wedge.
931
+ const sweepAngle = (((performance.now() - scannerStartedAt) % 7000) / 7000 * 360 + 18) % 360;
932
+ const delta = Math.abs(((sweepAngle - targetAngle + 540) % 360) - 180);
933
+ if (delta < 10) scannerTarget.dataset.lit = "true";
934
+ else scannerTarget.removeAttribute("data-lit");
935
+ }
936
+ }
937
+ sweepFrame = requestAnimationFrame(sweepLoop);
938
+ };
939
+ updatePointer();
940
+ sweepFrame = requestAnimationFrame(sweepLoop);
941
+ document.addEventListener("pointermove", onPointerMove, { passive: true });
942
+ document.addEventListener("pointerdown", onPointerDown, { passive: true });
943
+ document.addEventListener("keydown", onKeyDown);
944
+ return () => {
945
+ document.removeEventListener("pointermove", onPointerMove);
946
+ document.removeEventListener("pointerdown", onPointerDown);
947
+ document.removeEventListener("keydown", onKeyDown);
948
+ if (frame !== 0) cancelAnimationFrame(frame);
949
+ if (sweepFrame !== 0) cancelAnimationFrame(sweepFrame);
950
+ if (scannerTarget instanceof HTMLElement) scannerTarget.removeAttribute("data-lit");
951
+ window.clearTimeout(hyperspaceTimer);
952
+ document.body.classList.remove("dsh-skin-hyperspace");
953
+ document.body.style.removeProperty("--dsh-skin-parallax-x");
954
+ document.body.style.removeProperty("--dsh-skin-parallax-y");
955
+ document.body.style.removeProperty("--dsh-skin-scanner-dot-x");
956
+ document.body.style.removeProperty("--dsh-skin-scanner-dot-y");
957
+ };
958
+ }
959
+
960
+ const inject = ["theme"];
961
+
962
+ function apply(ctx) {
963
+ ctx.effect(() => {
964
+ const style = ensureStyle();
965
+ if (typeof document !== "undefined") document.body.classList.add("dsh-skin-galactic-opera");
966
+ const decor = ensureDecor();
967
+ const disposeInteractions = installInteractions(decor);
968
+ return () => {
969
+ disposeInteractions();
970
+ if (typeof document !== "undefined") document.body.classList.remove("dsh-skin-galactic-opera");
971
+ decor?.remove();
972
+ style?.remove();
973
+ };
974
+ }, "dsh-skin-galactic-opera: global CSS, animated decor, and interactions");
975
+
976
+ ctx.effect(() => ctx.theme.overrideTokens(PLUGIN_ID, TOKEN_OVERRIDES), "dsh-skin-galactic-opera: token override layer");
977
+
978
+ ctx.effect(() => {
979
+ const previousPreference = ctx.theme.getTheme().preference;
980
+ const disposeTheme = ctx.theme.register({
981
+ id: THEME_ID,
982
+ colorScheme: "dark",
983
+ tokens: TOKENS
984
+ });
985
+ ctx.theme.setTheme(THEME_ID);
986
+ return () => {
987
+ const wasActive = ctx.theme.getTheme().preference === THEME_ID;
988
+ disposeTheme();
989
+ if (wasActive && previousPreference !== THEME_ID) {
990
+ try {
991
+ ctx.theme.setTheme(previousPreference);
992
+ } catch {
993
+ // The previous custom theme may have been removed by another plugin.
994
+ }
995
+ }
996
+ };
997
+ }, `dsh-skin-galactic-opera: ${THEME_LABEL} theme`);
998
+ }
999
+
1000
+ exports.apply = apply;
1001
+ exports.inject = inject;
1002
+ return module.exports;
1003
+ }
1004
+ });
package/lib/index.js ADDED
@@ -0,0 +1,2 @@
1
+ /** Host loader entry for the browser-only Galactic Opera DSH skin. */
2
+ export function apply() {}
package/package.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "name": "dsh-skin-galactic-opera",
3
+ "version": "0.1.0",
4
+ "description": "Unofficial cinematic space-opera dark skin bundle for the DSH Web GUI.",
5
+ "type": "module",
6
+ "main": "lib/index.js",
7
+ "exports": {
8
+ ".": "./lib/index.js",
9
+ "./client": "./lib/client.js",
10
+ "./cordis.patch.yml": "./cordis.patch.yml",
11
+ "./package.json": "./package.json"
12
+ },
13
+ "files": [
14
+ "lib/index.js",
15
+ "lib/client.js",
16
+ "cordis.patch.yml",
17
+ "README.md",
18
+ "LICENSE",
19
+ "CHANGELOG.md"
20
+ ],
21
+ "scripts": {
22
+ "check": "node --check lib/client.js",
23
+ "pack:dry": "npm pack --dry-run"
24
+ },
25
+ "keywords": [
26
+ "dsh",
27
+ "deepseek-harness",
28
+ "dsh-plugin",
29
+ "dsh-skin",
30
+ "dsh-theme",
31
+ "theme",
32
+ "skin",
33
+ "web",
34
+ "web-ui",
35
+ "dark-theme",
36
+ "space",
37
+ "space-opera",
38
+ "sci-fi",
39
+ "hud"
40
+ ],
41
+ "license": "MIT",
42
+ "publishConfig": {
43
+ "access": "public"
44
+ },
45
+ "sideEffects": true,
46
+ "dsh": {
47
+ "bundle": {
48
+ "patch": "./cordis.patch.yml"
49
+ },
50
+ "client": {
51
+ "inject": [
52
+ "@deepseek-ai/dsh-client-ui-theme"
53
+ ],
54
+ "platform": "web"
55
+ }
56
+ }
57
+ }