/* MIX-ED — DJ Studio · DDJ-FLX4 photo-overlay skin (v22) ---------------------------------------------------------------------- The chassis is a single image (images/flx4-top.png, 2000×1132). Invisible hotspots are absolutely positioned over it in % coordinates (inline styles in simulator-flx4.html — measured off the image pixels). This file paints only the MOVING parts: knob pointers, fader caps, jog rotor, VU bars, PLAY/CUE/pad glows, BPM + pitch readouts. Self-contained: simulator.css is NOT loaded on this page, so the handful of engine classes it needs (.status, .fader-cap, .jog-rotor, .bpm-label, .bpm-pulse, .dragover) are defined here. Alignment debugging: add class "debug-hotspots" to to outline every hotspot in magenta. */ .flx4-skin main { max-width: 1400px; } /* ───────────────────────── Screens panel ───────────────────────── */ /* Placeholder styling — Daniel's Serato-style screen replaces this. */ .flx4-skin .flx4-screens-panel { max-width: 1240px; margin: 0 auto 10px; padding: 12px; background: #101014; border: 1px solid #26262e; border-radius: 14px; } .flx4-skin .flx4-displays { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .flx4-skin .flx4-display { background: #16161c; border: 1px solid #2c2c36; border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 96px; } .flx4-skin .flx4-display.dragover { border-color: #ff914d; box-shadow: 0 0 0 2px rgba(255,145,77,.35); } .flx4-skin .deck-screen-header { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; color: #8a8a96; margin-bottom: 4px; } .flx4-skin .deck-title { color: #f2f2f6; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flx4-skin .deck-artist { color: #9a9aa6; font-size: 12px; min-height: 15px; } .flx4-skin .waveform { position: relative; height: 48px; margin: 6px 0 4px; background: repeating-linear-gradient(90deg, #23232c 0 3px, #1a1a22 3px 6px); border-radius: 4px; overflow: hidden; } .flx4-skin .waveform { --wave-color: rgba(235,235,245,0.85); } .flx4-skin .waveform.has-wave { background: #101016; } .flx4-skin .waveform .wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; } .flx4-skin .waveform .progress { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, rgba(140,159,240,.35), rgba(244,142,181,.35)); border-right: 2px solid #ff914d; pointer-events: none; z-index: 1; } .flx4-skin .waveform .cue-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: #ff914d; pointer-events: none; z-index: 2; } .flx4-skin .deck-time { font-size: 11px; color: #8a8a96; font-variant-numeric: tabular-nums; } /* ───────────────────────── Start-audio bar ───────────────────────── */ .flx4-skin .flx4-audio-bar { display: flex; align-items: center; gap: 14px; max-width: 1240px; margin: 0 auto 12px; padding: 6px 4px; color: #b9b9c4; font-size: 12px; } .flx4-skin .booth-btn { border: 1px solid #3a3a46; background: #1d1d25; color: #e8e8ee; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; } .flx4-skin .booth-btn.primary { background: linear-gradient(135deg, #3d5fec, #8b3dee); border-color: transparent; } .flx4-skin .booth-btn.primary:hover { filter: brightness(1.12); } .flx4-skin .status { font-size: 12px; letter-spacing: .02em; } .flx4-skin .audio-on { color: #4ade80; text-shadow: 0 0 8px rgba(74,222,128,.55); } .flx4-skin .audio-off { color: #facc15; text-shadow: 0 0 6px rgba(250,204,21,.4); } .flx4-skin .flx4-audio-hint { margin-left: auto; color: #888896; } /* ───────────────────────── Photo shell ───────────────────────── */ .flx4-skin .flx4-photo-shell { position: relative; width: min(1240px, 100%); margin: 0 auto; user-select: none; -webkit-user-select: none; container-type: inline-size; /* enables cqw units for overlay text sizing */ } .flx4-skin .flx4-photo { display: block; width: 100%; height: auto; border-radius: 18px; pointer-events: none; } /* Engine-required stems bars: styles.css gives .deck-stem-bar display:flex, which overrides the `hidden` attribute and adds two bars of height INSIDE the shell — stretching every % coordinate downward. Kill them hard. */ .flx4-skin .flx4-photo-shell .deck-stem-bar { display: none !important; } /* Every overlay is % positioned against the shell (inline styles). */ .flx4-skin .flx4-photo-shell > .fx-hot, .flx4-skin .flx4-photo-shell > .fx-knob, .flx4-skin .flx4-photo-shell > .fx-fader, .flx4-skin .flx4-photo-shell > .fx-jog, .flx4-skin .flx4-photo-shell > .fx-bpm, .flx4-skin .flx4-photo-shell > .fx-pitch-out, .flx4-skin .flx4-photo-shell > .fx-vu { position: absolute; box-sizing: border-box; } /* ───────────────────────── Hotspot buttons ───────────────────────── */ .flx4-skin .fx-hot { background: transparent; border: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* PLAY / CUE — invisible until the engine adds .active */ .flx4-skin .fx-round { border-radius: 50%; } .flx4-skin .fx-round:active { background: rgba(255,255,255,.07); } .flx4-skin .fx-play.active { outline: 3px solid rgba(74,222,128,.85); outline-offset: 3px; box-shadow: 0 0 26px 7px rgba(74,222,128,.4); } .flx4-skin .fx-cue.active { outline: 3px solid rgba(255,145,77,.85); outline-offset: 3px; box-shadow: 0 0 26px 7px rgba(255,145,77,.4); } /* Hot-cue pads — engine writes the number (1-8) and toggles .set */ .flx4-skin .fx-pad { border-radius: 8%/9%; display: flex; align-items: flex-end; justify-content: flex-end; padding: 3px 7px; font-size: clamp(9px, 1cqw, 13px); font-weight: 600; color: rgba(255,255,255,.35); transition: background .08s, box-shadow .08s; } .flx4-skin .fx-pad:active { background: rgba(255,145,77,.3); } .flx4-skin .fx-pad.set { color: #fff; background: radial-gradient(circle at 50% 45%, rgba(255,145,77,.5), rgba(255,145,77,.16) 75%); box-shadow: 0 0 14px 2px rgba(255,145,77,.45), inset 0 0 8px rgba(255,145,77,.35); } /* ───────────────────────── Knobs ───────────────────────── The engine rotates the element itself (style.transform), so the box is a transparent square whose centre sits exactly on the printed knob. ::before = opaque disc covering the printed knob face (hides the static pointer line in image v1); ::after = the live pointer. */ .flx4-skin .fx-knob { cursor: ns-resize; } .flx4-skin .fx-knob::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #272727; } .flx4-skin .fx-knob::after { content: ""; position: absolute; left: calc(50% - 1px); width: 2px; background: #fff; border-radius: 1px; } /* lg: 74px box, printed knob face ≈ 61px → disc 82%; pointer to disc edge */ .flx4-skin .fx-knob.lg::before { width: 82%; height: 82%; } .flx4-skin .fx-knob.lg::after { top: 10%; height: 34%; } /* sm (TRIM): 52px box, printed face ≈ 26px → disc 52% */ .flx4-skin .fx-knob.sm::before { width: 52%; height: 52%; } .flx4-skin .fx-knob.sm::after { top: 25%; height: 22%; width: 2px; } /* ───────────────────────── Faders ───────────────────────── CustomFader positions .fader-cap in px: vertical → cap.style.top = top edge, left 50% (translateX only) horizontal → cap.style.left = cap CENTRE, top 50% (translate both) */ .flx4-skin .fx-fader { cursor: grab; } .flx4-skin .fx-fader:active { cursor: grabbing; } .flx4-skin .fader-cap { position: absolute; pointer-events: none; background: linear-gradient(180deg, #34343c, #17171c); border: 1px solid #4a4a55; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.6); } .flx4-skin .fx-fader.vert .fader-cap { left: 50%; transform: translateX(-50%); width: 96%; height: 15px; } .flx4-skin .fx-fader.vert .fader-cap::after { content: ""; position: absolute; left: 6%; right: 6%; top: calc(50% - 1px); height: 2px; background: #fff; border-radius: 1px; } .flx4-skin .fx-fader.horz .fader-cap { top: 50%; transform: translate(-50%, -50%); width: 15px; height: 92%; background: linear-gradient(90deg, #34343c, #17171c); } .flx4-skin .fx-fader.horz .fader-cap::after { content: ""; position: absolute; top: 6%; bottom: 6%; left: calc(50% - 1px); width: 2px; background: #fff; border-radius: 1px; } /* ───────────────────────── Jog wheels ───────────────────────── Live: drag to spin — nudges tempo while playing, scrubs while paused. The rotor is a full-size invisible disc with a glowing dot that shows true platter position (rotated from JS). */ .flx4-skin .fx-jog { pointer-events: auto; border-radius: 50%; cursor: grab; touch-action: none; } .flx4-skin .fx-jog.touched { cursor: grabbing; } .flx4-skin .jog-rotor { position: absolute; inset: 0; border-radius: 50%; } .flx4-skin .jog-rotor::before { content: ""; position: absolute; top: 4.2%; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #ff914d; box-shadow: 0 0 10px 2px rgba(255,145,77,.65); opacity: 0; transition: opacity .2s; } .flx4-skin .fx-jog.spinning .jog-rotor::before, .flx4-skin .fx-jog.touched .jog-rotor::before { opacity: 1; } /* Rotor rotation is now driven from JS (true platter position) — no CSS spin. */ /* BPM readout in the jog centre (under the MIX-ED mark) */ .flx4-skin .fx-bpm { pointer-events: none; display: flex; align-items: center; justify-content: center; color: #f2f2f6; font-weight: 700; font-size: clamp(11px, 1.3cqw, 17px); font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(0,0,0,.8); } .flx4-skin .bpm-label { font-size: .62em; font-weight: 600; color: #8a8a96; letter-spacing: .06em; } .flx4-skin .bpm-pulse { animation: flx4bpmPulse 1s ease-in-out infinite; } @keyframes flx4bpmPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } } /* Tempo readout above each pitch fader */ .flx4-skin .fx-pitch-out { pointer-events: none; display: flex; align-items: center; justify-content: center; color: #ff914d; font-size: clamp(9px, 1cqw, 13px); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 6px rgba(0,0,0,.7); } /* ───────────────────────── VU meters ───────────────────────── */ .flx4-skin .fx-vu { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 3px; overflow: hidden; pointer-events: none; } .flx4-skin .vu-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(to top, #22c55e 0%, #22c55e 55%, #eab308 75%, #ef4444 92%); transition: height 60ms linear; } /* Central channel meters: taller strip, LED-segment texture */ .flx4-skin .fx-vu.ch { background: rgba(0,0,0,.62); } .flx4-skin .fx-vu.ch .vu-fill { background: linear-gradient(to top, #22c55e 0%, #22c55e 60%, #eab308 80%, #ef4444 93%); } .flx4-skin .fx-vu.ch::after { /* dark separators every few px → segmented-LED look over the fill */ content: ""; position: absolute; inset: 0; /* 5 chunky LEDs like the hardware */ background: repeating-linear-gradient(to top, transparent 0 14px, rgba(0,0,0,.75) 14px 21px); pointer-events: none; } /* ───────────────────────── Debug ───────────────────────── */ body.debug-hotspots .fx-hot, body.debug-hotspots .fx-knob, body.debug-hotspots .fx-fader, body.debug-hotspots .fx-jog, body.debug-hotspots .fx-vu, body.debug-hotspots .fx-bpm, body.debug-hotspots .fx-pitch-out { outline: 1px solid magenta; } /* ───────────────────────── Responsive ───────────────────────── */ @media (max-width: 720px) { .flx4-skin .flx4-displays { grid-template-columns: 1fr; } .flx4-skin .flx4-audio-bar { flex-wrap: wrap; } .flx4-skin .flx4-audio-hint { display: none; } } /* Number only in the jog centre — the engine still emits a "BPM" label span; hidden on this skin */ .flx4-skin .fx-bpm .bpm-label { display: none; } /* ─────────────── Hover / in-use highlights (TribeXR-style) ─────────────── Controls glow softly when the pointer is over them, brighter while in use. Hover rules are gated behind (hover:hover) so touchscreens don't get stuck highlights. */ .flx4-skin .fx-hot, .flx4-skin .fx-knob, .flx4-skin .fx-fader, .flx4-skin .fx-jog { transition: box-shadow .12s ease, background-color .12s ease; } @media (hover: hover) { .flx4-skin .fx-hot:hover { outline: 2px solid rgba(255,255,255,.55); outline-offset: 3px; box-shadow: 0 0 18px 6px rgba(255,145,77,.45); background-color: rgba(255,145,77,.10); } .flx4-skin .fx-pad:hover { background-color: rgba(255,145,77,.16); } .flx4-skin .fx-knob:hover { border-radius: 50%; outline: 2px solid rgba(255,255,255,.55); outline-offset: 3px; box-shadow: 0 0 16px 3px rgba(255,145,77,.45); } .flx4-skin .fx-fader:hover { border-radius: 6px; outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; box-shadow: 0 0 14px 2px rgba(255,145,77,.4); } } /* brighter while actually using the control */ .flx4-skin .fx-knob:active { border-radius: 50%; outline: 2px solid #ff914d; outline-offset: 3px; box-shadow: 0 0 22px 5px rgba(255,145,77,.55); } .flx4-skin .fx-fader:active { border-radius: 6px; outline: 2px solid #ff914d; outline-offset: 3px; box-shadow: 0 0 22px 5px rgba(255,145,77,.55); } /* Jog zones highlight independently — the platter (top) and the outer ring are separate sections. JS toggles .zone-platter / .zone-ring from the pointer's distance to the centre. */ .flx4-skin .fx-jog.zone-platter { background: radial-gradient(circle closest-side, rgba(255,145,77,.32) 0 75%, transparent 78%); } .flx4-skin .fx-jog.zone-ring { background: radial-gradient(circle closest-side, transparent 0 76%, rgba(255,145,77,.20) 79% 98%, transparent 100%); box-shadow: 0 0 0 3px rgba(255,145,77,.5), 0 0 30px 6px rgba(255,145,77,.25); } .flx4-skin .fx-jog.zone-platter .jog-rotor::after, .flx4-skin .fx-jog.zone-ring .jog-rotor::after { content: ""; position: absolute; inset: 11.5%; border-radius: 50%; border: 1px dashed rgba(255,255,255,.3); } /* brighter while grabbed */ .flx4-skin .fx-jog.touched.zone-platter { background: radial-gradient(circle closest-side, rgba(255,145,77,.50) 0 75%, transparent 78%); } .flx4-skin .fx-jog.touched.zone-ring { background: radial-gradient(circle closest-side, transparent 0 76%, rgba(255,145,77,.38) 79% 98%, transparent 100%); box-shadow: 0 0 0 3px #ff914d, 0 0 36px 8px rgba(255,145,77,.4); } /* Pitch/tempo faders: the highlight ring spans the printed pitch marks and the TEMPO label, not just the fader track. Drawn on a ::before that extends past the element; the drag hit-zone itself is unchanged so the cap still maps 1:1 to the printed track. */ .flx4-skin #pitch-a::before, .flx4-skin #pitch-b::before { content: ""; position: absolute; inset: -2% -25% -12% -38%; border-radius: 8px; pointer-events: none; } /* deck B's element is centred on its track (deck A's sits 5px left), so its ring needs its own left/right reach to hug the same marks */ .flx4-skin #pitch-b::before { inset: -2% -13% -12% -47%; } @media (hover: hover) { .flx4-skin #pitch-a:hover, .flx4-skin #pitch-b:hover { outline: none; box-shadow: none; } .flx4-skin #pitch-a:hover::before, .flx4-skin #pitch-b:hover::before { outline: 2px solid rgba(255,255,255,.5); box-shadow: 0 0 14px 2px rgba(255,145,77,.4); background: rgba(255,145,77,.07); } } .flx4-skin #pitch-a:active, .flx4-skin #pitch-b:active { outline: none; box-shadow: none; } .flx4-skin #pitch-a:active::before, .flx4-skin #pitch-b:active::before { outline: 2px solid #ff914d; box-shadow: 0 0 22px 5px rgba(255,145,77,.55); background: rgba(255,145,77,.10); } /* Loop buttons: lit while their state is engaged */ .flx4-skin .fx-loop.active { outline: 2px solid #ff914d; outline-offset: 3px; box-shadow: 0 0 18px 5px rgba(255,145,77,.45); } /* Loop region on the deck screen waveform */ .flx4-skin .waveform .loop-band { position: absolute; top: 0; bottom: 0; display: none; background: rgba(255,145,77,.22); border-left: 2px solid #ff914d; border-right: 2px solid #ff914d; pointer-events: none; z-index: 1; } /* Small loop buttons (4 BEAT, 1/2X, 2X): tight ring, small glow — the 3px stand-off tuned for CUE/PLAY reads far too loose at this size */ @media (hover: hover) { .flx4-skin [id^="loop-auto"]:hover, .flx4-skin [id^="loop-half"]:hover, .flx4-skin [id^="loop-double"]:hover { outline-width: 2px; outline-offset: 0px; box-shadow: 0 0 8px 2px rgba(255,145,77,.45); } } .flx4-skin [id^="loop-auto"].active { outline-width: 2px; outline-offset: 0px; box-shadow: 0 0 10px 3px rgba(255,145,77,.5); } /* Pad mode buttons (HOT CUE / PAD FX 1): tight rectangular ring when active */ .flx4-skin .fx-mode-btn { border-radius: 5px; } .flx4-skin .fx-mode-btn.active { outline: 2px solid #ff914d; outline-offset: 1px; box-shadow: 0 0 10px 3px rgba(255,145,77,.45); background-color: rgba(255,145,77,.14); } @media (hover: hover) { .flx4-skin .fx-mode-btn:hover { outline-width: 2px; outline-offset: 1px; box-shadow: 0 0 8px 2px rgba(255,145,77,.45); } } /* Pads in FX mode: centred small labels */ .flx4-skin .fx-pad.fx-mode { align-items: center; justify-content: center; padding: 0; font-size: clamp(7px, 0.75cqw, 11px); letter-spacing: .03em; color: rgba(255,255,255,.55); }