/**
* Fondo de estrellas en paralaje.
*
* Compartido por el login y la consulta pública de equipos. Sustituye a
* assets/img/backg.gif, que pesaba 27 MB y se descargaba en cada visita:
* esto son tres capas de box-shadow animadas, sin ninguna petición de red.
*
* Las páginas que lo usan deben incluir, justo dentro de :
*
*/
/* Fondo de estrellas en paralaje */
html {
height: 100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
background: transparent !important;
}
/* Estrellas pequeñas */
#stars {
width: 1px;
height: 1px;
background: transparent;
box-shadow:
1234px 567px #FFF, 890px 1234px #FFF, 567px 890px #FFF, 1789px 345px #FFF, 234px 1567px #FFF,
1456px 789px #FFF, 678px 1345px #FFF, 901px 567px #FFF, 1234px 890px #FFF, 456px 1234px #FFF,
789px 345px #FFF, 1567px 678px #FFF, 234px 1890px #FFF, 890px 234px #FFF, 1345px 567px #FFF,
678px 1234px #FFF, 1901px 345px #FFF, 456px 789px #FFF, 1234px 1567px #FFF, 789px 234px #FFF,
345px 1890px #FFF, 1567px 456px #FFF, 234px 789px #FFF, 890px 1345px #FFF, 1234px 678px #FFF,
456px 1901px #FFF, 789px 234px #FFF, 1345px 567px #FFF, 678px 890px #FFF, 1567px 1234px #FFF,
234px 456px #FFF, 890px 789px #FFF, 1234px 345px #FFF, 567px 1567px #FFF, 1890px 234px #FFF,
345px 678px #FFF, 789px 1234px #FFF, 1456px 567px #FFF, 234px 890px #FFF, 678px 1345px #FFF,
1567px 789px #FFF, 890px 234px #FFF, 1234px 456px #FFF, 345px 1789px #FFF, 567px 234px #FFF,
1890px 678px #FFF, 234px 1234px #FFF, 789px 456px #FFF, 1345px 567px #FFF, 456px 890px #FFF,
678px 1567px #FFF, 1234px 234px #FFF, 890px 789px #FFF, 345px 1456px #FFF, 1567px 234px #FFF,
789px 678px #FFF, 234px 1234px #FFF, 456px 890px #FFF, 1345px 567px #FFF, 678px 1789px #FFF,
890px 234px #FFF, 1234px 456px #FFF, 567px 789px #FFF, 1890px 345px #FFF, 234px 1567px #FFF,
678px 890px #FFF, 1234px 234px #FFF, 789px 456px #FFF, 345px 1678px #FFF, 1567px 890px #FFF,
234px 1234px #FFF, 456px 567px #FFF, 890px 789px #FFF, 1345px 234px #FFF, 678px 1456px #FFF,
1789px 567px #FFF, 234px 890px #FFF, 456px 1234px #FFF, 789px 345px #FFF, 1567px 678px #FFF,
890px 1901px #FFF, 234px 456px #FFF, 1234px 789px #FFF, 567px 234px #FFF, 1345px 890px #FFF,
678px 1567px #FFF, 234px 1234px #FFF, 789px 456px #FFF, 1890px 678px #FFF, 345px 1234px #FFF,
567px 789px #FFF, 1234px 234px #FFF, 456px 890px #FFF, 678px 1345px #FFF, 1567px 789px #FFF,
234px 1456px #FFF, 890px 567px #FFF, 1234px 678px #FFF, 345px 1890px #FFF, 789px 234px #FFF;
animation: animStar 50s linear infinite;
position: fixed;
top: 0;
left: 0;
z-index: -3;
}
#stars:after {
content: " ";
position: absolute;
top: 2000px;
width: 1px;
height: 1px;
background: transparent;
box-shadow:
1234px 567px #FFF, 890px 1234px #FFF, 567px 890px #FFF, 1789px 345px #FFF, 234px 1567px #FFF,
1456px 789px #FFF, 678px 1345px #FFF, 901px 567px #FFF, 1234px 890px #FFF, 456px 1234px #FFF,
789px 345px #FFF, 1567px 678px #FFF, 234px 1890px #FFF, 890px 234px #FFF, 1345px 567px #FFF,
678px 1234px #FFF, 1901px 345px #FFF, 456px 789px #FFF, 1234px 1567px #FFF, 789px 234px #FFF,
345px 1890px #FFF, 1567px 456px #FFF, 234px 789px #FFF, 890px 1345px #FFF, 1234px 678px #FFF,
456px 1901px #FFF, 789px 234px #FFF, 1345px 567px #FFF, 678px 890px #FFF, 1567px 1234px #FFF,
234px 456px #FFF, 890px 789px #FFF, 1234px 345px #FFF, 567px 1567px #FFF, 1890px 234px #FFF,
345px 678px #FFF, 789px 1234px #FFF, 1456px 567px #FFF, 234px 890px #FFF, 678px 1345px #FFF,
1567px 789px #FFF, 890px 234px #FFF, 1234px 456px #FFF, 345px 1789px #FFF, 567px 234px #FFF,
1890px 678px #FFF, 234px 1234px #FFF, 789px 456px #FFF, 1345px 567px #FFF, 456px 890px #FFF;
}
/* Estrellas medianas */
#stars2 {
width: 2px;
height: 2px;
background: transparent;
box-shadow:
456px 789px #FFF, 1234px 567px #FFF, 890px 1345px #FFF, 234px 678px #FFF, 1567px 890px #FFF,
678px 234px #FFF, 1234px 1456px #FFF, 567px 789px #FFF, 890px 345px #FFF, 1678px 567px #FFF,
234px 1234px #FFF, 789px 890px #FFF, 1345px 234px #FFF, 456px 1567px #FFF, 678px 789px #FFF,
1234px 345px #FFF, 890px 1678px #FFF, 567px 234px #FFF, 1456px 789px #FFF, 234px 890px #FFF,
789px 1234px #FFF, 1567px 456px #FFF, 345px 678px #FFF, 890px 1345px #FFF, 1234px 567px #FFF,
456px 789px #FFF, 678px 1890px #FFF, 1345px 234px #FFF, 567px 890px #FFF, 1234px 678px #FFF,
789px 345px #FFF, 234px 1567px #FFF, 890px 789px #FFF, 1456px 234px #FFF, 678px 1345px #FFF,
567px 890px #FFF, 1234px 456px #FFF, 345px 789px #FFF, 1678px 567px #FFF, 234px 1234px #FFF,
890px 678px #FFF, 1345px 345px #FFF, 456px 1567px #FFF, 789px 234px #FFF, 1234px 890px #FFF,
567px 1456px #FFF, 678px 789px #FFF, 1890px 234px #FFF, 345px 567px #FFF, 1234px 678px #FFF;
animation: animStar 100s linear infinite;
position: fixed;
top: 0;
left: 0;
z-index: -2;
}
#stars2:after {
content: " ";
position: absolute;
top: 2000px;
width: 2px;
height: 2px;
background: transparent;
box-shadow:
456px 789px #FFF, 1234px 567px #FFF, 890px 1345px #FFF, 234px 678px #FFF, 1567px 890px #FFF,
678px 234px #FFF, 1234px 1456px #FFF, 567px 789px #FFF, 890px 345px #FFF, 1678px 567px #FFF,
234px 1234px #FFF, 789px 890px #FFF, 1345px 234px #FFF, 456px 1567px #FFF, 678px 789px #FFF,
1234px 345px #FFF, 890px 1678px #FFF, 567px 234px #FFF, 1456px 789px #FFF, 234px 890px #FFF,
789px 1234px #FFF, 1567px 456px #FFF, 345px 678px #FFF, 890px 1345px #FFF, 1234px 567px #FFF;
}
/* Estrellas grandes */
#stars3 {
width: 3px;
height: 3px;
background: transparent;
box-shadow:
789px 1234px #FFF, 456px 567px #FFF, 1345px 890px #FFF, 234px 1456px #FFF, 678px 789px #FFF,
1567px 234px #FFF, 890px 1234px #FFF, 345px 678px #FFF, 1234px 1567px #FFF, 567px 890px #FFF,
789px 234px #FFF, 1456px 678px #FFF, 234px 1345px #FFF, 890px 567px #FFF, 1234px 789px #FFF,
456px 1890px #FFF, 678px 234px #FFF, 1567px 890px #FFF, 345px 1234px #FFF, 789px 456px #FFF,
1234px 678px #FFF, 567px 1345px #FFF, 890px 234px #FFF, 1456px 789px #FFF, 234px 1567px #FFF,
678px 890px #FFF, 1234px 345px #FFF, 456px 1678px #FFF, 789px 567px #FFF, 1345px 234px #FFF,
567px 890px #FFF, 1234px 1456px #FFF, 234px 678px #FFF, 890px 1234px #FFF, 1567px 345px #FFF,
456px 789px #FFF, 678px 1890px #FFF, 1234px 567px #FFF, 345px 1234px #FFF, 789px 890px #FFF,
1456px 234px #FFF, 567px 1345px #FFF, 890px 678px #FFF, 1234px 1567px #FFF, 234px 789px #FFF,
678px 345px #FFF, 1890px 567px #FFF, 456px 1234px #FFF, 1234px 678px #FFF, 789px 890px #FFF;
animation: animStar 150s linear infinite;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
#stars3:after {
content: " ";
position: absolute;
top: 2000px;
width: 3px;
height: 3px;
background: transparent;
box-shadow:
789px 1234px #FFF, 456px 567px #FFF, 1345px 890px #FFF, 234px 1456px #FFF, 678px 789px #FFF,
1567px 234px #FFF, 890px 1234px #FFF, 345px 678px #FFF, 1234px 1567px #FFF, 567px 890px #FFF,
789px 234px #FFF, 1456px 678px #FFF, 234px 1345px #FFF, 890px 567px #FFF, 1234px 789px #FFF,
456px 1890px #FFF, 678px 234px #FFF, 1567px 890px #FFF, 345px 1234px #FFF, 789px 456px #FFF,
1234px 678px #FFF, 567px 1345px #FFF, 890px 234px #FFF, 1456px 789px #FFF, 234px 1567px #FFF;
}
@keyframes animStar {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}