diff --git a/manifold/src/console/Manifold.tsx b/manifold/src/console/Manifold.tsx index 80f2c83..56e240b 100644 --- a/manifold/src/console/Manifold.tsx +++ b/manifold/src/console/Manifold.tsx @@ -285,22 +285,8 @@ export function Manifold({ ctx.stroke(); } - if (nc > 0.001) { - const breathe = 1 + Math.sin(now / 600) * 0.06; - const rCap = nc * Math.min(W, H) * 0.5 * breathe; - const rCur = rCap * 0.55; - ctx.setLineDash([4, 5]); - ctx.strokeStyle = 'rgba(255,106,0,0.4)'; - ctx.lineWidth = 1.5; - ctx.beginPath(); - ctx.arc(px, py, rCap, 0, Math.PI * 2); - ctx.stroke(); - ctx.strokeStyle = 'rgba(255,106,0,0.7)'; - ctx.beginPath(); - ctx.arc(px, py, rCur, 0, Math.PI * 2); - ctx.stroke(); - ctx.setLineDash([]); - } + // Noise-cap exploration rings hidden for now (kept for possible later use). + void nc; ctx.shadowColor = fz ? cyan : accent; ctx.shadowBlur = 18; diff --git a/manifold/src/console/OutputEditor.tsx b/manifold/src/console/OutputEditor.tsx index 4c0efa0..73904c7 100644 --- a/manifold/src/console/OutputEditor.tsx +++ b/manifold/src/console/OutputEditor.tsx @@ -51,7 +51,7 @@ function MiniSlider({ disabled={disabled} onChange={(e) => onChange(parseFloat(e.target.value))} className="mf-slider-input" - style={{ width: '100%' }} + style={{ width: '100%', ['--mf-pct' as string]: `${Math.max(0, Math.min(1, value))}` } as CSSProperties} /> ); diff --git a/manifold/src/console/shared-ui.tsx b/manifold/src/console/shared-ui.tsx index 3d9c4a0..26c5154 100644 --- a/manifold/src/console/shared-ui.tsx +++ b/manifold/src/console/shared-ui.tsx @@ -163,7 +163,13 @@ export function CompactAxis({ value={value} onChange={(e) => onChange(parseFloat(e.target.value))} className="mf-slider-input" - style={{ width: 120, ['--mf-axis-accent' as string]: accent } as CSSProperties} + style={ + { + width: 120, + ['--mf-axis-accent' as string]: accent, + ['--mf-pct' as string]: `${Math.max(0, Math.min(1, value))}`, + } as CSSProperties + } /> onChange({ val: parseFloat(e.target.value) })} className="mf-slider-input" - style={{ flex: 1 }} + style={{ flex: 1, ['--mf-pct' as string]: `${Math.max(0, Math.min(1, param.val))}` } as CSSProperties} /> )} diff --git a/manifold/src/styles/primitives.css b/manifold/src/styles/primitives.css index 7d0d2ef..3c3e5bb 100644 --- a/manifold/src/styles/primitives.css +++ b/manifold/src/styles/primitives.css @@ -13,13 +13,21 @@ */ /* ---- Slider (.mf-slider-input) ---- */ +/* Base reset so the custom track/thumb styling applies even when a consumer + doesn't set these inline (e.g. OutputControlRow's held slider). The colored + fill tracks `--mf-pct` (0..1); it falls back to 0 if a consumer forgets it. */ +.mf-slider-input { + -webkit-appearance: none; + appearance: none; + background: transparent; +} .mf-slider-input::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient( to right, var(--accent) 0%, - var(--accent) calc(var(--mf-pct) * 100%), + var(--accent) calc(var(--mf-pct, 0) * 100%), var(--bg-3) 0% ); } @@ -28,6 +36,11 @@ border-radius: 999px; background: var(--bg-3); } +.mf-slider-input::-moz-range-progress { + height: 4px; + border-radius: 999px; + background: var(--accent); +} .mf-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;