mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2024-12-22 16:53:34 +01:00
Carlos Galindo
03522304fa
- ¡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).
99 lines
1.8 KiB
Text
99 lines
1.8 KiB
Text
@import "colors.less";
|
|
|
|
table.chordedline {
|
|
border-spacing: 0px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.chordedline td {
|
|
padding: 0px;
|
|
}
|
|
|
|
.chord {
|
|
font-style: italic;
|
|
color: @chord-color;
|
|
@media (prefers-color-scheme: dark) {
|
|
color: @chord-color-dark;
|
|
}
|
|
}
|
|
|
|
.song div {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
div.chorus, p.chorus {
|
|
font-weight: bold;
|
|
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;
|
|
}
|
|
table {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
.rrep {
|
|
background-image: url(repeat-sign.svg);
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 2em;
|
|
@media (prefers-color-scheme: dark) {
|
|
/* Black to white filter for svgs */
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
.lrep {
|
|
-moz-transform: scaleX(-1);
|
|
-o-transform: scaleX(-1);
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
filter: FlipV;
|
|
-ms-filter: "FlipV";
|
|
.rrep();
|
|
}
|
|
|
|
.rep {
|
|
font-style: italic;
|
|
}
|
|
|
|
.echo {
|
|
font-style: italic;
|
|
}
|
|
|
|
button, select#transposeSelect {
|
|
min-width: 2em;
|
|
min-height: 2em;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
select#transposeSelect {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
font-weight: bold;
|
|
color: black;
|
|
@media (prefers-color-scheme: dark) {
|
|
color: @text-dark;
|
|
}
|
|
}
|