61 lines
1.3 KiB
CSS
61 lines
1.3 KiB
CSS
#loading-screen {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgb(0, 0, 0);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
cursor: pointer;
|
|
pointer-events: all; /* Ensure the user can click on the loading screen */
|
|
z-index: 9999;
|
|
mix-blend-mode: screen;
|
|
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15);
|
|
animation: flicker 3.0s infinite;
|
|
}
|
|
|
|
#loading-screen::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url('/assets/RpdC.gif') repeat;
|
|
opacity: 0.05;
|
|
mix-blend-mode: screen;
|
|
z-index: -1;
|
|
}
|
|
|
|
#loading-screen::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(255, 255, 255, 0.05) 0px,
|
|
rgba(255, 255, 255, 0.05) 1px,
|
|
transparent 1px,
|
|
transparent 4px
|
|
);
|
|
animation: scanlines 0.1s linear infinite;
|
|
z-index: -2;
|
|
}
|
|
|
|
.loading-text {
|
|
color: var(--primary-color);
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 2rem;
|
|
text-align: center;
|
|
text-shadow: 0 0 15px var(--primary-color), 0 0 30px var(--primary-color);
|
|
animation: pulse 1.5s infinite;
|
|
z-index: 10000;
|
|
cursor: pointer;
|
|
}
|