localeye.cam

← Back

static/map.css

floor_plan version 1.0 · 6 KB

1/* Floor plan (custom module). Colours come from the NVR's theme tokens (light + dark); an area's own colour is --c. */
2.wm-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
3.wm-main{min-width:0}
4.wm-empty{max-width:620px}
5.wm-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
6.wm-toolgroup{display:inline-flex;flex-wrap:wrap;gap:4px}
7.wm-tools .btn.on{border-color:var(--accent);color:var(--accent)}
8.wm-tools label.btn{cursor:pointer}
9.wm-grow{flex:1}
10.wm-stage{position:relative;border:1px solid var(--border);border-radius:10px;background:var(--inset);overflow:hidden}
11.wm-svg{display:block;width:100%;max-height:74vh;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
12.wm-svg.drawing{cursor:crosshair}
13.wm-zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:4px}
14.wm-zoom .btn{min-width:32px;padding:4px 8px}
15.wm-hint{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 9px;border-radius:6px;font-size:12px;
16 background:var(--panel);border:1px solid var(--border2);color:var(--text);pointer-events:none}
17
18/* the map */
19.wm-floor{fill:var(--panel)}
20.wm-grid-line{fill:none;stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}
21.wm-edge{fill:none;stroke:var(--border2);stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}
22.wm-plan{pointer-events:none}
23.wm-area{fill:var(--c);fill-opacity:.16;stroke:var(--c);stroke-width:2;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill-opacity .2s}
24.wm-area.hover{fill-opacity:.3}
25.wm-area.sel{stroke-dasharray:6 4;stroke-width:3;fill-opacity:.28}
26.wm-area.hot{fill-opacity:.42;animation:wmPulse 1.2s ease-in-out infinite}
27.wm-cone{fill:var(--accent);fill-opacity:.08;stroke:var(--accent);stroke-opacity:.35;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
28.wm-cone.hover,.wm-cone.sel{fill-opacity:.18;stroke-opacity:.8}
29.wm-cone.hot{fill-opacity:.3;stroke-opacity:1}
30.wm-cam{fill:var(--panel3);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;cursor:pointer}
31.wm-cam.sel{stroke-width:3.5;fill:var(--accent)}
32.wm-cam.hot{fill:var(--accent)}
33.wm-cam-dir{stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke;pointer-events:none}
34.wm-label{fill:var(--text);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;font-family:var(--sans);font-weight:600;pointer-events:none}
35.wm-cam-label{font-family:var(--mono);font-weight:500}
36.wm-handle{fill:var(--bg);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;cursor:move}
37.wm-handle.aim{fill:var(--accent);cursor:crosshair}
38.wm-handle.first{fill:var(--accent)}
39.wm-aim-line{stroke:var(--accent);stroke-dasharray:4 4;stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}
40.wm-snap{display:inline-flex;align-items:center;gap:5px;font-size:13px;margin-left:6px;cursor:pointer}
41.wm-guide{stroke:var(--accent);stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;pointer-events:none;opacity:.9}
42.wm-handle.edge{fill:var(--accent);fill-opacity:.85;cursor:move}
43.wm-handle.edge.ns{cursor:ns-resize}
44.wm-handle.edge.ew{cursor:ew-resize}
45.wm-draft{fill:var(--accent);fill-opacity:.12;stroke:var(--accent);stroke-dasharray:6 4;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
46@keyframes wmPulse{50%{fill-opacity:.22}}
47@media (prefers-reduced-motion:reduce){.wm-area.hot{animation:none}}
48
49/* the side panel */
50.wm-side h3{margin:0 0 8px;font-size:15px}
51.wm-side h3:not(:first-child){margin-top:16px}
52.wm-list{display:grid;gap:4px}
53.wm-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:1px solid var(--border);border-radius:7px;background:var(--panel2);
54 color:var(--text);text-align:left;cursor:pointer;font:inherit}
55.wm-item:hover{border-color:var(--border2);background:var(--panel3)}
56.wm-item.hot{border-color:var(--accent)}
57.wm-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
58.wm-swatch{width:12px;height:12px;border-radius:3px;flex:none}
59.wm-field{display:grid;gap:4px;margin-bottom:10px;font-size:13px}
60.wm-field input[type=range]{width:100%}
61.wm-field input[type=color]{width:56px;height:30px;padding:2px}
62.wm-val{color:var(--muted);font-size:12px}
63.wm-radio,.wm-check{display:flex;align-items:center;gap:6px;font-size:13px}
64#camPick{display:grid;gap:3px;margin-top:4px;max-height:200px;overflow:auto}
65.wm-note{margin-top:14px}
66
67/* watching an area */
68.wm-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;overflow:auto}
69.wm-modal[hidden]{display:none}
70.wm-modal-box{width:min(1100px,100%)}
71.wm-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
72.wm-modal-head h2{margin:0}
73.wm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
74.wm-tile{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--panel2)}
75.wm-video{position:relative;aspect-ratio:16/9;background:#000}
76.wm-video video{width:100%;height:100%;object-fit:contain;display:block}
77.wm-tile-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:13px}
78.wm-tile-state[hidden]{display:none}
79.wm-tile-foot{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;font-size:13px}
80.wm-tile-foot a{margin-left:8px}
81.wm-attime{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
82
83@media (max-width:900px){
84 .wm-layout{grid-template-columns:1fr}
85 .wm-svg{max-height:60vh}
86}