@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/privacyBlur/online-privacy-editor-pixelate-blur-faces-photos.css CHANGED
@@ -1,4 +1,4 @@
1
- :global(.pb-root) {
1
+ .pb-root {
2
2
  --pb-bg: #fff;
3
3
  --pb-bg-muted: #f8fafc;
4
4
  --pb-border: #e2e8f0;
@@ -19,7 +19,7 @@
19
19
  min-height: 600px;
20
20
  }
21
21
 
22
- :global(.theme-dark .pb-root) {
22
+ .theme-dark .pb-root {
23
23
  --pb-bg: #09090b;
24
24
  --pb-bg-muted: #18181b;
25
25
  --pb-border: #27272a;
@@ -31,7 +31,7 @@
31
31
  --pb-toolbar-bg: rgba(9,9,11,0.92);
32
32
  }
33
33
 
34
- :global(.pb-toolbar) {
34
+ .pb-toolbar {
35
35
  position: sticky;
36
36
  top: 0.5rem;
37
37
  z-index: 100;
@@ -51,7 +51,7 @@
51
51
  gap: 0.75rem;
52
52
  }
53
53
 
54
- :global(.pb-tool-selector) {
54
+ .pb-tool-selector {
55
55
  display: flex;
56
56
  gap: 0.25rem;
57
57
  background: var(--pb-bg-muted);
@@ -59,7 +59,7 @@
59
59
  padding: 0.25rem;
60
60
  }
61
61
 
62
- :global(.pb-tool-btn) {
62
+ .pb-tool-btn {
63
63
  display: flex;
64
64
  align-items: center;
65
65
  gap: 0.4rem;
@@ -74,31 +74,31 @@
74
74
  transition: all 0.15s;
75
75
  }
76
76
 
77
- :global(.pb-tool-btn-active) {
77
+ .pb-tool-btn-active {
78
78
  background: var(--pb-bg);
79
79
  color: var(--pb-text);
80
80
  box-shadow: 0 2px 8px var(--pb-shadow);
81
81
  }
82
82
 
83
- :global(.pb-settings-row) {
83
+ .pb-settings-row {
84
84
  display: flex;
85
85
  align-items: center;
86
86
  gap: 0.875rem;
87
87
  }
88
88
 
89
- :global(.pb-intensity-wrap) {
89
+ .pb-intensity-wrap {
90
90
  display: flex;
91
91
  align-items: center;
92
92
  gap: 0.5rem;
93
93
  color: var(--pb-text-muted);
94
94
  }
95
95
 
96
- :global(.pb-slider) {
96
+ .pb-slider {
97
97
  width: 90px;
98
98
  accent-color: var(--pb-primary);
99
99
  }
100
100
 
101
- :global(.pb-auto-btn) {
101
+ .pb-auto-btn {
102
102
  display: flex;
103
103
  align-items: center;
104
104
  gap: 0.4rem;
@@ -113,17 +113,17 @@
113
113
  transition: opacity 0.15s;
114
114
  }
115
115
 
116
- :global(.pb-auto-btn:hover) {
116
+ .pb-auto-btn:hover {
117
117
  opacity: 0.8;
118
118
  }
119
119
 
120
- :global(.pb-action-group) {
120
+ .pb-action-group {
121
121
  display: flex;
122
122
  align-items: center;
123
123
  gap: 0.625rem;
124
124
  }
125
125
 
126
- :global(.pb-undo-btn) {
126
+ .pb-undo-btn {
127
127
  width: 2.5rem;
128
128
  height: 2.5rem;
129
129
  border-radius: 0.75rem;
@@ -137,17 +137,17 @@
137
137
  transition: all 0.15s;
138
138
  }
139
139
 
140
- :global(.pb-undo-btn:hover:not(:disabled)) {
140
+ .pb-undo-btn:hover:not(:disabled) {
141
141
  border-color: var(--pb-primary);
142
142
  color: var(--pb-primary);
143
143
  }
144
144
 
145
- :global(.pb-undo-btn:disabled) {
145
+ .pb-undo-btn:disabled {
146
146
  opacity: 0.35;
147
147
  cursor: not-allowed;
148
148
  }
149
149
 
150
- :global(.pb-download-btn) {
150
+ .pb-download-btn {
151
151
  display: flex;
152
152
  align-items: center;
153
153
  gap: 0.5rem;
@@ -163,24 +163,24 @@
163
163
  transition: all 0.2s;
164
164
  }
165
165
 
166
- :global(.pb-download-btn:hover:not(:disabled)) {
166
+ .pb-download-btn:hover:not(:disabled) {
167
167
  transform: translateY(-1px);
168
168
  box-shadow: 0 6px 20px rgba(99,102,241,0.45);
169
169
  }
170
170
 
171
- :global(.pb-download-btn:disabled) {
171
+ .pb-download-btn:disabled {
172
172
  opacity: 0.4;
173
173
  cursor: not-allowed;
174
174
  box-shadow: none;
175
175
  }
176
176
 
177
- :global(.pb-icon) {
177
+ .pb-icon {
178
178
  width: 1.1rem;
179
179
  height: 1.1rem;
180
180
  flex-shrink: 0;
181
181
  }
182
182
 
183
- :global(.pb-workspace) {
183
+ .pb-workspace {
184
184
  flex: 1;
185
185
  position: relative;
186
186
  background: var(--pb-bg-muted);
@@ -194,12 +194,12 @@
194
194
  transition: border-color 0.2s;
195
195
  }
196
196
 
197
- :global(.pb-dragging .pb-workspace) {
197
+ .pb-dragging .pb-workspace {
198
198
  border-color: var(--pb-primary);
199
199
  background: var(--pb-primary-light);
200
200
  }
201
201
 
202
- :global(.pb-empty) {
202
+ .pb-empty {
203
203
  width: 100%;
204
204
  height: 100%;
205
205
  display: flex;
@@ -212,7 +212,7 @@
212
212
  gap: 0.75rem;
213
213
  }
214
214
 
215
- :global(.pb-upload-icon) {
215
+ .pb-upload-icon {
216
216
  width: 5rem;
217
217
  height: 5rem;
218
218
  background: var(--pb-bg);
@@ -226,31 +226,31 @@
226
226
  margin-bottom: 0.5rem;
227
227
  }
228
228
 
229
- :global(.pb-icon-lg) {
229
+ .pb-icon-lg {
230
230
  width: 2.5rem;
231
231
  height: 2.5rem;
232
232
  }
233
233
 
234
- :global(.pb-empty-title) {
234
+ .pb-empty-title {
235
235
  font-size: 1.75rem;
236
236
  font-weight: 900;
237
237
  color: var(--pb-text);
238
238
  margin: 0;
239
239
  }
240
240
 
241
- :global(.pb-empty-sub) {
241
+ .pb-empty-sub {
242
242
  font-size: 1rem;
243
243
  color: var(--pb-text-muted);
244
244
  margin: 0;
245
245
  }
246
246
 
247
- :global(.pb-badges) {
247
+ .pb-badges {
248
248
  display: flex;
249
249
  gap: 0.75rem;
250
250
  margin-top: 0.5rem;
251
251
  }
252
252
 
253
- :global(.pb-badge) {
253
+ .pb-badge {
254
254
  display: flex;
255
255
  align-items: center;
256
256
  gap: 0.35rem;
@@ -263,12 +263,12 @@
263
263
  color: var(--pb-text-muted);
264
264
  }
265
265
 
266
- :global(.pb-badge-icon) {
266
+ .pb-badge-icon {
267
267
  width: 0.875rem;
268
268
  height: 0.875rem;
269
269
  }
270
270
 
271
- :global(.pb-loader) {
271
+ .pb-loader {
272
272
  position: absolute;
273
273
  inset: 0;
274
274
  background: rgba(0,0,0,0.5);
@@ -280,7 +280,7 @@
280
280
  z-index: 10;
281
281
  }
282
282
 
283
- :global(.pb-spinner) {
283
+ .pb-spinner {
284
284
  width: 2.5rem;
285
285
  height: 2.5rem;
286
286
  border: 3px solid rgba(255,255,255,0.2);
@@ -293,14 +293,14 @@
293
293
  to { transform: rotate(360deg); }
294
294
  }
295
295
 
296
- :global(.pb-loader-text) {
296
+ .pb-loader-text {
297
297
  color: #fff;
298
298
  font-weight: 800;
299
299
  font-size: 0.9rem;
300
300
  margin: 0;
301
301
  }
302
302
 
303
- :global(.pb-canvas-wrap) {
303
+ .pb-canvas-wrap {
304
304
  position: absolute;
305
305
  inset: 0;
306
306
  background: #000;
@@ -309,14 +309,14 @@
309
309
  justify-content: center;
310
310
  }
311
311
 
312
- :global(.pb-canvas-wrap canvas) {
312
+ .pb-canvas-wrap canvas {
313
313
  width: 100%;
314
314
  height: 100%;
315
315
  object-fit: contain;
316
316
  cursor: crosshair;
317
317
  }
318
318
 
319
- :global(.pb-hidden) {
319
+ .pb-hidden {
320
320
  display: none;
321
321
  }
322
322
 
@@ -329,4 +329,4 @@
329
329
  .pb-empty-title {
330
330
  font-size: 1.25rem;
331
331
  }
332
- }
332
+ }
package/src/tool/subtitleSync/synchronize-srt-subtitles-online-adjust-timing-free.css CHANGED
@@ -1,4 +1,4 @@
1
- :global(.ss-root) {
1
+ .ss-root {
2
2
  --ss-bg: #fff;
3
3
  --ss-bg-elevated: #f8fafc;
4
4
  --ss-border: #e2e8f0;
@@ -14,7 +14,7 @@
14
14
  margin: 0 auto;
15
15
  }
16
16
 
17
- :global(.theme-dark .ss-root) {
17
+ .theme-dark .ss-root {
18
18
  --ss-bg: #18181b;
19
19
  --ss-bg-elevated: #27272a;
20
20
  --ss-border: #3f3f46;
@@ -26,7 +26,7 @@
26
26
  --ss-shadow: rgba(0, 0, 0, 0.3);
27
27
  }
28
28
 
29
- :global(.ss-card) {
29
+ .ss-card {
30
30
  background: var(--ss-bg);
31
31
  border: 1px solid var(--ss-border);
32
32
  border-radius: 2.5rem;
@@ -37,7 +37,7 @@
37
37
  gap: 3rem;
38
38
  }
39
39
 
40
- :global(.ss-drop) {
40
+ .ss-drop {
41
41
  border: 3px dashed var(--ss-border);
42
42
  padding: 3.5rem 2.5rem;
43
43
  border-radius: 2.25rem;
@@ -51,13 +51,13 @@
51
51
  text-align: center;
52
52
  }
53
53
 
54
- :global(.ss-drop:hover),
55
- :global(.ss-drop-active) {
54
+ .ss-drop:hover,
55
+ .ss-drop-active {
56
56
  border-color: var(--ss-accent);
57
57
  background: var(--ss-accent-alpha);
58
58
  }
59
59
 
60
- :global(.ss-drop-icon) {
60
+ .ss-drop-icon {
61
61
  width: 4.5rem;
62
62
  height: 4.5rem;
63
63
  background: var(--ss-accent-alpha);
@@ -68,19 +68,19 @@
68
68
  color: var(--ss-accent);
69
69
  }
70
70
 
71
- :global(.ss-drop-icon svg) {
71
+ .ss-drop-icon svg {
72
72
  width: 2.25rem;
73
73
  height: 2.25rem;
74
74
  }
75
75
 
76
- :global(.ss-drop-title) {
76
+ .ss-drop-title {
77
77
  font-size: 1.75rem;
78
78
  font-weight: 950;
79
79
  color: var(--ss-text);
80
80
  margin: 0;
81
81
  }
82
82
 
83
- :global(.ss-drop-sub) {
83
+ .ss-drop-sub {
84
84
  font-size: 1rem;
85
85
  color: var(--ss-text-muted);
86
86
  max-width: 320px;
@@ -88,7 +88,7 @@
88
88
  font-weight: 700;
89
89
  }
90
90
 
91
- :global(.ss-controls) {
91
+ .ss-controls {
92
92
  display: grid;
93
93
  grid-template-columns: 1fr 1fr;
94
94
  gap: 3rem;
@@ -96,18 +96,18 @@
96
96
  }
97
97
 
98
98
  @media (max-width: 800px) {
99
- :global(.ss-controls) {
99
+ .ss-controls {
100
100
  grid-template-columns: 1fr;
101
101
  }
102
102
  }
103
103
 
104
- :global(.ss-control-group) {
104
+ .ss-control-group {
105
105
  display: flex;
106
106
  flex-direction: column;
107
107
  gap: 1.5rem;
108
108
  }
109
109
 
110
- :global(.ss-control-label) {
110
+ .ss-control-label {
111
111
  font-size: 0.8rem;
112
112
  font-weight: 900;
113
113
  text-transform: uppercase;
@@ -115,7 +115,7 @@
115
115
  letter-spacing: 0.1em;
116
116
  }
117
117
 
118
- :global(.ss-offset-wrap) {
118
+ .ss-offset-wrap {
119
119
  display: flex;
120
120
  align-items: center;
121
121
  gap: 1rem;
@@ -125,7 +125,7 @@
125
125
  padding: 0.75rem 1.25rem;
126
126
  }
127
127
 
128
- :global(.ss-offset-btn) {
128
+ .ss-offset-btn {
129
129
  width: 2.5rem;
130
130
  height: 2.5rem;
131
131
  background: none;
@@ -139,16 +139,16 @@
139
139
  flex-shrink: 0;
140
140
  }
141
141
 
142
- :global(.ss-offset-btn:hover) {
142
+ .ss-offset-btn:hover {
143
143
  color: var(--ss-accent);
144
144
  }
145
145
 
146
- :global(.ss-offset-btn svg) {
146
+ .ss-offset-btn svg {
147
147
  width: 1.5rem;
148
148
  height: 1.5rem;
149
149
  }
150
150
 
151
- :global(.ss-offset-input) {
151
+ .ss-offset-input {
152
152
  flex: 1;
153
153
  background: transparent;
154
154
  border: none;
@@ -160,28 +160,28 @@
160
160
  text-align: center;
161
161
  }
162
162
 
163
- :global(.ss-stats) {
163
+ .ss-stats {
164
164
  display: flex;
165
165
  gap: 2rem;
166
166
  justify-content: center;
167
167
  margin-top: 1rem;
168
168
  }
169
169
 
170
- :global(.ss-stat) {
170
+ .ss-stat {
171
171
  display: flex;
172
172
  flex-direction: column;
173
173
  align-items: center;
174
174
  gap: 0.25rem;
175
175
  }
176
176
 
177
- :global(.ss-stat-value) {
177
+ .ss-stat-value {
178
178
  display: block;
179
179
  font-weight: 900;
180
180
  color: var(--ss-accent);
181
181
  font-size: 1.25rem;
182
182
  }
183
183
 
184
- :global(.ss-stat-label) {
184
+ .ss-stat-label {
185
185
  font-size: 0.7rem;
186
186
  font-weight: 800;
187
187
  text-transform: uppercase;
@@ -189,33 +189,33 @@
189
189
  letter-spacing: 0.05em;
190
190
  }
191
191
 
192
- :global(.ss-status-card) {
192
+ .ss-status-card {
193
193
  display: flex;
194
194
  flex-direction: column;
195
195
  gap: 1.5rem;
196
196
  }
197
197
 
198
- :global(.ss-file-row) {
198
+ .ss-file-row {
199
199
  display: flex;
200
200
  align-items: center;
201
201
  gap: 1.5rem;
202
202
  }
203
203
 
204
- :global(.ss-file-icon) {
204
+ .ss-file-icon {
205
205
  width: 3rem;
206
206
  height: 3rem;
207
207
  color: var(--ss-accent);
208
208
  flex-shrink: 0;
209
209
  }
210
210
 
211
- :global(.ss-file-info) {
211
+ .ss-file-info {
212
212
  display: flex;
213
213
  flex-direction: column;
214
214
  gap: 0.25rem;
215
215
  min-width: 0;
216
216
  }
217
217
 
218
- :global(.ss-file-name) {
218
+ .ss-file-name {
219
219
  font-weight: 950;
220
220
  color: var(--ss-text);
221
221
  font-size: 0.95rem;
@@ -224,13 +224,13 @@
224
224
  text-overflow: ellipsis;
225
225
  }
226
226
 
227
- :global(.ss-file-times) {
227
+ .ss-file-times {
228
228
  font-size: 0.8rem;
229
229
  font-weight: 700;
230
230
  color: var(--ss-text-muted);
231
231
  }
232
232
 
233
- :global(.ss-btn-primary) {
233
+ .ss-btn-primary {
234
234
  width: 100%;
235
235
  padding: 1.25rem;
236
236
  background: var(--ss-accent);
@@ -247,17 +247,17 @@
247
247
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
248
248
  }
249
249
 
250
- :global(.ss-btn-primary:hover) {
250
+ .ss-btn-primary:hover {
251
251
  transform: translateY(-4px) scale(1.02);
252
252
  box-shadow: 0 15px 35px -10px var(--ss-accent);
253
253
  }
254
254
 
255
- :global(.ss-btn-primary svg) {
255
+ .ss-btn-primary svg {
256
256
  width: 1.25rem;
257
257
  height: 1.25rem;
258
258
  }
259
259
 
260
- :global(.ss-previews) {
260
+ .ss-previews {
261
261
  grid-column: 1 / -1;
262
262
  display: grid;
263
263
  grid-template-columns: 1fr 1fr;
@@ -265,13 +265,13 @@
265
265
  }
266
266
 
267
267
  @media (max-width: 800px) {
268
- :global(.ss-previews) {
268
+ .ss-previews {
269
269
  grid-column: auto;
270
270
  grid-template-columns: 1fr;
271
271
  }
272
272
  }
273
273
 
274
- :global(.ss-preview-box) {
274
+ .ss-preview-box {
275
275
  background: var(--ss-bg-elevated);
276
276
  padding: 1.5rem;
277
277
  border-radius: 1.75rem;
@@ -281,7 +281,7 @@
281
281
  gap: 1rem;
282
282
  }
283
283
 
284
- :global(.ss-preview-label) {
284
+ .ss-preview-label {
285
285
  font-size: 0.75rem;
286
286
  font-weight: 950;
287
287
  text-transform: uppercase;
@@ -290,11 +290,11 @@
290
290
  letter-spacing: 0.05em;
291
291
  }
292
292
 
293
- :global(.ss-preview-label-modified) {
293
+ .ss-preview-label-modified {
294
294
  color: var(--ss-accent);
295
295
  }
296
296
 
297
- :global(.ss-preview-scroll) {
297
+ .ss-preview-scroll {
298
298
  max-height: 250px;
299
299
  overflow-y: auto;
300
300
  display: flex;
@@ -302,24 +302,24 @@
302
302
  gap: 1rem;
303
303
  }
304
304
 
305
- :global(.ss-preview-item) {
305
+ .ss-preview-item {
306
306
  font-size: 0.85rem;
307
307
  line-height: 1.5;
308
308
  }
309
309
 
310
- :global(.ss-preview-time) {
310
+ .ss-preview-time {
311
311
  font-weight: 950;
312
312
  color: var(--ss-accent);
313
313
  font-size: 0.75rem;
314
314
  margin: 0 0 0.25rem;
315
315
  }
316
316
 
317
- :global(.ss-preview-text) {
317
+ .ss-preview-text {
318
318
  font-weight: 700;
319
319
  color: var(--ss-text);
320
320
  margin: 0;
321
321
  }
322
322
 
323
- :global(.ss-hidden) {
323
+ .ss-hidden {
324
324
  display: none;
325
- }
325
+ }