/* IMusic Player — original styles, redesigned round 2. No framework, no copied theme. The old demo look (dark cluttered panels) was NOT copied: this is a light, simple layout with one dark transport bar, a slide-in settings panel, and an in-flow instrument rack that never covers the score. */ * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2937; background: #f6f7f5; } main { margin: 0 auto; padding: 12px 16px; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: auto; } .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff; border: 1px solid #dde3df; border-radius: 10px; padding: 14px 16px; } .controls button { font-size: 15px; padding: 8px 18px; border-radius: 8px; border: 1px solid #14251f; background: #14251f; color: #fff; cursor: pointer; } .controls button:hover { background: #24382f; } .controls label { font-size: 14px; display: flex; align-items: center; gap: 8px; } .controls input[type=range] { width: 140px; } .controls input#progress { width: 220px; } .controls select { font-size: 14px; padding: 4px 6px; } .controls button:disabled { opacity: 0.45; cursor: default; } .controls button:disabled:hover { background: #14251f; } .controls button.active { background: #0f766e; border-color: #0f766e; } .controls button.mini { font-size: 13px; padding: 5px 10px; } /* Dark transport bar: the primary action row, visually distinct. */ .controls.transport { background: #14251f; border-color: #14251f; color: #e7f0ea; margin-top: 0; border-top: none; border-radius: 0 0 10px 10px; padding: 8px 16px; row-gap: 4px; flex: 0 0 auto; } /* Transport button groups (user 2026-10-29): left = core + practice (open/play/stop/loop/metro/count-in/speed), right = everything else pushed to the right edge (instrument first, settings last). Groups wrap independently on narrow screens; the right group stays right-aligned on its own line via margin-left auto. Buttons sit 4px apart (was 8px): bare white icons, not green blocks. */ .transport-group { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .transport-group.right { margin-left: auto; } .controls.transport button { border-color: #22c55e; } .controls.transport input[type=range] { accent-color: #22c55e; } .song-info { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid #dde3df; border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 16px; } .song-info #song-artist { color: #4b5563; margin-left: 6px; } .cover { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; background: linear-gradient(135deg, #1e293b, #0f172a); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; } .file-row input[type=url] { width: 260px; font-size: 14px; padding: 5px 8px; border: 1px solid #cbd5d1; border-radius: 6px; } .file-note { margin: 8px 0 0; font-size: 13px; color: #92400e; } .region-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; } .region-group input[type=number] { width: 64px; font-size: 14px; padding: 4px 6px; } .tracks-drawer-head button i + .btn-label, .tracks-bulk button i + .btn-label { margin-left: 6px; } /* Icon + text label spacing on all icon buttons (icon-only buttons like the drawer tab and the row chevron have no .btn-label, so they are unaffected). */ .controls button i + .btn-label, .settings-head button i + .btn-label { margin-left: 6px; } /* Tracks drawer (panel polish 2026-10-29): ONE drawer on ALL screens, fixed from the left edge. Closed it shows only a >=44px tab with >; open it overlays the page. It closes on any tap outside it. */ #tracks-tab { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1090; width: 28px; height: 72px; border-radius: 0 12px 12px 0; border: none; background: #14251f; color: #fff; font-size: 16px; cursor: pointer; box-shadow: 2px 0 12px rgba(0,0,0,.18); } #tracks-tab:hover { background: #24382f; } #tracks-tab, #settings-tab { transition: opacity .35s ease; } /* Close pills are the OPEN drawer's handle: they must never show while their drawer is closed. The drawer hides with -105%, but the 28px pill sticks out past the drawer's edge, so ~11px of it peeked over the tab (user report 2026-10-30) — that was the "second layer", not decoration. */ .tracks-drawer:not(.open) #tracks-close, .settings-panel:not(.open) #btn-close-settings { display: none; } /* Edge tabs auto-hide (user 2026-10-30): 3s idle fades the < > tabs out; any activity removes the class (see pokeTabs in player.ts) and they fade back in. pointer-events off while faded so an invisible tab can never be tapped by accident. The open drawers' close pills follow the same rule, so no edge handle lingers. */ body.tabs-idle #tracks-tab, body.tabs-idle #settings-tab, body.tabs-idle #tracks-close, body.tabs-idle #btn-close-settings { opacity: 0; pointer-events: none; } .tracks-drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 340px; max-width: 88vw; background: #fff; border-right: 1px solid #dde3df; border-radius: 10px 0 0 0; box-shadow: 4px 0 24px rgba(0,0,0,.18); z-index: 1100; transform: translateX(-105%); transition: transform .22s ease; pointer-events: none; } .tracks-drawer-panel { height: 100%; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; padding: 16px; } /* Collapse button: slim black pill riding the drawer's right edge, mirroring the open tab (user reference 2026-10-29). */ #tracks-toggle-all { font-size: 11px; padding: 4px 8px; min-height: 32px; border-radius: 6px; } #tracks-toggle-all i { font-size: 13px; } #tracks-close { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 28px; height: 72px; background: #14251f; color: #fff; border: none; border-radius: 0 12px 12px 0; font-size: 16px; cursor: pointer; box-shadow: 2px 0 12px rgba(0,0,0,.18); z-index: 5; } #tracks-close:hover { background: #24382f; } .tracks-drawer.open { transform: translateX(0); pointer-events: auto; } .tracks-drawer-head { display: flex; justify-content: space-between; align-items: center; } .tracks-drawer-head h2 { margin: 0; font-size: 16px; } .tracks-drawer-head button { font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid #14251f; background: #14251f; color: #fff; cursor: pointer; min-height: 40px; } .tracks-note { font-size: 13px; color: #4b5563; margin: 8px 0; } .tracks-bulk { display: flex; gap: 8px; margin-bottom: 8px; } .tracks-bulk button { font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid #1f2937; background: #fff; color: #1f2937; cursor: pointer; min-height: 40px; } .tracks-bulk button:hover { background: #f3f4f6; } /* Track accordion rows: quick row always visible, advanced section expands below it. One row open at a time. */ .track-row { padding: 8px 16px; margin: 0 -16px; border-top: 1px solid #eef1ee; font-size: 13px; } .track-row:first-child { border-top: none; } .track-row.focused { background: #f3f4f6; } .track-head { display: flex; gap: 10px; align-items: center; cursor: pointer; } .track-head-main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .track-head-top { display: flex; gap: 6px; align-items: center; } .track-head-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .track-head .track-icon { font-size: 38px; color: #1f2937; flex: 0 0 auto; width: 36px; text-align: center; } .track-head .track-name { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: none; color: #1f2937; cursor: pointer; font-size: 13px; padding: 4px 2px; text-align: left; } .track-head .track-name:hover { text-decoration: underline; } .track-head .mini.icon-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; border: 1px solid #1f2937; background: #fff; color: #1f2937; cursor: pointer; flex: 0 0 auto; min-height: 32px; } .track-head .mini.icon-btn i { font-size: 13px; } .track-head .mini.icon-btn.active { background: #0f766e; border-color: #0f766e; color: #fff; } .track-head input[type=range] { width: 100%; } .track-head-controls .slider-tip-wrap { flex: 1 1 120px; } .track-expand { background: none; border: none; color: #1f2937; cursor: pointer; font-size: 18px; padding: 10px 4px; flex: 0 0 auto; min-height: 40px; } .track-adv { padding: 8px 0 2px 0; margin-top: 6px; border-top: 1px solid #eef1ee; display: flex; flex-direction: column; gap: 8px; } .track-adv[hidden] { display: none; } .track-adv-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .track-adv-line .mini-label { font-size: 12px; color: #4b5563; flex: 0 0 104px; } .track-adv-line input[type=range] { width: 110px; } .track-adv-line select { font-size: 13px; padding: 4px 6px; } /* Font rows: one visual row per font (panel polish) — label (ellipsis, full name in the title tooltip) + family + size + B/I toggles. */ .font-row { display: grid; grid-template-columns: minmax(64px, 1fr) 96px 26px 24px 24px; gap: 4px; align-items: center; } .font-row .font-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .font-toggle { font-size: 12px; font-weight: 700; padding: 4px 0; border-radius: 6px; border: 1px solid #cbd5d1; background: #fff; color: #374151; cursor: pointer; } .font-toggle.active { background: #14251f; border-color: #14251f; color: #fff; } /* Settings search box (fixed at the panel top). */ .settings-search { display: flex; gap: 8px; align-items: center; border: 1px solid #dde3df; border-radius: 8px; padding: 8px 10px; margin: 12px 0 4px; } .settings-search input { border: none; outline: none; font-size: 14px; width: 100%; } /* Settings panel: right-side drawer mirroring the tracks drawer (slim dark tab "<" at the right edge when closed, slim dark ">" pill at the panel's left edge when open, edge swipe both ways). Opened on demand only, so it never covers the score uninvited. */ .settings-panel { position: absolute; top: 0; bottom: 0; right: 0; width: 340px; max-width: 92vw; background: #fff; border-left: 1px solid #dde3df; border-radius: 0 10px 0 0; box-shadow: -4px 0 24px rgba(0,0,0,.18); z-index: 1100; transform: translateX(105%); transition: transform .18s ease; } .settings-panel.open { transform: translateX(0); } .settings-panel-scroll { height: 100%; box-sizing: border-box; overflow-y: auto; padding: 16px; } #settings-tab { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1090; width: 28px; height: 72px; border-radius: 12px 0 0 12px; border: none; background: #14251f; color: #fff; font-size: 16px; cursor: pointer; box-shadow: -2px 0 12px rgba(0,0,0,.18); } #settings-tab:hover { background: #24382f; } #btn-close-settings { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); width: 28px; height: 72px; background: #14251f; color: #fff; border: none; border-radius: 12px 0 0 12px; font-size: 16px; cursor: pointer; box-shadow: -2px 0 12px rgba(0,0,0,.18); z-index: 5; } #btn-close-settings:hover { background: #24382f; } /* Dark tabs on a dark score: a faint light edge keeps the pills visible. */ body.score-dark #tracks-tab, body.score-dark #tracks-close, body.score-dark #settings-tab, body.score-dark #btn-close-settings { border: 1px solid rgba(255,255,255,0.35); } .settings-head { display: flex; justify-content: space-between; align-items: center; } .settings-head h2 { margin: 0; font-size: 18px; } .settings-head button { font-size: 11px; padding: 4px 8px; border-radius: 6px; border: 1px solid #14251f; background: #14251f; color: #fff; cursor: pointer; min-height: 32px; } .settings-head button i { font-size: 13px; } .settings-panel h3 { font-size: 14px; margin: 18px 0 8px; color: #1f2937; text-transform: uppercase; letter-spacing: .04em; } .settings-rows { display: flex; flex-direction: column; gap: 10px; } .settings-rows label { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Two-column rows (learned from the old panel): label text on the left, controls on the right. Static rows have bare text, so the first element child is the control; dynamic rows wrap the text in a span, so the control right after the span gets the margin. Only the first control takes the free space — later controls (opacity slider) stay grouped with it. Checkboxes move right too, after their text. */ .settings-rows label > :first-child:not(span) { margin-left: auto; } .settings-rows label > span + * { margin-left: auto; } .settings-rows label > input[type=checkbox] { order: 2; } .settings-rows input[type=number] { width: 64px; font-size: 14px; padding: 4px 6px; } .settings-rows input[type=range] { width: 110px; } .settings-rows input[type=color] { width: 40px; height: 30px; padding: 2px; } .settings-note { font-size: 12px; color: #6b7280; } /* Instrument rack: solid band pinned to the frame's bottom, flush with the transport below and spanning the frame's full width. */ .rack-section { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1010; background: #111827; border-top: 1px solid #374151; border-radius: 0; padding: 0; margin-top: 0; pointer-events: auto; } /* Interactive since 2026-10-30 (user: taps must reach the instrument, not the score behind it): pointer-events auto so the rack owns its strip, and z 1010 sits ABOVE the engine cursor layer (z 1000) so the playing highlight stops at the rack's top edge instead of painting over the instrument — while staying BELOW the media panel (1050) and the video PiP (1060), so video still sits on top of the rack. Mutual exclusion keeps panel and rack from showing together anyway. Empty rack hides the strip. Boards fill the strip edge to edge: no side padding, no rounded corners, no side borders, so the band meets the transport below as one continuous block. */ .rack-section:has(#rack:empty) { display: none; } .rack-head { font-size: 14px; font-weight: 600; margin-bottom: 10px; } .rack-piano { position: relative; display: flex; overflow-x: auto; height: 120px; border: none; border-radius: 0; background: #111827; padding: 0; } .rack-key.white { flex: 1 0 0; min-width: 22px; background: #f9fafb; border-right: 1px solid #9ca3af; } .rack-key.black { position: absolute; top: 0; width: 1.8%; height: 62%; background: #111827; border: 1px solid #000; border-radius: 0 0 4px 4px; z-index: 2; } .rack-key.lit { background: #22c55e !important; } .rack-key.pressed { background: #fbbf24 !important; } .rack-key, .rack-fret-cell, .rack-pad { cursor: pointer; } .rack-fretboard { overflow-x: auto; border: none; border-radius: 0; background: #1f2937; padding: 8px 0; } .rack-fret-row { display: flex; align-items: center; gap: 0; min-width: 720px; } .rack-fret-label { flex: 0 0 52px; font-size: 12px; color: #d1d5db; } .rack-fret-num { flex: 1; text-align: center; font-size: 11px; color: #9ca3af; padding: 2px 0; } .rack-fret-cell { flex: 1; height: 26px; border-right: 1px solid #6b7280; border-bottom: 1px solid #4b5563; } .rack-fret-cell.lit { background: #f97316 !important; } .rack-fret-cell.pressed { background: #fbbf24 !important; } .rack-kit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px 10px; } .rack-pad { border: 2px solid #374151; border-radius: 10px; padding: 18px 6px; text-align: center; font-weight: 600; background: #f3f4f6; } .rack-pad.lit { background: #f97316; color: #fff; border-color: #ea580c; } .rack-pad.pressed { background: #fbbf24 !important; } #imusic-score.drag-over { outline: 3px dashed #166534; outline-offset: 2px; } main.css-fullscreen { position: fixed; inset: 0; z-index: 9999; max-width: none; overflow: auto; background: #f6f7f5; } /* Full-viewport app layout (user 2026-10-30: the player must BE the screen, not a box nested in the page — the old golden-ratio frame was taller than most viewports, so the page itself scrolled and a right scrollbar appeared). main is a 100dvh flex column in EVERY view now (not only fullscreen): the frame takes exactly the remaining height, the transport keeps its natural height at the bottom, and only the score scrolls internally. This RETIRES the 2026-10-29 golden-ratio frame (and the fullscreen-only flex rules below, now folded into the base rules): the frame is no longer 1.618/1, it is as tall as the viewport leaves. The fullscreen button still matters: it hides the browser chrome via the API (plus this fixed fallback when the API is missing). */ /* Score wrapper: anchors the count-in overlay above the score without putting anything inside alphaTab's container (which the renderer owns). Golden-ratio frame (YouTube-style screen): width flexes full-screen, height = width / 1.618, excess score scrolls INSIDE the frame instead of growing the page. The transport below joins it with no gap and square top corners, so frame + transport read as one player unit. */ .score-wrap { position: relative; margin-top: 0; aspect-ratio: auto; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Inner scroll container: the wrap itself must NOT scroll, or the rack overlay (absolute, bottom 0) would scroll away with the score instead of staying pinned to the frame's visible bottom. Horizontal scrolling is LOCKED OFF (user 2026-10-29: a sideways scrollbar kept appearing under the score and every left/right swipe shifted it). overflow-x hidden still lets the engine move the frame programmatically (playback cursor-follow), it only stops the user's own swipe/drag from shifting the score sideways. Vertical scroll stays automatic: Page layout stacks systems downward. */ .score-scroll { height: 100%; overflow-x: hidden; overflow-y: auto; background: #fff; padding-top: 12px; } /* Horizontal padding REMOVED (was 12px): alphaTab measures the container by offsetWidth (border-box, padding included) and lays the surface out that wide, so 12px side padding pushed the surface ~13px past the frame's right edge — the sideways scrollbar and the swipe-shift. Vertical padding stays: top/bottom air is harmless (vertical scroll exists by design). 1px of right-border width may still overhang; overflow-x hidden clips that invisibly. */ #imusic-score { position: relative; background: #fff; border: 1px solid #dde3df; border-bottom: none; border-radius: 10px 10px 0 0; padding: 0 0 12px 0; height: 100%; overflow: visible; } /* NEVER re-add top/side padding here (lesson 2026-10-30): the engine's cursor layer and our .region-block divs are absolutely positioned against this element's padding box, while the notation canvas sits at the content box. Any top padding shifts wash AND beat line up by exactly that padding against the staff (sides were exact only because side padding was already 0). The 12px of air above the score now lives on .score-scroll instead, where it moves container, canvas and overlays together. */ /* Welcome screen (user 2026-10-29, modeled on the original Iplay empty state): shown on access instead of auto-loading a song; hides for good once a score loads (onScoreLoaded), until reload. An absolute overlay inside the frame so the transport below stays put; scrolls internally when the frame is short (phones). */ .welcome { position: absolute; inset: 0; z-index: 1020; overflow-y: auto; background: #fff; color: #1f2937; border-radius: 10px 10px 0 0; } /* Welcome sits above the engine cursor layer (z 1000) — otherwise the old score's first-bar highlight and cursor line punch through the opaque overlay at the frame's left edge after goHome (the old score stays rendered behind by design). Still below drawers/popups (1100) so their edge tabs stay reachable from the welcome screen. */ .welcome-inner { max-width: 640px; margin: 0 auto; padding: 28px 16px; text-align: center; } .welcome-brand { margin: 0; font-size: 32px; font-weight: 800; color: #14532d; } .welcome-slogan { margin: 2px 0 18px; font-size: 17px; font-weight: 600; color: #166534; } .welcome-hello { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #374151; } .welcome-note { margin: 0 auto 18px; font-size: 14px; line-height: 1.6; color: #6b7280; max-width: 520px; } .welcome-search { display: flex; align-items: center; gap: 8px; max-width: 520px; margin: 0 auto 16px; border: 1px solid #d1d5db; border-radius: 10px; padding: 10px 14px; background: #fff; } .welcome-search:focus-within { border-color: #166534; box-shadow: 0 0 0 3px rgba(22,101,52,0.15); } .welcome-search i { color: #9ca3af; } .welcome-search input { flex: 1 1 auto; border: none; outline: none; font: inherit; font-size: 15px; color: #1f2937; background: transparent; min-width: 0; } .welcome-demos { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0 auto; } .welcome-demo { font: inherit; text-align: left; background: #fff; border: 1px solid #dde3df; border-radius: 10px; padding: 12px 16px; cursor: pointer; } .welcome-demo:hover { background: #ecfdf5; border-color: #166534; } .welcome-demo-name { display: block; font-weight: 700; font-size: 15px; color: #1f2937; } .welcome-demo-meta { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; } .welcome-empty { font-size: 14px; color: #6b7280; } .welcome-or { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 18px auto; color: #9ca3af; font-size: 13px; } .welcome-or::before, .welcome-or::after { content: ""; flex: 1 1 auto; border-top: 1px solid #e5e7eb; } .welcome-open { font: inherit; font-weight: 700; font-size: 15px; color: #14532d; background: #fff; border: 1px dashed #9ca3af; border-radius: 10px; padding: 14px 20px; cursor: pointer; } .welcome-open:hover { border-color: #166534; background: #ecfdf5; } .welcome-future { margin: 16px 0 0; font-size: 12px; color: #9ca3af; } .welcome.drag-over { outline: 3px dashed #166534; outline-offset: -3px; } body.score-dark .welcome { background: #1b1b1d; color: #e5e7eb; } body.score-dark .welcome-brand { color: #a7e8c8; } body.score-dark .welcome-slogan { color: #a7e8c8; } body.score-dark .welcome-hello { color: #e5e7eb; } body.score-dark .welcome-note, body.score-dark .welcome-demo-meta, body.score-dark .welcome-empty, body.score-dark .welcome-future { color: #9ca3af; } body.score-dark .welcome-search { background: #111827; border-color: rgba(255,255,255,0.12); } body.score-dark .welcome-search input { color: #e5e7eb; } body.score-dark .welcome-demo { background: #111827; border-color: rgba(255,255,255,0.12); } body.score-dark .welcome-demo:hover { background: rgba(255,255,255,0.08); border-color: #166534; } body.score-dark .welcome-demo-name { color: #e5e7eb; } body.score-dark .welcome-or::before, body.score-dark .welcome-or::after { border-top-color: rgba(255,255,255,0.12); } body.score-dark .welcome-open { background: #111827; color: #a7e8c8; border-color: #4b5563; } body.score-dark .welcome-open:hover { background: rgba(255,255,255,0.08); border-color: #166534; } /* Saved library on the welcome screen (File menu "Lưu vào ứng dụng"): rows mirror the demo rows; the load button takes the row, the × deletes only (confirm first). */ .welcome-saved { max-width: 520px; margin: 18px auto 0; text-align: left; } .welcome-saved-head { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #374151; } .welcome-saved-list { display: flex; flex-direction: column; gap: 8px; } .welcome-saved-row { display: flex; align-items: stretch; background: #fff; border: 1px solid #dde3df; border-radius: 10px; } .welcome-saved-row:hover { background: #ecfdf5; border-color: #166534; } .welcome-saved-load { flex: 1 1 auto; min-width: 0; font: inherit; text-align: left; background: none; border: none; padding: 12px 16px; cursor: pointer; } .welcome-saved-del { flex: 0 0 auto; width: 44px; font-size: 20px; color: #9ca3af; background: none; border: none; cursor: pointer; border-radius: 0 10px 10px 0; } .welcome-saved-del:hover { color: #dc2626; background: rgba(220,38,38,0.08); } body.score-dark .welcome-saved-head { color: #e5e7eb; } body.score-dark .welcome-saved-row { background: #111827; border-color: rgba(255,255,255,0.12); } body.score-dark .welcome-saved-row:hover { background: rgba(255,255,255,0.08); border-color: #166534; } body.score-dark .welcome-saved-del:hover { color: #f87171; background: rgba(248,113,113,0.12); } /* Cursor / selection / highlight colors (round 3 fix). alphaTab 1.8.4 renders cursors as plain divs with NO background of its own: without these rules the bar wash, the beat line and the selection wash are fully transparent — which is exactly why round 2 showed no cursor even though enableCursor/enableAnimatedBeatCursor/ enableElementHighlighting were all on. The four colors are CSS variables set from the Settings panel (live Iplay defaults), so the user can change them like any other color. Panel polish 2026-10-29: the bar wash is now a pale orange wash, NOT the selection purple — the old shared purple made a stopped bar look selected after the loop region was cleared. */ #imusic-score .at-cursor-bar { background: var(--imusic-cursor-bar, rgba(251, 146, 60, 0.15)); } #imusic-score.has-region-wash .at-cursor-bar { display: none; } #imusic-score .at-selection div { background: var(--imusic-selection, rgba(64, 64, 255, 0.2)); } #imusic-score .at-cursor-beat { background: var(--imusic-cursor-beat, rgba(251, 146, 60, 0.75)); width: 3px; } #imusic-score .at-highlight * { fill: var(--imusic-note-highlight, #fb923c); stroke: var(--imusic-note-highlight, #fb923c); } /* Drag-selected bar region (round 3): bar-granular wash drawn from MasterBarBounds.realBounds. pointer-events none so clicks still reach alphaTab's own beat handling underneath. */ #imusic-score .region-block { position: absolute; background: var(--imusic-selection, rgba(64, 64, 255, 0.2)); pointer-events: none; z-index: 2; } /* Count-in overlay (round 3): a big beat number floating over the score while the engine plays its one-bar count-in, then it hides itself. Panel polish 2026-10-29: bottom-right corner of the score area, so it never covers the song title while counting. */ .countin-overlay { position: absolute; bottom: 16px; right: 16px; z-index: 1100; pointer-events: none; text-align: center; background: rgba(20, 37, 31, 0.92); color: #fff; border-radius: 16px; padding: 12px 28px 10px; box-shadow: 0 4px 24px rgba(0,0,0,.35); } .countin-overlay[hidden] { display: none; } #countin-number { font-size: 56px; font-weight: 800; line-height: 1; } .countin-label { font-size: 13px; color: #a7e8c8; margin-top: 2px; } /* Advanced settings groups: collapsible so the panel stays short. */ .settings-panel details.settings-group { border-top: 1px solid #eef1ee; margin-top: 14px; padding-top: 6px; } .settings-panel details.settings-group summary { font-size: 14px; font-weight: 700; color: #1f2937; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; padding: 8px 0; } .settings-panel details.settings-group .settings-rows select { font-size: 13px; padding: 4px 6px; max-width: 220px; } /* 220px: đủ cho option dài nhất "GroupSimilarInstruments" của Bracket Extend Mode (user chốt 2026-10-31: nới rộng ô, không rút gọn chữ); select chỉ giãn tới mức nội dung cần nên các ô ngắn không bị ảnh hưởng */ /* Font rows: scoped + placed AFTER the generic .settings-rows rules above on purpose — with equal specificity the later rule wins, so the generic 64px number width and 13px select font used to beat these compact font controls (that is why the size box never actually shrank). Ẩn nút tăng/giảm của ô số: chỉ còn gõ số. */ .settings-rows .font-row select { font-size: 12px; padding: 3px; } .settings-rows .font-row input[type=number] { width: 100%; font-size: 12px; padding: 2px; -moz-appearance: textfield; appearance: textfield; } .settings-rows .font-row input[type=number]::-webkit-outer-spin-button, .settings-rows .font-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } @media (max-width: 640px) { /* Mobile must be REALLY good: the transport sticks to the bottom so play / stop / speed are always one tap away, buttons are finger-sized, and no panel ever covers the score except the settings sheet the user opened. */ .controls.transport { position: sticky; bottom: 0; z-index: 1100; border-radius: 0 0 10px 10px; } .controls button { min-height: 44px; padding: 10px 14px; } .controls input[type=range], .controls input#progress { width: 100%; height: 32px; } .file-row input[type=url] { width: 100%; } /* Drawer quick rows keep the long volume slider on phones too (the controls line wraps if a very narrow drawer needs it). */ .tracks-drawer { width: 85vw; max-width: 420px; } .track-head-controls .slider-tip-wrap { min-width: 120px; } .track-adv-line input[type=range] { width: 100%; } .settings-panel { width: 100%; max-width: 100%; } .rack-kit { grid-template-columns: repeat(2, 1fr); } .cover { flex-basis: 52px; width: 52px; height: 52px; font-size: 28px; } } /* Staff buttons in the expanded track row (replaces the old select). */ .staff-btn { padding: 6px 10px; border: 1px solid #d1d5db; background: #fff; border-radius: 8px; font-size: 13px; cursor: pointer; line-height: 1.2; } .staff-btn.active { background: #14251f; color: #fff; border-color: #14251f; } .staff-btn:disabled { opacity: 0.45; cursor: default; } /* Slider value tooltips (track rows): no inline numbers, the value shows as a bubble above the thumb while hovering, dragging, or focusing. */ .slider-tip-wrap { position: relative; display: inline-flex; } .slider-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); background: #14251f; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 5; } .slider-tip.show { opacity: 1; } /* Speaker icon on the quick track row: doubles as the mute toggle. */ .track-vol-btn { background: none; border: none; cursor: pointer; padding: 4px; flex: 0 0 auto; border-radius: 6px; } .track-vol { accent-color: #22c55e; } .track-vol-btn:hover { background: #f3f4f6; } .track-vol-btn i { font-size: 18px; color: #1f2937; } .track-vol-btn.muted i { color: #dc2626; } /* Staff icon buttons: compact, icon-sized; Numbered shows an underlined 2. */ .staff-btn.staff-icon-btn { min-width: 40px; padding: 6px 8px; font-weight: 700; } .staff-btn.staff-icon-btn i { font-size: 14px; } .num-underline { text-decoration: underline; text-underline-offset: 2px; } /* Icon-only control buttons (transport / file / actions rows carry no text labels anymore, only icons + tooltips): uniform 44px squares. Placed last so it wins over the earlier .controls button padding. */ .controls button { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* Transport buttons: white icons only, round hover light (user 2026-10-29, like the original). No green fills: bare icons pack tighter than 44px blocks, so the row breathes. Default = white icon on transparent; hover = soft white round light; pressed toggles (loop/metro/count-in/instrument — .active + aria-pressed kept in sync by syncTransportLabels) and open popup triggers stay lit brighter. Scoped to direct group children ONLY: popup menu buttons inside .popup keep their own full-width style. */ .controls.transport .transport-group > button, .controls.transport .transport-group > .popup-anchor > button { width: 36px; height: 36px; min-height: 36px; background: transparent; border: none; color: #fff; border-radius: 50%; } .controls.transport .transport-group > button:hover, .controls.transport .transport-group > .popup-anchor > button:hover { background: rgba(255,255,255,0.12); } .controls.transport .transport-group > button.active, .controls.transport .transport-group > .popup-anchor > button.active, .controls.transport .transport-group > button[aria-pressed="true"], .controls.transport .transport-group > .popup-anchor > button[aria-pressed="true"], .controls.transport .transport-group > button[aria-expanded="true"], .controls.transport .transport-group > .popup-anchor > button[aria-expanded="true"] { background: rgba(255,255,255,0.22); } .controls.transport .transport-group > button:disabled, .controls.transport .transport-group > .popup-anchor > button:disabled { opacity: 0.4; background: transparent; } .controls.transport .transport-group > button:disabled:hover, .controls.transport .transport-group > .popup-anchor > button:disabled:hover { background: transparent; } /* Speed is the only text chip in the row: pill-shaped (fully round ends) with auto width so 0.25x/1.50x never clip. */ .controls.transport .transport-group > .popup-anchor > #btn-speed { width: auto; min-width: 36px; padding: 0 10px; border-radius: 999px; } /* Tiến trình lên hàng trên kiểu YouTube/bản gốc: nhãn chiếm trọn hàng đầu của transport, thanh trượt dàn hết chiều rộng, giờ ở cuối. */ .controls.transport .transport-progress { flex: 1 1 100%; position: relative; display: flex; margin: -8px -16px 0; } /* Progress bar flush with the transport's top edge and full-bleed (YouTube/original style, user 2026-10-29): the negative margins cancel the transport's own padding (8px 16px) — flex-grow absorbs the freed space so the row spans exactly the border-box width. display:flex also restores the full-width slider: the old