maddo/Crusader_Decomp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add overlay support with interactive tooltips and metadata display

Browse source
This commit is contained in:
Marco 2026-03-27 12:01:21 +01:00
commit d8940a1b1d
7 changed files with 659 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

140
map_renderer/src/public/app.css
View file

@ -8,6 +8,11 @@
--muted: #6e5a37;
--accent: #0d6c7d;
--accent-strong: #114f59;
--overlay-editor: #18849a;
--overlay-egg: #c67129;
--overlay-roof: #627894;
--overlay-helper-fill: rgba(77, 169, 196, 0.16);
--overlay-helper-stroke: rgba(108, 201, 228, 0.72);
--viewport: #0e1218;
--tile-border: rgba(255, 255, 255, 0.04);
--shadow: 0 18px 45px rgba(59, 40, 8, 0.16);
@ -268,6 +273,141 @@ select:disabled,
pointer-events: none;
}
.overlay-root {
position: absolute;
inset: 0;
pointer-events: none;
}
.overlay-item {
position: absolute;
pointer-events: auto;
border: 0;
padding: 0;
color: inherit;
font: inherit;
background: none;
cursor: pointer;
}
.overlay-marker {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 999px;
color: white;
font-size: 0.68rem;
font-weight: 800;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
transform: translate(-50%, -100%);
transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.overlay-marker:hover,
.overlay-marker:focus-visible {
transform: translate(-50%, -100%) scale(1.08);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
filter: saturate(1.12);
}
.overlay-marker--editor {
background: linear-gradient(180deg, color-mix(in srgb, var(--overlay-editor) 86%, white 14%) 0%, var(--overlay-editor) 100%);
}
.overlay-marker--egg {
background: linear-gradient(180deg, color-mix(in srgb, var(--overlay-egg) 82%, white 18%) 0%, var(--overlay-egg) 100%);
}
.overlay-marker--roof {
background: linear-gradient(180deg, color-mix(in srgb, var(--overlay-roof) 84%, white 16%) 0%, var(--overlay-roof) 100%);
}
.overlay-helper {
display: flex;
align-items: flex-start;
justify-content: flex-start;
min-width: 14px;
min-height: 14px;
padding: 4px;
border-radius: 8px;
border: 1px solid var(--overlay-helper-stroke);
background: var(--overlay-helper-fill);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
transition: transform 140ms ease, background 140ms ease;
}
.overlay-helper:hover,
.overlay-helper:focus-visible {
transform: scale(1.02);
background: color-mix(in srgb, var(--overlay-helper-fill) 70%, white 30%);
}
.overlay-helper-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(7, 12, 18, 0.68);
color: rgba(255, 255, 255, 0.86);
font-size: 0.68rem;
font-weight: 800;
}
.overlay-tooltip {
position: absolute;
z-index: 6;
max-width: 290px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(8, 12, 18, 0.9);
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(124, 182, 214, 0.28);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
pointer-events: none;
backdrop-filter: blur(14px);
}
.tooltip-eyebrow {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(138, 202, 221, 0.88);
}
.tooltip-title {
margin-top: 4px;
font-size: 0.98rem;
font-weight: 700;
}
.tooltip-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 10px;
margin: 10px 0 0;
font-size: 0.84rem;
}
.tooltip-grid dt {
color: rgba(176, 197, 212, 0.76);
}
.tooltip-grid dd {
margin: 0;
text-align: right;
}
.tooltip-notes {
margin: 10px 0 0;
padding-left: 18px;
color: rgba(214, 227, 237, 0.82);
font-size: 0.8rem;
}
@keyframes spin {
from {
transform: rotate(0deg);