/* ---------- design tokens (theme) ---------- Light is the default on :root. Dark is applied via [data-theme="dark"] on (set before first paint by the inline head script -> no FOUC). The prefers-color-scheme block is only a no-JS fallback; every component styles itself THROUGH these tokens, so there are no per-component dark overrides. */ :root { --bg: #ffffff; --surface: #ffffff; /* cards, popup, buttons */ --hover: #faf7f2; --ink: #14110f; --chord: #b3261e; --muted: #6b6b6b; --faint: #b7b2aa; /* page numbers, footer, credits */ --line: #e6e2dc; --accent: #0b5a52; --accent-ink: #ffffff; /* text/icon on an accent fill */ --accent-soft: #f0f8f6; /* subtle accent-tinted surface */ --bar-bg: rgba(255, 255, 255, .94); --shadow: rgba(0, 0, 0, .18); --diagram-line: #14110f; /* svguitar grid/nut/strings + X/O + labels */ --diagram-dot: #b3261e; /* finger dots */ --diagram-dot-ink: #ffffff; --lyric-font: "Frank Ruhl Libre", "David Libre", "Times New Roman", "Arial Hebrew", serif; --chord-font: "SF Mono", "Menlo", "Consolas", monospace; color-scheme: light; } :root[data-theme="dark"] { --bg: #1b1714; --surface: #26211c; --hover: #2f2822; --ink: #ece5d8; --chord: #f2897f; /* warm coral-red: pops on dark, does not glow */ --muted: #a79e90; --faint: #6f685c; --line: #3a332b; --accent: #57c9bc; /* brighter teal, legible on dark */ --accent-ink: #10211e; --accent-soft: #16302c; --bar-bg: rgba(27, 23, 20, .92); --shadow: rgba(0, 0, 0, .5); --diagram-line: #ece5d8; --diagram-dot: #f2897f; --diagram-dot-ink: #1b1714; color-scheme: dark; } /* no-JS fallback: honour the OS setting when the head script did not run */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #1b1714; --surface: #26211c; --hover: #2f2822; --ink: #ece5d8; --chord: #f2897f; --muted: #a79e90; --faint: #6f685c; --line: #3a332b; --accent: #57c9bc; --accent-ink: #10211e; --accent-soft: #16302c; --bar-bg: rgba(27, 23, 20, .92); --shadow: rgba(0, 0, 0, .5); --diagram-line: #ece5d8; --diagram-dot: #f2897f; --diagram-dot-ink: #1b1714; color-scheme: dark; } } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--ink); } body { font-family: var(--lyric-font); -webkit-font-smoothing: antialiased; } /* ---------- theme toggle (sun/moon) ---------- */ .theme-toggle { position: absolute; top: 14px; inset-inline-end: 16px; z-index: 3; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; line-height: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .th-ico { width: 19px; height: 19px; } .theme-toggle .th-sun { display: none; } .theme-toggle .th-moon { display: block; } :root[data-theme="dark"] .theme-toggle .th-sun { display: block; } :root[data-theme="dark"] .theme-toggle .th-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .th-sun { display: block; } :root:not([data-theme]) .theme-toggle .th-moon { display: none; } } /* ---------- index ---------- */ .idx-head { position: relative; padding: 28px 20px 8px; max-width: 820px; margin: 0 auto; } .idx-head h1 { margin: 0 0 2px; font-size: 30px; letter-spacing: .5px; } .idx-head .sub { margin: 0 0 16px; color: var(--muted); } #search { width: 100%; padding: 12px 14px; font-size: 17px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--lyric-font); background: var(--surface); color: var(--ink); } #search::placeholder { color: var(--muted); } .songlist { list-style: none; margin: 8px auto 60px; padding: 0 20px; max-width: 820px; } .scard { border-bottom: 1px solid var(--line); } .scard a { display: flex; align-items: baseline; gap: 12px; padding: 13px 6px; text-decoration: none; color: inherit; } .scard a:hover { background: var(--hover); } .scard .t { font-size: 19px; font-weight: 600; } .scard .a { color: var(--muted); font-size: 15px; } .scard .p { margin-inline-start: auto; color: var(--faint); font-size: 13px; font-family: var(--chord-font); } /* ---------- song page ---------- */ .song-head { position: relative; border-bottom: 1px solid var(--line); padding: 16px 20px; max-width: 1000px; margin: 0 auto; } .song-head .back { color: var(--accent); text-decoration: none; font-size: 14px; } .song-head h1 { margin: 10px 0 2px; font-size: 27px; } .song-head .artist { color: var(--muted); font-size: 17px; } .song-head .credits { color: var(--faint); font-size: 13px; margin-top: 4px; } .controls { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .controls button[data-t] { width: 34px; height: 32px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; font-size: 15px; cursor: pointer; font-family: var(--chord-font); } .controls button[data-t]:hover { border-color: var(--accent); color: var(--accent); } .controls .tval { font-size: 13px; color: var(--muted); min-width: 54px; text-align: center; } .controls .chk { margin-inline-start: 14px; font-size: 14px; color: var(--muted); cursor: pointer; } .controls .chk input { accent-color: var(--accent); } .song { padding: 22px 20px 60px; max-width: 1000px; margin: 0 auto; } .song.two-col { display: flex; flex-direction: row; gap: 46px; } .song.two-col .col { flex: 1 1 0; min-width: 0; } /* a chorded line: chord row sits directly above the lyric fragment */ .line { margin-bottom: 12px; } .line.chorded { white-space: nowrap; line-height: 1.15; } .seg { display: inline-block; vertical-align: bottom; position: relative; } .chord { display: block; height: 1.35em; font-family: var(--chord-font); font-size: 14px; font-weight: 600; color: var(--chord); direction: ltr; text-align: right; unicode-bidi: isolate; white-space: nowrap; overflow: visible; padding-inline-start: 10px; /* keeps a wide chord from touching its left neighbour */ } .lyr { display: block; font-size: 20px; white-space: pre; } .line.lyric-only { font-size: 20px; line-height: 1.15; } .line.chords-only .chordrow { font-family: var(--chord-font); color: var(--chord); font-weight: 600; font-size: 14px; direction: ltr; unicode-bidi: isolate; } .line.label { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; } .line.label .lbl { font-weight: 700; color: var(--accent); } .colbreak { height: 10px; } /* clickable chord tokens -> fingering diagram */ .chord, .chord-tok { cursor: pointer; } .chord-tok { display: inline-block; } .chord:hover, .chord-tok:hover { text-decoration: underline dotted; } .chord:empty { cursor: default; } .pagefoot { border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; padding: 14px 20px; text-align: center; } /* lyrics-only mode collapses the chord row */ .song.hide-chords .chord { display: none; } .song.hide-chords .chords-only, .song.hide-chords .label .chordrow { display: none; } .song.hide-chords .line.chorded { line-height: 1.5; } @media (max-width: 680px) { .song.two-col { flex-direction: column; gap: 8px; } .lyr, .line.lyric-only { font-size: 19px; } } /* leave room for the fixed auto-scroll bar */ .song { padding-bottom: 108px; } /* ---------- chord fingering popover ---------- */ .chord-pop { position: fixed; z-index: 50; width: 208px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px var(--shadow); padding: 12px 12px 10px; direction: rtl; text-align: center; color: var(--ink); } .chord-pop-x { position: absolute; inset-inline-start: 8px; top: 6px; border: none; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); } .chord-pop-name { font-family: var(--chord-font); font-weight: 700; font-size: 18px; color: var(--chord); direction: ltr; margin: 2px 0 6px; } .chord-pop-diagram { display: flex; justify-content: center; } .chord-pop-diagram svg { max-width: 168px; height: auto; } .chord-pop-howto { margin-top: 8px; text-align: start; } .chord-pop-howto ol { margin: 0; padding-inline-start: 18px; font-size: 12.5px; color: var(--ink); line-height: 1.45; } .chord-pop-extra { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); } .chord-pop-none { color: var(--muted); font-size: 13px; padding: 8px 0; } /* ---------- auto-scroll bar ---------- */ .scroll-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bar-bg); backdrop-filter: blur(8px); border-top: 1px solid var(--line); max-width: 1000px; margin: 0 auto; } .sb-play { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 20px; display: grid; place-items: center; color: var(--accent); } .scroll-bar.playing .sb-play { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .sb-speed-wrap { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; } .sb-speed { flex: 1 1 auto; height: 30px; accent-color: var(--accent); } .sb-speedval { font-family: var(--chord-font); font-size: 13px; color: var(--muted); min-width: 40px; } /* ---------- keep-screen-on toggle ---------- */ .wake-toggle { margin-inline-start: 14px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--muted); cursor: pointer; font-family: var(--lyric-font); white-space: nowrap; flex: 0 0 auto; } .wake-toggle.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .wake-toggle .wl-dot { font-size: 11px; }