embed history list, use custom elements for css

1 files changed, 32 insertions, 19 deletions

diff --git a/main.css b/main.css
index 7c074d0..a2b4deb 100644
--- a/main.css
+++ b/main.css
@@ -38,47 +38,52 @@ body {
     background-color: var(--fret-bg-color-3);
 }
 
-#fretboard {
+x-fretboard {
+    display: block;
     float: left;
     padding-right: 1em;
     margin-right: 1em;
 }
 
-#fretboard table {
+x-fretboard table {
     border-collapse: collapse;
 }
 
-#fretboard thead {
+x-fretboard thead {
     text-align: center;
 }
-#fretboard thead .fret3,
-#fretboard thead .fret5,
-#fretboard thead .fret7 {
+x-fretboard thead .fret3,
+x-fretboard thead .fret5,
+x-fretboard thead .fret7 {
     font-weight: bold;
 }
 
-#fretboard tbody .open {
+x-fretboard tbody .open {
     font-weight: bold;
 }
 
-#fretboard td:not(:last-child) {
+x-fretboard td:not(:last-child) {
     border-right: 1px solid black;
 }
 
-#fretboard tbody tr {
+x-fretboard tbody tr {
     border-top: 1px solid black;
 }
 
-#fretboard tbody .selected {
+x-fretboard tbody .selected {
     font-style: italic;
     text-align: center;
 }
 
-#fretboard .muted {
+x-fretboard .muted {
     color: var(--fret-muted-fg-color);
 }
 
-#key-picker .notes {
+x-key-picker {
+    display: block;
+}
+
+x-key-picker .notes {
     padding-left: 0;
     list-style-position: outside;
     display: grid;
@@ -87,7 +92,7 @@ body {
     counter-reset: notes;
 }
 
-#key-picker .notes li:before {
+x-key-picker .notes li:before {
     display: grid;
     grid-row-start: 2;
     content: counter(notes, numeric);
@@ -96,19 +101,19 @@ body {
     text-align: center;
 }
 
-#key-picker .notes li.click1:before {
+x-key-picker .notes li.click1:before {
     color: var(--key-picker-interval-fg-color-1);
 }
 
-#key-picker .notes li.click2:before {
+x-key-picker .notes li.click2:before {
     color: var(--key-picker-interval-fg-color-2);
 }
 
-#key-picker .notes li.click3:before {
+x-key-picker .notes li.click3:before {
     color: var(--key-picker-interval-fg-color-3);
 }
 
-#key-picker .notes li {
+x-key-picker .notes li {
     display: grid;
     grid-row-start: 1;
     counter-increment: notes;
@@ -116,13 +121,21 @@ body {
     cursor: pointer;
 }
 
-#key-picker .chords {
+x-key-picker .chords {
     display: grid;
     grid-template-rows: 1;
     grid-template-columns: 3em 3em 3em 3em 3em 3em 3em 3em;
     padding-left: 0;
 }
 
-#key-picker .chords li {
+x-key-picker .chords li {
     display: grid;
 }
+
+x-chords-history {
+    display: block;
+}
+
+x-chords-history:state(fresh) {
+    background-color: yellow;
+}