diff --git a/www/chords-darcula.css b/www/chords-darcula.css index 2c3c8f3..ff3e47a 100644 --- a/www/chords-darcula.css +++ b/www/chords-darcula.css @@ -1,3 +1,5 @@ +@import url('chords-light.css'); + body { font-family: "Work Sans", sans-serif; background-color: #383838; /* Darcula background */ diff --git a/www/chords-default.css b/www/chords-default.css index 39ee2f4..d374d84 100644 --- a/www/chords-default.css +++ b/www/chords-default.css @@ -1,3 +1,5 @@ +@import url('chords-light.css'); + body { font-family: "Work Sans", sans-serif; background-color: #121212; diff --git a/www/chords-solarized.css b/www/chords-solarized.css index 7d96ce8..38a4753 100644 --- a/www/chords-solarized.css +++ b/www/chords-solarized.css @@ -1,3 +1,5 @@ +@import url('chords-light.css'); + body { font-family: "Work Sans", sans-serif; background-color: #002b36; /* Solarized Dark base03 */ diff --git a/www/chords-tomorrow-amoled.css b/www/chords-tomorrow-amoled.css index b652d8c..f09a6c0 100644 --- a/www/chords-tomorrow-amoled.css +++ b/www/chords-tomorrow-amoled.css @@ -1,3 +1,5 @@ +@import url('chords-light.css'); + body { font-family: "Work Sans", sans-serif; background-color: #000000; /* Tomorrow AMOLED background - pure black */ diff --git a/www/chords.css b/www/chords.css deleted file mode 100644 index 9552709..0000000 --- a/www/chords.css +++ /dev/null @@ -1,114 +0,0 @@ -body { - font-family: "Work Sans", sans-serif; - background-color: #121212; - color: #eec4e7; - padding: 1rem; - line-height: 1.5; -} - -#chord-container { - display: flex; - flex-wrap: wrap; - gap: 1.5rem; -} - -.chord-card { - border: 1px solid rgb(151, 16, 137); - border-radius: 8px; - padding: 1rem; - background-color: #1a1a1a; - width: max-content; -} - -.chord-card h2 { - margin-top: 0; - font-size: 1.2rem; - color: #ffd9f0; -} - -.fretboard { - display: flex; - flex-direction: column; - align-items: center; - gap: 2px; - margin-left: .5rem; - border: .5px; - background-color: #56208bbe; -} - -.fretboard .fret { - background-color: #130404!important; -} - -.fret-row { - display: flex; - flex-direction: row; - justify-content: center; - align-items: stretch; - gap: 2px; -} - -.fret { - width: 2.1rem; - height: 1.6rem; - box-sizing: border-box; - border: .5px solid #48b9debd; - border-left: 2px solid #55555500; - border-right: 2px; - display: flex; - align-items: center; - justify-content: center; - font-size: 1rem; - text-align: center; - line-height: 1.6rem; - font-weight: bold; - background-color: #1e1e1e; - - position: relative; - color: transparent; -} - -.fret[data-dot]::after { - content: ''; - width: 0.55rem; - height: 0.55rem; - background-color: #ff6b6b; - border: 1px solid white; - border-radius: 50%; - display: block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color:rgba(255, 0, 0, 0.346); - border-color:rgb(255, 6, 230) -} - -.fret:empty { - background-color: #1e1e1e; -} - -.alternatives { - margin-top: 1rem; -} - -.alternatives h3 { - color: #ffffff; - font-size: 1rem; - margin-bottom: 0.5rem; -} - -.alternatives-container { - display: flex; - gap: 2rem; - flex-wrap: wrap; -} - -.alternative-fretboard { - margin-inline: 1.8rem; -} - -.alternative-fretboard .fret { - width: 1.8rem; - height: 1.3rem; -} \ No newline at end of file diff --git a/www/chords.js b/www/chords.js index 89dfc87..4d9312a 100644 --- a/www/chords.js +++ b/www/chords.js @@ -21,11 +21,11 @@ document.addEventListener("DOMContentLoaded", () => { const themeSelect = document.createElement("select"); themeSelect.innerHTML = ` - - - - - + + + + + `; controls.appendChild(themeSelect);