@preference-sl/pref-viewer 2.16.0-beta.9 → 2.16.1

package/src/styles.js

@@ -1,25 +1,71 @@
-export const PrefViewerStyleVariables = {
-    colorPrimary: "#ff6700", // Default accent color - can be overridden via attribute
+/**
+ * localStorage key used to persist supported PrefViewer runtime style overrides.
+ * @type {string}
+ */
+export const PREF_VIEWER_STYLES_STORAGE_KEY = "pref-viewer/styles";
+
+/**
+ * Default style variables used before host overrides or persisted values are applied.
+ * @type {{colorPrimary: string, fontFamily: string, fontSize: string}}
+ */
+const PrefViewerDefaultStyleVariables = {
+    colorPrimary: "#ff6700",
     fontFamily: "'Roboto', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
+    fontSize: "15px",
 };
 
-// Default palette colors for illumination color picker
-export const DEFAULT_ILLUMINATION_PALETTE = [
-    "#ffffff", // White
-    "#ff6700", // Orange (default)
-    "#ff0000", // Red
-    "#00ff00", // Green
-    "#0000ff", // Blue
-    "#ffff00", // Yellow
-    "#ff00ff", // Magenta
-    "#00ffff", // Cyan
-    "#ffb6c1", // Light Pink
-    "#98fb98", // Light Green
-    "#87ceeb", // Light Blue
-    "#dda0dd", // Plum
-];
+/**
+ * Reads persisted runtime style overrides in browser contexts.
+ * Only `colorPrimary` is consumed by `PrefViewerStyleVariables`; other keys are ignored by the host component.
+ * @returns {object} Parsed persisted style overrides, or an empty object when unavailable or invalid.
+ */
+function readPersistedStyleVariables() {
+    if (typeof window === "undefined") {
+        return {};
+    }
+    try {
+        const serialized = window.localStorage?.getItem(PREF_VIEWER_STYLES_STORAGE_KEY);
+        return serialized ? JSON.parse(serialized) : {};
+    } catch (_error) {
+        return {};
+    }
+}
+
+/** @type {object} Persisted raw style overrides loaded during module initialization. */
+const persistedStyleVariables = readPersistedStyleVariables();
+
+/**
+ * Shared style variables consumed by PrefViewer CSS templates and Babylon defaults.
+ * `colorPrimary` can be overridden at runtime through `<pref-viewer styles>`, `viewer.styles`, `viewer.setStyles()`, or `loadConfig({ styles })`.
+ * @type {{colorPrimary: string, fontFamily: string, fontSize: string}}
+ */
+export const PrefViewerStyleVariables = {
+    ...PrefViewerDefaultStyleVariables,
+    colorPrimary: typeof persistedStyleVariables.colorPrimary === "string" && persistedStyleVariables.colorPrimary.trim().length > 0
+        ? persistedStyleVariables.colorPrimary.trim()
+        : PrefViewerDefaultStyleVariables.colorPrimary,
+};
 
+/** Root `<pref-viewer>` host styles. Uses `--pref-viewer-color-primary` so `setStyles({ colorPrimary })` can update mounted instances. */
 export const PrefViewerStyles = `
+    :host {
+        all: initial;
+        display: block;
+        font-family: ${PrefViewerStyleVariables.fontFamily};
+        font-size: ${PrefViewerStyleVariables.fontSize};
+        line-height: 1.2;
+        color: #000000;
+    }
+
+    :host *, :host *::before, :host *::after {
+        box-sizing: border-box;
+    }
+
+    :host ::selection {
+        background: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
+        color: #ffffff;
+    }
+
     :host .pref-viewer-wrapper {
         display: grid !important;
         position: relative;
@@ -66,7 +112,6 @@ export const PrefViewer2DStyles = `
         display: block;
         position: relative;
         outline: none;
-        box-sizing: border-box;
     }
 
     pref-viewer-2d>div>svg {
@@ -83,9 +128,6 @@ export const PrefViewer3DStyles = `
         display: none;
     }
 
-    pref-viewer-3d[show-animation-menu="false"] > div.animation-menu {
-        display: none;
-    }
 
     pref-viewer-3d {
         grid-column: 1;
@@ -105,7 +147,6 @@ export const PrefViewer3DStyles = `
         display: block;
         position: relative;
         outline: none;
-        box-sizing: border-box;
     }
 `;
 
@@ -114,13 +155,14 @@ export const PrefViewerMenu3DStyles = `
         --font-family: ${PrefViewerStyleVariables.fontFamily};
         --font-weight-bold: 600;
         --font-weight-medium: 500;
