/* ════════════════════════════════════════════════════════════════════
CHORD ↔ LYRIC SPACING — SINGLE SOURCE OF TRUTH. DO NOT SCATTER.
════════════════════════════════════════════════════════════════════
The vertical relationship between a floating chord and the lyric it
sits above is defined ONCE here as a RATIO, then inherited by every
context (screen, mobile, print, plain-text, large/small). Because the
values are unitless / em-based, they SCALE with whatever font-size each
context sets — so the proportional look is identical everywhere without
re-tuning per view.
Three tokens, three jobs:
--clh : lyric line-height as a UNITLESS multiplier. This is the
vertical room each lyric line gets; the chord floats inside
it. Unitless = scales with font-size automatically.
--ctop: how high the chord floats above its lyric, in em (relative to
the chord-text's own font). em = scales with chord size.
--cfont: chord size relative to lyric (em).
TO CHANGE THE SPACING ANYWHERE: change it HERE. One value, all views.
A context that MUST differ overrides ONLY the token (one line), never
the whole rule. Historically these numbers were hardcoded in ~12 places
(base, mobile, plain-text, print, large/small) and drifted constantly;
that is the bug this block exists to prevent. If you find yourself
typing a raw line-height or chord `top` in a chord rule, STOP — change
the token instead.
Canonical values below are the long-standing desktop look.
PER-THEME / PER-CONTEXT OVERRIDE: a theme or context that needs a
slightly different ratio overrides ONLY the token in its own scope, e.g.
.lyric-sheet-container.cp-theme-classic { --ctop: -0.50em; }
.lyric-sheet-container.cp-theme-industrial { --clh: 1.9; }
— never by editing the chord/lyric rules themselves. Clean theme uses
the canonical defaults (it's the unscoped default theme).
════════════════════════════════════════════════════════════════════ */
:root {
--clh: 2.0; /* lyric line-height multiplier — the real Clean look (3rem ÷ 1.5rem base) */
--ctop: -0.45em; /* chord float height above its lyric — tuned on Clean */
--cfont: 0.85em; /* chord size relative to lyric */
}
/* Container */
.lyric-sheet-container {
font-family: Calibri, Arial, sans-serif;
font-size: 1.5rem; /* Use rem (relative to root ) for consistent sizing */
line-height: 1.5rem; /* Reduced base - lyrics will override */
margin: 20px 0;
position: relative; /* anchor for the absolutely-positioned section rail */
overflow-wrap: break-word;
word-wrap: break-word;
max-width: 100%;
overflow-x: hidden;
white-space: normal;
}
/* Injected title plate is hidden by default; only themes that style a plate
(Industrial / Classic) reveal it. Keeps Clean / unthemed charts unchanged. */
.lyric-title-plate { display: none; }
/* Injected ornament (Industrial registration marks, Classic fleuron corners)
is hidden by default; each theme reveals only its own. */
.cp-ornament { display: none; }
.cp-theme-industrial .cp-reg { display: block; }
.cp-theme-classic .cp-corner { display: block; }
/* Inline chord spans - default behavior (for lyrics) */
.lyrics span.chord,
.harmonies span.chord,
.style-lyrics span.chord,
.style-harmonies span.chord {
height: 1.2em;
display: inline-block;
position: relative;
vertical-align: baseline;
}
.lyrics span.chord span.chord-text,
.harmonies span.chord span.chord-text,
.style-lyrics span.chord span.chord-text,
.style-harmonies span.chord span.chord-text {
position: absolute;
display: block;
top: var(--ctop); /* canonical token — see :root SINGLE SOURCE OF TRUTH */
left: 0;
font-weight: bold;
color: #d35400;
font-size: var(--cfont); /* canonical token */
line-height: 1; /* CRITICAL: prevent chord-text from inheriting lyrics' large line-height, which would make its box extend down onto the lyric */
white-space: nowrap;
}
/* Lower chords for large size to reduce excessive spacing */
.large-size .lyrics span.chord span.chord-text,
.large-size .style-lyrics span.chord span.chord-text {
top: -0.25em; /* Much lower for large sizes */
}
/* Raise chords slightly for small size to use the space */
.small-size .lyrics span.chord span.chord-text,
.small-size .style-lyrics span.chord span.chord-text {
top: -0.95em; /* Higher for small sizes */
}
/* Chord-only and songmsg contexts - DON'T raise up */
.chords span.chord,
.songmsg span.chord,
.style-chords span.chord,
.style-songmsg span.chord {
height: auto;
display: inline;
position: static;
}
.chords span.chord span.chord-text,
.songmsg span.chord span.chord-text,
.style-chords span.chord span.chord-text,
.style-songmsg span.chord span.chord-text {
position: static;
display: inline;
top: auto;
font-weight: bold;
color: #d35400;
font-size: 0.85em; /* Match inline chord size */
white-space: nowrap;
}
/* Old module style classes - LIGHT MODE
REFACTOR: colors now read from theme variables with the ORIGINAL value as
fallback, so an unthemed chart looks byte-identical to before. !important is
retained to preserve the original override-safety; because the value is a
var(), an active theme still wins by redefining the token. Revert = load the
previous zip. */
.lyrics {
color: var(--lyric, #000000) !important; /* was #000000 */
line-height: var(--clh) !important; /* canonical multiplier — SINGLE SOURCE OF TRUTH */
margin-top: 0;
}
.chords,
.style-chords {
color: var(--chord, #d35400) !important; /* was #d35400 */
line-height: var(--chord-line-height, 1.3rem) !important;
}
.songmsg,
.style-songmsg {
color: var(--songmsg, #16a085) !important; /* was #16a085 */
font-style: italic;
line-height: 1.5rem;
}
.harmonies,
.style-harmonies {
color: var(--harmony, #000000) !important; /* was #000000 */
text-decoration: underline;
}
/* Chord spans - light mode */
span.chord span.chord-text {
color: var(--chord, #d35400); /* was #d35400 */
}
/* Personal notes */
.personal-note {
background-color: #cce5ff;
color: #004085;
border: 1px solid #b8daff;
padding: 1px 2px; /* Minimal padding - tight box */
margin: 0 4px; /* Original margin */
border-radius: 2px;
font-size: 0.9em;
display: inline-block;
cursor: help;
}
/* Set-specific notes (light green to distinguish from song notes) */
.personal-note.note-source-set {
background-color: #d4edda !important;
border-color: #c3e6cb !important;
color: #155724 !important;
}
/* Hide field labels */
.field__label,
.field--name-body > .field__label,
.field--type-text-with-summary > .field__label,
.lyric-sheet-container + .field__label,
.field__label:has(+ .lyric-sheet-container),
.page-header .field__label,
.node__title .field__label {
display: none !important;
}
/* Hide contextual links */
.contextual-region .contextual {
display: none !important;
}
/* Alternative: Move them down if you want to keep them */
/*
.contextual-region .contextual {
top: 30px !important;
}
*/
/* Base lyric and chord lines */
.lyric-line,
.chord-line {
font-family: Calibri, Arial, sans-serif;
white-space: pre;
line-height: 1.4em;
padding: 2px 5px !important;
transition: background-color 0.2s;
position: relative;
font-size: 1.75em; /* Increased from 1.25em for better readability (28px at base 16px) */
margin: 0 !important; /* Override theme margins */
}
/* Container padding — gives lyrics breathing room from page edges.
Was previously `padding: 0 !important` which killed left margin AND
prevented mobile right-padding from working (chords overflowed off-screen). */
.lyric-sheet-container {
padding: 0 15px;
}
/* Add visual space for blank lines (sections separator).
Driven by --section-gap so the spacing slider can target these big gaps
FIRST (they're the worst offenders — an empty line otherwise inherits the
tall lyric line-height AND its own margin). */
.lyric-line:empty,
.lyric-line:has(> :only-child:empty) {
height: auto;
line-height: 0;
margin: var(--section-gap, 18px) 0;
}
.lyric-line:hover,
.chord-line:hover {
background-color: #f8f9fa;
}
.chord-line {
font-weight: bold;
color: #009900 !important; /* Green to match style-chords - override theme */
font-size: 1.6em; /* Increased from 1.5em - slightly bigger */
margin-top: 0 !important; /* Remove all top margin */
margin-bottom: 0 !important; /* Remove bottom margin - tight to lyrics */
padding-top: 0 !important; /* Remove top padding to tighten spacing */
padding-bottom: 0 !important;
white-space: pre; /* Keep chords on one line */
}
.lyric-line {
color: #000;
font-size: 1.75em; /* Lyrics stay larger */
margin-top: 0 !important; /* No space above - tight to chords */
margin-bottom: 0 !important; /* Tight spacing between lines */
padding-top: 0 !important; /* Remove top padding */
padding-bottom: 1px !important; /* Tiny bit of space for readability */
word-wrap: break-word; /* Wrap when zoomed */
overflow-wrap: break-word;
white-space: normal; /* Allow wrapping */
}
/* Control Panel.
Now uses the collapsible tools-toggle / tools-panel pattern in all
contexts. The outer .lyric-controls is a column so the toggle sits
above the panel; the panel itself wraps controls horizontally when
open. */
.lyric-controls {
margin-bottom: 15px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
/* Tools toggle button — small, unobtrusive affordance. */
.lyric-controls .tools-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--muted, #999);
border: 1px solid var(--border, #555);
border-radius: 4px;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.05em;
cursor: pointer;
font-family: inherit;
transition: color 0.15s ease, border-color 0.15s ease;
}
.lyric-controls .tools-toggle:hover,
.lyric-controls .tools-toggle:focus-visible,
.lyric-controls .tools-toggle[aria-expanded="true"] {
background: #b8470a; /* slightly deeper orange on hover/open, like Play */
color: #fff;
}
/* Tools panel — revealed when the toggle is open. Wraps so it stays
manageable on narrow viewports. */
.lyric-controls .tools-panel {
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
}
.lyric-controls .tools-panel[hidden] {
display: none;
}
/* Accidentals toggle (♯/♭ preference) — same minimal styling as the
tools toggle. Becomes accent-colored when an explicit preference is
set (vs. 'auto'). */
.lyric-controls .toggle-accidentals {
background: transparent;
color: var(--muted, #999);
border: 1px solid var(--border, #444);
border-radius: 4px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
transition: color 0.15s ease, border-color 0.15s ease;
}
.lyric-controls .toggle-accidentals:hover,
.lyric-controls .toggle-accidentals[data-pref="sharps"],
.lyric-controls .toggle-accidentals[data-pref="flats"] {
color: var(--accent, #e8c760);
border-color: var(--accent, #e8c760);
}
/* Transpose controls */
.transpose-controls {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background-color: #f5f5f5;
border-radius: 4px;
border: 1px solid #ddd;
}
.transpose-controls button {
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
min-width: 40px;
}
.transpose-controls button:hover {
background-color: #0056b3;
}
.transpose-controls button:active {
background-color: #004085;
}
.transpose-display {
font-weight: bold;
color: #333;
min-width: 120px;
text-align: center;
font-size: 14px;
}
/* Chord visibility controls */
.chord-visibility-controls {
display: inline-flex;
align-items: center;
padding: 10px 15px;
background-color: #000; /* Changed from #f5f5f5 to black */
border-radius: 4px;
border: 1px solid #333; /* Darker border too */
}
.toggle-chords {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.toggle-chords:hover {
background-color: #218838;
}
.toggle-chords:active {
background-color: #1e7e34;
}
/* Zoom controls */
.size-controls {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 10px 15px;
background-color: #000; /* Match other controls */
border-radius: 4px;
border: 1px solid #333;
}
.size-controls label {
color: #e8e8e8;
font-size: 14px;
margin-right: 8px;
font-weight: 500;
}
.size-controls button {
background-color: #6c757d;
color: white;
border: none;
border-radius: 4px;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
min-width: 60px;
}
.size-controls button:hover {
background-color: #5a6268;
}
.size-controls button.active {
background-color: #28a745; /* Green for active */
}
.size-controls button:active {
background-color: #545b62;
}
/* Theme controls */
.theme-controls {
display: inline-flex;
align-items: center;
padding: 10px 15px;
background-color: #f5f5f5;
border-radius: 4px;
border: 1px solid #ddd;
}
.toggle-theme {
background-color: #343a40;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.toggle-theme:hover {
background-color: #23272b;
}
.toggle-theme:active {
background-color: #1d2124;
}
/* Fullscreen controls */
.plaintext-controls {
display: inline-flex;
align-items: center;
padding: 10px 15px;
background-color: #f5f5f5;
border-radius: 4px;
border: 1px solid #ddd;
}
.toggle-plaintext {
background-color: #6c757d;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
.toggle-plaintext:hover {
background-color: #5a6268;
}
.toggle-plaintext:active {
background-color: #545b62;
}
/* Notes */
.note-line {
padding: 5px;
margin: 5px 0;
background-color: #fff3cd;
border-left: 3px solid #ffc107;
font-size: 0.9em;
}
.global-note,
.personal-note,
.lyrics .personal-note,
.style-lyrics .personal-note {
display: inline-block;
padding: 1px 2px; /* Tight box */
margin-right: 2px; /* Minimal spacing */
border-radius: 2px;
font-weight: bold;
line-height: 1em !important; /* Don't inherit tall line-height from .lyrics */
}
.global-note {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.personal-note {
background-color: #cce5ff;
color: #004085;
border: 1px solid #b8daff;
}
/* Note markers */
.note-marker {
cursor: pointer;
font-size: 16px;
margin-right: 5px;
display: inline-block;
transition: transform 0.2s;
}
.note-marker:hover {
transform: scale(1.2);
}
.note-marker.note-global {
filter: hue-rotate(0deg);
}
.note-marker.note-personal {
filter: hue-rotate(200deg);
}
/* Note dialog */
.note-dialog,
.add-note-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.note-dialog-content,
.add-note-dialog-content {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 500px;
width: 90%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.note-dialog-content h3,
.add-note-dialog-content h3 {
margin-top: 0;
color: #333;
}
.note-dialog-content p {
margin: 15px 0;
color: #555;
}
.note-info {
font-size: 0.9em;
color: #666;
margin: 5px 0 10px 0;
font-style: italic;
}
.note-dialog-content button,
.add-note-dialog-content button {
padding: 8px 16px;
margin: 5px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.delete-note-btn {
background-color: #dc3545;
color: white;
}
.delete-note-btn:hover {
background-color: #c82333;
}
.close-dialog-btn,
.cancel-note-btn {
background-color: #6c757d;
color: white;
}
.close-dialog-btn:hover,
.cancel-note-btn:hover {
background-color: #5a6268;
}
.save-note-btn {
background-color: #28a745;
color: white;
}
.save-note-btn:hover {
background-color: #218838;
}
#note-text {
width: 100%;
min-height: 80px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: Arial, sans-serif;
font-size: 14px;
margin-bottom: 10px;
resize: vertical;
}
.note-type-selector {
margin: 10px 0;
}
.note-type-selector label {
display: block;
margin: 5px 0;
cursor: pointer;
}
.note-type-selector input[type="radio"] {
margin-right: 8px;
}
/* ============================================
CKEditor Style Classes - ESSENTIAL STYLES
============================================ */
/* Lyrics - Standard lyric text */
.style-lyrics {
font-family: Calibri, Arial, sans-serif;
color: #000;
line-height: 1.8em;
font-size: 18px;
}
/* Chords with Brackets - For chords positioned above lyrics [C] [Am] */
.style-chords-bracketed .chord-line {
color: #0066cc;
font-weight: bold;
font-size: 18px;
background-color: #e6f2ff;
padding: 5px;
border-left: 3px solid #0066cc;
}
.style-chords-bracketed .lyric-line {
font-size: 18px;
}
/* Chords Plain - For chord-only sections without lyrics */
span.style-chords {
display: inline; /* Changed from block to inline */
color: #009900; /* Green - better contrast with orange song messages */
font-weight: bold; /* Bold for visibility */
font-size: 20px; /* Back to 20px */
background-color: #e6ffe6; /* Light green background */
padding: 2px 6px; /* Reduced padding for inline use */
border-left: 3px solid #009900; /* Green border to match */
font-family: 'Courier New', monospace;
white-space: nowrap; /* Changed from pre to nowrap for inline */
margin: 0 3px; /* Reduced margin for inline */
}
/* Song Message - Inline (colored text in the middle of lyrics) */
.style-songmsg {
color: #cc6600;
font-weight: bold;
font-style: italic;
font-size: 20px;
}
/* Song Message Block - Full instruction box on its own line */
.style-songmsg-block {
display: block;
background-color: #fff8dc;
border-left: 4px solid #ffa500;
padding: 10px 15px;
margin: 10px 0;
font-style: italic;
color: #664400;
font-size: 18px;
}
/* Harmonies - For harmony vocals or multiple singers */
.style-harmonies {
font-size: 20px;
}
/* Underline only the lyric lines with harmony class */
.lyric-line.style-harmonies {
text-decoration: underline;
}
/* Make sure chord lines with harmony class don't get underlined */
.chord-line.style-harmonies {
text-decoration: none !important;
}
/* Section Headers - Verse, Chorus, Bridge labels */
.style-section-header {
font-weight: bold;
font-size: 20px; /* Increased from 1.2em */
color: #333;
text-transform: uppercase;
margin: var(--section-gap, 15px) 0 5px 0;
border-bottom: 2px solid #333;
padding-bottom: 3px;
display: block;
}
/* Font Size Options */
.style-text-small {
font-size: 14px; /* Increased from 12px */
}
.style-text-large {
font-size: 22px; /* Increased from 20px */
}
.style-text-xlarge {
font-size: 26px; /* Increased from 24px */
}
/* ============================================
DARK MODE (Better colors for stage/performance)
============================================ */
.lyric-sheet-container.dark-mode:not([class*="cp-theme-"]) {
background-color: #000 !important; /* Pure black for stage */
color: #d4d4d4; /* Softer gray instead of bright white */
padding: 0; /* Remove padding so it doesn't shrink */
border-radius: 0;
}
/* Dark mode controls - black background */
.dark-mode .lyric-controls,
.dark-mode .transpose-controls,
.dark-mode .chord-controls,
.dark-mode .size-controls,
.dark-mode .theme-controls,
.dark-mode .plaintext-controls {
background-color: #000 !important;
border-color: #333 !important;
}
/* Dark mode colors - softer for eyes
REFACTOR: core text colors read theme vars with the ORIGINAL dark value as
fallback. Unthemed .dark-mode is byte-identical; an active theme's dark
variant overrides via the token. */
.dark-mode .lyrics {
color: var(--lyric, #88bbff) !important; /* was #88bbff */
}
.dark-mode .chords,
.dark-mode .style-chords {
color: var(--chord, #ffcc66) !important; /* was #ffcc66 */
}
.dark-mode .songmsg,
.dark-mode .style-songmsg {
color: var(--songmsg, #66ff66) !important; /* was #66ff66 */
}
.dark-mode .harmonies,
.dark-mode .style-harmonies {
color: var(--harmony, #88bbff) !important; /* was #88bbff */
text-decoration: underline;
}
.dark-mode span.chord span.chord-text {
color: var(--chord, #ffcc66) !important; /* was #ffcc66 */
}
/* Chord-only and songmsg in dark mode */
.dark-mode .chords span.chord span.chord-text,
.dark-mode .songmsg span.chord span.chord-text,
.dark-mode .style-chords span.chord span.chord-text,
.dark-mode .style-songmsg span.chord span.chord-text {
color: var(--chord, #ffcc66) !important; /* was #ffcc66 */
}
/* Dark mode for individual songs AND setlists */
.dark-mode .lyric-line,
.dark-mode .chord-line,
.setlist-dark-mode .lyric-line,
.setlist-dark-mode .chord-line {
color: #d4d4d4 !important; /* Add !important to override base styles */
}
.dark-mode .lyric-line:hover,
.dark-mode .chord-line:hover,
.setlist-dark-mode .lyric-line:hover,
.setlist-dark-mode .chord-line:hover {
background-color: #2a2a2a;
}
.dark-mode .chord-line,
.setlist-dark-mode .chord-line {
color: #00ff00; /* Bright green to match style-chords in dark mode */
font-weight: bold;
}
.dark-mode .style-songmsg {
background-color: #3a3000;
border-left-color: #ffa500;
color: #ffcc66;
}
.dark-mode .style-section-header {
color: #ffa500; /* Orange headers */
border-bottom-color: #666;
}
.dark-mode span.style-chords {
background-color: #1a2a1a; /* Dark green background */
border-left-color: #00ff00; /* Bright green border */
color: #00ff00; /* Bright green text - stands out on dark background */
}
.dark-mode .personal-note {
background-color: #2a2a1a;
border-color: #6a6a4a;
color: #d4d4d4;
}
.dark-mode .personal-note.note-source-set {
background-color: #2a3a2a !important;
border-color: #4a6a4a !important;
color: #90ee90 !important;
}
/* Transpose display readout — light text against the dark controls bar. */
.dark-mode .transpose-display {
color: #d4d4d4 !important;
}
/* Block-level songmsg container — same scheme as inline .style-songmsg
above (dark green-brown panel, gold text, orange accent border). */
.dark-mode .style-songmsg-block {
background-color: #3a3000 !important;
border-left-color: #ffa500 !important;
color: #ffcc66 !important;
}
/* ============================================
FULLSCREEN MODE (for live performance)
============================================ */
/* Plain Text Mode - Simple black on white for individual songs */
.lyric-sheet-container.plain-text-mode {
background-color: #fff !important;
color: #000 !important;
border: none !important;
box-shadow: none !important;
padding: 0 20px !important; /* Add padding for printing/readability */
/* Typewriter font — plain text mode mimics a typed lyric sheet. */
font-family: 'Courier New', 'Courier', monospace !important;
/* Default to normal reading size. Base is 1.5rem (24px) which is too
large for a typewriter chart; the Size buttons in the controls bar
still scale this up/down for stage use. */
font-size: 1rem !important;
line-height: 1.4 !important;
}
/* Plain-text mode: bring per-element line-heights in line with the new
smaller base, so lyrics + chords don't feel sparse. */
.lyric-sheet-container.plain-text-mode .lyrics,
.lyric-sheet-container.plain-text-mode .style-lyrics {
line-height: 1.8 !important;
}
.lyric-sheet-container.plain-text-mode .chord-line {
color: #000 !important;
font-weight: bold !important;
}
.lyric-sheet-container.plain-text-mode .lyric-line {
color: #000 !important;
}
.lyric-sheet-container.plain-text-mode .lyric-controls {
background-color: #f5f5f5 !important;
}
/* All text black in plain text mode */
.lyric-sheet-container.plain-text-mode .lyrics,
.lyric-sheet-container.plain-text-mode .chords,
.lyric-sheet-container.plain-text-mode .style-chords,
.lyric-sheet-container.plain-text-mode .songmsg,
.lyric-sheet-container.plain-text-mode .style-songmsg,
.lyric-sheet-container.plain-text-mode .harmonies,
.lyric-sheet-container.plain-text-mode .style-harmonies {
color: #000 !important;
background: none !important;
border: none !important;
text-decoration: none !important;
}
.lyric-sheet-container.plain-text-mode span.chord span.chord-text {
color: #000 !important;
}
/* ============================================
MOBILE / RESPONSIVE STYLES
============================================ */
/* Responsive - smooth scaling without breakpoints */
@media screen and (max-width: 1200px) {
.lyric-sheet-container {
font-size: 1.8em;
}
}
@media screen and (max-width: 768px) {
.lyric-sheet-container {
font-size: 1.5em;
}
.lyric-controls {
flex-direction: column;
gap: 10px;
}
}
@media screen and (max-width: 480px) {
.lyric-sheet-container {
font-size: 1.2em;
padding: 0 25px 0 15px; /* Extra right padding so long chord names don't clip */
overflow-x: hidden;
}
.lyric-sheet-container.plain-text-mode {
padding: 0 25px 0 15px; /* Match in plain text mode */
overflow-x: hidden;
}
/* Extra padding for large size on mobile */
.lyric-sheet-container.large-size {
padding-right: 40px; /* Even more right padding for large size */
}
.lyric-sheet-container.plain-text-mode.large-size {
padding-right: 40px;
}
.lyrics {
line-height: 2.5rem !important; /* Widened to give chord-text breathing room above */
}
.lyrics span.chord span.chord-text {
top: -0.7em; /* Tuned for line-height:1 on mobile */
}
/* Large size on mobile needs even lower chords */
.large-size .lyrics span.chord span.chord-text,
.large-size .style-lyrics span.chord span.chord-text {
top: -0.15em; /* Much lower for mobile large size */
}
}
/* ============================================
LIGHT MODE — affects ONLY the lyric area itself.
The surrounding page/node keeps the dragonfly
dark theme. The lyric-sheet-container gets a
warm cream background so it reads like a paper
chart sitting in a dark frame.
============================================ */
.lyric-sheet-container {
background-color: #f4ecd8; /* Warm cream — default light mode */
}
/* Print styles */
@media print {
/* Hide ALL interactive elements */
.lyric-controls,
.transpose-controls,
.chord-visibility-controls,
.note-marker,
.personal-note,
button {
display: none !important;
}
/* Hide page titles, field labels, and headers */
h1.page-title,
.page-header,
.field__label,
.node__title,
.block-page-title-block,
#page-title,
.region-header,
header {
display: none !important;
}
/* Remove extra spacing */
body {
margin: 0;
padding: 0;
}
/* Clean background for printing */
body,
.lyric-sheet-container {
color: #000;
background: #fff;
margin: 0;
padding: 0;
}
/* Compact spacing for print */
.lyric-line,
.chord-line {
page-break-inside: avoid;
font-size: 12pt;
line-height: 1.4;
padding: 1px 0;
margin: 0;
}
.chord-line {
font-size: 11pt;
font-weight: bold;
margin-bottom: 1px;
}
/* Keep styles visible but print-friendly */
.style-songmsg {
background-color: #f5f5f5 !important;
border-left: 3px solid #000 !important;
color: #000 !important;
padding: 6px 10px !important;
page-break-inside: avoid;
margin: 8px 0 !important;
font-size: 11pt !important;
}
.style-section-header {
font-size: 14pt !important;
border-bottom: 2px solid #000 !important;
page-break-after: avoid;
margin: 12px 0 4px 0 !important;
padding: 0 0 2px 0 !important;
}
span.style-chords {
background-color: #f0f0f0 !important;
border-left: 3px solid #000 !important;
color: #000 !important;
font-size: 11pt !important;
page-break-inside: avoid;
padding: 4px 6px !important;
margin: 4px 0 !important;
}
.style-chords-bracketed .chord-line {
background: none !important;
border: none !important;
color: #000 !important;
padding: 0 !important;
}
/* Ensure sections stay together */
.style-section-header + .lyric-line,
.style-section-header + .chord-line {
page-break-before: avoid;
}
/* Compact page margins */
@page {
margin: 0.5in;
size: letter portrait;
}
/* Remove hover effects */
.lyric-line:hover,
.chord-line:hover {
background-color: transparent !important;
}
/* Remove cursor changes */
* {
cursor: default !important;
}
}
/* ============================================
DARK MODE BACKGROUND COLORS
Force black backgrounds when dark mode is active
============================================ */
/* Individual song dark mode */
body:has(.lyric-sheet-container.dark-mode) .field__item,
body:has(.lyric-sheet-container.dark-mode) .field--name-field-lyrics-and-chords,
body:has(.lyric-sheet-container.dark-mode) .text-formatted,
body:has(.lyric-sheet-container.dark-mode) .clearfix,
body:has(.lyric-sheet-container.dark-mode) .node__content,
body:has(.lyric-sheet-container.dark-mode) .node,
body:has(.lyric-sheet-container.dark-mode) article,
body:has(.lyric-sheet-container.dark-mode) .main-content-card,
body:has(.lyric-sheet-container.dark-mode) .content-wrapper,
body:has(.lyric-sheet-container.dark-mode) .container {
background-color: #000 !important;
background: #000 !important;
}
/* Setlist dark mode */
body:has(.setlist-container.setlist-dark-mode) .main-content-card,
body:has(.setlist-container.setlist-dark-mode) .node,
body:has(.setlist-container.setlist-dark-mode) article,
body:has(.setlist-container.setlist-dark-mode) .content-wrapper {
background-color: #000 !important;
}
/* ============================================================
METADATA STRIP — Key / BPM / Capo / Time + state pill
Sits at the top of every chart (above lyrics, below the tools).
Designed to read like a dashboard ribbon — monospaced labels in
muted color, values in stronger accent, hairline rules above and
below to separate it from the lyric area without shouting.
============================================================ */
.lyric-meta-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
margin: 0 0 22px 0;
padding: 8px 0;
border-top: 0.5px solid #D6C9A9;
border-bottom: 0.5px solid #D6C9A9;
font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
font-size: 12px;
color: #6B5938;
letter-spacing: 0.04em;
user-select: none;
}
.lyric-meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 14px;
border-left: 0.5px solid #D6C9A9;
line-height: 1.6;
}
.lyric-meta-item:first-child {
padding-left: 0;
border-left: 0;
}
.lyric-meta-label {
color: #8A7755;
text-transform: uppercase;
font-size: 11px;
}
.lyric-meta-value {
color: #2A2419;
font-weight: 500;
}
.lyric-meta-key .lyric-meta-value {
color: #B8581D; /* accent rust — KEY is the headline value */
}
.lyric-meta-time-select {
font-family: inherit;
font-size: 12px;
background: transparent;
border: 0;
color: #2A2419;
font-weight: 500;
cursor: pointer;
padding: 0 2px;
margin: 0;
appearance: none;
-webkit-appearance: none;
background-image: none;
}
.lyric-meta-time-select:focus {
outline: 1px solid #B8581D;
outline-offset: 1px;
}
.lyric-meta-spacer {
flex: 1;
min-width: 8px;
}
/* State pill — appears when any override is active (transpose != 0,
capo > 0, accidentals overridden, Nashville on). Click to reset. */
.lyric-state-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 10px;
margin-right: 2px;
border-radius: 999px;
background: #B8581D;
color: #F4ECD8;
font-family: 'Menlo', 'Consolas', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 0.15s ease;
}
.lyric-state-pill:hover {
background: #9C4A18;
}
/* Dark mode meta strip — reverse the warm palette to readable cool. */
.dark-mode .lyric-meta-strip,
.lyric-sheet-container.dark-mode .lyric-meta-strip {
border-color: #3a3a3a;
color: #888;
}
.dark-mode .lyric-meta-item,
.lyric-sheet-container.dark-mode .lyric-meta-item {
border-left-color: #3a3a3a;
}
.dark-mode .lyric-meta-label,
.lyric-sheet-container.dark-mode .lyric-meta-label {
color: #777;
}
.dark-mode .lyric-meta-value,
.lyric-sheet-container.dark-mode .lyric-meta-value {
color: #d4d4d4;
}
.dark-mode .lyric-meta-key .lyric-meta-value,
.lyric-sheet-container.dark-mode .lyric-meta-key .lyric-meta-value {
color: #e8c760;
}
.dark-mode .lyric-meta-time-select,
.lyric-sheet-container.dark-mode .lyric-meta-time-select {
color: #d4d4d4;
}
/* Plain text mode — strip down to a single line, no chrome. */
.lyric-sheet-container.plain-text-mode + .lyric-meta-strip,
.plain-text-mode .lyric-meta-strip {
display: none;
}
/* ============================================================
SECTION COLORING — verse / chorus / bridge etc.
The base .style-section-header keeps its bold uppercase look;
we add a left color bar via data-section-type so the band can
recognize sections in peripheral vision. Each type gets its own
accent — verses warm umber, choruses muted teal, bridges plum,
intro/outro neutral gray, etc.
============================================================ */
.style-section-header[data-section-type] {
border-left: 4px solid #888;
border-bottom: 0;
padding: 4px 0 4px 12px;
margin: 22px 0 8px 0;
background: rgba(0, 0, 0, 0.02);
}
.style-section-header[data-section-type="verse"] { border-left-color: #8A5A1F; color: #6B4818; }
.style-section-header[data-section-type="chorus"] { border-left-color: #2E6B5A; color: #1F4A3F; }
.style-section-header[data-section-type="bridge"] { border-left-color: #7A4B82; color: #5A3361; }
.style-section-header[data-section-type="pre"] { border-left-color: #9C7820; color: #6B5215; }
.style-section-header[data-section-type="intro"] { border-left-color: #6B6B6B; color: #4A4A4A; }
.style-section-header[data-section-type="outro"] { border-left-color: #6B6B6B; color: #4A4A4A; }
.style-section-header[data-section-type="tag"] { border-left-color: #3A6B9C; color: #2A4F75; }
.style-section-header[data-section-type="solo"] { border-left-color: #A04E2B; color: #783A20; }
.style-section-header[data-section-type="instr"] { border-left-color: #6B7A2B; color: #4F5A20; }
/* Dark mode — lighten the section colors so they read on black. */
.dark-mode .style-section-header[data-section-type],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type] {
background: rgba(255, 255, 255, 0.03);
}
.dark-mode .style-section-header[data-section-type="verse"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="verse"] {
color: #d4a35e; border-left-color: #d4a35e;
}
.dark-mode .style-section-header[data-section-type="chorus"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="chorus"] {
color: #6FBFA1; border-left-color: #6FBFA1;
}
.dark-mode .style-section-header[data-section-type="bridge"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="bridge"] {
color: #C098CC; border-left-color: #C098CC;
}
.dark-mode .style-section-header[data-section-type="pre"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="pre"] {
color: #DDB458; border-left-color: #DDB458;
}
.dark-mode .style-section-header[data-section-type="intro"],
.dark-mode .style-section-header[data-section-type="outro"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="intro"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="outro"] {
color: #999; border-left-color: #999;
}
.dark-mode .style-section-header[data-section-type="tag"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="tag"] {
color: #7AABDB; border-left-color: #7AABDB;
}
.dark-mode .style-section-header[data-section-type="solo"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="solo"] {
color: #D87E5C; border-left-color: #D87E5C;
}
.dark-mode .style-section-header[data-section-type="instr"],
.lyric-sheet-container.dark-mode .style-section-header[data-section-type="instr"] {
color: #B4C25E; border-left-color: #B4C25E;
}
/* ============================================================
SECTION NAV RAIL — jump-to-section affordance
Only rendered by JS when a song has >=3 sections AND it's NOT
inside a setlist (setlists have their own per-song jump nav).
Sits as a thin sticky column on the right edge on wide viewports;
collapses to a horizontal strip below the meta on narrow ones.
============================================================ */
.lyric-section-rail {
/* DEPRECATED: the vertical side rail is replaced by a horizontal bottom
ribbon (.lyric-section-ribbon--bottom). This element is no longer
created by the JS; the rule is neutralized so any stale cached markup
can't reserve height. */
display: none;
}
/* Bottom jump ribbon — same horizontal chips as the top ribbon, placed at
the foot of the chart with a separating rule above it. Horizontal
flex-wrap reserves only one row of height (no more 1181px void). */
.lyric-section-ribbon--bottom {
margin-top: 22px;
padding-top: 14px;
border-top: 0.5px solid var(--paper-edge, #D6C9A9);
}
.lyric-section-rail-item {
display: block;
text-align: center;
padding: 4px 0;
color: #8A7755;
text-decoration: none;
border-radius: 4px;
border: 0.5px solid transparent;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lyric-section-rail-item:hover {
background: rgba(184, 88, 29, 0.08);
color: #B8581D;
border-color: rgba(184, 88, 29, 0.3);
}
.lyric-section-rail-item[data-section-type="chorus"] { color: #2E6B5A; }
.lyric-section-rail-item[data-section-type="bridge"] { color: #7A4B82; }
.lyric-section-rail-item[data-section-type="pre"] { color: #9C7820; }
.lyric-section-rail-item[data-section-type="tag"] { color: #3A6B9C; }
.lyric-section-rail-item[data-section-type="solo"] { color: #A04E2B; }
.lyric-section-rail-item[data-section-type="instr"] { color: #6B7A2B; }
/* Dark mode rail */
.dark-mode .lyric-section-rail-item,
.lyric-sheet-container.dark-mode .lyric-section-rail-item {
color: #888;
}
.dark-mode .lyric-section-rail-item:hover,
.lyric-sheet-container.dark-mode .lyric-section-rail-item:hover {
background: rgba(232, 199, 96, 0.1);
color: #e8c760;
border-color: rgba(232, 199, 96, 0.3);
}
/* On narrow viewports the rail's right-margin trick would push it
off-screen. Collapse to a horizontal scrollable strip at the top. */
@media screen and (max-width: 900px) {
.lyric-section-rail {
position: static;
flex-direction: row;
flex-wrap: wrap;
float: none;
margin: 0 0 16px 0;
width: auto;
overflow-x: auto;
padding: 4px 0;
}
.lyric-section-rail-item {
min-width: 36px;
}
}
/* ============================================================
NEW TOOLS PANEL CONTROLS — capo, target key, Nashville, reset
Match the existing minimal style of the tools panel buttons
(transparent bg, muted color, accent on hover/active).
============================================================ */
.lyric-controls .capo-controls,
.lyric-controls .playin-controls,
.lyric-controls .nashville-controls,
.lyric-controls .reset-controls {
display: flex;
align-items: center;
gap: 6px;
}
.lyric-controls .capo-controls label,
.lyric-controls .playin-controls label {
font-size: 12px;
color: var(--muted, #999);
font-family: inherit;
letter-spacing: 0.04em;
margin-right: 2px;
}
.lyric-controls .capo-up,
.lyric-controls .capo-down {
background: transparent;
color: var(--muted, #999);
border: 1px solid var(--border, #444);
border-radius: 4px;
padding: 2px 8px;
font-size: 13px;
cursor: pointer;
font-family: inherit;
min-width: 24px;
}
.lyric-controls .capo-up:hover,
.lyric-controls .capo-down:hover {
color: var(--accent, #e8c760);
border-color: var(--accent, #e8c760);
}
.lyric-controls .capo-display {
font-family: 'Menlo', 'Consolas', monospace;
font-size: 13px;
color: var(--accent, #e8c760);
min-width: 18px;
text-align: center;
font-weight: 500;
}
.lyric-controls .playin-select {
font-family: inherit;
font-size: 12px;
background: transparent;
color: var(--accent, #e8c760);
border: 1px solid var(--border, #444);
border-radius: 4px;
padding: 2px 6px;
cursor: pointer;
font-weight: 500;
}
.lyric-controls .playin-select:hover,
.lyric-controls .playin-select:focus {
border-color: var(--accent, #e8c760);
outline: none;
}
.lyric-controls .toggle-nashville {
background: transparent;
color: var(--muted, #999);
border: 1px solid var(--border, #444);
border-radius: 4px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
transition: color 0.15s ease, border-color 0.15s ease;
}
.lyric-controls .toggle-nashville:hover,
.lyric-controls .toggle-nashville.active {
color: var(--accent, #e8c760);
border-color: var(--accent, #e8c760);
}
.lyric-controls .reset-overrides {
background: transparent;
color: var(--muted, #999);
border: 1px solid var(--border, #444);
border-radius: 4px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
margin-left: 8px;
opacity: 0.7;
transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lyric-controls .reset-overrides:hover {
opacity: 1;
color: #B8581D;
border-color: #B8581D;
}
/* Light-mode-specific control coloring (the lyric chart paper is
warm cream by default, so we want warmer mute/accent values that
read on cream — not the dark-mode CSS-var fallbacks above). */
.lyric-sheet-container:not(.dark-mode) .lyric-controls .capo-up,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .capo-down,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .playin-select,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .toggle-nashville,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .reset-overrides {
color: #6B5938;
border-color: #C9BC9C;
}
.lyric-sheet-container:not(.dark-mode) .lyric-controls .capo-up:hover,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .capo-down:hover,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .playin-select:hover,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .toggle-nashville:hover,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .toggle-nashville.active {
color: #B8581D;
border-color: #B8581D;
}
.lyric-sheet-container:not(.dark-mode) .lyric-controls .capo-display {
color: #B8581D;
}
.lyric-sheet-container:not(.dark-mode) .lyric-controls .playin-select {
color: #B8581D;
}
.lyric-sheet-container:not(.dark-mode) .lyric-controls .capo-controls label,
.lyric-sheet-container:not(.dark-mode) .lyric-controls .playin-controls label {
color: #8A7755;
}
/* Reset hides in plain-text mode (everything's already maximally
stripped — the override pill on the meta strip can do the work) */
.plain-text-mode .lyric-controls,
.lyric-sheet-container.plain-text-mode .lyric-controls {
/* Existing rule keeps controls hidden in plain text; nothing extra needed */
}
/* Print: hide all the new chrome */
@media print {
.lyric-meta-strip,
.lyric-state-pill,
.lyric-section-rail,
.capo-controls,
.playin-controls,
.nashville-controls,
.reset-controls {
display: none !important;
}
}
/* ============================================================
DESIGN TOKENS — the chart's single source of truth
Every recurring part of the chart (tools, metadata, section
headers, dividers, accents) pulls colors from these custom
properties. Dark mode just flips the same names.
Why this exists: previous iterations had three different
palettes — the legacy tool buttons in muted grey/gold, the
new tool buttons in warm umber/rust, and the setlist global
bar in something else again. Variables let us nail the look
in one place and have it propagate.
============================================================ */
.lyric-sheet-container {
--paper: #F4ECD8; /* warm cream chart bg */
--paper-edge: #D6C9A9; /* hairline rules + frame border */
--paper-tint: rgba(184, 88, 29, 0.03); /* section bg wash */
--ink: #2A2419; /* primary chord/lyric color */
--ink-muted: #6B5938; /* tools, labels, metadata values */
--ink-faint: #8A7755; /* labels, hints, less-important */
--accent: #B8581D; /* chords, key, primary interactive */
--accent-deep: #9C4A18; /* hover / pressed state */
--accent-soft: rgba(184, 88, 29, 0.1); /* pill bg, hover bg */
--tool-radius: 4px;
--frame-radius: 8px;
}
.lyric-sheet-container.dark-mode {
--paper: #000;
--paper-edge: #2A2A2A;
--paper-tint: rgba(232, 199, 96, 0.04);
--ink: #d4d4d4;
--ink-muted: #999;
--ink-faint: #777;
--accent: #e8c760;
--accent-deep: #C9A748;
--accent-soft: rgba(232, 199, 96, 0.12);
}
/* === Chart frame === Subtle border so each chart reads as its own
visual object, plus a touch of vertical breathing room. Skipped
in setlist context where songs already have their own dividers.
The cream bg sits inside the frame; dark mode keeps a thin edge
so the chart doesn't fuse with the page. */
.lyric-sheet-container:not(.plain-text-mode) {
border: 0.5px solid var(--paper-edge);
border-radius: var(--frame-radius);
padding: 24px 28px;
margin: 1rem 0;
}
.setlist-container .lyric-sheet-container:not(.plain-text-mode) {
/* Setlists already frame each song with the wrapper + divider;
a per-chart border on top is too much. Keep the cream paper
but drop the extra frame. */
border: 0;
border-radius: 0;
padding: 12px 0 8px 0;
margin: 0;
}
/* ============================================================
UNIFIED TOOL BUTTONS — works in any context
Controls live in different places depending on context:
- Standalone song page: .lyric-controls is INSIDE .lyric-sheet-container
- Setlist context: .lyric-controls is INSIDE .setlist-song-wrapper, ABOVE the chart
Earlier scoped selectors (.lyric-sheet-container .lyric-controls ...)
silently failed in setlist context because the controls weren't inside
the container. New approach: define tokens on .lyric-controls itself
AND target buttons with .lyric-controls .button-name (no parent
container needed). Tokens flip for dark mode via two parent overrides
(.dark-mode and .setlist-dark-mode) so both modes paint correctly.
============================================================ */
.lyric-controls {
--tool-bg: transparent;
--tool-border: #C9BC9C; /* visible on cream paper */
--tool-text: #6B5938;
--tool-accent: #B8581D;
--tool-radius: 4px;
}
/* Dark mode tokens — bumped border to a much lighter grey so buttons
actually read as buttons against black, not as floating text. */
.dark-mode .lyric-controls,
.lyric-sheet-container.dark-mode .lyric-controls,
.setlist-container.setlist-dark-mode .lyric-controls,
.setlist-dark-mode .lyric-controls {
--tool-border: #555;
--tool-text: #BBB;
--tool-accent: #e8c760;
}
.lyric-controls .tools-toggle,
.lyric-controls .toggle-accidentals,
.lyric-controls .toggle-chords,
.lyric-controls .toggle-nashville,
.lyric-controls .reset-overrides,
.lyric-controls .bake-key,
.lyric-controls .transpose-up,
.lyric-controls .transpose-down,
.lyric-controls .capo-up,
.lyric-controls .capo-down,
.lyric-controls .playin-select,
.lyric-controls .size-btn,
.lyric-controls .toggle-theme,
.lyric-controls .toggle-plaintext {
background: var(--tool-bg) !important;
color: var(--tool-text) !important;
border: 1px solid var(--tool-border) !important;
border-radius: var(--tool-radius) !important;
padding: 4px 10px !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
cursor: pointer !important;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
line-height: 1.4 !important;
min-width: auto !important;
box-shadow: none !important;
text-transform: none !important;
}
.lyric-controls .transpose-up,
.lyric-controls .transpose-down,
.lyric-controls .capo-up,
.lyric-controls .capo-down {
min-width: 28px !important;
padding: 4px 8px !important;
font-size: 14px !important;
}
.lyric-controls .tools-toggle:hover,
.lyric-controls .toggle-accidentals:hover,
.lyric-controls .toggle-chords:hover,
.lyric-controls .toggle-nashville:hover,
.lyric-controls .reset-overrides:hover,
.lyric-controls .bake-key:hover,
.lyric-controls .transpose-up:hover,
.lyric-controls .transpose-down:hover,
.lyric-controls .capo-up:hover,
.lyric-controls .capo-down:hover,
.lyric-controls .playin-select:hover,
.lyric-controls .playin-select:focus,
.lyric-controls .size-btn:hover,
.lyric-controls .toggle-theme:hover,
.lyric-controls .toggle-plaintext:hover,
.lyric-controls .tools-toggle[aria-expanded="true"],
.lyric-controls .toggle-accidentals[data-pref="sharps"],
.lyric-controls .toggle-accidentals[data-pref="flats"],
.lyric-controls .toggle-nashville.active,
.lyric-controls .size-btn.active {
color: var(--tool-accent) !important;
border-color: var(--tool-accent) !important;
background: var(--tool-bg) !important;
outline: none !important;
}
/* Kill the legacy .transpose-controls container box and .chord-visibility-controls
container box — they used to wrap buttons in a grey/black panel that
competed with the new minimal aesthetic. Now they're invisible
wrappers, just flex layout. */
.lyric-controls .transpose-controls,
.lyric-controls .chord-visibility-controls,
.lyric-controls .accidentals-controls,
.lyric-controls .capo-controls,
.lyric-controls .playin-controls,
.lyric-controls .nashville-controls,
.lyric-controls .reset-controls,
.lyric-controls .size-controls,
.lyric-controls .theme-controls,
.lyric-controls .plaintext-controls {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
/* Display values (transpose-display, capo-display) — monospace accent */
.lyric-controls .transpose-display,
.lyric-controls .capo-display {
font-family: 'Menlo', 'Consolas', monospace !important;
font-size: 12px !important;
color: var(--tool-accent) !important;
min-width: 32px !important;
text-align: center !important;
font-weight: 500 !important;
padding: 0 4px !important;
background: transparent !important;
}
.lyric-controls label {
font-size: 11px !important;
color: var(--tool-text) !important;
opacity: 0.75;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
font-family: inherit !important;
margin: 0 !important;
}
/* ============================================================
CHORD-TEXT BREATHING ROOM
The chord-text sits absolute-positioned above each lyric character
via `top: -0.55em` (desktop) / `top: -0.7em` (mobile). With tight
line-height it crowds the lyric ABOVE, which gets worse as lines
wrap further down the chart. Solution: more generous line-height
so chord-text has room to breathe between lyric lines.
============================================================ */
.lyric-sheet-container:not(.plain-text-mode) .lyrics,
.lyric-sheet-container:not(.plain-text-mode) .style-lyrics,
.lyric-sheet-container:not(.plain-text-mode) .harmonies,
.lyric-sheet-container:not(.plain-text-mode) .style-harmonies {
line-height: var(--clh); /* canonical multiplier — SINGLE SOURCE OF TRUTH */
}
@media screen and (max-width: 768px) {
.lyric-sheet-container:not(.plain-text-mode) .lyrics,
.lyric-sheet-container:not(.plain-text-mode) .style-lyrics,
.lyric-sheet-container:not(.plain-text-mode) .harmonies,
.lyric-sheet-container:not(.plain-text-mode) .style-harmonies {
line-height: var(--clh) !important; /* canonical multiplier scales with mobile font */
}
/* Chord-text offset inherits the canonical token; the unitless line-height
above already scales the room for mobile, so the em offset stays correct
without a separate mobile value. Scoped to non-plain-text. */
.lyric-sheet-container:not(.plain-text-mode) .lyrics span.chord span.chord-text,
.lyric-sheet-container:not(.plain-text-mode) .style-lyrics span.chord span.chord-text,
.lyric-sheet-container:not(.plain-text-mode) .harmonies span.chord span.chord-text,
.lyric-sheet-container:not(.plain-text-mode) .style-harmonies span.chord span.chord-text {
top: var(--ctop) !important;
}
}
@media screen and (max-width: 480px) {
.lyric-sheet-container:not(.plain-text-mode) .lyrics,
.lyric-sheet-container:not(.plain-text-mode) .style-lyrics,
.lyric-sheet-container:not(.plain-text-mode) .harmonies,
.lyric-sheet-container:not(.plain-text-mode) .style-harmonies {
line-height: 3.4rem !important;
}
.lyric-sheet-container:not(.plain-text-mode) .large-size .lyrics,
.lyric-sheet-container:not(.plain-text-mode) .large-size .style-lyrics {
line-height: 4rem !important;
}
}
/* ============================================================
EXTENDED SECTION COLORING
Users mark sections in two ways:
- .style-section-header (a generic header)
- .style-bridge / .style-chorus / .style-instrumental (per-type
classes from the CKEditor style menu)
Section coloring via data-section-type only catches the first
case. Apply the same left-border accent treatment directly to the
per-type classes too, so existing charts get colored without
re-tagging anything.
============================================================ */
.style-bridge,
.style-chorus,
.style-instrumental {
display: block;
border-left: 4px solid #888;
padding: 4px 0 4px 12px;
margin: 22px 0 8px 0;
background: rgba(0, 0, 0, 0.02);
font-style: italic;
font-weight: 500;
}
.style-chorus { border-left-color: #2E6B5A; color: #1F4A3F; }
.style-bridge { border-left-color: #7A4B82; color: #5A3361; }
.style-instrumental { border-left-color: #6B7A2B; color: #4F5A20; }
.dark-mode .style-bridge,
.dark-mode .style-chorus,
.dark-mode .style-instrumental,
.lyric-sheet-container.dark-mode .style-bridge,
.lyric-sheet-container.dark-mode .style-chorus,
.lyric-sheet-container.dark-mode .style-instrumental {
background: rgba(255, 255, 255, 0.03);
}
.dark-mode .style-chorus,
.lyric-sheet-container.dark-mode .style-chorus {
color: #6FBFA1; border-left-color: #6FBFA1;
}
.dark-mode .style-bridge,
.lyric-sheet-container.dark-mode .style-bridge {
color: #C098CC; border-left-color: #C098CC;
}
.dark-mode .style-instrumental,
.lyric-sheet-container.dark-mode .style-instrumental {
color: #B4C25E; border-left-color: #B4C25E;
}
/* === Unified metadata strip (overrides) ===
Switch the earlier hard-coded colors to vars so dark mode flips
automatically and the strip matches the rest of the chart. */
.lyric-sheet-container .lyric-meta-strip,
.lyric-meta-strip {
border-top-color: var(--paper-edge, #D6C9A9);
border-bottom-color: var(--paper-edge, #D6C9A9);
color: var(--ink-muted, #6B5938);
}
.lyric-sheet-container .lyric-meta-item,
.lyric-meta-item {
border-left-color: var(--paper-edge, #D6C9A9);
}
.lyric-sheet-container .lyric-meta-label,
.lyric-meta-label {
color: var(--ink-faint, #8A7755);
}
.lyric-sheet-container .lyric-meta-value,
.lyric-meta-value {
color: var(--ink, #2A2419);
}
.lyric-sheet-container .lyric-meta-key .lyric-meta-value,
.lyric-meta-key .lyric-meta-value {
color: var(--accent, #B8581D);
}
.lyric-sheet-container .lyric-meta-time-select,
.lyric-meta-time-select {
color: var(--ink, #2A2419);
}
.lyric-sheet-container .lyric-meta-time-select:focus,
.lyric-meta-time-select:focus {
outline-color: var(--accent, #B8581D);
}
.lyric-sheet-container .lyric-state-pill,
.lyric-state-pill {
background: var(--accent, #B8581D);
color: var(--paper, #F4ECD8);
}
.lyric-sheet-container .lyric-state-pill:hover,
.lyric-state-pill:hover {
background: var(--accent-deep, #9C4A18);
}
/* === Section headers — unify with vars + drop legacy bottom border
when data-section-type is present (the left color bar already
does the differentiation). === */
.lyric-sheet-container .style-section-header[data-section-type] {
border-bottom: 0;
background: var(--paper-tint);
}
/* === Rhythm / groove annotation ===
New style for inline groove phrases above a section ("swing 8ths",
"♩♩ ♩♩", "drop on the 4", "half-time feel"). Users wrap a phrase
in … via the CKEditor style menu;
it renders as a small italic accent-tinted line. Sits naturally
above whatever follows (typically a section header), giving the
rhythm section a quick cue without crowding the chord row.
Two display modes:
- Block (own line): margin-top so it floats above the next section.
- Inline (in a chord row, e.g. above a chord-only bar): renders as
a subscript-like tag. Detected by being inside .style-chords.
*/
.style-rhythm {
display: block;
font-family: 'Menlo', 'Consolas', monospace;
font-size: 12px;
font-style: italic;
color: var(--ink-faint, #8A7755);
letter-spacing: 0.05em;
margin: 16px 0 -4px 0;
padding: 2px 10px 2px 12px;
border-left: 2px solid var(--accent-soft, rgba(184, 88, 29, 0.3));
background: var(--paper-tint, rgba(184, 88, 29, 0.03));
}
.style-rhythm::before {
content: "♪ ";
color: var(--accent, #B8581D);
margin-right: 4px;
font-style: normal;
}
.style-chords .style-rhythm,
span.style-rhythm {
display: inline-block;
margin: 0 8px 0 0;
padding: 0 6px;
border-left: 0;
background: transparent;
vertical-align: middle;
}
.dark-mode .style-rhythm,
.lyric-sheet-container.dark-mode .style-rhythm {
color: var(--ink-faint, #777);
}
/* === Plain-text mode hygiene ===
The whole chart drops to a stripped-down lyric reference. Kill the
frame, meta strip, nav rail, section colors — leave the words. */
.lyric-sheet-container.plain-text-mode {
border: 0;
padding: 0;
background: transparent;
}
.lyric-sheet-container.plain-text-mode .lyric-meta-strip,
.lyric-sheet-container.plain-text-mode .lyric-section-rail,
.lyric-sheet-container.plain-text-mode .lyric-state-pill {
display: none;
}
.lyric-sheet-container.plain-text-mode .style-section-header[data-section-type] {
border-left: 0;
padding-left: 0;
background: transparent;
color: inherit;
}
/* ============================================================
PRINT — chart designed to print as a clean one-page chart sheet
Strategy: keep the metadata STRIP values (Key/BPM/Time) but
strip every interactive control. Keep section colors as grayscale
left-border bars (left-border prints fine on most printers).
Hide nav rail, state pill, tools, capo controls. Force black ink
on cream-or-white paper.
============================================================ */
@media print {
.lyric-sheet-container {
background: #fff !important;
color: #000 !important;
border: 0.5pt solid #999 !important;
border-radius: 0 !important;
padding: 0.4in 0.5in !important;
margin: 0 !important;
box-shadow: none !important;
page-break-inside: avoid;
}
.lyric-controls,
.lyric-section-rail,
.lyric-state-pill,
.lyric-meta-time-select::after,
.capo-controls,
.playin-controls,
.nashville-controls,
.reset-controls,
.archive-floating-player,
.archive-play-wrapper {
display: none !important;
}
/* Meta strip: keep values, render as a tight top-of-page reference. */
.lyric-meta-strip {
border-top: 0 !important;
border-bottom: 0.5pt solid #666 !important;
padding: 4pt 0 6pt 0 !important;
margin: 0 0 12pt 0 !important;
color: #000 !important;
font-size: 10pt !important;
gap: 0 !important;
}
.lyric-meta-item {
border-left-color: #666 !important;
padding: 0 10pt !important;
}
.lyric-meta-item:first-child {
padding-left: 0 !important;
}
.lyric-meta-label,
.lyric-meta-value,
.lyric-meta-key .lyric-meta-value {
color: #000 !important;
}
/* Time signature in print — render as static text rather than a
functional