65 lines
1.7 KiB
SCSS
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;
|
|
}
|
|
}
|