senangwebs-photobooth 1.0.1 → 1.0.2
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 +72 -72
- package/dist/swp.css +261 -255
- package/dist/swp.js +1 -1
- package/package.json +4 -1
- package/src/css/swp.css +261 -255
- package/src/js/swp.js +713 -611
- package/swp_preview.png +0 -0
- package/spec.md +0 -239
package/dist/swp.css
CHANGED
|
@@ -1,448 +1,454 @@
|
|
|
1
|
-
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);
|
|
2
1
|
/**
|
|
3
2
|
* SenangWebs Photobooth (SWP) - Styles
|
|
4
|
-
* @version 1.0.
|
|
3
|
+
* @version 1.0.2
|
|
5
4
|
*/
|
|
6
5
|
|
|
7
|
-
/* Font Awesome */
|
|
8
|
-
|
|
9
6
|
/* Container */
|
|
10
7
|
.swp-container {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
|
|
9
|
+
Ubuntu, Cantarell, sans-serif;
|
|
10
|
+
max-width: 1200px;
|
|
11
|
+
box-sizing: border-box;
|
|
14
12
|
}
|
|
15
13
|
|
|
16
14
|
.swp-wrapper {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
background: #ffffff;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
height: 100%;
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
22
20
|
}
|
|
23
21
|
|
|
24
22
|
/* Toolbar */
|
|
25
23
|
.swp-toolbar {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
display: flex;
|
|
25
|
+
gap: 8px;
|
|
26
|
+
padding: 8px;
|
|
27
|
+
background: #f8f9fa;
|
|
28
|
+
flex-wrap: wrap;
|
|
29
|
+
justify-content: space-between;
|
|
32
30
|
}
|
|
33
31
|
|
|
34
32
|
.swp-toolbar-group {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
display: flex;
|
|
34
|
+
gap: 0px;
|
|
35
|
+
align-items: center;
|
|
36
|
+
border: 1px solid #dee2e6;
|
|
37
|
+
border-radius: 8px;
|
|
38
|
+
overflow: hidden;
|
|
41
39
|
}
|
|
42
40
|
|
|
43
41
|
.swp-toolbar-group .swp-btn {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
gap: 0px;
|
|
45
|
+
height: 48px;
|
|
46
|
+
width: 80px;
|
|
47
|
+
min-width: 48px;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
border-radius: 0px;
|
|
51
|
+
border: none;
|
|
52
|
+
padding: 0px;
|
|
55
53
|
}
|
|
56
54
|
|
|
57
55
|
.swp-toolbar-group .swp-btn span {
|
|
58
|
-
|
|
56
|
+
font-size: 12px;
|
|
57
|
+
font-weight: 500;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.swp-toolbar-group .swp-btn .swp-icon {
|
|
61
|
+
font-size: 18px;
|
|
62
|
+
padding: 2px;
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: center;
|
|
59
66
|
}
|
|
60
67
|
|
|
61
68
|
.swp-btn {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
gap: 8px;
|
|
73
|
+
padding: 0px 12px;
|
|
74
|
+
border: 1px solid #dee2e6;
|
|
75
|
+
background: #ffffff;
|
|
76
|
+
border-radius: 6px;
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
font-size: 14px;
|
|
79
|
+
color: #495057;
|
|
80
|
+
transition: all 0.2s ease;
|
|
81
|
+
font-family: inherit;
|
|
82
|
+
height: 40px;
|
|
76
83
|
}
|
|
77
84
|
|
|
78
85
|
.swp-btn:hover {
|
|
79
|
-
|
|
80
|
-
|
|
86
|
+
background: #e9ecef;
|
|
87
|
+
border-color: #adb5bd;
|
|
81
88
|
}
|
|
82
89
|
|
|
83
90
|
.swp-btn:active {
|
|
84
|
-
|
|
91
|
+
transform: scale(0.98);
|
|
85
92
|
}
|
|
86
93
|
|
|
87
94
|
.swp-btn-primary {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
95
|
+
background: #007bff;
|
|
96
|
+
color: white;
|
|
97
|
+
border-color: #007bff;
|
|
91
98
|
}
|
|
92
99
|
|
|
93
100
|
.swp-btn-primary:hover {
|
|
94
|
-
|
|
95
|
-
|
|
101
|
+
background: #0056b3;
|
|
102
|
+
border-color: #0056b3;
|
|
96
103
|
}
|
|
97
104
|
|
|
98
105
|
.swp-btn-icon-only {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
106
|
+
padding: 0px 12px;
|
|
107
|
+
justify-content: center;
|
|
108
|
+
align-items: center;
|
|
109
|
+
aspect-ratio: 1 / 1;
|
|
110
|
+
max-width: 40px;
|
|
104
111
|
}
|
|
105
112
|
|
|
106
113
|
.swp-icon {
|
|
107
|
-
|
|
114
|
+
font-size: 18px;
|
|
108
115
|
}
|
|
109
116
|
|
|
110
117
|
.swp-layout-container {
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-grow: 1;
|
|
113
120
|
}
|
|
114
121
|
|
|
115
122
|
.swp-control-container {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
123
|
+
min-width: 348px;
|
|
124
|
+
background: #f8f9fa;
|
|
125
|
+
padding: 8px 16px;
|
|
119
126
|
}
|
|
120
127
|
|
|
121
128
|
.swp-control-container.hidden {
|
|
122
|
-
|
|
129
|
+
display: block;
|
|
123
130
|
}
|
|
124
131
|
|
|
125
132
|
/* Canvas Container */
|
|
126
133
|
.swp-canvas-container {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
134
|
+
position: relative;
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
justify-content: center;
|
|
138
|
+
min-height: 400px;
|
|
139
|
+
padding: 8px;
|
|
140
|
+
border-top: 1px solid #dee2e6;
|
|
141
|
+
border-right: 1px solid #dee2e6;
|
|
142
|
+
border-top-right-radius: 8px;
|
|
143
|
+
flex-grow: 1;
|
|
144
|
+
min-width: 452px;
|
|
138
145
|
}
|
|
139
146
|
|
|
140
147
|
.swp-canvas {
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
148
|
+
max-width: 100%;
|
|
149
|
+
height: auto;
|
|
150
|
+
background: white;
|
|
144
151
|
}
|
|
145
152
|
|
|
146
153
|
/* Adjustments Panel */
|
|
147
154
|
.swp-adjustments-panel,
|
|
148
155
|
.swp-filters-panel,
|
|
149
156
|
.swp-resize-panel {
|
|
150
|
-
|
|
157
|
+
display: none;
|
|
151
158
|
}
|
|
152
159
|
|
|
153
160
|
.swp-adjustments-panel.active,
|
|
154
161
|
.swp-filters-panel.active,
|
|
155
162
|
.swp-resize-panel.active {
|
|
156
|
-
|
|
163
|
+
display: block;
|
|
157
164
|
}
|
|
158
165
|
|
|
159
166
|
.swp-adjustments-panel h3,
|
|
160
167
|
.swp-filters-panel h3,
|
|
161
168
|
.swp-resize-panel h3 {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
169
|
+
margin: 0 0 15px 0;
|
|
170
|
+
font-size: 16px;
|
|
171
|
+
font-weight: 600;
|
|
172
|
+
color: #212529;
|
|
166
173
|
}
|
|
167
174
|
|
|
168
175
|
.swp-adjustment {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
176
|
+
display: flex;
|
|
177
|
+
align-items: center;
|
|
178
|
+
gap: 12px;
|
|
179
|
+
margin-bottom: 15px;
|
|
180
|
+
width: 100%;
|
|
174
181
|
}
|
|
175
182
|
|
|
176
183
|
.swp-adjustment label {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
184
|
+
min-width: 100px;
|
|
185
|
+
font-size: 14px;
|
|
186
|
+
color: #495057;
|
|
187
|
+
font-weight: 500;
|
|
181
188
|
}
|
|
182
189
|
|
|
183
190
|
.swp-adjustment input[type="range"] {
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
+
flex: 1;
|
|
192
|
+
flex-shrink: 1;
|
|
193
|
+
height: 6px;
|
|
194
|
+
border-radius: 3px;
|
|
195
|
+
background: #e9ecef;
|
|
196
|
+
outline: none;
|
|
197
|
+
-webkit-appearance: none;
|
|
191
198
|
}
|
|
192
199
|
|
|
193
200
|
.swp-adjustment input[type="range"]::-webkit-slider-thumb {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
201
|
+
-webkit-appearance: none;
|
|
202
|
+
appearance: none;
|
|
203
|
+
width: 18px;
|
|
204
|
+
height: 18px;
|
|
205
|
+
border-radius: 50%;
|
|
206
|
+
background: #007bff;
|
|
207
|
+
cursor: pointer;
|
|
208
|
+
transition: all 0.2s ease;
|
|
202
209
|
}
|
|
203
210
|
|
|
204
211
|
.swp-adjustment input[type="range"]::-webkit-slider-thumb:hover {
|
|
205
|
-
|
|
206
|
-
|
|
212
|
+
background: #0056b3;
|
|
213
|
+
transform: scale(1.1);
|
|
207
214
|
}
|
|
208
215
|
|
|
209
216
|
.swp-adjustment input[type="range"]::-moz-range-thumb {
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
+
width: 18px;
|
|
218
|
+
height: 18px;
|
|
219
|
+
border-radius: 50%;
|
|
220
|
+
background: #007bff;
|
|
221
|
+
cursor: pointer;
|
|
222
|
+
border: none;
|
|
223
|
+
transition: all 0.2s ease;
|
|
217
224
|
}
|
|
218
225
|
|
|
219
226
|
.swp-adjustment input[type="range"]::-moz-range-thumb:hover {
|
|
220
|
-
|
|
221
|
-
|
|
227
|
+
background: #0056b3;
|
|
228
|
+
transform: scale(1.1);
|
|
222
229
|
}
|
|
223
230
|
|
|
224
231
|
.swp-value {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
232
|
+
text-align: right;
|
|
233
|
+
font-size: 14px;
|
|
234
|
+
color: #6c757d;
|
|
235
|
+
font-weight: 500;
|
|
229
236
|
}
|
|
230
237
|
|
|
231
238
|
/* Resize Panel */
|
|
232
239
|
.swp-resize-controls {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
240
|
+
display: flex;
|
|
241
|
+
flex-direction: column;
|
|
242
|
+
gap: 15px;
|
|
236
243
|
}
|
|
237
244
|
|
|
238
245
|
.swp-resize-controls .swp-adjustment {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
246
|
+
display: flex;
|
|
247
|
+
align-items: center;
|
|
248
|
+
gap: 10px;
|
|
242
249
|
}
|
|
243
250
|
|
|
244
251
|
.swp-resize-controls input[type="number"] {
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
252
|
+
flex: 1;
|
|
253
|
+
padding: 8px 12px;
|
|
254
|
+
border: 1px solid #dee2e6;
|
|
255
|
+
border-radius: 6px;
|
|
256
|
+
font-size: 14px;
|
|
257
|
+
color: #495057;
|
|
251
258
|
}
|
|
252
259
|
|
|
253
260
|
.swp-resize-controls input[type="number"]:focus {
|
|
254
|
-
|
|
255
|
-
|
|
261
|
+
outline: none;
|
|
262
|
+
border-color: #007bff;
|
|
256
263
|
}
|
|
257
264
|
|
|
258
265
|
.swp-resize-controls input[type="checkbox"] {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
266
|
+
width: 18px;
|
|
267
|
+
height: 18px;
|
|
268
|
+
cursor: pointer;
|
|
262
269
|
}
|
|
263
270
|
|
|
264
271
|
.swp-resize-controls label {
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
272
|
+
display: flex;
|
|
273
|
+
align-items: center;
|
|
274
|
+
gap: 8px;
|
|
275
|
+
cursor: pointer;
|
|
276
|
+
font-size: 14px;
|
|
277
|
+
color: #495057;
|
|
271
278
|
}
|
|
272
279
|
|
|
273
280
|
.swp-resize-controls button {
|
|
274
|
-
|
|
281
|
+
margin-top: 10px;
|
|
275
282
|
}
|
|
276
283
|
|
|
277
|
-
|
|
278
284
|
/* Filters Panel */
|
|
279
285
|
.swp-filters-grid {
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
286
|
+
display: grid;
|
|
287
|
+
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
288
|
+
gap: 15px;
|
|
283
289
|
}
|
|
284
290
|
|
|
285
291
|
.swp-filter-btn {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
292
|
+
display: flex;
|
|
293
|
+
flex-direction: column;
|
|
294
|
+
align-items: center;
|
|
295
|
+
gap: 8px;
|
|
296
|
+
padding: 12px;
|
|
297
|
+
border: 2px solid #dee2e6;
|
|
298
|
+
background: #ffffff;
|
|
299
|
+
border-radius: 8px;
|
|
300
|
+
cursor: pointer;
|
|
301
|
+
font-size: 13px;
|
|
302
|
+
color: #495057;
|
|
303
|
+
transition: all 0.2s ease;
|
|
304
|
+
font-family: inherit;
|
|
299
305
|
}
|
|
300
306
|
|
|
301
307
|
.swp-filter-btn:hover {
|
|
302
|
-
|
|
303
|
-
|
|
308
|
+
border-color: #007bff;
|
|
309
|
+
background: #f8f9fa;
|
|
304
310
|
}
|
|
305
311
|
|
|
306
312
|
.swp-filter-btn.active {
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
313
|
+
border-color: #007bff;
|
|
314
|
+
background: #e7f3ff;
|
|
315
|
+
color: #007bff;
|
|
316
|
+
font-weight: 600;
|
|
311
317
|
}
|
|
312
318
|
|
|
313
319
|
.swp-filter-preview {
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
320
|
+
width: 60px;
|
|
321
|
+
height: 60px;
|
|
322
|
+
border-radius: 6px;
|
|
323
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
324
|
+
display: block;
|
|
319
325
|
}
|
|
320
326
|
|
|
321
327
|
.swp-filter-preview[data-filter="grayscale"] {
|
|
322
|
-
|
|
328
|
+
filter: grayscale(100%);
|
|
323
329
|
}
|
|
324
330
|
|
|
325
331
|
.swp-filter-preview[data-filter="sepia"] {
|
|
326
|
-
|
|
332
|
+
filter: sepia(100%);
|
|
327
333
|
}
|
|
328
334
|
|
|
329
335
|
.swp-filter-preview[data-filter="invert"] {
|
|
330
|
-
|
|
336
|
+
filter: invert(100%);
|
|
331
337
|
}
|
|
332
338
|
|
|
333
339
|
.swp-filter-preview[data-filter="blur"] {
|
|
334
|
-
|
|
340
|
+
filter: blur(3px);
|
|
335
341
|
}
|
|
336
342
|
|
|
337
343
|
.swp-filter-preview[data-filter="none"] {
|
|
338
|
-
|
|
344
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
339
345
|
}
|
|
340
346
|
|
|
341
347
|
/* Responsive Design */
|
|
342
348
|
@media (max-width: 768px) {
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
349
|
+
.swp-toolbar {
|
|
350
|
+
padding: 10px;
|
|
351
|
+
gap: 5px;
|
|
352
|
+
}
|
|
347
353
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
354
|
+
.swp-toolbar-group {
|
|
355
|
+
gap: 5px;
|
|
356
|
+
}
|
|
351
357
|
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
358
|
+
.swp-btn {
|
|
359
|
+
padding: 6px 12px;
|
|
360
|
+
font-size: 12px;
|
|
361
|
+
}
|
|
356
362
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
363
|
+
.swp-btn span:not(.swp-icon) {
|
|
364
|
+
display: none;
|
|
365
|
+
}
|
|
360
366
|
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
367
|
+
.swp-canvas-container {
|
|
368
|
+
min-height: 300px;
|
|
369
|
+
padding: 10px;
|
|
370
|
+
}
|
|
365
371
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
372
|
+
.swp-adjustments-panel,
|
|
373
|
+
.swp-filters-panel {
|
|
374
|
+
padding: 15px;
|
|
375
|
+
}
|
|
370
376
|
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
377
|
+
.swp-adjustment {
|
|
378
|
+
flex-wrap: wrap;
|
|
379
|
+
}
|
|
374
380
|
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
381
|
+
.swp-adjustment label {
|
|
382
|
+
min-width: 100%;
|
|
383
|
+
}
|
|
378
384
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
385
|
+
.swp-filters-grid {
|
|
386
|
+
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
|
387
|
+
gap: 10px;
|
|
388
|
+
}
|
|
383
389
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
390
|
+
.swp-filter-preview {
|
|
391
|
+
width: 50px;
|
|
392
|
+
height: 50px;
|
|
393
|
+
}
|
|
388
394
|
}
|
|
389
395
|
|
|
390
396
|
/* Loading State */
|
|
391
397
|
.swp-loading {
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
+
position: absolute;
|
|
399
|
+
top: 50%;
|
|
400
|
+
left: 50%;
|
|
401
|
+
transform: translate(-50%, -50%);
|
|
402
|
+
font-size: 14px;
|
|
403
|
+
color: #6c757d;
|
|
398
404
|
}
|
|
399
405
|
|
|
400
406
|
/* Empty State */
|
|
401
407
|
.swp-empty-state {
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
408
|
+
text-align: center;
|
|
409
|
+
padding: 60px 20px;
|
|
410
|
+
color: #6c757d;
|
|
405
411
|
}
|
|
406
412
|
|
|
407
413
|
.swp-empty-state-icon {
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
414
|
+
font-size: 48px;
|
|
415
|
+
margin-bottom: 15px;
|
|
416
|
+
opacity: 0.5;
|
|
411
417
|
}
|
|
412
418
|
|
|
413
419
|
.swp-empty-state-text {
|
|
414
|
-
|
|
415
|
-
|
|
420
|
+
font-size: 16px;
|
|
421
|
+
margin-bottom: 20px;
|
|
416
422
|
}
|
|
417
423
|
|
|
418
424
|
/* Animations */
|
|
419
425
|
@keyframes fadeIn {
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
426
|
+
from {
|
|
427
|
+
opacity: 0;
|
|
428
|
+
transform: translateY(-10px);
|
|
429
|
+
}
|
|
430
|
+
to {
|
|
431
|
+
opacity: 1;
|
|
432
|
+
transform: translateY(0);
|
|
433
|
+
}
|
|
428
434
|
}
|
|
429
435
|
|
|
430
436
|
.swp-adjustments-panel.active,
|
|
431
437
|
.swp-filters-panel.active {
|
|
432
|
-
|
|
438
|
+
animation: fadeIn 0.3s ease;
|
|
433
439
|
}
|
|
434
440
|
|
|
435
441
|
/* Print Styles */
|
|
436
442
|
@media print {
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
443
|
+
.swp-toolbar,
|
|
444
|
+
.swp-adjustments-panel,
|
|
445
|
+
.swp-filters-panel {
|
|
446
|
+
display: none;
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.swp-canvas-container {
|
|
450
|
+
padding: 0;
|
|
451
|
+
background: transparent;
|
|
452
|
+
}
|
|
447
453
|
}
|
|
448
454
|
|