07abc03ef4
Replace remaining hard-coded colors across all CSS files with design tokens from tokens.css. Remove duplicate inline positioning from live.html panels (now in layout.css). Add replay session blob fetch for immediate 3D scene state on seek. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
353 lines
7.7 KiB
CSS
353 lines
7.7 KiB
CSS
/* ============================================
|
|
Troubleshooting UI Styles
|
|
============================================ */
|
|
|
|
/* Troubleshoot section inside node panel */
|
|
#troubleshoot-section {
|
|
margin-top: var(--space-3);
|
|
border-top: 1px solid var(--bg-hover);
|
|
padding-top: var(--space-3);
|
|
}
|
|
|
|
/* Offline troubleshooting card */
|
|
.troubleshoot-card {
|
|
background: var(--warn-bg);
|
|
border: 1px solid var(--warn-border);
|
|
border-radius: var(--radius-control);
|
|
padding: 10px;
|
|
margin-bottom: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
animation: troubleshoot-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes troubleshoot-fade-in {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.troubleshoot-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: var(--space-2);
|
|
color: var(--warn);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.troubleshoot-card-icon {
|
|
font-size: var(--text-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.troubleshoot-dismiss {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
font-size: var(--text-base);
|
|
cursor: pointer;
|
|
padding: 0 2px;
|
|
line-height: 1;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.troubleshoot-dismiss:hover {
|
|
color: var(--slate-12);
|
|
}
|
|
|
|
/* Timeline steps */
|
|
.troubleshoot-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.troubleshoot-step {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.troubleshoot-step-num {
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--warn-muted);
|
|
color: var(--warn);
|
|
font-size: var(--text-3xs);
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.troubleshoot-step-text {
|
|
color: var(--text-muted);
|
|
line-height: var(--lh-body);
|
|
}
|
|
|
|
.troubleshoot-step-text strong {
|
|
color: var(--slate-12);
|
|
}
|
|
|
|
/* More options expander */
|
|
.troubleshoot-more {
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.troubleshoot-more summary {
|
|
color: var(--text-muted);
|
|
font-size: var(--text-2xs);
|
|
cursor: pointer;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.troubleshoot-more summary:hover {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.troubleshoot-more[open] .troubleshoot-step {
|
|
animation: troubleshoot-fade-in 0.2s ease-out;
|
|
}
|
|
|
|
/* Reset button inside card */
|
|
.troubleshoot-reset-btn {
|
|
background: var(--alert-bg);
|
|
border: 1px solid var(--alert-border);
|
|
color: var(--alert);
|
|
font-size: var(--text-2xs);
|
|
padding: 2px var(--space-2);
|
|
border-radius: var(--radius-control);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.troubleshoot-reset-btn:hover {
|
|
background: var(--alert-border);
|
|
}
|
|
|
|
/* Quality banner (fixed at top, below status bar) */
|
|
.troubleshoot-quality-banner {
|
|
position: fixed;
|
|
top: 44px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--warn-bg);
|
|
border: 1px solid var(--warn-border);
|
|
border-radius: var(--radius-control);
|
|
padding: var(--space-2) var(--space-4);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
color: var(--warn);
|
|
z-index: 150;
|
|
max-width: 600px;
|
|
animation: troubleshoot-slide-down 0.3s ease-out;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@keyframes troubleshoot-slide-down {
|
|
from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
|
|
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
}
|
|
|
|
.troubleshoot-quality-icon {
|
|
font-size: var(--text-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.troubleshoot-quality-banner .troubleshoot-dismiss {
|
|
color: var(--warn);
|
|
}
|
|
|
|
.troubleshoot-quality-banner .troubleshoot-dismiss:hover {
|
|
color: var(--slate-12);
|
|
}
|
|
|
|
/* Factory reset modal */
|
|
.troubleshoot-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--overlay-strong);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.troubleshoot-modal {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-card);
|
|
padding: var(--space-6) 28px;
|
|
max-width: 480px;
|
|
width: 90%;
|
|
box-shadow: 0 8px 32px var(--shadow-xl);
|
|
}
|
|
|
|
.troubleshoot-modal h3 {
|
|
font-size: var(--text-base);
|
|
color: var(--slate-12);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.troubleshoot-list {
|
|
color: var(--text-muted);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.8;
|
|
padding-left: var(--space-5);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.troubleshoot-list li {
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.troubleshoot-modal-close {
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
/* ============================================
|
|
Tooltip Styles
|
|
============================================ */
|
|
|
|
.spaxel-tooltip {
|
|
position: fixed;
|
|
z-index: 2000;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--blue-border);
|
|
border-radius: var(--radius-control);
|
|
padding: var(--space-2) var(--space-3);
|
|
max-width: 260px;
|
|
box-shadow: 0 4px 16px var(--shadow-lg);
|
|
animation: spaxel-tooltip-appear 0.3s ease-out;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@keyframes spaxel-tooltip-appear {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.spaxel-tooltip-text {
|
|
color: var(--slate-12);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Arrows */
|
|
.spaxel-tooltip-arrow {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.spaxel-tooltip-arrow-top {
|
|
bottom: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 6px solid var(--blue-border);
|
|
}
|
|
|
|
.spaxel-tooltip-arrow-bottom {
|
|
top: -6px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-bottom: 6px solid var(--blue-border);
|
|
}
|
|
|
|
.spaxel-tooltip-arrow-left {
|
|
right: -6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-top: 6px solid transparent;
|
|
border-bottom: 6px solid transparent;
|
|
border-left: 6px solid var(--blue-border);
|
|
}
|
|
|
|
.spaxel-tooltip-arrow-right {
|
|
left: -6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-top: 6px solid transparent;
|
|
border-bottom: 6px solid transparent;
|
|
border-right: 6px solid var(--blue-border);
|
|
}
|
|
|
|
/* Dismiss all button */
|
|
.spaxel-dismiss-all {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--bg-hover);
|
|
border: 1px solid var(--border-strong);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
padding: 6px var(--space-4);
|
|
border-radius: var(--radius-control);
|
|
cursor: pointer;
|
|
z-index: 2001;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
|
|
.spaxel-dismiss-all:hover {
|
|
background: var(--border-strong);
|
|
color: var(--slate-12);
|
|
}
|
|
|
|
/* Safe area support for dismiss button */
|
|
@supports (padding: max(0px)) {
|
|
.spaxel-dismiss-all {
|
|
/* Adjust bottom position to account for safe area */
|
|
bottom: calc(20px + env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Post-Calibration Card (inside wizard)
|
|
============================================ */
|
|
|
|
.post-cal-card {
|
|
text-align: center;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.post-cal-card .wizard-icon-large {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.post-cal-card h3 {
|
|
font-size: var(--text-xl);
|
|
color: var(--slate-12);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.post-cal-summary {
|
|
color: var(--ok) !important;
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.post-cal-expect {
|
|
color: var(--text-muted);
|
|
font-size: var(--text-sm);
|
|
line-height: var(--lh-body);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.post-cal-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|