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).
This commit is contained in:
Carlos Galindo 2023-09-08 00:37:10 +02:00
parent e838b066de
commit 03522304fa
15 changed files with 203 additions and 83 deletions

View file

@ -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;
}
}