dsh-skin-galactic-opera 0.1.6 → 0.1.8
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/CHANGELOG.md +27 -0
- package/lib/client.js +270 -66
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,33 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this package will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## 0.1.8 - 2026-09-03
|
|
6
|
+
|
|
7
|
+
### Added
|
|
8
|
+
|
|
9
|
+
- Adds a subtle black-hole infall effect using a lightweight pseudo-element particle layer and a send-time pull animation.
|
|
10
|
+
|
|
11
|
+
### Changed
|
|
12
|
+
|
|
13
|
+
- Reduces idle black-hole animation cost by slowing the new infall layer, shrinking its paint area, lowering opacity, and removing animated filters.
|
|
14
|
+
- Keeps telemetry panel chrome clipped through the same cutout layer in both typing and idle states.
|
|
15
|
+
|
|
16
|
+
### Fixed
|
|
17
|
+
|
|
18
|
+
- Fixes telemetry panel cutout artifacts that could show a filled or rectangular top-left corner while typing.
|
|
19
|
+
|
|
20
|
+
## 0.1.7 - 2026-09-03
|
|
21
|
+
|
|
22
|
+
### Changed
|
|
23
|
+
|
|
24
|
+
- Moves the decorative visual layer into Shadow DOM to isolate scanner, planet, pulse, and black-hole geometry from DSH host style regressions.
|
|
25
|
+
- Keeps the input-mode black hole visually stable while still reducing high-motion distraction elsewhere.
|
|
26
|
+
- Aligns the hyperspace burst effect to the black-hole center after Shadow DOM isolation.
|
|
27
|
+
|
|
28
|
+
### Fixed
|
|
29
|
+
|
|
30
|
+
- Prevents Shadow DOM container nesting from shifting the scanner disk, planet, satellite orbit, and other decorative elements toward the viewport edges.
|
|
31
|
+
|
|
5
32
|
## 0.1.6 - 2026-08-28
|
|
6
33
|
|
|
7
34
|
### Changed
|
package/lib/client.js
CHANGED
|
@@ -10,6 +10,7 @@ window.__ModuleLoader__.load({
|
|
|
10
10
|
const THEME_LABEL = "Galactic Opera";
|
|
11
11
|
const STYLE_ID = "dsh-skin-galactic-opera-style";
|
|
12
12
|
const DECOR_ID = "dsh-skin-galactic-opera-decor";
|
|
13
|
+
const DECOR_HOST_CLASS = "dsh-skin-galactic-opera-decor-host";
|
|
13
14
|
const CSS_TAG_ID = `${PLUGIN_ID}/global.css`;
|
|
14
15
|
|
|
15
16
|
const TOKENS = Object.freeze({
|
|
@@ -160,17 +161,13 @@ body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active #root::before
|
|
|
160
161
|
will-change: auto;
|
|
161
162
|
}
|
|
162
163
|
|
|
163
|
-
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-
|
|
164
|
-
opacity: 0.28;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-nebula-core, .dsh-skin-energy, .dsh-skin-comet, .dsh-skin-starfighter, .dsh-skin-mission-crawl, .dsh-skin-scanner, .dsh-skin-route-map),
|
|
164
|
+
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-energy, .dsh-skin-comet, .dsh-skin-starfighter, .dsh-skin-mission-crawl, .dsh-skin-scanner, .dsh-skin-route-map),
|
|
168
165
|
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-scanner::after {
|
|
169
166
|
animation-play-state: paused !important;
|
|
170
167
|
}
|
|
171
168
|
|
|
172
|
-
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-
|
|
173
|
-
opacity: 0.
|
|
169
|
+
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active :is(.dsh-skin-energy, .dsh-skin-comet, .dsh-skin-starfighter, .dsh-skin-mission-crawl) {
|
|
170
|
+
opacity: 0.16 !important;
|
|
174
171
|
}
|
|
175
172
|
|
|
176
173
|
body.dsh-skin-galactic-opera #root > *,
|
|
@@ -197,6 +194,7 @@ body.dsh-skin-galactic-opera [class*="Sidebar"] {
|
|
|
197
194
|
0 0 40px rgba(125, 227, 255, 0.12) !important;
|
|
198
195
|
}
|
|
199
196
|
|
|
197
|
+
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor-host,
|
|
200
198
|
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor {
|
|
201
199
|
position: fixed;
|
|
202
200
|
inset: -2vmax;
|
|
@@ -206,16 +204,28 @@ body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor {
|
|
|
206
204
|
mix-blend-mode: screen;
|
|
207
205
|
}
|
|
208
206
|
|
|
207
|
+
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor-host {
|
|
208
|
+
display: block;
|
|
209
|
+
width: auto;
|
|
210
|
+
height: auto;
|
|
211
|
+
border: 0 !important;
|
|
212
|
+
border-radius: 0 !important;
|
|
213
|
+
background: transparent !important;
|
|
214
|
+
}
|
|
215
|
+
|
|
209
216
|
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor::before {
|
|
210
217
|
content: "";
|
|
211
218
|
position: absolute;
|
|
212
|
-
|
|
219
|
+
left: 48%;
|
|
220
|
+
top: 50%;
|
|
221
|
+
width: 140vmax;
|
|
222
|
+
height: 140vmax;
|
|
213
223
|
opacity: 0;
|
|
214
224
|
pointer-events: none;
|
|
215
225
|
background:
|
|
216
226
|
repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 5deg, rgba(125,227,255,0.72) 5.4deg 6deg, transparent 6.4deg 12deg),
|
|
217
227
|
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.82), transparent 8vmin, rgba(255,207,92,0.26) 12vmin, transparent 36vmin);
|
|
218
|
-
transform: scale(0.5);
|
|
228
|
+
transform: translate(-50%, -50%) scale(0.5);
|
|
219
229
|
filter: blur(0.2px);
|
|
220
230
|
}
|
|
221
231
|
|
|
@@ -223,6 +233,23 @@ body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace .dsh-skin-galact
|
|
|
223
233
|
animation: dsh-skin-galactic-opera-hyperspace-burst 880ms cubic-bezier(.16,.8,.25,1) both;
|
|
224
234
|
}
|
|
225
235
|
|
|
236
|
+
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor,
|
|
237
|
+
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor *,
|
|
238
|
+
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor *::before,
|
|
239
|
+
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor *::after {
|
|
240
|
+
box-sizing: border-box;
|
|
241
|
+
min-width: 0;
|
|
242
|
+
min-height: 0;
|
|
243
|
+
max-width: none;
|
|
244
|
+
max-height: none;
|
|
245
|
+
margin: 0;
|
|
246
|
+
padding: 0;
|
|
247
|
+
font: inherit;
|
|
248
|
+
line-height: 1;
|
|
249
|
+
text-decoration: none;
|
|
250
|
+
background-clip: border-box;
|
|
251
|
+
}
|
|
252
|
+
|
|
226
253
|
body.dsh-skin-galactic-opera .dsh-skin-galactic-opera-decor span {
|
|
227
254
|
position: absolute;
|
|
228
255
|
display: block;
|
|
@@ -297,7 +324,32 @@ body.dsh-skin-galactic-opera .dsh-skin-nebula-core {
|
|
|
297
324
|
0 0 112px rgba(255,71,120,0.10);
|
|
298
325
|
filter: blur(0.55px) saturate(1.22);
|
|
299
326
|
mix-blend-mode: screen;
|
|
300
|
-
animation: dsh-skin-blackhole-breathe
|
|
327
|
+
animation: dsh-skin-blackhole-breathe 9.6s ease-in-out infinite;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
body.dsh-skin-galactic-opera .dsh-skin-nebula-core::after {
|
|
331
|
+
content: "";
|
|
332
|
+
position: absolute;
|
|
333
|
+
pointer-events: none;
|
|
334
|
+
border-radius: 50%;
|
|
335
|
+
mix-blend-mode: screen;
|
|
336
|
+
inset: -22%;
|
|
337
|
+
opacity: 0;
|
|
338
|
+
background:
|
|
339
|
+
radial-gradient(circle at 50% 14%, rgba(255,255,255,0.72) 0 1px, transparent 1.8px),
|
|
340
|
+
radial-gradient(circle at 80% 44%, rgba(125,227,255,0.58) 0 1.1px, transparent 2px),
|
|
341
|
+
radial-gradient(circle at 24% 66%, rgba(255,207,92,0.48) 0 1px, transparent 1.8px);
|
|
342
|
+
-webkit-mask-image: radial-gradient(circle, transparent 0 16%, #000 24% 68%, transparent 82%);
|
|
343
|
+
mask-image: radial-gradient(circle, transparent 0 16%, #000 24% 68%, transparent 82%);
|
|
344
|
+
animation: dsh-skin-blackhole-infall 9.8s cubic-bezier(.42,0,.18,1) infinite;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace .dsh-skin-nebula-core {
|
|
348
|
+
animation: dsh-skin-blackhole-warp-pull 880ms cubic-bezier(.16,.8,.25,1) both;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace .dsh-skin-nebula-core::after {
|
|
352
|
+
animation: dsh-skin-blackhole-infall-burst 880ms cubic-bezier(.16,.8,.25,1) both;
|
|
301
353
|
}
|
|
302
354
|
|
|
303
355
|
body.dsh-skin-galactic-opera .dsh-skin-orb {
|
|
@@ -584,6 +636,34 @@ body.dsh-skin-galactic-opera .dsh-skin-mission-crawl::before {
|
|
|
584
636
|
text-shadow: 0 0 14px rgba(255,207,92,0.46);
|
|
585
637
|
}
|
|
586
638
|
|
|
639
|
+
body.dsh-skin-galactic-opera :is(.dsh-skin-twinkle, .dsh-skin-nebula-core, .dsh-skin-orb, .dsh-skin-scanner, .dsh-skin-scanner-target, .dsh-skin-pulse),
|
|
640
|
+
body.dsh-skin-galactic-opera .dsh-skin-nebula-core::after,
|
|
641
|
+
body.dsh-skin-galactic-opera .dsh-skin-satellite::before,
|
|
642
|
+
body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit::before,
|
|
643
|
+
body.dsh-skin-galactic-opera .dsh-skin-satellite-orbit-front::before,
|
|
644
|
+
body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor :is(.dsh-skin-twinkle, .dsh-skin-nebula-core, .dsh-skin-orb, .dsh-skin-scanner, .dsh-skin-scanner-target, .dsh-skin-pulse),
|
|
645
|
+
body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-nebula-core::after,
|
|
646
|
+
body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite::before,
|
|
647
|
+
body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite-orbit::before,
|
|
648
|
+
body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-satellite-orbit-front::before {
|
|
649
|
+
border-radius: 50% !important;
|
|
650
|
+
border-top-left-radius: 50% !important;
|
|
651
|
+
border-top-right-radius: 50% !important;
|
|
652
|
+
border-bottom-right-radius: 50% !important;
|
|
653
|
+
border-bottom-left-radius: 50% !important;
|
|
654
|
+
}
|
|
655
|
+
|
|
656
|
+
body.dsh-skin-galactic-opera :is(.dsh-skin-energy, .dsh-skin-comet),
|
|
657
|
+
body.dsh-skin-galactic-opera .dsh-skin-scanner::after,
|
|
658
|
+
body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor :is(.dsh-skin-energy, .dsh-skin-comet),
|
|
659
|
+
body.dsh-skin-galactic-opera #dsh-skin-galactic-opera-decor .dsh-skin-scanner::after {
|
|
660
|
+
border-radius: 999px !important;
|
|
661
|
+
border-top-left-radius: 999px !important;
|
|
662
|
+
border-top-right-radius: 999px !important;
|
|
663
|
+
border-bottom-right-radius: 999px !important;
|
|
664
|
+
border-bottom-left-radius: 999px !important;
|
|
665
|
+
}
|
|
666
|
+
|
|
587
667
|
body.dsh-skin-galactic-opera .dsh-skin-pulse {
|
|
588
668
|
position: fixed;
|
|
589
669
|
left: var(--dsh-skin-pulse-x);
|
|
@@ -679,28 +759,21 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel {
|
|
|
679
759
|
gap: 4px;
|
|
680
760
|
width: min(260px, 36vw);
|
|
681
761
|
max-height: none;
|
|
682
|
-
overflow:
|
|
762
|
+
overflow: hidden;
|
|
683
763
|
padding: 19px 12px 12px;
|
|
684
|
-
border:
|
|
685
|
-
border-left-color: rgba(255,207,92,0.62);
|
|
686
|
-
border-bottom-color: rgba(255,71,120,0.36);
|
|
764
|
+
border: 0;
|
|
687
765
|
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 14px);
|
|
688
766
|
color: rgba(248,251,255,0.92);
|
|
689
|
-
background:
|
|
690
|
-
|
|
691
|
-
linear-gradient(315deg, rgba(125,227,255,0.18) 0 12px, transparent 13px),
|
|
692
|
-
linear-gradient(180deg, rgba(6,10,26,0.92), rgba(10,17,42,0.84));
|
|
693
|
-
box-shadow:
|
|
694
|
-
inset 0 0 0 1px rgba(255,255,255,0.07),
|
|
695
|
-
inset 0 0 24px rgba(125,227,255,0.09),
|
|
696
|
-
0 0 28px rgba(125,227,255,0.22),
|
|
697
|
-
0 0 52px rgba(255,71,120,0.10);
|
|
698
|
-
backdrop-filter: blur(12px) saturate(1.35);
|
|
699
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.35);
|
|
767
|
+
background: transparent;
|
|
768
|
+
box-shadow: none;
|
|
700
769
|
pointer-events: none;
|
|
701
770
|
}
|
|
702
771
|
|
|
703
772
|
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-telemetry-panel {
|
|
773
|
+
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 14px);
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active .dsh-skin-telemetry-panel::after {
|
|
704
777
|
backdrop-filter: none;
|
|
705
778
|
-webkit-backdrop-filter: none;
|
|
706
779
|
}
|
|
@@ -725,6 +798,7 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel[data-collapsed="true"] .d
|
|
|
725
798
|
body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::before {
|
|
726
799
|
content: "TELEMETRY";
|
|
727
800
|
position: absolute;
|
|
801
|
+
z-index: 1;
|
|
728
802
|
left: 14px;
|
|
729
803
|
top: 5px;
|
|
730
804
|
color: rgba(255,207,92,0.82);
|
|
@@ -736,12 +810,24 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::before {
|
|
|
736
810
|
body.dsh-skin-galactic-opera .dsh-skin-telemetry-panel::after {
|
|
737
811
|
content: "";
|
|
738
812
|
position: absolute;
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
813
|
+
z-index: 0;
|
|
814
|
+
inset: 0;
|
|
815
|
+
border: 1px solid rgba(125,227,255,0.48);
|
|
816
|
+
border-left-color: rgba(255,207,92,0.62);
|
|
817
|
+
border-bottom-color: rgba(255,71,120,0.36);
|
|
818
|
+
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 14px);
|
|
742
819
|
background:
|
|
743
820
|
repeating-linear-gradient(90deg, transparent 0 18px, rgba(125,227,255,0.045) 19px, transparent 20px 36px),
|
|
744
|
-
linear-gradient(90deg, rgba(125,227,255,0.10), transparent 30%, rgba(255,71,120,0.06))
|
|
821
|
+
linear-gradient(90deg, rgba(125,227,255,0.10), transparent 30%, rgba(255,71,120,0.06)),
|
|
822
|
+
linear-gradient(315deg, rgba(125,227,255,0.18) 0 12px, transparent 13px),
|
|
823
|
+
linear-gradient(180deg, rgba(6,10,26,0.92), rgba(10,17,42,0.84));
|
|
824
|
+
box-shadow:
|
|
825
|
+
inset 0 0 0 1px rgba(255,255,255,0.07),
|
|
826
|
+
inset 0 0 24px rgba(125,227,255,0.09),
|
|
827
|
+
0 0 28px rgba(125,227,255,0.22),
|
|
828
|
+
0 0 52px rgba(255,71,120,0.10);
|
|
829
|
+
backdrop-filter: blur(12px) saturate(1.35);
|
|
830
|
+
-webkit-backdrop-filter: blur(12px) saturate(1.35);
|
|
745
831
|
pointer-events: none;
|
|
746
832
|
}
|
|
747
833
|
|
|
@@ -885,8 +971,29 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
|
|
|
885
971
|
}
|
|
886
972
|
|
|
887
973
|
@keyframes dsh-skin-blackhole-breathe {
|
|
888
|
-
0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.
|
|
889
|
-
50% { opacity: 0.
|
|
974
|
+
0%, 100% { opacity: 0.18; transform: translate(-50%, -50%) scale(0.97) rotate(0deg); }
|
|
975
|
+
50% { opacity: 0.28; transform: translate(-50%, -50%) scale(1.03) rotate(5deg); }
|
|
976
|
+
}
|
|
977
|
+
|
|
978
|
+
@keyframes dsh-skin-blackhole-infall {
|
|
979
|
+
0% { opacity: 0; transform: rotate(-16deg) scale(1.12); }
|
|
980
|
+
18% { opacity: 0.22; }
|
|
981
|
+
64% { opacity: 0.12; transform: rotate(20deg) scale(0.78); }
|
|
982
|
+
100% { opacity: 0; transform: rotate(32deg) scale(0.60); }
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
@keyframes dsh-skin-blackhole-warp-pull {
|
|
986
|
+
0% { opacity: 0.24; transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: blur(0.55px) saturate(1.22); }
|
|
987
|
+
16% { opacity: 0.34; transform: translate(-50%, -50%) scale(0.88) rotate(-8deg); filter: blur(0.42px) saturate(1.55) brightness(1.12); }
|
|
988
|
+
46% { opacity: 0.40; transform: translate(-50%, -50%) scale(1.12) rotate(12deg); filter: blur(0.38px) saturate(1.62) brightness(1.18); }
|
|
989
|
+
100% { opacity: 0.24; transform: translate(-50%, -50%) scale(1.02) rotate(0deg); filter: blur(0.55px) saturate(1.22); }
|
|
990
|
+
}
|
|
991
|
+
|
|
992
|
+
@keyframes dsh-skin-blackhole-infall-burst {
|
|
993
|
+
0% { opacity: 0; transform: rotate(-24deg) scale(1.42); }
|
|
994
|
+
18% { opacity: 0.62; transform: rotate(10deg) scale(0.72); }
|
|
995
|
+
42% { opacity: 0.48; transform: rotate(26deg) scale(0.50); }
|
|
996
|
+
100% { opacity: 0; transform: rotate(58deg) scale(0.34); }
|
|
890
997
|
}
|
|
891
998
|
|
|
892
999
|
@keyframes dsh-skin-orb-hover {
|
|
@@ -925,9 +1032,10 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
|
|
|
925
1032
|
}
|
|
926
1033
|
|
|
927
1034
|
@keyframes dsh-skin-galactic-opera-hyperspace-burst {
|
|
928
|
-
0% { opacity: 0; transform: scale(0.
|
|
929
|
-
|
|
930
|
-
|
|
1035
|
+
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82) rotate(-8deg); filter: blur(0.8px) brightness(0.82); }
|
|
1036
|
+
12% { opacity: 0.88; transform: translate(-50%, -50%) scale(0.24) rotate(0deg); filter: blur(0.2px) brightness(1.52); }
|
|
1037
|
+
28% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.42) rotate(4deg); filter: blur(0.12px) brightness(1.36); }
|
|
1038
|
+
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(12deg); filter: blur(0.4px) brightness(0.9); }
|
|
931
1039
|
}
|
|
932
1040
|
|
|
933
1041
|
@keyframes dsh-skin-route-pulse {
|
|
@@ -1009,42 +1117,133 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
|
|
|
1009
1117
|
return tag;
|
|
1010
1118
|
}
|
|
1011
1119
|
|
|
1120
|
+
const DECOR_MARKUP = [
|
|
1121
|
+
"<span class=\"dsh-skin-nebula-core\"></span>",
|
|
1122
|
+
"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-a\"></span>",
|
|
1123
|
+
"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-b\"></span>",
|
|
1124
|
+
"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-c\"></span>",
|
|
1125
|
+
"<span class=\"dsh-skin-orb dsh-skin-orb-primary\"></span>",
|
|
1126
|
+
"<span class=\"dsh-skin-orb dsh-skin-orb-moon-a\"></span>",
|
|
1127
|
+
"<span class=\"dsh-skin-satellite-orbit\"></span>",
|
|
1128
|
+
"<span class=\"dsh-skin-satellite-orbit-front\"></span>",
|
|
1129
|
+
"<span class=\"dsh-skin-satellite\"></span>",
|
|
1130
|
+
"<span class=\"dsh-skin-scanner\"></span>",
|
|
1131
|
+
"<span class=\"dsh-skin-scanner-target\"></span>",
|
|
1132
|
+
"<span class=\"dsh-skin-route-map\"></span>",
|
|
1133
|
+
"<span class=\"dsh-skin-energy dsh-skin-energy-cyan\"></span>",
|
|
1134
|
+
"<span class=\"dsh-skin-energy dsh-skin-energy-red\"></span>",
|
|
1135
|
+
"<span class=\"dsh-skin-energy dsh-skin-energy-gold\"></span>",
|
|
1136
|
+
"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-1\"></span>",
|
|
1137
|
+
"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-2\"></span>",
|
|
1138
|
+
"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-3\"></span>",
|
|
1139
|
+
"<span class=\"dsh-skin-mission-crawl\"></span>",
|
|
1140
|
+
"<span class=\"dsh-skin-comet dsh-skin-comet-1\"></span>",
|
|
1141
|
+
"<span class=\"dsh-skin-comet dsh-skin-comet-2\"></span>",
|
|
1142
|
+
"<span class=\"dsh-skin-comet dsh-skin-comet-3\"></span>",
|
|
1143
|
+
"<span class=\"dsh-skin-comet dsh-skin-comet-4\"></span>",
|
|
1144
|
+
"<span class=\"dsh-skin-comet dsh-skin-comet-5\"></span>",
|
|
1145
|
+
"<span class=\"dsh-skin-comet dsh-skin-comet-6\"></span>"
|
|
1146
|
+
].join("");
|
|
1147
|
+
|
|
1148
|
+
function getDecorShadowCss() {
|
|
1149
|
+
return `${CSS
|
|
1150
|
+
.replace(/body\.dsh-skin-galactic-opera\.dsh-skin-galactic-opera-input-active\s+/g, ":host-context(body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-input-active) ")
|
|
1151
|
+
.replace(/body\.dsh-skin-galactic-opera\.dsh-skin-galactic-opera-hyperspace\s+/g, ":host-context(body.dsh-skin-galactic-opera.dsh-skin-galactic-opera-hyperspace) ")
|
|
1152
|
+
.replace(/body\.dsh-skin-galactic-opera\s+/g, "")}
|
|
1153
|
+
|
|
1154
|
+
.dsh-skin-galactic-opera-decor {
|
|
1155
|
+
position: absolute !important;
|
|
1156
|
+
inset: 0 !important;
|
|
1157
|
+
width: auto !important;
|
|
1158
|
+
height: auto !important;
|
|
1159
|
+
z-index: auto !important;
|
|
1160
|
+
}
|
|
1161
|
+
`;
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
function setImportantStyle(element, name, value) {
|
|
1165
|
+
if (element instanceof HTMLElement) element.style.setProperty(name, value, "important");
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
function hardenDecorHost(decor) {
|
|
1169
|
+
setImportantStyle(decor, "position", "fixed");
|
|
1170
|
+
setImportantStyle(decor, "inset", "-2vmax");
|
|
1171
|
+
setImportantStyle(decor, "z-index", "2147483645");
|
|
1172
|
+
setImportantStyle(decor, "pointer-events", "none");
|
|
1173
|
+
setImportantStyle(decor, "overflow", "hidden");
|
|
1174
|
+
setImportantStyle(decor, "mix-blend-mode", "screen");
|
|
1175
|
+
setImportantStyle(decor, "display", "block");
|
|
1176
|
+
setImportantStyle(decor, "width", "auto");
|
|
1177
|
+
setImportantStyle(decor, "height", "auto");
|
|
1178
|
+
setImportantStyle(decor, "border", "0");
|
|
1179
|
+
setImportantStyle(decor, "border-radius", "0");
|
|
1180
|
+
setImportantStyle(decor, "border-top-left-radius", "0");
|
|
1181
|
+
setImportantStyle(decor, "border-top-right-radius", "0");
|
|
1182
|
+
setImportantStyle(decor, "border-bottom-right-radius", "0");
|
|
1183
|
+
setImportantStyle(decor, "border-bottom-left-radius", "0");
|
|
1184
|
+
setImportantStyle(decor, "background", "transparent");
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
function getDecorRoot(decor) {
|
|
1188
|
+
return decor?.shadowRoot ?? decor;
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
function getDecorLayer(decor) {
|
|
1192
|
+
const root = getDecorRoot(decor);
|
|
1193
|
+
return root?.querySelector?.(".dsh-skin-galactic-opera-decor") ?? root;
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1196
|
+
function hardenDecorGeometry(decor) {
|
|
1197
|
+
const root = getDecorRoot(decor);
|
|
1198
|
+
if (root === undefined || root === null) return;
|
|
1199
|
+
const roundSelector = ".dsh-skin-twinkle, .dsh-skin-nebula-core, .dsh-skin-orb, .dsh-skin-scanner, .dsh-skin-scanner-target";
|
|
1200
|
+
for (const element of root.querySelectorAll(roundSelector)) {
|
|
1201
|
+
setImportantStyle(element, "border-radius", "50%");
|
|
1202
|
+
setImportantStyle(element, "overflow", "visible");
|
|
1203
|
+
setImportantStyle(element, "box-sizing", "border-box");
|
|
1204
|
+
}
|
|
1205
|
+
for (const element of root.querySelectorAll(".dsh-skin-energy, .dsh-skin-comet")) {
|
|
1206
|
+
setImportantStyle(element, "border-radius", "999px");
|
|
1207
|
+
setImportantStyle(element, "overflow", "visible");
|
|
1208
|
+
setImportantStyle(element, "box-sizing", "border-box");
|
|
1209
|
+
}
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
function populateDecor(decor) {
|
|
1213
|
+
if (typeof decor.attachShadow === "function") {
|
|
1214
|
+
const shadow = decor.shadowRoot ?? decor.attachShadow({ mode: "open" });
|
|
1215
|
+
shadow.replaceChildren();
|
|
1216
|
+
decor.replaceChildren();
|
|
1217
|
+
const style = document.createElement("style");
|
|
1218
|
+
style.textContent = getDecorShadowCss();
|
|
1219
|
+
const layer = document.createElement("div");
|
|
1220
|
+
layer.className = "dsh-skin-galactic-opera-decor";
|
|
1221
|
+
layer.innerHTML = DECOR_MARKUP;
|
|
1222
|
+
shadow.append(style, layer);
|
|
1223
|
+
} else {
|
|
1224
|
+
decor.innerHTML = DECOR_MARKUP;
|
|
1225
|
+
}
|
|
1226
|
+
hardenDecorGeometry(decor);
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1012
1229
|
function ensureDecor() {
|
|
1013
1230
|
if (typeof document === "undefined") return undefined;
|
|
1014
1231
|
let decor = document.getElementById(DECOR_ID);
|
|
1015
|
-
if (decor instanceof HTMLDivElement)
|
|
1232
|
+
if (decor instanceof HTMLDivElement) {
|
|
1233
|
+
decor.className = DECOR_HOST_CLASS;
|
|
1234
|
+
decor.setAttribute("aria-hidden", "true");
|
|
1235
|
+
decor.dataset.plugin = PLUGIN_ID;
|
|
1236
|
+
hardenDecorHost(decor);
|
|
1237
|
+
populateDecor(decor);
|
|
1238
|
+
return decor;
|
|
1239
|
+
}
|
|
1016
1240
|
decor = document.createElement("div");
|
|
1017
1241
|
decor.id = DECOR_ID;
|
|
1018
|
-
decor.className =
|
|
1242
|
+
decor.className = DECOR_HOST_CLASS;
|
|
1019
1243
|
decor.setAttribute("aria-hidden", "true");
|
|
1020
1244
|
decor.dataset.plugin = PLUGIN_ID;
|
|
1021
|
-
decor
|
|
1022
|
-
|
|
1023
|
-
"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-a\"></span>",
|
|
1024
|
-
"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-b\"></span>",
|
|
1025
|
-
"<span class=\"dsh-skin-twinkle dsh-skin-twinkle-c\"></span>",
|
|
1026
|
-
"<span class=\"dsh-skin-orb dsh-skin-orb-primary\"></span>",
|
|
1027
|
-
"<span class=\"dsh-skin-orb dsh-skin-orb-moon-a\"></span>",
|
|
1028
|
-
"<span class=\"dsh-skin-satellite-orbit\"></span>",
|
|
1029
|
-
"<span class=\"dsh-skin-satellite-orbit-front\"></span>",
|
|
1030
|
-
"<span class=\"dsh-skin-satellite\"></span>",
|
|
1031
|
-
"<span class=\"dsh-skin-scanner\"></span>",
|
|
1032
|
-
"<span class=\"dsh-skin-scanner-target\"></span>",
|
|
1033
|
-
"<span class=\"dsh-skin-route-map\"></span>",
|
|
1034
|
-
"<span class=\"dsh-skin-energy dsh-skin-energy-cyan\"></span>",
|
|
1035
|
-
"<span class=\"dsh-skin-energy dsh-skin-energy-red\"></span>",
|
|
1036
|
-
"<span class=\"dsh-skin-energy dsh-skin-energy-gold\"></span>",
|
|
1037
|
-
"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-1\"></span>",
|
|
1038
|
-
"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-2\"></span>",
|
|
1039
|
-
"<span class=\"dsh-skin-starfighter dsh-skin-starfighter-3\"></span>",
|
|
1040
|
-
"<span class=\"dsh-skin-mission-crawl\"></span>",
|
|
1041
|
-
"<span class=\"dsh-skin-comet dsh-skin-comet-1\"></span>",
|
|
1042
|
-
"<span class=\"dsh-skin-comet dsh-skin-comet-2\"></span>",
|
|
1043
|
-
"<span class=\"dsh-skin-comet dsh-skin-comet-3\"></span>",
|
|
1044
|
-
"<span class=\"dsh-skin-comet dsh-skin-comet-4\"></span>",
|
|
1045
|
-
"<span class=\"dsh-skin-comet dsh-skin-comet-5\"></span>",
|
|
1046
|
-
"<span class=\"dsh-skin-comet dsh-skin-comet-6\"></span>"
|
|
1047
|
-
].join("");
|
|
1245
|
+
hardenDecorHost(decor);
|
|
1246
|
+
populateDecor(decor);
|
|
1048
1247
|
document.body.appendChild(decor);
|
|
1049
1248
|
return decor;
|
|
1050
1249
|
}
|
|
@@ -1110,8 +1309,10 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
|
|
|
1110
1309
|
let inputFocusTimer;
|
|
1111
1310
|
let scannerPingTimer;
|
|
1112
1311
|
let lastHyperspaceAt = 0;
|
|
1113
|
-
const
|
|
1114
|
-
const
|
|
1312
|
+
const decorRoot = getDecorRoot(decor);
|
|
1313
|
+
const decorLayer = getDecorLayer(decor);
|
|
1314
|
+
const scanner = decorRoot?.querySelector?.(".dsh-skin-scanner");
|
|
1315
|
+
const scannerTarget = decorRoot?.querySelector?.(".dsh-skin-scanner-target");
|
|
1115
1316
|
const pulseColors = ["rgba(125,227,255,0.94)", "rgba(255,207,92,0.92)", "rgba(255,71,120,0.88)"];
|
|
1116
1317
|
const updatePointer = () => {
|
|
1117
1318
|
frame = 0;
|
|
@@ -1190,11 +1391,14 @@ body.dsh-skin-galactic-opera .dsh-skin-telemetry-value-full {
|
|
|
1190
1391
|
if (isReducedMotion() || isEditableTarget(event.target)) return;
|
|
1191
1392
|
const pulse = document.createElement("span");
|
|
1192
1393
|
pulse.className = "dsh-skin-pulse";
|
|
1394
|
+
setImportantStyle(pulse, "border-radius", "50%");
|
|
1395
|
+
setImportantStyle(pulse, "box-sizing", "border-box");
|
|
1193
1396
|
pulse.style.setProperty("--dsh-skin-pulse-x", `${event.clientX}px`);
|
|
1194
1397
|
pulse.style.setProperty("--dsh-skin-pulse-y", `${event.clientY}px`);
|
|
1195
1398
|
pulse.style.setProperty("--dsh-skin-pulse-color", pulseColors[pulseIndex % pulseColors.length]);
|
|
1196
1399
|
pulseIndex += 1;
|
|
1197
|
-
|
|
1400
|
+
if (decorLayer instanceof Element) decorLayer.appendChild(pulse);
|
|
1401
|
+
else decor.appendChild(pulse);
|
|
1198
1402
|
const remove = () => { pulse.remove(); };
|
|
1199
1403
|
pulse.addEventListener("animationend", remove, { once: true });
|
|
1200
1404
|
window.setTimeout(remove, 900);
|