body, html {
margin: 0;
padding: 0;
height: 100%;
}
/* ---------------------------------------------------- */
/* --- LIGHT MODE (Default Base Styles) --- */
/* These styles apply automatically unless .dark-mode is added */
body {
background: linear-gradient(
79.78deg,
rgba(225, 229, 234, 0.7) -10.35%,
rgba(196, 203, 212, 0.7) 48.37%,
rgba(225, 229, 234, 0.7) 107.08%
);
background-repeat: no-repeat;
background-attachment: fixed;
}
/* Loading text color for Light Mode (Dark text) */
.loading-text {
margin-top: 25px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.1em;
color: #1A1C1E;
}
/* Progress bar track for Light Mode */
#progress-bar-container {
width: 200px;
height: 4px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 2px;
margin-top: 25px;
overflow: hidden;
position: relative;
}
/* Progress bar fill for Light Mode */
#progress-bar {
width: 50%;
height: 100%;
background-color: #1A1C1E;
border-radius: 2px;
position: absolute;
top: 0;
animation: indeterminate-progress 2s linear infinite;
}
/* ---------------------------------------------------- */
/* --- DARK MODE OVERRIDES --- */
/* These only apply if is set */
body.dark-mode {
background: linear-gradient(
to bottom right,
#1149E6 0%,
#0D329D 25%,
#0B216A 50%,
#060719 100%
);
background-repeat: no-repeat;
background-attachment: fixed;
}
body.dark-mode .loading-text {
color: #f0f0f0; /* Light text */
}
body.dark-mode #progress-bar-container {
background-color: rgba(255, 255, 255, 0.2);
}
body.dark-mode #progress-bar {
background-color: #f0f0f0;
}
/* ---------------------------------------------------- */
/* --- GENERAL LAYOUT & ANIMATION --- */
#app-loader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
}
#app-loader img {
width: 120px;
height: 120px;
animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); opacity: 0.8; }
}
@keyframes indeterminate-progress {
0% { left: -50%; }
100% { left: 100%; }
}