senangwebs-tour 1.0.2 → 1.0.3
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.
- package/README.md +190 -217
- package/dist/swt-editor.css +759 -730
- package/dist/swt-editor.css.map +1 -1
- package/dist/swt-editor.js +550 -602
- package/dist/swt-editor.js.map +1 -1
- package/dist/swt-editor.min.css +1 -1
- package/dist/swt-editor.min.js +1 -1
- package/dist/swt.js +56531 -867
- package/dist/swt.js.map +1 -1
- package/dist/swt.min.js +12 -1
- package/package.json +6 -3
- package/src/editor/css/main.css +610 -581
- package/src/editor/js/export-manager.js +175 -262
- package/src/editor/js/preview-controller.js +36 -17
- package/src/editor/js/ui-controller.js +377 -362
- package/src/index.js +45 -33
package/src/editor/css/main.css
CHANGED
|
@@ -1,1002 +1,1031 @@
|
|
|
1
1
|
/* SenangWebs Tour Editor - Main Styles */
|
|
2
2
|
|
|
3
|
+
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
|
|
4
|
+
|
|
3
5
|
* {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
font-family: var(--font-family);
|
|
7
10
|
}
|
|
8
11
|
|
|
9
12
|
:root {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
13
|
+
--font-family: "Outfit", sans-serif;
|
|
14
|
+
--bg-primary: #09090b; /* darker */
|
|
15
|
+
--bg-secondary: #18181b; /* dark (brand.dark) */
|
|
16
|
+
--bg-tertiary: #1f1f22; /* slightly lighter for panels */
|
|
17
|
+
--bg-hover: #232426; /* hover state for dark surfaces */
|
|
18
|
+
--border-color: #2a2a2d; /* subtle border on dark bg */
|
|
19
|
+
--text-primary: #ffffff; /* readable on dark backgrounds */
|
|
20
|
+
--text-secondary: #d4d4d4; /* soft mint/teal for secondary text */
|
|
21
|
+
--text-muted: #7a8086; /* muted gray for helper text */
|
|
22
|
+
--accent-primary: #00ff99; /* brand primary */
|
|
23
|
+
--accent-hover: #00d882; /* ~15% darker than primary for hover */
|
|
24
|
+
--accent-cyan: #00d1e6; /* cyan/teal accent (mix of primary + blue tone) */
|
|
25
|
+
--success: #006045; /* green success tone (derived from primary) */
|
|
26
|
+
--danger: #ef4444; /* standard danger red */
|
|
27
|
+
--warning: #f59e0b; /* standard warning orange */
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
body {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
overflow: hidden;
|
|
31
|
+
background: var(--bg-primary);
|
|
32
|
+
color: var(--text-primary);
|
|
33
|
+
height: 100vh;
|
|
34
|
+
overflow: hidden;
|
|
32
35
|
}
|
|
33
36
|
|
|
34
37
|
/* Header */
|
|
35
38
|
.editor-header {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
background: var(--bg-secondary);
|
|
40
|
+
border-bottom: 1px solid var(--border-color);
|
|
41
|
+
padding: 12px 20px;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: space-between;
|
|
45
|
+
height: 60px;
|
|
43
46
|
}
|
|
44
47
|
|
|
45
48
|
.header-left {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
gap: 16px;
|
|
49
52
|
}
|
|
50
53
|
|
|
51
54
|
.logo {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
gap: 8px;
|
|
58
|
+
font-size: 18px;
|
|
59
|
+
font-weight: 600;
|
|
57
60
|
}
|
|
58
61
|
|
|
59
62
|
.logo-icon {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
width: 24px;
|
|
64
|
+
height: 24px;
|
|
65
|
+
background: linear-gradient(
|
|
66
|
+
135deg,
|
|
67
|
+
var(--accent-primary),
|
|
68
|
+
var(--accent-cyan)
|
|
69
|
+
);
|
|
70
|
+
border-radius: 4px;
|
|
64
71
|
}
|
|
65
72
|
|
|
66
73
|
.project-info {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
74
|
+
display: flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
gap: 8px;
|
|
77
|
+
padding-left: 16px;
|
|
78
|
+
border-left: 1px solid var(--border-color);
|
|
72
79
|
}
|
|
73
80
|
|
|
74
81
|
.project-label {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
82
|
+
color: var(--text-muted);
|
|
83
|
+
font-size: 12px;
|
|
84
|
+
text-transform: uppercase;
|
|
85
|
+
letter-spacing: 0.5px;
|
|
79
86
|
}
|
|
80
87
|
|
|
81
88
|
.project-name {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
89
|
+
color: var(--text-primary);
|
|
90
|
+
font-size: 14px;
|
|
91
|
+
font-weight: 500;
|
|
85
92
|
}
|
|
86
93
|
|
|
87
94
|
.header-actions {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
95
|
+
display: flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
gap: 8px;
|
|
91
98
|
}
|
|
92
99
|
|
|
93
100
|
.btn {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
101
|
+
padding: 8px 16px;
|
|
102
|
+
border: none;
|
|
103
|
+
border-radius: 6px;
|
|
104
|
+
font-size: 14px;
|
|
105
|
+
font-weight: 500;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
transition: all 0.2s;
|
|
108
|
+
display: flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
gap: 6px;
|
|
104
111
|
}
|
|
105
112
|
|
|
106
113
|
.btn-secondary {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
114
|
+
background: var(--bg-tertiary);
|
|
115
|
+
color: var(--text-primary);
|
|
116
|
+
border: 1px solid var(--border-color);
|
|
110
117
|
}
|
|
111
118
|
|
|
112
119
|
.btn-secondary:hover {
|
|
113
|
-
|
|
120
|
+
background: var(--bg-hover);
|
|
114
121
|
}
|
|
115
122
|
|
|
116
123
|
.btn-primary {
|
|
117
|
-
|
|
118
|
-
|
|
124
|
+
background: var(--accent-primary);
|
|
125
|
+
color: var(--bg-primary);
|
|
119
126
|
}
|
|
120
127
|
|
|
121
128
|
.btn-primary:hover {
|
|
122
|
-
|
|
129
|
+
background: var(--accent-hover);
|
|
123
130
|
}
|
|
124
131
|
|
|
125
132
|
.btn-success {
|
|
126
|
-
|
|
127
|
-
|
|
133
|
+
background: var(--success);
|
|
134
|
+
color: white;
|
|
128
135
|
}
|
|
129
136
|
|
|
130
137
|
.btn-success:hover {
|
|
131
|
-
|
|
138
|
+
opacity: 0.9;
|
|
132
139
|
}
|
|
133
140
|
|
|
134
141
|
.btn-icon {
|
|
135
|
-
|
|
136
|
-
|
|
142
|
+
width: 16px;
|
|
143
|
+
height: 16px;
|
|
137
144
|
}
|
|
138
145
|
|
|
139
146
|
/* Main Layout */
|
|
140
147
|
.editor-main {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
148
|
+
display: flex;
|
|
149
|
+
height: calc(100vh - 60px);
|
|
150
|
+
position: relative;
|
|
144
151
|
}
|
|
145
152
|
|
|
146
153
|
/* Sidebar */
|
|
147
154
|
.sidebar {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
155
|
+
width: 280px;
|
|
156
|
+
background: var(--bg-secondary);
|
|
157
|
+
border-right: 1px solid var(--border-color);
|
|
158
|
+
display: flex;
|
|
159
|
+
flex-direction: column;
|
|
153
160
|
}
|
|
154
161
|
|
|
155
162
|
.sidebar-header {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
163
|
+
padding: 12px 16px;
|
|
164
|
+
border-bottom: 1px solid var(--border-color);
|
|
165
|
+
display: flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
justify-content: space-between;
|
|
161
168
|
}
|
|
162
169
|
|
|
163
170
|
.sidebar-title {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
171
|
+
font-size: 14px;
|
|
172
|
+
font-weight: 600;
|
|
173
|
+
text-transform: uppercase;
|
|
174
|
+
letter-spacing: 0.5px;
|
|
175
|
+
color: var(--text-secondary);
|
|
169
176
|
}
|
|
170
177
|
|
|
171
178
|
.btn-add {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
179
|
+
background: var(--accent-primary);
|
|
180
|
+
color: var(--bg-primary);
|
|
181
|
+
padding: 8px 16px;
|
|
182
|
+
border: none;
|
|
183
|
+
border-radius: 6px;
|
|
184
|
+
font-size: 14px;
|
|
185
|
+
font-weight: 500;
|
|
186
|
+
cursor: pointer;
|
|
187
|
+
transition: all 0.2s;
|
|
188
|
+
display: flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
gap: 6px;
|
|
184
191
|
}
|
|
185
192
|
|
|
186
193
|
.btn-add:hover {
|
|
187
|
-
|
|
194
|
+
background: var(--accent-hover);
|
|
188
195
|
}
|
|
189
196
|
|
|
190
197
|
.scenes-list {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
198
|
+
flex: 1;
|
|
199
|
+
overflow-y: auto;
|
|
200
|
+
padding: 12px;
|
|
194
201
|
}
|
|
195
202
|
|
|
196
203
|
.scene-card {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
204
|
+
background: var(--bg-tertiary);
|
|
205
|
+
border: 2px solid transparent;
|
|
206
|
+
border-radius: 8px;
|
|
207
|
+
margin-bottom: 12px;
|
|
208
|
+
cursor: pointer;
|
|
209
|
+
transition: all 0.2s;
|
|
210
|
+
position: relative;
|
|
211
|
+
overflow: hidden;
|
|
205
212
|
}
|
|
206
213
|
|
|
207
214
|
.scene-card img {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
215
|
+
width: 100%;
|
|
216
|
+
aspect-ratio: 2/1;
|
|
217
|
+
object-fit: cover;
|
|
211
218
|
}
|
|
212
219
|
|
|
213
220
|
.scene-card:hover {
|
|
214
|
-
|
|
221
|
+
border-color: var(--border-color);
|
|
215
222
|
}
|
|
216
223
|
|
|
217
224
|
.scene-card.active {
|
|
218
|
-
|
|
219
|
-
|
|
225
|
+
border-color: var(--accent-primary);
|
|
226
|
+
background: rgba(59, 130, 246, 0.1);
|
|
220
227
|
}
|
|
221
228
|
|
|
222
229
|
.scene-thumbnail {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
+
width: 100%;
|
|
231
|
+
height: 120px;
|
|
232
|
+
background: var(--bg-primary);
|
|
233
|
+
border-radius: 4px;
|
|
234
|
+
margin-bottom: 8px;
|
|
235
|
+
overflow: hidden;
|
|
236
|
+
position: relative;
|
|
230
237
|
}
|
|
231
238
|
|
|
232
239
|
.scene-thumbnail img {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
240
|
+
width: 100%;
|
|
241
|
+
height: 100%;
|
|
242
|
+
object-fit: cover;
|
|
236
243
|
}
|
|
237
244
|
|
|
238
245
|
.scene-info {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
246
|
+
display: flex;
|
|
247
|
+
flex-direction: column;
|
|
248
|
+
gap: 4px;
|
|
249
|
+
margin: 6px 8px;
|
|
243
250
|
}
|
|
244
251
|
|
|
245
252
|
.scene-name {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
253
|
+
font-size: 14px;
|
|
254
|
+
font-weight: 500;
|
|
255
|
+
color: var(--text-primary);
|
|
249
256
|
}
|
|
250
257
|
|
|
251
258
|
.scene-meta {
|
|
252
|
-
|
|
253
|
-
|
|
259
|
+
font-size: 12px;
|
|
260
|
+
color: var(--text-muted);
|
|
254
261
|
}
|
|
255
262
|
|
|
256
263
|
.scene-actions {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
264
|
+
display: flex;
|
|
265
|
+
gap: 4px;
|
|
266
|
+
margin: 6px 8px;
|
|
260
267
|
}
|
|
261
268
|
|
|
262
269
|
.btn-icon-small {
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
270
|
+
padding: 4px 8px;
|
|
271
|
+
background: var(--bg-hover);
|
|
272
|
+
border: 1px solid var(--border-color);
|
|
273
|
+
border-radius: 4px;
|
|
274
|
+
cursor: pointer;
|
|
275
|
+
font-size: 11px;
|
|
276
|
+
color: var(--text-secondary);
|
|
277
|
+
transition: all 0.2s;
|
|
271
278
|
}
|
|
272
279
|
|
|
273
280
|
.btn-icon-small:hover {
|
|
274
|
-
|
|
275
|
-
|
|
281
|
+
background: var(--bg-tertiary);
|
|
282
|
+
color: var(--text-primary);
|
|
276
283
|
}
|
|
277
284
|
|
|
278
285
|
.btn-icon {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
286
|
+
width: 32px;
|
|
287
|
+
height: 32px;
|
|
288
|
+
display: flex;
|
|
289
|
+
align-items: center;
|
|
290
|
+
justify-content: center;
|
|
291
|
+
background: transparent;
|
|
292
|
+
border: 1px solid var(--border-color);
|
|
293
|
+
border-radius: 4px;
|
|
294
|
+
cursor: pointer;
|
|
295
|
+
font-size: 16px;
|
|
296
|
+
color: var(--text-secondary);
|
|
297
|
+
transition: all 0.2s;
|
|
288
298
|
}
|
|
289
299
|
|
|
290
300
|
.btn-icon:hover {
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
301
|
+
background: var(--danger);
|
|
302
|
+
color: white;
|
|
303
|
+
border-color: var(--danger);
|
|
294
304
|
}
|
|
295
305
|
|
|
296
306
|
.drag-handle {
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
307
|
+
position: absolute;
|
|
308
|
+
top: 8px;
|
|
309
|
+
right: 8px;
|
|
310
|
+
cursor: move;
|
|
311
|
+
padding: 8px;
|
|
312
|
+
background: rgba(0, 0, 0, 0.75);
|
|
313
|
+
border-radius: 4px;
|
|
314
|
+
z-index: 10;
|
|
315
|
+
cursor: move;
|
|
316
|
+
width: 32px;
|
|
317
|
+
height: 32px;
|
|
318
|
+
display: flex;
|
|
319
|
+
align-items: center;
|
|
320
|
+
justify-content: center;
|
|
321
|
+
fill: var(--text-secondary);
|
|
312
322
|
}
|
|
313
323
|
|
|
314
324
|
/* Canvas Area */
|
|
315
325
|
.canvas-area {
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
326
|
+
flex: 1;
|
|
327
|
+
display: flex;
|
|
328
|
+
flex-direction: column;
|
|
329
|
+
background: var(--bg-primary);
|
|
320
330
|
}
|
|
321
331
|
|
|
322
332
|
.canvas-area.preview-active {
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
333
|
+
position: absolute;
|
|
334
|
+
top: 0px;
|
|
335
|
+
left: 0px;
|
|
336
|
+
width: 100vw;
|
|
337
|
+
height: 100%;
|
|
338
|
+
z-index: 100;
|
|
329
339
|
}
|
|
330
340
|
|
|
331
341
|
.toolbar {
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
342
|
+
background: var(--bg-secondary);
|
|
343
|
+
border-bottom: 1px solid var(--border-color);
|
|
344
|
+
padding: 12px 16px;
|
|
345
|
+
display: flex;
|
|
346
|
+
align-items: center;
|
|
347
|
+
justify-content: center;
|
|
338
348
|
}
|
|
339
349
|
|
|
340
350
|
.toolbar-tabs {
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
351
|
+
display: grid;
|
|
352
|
+
grid-template-columns: repeat(3, 1fr);
|
|
353
|
+
width: 100%;
|
|
354
|
+
justify-content: space-evenly;
|
|
355
|
+
gap: 8px;
|
|
345
356
|
}
|
|
346
357
|
|
|
347
358
|
.tab {
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
359
|
+
padding: 6px 8px;
|
|
360
|
+
display: flex;
|
|
361
|
+
flex-direction: column;
|
|
362
|
+
align-items: center;
|
|
363
|
+
justify-content: center;
|
|
364
|
+
background: transparent;
|
|
365
|
+
border: none;
|
|
366
|
+
border-radius: 6px;
|
|
367
|
+
color: var(--text-secondary);
|
|
368
|
+
font-size: 14px;
|
|
369
|
+
font-weight: 500;
|
|
370
|
+
cursor: pointer;
|
|
371
|
+
transition: all 0.2s;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.tab ss-icon {
|
|
375
|
+
font-size: 20px;
|
|
357
376
|
}
|
|
358
377
|
|
|
359
378
|
.tab:hover {
|
|
360
|
-
|
|
361
|
-
|
|
379
|
+
background: var(--bg-tertiary);
|
|
380
|
+
color: var(--text-primary);
|
|
362
381
|
}
|
|
363
382
|
|
|
364
383
|
.tab.active {
|
|
365
|
-
|
|
366
|
-
|
|
384
|
+
background: var(--accent-primary);
|
|
385
|
+
color: var(--bg-primary);
|
|
367
386
|
}
|
|
368
387
|
|
|
369
388
|
.toolbar-controls {
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
389
|
+
display: flex;
|
|
390
|
+
gap: 8px;
|
|
391
|
+
align-items: center;
|
|
373
392
|
}
|
|
374
393
|
|
|
375
394
|
.zoom-control {
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
395
|
+
display: flex;
|
|
396
|
+
align-items: center;
|
|
397
|
+
gap: 8px;
|
|
398
|
+
padding: 4px 12px;
|
|
399
|
+
background: var(--bg-tertiary);
|
|
400
|
+
border-radius: 6px;
|
|
401
|
+
border: 1px solid var(--border-color);
|
|
383
402
|
}
|
|
384
403
|
|
|
385
404
|
.zoom-btn {
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
405
|
+
background: none;
|
|
406
|
+
border: none;
|
|
407
|
+
color: var(--text-secondary);
|
|
408
|
+
cursor: pointer;
|
|
409
|
+
padding: 4px;
|
|
410
|
+
font-size: 16px;
|
|
411
|
+
transition: color 0.2s;
|
|
393
412
|
}
|
|
394
413
|
|
|
395
414
|
.zoom-btn:hover {
|
|
396
|
-
|
|
415
|
+
color: var(--text-primary);
|
|
397
416
|
}
|
|
398
417
|
|
|
399
418
|
.zoom-value {
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
419
|
+
font-size: 12px;
|
|
420
|
+
color: var(--text-secondary);
|
|
421
|
+
min-width: 40px;
|
|
422
|
+
text-align: center;
|
|
404
423
|
}
|
|
405
424
|
|
|
406
425
|
.canvas-container {
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
426
|
+
flex: 1;
|
|
427
|
+
display: flex;
|
|
428
|
+
align-items: center;
|
|
429
|
+
justify-content: center;
|
|
430
|
+
padding: 20px;
|
|
431
|
+
overflow: hidden;
|
|
432
|
+
position: relative;
|
|
414
433
|
}
|
|
415
434
|
|
|
416
435
|
.preview-container {
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
436
|
+
flex: 1;
|
|
437
|
+
width: 100%;
|
|
438
|
+
height: 100%;
|
|
439
|
+
position: relative;
|
|
421
440
|
}
|
|
422
441
|
|
|
423
442
|
.preview-area {
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
443
|
+
width: 100%;
|
|
444
|
+
height: 100%;
|
|
445
|
+
position: relative;
|
|
427
446
|
}
|
|
428
447
|
|
|
429
448
|
#preview {
|
|
430
|
-
|
|
431
|
-
|
|
449
|
+
width: 100%;
|
|
450
|
+
height: 100%;
|
|
432
451
|
}
|
|
433
452
|
|
|
434
453
|
.preview-empty {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
454
|
+
display: flex;
|
|
455
|
+
flex-direction: column;
|
|
456
|
+
align-items: center;
|
|
457
|
+
justify-content: center;
|
|
458
|
+
height: 100%;
|
|
459
|
+
color: var(--text-muted);
|
|
441
460
|
}
|
|
442
461
|
|
|
443
462
|
.preview-empty p {
|
|
444
|
-
|
|
463
|
+
margin: 4px 0;
|
|
445
464
|
}
|
|
446
465
|
|
|
447
466
|
.canvas-viewport {
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
467
|
+
width: 100%;
|
|
468
|
+
max-width: 1200px;
|
|
469
|
+
aspect-ratio: 16/9;
|
|
470
|
+
background: var(--bg-secondary);
|
|
471
|
+
border-radius: 8px;
|
|
472
|
+
border: 1px solid var(--border-color);
|
|
473
|
+
position: relative;
|
|
474
|
+
overflow: hidden;
|
|
456
475
|
}
|
|
457
476
|
|
|
458
477
|
.canvas-viewport img {
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
478
|
+
width: 100%;
|
|
479
|
+
height: 100%;
|
|
480
|
+
object-fit: cover;
|
|
462
481
|
}
|
|
463
482
|
|
|
464
483
|
.hotspot-marker {
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
484
|
+
position: absolute;
|
|
485
|
+
width: 40px;
|
|
486
|
+
height: 40px;
|
|
487
|
+
border-radius: 50%;
|
|
488
|
+
border: 3px solid white;
|
|
489
|
+
cursor: pointer;
|
|
490
|
+
transition: all 0.2s;
|
|
491
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
473
492
|
}
|
|
474
493
|
|
|
475
494
|
.hotspot-marker:hover {
|
|
476
|
-
|
|
477
|
-
|
|
495
|
+
transform: scale(1.2);
|
|
496
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
478
497
|
}
|
|
479
498
|
|
|
480
499
|
.hotspot-marker.selected {
|
|
481
|
-
|
|
482
|
-
|
|
500
|
+
border-width: 4px;
|
|
501
|
+
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
|
|
483
502
|
}
|
|
484
503
|
|
|
485
504
|
.empty-state {
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
505
|
+
text-align: center;
|
|
506
|
+
padding: 40px 20px;
|
|
507
|
+
color: var(--text-muted);
|
|
489
508
|
}
|
|
490
509
|
|
|
491
510
|
.empty-state p {
|
|
492
|
-
|
|
511
|
+
margin: 8px 0;
|
|
493
512
|
}
|
|
494
513
|
|
|
495
514
|
.empty-state .hint {
|
|
496
|
-
|
|
497
|
-
|
|
515
|
+
font-size: 12px;
|
|
516
|
+
color: var(--text-muted);
|
|
498
517
|
}
|
|
499
518
|
|
|
500
519
|
/* Properties Panel */
|
|
501
520
|
.properties-panel {
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
521
|
+
width: 320px;
|
|
522
|
+
background: var(--bg-secondary);
|
|
523
|
+
border-left: 1px solid var(--border-color);
|
|
524
|
+
display: flex;
|
|
525
|
+
flex-direction: column;
|
|
507
526
|
}
|
|
508
527
|
|
|
509
528
|
.panel-header {
|
|
510
|
-
|
|
511
|
-
|
|
529
|
+
padding: 16px;
|
|
530
|
+
border-bottom: 1px solid var(--border-color);
|
|
512
531
|
}
|
|
513
532
|
|
|
514
533
|
.panel-title {
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
534
|
+
font-size: 14px;
|
|
535
|
+
font-weight: 600;
|
|
536
|
+
text-transform: uppercase;
|
|
537
|
+
letter-spacing: 0.5px;
|
|
538
|
+
color: var(--text-secondary);
|
|
520
539
|
}
|
|
521
540
|
|
|
522
541
|
.panel-content {
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
542
|
+
flex: 1;
|
|
543
|
+
overflow-y: auto;
|
|
544
|
+
padding: 16px;
|
|
526
545
|
}
|
|
527
546
|
|
|
528
547
|
.form-group {
|
|
529
|
-
|
|
548
|
+
margin-bottom: 20px;
|
|
530
549
|
}
|
|
531
550
|
|
|
532
551
|
.form-label {
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
552
|
+
display: block;
|
|
553
|
+
font-size: 12px;
|
|
554
|
+
font-weight: 500;
|
|
555
|
+
color: var(--text-secondary);
|
|
556
|
+
margin-bottom: 8px;
|
|
557
|
+
text-transform: uppercase;
|
|
558
|
+
letter-spacing: 0.5px;
|
|
540
559
|
}
|
|
541
560
|
|
|
542
561
|
.form-input {
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
562
|
+
width: 100%;
|
|
563
|
+
padding: 10px 12px;
|
|
564
|
+
background: var(--bg-tertiary);
|
|
565
|
+
border: 1px solid var(--border-color);
|
|
566
|
+
border-radius: 6px;
|
|
567
|
+
color: var(--text-primary);
|
|
568
|
+
font-size: 14px;
|
|
569
|
+
transition: all 0.2s;
|
|
551
570
|
}
|
|
552
571
|
|
|
553
572
|
.form-input:focus {
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
573
|
+
outline: none;
|
|
574
|
+
border-color: var(--accent-primary);
|
|
575
|
+
background: var(--bg-primary);
|
|
557
576
|
}
|
|
558
577
|
|
|
559
578
|
.form-textarea {
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
579
|
+
min-height: 80px;
|
|
580
|
+
resize: vertical;
|
|
581
|
+
font-family: inherit;
|
|
563
582
|
}
|
|
564
583
|
|
|
565
584
|
.form-select {
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
585
|
+
width: 100%;
|
|
586
|
+
padding: 10px 12px;
|
|
587
|
+
background: var(--bg-tertiary);
|
|
588
|
+
border: 1px solid var(--border-color);
|
|
589
|
+
border-radius: 6px;
|
|
590
|
+
color: var(--text-primary);
|
|
591
|
+
font-size: 14px;
|
|
592
|
+
cursor: pointer;
|
|
574
593
|
}
|
|
575
594
|
|
|
576
595
|
.form-checkbox {
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
596
|
+
display: flex;
|
|
597
|
+
align-items: center;
|
|
598
|
+
gap: 8px;
|
|
599
|
+
cursor: pointer;
|
|
581
600
|
}
|
|
582
601
|
|
|
583
602
|
.form-checkbox input {
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
603
|
+
width: 18px;
|
|
604
|
+
height: 18px;
|
|
605
|
+
cursor: pointer;
|
|
587
606
|
}
|
|
588
607
|
|
|
589
608
|
.form-checkbox label {
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
609
|
+
font-size: 14px;
|
|
610
|
+
color: var(--text-primary);
|
|
611
|
+
cursor: pointer;
|
|
593
612
|
}
|
|
594
613
|
|
|
595
614
|
.color-picker-group {
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
615
|
+
display: flex;
|
|
616
|
+
gap: 12px;
|
|
617
|
+
align-items: center;
|
|
599
618
|
}
|
|
600
619
|
|
|
601
620
|
.color-preview {
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
621
|
+
width: 40px;
|
|
622
|
+
height: 40px;
|
|
623
|
+
border-radius: 6px;
|
|
624
|
+
border: 2px solid var(--border-color);
|
|
625
|
+
cursor: pointer;
|
|
607
626
|
}
|
|
608
627
|
|
|
609
628
|
.color-input {
|
|
610
|
-
|
|
629
|
+
flex: 1;
|
|
611
630
|
}
|
|
612
631
|
|
|
613
632
|
.position-grid {
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
633
|
+
display: grid;
|
|
634
|
+
grid-template-columns: repeat(3, 1fr);
|
|
635
|
+
gap: 8px;
|
|
617
636
|
}
|
|
618
637
|
|
|
619
638
|
.position-input {
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
639
|
+
padding: 8px;
|
|
640
|
+
background: var(--bg-tertiary);
|
|
641
|
+
border: 1px solid var(--border-color);
|
|
642
|
+
border-radius: 4px;
|
|
643
|
+
color: var(--text-primary);
|
|
644
|
+
font-size: 12px;
|
|
645
|
+
text-align: center;
|
|
627
646
|
}
|
|
628
647
|
|
|
629
648
|
.hotspot-controls {
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
649
|
+
display: flex;
|
|
650
|
+
gap: 8px;
|
|
651
|
+
margin-bottom: 20px;
|
|
652
|
+
justify-content: space-between;
|
|
634
653
|
}
|
|
635
654
|
|
|
636
655
|
.hotspot-list {
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
656
|
+
display: flex;
|
|
657
|
+
flex-direction: column;
|
|
658
|
+
gap: 8px;
|
|
659
|
+
margin-bottom: 16px;
|
|
641
660
|
}
|
|
642
661
|
|
|
643
662
|
.hotspot-item {
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
663
|
+
display: flex;
|
|
664
|
+
align-items: center;
|
|
665
|
+
gap: 12px;
|
|
666
|
+
padding: 12px;
|
|
667
|
+
background: var(--bg-tertiary);
|
|
668
|
+
border: 2px solid transparent;
|
|
669
|
+
border-radius: 6px;
|
|
670
|
+
cursor: pointer;
|
|
671
|
+
transition: all 0.2s;
|
|
653
672
|
}
|
|
654
673
|
|
|
655
674
|
.hotspot-item:hover {
|
|
656
|
-
|
|
675
|
+
border-color: var(--border-color);
|
|
657
676
|
}
|
|
658
677
|
|
|
659
678
|
.hotspot-item.active {
|
|
660
|
-
|
|
661
|
-
|
|
679
|
+
border-color: var(--accent-primary);
|
|
680
|
+
background: rgba(59, 130, 246, 0.1);
|
|
662
681
|
}
|
|
663
682
|
|
|
664
683
|
.hotspot-color {
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
684
|
+
width: 24px;
|
|
685
|
+
height: 24px;
|
|
686
|
+
border-radius: 4px;
|
|
687
|
+
border: 2px solid var(--border-color);
|
|
688
|
+
flex-shrink: 0;
|
|
670
689
|
}
|
|
671
690
|
|
|
672
691
|
.hotspot-info {
|
|
673
|
-
|
|
674
|
-
|
|
692
|
+
flex: 1;
|
|
693
|
+
min-width: 0;
|
|
675
694
|
}
|
|
676
695
|
|
|
677
696
|
.hotspot-title {
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
697
|
+
font-size: 14px;
|
|
698
|
+
font-weight: 500;
|
|
699
|
+
color: var(--text-primary);
|
|
700
|
+
white-space: nowrap;
|
|
701
|
+
overflow: hidden;
|
|
702
|
+
text-overflow: ellipsis;
|
|
684
703
|
}
|
|
685
704
|
|
|
686
705
|
.hotspot-target {
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
706
|
+
font-size: 12px;
|
|
707
|
+
color: var(--text-muted);
|
|
708
|
+
white-space: nowrap;
|
|
709
|
+
overflow: hidden;
|
|
710
|
+
text-overflow: ellipsis;
|
|
692
711
|
}
|
|
693
712
|
|
|
694
713
|
.hotspot-actions {
|
|
695
|
-
|
|
696
|
-
|
|
714
|
+
display: flex;
|
|
715
|
+
gap: 4px;
|
|
697
716
|
}
|
|
698
717
|
|
|
699
718
|
.btn-delete {
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
719
|
+
width: 32px;
|
|
720
|
+
height: 32px;
|
|
721
|
+
display: flex;
|
|
722
|
+
align-items: center;
|
|
723
|
+
justify-content: center;
|
|
724
|
+
background: transparent;
|
|
725
|
+
border: 1px solid var(--danger);
|
|
726
|
+
border-radius: 4px;
|
|
727
|
+
color: var(--danger);
|
|
728
|
+
cursor: pointer;
|
|
729
|
+
font-size: 16px;
|
|
730
|
+
transition: all 0.2s;
|
|
708
731
|
}
|
|
709
732
|
|
|
710
733
|
.btn-delete:hover {
|
|
711
|
-
|
|
712
|
-
|
|
734
|
+
background: var(--danger);
|
|
735
|
+
color: white;
|
|
713
736
|
}
|
|
714
737
|
|
|
715
738
|
.section {
|
|
716
|
-
|
|
739
|
+
margin-bottom: 20px;
|
|
717
740
|
}
|
|
718
741
|
|
|
719
742
|
.section h3 {
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
743
|
+
font-size: 14px;
|
|
744
|
+
font-weight: 600;
|
|
745
|
+
color: var(--text-secondary);
|
|
746
|
+
margin-bottom: 16px;
|
|
747
|
+
text-transform: uppercase;
|
|
748
|
+
letter-spacing: 0.5px;
|
|
726
749
|
}
|
|
727
750
|
|
|
728
751
|
.btn-block {
|
|
729
|
-
|
|
752
|
+
width: 100%;
|
|
730
753
|
}
|
|
731
754
|
|
|
732
755
|
/* Toast Notification */
|
|
733
756
|
.toast {
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
757
|
+
position: fixed;
|
|
758
|
+
bottom: 20px;
|
|
759
|
+
right: 20px;
|
|
760
|
+
background: var(--bg-secondary);
|
|
761
|
+
color: var(--text-primary);
|
|
762
|
+
padding: 12px 20px;
|
|
763
|
+
border-radius: 8px;
|
|
764
|
+
border: 1px solid var(--border-color);
|
|
765
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
766
|
+
opacity: 0;
|
|
767
|
+
transform: translateY(20px);
|
|
768
|
+
transition: all 0.3s;
|
|
769
|
+
pointer-events: none;
|
|
770
|
+
z-index: 10000;
|
|
748
771
|
}
|
|
749
772
|
|
|
750
773
|
.toast.show {
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
774
|
+
opacity: 1;
|
|
775
|
+
transform: translateY(0);
|
|
776
|
+
pointer-events: auto;
|
|
754
777
|
}
|
|
755
778
|
|
|
756
779
|
.toast.success {
|
|
757
|
-
|
|
758
|
-
|
|
780
|
+
border-color: var(--success);
|
|
781
|
+
background: rgba(16, 185, 129, 0.1);
|
|
759
782
|
}
|
|
760
783
|
|
|
761
784
|
.toast.error {
|
|
762
|
-
|
|
763
|
-
|
|
785
|
+
border-color: var(--danger);
|
|
786
|
+
background: rgba(239, 68, 68, 0.1);
|
|
764
787
|
}
|
|
765
788
|
|
|
766
789
|
.toast.info {
|
|
767
|
-
|
|
768
|
-
|
|
790
|
+
border-color: var(--accent-cyan);
|
|
791
|
+
background: rgba(6, 182, 212, 0.1);
|
|
769
792
|
}
|
|
770
793
|
|
|
771
794
|
/* Modal */
|
|
772
795
|
.modal {
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
796
|
+
display: none;
|
|
797
|
+
position: fixed;
|
|
798
|
+
top: 0;
|
|
799
|
+
left: 0;
|
|
800
|
+
width: 100%;
|
|
801
|
+
height: 100%;
|
|
802
|
+
background: rgba(0, 0, 0, 0.7);
|
|
803
|
+
z-index: 9999;
|
|
804
|
+
align-items: center;
|
|
805
|
+
justify-content: center;
|
|
783
806
|
}
|
|
784
807
|
|
|
785
808
|
.modal.show {
|
|
786
|
-
|
|
809
|
+
display: flex;
|
|
787
810
|
}
|
|
788
811
|
|
|
789
812
|
.modal-content {
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
813
|
+
background: var(--bg-secondary);
|
|
814
|
+
border-radius: 12px;
|
|
815
|
+
border: 1px solid var(--border-color);
|
|
816
|
+
max-width: 600px;
|
|
817
|
+
width: 90%;
|
|
818
|
+
max-height: 90vh;
|
|
819
|
+
overflow: hidden;
|
|
820
|
+
display: flex;
|
|
821
|
+
flex-direction: column;
|
|
799
822
|
}
|
|
800
823
|
|
|
801
824
|
.modal-header {
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
825
|
+
padding: 20px;
|
|
826
|
+
border-bottom: 1px solid var(--border-color);
|
|
827
|
+
display: flex;
|
|
828
|
+
align-items: center;
|
|
829
|
+
justify-content: space-between;
|
|
807
830
|
}
|
|
808
831
|
|
|
809
832
|
.modal-header h3 {
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
833
|
+
font-size: 18px;
|
|
834
|
+
font-weight: 600;
|
|
835
|
+
color: var(--text-primary);
|
|
813
836
|
}
|
|
814
837
|
|
|
815
838
|
.modal-close {
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
839
|
+
background: none;
|
|
840
|
+
border: none;
|
|
841
|
+
color: var(--text-secondary);
|
|
842
|
+
font-size: 24px;
|
|
843
|
+
cursor: pointer;
|
|
844
|
+
padding: 0;
|
|
845
|
+
width: 32px;
|
|
846
|
+
height: 32px;
|
|
847
|
+
display: flex;
|
|
848
|
+
align-items: center;
|
|
849
|
+
justify-content: center;
|
|
850
|
+
border-radius: 4px;
|
|
851
|
+
transition: all 0.2s;
|
|
829
852
|
}
|
|
830
853
|
|
|
831
854
|
.modal-close:hover {
|
|
832
|
-
|
|
833
|
-
|
|
855
|
+
background: var(--bg-hover);
|
|
856
|
+
color: var(--text-primary);
|
|
834
857
|
}
|
|
835
858
|
|
|
836
859
|
.modal-body {
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
860
|
+
padding: 20px;
|
|
861
|
+
overflow-y: auto;
|
|
862
|
+
flex: 1;
|
|
840
863
|
}
|
|
841
864
|
|
|
842
865
|
.modal-body h4 {
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
866
|
+
font-size: 16px;
|
|
867
|
+
font-weight: 600;
|
|
868
|
+
margin-top: 20px;
|
|
869
|
+
margin-bottom: 12px;
|
|
870
|
+
color: var(--text-primary);
|
|
848
871
|
}
|
|
849
872
|
|
|
850
873
|
.modal-body h4:first-child {
|
|
851
|
-
|
|
874
|
+
margin-top: 0;
|
|
852
875
|
}
|
|
853
876
|
|
|
854
877
|
.modal-body p {
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
878
|
+
margin-bottom: 12px;
|
|
879
|
+
line-height: 1.6;
|
|
880
|
+
color: var(--text-secondary);
|
|
858
881
|
}
|
|
859
882
|
|
|
860
|
-
.modal-body ul,
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
883
|
+
.modal-body ul,
|
|
884
|
+
.modal-body ol {
|
|
885
|
+
margin-bottom: 12px;
|
|
886
|
+
padding-left: 24px;
|
|
887
|
+
line-height: 1.8;
|
|
888
|
+
color: var(--text-secondary);
|
|
865
889
|
}
|
|
866
890
|
|
|
867
891
|
.modal-body li {
|
|
868
|
-
|
|
892
|
+
margin-bottom: 8px;
|
|
869
893
|
}
|
|
870
894
|
|
|
871
895
|
.modal-body kbd {
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
896
|
+
background: var(--bg-tertiary);
|
|
897
|
+
border: 1px solid var(--border-color);
|
|
898
|
+
border-radius: 4px;
|
|
899
|
+
padding: 2px 6px;
|
|
900
|
+
font-family: monospace;
|
|
901
|
+
font-size: 12px;
|
|
878
902
|
}
|
|
879
903
|
|
|
880
904
|
.modal-footer {
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
905
|
+
padding: 16px 20px;
|
|
906
|
+
border-top: 1px solid var(--border-color);
|
|
907
|
+
display: flex;
|
|
908
|
+
gap: 8px;
|
|
909
|
+
justify-content: flex-end;
|
|
886
910
|
}
|
|
887
911
|
|
|
888
912
|
.export-info {
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
913
|
+
background: var(--bg-tertiary);
|
|
914
|
+
border: 1px solid var(--border-color);
|
|
915
|
+
border-radius: 6px;
|
|
916
|
+
padding: 16px;
|
|
917
|
+
margin-bottom: 16px;
|
|
894
918
|
}
|
|
895
919
|
|
|
896
920
|
.export-info p {
|
|
897
|
-
|
|
898
|
-
|
|
921
|
+
margin-bottom: 8px;
|
|
922
|
+
font-size: 13px;
|
|
899
923
|
}
|
|
900
924
|
|
|
901
925
|
.export-info p:last-child {
|
|
902
|
-
|
|
926
|
+
margin-bottom: 0;
|
|
903
927
|
}
|
|
904
928
|
|
|
905
929
|
.export-preview {
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
930
|
+
width: 100%;
|
|
931
|
+
height: 200px;
|
|
932
|
+
background: var(--bg-tertiary);
|
|
933
|
+
border: 1px solid var(--border-color);
|
|
934
|
+
border-radius: 6px;
|
|
935
|
+
padding: 12px;
|
|
936
|
+
font-family: monospace;
|
|
937
|
+
font-size: 12px;
|
|
938
|
+
color: var(--text-primary);
|
|
939
|
+
resize: vertical;
|
|
916
940
|
}
|
|
917
941
|
|
|
918
942
|
.btn-active {
|
|
919
|
-
|
|
943
|
+
animation: pulse 2s infinite;
|
|
920
944
|
}
|
|
921
945
|
|
|
922
946
|
@keyframes pulse {
|
|
923
|
-
|
|
924
|
-
|
|
947
|
+
0%,
|
|
948
|
+
100% {
|
|
949
|
+
opacity: 1;
|
|
950
|
+
}
|
|
951
|
+
50% {
|
|
952
|
+
opacity: 0.7;
|
|
953
|
+
}
|
|
925
954
|
}
|
|
926
955
|
|
|
927
956
|
.dragging {
|
|
928
|
-
|
|
957
|
+
opacity: 0.5;
|
|
929
958
|
}
|
|
930
959
|
|
|
931
960
|
/* Scrollbar Styling */
|
|
932
961
|
::-webkit-scrollbar {
|
|
933
|
-
|
|
934
|
-
|
|
962
|
+
width: 8px;
|
|
963
|
+
height: 8px;
|
|
935
964
|
}
|
|
936
965
|
|
|
937
966
|
::-webkit-scrollbar-track {
|
|
938
|
-
|
|
967
|
+
background: var(--bg-primary);
|
|
939
968
|
}
|
|
940
969
|
|
|
941
970
|
::-webkit-scrollbar-thumb {
|
|
942
|
-
|
|
943
|
-
|
|
971
|
+
background: var(--bg-tertiary);
|
|
972
|
+
border-radius: 4px;
|
|
944
973
|
}
|
|
945
974
|
|
|
946
975
|
::-webkit-scrollbar-thumb:hover {
|
|
947
|
-
|
|
976
|
+
background: var(--bg-hover);
|
|
948
977
|
}
|
|
949
978
|
|
|
950
979
|
/* Loading Overlay */
|
|
951
980
|
.preview-loading {
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
981
|
+
position: absolute;
|
|
982
|
+
top: 0;
|
|
983
|
+
left: 0;
|
|
984
|
+
right: 0;
|
|
985
|
+
bottom: 0;
|
|
986
|
+
background: rgba(9, 9, 11, 0.85);
|
|
987
|
+
backdrop-filter: blur(4px);
|
|
988
|
+
display: flex;
|
|
989
|
+
flex-direction: column;
|
|
990
|
+
align-items: center;
|
|
991
|
+
justify-content: center;
|
|
992
|
+
z-index: 1000;
|
|
993
|
+
transition: opacity 0.3s ease;
|
|
965
994
|
}
|
|
966
995
|
|
|
967
996
|
.preview-loading.hidden {
|
|
968
|
-
|
|
969
|
-
|
|
997
|
+
opacity: 0;
|
|
998
|
+
pointer-events: none;
|
|
970
999
|
}
|
|
971
1000
|
|
|
972
1001
|
.loading-spinner {
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
1002
|
+
width: 48px;
|
|
1003
|
+
height: 48px;
|
|
1004
|
+
border: 3px solid var(--border-color);
|
|
1005
|
+
border-top-color: var(--accent-primary);
|
|
1006
|
+
border-radius: 50%;
|
|
1007
|
+
animation: spin 0.8s linear infinite;
|
|
979
1008
|
}
|
|
980
1009
|
|
|
981
1010
|
.loading-text {
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
1011
|
+
margin-top: 16px;
|
|
1012
|
+
color: var(--text-secondary);
|
|
1013
|
+
font-size: 14px;
|
|
1014
|
+
font-weight: 500;
|
|
986
1015
|
}
|
|
987
1016
|
|
|
988
1017
|
@keyframes spin {
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
1018
|
+
to {
|
|
1019
|
+
transform: rotate(360deg);
|
|
1020
|
+
}
|
|
992
1021
|
}
|
|
993
1022
|
|
|
994
1023
|
/* Responsive */
|
|
995
1024
|
@media (max-width: 1024px) {
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1025
|
+
.sidebar {
|
|
1026
|
+
width: 240px;
|
|
1027
|
+
}
|
|
1028
|
+
.properties-panel {
|
|
1029
|
+
width: 280px;
|
|
1030
|
+
}
|
|
1002
1031
|
}
|