@jjlmoya/utils-audiovisual 1.14.0 → 1.16.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 (44) hide show
  1. package/package.json +7 -4
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/entries.ts +32 -0
  4. package/src/tool/chromaticLens/chromatic-lens-color-palette-extraction-online.css +308 -0
  5. package/src/tool/chromaticLens/component.astro +0 -309
  6. package/src/tool/chromaticLens/entry.ts +39 -0
  7. package/src/tool/chromaticLens/index.ts +2 -41
  8. package/src/tool/collageMaker/component.astro +0 -387
  9. package/src/tool/collageMaker/entry.ts +48 -0
  10. package/src/tool/collageMaker/free-online-photo-collage-maker-professional-compositions.css +386 -0
  11. package/src/tool/collageMaker/index.ts +2 -50
  12. package/src/tool/exifCleaner/component.astro +0 -290
  13. package/src/tool/exifCleaner/entry.ts +53 -0
  14. package/src/tool/exifCleaner/exif-metadata-cleaner-remove-gps-photo-privacy.css +289 -0
  15. package/src/tool/exifCleaner/index.ts +2 -55
  16. package/src/tool/imageCompressor/component.astro +0 -498
  17. package/src/tool/imageCompressor/entry.ts +56 -0
  18. package/src/tool/imageCompressor/index.ts +2 -58
  19. package/src/tool/imageCompressor/online-image-compressor-reduce-file-size-no-quality-loss.css +496 -0
  20. package/src/tool/printQualityCalculator/component.astro +0 -485
  21. package/src/tool/printQualityCalculator/entry.ts +66 -0
  22. package/src/tool/printQualityCalculator/index.ts +2 -68
  23. package/src/tool/printQualityCalculator/print-quality-calculator-pixels-to-cm-dpi.css +483 -0
  24. package/src/tool/privacyBlur/component.astro +0 -334
  25. package/src/tool/privacyBlur/entry.ts +45 -0
  26. package/src/tool/privacyBlur/index.ts +2 -47
  27. package/src/tool/privacyBlur/online-privacy-editor-pixelate-blur-faces-photos.css +332 -0
  28. package/src/tool/subtitleSync/component.astro +0 -327
  29. package/src/tool/subtitleSync/entry.ts +45 -0
  30. package/src/tool/subtitleSync/index.ts +2 -47
  31. package/src/tool/subtitleSync/synchronize-srt-subtitles-online-adjust-timing-free.css +325 -0
  32. package/src/tool/timelapseCalculator/component.astro +0 -285
  33. package/src/tool/timelapseCalculator/entry.ts +48 -0
  34. package/src/tool/timelapseCalculator/index.ts +2 -50
  35. package/src/tool/timelapseCalculator/timelapse-hyperlapse-calculator-perfect-intervals.css +283 -0
  36. package/src/tool/tvDistance/component.astro +0 -437
  37. package/src/tool/tvDistance/entry.ts +45 -0
  38. package/src/tool/tvDistance/index.ts +2 -47
  39. package/src/tool/tvDistance/tv-viewing-distance-calculator-thx-4k-optimal-screen.css +435 -0
  40. package/src/tool/videoFrameExtractor/component.astro +0 -428
  41. package/src/tool/videoFrameExtractor/entry.ts +49 -0
  42. package/src/tool/videoFrameExtractor/index.ts +2 -51
  43. package/src/tool/videoFrameExtractor/online-video-frame-extractor-capture-hd-stills.css +426 -0
  44. package/src/tools.ts +1 -1
