@visns-studio/visns-components 5.15.6 → 5.15.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,30 +1,6 @@
|
|
|
1
1
|
/* Mapbox GL and Mapbox Geocoder styles are imported in the component file */
|
|
2
2
|
|
|
3
|
-
//
|
|
4
|
-
:root {
|
|
5
|
-
--camera-primary-color: #3b82f6;
|
|
6
|
-
--camera-primary-hover: #2563eb;
|
|
7
|
-
--camera-success-color: #10b981;
|
|
8
|
-
--camera-success-hover: #059669;
|
|
9
|
-
--camera-warning-color: #f59e0b;
|
|
10
|
-
--camera-warning-hover: #d97706;
|
|
11
|
-
--camera-danger-color: #ef4444;
|
|
12
|
-
--camera-danger-hover: #dc2626;
|
|
13
|
-
--camera-purple-color: #8b5cf6;
|
|
14
|
-
--camera-purple-hover: #7c3aed;
|
|
15
|
-
|
|
16
|
-
--camera-background: #ffffff;
|
|
17
|
-
--camera-surface: #f8fafc;
|
|
18
|
-
--camera-border: #e5e7eb;
|
|
19
|
-
--camera-border-light: #f3f4f6;
|
|
20
|
-
|
|
21
|
-
--camera-text-primary: #1f2937;
|
|
22
|
-
--camera-text-secondary: #6b7280;
|
|
23
|
-
--camera-text-muted: #9ca3af;
|
|
24
|
-
|
|
25
|
-
--camera-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
26
|
-
--camera-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
27
|
-
}
|
|
3
|
+
// Uses project color variables for consistency
|
|
28
4
|
|
|
29
5
|
.cameraPlacement {
|
|
30
6
|
padding: 0;
|
|
@@ -32,236 +8,173 @@
|
|
|
32
8
|
height: 100vh;
|
|
33
9
|
display: flex;
|
|
34
10
|
flex-direction: column;
|
|
35
|
-
background: var(--
|
|
11
|
+
background: var(--bg);
|
|
36
12
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
|
|
37
13
|
|
|
38
|
-
.header {
|
|
39
|
-
background:
|
|
14
|
+
.header {
|
|
15
|
+
background: var(--primary-color);
|
|
40
16
|
padding: 16px 32px;
|
|
41
17
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
42
|
-
border-bottom:
|
|
18
|
+
border-bottom: 1px solid rgba(var(--primary-rgb), 0.7);
|
|
43
19
|
z-index: 100;
|
|
44
20
|
position: relative;
|
|
45
21
|
|
|
46
|
-
|
|
22
|
+
.headerContent {
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
align-items: center;
|
|
26
|
+
}
|
|
47
27
|
|
|
48
|
-
.title {
|
|
28
|
+
.title {
|
|
49
29
|
font-size: 24px;
|
|
50
30
|
font-weight: 700;
|
|
51
31
|
color: white;
|
|
52
|
-
margin: 0
|
|
32
|
+
margin: 0;
|
|
53
33
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
54
34
|
letter-spacing: -0.5px;
|
|
55
35
|
}
|
|
56
36
|
|
|
57
|
-
.controls {
|
|
37
|
+
.controls {
|
|
58
38
|
display: flex;
|
|
59
|
-
gap:
|
|
39
|
+
gap: 12px;
|
|
60
40
|
align-items: center;
|
|
61
|
-
|
|
62
|
-
justify-content: space-between;
|
|
41
|
+
}
|
|
63
42
|
|
|
64
|
-
.
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
border: 1px solid #10b981;
|
|
81
|
-
|
|
82
|
-
&:hover:not(:disabled) {
|
|
83
|
-
background: #047857;
|
|
84
|
-
transform: translateY(-1px);
|
|
85
|
-
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.addCameraBtn {
|
|
90
|
-
padding: 8px 16px;
|
|
91
|
-
background: #3b82f6;
|
|
92
|
-
color: white;
|
|
93
|
-
border: none;
|
|
94
|
-
border-radius: 6px;
|
|
95
|
-
cursor: pointer;
|
|
96
|
-
font-weight: 500;
|
|
97
|
-
font-size: 13px;
|
|
98
|
-
transition: all 0.2s ease;
|
|
99
|
-
border: 1px solid #2563eb;
|
|
100
|
-
|
|
101
|
-
&:hover:not(:disabled) {
|
|
102
|
-
background: #2563eb;
|
|
103
|
-
transform: translateY(-1px);
|
|
104
|
-
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
&.activeControl {
|
|
108
|
-
background: #ef4444 !important;
|
|
109
|
-
border-color: #dc2626 !important;
|
|
110
|
-
|
|
111
|
-
&:hover:not(:disabled) {
|
|
112
|
-
background: #dc2626 !important;
|
|
113
|
-
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
43
|
+
.iconButton {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
width: 44px;
|
|
48
|
+
height: 44px;
|
|
49
|
+
padding: 0;
|
|
50
|
+
background: var(--secondary-color, #6b7280);
|
|
51
|
+
color: white;
|
|
52
|
+
border: none;
|
|
53
|
+
border-radius: var(--br, 8px);
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
transition: all 0.2s ease;
|
|
56
|
+
border: 1px solid rgba(var(--secondary-rgb, 107, 114, 128), 1);
|
|
57
|
+
position: relative;
|
|
58
|
+
margin: 0 2px;
|
|
118
59
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
60
|
+
&::after {
|
|
61
|
+
content: attr(title);
|
|
62
|
+
position: absolute;
|
|
63
|
+
bottom: -35px;
|
|
64
|
+
left: 50%;
|
|
65
|
+
transform: translateX(-50%);
|
|
66
|
+
background: rgba(0, 0, 0, 0.8);
|
|
67
|
+
color: white;
|
|
68
|
+
padding: 6px 8px;
|
|
69
|
+
border-radius: 4px;
|
|
70
|
+
font-size: 12px;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
opacity: 0;
|
|
73
|
+
visibility: hidden;
|
|
74
|
+
transition: all 0.2s ease;
|
|
75
|
+
z-index: 1000;
|
|
76
|
+
pointer-events: none;
|
|
122
77
|
}
|
|
123
78
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
79
|
+
&::before {
|
|
80
|
+
content: '';
|
|
81
|
+
position: absolute;
|
|
82
|
+
bottom: -28px;
|
|
83
|
+
left: 50%;
|
|
84
|
+
transform: translateX(-50%);
|
|
85
|
+
width: 0;
|
|
86
|
+
height: 0;
|
|
87
|
+
border-left: 4px solid transparent;
|
|
88
|
+
border-right: 4px solid transparent;
|
|
89
|
+
border-bottom: 4px solid rgba(0, 0, 0, 0.8);
|
|
90
|
+
opacity: 0;
|
|
91
|
+
visibility: hidden;
|
|
92
|
+
transition: all 0.2s ease;
|
|
93
|
+
z-index: 1000;
|
|
94
|
+
pointer-events: none;
|
|
129
95
|
}
|
|
130
96
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
padding: 6px;
|
|
136
|
-
border-radius: 8px;
|
|
137
|
-
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
138
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
97
|
+
&:hover::after,
|
|
98
|
+
&:hover::before {
|
|
99
|
+
opacity: 1;
|
|
100
|
+
visibility: visible;
|
|
139
101
|
}
|
|
140
102
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
border-radius: 6px;
|
|
147
|
-
cursor: pointer;
|
|
148
|
-
font-weight: 500;
|
|
149
|
-
font-size: 13px;
|
|
150
|
-
transition: all 0.2s ease;
|
|
151
|
-
border: 1px solid #9ca3af;
|
|
152
|
-
|
|
153
|
-
&:hover:not(:disabled) {
|
|
154
|
-
background: #4b5563;
|
|
155
|
-
transform: translateY(-1px);
|
|
156
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
&:disabled {
|
|
160
|
-
background: #9ca3af;
|
|
161
|
-
cursor: not-allowed;
|
|
162
|
-
opacity: 0.6;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
&.saveFileBtn {
|
|
166
|
-
background: var(--camera-purple-color, #8b5cf6);
|
|
167
|
-
border-color: var(--camera-purple-hover, #7c3aed);
|
|
168
|
-
|
|
169
|
-
&:hover:not(:disabled) {
|
|
170
|
-
background: var(--camera-purple-hover, #7c3aed);
|
|
171
|
-
transform: translateY(-1px);
|
|
172
|
-
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
103
|
+
&:hover:not(:disabled) {
|
|
104
|
+
background: rgba(var(--secondary-rgb, 107, 114, 128), 0.8);
|
|
105
|
+
transform: translateY(-2px);
|
|
106
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
107
|
+
}
|
|
175
108
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
109
|
+
&:disabled {
|
|
110
|
+
background: var(--muted-color, #9ca3af);
|
|
111
|
+
cursor: not-allowed;
|
|
112
|
+
opacity: 0.6;
|
|
113
|
+
transform: none;
|
|
114
|
+
|
|
115
|
+
&::after,
|
|
116
|
+
&::before {
|
|
117
|
+
display: none;
|
|
185
118
|
}
|
|
119
|
+
}
|
|
186
120
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
}
|
|
121
|
+
&.uploadBtn {
|
|
122
|
+
background: var(--success-color, #059669);
|
|
123
|
+
border-color: rgba(var(--success-rgb, 5, 150, 105), 1);
|
|
124
|
+
|
|
125
|
+
&:hover:not(:disabled) {
|
|
126
|
+
background: rgba(var(--success-rgb, 5, 150, 105), 0.8);
|
|
127
|
+
transform: translateY(-2px);
|
|
128
|
+
box-shadow: 0 4px 12px rgba(var(--success-rgb, 5, 150, 105), 0.3);
|
|
196
129
|
}
|
|
130
|
+
}
|
|
197
131
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
132
|
+
&.saveFileBtn {
|
|
133
|
+
background: var(--secondary-color, #6b7280);
|
|
134
|
+
border-color: rgba(var(--secondary-rgb, 107, 114, 128), 1);
|
|
135
|
+
color: white !important;
|
|
136
|
+
|
|
137
|
+
svg {
|
|
201
138
|
color: white !important;
|
|
202
|
-
|
|
139
|
+
opacity: 1 !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
&:hover:not(:disabled) {
|
|
143
|
+
background: rgba(var(--secondary-rgb, 107, 114, 128), 0.8);
|
|
144
|
+
transform: translateY(-2px);
|
|
145
|
+
box-shadow: 0 4px 12px rgba(var(--secondary-rgb, 107, 114, 128), 0.3);
|
|
203
146
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
box-shadow: 0 3px 12px rgba(59, 130, 246, 0.4) !important;
|
|
147
|
+
svg {
|
|
148
|
+
color: white !important;
|
|
207
149
|
}
|
|
208
150
|
}
|
|
209
151
|
}
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
.imageControls {
|
|
213
|
-
display: flex;
|
|
214
|
-
gap: 8px;
|
|
215
|
-
background: rgba(255, 255, 255, 0.9);
|
|
216
|
-
padding: 6px;
|
|
217
|
-
border-radius: 8px;
|
|
218
|
-
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
219
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
220
|
-
margin-right: 16px;
|
|
221
|
-
|
|
222
|
-
button {
|
|
223
|
-
padding: 8px 16px;
|
|
224
|
-
background: #6b7280;
|
|
225
|
-
color: white;
|
|
226
|
-
border: none;
|
|
227
|
-
border-radius: 6px;
|
|
228
|
-
cursor: pointer;
|
|
229
|
-
font-weight: 500;
|
|
230
|
-
font-size: 13px;
|
|
231
|
-
transition: all 0.2s ease;
|
|
232
|
-
border: 1px solid #9ca3af;
|
|
233
152
|
|
|
153
|
+
&.loadFileBtn {
|
|
154
|
+
background: var(--neutral-color, #64748b);
|
|
155
|
+
border-color: rgba(var(--neutral-rgb, 100, 116, 139), 1);
|
|
156
|
+
|
|
234
157
|
&:hover:not(:disabled) {
|
|
235
|
-
background:
|
|
236
|
-
transform: translateY(-
|
|
237
|
-
box-shadow: 0
|
|
158
|
+
background: rgba(var(--neutral-rgb, 100, 116, 139), 0.8);
|
|
159
|
+
transform: translateY(-2px);
|
|
160
|
+
box-shadow: 0 4px 12px rgba(var(--neutral-rgb, 100, 116, 139), 0.3);
|
|
238
161
|
}
|
|
162
|
+
}
|
|
239
163
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
color: white !important;
|
|
244
|
-
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
|
245
|
-
|
|
246
|
-
&:hover:not(:disabled) {
|
|
247
|
-
background: #2563eb !important;
|
|
248
|
-
box-shadow: 0 3px 12px rgba(59, 130, 246, 0.4) !important;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
164
|
+
&.exportBtn {
|
|
165
|
+
background: var(--success-color, #10b981);
|
|
166
|
+
border-color: rgba(var(--success-rgb, 16, 185, 129), 1);
|
|
251
167
|
|
|
252
|
-
|
|
253
|
-
background:
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
&:hover:not(:disabled) {
|
|
257
|
-
background: #047857;
|
|
258
|
-
}
|
|
168
|
+
&:hover:not(:disabled) {
|
|
169
|
+
background: rgba(var(--success-rgb, 16, 185, 129), 0.8);
|
|
170
|
+
transform: translateY(-2px);
|
|
171
|
+
box-shadow: 0 4px 12px rgba(var(--success-rgb, 16, 185, 129), 0.3);
|
|
259
172
|
}
|
|
260
173
|
}
|
|
261
174
|
}
|
|
262
175
|
}
|
|
263
176
|
|
|
264
|
-
.mainContent {
|
|
177
|
+
.mainContent {
|
|
265
178
|
display: flex;
|
|
266
179
|
flex: 1;
|
|
267
180
|
overflow: hidden;
|
|
@@ -269,7 +182,7 @@
|
|
|
269
182
|
position: relative;
|
|
270
183
|
}
|
|
271
184
|
|
|
272
|
-
.mapContainer {
|
|
185
|
+
.mapContainer {
|
|
273
186
|
flex: 1;
|
|
274
187
|
position: relative;
|
|
275
188
|
min-height: calc(100vh - 100px);
|
|
@@ -320,86 +233,332 @@
|
|
|
320
233
|
}
|
|
321
234
|
}
|
|
322
235
|
|
|
323
|
-
.imageContainer {
|
|
324
|
-
|
|
325
|
-
position: relative;
|
|
326
|
-
min-height: calc(100vh - 100px);
|
|
327
|
-
height: calc(100vh - 100px);
|
|
328
|
-
width: calc(100% - 400px); /* Account for sidebar width */
|
|
329
|
-
background: #f8fafc;
|
|
330
|
-
overflow: hidden;
|
|
331
|
-
cursor: default;
|
|
332
|
-
|
|
333
|
-
&.addMode {
|
|
334
|
-
cursor: crosshair;
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
&.sidebarCollapsed {
|
|
338
|
-
width: 100%; /* Full width when sidebar is collapsed */
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
.imageWrapper {
|
|
236
|
+
.imageContainer {
|
|
237
|
+
flex: 1;
|
|
342
238
|
position: relative;
|
|
343
|
-
|
|
344
|
-
height:
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
239
|
+
min-height: calc(100vh - 100px);
|
|
240
|
+
height: calc(100vh - 100px);
|
|
241
|
+
width: calc(100% - 400px);
|
|
242
|
+
background: var(--bg);
|
|
243
|
+
overflow: hidden;
|
|
244
|
+
cursor: default;
|
|
348
245
|
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
max-height: 100%;
|
|
352
|
-
object-fit: contain;
|
|
353
|
-
user-select: none;
|
|
354
|
-
pointer-events: none;
|
|
246
|
+
&.addMode {
|
|
247
|
+
cursor: crosshair;
|
|
355
248
|
}
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.uploadPlaceholder {
|
|
359
|
-
display: flex;
|
|
360
|
-
flex-direction: column;
|
|
361
|
-
align-items: center;
|
|
362
|
-
justify-content: center;
|
|
363
|
-
height: 100%;
|
|
364
|
-
color: #64748b;
|
|
365
|
-
text-align: center;
|
|
366
|
-
padding: 40px;
|
|
367
249
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
margin-bottom: 20px;
|
|
371
|
-
opacity: 0.5;
|
|
250
|
+
&.sidebarCollapsed {
|
|
251
|
+
width: 100%;
|
|
372
252
|
}
|
|
373
253
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
254
|
+
&.dragOver {
|
|
255
|
+
background: rgba(var(--primary-rgb), 0.05);
|
|
256
|
+
border: 2px dashed rgba(var(--primary-rgb), 0.3);
|
|
257
|
+
|
|
258
|
+
.uploadPlaceholder {
|
|
259
|
+
background: rgba(var(--primary-rgb), 0.1);
|
|
260
|
+
transform: scale(1.02);
|
|
261
|
+
transition: all 0.2s ease;
|
|
262
|
+
|
|
263
|
+
.dragDropHint {
|
|
264
|
+
background: rgba(var(--primary-rgb), 0.2);
|
|
265
|
+
border-color: rgba(var(--primary-rgb), 0.5);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
379
268
|
}
|
|
380
269
|
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
270
|
+
.imageWrapper {
|
|
271
|
+
position: relative;
|
|
272
|
+
width: 100%;
|
|
273
|
+
height: 100%;
|
|
274
|
+
display: flex;
|
|
275
|
+
align-items: center;
|
|
276
|
+
justify-content: center;
|
|
277
|
+
|
|
278
|
+
.uploadedImage {
|
|
279
|
+
max-width: 100%;
|
|
280
|
+
max-height: 100%;
|
|
281
|
+
object-fit: contain;
|
|
282
|
+
user-select: none;
|
|
283
|
+
pointer-events: none;
|
|
284
|
+
}
|
|
386
285
|
}
|
|
387
286
|
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
transition: all 0.2s ease;
|
|
287
|
+
.uploadPlaceholder {
|
|
288
|
+
display: flex;
|
|
289
|
+
flex-direction: column;
|
|
290
|
+
align-items: center;
|
|
291
|
+
justify-content: center;
|
|
292
|
+
height: 100%;
|
|
293
|
+
color: #64748b;
|
|
294
|
+
text-align: center;
|
|
295
|
+
padding: 40px;
|
|
398
296
|
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
297
|
+
.uploadIcon {
|
|
298
|
+
margin-bottom: 20px;
|
|
299
|
+
opacity: 0.5;
|
|
300
|
+
color: var(--primary-color);
|
|
301
|
+
display: flex;
|
|
302
|
+
justify-content: center;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
h3 {
|
|
306
|
+
margin: 0 0 12px 0;
|
|
307
|
+
font-size: 24px;
|
|
308
|
+
font-weight: 600;
|
|
309
|
+
color: #374151;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
p {
|
|
313
|
+
margin: 0 0 24px 0;
|
|
314
|
+
font-size: 16px;
|
|
315
|
+
max-width: 400px;
|
|
316
|
+
line-height: 1.5;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
button {
|
|
320
|
+
padding: 12px 24px;
|
|
321
|
+
background: var(--primary-color);
|
|
322
|
+
color: white;
|
|
323
|
+
border: none;
|
|
324
|
+
border-radius: var(--br, 8px);
|
|
325
|
+
font-size: 16px;
|
|
326
|
+
font-weight: 600;
|
|
327
|
+
cursor: pointer;
|
|
328
|
+
transition: all 0.2s ease;
|
|
329
|
+
|
|
330
|
+
&:hover {
|
|
331
|
+
background: rgba(var(--primary-rgb), 0.8);
|
|
332
|
+
transform: translateY(-1px);
|
|
333
|
+
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.dragDropHint {
|
|
338
|
+
margin-top: 20px;
|
|
339
|
+
padding: 12px 20px;
|
|
340
|
+
background: rgba(var(--primary-rgb), 0.1);
|
|
341
|
+
border-radius: var(--br, 8px);
|
|
342
|
+
border: 1px dashed rgba(var(--primary-rgb), 0.3);
|
|
343
|
+
display: flex;
|
|
344
|
+
align-items: center;
|
|
345
|
+
gap: 8px;
|
|
346
|
+
|
|
347
|
+
.hintIcon {
|
|
348
|
+
color: var(--primary-color);
|
|
349
|
+
flex-shrink: 0;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
span {
|
|
353
|
+
font-size: 14px;
|
|
354
|
+
color: var(--paragraph-color, #64748b);
|
|
355
|
+
font-style: italic;
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.sidebar {
|
|
362
|
+
position: absolute;
|
|
363
|
+
top: 70px;
|
|
364
|
+
right: 0;
|
|
365
|
+
width: 400px;
|
|
366
|
+
height: calc(100% - 70px);
|
|
367
|
+
background: var(--item-color);
|
|
368
|
+
border-left: 1px solid var(--border-color, #e5e7eb);
|
|
369
|
+
display: flex;
|
|
370
|
+
flex-direction: column;
|
|
371
|
+
z-index: 20;
|
|
372
|
+
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
|
|
373
|
+
transform: translateX(0);
|
|
374
|
+
transition: transform 0.3s ease;
|
|
375
|
+
|
|
376
|
+
&.collapsed {
|
|
377
|
+
transform: translateX(100%);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.sidebarHeader {
|
|
381
|
+
padding: 20px 24px;
|
|
382
|
+
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
|
383
|
+
background: var(--surface-color, #f9fafb);
|
|
384
|
+
position: relative;
|
|
385
|
+
z-index: 1;
|
|
386
|
+
|
|
387
|
+
.sidebarTitle {
|
|
388
|
+
font-size: 18px;
|
|
389
|
+
font-weight: 700;
|
|
390
|
+
color: var(--heading-color, #1e293b);
|
|
391
|
+
margin: 0 0 6px 0;
|
|
392
|
+
letter-spacing: -0.3px;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.cameraCount {
|
|
396
|
+
font-size: 14px;
|
|
397
|
+
color: var(--paragraph-color, #64748b);
|
|
398
|
+
margin: 0;
|
|
399
|
+
font-weight: 500;
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.camerasList {
|
|
404
|
+
flex: 1;
|
|
405
|
+
overflow-y: auto;
|
|
406
|
+
padding: 20px 24px;
|
|
407
|
+
position: relative;
|
|
408
|
+
z-index: 1;
|
|
409
|
+
|
|
410
|
+
&::-webkit-scrollbar {
|
|
411
|
+
width: 6px;
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
&::-webkit-scrollbar-track {
|
|
415
|
+
background: rgba(0, 0, 0, 0.05);
|
|
416
|
+
border-radius: 3px;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
&::-webkit-scrollbar-thumb {
|
|
420
|
+
background: #d1d5db;
|
|
421
|
+
border-radius: 3px;
|
|
422
|
+
|
|
423
|
+
&:hover {
|
|
424
|
+
background: #9ca3af;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.cameraItem {
|
|
429
|
+
display: flex;
|
|
430
|
+
flex-direction: column;
|
|
431
|
+
padding: 16px;
|
|
432
|
+
background: var(--item-color);
|
|
433
|
+
border-radius: var(--br, 8px);
|
|
434
|
+
margin-bottom: 12px;
|
|
435
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
436
|
+
transition: all 0.2s ease;
|
|
437
|
+
position: relative;
|
|
438
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
439
|
+
|
|
440
|
+
&::before {
|
|
441
|
+
content: '';
|
|
442
|
+
position: absolute;
|
|
443
|
+
top: 0;
|
|
444
|
+
left: 0;
|
|
445
|
+
right: 0;
|
|
446
|
+
height: 2px;
|
|
447
|
+
background: #6b7280;
|
|
448
|
+
transform: scaleX(0);
|
|
449
|
+
transition: transform 0.2s ease;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
&:hover {
|
|
453
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
454
|
+
border-color: #d1d5db;
|
|
455
|
+
transform: translateY(-1px);
|
|
456
|
+
|
|
457
|
+
&::before {
|
|
458
|
+
transform: scaleX(1);
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.cameraHeader {
|
|
463
|
+
display: flex;
|
|
464
|
+
justify-content: space-between;
|
|
465
|
+
align-items: center;
|
|
466
|
+
margin-bottom: 12px;
|
|
467
|
+
|
|
468
|
+
.sidebarCameraInfo {
|
|
469
|
+
display: flex;
|
|
470
|
+
align-items: center;
|
|
471
|
+
gap: 12px;
|
|
472
|
+
flex: 1;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.sidebarCameraImageContainer {
|
|
476
|
+
position: relative;
|
|
477
|
+
width: 40px;
|
|
478
|
+
height: 40px;
|
|
479
|
+
flex-shrink: 0;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.sidebarCameraImage {
|
|
483
|
+
width: 100%;
|
|
484
|
+
height: 100%;
|
|
485
|
+
object-fit: contain;
|
|
486
|
+
border-radius: 6px;
|
|
487
|
+
background: #f8fafc;
|
|
488
|
+
border: 1px solid #e5e7eb;
|
|
489
|
+
padding: 2px;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.sidebarCameraIcon {
|
|
493
|
+
display: flex;
|
|
494
|
+
align-items: center;
|
|
495
|
+
justify-content: center;
|
|
496
|
+
width: 40px;
|
|
497
|
+
height: 40px;
|
|
498
|
+
background: #f3f4f6;
|
|
499
|
+
border-radius: 6px;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.sidebarCameraText {
|
|
503
|
+
flex: 1;
|
|
504
|
+
min-width: 0;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.cameraName {
|
|
508
|
+
font-size: 18px;
|
|
509
|
+
font-weight: 700;
|
|
510
|
+
color: var(--heading-color, #1e293b);
|
|
511
|
+
margin: 0;
|
|
512
|
+
letter-spacing: -0.2px;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
.cameraType {
|
|
516
|
+
padding: 6px 12px;
|
|
517
|
+
border-radius: 16px;
|
|
518
|
+
font-size: 11px;
|
|
519
|
+
font-weight: 700;
|
|
520
|
+
text-transform: uppercase;
|
|
521
|
+
letter-spacing: 0.5px;
|
|
522
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
523
|
+
|
|
524
|
+
&.indoor {
|
|
525
|
+
background: var(--success-color, #10b981);
|
|
526
|
+
color: white;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
&.outdoor {
|
|
530
|
+
background: var(--warning-color, #f59e0b);
|
|
531
|
+
color: white;
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
.cameraDetails {
|
|
537
|
+
font-size: 14px;
|
|
538
|
+
color: var(--paragraph-color, #64748b);
|
|
539
|
+
margin-bottom: 10px;
|
|
540
|
+
line-height: 1.5;
|
|
541
|
+
font-weight: 500;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
.cameraCoords {
|
|
545
|
+
font-size: 12px;
|
|
546
|
+
color: var(--paragraph-color, #6b7280);
|
|
547
|
+
font-family: 'SF Mono', Monaco, 'Consolas', monospace;
|
|
548
|
+
font-weight: 500;
|
|
549
|
+
margin-bottom: 16px;
|
|
550
|
+
background: var(--surface-color, #f3f4f6);
|
|
551
|
+
padding: 8px 12px;
|
|
552
|
+
border-radius: var(--br, 6px);
|
|
553
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.cameraActions {
|
|
557
|
+
display: flex;
|
|
558
|
+
gap: 6px;
|
|
559
|
+
align-items: center;
|
|
560
|
+
flex-shrink: 0;
|
|
561
|
+
}
|
|
403
562
|
}
|
|
404
563
|
}
|
|
405
564
|
}
|
|
@@ -464,7 +623,7 @@
|
|
|
464
623
|
right: -8px;
|
|
465
624
|
width: 16px;
|
|
466
625
|
height: 16px;
|
|
467
|
-
background:
|
|
626
|
+
background: var(--primary-color);
|
|
468
627
|
border: 2px solid white;
|
|
469
628
|
border-radius: 50%;
|
|
470
629
|
cursor: grab;
|
|
@@ -473,19 +632,19 @@
|
|
|
473
632
|
align-items: center;
|
|
474
633
|
justify-content: center;
|
|
475
634
|
transition: all 0.2s ease;
|
|
476
|
-
z-index: 1001;
|
|
635
|
+
z-index: 1001;
|
|
477
636
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
478
637
|
|
|
479
638
|
&:hover {
|
|
480
639
|
opacity: 1;
|
|
481
640
|
cursor: grab;
|
|
482
641
|
transform: scale(1.25);
|
|
483
|
-
background:
|
|
484
|
-
box-shadow: 0 3px 10px rgba(
|
|
642
|
+
background: rgba(var(--primary-rgb), 0.8);
|
|
643
|
+
box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.6);
|
|
485
644
|
}
|
|
486
645
|
|
|
487
646
|
&:active {
|
|
488
|
-
background:
|
|
647
|
+
background: rgba(var(--primary-rgb), 0.7);
|
|
489
648
|
transform: scale(1.1);
|
|
490
649
|
}
|
|
491
650
|
|
|
@@ -506,18 +665,17 @@
|
|
|
506
665
|
100% { transform: rotate(360deg); }
|
|
507
666
|
}
|
|
508
667
|
|
|
509
|
-
// Ensure rotation handle is clickable and visible
|
|
510
668
|
.imageMarker {
|
|
511
669
|
.rotationHandle {
|
|
512
670
|
pointer-events: auto;
|
|
513
|
-
z-index: 1001;
|
|
671
|
+
z-index: 1001;
|
|
514
672
|
}
|
|
515
673
|
|
|
516
674
|
&:hover .rotationHandle {
|
|
517
675
|
opacity: 1;
|
|
518
676
|
transform: scale(1.15);
|
|
519
|
-
background:
|
|
520
|
-
box-shadow: 0 4px 16px rgba(
|
|
677
|
+
background: rgba(var(--primary-rgb), 0.8);
|
|
678
|
+
box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.5);
|
|
521
679
|
}
|
|
522
680
|
|
|
523
681
|
&.rotating {
|
|
@@ -529,15 +687,14 @@
|
|
|
529
687
|
.rotationHandle {
|
|
530
688
|
opacity: 1 !important;
|
|
531
689
|
transform: scale(1.3) !important;
|
|
532
|
-
background:
|
|
533
|
-
box-shadow: 0 8px 24px rgba(
|
|
690
|
+
background: rgba(var(--primary-rgb), 0.9) !important;
|
|
691
|
+
box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.6) !important;
|
|
534
692
|
cursor: grabbing !important;
|
|
535
|
-
z-index: 1002 !important;
|
|
693
|
+
z-index: 1002 !important;
|
|
536
694
|
}
|
|
537
695
|
}
|
|
538
696
|
}
|
|
539
697
|
|
|
540
|
-
// Camera tooltip styles
|
|
541
698
|
.cameraTooltip {
|
|
542
699
|
position: absolute;
|
|
543
700
|
background: white;
|
|
@@ -545,9 +702,9 @@
|
|
|
545
702
|
border-radius: 12px;
|
|
546
703
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|
547
704
|
padding: 0;
|
|
548
|
-
z-index: 999;
|
|
705
|
+
z-index: 999;
|
|
549
706
|
width: 280px;
|
|
550
|
-
pointer-events: none;
|
|
707
|
+
pointer-events: none;
|
|
551
708
|
opacity: 0;
|
|
552
709
|
animation: fadeInTooltip 0.2s ease forwards;
|
|
553
710
|
|
|
@@ -602,224 +759,16 @@
|
|
|
602
759
|
}
|
|
603
760
|
}
|
|
604
761
|
|
|
605
|
-
.sidebar {
|
|
606
|
-
position: absolute;
|
|
607
|
-
top: 70px; /* Add top margin to clear navigation */
|
|
608
|
-
right: 0;
|
|
609
|
-
width: 400px;
|
|
610
|
-
height: calc(100% - 70px); /* Adjust height to account for top margin */
|
|
611
|
-
background: var(--camera-background, #ffffff);
|
|
612
|
-
border-left: 1px solid var(--camera-border, #e5e7eb);
|
|
613
|
-
display: flex;
|
|
614
|
-
flex-direction: column;
|
|
615
|
-
z-index: 20;
|
|
616
|
-
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
|
|
617
|
-
transform: translateX(0);
|
|
618
|
-
transition: transform 0.3s ease;
|
|
619
|
-
|
|
620
|
-
&.collapsed {
|
|
621
|
-
transform: translateX(100%);
|
|
622
|
-
}
|
|
623
|
-
|
|
624
|
-
}
|
|
625
|
-
|
|
626
|
-
.sidebarHeader {
|
|
627
|
-
padding: 20px 24px;
|
|
628
|
-
border-bottom: 1px solid #e5e7eb;
|
|
629
|
-
background: #f9fafb;
|
|
630
|
-
position: relative;
|
|
631
|
-
z-index: 1;
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
.sidebarTitle {
|
|
635
|
-
font-size: 18px;
|
|
636
|
-
font-weight: 700;
|
|
637
|
-
color: #1e293b;
|
|
638
|
-
margin: 0 0 6px 0;
|
|
639
|
-
letter-spacing: -0.3px;
|
|
640
|
-
}
|
|
641
|
-
|
|
642
|
-
.cameraCount {
|
|
643
|
-
font-size: 14px;
|
|
644
|
-
color: #64748b;
|
|
645
|
-
margin: 0;
|
|
646
|
-
font-weight: 500;
|
|
647
|
-
}
|
|
648
|
-
}
|
|
649
|
-
|
|
650
|
-
.camerasList {
|
|
651
|
-
flex: 1;
|
|
652
|
-
overflow-y: auto;
|
|
653
|
-
padding: 20px 24px;
|
|
654
|
-
position: relative;
|
|
655
|
-
z-index: 1;
|
|
656
|
-
|
|
657
|
-
&::-webkit-scrollbar {
|
|
658
|
-
width: 6px;
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
&::-webkit-scrollbar-track {
|
|
662
|
-
background: rgba(0, 0, 0, 0.05);
|
|
663
|
-
border-radius: 3px;
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
&::-webkit-scrollbar-thumb {
|
|
667
|
-
background: #d1d5db;
|
|
668
|
-
border-radius: 3px;
|
|
669
|
-
|
|
670
|
-
&:hover {
|
|
671
|
-
background: #9ca3af;
|
|
672
|
-
}
|
|
673
|
-
}
|
|
674
|
-
|
|
675
|
-
.cameraItem {
|
|
676
|
-
display: flex;
|
|
677
|
-
flex-direction: column;
|
|
678
|
-
padding: 16px;
|
|
679
|
-
background: #ffffff;
|
|
680
|
-
border-radius: 8px;
|
|
681
|
-
margin-bottom: 12px;
|
|
682
|
-
border: 1px solid #e5e7eb;
|
|
683
|
-
transition: all 0.2s ease;
|
|
684
|
-
position: relative;
|
|
685
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
686
|
-
|
|
687
|
-
&::before {
|
|
688
|
-
content: '';
|
|
689
|
-
position: absolute;
|
|
690
|
-
top: 0;
|
|
691
|
-
left: 0;
|
|
692
|
-
right: 0;
|
|
693
|
-
height: 2px;
|
|
694
|
-
background: #6b7280;
|
|
695
|
-
transform: scaleX(0);
|
|
696
|
-
transition: transform 0.2s ease;
|
|
697
|
-
}
|
|
698
|
-
|
|
699
|
-
&:hover {
|
|
700
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
701
|
-
border-color: #d1d5db;
|
|
702
|
-
transform: translateY(-1px);
|
|
703
|
-
|
|
704
|
-
&::before {
|
|
705
|
-
transform: scaleX(1);
|
|
706
|
-
}
|
|
707
|
-
}
|
|
708
|
-
|
|
709
|
-
.cameraHeader {
|
|
710
|
-
display: flex;
|
|
711
|
-
justify-content: space-between;
|
|
712
|
-
align-items: center;
|
|
713
|
-
margin-bottom: 12px;
|
|
714
|
-
|
|
715
|
-
.sidebarCameraInfo {
|
|
716
|
-
display: flex;
|
|
717
|
-
align-items: center;
|
|
718
|
-
gap: 12px;
|
|
719
|
-
flex: 1;
|
|
720
|
-
}
|
|
721
|
-
|
|
722
|
-
.sidebarCameraImageContainer {
|
|
723
|
-
position: relative;
|
|
724
|
-
width: 40px;
|
|
725
|
-
height: 40px;
|
|
726
|
-
flex-shrink: 0;
|
|
727
|
-
}
|
|
728
|
-
|
|
729
|
-
.sidebarCameraImage {
|
|
730
|
-
width: 100%;
|
|
731
|
-
height: 100%;
|
|
732
|
-
object-fit: contain;
|
|
733
|
-
border-radius: 6px;
|
|
734
|
-
background: #f8fafc;
|
|
735
|
-
border: 1px solid #e5e7eb;
|
|
736
|
-
padding: 2px;
|
|
737
|
-
}
|
|
738
|
-
|
|
739
|
-
.sidebarCameraIcon {
|
|
740
|
-
display: flex;
|
|
741
|
-
align-items: center;
|
|
742
|
-
justify-content: center;
|
|
743
|
-
width: 40px;
|
|
744
|
-
height: 40px;
|
|
745
|
-
background: #f3f4f6;
|
|
746
|
-
border-radius: 6px;
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
.sidebarCameraText {
|
|
750
|
-
flex: 1;
|
|
751
|
-
min-width: 0;
|
|
752
|
-
}
|
|
753
|
-
|
|
754
|
-
.cameraName {
|
|
755
|
-
font-size: 18px;
|
|
756
|
-
font-weight: 700;
|
|
757
|
-
color: var(--camera-text-primary, #1e293b);
|
|
758
|
-
margin: 0;
|
|
759
|
-
letter-spacing: -0.2px;
|
|
760
|
-
}
|
|
761
|
-
|
|
762
|
-
.cameraType {
|
|
763
|
-
padding: 6px 12px;
|
|
764
|
-
border-radius: 16px;
|
|
765
|
-
font-size: 11px;
|
|
766
|
-
font-weight: 700;
|
|
767
|
-
text-transform: uppercase;
|
|
768
|
-
letter-spacing: 0.5px;
|
|
769
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
770
|
-
|
|
771
|
-
&.indoor {
|
|
772
|
-
background: #10b981;
|
|
773
|
-
color: white;
|
|
774
|
-
}
|
|
775
|
-
|
|
776
|
-
&.outdoor {
|
|
777
|
-
background: #f59e0b;
|
|
778
|
-
color: white;
|
|
779
|
-
}
|
|
780
|
-
}
|
|
781
|
-
}
|
|
782
|
-
}
|
|
783
|
-
}
|
|
784
|
-
}
|
|
785
|
-
|
|
786
762
|
.indoor {
|
|
787
|
-
background: var(--
|
|
763
|
+
background: var(--success-color, #10b981);
|
|
788
764
|
color: white;
|
|
789
765
|
}
|
|
790
766
|
|
|
791
767
|
.outdoor {
|
|
792
|
-
background: var(--
|
|
768
|
+
background: var(--warning-color, #f59e0b);
|
|
793
769
|
color: white;
|
|
794
770
|
}
|
|
795
771
|
|
|
796
|
-
.cameraDetails {
|
|
797
|
-
font-size: 14px;
|
|
798
|
-
color: var(--camera-text-secondary, #64748b);
|
|
799
|
-
margin-bottom: 10px;
|
|
800
|
-
line-height: 1.5;
|
|
801
|
-
font-weight: 500;
|
|
802
|
-
}
|
|
803
|
-
|
|
804
|
-
.cameraCoords {
|
|
805
|
-
font-size: 12px;
|
|
806
|
-
color: var(--camera-text-secondary, #6b7280);
|
|
807
|
-
font-family: 'SF Mono', Monaco, 'Consolas', monospace;
|
|
808
|
-
font-weight: 500;
|
|
809
|
-
margin-bottom: 16px;
|
|
810
|
-
background: var(--camera-border-light, #f3f4f6);
|
|
811
|
-
padding: 8px 12px;
|
|
812
|
-
border-radius: 6px;
|
|
813
|
-
border: 1px solid var(--camera-border, #e5e7eb);
|
|
814
|
-
}
|
|
815
|
-
|
|
816
|
-
.cameraActions {
|
|
817
|
-
display: flex;
|
|
818
|
-
gap: 6px;
|
|
819
|
-
align-items: center;
|
|
820
|
-
flex-shrink: 0;
|
|
821
|
-
}
|
|
822
|
-
|
|
823
772
|
.iconBtn {
|
|
824
773
|
display: flex;
|
|
825
774
|
align-items: center;
|
|
@@ -827,15 +776,15 @@
|
|
|
827
776
|
width: 32px;
|
|
828
777
|
height: 32px;
|
|
829
778
|
border: none;
|
|
830
|
-
border-radius: 6px;
|
|
831
|
-
background: var(--
|
|
832
|
-
color: var(--
|
|
779
|
+
border-radius: var(--br, 6px);
|
|
780
|
+
background: var(--surface-color, #f3f4f6);
|
|
781
|
+
color: var(--paragraph-color, #6b7280);
|
|
833
782
|
cursor: pointer;
|
|
834
783
|
transition: all 0.2s ease;
|
|
835
784
|
|
|
836
785
|
&:hover {
|
|
837
|
-
background: var(--
|
|
838
|
-
color: var(--
|
|
786
|
+
background: var(--border-color, #e5e7eb);
|
|
787
|
+
color: var(--heading-color, #374151);
|
|
839
788
|
transform: translateY(-1px);
|
|
840
789
|
}
|
|
841
790
|
|
|
@@ -843,10 +792,10 @@
|
|
|
843
792
|
transform: translateY(0);
|
|
844
793
|
}
|
|
845
794
|
|
|
846
|
-
&:nth-child(2) {
|
|
795
|
+
&:nth-child(2) {
|
|
847
796
|
&:hover {
|
|
848
|
-
background: #fee2e2;
|
|
849
|
-
color: var(--
|
|
797
|
+
background: var(--danger-light, #fee2e2);
|
|
798
|
+
color: var(--danger-color, #dc2626);
|
|
850
799
|
}
|
|
851
800
|
}
|
|
852
801
|
}
|
|
@@ -866,17 +815,17 @@
|
|
|
866
815
|
}
|
|
867
816
|
|
|
868
817
|
.modal {
|
|
869
|
-
background:
|
|
870
|
-
border-radius: 8px;
|
|
818
|
+
background: var(--item-color);
|
|
819
|
+
border-radius: var(--br, 8px);
|
|
871
820
|
padding: 24px;
|
|
872
821
|
max-width: 500px;
|
|
873
822
|
width: 90%;
|
|
874
823
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
875
|
-
border: 1px solid #e5e7eb;
|
|
824
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
876
825
|
|
|
877
826
|
h3 {
|
|
878
827
|
margin: 0 0 20px 0;
|
|
879
|
-
color: #374151;
|
|
828
|
+
color: var(--heading-color, #374151);
|
|
880
829
|
font-size: 18px;
|
|
881
830
|
font-weight: 600;
|
|
882
831
|
text-align: center;
|
|
@@ -890,23 +839,23 @@
|
|
|
890
839
|
display: block;
|
|
891
840
|
margin-bottom: 8px;
|
|
892
841
|
font-weight: 500;
|
|
893
|
-
color: #555;
|
|
842
|
+
color: var(--paragraph-color, #555);
|
|
894
843
|
font-size: 14px;
|
|
895
844
|
}
|
|
896
845
|
|
|
897
846
|
input[type="text"], select {
|
|
898
847
|
width: 100%;
|
|
899
848
|
padding: 10px 12px;
|
|
900
|
-
border: 1px solid #d1d5db;
|
|
901
|
-
border-radius: 6px;
|
|
849
|
+
border: 1px solid var(--border-color, #d1d5db);
|
|
850
|
+
border-radius: var(--br, 6px);
|
|
902
851
|
font-size: 14px;
|
|
903
852
|
transition: border-color 0.2s ease;
|
|
904
|
-
background:
|
|
853
|
+
background: var(--item-color);
|
|
905
854
|
|
|
906
855
|
&:focus {
|
|
907
856
|
outline: none;
|
|
908
|
-
border-color:
|
|
909
|
-
box-shadow: 0 0 0 3px rgba(
|
|
857
|
+
border-color: var(--primary-color);
|
|
858
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
|
|
910
859
|
}
|
|
911
860
|
}
|
|
912
861
|
|
|
@@ -914,7 +863,7 @@
|
|
|
914
863
|
width: 100%;
|
|
915
864
|
height: 6px;
|
|
916
865
|
border-radius: 3px;
|
|
917
|
-
background: #e5e7eb;
|
|
866
|
+
background: var(--border-color, #e5e7eb);
|
|
918
867
|
outline: none;
|
|
919
868
|
|
|
920
869
|
&::-webkit-slider-thumb {
|
|
@@ -922,7 +871,7 @@
|
|
|
922
871
|
width: 18px;
|
|
923
872
|
height: 18px;
|
|
924
873
|
border-radius: 50%;
|
|
925
|
-
background:
|
|
874
|
+
background: var(--primary-color);
|
|
926
875
|
cursor: pointer;
|
|
927
876
|
}
|
|
928
877
|
|
|
@@ -930,7 +879,7 @@
|
|
|
930
879
|
width: 18px;
|
|
931
880
|
height: 18px;
|
|
932
881
|
border-radius: 50%;
|
|
933
|
-
background:
|
|
882
|
+
background: var(--primary-color);
|
|
934
883
|
cursor: pointer;
|
|
935
884
|
border: none;
|
|
936
885
|
}
|
|
@@ -951,35 +900,34 @@
|
|
|
951
900
|
button {
|
|
952
901
|
padding: 10px 20px;
|
|
953
902
|
border: none;
|
|
954
|
-
border-radius: 6px;
|
|
903
|
+
border-radius: var(--br, 6px);
|
|
955
904
|
cursor: pointer;
|
|
956
905
|
font-weight: 500;
|
|
957
906
|
transition: all 0.2s ease;
|
|
958
907
|
|
|
959
908
|
&:first-child {
|
|
960
|
-
background:
|
|
909
|
+
background: var(--primary-color);
|
|
961
910
|
color: white;
|
|
962
911
|
|
|
963
912
|
&:hover {
|
|
964
|
-
background:
|
|
913
|
+
background: rgba(var(--primary-rgb), 0.8);
|
|
965
914
|
}
|
|
966
915
|
}
|
|
967
916
|
|
|
968
917
|
&:last-child {
|
|
969
|
-
background: #6b7280;
|
|
918
|
+
background: var(--secondary-color, #6b7280);
|
|
970
919
|
color: white;
|
|
971
920
|
|
|
972
921
|
&:hover {
|
|
973
|
-
background:
|
|
922
|
+
background: rgba(var(--secondary-rgb, 107, 114, 128), 0.8);
|
|
974
923
|
}
|
|
975
924
|
}
|
|
976
925
|
}
|
|
977
926
|
}
|
|
978
927
|
|
|
979
|
-
// New Camera Selection Modal Styles
|
|
980
928
|
.cameraSelectionModal {
|
|
981
|
-
background:
|
|
982
|
-
border-radius: 12px;
|
|
929
|
+
background: var(--item-color);
|
|
930
|
+
border-radius: var(--br, 12px);
|
|
983
931
|
max-width: 1200px;
|
|
984
932
|
width: 90vw;
|
|
985
933
|
max-height: 90vh;
|
|
@@ -994,14 +942,14 @@
|
|
|
994
942
|
justify-content: space-between;
|
|
995
943
|
align-items: center;
|
|
996
944
|
padding: 24px 32px;
|
|
997
|
-
border-bottom: 1px solid #e5e7eb;
|
|
998
|
-
background: #f9fafb;
|
|
945
|
+
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
|
946
|
+
background: var(--surface-color, #f9fafb);
|
|
999
947
|
|
|
1000
948
|
h3 {
|
|
1001
949
|
margin: 0;
|
|
1002
950
|
font-size: 24px;
|
|
1003
951
|
font-weight: 700;
|
|
1004
|
-
color: #111827;
|
|
952
|
+
color: var(--heading-color, #111827);
|
|
1005
953
|
}
|
|
1006
954
|
|
|
1007
955
|
.closeBtn {
|
|
@@ -1285,7 +1233,6 @@
|
|
|
1285
1233
|
font-style: italic;
|
|
1286
1234
|
}
|
|
1287
1235
|
|
|
1288
|
-
// Updated modal actions for new design
|
|
1289
1236
|
.cameraSelectionModal .modalActions {
|
|
1290
1237
|
display: flex;
|
|
1291
1238
|
justify-content: space-between;
|
|
@@ -1349,7 +1296,6 @@
|
|
|
1349
1296
|
}
|
|
1350
1297
|
}
|
|
1351
1298
|
|
|
1352
|
-
/* Global styles for map markers and geocoder */
|
|
1353
1299
|
:global {
|
|
1354
1300
|
.camera-map-marker {
|
|
1355
1301
|
background: rgba(0, 0, 0, 0.9);
|
|
@@ -1474,7 +1420,6 @@
|
|
|
1474
1420
|
min-width: 100% !important;
|
|
1475
1421
|
}
|
|
1476
1422
|
|
|
1477
|
-
// Enhanced map controls for Mapbox GL
|
|
1478
1423
|
.mapboxgl-ctrl-group {
|
|
1479
1424
|
border-radius: 12px !important;
|
|
1480
1425
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
|