mirror of
https://github.com/harry7557558/spirula-studio.git
synced 2026-10-02 02:44:54 +08:00
86 lines
4.3 KiB
CSS
86 lines
4.3 KiB
CSS
/* Telemetry tool: the pieces the model viewer's theme (style.css) has no
|
|
equivalent for — the viewport/plot split, the file list, and the overlays. */
|
|
|
|
#head-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
|
|
.chip {
|
|
background: var(--input-bg); color: var(--text); border:1px solid var(--panel-border);
|
|
border-radius:5px; padding:4px 9px; font-family:var(--font); font-size:10px; cursor:pointer;
|
|
}
|
|
.chip:hover { border-color: var(--accent); color: var(--text-bright); }
|
|
.chip.on { border-color: var(--accent); color: var(--accent); }
|
|
|
|
#left { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
|
|
#viewport { flex:1; min-height:120px; }
|
|
#splitter { height:5px; background: var(--panel-border); cursor:row-resize; flex:none; }
|
|
#splitter:hover { background: var(--accent); }
|
|
#charts { height:240px; flex:none; min-height:0; display:flex; flex-direction:column; background:#12141b; overflow:hidden; }
|
|
#chart-bar {
|
|
flex:none; display:flex; align-items:center; gap:8px; padding:4px 8px;
|
|
border-bottom:1px solid var(--panel-border); font-size:10px; color:var(--text-dim);
|
|
}
|
|
#chart-bar input[type=range] { width:70px; }
|
|
#chart-bar .hint { margin-left:auto; }
|
|
#play-time { font-variant-numeric: tabular-nums; color: var(--text-bright); min-width:52px; }
|
|
/* min-height:0 or the canvas' own pixel height becomes a flex floor and the pane overflows. */
|
|
#chart-canvas { flex:1; min-height:0; width:100%; display:block; cursor:crosshair; touch-action:none; }
|
|
|
|
#legend {
|
|
position:absolute; left:8px; top:8px; font-size:10px; color: var(--text);
|
|
pointer-events:none; line-height:1.6; max-width:44%;
|
|
background: rgba(13,14,18,0.72); border-radius:5px; padding:5px 8px;
|
|
}
|
|
#legend:empty { display:none; }
|
|
#legend b { color: var(--text-bright); }
|
|
#legend .warn { color:#e0b055; }
|
|
#readout {
|
|
position:absolute; right:8px; top:8px; font-size:10px; color: var(--text);
|
|
pointer-events:none; line-height:1.6; text-align:right;
|
|
background: rgba(13,14,18,0.72); border-radius:5px; padding:5px 8px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
#readout:empty { display:none; }
|
|
#credit {
|
|
position:absolute; left:8px; bottom:6px; font-size:9px; color: var(--text);
|
|
pointer-events:none; background: rgba(13,14,18,0.6); border-radius:4px; padding:2px 5px;
|
|
}
|
|
#credit:empty { display:none; }
|
|
#scalebar {
|
|
position:absolute; right:8px; bottom:6px; font-size:9px; color: var(--text);
|
|
pointer-events:none; text-align:right; background: rgba(13,14,18,0.6);
|
|
border-radius:4px; padding:3px 5px;
|
|
}
|
|
#scalebar .bar { height:3px; border:1px solid #c8cad4; border-top:none; margin:0 0 2px auto; width:80px; }
|
|
#colorbar {
|
|
position:absolute; left:8px; bottom:28px; width:152px; display:none; pointer-events:none;
|
|
background: rgba(13,14,18,0.6); border-radius:4px; padding:4px 6px;
|
|
}
|
|
#cb-canvas { width:140px; height:8px; display:block; border:1px solid #00000060; }
|
|
#cb-labels { display:flex; justify-content:space-between; font-size:9px; color: var(--text-dim); text-shadow:0 1px 3px #000; }
|
|
|
|
#file-list { margin:6px 0 8px; max-height:230px; overflow-y:auto; }
|
|
.file-item {
|
|
display:flex; align-items:center; gap:6px; padding:4px 5px; border-radius:4px;
|
|
cursor:pointer; font-size:10px; border:1px solid transparent;
|
|
}
|
|
.file-item:hover { background: var(--input-bg); }
|
|
.file-item.active { border-color: var(--accent); background: var(--input-bg); }
|
|
.file-item .swatch { width:9px; height:9px; border-radius:2px; flex:none; }
|
|
.file-item .fname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
.file-item .tag { font-size:8px; padding:1px 4px; border-radius:3px; background:#252836; color:var(--text-dim); }
|
|
.file-item .tag.ok { color: var(--ok); }
|
|
.file-item .tag.bad { color: var(--err); }
|
|
.file-item input { accent-color: var(--accent); }
|
|
|
|
.row.check label { display:flex; align-items:center; gap:7px; cursor:pointer; }
|
|
.row.check input { accent-color: var(--accent); }
|
|
.note { font-size:9px; color: var(--text-dim); line-height:1.5; margin-top:6px; }
|
|
input[type=text] {
|
|
width:100%; background: var(--input-bg); color: var(--text); border:1px solid var(--panel-border);
|
|
border-radius:5px; padding:6px 8px; font-family:var(--font); font-size:10px;
|
|
}
|
|
#report {
|
|
font-size:9px; line-height:1.45; color: var(--text-dim); white-space:pre-wrap;
|
|
word-break:break-word; max-height:340px; overflow-y:auto;
|
|
}
|
|
#panel { width:320px; }
|