8 lines
9.7 KiB
CSS
8 lines
9.7 KiB
CSS
:root{color-scheme:light;--surface-canvas:#edf2f8;--surface-raised:#fff;--surface-subtle:#f6f8fc;--text-primary:#243248;--text-secondary:#526379;--text-muted:#64748b;--border-default:#dce4ee;--border-control:#8090a6;--accent:#315fcc;--accent-subtle:#edf3ff;--success:#23786e;--warning:#966629;--font-family-ui:"Inter Variable","Inter","Microsoft YaHei UI","PingFang SC","Noto Sans SC",sans-serif;--radius-control:10px;--radius-card:14px}
|
|
[data-theme=dark]{color-scheme:dark;--surface-canvas:#141e2e;--surface-raised:#1c293c;--surface-subtle:#223147;--text-primary:#e6edf8;--text-secondary:#b2c1d5;--text-muted:#9aabc3;--border-default:#384a63;--border-control:#8194af;--accent:#94b3ff;--accent-subtle:#283e60;--success:#70cbb9;--warning:#e7b875}
|
|
*{box-sizing:border-box}body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font:13px/1.6 var(--font-family-ui)}button,input{font:inherit}button{cursor:pointer;color:inherit;background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-control);padding:8px 12px}button:hover{border-color:var(--accent);background:var(--accent-subtle)}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}h1,h2,p{margin:0}h1{font-size:24px;font-weight:650;margin:4px 0}h2{font-size:14px;font-weight:650}.muted,small{color:var(--text-muted)}.appbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:var(--surface-subtle);border-bottom:1px solid var(--border-default)}.brand,.top-actions{display:flex;gap:16px;align-items:center}.brand{font-weight:600}.brandmark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--surface-raised);font-size:18px}.separator{color:var(--border-control);font-weight:400}.badge{font-size:11px;color:var(--text-secondary);background:var(--surface-subtle);border:1px solid var(--border-default);padding:4px 8px;border-radius:6px}main{padding:24px 32px;max-width:1800px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--text-muted);font-weight:600}.page-heading p,.insights p{color:var(--text-secondary)}.scope{text-align:right;color:var(--text-secondary)}.scope span{font-size:11px;color:var(--text-muted)}.workspace{display:grid;grid-template-columns:216px minmax(0,1fr) 300px;border:1px solid var(--border-default);border-radius:var(--radius-card);overflow:hidden;background:var(--surface-raised)}.timelines,.inspector{padding:24px 16px}.timelines{background:var(--surface-subtle);border-right:1px solid var(--border-default)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-heading>span{color:var(--text-muted)}.timelines>.muted{font-size:11px;margin-bottom:24px}.timeline{width:100%;text-align:left;padding:16px 12px;margin-bottom:12px;background:transparent;border-color:transparent;display:block}.timeline[aria-pressed=true]{background:var(--accent-subtle);border-color:var(--accent)}.timeline strong{display:block;font-weight:600;margin:8px 0}.timeline small{display:block;font-size:11px}.timeline-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-muted)}.timeline-color{width:20px;height:4px;background:var(--story-color);border-radius:4px}.sidebar-note{border-top:1px solid var(--border-default);padding:24px 8px 0;margin-top:24px}.sidebar-note p{margin-top:12px;font-size:12px}.graph-section{min-width:0}.graph-toolbar{height:60px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border-default)}#node-count{font-size:11px;margin-left:12px}.check{display:flex;align-items:center;gap:8px;font-size:11px;white-space:nowrap}input{accent-color:var(--accent)}.canvas{position:relative;background-image:radial-gradient(var(--border-default) .8px,transparent .8px);background-size:20px 20px}svg{display:block;width:100%;min-height:370px;max-height:570px}.canvas-caption{position:absolute;bottom:12px;left:24px;font-size:11px;color:var(--text-muted);pointer-events:none}.live-dot{display:inline-block;width:6px;height:6px;background:var(--success);border-radius:50%;margin-right:8px}.graph-legend{display:flex;align-items:center;gap:16px;padding:12px 24px;font-size:11px;color:var(--text-secondary);border-top:1px solid var(--border-default);flex-wrap:wrap}.graph-legend>span{display:flex;align-items:center;gap:8px}.dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}.line{width:20px;border-top:1px solid var(--text-muted)}.dashed{border-top-style:dashed}.graph-legend button{margin-left:auto;padding:4px 8px;font-size:11px}.playback{padding:16px 24px;background:var(--surface-subtle);border-top:1px solid var(--border-default)}.playback-heading,.range-labels{display:flex;justify-content:space-between;gap:8px}.playback-heading output,.range-labels{font-size:11px;color:var(--text-secondary)}#stage{width:100%;margin:16px 0 8px}.inspector{border-left:1px solid var(--border-default)}.detail-kicker{font-size:11px;color:var(--accent);margin-top:24px}.detail-title{font-size:20px;line-height:1.5;margin:8px 0 16px}.detail-copy{color:var(--text-secondary);line-height:1.9;font-size:13px}.detail-block{margin-top:24px;padding-top:16px;border-top:1px solid var(--border-default)}.detail-block h3{font-size:12px;margin:0 0 12px}.relation-link{width:100%;text-align:left;display:block;margin-top:8px;font-size:12px}.relation-link small{display:block;margin-top:4px;font-size:11px}.source{margin:12px 0;border-left:2px solid var(--border-default);padding-left:12px}.source summary{cursor:pointer;color:var(--accent);font-size:12px}.source p{font-size:12px;color:var(--text-secondary);padding-top:8px;line-height:1.8}.source small{display:block;margin-top:8px}.insights{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0}.insights h2{font-size:18px;margin:4px 0}.insights p{font-size:12px}.insight-card{display:flex;gap:24px;align-items:center;padding:16px 24px;text-align:left}.insight-card strong,.insight-card small{display:block}.insight-card small{margin-top:4px;font-size:11px}.insight-card>span:last-child{color:var(--accent);font-size:12px}.insight-icon{font-size:28px;color:var(--accent)}footer{font-size:11px;color:var(--text-muted);padding-bottom:8px}.orbit{fill:var(--surface-subtle);fill-opacity:.75;stroke:var(--story-color);stroke-opacity:.25;stroke-width:1.2}.orbit-inner{fill:none;stroke:var(--story-color);stroke-opacity:.1;stroke-dasharray:3 6}.orbit-label{font-size:16px;fill:var(--text-primary);font-weight:600}.orbit-caption{font-size:11px;fill:var(--text-muted)}.story-path{fill:none;stroke:var(--story-color);stroke-opacity:.45;stroke-width:1.5}.cross-path{fill:none;stroke:var(--text-muted);stroke-width:1.5;stroke-dasharray:5 6;opacity:.65}.node{cursor:pointer}.node circle.core{fill:var(--story-color);stroke:var(--surface-raised);stroke-width:3}.node .halo{fill:var(--story-color);opacity:.12}.node.selected .halo{opacity:.25;stroke:var(--story-color);stroke-width:1}.node text{fill:var(--text-secondary);font-size:12px;paint-order:stroke;stroke:var(--surface-raised);stroke-width:4px;stroke-linejoin:round}.node.selected text{fill:var(--accent);font-weight:600}.node:focus{outline:none}.node:focus .halo{stroke:var(--accent);stroke-width:3}.dim{opacity:.18}.bridge-label{font-size:11px;fill:var(--text-secondary);paint-order:stroke;stroke:var(--surface-raised);stroke-width:6px}
|
|
.graph-toolbar{height:auto;min-height:60px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.view-picker{display:flex;align-items:center;gap:8px;font-size:11px}.view-picker select{font:inherit;color:var(--text-primary);background:var(--surface-raised);border:1px solid var(--border-control);border-radius:var(--radius-control);padding:8px;max-width:100%}.time-boundary{fill:var(--surface-subtle);fill-opacity:.5;stroke:var(--border-default)}.time-ring{fill:none;stroke:var(--accent);stroke-width:2}.time-point circle{fill:var(--accent);stroke:var(--surface-raised);stroke-width:3}.time-point text{fill:var(--text-primary);font-size:13px;paint-order:stroke;stroke:var(--surface-raised);stroke-width:5px}.time-link{fill:none;stroke:var(--border-control);stroke-width:1;opacity:.3}.time-link.active{stroke:var(--accent);stroke-width:2;opacity:1}.time-link.dim{opacity:.08}
|
|
@media(min-width:1550px){.workspace{grid-template-columns:240px minmax(0,1fr) 340px}.inspector{padding:24px}}
|
|
@media(max-width:1100px){main{padding:24px}.workspace{grid-template-columns:184px minmax(0,1fr)}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--border-default)}#detail{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.detail-block{margin-top:16px}.detail-intro{grid-row:span 2}.insights{align-items:flex-start}.insight-card{gap:12px;padding:16px}.canvas svg{max-height:520px}}
|
|
@media(max-width:650px){.appbar{padding:0 16px}.top-actions{gap:8px}.top-actions .badge{display:none}main{padding:16px}.page-heading{align-items:flex-start;gap:16px}.scope{font-size:11px;max-width:140px}.page-heading p{font-size:12px}.workspace{display:block}.timelines{padding:16px;border-right:0;border-bottom:1px solid var(--border-default)}.timelines>.muted,.sidebar-note{display:none}#timeline-list{display:flex;gap:8px}.timeline{margin:0;padding:8px;flex:1;min-width:0}.timeline strong{font-size:11px}.timeline small,.timeline-top span:last-child{display:none}.graph-toolbar{padding:0 16px}#node-count{display:none}svg{min-height:300px}.canvas-caption{left:16px;font-size:10px}.graph-legend{gap:12px;padding:12px 16px}.playback{padding:16px}.inspector{padding:16px}#detail{display:block}.insights{display:block}.insight-card{width:100%;margin-top:16px}.insight-card>span:last-child{margin-left:auto;white-space:nowrap}.insights h2{font-size:16px}}
|