Be more precise configuring chordsHEADmain

1 files changed, 26 insertions, 1 deletions

diff --git a/public/main.css b/public/main.css
index 0214f03..de52e76 100644
--- a/public/main.css
+++ b/public/main.css
@@ -3,6 +3,7 @@
 :root {
   --color-header: #333333;
   --color-button: #333333;
+  --color-background: #EEE;
 
   --spacing-mouse: 0.25rem;
   --spacing-cat: 0.5rem;
@@ -100,6 +101,28 @@ header {
   align-items: center;
 }
 
+.g-ChordsTable {
+  border-collapse: collapse;
+}
+
+.g-ChordsTable td:first-child {
+  padding: 0 var(--spacing-horse);
+}
+
+.g-ChordsTable td:nth-child(2) {
+  padding: var(--spacing-cat);
+}
+
+.g-ChordsTable tr:nth-child(even) {
+  background-color: var(--color-background);
+}
+
+.g-ChordsLine {
+  display: flex;
+  gap: var(--spacing-horse);
+  align-items: baseline;
+}
+
 .g-Form label {
   display: flex;
   align-items: baseline;
@@ -108,7 +131,9 @@ header {
 }
 
 .g-ChordLabel {
-  font-family: chords;
+  font-family: monospace;
+  font-weight: bold;
+  padding: var(--spacing-cat);
 }
 
 .g-Form input[type="number"] {