-        --font-size-large: 1.1rem;
-        --font-size-medium: 0.95rem;
-        --font-size-small: 0.75rem;
+        --font-size-large: calc(1.1 * ${PrefViewerStyleVariables.fontSize});
+        --font-size-medium: calc(0.95 * ${PrefViewerStyleVariables.fontSize});
+        --font-size-small: calc(0.75 * ${PrefViewerStyleVariables.fontSize});
         --text-color: #ffffff;
         --muted-color: #b2b2b2;
-        --accent-color: ${PrefViewerStyleVariables.colorPrimary};
-        --status-color: #ffb0b0;
+        --accent-color: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
+
+        --separator-border: 1px solid rgba(255, 255, 255, 0.1);
         
         --toggle-margin: 16px;
         --toggle-bg-color: rgba(19, 21, 28, 0.6);
@@ -136,7 +178,7 @@ export const PrefViewerMenu3DStyles = `
         --button-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
         --button-radius: 8px;
 
-        --panel-width: 280px;
+        --panel-width: 300px;
         --panel-spacing: 16px;
         --panel-spacing-large: calc(var(--panel-spacing) * 1.5);
         --panel-bg-color: rgba(19, 21, 28, 0.85);
@@ -153,10 +195,23 @@ export const PrefViewerMenu3DStyles = `
         --switch-control-width: calc((var(--switch-control-thumb-size) * 2) + (var(--switch-control-bar-spacing) * 2));
         --switch-control-height: calc(var(--switch-control-thumb-size) + (var(--switch-control-bar-spacing) * 2));
 
+        --slider-thumb-size: 18px;
+        --slider-thumb-color: #ffffff;
+        --slider-thumb-border: 1px solid rgba(0, 0, 0, 0.25);
+        --slider-thumb-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+        --slider-bar-height: 12px;
+        --slider-bar-border: 1px solid rgba(255, 255, 255, 0.5);
+
         position: absolute;
         top: var(--toggle-margin);
         right: var(--toggle-margin);
         z-index: 1200;
+        /* The closed panel keeps its place in the flex column (opacity:0, not display:none), so
+           this host spans the panel's full 300px x 70vh even when only the toggle is showing.
+           Left clickable, that empty space is an invisible catcher over the right edge of the
+           viewer: it swallowed the XR entry button and orbiting alike. The toggle and the panel
+           each flip back to auto when they become usable, so nothing else is needed. */
+        pointer-events: none;
 
         font-family: var(--font-family);
     }
