mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2025-04-27 15:46:18 +02:00
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:
parent
e838b066de
commit
03522304fa
15 changed files with 203 additions and 83 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue