wikijs-fork/client/scss/pages/_error.scss

78 lines
1.8 KiB
SCSS
Raw Normal View History

2018-05-28 18:46:55 +00:00
.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');
font-family: Roboto, Arial, sans-serif;
2018-05-28 18:46:55 +00:00
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%);
}
}
> strong {
font-size: 1.5rem;
}
> span {
margin-top: 1rem;
}
> pre {
margin-top: 2rem;
code {
color: mc('grey', '500');
font-size: .8rem;
}
2018-05-28 18:46:55 +00:00
}
}