@@ -222,7 +277,7 @@ export const PrefViewerMenu3DStyles = `
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-header {
-        margin-bottom: var(--panel-spacing-large);
+        margin-bottom: var(--panel-spacing);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-header>.menu-title {
@@ -249,11 +304,11 @@ export const PrefViewerMenu3DStyles = `
         justify-content: space-between;
         gap: var(--panel-spacing-large);
         padding: var(--panel-spacing) 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: var(--separator-border);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch:last-child {
-        border-bottom: none;
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch:first-child {
+        border-top: var(--separator-border);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch>.menu-switch-copy {
@@ -267,18 +322,6 @@ export const PrefViewerMenu3DStyles = `
         font-weight: var(--font-weight-medium);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch .menu-switch-title::after {
-        content: " *";
-        color: var(--accent-color);
-        font-weight: var(--font-weight-bold);
-        opacity: 0;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-pending] .menu-switch-title::after {
-        opacity: 1;
-        transition: opacity 0.2s ease;
-    }
-
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch small {
         color: var(--muted-color);
         font-size: var(--font-size-small);
@@ -299,6 +342,10 @@ export const PrefViewerMenu3DStyles = `
         cursor: pointer;
     }
 
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-hidden] {
+        display: none;
+    }
+
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-switches>.menu-switch[data-disabled]>.menu-switch-copy {
         opacity: 0.6;
     }
@@ -345,87 +392,35 @@ export const PrefViewerMenu3DStyles = `
         transform: translateX(var(--switch-control-thumb-size));
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer {
-        margin-top: calc(var(--panel-spacing) / 2);
-        display: flex;
-        flex-direction: column;
-        gap: calc(var(--panel-spacing) / 2);
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending {
-        font-size: var(--font-size-small);
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-        color: var(--accent-color);
-        font-weight: var(--font-weight-medium);
-        display: block;
-        opacity: 1;
-        transition: opacity 0.2s ease;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending::before {
-        content: "* ";
-        font-size: var(--font-size-medium);
-        color: var(--accent-color);
-        font-weight: var(--font-weight-bold);
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-pending[hidden] {
-        opacity: 0;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-status {
-        font-size: var(--font-size-small);
-        color: var(--status-color);
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-slider[data-hidden] {
         display: none;
     }
 
-    pref-viewer-menu-3d[data-status="visible"]>.menu-wrapper>.menu-panel>.menu-footer>.menu-status {
-        display: block;
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply {
-        border: none;
-        border-radius: var(--button-radius);
-        padding: round(down, calc(var(--panel-spacing) * 0.625), 1px) var(--panel-spacing);
-        font-size: var(--button-font-size);
-        font-weight: var(--button-font-weight);
-        background: var(--accent-color);
-        color: var(--button-font-color);
-        cursor: pointer;
-        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-slider[data-disabled] .menu-slider-label {
+        opacity: 0.6;
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply:not(:disabled):hover {
-        box-shadow: var(--button-shadow);
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-slider[data-disabled] input[type="range"] {
+        opacity: 0.4;
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply:disabled {
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-slider[data-disabled] input[type="range"]:disabled {
         cursor: not-allowed;
-        opacity: 0.55;
     }
 
-    pref-viewer-menu-3d[data-applying]>.menu-wrapper>.menu-panel>.menu-footer>.menu-apply {
-        opacity: 0.75;
-    }
-
-    /* Color Slider Styles */
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: calc(var(--panel-spacing) / 2);
         padding: var(--panel-spacing) 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker:last-child {
-        border-bottom: none;
+        border-bottom: var(--separator-border);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        gap: calc(var(--panel-spacing) / 2);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row>.color-picker-label {
@@ -435,10 +430,10 @@ export const PrefViewerMenu3DStyles = `
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider-row>.color-preview {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        border: 2px solid rgba(255, 255, 255, 0.3);
+        width: var(--switch-control-width);
+        align-self: stretch;
+        border-radius: calc(var(--slider-bar-height) / 2);
+        border: var(--slider-bar-border);
         flex-shrink: 0;
     }
 
@@ -446,35 +441,37 @@ export const PrefViewerMenu3DStyles = `
         -webkit-appearance: none;
         appearance: none;
         width: 100%;
-        height: 10px;
-        border-radius: 5px;
-        cursor: pointer;
+        height: var(--slider-bar-height);
+        border-radius: calc(var(--slider-bar-height) / 2);
         background: linear-gradient(to right,
             hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%),
             hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%),
             hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
             hsl(360,100%,50%));
+        border: var(--slider-bar-border);
         outline: none;
+        margin: 0;
+        cursor: pointer;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
-        width: 16px;
-        height: 16px;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         border-radius: 50%;
-        background: white;
-        border: 2px solid rgba(0, 0, 0, 0.25);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        background: var(--slider-thumb-color);
+        border: var(--slider-thumb-border);
+        box-shadow: var(--slider-thumb-shadow);
         cursor: pointer;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-color-picker>.color-slider::-moz-range-thumb {
-        width: 16px;
-        height: 16px;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         border-radius: 50%;
-        background: white;
-        border: 2px solid rgba(0, 0, 0, 0.25);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+        background: var(--slider-thumb-color);
+        border: var(--slider-thumb-border);
+        box-shadow: var(--slider-thumb-shadow);
         cursor: pointer;
     }
 
@@ -486,23 +483,16 @@ export const PrefViewerMenu3DStyles = `
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider {
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        gap: calc(var(--panel-spacing) / 2);
         padding: var(--panel-spacing) 0;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider[data-pending] .lighting-slider-label::after {
-        content: "•";
-        margin-left: 8px;
-        color: var(--accent-color);
-        font-size: 1.1em;
+        border-bottom: var(--separator-border);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: calc(var(--panel-spacing) / 2);
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-row>.lighting-slider-label {
@@ -522,37 +512,40 @@ export const PrefViewerMenu3DStyles = `
         -webkit-appearance: none;
         appearance: none;
         width: 100%;
-        height: 10px;
-        border-radius: 999px;
-        cursor: pointer;
-        background:
-            linear-gradient(to right,
-                rgba(255, 214, 120, 0.95) 0%,
-                rgba(255, 179, 71, 0.98) 20%,
-                rgba(255, 244, 214, 0.95) 50%,
-                rgba(118, 165, 255, 0.92) 80%,
-                rgba(56, 66, 115, 0.95) 100%);
+        height: var(--slider-bar-height);
+        border-radius: calc(var(--slider-bar-height) / 2);
+        background: linear-gradient(to right,
+            rgba(56, 66, 115, 0.95) 0%,
+            rgba(118, 165, 255, 0.92) 10%,
+            rgba(255, 214, 120, 0.95) 30%,
+            rgba(255, 244, 214, 0.95) 50%,
+            rgba(255, 214, 120, 0.95) 70%,
+            rgba(118, 165, 255, 0.92) 90%,
+            rgba(56, 66, 115, 0.95) 100%);
+        border: var(--slider-bar-border);
         outline: none;
+        margin: 0;
+        cursor: pointer;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider::-webkit-slider-thumb {
         -webkit-appearance: none;
-        width: 18px;
-        height: 18px;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         border-radius: 50%;
-        background: #ffffff;
-        border: 2px solid rgba(0, 0, 0, 0.24);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+        background: var(--slider-thumb-color);
+        border: var(--slider-thumb-border);
+        box-shadow: var(--slider-thumb-shadow);
         cursor: pointer;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider::-moz-range-thumb {
-        width: 18px;
-        height: 18px;
+        width: var(--slider-thumb-size);
+        height: var(--slider-thumb-size);
         border-radius: 50%;
-        background: #ffffff;
-        border: 2px solid rgba(0, 0, 0, 0.24);
-        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
+        background: var(--slider-thumb-color);
+        border: var(--slider-thumb-border);
+        box-shadow: var(--slider-thumb-shadow);
         cursor: pointer;
     }
 
@@ -571,45 +564,41 @@ export const PrefViewerMenu3DStyles = `
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button {
         appearance: none;
-        border: 1px solid rgba(255, 255, 255, 0.18);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.08);
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: var(--button-radius);
+        padding: calc(var(--panel-spacing) * 0.5) var(--panel-spacing);
         color: var(--text-color);
-        padding: 6px 12px;
         font-size: var(--font-size-small);
         font-weight: var(--font-weight-medium);
+        transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
         cursor: pointer;
-        transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
     }
 
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:hover,
     pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider>.lighting-slider-actions>.lighting-play-button:focus-visible {
-        background: rgba(255, 255, 255, 0.14);
-        border-color: rgba(255, 255, 255, 0.28);
-        transform: translateY(-1px);
+        background: rgba(255, 255, 255, 0.15);
+        border-color: rgba(255, 255, 255, 0.3);
         outline: none;
+        box-shadow: var(--button-shadow);
     }
 
-    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-lighting-slider[data-playing] .lighting-slider {
-        background:
-            linear-gradient(to right,
-                rgba(255, 220, 132, 0.96) 0%,
-                rgba(255, 187, 88, 0.98) 18%,
-                rgba(255, 247, 226, 0.96) 50%,
-                rgba(112, 154, 255, 0.92) 82%,
-                rgba(45, 55, 102, 0.98) 100%);
+    pref-viewer-menu-3d>.menu-wrapper>.menu-panel>.menu-footer {
+        margin-top: calc(var(--panel-spacing) / 2);
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--panel-spacing) / 2);
     }
 `;
 
 export const PrefViewer3DAnimationMenuStyles = `
     div.pref-viewer-3d.animation-menu, div.pref-viewer-3d.animation-menu * {
-        box-sizing: border-box;
         padding: 0;
         margin: 0;
     }
 
     div.pref-viewer-3d.animation-menu {
-        --color-primary: ${PrefViewerStyleVariables.colorPrimary};
+        --color-primary: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
         --color-active: var(--color-primary);
         --color-active-hover: color-mix(in oklab, var(--color-active), black 10%);
         --color-enabled: #7a7a7a;
@@ -627,7 +616,7 @@ export const PrefViewer3DAnimationMenuStyles = `
         --selector-button-radius: 6px;
         --selector-button-padding-horizontal: 8px;
         --selector-button-padding-vertical: 4px;
-        --selector-button-font-size: 14px;
+        --selector-button-font-size:  ${PrefViewerStyleVariables.fontSize};
         --selector-button-font-weight: 500;
         --width: calc(var(--button-size) * 6 + var(--button-spacing) * 5 + var(--button-loop-margin-left));
 
@@ -668,6 +657,7 @@ export const PrefViewer3DAnimationMenuStyles = `
         font-size: var(--selector-button-font-size);
         font-weight: var(--selector-button-font-weight);
         line-height: 1;
+        letter-spacing: 0.05em;
         flex: 1;
     }
 
@@ -683,7 +673,7 @@ export const PrefViewer3DAnimationMenuStyles = `
         cursor: pointer;
     }
 
-    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button:not(.active):hover {
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button:not(.active):hover {
         background: var(--color-enabled-hover);
     }
 
@@ -700,7 +690,6 @@ export const PrefViewer3DAnimationMenuStyles = `
         justify-content: center;
         padding: 0;
         margin: 0;
-        cursor: pointer;
         border: 1px solid var(--color-border);
         width: var(--button-size);
         height: var(--button-size);
@@ -723,13 +712,15 @@ export const PrefViewer3DAnimationMenuStyles = `
 
     div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.enabled {
         background: var(--color-enabled);
+        cursor: pointer;
     }
 
     div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.enabled:hover {
         background: var(--color-enabled-hover);
     }
 
-    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled {
+    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled,
+    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button.disabled:hover {
         background: var(--color-disabled);
     }
 
@@ -795,7 +786,7 @@ export const PrefViewer3DAnimationMenuStyles = `
 
 export const PrefViewerDialogStyles = `
     pref-viewer-dialog {
-        --color-primary: ${PrefViewerStyleVariables.colorPrimary};
+        --color-primary: var(--pref-viewer-color-primary, ${PrefViewerStyleVariables.colorPrimary});
         --dialog-general-space: 16px;
         --dialog-bg-color: #ffffff;
         --dialog-backdrop-color: rgba(0, 0, 0, 0.25);
@@ -855,7 +846,7 @@ export const PrefViewerDialogStyles = `
     pref-viewer-dialog .dialog-header h3 {
         margin: 0;
         font-weight: 500;
-        font-size: 1.1em;
+        font-size: calc(1.1 * ${PrefViewerStyleVariables.fontSize});
     }
 
     pref-viewer-dialog .dialog-content {
@@ -865,7 +856,7 @@ export const PrefViewerDialogStyles = `
     pref-viewer-dialog .dialog-content h4 {
         margin: 0;
         font-weight: 500;
-        font-size: 1.05em;
+        font-size: calc(1.05 * ${PrefViewerStyleVariables.fontSize});
     }
 
     pref-viewer-dialog .dialog-footer {
@@ -878,7 +869,7 @@ export const PrefViewerDialogStyles = `
 
     pref-viewer-dialog .dialog-footer button {
         width: 100%;
-        font-size: 0.95rem;
+        font-size: calc(0.95 * ${PrefViewerStyleVariables.fontSize});
         font-weight: 600;
         padding: var(--button-padding-vertical) var(--button-padding-horizontal);
         border-radius: var(--button-border-radius);