@jjlmoya/utils-audiovisual 1.16.0 → 1.17.0

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.
Files changed (21) hide show
  1. package/package.json +1 -1
  2. package/src/tool/chromaticLens/chromatic-lens-color-palette-extraction-online.css +39 -39
  3. package/src/tool/collageMaker/free-online-photo-collage-maker-professional-compositions.css +47 -47
  4. package/src/tool/exifCleaner/exif-metadata-cleaner-remove-gps-photo-privacy.css +36 -36
  5. package/src/tool/imageCompressor/online-image-compressor-reduce-file-size-no-quality-loss.css +71 -64
  6. package/src/tool/printQualityCalculator/print-quality-calculator-pixels-to-cm-dpi.css +89 -81
  7. package/src/tool/privacyBlur/online-privacy-editor-pixelate-blur-faces-photos.css +36 -36
  8. package/src/tool/subtitleSync/synchronize-srt-subtitles-online-adjust-timing-free.css +43 -43
  9. package/src/tool/timelapseCalculator/timelapse-hyperlapse-calculator-perfect-intervals.css +44 -42
  10. package/src/tool/tvDistance/tv-viewing-distance-calculator-thx-4k-optimal-screen.css +56 -56
  11. package/src/tool/videoFrameExtractor/online-video-frame-extractor-capture-hd-stills.css +55 -55
  12. package/src/tool/chromaticLens/style.css +0 -308
  13. package/src/tool/collageMaker/style.css +0 -386
  14. package/src/tool/exifCleaner/style.css +0 -289
  15. package/src/tool/imageCompressor/style.css +0 -503
  16. package/src/tool/printQualityCalculator/style.css +0 -491
  17. package/src/tool/privacyBlur/style.css +0 -332
  18. package/src/tool/subtitleSync/style.css +0 -325
  19. package/src/tool/timelapseCalculator/style.css +0 -285
  20. package/src/tool/tvDistance/style.css +0 -435
  21. package/src/tool/videoFrameExtractor/style.css +0 -426
