diff options
Diffstat (limited to 'main.css')
| -rw-r--r-- | main.css | 48 |
1 files changed, 35 insertions, 13 deletions
@@ -1,25 +1,41 @@ +:root { + --document-bg: white; + --fret-hover-color: yellow; + --fret-fg-color-1: white; + --fret-bg-color-1: red; + --fret-fg-color-2: white; + --fret-bg-color-2: green; + --fret-fg-color-3: white; + --fret-bg-color-3: blue; + --fret-muted-fg-color: grey; + --key-picker-interval-fg-color: grey; + --key-picker-interval-fg-color-1: lightgrey; + --key-picker-interval-fg-color-2: lightgrey; + --key-picker-interval-fg-color-3: lightgrey; +} + body { color: black; - background-color: white; + background-color: var(--document-bg); } .hover { - background-color: yellow; + background-color: var(--fret-hover-color); } .click1 { - color: white; - background-color: red; + color: var(--fret-fg-color-1); + background-color: var(--fret-bg-color-1); } .click2 { - color: white; - background-color: green; + color: var(--fret-fg-color-2); + background-color: var(--fret-bg-color-2); } .click3 { - color: white; - background-color: blue; + color: var(--fret-fg-color-3); + background-color: var(--fret-bg-color-3); } #fretboard { @@ -59,7 +75,7 @@ body { } #fretboard .muted { - color: grey; + color: var(--fret-muted-fg-color); } #key-picker .notes { @@ -75,15 +91,21 @@ body { display: grid; grid-row-start: 2; content: counter(notes, numeric); - color: grey; + color: var(--key-picker-interval-fg-color); font-size: small; text-align: center; } -#key-picker .notes li.click1:before, -#key-picker .notes li.click2:before, +#key-picker .notes li.click1:before { + color: var(--key-picker-interval-fg-color-1); +} + +#key-picker .notes li.click2:before { + color: var(--key-picker-interval-fg-color-2); +} + #key-picker .notes li.click3:before { - color: lightgrey; + color: var(--key-picker-interval-fg-color-3); } #key-picker .notes li { |