mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-13 07:46:10 +00:00
111 lines
2.3 KiB
CSS
111 lines
2.3 KiB
CSS
body {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#root {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.pulse-loader {
|
|
animation: pulse 2.5s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
30% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.loader {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
display: block;
|
|
margin: 15px auto;
|
|
position: relative;
|
|
color: #FFF;
|
|
left: -120px;
|
|
box-sizing: border-box;
|
|
animation: shadowRolling 2s linear infinite;
|
|
}
|
|
|
|
@keyframes shadowRolling {
|
|
0% {
|
|
box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
12% {
|
|
box-shadow: 100px 0 lightgray, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
25% {
|
|
box-shadow: 110px 0 lightgray, 100px 0 lightgray, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
36% {
|
|
box-shadow: 120px 0 lightgray, 110px 0 lightgray, 100px 0 lightgray, 0px 0 rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 130px 0 lightgray, 120px 0 lightgray, 110px 0 lightgray, 100px 0 lightgray;
|
|
}
|
|
|
|
62% {
|
|
box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 lightgray, 120px 0 lightgray, 110px 0 lightgray;
|
|
}
|
|
|
|
75% {
|
|
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 lightgray, 120px 0 lightgray;
|
|
}
|
|
|
|
87% {
|
|
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 lightgray;
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
|
|
}
|
|
}
|
|
|
|
.opacity {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.outer {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* Zentriert die Items horizontal */
|
|
justify-content: center; /* Zentriert die Items vertikal */}
|
|
|
|
.inner {
|
|
height: 96px;
|
|
color: lightgray;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fade-in 1.5s ease-in;
|
|
} |