82 lines
1.5 KiB
CSS
82 lines
1.5 KiB
CSS
.loading-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgb(15 23 42 / 95%);
|
|
backdrop-filter: blur(8px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: var(--z-modal);
|
|
animation: fade-in var(--transition-base);
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.loading-overlay__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-lg);
|
|
padding: var(--spacing-2xl);
|
|
max-width: 500px;
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-overlay__spinner {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.spinner {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 4px solid var(--glass-border);
|
|
border-top-color: var(--color-accent-primary);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loading-overlay__title {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.loading-overlay__subtitle {
|
|
font-size: var(--font-size-lg);
|
|
color: var(--color-text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.loading-overlay__tests {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-xs);
|
|
justify-content: center;
|
|
}
|
|
|
|
.loading-overlay__test {
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
background: var(--glass-bg);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-primary);
|
|
}
|