Add loading overlay styles for runner canvas

This commit is contained in:
2026-04-11 04:17:40 +02:00
parent 40824c6078
commit 9b1f135399

View File

@@ -1159,6 +1159,78 @@ button:disabled {
text-transform: uppercase;
}
.runner-canvas__loading-overlay {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 1;
visibility: visible;
transition:
opacity 240ms ease,
visibility 240ms ease;
pointer-events: auto;
}
.runner-canvas__loading-overlay--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.runner-canvas__loading-card {
width: min(480px, 100%);
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 22px;
color: #f6efe5;
background: rgba(8, 10, 14, 0.68);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 18px;
box-shadow: 0 28px 52px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(14px);
}
.runner-canvas__loading-badge {
color: var(--color-accent-strong);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.runner-canvas__loading-scene-name {
font-size: 1.3rem;
font-weight: 700;
line-height: 1.2;
}
.runner-canvas__loading-headline {
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
}
.runner-canvas__loading-description {
color: rgba(246, 239, 229, 0.78);
font-size: 0.92rem;
line-height: 1.5;
}
.runner-canvas__loading-error {
padding: 10px 12px;
color: #ffd9cf;
background: rgba(110, 18, 6, 0.34);
border: 1px solid rgba(255, 170, 149, 0.18);
border-radius: 12px;
font-size: 0.85rem;
line-height: 1.45;
}
.runner-canvas__crosshair {
position: absolute;
top: 50%;