132 lines
4.3 KiB
CSS
132 lines
4.3 KiB
CSS
/* === 3D STAGE === */
|
|
.stage {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(ellipse at 30% 20%, rgba(0, 120, 212, 0.04) 0%, transparent 60%),
|
|
radial-gradient(ellipse at 70% 80%, rgba(0, 120, 212, 0.03) 0%, transparent 60%),
|
|
#f9fafb;
|
|
}
|
|
|
|
.stage::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.5;
|
|
background-image:
|
|
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#glCanvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: grab;
|
|
z-index: 1;
|
|
touch-action: none;
|
|
}
|
|
#glCanvas:active { cursor: grabbing; }
|
|
|
|
.stage-top, .stage-bottom {
|
|
position: absolute;
|
|
left: 12px; right: 12px;
|
|
z-index: 3;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 8px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.stage-top { top: 10px; }
|
|
.stage-bottom { bottom: 10px; }
|
|
|
|
.model-tag {
|
|
padding: 5px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
color: var(--accent);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.metric {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 3px;
|
|
padding: 5px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
color: var(--text-3);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.metric strong { color: var(--text); font-family: "Cascadia Code", monospace; font-size: 14px; }
|
|
|
|
.view-help {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
color: var(--text-3);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.view-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.view-actions button {
|
|
min-width: 30px;
|
|
height: 28px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(8px);
|
|
color: var(--text-2);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, color 0.15s;
|
|
}
|
|
|
|
.view-actions button:hover { border-color: var(--accent); color: var(--accent); }
|
|
|
|
/* === BUSY === */
|
|
.busy {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 8;
|
|
display: none;
|
|
place-items: center;
|
|
background: rgba(243, 244, 246, 0.7);
|
|
backdrop-filter: blur(4px);
|
|
color: var(--accent);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.busy.show { display: grid; }
|
|
|
|
.busy::before {
|
|
content: '';
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-bottom: 8px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|