wikijs-fork/client/scss/pages/_error.scss
2018-05-28 14:46:55 -04:00

65 lines
1.7 KiB
SCSS

.app-error {
background: linear-gradient(to bottom, mc('grey', '900') 0%, mc('grey', '800') 100%);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: mc('grey', '50');
img {
width: 250px;
filter: grayscale(50%) brightness(120%);
animation: errorlogo 5s linear infinite;
margin-bottom: 3rem;
@include until($tablet) {
width: 200px;
}
}
@keyframes errorlogo {
0% {
filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
}
10% {
filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(100%);
}
15% {
filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(0%);
}
30% {
filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
}
32% {
filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(2700deg) invert(100%);
}
34% {
filter: blur(0) grayscale(100%) brightness(50%) hue-rotate(110deg);
}
50% {
filter: blur(0) grayscale(100%) brightness(200%) hue-rotate(110deg) sepia(0%);
}
55% {
filter: blur(0) grayscale(100%) brightness(100%) hue-rotate(110deg) sepia(100%);
}
60% {
filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) sepia(0%);
}
90% {
filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg);
}
95% {
filter: blur(5px) grayscale(50%) brightness(200%) hue-rotate(720deg);
}
100% {
filter: blur(0) grayscale(50%) brightness(200%) hue-rotate(110deg) invert(100%);
}
}
code {
color: mc('grey', '500');
font-size: .8rem;
}
}