57 lines
1.2 KiB
CSS
57 lines
1.2 KiB
CSS
/* floorplan-3d styling. Dark, because an occupied room is drawn LIGHT — the contrast
|
|
* between a lit room and its surroundings is the entire signal, and it only works
|
|
* against a dark stage. */
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
background: #0a0510;
|
|
color: #eadcff;
|
|
font-family: system-ui, sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#bar {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 14px;
|
|
padding: 12px 18px;
|
|
border-bottom: 1px solid rgba(200, 120, 255, 0.2);
|
|
}
|
|
#bar h1 { margin: 0; font-size: 18px; }
|
|
.muted { color: #a98fc4; font-size: 14px; margin-left: auto; }
|
|
|
|
#levels { display: flex; gap: 6px; }
|
|
#levels button {
|
|
min-height: 32px;
|
|
padding: 2px 12px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(200, 120, 255, 0.24);
|
|
background: transparent;
|
|
color: #a98fc4;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
#levels button.active { background: rgba(200, 120, 255, 0.18); color: #eadcff; }
|
|
|
|
#plan {
|
|
display: block;
|
|
width: 100%;
|
|
height: calc(100% - 54px);
|
|
touch-action: none; /* the canvas owns drag-to-orbit */
|
|
cursor: grab;
|
|
}
|
|
#plan:active { cursor: grabbing; }
|
|
|
|
.error {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
color: #ff8080;
|
|
font-size: 14px;
|
|
}
|