/* ============================================================ v6 Editor enhancements — visible polish on the existing .sequencer-grid + .cell DOM. Layered on top of style-v2.css without replacing the legacy rules. ============================================================ - Drag-paint cursor affordance - Velocity-modulated cell glow on .active cells - Live editor playhead overlay (vertical strip) - Stronger hover state on cells (depth + tint) - Active-cell border + subtle inner gradient for depth No JS code in here — all behavior lives in GridEnhancer.js. */ @layer v6-editor { /* ============================================================ Grid container ============================================================ */ .sequencer-grid { /* Position context for the playhead overlay */ position: relative; /* Hint that this is a paint surface */ cursor: crosshair; /* Prevent native browser drag of cells */ user-select: none; -webkit-user-select: none; /* Improve pointer drag UX on touch devices */ touch-action: none; } /* When the user is mid-drag, sharper cursor */ .sequencer-grid:active { cursor: cell; } /* ============================================================ Cell polish ============================================================ */ .sequencer-grid .cell { transition: background-color var(--duration-fast, 120ms) var(--ease-out-quart, ease-out), box-shadow var(--duration-fast, 120ms) var(--ease-out-quart, ease-out), border-color var(--duration-fast, 120ms) var(--ease-out-quart, ease-out), transform var(--duration-instant, 50ms) var(--ease-out-quart, ease-out); } /* Hover state — subtle tint preview before commit */ .sequencer-grid .cell:not(.active):hover { background: rgba(139, 92, 246, 0.12); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.25); } /* ============================================================ v9.0 — Bar / beat dividers ============================================================ Every cell carries data-col so we can target beat boundaries directly. Beat starts (col 4, 8, 12) get a faint left edge; half-bar (col 8) gets a stronger edge. The colored borders are layered into the box-shadow so they never conflict with the existing hover/active background. ============================================================ */ .sequencer-grid .cell[data-col="4"], .sequencer-grid .cell[data-col="8"], .sequencer-grid .cell[data-col="12"] { box-shadow: inset 1px 0 0 rgba(139, 92, 246, 0.22); } .sequencer-grid .cell[data-col="8"] { box-shadow: inset 2px 0 0 rgba(139, 92, 246, 0.42); } /* Subtle vertical separator at every quarter for scan-ability */ .sequencer-grid .cell[data-col="0"] { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05); } /* When the cell is ALSO active, keep the existing glow + add the divider on top so we still see beat boundaries through notes. */ .sequencer-grid .cell.active[data-col="4"], .sequencer-grid .cell.active[data-col="12"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(0.20 * var(--cv, 0.85))), inset 0 -1px 0 rgba(0, 0, 0, calc(0.25 * var(--cv, 0.85))), inset 1px 0 0 rgba(139, 92, 246, 0.55), 0 0 calc(6px * var(--cv, 0.85)) rgba(139, 92, 246, calc(0.30 * var(--cv, 0.85))); } .sequencer-grid .cell.active[data-col="8"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(0.20 * var(--cv, 0.85))), inset 0 -1px 0 rgba(0, 0, 0, calc(0.25 * var(--cv, 0.85))), inset 2px 0 0 rgba(139, 92, 246, 0.75), 0 0 calc(6px * var(--cv, 0.85)) rgba(139, 92, 246, calc(0.30 * var(--cv, 0.85))); } /* ============================================================ v9.0 — Chord-tone visual states ============================================================ GridRenderer adds class `cell--chord-tone` to cells whose row matches a chord-tone of the active chord at that col, and `cell--non-chord` to cells whose row is in-scale but NOT a chord tone of the active chord. Lets the user SEE harmonic correctness at a glance. ============================================================ */ /* v9.3 — REBALANCED: non-chord dimming was too aggressive (made grid feel washed-out), chord-tone brightening was barely perceptible. Now non-chord stays almost-normal, chord-tone POPS with a clear halo. User SEES which placements are consonant. */ .sequencer-grid .cell.active.cell--non-chord { /* Gentle desaturation only — note still clearly active. */ filter: saturate(0.88) brightness(0.96); } .sequencer-grid .cell.active.cell--chord-tone { /* Bright halo + subtle purple glow makes chord tones POP. */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 0 7px rgba(139, 92, 246, 0.42); } /* Inactive cells: tint chord-tone rows clearly so user can SEE consonant placement targets before clicking. Doubled from v9.0. */ .sequencer-grid .cell:not(.active).cell--chord-tone { background-color: rgba(139, 92, 246, 0.09); } /* Hover on inactive chord-tone gets a slightly brighter preview */ .sequencer-grid .cell:not(.active).cell--chord-tone:hover { background: rgba(139, 92, 246, 0.20); box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.45); } /* ============================================================ v9.2 — Velocity drag badge ============================================================ Appears next to the cursor while SHIFT + drag-vertical adjusts a cell's velocity. Reads the live value (10%–150%). ============================================================ */ .v6-vel-badge { position: fixed; z-index: 9800; pointer-events: none; padding: 4px 9px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(236, 72, 153, 0.95)); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 7px; font-family: ui-monospace, 'SF Mono', SFMono-Regular, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 8px 22px -6px rgba(139, 92, 246, 0.60); opacity: 0; transform: scale(0.85); transition: opacity 120ms ease, transform 120ms ease; } .v6-vel-badge.v6-vel-badge--in { opacity: 1; transform: scale(1); } .v6-vel-badge.v6-vel-badge--out { opacity: 0; transform: scale(0.85); } /* Active cell base (refines style-v2 .cell.active styles) */ .sequencer-grid .cell.active { /* `--cell-velocity` is set by GridEnhancer.js (0–1). Default 0.85 when unset. Drives both fill opacity and outer glow intensity. */ --cv: var(--cell-velocity, 0.85); /* Background — track-color tinted gradient. Track colors come from CSS variables on the parent .track (set elsewhere in style-v2). */ background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(0.08 * var(--cv))) 0%, rgba(0, 0, 0, calc(0.15 * var(--cv))) 100%); /* Velocity-modulated outer glow */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(0.20 * var(--cv))), inset 0 -1px 0 rgba(0, 0, 0, calc(0.25 * var(--cv))), 0 0 calc(6px * var(--cv)) rgba(139, 92, 246, calc(0.30 * var(--cv))); } /* Active cell hover — subtle lift, still committed */ .sequencer-grid .cell.active:hover { filter: brightness(1.10); } /* Erase preview during drag — when the user mouses over an active cell mid-erase, dim it slightly so they see what's about to clear */ .sequencer-grid:active .cell.active:hover { filter: brightness(0.85); } /* ============================================================ Playing-beat column highlight (refines existing .cell.playing so it reads as a soft column glow, not a per-cell flash) ============================================================ */ .sequencer-grid .cell.playing { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45), 0 0 8px rgba(34, 197, 94, 0.25); } .sequencer-grid .cell.active.playing { box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(0.20 * var(--cv, 0.85))), inset 0 -1px 0 rgba(0, 0, 0, calc(0.25 * var(--cv, 0.85))), inset 0 0 0 1px rgba(34, 197, 94, 0.65), 0 0 calc(10px * var(--cv, 0.85)) rgba(34, 197, 94, 0.45); } /* ============================================================ Phase 1 — sustained / expressive event notes (events overlay). `.cell--note-head` = onset cell of an event; `.cell--note-body` = the held tail cells. Applied by GridRenderer._applyEventOverlay so a multi-cell note reads as one long bar. Dormant until events exist. ============================================================ */ .sequencer-grid .cell--note-head { /* Bright left edge marks the onset, without fighting the active glow. */ border-left: 2px solid rgba(255, 255, 255, 0.65); } .sequencer-grid .cell--note-body { --cv: var(--cell-velocity, 0.85); background-color: rgba(139, 92, 246, 0.30); background-image: linear-gradient(180deg, rgba(255, 255, 255, calc(0.06 * var(--cv))) 0%, rgba(0, 0, 0, calc(0.12 * var(--cv))) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.16); } .sequencer-grid .cell--note-body.playing { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.55); } /* ============================================================ Live editor playhead — vertical overlay rendered by GridEnhancer.js. Positioned absolutely inside .sequencer-grid. ============================================================ */ .v6-editor-playhead { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 2; /* Soft green line with a brighter leading edge. Width is set per-grid by JS to match the column width. */ background: linear-gradient(90deg, rgba(34, 197, 94, 0.00) 0%, rgba(34, 197, 94, 0.10) 40%, rgba(34, 197, 94, 0.20) 50%, rgba(34, 197, 94, 0.10) 60%, rgba(34, 197, 94, 0.00) 100%); box-shadow: inset 2px 0 0 rgba(34, 197, 94, 0.70); transition: left var(--duration-fast, 120ms) linear; will-change: left; } /* Pulse the playhead leading edge — subtle */ @keyframes v6-playhead-pulse { 0%, 100% { box-shadow: inset 2px 0 0 rgba(34, 197, 94, 0.70); } 50% { box-shadow: inset 2px 0 0 rgba(34, 197, 94, 1.00); } } .v6-editor-playhead { animation: v6-playhead-pulse 0.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .v6-editor-playhead { animation: none; transition: none; } .sequencer-grid .cell { transition: none; } } }