package/package.json CHANGED
@@ -1,15 +1,17 @@
1
1
  {
2
2
  "name": "@jjlmoya/utils-audiovisual",
3
- "version": "1.14.0",
3
+ "version": "1.16.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
7
7
  "exports": {
8
8
  ".": "./src/index.ts",
9
- "./data": "./src/data.ts"
9
+ "./data": "./src/data.ts",
10
+ "./entries": "./src/entries.ts"
10
11
  },
11
12
  "files": [
12
- "src"
13
+ "src",
14
+ "scripts"
13
15
  ],
14
16
  "publishConfig": {
15
17
  "access": "public"
@@ -28,7 +30,8 @@
28
30
  "postversion": "git push && git push --tags",
29
31
  "patch": "npm version patch",
30
32
  "minor": "npm version minor",
31
- "major": "npm version major"
33
+ "major": "npm version major",
34
+ "postinstall": "node scripts/postinstall.mjs"
32
35
  },
33
36
  "lint-staged": {
34
37
  "*.{ts,tsx,astro}": [
@@ -0,0 +1,27 @@
1
+ import { readFileSync, writeFileSync, mkdirSync, readdirSync } from 'fs';
2
+ import { join, dirname } from 'path';
3
+ import { fileURLToPath } from 'url';
4
+
5
+ const libDir = dirname(fileURLToPath(import.meta.url));
6
+ const toolsDir = join(libDir, '../src/tool');
7
+
8
+ const inNodeModules = libDir.includes('node_modules');
9
+ if (!inNodeModules) process.exit(0);
10
+
11
+ const projectRoot = join(libDir, '../../../..');
12
+ const categoryKey = JSON.parse(readFileSync(join(libDir, '../package.json'), 'utf8')).name.replace('@jjlmoya/utils-', '');
13
+ const destDir = join(projectRoot, `public/styles/lib/${categoryKey}`);
14
+
15
+ mkdirSync(destDir, { recursive: true });
16
+
17
+ const tools = readdirSync(toolsDir, { withFileTypes: true }).filter(d => d.isDirectory());
18
+ for (const tool of tools) {
19
+ const toolDir = join(toolsDir, tool.name);
20
+ let files;
21
+ try { files = readdirSync(toolDir).filter(f => f.endsWith('.css')); }
22
+ catch { continue; }
23
+ for (const file of files) {
24
+ writeFileSync(join(destDir, file), readFileSync(join(toolDir, file)));
25
+ console.log(`[@jjlmoya/utils-${categoryKey}] copied ${file}`);
26
+ }
27
+ }
package/src/entries.ts ADDED
@@ -0,0 +1,32 @@
1
+ export { chromaticLens } from './tool/chromaticLens/entry';
2
+ export type { ChromaticLensUI, ChromaticLensLocaleContent } from './tool/chromaticLens/entry';
3
+ export { collageMaker } from './tool/collageMaker/entry';
4
+ export type { CollageMakerUI, CollageMakerLocaleContent } from './tool/collageMaker/entry';
5
+ export { exifCleaner } from './tool/exifCleaner/entry';
6
+ export type { ExifCleanerUI, ExifCleanerLocaleContent } from './tool/exifCleaner/entry';
7
+ export { imageCompressor } from './tool/imageCompressor/entry';
8
+ export type { ImageCompressorUI, ImageCompressorLocaleContent } from './tool/imageCompressor/entry';
9
+ export { printQualityCalculator } from './tool/printQualityCalculator/entry';
10
+ export type { PrintQualityCalculatorUI, PrintQualityCalculatorLocaleContent } from './tool/printQualityCalculator/entry';
11
+ export { privacyBlur } from './tool/privacyBlur/entry';
12
+ export type { PrivacyBlurUI, PrivacyBlurLocaleContent } from './tool/privacyBlur/entry';
13
+ export { subtitleSync } from './tool/subtitleSync/entry';
14
+ export type { SubtitleSyncUI, SubtitleSyncLocaleContent } from './tool/subtitleSync/entry';
15
+ export { timelapseCalculator } from './tool/timelapseCalculator/entry';
16
+ export type { TimelapseUI, TimelapseLocaleContent } from './tool/timelapseCalculator/entry';
17
+ export { tvDistance } from './tool/tvDistance/entry';
18
+ export type { TvDistanceUI, TvDistanceLocaleContent } from './tool/tvDistance/entry';
19
+ export { videoFrameExtractor } from './tool/videoFrameExtractor/entry';
20
+ export type { VideoFrameExtractorUI, VideoFrameExtractorLocaleContent } from './tool/videoFrameExtractor/entry';
21
+ export { audiovisualCategory, toolsCategory } from './category';
22
+ import { chromaticLens } from './tool/chromaticLens/entry';
23
+ import { collageMaker } from './tool/collageMaker/entry';
24
+ import { exifCleaner } from './tool/exifCleaner/entry';
25
+ import { imageCompressor } from './tool/imageCompressor/entry';
26
+ import { printQualityCalculator } from './tool/printQualityCalculator/entry';
27
+ import { privacyBlur } from './tool/privacyBlur/entry';
28
+ import { subtitleSync } from './tool/subtitleSync/entry';
29
+ import { timelapseCalculator } from './tool/timelapseCalculator/entry';
30
+ import { tvDistance } from './tool/tvDistance/entry';
31
+ import { videoFrameExtractor } from './tool/videoFrameExtractor/entry';
32
+ export const ALL_ENTRIES = [chromaticLens, collageMaker, exifCleaner, imageCompressor, printQualityCalculator, privacyBlur, subtitleSync, timelapseCalculator, tvDistance, videoFrameExtractor];
@@ -0,0 +1,308 @@
1
+ :global(.cl-root) {
2
+ --cl-bg: #fff;
3
+ --cl-bg-elevated: #f8fafc;
4
+ --cl-border: #e2e8f0;
5
+ --cl-text: #0f172a;
6
+ --cl-text-muted: #64748b;
7
+ --cl-accent: #6366f1;
8
+ --cl-accent-alpha: rgba(99, 102, 241, 0.08);
9
+ --cl-accent-alpha-hover: rgba(99, 102, 241, 0.04);
10
+ --cl-emerald: #10b981;
11
+ --cl-emerald-alpha: rgba(16, 185, 129, 0.06);
12
+ --cl-shadow: rgba(0, 0, 0, 0.15);
13
+
14
+ padding: 2.5rem 1.5rem;
15
+ max-width: 1000px;
16
+ margin: 0 auto;
17
+ }
18
+
19
+ :global(.theme-dark .cl-root) {
20
+ --cl-bg: #18181b;
21
+ --cl-bg-elevated: #27272a;
22
+ --cl-border: #3f3f46;
23
+ --cl-text: #f4f4f5;
24
+ --cl-text-muted: #71717a;
25
+ --cl-accent: #818cf8;
26
+ --cl-accent-alpha: rgba(129, 140, 248, 0.12);
27
+ --cl-accent-alpha-hover: rgba(129, 140, 248, 0.06);
28
+ --cl-emerald: #34d399;
29
+ --cl-emerald-alpha: rgba(52, 211, 153, 0.08);
30
+ --cl-shadow: rgba(0, 0, 0, 0.5);
31
+ }
32
+
33
+ :global(.cl-card) {
34
+ background: var(--cl-bg);
35
+ border: 1px solid var(--cl-border);
36
+ border-radius: 3rem;
37
+ padding: 1.5rem;
38
+ box-shadow: 0 45px 120px -30px var(--cl-shadow);
39
+ position: relative;
40
+ overflow: hidden;
41
+ }
42
+
43
+ :global(.cl-drop) {
44
+ padding: 5rem 2rem;
45
+ display: flex;
46
+ flex-direction: column;
47
+ align-items: center;
48
+ border: 3px dashed var(--cl-border);
49
+ border-radius: 2.5rem;
50
+ cursor: pointer;
51
+ transition: all 0.2s ease;
52
+ text-align: center;
53
+ gap: 0.5rem;
54
+ }
55
+
56
+ :global(.cl-drop:hover),
57
+ :global(.cl-drop-active) {
58
+ background: var(--cl-accent-alpha-hover);
59
+ border-color: var(--cl-accent);
60
+ }
61
+
62
+ :global(.cl-drop-icon) {
63
+ width: 5rem;
64
+ height: 5rem;
65
+ background: var(--cl-accent-alpha);
66
+ border-radius: 50%;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ margin-bottom: 1rem;
71
+ color: var(--cl-accent);
72
+ }
73
+
74
+ :global(.cl-drop-icon svg) {
75
+ width: 2.5rem;
76
+ height: 2.5rem;
77
+ }
78
+
79
+ :global(.cl-drop-title) {
80
+ font-size: 2rem;
81
+ font-weight: 950;
82
+ color: var(--cl-text);
83
+ margin: 0;
84
+ }
85
+
86
+ :global(.cl-drop-sub) {
87
+ font-size: 1.1rem;
88
+ color: var(--cl-text-muted);
89
+ margin: 0;
90
+ font-weight: 600;
91
+ }
92
+
93
+ :global(.cl-workspace) {
94
+ padding: 1.5rem;
95
+ }
96
+
97
+ :global(.cl-mini-drop) {
98
+ display: inline-flex;
99
+ align-items: center;
100
+ gap: 0.75rem;
101
+ padding: 0.75rem 1.25rem;
102
+ background: var(--cl-bg-elevated);
103
+ border: 1px solid var(--cl-border);
104
+ border-radius: 1rem;
105
+ font-size: 0.75rem;
106
+ font-weight: 800;
107
+ color: var(--cl-text-muted);
108
+ cursor: pointer;
109
+ margin-bottom: 2rem;
110
+ transition: border-color 0.2s, color 0.2s;
111
+ }
112
+
113
+ :global(.cl-mini-drop:hover) {
114
+ border-color: var(--cl-accent);
115
+ color: var(--cl-accent);
116
+ }
117
+
118
+ :global(.cl-mini-drop svg) {
119
+ width: 1.1rem;
120
+ height: 1.1rem;
121
+ }
122
+
123
+ :global(.cl-config-bar) {
124
+ padding: 1rem 0;
125
+ margin-bottom: 2rem;
126
+ border-bottom: 1px solid var(--cl-border);
127
+ display: flex;
128
+ justify-content: flex-end;
129
+ }
130
+
131
+ :global(.cl-config-item) {
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 1rem;
135
+ }
136
+
137
+ :global(.cl-config-label) {
138
+ font-size: 0.75rem;
139
+ font-weight: 900;
140
+ text-transform: uppercase;
141
+ color: var(--cl-text-muted);
142
+ letter-spacing: 0.1em;
143
+ }
144
+
145
+ :global(.cl-count-select) {
146
+ padding: 0.5rem 1rem;
147
+ border-radius: 0.75rem;
148
+ background: var(--cl-bg-elevated);
149
+ border: 1px solid var(--cl-border);
150
+ color: var(--cl-text);
151
+ font-weight: 800;
152
+ cursor: pointer;
153
+ }
154
+
155
+ :global(.cl-result-layout) {
156
+ display: grid;
157
+ grid-template-columns: 1fr 1.25fr;
158
+ gap: 3rem;
159
+ }
160
+
161
+ @media (max-width: 800px) {
162
+ :global(.cl-result-layout) {
163
+ grid-template-columns: 1fr;
164
+ }
165
+ }
166
+
167
+ :global(.cl-preview-col) {
168
+ display: flex;
169
+ flex-direction: column;
170
+ gap: 1rem;
171
+ }
172
+
173
+ :global(.cl-preview-img) {
174
+ width: 100%;
175
+ border-radius: 1.5rem;
176
+ box-shadow: 0 20px 40px var(--cl-shadow);
177
+ display: block;
178
+ }
179
+
180
+ :global(.cl-palette-col) {
181
+ display: flex;
182
+ flex-direction: column;
183
+ gap: 1.5rem;
184
+ }
185
+
186
+ :global(.cl-palette-header) {
187
+ display: flex;
188
+ align-items: center;
189
+ gap: 1rem;
190
+ color: var(--cl-accent);
191
+ }
192
+
193
+ :global(.cl-palette-header svg) {
194
+ width: 1.25rem;
195
+ height: 1.25rem;
196
+ flex-shrink: 0;
197
+ }
198
+
199
+ :global(.cl-palette-header h4) {
200
+ font-size: 1.25rem;
201
+ font-weight: 950;
202
+ color: var(--cl-text);
203
+ margin: 0;
204
+ }
205
+
206
+ :global(.cl-loader) {
207
+ display: flex;
208
+ flex-direction: column;
209
+ align-items: center;
210
+ gap: 1rem;
211
+ padding: 2rem 0;
212
+ }
213
+
214
+ :global(.cl-spinner) {
215
+ width: 3rem;
216
+ height: 3rem;
217
+ border: 3px solid var(--cl-accent-alpha);
218
+ border-top-color: var(--cl-accent);
219
+ border-radius: 50%;
220
+ animation: cl-spin 0.8s linear infinite;
221
+ }
222
+
223
+ :global(.cl-loader-text) {
224
+ font-size: 0.75rem;
225
+ font-weight: 900;
226
+ text-transform: uppercase;
227
+ color: var(--cl-text-muted);
228
+ letter-spacing: 0.1em;
229
+ margin: 0;
230
+ }
231
+
232
+ :global(.cl-swatches) {
233
+ display: flex;
234
+ flex-direction: column;
235
+ gap: 0.75rem;
236
+ animation: cl-fade-up 0.5s ease;
237
+ }
238
+
239
+ :global(.cl-swatch) {
240
+ display: flex;
241
+ align-items: center;
242
+ gap: 1.25rem;
243
+ background: var(--cl-bg-elevated);
244
+ border-radius: 1.25rem;
245
+ padding: 1rem;
246
+ border: 1px solid var(--cl-border);
247
+ cursor: pointer;
248
+ transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s;
249
+ }
250
+
251
+ :global(.cl-swatch:hover) {
252
+ transform: scale(1.02);
253
+ border-color: var(--cl-accent);
254
+ }
255
+
256
+ :global(.cl-swatch-copied) {
257
+ background: var(--cl-emerald-alpha);
258
+ border-color: var(--cl-emerald);
259
+ }
260
+
261
+ :global(.cl-swatch-color) {
262
+ width: 3.5rem;
263
+ height: 3.5rem;
264
+ border-radius: 0.75rem;
265
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
266
+ flex-shrink: 0;
267
+ }
268
+
269
+ :global(.cl-swatch-info) {
270
+ display: flex;
271
+ flex-direction: column;
272
+ gap: 0.2rem;
273
+ }
274
+
275
+ :global(.cl-swatch-hex) {
276
+ font-weight: 950;
277
+ color: var(--cl-text);
278
+ font-size: 1.25rem;
279
+ }
280
+
281
+ :global(.cl-swatch-action) {
282
+ font-size: 0.7rem;
283
+ font-weight: 900;
284
+ color: var(--cl-text-muted);
285
+ text-transform: uppercase;
286
+ letter-spacing: 0.05em;
287
+ }
288
+
289
+ :global(.cl-hidden) {
290
+ display: none;
291
+ }
292
+
293
+ @keyframes cl-spin {
294
+ to {
295
+ transform: rotate(360deg);
296
+ }
297
+ }
298
+
299
+ @keyframes cl-fade-up {
300
+ from {
301
+ opacity: 0;
302
+ transform: translateY(10px);
303
+ }
304
+ to {
305
+ opacity: 1;
306
+ transform: translateY(0);
307
+ }
308
+ }
@@ -176,313 +176,4 @@ const { ui } = Astro.props;
176
176
  document.addEventListener('astro:page-load', init);
177
177
  </script>
178
178
 
179
- <style>
180
- :global(.cl-root) {
181
- --cl-bg: #fff;
182
- --cl-bg-elevated: #f8fafc;
183
- --cl-border: #e2e8f0;
184
- --cl-text: #0f172a;
185
- --cl-text-muted: #64748b;
186
- --cl-accent: #6366f1;
187
- --cl-accent-alpha: rgba(99, 102, 241, 0.08);
188
- --cl-accent-alpha-hover: rgba(99, 102, 241, 0.04);
189
- --cl-emerald: #10b981;
190
- --cl-emerald-alpha: rgba(16, 185, 129, 0.06);
191
- --cl-shadow: rgba(0, 0, 0, 0.15);
192
179
 
193
- padding: 2.5rem 1.5rem;
194
- max-width: 1000px;
195
- margin: 0 auto;
196
- }
197
-
198
- :global(.theme-dark .cl-root) {
199
- --cl-bg: #18181b;
200
- --cl-bg-elevated: #27272a;
201
- --cl-border: #3f3f46;
202
- --cl-text: #f4f4f5;
203
- --cl-text-muted: #71717a;
204
- --cl-accent: #818cf8;
205
- --cl-accent-alpha: rgba(129, 140, 248, 0.12);
206
- --cl-accent-alpha-hover: rgba(129, 140, 248, 0.06);
207
- --cl-emerald: #34d399;
208
- --cl-emerald-alpha: rgba(52, 211, 153, 0.08);
209
- --cl-shadow: rgba(0, 0, 0, 0.5);
210
- }
211
-
212
- :global(.cl-card) {
213
- background: var(--cl-bg);
214
- border: 1px solid var(--cl-border);
215
- border-radius: 3rem;
216
- padding: 1.5rem;
217
- box-shadow: 0 45px 120px -30px var(--cl-shadow);
218
- position: relative;
219
- overflow: hidden;
220
- }
221
-
222
- :global(.cl-drop) {
223
- padding: 5rem 2rem;
224
- display: flex;
225
- flex-direction: column;
226
- align-items: center;
227
- border: 3px dashed var(--cl-border);
228
- border-radius: 2.5rem;
229
- cursor: pointer;
230
- transition: all 0.2s ease;
231
- text-align: center;
232
- gap: 0.5rem;
233
- }
234
-
235
- :global(.cl-drop:hover),
236
- :global(.cl-drop-active) {
237
- background: var(--cl-accent-alpha-hover);
238
- border-color: var(--cl-accent);
239
- }
240
-
241
- :global(.cl-drop-icon) {
242
- width: 5rem;
243
- height: 5rem;
244
- background: var(--cl-accent-alpha);
245
- border-radius: 50%;
246
- display: flex;
247
- align-items: center;
248
- justify-content: center;
249
- margin-bottom: 1rem;
250
- color: var(--cl-accent);
251
- }
252
-
253
- :global(.cl-drop-icon svg) {
254
- width: 2.5rem;
255
- height: 2.5rem;
256
- }
257
-
258
- :global(.cl-drop-title) {
259
- font-size: 2rem;
260
- font-weight: 950;
261
- color: var(--cl-text);
262
- margin: 0;
263
- }
264
-
265
- :global(.cl-drop-sub) {
266
- font-size: 1.1rem;
267
- color: var(--cl-text-muted);
268
- margin: 0;
269
- font-weight: 600;
270
- }
271
-
272
- :global(.cl-workspace) {
273
- padding: 1.5rem;
274
- }
275
-
276
- :global(.cl-mini-drop) {
277
- display: inline-flex;
278
- align-items: center;
279
- gap: 0.75rem;
280
- padding: 0.75rem 1.25rem;
281
- background: var(--cl-bg-elevated);
282
- border: 1px solid var(--cl-border);
283
- border-radius: 1rem;
284
- font-size: 0.75rem;
285
- font-weight: 800;
286
- color: var(--cl-text-muted);
287
- cursor: pointer;
288
- margin-bottom: 2rem;
289
- transition: border-color 0.2s, color 0.2s;
290
- }
291
-
292
- :global(.cl-mini-drop:hover) {
293
- border-color: var(--cl-accent);
294
- color: var(--cl-accent);
295
- }
296
-
297
- :global(.cl-mini-drop svg) {
298
- width: 1.1rem;
299
- height: 1.1rem;
300
- }
301
-
302
- :global(.cl-config-bar) {
303
- padding: 1rem 0;
304
- margin-bottom: 2rem;
305
- border-bottom: 1px solid var(--cl-border);
306
- display: flex;
307
- justify-content: flex-end;
308
- }
309
-
310
- :global(.cl-config-item) {
311
- display: flex;
312
- align-items: center;
313
- gap: 1rem;
314
- }
315
-
316
- :global(.cl-config-label) {
317
- font-size: 0.75rem;
318
- font-weight: 900;
319
- text-transform: uppercase;
320
- color: var(--cl-text-muted);
321
- letter-spacing: 0.1em;
322
- }
323
-
324
- :global(.cl-count-select) {
325
- padding: 0.5rem 1rem;
326
- border-radius: 0.75rem;
327
- background: var(--cl-bg-elevated);
328
- border: 1px solid var(--cl-border);
329
- color: var(--cl-text);
330
- font-weight: 800;
331
- cursor: pointer;
332
- }
333
-
334
- :global(.cl-result-layout) {
335
- display: grid;
336
- grid-template-columns: 1fr 1.25fr;
337
- gap: 3rem;
338
- }
339
-
340
- @media (max-width: 800px) {
341
- :global(.cl-result-layout) {
342
- grid-template-columns: 1fr;
343
- }
344
- }
345
-
346
- :global(.cl-preview-col) {
347
- display: flex;
348
- flex-direction: column;
349
- gap: 1rem;
350
- }
351
-
352
- :global(.cl-preview-img) {
353
- width: 100%;
354
- border-radius: 1.5rem;
355
- box-shadow: 0 20px 40px var(--cl-shadow);
356
- display: block;
357
- }
358
-
359
- :global(.cl-palette-col) {
360
- display: flex;
361
- flex-direction: column;
362
- gap: 1.5rem;
363
- }
364
-
365
- :global(.cl-palette-header) {
366
- display: flex;
367
- align-items: center;
368
- gap: 1rem;
369
- color: var(--cl-accent);
370
- }
371
-
372
- :global(.cl-palette-header svg) {
373
- width: 1.25rem;
374
- height: 1.25rem;
375
- flex-shrink: 0;
376
- }
377
-
378
- :global(.cl-palette-header h4) {
379
- font-size: 1.25rem;
380
- font-weight: 950;
381
- color: var(--cl-text);
382
- margin: 0;
383
- }
384
-
385
- :global(.cl-loader) {
386
- display: flex;
387
- flex-direction: column;
388
- align-items: center;
389
- gap: 1rem;
390
- padding: 2rem 0;
391
- }
392
-
393
- :global(.cl-spinner) {
394
- width: 3rem;
395
- height: 3rem;
396
- border: 3px solid var(--cl-accent-alpha);
397
- border-top-color: var(--cl-accent);
398
- border-radius: 50%;
399
- animation: cl-spin 0.8s linear infinite;
400
- }
401
-
402
- :global(.cl-loader-text) {
403
- font-size: 0.75rem;
404
- font-weight: 900;
405
- text-transform: uppercase;
406
- color: var(--cl-text-muted);
407
- letter-spacing: 0.1em;
408
- margin: 0;
409
- }
410
-
411
- :global(.cl-swatches) {
412
- display: flex;
413
- flex-direction: column;
414
- gap: 0.75rem;
415
- animation: cl-fade-up 0.5s ease;
416
- }
417
-
418
- :global(.cl-swatch) {
419
- display: flex;
420
- align-items: center;
421
- gap: 1.25rem;
422
- background: var(--cl-bg-elevated);
423
- border-radius: 1.25rem;
424
- padding: 1rem;
425
- border: 1px solid var(--cl-border);
426
- cursor: pointer;
427
- transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.2s;
428
- }
429
-
430
- :global(.cl-swatch:hover) {
431
- transform: scale(1.02);
432
- border-color: var(--cl-accent);
433
- }
434
-
435
- :global(.cl-swatch-copied) {
436
- background: var(--cl-emerald-alpha);
437
- border-color: var(--cl-emerald);
438
- }
439
-
440
- :global(.cl-swatch-color) {
441
- width: 3.5rem;
442
- height: 3.5rem;
443
- border-radius: 0.75rem;
444
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
445
- flex-shrink: 0;
446
- }
447
-
448
- :global(.cl-swatch-info) {
449
- display: flex;
450
- flex-direction: column;
451
- gap: 0.2rem;
452
- }
453
-
454
- :global(.cl-swatch-hex) {
455
- font-weight: 950;
456
- color: var(--cl-text);
457
- font-size: 1.25rem;
458
- }
459
-
460
- :global(.cl-swatch-action) {
461
- font-size: 0.7rem;
462
- font-weight: 900;
463
- color: var(--cl-text-muted);
464
- text-transform: uppercase;
465
- letter-spacing: 0.05em;
466
- }
467
-
468
- :global(.cl-hidden) {
469
- display: none;
470
- }
471
-
472
- @keyframes cl-spin {
473
- to {
474
- transform: rotate(360deg);
475
- }
476
- }
477
-
478
- @keyframes cl-fade-up {
479
- from {
480
- opacity: 0;
481
- transform: translateY(10px);
482
- }
483
- to {
484
- opacity: 1;
485
- transform: translateY(0);
486
- }
487
- }
488
- </style>