Ivan Fontosh
02d73ddf81
Add trap overlays with session state, material legend editor/panel, and a dedicated scene editor window wired through IPC and project persistence. Co-authored-by: Cursor <cursoragent@cursor.com>
138 lines
2.2 KiB
CSS
138 lines
2.2 KiB
CSS
.legendBlock {
|
|
display: grid;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.legendBlockLarge {
|
|
gap: 12px;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hint {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.map {
|
|
position: relative;
|
|
width: 100%;
|
|
max-height: 280px;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--stroke, #333);
|
|
background: #0a0b0e;
|
|
}
|
|
|
|
.mapLarge {
|
|
max-height: none;
|
|
height: min(48vh, 440px);
|
|
min-height: 260px;
|
|
flex: 0 0 auto;
|
|
touch-action: none;
|
|
cursor: grab;
|
|
}
|
|
|
|
.mapIdle {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.mapEmpty {
|
|
color: var(--text2);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.mapImg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: inherit;
|
|
object-fit: contain;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.marker {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: #1e3a5f;
|
|
border: 2px solid #f5c542;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
display: grid;
|
|
place-items: center;
|
|
cursor: grab;
|
|
user-select: none;
|
|
z-index: 2;
|
|
touch-action: none;
|
|
}
|
|
|
|
.mapHint {
|
|
position: absolute;
|
|
left: 12px;
|
|
bottom: 12px;
|
|
z-index: 3;
|
|
font-size: 12px;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.65);
|
|
color: rgba(255, 255, 255, 0.85);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mapHintZoom {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
z-index: 3;
|
|
font-size: 11px;
|
|
padding: 5px 8px;
|
|
border-radius: 8px;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
color: rgba(255, 255, 255, 0.75);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.itemRow {
|
|
display: grid;
|
|
grid-template-columns: 36px 1fr auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.itemRowActive {
|
|
border-color: color-mix(in srgb, var(--color-accent, #c9a227) 70%, transparent);
|
|
background: color-mix(in srgb, var(--color-accent, #c9a227) 12%, transparent);
|
|
}
|
|
|
|
.num {
|
|
font-weight: 800;
|
|
text-align: center;
|
|
}
|
|
|
|
.itemDrag {
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
font-size: 12px;
|
|
border: none;
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|