@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.
- package/package.json +1 -1
- package/src/tool/chromaticLens/chromatic-lens-color-palette-extraction-online.css +39 -39
- package/src/tool/collageMaker/free-online-photo-collage-maker-professional-compositions.css +47 -47
- package/src/tool/exifCleaner/exif-metadata-cleaner-remove-gps-photo-privacy.css +36 -36
- package/src/tool/imageCompressor/online-image-compressor-reduce-file-size-no-quality-loss.css +71 -64
- package/src/tool/printQualityCalculator/print-quality-calculator-pixels-to-cm-dpi.css +89 -81
- package/src/tool/privacyBlur/online-privacy-editor-pixelate-blur-faces-photos.css +36 -36
- package/src/tool/subtitleSync/synchronize-srt-subtitles-online-adjust-timing-free.css +43 -43
- package/src/tool/timelapseCalculator/timelapse-hyperlapse-calculator-perfect-intervals.css +44 -42
- package/src/tool/tvDistance/tv-viewing-distance-calculator-thx-4k-optimal-screen.css +56 -56
- package/src/tool/videoFrameExtractor/online-video-frame-extractor-capture-hd-stills.css +55 -55
- package/src/tool/chromaticLens/style.css +0 -308
- package/src/tool/collageMaker/style.css +0 -386
- package/src/tool/exifCleaner/style.css +0 -289
- package/src/tool/imageCompressor/style.css +0 -503
- package/src/tool/printQualityCalculator/style.css +0 -491
- package/src/tool/privacyBlur/style.css +0 -332
- package/src/tool/subtitleSync/style.css +0 -325
- package/src/tool/timelapseCalculator/style.css +0 -285
- package/src/tool/tvDistance/style.css +0 -435
- package/src/tool/videoFrameExtractor/style.css +0 -426
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* ── Print Quality Calculator ──────────────────────────── */
|
|
1
2
|
:root {
|
|
2
3
|
--pq-bg: #fff;
|
|
3
4
|
--pq-border: #cbd5e1;
|
|
@@ -6,7 +7,7 @@
|
|
|
6
7
|
--pq-accent: #4f46e5;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
.theme-dark {
|
|
10
11
|
--pq-bg: #0f172a;
|
|
11
12
|
--pq-border: #334155;
|
|
12
13
|
--pq-primary: #6366f1;
|
|
@@ -14,7 +15,7 @@
|
|
|
14
15
|
--pq-accent: #818cf8;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
.pq-wrapper {
|
|
18
19
|
width: 100%;
|
|
19
20
|
max-width: 56rem;
|
|
20
21
|
margin: 0 auto;
|
|
@@ -28,7 +29,8 @@
|
|
|
28
29
|
display: none;
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
/* Drop zone */
|
|
33
|
+
.pq-drop-zone {
|
|
32
34
|
position: relative;
|
|
33
35
|
cursor: pointer;
|
|
34
36
|
border: 2px dashed var(--pq-border);
|
|
@@ -37,15 +39,15 @@
|
|
|
37
39
|
transition: border-color 0.3s, background 0.3s;
|
|
38
40
|
}
|
|
39
41
|
|
|
40
|
-
|
|
42
|
+
.theme-dark .pq-drop-zone {
|
|
41
43
|
border-color: var(--pq-border);
|
|
42
44
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
.pq-drop-zone:hover,
|
|
46
|
+
.pq-drop-zone.pq-drop-active {
|
|
45
47
|
border-color: var(--pq-primary);
|
|
46
48
|
background: rgba(99, 102, 241, 0.04);
|
|
47
49
|
}
|
|
48
|
-
|
|
50
|
+
.pq-drop-inner {
|
|
49
51
|
display: flex;
|
|
50
52
|
flex-direction: column;
|
|
51
53
|
align-items: center;
|
|
@@ -53,7 +55,7 @@
|
|
|
53
55
|
text-align: center;
|
|
54
56
|
gap: 1rem;
|
|
55
57
|
}
|
|
56
|
-
|
|
58
|
+
.pq-upload-icon-wrap {
|
|
57
59
|
width: 5rem;
|
|
58
60
|
height: 5rem;
|
|
59
61
|
background: var(--pq-primary-light);
|
|
@@ -65,29 +67,29 @@
|
|
|
65
67
|
transition: transform 0.3s;
|
|
66
68
|
}
|
|
67
69
|
|
|
68
|
-
|
|
70
|
+
.theme-dark .pq-upload-icon-wrap {
|
|
69
71
|
background: rgba(99, 102, 241, 0.2);
|
|
70
72
|
color: #818cf8;
|
|
71
73
|
}
|
|
72
|
-
|
|
74
|
+
.pq-drop-zone:hover .pq-upload-icon-wrap {
|
|
73
75
|
transform: scale(1.1);
|
|
74
76
|
}
|
|
75
|
-
|
|
77
|
+
.pq-drop-title {
|
|
76
78
|
font-size: 1.25rem;
|
|
77
79
|
font-weight: 700;
|
|
78
80
|
color: #0f172a;
|
|
79
81
|
margin: 0;
|
|
80
82
|
}
|
|
81
83
|
|
|
82
|
-
|
|
84
|
+
.theme-dark .pq-drop-title {
|
|
83
85
|
color: #f1f5f9;
|
|
84
86
|
}
|
|
85
|
-
|
|
87
|
+
.pq-drop-sub {
|
|
86
88
|
color: #64748b;
|
|
87
89
|
margin: 0.25rem 0 0;
|
|
88
90
|
font-size: 0.95rem;
|
|
89
91
|
}
|
|
90
|
-
|
|
92
|
+
.pq-drop-overlay {
|
|
91
93
|
position: absolute;
|
|
92
94
|
inset: 0;
|
|
93
95
|
background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(168,85,247,0.04));
|
|
@@ -96,9 +98,10 @@
|
|
|
96
98
|
pointer-events: none;
|
|
97
99
|
transition: opacity 0.3s;
|
|
98
100
|
}
|
|
99
|
-
|
|
101
|
+
.pq-drop-zone:hover .pq-drop-overlay { opacity: 1; }
|
|
100
102
|
|
|
101
|
-
|
|
103
|
+
/* Results */
|
|
104
|
+
.pq-results {
|
|
102
105
|
display: flex;
|
|
103
106
|
flex-direction: column;
|
|
104
107
|
gap: 2rem;
|
|
@@ -116,7 +119,8 @@
|
|
|
116
119
|
}
|
|
117
120
|
}
|
|
118
121
|
|
|
119
|
-
|
|
122
|
+
/* File card */
|
|
123
|
+
.pq-file-card {
|
|
120
124
|
background: #fff;
|
|
121
125
|
border: 1px solid #e2e8f0;
|
|
122
126
|
border-radius: 0.75rem;
|
|
@@ -124,29 +128,29 @@
|
|
|
124
128
|
padding: 1.5rem;
|
|
125
129
|
}
|
|
126
130
|
|
|
127
|
-
|
|
131
|
+
.theme-dark .pq-file-card {
|
|
128
132
|
background: #0f172a;
|
|
129
133
|
border-color: #1e293b;
|
|
130
134
|
}
|
|
131
|
-
|
|
135
|
+
.pq-file-left {
|
|
132
136
|
display: flex;
|
|
133
137
|
align-items: center;
|
|
134
138
|
gap: 1.5rem;
|
|
135
139
|
}
|
|
136
|
-
|
|
140
|
+
.pq-preview-wrap {
|
|
137
141
|
position: relative;
|
|
138
142
|
width: 8rem;
|
|
139
143
|
height: 8rem;
|
|
140
144
|
flex-shrink: 0;
|
|
141
145
|
}
|
|
142
|
-
|
|
146
|
+
.pq-preview-img {
|
|
143
147
|
width: 100%;
|
|
144
148
|
height: 100%;
|
|
145
149
|
object-fit: cover;
|
|
146
150
|
border-radius: 0.5rem;
|
|
147
151
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
148
152
|
}
|
|
149
|
-
|
|
153
|
+
.pq-file-name {
|
|
150
154
|
font-weight: 700;
|
|
151
155
|
color: #0f172a;
|
|
152
156
|
font-size: 1rem;
|
|
@@ -157,15 +161,15 @@
|
|
|
157
161
|
max-width: 20rem;
|
|
158
162
|
}
|
|
159
163
|
|
|
160
|
-
|
|
164
|
+
.theme-dark .pq-file-name {
|
|
161
165
|
color: #f1f5f9;
|
|
162
166
|
}
|
|
163
|
-
|
|
167
|
+
.pq-file-meta {
|
|
164
168
|
display: flex;
|
|
165
169
|
flex-wrap: wrap;
|
|
166
170
|
gap: 1rem;
|
|
167
171
|
}
|
|
168
|
-
|
|
172
|
+
.pq-meta-item {
|
|
169
173
|
display: flex;
|
|
170
174
|
align-items: center;
|
|
171
175
|
gap: 0.25rem;
|
|
@@ -173,7 +177,8 @@
|
|
|
173
177
|
color: #64748b;
|
|
174
178
|
}
|
|
175
179
|
|
|
176
|
-
|
|
180
|
+
/* Main grid */
|
|
181
|
+
.pq-main-grid {
|
|
177
182
|
display: grid;
|
|
178
183
|
grid-template-columns: 1fr 1fr;
|
|
179
184
|
gap: 2rem;
|
|
@@ -183,18 +188,19 @@
|
|
|
183
188
|
.pq-main-grid { grid-template-columns: 1fr; }
|
|
184
189
|
}
|
|
185
190
|
|
|
186
|
-
|
|
191
|
+
/* Config panel */
|
|
192
|
+
.pq-config-panel {
|
|
187
193
|
background: #f8fafc;
|
|
188
194
|
border: 1px solid #e2e8f0;
|
|
189
195
|
border-radius: 0.75rem;
|
|
190
196
|
padding: 1.5rem;
|
|
191
197
|
}
|
|
192
198
|
|
|
193
|
-
|
|
199
|
+
.theme-dark .pq-config-panel {
|
|
194
200
|
background: rgba(30, 41, 59, 0.5);
|
|
195
201
|
border-color: var(--pq-border);
|
|
196
202
|
}
|
|
197
|
-
|
|
203
|
+
.pq-config-label {
|
|
198
204
|
display: block;
|
|
199
205
|
font-size: 0.875rem;
|
|
200
206
|
font-weight: 500;
|
|
@@ -202,10 +208,10 @@
|
|
|
202
208
|
margin-bottom: 1rem;
|
|
203
209
|
}
|
|
204
210
|
|
|
205
|
-
|
|
211
|
+
.theme-dark .pq-config-label {
|
|
206
212
|
color: #94a3b8;
|
|
207
213
|
}
|
|
208
|
-
|
|
214
|
+
.pq-slider {
|
|
209
215
|
width: 100%;
|
|
210
216
|
height: 0.5rem;
|
|
211
217
|
background: #e2e8f0;
|
|
@@ -216,16 +222,16 @@
|
|
|
216
222
|
margin-bottom: 1rem;
|
|
217
223
|
}
|
|
218
224
|
|
|
219
|
-
|
|
225
|
+
.theme-dark .pq-slider {
|
|
220
226
|
background: #334155;
|
|
221
227
|
}
|
|
222
|
-
|
|
228
|
+
.pq-dpi-row {
|
|
223
229
|
display: flex;
|
|
224
230
|
align-items: center;
|
|
225
231
|
gap: 1rem;
|
|
226
232
|
margin-bottom: 1.5rem;
|
|
227
233
|
}
|
|
228
|
-
|
|
234
|
+
.pq-dpi-number {
|
|
229
235
|
width: 6rem;
|
|
230
236
|
border: 1px solid #e2e8f0;
|
|
231
237
|
border-radius: 0.5rem;
|
|
@@ -237,23 +243,23 @@
|
|
|
237
243
|
padding: 0.4rem 0.5rem;
|
|
238
244
|
outline: none;
|
|
239
245
|
}
|
|
240
|
-
|
|
246
|
+
.pq-dpi-number:focus { border-color: var(--pq-primary); }
|
|
241
247
|
|
|
242
|
-
|
|
248
|
+
.theme-dark .pq-dpi-number {
|
|
243
249
|
background: #0f172a;
|
|
244
250
|
border-color: var(--pq-border);
|
|
245
251
|
color: #f1f5f9;
|
|
246
252
|
}
|
|
247
|
-
|
|
253
|
+
.pq-dpi-label {
|
|
248
254
|
font-size: 0.875rem;
|
|
249
255
|
color: #64748b;
|
|
250
256
|
}
|
|
251
|
-
|
|
257
|
+
.pq-presets {
|
|
252
258
|
display: flex;
|
|
253
259
|
flex-wrap: wrap;
|
|
254
260
|
gap: 0.5rem;
|
|
255
261
|
}
|
|
256
|
-
|
|
262
|
+
.pq-preset-btn {
|
|
257
263
|
padding: 0.25rem 0.75rem;
|
|
258
264
|
font-size: 0.75rem;
|
|
259
265
|
font-weight: 500;
|
|
@@ -264,31 +270,32 @@
|
|
|
264
270
|
cursor: pointer;
|
|
265
271
|
transition: background 0.15s, color 0.15s;
|
|
266
272
|
}
|
|
267
|
-
|
|
273
|
+
.pq-preset-btn:hover { background: #cbd5e1; }
|
|
268
274
|
|
|
269
|
-
|
|
275
|
+
.theme-dark .pq-preset-btn {
|
|
270
276
|
background: #334155;
|
|
271
277
|
color: #94a3b8;
|
|
272
278
|
}
|
|
273
279
|
|
|
274
|
-
|
|
280
|
+
.theme-dark .pq-preset-btn:hover {
|
|
275
281
|
background: #475569;
|
|
276
282
|
}
|
|
277
|
-
|
|
283
|
+
.pq-preset-active {
|
|
278
284
|
background: var(--pq-primary-light);
|
|
279
285
|
color: #4338ca;
|
|
280
286
|
box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
|
|
281
287
|
}
|
|
282
288
|
|
|
283
|
-
|
|
289
|
+
.theme-dark .pq-preset-active {
|
|
284
290
|
background: rgba(99, 102, 241, 0.3);
|
|
285
291
|
color: #a5b4fc;
|
|
286
292
|
}
|
|
287
293
|
|
|
288
|
-
|
|
294
|
+
/* Output panel – gradient */
|
|
295
|
+
.pq-output-panel {
|
|
289
296
|
display: flex;
|
|
290
297
|
}
|
|
291
|
-
|
|
298
|
+
.pq-output-gradient {
|
|
292
299
|
flex: 1;
|
|
293
300
|
display: flex;
|
|
294
301
|
flex-direction: column;
|
|
@@ -301,7 +308,7 @@
|
|
|
301
308
|
position: relative;
|
|
302
309
|
overflow: hidden;
|
|
303
310
|
}
|
|
304
|
-
|
|
311
|
+
.pq-output-blur-bg {
|
|
305
312
|
position: absolute;
|
|
306
313
|
top: 0; right: 0;
|
|
307
314
|
width: 8rem; height: 8rem;
|
|
@@ -311,7 +318,7 @@
|
|
|
311
318
|
transform: translate(2rem, -2rem);
|
|
312
319
|
pointer-events: none;
|
|
313
320
|
}
|
|
314
|
-
|
|
321
|
+
.pq-output-subtitle {
|
|
315
322
|
font-size: 0.75rem;
|
|
316
323
|
font-weight: 500;
|
|
317
324
|
text-transform: uppercase;
|
|
@@ -320,7 +327,7 @@
|
|
|
320
327
|
margin: 0 0 0.5rem;
|
|
321
328
|
position: relative;
|
|
322
329
|
}
|
|
323
|
-
|
|
330
|
+
.pq-output-size {
|
|
324
331
|
display: flex;
|
|
325
332
|
align-items: baseline;
|
|
326
333
|
gap: 0.5rem;
|
|
@@ -329,25 +336,25 @@
|
|
|
329
336
|
margin-bottom: 0.25rem;
|
|
330
337
|
position: relative;
|
|
331
338
|
}
|
|
332
|
-
|
|
339
|
+
.pq-size-sep {
|
|
333
340
|
font-size: 1.5rem;
|
|
334
341
|
opacity: 0.5;
|
|
335
342
|
}
|
|
336
|
-
|
|
343
|
+
.pq-size-unit {
|
|
337
344
|
font-size: 1.5rem;
|
|
338
345
|
}
|
|
339
|
-
|
|
346
|
+
.pq-output-inches {
|
|
340
347
|
color: rgba(199, 210, 254, 0.8);
|
|
341
348
|
font-size: 0.875rem;
|
|
342
349
|
margin-bottom: 1.5rem;
|
|
343
350
|
position: relative;
|
|
344
351
|
}
|
|
345
|
-
|
|
352
|
+
.pq-quality-section {
|
|
346
353
|
padding-top: 1rem;
|
|
347
354
|
border-top: 1px solid rgba(255,255,255,0.2);
|
|
348
355
|
position: relative;
|
|
349
356
|
}
|
|
350
|
-
|
|
357
|
+
.pq-quality-badge {
|
|
351
358
|
display: inline-flex;
|
|
352
359
|
align-items: center;
|
|
353
360
|
gap: 0.375rem;
|
|
@@ -359,44 +366,45 @@
|
|
|
359
366
|
backdrop-filter: blur(4px);
|
|
360
367
|
margin-bottom: 0.5rem;
|
|
361
368
|
}
|
|
362
|
-
|
|
369
|
+
.pq-badge-green {
|
|
363
370
|
background: rgba(16, 185, 129, 0.25);
|
|
364
371
|
box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3);
|
|
365
372
|
}
|
|
366
373
|
|
|
367
|
-
|
|
374
|
+
.pq-badge-yellow {
|
|
368
375
|
background: rgba(234, 179, 8, 0.25);
|
|
369
376
|
box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.3);
|
|
370
377
|
}
|
|
371
378
|
|
|
372
|
-
|
|
379
|
+
.pq-badge-red {
|
|
373
380
|
background: rgba(239, 68, 68, 0.25);
|
|
374
381
|
box-shadow: 0 0 0 1px rgba(252, 165, 165, 0.3);
|
|
375
382
|
}
|
|
376
383
|
|
|
377
|
-
|
|
384
|
+
.pq-badge-slate {
|
|
378
385
|
background: rgba(100, 116, 139, 0.25);
|
|
379
386
|
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.3);
|
|
380
387
|
}
|
|
381
|
-
|
|
388
|
+
.pq-quality-desc {
|
|
382
389
|
font-size: 0.875rem;
|
|
383
390
|
color: rgba(199,210,254,0.9);
|
|
384
391
|
line-height: 1.4;
|
|
385
392
|
margin: 0;
|
|
386
393
|
}
|
|
387
394
|
|
|
388
|
-
|
|
395
|
+
/* Formats */
|
|
396
|
+
.pq-formats-card {
|
|
389
397
|
background: #fff;
|
|
390
398
|
border: 1px solid #e2e8f0;
|
|
391
399
|
border-radius: 0.75rem;
|
|
392
400
|
padding: 1.5rem;
|
|
393
401
|
}
|
|
394
402
|
|
|
395
|
-
|
|
403
|
+
.theme-dark .pq-formats-card {
|
|
396
404
|
background: #0f172a;
|
|
397
405
|
border-color: #1e293b;
|
|
398
406
|
}
|
|
399
|
-
|
|
407
|
+
.pq-formats-title {
|
|
400
408
|
display: flex;
|
|
401
409
|
align-items: center;
|
|
402
410
|
gap: 0.5rem;
|
|
@@ -406,18 +414,18 @@
|
|
|
406
414
|
margin: 0 0 1rem;
|
|
407
415
|
}
|
|
408
416
|
|
|
409
|
-
|
|
417
|
+
.theme-dark .pq-formats-title {
|
|
410
418
|
color: #f1f5f9;
|
|
411
419
|
}
|
|
412
|
-
|
|
420
|
+
.pq-formats-scroll {
|
|
413
421
|
overflow-x: auto;
|
|
414
422
|
}
|
|
415
|
-
|
|
423
|
+
.pq-formats-table {
|
|
416
424
|
width: 100%;
|
|
417
425
|
border-collapse: collapse;
|
|
418
426
|
font-size: 0.875rem;
|
|
419
427
|
}
|
|
420
|
-
|
|
428
|
+
.pq-formats-table th {
|
|
421
429
|
text-align: left;
|
|
422
430
|
padding: 0.75rem 1rem;
|
|
423
431
|
font-size: 0.75rem;
|
|
@@ -428,56 +436,56 @@
|
|
|
428
436
|
background: #f8fafc;
|
|
429
437
|
}
|
|
430
438
|
|
|
431
|
-
|
|
439
|
+
.theme-dark .pq-formats-table th {
|
|
432
440
|
background: #1e293b;
|
|
433
441
|
color: #94a3b8;
|
|
434
442
|
}
|
|
435
|
-
|
|
443
|
+
.pq-formats-row {
|
|
436
444
|
border-bottom: 1px solid #f1f5f9;
|
|
437
445
|
transition: background 0.15s;
|
|
438
446
|
}
|
|
439
447
|
|
|
440
|
-
|
|
448
|
+
.pq-formats-row:hover {
|
|
441
449
|
background: #f8fafc;
|
|
442
450
|
}
|
|
443
451
|
|
|
444
|
-
|
|
452
|
+
.theme-dark .pq-formats-row {
|
|
445
453
|
border-color: #1e293b;
|
|
446
454
|
}
|
|
447
455
|
|
|
448
|
-
|
|
456
|
+
.theme-dark .pq-formats-row:hover {
|
|
449
457
|
background: #1e293b;
|
|
450
458
|
}
|
|
451
|
-
|
|
459
|
+
.pq-td {
|
|
452
460
|
padding: 0.75rem 1rem;
|
|
453
461
|
color: #475569;
|
|
454
462
|
}
|
|
455
463
|
|
|
456
|
-
|
|
464
|
+
.theme-dark .pq-td {
|
|
457
465
|
color: #94a3b8;
|
|
458
466
|
}
|
|
459
|
-
|
|
467
|
+
.pq-td-name {
|
|
460
468
|
font-weight: 600;
|
|
461
469
|
color: #0f172a;
|
|
462
470
|
}
|
|
463
471
|
|
|
464
|
-
|
|
472
|
+
.theme-dark .pq-td-name {
|
|
465
473
|
color: #f1f5f9;
|
|
466
474
|
}
|
|
467
|
-
|
|
475
|
+
.pq-status {
|
|
468
476
|
display: inline-flex;
|
|
469
477
|
align-items: center;
|
|
470
478
|
gap: 0.35rem;
|
|
471
479
|
font-weight: 600;
|
|
472
480
|
font-size: 0.8rem;
|
|
473
481
|
}
|
|
474
|
-
|
|
475
|
-
|
|
482
|
+
.pq-status-ok { color: #16a34a; }
|
|
483
|
+
.pq-status-no { color: #d97706; }
|
|
476
484
|
|
|
477
|
-
|
|
485
|
+
.theme-dark .pq-status-ok {
|
|
478
486
|
color: #4ade80;
|
|
479
487
|
}
|
|
480
488
|
|
|
481
|
-
|
|
489
|
+
.theme-dark .pq-status-no {
|
|
482
490
|
color: #fbbf24;
|
|
483
|
-
}
|
|
491
|
+
}
|