Code/UI/SplashScreen.razor.scss
SplashScreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// Default black background
background-color: black;
// Background image settings
background-size: cover;
background-position: center;
// Center the content wrapper
display: flex;
justify-content: center;
align-items: center;
// Smooth transition for opacity (2 seconds)
transition: opacity 2s ease-in-out;
opacity: 0; // Invisible by default
&.fade-in {
opacity: 1; // Fades in on start
}
&.fade-out {
opacity: 0; // Fades out when IsFadingOut is true
}
.content {
display: flex;
flex-direction: column; // Stack logo and text vertically
justify-content: center;
align-items: center;
gap: 30px; // Space between the logo and the text block
}
.logo {
// Logo size settings
width: 600px;
height: auto;
object-fit: contain;
}
.text-container {
display: flex;
flex-direction: column; // Stack text lines vertically
align-items: center;
// Common text styling (applies to all lines)
font-family: Poppins, sans-serif;
font-weight: 800;
text-align: center;
letter-spacing: 5px;
// Text shadow for better readability over images
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
label {
margin: 0;
padding: 5px 0; // Small space between individual text lines
}
}
}