/* 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; overflow-wrap: break-word; word-wrap: break-word; max-width: 100%; overflow-x: hidden; white-space: normal; } /* Inline chord spans - default behavior (for lyrics) */ .lyrics span.chord, .harmonies span.chord, .style-lyrics span.chord, .style-harmonies span.chord { height: 1.5em; 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: -0.85em; /* Lowered from -1em for tighter spacing */ left: 0; font-weight: bold; color: #d35400; font-size: 0.85em; 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 */ .lyrics { color: #000000 !important; /* Black for best readability */ line-height: 2.5rem !important; /* Reduced from 2.75rem for tighter spacing at large sizes */ margin-top: 0; /* Remove previous margin */ } .chords, .style-chords { color: #d35400 !important; /* Burnt orange - compliments black */ line-height: 1.3rem !important; /* Compact spacing for chord lines */ /* Inherits compact spacing from container */ } .songmsg, .style-songmsg { color: #16a085 !important; /* Teal green - compliments black */ font-style: italic; line-height: 1.5rem; /* Tighter spacing after section labels */ } .harmonies, .style-harmonies { color: #000000 !important; text-decoration: underline; } /* Chord spans - light mode */ span.chord span.chord-text { color: #d35400; /* Burnt orange */ } /* 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 within module containers */ .lyric-sheet-container .contextual, .setlist-container .contextual { display: none !important; } /* ============================================ CONTENT TYPE OVERRIDES (Moved from theme to keep module self-contained) ============================================ */ /* Hide page title on set pages - template already shows it */ .node--type-set .page-title { display: none; } /* Hide node's field--name-title in sets - we use the template h2 instead */ .setlist-song-content .field--name-title { display: none !important; } /* Song edit form - remove extra spacing */ .node-song-form .field--name-body { margin-top: 0 !important; padding-top: 0 !important; } .node-song-form .field--name-body .field__label { display: none !important; } .node-song-form .field--name-body .form-item { margin-top: 0 !important; margin-bottom: 0 !important; } .node-song-form .field--name-body .form-item__description { display: none; } .node-song-form .field--name-body { margin-bottom: 20px !important; } /* Maximize CKEditor width on song edit screen */ .path-node.page-node-type-song .region-content, .node-song-form .region-content { max-width: 100% !important; width: 100% !important; } .node-song-form form { max-width: 100% !important; } .node-song-form .field--name-body, .node-song-form .field--name-body .form-item, .node-song-form .field--name-body .cke_chrome { max-width: 100% !important; width: 100% !important; } /* Make CKEditor taller */ .node-song-form .cke_contents { min-height: 600px !important; } /* ============================================ CKEditor 5 - Light editing area for song fields Dark theme bleeds into editor making black text invisible. Force white background on the editable content area. ============================================ */ /* Lyrics and chords field wrapper - dark to match theme */ .field--name-field-lyrics-and-chords { background-color: #1a1a1a; padding: 0 !important; margin: 0 !important; white-space: normal !important; white-space-collapse: collapse !important; text-wrap-mode: wrap !important; } /* Dark background on ALL intermediate wrappers between field and CKEditor */ .field--name-field-lyrics-and-chords .js-text-full, .field--name-field-lyrics-and-chords .text-full, .field--name-field-lyrics-and-chords .form-item, .field--name-field-lyrics-and-chords .form-type--textarea, .field--name-field-lyrics-and-chords .form-textarea-wrapper, .field--name-field-lyrics-and-chords .text-format-wrapper { background-color: #1a1a1a !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } /* Hide the "lyrics and chords" label above editor */ .field--name-field-lyrics-and-chords .form-item__label { display: none; } /* CKEditor chrome - remove all extra borders and spacing */ .field--name-field-lyrics-and-chords .ck.ck-editor { margin: 0; border: none !important; } .field--name-field-lyrics-and-chords .ck.ck-editor__top, .field--name-field-lyrics-and-chords .ck-sticky-panel, .field--name-field-lyrics-and-chords .ck-sticky-panel__content { padding: 0 !important; margin: 0 !important; } .field--name-field-lyrics-and-chords .ck-editor__main { padding: 0 !important; margin: 0 !important; } /* Text format selector area - compact and dark */ .field--name-field-lyrics-and-chords .filter-wrapper, .field--name-field-lyrics-and-chords .js-filter-wrapper { background-color: #1a1a1a !important; padding: 4px 8px !important; margin: 0 !important; border: none !important; border-top: 1px solid #333 !important; } .field--name-field-lyrics-and-chords .filter-wrapper .form-item { padding: 2px 0 !important; margin: 0 !important; } .field--name-field-lyrics-and-chords .filter-wrapper label, .field--name-field-lyrics-and-chords .filter-wrapper .form-item__label { color: #aaa !important; font-size: 0.85em; display: inline !important; margin-right: 8px; } .field--name-field-lyrics-and-chords .filter-wrapper select { background-color: #2a2a2a !important; color: #e8e8e8 !important; border-color: #444 !important; } .field--name-field-lyrics-and-chords .filter-help { background-color: #1a1a1a !important; padding: 2px 8px !important; margin: 0 !important; } .field--name-field-lyrics-and-chords .filter-help a { color: #e8c760 !important; font-size: 0.85em; } .field--name-field-lyrics-and-chords .filter-guidelines { padding: 0 !important; margin: 0 !important; } /* CKEditor 5 editable area - MUST be light for readability */ .field--name-field-lyrics-and-chords .ck-editor__editable, .node-song-form .ck-editor__editable { background-color: #fff !important; color: #000 !important; min-height: 500px; } /* Keep the CKEditor toolbar dark to match theme */ .field--name-field-lyrics-and-chords .ck-toolbar { background-color: #2a2a2a !important; border-color: #444 !important; } .field--name-field-lyrics-and-chords .ck-toolbar .ck-button { color: #e8e8e8 !important; } .field--name-field-lyrics-and-chords .ck-toolbar .ck-button:hover { background-color: #444 !important; } .field--name-field-lyrics-and-chords .ck-toolbar .ck-dropdown__button .ck-button__label { color: #e8e8e8 !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 */ } /* Override theme's node padding for lyric sheet container */ .lyric-sheet-container { padding: 0 !important; margin: 0 !important; } .lyric-sheet-container > div { margin: 0 !important; padding: 0 !important; } /* Add visual space for blank lines (sections separator) */ .lyric-line:empty, .lyric-line:has(> :only-child:empty) { height: 1.4em; margin: 10px 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 */ .lyric-controls { margin-bottom: 15px; display: flex; gap: 15px; flex-wrap: wrap; } /* 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: 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 { 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 controls - light text for readability */ .dark-mode .transpose-display { color: #e8e8e8 !important; } .dark-mode .transpose-controls label, .dark-mode .chord-visibility-controls label, .dark-mode .size-controls label, .dark-mode .theme-controls label, .dark-mode .plaintext-controls label { color: #e8e8e8 !important; } /* Dark mode colors - softer for eyes */ .dark-mode .lyrics { color: #88bbff !important; /* Softer blue */ } .dark-mode .chords, .dark-mode .style-chords { color: #ffcc66 !important; /* Softer gold */ } .dark-mode .songmsg, .dark-mode .style-songmsg { color: #66ff66 !important; /* Softer green */ } .dark-mode .harmonies, .dark-mode .style-harmonies { color: #88bbff !important; /* Softer blue */ text-decoration: underline; } .dark-mode span.chord span.chord-text { color: #ffcc66 !important; /* Softer gold for chords */ } /* 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: #ffcc66 !important; } /* 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; } /* ============================================ 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 */ } .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; /* More padding on right to prevent clipping */ overflow-x: hidden; /* Prevent chords from escaping off screen */ } .lyric-sheet-container.plain-text-mode { padding: 0 25px 0 15px !important; /* More right padding in plain text mode too */ overflow-x: hidden !important; /* Prevent content from escaping off screen */ } /* 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 !important; /* Extra for plain text large */ } .lyrics { line-height: 2rem !important; /* Tighter spacing for mobile */ } .lyrics span.chord span.chord-text { top: -1.05em; /* Raise chords more to clear lyrics */ } /* 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 */ } } /* 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) .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) .node, body:has(.setlist-container.setlist-dark-mode) article, body:has(.setlist-container.setlist-dark-mode) .content-wrapper { background-color: #000 !important; }