/* * PartyMedia Studio module-owned stylesheet. * * Extracted from the active constellation runtime as an exact first * migration step. Behaviour is intentionally unchanged. * * Constellation must eventually only load/bridge this module resource. */ /* ===START==[PLX_PARTYMEDIA_STUDIO_SCOPED_RESPONSIVE_CLICKUP_V1_20260809]=== */ /* * PartyMedia Studio needs more horizontal workspace than a normal ClickUp. * * IMPORTANT: * - normal ClickUps keep max-width:600px; * - PartyHunt keeps its own existing scoped fullscreen behaviour; * - only a ClickUp explicitly marked for PartyMedia Studio becomes wider. */ #plx-cu-panel:has(#plx-pm-complete-panel){ padding-left:12px; padding-right:12px; box-sizing:border-box; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ width:min(1200px, calc(100vw - 24px)); max-width:min(1200px, calc(100vw - 24px)); } /* * On smaller screens Studio simply follows the available viewport width. * Existing iPhone portrait fullscreen rules remain later in the stylesheet * and therefore keep ownership of that special phone layout. */ @media (max-width:700px){ #plx-cu-panel:has(#plx-pm-complete-panel){ padding-left:4px; padding-right:4px; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ width:calc(100vw - 8px); max-width:calc(100vw - 8px); } } /* ===END==[PLX_PARTYMEDIA_STUDIO_SCOPED_RESPONSIVE_CLICKUP_V1_20260809]=== */ /* ===START==[PLX_PARTYMEDIA_RESPONSIVE_STUDIO_BLOCKS_V3_20260810]=== */ /* * PartyMedia Studio responsive presentation owner. * * OWNERSHIP CONTRACT * - Studio CSS remains module-owned. * - Mixing Desk remains directly visible. * - Additional Studio sections remain ClickUps. * - Existing functional DOM is reused. * - #plx-pm-console-channel-bank remains the ONE horizontal * scrolling owner for mixer tracks. * - No recording, routing, track-model or MediaRecorder logic * is changed here. */ /* --------------------------------------------------------- STUDIO WORKSPACE --------------------------------------------------------- */ #plx-cu-panel:has(#plx-pm-complete-panel){ padding:10px !important; box-sizing:border-box !important; align-items:center !important; justify-content:center !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ box-sizing:border-box !important; width:min(1200px, calc(100vw - 20px)) !important; max-width:min(1200px, calc(100vw - 20px)) !important; min-width:0 !important; max-height:calc(100dvh - 20px) !important; overflow-x:hidden !important; overflow-y:auto !important; } /* --------------------------------------------------------- STUDIO CONTENT WIDTH --------------------------------------------------------- */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console, #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-studio-section{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; } /* * The Mixing Desk itself must never become a second horizontal * scroll owner. Its channel bank owns horizontal movement. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console{ overflow:visible !important; } /* --------------------------------------------------------- MIXER CHANNEL BANK — SINGLE HORIZONTAL SCROLL OWNER --------------------------------------------------------- */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank{ box-sizing:border-box !important; display:flex !important; flex-wrap:nowrap !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow-x:scroll !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:auto; scrollbar-gutter:stable; padding-bottom:7px !important; } /* * Tracks retain their usable mixer-strip width. * They therefore overflow the bank rather than being squeezed * until every channel fits inside the viewport. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank > [data-pm-console-track]{ flex:0 0 auto !important; flex-shrink:0 !important; } /* Chromium / Safari scrollbar */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank::-webkit-scrollbar{ width:19px !important; height:19px !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank::-webkit-scrollbar-track{ background:rgba(255,215,0,.09); border-radius:999px; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank::-webkit-scrollbar-thumb{ background:#d7b400; border-radius:999px; border:3px solid rgba(0,0,0,.72); } /* --------------------------------------------------------- CLICKUP PRESENTATION --------------------------------------------------------- */ #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-studio-section{ margin-top:8px; } #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-studio-section > summary{ box-sizing:border-box; width:100%; cursor:pointer; } #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-action{ flex-shrink:0; min-width:68px; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width:900px){ #plx-cu-panel:has(#plx-pm-complete-panel){ padding:6px !important; align-items:stretch !important; justify-content:stretch !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ width:calc(100vw - 12px) !important; max-width:calc(100vw - 12px) !important; height:calc(100dvh - 12px) !important; max-height:calc(100dvh - 12px) !important; } } /* --------------------------------------------------------- PHONE PORTRAIT --------------------------------------------------------- */ @media (max-width:600px) and (orientation:portrait){ #plx-cu-panel:has(#plx-pm-complete-panel){ padding:0 !important; align-items:stretch !important; justify-content:stretch !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-studio-section > summary{ min-height:44px; padding:10px 9px; } #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-action{ min-width:62px; padding:5px 7px; } } /* --------------------------------------------------------- SHORT LANDSCAPE PHONE / TABLET --------------------------------------------------------- */ @media (max-height:600px) and (orientation:landscape){ #plx-cu-panel:has(#plx-pm-complete-panel){ padding:0 !important; align-items:stretch !important; justify-content:stretch !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; } } /* ===END==[PLX_PARTYMEDIA_RESPONSIVE_STUDIO_BLOCKS_V3_20260810]=== */ /* ===START==[PLX_PARTYMEDIA_STUDIO_SCROLL_RESPONSIVE_V4_20260810]=== */ /* * Final Studio viewport / scroll correction. * * - Studio itself follows the available viewport. * - The Studio ClickUp does not create its own vertical scrollbar. * - The existing mixer channel bank remains the only horizontal * mixer scroll owner. * - Horizontal scrollbar target thickness is exactly 5mm. */ #plx-cu-panel:has(#plx-pm-complete-panel){ box-sizing:border-box !important; width:100vw !important; max-width:100vw !important; padding-left:10px !important; padding-right:10px !important; align-items:flex-start !important; justify-content:center !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ box-sizing:border-box !important; width:min(1200px, calc(100vw - 20px)) !important; max-width:min(1200px, calc(100vw - 20px)) !important; min-width:0 !important; /* * Do not create the unwanted vertical Studio scrollbar. * Vertical page/outer ClickUp ownership stays outside this * module content owner. */ max-height:none !important; height:auto !important; overflow-x:hidden !important; overflow-y:visible !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow:visible !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank{ box-sizing:border-box !important; display:flex !important; flex-wrap:nowrap !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow-x:scroll !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; /* * Space belongs to the scrollbar itself. * Do not fake scrollbar thickness with padding. */ padding-bottom:0 !important; scrollbar-gutter:stable; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank > [data-pm-console-track]{ flex:0 0 auto !important; flex-shrink:0 !important; } /* * Exact requested target: 5 millimetres. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank::-webkit-scrollbar{ width:5mm !important; height:5mm !important; } @media (max-width:900px){ #plx-cu-panel:has(#plx-pm-complete-panel){ width:100vw !important; max-width:100vw !important; padding-left:6px !important; padding-right:6px !important; align-items:flex-start !important; justify-content:center !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ width:calc(100vw - 12px) !important; max-width:calc(100vw - 12px) !important; height:auto !important; max-height:none !important; overflow-x:hidden !important; overflow-y:visible !important; } } @media (max-width:600px) and (orientation:portrait){ #plx-cu-panel:has(#plx-pm-complete-panel){ padding:0 !important; width:100vw !important; max-width:100vw !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ width:100vw !important; max-width:100vw !important; height:auto !important; max-height:none !important; border-radius:0 !important; overflow-x:hidden !important; overflow-y:visible !important; } } /* ===END==[PLX_PARTYMEDIA_STUDIO_SCROLL_RESPONSIVE_V4_20260810]=== */ /* ===START==[PLX_PARTYMEDIA_STUDIO_OUTER_VERTICAL_SCROLL_OWNER_V1_20260810]=== */ /* * PartyMedia Studio has ONE vertical scrolling owner: * the outer fixed Studio ClickUp viewport. * * The inner Studio surface is allowed to grow naturally. * This prevents the content from extending below the viewport * while the inner surface itself is non-scrollable. */ #plx-cu-panel:has(#plx-pm-complete-panel){ box-sizing:border-box !important; width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; align-items:flex-start !important; justify-content:center !important; } /* * The inner ClickUp is NOT a second vertical scroll owner. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ box-sizing:border-box !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow-x:hidden !important; overflow-y:visible !important; flex:0 0 auto !important; } /* * Studio content can grow vertically inside the outer scrolling viewport. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:auto !important; max-height:none !important; overflow:visible !important; } /* * Mixer keeps its existing, separate horizontal owner. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console{ overflow:visible !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank{ overflow-x:scroll !important; overflow-y:hidden !important; } /* * Exact requested horizontal scrollbar thickness. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank::-webkit-scrollbar{ height:5mm !important; } /* * Phone: viewport remains the owner. */ @media (max-width:600px) and (orientation:portrait){ #plx-cu-panel:has(#plx-pm-complete-panel){ width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; padding:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ width:100vw !important; max-width:100vw !important; height:auto !important; max-height:none !important; border-radius:0 !important; } } /* * Short landscape: same single vertical owner. */ @media (max-height:600px) and (orientation:landscape){ #plx-cu-panel:has(#plx-pm-complete-panel){ width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; padding:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ height:auto !important; max-height:none !important; } } /* ===END==[PLX_PARTYMEDIA_STUDIO_OUTER_VERTICAL_SCROLL_OWNER_V1_20260810]=== */ /* ===START==[PLX_PARTYMEDIA_ALWAYS_VISIBLE_5MM_MIXER_SCROLLBAR_V1_20260810]=== */ /* * ChromeOS/Chromium may visually collapse its native overlay scrollbar * even when computed CSS height is exactly 5mm. * * Hide that native overlay only for the mixer bank and show one * module-owned control bar that drives the SAME existing scroll owner. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank{ scrollbar-width:none !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; } /* * Always-visible horizontal control. * Exact physical target height = 5mm. */ #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar]{ box-sizing:border-box !important; display:block; position:relative; width:100%; height:5mm !important; min-height:5mm !important; max-height:5mm !important; margin-top:6px; margin-bottom:8px; overflow:hidden; border:1px solid #d7b400; border-radius:999px; background:rgba(255,215,0,.12); cursor:pointer; touch-action:none; } #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar][hidden]{ display:none !important; } /* * Small Studio viewport: * the mixer channels do not all fit, therefore the existing * horizontal controller must remain visible even if its hidden * attribute was set during an earlier/wider layout calculation. */ @media (max-width:1049px){ #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar][hidden]{ display:block !important; } } /* * Wide/fullscreen: * respect the existing hidden state when all current channels fit. */ @media (min-width:1050px){ #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar][hidden]{ display:none !important; } } #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar-thumb]{ box-sizing:border-box !important; position:absolute; left:0; top:0; height:100%; min-width:28px; border-radius:999px; background:#ffd800; border:2px solid rgba(0,0,0,.72); cursor:grab; will-change:transform; } #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar-thumb]:active{ cursor:grabbing; } /* * The outer panel is the ONE vertical scroll owner. * Suppress any residual inner native scrollbar presentation. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner{ overflow-y:visible !important; scrollbar-width:none !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; } /* ===END==[PLX_PARTYMEDIA_ALWAYS_VISIBLE_5MM_MIXER_SCROLLBAR_V1_20260810]=== */ /* ===START==[PLX_PARTYMEDIA_STUDIO_SCROLL_FINAL_OWNER_V2_20260810]=== */ /* * PARTYMEDIA STUDIO — ONE VERTICAL SCROLL OWNER * * Browser proof: * * #plx-cu-panel: * clientHeight=730 * scrollHeight=4622 * canActuallyScroll=true * * All inner Studio surfaces: * canActuallyScroll=false * * Important CSS detail: * overflow-x:hidden + overflow-y:visible causes browsers to * compute overflow-y as AUTO. * * Therefore inner content surfaces use overflow-x:clip instead. * This preserves overflow-y:visible and prevents a second * ClickUp scrollbar from appearing when DETAILS opens. */ /* ========================================================= ONE REAL VERTICAL SCROLL OWNER ========================================================= */ #plx-cu-panel:has(#plx-pm-complete-panel){ overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-y:contain !important; -webkit-overflow-scrolling:touch; scrollbar-width:auto !important; } /* ========================================================= INNER SURFACES ARE NEVER VERTICAL SCROLL OWNERS ========================================================= */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console, #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-studio-section, #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-studio-body{ height:auto !important; max-height:none !important; /* * CLIP is intentional. * * Do NOT use overflow-x:hidden here. * hidden would convert visible on the Y axis to auto. */ overflow-x:clip !important; overflow-y:visible !important; scrollbar-width:none !important; } /* * The complete Studio itself may grow naturally. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel{ overflow:visible !important; } /* * The mixer must keep its separate horizontal content route. * Do not create vertical scrolling here. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console{ overflow-x:clip !important; overflow-y:visible !important; } /* ========================================================= EXISTING HORIZONTAL CHANNEL BANK — UNCHANGED OWNER ========================================================= */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank{ display:flex !important; flex-wrap:nowrap !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:none !important; overscroll-behavior-x:contain !important; -webkit-overflow-scrolling:touch; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank > [data-pm-console-track]{ flex:0 0 auto !important; flex-shrink:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; } /* ========================================================= EXISTING CUSTOM 5MM HORIZONTAL CONTROL — PRESERVED ========================================================= */ #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar]{ box-sizing:border-box !important; display:block !important; position:relative !important; width:100% !important; height:5mm !important; min-height:5mm !important; max-height:5mm !important; margin:6px 0 10px 0 !important; padding:0 !important; overflow:hidden !important; border:1px solid #d7b400 !important; border-radius:999px !important; background:rgba(255,215,0,.14) !important; cursor:pointer !important; touch-action:none !important; } #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar-thumb]{ box-sizing:border-box !important; display:block !important; position:absolute !important; left:0 !important; top:0 !important; height:5mm !important; min-height:5mm !important; max-height:5mm !important; min-width:32px !important; border-radius:999px !important; background:#ffd800 !important; border:2px solid rgba(0,0,0,.72) !important; cursor:grab !important; will-change:transform; } #plx-cu-panel:has(#plx-pm-complete-panel) [data-plx-pm-mixer-scrollbar-thumb]:active{ cursor:grabbing !important; } /* ========================================================= SUPPRESS ALL INNER NATIVE SCROLLBAR PAINTING ========================================================= */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-cu-inner::-webkit-scrollbar, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel::-webkit-scrollbar, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console::-webkit-scrollbar, #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-studio-section::-webkit-scrollbar, #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-responsive-studio-body::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; } /* ===END==[PLX_PARTYMEDIA_STUDIO_SCROLL_FINAL_OWNER_V2_20260810]=== */ /* ===START==[PLX_PARTYMEDIA_STUDIO_WIDE_UTILITY_LAYOUT_OWNER_V11_20260811]=== */ /* * User-confirmed duplicate UI removal. * * Hide ONLY: * .plx-pm-console-quickstart * What do you want to make? + Prepare * * The existing earlier Studio choice remains untouched. */ #plx-cu-panel:has(#plx-pm-complete-panel) .plx-pm-console-quickstart{ display:none !important; } /* * Wide Studio workspace only. * No render / clone / DOM movement. * * LEFT: * mixer/tracks * * RIGHT: * analysis * compact 2x2 Track setup * * Both sides finish on the same horizontal bottom line. */ @media (min-width:1180px){ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel{ display:grid !important; grid-template-columns:minmax(650px,1.9fr) minmax(420px,1fr) !important; grid-template-rows: auto auto auto minmax(0,1fr) auto auto !important; grid-template-areas: "title analysis" "desc analysis" "status analysis" "mixer tracksetup" "recording tracksetup" "tools tracksetup" !important; column-gap:14px !important; row-gap:10px !important; align-items:stretch !important; width:100% !important; max-width:100% !important; min-width:0 !important; } /* * Every direct Studio header/control child gets an explicit * grid owner. Nothing is left to CSS auto-placement. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel > .plx-pm-console-section-title{ grid-area:title !important; align-self:end !important; min-width:0 !important; margin:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel > .plx-pm-studio-white-small{ grid-area:desc !important; align-self:start !important; position:static !important; transform:none !important; min-width:0 !important; margin-top:4px !important; margin-bottom:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel > .plx-pm-console-status{ grid-area:status !important; align-self:start !important; min-width:0 !important; margin:0 !important; } /* * User workflow owner: * * LEFT TOP: * What do you want to make? + Prepare * * LEFT BELOW: * Mixing Desk * * RIGHT TOP: * Live analysis * * RIGHT BELOW: * Master + tracks */ /* * User-confirmed fullscreen position: * * TRANSPORT comes DIRECTLY BELOW the entire Mixing Desk. * * Same left grid column. * Same full width. * Approx. 2mm gap. * * Not inside the mixer. * Not beside the mixer. * Not in the right column. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel > .plx-pm-console-toolbar:has(#plx-pm-console-begin){ grid-area:recording !important; box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; justify-self:stretch !important; align-self:start !important; margin:2mm 0 0 0 !important; } /* * User-confirmed: * * Project / Equipment / Mixer / Safe Takes / * Create Together / Effects / Versions / * Import-Export / Save / Finalize-Protect / * Improve Studio * * goes DIRECTLY BELOW the recording buttons. * * Same left-column width as the Mixing Desk. * Nothing else moves. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel > .plx-pm-console-toolbar:not(:has(#plx-pm-console-begin)){ grid-area:tools !important; box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; justify-self:stretch !important; align-self:start !important; margin:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console{ grid-area:mixer !important; align-self:stretch !important; min-width:0 !important; margin:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis{ grid-area:analysis !important; align-self:start !important; min-width:0 !important; margin:0 !important; } /* * Live analysis: * keep BOTH existing meters fully visible. * * Same location. * Same two meters. * No DOM movement. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis > .plx-pm-responsive-studio-body{ display:grid !important; /* * User-confirmed fullscreen Analysis balance: * * LEFT = Live wave: 70mm wider to the right. * RIGHT = Live spectrum: remaining available width. */ grid-template-columns: minmax(0,calc(50% + 70mm)) minmax(0,1fr) !important; gap:6px !important; box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; padding:6px !important; margin:0 !important; overflow:hidden !important; } /* * Each of the two existing analysis blocks is forced * to remain inside its own half of the available space. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis > .plx-pm-responsive-studio-body > *{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; overflow:hidden !important; } /* * Existing meter surfaces scale to their own block instead * of forcing a wider analysis area. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis > .plx-pm-responsive-studio-body > * canvas, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis > .plx-pm-responsive-studio-body > * svg{ display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis > summary{ min-height:38px !important; padding:6px 10px !important; margin:0 !important; } /* Track setup vult resterende rechterhoogte */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track{ grid-area:tracksetup !important; align-self:stretch !important; height:100% !important; min-width:0 !important; margin:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track > summary{ min-height:38px !important; padding:6px 10px !important; margin:0 !important; } /* * 4 tracks worden op breed scherm 2 x 2. * Hierdoor verdwijnt de onnodige verticale lengte. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track > .plx-pm-responsive-studio-body{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-content:start !important; gap:8px !important; padding:8px !important; margin:0 !important; min-width:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track > .plx-pm-responsive-studio-body > *{ box-sizing:border-box !important; min-width:0 !important; margin:0 !important; padding:8px !important; } /* * Compact Master blijft in zijn bestaande mixer-owner. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank > :last-child{ flex:0 0 118px !important; width:118px !important; min-width:118px !important; max-width:118px !important; height:285px !important; min-height:285px !important; max-height:285px !important; align-self:flex-start !important; overflow:hidden !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank{ align-items:flex-start !important; } } /* small blijft bestaande gebruiksvriendelijke layout */ @media (max-width:1179px){ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel{ display:block !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track > .plx-pm-responsive-studio-body{ display:block !important; padding:initial !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank > :last-child{ flex:0 0 auto !important; width:auto !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; } } /* ===START==[PLX_PARTYMEDIA_BLUE_MASTER_RIGHT_LAYOUT_V2_20260810]=== */ @media (min-width:1180px){ /* * Right-side slot uses all available width. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track{ width:100% !important; min-width:0 !important; max-width:none !important; box-sizing:border-box !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track > .plx-pm-responsive-studio-body{ display:block !important; width:100% !important; min-width:0 !important; max-width:none !important; padding:0 !important; box-sizing:border-box !important; } /* * Existing blue mixer shell: * Master above Track 1, full available width. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track #plx-pm-mixer{ display:block !important; width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; box-sizing:border-box !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track #plx-pm-master-volume{ width:100% !important; max-width:none !important; box-sizing:border-box !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track #plx-pm-track-list{ display:grid !important; grid-template-columns:1fr !important; width:100% !important; min-width:0 !important; max-width:none !important; gap:9px !important; margin:0 !important; box-sizing:border-box !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track #plx-pm-track-list > *{ width:100% !important; min-width:0 !important; max-width:none !important; box-sizing:border-box !important; } /* * Remove ONLY the separate yellow vertical * console Master from the visible Mixing Desk. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank > .plx-pm-console-channel-master{ display:none !important; } } /* ===END==[PLX_PARTYMEDIA_BLUE_MASTER_RIGHT_LAYOUT_V2_20260810]=== */ /* ===END==[PLX_PARTYMEDIA_STUDIO_WIDE_UTILITY_LAYOUT_OWNER_V11_20260811]=== */ /* ===START==[PLX_PARTYMEDIA_MASTER_ANALYSIS_RESPONSIVE_FIX_V1_20260810]=== */ /* * FINAL PRESENTATION CONTRACT * * 1. The separate yellow console MASTER is not part of the * requested visible mixer layout on any viewport. * * 2. The existing blue Master in #plx-pm-mixer remains the * one visible Master above Track 1. * * 3. The two-column desktop layout may only exist where both * columns genuinely fit. Smaller widths return to one * natural full-width column so Live analysis cannot be * squeezed or clipped beside the mixer. * * Presentation only: * - no render * - no DOM movement * - no clone * - no runtime change */ /* --------------------------------------------------------- REMOVE SEPARATE YELLOW MASTER — ALL VIEWPORTS --------------------------------------------------------- */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-console-channel-bank > .plx-pm-console-channel-master{ display:none !important; } /* --------------------------------------------------------- BLUE MASTER + BLUE TRACKS USE THEIR AVAILABLE WIDTH --------------------------------------------------------- */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track > .plx-pm-responsive-studio-body, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track #plx-pm-mixer, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track #plx-pm-track-list{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track #plx-pm-master-volume{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; } /* --------------------------------------------------------- NORMAL / SMALL / MEDIUM VIEWPORT One full-width column. This overrides the older wide layout when the complete 650 + 420 + gap workspace does not safely fit. --------------------------------------------------------- */ @media (max-width:1179px){ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-complete-panel{ display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-real-console, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-track{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin-left:0 !important; margin-right:0 !important; } #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis{ overflow:visible !important; } } /* --------------------------------------------------------- WIDE DESKTOP Existing requested side-by-side layout remains. --------------------------------------------------------- */ @media (min-width:1180px){ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-section-analysis{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow:visible !important; } } /* ===END==[PLX_PARTYMEDIA_MASTER_ANALYSIS_RESPONSIVE_FIX_V1_20260810]=== */ /* ===START==[PLX_PARTYMEDIA_RIGHT_LOWER_BLOCK_ALIGN_V3_20260811]=== */ /* * Fullscreen / wide Studio: * * The previous 145px downward presentation shift is no longer * compatible with the current V7 grid. * * User-confirmed target: * approximately 2-3mm between the status/control row * and the Mixing Desk area. * * The V7 grid already owns this spacing with row-gap:10px * (approximately 2.6mm on standard CSS pixel geometry). * * Therefore no additional translateY is allowed here. * * No sliders, tracks, recording or mixer functionality changed. */ @media (min-width:1180px){ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-mixing-title, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-mixing-title + *{ position:static !important; transform:none !important; margin-top:0 !important; } } /* * Smaller layouts keep their natural responsive flow. */ @media (max-width:1179px){ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-mixing-title, #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-responsive-mixing-title + *{ position:static !important; transform:none !important; } } /* ===END==[PLX_PARTYMEDIA_RIGHT_LOWER_BLOCK_ALIGN_V3_20260811]=== */ /* ===START==[PLX_PARTYMEDIA_HIDE_BOTTOM_ADD_TRACK_V1_20260811]=== */ /* * User-confirmed target: * * ONLY the separate + Add track control underneath the track area. * * Do NOT change: * - the four blue sliders; * - Mixing Desk controls; * - #plx-pm-console-add-track; * - track functionality; * - recorder; * - runtime routing. */ #plx-cu-panel:has(#plx-pm-complete-panel) #plx-pm-add-track{ display:none !important; } /* ===END==[PLX_PARTYMEDIA_HIDE_BOTTOM_ADD_TRACK_V1_20260811]=== */ /* ===START==[PLX_PARTYMEDIA_USER_GRID_LAYOUT_CSS_V2_20260811]=== */ #plx-pm-user-layout-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; width:100%; box-sizing:border-box; margin:8px 0; padding:7px; border:1px solid rgba(255,215,0,.55); border-radius:10px; background:rgba(0,0,0,.35); } #plx-pm-user-layout-controls button{ appearance:none; border:1px solid #FFD700; border-radius:9px; background:#111; color:#FFD700; padding:7px 10px; font:inherit; font-weight:700; cursor:pointer; } #plx-pm-user-layout-status{ margin-left:auto; color:rgba(255,255,255,.8); font-size:.85em; } /* FULLSCREEN — EXPLICIT ROW/COLUMN */ @media (min-width:1180px){ #plx-pm-complete-panel.plx-pm-user-layout-edit, #plx-pm-complete-panel.plx-pm-user-layout-custom{ display:grid !important; grid-template-areas:none !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-template-rows:none !important; grid-auto-flow:row !important; grid-auto-rows:auto !important; column-gap:14px !important; row-gap:10px !important; align-items:start !important; width:100% !important; max-width:100% !important; min-width:0 !important; } #plx-pm-complete-panel.plx-pm-user-layout-edit > [data-plx-pm-user-layout-item], #plx-pm-complete-panel.plx-pm-user-layout-custom > [data-plx-pm-user-layout-item]{ grid-row: var(--plx-pm-user-grid-row) !important; grid-column: var(--plx-pm-user-grid-column) !important; grid-area:auto !important; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; } } /* ARRANGE */ #plx-pm-complete-panel.plx-pm-user-layout-edit > [data-plx-pm-user-layout-item]{ position:relative !important; outline: 1px dashed rgba(255,215,0,.55); outline-offset:3px; border-radius:8px; } #plx-pm-complete-panel.plx-pm-user-layout-edit > [data-plx-pm-user-layout-dragging="1"]{ opacity:.55; outline:2px solid #FFD700; } #plx-pm-complete-panel.plx-pm-user-layout-edit > [data-plx-pm-user-layout-over="1"]{ box-shadow: 0 0 0 2px #FFD700, 0 0 14px rgba(255,215,0,.45); } /* HANDLE */ .plx-pm-user-layout-drag-handle{ display:none; position:absolute; top:5px; right:5px; z-index:100; width:32px; height:26px; box-sizing:border-box; align-items:center; justify-content:center; border:1px solid #FFD700; border-radius:7px; background:rgba(0,0,0,.90); color:#FFD700; font-size:17px; line-height:1; font-weight:700; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; } #plx-pm-complete-panel.plx-pm-user-layout-edit .plx-pm-user-layout-drag-handle{ display:flex; } .plx-pm-user-layout-drag-handle:active{ cursor:grabbing; } /* SMALLER — SAME ORDER, ONE COLUMN */ @media (max-width:1179px){ #plx-pm-complete-panel.plx-pm-user-layout-edit, #plx-pm-complete-panel.plx-pm-user-layout-custom{ display:grid !important; grid-template-areas:none !important; grid-template-columns: minmax(0,1fr) !important; grid-template-rows:none !important; grid-auto-flow:row !important; gap:10px !important; width:100% !important; max-width:100% !important; min-width:0 !important; } #plx-pm-complete-panel.plx-pm-user-layout-edit > [data-plx-pm-user-layout-item], #plx-pm-complete-panel.plx-pm-user-layout-custom > [data-plx-pm-user-layout-item]{ grid-row:auto !important; grid-column:1 !important; width:100% !important; max-width:100% !important; min-width:0 !important; } } @media (max-width:600px){ #plx-pm-user-layout-controls{ gap:5px; } #plx-pm-user-layout-controls button{ flex:1 1 auto; min-width:0; padding:7px 6px; } #plx-pm-user-layout-status{ flex:1 0 100%; margin-left:0; } } /* ===END==[PLX_PARTYMEDIA_USER_GRID_LAYOUT_CSS_V2_20260811]=== */