Rediseño de la interfaz y arreglos menores

- ¡Ahora con tema oscuro! Se activa según el navegador del usuario.
- URL de audios simplificada.
- Nuevos iconos para canciones con acordes/audios.
- Enlaces de la cabecera actualizados.
- Siempre mostramos los ajustes.
- Insertar espacio forzoso para separar algunas palabras que se juntaban.
- Soporte para canciones con dos líneas de acordes (e.g. Engrandece).

res/less/colors.less

@@ -1,12 +1,19 @@
-@nochordscolor: #FBB;
-@nochordscolor-hover: #FAA;
+@background: #FFF;
+@background-dark: darken(@background, 100%);
 @title: #369;
+@title-dark: lighten(@title, 50%);
 @subtitle: #444;
+@subtitle-dark: lighten(@subtitle, 100%);
 @text: #333;
+@text-dark: lighten(@text, 100%);
 @text-hover: #607D8B;
+@text-hover-dark: @text-hover;
 @secondary: #EEE;
+@secondary-dark: #333;
 @secondary-hover: #CCC;
+@secondary-hover-dark: #444;
 @chord-color: darkgreen;
+@chord-color-dark: lightgreen;
 
 @transition: .5s;
-@border-radius: 4px;
+@border-radius: 10px;

res/less/index.less

@@ -7,24 +7,22 @@
         color: inherit;
         text-decoration: none;
         > li {
-            background-color: @secondary;
+            display: flex;
+            gap: 5px;
             margin: .5em;
             padding: .6em;
+            border: 1px solid @text;
             border-radius: @border-radius;
-            .number {
-                font-weight: bolder;
-                color: black;
+            @media (prefers-color-scheme: dark) {
+                border: 1px solid @text-dark;
             }
+            .number { font-weight: bolder; }
+            .name { flex-grow: 99; }
             &:hover {
-                color: @text-hover;
-                background-color: @secondary-hover;
+                background-color: @secondary;
                 transition-duration: @transition;
-            }
-            &.noChords {
-                background-color: @nochordscolor;
-                &:hover {
-                    color: @text-hover;
-                    background-color: @nochordscolor-hover;
+                @media (prefers-color-scheme: dark) {
+                    background-color: @secondary-dark;
                 }
             }
         }
@@ -38,9 +36,18 @@ ul.songs {
         margin: .2em;
     }
 }
-span.noChords {
-    background-color: @nochordscolor;
-    padding: 0.3em 0.4em;
-    border-radius: @border-radius;
-    display: inline-block;
+img.guitar-icon, img.music-icon {
+    width: 1em;
+    padding: 0 0.2em;
 }
+img.guitar-icon {
+    /* Green color filter */
+    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(55deg) brightness(119%) contrast(119%);
+}
+img.music-icon {
+    /* Orange color filter */
+    filter: invert(46%) sepia(100%) saturate(681%) hue-rotate(360deg) brightness(106%) contrast(105%);
+}
+p { img.guitar-icon, img.music-icon {
+        vertical-align: -0.25em;
+}}

res/less/main.less

@@ -6,8 +6,14 @@ h1 {
     width: max-content;
     max-width: 100%;
     text-align: center;
+    @media (prefers-color-scheme: dark) {
+        color: @title-dark;
+    }
     > a, > a:hover, > a:active, > a:visited {
         color: @title;
+        @media (prefers-color-scheme: dark) {
+            color: @title-dark;
+        }
     }
 }
 
@@ -15,6 +21,9 @@ h2, h3 {
     color: @subtitle;
     font-weight: lighter;
     margin-bottom: 0;
+    @media (prefers-color-scheme: dark) {
+        color: @subtitle-dark;
+    }
 }
 
 footer {
@@ -24,8 +33,13 @@ footer {
 body {
     font-family: Helvetica, Arial, sans-serif;
     color: @text;
+    background: @background;
     max-width: 75em;
     margin: 1em;
+    @media (prefers-color-scheme: dark) {
+        color: @text-dark;
+        background: @background-dark;
+    }
     @media (min-width: 75em + 1em) {
         margin: auto;
     }
@@ -43,6 +57,9 @@ nav {
     }
 }
 
+nav a > span {
+    border-width: 4px;
+}
 a {
     text-decoration: none;
     > span {
@@ -50,11 +67,20 @@ a {
         padding: 0.5em;
         margin: 0.2em;
         display: inline-block;
-        background: @secondary;
-        border-radius: @border-radius;
+        border-radius: @border-radius * 5;
+        border: 1px solid @text;
+        @media (prefers-color-scheme: dark) {
+            color: @text-dark;
+            border-color: @text-dark;
+        }
         &:hover {
             background: @secondary-hover;
             transition-duration: @transition;
+            @media (prefers-color-scheme: dark) {
+                background: @secondary-hover-dark;
+            }
         }
+        &#nav-web { border-color: #6ecf00; }
+        &#nav-audios { border-color: orange; }
     }
 }

res/less/song.less

@@ -5,10 +5,6 @@ table.chordedline {
     display: inline-block;
 }
 
-.song div {
-    padding: 0.5em 0;
-}
-
 .chordedline td {
     padding: 0px;
 }
@@ -16,11 +12,21 @@ table.chordedline {
 .chord {
     font-style: italic;
     color: @chord-color;
+    @media (prefers-color-scheme: dark) {
+        color: @chord-color-dark;
+    }
 }
 
-div.chorus {
+.song div {
+    margin: 0.5em 0;
+}
+
+div.chorus, p.chorus {
     font-weight: bold;
-    border-left: black 2px solid;
+    border-left: @text 2px solid;
+    @media (prefers-color-scheme: dark) {
+        border-left: @text-dark 2px solid;
+    }
     padding-left: 0.5em;
     div {
         padding-left: 0.5em;
@@ -37,6 +43,10 @@ div.chorus {
     display: inline-block;
     width: 1em;
     height: 2em;
+    @media (prefers-color-scheme: dark) {
+        /* Black to white filter for svgs */
+        filter: invert(100%);
+    }
 }
 
 .lrep {
@@ -63,10 +73,18 @@ button, select#transposeSelect {
     padding: .4em;
     border-style: none;
     border-radius: @border-radius;
+    color: @text;
     background-color: @secondary;
+    @media (prefers-color-scheme: dark) {
+        color: @text-dark;
+        background-color: @secondary-dark;
+    }
     &:hover {
         background-color: @secondary-hover;
         transition-duration: @transition;
+        @media (prefers-color-scheme: dark) {
+            background-color: @secondary-hover-dark;
+        }
     }
 }
 
@@ -75,4 +93,7 @@ select#transposeSelect {
     -moz-appearance: none;
     font-weight: bold;
     color: black;
+    @media (prefers-color-scheme: dark) {
+        color: @text-dark;
+    }
 }