/* 悬停 Tooltip 与 SVG 零件高亮 */ /* 悬停 Tooltip HUD */ .sheet-tooltip { position: absolute; z-index: 99; background: rgba(15, 17, 21, 0.94); backdrop-filter: blur(10px); border: 1px solid var(--ac); border-radius: 7px; padding: 8px 12px; font-size: 12px; color: var(--tx); box-shadow: 0 10px 28px rgba(0,0,0,.6); pointer-events: none; display: none; max-width: 310px; line-height: 1.5; } .sheet-tooltip.pinned { pointer-events: auto; border-color: #38bdf8; box-shadow: 0 12px 36px rgba(0, 168, 255, 0.35); } .sheet-tooltip .st-title { font-size: 13px; font-weight: bold; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.1); } .sheet-tooltip .st-tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: normal; } .st-tag.pr { background: rgba(61,220,151,.2); color: var(--ok); } .st-tag.ex { background: rgba(255,180,84,.2); color: var(--warn); } .sheet-tooltip .st-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--dim); margin: 2px 0; } .sheet-tooltip .st-row span:last-child { color: var(--tx); text-align: right; } .sheet-tooltip .st-btn { margin-top: 6px; width: 100%; padding: 4px 0; font-size: 11px; background: #1d4ed8; color: #fff; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: background .15s; } .sheet-tooltip .st-btn:hover { background: #2563eb; } /* SVG 交互高亮样式 */ .sheet-part-path { cursor: pointer; transition: stroke .12s, stroke-width .12s, filter .12s; } .sheet-part-path.is-hovered { stroke: #00d2ff !important; stroke-width: 2.8px !important; fill: rgba(0, 210, 255, 0.16) !important; filter: drop-shadow(0 0 5px #00a8ff) !important; } .sheet-balloon { cursor: pointer; transition: transform .15s ease; } .sheet-balloon:hover .balloon-circle, .sheet-balloon.is-hovered .balloon-circle { fill: #0284c7 !important; stroke: #ffffff !important; stroke-width: 2px !important; filter: drop-shadow(0 0 6px rgba(2,132,199,.8)) !important; } .sheet-balloon:hover .balloon-text, .sheet-balloon.is-hovered .balloon-text { fill: #ffffff !important; font-weight: bold !important; } .sheet-leader.is-hovered { stroke: #00d2ff !important; stroke-width: 1.8px !important; } .sheet-legend-row { cursor: pointer; } .sheet-legend-row:hover .legend-row-bg, .sheet-legend-row.is-hovered .legend-row-bg { fill: rgba(2, 132, 199, 0.3) !important; } .sheet-legend-row:hover text, .sheet-legend-row.is-hovered text { fill: #00d2ff !important; font-weight: bold !important; } .joint-geom-part { cursor: pointer; transition: all .15s; } .joint-geom-part:hover, .joint-geom-part.is-hovered { stroke: #00d2ff !important; stroke-width: 2.2px !important; fill: rgba(0, 210, 255, 0.15) !important; }