yi-map-web 1.0.2 → 1.0.21

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/dist/style.css DELETED
@@ -1,4295 +0,0 @@
1
- /** Mars3D / Cesium 全局样式覆盖 */
2
-
3
- /* cesium 工具按钮栏 */
4
- .cesium-viewer-toolbar {
5
- top: auto !important;
6
- bottom: 35px !important;
7
- left: 12px !important;
8
- right: auto !important;
9
- }
10
-
11
- .cesium-toolbar-button img {
12
- width: 22px;
13
- height: 100%;
14
- }
15
- .cesium-toolbar-button:hover img {
16
- width: 28px;
17
- }
18
- .cesium-svgPath-svg {
19
- transform: scale(0.8);
20
- }
21
- .cesium-svgPath-svg:hover {
22
- transform: scale(1);
23
- }
24
- .cesium-button .cesium-baseLayerPicker-selected {
25
- width: 100%;
26
- }
27
-
28
- .cesium-button:hover .cesium-baseLayerPicker-selected {
29
- width: 100%;
30
- }
31
-
32
- .cesium-viewer-toolbar > .cesium-toolbar-button,
33
- .cesium-navigationHelpButton-wrapper,
34
- .cesium-viewer-geocoderContainer {
35
- margin-bottom: 5px;
36
- float: left;
37
- clear: both;
38
- text-align: center;
39
- }
40
-
41
- .cesium-viewer-geocoderContainer form .cesium-geocoder-input {
42
- border-width: 1px;
43
- border-image: url("//data.mars3d.cn/img/control/border.svg") 1 round stretch;
44
- }
45
-
46
- .cesium-button {
47
- background-color: rgba(39, 44, 54, 0.8);
48
-
49
- border-radius: 2px;
50
- border-width: 1px;
51
- border-image: url("//data.mars3d.cn/img/control/border.svg") 1 round stretch;
52
-
53
- color: #ffffff;
54
- fill: #e6e6e6;
55
- line-height: 38px;
56
- }
57
-
58
- .cesium-button:hover {
59
- background-color: rgba(51, 133, 255, 1);
60
- box-shadow: none;
61
- border: none;
62
- }
63
-
64
- /* cesium 底图切换面板 */
65
- .cesium-baseLayerPicker-dropDown {
66
- bottom: 0;
67
- left: 40px;
68
- max-height: 700px;
69
- margin-bottom: 5px;
70
- background-color: rgba(23, 49, 71, 0.7);
71
- }
72
-
73
- /* cesium 帮助面板 */
74
- .cesium-navigation-help {
75
- top: auto;
76
- bottom: 0;
77
- left: 40px;
78
- transform-origin: left bottom;
79
- background: none;
80
- background-color: rgba(23, 49, 71, 0.8);
81
- }
82
-
83
- .cesium-navigation-help .cesium-navigation-help-instructions,
84
- .cesium-navigation-help .cesium-navigation-button {
85
- background: none;
86
- }
87
-
88
- .cesium-navigation-help .cesium-navigation-button-selected,
89
- .cesium-navigation-help .cesium-navigation-button-unselected:hover {
90
- background-color: rgba(1, 35, 22, 1);
91
- }
92
-
93
- /* cesium 二三维切换 */
94
- .cesium-sceneModePicker-wrapper {
95
- width: auto;
96
- }
97
-
98
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
99
- float: right;
100
- margin: 0 3px;
101
- }
102
-
103
- /* cesium POI查询输入框 */
104
- .cesium-viewer-geocoderContainer .search-results {
105
- left: 0;
106
- right: 40px;
107
- width: auto;
108
- z-index: 9999;
109
- }
110
-
111
- .cesium-geocoder-searchButton {
112
- width: 38px;
113
- height: 38px;
114
- background-color: rgba(39, 44, 54, 0.8);
115
- border-radius: 2px;
116
- border-width: 1px;
117
- border-image: url("//data.mars3d.cn/img/control/border.svg") 1 round stretch;
118
- fill: #e6e6e6;
119
- }
120
-
121
- .cesium-viewer-geocoderContainer .cesium-geocoder-input {
122
- height: 40px;
123
- width: 40px;
124
- background-color: rgba(63, 72, 84, 0.7);
125
- }
126
-
127
- .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
128
- background-color: rgba(63, 72, 84, 0.9);
129
- }
130
-
131
- .cesium-viewer-geocoderContainer .search-results {
132
- background-color: rgba(23, 49, 71, 0.8);
133
- }
134
-
135
- /* cesium info信息框 */
136
- .cesium-infoBox {
137
- top: 50px;
138
- background: rgba(63, 72, 84, 0.9);
139
- }
140
-
141
- .cesium-infoBox-title {
142
- background-color: rgba(23, 49, 71, 0.8);
143
- }
144
-
145
- /* cesium 任务栏的FPS信息 */
146
- .cesium-performanceDisplay-defaultContainer {
147
- top: auto;
148
- bottom: 35px;
149
- right: 50px;
150
- }
151
-
152
- .cesium-performanceDisplay-ms,
153
- .cesium-performanceDisplay-fps {
154
- color: #fff;
155
- }
156
-
157
- /* cesium tileset调试信息面板 */
158
- .cesium-viewer-cesiumInspectorContainer {
159
- top: 10px;
160
- left: 10px;
161
- right: auto;
162
- }
163
-
164
- .cesium-cesiumInspector {
165
- background-color: rgba(63, 72, 84, 0.9);
166
- }
167
-
168
- /* 导航球样式 - 修复白色背景覆盖问题 */
169
- .mars3d-compass {
170
- background: transparent !important;
171
- box-shadow: none !important;
172
- }
173
-
174
- .mars3d-compass .mars3d-compass-outer {
175
- fill: rgba(39, 44, 54, 0.8) !important;
176
- }
177
-
178
- .mars3d-compass .mars3d-compass-inner {
179
- background: rgba(39, 44, 54, 0.8) !important;
180
- fill: #ffffff !important;
181
- }
182
-
183
- .mars3d-compass .mars3d-compass-needle {
184
- fill: #ff6b35 !important;
185
- }
186
-
187
- /* 右键菜单 */
188
- .mars3d-contextmenu-ul,
189
- .mars3d-sub-menu {
190
- background-color: rgba(63, 72, 84, 0.9);
191
- }
192
- .mars3d-contextmenu-ul {
193
- border-radius: 2px;
194
- border-width: 1px;
195
- border-image: url("//data.mars3d.cn/img/control/border.svg") 1 round stretch;
196
- }
197
-
198
- .mars3d-contextmenu-ul > li > a:hover,
199
- .mars3d-sub-menu > li > a:hover,
200
- .mars3d-contextmenu-ul > li > a:focus,
201
- .mars3d-sub-menu > li > a:focus,
202
- .mars3d-contextmenu-ul > li > .active,
203
- .mars3d-sub-menu > li > .active {
204
- background-color: #3ea6ff;
205
- }
206
-
207
- .mars3d-contextmenu-ul > .active > a,
208
- .mars3d-sub-menu > .active > a,
209
- .mars3d-contextmenu-ul > .active > a:hover,
210
- .mars3d-sub-menu > .active > a:hover,
211
- .mars3d-contextmenu-ul > .active > a:focus,
212
- .mars3d-sub-menu > .active > a:focus {
213
- background-color: #3ea6ff;
214
- }
215
-
216
- /* Popup样式 */
217
- .mars3d-popup-color {
218
- color: #ffffff;
219
- }
220
-
221
- .mars3d-popup-background {
222
- background: rgba(63, 72, 84, 0.9);
223
- }
224
-
225
- .mars3d-popup-content {
226
- margin: 15px;
227
- }
228
- .mars3d-popup-btn-custom {
229
- padding: 3px 10px;
230
- border: 1px solid #209ffd;
231
- background: rgba(32, 159, 253, 0.12);
232
- color: #ffffff;
233
- }
234
-
235
- .mars3d-tooltip {
236
- color: #ffffff;
237
- background: rgba(63, 72, 84, 0.9);
238
- border: 1px solid rgba(63, 72, 84, 0.9);
239
- }
240
-
241
- .mars3d-tooltip-top:before {
242
- border-top-color: rgba(23, 49, 71, 0.8);
243
- }
244
-
245
- .mars3d-tooltip-bottom:before {
246
- border-bottom-color: rgba(23, 49, 71, 0.8);
247
- }
248
-
249
- .mars3d-tooltip-left:before {
250
- border-left-color: rgba(23, 49, 71, 0.8);
251
- }
252
-
253
- .mars3d-tooltip-right:before {
254
- border-right-color: rgba(23, 49, 71, 0.8);
255
- }
256
- .mars3d-template-content label {
257
- padding-right: 6px;
258
- }
259
-
260
- /* all 中的html样式 */
261
- .mars3d-template-titile {
262
- height: 33px;
263
- line-height: 33px;
264
- padding-left: 10px;
265
- border-radius: 4px 4px 0px 0px;
266
- box-shadow:
267
- 0px 6px 12px -2px rgba(50, 50, 93, 0.15),
268
- 0px 3px 7px -3px rgba(0, 0, 0, 0.2);
269
- color: #ffffff !important;
270
- background: rgba(23, 49, 71, 0.9);
271
- font-family: system-ui, sans-serif;
272
- }
273
-
274
- .mars3d-template-titile a {
275
- font-size: 16px;
276
- color: #479be0;
277
- text-decoration: none;
278
- }
279
-
280
- .mars3d-template-content {
281
- margin-top: 0 !important;
282
- background-color: rgba(23, 49, 71, 0.9);
283
- padding: 10px;
284
- color: #eaf2ff;
285
- }
286
-
287
- .mars3d-template-content label {
288
- padding-right: 6px;
289
- }
290
-
291
- .mars3d-template-content input {
292
- color: #ffffff;
293
- background-color: transparent !important;
294
- padding: 4px 5px;
295
- }
296
-
297
- .mars3d-template-content input::placeholder {
298
- color: #cdcdcd !important;
299
- }
300
-
301
- .mars3d-template-content textarea {
302
- color: #ffffff;
303
- background-color: transparent !important;
304
- padding: 4px 5px;
305
- }
306
-
307
- .mars3d-template-content textarea::placeholder {
308
- color: #cdcdcd !important;
309
- }
310
-
311
- .mars3d-divGraphic:hover {
312
- z-index: 999 !important;
313
- }
314
-
315
- /* 隐藏Mars3D logo */
316
- .mars3d-logo {
317
- display: none !important;
318
- visibility: hidden !important;
319
- opacity: 0 !important;
320
- pointer-events: none;
321
- }
322
-
323
- /* 状态栏样式 */
324
- .mars3d-widgetContainer {
325
- background: transparent !important;
326
- }
327
- /* packages/widgets/Source/shared.css */
328
- .cesium-svgPath-svg {
329
- position: absolute;
330
- top: 0;
331
- left: 0;
332
- width: 100%;
333
- height: 100%;
334
- overflow: hidden;
335
- }
336
- .cesium-button {
337
- display: inline-block;
338
- position: relative;
339
- background: #303336;
340
- border: 1px solid #444;
341
- color: #edffff;
342
- fill: #edffff;
343
- border-radius: 4px;
344
- padding: 5px 12px;
345
- margin: 2px 3px;
346
- cursor: pointer;
347
- overflow: hidden;
348
- -moz-user-select: none;
349
- -webkit-user-select: none;
350
- -ms-user-select: none;
351
- user-select: none;
352
- }
353
- .cesium-button:focus {
354
- color: #fff;
355
- fill: #fff;
356
- border-color: #ea4;
357
- outline: none;
358
- }
359
- .cesium-button:hover {
360
- color: #fff;
361
- fill: #fff;
362
- background: #48b;
363
- border-color: #aef;
364
- box-shadow: 0 0 8px #fff;
365
- }
366
- .cesium-button:active {
367
- color: #000;
368
- fill: #000;
369
- background: #adf;
370
- border-color: #fff;
371
- box-shadow: 0 0 8px #fff;
372
- }
373
- .cesium-button:disabled,
374
- .cesium-button-disabled,
375
- .cesium-button-disabled:focus,
376
- .cesium-button-disabled:hover,
377
- .cesium-button-disabled:active {
378
- background: #303336;
379
- border-color: #444;
380
- color: #646464;
381
- fill: #646464;
382
- box-shadow: none;
383
- cursor: default;
384
- }
385
- .cesium-button option {
386
- background-color: #000;
387
- color: #eee;
388
- }
389
- .cesium-button option:disabled {
390
- color: #777;
391
- }
392
- .cesium-button input,
393
- .cesium-button label {
394
- cursor: pointer;
395
- }
396
- .cesium-button input {
397
- vertical-align: sub;
398
- }
399
- .cesium-toolbar-button {
400
- box-sizing: border-box;
401
- width: 32px;
402
- height: 32px;
403
- border-radius: 14%;
404
- padding: 0;
405
- vertical-align: middle;
406
- z-index: 0;
407
- }
408
- .cesium-performanceDisplay-defaultContainer {
409
- position: absolute;
410
- top: 50px;
411
- right: 10px;
412
- text-align: right;
413
- }
414
- .cesium-performanceDisplay {
415
- background-color: rgba(40, 40, 40, 0.7);
416
- padding: 7px;
417
- border-radius: 5px;
418
- border: 1px solid #444;
419
- font: bold 12px sans-serif;
420
- }
421
- .cesium-performanceDisplay-fps {
422
- color: #e52;
423
- }
424
- .cesium-performanceDisplay-throttled {
425
- color: #a42;
426
- }
427
- .cesium-performanceDisplay-ms {
428
- color: #de3;
429
- }
430
-
431
- /* packages/widgets/Source/Animation/Animation.css */
432
- .cesium-animation-theme {
433
- visibility: hidden;
434
- display: block;
435
- position: absolute;
436
- z-index: -100;
437
- }
438
- .cesium-animation-themeNormal {
439
- color: #222;
440
- }
441
- .cesium-animation-themeHover {
442
- color: #4488b0;
443
- }
444
- .cesium-animation-themeSelect {
445
- color: #242;
446
- }
447
- .cesium-animation-themeDisabled {
448
- color: #333;
449
- }
450
- .cesium-animation-themeKnob {
451
- color: #222;
452
- }
453
- .cesium-animation-themePointer {
454
- color: #2e2;
455
- }
456
- .cesium-animation-themeSwoosh {
457
- color: #8ac;
458
- }
459
- .cesium-animation-themeSwooshHover {
460
- color: #aef;
461
- }
462
- .cesium-animation-svgText {
463
- fill: #edffff;
464
- font-family: Sans-Serif;
465
- font-size: 15px;
466
- text-anchor: middle;
467
- }
468
- .cesium-animation-blank {
469
- fill: #000;
470
- fill-opacity: 0.01;
471
- stroke: none;
472
- }
473
- .cesium-animation-rectButton {
474
- cursor: pointer;
475
- -moz-user-select: none;
476
- -webkit-user-select: none;
477
- -ms-user-select: none;
478
- user-select: none;
479
- }
480
- .cesium-animation-rectButton .cesium-animation-buttonGlow {
481
- fill: #fff;
482
- stroke: none;
483
- display: none;
484
- }
485
- .cesium-animation-rectButton:hover .cesium-animation-buttonGlow {
486
- display: block;
487
- }
488
- .cesium-animation-rectButton .cesium-animation-buttonPath {
489
- fill: #edffff;
490
- }
491
- .cesium-animation-rectButton .cesium-animation-buttonMain {
492
- stroke: #444;
493
- stroke-width: 1.2;
494
- }
495
- .cesium-animation-rectButton:hover .cesium-animation-buttonMain {
496
- stroke: #aef;
497
- }
498
- .cesium-animation-rectButton:active .cesium-animation-buttonMain {
499
- fill: #abd6ff;
500
- }
501
- .cesium-animation-buttonDisabled {
502
- -moz-user-select: none;
503
- -webkit-user-select: none;
504
- -ms-user-select: none;
505
- user-select: none;
506
- }
507
- .cesium-animation-buttonDisabled .cesium-animation-buttonMain {
508
- stroke: #555;
509
- }
510
- .cesium-animation-buttonDisabled .cesium-animation-buttonPath {
511
- fill: #818181;
512
- }
513
- .cesium-animation-buttonDisabled .cesium-animation-buttonGlow {
514
- display: none;
515
- }
516
- .cesium-animation-buttonToggled .cesium-animation-buttonGlow {
517
- display: block;
518
- fill: #2e2;
519
- }
520
- .cesium-animation-buttonToggled .cesium-animation-buttonMain {
521
- stroke: #2e2;
522
- }
523
- .cesium-animation-buttonToggled:hover .cesium-animation-buttonGlow {
524
- fill: #fff;
525
- }
526
- .cesium-animation-buttonToggled:hover .cesium-animation-buttonMain {
527
- stroke: #2e2;
528
- }
529
- .cesium-animation-shuttleRingG {
530
- cursor: pointer;
531
- }
532
- .cesium-animation-shuttleRingPointer {
533
- cursor: pointer;
534
- }
535
- .cesium-animation-shuttleRingPausePointer {
536
- cursor: pointer;
537
- }
538
- .cesium-animation-shuttleRingBack {
539
- fill: #181818;
540
- fill-opacity: 0.8;
541
- stroke: #333;
542
- stroke-width: 1.2;
543
- }
544
- .cesium-animation-shuttleRingSwoosh line {
545
- stroke: #8ac;
546
- stroke-width: 3;
547
- stroke-opacity: 0.2;
548
- stroke-linecap: round;
549
- }
550
- .cesium-animation-knobOuter {
551
- cursor: pointer;
552
- stroke: #444;
553
- stroke-width: 1.2;
554
- }
555
- .cesium-animation-knobInner {
556
- cursor: pointer;
557
- }
558
-
559
- /* packages/widgets/Source/BaseLayerPicker/BaseLayerPicker.css */
560
- .cesium-baseLayerPicker-selected {
561
- position: absolute;
562
- top: 0;
563
- left: 0;
564
- width: 100%;
565
- height: 100%;
566
- border: none;
567
- }
568
- .cesium-baseLayerPicker-dropDown {
569
- display: block;
570
- position: absolute;
571
- box-sizing: content-box;
572
- top: auto;
573
- right: 0;
574
- width: 320px;
575
- max-height: 500px;
576
- margin-top: 5px;
577
- background-color: rgba(38, 38, 38, 0.75);
578
- border: 1px solid #444;
579
- padding: 6px;
580
- overflow: auto;
581
- border-radius: 10px;
582
- -moz-user-select: none;
583
- -webkit-user-select: none;
584
- -ms-user-select: none;
585
- user-select: none;
586
- transform: translate(0, -20%);
587
- visibility: hidden;
588
- opacity: 0;
589
- transition:
590
- visibility 0s 0.2s,
591
- opacity 0.2s ease-in,
592
- transform 0.2s ease-in;
593
- }
594
- .cesium-baseLayerPicker-dropDown-visible {
595
- transform: translate(0, 0);
596
- visibility: visible;
597
- opacity: 1;
598
- transition: opacity 0.2s ease-out, transform 0.2s ease-out;
599
- }
600
- .cesium-baseLayerPicker-sectionTitle {
601
- display: block;
602
- font-family: sans-serif;
603
- font-size: 16pt;
604
- text-align: left;
605
- color: #edffff;
606
- margin-bottom: 4px;
607
- }
608
- .cesium-baseLayerPicker-choices {
609
- margin-bottom: 5px;
610
- }
611
- .cesium-baseLayerPicker-categoryTitle {
612
- color: #edffff;
613
- font-size: 11pt;
614
- }
615
- .cesium-baseLayerPicker-choices {
616
- display: block;
617
- border: 1px solid #888;
618
- border-radius: 5px;
619
- padding: 5px 0;
620
- }
621
- .cesium-baseLayerPicker-item {
622
- display: inline-block;
623
- vertical-align: top;
624
- margin: 2px 5px;
625
- width: 64px;
626
- text-align: center;
627
- cursor: pointer;
628
- }
629
- .cesium-baseLayerPicker-itemLabel {
630
- display: block;
631
- font-family: sans-serif;
632
- font-size: 8pt;
633
- text-align: center;
634
- vertical-align: middle;
635
- color: #edffff;
636
- cursor: pointer;
637
- word-wrap: break-word;
638
- }
639
- .cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemLabel,
640
- .cesium-baseLayerPicker-item:focus .cesium-baseLayerPicker-itemLabel {
641
- text-decoration: underline;
642
- }
643
- .cesium-baseLayerPicker-itemIcon {
644
- display: inline-block;
645
- position: relative;
646
- width: inherit;
647
- height: auto;
648
- background-size: 100% 100%;
649
- border: solid 1px #444;
650
- border-radius: 9px;
651
- color: #edffff;
652
- margin: 0;
653
- padding: 0;
654
- cursor: pointer;
655
- box-sizing: border-box;
656
- }
657
- .cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemIcon {
658
- border-color: #fff;
659
- box-shadow: 0 0 8px #fff, 0 0 8px #fff;
660
- }
661
- .cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemLabel {
662
- color: rgb(189, 236, 248);
663
- }
664
- .cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemIcon {
665
- border: double 4px rgb(189, 236, 248);
666
- }
667
-
668
- /* packages/engine/Source/Widget/CesiumWidget.css */
669
- .cesium-widget {
670
- font-family: sans-serif;
671
- font-size: 16px;
672
- overflow: hidden;
673
- display: block;
674
- position: relative;
675
- top: 0;
676
- left: 0;
677
- width: 100%;
678
- height: 100%;
679
- }
680
- .cesium-widget,
681
- .cesium-widget canvas {
682
- width: 100%;
683
- height: 100%;
684
- touch-action: none;
685
- }
686
- .cesium-widget-credits {
687
- display: block;
688
- position: absolute;
689
- bottom: 0;
690
- left: 0;
691
- color: #fff;
692
- font-size: 10px;
693
- text-shadow: 0px 0px 2px #000000;
694
- padding-right: 5px;
695
- }
696
- .cesium-widget-errorPanel {
697
- position: absolute;
698
- top: 0;
699
- right: 0;
700
- bottom: 0;
701
- left: 0;
702
- text-align: center;
703
- background: rgba(0, 0, 0, 0.7);
704
- z-index: 99999;
705
- }
706
- .cesium-widget-errorPanel:before {
707
- display: inline-block;
708
- vertical-align: middle;
709
- height: 100%;
710
- content: "";
711
- }
712
- .cesium-widget-errorPanel-content {
713
- width: 75%;
714
- max-width: 500px;
715
- display: inline-block;
716
- text-align: left;
717
- vertical-align: middle;
718
- border: 1px solid #510c00;
719
- border-radius: 7px;
720
- background-color: #f0d9d5;
721
- font-size: 14px;
722
- color: #510c00;
723
- }
724
- .cesium-widget-errorPanel-content.expanded {
725
- max-width: 75%;
726
- }
727
- .cesium-widget-errorPanel-header {
728
- font-size: 18px;
729
- font-family:
730
- "Open Sans",
731
- Verdana,
732
- Geneva,
733
- sans-serif;
734
- background: #d69d93;
735
- border-bottom: 2px solid #510c00;
736
- padding-bottom: 10px;
737
- border-radius: 3px 3px 0 0;
738
- padding: 15px;
739
- }
740
- .cesium-widget-errorPanel-scroll {
741
- overflow: auto;
742
- font-family:
743
- "Open Sans",
744
- Verdana,
745
- Geneva,
746
- sans-serif;
747
- white-space: pre-wrap;
748
- padding: 0 15px;
749
- margin: 10px 0 20px 0;
750
- }
751
- .cesium-widget-errorPanel-buttonPanel {
752
- padding: 0 15px;
753
- margin: 10px 0 20px 0;
754
- text-align: right;
755
- }
756
- .cesium-widget-errorPanel-buttonPanel button {
757
- border-color: #510c00;
758
- background: #d69d93;
759
- color: #202020;
760
- margin: 0;
761
- }
762
- .cesium-widget-errorPanel-buttonPanel button:focus {
763
- border-color: #510c00;
764
- background: #f0d9d5;
765
- color: #510c00;
766
- }
767
- .cesium-widget-errorPanel-buttonPanel button:hover {
768
- border-color: #510c00;
769
- background: #f0d9d5;
770
- color: #510c00;
771
- }
772
- .cesium-widget-errorPanel-buttonPanel button:active {
773
- border-color: #510c00;
774
- background: #b17b72;
775
- color: #510c00;
776
- }
777
- .cesium-widget-errorPanel-more-details {
778
- text-decoration: underline;
779
- cursor: pointer;
780
- }
781
- .cesium-widget-errorPanel-more-details:hover {
782
- color: #2b0700;
783
- }
784
-
785
- /* packages/widgets/Source/CesiumInspector/CesiumInspector.css */
786
- .cesium-cesiumInspector {
787
- border-radius: 5px;
788
- transition: width ease-in-out 0.25s;
789
- background: rgba(48, 51, 54, 0.8);
790
- border: 1px solid #444;
791
- color: #edffff;
792
- display: inline-block;
793
- position: relative;
794
- padding: 4px 12px;
795
- -moz-user-select: none;
796
- -webkit-user-select: none;
797
- -ms-user-select: none;
798
- user-select: none;
799
- overflow: hidden;
800
- }
801
- .cesium-cesiumInspector-button {
802
- text-align: center;
803
- font-size: 11pt;
804
- }
805
- .cesium-cesiumInspector-visible .cesium-cesiumInspector-button {
806
- border-bottom: 1px solid #aaa;
807
- padding-bottom: 3px;
808
- }
809
- .cesium-cesiumInspector input:enabled,
810
- .cesium-cesiumInspector-button {
811
- cursor: pointer;
812
- }
813
- .cesium-cesiumInspector-visible {
814
- width: 185px;
815
- height: auto;
816
- }
817
- .cesium-cesiumInspector-hidden {
818
- width: 122px;
819
- height: 17px;
820
- }
821
- .cesium-cesiumInspector-sectionContent {
822
- max-height: 600px;
823
- }
824
- .cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent {
825
- max-height: 0;
826
- padding: 0 !important;
827
- overflow: hidden;
828
- }
829
- .cesium-cesiumInspector-dropDown {
830
- margin: 5px 0;
831
- font-family: sans-serif;
832
- font-size: 10pt;
833
- width: 185px;
834
- }
835
- .cesium-cesiumInspector-frustumStatistics {
836
- padding-left: 10px;
837
- padding: 5px;
838
- background-color: rgba(80, 80, 80, 0.75);
839
- }
840
- .cesium-cesiumInspector-pickButton {
841
- background-color: rgba(0, 0, 0, 0.3);
842
- border: 1px solid #444;
843
- color: #edffff;
844
- border-radius: 5px;
845
- padding: 3px 7px;
846
- cursor: pointer;
847
- -moz-user-select: none;
848
- -webkit-user-select: none;
849
- -ms-user-select: none;
850
- user-select: none;
851
- margin: 0 auto;
852
- }
853
- .cesium-cesiumInspector-pickButton:focus {
854
- outline: none;
855
- }
856
- .cesium-cesiumInspector-pickButton:active,
857
- .cesium-cesiumInspector-pickButtonHighlight {
858
- color: #000;
859
- background: #adf;
860
- border-color: #fff;
861
- box-shadow: 0 0 8px #fff;
862
- }
863
- .cesium-cesiumInspector-center {
864
- text-align: center;
865
- }
866
- .cesium-cesiumInspector-sectionHeader {
867
- font-weight: bold;
868
- font-size: 10pt;
869
- margin: 0;
870
- cursor: pointer;
871
- }
872
- .cesium-cesiumInspector-pickSection {
873
- border: 1px solid #aaa;
874
- border-radius: 5px;
875
- padding: 3px;
876
- margin-bottom: 5px;
877
- }
878
- .cesium-cesiumInspector-sectionContent {
879
- margin-bottom: 10px;
880
- transition: max-height 0.25s;
881
- }
882
- .cesium-cesiumInspector-tileText {
883
- padding-bottom: 10px;
884
- border-bottom: 1px solid #aaa;
885
- }
886
- .cesium-cesiumInspector-relativeText {
887
- padding-top: 10px;
888
- }
889
- .cesium-cesiumInspector-sectionHeader::before {
890
- margin-right: 5px;
891
- content: "-";
892
- width: 1ch;
893
- display: inline-block;
894
- }
895
- .cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionHeader::before {
896
- content: "+";
897
- }
898
-
899
- /* packages/widgets/Source/Cesium3DTilesInspector/Cesium3DTilesInspector.css */
900
- ul.cesium-cesiumInspector-statistics {
901
- margin: 0;
902
- padding-top: 3px;
903
- padding-bottom: 3px;
904
- }
905
- ul.cesium-cesiumInspector-statistics + ul.cesium-cesiumInspector-statistics {
906
- border-top: 1px solid #aaa;
907
- }
908
- .cesium-cesiumInspector-slider {
909
- margin-top: 5px;
910
- }
911
- .cesium-cesiumInspector-slider input[type=number] {
912
- text-align: left;
913
- background-color: #222;
914
- outline: none;
915
- border: 1px solid #444;
916
- color: #edffff;
917
- width: 100px;
918
- border-radius: 3px;
919
- padding: 1px;
920
- margin-left: 10px;
921
- cursor: auto;
922
- }
923
- .cesium-cesiumInspector-slider input[type=number]::-webkit-outer-spin-button,
924
- .cesium-cesiumInspector-slider input[type=number]::-webkit-inner-spin-button {
925
- -webkit-appearance: none;
926
- margin: 0;
927
- }
928
- .cesium-cesiumInspector-slider input[type=range] {
929
- margin-left: 5px;
930
- vertical-align: middle;
931
- }
932
- .cesium-cesiumInspector-hide .cesium-cesiumInspector-styleEditor {
933
- display: none;
934
- }
935
- .cesium-cesiumInspector-styleEditor {
936
- padding: 10px;
937
- border-radius: 5px;
938
- background: rgba(48, 51, 54, 0.8);
939
- border: 1px solid #444;
940
- }
941
- .cesium-cesiumInspector-styleEditor textarea {
942
- width: 100%;
943
- height: 300px;
944
- background: transparent;
945
- color: #edffff;
946
- border: none;
947
- padding: 0;
948
- white-space: pre;
949
- overflow-wrap: normal;
950
- overflow-x: auto;
951
- }
952
- .cesium-3DTilesInspector {
953
- width: 300px;
954
- pointer-events: all;
955
- }
956
- .cesium-3DTilesInspector-statistics {
957
- font-size: 11px;
958
- }
959
- .cesium-3DTilesInspector-disabledElementsInfo {
960
- margin: 5px 0 0 0;
961
- padding: 0 0 0 20px;
962
- color: #eed202;
963
- }
964
- .cesium-3DTilesInspector div,
965
- .cesium-3DTilesInspector input[type=range] {
966
- width: 100%;
967
- box-sizing: border-box;
968
- }
969
- .cesium-cesiumInspector-error {
970
- color: #ff9e9e;
971
- overflow: auto;
972
- }
973
- .cesium-3DTilesInspector .cesium-cesiumInspector-section {
974
- margin-top: 3px;
975
- }
976
- .cesium-3DTilesInspector .cesium-cesiumInspector-sectionHeader + .cesium-cesiumInspector-show {
977
- border-top: 1px solid white;
978
- }
979
- input.cesium-cesiumInspector-url {
980
- overflow: hidden;
981
- white-space: nowrap;
982
- overflow-x: scroll;
983
- background-color: transparent;
984
- color: white;
985
- outline: none;
986
- border: none;
987
- height: 1em;
988
- width: 100%;
989
- }
990
- .cesium-cesiumInspector .field-group {
991
- display: table;
992
- }
993
- .cesium-cesiumInspector .field-group > label {
994
- display: table-cell;
995
- font-weight: bold;
996
- }
997
- .cesium-cesiumInspector .field-group > .field {
998
- display: table-cell;
999
- width: 100%;
1000
- }
1001
-
1002
- /* packages/widgets/Source/VoxelInspector/VoxelInspector.css */
1003
- .cesium-VoxelInspector {
1004
- width: 300px;
1005
- pointer-events: all;
1006
- }
1007
- .cesium-VoxelInspector div,
1008
- .cesium-VoxelInspector input[type=range] {
1009
- width: 100%;
1010
- box-sizing: border-box;
1011
- }
1012
- .cesium-VoxelInspector .cesium-cesiumInspector-section {
1013
- margin-top: 3px;
1014
- }
1015
- .cesium-VoxelInspector .cesium-cesiumInspector-sectionHeader + .cesium-cesiumInspector-show {
1016
- border-top: 1px solid white;
1017
- }
1018
-
1019
- /* packages/widgets/Source/FullscreenButton/FullscreenButton.css */
1020
- .cesium-button.cesium-fullscreenButton {
1021
- display: block;
1022
- width: 100%;
1023
- height: 100%;
1024
- margin: 0;
1025
- border-radius: 0;
1026
- }
1027
-
1028
- /* packages/widgets/Source/VRButton/VRButton.css */
1029
- .cesium-button.cesium-vrButton {
1030
- display: block;
1031
- width: 100%;
1032
- height: 100%;
1033
- margin: 0;
1034
- border-radius: 0;
1035
- }
1036
-
1037
- /* packages/widgets/Source/Geocoder/Geocoder.css */
1038
- .cesium-viewer-geocoderContainer .cesium-geocoder-input {
1039
- border: solid 1px #444;
1040
- background-color: rgba(40, 40, 40, 0.7);
1041
- color: white;
1042
- display: inline-block;
1043
- vertical-align: middle;
1044
- width: 0;
1045
- height: 32px;
1046
- margin: 0;
1047
- padding: 0 32px 0 0;
1048
- border-radius: 0;
1049
- box-sizing: border-box;
1050
- transition: width ease-in-out 0.25s, background-color 0.2s ease-in-out;
1051
- -webkit-appearance: none;
1052
- }
1053
- .cesium-viewer-geocoderContainer:hover .cesium-geocoder-input {
1054
- border-color: #aef;
1055
- box-shadow: 0 0 8px #fff;
1056
- }
1057
- .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
1058
- border-color: #ea4;
1059
- background-color: rgba(15, 15, 15, 0.9);
1060
- box-shadow: none;
1061
- outline: none;
1062
- }
1063
- .cesium-viewer-geocoderContainer:hover .cesium-geocoder-input,
1064
- .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus,
1065
- .cesium-viewer-geocoderContainer .cesium-geocoder-input-wide {
1066
- padding-left: 4px;
1067
- width: 250px;
1068
- }
1069
- .cesium-viewer-geocoderContainer .search-results {
1070
- position: absolute;
1071
- background-color: #000;
1072
- color: #eee;
1073
- overflow-y: auto;
1074
- opacity: 0.8;
1075
- width: 100%;
1076
- }
1077
- .cesium-viewer-geocoderContainer .search-results ul {
1078
- list-style-type: none;
1079
- margin: 0;
1080
- padding: 0;
1081
- }
1082
- .cesium-viewer-geocoderContainer .search-results ul li {
1083
- font-size: 14px;
1084
- padding: 3px 10px;
1085
- }
1086
- .cesium-viewer-geocoderContainer .search-results ul li:hover {
1087
- cursor: pointer;
1088
- }
1089
- .cesium-viewer-geocoderContainer .search-results ul li.active {
1090
- background: #48b;
1091
- }
1092
- .cesium-geocoder-searchButton {
1093
- background-color: #303336;
1094
- display: inline-block;
1095
- position: absolute;
1096
- cursor: pointer;
1097
- width: 32px;
1098
- top: 1px;
1099
- right: 1px;
1100
- height: 30px;
1101
- vertical-align: middle;
1102
- fill: #edffff;
1103
- }
1104
- .cesium-geocoder-searchButton:hover {
1105
- background-color: #48b;
1106
- }
1107
-
1108
- /* packages/widgets/Source/InfoBox/InfoBox.css */
1109
- .cesium-infoBox {
1110
- display: block;
1111
- position: absolute;
1112
- top: 50px;
1113
- right: 0;
1114
- width: 40%;
1115
- max-width: 480px;
1116
- background: rgba(38, 38, 38, 0.95);
1117
- color: #edffff;
1118
- border: 1px solid #444;
1119
- border-right: none;
1120
- border-top-left-radius: 7px;
1121
- border-bottom-left-radius: 7px;
1122
- box-shadow: 0 0 10px 1px #000;
1123
- transform: translate(100%, 0);
1124
- visibility: hidden;
1125
- opacity: 0;
1126
- transition:
1127
- visibility 0s 0.2s,
1128
- opacity 0.2s ease-in,
1129
- transform 0.2s ease-in;
1130
- }
1131
- .cesium-infoBox-visible {
1132
- transform: translate(0, 0);
1133
- visibility: visible;
1134
- opacity: 1;
1135
- transition: opacity 0.2s ease-out, transform 0.2s ease-out;
1136
- }
1137
- .cesium-infoBox-title {
1138
- display: block;
1139
- height: 20px;
1140
- padding: 5px 30px 5px 25px;
1141
- background: rgba(84, 84, 84, 1);
1142
- border-top-left-radius: 7px;
1143
- text-align: center;
1144
- text-overflow: ellipsis;
1145
- white-space: nowrap;
1146
- overflow: hidden;
1147
- box-sizing: content-box;
1148
- }
1149
- .cesium-infoBox-bodyless .cesium-infoBox-title {
1150
- border-bottom-left-radius: 7px;
1151
- }
1152
- button.cesium-infoBox-camera {
1153
- display: block;
1154
- position: absolute;
1155
- top: 4px;
1156
- left: 4px;
1157
- width: 22px;
1158
- height: 22px;
1159
- background: transparent;
1160
- border-color: transparent;
1161
- border-radius: 3px;
1162
- padding: 0 5px;
1163
- margin: 0;
1164
- }
1165
- button.cesium-infoBox-close {
1166
- display: block;
1167
- position: absolute;
1168
- top: 5px;
1169
- right: 5px;
1170
- height: 20px;
1171
- background: transparent;
1172
- border: none;
1173
- border-radius: 2px;
1174
- font-weight: bold;
1175
- font-size: 16px;
1176
- padding: 0 5px;
1177
- margin: 0;
1178
- color: #edffff;
1179
- }
1180
- button.cesium-infoBox-close:focus {
1181
- background: rgba(238, 136, 0, 0.44);
1182
- outline: none;
1183
- }
1184
- button.cesium-infoBox-close:hover {
1185
- background: #888;
1186
- color: #000;
1187
- }
1188
- button.cesium-infoBox-close:active {
1189
- background: #a00;
1190
- color: #000;
1191
- }
1192
- .cesium-infoBox-bodyless .cesium-infoBox-iframe {
1193
- display: none;
1194
- }
1195
- .cesium-infoBox-iframe {
1196
- border: none;
1197
- width: 100%;
1198
- width: calc(100% - 2px);
1199
- }
1200
-
1201
- /* packages/widgets/Source/SceneModePicker/SceneModePicker.css */
1202
- span.cesium-sceneModePicker-wrapper {
1203
- display: inline-block;
1204
- position: relative;
1205
- margin: 0 3px;
1206
- }
1207
- .cesium-sceneModePicker-visible {
1208
- visibility: visible;
1209
- opacity: 1;
1210
- transition: opacity 0.25s linear;
1211
- }
1212
- .cesium-sceneModePicker-hidden {
1213
- visibility: hidden;
1214
- opacity: 0;
1215
- transition: visibility 0s 0.25s, opacity 0.25s linear;
1216
- }
1217
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-none {
1218
- display: none;
1219
- }
1220
- .cesium-sceneModePicker-slide-svg {
1221
- transition: left 2s;
1222
- top: 0;
1223
- left: 0;
1224
- }
1225
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
1226
- box-sizing: border-box;
1227
- padding: 0;
1228
- margin: 3px 0;
1229
- }
1230
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D,
1231
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView,
1232
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D {
1233
- margin: 0 0 3px 0;
1234
- }
1235
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D .cesium-sceneModePicker-icon2D {
1236
- left: 100%;
1237
- }
1238
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D .cesium-sceneModePicker-iconColumbusView {
1239
- left: 200%;
1240
- }
1241
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView .cesium-sceneModePicker-icon3D {
1242
- left: -200%;
1243
- }
1244
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView .cesium-sceneModePicker-icon2D {
1245
- left: -100%;
1246
- }
1247
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D .cesium-sceneModePicker-icon3D {
1248
- left: -100%;
1249
- }
1250
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D .cesium-sceneModePicker-iconColumbusView {
1251
- left: 100%;
1252
- }
1253
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-selected {
1254
- border-color: #2e2;
1255
- box-shadow: 0 0 8px #fff, 0 0 8px #fff;
1256
- }
1257
-
1258
- /* packages/widgets/Source/ProjectionPicker/ProjectionPicker.css */
1259
- span.cesium-projectionPicker-wrapper {
1260
- display: inline-block;
1261
- position: relative;
1262
- margin: 0 3px;
1263
- }
1264
- .cesium-projectionPicker-visible {
1265
- visibility: visible;
1266
- opacity: 1;
1267
- transition: opacity 0.25s linear;
1268
- }
1269
- .cesium-projectionPicker-hidden {
1270
- visibility: hidden;
1271
- opacity: 0;
1272
- transition: visibility 0s 0.25s, opacity 0.25s linear;
1273
- }
1274
- .cesium-projectionPicker-wrapper .cesium-projectionPicker-none {
1275
- display: none;
1276
- }
1277
- .cesium-projectionPicker-wrapper .cesium-projectionPicker-dropDown-icon {
1278
- box-sizing: border-box;
1279
- padding: 0;
1280
- margin: 3px 0;
1281
- }
1282
- .cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective,
1283
- .cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic {
1284
- margin: 0 0 3px 0;
1285
- }
1286
- .cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective .cesium-projectionPicker-iconOrthographic {
1287
- left: 100%;
1288
- }
1289
- .cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic .cesium-projectionPicker-iconPerspective {
1290
- left: -100%;
1291
- }
1292
- .cesium-projectionPicker-wrapper .cesium-projectionPicker-selected {
1293
- border-color: #2e2;
1294
- box-shadow: 0 0 8px #fff, 0 0 8px #fff;
1295
- }
1296
-
1297
- /* packages/widgets/Source/PerformanceWatchdog/PerformanceWatchdog.css */
1298
- .cesium-performance-watchdog-message-area {
1299
- position: relative;
1300
- background-color: yellow;
1301
- color: black;
1302
- padding: 10px;
1303
- }
1304
- .cesium-performance-watchdog-message {
1305
- margin-right: 30px;
1306
- }
1307
- .cesium-performance-watchdog-message-dismiss {
1308
- position: absolute;
1309
- right: 0;
1310
- margin: 0 10px 0 0;
1311
- }
1312
-
1313
- /* packages/widgets/Source/NavigationHelpButton/NavigationHelpButton.css */
1314
- .cesium-navigationHelpButton-wrapper {
1315
- position: relative;
1316
- display: inline-block;
1317
- }
1318
- .cesium-navigation-help {
1319
- visibility: hidden;
1320
- position: absolute;
1321
- top: 38px;
1322
- right: 2px;
1323
- width: 250px;
1324
- border-radius: 10px;
1325
- transform: scale(0.01);
1326
- transform-origin: 234px -10px;
1327
- transition: visibility 0s 0.25s, transform 0.25s ease-in;
1328
- }
1329
- .cesium-navigation-help-visible {
1330
- visibility: visible;
1331
- transform: scale(1);
1332
- transition: transform 0.25s ease-out;
1333
- }
1334
- .cesium-navigation-help-instructions {
1335
- border: 1px solid #444;
1336
- background-color: rgba(38, 38, 38, 0.75);
1337
- padding-bottom: 5px;
1338
- border-radius: 0 0 10px 10px;
1339
- }
1340
- .cesium-click-navigation-help {
1341
- display: none;
1342
- }
1343
- .cesium-touch-navigation-help {
1344
- display: none;
1345
- padding-top: 5px;
1346
- }
1347
- .cesium-click-navigation-help-visible {
1348
- display: block;
1349
- }
1350
- .cesium-touch-navigation-help-visible {
1351
- display: block;
1352
- }
1353
- .cesium-navigation-help-pan {
1354
- color: #66ccff;
1355
- font-weight: bold;
1356
- }
1357
- .cesium-navigation-help-zoom {
1358
- color: #65fd00;
1359
- font-weight: bold;
1360
- }
1361
- .cesium-navigation-help-rotate {
1362
- color: #ffd800;
1363
- font-weight: bold;
1364
- }
1365
- .cesium-navigation-help-tilt {
1366
- color: #d800d8;
1367
- font-weight: bold;
1368
- }
1369
- .cesium-navigation-help-details {
1370
- color: #ffffff;
1371
- }
1372
- .cesium-navigation-button {
1373
- color: #fff;
1374
- background-color: transparent;
1375
- border-bottom: none;
1376
- border-top: 1px solid #444;
1377
- border-right: 1px solid #444;
1378
- margin: 0;
1379
- width: 50%;
1380
- cursor: pointer;
1381
- }
1382
- .cesium-navigation-button-icon {
1383
- vertical-align: middle;
1384
- padding: 5px 1px;
1385
- }
1386
- .cesium-navigation-button:focus {
1387
- outline: none;
1388
- }
1389
- .cesium-navigation-button-left {
1390
- border-radius: 10px 0 0 0;
1391
- border-left: 1px solid #444;
1392
- }
1393
- .cesium-navigation-button-right {
1394
- border-radius: 0 10px 0 0;
1395
- border-left: none;
1396
- }
1397
- .cesium-navigation-button-selected {
1398
- background-color: rgba(38, 38, 38, 0.75);
1399
- }
1400
- .cesium-navigation-button-unselected {
1401
- background-color: rgba(0, 0, 0, 0.75);
1402
- }
1403
- .cesium-navigation-button-unselected:hover {
1404
- background-color: rgba(76, 76, 76, 0.75);
1405
- }
1406
-
1407
- /* packages/widgets/Source/SelectionIndicator/SelectionIndicator.css */
1408
- .cesium-selection-wrapper {
1409
- position: absolute;
1410
- width: 160px;
1411
- height: 160px;
1412
- pointer-events: none;
1413
- visibility: hidden;
1414
- opacity: 0;
1415
- transition: visibility 0s 0.2s, opacity 0.2s ease-in;
1416
- }
1417
- .cesium-selection-wrapper-visible {
1418
- visibility: visible;
1419
- opacity: 1;
1420
- transition: opacity 0.2s ease-out;
1421
- }
1422
- .cesium-selection-wrapper svg {
1423
- fill: #2e2;
1424
- stroke: #000;
1425
- stroke-width: 1.1px;
1426
- }
1427
-
1428
- /* packages/widgets/Source/Timeline/Timeline.css */
1429
- .cesium-timeline-main {
1430
- position: relative;
1431
- left: 0;
1432
- bottom: 0;
1433
- overflow: hidden;
1434
- border: solid 1px #888;
1435
- -moz-user-select: none;
1436
- -webkit-user-select: none;
1437
- -ms-user-select: none;
1438
- user-select: none;
1439
- }
1440
- .cesium-timeline-trackContainer {
1441
- width: 100%;
1442
- overflow: auto;
1443
- border-top: solid 1px #888;
1444
- position: relative;
1445
- top: 0;
1446
- left: 0;
1447
- }
1448
- .cesium-timeline-tracks {
1449
- position: absolute;
1450
- top: 0;
1451
- left: 0;
1452
- width: 100%;
1453
- }
1454
- .cesium-timeline-needle {
1455
- position: absolute;
1456
- left: 0;
1457
- top: 1.7em;
1458
- bottom: 0;
1459
- width: 1px;
1460
- background: #f00;
1461
- }
1462
- .cesium-timeline-bar {
1463
- position: relative;
1464
- left: 0;
1465
- top: 0;
1466
- overflow: hidden;
1467
- cursor: pointer;
1468
- width: 100%;
1469
- height: 1.7em;
1470
- background:
1471
- linear-gradient(
1472
- to bottom,
1473
- rgba(116, 117, 119, 0.8) 0%,
1474
- rgba(58, 68, 82, 0.8) 11%,
1475
- rgba(46, 50, 56, 0.8) 46%,
1476
- rgba(53, 53, 53, 0.8) 81%,
1477
- rgba(53, 53, 53, 0.8) 100%);
1478
- }
1479
- .cesium-timeline-ruler {
1480
- visibility: hidden;
1481
- white-space: nowrap;
1482
- font-size: 80%;
1483
- z-index: -200;
1484
- }
1485
- .cesium-timeline-highlight {
1486
- position: absolute;
1487
- bottom: 0;
1488
- left: 0;
1489
- background: #08f;
1490
- }
1491
- .cesium-timeline-ticLabel {
1492
- position: absolute;
1493
- top: 0;
1494
- left: 0;
1495
- white-space: nowrap;
1496
- font-size: 80%;
1497
- color: #eee;
1498
- }
1499
- .cesium-timeline-ticMain {
1500
- position: absolute;
1501
- bottom: 0;
1502
- left: 0;
1503
- width: 1px;
1504
- height: 50%;
1505
- background: #eee;
1506
- }
1507
- .cesium-timeline-ticSub {
1508
- position: absolute;
1509
- bottom: 0;
1510
- left: 0;
1511
- width: 1px;
1512
- height: 33%;
1513
- background: #aaa;
1514
- }
1515
- .cesium-timeline-ticTiny {
1516
- position: absolute;
1517
- bottom: 0;
1518
- left: 0;
1519
- width: 1px;
1520
- height: 25%;
1521
- background: #888;
1522
- }
1523
- .cesium-timeline-icon16 {
1524
- display: block;
1525
- position: absolute;
1526
- width: 16px;
1527
- height: 16px;
1528
- background-image: url(data:text/plain;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sIDBITKIVzLEMAAAKNSURBVEjHxdXNSxRhHAfw7zzrqhuoWJnSkrippUVSEKsHI9BTUYdAJA/RoYMREV26rAdn6tAfUARi16hQqkOBQRgUEYFWEC3OwczMjdZd92VmdWfmeelgTjO7q7gb0VzmmZnn85vvPPPMM8B/3qTcE2PPpuTZKB1eWuUQACgXYACYwVFbCTTVeZXB/i55o4LFelcAZfStYD4vpAoPGAGo4GBcQEgSOAUMQyAezwK6iQfDPXnhS/FkHZ+/8VLMWxxqWkfH3gbMRNOYi2roavbja0zHQmoFPYf8ED4Ko4aivm9MOG/u9I8mwrafeK7a/tVrNc/bARYN5noadeq7q0342vXw9CIMU6BmW8rVP9cPBPe52uu+v3O/y9sB4gkTWs6Qsk0mj5ExXMelejvA8WafYmkmGPHanTijdtvif8rx5RiCjdWKs2Cp3jWRDl96KhrbqlBeJqBOLyLQXg0IgbkZDS0dO8EZxZfPSTA9jvDDK3mT0OmP1FXh3XwEEAKdTX5MRWLgjCK4pwH3xt/YnjgLHAv4lHTCAKMMu/wV+KZGob6PoKyMQ0+sgBpZVJZn0NterxQaVqef/DRn+/EXYds/mZx2eVeAW9d65dhCEsaKCb7K8HH0gqTevyh9GDkn0VULRiaLzJKGBu9swfdaiie5RVo9ESURN8E8BE0n7ggACJy8KzghSCzp6DmwWxkaCm24EBXr8wI8Hrkq06QBiRC0t24HALS11IBTCyJl4vb1AXmzpbVYTwoVOXN0h7L8Mwtm8bXPybIQ/5FCX3dA2cr6XowvGCA02CvztAnz9+JiZk1AMxG6fEreSoBiPNmoyNnuWiWVzAIAtISO08E6pZi/3N96AIDn4E3h3P8L/wshP+txtEs4JAAAAABJRU5ErkJggg==);
1529
- background-repeat: no-repeat;
1530
- }
1531
-
1532
- /* packages/widgets/Source/Viewer/Viewer.css */
1533
- .cesium-viewer {
1534
- font-family: sans-serif;
1535
- font-size: 16px;
1536
- overflow: hidden;
1537
- display: block;
1538
- position: relative;
1539
- top: 0;
1540
- left: 0;
1541
- width: 100%;
1542
- height: 100%;
1543
- }
1544
- .cesium-viewer-cesiumWidgetContainer {
1545
- width: 100%;
1546
- height: 100%;
1547
- }
1548
- .cesium-viewer-bottom {
1549
- display: block;
1550
- position: absolute;
1551
- bottom: 0;
1552
- left: 0;
1553
- padding-right: 5px;
1554
- }
1555
- .cesium-viewer .cesium-widget-credits {
1556
- display: inline;
1557
- position: static;
1558
- bottom: auto;
1559
- left: auto;
1560
- padding-right: 0;
1561
- color: #ffffff;
1562
- font-size: 10px;
1563
- text-shadow: 0 0 2px #000000;
1564
- }
1565
- .cesium-viewer-timelineContainer {
1566
- position: absolute;
1567
- bottom: 0;
1568
- left: 169px;
1569
- right: 29px;
1570
- height: 27px;
1571
- padding: 0;
1572
- margin: 0;
1573
- overflow: hidden;
1574
- font-size: 14px;
1575
- }
1576
- .cesium-viewer-animationContainer {
1577
- position: absolute;
1578
- bottom: 0;
1579
- left: 0;
1580
- padding: 0;
1581
- width: 169px;
1582
- height: 112px;
1583
- }
1584
- .cesium-viewer-fullscreenContainer {
1585
- position: absolute;
1586
- bottom: 0;
1587
- right: 0;
1588
- padding: 0;
1589
- width: 29px;
1590
- height: 29px;
1591
- overflow: hidden;
1592
- }
1593
- .cesium-viewer-vrContainer {
1594
- position: absolute;
1595
- bottom: 0;
1596
- right: 0;
1597
- padding: 0;
1598
- width: 29px;
1599
- height: 29px;
1600
- overflow: hidden;
1601
- }
1602
- .cesium-viewer-toolbar {
1603
- display: block;
1604
- position: absolute;
1605
- top: 5px;
1606
- right: 5px;
1607
- }
1608
- .cesium-viewer-cesiumInspectorContainer {
1609
- display: block;
1610
- position: absolute;
1611
- top: 50px;
1612
- right: 10px;
1613
- }
1614
- .cesium-viewer-geocoderContainer {
1615
- position: relative;
1616
- display: inline-block;
1617
- margin: 0 3px;
1618
- }
1619
- .cesium-viewer-cesium3DTilesInspectorContainer {
1620
- display: block;
1621
- position: absolute;
1622
- top: 50px;
1623
- right: 10px;
1624
- max-height: calc(100% - 120px);
1625
- box-sizing: border-box;
1626
- overflow-y: auto;
1627
- overflow-x: hidden;
1628
- }
1629
- .cesium-viewer-voxelInspectorContainer {
1630
- display: block;
1631
- position: absolute;
1632
- top: 50px;
1633
- right: 10px;
1634
- max-height: calc(100% - 120px);
1635
- box-sizing: border-box;
1636
- overflow-y: auto;
1637
- overflow-x: hidden;
1638
- }
1639
-
1640
- /* packages/widgets/Source/I3SBuildingSceneLayerExplorer/I3SBuildingSceneLayerExplorer.css */
1641
- .cesium-viewer-i3s-explorer ul {
1642
- list-style-type: none;
1643
- }
1644
- .cesium-viewer-i3s-explorer .layersList {
1645
- padding: 0;
1646
- }
1647
- .cesium-viewer-i3s-explorer input {
1648
- margin: 0 3px 0 0;
1649
- }
1650
- .cesium-viewer-i3s-explorer .expandItem {
1651
- cursor: pointer;
1652
- user-select: none;
1653
- width: 20px;
1654
- }
1655
- .cesium-viewer-i3s-explorer .nested,
1656
- .cesium-viewer-i3s-explorer #bsl-wrapper {
1657
- display: none;
1658
- }
1659
- .cesium-viewer-i3s-explorer .active {
1660
- display: block;
1661
- }
1662
- .cesium-viewer-i3s-explorer .li-wrapper {
1663
- display: flex;
1664
- flex-direction: row;
1665
- align-content: center;
1666
- }
1667
-
1668
- /* packages/widgets/Source/widgets.css */
1669
- /**
1670
- * Mars3D三维可视化平台 mars3d
1671
- *
1672
- * 版本信息:v3.11.2
1673
- * 编译日期:2026-04-08 16:12
1674
- * 版权所有:Copyright by http://mars3d.cn
1675
- * 使用单位:免费公开版 ,2026-02-01
1676
- */
1677
-
1678
- /**地球容器div*/
1679
- .mars3d-container {
1680
- width: 100%;
1681
- height: 100%;
1682
- margin: 0;
1683
- padding: 0;
1684
- overflow: hidden;
1685
- position: relative;
1686
- }
1687
- .mars3d-container .cesium-widget-credits {
1688
- display: none;
1689
- }
1690
- .mars3d-container .mars3d-vrButton {
1691
- right: auto !important;
1692
- }
1693
- /**隐藏的div对象,如 DivBillboardEntity、HeatLayer 等*/
1694
- .mars3d-hideDiv {
1695
- z-index: -99;
1696
- top: 0;
1697
- left: 0;
1698
- margin: 0;
1699
- padding: 0;
1700
- pointer-events: none;
1701
- }
1702
- /**右键菜单*/
1703
- .mars3d-contextmenu {
1704
- position: absolute;
1705
- padding: 0;
1706
- z-index: 20170825;
1707
- display: none;
1708
- }
1709
- .mars3d-contextmenu-ul {
1710
- background: rgba(43, 44, 47, 0.8);
1711
- border: 1px solid #2b2c2f;
1712
- border-radius: 2px;
1713
- border-width: 1px;
1714
- min-width: 80px;
1715
- position: relative;
1716
- list-style: none;
1717
- margin: 0;
1718
- padding: 0;
1719
- }
1720
- .mars3d-contextmenu-ul .mars3d-contextmenu-icon {
1721
- position: absolute;
1722
- left: 5px;
1723
- width: 20px;
1724
- height: 20px;
1725
- text-align: center;
1726
- overflow: hidden;
1727
- }
1728
- .mars3d-contextmenu-ul .mars3d-contextmenu-arrow {
1729
- position: absolute;
1730
- right: 0;
1731
- width: 20px;
1732
- height: 20px;
1733
- text-align: center;
1734
- }
1735
- .mars3d-contextmenu-ul li + li {
1736
- margin: 0;
1737
- padding: 0;
1738
- position: relative;
1739
- }
1740
- .mars3d-contextmenu-ul li + li:before {
1741
- content: "";
1742
- display: block;
1743
- height: 1px;
1744
- width: 100%;
1745
- background: -webkit-linear-gradient(to left, transparent, rgba(255, 255, 255, 0.2), transparent);
1746
- background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.2), transparent);
1747
- position: absolute;
1748
- top: 0;
1749
- left: 0;
1750
- }
1751
- .mars3d-contextmenu-ul .mars3d-contextmenu-item ::marker {
1752
- content: "";
1753
- }
1754
- .mars3d-contextmenu-ul .mars3d-contextmenu-line {
1755
- position: absolute;
1756
- left: 2%;
1757
- height: 1px;
1758
- width: 96%;
1759
- background: #597086;
1760
- border-radius: 2px;
1761
- border-width: 1px;
1762
- }
1763
- .mars3d-contextmenu-ul > li > a {
1764
- padding: 6px 10px 6px 30px;
1765
- -webkit-transition: background-color 0.25s;
1766
- -o-transition: background-color 0.25s;
1767
- transition: background-color 0.25s;
1768
- display: block;
1769
- clear: both;
1770
- line-height: 22px;
1771
- color: #76838f;
1772
- white-space: nowrap;
1773
- color: #edffff;
1774
- text-decoration: none;
1775
- }
1776
- .mars3d-contextmenu-ul > li > a:hover,
1777
- .mars3d-contextmenu-ul > li > a:focus,
1778
- .mars3d-contextmenu-ul > li > .active {
1779
- color: #fff;
1780
- background-color: #444d59;
1781
- text-decoration: none;
1782
- }
1783
- .mars3d-contextmenu-ul > .active > a,
1784
- .mars3d-contextmenu-ul > .active > a:hover,
1785
- .mars3d-contextmenu-ul > .active > a:focus {
1786
- color: #fff;
1787
- background-color: var(--mars-hover-color, #3ea6ff);
1788
- text-decoration: none;
1789
- }
1790
- .mars3d-sub-menu {
1791
- position: absolute;
1792
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
1793
- min-width: 100px;
1794
- display: none;
1795
- }
1796
- .mars3d-sub-menu li {
1797
- width: 100%;
1798
- box-sizing: border-box;
1799
- font-size: 14px;
1800
- color: var(--mars-text-color, #ffffff);
1801
- margin: 0;
1802
- padding: 0;
1803
- }
1804
- .mars3d-sub-menu li:hover {
1805
- background-color: var(--mars-hover-color, #3ea6ff);
1806
- }
1807
- .mars3d-smallTooltip {
1808
- display: block;
1809
- position: absolute;
1810
- max-width: 200px;
1811
- min-width: 100px;
1812
- padding: 2px 5px;
1813
- font-size: 11px;
1814
- z-index: 20170825;
1815
- opacity: 0.8;
1816
- -khtml-opacity: 0.8;
1817
- -moz-opacity: 0.8;
1818
- filter: alpha(opacity=80);
1819
- pointer-events: none;
1820
- }
1821
- .mars3d-smallTooltip-inner {
1822
- padding: 3px 5px;
1823
- background-color: rgba(0, 0, 0, 0.8);
1824
- color: white;
1825
- text-align: left;
1826
- max-width: 200px;
1827
- text-decoration: none;
1828
- -webkit-border-radius: 4px;
1829
- -moz-border-radius: 4px;
1830
- border-radius: 4px;
1831
- }
1832
- .mars3d-smallTooltip-inner p {
1833
- margin: 0;
1834
- }
1835
- .mars3d-smallTooltip-arrow {
1836
- position: absolute;
1837
- width: 0;
1838
- height: 0;
1839
- top: 50%;
1840
- }
1841
- .mars3d-smallTooltip-leftArrow {
1842
- right: 0;
1843
- margin-top: -5px;
1844
- border-top: 5px solid transparent;
1845
- border-bottom: 5px solid transparent;
1846
- border-left: 5px solid #000000;
1847
- }
1848
- .mars3d-smallTooltip-rightArrow {
1849
- left: 0;
1850
- margin-top: -5px;
1851
- border-top: 5px solid transparent;
1852
- border-bottom: 5px solid transparent;
1853
- border-right: 5px solid #000000;
1854
- }
1855
- .mars3d-clockAnimate {
1856
- z-index: 12;
1857
- position: absolute;
1858
- bottom: 0;
1859
- left: 0;
1860
- height: 27px;
1861
- background: linear-gradient(to bottom, rgba(116, 117, 119, 0.8) 0%, rgba(58, 68, 82, 0.8) 11%, rgba(46, 50, 56, 0.8) 46%, rgba(53, 53, 53, 0.8) 81%, rgba(53, 53, 53, 0.8) 100%);
1862
- }
1863
- .mars3d-clockAnimate .time {
1864
- margin: 0 4px;
1865
- font-size: 13px;
1866
- -webkit-user-select: none;
1867
- -moz-user-select: none;
1868
- -ms-user-select: none;
1869
- user-select: none;
1870
- }
1871
- .mars3d-clockAnimate .mars3d-clockAnimate-btn {
1872
- display: inline-block;
1873
- vertical-align: middle;
1874
- padding: 1px 8px;
1875
- border: solid 1px #888;
1876
- color: var(--mars-text-color, #ffffff);
1877
- background-color: rgba(63, 72, 84, 0.7);
1878
- border: none;
1879
- cursor: pointer;
1880
- width: 24px;
1881
- }
1882
- .mars3d-clockAnimate .mars3d-clockAnimate-btn svg {
1883
- margin-top: 1px;
1884
- }
1885
- .mars3d-clockAnimate .mars3d-clockAnimate-speed {
1886
- width: 80px;
1887
- height: 24px;
1888
- border: solid 1px rgba(136, 136, 136, 0.6);
1889
- padding: 0 3px;
1890
- margin: 0;
1891
- color: var(--mars-text-color, #ffffff);
1892
- background-color: rgba(63, 72, 84, 0.7);
1893
- }
1894
- .mars3d-clockAnimate .mars3d-clockAnimate-speed ::-webkit-outer-spin-button,
1895
- .mars3d-clockAnimate .mars3d-clockAnimate-speed input::-webkit-inner-spin-button {
1896
- appearance: none !important;
1897
- margin: 0;
1898
- }
1899
- .mars3d-compass {
1900
- position: absolute;
1901
- cursor: pointer;
1902
- pointer-events: auto;
1903
- user-select: none;
1904
- width: 55px;
1905
- height: 55px;
1906
- }
1907
- .mars3d-compass .mars3d-compass-outer {
1908
- position: absolute;
1909
- top: 0;
1910
- left: 0;
1911
- height: 55px;
1912
- width: 55px;
1913
- background-repeat: no-repeat;
1914
- background-size: contain;
1915
- fill: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
1916
- border-radius: 50%;
1917
- }
1918
- .mars3d-compass .mars3d-compass-outer svg {
1919
- height: 55px;
1920
- width: 55px;
1921
- }
1922
- .mars3d-compass .mars3d-compass-inner {
1923
- position: relative;
1924
- top: 50%;
1925
- transform: translateY(-50%);
1926
- height: 25px;
1927
- width: 25px;
1928
- border-radius: 50%;
1929
- display: block;
1930
- margin: 0 auto;
1931
- padding: 4px;
1932
- box-sizing: border-box;
1933
- background: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
1934
- fill: var(--mars-text-color, #ffffff);
1935
- }
1936
- .mars3d-compass .mars3d-compass-inner:hover {
1937
- background: #3385ff;
1938
- }
1939
- .mars3d-compass .mars3d-compass-rotation-arc {
1940
- position: absolute;
1941
- top: 2px;
1942
- left: 2px;
1943
- height: 51px;
1944
- width: 51px;
1945
- border-radius: 50%;
1946
- background-repeat: no-repeat;
1947
- background-size: contain;
1948
- }
1949
- .mars3d-cubeview {
1950
- position: absolute;
1951
- width: 100px;
1952
- height: 100px;
1953
- }
1954
- .mars3d-cubeview-cube {
1955
- width: 50%;
1956
- height: 50%;
1957
- top: 25%;
1958
- transform-style: preserve-3d;
1959
- margin: auto;
1960
- position: relative;
1961
- will-change: transform;
1962
- font-family: monospace;
1963
- font-weight: bold;
1964
- }
1965
- .mars3d-cubeview-cube > div {
1966
- display: flex;
1967
- justify-content: center;
1968
- align-items: center;
1969
- position: absolute;
1970
- width: 100%;
1971
- height: 100%;
1972
- user-select: none;
1973
- cursor: pointer;
1974
- color: var(--mars-text-color, #ffffff);
1975
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
1976
- border: 1px solid var(--mars-text-color, #ffffff);
1977
- }
1978
- .mars3d-cubeview-cube > div:hover {
1979
- background: #3385ff;
1980
- }
1981
- .mars3d-cubeview-side-t {
1982
- transform: rotatex(90deg) translateZ(25px);
1983
- }
1984
- .mars3d-cubeview-side-w {
1985
- transform: rotateY(-90deg) translateZ(25px);
1986
- border-right: 2px solid blue !important;
1987
- border-bottom: 2px solid green !important;
1988
- }
1989
- .mars3d-cubeview-side-s {
1990
- border-left: 2px solid blue !important;
1991
- border-bottom: 2px solid red !important;
1992
- transform: translateZ(25px);
1993
- }
1994
- .mars3d-cubeview-side-e {
1995
- transform: rotateY(90deg) translateZ(25px);
1996
- }
1997
- .mars3d-cubeview-side-n {
1998
- transform: rotateY(180deg) translateZ(25px);
1999
- }
2000
- .mars3d-cubeview-side-b {
2001
- transform: rotateX(-90deg) translateZ(25px);
2002
- border-top: 2px solid red !important;
2003
- border-left: 2px solid green !important;
2004
- }
2005
- .mars3d-distance-legend {
2006
- z-index: 11;
2007
- position: absolute;
2008
- width: 125px;
2009
- height: 25px;
2010
- pointer-events: none;
2011
- user-select: none;
2012
- }
2013
- .mars3d-distance-legend .legend-label {
2014
- font-size: 13px;
2015
- color: #ffffff;
2016
- text-align: center;
2017
- width: 100%;
2018
- }
2019
- .mars3d-distance-legend .legend-scale-bar {
2020
- position: absolute;
2021
- height: 10px;
2022
- top: 10px;
2023
- border-left: 1px solid #ffffff;
2024
- border-right: 1px solid #ffffff;
2025
- border-bottom: 1px solid #ffffff;
2026
- }
2027
- /**左下角,鼠标经纬度提示*/
2028
- .mars3d-locationbar {
2029
- z-index: 10;
2030
- position: absolute;
2031
- padding: 3px 10px;
2032
- font-size: 13px;
2033
- color: #e9e9e9;
2034
- background-color: rgba(0, 0, 0, 0.4);
2035
- min-height: 26px;
2036
- pointer-events: none;
2037
- }
2038
- .mars3d-locationbar-content {
2039
- float: right;
2040
- }
2041
- .mars3d-locationbar-content > div {
2042
- float: left;
2043
- margin-right: 20px;
2044
- }
2045
- .cesium-performanceDisplay-ms,
2046
- .cesium-performanceDisplay-fps {
2047
- min-width: 65px;
2048
- }
2049
- /* 兼容屏幕大小 美观显示不同信息 */
2050
- @media screen and (max-width: 1200px) {
2051
- .mars3d-locationbar-content > div {
2052
- margin-right: 15px;
2053
- }
2054
- }
2055
- @media screen and (max-width: 1000px) {
2056
- .cesium-performanceDisplay-ms,
2057
- .cesium-performanceDisplay-fps,
2058
- .mars3d-locationbar-content > .hide1000 {
2059
- display: none !important;
2060
- }
2061
- .mars3d-locationbar-content > div {
2062
- margin-right: 10px;
2063
- }
2064
- }
2065
- @media screen and (max-width: 700px) {
2066
- .mars3d-locationbar-content > .hide700 {
2067
- display: none !important;
2068
- }
2069
- }
2070
- @media screen and (max-width: 600px) {
2071
- .mars3d-locationbar {
2072
- display: none !important;
2073
- }
2074
- }
2075
- .mars3d-slider {
2076
- position: absolute;
2077
- left: 50%;
2078
- top: 0px;
2079
- background-color: #d3d3d3;
2080
- width: 3px;
2081
- height: 100%;
2082
- z-index: 9999;
2083
- }
2084
- .mars3d-slider .slider-splitter {
2085
- position: absolute;
2086
- left: -15px;
2087
- top: calc(50% - 15px);
2088
- width: 30px;
2089
- height: 30px;
2090
- background: #f0eeee;
2091
- border-radius: 50%;
2092
- text-align: center;
2093
- line-height: 40px;
2094
- padding: 2px;
2095
- border: 1px solid lightgrey;
2096
- z-index: 99999;
2097
- }
2098
- .mars3d-slider .slider-splitter:hover {
2099
- cursor: ew-resize;
2100
- }
2101
- .mars3d-mapCompare {
2102
- position: absolute;
2103
- right: 0px;
2104
- top: 0px;
2105
- bottom: 0px;
2106
- width: 50%;
2107
- height: 100%;
2108
- margin: 0;
2109
- padding: 0;
2110
- }
2111
- /**滚轮样式*/
2112
- .mars3d-mousedownview {
2113
- position: absolute;
2114
- top: 0px;
2115
- left: 0px;
2116
- width: 40px;
2117
- height: 40px;
2118
- margin-top: -23px;
2119
- /*图片高度的一半*/
2120
- margin-left: -23px;
2121
- pointer-events: none;
2122
- visibility: hidden;
2123
- opacity: 0;
2124
- -webkit-transition: visibility 0s 0.2s, opacity 0.2s ease-in;
2125
- -moz-transition: visibility 0s 0.2s, opacity 0.2s ease-in;
2126
- transition: visibility 0s 0.2s, opacity 0.2s ease-in;
2127
- }
2128
- .mars3d-mousedownview-img {
2129
- width: 36px;
2130
- height: 36px;
2131
- background-image: url(data:image/png;base64,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);
2132
- background-size: 100% 100%;
2133
- }
2134
- .mars3d-mousedownview-show {
2135
- visibility: visible;
2136
- opacity: 1;
2137
- -webkit-transition: opacity 0.2s ease-out;
2138
- -moz-transition: opacity 0.2s ease-out;
2139
- transition: opacity 0.2s ease-out;
2140
- }
2141
- .mars3d-overviewMap {
2142
- position: absolute;
2143
- user-select: none;
2144
- width: 200px;
2145
- height: 150px;
2146
- overflow: hidden;
2147
- border: 1px solid orange;
2148
- box-shadow: 2px 2px 3px #2b2b2b;
2149
- }
2150
- .mars3d-subtitles {
2151
- position: absolute;
2152
- user-select: none;
2153
- overflow: hidden;
2154
- padding: 10px;
2155
- font-size: 30px;
2156
- font-weight: bold;
2157
- letter-spacing: 2px;
2158
- text-align: center;
2159
- z-index: 999;
2160
- }
2161
- .mar3d-toolButton img,
2162
- .mar3d-toolButton svg,
2163
- .mar3d-toolButton div {
2164
- height: 100%;
2165
- text-align: center;
2166
- }
2167
- .mars3d-divGraphic {
2168
- position: absolute;
2169
- left: 0;
2170
- top: 0;
2171
- }
2172
- .mars3d-divGraphic:hover {
2173
- z-index: 9999 !important;
2174
- }
2175
- .mars3d-divGraphic-edit {
2176
- background-color: rgba(254, 87, 161, 0.1);
2177
- border: 2px dashed rgba(172, 85, 59, 0.768);
2178
- -webkit-border-radius: 2px;
2179
- border-radius: 2px;
2180
- margin: -2px;
2181
- box-sizing: content-box;
2182
- }
2183
- /**内置的DivGraphic通用样式【文本动态边框】*/
2184
- .mars3d-divBoderLabel {
2185
- position: absolute;
2186
- left: 0px;
2187
- bottom: 0px;
2188
- cursor: pointer;
2189
- --animation-name: mars3d-divBoderLabel-animation;
2190
- --text-left-position: -75px;
2191
- }
2192
- @keyframes mars3d-divBoderLabel-animation {
2193
- 0%,
2194
- 100% {
2195
- clip: rect(0px, var(--clip-width-1), 2px, 0px);
2196
- }
2197
- 25% {
2198
- clip: rect(0px, 2px, var(--clip-height-1), 0px);
2199
- }
2200
- 50% {
2201
- clip: rect(var(--clip-height-2), var(--clip-width-1), var(--clip-width-1), 0px);
2202
- }
2203
- 75% {
2204
- clip: rect(0px, var(--clip-width-1), var(--clip-height-1), var(--clip-width-2));
2205
- }
2206
- }
2207
- .mars3d-divBoderLabel-boder {
2208
- width: var(--boder-width);
2209
- height: var(--boder-height);
2210
- margin: auto;
2211
- color: var(--border-color);
2212
- box-shadow: inset 0 0 0 1px var(--box-shadow-color);
2213
- }
2214
- .mars3d-divBoderLabel-text {
2215
- color: var(--text-color);
2216
- font-size: var(--text-font-size);
2217
- display: flex;
2218
- width: 100%;
2219
- height: 100%;
2220
- align-items: center;
2221
- justify-content: center;
2222
- font-weight: bolder;
2223
- user-select: none;
2224
- cursor: pointer;
2225
- }
2226
- .mars3d-divBoderLabel-boder,
2227
- .mars3d-divBoderLabel-boder::before,
2228
- .mars3d-divBoderLabel-boder::after {
2229
- position: absolute;
2230
- top: 0;
2231
- bottom: 0;
2232
- left: 0;
2233
- right: 0;
2234
- }
2235
- .mars3d-divBoderLabel-boder::before,
2236
- .mars3d-divBoderLabel-boder::after {
2237
- content: "";
2238
- margin: -5%;
2239
- box-shadow: inset 0 0 0 2px;
2240
- animation: var(--animation-name) 8s linear infinite;
2241
- }
2242
- .mars3d-divBoderLabel-boder::before {
2243
- animation-delay: -4s;
2244
- }
2245
- .mars3d-animation-point,
2246
- .mars3d-animation-point:after,
2247
- .mars3d-animation-point:before,
2248
- .mars3d-animation-point p,
2249
- .mars3d-animation-point p:after,
2250
- .mars3d-animation-point p:before {
2251
- margin: 0;
2252
- padding: 0;
2253
- -webkit-box-sizing: border-box;
2254
- -moz-box-sizing: border-box;
2255
- -o-box-sizing: border-box;
2256
- -ms-box-sizing: border-box;
2257
- box-sizing: border-box;
2258
- }
2259
- .mars3d-animation-point {
2260
- width: 10px;
2261
- height: 10px;
2262
- border-radius: 50%;
2263
- border: 1px solid hsla(0, 0%, 100%, 0.5);
2264
- cursor: pointer;
2265
- color: #0ff;
2266
- background: currentColor;
2267
- z-index: 3;
2268
- left: 50%;
2269
- top: 50%;
2270
- -webkit-transform: translate(-50%, -50%);
2271
- -moz-transform: translate(-50%, -50%);
2272
- -o-transform: translate(-50%, -50%);
2273
- -ms-transform: translate(-50%, -50%);
2274
- transform: translate(-50%, -50%);
2275
- box-shadow: 0 0 2em currentColor, 0 0 0.5em currentColor;
2276
- position: absolute;
2277
- }
2278
- .mars3d-animation-point .mars3d-animation-point-lbl {
2279
- position: absolute;
2280
- transform: translate(-50%, -120%);
2281
- left: 50%;
2282
- font-size: 16px;
2283
- width: fit-content;
2284
- white-space: nowrap;
2285
- }
2286
- .mars3d-animation-point p {
2287
- position: absolute;
2288
- left: 50%;
2289
- top: 50%;
2290
- width: 0;
2291
- height: 0;
2292
- border-radius: 50%;
2293
- -webkit-transform: translate(-50%, -50%);
2294
- -moz-transform: translate(-50%, -50%);
2295
- -o-transform: translate(-50%, -50%);
2296
- -ms-transform: translate(-50%, -50%);
2297
- transform: translate(-50%, -50%);
2298
- -webkit-animation: mars3d-animation-point-mapAni 2s ease infinite;
2299
- -moz-animation: mars3d-animation-point-mapAni 2s ease infinite;
2300
- -o-animation: mars3d-animation-point-mapAni 2s ease infinite;
2301
- -ms-animation: mars3d-animation-point-mapAni 2s ease infinite;
2302
- animation: mars3d-animation-point-mapAni 2s ease infinite;
2303
- }
2304
- .mars3d-animation-point .mapError {
2305
- color: red;
2306
- }
2307
- .mars3d-animation-point .mapWarn {
2308
- color: #b5a603;
2309
- }
2310
- .mars3d-animation-point .mapSuccess {
2311
- color: #239233;
2312
- }
2313
- .mars3d-animation-point .mapOrange {
2314
- color: #8c4d34;
2315
- }
2316
- .mars3d-animation-point:after,
2317
- .mars3d-animation-point:before,
2318
- .mars3d-animation-point p:after,
2319
- .mars3d-animation-point p:before {
2320
- content: "";
2321
- position: absolute;
2322
- width: 100%;
2323
- height: 100%;
2324
- left: 50%;
2325
- top: 50%;
2326
- border-radius: 50%;
2327
- -webkit-transform: translate(-50%, -50%);
2328
- -moz-transform: translate(-50%, -50%);
2329
- -o-transform: translate(-50%, -50%);
2330
- -ms-transform: translate(-50%, -50%);
2331
- transform: translate(-50%, -50%);
2332
- }
2333
- .mars3d-animation-point:after,
2334
- .mars3d-animation-point:before {
2335
- border: 1px solid;
2336
- -webkit-animation: mars3d-animation-point-mapAni 1s ease infinite;
2337
- -moz-animation: mars3d-animation-point-mapAni 1s ease infinite;
2338
- -o-animation: mars3d-animation-point-mapAni 1s ease infinite;
2339
- -ms-animation: mars3d-animation-point-mapAni 1s ease infinite;
2340
- animation: mars3d-animation-point-mapAni 1s ease infinite;
2341
- }
2342
- .mars3d-animation-point p:before {
2343
- border: 1px solid;
2344
- }
2345
- @-webkit-keyframes mars3d-animation-point-mapAni {
2346
- 0% {
2347
- width: 0;
2348
- height: 0;
2349
- opacity: 1;
2350
- filter: alpha(opacity=1);
2351
- }
2352
- 25% {
2353
- width: 120%;
2354
- height: 120%;
2355
- opacity: 0.7;
2356
- filter: alpha(opacity=70);
2357
- }
2358
- 50% {
2359
- width: 200%;
2360
- height: 200%;
2361
- opacity: 0.5;
2362
- filter: alpha(opacity=50);
2363
- }
2364
- 75% {
2365
- width: 300%;
2366
- height: 300%;
2367
- opacity: 0.2;
2368
- filter: alpha(opacity=20);
2369
- }
2370
- to {
2371
- width: 400%;
2372
- height: 400%;
2373
- opacity: 0;
2374
- filter: alpha(opacity=0);
2375
- }
2376
- }
2377
- @-moz-keyframes mars3d-animation-point-mapAni {
2378
- 0% {
2379
- width: 0;
2380
- height: 0;
2381
- opacity: 1;
2382
- filter: alpha(opacity=1);
2383
- }
2384
- 25% {
2385
- width: 120%;
2386
- height: 120%;
2387
- opacity: 0.7;
2388
- filter: alpha(opacity=70);
2389
- }
2390
- 50% {
2391
- width: 200%;
2392
- height: 200%;
2393
- opacity: 0.5;
2394
- filter: alpha(opacity=50);
2395
- }
2396
- 75% {
2397
- width: 300%;
2398
- height: 300%;
2399
- opacity: 0.2;
2400
- filter: alpha(opacity=20);
2401
- }
2402
- to {
2403
- width: 400%;
2404
- height: 400%;
2405
- opacity: 0;
2406
- filter: alpha(opacity=0);
2407
- }
2408
- }
2409
- @-o-keyframes mars3d-animation-point-mapAni {
2410
- 0% {
2411
- width: 0;
2412
- height: 0;
2413
- opacity: 1;
2414
- filter: alpha(opacity=1);
2415
- }
2416
- 25% {
2417
- width: 120%;
2418
- height: 120%;
2419
- opacity: 0.7;
2420
- filter: alpha(opacity=70);
2421
- }
2422
- 50% {
2423
- width: 200%;
2424
- height: 200%;
2425
- opacity: 0.5;
2426
- filter: alpha(opacity=50);
2427
- }
2428
- 75% {
2429
- width: 300%;
2430
- height: 300%;
2431
- opacity: 0.2;
2432
- filter: alpha(opacity=20);
2433
- }
2434
- to {
2435
- width: 400%;
2436
- height: 400%;
2437
- opacity: 0;
2438
- filter: alpha(opacity=0);
2439
- }
2440
- }
2441
- @-ms-keyframes mars3d-animation-point-mapAni {
2442
- 0% {
2443
- width: 0;
2444
- height: 0;
2445
- opacity: 1;
2446
- filter: alpha(opacity=1);
2447
- }
2448
- 25% {
2449
- width: 120%;
2450
- height: 120%;
2451
- opacity: 0.7;
2452
- filter: alpha(opacity=70);
2453
- }
2454
- 50% {
2455
- width: 200%;
2456
- height: 200%;
2457
- opacity: 0.5;
2458
- filter: alpha(opacity=50);
2459
- }
2460
- 75% {
2461
- width: 300%;
2462
- height: 300%;
2463
- opacity: 0.2;
2464
- filter: alpha(opacity=20);
2465
- }
2466
- to {
2467
- width: 400%;
2468
- height: 400%;
2469
- opacity: 0;
2470
- filter: alpha(opacity=0);
2471
- }
2472
- }
2473
- @keyframes mars3d-animation-point-mapAni {
2474
- 0% {
2475
- width: 0;
2476
- height: 0;
2477
- opacity: 1;
2478
- filter: alpha(opacity=1);
2479
- }
2480
- 25% {
2481
- width: 120%;
2482
- height: 120%;
2483
- opacity: 0.7;
2484
- filter: alpha(opacity=70);
2485
- }
2486
- 50% {
2487
- width: 200%;
2488
- height: 200%;
2489
- opacity: 0.5;
2490
- filter: alpha(opacity=50);
2491
- }
2492
- 75% {
2493
- width: 300%;
2494
- height: 300%;
2495
- opacity: 0.2;
2496
- filter: alpha(opacity=20);
2497
- }
2498
- to {
2499
- width: 400%;
2500
- height: 400%;
2501
- opacity: 0;
2502
- filter: alpha(opacity=0);
2503
- }
2504
- }
2505
- .mars3d-divUpLabel {
2506
- text-align: center;
2507
- background: transparent;
2508
- color: white;
2509
- display: block;
2510
- box-sizing: border-box;
2511
- animation-duration: 1s;
2512
- animation-fill-mode: both;
2513
- animation-name: mars3d-divUpLabel-tinUpIn;
2514
- }
2515
- .mars3d-divUpLabel-text {
2516
- writing-mode: vertical-lr;
2517
- font-size: 16px;
2518
- letter-spacing: 4px;
2519
- }
2520
- .mars3d-divUpLabel-line {
2521
- display: block;
2522
- height: 100px;
2523
- width: 1.5px;
2524
- margin-left: calc(50% - 1px);
2525
- margin-top: 3px;
2526
- background-color: white;
2527
- }
2528
- @keyframes mars3d-divUpLabel-tinUpIn {
2529
- 0% {
2530
- opacity: 0;
2531
- transform: scale(1, 1) translateY(-900%);
2532
- }
2533
- 50%,
2534
- 70%,
2535
- 90% {
2536
- opacity: 1;
2537
- transform: scale(1.1, 1.1) translateY(0);
2538
- }
2539
- 100%,
2540
- 60%,
2541
- 80% {
2542
- opacity: 1;
2543
- transform: scale(1, 1) translateY(0);
2544
- }
2545
- }
2546
- /*****popup弹出框样式******/
2547
- .mars3d-popup {
2548
- -webkit-user-select: auto;
2549
- -moz-user-select: auto;
2550
- -ms-user-select: auto;
2551
- user-select: auto;
2552
- }
2553
- .mars3d-popup-close-button {
2554
- position: absolute;
2555
- top: 0;
2556
- right: 0;
2557
- padding: 4px 4px 0 0;
2558
- text-align: center;
2559
- width: 20px;
2560
- height: 20px;
2561
- font: 16px/14px Tahoma, Verdana, sans-serif;
2562
- text-decoration: none;
2563
- font-weight: bold;
2564
- background: transparent;
2565
- z-index: 20170825;
2566
- cursor: pointer;
2567
- }
2568
- .mars3d-popup-content-wrapper {
2569
- text-align: center;
2570
- box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
2571
- padding: 1px;
2572
- text-align: left;
2573
- border-radius: 3px;
2574
- }
2575
- .mars3d-popup-content {
2576
- margin: 10px;
2577
- font-size: 13px;
2578
- max-width: 700px;
2579
- min-width: 50px;
2580
- max-height: 550px;
2581
- overflow-y: auto;
2582
- }
2583
- .mars3d-popup-tip-container {
2584
- margin: 0 auto;
2585
- width: 40px;
2586
- height: 17px;
2587
- position: relative;
2588
- overflow: hidden;
2589
- }
2590
- .mars3d-popup-tip {
2591
- box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
2592
- width: 17px;
2593
- height: 17px;
2594
- padding: 1px;
2595
- margin: -10px auto 0;
2596
- -webkit-transform: rotate(45deg);
2597
- -moz-transform: rotate(45deg);
2598
- -ms-transform: rotate(45deg);
2599
- -o-transform: rotate(45deg);
2600
- transform: rotate(45deg);
2601
- }
2602
- .mars3d-popup-scrolled {
2603
- overflow: auto;
2604
- border-bottom: 1px solid #ddd;
2605
- border-top: 1px solid #ddd;
2606
- }
2607
- .mars3d-popup-color {
2608
- color: var(--mars-text-color, #ffffff);
2609
- }
2610
- .mars3d-popup-background {
2611
- background: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2612
- }
2613
- .mars3d-popup-animation {
2614
- animation-duration: 0.3s;
2615
- animation-fill-mode: both;
2616
- animation-name: mars3d-popup-swashIn;
2617
- }
2618
- @keyframes mars3d-popup-swashIn {
2619
- 0% {
2620
- opacity: 0;
2621
- transform-origin: 50% 50%;
2622
- transform: scale(0, 0);
2623
- }
2624
- 90% {
2625
- opacity: 1;
2626
- transform-origin: 50% 50%;
2627
- transform: scale(0.9, 0.9);
2628
- }
2629
- 100% {
2630
- opacity: 1;
2631
- transform-origin: 50% 50%;
2632
- transform: scale(1, 1);
2633
- }
2634
- }
2635
- .mars3d-popup-btn {
2636
- padding: 3px 10px;
2637
- border: 1px solid #209ffd;
2638
- background: #209ffd1c;
2639
- }
2640
- /* all 中的html样式 */
2641
- .mars3d-template-title {
2642
- height: 33px;
2643
- line-height: 33px;
2644
- padding: 0 10px 0 10px;
2645
- font-size: 16px;
2646
- color: var(--mars-text-color, #ffffff);
2647
- border-bottom: 1px solid var(--mars-hover-color, #3ea6ff);
2648
- overflow: hidden;
2649
- }
2650
- .mars3d-template-title a {
2651
- color: var(--mars-msg-title-color, #479be0);
2652
- text-decoration: none;
2653
- }
2654
- .mars3d-template-content {
2655
- min-width: 150px;
2656
- margin-top: 0px;
2657
- padding: 10px;
2658
- color: var(--mars-text-color, #ffffff);
2659
- font-size: 14px;
2660
- max-height: 490px;
2661
- overflow-y: auto;
2662
- }
2663
- .mars3d-template-content > div {
2664
- margin-top: 5px;
2665
- }
2666
- .mars3d-template-content label {
2667
- margin: 0 10px;
2668
- padding-right: 6px;
2669
- min-width: 55px;
2670
- float: left;
2671
- }
2672
- .mars3d-template-content input {
2673
- color: var(--mars-text-color, #ffffff);
2674
- background-color: transparent;
2675
- padding: 4px 5px;
2676
- border-width: 1px;
2677
- border-style: solid;
2678
- }
2679
- .mars3d-template-content input::placeholder {
2680
- color: #cdcdcd;
2681
- }
2682
- .mars3d-template-content textarea {
2683
- color: var(--mars-text-color, #ffffff);
2684
- background-color: transparent;
2685
- padding: 4px 5px;
2686
- border-width: 1px;
2687
- border-style: solid;
2688
- height: 60px;
2689
- resize: none;
2690
- }
2691
- .mars3d-template-content textarea::placeholder {
2692
- color: #cdcdcd;
2693
- }
2694
- .mars3d-popup-iframe {
2695
- overflow: auto;
2696
- margin: 0;
2697
- }
2698
- /*****tooltip弹出框样式******/
2699
- .mars3d-tooltip {
2700
- padding: 6px;
2701
- white-space: nowrap;
2702
- -webkit-user-select: none;
2703
- -moz-user-select: none;
2704
- -ms-user-select: none;
2705
- user-select: none;
2706
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
2707
- max-width: 700px;
2708
- min-width: 50px;
2709
- max-height: 550px;
2710
- color: var(--mars-text-color, #ffffff);
2711
- background: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2712
- border: 1px solid var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2713
- }
2714
- .mars3d-tooltip-top:before,
2715
- .mars3d-tooltip-bottom:before,
2716
- .mars3d-tooltip-left:before,
2717
- .mars3d-tooltip-right:before {
2718
- position: absolute;
2719
- pointer-events: none;
2720
- border: 6px solid transparent;
2721
- background: transparent;
2722
- content: "";
2723
- }
2724
- .mars3d-tooltip-top:before {
2725
- border-top-color: var(--mars-base-bg, rgba(23, 49, 71, 0.8));
2726
- }
2727
- .mars3d-tooltip-bottom:before {
2728
- border-bottom-color: var(--mars-base-bg, rgba(23, 49, 71, 0.8));
2729
- }
2730
- .mars3d-tooltip-left:before {
2731
- border-left-color: var(--mars-base-bg, rgba(23, 49, 71, 0.8));
2732
- }
2733
- .mars3d-tooltip-right:before {
2734
- border-right-color: var(--mars-base-bg, rgba(23, 49, 71, 0.8));
2735
- }
2736
- /* Directions */
2737
- .mars3d-tooltip-bottom {
2738
- margin-top: 6px;
2739
- }
2740
- .mars3d-tooltip-top {
2741
- margin-top: -6px;
2742
- }
2743
- .mars3d-tooltip-bottom:before,
2744
- .mars3d-tooltip-top:before {
2745
- left: 50%;
2746
- margin-left: -6px;
2747
- }
2748
- .mars3d-tooltip-top:before {
2749
- bottom: 0;
2750
- margin-bottom: -12px;
2751
- border-top-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2752
- }
2753
- .mars3d-tooltip-bottom:before {
2754
- top: 0;
2755
- margin-top: -6px;
2756
- margin-left: -6px;
2757
- border-bottom-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2758
- }
2759
- .mars3d-tooltip-left {
2760
- margin-left: -6px;
2761
- }
2762
- .mars3d-tooltip-right {
2763
- margin-left: 6px;
2764
- }
2765
- .mars3d-tooltip-left:before,
2766
- .mars3d-tooltip-right:before {
2767
- top: 50%;
2768
- margin-top: -6px;
2769
- }
2770
- .mars3d-tooltip-left:before {
2771
- right: 0;
2772
- margin-right: -12px;
2773
- border-left-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2774
- }
2775
- .mars3d-tooltip-right:before {
2776
- left: 0;
2777
- margin-left: -6px;
2778
- border-right-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2779
- }
2780
- .mars3d-divlayer-camera {
2781
- backface-visibility: hidden;
2782
- }
2783
- /** 覆盖cesium 控件相关样式 */
2784
- /**cesium info信息框*/
2785
- .cesium-infoBox {
2786
- background: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2787
- }
2788
- .cesium-infoBox-title {
2789
- background-color: rgba(23, 49, 71, 0.8);
2790
- }
2791
- /**cesium 任务栏的FPS信息*/
2792
- .cesium-performanceDisplay-defaultContainer .cesium-performanceDisplay-ms,
2793
- .cesium-performanceDisplay-defaultContainer .cesium-performanceDisplay-fps {
2794
- color: #fff;
2795
- }
2796
- /**cesium tileset调试信息面板*/
2797
- .cesium-cesiumInspector {
2798
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2799
- }
2800
- /**animation时间面板*/
2801
- .cesium-viewer-animationContainer {
2802
- z-index: 12;
2803
- }
2804
- /** 按钮工具栏 */
2805
- .cesium-viewer-toolbar {
2806
- /** 按钮统一样式 */
2807
- /**底图切换 弹出面板*/
2808
- /**帮助 弹出面板*/
2809
- /**POI查询输入框*/
2810
- }
2811
- .cesium-viewer-toolbar .cesium-button {
2812
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2813
- border-radius: 2px;
2814
- border-width: 1px;
2815
- color: var(--mars-text-color, #ffffff);
2816
- fill: #e6e6e6;
2817
- line-height: 32px;
2818
- text-align: center;
2819
- cursor: pointer;
2820
- }
2821
- .cesium-viewer-toolbar .cesium-button:hover {
2822
- background-color: #3385ff;
2823
- box-shadow: none;
2824
- border: none;
2825
- }
2826
- .cesium-viewer-toolbar .cesium-button img,
2827
- .cesium-viewer-toolbar .cesium-button svg,
2828
- .cesium-viewer-toolbar .cesium-button div,
2829
- .cesium-viewer-toolbar .cesium-button .cesium-svgPath-svg {
2830
- scale: 0.8;
2831
- height: 100%;
2832
- max-width: 100%;
2833
- max-height: 100%;
2834
- text-align: center;
2835
- }
2836
- .cesium-viewer-toolbar .cesium-button img:hover,
2837
- .cesium-viewer-toolbar .cesium-button svg:hover,
2838
- .cesium-viewer-toolbar .cesium-button div:hover,
2839
- .cesium-viewer-toolbar .cesium-button .cesium-svgPath-svg:hover {
2840
- scale: 0.9;
2841
- }
2842
- .cesium-viewer-toolbar .cesium-baseLayerPicker-dropDown {
2843
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2844
- max-height: 700px;
2845
- z-index: 99;
2846
- }
2847
- .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper .cesium-navigation-help-instructions,
2848
- .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper .cesium-navigation-button {
2849
- background: none;
2850
- }
2851
- .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper .cesium-navigation-help,
2852
- .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper .cesium-navigation-button-selected {
2853
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2854
- }
2855
- .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper .cesium-navigation-button-unselected {
2856
- background-color: rgba(105, 105, 105, 0.75);
2857
- }
2858
- .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper .cesium-navigation-button-unselected:hover {
2859
- background-color: var(--mars-base-bg, rgba(76, 76, 76, 0.75));
2860
- }
2861
- .cesium-viewer-toolbar .cesium-viewer-geocoderContainer .cesium-geocoder-input {
2862
- background-color: rgba(63, 72, 84, 0.7);
2863
- border-width: 1px;
2864
- }
2865
- .cesium-viewer-toolbar .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
2866
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2867
- }
2868
- .cesium-viewer-toolbar .cesium-viewer-geocoderContainer .search-results {
2869
- z-index: 99;
2870
- background-color: rgba(23, 49, 71, 0.8);
2871
- }
2872
- .cesium-viewer-toolbar .cesium-viewer-geocoderContainer .cesium-geocoder-searchButton {
2873
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
2874
- border-radius: 2px;
2875
- border-width: 1px;
2876
- fill: #e6e6e6;
2877
- }
2878
- /** 修改定位:"top-right"上侧靠右 */
2879
- /** 按钮工具栏修改定位:"top-left"上侧靠左 */
2880
- .cesium-viewer-toolbar-top-left {
2881
- top: 10px;
2882
- bottom: auto !important;
2883
- left: 10px;
2884
- right: auto !important;
2885
- /**帮助 弹出面板*/
2886
- /**底图切换 弹出面板*/
2887
- }
2888
- .cesium-viewer-toolbar-top-left .cesium-navigationHelpButton-wrapper .cesium-navigation-help {
2889
- left: 40px;
2890
- transform-origin: left top;
2891
- }
2892
- .cesium-viewer-toolbar-top-left .cesium-baseLayerPicker-dropDown {
2893
- left: 10px;
2894
- }
2895
- /** 修改定位:"left-top"左侧靠上 */
2896
- .cesium-viewer-toolbar-left-top {
2897
- top: 10px;
2898
- bottom: auto !important;
2899
- left: 10px;
2900
- right: auto !important;
2901
- /**底图切换 弹出面板*/
2902
- /**帮助 弹出面板*/
2903
- /**二维三维切换*/
2904
- /**POI查询输入框*/
2905
- }
2906
- .cesium-viewer-toolbar-left-top > .cesium-toolbar-button,
2907
- .cesium-viewer-toolbar-left-top .cesium-navigationHelpButton-wrapper,
2908
- .cesium-viewer-toolbar-left-top .cesium-viewer-geocoderContainer {
2909
- float: left;
2910
- clear: both;
2911
- margin-bottom: 5px;
2912
- }
2913
- .cesium-viewer-toolbar-left-top .cesium-baseLayerPicker-dropDown {
2914
- left: 40px;
2915
- margin-bottom: 5px;
2916
- }
2917
- .cesium-viewer-toolbar-left-top .cesium-navigationHelpButton-wrapper .cesium-navigation-help {
2918
- top: 0px;
2919
- left: 40px;
2920
- transform-origin: left top;
2921
- }
2922
- .cesium-viewer-toolbar-left-top .cesium-sceneModePicker-wrapper {
2923
- width: auto;
2924
- }
2925
- .cesium-viewer-toolbar-left-top .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
2926
- float: right;
2927
- margin: 0 3px;
2928
- }
2929
- .cesium-viewer-toolbar-left-top .cesium-viewer-geocoderContainer .search-results {
2930
- left: 0;
2931
- right: 40px;
2932
- width: auto;
2933
- }
2934
- /** 修改定位:"left-bottom"左侧靠下 */
2935
- .cesium-viewer-toolbar-left-bottom {
2936
- top: auto !important;
2937
- bottom: 60px;
2938
- left: 10px;
2939
- right: auto !important;
2940
- /**底图切换 弹出面板*/
2941
- /**帮助 弹出面板*/
2942
- /**二维三维切换*/
2943
- /**POI查询输入框*/
2944
- }
2945
- .cesium-viewer-toolbar-left-bottom > .cesium-toolbar-button,
2946
- .cesium-viewer-toolbar-left-bottom .cesium-navigationHelpButton-wrapper,
2947
- .cesium-viewer-toolbar-left-bottom .cesium-viewer-geocoderContainer {
2948
- float: left;
2949
- clear: both;
2950
- margin-bottom: 5px;
2951
- }
2952
- .cesium-viewer-toolbar-left-bottom .cesium-baseLayerPicker-dropDown {
2953
- bottom: 0;
2954
- left: 40px;
2955
- margin-bottom: 5px;
2956
- }
2957
- .cesium-viewer-toolbar-left-bottom .cesium-navigationHelpButton-wrapper .cesium-navigation-help {
2958
- top: auto;
2959
- bottom: 0;
2960
- left: 40px;
2961
- transform-origin: left bottom;
2962
- }
2963
- .cesium-viewer-toolbar-left-bottom .cesium-sceneModePicker-wrapper {
2964
- width: auto;
2965
- }
2966
- .cesium-viewer-toolbar-left-bottom .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
2967
- float: right;
2968
- margin: 0 3px;
2969
- }
2970
- .cesium-viewer-toolbar-left-bottom .cesium-viewer-geocoderContainer .search-results {
2971
- left: 0;
2972
- right: 40px;
2973
- width: auto;
2974
- }
2975
- /** 修改定位:"right-top"右侧靠上 */
2976
- .cesium-viewer-toolbar-right-top {
2977
- top: 10px;
2978
- bottom: auto !important;
2979
- right: 10px;
2980
- left: auto !important;
2981
- /**底图切换 弹出面板*/
2982
- /**帮助 弹出面板*/
2983
- /**二维三维切换*/
2984
- /**POI查询输入框*/
2985
- }
2986
- .cesium-viewer-toolbar-right-top > .cesium-toolbar-button,
2987
- .cesium-viewer-toolbar-right-top .cesium-navigationHelpButton-wrapper,
2988
- .cesium-viewer-toolbar-right-top .cesium-viewer-geocoderContainer {
2989
- float: right;
2990
- clear: both;
2991
- margin-bottom: 5px;
2992
- }
2993
- .cesium-viewer-toolbar-right-top .cesium-baseLayerPicker-dropDown {
2994
- right: 40px;
2995
- margin-bottom: 5px;
2996
- }
2997
- .cesium-viewer-toolbar-right-top .cesium-navigationHelpButton-wrapper .cesium-navigation-help {
2998
- top: 0;
2999
- bottom: auto;
3000
- right: 40px;
3001
- transform-origin: right top;
3002
- }
3003
- .cesium-viewer-toolbar-right-top .cesium-sceneModePicker-wrapper {
3004
- width: auto;
3005
- }
3006
- .cesium-viewer-toolbar-right-top .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
3007
- float: left;
3008
- margin: 0 3px;
3009
- }
3010
- .cesium-viewer-toolbar-right-top .cesium-viewer-geocoderContainer .search-results {
3011
- right: 0;
3012
- left: 40px;
3013
- width: auto;
3014
- }
3015
- /** 修改定位:"right-bottom"右侧靠下 */
3016
- .cesium-viewer-toolbar-right-bottom {
3017
- top: auto !important;
3018
- bottom: 60px;
3019
- right: 10px;
3020
- left: auto !important;
3021
- /**底图切换 弹出面板*/
3022
- /**帮助 弹出面板*/
3023
- /**二维三维切换*/
3024
- /**POI查询输入框*/
3025
- }
3026
- .cesium-viewer-toolbar-right-bottom > .cesium-toolbar-button,
3027
- .cesium-viewer-toolbar-right-bottom .cesium-navigationHelpButton-wrapper,
3028
- .cesium-viewer-toolbar-right-bottom .cesium-viewer-geocoderContainer {
3029
- float: right;
3030
- clear: both;
3031
- margin-bottom: 5px;
3032
- }
3033
- .cesium-viewer-toolbar-right-bottom .cesium-baseLayerPicker-dropDown {
3034
- bottom: 0;
3035
- right: 40px;
3036
- margin-bottom: 5px;
3037
- }
3038
- .cesium-viewer-toolbar-right-bottom .cesium-navigationHelpButton-wrapper .cesium-navigation-help {
3039
- top: auto;
3040
- bottom: 0;
3041
- right: 40px;
3042
- transform-origin: right bottom;
3043
- }
3044
- .cesium-viewer-toolbar-right-bottom .cesium-sceneModePicker-wrapper {
3045
- width: auto;
3046
- }
3047
- .cesium-viewer-toolbar-right-bottom .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
3048
- float: left;
3049
- margin: 0 3px;
3050
- }
3051
- .cesium-viewer-toolbar-right-bottom .cesium-viewer-geocoderContainer .search-results {
3052
- right: 0;
3053
- left: 40px;
3054
- width: auto;
3055
- }
3056
- /**cesium 工具按钮栏*/
3057
- .cesium-viewer-toolbar {
3058
- top: auto !important;
3059
- bottom: 35px !important;
3060
- left: 12px !important;
3061
- right: auto !important;
3062
- }
3063
- .cesium-toolbar-button img {
3064
- width: 22px;
3065
- height: 100%;
3066
- }
3067
- .cesium-toolbar-button:hover img {
3068
- width: 28px;
3069
- }
3070
- .cesium-svgPath-svg {
3071
- scale: 0.8;
3072
- }
3073
- .cesium-svgPath-svg:hover {
3074
- scale: 1;
3075
- }
3076
- .cesium-button .cesium-baseLayerPicker-selected {
3077
- width: 100%;
3078
- }
3079
- .cesium-button:hover .cesium-baseLayerPicker-selected {
3080
- width: 100%;
3081
- }
3082
- .cesium-viewer-toolbar > .cesium-toolbar-button,
3083
- .cesium-navigationHelpButton-wrapper,
3084
- .cesium-viewer-geocoderContainer {
3085
- margin-bottom: 5px;
3086
- float: left;
3087
- clear: both;
3088
- text-align: center;
3089
- }
3090
- .cesium-viewer-geocoderContainer form .cesium-geocoder-input {
3091
- border-width: 1px;
3092
- border-image: url("//data.mars3d.cn/img/control/border.svg") 1 round stretch;
3093
- }
3094
- .cesium-button {
3095
- background-color: rgba(39, 44, 54, 0.8);
3096
- border-radius: 2px;
3097
- border-width: 1px;
3098
- border-image: url("//data.mars3d.cn/img/control/border.svg") 1 round stretch;
3099
- color: #ffffff;
3100
- fill: #e6e6e6;
3101
- line-height: 38px;
3102
- }
3103
- .cesium-button:hover {
3104
- background-color: #3385ff;
3105
- box-shadow: none;
3106
- border: none;
3107
- }
3108
- /**cesium 底图切换面板*/
3109
- .cesium-baseLayerPicker-dropDown {
3110
- bottom: 0;
3111
- left: 40px;
3112
- max-height: 700px;
3113
- margin-bottom: 5px;
3114
- background-color: rgba(23, 49, 71, 0.7);
3115
- }
3116
- /**cesium 帮助面板*/
3117
- .cesium-navigation-help {
3118
- top: auto;
3119
- bottom: 0;
3120
- left: 40px;
3121
- transform-origin: left bottom;
3122
- background: none;
3123
- background-color: rgba(23, 49, 71, 0.8);
3124
- }
3125
- .cesium-navigation-help .cesium-navigation-help-instructions,
3126
- .cesium-navigation-help .cesium-navigation-button {
3127
- background: none;
3128
- }
3129
- .cesium-navigation-help .cesium-navigation-button-selected,
3130
- .cesium-navigation-help .cesium-navigation-button-unselected:hover {
3131
- background-color: #012316;
3132
- }
3133
- /**cesium 二维三维切换*/
3134
- .cesium-sceneModePicker-wrapper {
3135
- width: auto;
3136
- }
3137
- .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
3138
- float: right;
3139
- margin: 0 3px;
3140
- }
3141
- /**cesium POI查询输入框*/
3142
- .cesium-viewer-geocoderContainer .search-results {
3143
- left: 0;
3144
- right: 40px;
3145
- width: auto;
3146
- z-index: 9999;
3147
- }
3148
- .cesium-geocoder-searchButton {
3149
- width: 38px;
3150
- height: 38px;
3151
- background-color: rgba(39, 44, 54, 0.8);
3152
- border-radius: 2px;
3153
- border-width: 1px;
3154
- border-image: url("//data.mars3d.cn/img/control/border.svg") 1 round stretch;
3155
- fill: #e6e6e6;
3156
- }
3157
- .cesium-viewer-geocoderContainer .cesium-geocoder-input {
3158
- height: 40px;
3159
- width: 40px;
3160
- background-color: rgba(63, 72, 84, 0.7);
3161
- }
3162
- .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
3163
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
3164
- }
3165
- .cesium-viewer-geocoderContainer .search-results {
3166
- background-color: rgba(23, 49, 71, 0.8);
3167
- }
3168
- /**cesium info信息框*/
3169
- .cesium-infoBox {
3170
- top: 50px;
3171
- background: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
3172
- }
3173
- .cesium-infoBox-title {
3174
- background-color: rgba(23, 49, 71, 0.8);
3175
- }
3176
- /**cesium 任务栏的FPS信息*/
3177
- .cesium-performanceDisplay-defaultContainer {
3178
- top: auto;
3179
- bottom: 35px;
3180
- right: 50px;
3181
- }
3182
- .cesium-performanceDisplay-ms,
3183
- .cesium-performanceDisplay-fps {
3184
- color: #fff;
3185
- }
3186
- /**cesium tileset调试信息面板*/
3187
- .cesium-viewer-cesiumInspectorContainer {
3188
- top: 10px;
3189
- left: 10px;
3190
- right: auto;
3191
- }
3192
- .cesium-cesiumInspector {
3193
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
3194
- }
3195
- /**覆盖mars3d内部控件的颜色等样式*/
3196
- .mars3d-compass .mars3d-compass-outer {
3197
- fill: rgba(39, 44, 54, 0.8);
3198
- }
3199
- .mars3d-compass .mars3d-compass-inner {
3200
- background: rgba(39, 44, 54, 0.8);
3201
- fill: #fff;
3202
- }
3203
- .mars3d-contextmenu-ul,
3204
- .mars3d-sub-menu {
3205
- background-color: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
3206
- }
3207
- .mars3d-contextmenu-ul {
3208
- border-radius: 2px;
3209
- border-width: 1px;
3210
- border-image: url("//data.mars3d.cn/img/control/border.svg") 1 round stretch;
3211
- }
3212
- .mars3d-contextmenu-ul > li > a:hover,
3213
- .mars3d-sub-menu > li > a:hover,
3214
- .mars3d-contextmenu-ul > li > a:focus,
3215
- .mars3d-sub-menu > li > a:focus,
3216
- .mars3d-contextmenu-ul > li > .active,
3217
- .mars3d-sub-menu > li > .active {
3218
- background-color: var(--mars-hover-color, #3ea6ff);
3219
- }
3220
- .mars3d-contextmenu-ul > .active > a,
3221
- .mars3d-sub-menu > .active > a,
3222
- .mars3d-contextmenu-ul > .active > a:hover,
3223
- .mars3d-sub-menu > .active > a:hover,
3224
- .mars3d-contextmenu-ul > .active > a:focus,
3225
- .mars3d-sub-menu > .active > a:focus {
3226
- background-color: var(--mars-hover-color, #3ea6ff);
3227
- }
3228
- /* Popup样式*/
3229
- .mars3d-popup-color {
3230
- color: var(--mars-text-color, #ffffff);
3231
- }
3232
- .mars3d-popup-background {
3233
- background: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
3234
- }
3235
- .mars3d-popup-content {
3236
- margin: 15px;
3237
- }
3238
- .mars3d-popup-btn-custom {
3239
- padding: 3px 10px;
3240
- border: 1px solid #209ffd;
3241
- background: #209ffd1c;
3242
- color: var(--mars-text-color);
3243
- }
3244
- .mars3d-tooltip {
3245
- color: var(--mars-text-color, #ffffff);
3246
- background: var(--mars-base-bg, rgba(63, 72, 84, 0.9));
3247
- border: 1px solid var(--mars-base-bg, rgba(63, 72, 84, 0.9));
3248
- }
3249
- .mars3d-tooltip-top:before {
3250
- border-top-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
3251
- }
3252
- .mars3d-tooltip-bottom:before {
3253
- border-bottom-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
3254
- }
3255
- .mars3d-tooltip-left:before {
3256
- border-left-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
3257
- }
3258
- .mars3d-tooltip-right:before {
3259
- border-right-color: var(--mars-bg-base, rgba(23, 49, 71, 0.8));
3260
- }
3261
- .mars3d-template-content label {
3262
- padding-right: 6px;
3263
- }
3264
- /* all 中的html样式 */
3265
- .mars3d-template-titile {
3266
- height: 33px;
3267
- line-height: 33px;
3268
- padding-left: 10px;
3269
- border-radius: 4px 4px 0px 0px;
3270
- box-shadow: 0px 6px 12px -2px rgba(50, 50, 93, 0.15), 0px 3px 7px -3px rgba(0, 0, 0, 0.2);
3271
- color: var(--mars-control-text) !important;
3272
- background: var(--mars-msg-title-bg);
3273
- font-family: var(--mars-font-family);
3274
- }
3275
- .mars3d-template-titile a {
3276
- font-size: 16px;
3277
- color: var(--mars-msg-title-color, #479be0);
3278
- text-decoration: none;
3279
- }
3280
- .mars3d-template-content {
3281
- margin-top: 0 !important;
3282
- background-color: var(--mars-dropdown-bg);
3283
- padding: 10px;
3284
- color: #eaf2ff;
3285
- }
3286
- .mars3d-template-content label {
3287
- padding-right: 6px;
3288
- }
3289
- .mars3d-template-content input {
3290
- color: var(--mars-text-color);
3291
- background-color: transparent !important;
3292
- padding: 4px 5px;
3293
- }
3294
- .mars3d-template-content input::placeholder {
3295
- color: #cdcdcd !important;
3296
- }
3297
- .mars3d-template-content textarea {
3298
- color: var(--mars-base-color);
3299
- background-color: transparent !important;
3300
- padding: 4px 5px;
3301
- }
3302
- .mars3d-template-content textarea::placeholder {
3303
- color: #cdcdcd !important;
3304
- }
3305
- .mars3d-popup-btn-custom {
3306
- padding: 3px 10px;
3307
- border: 1px solid #209ffd;
3308
- background: #209ffd1c;
3309
- color: var(--mars-text-color, #ffffff);
3310
- }
3311
- .mars3d-popup-content {
3312
- margin: 15px;
3313
- }
3314
- .mars3d-divGraphic:hover {
3315
- z-index: 999 !important;
3316
- }
3317
- /* 隐藏Mars3D logo */
3318
- .mars3d-logo {
3319
- display: none !important;
3320
- visibility: hidden !important;
3321
- opacity: 0 !important;
3322
- pointer-events: none;
3323
- }
3324
- .toolbar-panel[data-v-f9e69b7a] {
3325
- position: absolute;
3326
- top: 10px;
3327
- right: 0;
3328
- width: 42px;
3329
- background: rgba(23, 35, 50, 0.92);
3330
- border: 1px solid rgba(62, 166, 255, 0.3);
3331
- border-radius: 6px 0 0 6px;
3332
- border-right: none;
3333
- z-index: 999;
3334
- transition: max-height 0.3s ease;
3335
- max-height: calc(100vh - 120px);
3336
- overflow-y: auto;
3337
- backdrop-filter: blur(4px);
3338
- }
3339
- .toolbar-panel.collapsed[data-v-f9e69b7a] {
3340
- max-height: 38px;
3341
- }
3342
- .toolbar-panel.collapsed .panel-content[data-v-f9e69b7a] {
3343
- display: none;
3344
- }
3345
- .toolbar-panel.collapsed .panel-header[data-v-f9e69b7a] {
3346
- padding: 8px;
3347
- justify-content: center;
3348
- border-radius: 6px 0 0 6px;
3349
- }
3350
- .toolbar-panel .panel-header[data-v-f9e69b7a] {
3351
- display: flex;
3352
- align-items: center;
3353
- justify-content: center;
3354
- padding: 8px;
3355
- background: rgba(15, 25, 40, 0.9);
3356
- border-radius: 6px 0 0 0;
3357
- cursor: pointer;
3358
- user-select: none;
3359
- }
3360
- .toolbar-panel .panel-header .toggle-icon[data-v-f9e69b7a] {
3361
- color: #7a9ec0;
3362
- font-size: 12px;
3363
- transition: all 0.3s ease;
3364
- }
3365
- .toolbar-panel .panel-header:hover .toggle-icon[data-v-f9e69b7a] {
3366
- color: #3ea6ff;
3367
- }
3368
- .toolbar-panel .panel-content[data-v-f9e69b7a] {
3369
- padding: 6px 0;
3370
- }
3371
- .toolbar-panel .menu-group[data-v-f9e69b7a] {
3372
- display: flex;
3373
- flex-direction: column;
3374
- gap: 2px;
3375
- }
3376
- .toolbar-panel .menu-item[data-v-f9e69b7a] {
3377
- display: flex;
3378
- align-items: center;
3379
- justify-content: center;
3380
- padding: 8px;
3381
- color: #e8f4ff;
3382
- cursor: pointer;
3383
- border-radius: 3px;
3384
- transition: all 0.2s ease;
3385
- }
3386
- .toolbar-panel .menu-item[data-v-f9e69b7a]:hover {
3387
- background: rgba(62, 166, 255, 0.25);
3388
- color: #fff;
3389
- }
3390
- .toolbar-panel .menu-item.active[data-v-f9e69b7a] {
3391
- background: rgba(62, 166, 255, 0.4);
3392
- color: #fff;
3393
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
3394
- }
3395
- .toolbar-panel .menu-item i[data-v-f9e69b7a] {
3396
- font-size: 14px;
3397
- line-height: 1;
3398
- }
3399
- .toolbar-panel .divider[data-v-f9e69b7a] {
3400
- height: 1px;
3401
- background: rgba(255, 255, 255, 0.08);
3402
- margin: 6px 8px;
3403
- }
3404
- .toolbar-panel[data-v-f9e69b7a]::-webkit-scrollbar {
3405
- width: 3px;
3406
- }
3407
- .toolbar-panel[data-v-f9e69b7a]::-webkit-scrollbar-thumb {
3408
- background: rgba(62, 166, 255, 0.3);
3409
- border-radius: 2px;
3410
- }
3411
- .vision-button[data-v-4fc03fe1] {
3412
- position: absolute;
3413
- bottom: 80px;
3414
- right: 0;
3415
- width: 42px;
3416
- height: 42px;
3417
- background: rgba(23, 35, 50, 0.92);
3418
- border-radius: 6px 0 0 6px;
3419
- border: 1px solid rgba(62, 166, 255, 0.3);
3420
- border-right: none;
3421
- z-index: 999;
3422
- display: flex;
3423
- align-items: center;
3424
- justify-content: center;
3425
- color: #e8f4ff;
3426
- cursor: pointer;
3427
- backdrop-filter: blur(4px);
3428
- transition: all 0.2s ease;
3429
- }
3430
- .vision-button[data-v-4fc03fe1]:hover {
3431
- background: rgba(62, 166, 255, 0.25);
3432
- color: #fff;
3433
- }
3434
- .vision-button i[data-v-4fc03fe1] {
3435
- font-size: 14px;
3436
- }
3437
- .vision-popup[data-v-4fc03fe1] {
3438
- position: absolute;
3439
- bottom: 80px;
3440
- right: 48px;
3441
- width: 170px;
3442
- background: rgba(23, 35, 50, 0.92);
3443
- border-radius: 6px;
3444
- border: 1px solid rgba(62, 166, 255, 0.3);
3445
- backdrop-filter: blur(4px);
3446
- z-index: 998;
3447
- }
3448
- .vision-popup .popup-header[data-v-4fc03fe1] {
3449
- display: flex;
3450
- align-items: center;
3451
- justify-content: space-between;
3452
- padding: 8px 12px;
3453
- background: rgba(15, 25, 40, 0.9);
3454
- border-radius: 5px 5px 0 0;
3455
- }
3456
- .vision-popup .popup-header span[data-v-4fc03fe1] {
3457
- color: #e8f4ff;
3458
- font-size: 13px;
3459
- font-weight: 600;
3460
- }
3461
- .vision-popup .popup-header .close-icon[data-v-4fc03fe1] {
3462
- color: #7a9ec0;
3463
- font-size: 14px;
3464
- cursor: pointer;
3465
- transition: color 0.2s ease;
3466
- }
3467
- .vision-popup .popup-header .close-icon[data-v-4fc03fe1]:hover {
3468
- color: #3ea6ff;
3469
- }
3470
- .vision-popup .popup-content[data-v-4fc03fe1] {
3471
- padding: 6px 0;
3472
- }
3473
- .vision-popup .popup-item[data-v-4fc03fe1] {
3474
- display: flex;
3475
- align-items: center;
3476
- padding: 8px 12px;
3477
- color: #e8f4ff;
3478
- cursor: pointer;
3479
- transition: all 0.2s ease;
3480
- border-radius: 3px;
3481
- margin: 0 4px;
3482
- }
3483
- .vision-popup .popup-item[data-v-4fc03fe1]:hover {
3484
- background: rgba(62, 166, 255, 0.25);
3485
- color: #fff;
3486
- }
3487
- .vision-popup .popup-item.active[data-v-4fc03fe1] {
3488
- background: rgba(62, 166, 255, 0.4);
3489
- color: #fff;
3490
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
3491
- }
3492
- .vision-popup .popup-item i[data-v-4fc03fe1] {
3493
- margin-right: 10px;
3494
- width: 16px;
3495
- text-align: center;
3496
- font-size: 14px;
3497
- }
3498
- .vision-popup .popup-item span[data-v-4fc03fe1] {
3499
- font-size: 12px;
3500
- }
3501
- .vision-fade-enter-active[data-v-4fc03fe1],
3502
- .vision-fade-leave-active[data-v-4fc03fe1] {
3503
- transition: opacity 0.25s ease, transform 0.25s ease;
3504
- }
3505
- .vision-fade-enter-from[data-v-4fc03fe1],
3506
- .vision-fade-leave-to[data-v-4fc03fe1] {
3507
- opacity: 0;
3508
- transform: translateX(15px);
3509
- }
3510
-
3511
- .mars-map-container[data-v-9c769713] {
3512
- width: 100%;
3513
- height: 100%;
3514
- position: relative;
3515
- overflow: hidden;
3516
- }
3517
- .poi-panel[data-v-b2f25973] {
3518
- position: absolute;
3519
- width: 260px;
3520
- height: auto;
3521
- max-height: calc(100vh - 40px);
3522
- background: rgba(23, 35, 50, 0.92);
3523
- border: 1px solid rgba(62, 166, 255, 0.3);
3524
- border-radius: 6px;
3525
- z-index: 999;
3526
- display: flex;
3527
- flex-direction: column;
3528
- backdrop-filter: blur(4px);
3529
- transition: width 0.25s ease;
3530
- }
3531
- .poi-panel.collapsed[data-v-b2f25973] {
3532
- width: 46px;
3533
- max-height: none;
3534
- overflow: hidden;
3535
- }
3536
- .poi-panel.collapsed .poi-panel__title[data-v-b2f25973] {
3537
- display: none;
3538
- }
3539
- .poi-panel.collapsed .poi-panel__body[data-v-b2f25973] {
3540
- display: none;
3541
- }
3542
- .poi-panel.collapsed .collapse-icon[data-v-b2f25973] {
3543
- display: none;
3544
- }
3545
- .poi-panel__header[data-v-b2f25973] {
3546
- position: relative;
3547
- display: flex;
3548
- align-items: center;
3549
- justify-content: space-between;
3550
- padding: 12px 14px;
3551
- background: rgba(15, 25, 40, 0.9);
3552
- border-radius: 6px 6px 0 0;
3553
- cursor: grab;
3554
- user-select: none;
3555
- flex-shrink: 0;
3556
- }
3557
- .poi-panel__header.is-dragging[data-v-b2f25973] {
3558
- cursor: grabbing;
3559
- }
3560
- .poi-panel__header .collapsed-icon[data-v-b2f25973] {
3561
- display: none;
3562
- color: #3ea6ff;
3563
- font-size: 18px;
3564
- }
3565
- .poi-panel__header .poi-panel__title[data-v-b2f25973] {
3566
- display: flex;
3567
- align-items: center;
3568
- gap: 8px;
3569
- color: #e8f4ff;
3570
- font-size: 14px;
3571
- font-weight: 600;
3572
- }
3573
- .poi-panel__header .poi-panel__title .fa[data-v-b2f25973] {
3574
- color: #3ea6ff;
3575
- font-size: 15px;
3576
- }
3577
- .poi-panel__header .poi-count[data-v-b2f25973] {
3578
- background: #e74c3c;
3579
- color: #fff;
3580
- font-size: 11px;
3581
- padding: 1px 6px;
3582
- border-radius: 10px;
3583
- min-width: 18px;
3584
- text-align: center;
3585
- }
3586
- .poi-panel__header .collapse-icon[data-v-b2f25973] {
3587
- color: #7a9ec0;
3588
- font-size: 12px;
3589
- }
3590
- .poi-panel.collapsed .poi-panel__header[data-v-b2f25973] {
3591
- flex-direction: column;
3592
- align-items: flex-start;
3593
- padding: 8px 10px 10px;
3594
- gap: 0;
3595
- cursor: pointer;
3596
- }
3597
- .poi-panel.collapsed .poi-panel__header .collapsed-icon-wrap[data-v-b2f25973] {
3598
- position: relative;
3599
- display: inline-flex;
3600
- align-items: center;
3601
- justify-content: center;
3602
- margin-top: 12px;
3603
- margin-left: 2px;
3604
- }
3605
- .poi-panel.collapsed .poi-panel__header .collapsed-icon[data-v-b2f25973] {
3606
- display: block;
3607
- font-size: 20px;
3608
- color: #3ea6ff;
3609
- }
3610
- .poi-panel.collapsed .poi-panel__header .poi-count--collapsed[data-v-b2f25973] {
3611
- display: block;
3612
- position: absolute;
3613
- top: -10px;
3614
- right: -12px;
3615
- min-width: 16px;
3616
- height: 16px;
3617
- line-height: 16px;
3618
- font-size: 10px;
3619
- padding: 0 3px;
3620
- background: #3ea6ff;
3621
- color: #fff;
3622
- border-radius: 8px;
3623
- }
3624
- .poi-panel__body[data-v-b2f25973] {
3625
- display: flex;
3626
- flex-direction: column;
3627
- overflow: hidden;
3628
- }
3629
- .poi-panel__toolbar[data-v-b2f25973] {
3630
- display: flex;
3631
- gap: 8px;
3632
- padding: 10px 12px;
3633
- border-bottom: 1px solid rgba(255, 255, 255, 0.07);
3634
- }
3635
- .poi-panel__toolbar .btn[data-v-b2f25973] {
3636
- flex: 1;
3637
- padding: 6px 8px;
3638
- border: 1px solid rgba(62, 166, 255, 0.4);
3639
- background: rgba(62, 166, 255, 0.1);
3640
- color: #9dc8f0;
3641
- border-radius: 4px;
3642
- font-size: 12px;
3643
- cursor: pointer;
3644
- display: flex;
3645
- align-items: center;
3646
- justify-content: center;
3647
- gap: 5px;
3648
- transition: all 0.2s ease;
3649
- }
3650
- .poi-panel__toolbar .btn[data-v-b2f25973]:hover {
3651
- background: rgba(62, 166, 255, 0.25);
3652
- color: #fff;
3653
- }
3654
- .poi-panel__toolbar .btn--active[data-v-b2f25973] {
3655
- background: rgba(62, 166, 255, 0.35);
3656
- color: #fff;
3657
- border-color: #3ea6ff;
3658
- }
3659
- .poi-panel__toolbar .btn--danger[data-v-b2f25973] {
3660
- flex: 0 0 auto;
3661
- border-color: rgba(255, 100, 100, 0.4);
3662
- background: rgba(255, 100, 100, 0.1);
3663
- color: #ffaaaa;
3664
- }
3665
- .poi-panel__toolbar .btn--danger[data-v-b2f25973]:hover:not(:disabled) {
3666
- background: rgba(255, 100, 100, 0.25);
3667
- color: #fff;
3668
- }
3669
- .poi-panel__toolbar .btn--danger[data-v-b2f25973]:disabled {
3670
- opacity: 0.4;
3671
- cursor: not-allowed;
3672
- }
3673
- .poi-panel__filter[data-v-b2f25973] {
3674
- display: flex;
3675
- gap: 6px;
3676
- padding: 8px 12px;
3677
- flex-wrap: wrap;
3678
- border-bottom: 1px solid rgba(255, 255, 255, 0.07);
3679
- }
3680
- .poi-panel__filter .filter-tag[data-v-b2f25973] {
3681
- padding: 3px 8px;
3682
- border-radius: 12px;
3683
- font-size: 11px;
3684
- color: #7a9ec0;
3685
- background: rgba(255, 255, 255, 0.06);
3686
- cursor: pointer;
3687
- display: flex;
3688
- align-items: center;
3689
- gap: 4px;
3690
- transition: all 0.2s ease;
3691
- }
3692
- .poi-panel__filter .filter-tag[data-v-b2f25973]:hover {
3693
- background: rgba(255, 255, 255, 0.12);
3694
- color: #c8dff0;
3695
- }
3696
- .poi-panel__filter .filter-tag.active[data-v-b2f25973] {
3697
- background: rgba(62, 166, 255, 0.2);
3698
- color: #3ea6ff;
3699
- }
3700
- .poi-panel__list[data-v-b2f25973] {
3701
- overflow-y: auto;
3702
- max-height: calc(100vh - 220px);
3703
- padding: 6px 0;
3704
- }
3705
- .poi-panel__list[data-v-b2f25973]::-webkit-scrollbar {
3706
- width: 4px;
3707
- }
3708
- .poi-panel__list[data-v-b2f25973]::-webkit-scrollbar-thumb {
3709
- background: rgba(62, 166, 255, 0.3);
3710
- border-radius: 2px;
3711
- }
3712
- .poi-item[data-v-b2f25973] {
3713
- display: flex;
3714
- align-items: center;
3715
- gap: 10px;
3716
- padding: 8px 12px;
3717
- cursor: pointer;
3718
- transition: background 0.15s ease;
3719
- }
3720
- .poi-item[data-v-b2f25973]:hover {
3721
- background: rgba(62, 166, 255, 0.1);
3722
- }
3723
- .poi-item--active[data-v-b2f25973] {
3724
- background: rgba(62, 166, 255, 0.18);
3725
- }
3726
- .poi-item__dot[data-v-b2f25973] {
3727
- width: 8px;
3728
- height: 8px;
3729
- border-radius: 50%;
3730
- flex-shrink: 0;
3731
- }
3732
- .poi-item__info[data-v-b2f25973] {
3733
- flex: 1;
3734
- min-width: 0;
3735
- }
3736
- .poi-item__info-name[data-v-b2f25973] {
3737
- overflow: hidden;
3738
- }
3739
- .poi-item__name[data-v-b2f25973] {
3740
- font-size: 13px;
3741
- color: #d8ecff;
3742
- white-space: nowrap;
3743
- overflow: hidden;
3744
- text-overflow: ellipsis;
3745
- cursor: text;
3746
- }
3747
- .poi-item__name[data-v-b2f25973]:hover {
3748
- color: #a0d4ff;
3749
- }
3750
- .poi-item__name-input[data-v-b2f25973] {
3751
- width: 100%;
3752
- font-size: 13px;
3753
- color: #e8f4ff;
3754
- background: rgba(62, 166, 255, 0.15);
3755
- border: 1px solid rgba(62, 166, 255, 0.5);
3756
- border-radius: 3px;
3757
- padding: 1px 5px;
3758
- outline: none;
3759
- font-family: inherit;
3760
- }
3761
- .poi-item__name-input[data-v-b2f25973]:focus {
3762
- border-color: #3ea6ff;
3763
- background: rgba(62, 166, 255, 0.22);
3764
- }
3765
- .poi-item__coord[data-v-b2f25973] {
3766
- font-size: 11px;
3767
- color: #5a7a9a;
3768
- margin-top: 2px;
3769
- font-family: monospace;
3770
- }
3771
- .poi-item__actions[data-v-b2f25973] {
3772
- display: flex;
3773
- gap: 4px;
3774
- flex-shrink: 0;
3775
- opacity: 0;
3776
- transition: opacity 0.15s ease;
3777
- }
3778
- .poi-item:hover .poi-item__actions[data-v-b2f25973] {
3779
- opacity: 1;
3780
- }
3781
- .icon-btn[data-v-b2f25973] {
3782
- width: 22px;
3783
- height: 22px;
3784
- border: none;
3785
- background: rgba(255, 255, 255, 0.08);
3786
- color: #9dc8f0;
3787
- border-radius: 3px;
3788
- cursor: pointer;
3789
- display: flex;
3790
- align-items: center;
3791
- justify-content: center;
3792
- font-size: 11px;
3793
- transition: all 0.15s ease;
3794
- }
3795
- .icon-btn[data-v-b2f25973]:hover {
3796
- background: rgba(62, 166, 255, 0.3);
3797
- color: #fff;
3798
- }
3799
- .icon-btn--danger[data-v-b2f25973]:hover {
3800
- background: rgba(255, 80, 80, 0.35);
3801
- color: #fff;
3802
- }
3803
- .poi-panel__empty[data-v-b2f25973] {
3804
- text-align: center;
3805
- padding: 30px 20px;
3806
- color: #4a6a8a;
3807
- }
3808
- .poi-panel__empty .fa[data-v-b2f25973] {
3809
- font-size: 32px;
3810
- margin-bottom: 10px;
3811
- display: block;
3812
- }
3813
- .poi-panel__empty p[data-v-b2f25973] {
3814
- font-size: 12px;
3815
- margin: 0;
3816
- line-height: 1.6;
3817
- }
3818
- .poi-list-enter-active[data-v-b2f25973],
3819
- .poi-list-leave-active[data-v-b2f25973] {
3820
- transition: all 0.25s ease;
3821
- }
3822
- .poi-list-enter-from[data-v-b2f25973] {
3823
- opacity: 0;
3824
- transform: translateX(-12px);
3825
- }
3826
- .poi-list-leave-to[data-v-b2f25973] {
3827
- opacity: 0;
3828
- transform: translateX(12px);
3829
- }
3830
- .track-panel[data-v-3e019b92] {
3831
- position: absolute;
3832
- width: 280px;
3833
- height: auto;
3834
- max-height: calc(100vh - 40px);
3835
- background: rgba(23, 35, 50, 0.92);
3836
- border: 1px solid rgba(62, 166, 255, 0.3);
3837
- border-radius: 6px;
3838
- z-index: 998;
3839
- display: flex;
3840
- flex-direction: column;
3841
- backdrop-filter: blur(4px);
3842
- transition: width 0.25s ease;
3843
- }
3844
- .track-panel.collapsed[data-v-3e019b92] {
3845
- width: 46px;
3846
- max-height: none;
3847
- overflow: hidden;
3848
- }
3849
- .track-panel.collapsed .track-panel__title[data-v-3e019b92] {
3850
- display: none;
3851
- }
3852
- .track-panel.collapsed .track-panel__body[data-v-3e019b92] {
3853
- display: none;
3854
- }
3855
- .track-panel.collapsed .collapse-icon[data-v-3e019b92] {
3856
- display: none;
3857
- }
3858
- .track-panel__header[data-v-3e019b92] {
3859
- position: relative;
3860
- display: flex;
3861
- align-items: center;
3862
- justify-content: space-between;
3863
- padding: 12px 14px;
3864
- background: rgba(15, 25, 40, 0.9);
3865
- border-radius: 6px 6px 0 0;
3866
- cursor: grab;
3867
- user-select: none;
3868
- flex-shrink: 0;
3869
- }
3870
- .track-panel__header.is-dragging[data-v-3e019b92] {
3871
- cursor: grabbing;
3872
- }
3873
- .track-panel__header .collapsed-icon[data-v-3e019b92] {
3874
- display: none;
3875
- color: #ff6b35;
3876
- font-size: 18px;
3877
- }
3878
- .track-panel__header .track-panel__title[data-v-3e019b92] {
3879
- display: flex;
3880
- align-items: center;
3881
- gap: 8px;
3882
- color: #e8f4ff;
3883
- font-size: 14px;
3884
- font-weight: 600;
3885
- }
3886
- .track-panel__header .track-panel__title .fa[data-v-3e019b92] {
3887
- color: #ff6b35;
3888
- font-size: 15px;
3889
- }
3890
- .track-panel__header .track-count[data-v-3e019b92] {
3891
- background: #e74c3c;
3892
- color: #fff;
3893
- font-size: 11px;
3894
- padding: 1px 6px;
3895
- border-radius: 10px;
3896
- min-width: 18px;
3897
- text-align: center;
3898
- }
3899
- .track-panel__header .collapse-icon[data-v-3e019b92] {
3900
- color: #7a9ec0;
3901
- font-size: 12px;
3902
- }
3903
- .track-panel.collapsed .track-panel__header[data-v-3e019b92] {
3904
- flex-direction: column;
3905
- align-items: flex-start;
3906
- padding: 8px 10px 10px;
3907
- gap: 0;
3908
- cursor: pointer;
3909
- }
3910
- .track-panel.collapsed .track-panel__header .collapsed-icon-wrap[data-v-3e019b92] {
3911
- position: relative;
3912
- display: inline-flex;
3913
- align-items: center;
3914
- justify-content: center;
3915
- margin-top: 12px;
3916
- margin-left: 2px;
3917
- }
3918
- .track-panel.collapsed .track-panel__header .collapsed-icon[data-v-3e019b92] {
3919
- display: block;
3920
- color: #ff6b35;
3921
- font-size: 18px;
3922
- }
3923
- .track-panel.collapsed .track-panel__header .track-badge[data-v-3e019b92] {
3924
- position: absolute;
3925
- top: -12px;
3926
- right: -12px;
3927
- background: #e74c3c;
3928
- color: #fff;
3929
- font-size: 10px;
3930
- font-weight: 600;
3931
- min-width: 16px;
3932
- height: 16px;
3933
- line-height: 16px;
3934
- text-align: center;
3935
- border-radius: 8px;
3936
- padding: 0 3px;
3937
- }
3938
- .track-panel__body[data-v-3e019b92] {
3939
- display: flex;
3940
- flex-direction: column;
3941
- overflow: hidden;
3942
- }
3943
- .track-panel__toolbar[data-v-3e019b92] {
3944
- display: flex;
3945
- gap: 6px;
3946
- padding: 10px 12px;
3947
- border-bottom: 1px solid rgba(255, 255, 255, 0.07);
3948
- }
3949
- .track-panel__toolbar .btn[data-v-3e019b92] {
3950
- flex: 1;
3951
- padding: 5px 8px;
3952
- border: 1px solid rgba(62, 166, 255, 0.4);
3953
- background: rgba(62, 166, 255, 0.1);
3954
- color: #9dc8f0;
3955
- border-radius: 4px;
3956
- font-size: 12px;
3957
- cursor: pointer;
3958
- display: flex;
3959
- align-items: center;
3960
- justify-content: center;
3961
- gap: 5px;
3962
- transition: all 0.2s;
3963
- }
3964
- .track-panel__toolbar .btn[data-v-3e019b92]:hover {
3965
- background: rgba(62, 166, 255, 0.25);
3966
- color: #fff;
3967
- }
3968
- .track-panel__toolbar .btn--active[data-v-3e019b92] {
3969
- background: rgba(255, 100, 50, 0.35);
3970
- color: #ffaa88;
3971
- border-color: #ff6b35;
3972
- }
3973
- .track-panel__toolbar .btn--primary[data-v-3e019b92] {
3974
- background: rgba(62, 166, 255, 0.2);
3975
- color: #fff;
3976
- border-color: rgba(62, 166, 255, 0.6);
3977
- }
3978
- .track-panel__toolbar .btn--info[data-v-3e019b92] {
3979
- background: rgba(255, 107, 53, 0.2);
3980
- color: #ffaa88;
3981
- border-color: rgba(255, 107, 53, 0.5);
3982
- }
3983
- .track-panel__toolbar .btn--danger[data-v-3e019b92] {
3984
- flex: 0 0 auto;
3985
- width: 36px;
3986
- border-color: rgba(255, 80, 80, 0.4);
3987
- background: rgba(255, 80, 80, 0.1);
3988
- color: #ffaaaa;
3989
- }
3990
- .track-panel__toolbar .btn--danger[data-v-3e019b92]:hover:not(:disabled) {
3991
- background: rgba(255, 80, 80, 0.25);
3992
- color: #fff;
3993
- }
3994
- .track-panel__toolbar .btn--danger[data-v-3e019b92]:disabled {
3995
- opacity: 0.4;
3996
- cursor: not-allowed;
3997
- }
3998
- .track-panel__playback[data-v-3e019b92] {
3999
- padding: 10px 12px;
4000
- border-bottom: 1px solid rgba(255, 255, 255, 0.07);
4001
- }
4002
- .track-panel__playback .playback__track-name[data-v-3e019b92] {
4003
- display: flex;
4004
- align-items: center;
4005
- gap: 6px;
4006
- font-size: 12px;
4007
- color: #9dc8f0;
4008
- margin-bottom: 8px;
4009
- }
4010
- .track-panel__playback .playback__track-name .fa[data-v-3e019b92] {
4011
- color: #00ff88;
4012
- }
4013
- .track-panel__playback .playback__track-name .playback__mode-badge[data-v-3e019b92] {
4014
- background: rgba(0, 255, 136, 0.15);
4015
- color: #00ff88;
4016
- font-size: 10px;
4017
- padding: 1px 6px;
4018
- border-radius: 8px;
4019
- margin-left: 4px;
4020
- }
4021
- .track-panel__playback .playback__controls[data-v-3e019b92] {
4022
- display: flex;
4023
- align-items: center;
4024
- justify-content: center;
4025
- gap: 8px;
4026
- margin-bottom: 8px;
4027
- }
4028
- .track-panel__playback .ctrl-btn[data-v-3e019b92] {
4029
- width: 30px;
4030
- height: 30px;
4031
- border: 1px solid rgba(62, 166, 255, 0.4);
4032
- background: rgba(62, 166, 255, 0.1);
4033
- color: #9dc8f0;
4034
- border-radius: 50%;
4035
- cursor: pointer;
4036
- display: flex;
4037
- align-items: center;
4038
- justify-content: center;
4039
- font-size: 12px;
4040
- transition: all 0.2s;
4041
- }
4042
- .track-panel__playback .ctrl-btn[data-v-3e019b92]:hover {
4043
- background: rgba(62, 166, 255, 0.3);
4044
- color: #fff;
4045
- }
4046
- .track-panel__playback .ctrl-btn--play[data-v-3e019b92] {
4047
- width: 38px;
4048
- height: 38px;
4049
- background: rgba(0, 200, 100, 0.2);
4050
- border-color: rgba(0, 200, 100, 0.6);
4051
- color: #00ff88;
4052
- font-size: 15px;
4053
- }
4054
- .track-panel__playback .ctrl-btn--play[data-v-3e019b92]:hover {
4055
- background: rgba(0, 200, 100, 0.35);
4056
- }
4057
- .track-panel__playback .playback__speed[data-v-3e019b92] {
4058
- display: flex;
4059
- align-items: center;
4060
- gap: 6px;
4061
- margin-bottom: 8px;
4062
- }
4063
- .track-panel__playback .playback__speed .speed-label[data-v-3e019b92] {
4064
- font-size: 11px;
4065
- color: #5a7a9a;
4066
- }
4067
- .track-panel__playback .playback__speed .speed-btns[data-v-3e019b92] {
4068
- display: flex;
4069
- gap: 4px;
4070
- }
4071
- .track-panel__playback .playback__speed .speed-btn[data-v-3e019b92] {
4072
- padding: 2px 7px;
4073
- border: 1px solid rgba(62, 166, 255, 0.3);
4074
- background: rgba(255, 255, 255, 0.04);
4075
- color: #7a9ec0;
4076
- border-radius: 10px;
4077
- font-size: 11px;
4078
- cursor: pointer;
4079
- transition: all 0.2s;
4080
- }
4081
- .track-panel__playback .playback__speed .speed-btn[data-v-3e019b92]:hover {
4082
- background: rgba(62, 166, 255, 0.2);
4083
- color: #fff;
4084
- }
4085
- .track-panel__playback .playback__speed .speed-btn.active[data-v-3e019b92] {
4086
- background: rgba(62, 166, 255, 0.3);
4087
- color: #3ea6ff;
4088
- border-color: #3ea6ff;
4089
- }
4090
- .track-panel__playback .playback__timeline[data-v-3e019b92] {
4091
- display: flex;
4092
- align-items: center;
4093
- gap: 6px;
4094
- }
4095
- .track-panel__playback .playback__timeline .time-label[data-v-3e019b92] {
4096
- font-size: 10px;
4097
- color: #5a7a9a;
4098
- font-family: monospace;
4099
- min-width: 36px;
4100
- text-align: center;
4101
- }
4102
- .track-panel__playback .playback__timeline .progress-slider[data-v-3e019b92] {
4103
- flex: 1;
4104
- height: 4px;
4105
- -webkit-appearance: none;
4106
- appearance: none;
4107
- background: rgba(62, 166, 255, 0.2);
4108
- border-radius: 2px;
4109
- outline: none;
4110
- cursor: pointer;
4111
- }
4112
- .track-panel__playback .playback__timeline .progress-slider[data-v-3e019b92]::-webkit-slider-thumb {
4113
- -webkit-appearance: none;
4114
- width: 12px;
4115
- height: 12px;
4116
- border-radius: 50%;
4117
- background: #3ea6ff;
4118
- cursor: pointer;
4119
- box-shadow: 0 0 6px rgba(62, 166, 255, 0.6);
4120
- }
4121
- .track-panel__playback .playback__timeline .progress-slider[data-v-3e019b92]::-moz-range-thumb {
4122
- width: 12px;
4123
- height: 12px;
4124
- border-radius: 50%;
4125
- background: #3ea6ff;
4126
- border: none;
4127
- cursor: pointer;
4128
- }
4129
- .track-panel__realtime-hint[data-v-3e019b92] {
4130
- padding: 8px 12px;
4131
- border-bottom: 1px solid rgba(255, 255, 255, 0.07);
4132
- display: flex;
4133
- flex-direction: column;
4134
- gap: 4px;
4135
- }
4136
- .track-panel__realtime-hint .realtime-pulse[data-v-3e019b92] {
4137
- display: flex;
4138
- align-items: center;
4139
- gap: 6px;
4140
- font-size: 12px;
4141
- color: #ff6b35;
4142
- }
4143
- .track-panel__realtime-hint .realtime-pulse .fa[data-v-3e019b92] {
4144
- color: #ff6b35;
4145
- }
4146
- .track-panel__realtime-hint .blink-dot[data-v-3e019b92] {
4147
- width: 6px;
4148
- height: 6px;
4149
- border-radius: 50%;
4150
- background: #ff6b35;
4151
- animation: blink-3e019b92 1s ease-in-out infinite;
4152
- }
4153
- .track-panel__realtime-hint .realtime-count[data-v-3e019b92] {
4154
- font-size: 11px;
4155
- color: #7a9ec0;
4156
- }
4157
- .track-panel__realtime-hint .realtime-count strong[data-v-3e019b92] {
4158
- color: #ff6b35;
4159
- }
4160
- @keyframes blink-3e019b92 {
4161
- 0%,
4162
- 100% {
4163
- opacity: 1;
4164
- }
4165
- 50% {
4166
- opacity: 0.2;
4167
- }
4168
- }
4169
- .track-panel__list[data-v-3e019b92] {
4170
- overflow-y: auto;
4171
- max-height: calc(100vh - 340px);
4172
- padding: 6px 0;
4173
- }
4174
- .track-panel__list[data-v-3e019b92]::-webkit-scrollbar {
4175
- width: 4px;
4176
- }
4177
- .track-panel__list[data-v-3e019b92]::-webkit-scrollbar-thumb {
4178
- background: rgba(62, 166, 255, 0.3);
4179
- border-radius: 2px;
4180
- }
4181
- .track-item[data-v-3e019b92] {
4182
- display: flex;
4183
- align-items: center;
4184
- gap: 10px;
4185
- padding: 8px 12px;
4186
- cursor: pointer;
4187
- transition: background 0.15s;
4188
- }
4189
- .track-item[data-v-3e019b92]:hover {
4190
- background: rgba(62, 166, 255, 0.1);
4191
- }
4192
- .track-item--active[data-v-3e019b92] {
4193
- background: rgba(62, 166, 255, 0.18);
4194
- }
4195
- .track-item--realtime .track-item__bar[data-v-3e019b92] {
4196
- background: #ff6b35 !important;
4197
- }
4198
- .track-item__bar[data-v-3e019b92] {
4199
- width: 3px;
4200
- height: 30px;
4201
- border-radius: 2px;
4202
- background: #3ea6ff;
4203
- flex-shrink: 0;
4204
- }
4205
- .track-item__info[data-v-3e019b92] {
4206
- flex: 1;
4207
- min-width: 0;
4208
- }
4209
- .track-item__name[data-v-3e019b92] {
4210
- overflow: hidden;
4211
- font-size: 13px;
4212
- color: #ffffff;
4213
- white-space: nowrap;
4214
- text-overflow: ellipsis;
4215
- display: flex;
4216
- align-items: center;
4217
- gap: 5px;
4218
- }
4219
- .track-item__name .fa[data-v-3e019b92] {
4220
- color: #8ab4d4;
4221
- font-size: 12px;
4222
- }
4223
- .track-item__meta[data-v-3e019b92] {
4224
- font-size: 11px;
4225
- color: #9dc8f0;
4226
- margin-top: 2px;
4227
- display: flex;
4228
- align-items: center;
4229
- gap: 6px;
4230
- }
4231
- .track-item .realtime-tag[data-v-3e019b92] {
4232
- background: rgba(255, 107, 53, 0.2);
4233
- color: #ff6b35;
4234
- font-size: 10px;
4235
- padding: 0 5px;
4236
- border-radius: 6px;
4237
- }
4238
- .track-item__actions[data-v-3e019b92] {
4239
- display: flex;
4240
- gap: 4px;
4241
- flex-shrink: 0;
4242
- opacity: 0;
4243
- transition: opacity 0.15s;
4244
- }
4245
- .track-item:hover .track-item__actions[data-v-3e019b92] {
4246
- opacity: 1;
4247
- }
4248
- .icon-btn[data-v-3e019b92] {
4249
- width: 22px;
4250
- height: 22px;
4251
- border: none;
4252
- background: rgba(255, 255, 255, 0.08);
4253
- color: #9dc8f0;
4254
- border-radius: 3px;
4255
- cursor: pointer;
4256
- display: flex;
4257
- align-items: center;
4258
- justify-content: center;
4259
- font-size: 11px;
4260
- transition: all 0.15s;
4261
- }
4262
- .icon-btn[data-v-3e019b92]:hover {
4263
- background: rgba(62, 166, 255, 0.3);
4264
- color: #fff;
4265
- }
4266
- .icon-btn--danger[data-v-3e019b92]:hover {
4267
- background: rgba(255, 80, 80, 0.35);
4268
- color: #fff;
4269
- }
4270
- .track-panel__empty[data-v-3e019b92] {
4271
- text-align: center;
4272
- padding: 30px 20px;
4273
- color: #4a6a8a;
4274
- }
4275
- .track-panel__empty .fa[data-v-3e019b92] {
4276
- font-size: 32px;
4277
- margin-bottom: 10px;
4278
- display: block;
4279
- }
4280
- .track-panel__empty p[data-v-3e019b92] {
4281
- font-size: 12px;
4282
- margin: 0;
4283
- }
4284
- .track-list-enter-active[data-v-3e019b92],
4285
- .track-list-leave-active[data-v-3e019b92] {
4286
- transition: all 0.25s ease;
4287
- }
4288
- .track-list-enter-from[data-v-3e019b92] {
4289
- opacity: 0;
4290
- transform: translateX(-12px);
4291
- }
4292
- .track-list-leave-to[data-v-3e019b92] {
4293
- opacity: 0;
4294
- transform: translateX(12px);
4295
- }