@preference-sl/pref-viewer 2.16.0-beta.8 → 2.16.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/package.json +6 -6
- package/src/babylonjs-controller.js +82 -102
- package/src/localization/translations.js +5 -17
- package/src/material-utils.js +72 -0
- package/src/pref-viewer-3d.js +24 -8
- package/src/pref-viewer-menu-3d.js +133 -260
- package/src/pref-viewer.js +3 -3
- package/src/render-math.js +127 -0
- package/src/styles.js +71 -162
package/src/pref-viewer.js
CHANGED
|
@@ -476,10 +476,10 @@ export default class PrefViewer extends HTMLElement {
|
|
|
476
476
|
}
|
|
477
477
|
|
|
478
478
|
/**
|
|
479
|
-
* Applies render
|
|
480
|
-
*
|
|
479
|
+
* Applies render settings via PrefViewer3D.
|
|
480
|
+
* Reload-capable toggles lock the menu while they run; partial highlight/lighting updates are forwarded immediately.
|
|
481
481
|
* @private
|
|
482
|
-
* @param {object} settings - Partial render settings
|
|
482
|
+
* @param {object} settings - Partial render settings requested by the menu.
|
|
483
483
|
* @returns {Promise<void>}
|
|
484
484
|
*/
|
|
485
485
|
async #applyRenderSettings(settings) {
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Pure math utilities used by the lighting cycle and hardware scaling logic.
|
|
3
|
+
* No Babylon.js imports — safe to use in Node/SSR environments and in tests without mocks.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Clamps a number to the [0, 1] range.
|
|
8
|
+
* Returns 0.5 for non-finite inputs (NaN, ±Infinity) so callers get a safe mid-point fallback.
|
|
9
|
+
* @param {number} value - The value to clamp.
|
|
10
|
+
* @returns {number} A number in [0, 1].
|
|
11
|
+
*/
|
|
12
|
+
export function clamp01(value) {
|
|
13
|
+
if (!Number.isFinite(value)) {
|
|
14
|
+
return 0.5;
|
|
15
|
+
}
|
|
16
|
+
return Math.min(1, Math.max(0, value));
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Linearly interpolates between two values.
|
|
21
|
+
* The interpolation amount is clamped to [0, 1] before use.
|
|
22
|
+
* @param {number} from - Start value (returned when amount ≤ 0).
|
|
23
|
+
* @param {number} to - End value (returned when amount ≥ 1).
|
|
24
|
+
* @param {number} amount - Blend factor in [0, 1].
|
|
25
|
+
* @returns {number} Interpolated value between `from` and `to`.
|
|
26
|
+
*/
|
|
27
|
+
export function lerp(from, to, amount) {
|
|
28
|
+
const t = clamp01(amount);
|
|
29
|
+
return from + (to - from) * t;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Evaluates a bell-curve (half sine arc) over [0, 1].
|
|
34
|
+
* Returns 0 at both endpoints and 1 at the midpoint (x = 0.5).
|
|
35
|
+
* Used to model the intensity rise and fall of sunlight across the day.
|
|
36
|
+
* @param {number} x - Input in [0, 1]; clamped internally.
|
|
37
|
+
* @returns {number} Bell-curve output in [0, 1].
|
|
38
|
+
*/
|
|
39
|
+
function bellCurve(x) {
|
|
40
|
+
const clamped = clamp01(x);
|
|
41
|
+
return Math.sin(clamped * Math.PI);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Returns a unit vector for the given (x, y, z) direction.
|
|
46
|
+
* Falls back to the original vector with length 1 when the input is the zero vector.
|
|
47
|
+
* @param {number} x
|
|
48
|
+
* @param {number} y
|
|
49
|
+
* @param {number} z
|
|
50
|
+
* @returns {{x: number, y: number, z: number}} Normalized direction vector.
|
|
51
|
+
*/
|
|
52
|
+
function normalizeDirection(x, y, z) {
|
|
53
|
+
const length = Math.hypot(x, y, z) || 1;
|
|
54
|
+
return {
|
|
55
|
+
x: x / length,
|
|
56
|
+
y: y / length,
|
|
57
|
+
z: z / length,
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Computes the Babylon.js `hardwareScalingLevel` needed to render at the requested base
|
|
63
|
+
* resolution on a HiDPI display.
|
|
64
|
+
*
|
|
65
|
+
* Babylon's hardware scaling is the inverse of the device pixel ratio: a level of 0.5 on a
|
|
66
|
+
* 2× display renders at native resolution. This helper applies the base scaling factor (which
|
|
67
|
+
* may already downscale for performance on low-end hardware) on top of the device pixel ratio.
|
|
68
|
+
*
|
|
69
|
+
* Both inputs are validated and fall back to 1 when zero, negative, or non-finite.
|
|
70
|
+
* @param {number} [baseScaling=1] - Desired base scaling level (1 = full resolution, >1 = downscaled).
|
|
71
|
+
* @param {number} [pixelRatio=1] - Device pixel ratio (`window.devicePixelRatio`).
|
|
72
|
+
* @returns {number} Hardware scaling level to pass to `engine.setHardwareScalingLevel()`.
|
|
73
|
+
*/
|
|
74
|
+
export function getAdaptiveHardwareScalingLevel(baseScaling = 1, pixelRatio = 1) {
|
|
75
|
+
const safeBaseScaling = Number.isFinite(baseScaling) && baseScaling > 0 ? baseScaling : 1;
|
|
76
|
+
const safePixelRatio = Number.isFinite(pixelRatio) && pixelRatio > 0 ? pixelRatio : 1;
|
|
77
|
+
return safeBaseScaling / safePixelRatio;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Computes a lighting profile for a given time of day, used to drive the scene's directional
|
|
82
|
+
* lights, environment intensity, and tonemapping curve.
|
|
83
|
+
*
|
|
84
|
+
* The model follows a simplified solar arc: sunrise at 06:15 and sunset at 20:15 (fractional
|
|
85
|
+
* hours). Day factor peaks at solar noon and falls to zero outside daylight hours. Sun and moon
|
|
86
|
+
* directions are antipodal unit vectors derived from the sun phase angle.
|
|
87
|
+
* @param {number} [timeOfDay=0.5] - Normalized time in [0, 1] where 0 = midnight and 1 = next midnight.
|
|
88
|
+
* Values outside [0, 1] are clamped.
|
|
89
|
+
* @returns {{
|
|
90
|
+
* timeOfDay: number,
|
|
91
|
+
* timeHours: number,
|
|
92
|
+
* sunPhase: number,
|
|
93
|
+
* solarAzimuth: number,
|
|
94
|
+
* solarElevation: number,
|
|
95
|
+
* dayFactor: number,
|
|
96
|
+
* nightFactor: number,
|
|
97
|
+
* sunDirection: {x: number, y: number, z: number},
|
|
98
|
+
* moonDirection: {x: number, y: number, z: number}
|
|
99
|
+
* }} Lighting profile snapshot for the requested time.
|
|
100
|
+
*/
|
|
101
|
+
export function getLightingCycleProfile(timeOfDay = 0.5) {
|
|
102
|
+
const normalizedTime = clamp01(timeOfDay);
|
|
103
|
+
const timeHours = normalizedTime * 24;
|
|
104
|
+
const sunriseHour = 6.25;
|
|
105
|
+
const sunsetHour = 20.25;
|
|
106
|
+
const daylightProgress = clamp01((timeHours - sunriseHour) / (sunsetHour - sunriseHour));
|
|
107
|
+
const dayFactor = timeHours >= sunriseHour && timeHours <= sunsetHour ? Math.pow(bellCurve(daylightProgress), 0.88) : 0;
|
|
108
|
+
const nightFactor = 1 - dayFactor;
|
|
109
|
+
const solarArc = dayFactor > 0 ? Math.pow(dayFactor, 0.72) : 0;
|
|
110
|
+
const solarAzimuth = lerp(-Math.PI * 0.82, Math.PI * 0.82, daylightProgress);
|
|
111
|
+
const solarElevation = lerp(-0.18, 1.18, solarArc);
|
|
112
|
+
const sunPhase = normalizedTime * Math.PI * 2 - Math.PI / 2;
|
|
113
|
+
const sunDirection = normalizeDirection(-Math.cos(sunPhase), -Math.sin(sunPhase), -0.35);
|
|
114
|
+
const moonDirection = normalizeDirection(-sunDirection.x, -sunDirection.y, -sunDirection.z);
|
|
115
|
+
|
|
116
|
+
return {
|
|
117
|
+
timeOfDay: normalizedTime,
|
|
118
|
+
timeHours,
|
|
119
|
+
sunPhase,
|
|
120
|
+
solarAzimuth,
|
|
121
|
+
solarElevation,
|
|
122
|
+
dayFactor,
|
|
123
|
+
nightFactor,
|
|
124
|
+
sunDirection,
|
|
125
|
+
moonDirection,
|
|
126
|
+
};
|
|
127
|
+
}
|
package/src/styles.js
CHANGED
|
@@ -3,22 +3,6 @@ export const PrefViewerStyleVariables = {
|
|
|
3
3
|
fontFamily: "'Roboto', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
|
|
4
4
|
};
|
|
5
5
|
|
|
6
|
-
// Default palette colors for illumination color picker
|
|
7
|
-
export const DEFAULT_ILLUMINATION_PALETTE = [
|
|
8
|
-
"#ffffff", // White
|
|
9
|
-
"#ff6700", // Orange (default)
|
|
10
|
-
"#ff0000", // Red
|
|
11
|
-
"#00ff00", // Green
|
|
12
|
-
"#0000ff", // Blue
|
|
13
|
-
"#ffff00", // Yellow
|
|
14
|
-
"#ff00ff", // Magenta
|
|
15
|
-
"#00ffff", // Cyan
|
|
16
|
-
"#ffb6c1", // Light Pink
|
|
17
|
-
"#98fb98", // Light Green
|
|
18
|
-
"#87ceeb", // Light Blue
|
|
19
|
-
"#dda0dd", // Plum
|
|
20
|
-
];
|
|
21
|
-
|
|
22
6
|
export const PrefViewerStyles = `
|
|
23
7
|
:host .pref-viewer-wrapper {
|
|
24
8
|
display: grid !important;
|
|
@@ -120,7 +104,8 @@ export const PrefViewerMenu3DStyles = `
|
|
|
120
104
|
--text-color: #ffffff;
|
|
121
105
|
--muted-color: #b2b2b2;
|
|
122
106
|
--accent-color: ${PrefViewerStyleVariables.colorPrimary};
|
|
123
|
-
|
|
107
|
+
|
|
108
|
+
--separator-border: 1px solid rgba(255, 255, 255, 0.1);
|
|
124
109
|
|
|
125
110
|
--toggle-margin: 16px;
|
|
126
111
|
--toggle-bg-color: rgba(19, 21, 28, 0.6);
|
|
@@ -153,6 +138,13 @@ export const PrefViewerMenu3DStyles = `
|
|
|
153
138
|
--switch-control-width: calc((var(--switch-control-thumb-size) * 2) + (var(--switch-control-bar-spacing) * 2));
|
|
154
139
|
--switch-control-height: calc(var(--switch-control-thumb-size) + (var(--switch-control-bar-spacing) * 2));
|
|
155
140
|
|
|
141
|
+
--slider-thumb-size: 18px;
|
|
142
|
+
--slider-thumb-color: #ffffff;
|
|
143
|
+
--slider-thumb-border: 1px solid rgba(0, 0, 0, 0.25);
|
|
144
|
+
--slider-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
|
|
145
|
+
--slider-bar-height: 12px;
|
|
146
|
+
--slider-bar-border: 1px solid rgba(255, 255, 255, 0.5);
|
|
147
|
+
|
|
156
148
|
position: absolute;
|
|
157
149
|
top: var(--toggle-margin);
|
|
158
150
|
right: var(--toggle-margin);
|
|
@@ -222,7 +214,7 @@ export const PrefViewerMenu3DStyles = `
|
|
|
222
214
|
}
|
|
223
215
|
|
|
224
216
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-header {
|
|
225
|
-
margin-bottom: var(--panel-spacing
|
|
217
|
+
margin-bottom: var(--panel-spacing);
|
|
226
218
|
}
|
|
227
219
|
|
|
228
220
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-header>.menu-title {
|
|
@@ -249,11 +241,11 @@ export const PrefViewerMenu3DStyles = `
|
|
|
249
241
|
justify-content: space-between;
|
|
250
242
|
gap: var(--panel-spacing-large);
|
|
251
243
|
padding: var(--panel-spacing) 0;
|
|
252
|
-
border-bottom:
|
|
244
|
+
border-bottom: var(--separator-border);
|
|
253
245
|
}
|
|
254
246
|
|
|
255
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch:
|
|
256
|
-
border-
|
|
247
|
+
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch:first-child {
|
|
248
|
+
border-top: var(--separator-border);
|
|
257
249
|
}
|
|
258
250
|
|
|
259
251
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-copy {
|
|
@@ -267,18 +259,6 @@ export const PrefViewerMenu3DStyles = `
|
|
|
267
259
|
font-weight: var(--font-weight-medium);
|
|
268
260
|
}
|
|
269
261
|
|
|
270
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-title::after {
|
|
271
|
-
content: " *";
|
|
272
|
-
color: var(--accent-color);
|
|
273
|
-
font-weight: var(--font-weight-bold);
|
|
274
|
-
opacity: 0;
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-pending] .menu-switch-title::after {
|
|
278
|
-
opacity: 1;
|
|
279
|
-
transition: opacity 0.2s ease;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
262
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch small {
|
|
283
263
|
color: var(--muted-color);
|
|
284
264
|
font-size: var(--font-size-small);
|
|
@@ -352,80 +332,19 @@ export const PrefViewerMenu3DStyles = `
|
|
|
352
332
|
gap: calc(var(--panel-spacing) / 2);
|
|
353
333
|
}
|
|
354
334
|
|
|
355
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending {
|
|
356
|
-
font-size: var(--font-size-small);
|
|
357
|
-
text-transform: uppercase;
|
|
358
|
-
letter-spacing: 0.08em;
|
|
359
|
-
color: var(--accent-color);
|
|
360
|
-
font-weight: var(--font-weight-medium);
|
|
361
|
-
display: block;
|
|
362
|
-
opacity: 1;
|
|
363
|
-
transition: opacity 0.2s ease;
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending::before {
|
|
367
|
-
content: "* ";
|
|
368
|
-
font-size: var(--font-size-medium);
|
|
369
|
-
color: var(--accent-color);
|
|
370
|
-
font-weight: var(--font-weight-bold);
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending[hidden] {
|
|
374
|
-
opacity: 0;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-status {
|
|
378
|
-
font-size: var(--font-size-small);
|
|
379
|
-
color: var(--status-color);
|
|
380
|
-
display: none;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
pref-viewer-menu-3d[data-status="visible"]>.menu-wrapper>.menu-panel>.menu-footer>.menu-status {
|
|
384
|
-
display: block;
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply {
|
|
388
|
-
border: none;
|
|
389
|
-
border-radius: var(--button-radius);
|
|
390
|
-
padding: round(down, calc(var(--panel-spacing) * 0.625), 1px) var(--panel-spacing);
|
|
391
|
-
font-size: var(--button-font-size);
|
|
392
|
-
font-weight: var(--button-font-weight);
|
|
393
|
-
background: var(--accent-color);
|
|
394
|
-
color: var(--button-font-color);
|
|
395
|
-
cursor: pointer;
|
|
396
|
-
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply:not(:disabled):hover {
|
|
400
|
-
box-shadow: var(--button-shadow);
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply:disabled {
|
|
404
|
-
cursor: not-allowed;
|
|
405
|
-
opacity: 0.55;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
pref-viewer-menu-3d[data-applying]>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply {
|
|
409
|
-
opacity: 0.75;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
/* Color Slider Styles */
|
|
413
335
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker {
|
|
414
336
|
display: flex;
|
|
415
337
|
flex-direction: column;
|
|
416
|
-
gap:
|
|
338
|
+
gap: calc(var(--panel-spacing) / 2);
|
|
417
339
|
padding: var(--panel-spacing) 0;
|
|
418
|
-
border-bottom:
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker:last-child {
|
|
422
|
-
border-bottom: none;
|
|
340
|
+
border-bottom: var(--separator-border);
|
|
423
341
|
}
|
|
424
342
|
|
|
425
343
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row {
|
|
426
344
|
display: flex;
|
|
427
345
|
align-items: center;
|
|
428
346
|
justify-content: space-between;
|
|
347
|
+
gap: calc(var(--panel-spacing) / 2);
|
|
429
348
|
}
|
|
430
349
|
|
|
431
350
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row>.color-picker-label {
|
|
@@ -435,10 +354,10 @@ export const PrefViewerMenu3DStyles = `
|
|
|
435
354
|
}
|
|
436
355
|
|
|
437
356
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row>.color-preview {
|
|
438
|
-
width:
|
|
439
|
-
|
|
440
|
-
border-radius:
|
|
441
|
-
border:
|
|
357
|
+
width: var(--switch-control-width);
|
|
358
|
+
align-self: stretch;
|
|
359
|
+
border-radius: calc(var(--slider-bar-height) / 2);
|
|
360
|
+
border: var(--slider-bar-border);
|
|
442
361
|
flex-shrink: 0;
|
|
443
362
|
}
|
|
444
363
|
|
|
@@ -446,35 +365,38 @@ export const PrefViewerMenu3DStyles = `
|
|
|
446
365
|
-webkit-appearance: none;
|
|
447
366
|
appearance: none;
|
|
448
367
|
width: 100%;
|
|
449
|
-
height:
|
|
450
|
-
|
|
451
|
-
|
|
368
|
+
height: var(--slider-bar-height);
|
|
369
|
+
box-sizing: border-box;
|
|
370
|
+
border-radius: calc(var(--slider-bar-height) / 2);
|
|
452
371
|
background: linear-gradient(to right,
|
|
453
372
|
hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%),
|
|
454
373
|
hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%),
|
|
455
374
|
hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
|
|
456
375
|
hsl(360,100%,50%));
|
|
376
|
+
border: var(--slider-bar-border);
|
|
457
377
|
outline: none;
|
|
378
|
+
margin: 0;
|
|
379
|
+
cursor: pointer;
|
|
458
380
|
}
|
|
459
381
|
|
|
460
382
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider::-webkit-slider-thumb {
|
|
461
383
|
-webkit-appearance: none;
|
|
462
|
-
width:
|
|
463
|
-
height:
|
|
384
|
+
width: var(--slider-thumb-size);
|
|
385
|
+
height: var(--slider-thumb-size);
|
|
464
386
|
border-radius: 50%;
|
|
465
|
-
background:
|
|
466
|
-
border:
|
|
467
|
-
box-shadow:
|
|
387
|
+
background: var(--slider-thumb-color);
|
|
388
|
+
border: var(--slider-thumb-border);
|
|
389
|
+
box-shadow: var(--slider-thumb-shadow);
|
|
468
390
|
cursor: pointer;
|
|
469
391
|
}
|
|
470
392
|
|
|
471
393
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider::-moz-range-thumb {
|
|
472
|
-
width:
|
|
473
|
-
height:
|
|
394
|
+
width: var(--slider-thumb-size);
|
|
395
|
+
height: var(--slider-thumb-size);
|
|
474
396
|
border-radius: 50%;
|
|
475
|
-
background:
|
|
476
|
-
border:
|
|
477
|
-
box-shadow:
|
|
397
|
+
background: var(--slider-thumb-color);
|
|
398
|
+
border: var(--slider-thumb-border);
|
|
399
|
+
box-shadow: var(--slider-thumb-shadow);
|
|
478
400
|
cursor: pointer;
|
|
479
401
|
}
|
|
480
402
|
|
|
@@ -486,23 +408,16 @@ export const PrefViewerMenu3DStyles = `
|
|
|
486
408
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider {
|
|
487
409
|
display: flex;
|
|
488
410
|
flex-direction: column;
|
|
489
|
-
gap:
|
|
411
|
+
gap: calc(var(--panel-spacing) / 2);
|
|
490
412
|
padding: var(--panel-spacing) 0;
|
|
491
|
-
border-bottom:
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider[data-pending] .lighting-slider-label::after {
|
|
495
|
-
content: "•";
|
|
496
|
-
margin-left: 8px;
|
|
497
|
-
color: var(--accent-color);
|
|
498
|
-
font-size: 1.1em;
|
|
413
|
+
border-bottom: var(--separator-border);
|
|
499
414
|
}
|
|
500
415
|
|
|
501
416
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row {
|
|
502
417
|
display: flex;
|
|
503
418
|
align-items: center;
|
|
504
419
|
justify-content: space-between;
|
|
505
|
-
gap:
|
|
420
|
+
gap: calc(var(--panel-spacing) / 2);
|
|
506
421
|
}
|
|
507
422
|
|
|
508
423
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row>.lighting-slider-label {
|
|
@@ -522,37 +437,41 @@ export const PrefViewerMenu3DStyles = `
|
|
|
522
437
|
-webkit-appearance: none;
|
|
523
438
|
appearance: none;
|
|
524
439
|
width: 100%;
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
background:
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
440
|
+
box-sizing: border-box;
|
|
441
|
+
height: var(--slider-bar-height);
|
|
442
|
+
border-radius: calc(var(--slider-bar-height) / 2);
|
|
443
|
+
background: linear-gradient(to right,
|
|
444
|
+
rgba(56, 66, 115, 0.95) 0%,
|
|
445
|
+
rgba(118, 165, 255, 0.92) 10%,
|
|
446
|
+
rgba(255, 214, 120, 0.95) 30%,
|
|
447
|
+
rgba(255, 244, 214, 0.95) 50%,
|
|
448
|
+
rgba(255, 214, 120, 0.95) 70%,
|
|
449
|
+
rgba(118, 165, 255, 0.92) 90%,
|
|
450
|
+
rgba(56, 66, 115, 0.95) 100%);
|
|
451
|
+
border: var(--slider-bar-border);
|
|
535
452
|
outline: none;
|
|
453
|
+
margin: 0;
|
|
454
|
+
cursor: pointer;
|
|
536
455
|
}
|
|
537
456
|
|
|
538
457
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider::-webkit-slider-thumb {
|
|
539
458
|
-webkit-appearance: none;
|
|
540
|
-
width:
|
|
541
|
-
height:
|
|
459
|
+
width: var(--slider-thumb-size);
|
|
460
|
+
height: var(--slider-thumb-size);
|
|
542
461
|
border-radius: 50%;
|
|
543
|
-
background:
|
|
544
|
-
border:
|
|
545
|
-
box-shadow:
|
|
462
|
+
background: var(--slider-thumb-color);
|
|
463
|
+
border: var(--slider-thumb-border);
|
|
464
|
+
box-shadow: var(--slider-thumb-shadow);
|
|
546
465
|
cursor: pointer;
|
|
547
466
|
}
|
|
548
467
|
|
|
549
468
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider::-moz-range-thumb {
|
|
550
|
-
width:
|
|
551
|
-
height:
|
|
469
|
+
width: var(--slider-thumb-size);
|
|
470
|
+
height: var(--slider-thumb-size);
|
|
552
471
|
border-radius: 50%;
|
|
553
|
-
background:
|
|
554
|
-
border:
|
|
555
|
-
box-shadow:
|
|
472
|
+
background: var(--slider-thumb-color);
|
|
473
|
+
border: var(--slider-thumb-border);
|
|
474
|
+
box-shadow: var(--slider-thumb-shadow);
|
|
556
475
|
cursor: pointer;
|
|
557
476
|
}
|
|
558
477
|
|
|
@@ -571,33 +490,23 @@ export const PrefViewerMenu3DStyles = `
|
|
|
571
490
|
|
|
572
491
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button {
|
|
573
492
|
appearance: none;
|
|
574
|
-
|
|
575
|
-
border
|
|
576
|
-
|
|
493
|
+
background: rgba(255, 255, 255, 0.1);
|
|
494
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
495
|
+
border-radius: var(--button-radius);
|
|
496
|
+
padding: calc(var(--panel-spacing) * 0.5) var(--panel-spacing);
|
|
577
497
|
color: var(--text-color);
|
|
578
|
-
padding: 6px 12px;
|
|
579
498
|
font-size: var(--font-size-small);
|
|
580
499
|
font-weight: var(--font-weight-medium);
|
|
500
|
+
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
|
|
581
501
|
cursor: pointer;
|
|
582
|
-
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
|
583
502
|
}
|
|
584
503
|
|
|
585
504
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:hover,
|
|
586
505
|
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:focus-visible {
|
|
587
|
-
background: rgba(255, 255, 255, 0.
|
|
588
|
-
border-color: rgba(255, 255, 255, 0.
|
|
589
|
-
transform: translateY(-1px);
|
|
506
|
+
background: rgba(255, 255, 255, 0.15);
|
|
507
|
+
border-color: rgba(255, 255, 255, 0.3);
|
|
590
508
|
outline: none;
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider[data-playing] .lighting-slider {
|
|
594
|
-
background:
|
|
595
|
-
linear-gradient(to right,
|
|
596
|
-
rgba(255, 220, 132, 0.96) 0%,
|
|
597
|
-
rgba(255, 187, 88, 0.98) 18%,
|
|
598
|
-
rgba(255, 247, 226, 0.96) 50%,
|
|
599
|
-
rgba(112, 154, 255, 0.92) 82%,
|
|
600
|
-
rgba(45, 55, 102, 0.98) 100%);
|
|
509
|
+
box-shadow: var(--button-shadow);
|
|
601
510
|
}
|
|
602
511
|
`;
|
|
603
512
|
|