/* ==========================================================================
MaterialX WebGPU Viewer Stylesheet
========================================================================== */
/* This widget is a flex item inside Elementor's .e-con-inner (flex-direction:column), sharing
its row with sibling widgets. height:auto alone only fixes the *hypothetical* size flexbox
starts from - the default flex-shrink:1 still compresses it well below that afterward when
the row is tight for space, which is what was actually collapsing it, not the height
calculation itself. flex-shrink:0 stops it from being compressed below its real content size. */
.elementor-widget-shortcode {
height: auto !important;
flex-shrink: 0 !important;
}
/* 1. Base Container */
#mtlx-viewer-container {
position: relative !important;
width: 100% !important;
aspect-ratio: 16 / 9 !important; /* Maintains 16:9 ratio in standard flow */
height: auto !important;
overflow: hidden !important;
background: #000;
}
/* Floor against the box collapsing on mobile if anything upstream (theme/page-builder CSS,
layout still settling) stops aspect-ratio from taking effect - canvas and the Tweakpane
pane are both position:absolute, so with no in-flow content the box has nothing else to
size itself from. Scoped to mobile widths since a full-viewport-width vw value would
overshoot on desktop, where the container is usually narrower than the viewport itself. */
@media (max-width: 767px) {
#mtlx-viewer-container {
min-height: 56.25vw !important; /* 9/16 as a percentage of viewport width */
}
}
/* 2. WebGPU Canvas */
#mtlx-viewer-container canvas {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
display: block !important;
z-index: 1 !important;
}
/* 3. UI Overlay (Tweakpane) */
#mtlx-viewer-container .tp-rotv {
position: absolute !important;
top: 10px !important;
right: 10px !important;
width: 280px !important;
z-index: 100 !important;
height: auto;
max-height: 90vh; /* Keeps pane accessible within viewport bounds */
overflow-y: auto;
}
/* The WordPress theme ships a global `button:hover/:focus` reset (background-color: #c36)
that Tweakpane's own CSS never contests for the color swatch's click-catcher button -
it's meant to stay fully transparent, with the swatch color square showing through
underneath it. Other Tweakpane buttons (folder headers, etc.) define their own higher-
specificity hover rules already and are unaffected, so this is scoped to just the swatch. */
#mtlx-viewer-container .tp-rotv .tp-colswv_b:hover,
#mtlx-viewer-container .tp-rotv .tp-colswv_b:focus {
background-color: transparent !important;
color: inherit !important;
border-color: transparent !important;
}
/* 3b. Custom saturation gradient bar (replaces Tweakpane's default SV square + RGB fields).
Plain track + thumb divs (not a native range input - track pseudo-element sizing proved
unreliable cross-browser). Sized to match Tweakpane's own hue strip above it
(.tp-hplv_c is 4px tall, .tp-hplv_m is a 12px square with var(--bld-br) rounding). */
/* Renders below the hue strip instead of above it. Reordering the actual DOM nodes doesn't
stick - Tweakpane re-attaches its .tp-colpv_sv/.tp-colpv_h slots in their canonical order
on its own render passes - so this uses flex `order` on the stable slot elements instead,
which holds no matter how many times Tweakpane touches the surrounding DOM. */
.tp-colpv_hsv {
display: flex;
flex-direction: column;
}
.tp-colpv_sv {
order: 1;
}
.tp-colpv_h {
order: 0;
}
/* Merges the Model dropdown and Spin checkbox rows onto one line (UIController.js). Each is
still a full label+value Tweakpane row internally - Tweakpane pins every row's value column
to a fixed 160px (--bld-vw) regardless of available space, only the label shrinks, so two
full rows side by side need --bld-vw overridden down to something that actually fits a
280px-wide pane. Also trims each row's own edge padding (kept only on the outer sides, to
stay flush with the folder's other rows) and the label's own right-padding, both of which
are generous defaults meant for a full-width single row. */
.mtlx-model-spin-row {
display: flex;
align-items: center;
}
.mtlx-model-spin-row > .tp-lblv .tp-lblv_l {
padding-right: 6px;
}
.mtlx-model-spin-row > .tp-lblv:first-child {
flex: 1 1 auto;
min-width: 0;
padding-right: 4px;
--bld-vw: 95px;
}
.mtlx-model-spin-row > .tp-lblv:last-child {
flex: 0 0 auto;
padding-left: 4px;
--bld-vw: 24px;
}
/* Same technique as .mtlx-model-spin-row above, extended to three rows instead of two. The
first row keeps its real (default flex:1, untouched) label to show the param name, the same
way Model's dropdown label does - it just needs the ROW's own flex to grow/shrink for shared
space. Y and Z's labels are single letters, so unlike Model's label they need flex:0 0 auto
pinned explicitly - a flex:1 label growing inside an auto-sized row is exactly what created a
large gap between the letter and its value box in an earlier pass. */
.mtlx-vector3-row {
display: flex;
align-items: center;
}
.mtlx-vector3-row > .tp-lblv {
--bld-vw: 24px;
}
.mtlx-vector3-row > .tp-lblv:first-child {
flex: 1 1 auto;
min-width: 0;
/* A bit wider than the other two - this value cell holds the injected "X" sublabel
alongside its input, not just the input alone. */
--bld-vw: 34px;
}
/* .tp-lblv_v is a plain block div by default, so the injected "X" span (inline) would stack
above the input instead of sitting beside it without this. */
.mtlx-vector3-row > .tp-lblv:first-child .tp-lblv_v {
display: flex;
align-items: center;
}
.mtlx-vector3-row > .tp-lblv:not(:first-child) {
flex: 0 0 auto;
}
.mtlx-vector3-row > .tp-lblv:not(:first-child) .tp-lblv_l {
flex: 0 0 auto;
padding-left: 2px;
padding-right: 2px;
}
.mtlx-vector3-row > .tp-lblv + .tp-lblv {
margin-left: 0;
}
/* The actual overflow source, found via DevTools computed styles: the WordPress/Elementor
theme's global input styling (padding: 8px 16px, a 1px border) leaks onto every on
the page, Tweakpane's included, since the pane isn't isolated from page-wide CSS. With
box-sizing:border-box, 32px of foreign horizontal padding plus a 2px border floors the box at
34px no matter what width/max-width says - shrinking below your own padding+border is
physically impossible. Every other number field in this pane carries the same padding, it's
just always had 160px of room to absorb it invisibly; this is the first one squeezed tight
enough to expose it. The border and padding are the foreign WordPress ones and get killed
outright - but background-color/border-radius here are Tweakpane's OWN legitimate styling
(.tp-txtv_i's real rule, shared with a couple other input types, sets both) - re-declaring
them explicitly instead of nuking with a blanket reset, since a first pass at this killed
Tweakpane's own box look along with the WordPress border. */
.mtlx-vector3-row .tp-txtv,
.mtlx-vector3-row .tp-txtv_i {
width: 24px !important;
max-width: 24px !important;
box-sizing: border-box !important;
padding: 0 2px !important;
border: none !important;
background-color: var(--in-bg) !important;
border-radius: var(--bld-br) !important;
}
/* Matches .tp-lblv_l's own color/size exactly (rather than a separate dimmer style) so X reads
the same as Y/Z's real row labels instead of looking fainter/smaller next to them. */
.mtlx-vector3-sublabel {
color: var(--lbl-fg);
padding-right: 2px;
}
.mtlx-sat-slider {
position: relative;
/* Insets 6px each side to match Tweakpane's own hue strip, which pads by half its
12px round marker's width so the handle never overflows the strip's edge at s=0/s=1. */
width: calc(100% - 12px);
height: 4px;
margin: 8px 6px;
border-radius: 2px;
cursor: pointer;
touch-action: none;
}
.mtlx-sat-slider-thumb {
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
margin-left: -6px;
margin-top: -6px;
border-radius: var(--bld-br, 4px);
box-sizing: border-box;
background: #fff;
border: 2px solid rgba(255, 255, 255, 0.75);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
pointer-events: none;
}
/* 3c. Start-up failure message (main.js showViewerMessage) - replaces the canvas when neither
WebGPU nor WebGL2 can start, so the visitor sees an explanation instead of a black box.
Paragraph margins/colors are pinned because the WordPress theme styles bare