mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2024-12-22 08:43:33 +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).
86 lines
1.8 KiB
Text
86 lines
1.8 KiB
Text
@import "colors";
|
|
|
|
h1 {
|
|
color: @title;
|
|
margin-inline: auto;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
h2, h3 {
|
|
color: @subtitle;
|
|
font-weight: lighter;
|
|
margin-bottom: 0;
|
|
@media (prefers-color-scheme: dark) {
|
|
color: @subtitle-dark;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
margin-inline: auto;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
> ul {
|
|
padding-inline-start: 0px;
|
|
> li {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
nav a > span {
|
|
border-width: 4px;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
> span {
|
|
color: @text;
|
|
padding: 0.5em;
|
|
margin: 0.2em;
|
|
display: inline-block;
|
|
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; }
|
|
}
|
|
}
|