diff --git a/src/components/ChoiceSelect/ChoiceSelect.css b/src/components/ChoiceSelect/ChoiceSelect.css index 1f4570f..8a81f62 100644 --- a/src/components/ChoiceSelect/ChoiceSelect.css +++ b/src/components/ChoiceSelect/ChoiceSelect.css @@ -1,4 +1,3 @@ -/* ChoiceSelect.css */ .choice-select { position: relative; display: flex; @@ -11,12 +10,12 @@ .choice-select__input { flex: 1 1 auto; + height: var(--card-control-height); padding: 0 var(--space-6) 0 var(--space-3); - background: var(--bg-panel); + background: transparent; color: var(--text-primary); - border: var(--border-width) solid var(--border-hairline); border-radius: var(--radius-sm); @@ -43,13 +42,22 @@ .choice-select__chevron { position: absolute; - right: var(--space-2); - top: 50%; - height: 45%; - aspect-ratio: 1; - transform: translateY(-50%); + top: 0; + right: 5%; + bottom: 0; + + width: 4cqh; + + display: flex; + align-items: center; + justify-content: center; pointer-events: none; color: var(--accent-brand); - font-size: var(--font-sm); +} + +.choice-select__chevron svg { + width: 100%; + height: 100%; + display: block; } diff --git a/src/features/dsp408/components/InputSection/InputSection.css b/src/features/dsp408/components/InputSection/InputSection.css index 5faaf4a..599d58e 100644 --- a/src/features/dsp408/components/InputSection/InputSection.css +++ b/src/features/dsp408/components/InputSection/InputSection.css @@ -16,6 +16,7 @@ } .input-graph-panel { + position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; @@ -27,6 +28,27 @@ border-radius: var(--radius-md); } +.input-bypass-overlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + z-index: 2; +} + +.input-bypass-overlay span { + font-size: 8cqh; + font-weight: 800; + letter-spacing: 0.15em; + color: #f87171; + text-shadow: 0 0 12px rgba(0, 0, 0, 0.6); + transform: rotate(-8deg); + opacity: 0.85; + user-select: none; +} + .input-graph__title { flex: 0 0 auto; @@ -86,7 +108,7 @@ /* Peq Sliders */ .input-panel { position: relative; - height: 10; + height: 100%; aspect-ratio: 0.8; flex: 0 0 auto; @@ -200,11 +222,20 @@ } .crossover-panel__select { + flex: 0 0 auto; + width: 85%; + font-family: var(--font-ui); font-size: 4cqh; } -.crossover-panel__select .choice-select__input { +.crossover-panel__select .choice-select__input, +.crossover-panel__select .choice-select__input option { + height: 100%; + padding: 0; + padding-left: 2cqh; font-size: 4cqh; + color: var(--accent-brand); + border-radius: var(--radius-sm); } .peq-band-list { @@ -223,17 +254,16 @@ padding: 1cqh; overflow: hidden; - - aspect-ratio: 2; } .peq-band-list__row { - flex: 1 1 0; + flex: 1 1 auto; + min-height: 0; min-width: 0; display: grid; - grid-template-columns: 1fr 1.2fr 1fr 1fr 1.6fr 1.2fr; + grid-template-columns: 0.4fr 0.55fr 0.4fr 0.5fr 1.2fr 0.5fr; align-items: stretch; gap: 1cqh; @@ -347,7 +377,7 @@ } .input-graph-view-toggle__btn.active { - background: var(--accent, #4dd0e1); + background: var(--accent-brand); color: var(--bg-void); } @@ -361,4 +391,9 @@ color: var(--accent-brand); background: transparent; + + text-align: center; + text-align-last: center; + padding: 0; + margin: 0; } diff --git a/src/features/dsp408/components/InputSection/InputSection.tsx b/src/features/dsp408/components/InputSection/InputSection.tsx index 69e465b..36c1d3d 100644 --- a/src/features/dsp408/components/InputSection/InputSection.tsx +++ b/src/features/dsp408/components/InputSection/InputSection.tsx @@ -395,7 +395,7 @@ function PeqBandList({ variant="toggle" className={peq.bypass ? 'active-warning' : ''} onClick={() => commit(band, { bypass: !peq.bypass })} - style={{ minHeight: 0 }} + style={{ minHeight: 0, fontSize: '4cqh', paddingInline: 0 }} > {peq.bypass ? 'Bypassed' : 'Bypass'} @@ -459,7 +459,8 @@ function InputSection({ for (const band of PEQ_BANDS_ORDER) { const current = displayPeq[band]; - if (current.gain === 0 || current.filter_type === PEQFilter.Peak) continue; // skip bands already flat + // Skip only if already flat — nothing to change. + if (current.gain === 0 && current.filter_type === PEQFilter.Peak) continue; await commitPEQ(band, 0, current.frequency, current.q, PEQFilter.Peak, current.bypass); } @@ -623,6 +624,12 @@ function InputSection({ }} /> )} + + {ActivePeq.bypass && ( +
+ BYPASSED +
+ )} diff --git a/src/features/dsp408/components/Matrixsection/Matrixsection.css b/src/features/dsp408/components/Matrixsection/Matrixsection.css index ddd37e8..a2858d3 100644 --- a/src/features/dsp408/components/Matrixsection/Matrixsection.css +++ b/src/features/dsp408/components/Matrixsection/Matrixsection.css @@ -116,4 +116,4 @@ flex: 0 0 20%; width: 20%; padding-right: 0; -} \ No newline at end of file +}