Improve SCUM map playback and vehicle markers

This commit is contained in:
npc0-hue
2026-09-18 15:53:32 +08:00
parent 4009b7260e
commit 156392df1e
7 changed files with 432 additions and 55 deletions
+11
View File
@@ -786,6 +786,17 @@ to{transform:translate(-50%,-50%) rotate(calc(var(--construct-drift) + 360deg))}
.map-track-endpoint.map-layer-vehicles{border-color:var(--gold)}
.map-ride-marker{position:absolute;z-index:4;display:grid;place-items:center;width:22px;height:22px;border:1px solid color-mix(in srgb,var(--gold) 70%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 76%,transparent);color:var(--gold);font:800 9px/1 var(--font-mono);transform:translate(-50%,-50%) scale(var(--map-inverse,1));pointer-events:none}
.map-ride-marker img{width:100%;height:100%;object-fit:contain}
.map-track-live{position:absolute;z-index:5;display:flex;align-items:center;gap:4px;transform:translate(-50%,-50%) scale(var(--map-inverse,1));pointer-events:none}
.map-track-live-dot{width:11px;height:11px;border:2px solid var(--surface-solid);border-radius:999px;background:var(--track-color,var(--gold));box-shadow:0 0 0 2px color-mix(in srgb,var(--track-color,var(--gold)) 42%,transparent)}
.map-track-live.is-playing .map-track-live-dot{width:16px;height:16px}
.map-track-live-icon{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--track-color,var(--gold)) 70%,transparent))}
.map-track-live.is-playing .map-track-live-icon{width:27px;height:27px}
.map-track-live-label{max-width:104px;overflow:hidden;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--surface-solid) 82%,transparent);color:var(--track-color,var(--gold));font-size:10px;white-space:nowrap;text-overflow:ellipsis}
.map-hover-card{position:absolute;z-index:9;display:grid;gap:3px;min-width:168px;max-width:262px;padding:7px 9px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--surface-solid) 94%,transparent);box-shadow:0 10px 26px color-mix(in srgb,#000 46%,transparent);transform:translate(-50%,calc(-100% - 12px)) scale(var(--map-inverse,1));transform-origin:50% 100%;pointer-events:none}
.map-hover-title{color:var(--ink);font-size:11px}
.map-hover-row{display:grid;grid-template-columns:56px 1fr;gap:6px;align-items:baseline}
.map-hover-row small{color:var(--ink-faint);font-size:10px}
.map-hover-row b{color:var(--ink-soft);font-size:11px;font-weight:600;word-break:break-all}
.map-track-swatch{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:999px;vertical-align:middle}
.map-playback-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.map-playback-bar .page-status{margin:0}