/* ============================================================ Tab Editor — test page styles Layered on top of styles.css; reuses the Noir theme tokens. ============================================================ */ #page { max-width: 1240px; margin: 0 auto; padding: 16px 16px 80px; } #title_bar { text-align: center; padding: 18px 0 6px; } #site_title { margin: 0; font: 700 2.2em var(--font); letter-spacing: 0.02em; color: var(--accent); } #site_title .dot { color: var(--accent-hi); } #page_sub { margin: 4px 0 16px; color: var(--muted); font: 400 0.9em var(--font); } #page_sub .tag { background: var(--accent-hi); color: #000; padding: 1px 6px; border-radius: 3px; font-size: 0.8em; letter-spacing: 0.05em; } #page_sub a { color: var(--accent-hi); text-decoration: none; } #page_sub a:hover { text-decoration: underline; } /* ---------- Controls bar ---------- Two-row grid: labels in row 1, inputs/buttons in row 2. Every column's row 2 has a fixed 30px height, so every input/select/button bottom edge sits on the same baseline regardless of browser-specific intrinsic heights for native form controls. .tab_ctl uses display:contents so its children participate directly in the parent grid. */ .tab_controls { display: grid; grid-auto-flow: column; grid-template-rows: auto 30px; grid-auto-columns: max-content; column-gap: 16px; row-gap: 4px; align-items: end; justify-content: center; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid #222; } .tab_ctl { display: contents; } .tab_ctl > span { grid-row: 1; align-self: end; font: 600 0.72em var(--font); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; line-height: 14px; white-space: nowrap; } .tab_ctl > input, .tab_ctl > select { grid-row: 2; height: 30px; box-sizing: border-box; font: 400 0.95em var(--font); padding: 0 6px; margin: 0; background: var(--bg-elevated); color: var(--accent); border: 1px solid #2a2a2a; border-radius: 3px; } .tab_ctl > input#ctl_title { min-width: 220px; } .tab_ctl_tuning > select { min-width: 240px; } .tab_ctl > input:focus, .tab_ctl > select:focus { outline: none; border-color: var(--accent-hi); } .ctl_btn { grid-row: 2; height: 30px; box-sizing: border-box; font: 400 0.85em var(--font); padding: 0 12px; margin: 0; background: var(--bg-elevated); color: var(--accent); border: 1px solid #2a2a2a; border-radius: 3px; cursor: pointer; } .ctl_btn:hover { border-color: var(--accent-hi); color: var(--accent-hi); } /* ---------- Paper / staff ---------- */ #tab_paper { background: var(--surface); padding: 24px 28px 36px; border-radius: 0 0 10px 10px; } #tab_title_block { text-align: center; margin-bottom: 12px; min-height: 1.1em; } .tab_title_print { font: 700 1.3em var(--font); color: var(--accent); letter-spacing: 0.04em; } .tab_subtitle_print { font: 400 0.85em var(--font); color: var(--muted); margin-top: 2px; } #tab_grid { display: flex; flex-direction: column; gap: 28px; } .tab_system { position: relative; padding: 14px 0 6px; border-left: 2px solid var(--muted); border-right: 2px solid var(--muted); } .tab_measure_numbers { display: grid; grid-template-columns: 36px 1fr; font: 400 0.7em var(--font); color: var(--muted-dim); letter-spacing: 0.08em; margin-bottom: 4px; height: 12px; } .tab_measure_numbers .nums { display: grid; } .tab_measure_numbers .num { text-align: left; padding-left: 6px; border-left: 1px solid transparent; } .tab_row { position: relative; display: grid; align-items: center; height: 22px; } .tab_row::before { content: none; } /* Staff line: a real DOM element with a single border (foreground stroke) so it prints reliably regardless of the browser's "background graphics" setting. Positioned absolutely at the row's vertical mid-line, spanning from the label column edge to the right side. The margin-top tweak centres it on the digit's optical mid-line (which sits below the row's raw 50% because of input line-box metrics). */ .staff_line { position: absolute; left: 36px; right: 0; top: 50%; height: 0; border-top: 1px solid #c0c0c0; margin-top: 7px; z-index: 0; pointer-events: none; } .tab_label { z-index: 2; text-align: right; padding-right: 8px; font: 600 0.85em var(--font); color: var(--accent-hi); background: var(--surface); } /* Editable string label — looks like the old read-only div but accepts text. */ input.tab_label_input { width: 100%; height: 20px; box-sizing: border-box; line-height: 18px; vertical-align: middle; border: 1px solid transparent; border-radius: 2px; outline: none; caret-color: var(--accent-hi); } input.tab_label_input:hover { border-color: rgba(95,232,224,0.25); } input.tab_label_input:focus { border-color: var(--accent-hi); color: var(--accent); } input.tab_label_input::placeholder { color: var(--muted-dim); font-weight: 400; } .tab_cells { display: grid; height: 22px; align-items: center; } .tab_cell { position: relative; z-index: 1; text-align: center; border-left: 1px solid transparent; } .tab_cell.barline { border-left: 1px solid var(--muted); } /* Default input bg is transparent so the staff line shows behind every empty cell. Once a digit is typed, the input picks up the paper-coloured bg so the digit "punches" the line — that's how proper tab notation reads. The whitespace placeholder is what lets :placeholder-shown match on empty inputs (without it, the pseudo-class never matches and every cell would get the opaque bg, hiding the line again). */ .tab_cell input { width: 100%; min-width: 16px; height: 18px; padding: 0; margin: 0; border: none; background: transparent; color: var(--accent); text-align: center; font: 600 0.9em var(--font); line-height: 18px; vertical-align: middle; outline: none; caret-color: var(--accent-hi); } .tab_cell input:not(:placeholder-shown) { background: var(--surface); } .tab_cell input:focus { box-shadow: inset 0 0 0 1px var(--accent-hi); color: var(--accent-hi); border-radius: 2px; } /* When showing as "blank" (for printing), hide any typed values */ #tab_paper.blank .tab_cell input { color: transparent !important; background: transparent !important; } /* ---------- Helper / footnote (no bullets, just stacked lines) ---------- */ .tab_help { margin: 12px 18px 18px; padding: 0; font: 400 0.85em var(--font); color: var(--muted); line-height: 1.55; } .tab_help p { margin: 2px 0; } .tab_help code { background: var(--bg-elevated); color: var(--accent-hi); padding: 0 4px; border-radius: 2px; font: 600 0.95em Consolas, Menlo, monospace; } .tab_help em { color: var(--accent); font-style: normal; font-weight: 600; } /* ---------- Print ---------- */ @media print { @page { size: letter landscape; margin: 0.4in; } body { background: #fff !important; color: #000 !important; } #title_bar, #page_sub, #build_num, .tab_controls, .tab_help, .tab_capture, details.collapsible > summary .summary_extras, details.collapsible > summary .summary_status { display: none !important; } /* Strip the editor wrapper's bg / border / padding in print so its "card" frame doesn't appear above the actual tab paper. */ .tab_editor_panel { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } details.collapsible { background: #fff !important; border: none !important; box-shadow: none !important; } details.collapsible > summary { background: #fff !important; color: #000 !important; border: none !important; height: auto !important; padding: 0 !important; pointer-events: none; } details.collapsible > summary .summary_title { font: 700 0.95em var(--font) !important; color: #000 !important; text-align: center; width: 100%; margin: 0 0 2px !important; } /* Width safety: clamp every level of the tab DOM to the printable width and disable content-box border math, so the right edge of the staves can't slip past the page margin. */ #section_8, #tab_section_root, #tab_paper, #tab_grid, .tab_system, .tab_row, .tab_cells { box-sizing: border-box !important; max-width: 100% !important; min-width: 0 !important; overflow: visible !important; } #tab_paper { background: #fff !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } .tab_title_print { color: #000 !important; font-size: 0.9em !important; margin: 0 !important; } .tab_subtitle_print { display: none !important; } /* 14px rows + 14px cells + 14px inputs — every dimension matched so each note's line-box fits cleanly inside its own row (no string offset). Same dimensions for regular AND blank print so they look consistent. */ #tab_grid { gap: 16px !important; } .tab_system { border-color: #000 !important; page-break-inside: avoid; padding: 4px 0 4px !important; } .tab_row { height: 14px !important; } .tab_cells { height: 14px !important; } /* Staff line in print sits at the same +7px offset relative to the row top so it lands on the digit's optical centre. */ .staff_line { border-top-color: #000 !important; margin-top: 7px !important; } .tab_label { color: #000 !important; background: #fff !important; font-size: 0.7em !important; } /* Bar lines: switch from a per-cell border-left to a positioned ::after so we can clip the first row's bar to start at the staff mid-line and the last row's to end there. Otherwise the bar runs the full row padding and visibly extends past the top/bottom staff lines. */ .tab_cell.barline { border-left: 0 !important; position: relative !important; } .tab_cell.barline::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #000; } .tab_row_first .tab_cell.barline::after { top: 50% !important; } .tab_row_last .tab_cell.barline::after { bottom: 50% !important; } /* System left/right borders get the same treatment so they don't poke past the top and bottom staff lines either. 11px = padding-top (4) + half a row height (7) for 14px rows. */ .tab_system { border-left: 0 !important; border-right: 0 !important; position: relative !important; } .tab_system::before, .tab_system::after { content: ""; position: absolute; top: 11px; bottom: 11px; width: 1px; background: #000; } .tab_system::before { left: 0; } .tab_system::after { right: 0; } /* Empty cells stay transparent in print so the staff line shows through. Filled cells get an opaque white bg so the digit punches the line. */ /* Inputs locked to row height (14px) with matching line-height so each digit sits exactly in its own row — no overflow into the row above or below. */ .tab_cell input { background: transparent !important; color: #000 !important; height: 14px !important; line-height: 14px !important; font-size: 0.7em !important; vertical-align: middle !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .tab_cell input:not(:placeholder-shown) { background: #fff !important; } input.tab_label_input { height: 14px !important; line-height: 14px !important; } /* Hide measure numbers in print regardless — they eat ~10px per system, which is the difference between 5 and 6 systems per page at 12 strings. */ .tab_measure_numbers { display: none !important; } /* Print-blank: drop the measure bar-lines too so the user has a clean handwriting sheet — they can pencil in their own bar-lines / counts. Same row dimensions as regular print (above) so the staves print at the same height in either mode. */ #tab_paper.blank .tab_cell.barline { border-left: 0 !important; } /* And hide the string-label inputs entirely on blank print — the beforeprint hook fills empties with "—", which would show up as a row of tick marks down the left edge of every system. Blank means blank: no labels, no bar-lines. */ #tab_paper.blank input.tab_label_input { color: transparent !important; } } /* ====================================================================== */ /* Tab editor panel — wraps the form, instructions, and capture mode in */ /* one slightly-darker card so they read as the editor surface, separate */ /* from the tab paper that holds the actual notation. */ /* ====================================================================== */ .tab_editor_panel { background: #0e0e0e; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px 14px; margin: 8px 14px 14px; } .tab_editor_panel .tab_controls { margin-bottom: 8px; } .tab_editor_panel .tab_help { margin-bottom: 8px; } /* ====================================================================== */ /* Capture-from-fretboard mode (opt-in mini-fretboard inside the Tab */ /* section). Hidden by default since the
opens on user click. */ /* ====================================================================== */ .tab_capture { margin: 4px 6px; padding: 6px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; } .tab_capture > summary { cursor: pointer; font-weight: 600; padding: 4px 6px; list-style: none; } .tab_capture > summary::-webkit-details-marker { display: none; } .tab_capture > summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform .15s; } .tab_capture[open] > summary::before { transform: rotate(90deg); } .tab_capture_title { font-size: 0.95em; } .tab_capture_hint { color: var(--muted); font-size: 0.82em; margin-left: 12px; } /* Record indicator — uses outline + box-shadow so the badge appears without resizing the body or shifting the mini-fretboard below. */ #tab_capture_body { transition: box-shadow .15s, background-color .15s; } #tab_capture_body.rec_on { box-shadow: inset 0 0 0 2px #c0392b; background: rgba(192,57,43,0.06); } .tab_capture_bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 4px; } .tcap_btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 8px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.18); color: #fff; border-radius: 6px; cursor: pointer; font: 600 0.95em var(--font); } .tcap_btn:hover { background: rgba(255,255,255,0.4); border-color: #fff; } .tcap_btn.on { background: var(--accent-hi); border-color: var(--accent-hi); color: #001014; } .tcap_btn_rec.on { background: #c0392b; border-color: #c0392b; color: #fff; } .tcap_step { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.85em; margin-left: 6px; } .tcap_step_up, .tcap_step_dn { width: 22px; height: 22px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: #fff; cursor: pointer; } .tcap_step_val { display: inline-block; min-width: 18px; text-align: center; color: var(--text); font-weight: 600; } .tcap_status { color: var(--muted); font-size: 0.82em; margin-left: auto; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;} /* Mini-fretboard table — styled to match the main site grids: dark "grout" between cells, light tabletop, fret markers + nut indicator identical to the main fretboard. Each cell stacks three lines: the fret number on top, the resulting note in the middle, and the degree relative to the current site key on the bottom. */ #tab_mini_fretboard { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 0; } .tcap_board { border-collapse: separate; border-spacing: 1px; background: #555; border-radius: 4px; font-family: var(--font); } .tcap_board td { background: #a8a8a8; color: #111; min-width: 36px; height: 38px; padding: 1px 2px; text-align: center; font-size: 0.72em; line-height: 1.05; vertical-align: middle; } /* Halved widths for the leftmost label column (string letter) and the second-from-left column (open / nut). */ .tcap_board .tcap_label { width: 18px; min-width: 18px; padding: 0 2px; background: #d5d5d5; font-weight: 700; font-size: 0.85em; color: #1a1a1a; } .tcap_board td.tcap_nut { width: 18px; min-width: 18px; padding: 0 1px; border-right: 4px solid #2a2a2a; } /* Header row: just fret numbers, no stacked content. */ .tcap_board tr.tcap_frets td { background: transparent; color: var(--muted); height: 18px; padding: 2px 0; font-size: 0.78em; font-weight: 600; } .tcap_board tr.tcap_frets .fret_minor { font-size: 0.85em; color: #555; opacity: 0.5; font-weight: 400; } /* Stacked cell content: number on top, note in the middle, degree below. */ .tcap_board td.tcap_cell { cursor: pointer; } .tcap_board td.tcap_cell > span { display: block; line-height: 1.05; } .tcap_fret_num { font-size: 0.75em; color: #555; font-weight: 600; } .tcap_fret_note { font-size: 1em; color: #111; font-weight: 700; } .tcap_fret_deg { font-size: 0.7em; color: #555; } .tcap_board td.tcap_cell:hover { background: var(--accent-hi); } .tcap_board td.tcap_cell:hover .tcap_fret_num, .tcap_board td.tcap_cell:hover .tcap_fret_note, .tcap_board td.tcap_cell:hover .tcap_fret_deg { color: #001014; } /* Active tab cursor cell — green outline so the user always knows where the next captured fret will land. */ input.tcap_cursor { outline: 2px solid #2ecc71 !important; outline-offset: -2px; background: rgba(46,204,113,0.12) !important; } /* Modifier popup that appears below a fret cell on hover (Record on). */ #tcap_modifier_pop { position: absolute; display: none; z-index: 1000; flex-direction: row; gap: 2px; padding: 4px; background: #1a1a1a; border: 1px solid #5a5a5a; border-radius: 5px; box-shadow: 0 6px 18px rgba(0,0,0,0.55); } .tcap_mod { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); color: #fff; border-radius: 3px; cursor: pointer; font: 600 0.85em var(--font); } .tcap_mod:hover { background: var(--accent-hi); color: #001014; border-color: var(--accent-hi); } /* ====================================================================== */ /* Chord boxes — click-to-fill diagrams that sit above the tab paper. */ /* Lives inside #tab_section_root, right after .tab_editor_panel. */ /* ====================================================================== */ .chord_boxes_section { background: var(--surface); border-radius: 8px; padding: 0; margin: 0 14px 14px; border: 1px solid #2a2a2a; } .chord_boxes_section > summary { cursor: pointer; padding: 8px 12px; list-style: none; user-select: none; border-bottom: 1px solid #2a2a2a; background: #1a1a1a; border-radius: 8px 8px 0 0; } .chord_boxes_section[open] > summary { border-radius: 8px 8px 0 0; } .chord_boxes_section > summary::-webkit-details-marker { display: none; } .chord_boxes_section > summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform .15s; } .chord_boxes_section[open] > summary::before { transform: rotate(90deg); } .cb_title { font: 600 0.95em var(--font); color: var(--accent); } .cb_hint { color: var(--muted); font-size: 0.8em; margin-left: 12px; } .cb_controls { display: flex; gap: 8px; padding: 10px 12px 4px; } #chord_boxes_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; padding: 10px 12px 14px; } .cb_empty { grid-column: 1 / -1; padding: 18px 4px; color: var(--muted); font-size: 0.9em; text-align: center; } .cb_box { background: #fafafa; border-radius: 6px; padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 4px; } .cb_box_top { display: flex; align-items: center; gap: 4px; } .cb_name { flex: 1 1 auto; min-width: 0; height: 22px; padding: 0 4px; box-sizing: border-box; font: 700 0.95em var(--font); color: #111; background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; } .cb_name:focus { outline: none; border-color: var(--accent-hi); } .cb_basefret_ctl { display: inline-flex; align-items: center; gap: 2px; font-size: 0.75em; color: #555; } .cb_basefret_ctl button { width: 18px; height: 18px; padding: 0; font: 700 0.95em var(--font); line-height: 16px; border: 1px solid #c0c0c0; background: #fff; color: #111; border-radius: 3px; cursor: pointer; } .cb_basefret_ctl button:hover { border-color: var(--accent-hi); color: #000; } .cb_fret_val { display: inline-block; min-width: 18px; text-align: center; font-weight: 700; color: #111; } .cb_remove { width: 22px; height: 22px; padding: 0; line-height: 18px; font: 700 1em var(--font); color: #b00; background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; cursor: pointer; } .cb_remove:hover { background: #b00; color: #fff; border-color: #b00; } .cb_svg { width: 100%; height: auto; display: block; max-height: 180px; } .cb_svg .cb_nut { fill: #111; } .cb_svg .cb_fret { stroke: #555; stroke-width: 1; } .cb_svg .cb_string { stroke: #555; stroke-width: 1; } .cb_svg .cb_dot { fill: #111; stroke: #111; } .cb_svg .cb_x { font: 700 14px var(--font); fill: #111; } .cb_svg .cb_o { fill: none; stroke: #111; stroke-width: 1.4; } .cb_svg .cb_basefret { font: 700 11px var(--font); fill: #111; } .cb_svg .cb_outofview { font: 700 11px var(--font); fill: #888; } .cb_svg rect.cb_hit_header, .cb_svg rect.cb_hit_fret { fill: transparent; cursor: pointer; } .cb_svg rect.cb_hit_header:hover { fill: rgba(95,232,224,0.18); } .cb_svg rect.cb_hit_fret:hover { fill: rgba(95,232,224,0.18); } .cb_readout { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; padding: 2px 0; } .cb_ro_cell { text-align: center; line-height: 1.05; font: 600 0.7em var(--font); color: #333; padding: 1px 0; min-height: 14px; } .cb_ro_note { display: block; color: #111; font-weight: 700; font-size: 1.05em; } .cb_ro_deg { display: block; color: #777; font-size: 0.85em; } .cb_ro_x { color: #b00; font-weight: 700; } .cb_ro_blank { color: #ccc; } /* ---------- Print: chord-boxes / tab-only / boxes-only ---------- tab.js sets body[data-print="section_8"] for any of the three modes; it ALSO sets data-print-mode to "all" / "tab" / "boxes" so we can selectively hide pieces. The base @media print rule above hides .tab_controls and .tab_capture, which is correct for all three. */ @media print { body[data-print="section_8"] .chord_boxes_section { background: #fff !important; border: none !important; } body[data-print="section_8"] .chord_boxes_section > summary { display: none !important; } body[data-print="section_8"] .cb_controls { display: none !important; } body[data-print="section_8"] .cb_box { background: #fff !important; padding: 4px 6px 2px !important; page-break-inside: avoid; } body[data-print="section_8"] .cb_remove, body[data-print="section_8"] .cb_basefret_ctl button { display: none !important; } body[data-print="section_8"] .cb_basefret_ctl { padding: 0 !important; } body[data-print="section_8"] .cb_fret_val { font-size: 0.7em; color: #555; } body[data-print="section_8"] .cb_name { background: #fff !important; border: none !important; color: #000 !important; font-size: 0.95em !important; padding: 0 !important; height: auto !important; } body[data-print="section_8"] #chord_boxes_grid { gap: 10px !important; padding: 4px 0 8px !important; } /* boxes-only mode: hide tab paper entirely */ body[data-print="section_8"][data-print-mode="boxes"] #tab_paper { display: none !important; } /* tab-only mode: hide the chord-boxes section entirely */ body[data-print="section_8"][data-print-mode="tab"] #chord_boxes_section { display: none !important; } }