@ericchen1990/pano-view 2.5.1 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -3
- package/README.zh-CN.md +21 -1
- package/dist/index.cjs +1060 -902
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +38 -2
- package/dist/index.d.ts +38 -2
- package/dist/index.mjs +884 -725
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +90 -2
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -13,6 +13,10 @@
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.pano-viewer {
|
|
16
|
+
--pano-safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
17
|
+
--pano-safe-left: env(safe-area-inset-left, 0px);
|
|
18
|
+
--pano-safe-right: env(safe-area-inset-right, 0px);
|
|
19
|
+
--pano-safe-top: env(safe-area-inset-top, 0px);
|
|
16
20
|
overflow: hidden;
|
|
17
21
|
position: relative;
|
|
18
22
|
}
|
|
@@ -73,6 +77,7 @@
|
|
|
73
77
|
pointer-events: none;
|
|
74
78
|
position: absolute;
|
|
75
79
|
right: 0;
|
|
80
|
+
padding-inline: var(--pano-safe-left) var(--pano-safe-right);
|
|
76
81
|
z-index: 1;
|
|
77
82
|
}
|
|
78
83
|
|
|
@@ -111,6 +116,7 @@
|
|
|
111
116
|
}
|
|
112
117
|
|
|
113
118
|
.pano-context-menu-shell {
|
|
119
|
+
max-width: calc(100% - 1rem - var(--pano-safe-left) - var(--pano-safe-right));
|
|
114
120
|
position: absolute;
|
|
115
121
|
z-index: 20;
|
|
116
122
|
}
|
|
@@ -197,7 +203,7 @@
|
|
|
197
203
|
justify-content: center;
|
|
198
204
|
pointer-events: none;
|
|
199
205
|
position: absolute;
|
|
200
|
-
top: 1rem;
|
|
206
|
+
top: calc(1rem + var(--pano-safe-top));
|
|
201
207
|
}
|
|
202
208
|
|
|
203
209
|
.pano-webvr-toolbar-actions {
|
|
@@ -206,7 +212,7 @@
|
|
|
206
212
|
}
|
|
207
213
|
|
|
208
214
|
.pano-webvr-hint {
|
|
209
|
-
bottom: 1.25rem;
|
|
215
|
+
bottom: calc(1.25rem + var(--pano-safe-bottom));
|
|
210
216
|
color: #fff;
|
|
211
217
|
filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))
|
|
212
218
|
drop-shadow(0 1px 2px rgb(0 0 0 / 0.1));
|
|
@@ -333,6 +339,88 @@
|
|
|
333
339
|
z-index: 2;
|
|
334
340
|
}
|
|
335
341
|
|
|
342
|
+
.pano-media-activation {
|
|
343
|
+
align-items: center;
|
|
344
|
+
background:
|
|
345
|
+
radial-gradient(circle at center, rgb(7 19 22 / 0.16), rgb(2 6 7 / 0.76)),
|
|
346
|
+
linear-gradient(135deg, rgb(7 19 22 / 0.32), rgb(2 6 7 / 0.72));
|
|
347
|
+
display: flex;
|
|
348
|
+
inset: 0;
|
|
349
|
+
justify-content: center;
|
|
350
|
+
padding: var(--pano-safe-top) var(--pano-safe-right) var(--pano-safe-bottom)
|
|
351
|
+
var(--pano-safe-left);
|
|
352
|
+
position: absolute;
|
|
353
|
+
z-index: 30;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.pano-media-activation-button {
|
|
357
|
+
backdrop-filter: blur(12px);
|
|
358
|
+
background: rgb(7 19 22 / 0.82);
|
|
359
|
+
border: 1px solid rgb(117 203 211 / 0.72);
|
|
360
|
+
border-radius: 999px;
|
|
361
|
+
box-shadow: 0 12px 36px rgb(0 0 0 / 0.34), inset 0 0 0 1px rgb(255 255 255 / 0.06);
|
|
362
|
+
color: #f5fbfc;
|
|
363
|
+
cursor: pointer;
|
|
364
|
+
font: 600 0.78rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
|
|
365
|
+
letter-spacing: 0.08em;
|
|
366
|
+
min-height: 44px;
|
|
367
|
+
padding: 0.75rem 1.1rem;
|
|
368
|
+
text-transform: uppercase;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.pano-media-activation-button:focus-visible {
|
|
372
|
+
outline: 2px solid #75cbd3;
|
|
373
|
+
outline-offset: 3px;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
@media (max-width: 600px) {
|
|
377
|
+
.pano-video-controls {
|
|
378
|
+
bottom: calc(0.75rem + var(--pano-safe-bottom)) !important;
|
|
379
|
+
gap: 0.25rem;
|
|
380
|
+
left: calc(0.75rem + var(--pano-safe-left)) !important;
|
|
381
|
+
right: calc(0.75rem + var(--pano-safe-right)) !important;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.pano-video-chrome-button {
|
|
385
|
+
height: 44px;
|
|
386
|
+
min-width: 44px;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.pano-video-chrome-menu-item,
|
|
390
|
+
.pano-video-chrome-menu-action {
|
|
391
|
+
min-height: 44px;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.pano-video-chrome-menu {
|
|
395
|
+
max-width: min(18rem, calc(100vw - 2rem - var(--pano-safe-left) - var(--pano-safe-right)));
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.pano-webvr-setup {
|
|
399
|
+
max-height: calc(100% - var(--pano-safe-top) - var(--pano-safe-bottom) - 1.5rem);
|
|
400
|
+
overflow-y: auto;
|
|
401
|
+
width: min(22rem, calc(100% - var(--pano-safe-left) - var(--pano-safe-right) - 1.5rem));
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
@media (max-height: 480px) and (orientation: landscape) {
|
|
406
|
+
.pano-video-controls {
|
|
407
|
+
bottom: calc(0.5rem + var(--pano-safe-bottom)) !important;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.pano-video-chrome-label,
|
|
411
|
+
.pano-video-time {
|
|
412
|
+
display: none;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.pano-webvr-toolbar {
|
|
416
|
+
top: calc(0.5rem + var(--pano-safe-top));
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.pano-webvr-hint {
|
|
420
|
+
bottom: calc(0.5rem + var(--pano-safe-bottom));
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
|
|
336
424
|
.pano-video-time {
|
|
337
425
|
font-variant-numeric: tabular-nums;
|
|
338
426
|
min-width: 2.125rem;
|