/* Panel layout canonical (2026-05-25). Every tool's main panel reads as the same rectangle. Adds a `tool-panel-exp` wrapper class to the five tools that lacked a panel before (glossary, harmony- training, jazz-standards browse + song, tuner, metronome) and normalises max-width / min-height on every existing main panel so the "exact zelfde grootte" promise holds across the whole app. Includes the category-accent stripe + asymmetric padding-left for the visual centring shift (per design.md "Category-accent centring canonical"). TO ROLL BACK ------------ 1) delete this file (css/panel-layout.css) 2) remove the `_injectPanelLayout` block in js/core/nav.js (between the `PANEL LAYOUT — fallback injection` comments) AND its `_injectPanelLayout()` call 3) revert the HTML class additions / wrappers in pages/glossary.html pages/harmony-training.html pages/jazz-standards.html pages/tuner.html pages/metronome.html One `git revert ` on the commit that added this file undoes every change in a single step. */ /* Force the .tool-page wrapper to full width so the inner panel can actually hit 960. Default base.css gives .tool-page max-width 960px + 1rem side-padding → content area only ~928 wide. Scoped to body.cat-* so dashboard pages (settings / profile / etc.) keep their existing max-width. */ body.cat-learn .tool-page, body.cat-practice .tool-page, body.cat-play .tool-page, body.cat-tools .tool-page, body.cat-account .tool-page { max-width: none !important; } /* Intermediate flex wrappers that have `flex: 0 0 auto` shrink to their content's intrinsic width — so .et-exercise-box's `width: 100% !important` resolves to the wrapper's intrinsic width (~400px) instead of the .tool-page width (= 960). Force the wrappers themselves to 100% so the inner panel can actually reach 960. */ body.cat-practice #ph-ear-train, body.cat-practice #ph-staff-practice { width: 100% !important; /* Match the global 1100 max-width of every other category's panel (per Step 2 below). Earlier 960 came from when ear-training and sight-reading had a deliberately narrower frame; user 2026-05-26: "ear training en sight reading zijn niet breed genoeg." Aligned to 1100 so .et-exercise-box inside (also 1100 max via Step 2) can actually reach its target width. */ max-width: 1100px !important; align-items: stretch !important; margin: 0 auto !important; } /* Step 1 — full panel styling for the new wrappers AND the Analysis .find-panel.active (which previously had no panel styling — just `display: block; width: 100%`). */ .tool-panel-exp, .find-panel.active { background: var(--bg-control); border: 2px solid var(--border-default); border-radius: 10px; padding: 16px; box-sizing: border-box; /* overflow: hidden so the shell-bar + panel-tabs-bar at the top get clipped to the panel's rounded corners. Without this, menu 1 shows straight 90° corners overlapping the panel's curve at the top edges. User 2026-05-28 fourth pass: "menu1 has a straight corner, which overlaps the radius of the panel stroke." */ overflow: hidden; } /* Step 2 — uniform EXACT 960×540 sizing on every main panel. `!important` on EVERY size property (max-width, width, height, min/max-height) so we beat: (a) per-tool fixed widths like ear-training's `width: 540px`, (b) per-tool fixed heights like .et-exercise-box's `height: 460px`, (c) body.quiz-theme overrides on sight-reading / ear-training, (d) flex container intrinsic sizing. `overflow-y: auto` lets BT mixer / Looper with many tracks scroll inside the fixed frame. */ /* Step 2 — uniform 960 wide × ≥540 tall on every main panel. User v16-final: keep min-height: 540 (so short tools — tuner / metronome / harmony / glossary — all share the same minimum rectangle) but DROP max-height: 540 + the in-panel scrollbar. Tall tools (fretboard, library, BT mixer with many channels, looper with many tracks) grow vertically and the page scrolls naturally, so users actually see the lower half of the tool. The earlier `overflow-y: scroll` trick was unreliable: Mac auto- hides bars, flex column shrinks children, and even with !important the in-panel scroll discovered nothing. Page scroll beats both. */ .tool-panel-exp, .find-panel.active, #cof-layout, .ft-layout, .cl-layout, .et-exercise-box, .bt-mixer, .lp-tracks { max-width: 1100px !important; width: 100% !important; min-height: 540px !important; margin-left: auto !important; margin-right: auto !important; /* gap: 0 so panels with original flex-column gap (e.g. .bt-mixer had gap: 8px) don't add extra space between the shell-bar + tabs-bar + inner that panel-tabs.js appends. Without this BT ends up 16px taller than CoF / Looper (8px gap × 2 between the 3 children). User 2026-05-28 later pass: "backing tracks en looper hebben beide een andere hoogte ... cof is canonical." */ gap: 0 !important; } /* Step 2b — Analysis nested-panel suppression. `.find-panel.active` is the outer 960×540 panel; `.kf-unified-box` inside has its own gradient bg + border + padding from key-finder.css → two nested boxes user reported. Kill the inner's visual chrome so only the outer panel shows. Keep its flex layout so internal sub-panels still arrange correctly. */ .find-panel.active .kf-unified-box, .find-panel.active .fd-board-wrap { background: transparent !important; border: none !important; padding: 0 !important; min-height: 0 !important; max-width: none !important; width: 100% !important; } /* Step 3 — category accent: solid 4px coloured stripe on the left edge that follows the panel's rounded corners. User v18 final ("moet solid blijven. en moet mooi overlopen in de rand"): pseudo-element fills the entire padding box, inherits the panel's border-radius, and paints the stripe via `box-shadow: inset` on the left. The inset shadow is clipped by the pseudo's curved corners → the stripe bends naturally with the corner. z-index 10 floats the pseudo above any child bg so the stripe stays visible across section breaks (parent inset box-shadow on its own would paint BEHIND children — full-width row dividers in Looper / BT would cover it). Panel's own border stays uniform 1.5px grey. */ body.cat-learn #cof-layout, body.cat-learn .ft-layout, body.cat-learn .cl-layout, body.cat-learn .find-panel.active, body.cat-learn .tool-panel-exp, body.cat-learn .lib-glossary, body.cat-practice .et-exercise-box, body.cat-practice .tool-panel-exp, body.cat-play .bt-mixer, body.cat-play .lp-tracks, body.cat-play .tool-panel-exp, body.cat-play .jz-browse, body.cat-play .jz-detail, body.cat-tools .tool-panel-exp, body.cat-account .dashboard-panel { position: relative; } /* Accent stripe lives on the OUTER panel (#cof-layout / .cl-layout / .ft-layout / etc) — NOT on panel-tabs-inner. Reason: inner has `overflow-y: scroll`, and an `position: absolute` child of a scrolling parent SCROLLS WITH the content (the child's containing block IS the scrolling element's content area). So when the user scrolled inside a tool, the stripe scrolled UP off-screen — making it look like "the stripe doesn't reach the bottom of scrollable tools." User 2026-05-29: "in fretboard tool (scrollable) loopt de accent stripe links niet door tot onderaan. is wss zo bij alle tools wanneer scrollable." The outer panel has overflow: hidden (not scroll) — its absolutely-positioned children stay anchored to the panel's frame. Stripe now runs the FULL height of the panel including the bar area at the top (bars are below the stripe in z-order, so the stripe paints OVER the bars' left 14px — gives a continuous left edge from menu 1 top to panel bottom). */ body.app-shell.cat-learn #cof-layout::before, body.app-shell.cat-learn .cl-layout::before, body.app-shell.cat-learn .ft-layout::before, body.app-shell.cat-learn .find-panel::before, body.app-shell.cat-learn .tool-panel-exp::before, body.app-shell.cat-learn .lib-glossary::before, body.app-shell.cat-practice .et-exercise-box::before, body.app-shell.cat-practice .tool-panel-exp::before, body.app-shell.cat-play .bt-mixer::before, body.app-shell.cat-play .lp-tracks::before, body.app-shell.cat-play .tool-panel-exp::before, body.app-shell.cat-play .jz-browse::before, body.app-shell.cat-play .jz-detail::before, body.app-shell.cat-tools .tool-panel-exp::before, body.app-shell.cat-account .dashboard-panel::before { content: ''; position: absolute; /* Top dynamically set via JS (`--bars-height`) so the stripe starts just below menu 2, not over menu 1 / menu 2. Fallback 88px = the desktop sum (44 shell + 44 tabs). The stripe ALSO sits on the OUTER panel (not on the inner) so it stays anchored to the panel frame when inner scrolls — user 2026-05-29: "in fretboard tool (scrollable) loopt de accent stripe links niet door tot onderaan." Earlier rule placed it on panel-tabs-inner with `position: absolute; inset: 0` — but an absolutely-positioned descendant of a `overflow: scroll` container scrolls WITH the content (per CSS spec — its containing block is the inner's scroll-content area, not the visible padding box), so it disappeared off-screen after scroll. */ /* Stripe starts BELOW menu 2 (top = bars-height set by JS) and extends to the panel's visible bottom (bottom: -2 pushes into border-bottom zone, border-bottom-left-radius follows the panel's rounded corner curve so the stripe doesn't get visually clipped where the panel's `overflow:hidden` border-radius mask cuts in). User 2026-05-29: "de accent stripe loopt niet door tot helemaal onderaan wanneer ik scroll. fix dit in ELKE TOOL." */ top: var(--bars-height, 88px); bottom: -2px; left: 0; width: 14px; background: var(--cat-accent); pointer-events: none; z-index: 10; border-bottom-left-radius: calc(var(--radius-control, 10px) - var(--border-width, 2px)); } /* At responsive (≤1200) HIDE the accent stripe entirely. User 2026-05-30: "in responsive mode ... kun je die blauwe accent bar weghalen? ... responsive (en 150% viewport+) moet dus geen scrollbar en geen accent bar hebben. alleen browser native scroll bar." Stripe and custom themed scrollbar are desktop-only chrome. */ @media (max-width: 1200px) { body.app-shell.cat-learn #cof-layout::before, body.app-shell.cat-learn .cl-layout::before, body.app-shell.cat-learn .ft-layout::before, body.app-shell.cat-learn .find-panel::before, body.app-shell.cat-learn .tool-panel-exp::before, body.app-shell.cat-learn .lib-glossary::before, body.app-shell.cat-practice .et-exercise-box::before, body.app-shell.cat-practice .tool-panel-exp::before, body.app-shell.cat-play .bt-mixer::before, body.app-shell.cat-play .lp-tracks::before, body.app-shell.cat-play .tool-panel-exp::before, body.app-shell.cat-play .jz-browse::before, body.app-shell.cat-play .jz-detail::before, body.app-shell.cat-tools .tool-panel-exp::before, body.app-shell.cat-account .dashboard-panel::before { display: none !important; } } /* Step 4 — universal content margin canonical. Per user 2026-05-30 "in fretboard tool enzo de tekst tov de rand is perfect uitgelijnd qua spacing!! backing tracks en looper, die mixer panels niet. moet exact matchen met eg fretboard tool qua margin tov accent rand!!!! in jazz standards bij de search results is die margin vanaf de rand ook niet consistent daarmee. ... maak alle margins in elke tool identiek, op ELKE pagina inclusief alle settings pages!!!" Fretboard tool's right info panel (.ft-panel) is the canonical: padding: 20px 22px 20px 38px. That produces content at 40 left / 24 right from the OUTER panel edge (= 2 border + 38 padding-left / 2 border + 22 padding-right). All panels now match. The asymmetric 38/22 (= 16px diff) centres content visually between the 14px accent stripe's right edge and the panel's right edge. */ .tool-panel-exp { padding-left: 38px !important; padding-right: 22px !important; } .find-panel.active { padding-left: 38px !important; padding-right: 22px !important; } .et-exercise-box { padding-left: 38px !important; padding-right: 22px !important; } .bt-mixer { padding-left: 38px !important; padding-right: 22px !important; } .lp-tracks { padding-left: 38px !important; padding-right: 22px !important; } .dashboard-panel { padding: 16px 22px 16px 38px !important; } /* Mobile (≤600): no accent stripe → content dead-centred. The 14px left stripe disappears so the "visual centre against the stripe" compensation no longer applies. Symmetric padding (22/22) puts content at the geometric centre of the panel. Per user 2026-05-30: "mobile heeft geen accent stripe he. dus horizontal centering rules op mobile zijn anders dan op web, zodra die accent stripe niet zichtbaar is moet je dead horizontal center doen. geldt voor ALLE PAGINAS EN ALLE TOOLS EN ALLE SUBPAGINAS." */ /* Tablet AND mobile (≤1200) — same dead-centre treatment + full-bleed panel. User 2026-05-31: "op tablet wil ik geen panel meer. moet zelfde als op mobile basically. dus ook met donkere bg." Drop the 1100 max-width cap so panels fill the viewport on tablet (like they already do on mobile). */ @media (max-width: 1200px) { /* Full-bleed at responsive — same as mobile. */ body.app-shell .tool-panel-exp, body.app-shell .find-panel.active, body.app-shell #cof-layout, body.app-shell .ft-layout, body.app-shell .cl-layout, body.app-shell .et-exercise-box, body.app-shell .bt-mixer, body.app-shell .lp-tracks { max-width: none !important; } /* Drop the visible panel chrome (bg, border, rounded corners) at responsive — the panel base rule (line 62-75) paints the panel as a bordered card with `var(--bg-control)` bg. On mobile + tablet the user wants the panel INVISIBLE so the page reads like one full-bleed surface (matching the body bg). User 2026-05-31: "op tablet wil ik geen panel zien. moet screen wide, net als mobile. en de website background moet zelfde als op mobile:--tk-donker- grijs." Without these overrides the panel's bg/border/radius are still visible at tablet even with max-width: none — the user sees "a panel". */ body.app-shell .tool-panel-exp, body.app-shell .find-panel.active, body.app-shell #cof-layout, body.app-shell .ft-layout, body.app-shell .cl-layout, body.app-shell .et-exercise-box, body.app-shell .bt-mixer, body.app-shell .lp-tracks, body.app-shell .lib-glossary, body.app-shell .jz-browse, body.app-shell .jz-detail, body.app-shell .dashboard-panel { background: transparent !important; border: none !important; border-radius: 0 !important; } body.app-shell #cof-layout::before, body.app-shell .cl-layout::before, body.app-shell .ft-layout::before, body.app-shell .find-panel::before, body.app-shell .tool-panel-exp::before, body.app-shell .lib-glossary::before, body.app-shell .et-exercise-box::before, body.app-shell .bt-mixer::before, body.app-shell .lp-tracks::before, body.app-shell .jz-browse::before, body.app-shell .jz-detail::before, body.app-shell .dashboard-panel::before { display: none !important; } body.app-shell .tool-panel-exp, body.app-shell .find-panel.active, body.app-shell .et-exercise-box, body.app-shell .bt-mixer, body.app-shell .lp-tracks { padding-left: 22px !important; padding-right: 22px !important; } body.app-shell .dashboard-panel { padding-left: 22px !important; padding-right: 22px !important; } /* Split-panel halves — each half had asymmetric padding (more on the LEFT) to compensate for the accent stripe. On mobile the stripe is hidden so the L/R compensation has to flip back to symmetric. User 2026-05-31: "mobile: horizontal center alles opnieuw. heel belangrijk. mobile heeft nu die blauwe accent bar niet meer. dus alles moet opnieuw dead horizontal center worden gezet, op elke tool page. margins zijn nu compleet verkeerd." */ body.app-shell #cof-explainer, body.app-shell .cl-diagram-side, body.app-shell .cl-info-side, body.app-shell .ft-top, body.app-shell .ft-panel { padding-left: 16px !important; padding-right: 16px !important; } /* #cof-left stays at 12/12 — circle-of-fifths.css already handles it (the JS canvas size is computed as panel.clientWidth - 24 = 2 × 12, so the 12px is required for the wheel to centre). */ } /* TABLET ONLY (601-1200): drop outer panel padding so tablet reads as truly page-wide. Mobile (≤600) keeps the 22px padding from the @1200 block above. User 2026-05-31 SECOND PASS: "tablet viewport heeft deze margin links en rechts van de hele pagina. dat is FOUT. bij eerdere prompt heb je dat geprobeerd te fixen. dat is mislukt: je hebt op mobile de margin links en rechts van de toolbar menu 2 weggehaald. dat is niet goed dus revert dat stukje en pas het opnieuw aan ALLEEN op tablet viewport." */ @media (min-width: 601px) and (max-width: 1200px) { body.app-shell .tool-panel-exp, body.app-shell .find-panel.active, body.app-shell .et-exercise-box, body.app-shell .bt-mixer, body.app-shell .lp-tracks, body.app-shell .dashboard-panel { padding-left: 0 !important; padding-right: 0 !important; } } /* No per-tool max-width override — every tool panel renders at the same 1100 cap from the .tool-panel-exp rule above. User direction 2026-05-27: "tuner moet even breed als alle andere tool panels." The earlier 1500 cat-tools override (e62c515) and the 1500 tuner- only scope (8fb9e6b) both got rejected — wider felt wrong AND broke the visual proportion with the title/subtitle which max at ~800px wide. At 1100 the tuner toolbar slot (640 wide in cat- tools) still fits its 2 dropdowns + 2 slider-labels (natural 631 total) without squishing, and the title/subtitle/panel proportions match every other tool. If you ever consider re-introducing a wider-than-1100 panel for ANY individual tool: first confirm in writing that the user wants that specific tool wider, AND that they accept the visual asymmetry against the 800px subtitle. Default is 1100 everywhere. */ /* Every tool panel: identical 1100px max-width per user direction "geef elke tool exact zelfde breedte!". Removed an earlier cat- tools 600px override that made tuner/metronome differ — the user wants visual uniformity across all categories. */