2 files changed, 43 insertions, 29 deletions

diff --git a/index.html b/index.html
index edf0061..623c5cf 100644
--- a/index.html
+++ b/index.html
@@ -152,16 +152,17 @@
       </form>
     </x-key-picker>
 
-    <x-chords-history></x-chords-history>
-    <form id='history'>
-      <fieldset>
-        <legend>history</legend>
-        <ol>
-          <li>GCEGCE</li>
-          <li>EBEGBE</li>
-        </ol>
-      </fieldset>
-    </form>
+    <x-chords-history>
+      <form id='history'>
+        <fieldset>
+          <legend>history</legend>
+          <ol>
+            <li>GCEGCE</li>
+            <li>EBEGBE</li>
+          </ol>
+        </fieldset>
+      </form>
+    </x-chords-history>
 
     <hr>
 
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;
+}