package/src/tool/exifCleaner/exif-metadata-cleaner-remove-gps-photo-privacy.css CHANGED
@@ -1,4 +1,4 @@
1
- :global(.ec-root) {
1
+ .ec-root {
2
2
  --ec-bg: #fff;
3
3
  --ec-bg-elevated: #f8fafc;
4
4
  --ec-border: #e2e8f0;
@@ -14,7 +14,7 @@
14
14
  margin: 0 auto;
15
15
  }
16
16
 
17
- :global(.theme-dark .ec-root) {
17
+ .theme-dark .ec-root {
18
18
  --ec-bg: #18181b;
19
19
  --ec-bg-elevated: #27272a;
20
20
  --ec-border: #3f3f46;
@@ -26,7 +26,7 @@
26
26
  --ec-shadow: rgba(0, 0, 0, 0.3);
27
27
  }
28
28
 
29
- :global(.ec-card) {
29
+ .ec-card {
30
30
  background: var(--ec-bg);
31
31
  border: 1px solid var(--ec-border);
32
32
  border-radius: 3rem;
@@ -36,7 +36,7 @@
36
36
  overflow: hidden;
37
37
  }
38
38
 
39
- :global(.ec-drop) {
39
+ .ec-drop {
40
40
  padding: 4rem 2rem;
41
41
  border: 3px dashed var(--ec-border);
42
42
  border-radius: 2.5rem;
@@ -49,13 +49,13 @@
49
49
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
50
50
  }
51
51
 
52
- :global(.ec-drop:hover),
53
- :global(.ec-drop-active) {
52
+ .ec-drop:hover,
53
+ .ec-drop-active {
54
54
  border-color: var(--ec-accent);
55
55
  background: var(--ec-accent-alpha-hover);
56
56
  }
57
57
 
58
- :global(.ec-drop-icon) {
58
+ .ec-drop-icon {
59
59
  width: 6rem;
60
60
  height: 6rem;
61
61
  background: var(--ec-accent-alpha);
@@ -66,19 +66,19 @@
66
66
  color: var(--ec-accent);
67
67
  }
68
68
 
69
- :global(.ec-drop-icon svg) {
69
+ .ec-drop-icon svg {
70
70
  width: 3rem;
71
71
  height: 3rem;
72
72
  }
73
73
 
74
- :global(.ec-title) {
74
+ .ec-title {
75
75
  font-size: 2.5rem;
76
76
  font-weight: 950;
77
77
  color: var(--ec-text);
78
78
  margin: 0;
79
79
  }
80
80
 
81
- :global(.ec-subtitle) {
81
+ .ec-subtitle {
82
82
  font-size: 1.15rem;
83
83
  color: var(--ec-text-muted);
84
84
  max-width: 500px;
@@ -86,14 +86,14 @@
86
86
  font-weight: 700;
87
87
  }
88
88
 
89
- :global(.ec-badges) {
89
+ .ec-badges {
90
90
  display: flex;
91
91
  gap: 1rem;
92
92
  flex-wrap: wrap;
93
93
  justify-content: center;
94
94
  }
95
95
 
96
- :global(.ec-badge) {
96
+ .ec-badge {
97
97
  padding: 0.6rem 1.25rem;
98
98
  background: var(--ec-bg-elevated);
99
99
  border-radius: 2rem;
@@ -105,13 +105,13 @@
105
105
  gap: 0.5rem;
106
106
  }
107
107
 
108
- :global(.ec-badge svg) {
108
+ .ec-badge svg {
109
109
  width: 1rem;
110
110
  height: 1rem;
111
111
  flex-shrink: 0;
112
112
  }
113
113
 
114
- :global(.ec-processing) {
114
+ .ec-processing {
115
115
  padding: 5rem;
116
116
  display: flex;
117
117
  flex-direction: column;
@@ -120,7 +120,7 @@
120
120
  gap: 1.5rem;
121
121
  }
122
122
 
123
- :global(.ec-spinner) {
123
+ .ec-spinner {
124
124
  width: 4rem;
125
125
  height: 4rem;
126
126
  border: 4px solid var(--ec-accent-alpha);
@@ -129,45 +129,45 @@
129
129
  animation: ec-spin 0.8s linear infinite;
130
130
  }
131
131
 
132
- :global(.ec-processing-text) {
132
+ .ec-processing-text {
133
133
  font-weight: 800;
134
134
  color: var(--ec-text);
135
135
  margin: 0;
136
136
  }
137
137
 
138
- :global(.ec-result) {
138
+ .ec-result {
139
139
  padding: 2.5rem;
140
140
  display: flex;
141
141
  flex-direction: column;
142
142
  animation: ec-slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
143
143
  }
144
144
 
145
- :global(.ec-result-layout) {
145
+ .ec-result-layout {
146
146
  display: grid;
147
147
  grid-template-columns: 1fr 1fr;
148
148
  gap: 3rem;
149
149
  }
150
150
 
151
151
  @media (max-width: 800px) {
152
- :global(.ec-result-layout) {
152
+ .ec-result-layout {
153
153
  grid-template-columns: 1fr;
154
154
  }
155
155
  }
156
156
 
157
- :global(.ec-preview-col) {
157
+ .ec-preview-col {
158
158
  display: flex;
159
159
  flex-direction: column;
160
160
  gap: 1.5rem;
161
161
  }
162
162
 
163
- :global(.ec-preview-img) {
163
+ .ec-preview-img {
164
164
  width: 100%;
165
165
  border-radius: 1.5rem;
166
166
  box-shadow: 0 20px 50px var(--ec-shadow);
167
167
  display: block;
168
168
  }
169
169
 
170
- :global(.ec-metadata) {
170
+ .ec-metadata {
171
171
  background: var(--ec-bg-elevated);
172
172
  border: 1px solid var(--ec-border);
173
173
  border-radius: 1.25rem;
@@ -178,7 +178,7 @@
178
178
  justify-content: center;
179
179
  }
180
180
 
181
- :global(.ec-no-metadata) {
181
+ .ec-no-metadata {
182
182
  display: flex;
183
183
  align-items: center;
184
184
  justify-content: center;
@@ -187,14 +187,14 @@
187
187
  text-align: center;
188
188
  }
189
189
 
190
- :global(.ec-metadata-title) {
190
+ .ec-metadata-title {
191
191
  color: var(--ec-accent);
192
192
  font-weight: 700;
193
193
  margin-bottom: 1rem;
194
194
  font-size: 0.9rem;
195
195
  }
196
196
 
197
- :global(.ec-metadata-list) {
197
+ .ec-metadata-list {
198
198
  list-style: none;
199
199
  padding: 0;
200
200
  margin: 0;
@@ -203,7 +203,7 @@
203
203
  gap: 0.75rem;
204
204
  }
205
205
 
206
- :global(.ec-metadata-list li) {
206
+ .ec-metadata-list li {
207
207
  display: flex;
208
208
  justify-content: space-between;
209
209
  gap: 1rem;
@@ -212,21 +212,21 @@
212
212
  color: var(--ec-text);
213
213
  }
214
214
 
215
- :global(.ec-metadata-list li span:first-child) {
215
+ .ec-metadata-list li span:first-child {
216
216
  font-weight: 700;
217
217
  }
218
218
 
219
- :global(.ec-metadata-list li span:last-child) {
219
+ .ec-metadata-list li span:last-child {
220
220
  color: var(--ec-text-muted);
221
221
  }
222
222
 
223
- :global(.ec-actions-col) {
223
+ .ec-actions-col {
224
224
  display: flex;
225
225
  flex-direction: column;
226
226
  gap: 1.5rem;
227
227
  }
228
228
 
229
- :global(.ec-btn) {
229
+ .ec-btn {
230
230
  padding: 1.25rem;
231
231
  border-radius: 1.5rem;
232
232
  font-weight: 950;
@@ -240,29 +240,29 @@
240
240
  transition: all 0.2s;
241
241
  }
242
242
 
243
- :global(.ec-btn svg) {
243
+ .ec-btn svg {
244
244
  width: 1.25rem;
245
245
  height: 1.25rem;
246
246
  }
247
247
 
248
- :global(.ec-btn-primary) {
248
+ .ec-btn-primary {
249
249
  background: var(--ec-accent);
250
250
  color: #fff;
251
251
  box-shadow: 0 15px 35px -10px var(--ec-accent);
252
252
  }
253
253
 
254
- :global(.ec-btn-primary:hover) {
254
+ .ec-btn-primary:hover {
255
255
  transform: translateY(-2px);
256
256
  box-shadow: 0 20px 45px -10px var(--ec-accent);
257
257
  }
258
258
 
259
- :global(.ec-btn-secondary) {
259
+ .ec-btn-secondary {
260
260
  background: var(--ec-bg-elevated);
261
261
  border: 1px solid var(--ec-border);
262
262
  color: var(--ec-text);
263
263
  }
264
264
 
265
- :global(.ec-btn-secondary:hover) {
265
+ .ec-btn-secondary:hover {
266
266
  border-color: var(--ec-accent);
267
267
  color: var(--ec-accent);
268
268
  }
@@ -286,4 +286,4 @@
286
286
  opacity: 1;
287
287
  transform: translateY(0);
288
288
  }
289
- }
289
+ }
package/src/tool/imageCompressor/online-image-compressor-reduce-file-size-no-quality-loss.css CHANGED
@@ -1,10 +1,12 @@
1
- :global(.ic-dashboard) {
1
+ .ic-dashboard {
2
2
  max-width: 900px;
3
3
  margin: 0 auto;
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  gap: 1rem;
7
+ }
7
8
 
9
+ :root {
8
10
  --ic-bg: #fff;
9
11
  --ic-bg-muted: #f8fafc;
10
12
  --ic-border: #e2e8f0;
@@ -20,7 +22,7 @@
20
22
  --ic-shadow: rgba(0, 0, 0, 0.03);
21
23
  }
22
24
 
23
- :global(.theme-dark .ic-dashboard) {
25
+ .theme-dark {
24
26
  --ic-bg: #0f172a;
25
27
  --ic-bg-muted: #1e293b;
26
28
  --ic-border: #334155;
@@ -32,7 +34,7 @@
32
34
  --ic-shadow: rgba(0, 0, 0, 0.4);
33
35
  }
34
36
 
35
- :global(.ic-global-settings) {
37
+ .ic-global-settings {
36
38
  display: flex;
37
39
  justify-content: flex-end;
38
40
  gap: 1.5rem;
@@ -45,32 +47,32 @@
45
47
  flex-wrap: wrap;
46
48
  }
47
49
 
48
- :global(.theme-dark .ic-global-settings) {
50
+ .theme-dark .ic-global-settings {
49
51
  background: rgba(30, 41, 59, 0.6);
50
52
  border-color: rgba(71, 85, 105, 0.5);
51
53
  color: var(--ic-text-muted);
52
54
  }
53
55
 
54
- :global(.ic-toggle-group) {
56
+ .ic-toggle-group {
55
57
  display: flex;
56
58
  align-items: center;
57
59
  gap: 0.5rem;
58
60
  }
59
61
 
60
- :global(.ic-webp-switch) {
62
+ .ic-webp-switch {
61
63
  position: relative;
62
64
  display: inline-block;
63
65
  width: 44px;
64
66
  height: 24px;
65
67
  }
66
68
 
67
- :global(.ic-webp-switch input) {
69
+ .ic-webp-switch input {
68
70
  opacity: 0;
69
71
  width: 0;
70
72
  height: 0;
71
73
  }
72
74
 
73
- :global(.ic-webp-slider) {
75
+ .ic-webp-slider {
74
76
  position: absolute;
75
77
  cursor: pointer;
76
78
  inset: 0;
@@ -79,7 +81,7 @@
79
81
  transition: 0.3s;
80
82
  }
81
83
 
82
- :global(.ic-webp-slider::before) {
84
+ .ic-webp-slider::before {
83
85
  content: '';
84
86
  position: absolute;
85
87
  width: 18px;
@@ -92,20 +94,20 @@
92
94
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
93
95
  }
94
96
 
95
- :global(.ic-webp-switch input:checked + .ic-webp-slider) {
97
+ .ic-webp-switch input:checked + .ic-webp-slider {
96
98
  background: var(--ic-accent);
97
99
  }
98
100
 
99
- :global(.ic-webp-switch input:checked + .ic-webp-slider::before) {
101
+ .ic-webp-switch input:checked + .ic-webp-slider::before {
100
102
  transform: translateX(20px);
101
103
  }
102
104
 
103
- :global(.ic-toggle-label) {
105
+ .ic-toggle-label {
104
106
  font-size: 0.9rem;
105
107
  font-weight: 600;
106
108
  }
107
109
 
108
- :global(.ic-settings-group) {
110
+ .ic-settings-group {
109
111
  display: flex;
110
112
  align-items: center;
111
113
  gap: 0.75rem;
@@ -113,12 +115,13 @@
113
115
  font-weight: 600;
114
116
  }
115
117
 
116
- :global(.ic-mini-slider) {
118
+ .ic-mini-slider {
117
119
  width: 100px;
118
120
  accent-color: var(--ic-accent);
119
121
  }
120
122
 
121
- :global(.ic-drop-zone) {
123
+ /* ── Drop zone ── */
124
+ .ic-drop-zone {
122
125
  position: relative;
123
126
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 100%);
124
127
  border: 3px dashed var(--ic-accent);
@@ -131,23 +134,23 @@
131
134
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
132
135
  }
133
136
 
134
- :global(.theme-dark .ic-drop-zone) {
137
+ .theme-dark .ic-drop-zone {
135
138
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.6) 100%);
136
139
  }
137
140
 
138
- :global(.ic-drop-zone.ic-dragover),
139
- :global(.ic-drop-zone:hover) {
141
+ .ic-drop-zone.ic-dragover,
142
+ .ic-drop-zone:hover {
140
143
  transform: scale(1.01);
141
144
  border-color: var(--ic-accent-dark);
142
145
  background: linear-gradient(180deg, var(--ic-accent-light) 0%, rgba(255, 255, 255, 0.6) 100%);
143
146
  }
144
147
 
145
- :global(.theme-dark .ic-drop-zone.ic-dragover),
146
- :global(.theme-dark .ic-drop-zone:hover) {
148
+ .theme-dark .ic-drop-zone.ic-dragover,
149
+ .theme-dark .ic-drop-zone:hover {
147
150
  background: linear-gradient(180deg, rgba(6, 78, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
148
151
  }
149
152
 
150
- :global(.ic-file-label) {
153
+ .ic-file-label {
151
154
  display: flex;
152
155
  flex-direction: column;
153
156
  align-items: center;
@@ -156,24 +159,24 @@
156
159
  pointer-events: none;
157
160
  }
158
161
 
159
- :global(.ic-upload-icon) {
162
+ .ic-upload-icon {
160
163
  color: var(--ic-accent);
161
164
  margin-bottom: 0.5rem;
162
165
  }
163
166
 
164
- :global(.ic-upload-text) {
167
+ .ic-upload-text {
165
168
  font-size: 1.5rem;
166
169
  font-weight: 700;
167
170
  color: var(--ic-text);
168
171
  }
169
172
 
170
- :global(.ic-upload-subtext) {
173
+ .ic-upload-subtext {
171
174
  color: var(--ic-text-muted);
172
175
  font-size: 1rem;
173
176
  margin-bottom: 1rem;
174
177
  }
175
178
 
176
- :global(.ic-upload-btn) {
179
+ .ic-upload-btn {
177
180
  background: var(--ic-text);
178
181
  color: var(--ic-bg);
179
182
  padding: 0.75rem 2rem;
@@ -184,11 +187,11 @@
184
187
  transition: background 0.2s;
185
188
  }
186
189
 
187
- :global(.ic-upload-btn:hover) {
190
+ .ic-upload-btn:hover {
188
191
  background: var(--ic-text-muted);
189
192
  }
190
193
 
191
- :global(.ic-drop-zone input[type="file"]) {
194
+ .ic-drop-zone input[type="file"] {
192
195
  position: absolute;
193
196
  inset: 0;
194
197
  width: 100%;
@@ -197,11 +200,12 @@
197
200
  cursor: pointer;
198
201
  }
199
202
 
200
- :global(.ic-file-list-container) {
203
+ /* ── File list ── */
204
+ .ic-file-list-container {
201
205
  margin-top: 1.5rem;
202
206
  }
203
207
 
204
- :global(.ic-list-header) {
208
+ .ic-list-header {
205
209
  display: flex;
206
210
  justify-content: space-between;
207
211
  align-items: center;
@@ -209,19 +213,19 @@
209
213
  padding: 0 0.5rem;
210
214
  }
211
215
 
212
- :global(.ic-list-header h3) {
216
+ .ic-list-header h3 {
213
217
  font-size: 1.25rem;
214
218
  font-weight: 700;
215
219
  color: var(--ic-text);
216
220
  margin: 0;
217
221
  }
218
222
 
219
- :global(.ic-total-savings) {
223
+ .ic-total-savings {
220
224
  font-weight: 700;
221
225
  font-size: 1rem;
222
226
  }
223
227
 
224
- :global(.ic-file-list) {
228
+ .ic-file-list {
225
229
  list-style: none;
226
230
  padding: 1rem;
227
231
  margin: 0;
@@ -233,7 +237,8 @@
233
237
  border: 1px solid var(--ic-border);
234
238
  }
235
239
 
236
- :global(.ic-file-item) {
240
+ /* ── File item ── */
241
+ .ic-file-item {
237
242
  background: var(--ic-bg);
238
243
  border-radius: 0.75rem;
239
244
  padding: 0.75rem 1.25rem;
@@ -245,18 +250,18 @@
245
250
  transition: box-shadow 0.2s;
246
251
  }
247
252
 
248
- :global(.ic-file-item:hover) {
253
+ .ic-file-item:hover {
249
254
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
250
255
  }
251
256
 
252
- :global(.ic-preview-col) {
257
+ .ic-preview-col {
253
258
  display: flex;
254
259
  align-items: center;
255
260
  gap: 1rem;
256
261
  overflow: hidden;
257
262
  }
258
263
 
259
- :global(.ic-preview-wrapper) {
264
+ .ic-preview-wrapper {
260
265
  width: 48px;
261
266
  height: 48px;
262
267
  border-radius: 0.5rem;
@@ -265,19 +270,19 @@
265
270
  flex-shrink: 0;
266
271
  }
267
272
 
268
- :global(.ic-preview-img) {
273
+ .ic-preview-img {
269
274
  width: 100%;
270
275
  height: 100%;
271
276
  object-fit: cover;
272
277
  }
273
278
 
274
- :global(.ic-file-info) {
279
+ .ic-file-info {
275
280
  display: flex;
276
281
  flex-direction: column;
277
282
  overflow: hidden;
278
283
  }
279
284
 
280
- :global(.ic-filename) {
285
+ .ic-filename {
281
286
  font-weight: 600;
282
287
  color: var(--ic-text);
283
288
  white-space: nowrap;
@@ -286,17 +291,17 @@
286
291
  font-size: 0.9rem;
287
292
  }
288
293
 
289
- :global(.ic-orig-size) {
294
+ .ic-orig-size {
290
295
  color: var(--ic-text-muted);
291
296
  font-size: 0.8rem;
292
297
  }
293
298
 
294
- :global(.ic-arrow-col) {
299
+ .ic-arrow-col {
295
300
  display: flex;
296
301
  justify-content: center;
297
302
  }
298
303
 
299
- :global(.ic-arrow-circle) {
304
+ .ic-arrow-circle {
300
305
  background: var(--ic-accent-light);
301
306
  color: var(--ic-accent);
302
307
  width: 36px;
@@ -308,41 +313,41 @@
308
313
  flex-shrink: 0;
309
314
  }
310
315
 
311
- :global(.ic-result-col) {
316
+ .ic-result-col {
312
317
  display: flex;
313
318
  align-items: center;
314
319
  justify-content: flex-end;
315
320
  gap: 1.25rem;
316
321
  }
317
322
 
318
- :global(.ic-savings-pill) {
323
+ .ic-savings-pill {
319
324
  display: flex;
320
325
  flex-direction: column;
321
326
  align-items: center;
322
327
  }
323
328
 
324
- :global(.ic-new-size) {
329
+ .ic-new-size {
325
330
  font-weight: 700;
326
331
  color: var(--ic-text);
327
332
  font-size: 0.95rem;
328
333
  }
329
334
 
330
- :global(.ic-savings-pct) {
335
+ .ic-savings-pct {
331
336
  color: var(--ic-accent);
332
337
  font-weight: 800;
333
338
  font-size: 0.85rem;
334
339
  }
335
340
 
336
- :global(.ic-savings-pill-negative .ic-savings-pct) {
341
+ .ic-savings-pill-negative .ic-savings-pct {
337
342
  color: var(--ic-error);
338
343
  }
339
344
 
340
- :global(.ic-item-actions) {
345
+ .ic-item-actions {
341
346
  display: flex;
342
347
  gap: 0.4rem;
343
348
  }
344
349
 
345
- :global(.ic-icon-btn) {
350
+ .ic-icon-btn {
346
351
  background: var(--ic-bg-muted);
347
352
  border: none;
348
353
  color: var(--ic-text-muted);
@@ -358,22 +363,23 @@
358
363
  flex-shrink: 0;
359
364
  }
360
365
 
361
- :global(.ic-icon-btn:hover) {
366
+ .ic-icon-btn:hover {
362
367
  background: var(--ic-border);
363
368
  color: var(--ic-text);
364
369
  }
365
370
 
366
- :global(.ic-download-btn) {
371
+ .ic-download-btn {
367
372
  background: var(--ic-accent);
368
373
  color: var(--ic-bg);
369
374
  }
370
375
 
371
- :global(.ic-download-btn:hover) {
376
+ .ic-download-btn:hover {
372
377
  background: var(--ic-accent-dark);
373
378
  color: var(--ic-bg);
374
379
  }
375
380
 
376
- :global(.ic-inline-editor) {
381
+ /* ── Inline editor ── */
382
+ .ic-inline-editor {
377
383
  grid-column: 1 / -1;
378
384
  background: var(--ic-bg-muted);
379
385
  border-radius: 0.75rem;
@@ -398,13 +404,13 @@
398
404
  }
399
405
  }
400
406
 
401
- :global(.ic-editor-controls) {
407
+ .ic-editor-controls {
402
408
  display: flex;
403
409
  gap: 1.5rem;
404
410
  flex-wrap: wrap;
405
411
  }
406
412
 
407
- :global(.ic-editor-group) {
413
+ .ic-editor-group {
408
414
  display: flex;
409
415
  flex-direction: column;
410
416
  gap: 0.25rem;
@@ -413,11 +419,11 @@
413
419
  color: var(--ic-text-muted);
414
420
  }
415
421
 
416
- :global(.ic-editor-group input[type="range"]) {
422
+ .ic-editor-group input[type="range"] {
417
423
  accent-color: var(--ic-accent);
418
424
  }
419
425
 
420
- :global(.ic-editor-group input[type="number"]) {
426
+ .ic-editor-group input[type="number"] {
421
427
  padding: 0.25rem 0.5rem;
422
428
  border: 1px solid var(--ic-border);
423
429
  border-radius: 0.375rem;
@@ -426,7 +432,7 @@
426
432
  color: var(--ic-text);
427
433
  }
428
434
 
429
- :global(.ic-editor-close) {
435
+ .ic-editor-close {
430
436
  background: var(--ic-border);
431
437
  border: none;
432
438
  padding: 0.4rem 0.875rem;
@@ -439,17 +445,18 @@
439
445
  white-space: nowrap;
440
446
  }
441
447
 
442
- :global(.ic-editor-close:hover) {
448
+ .ic-editor-close:hover {
443
449
  background: var(--ic-border);
444
450
  }
445
451
 
446
- :global(.ic-global-actions) {
452
+ /* ── Download all ── */
453
+ .ic-global-actions {
447
454
  margin-top: 1.5rem;
448
455
  display: flex;
449
456
  justify-content: center;
450
457
  }
451
458
 
452
- :global(.ic-primary-btn) {
459
+ .ic-primary-btn {
453
460
  background: var(--ic-text);
454
461
  color: var(--ic-bg);
455
462
  border: none;
@@ -461,11 +468,11 @@
461
468
  transition: background 0.2s, transform 0.1s;
462
469
  }
463
470
 
464
- :global(.ic-primary-btn:hover) {
471
+ .ic-primary-btn:hover {
465
472
  background: var(--ic-text-muted);
466
473
  }
467
474
 
468
- :global(.ic-primary-btn:active) {
475
+ .ic-primary-btn:active {
469
476
  transform: scale(0.98);
470
477
  }
471
478
 
@@ -493,4 +500,4 @@
493
500
  flex-direction: column;
494
501
  align-items: flex-start;
495
502
  }
496
- }
503
+ }