@jjlmoya/utils-cooking 1.9.0 → 1.11.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.
@@ -1,487 +0,0 @@
1
- :root {
2
- --cw-primary: hsl(240deg, 94%, 60%);
3
- --cw-primary-light: hsl(240deg, 100%, 95%);
4
- --cw-primary-dark: hsl(240deg, 50%, 25%);
5
- --cw-bg-card: hsl(0deg, 0%, 100%);
6
- --cw-bg-dark: hsl(217deg, 33%, 17%);
7
- --cw-bg-app: hsl(210deg, 40%, 98%);
8
- --cw-border: hsl(210deg, 14%, 89%);
9
- --cw-text-main: hsl(210deg, 40%, 14%);
10
- --cw-text-muted: hsl(210deg, 8%, 40%);
11
- --cw-text-light: hsl(0deg, 0%, 100%);
12
- --cw-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
13
- --cw-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
14
- --cw-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
15
- --cw-radius: 1.5rem;
16
- --cw-radius-sm: 0.75rem;
17
- --cw-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
18
- --cw-orange: hsl(33deg, 100%, 50%);
19
- --cw-yellow: hsl(45deg, 100%, 50%);
20
- --cw-red: hsl(0deg, 100%, 50%);
21
- --cw-blue: hsl(217deg, 100%, 50%);
22
- --cw-green: hsl(142deg, 76%, 36%);
23
- }
24
-
25
- .theme-dark {
26
- --cw-bg-card: hsl(217deg, 33%, 12%);
27
- --cw-bg-app: hsl(217deg, 39%, 8%);
28
- --cw-border: hsl(217deg, 33%, 25%);
29
- --cw-text-main: hsl(210deg, 40%, 98%);
30
- --cw-text-muted: hsl(210deg, 14%, 55%);
31
- --cw-primary-light: hsl(240deg, 100%, 12%);
32
- }
33
-
34
- .cw-container {
35
- width: 100%;
36
- max-width: 100%;
37
- padding: 1rem;
38
- }
39
-
40
- .cw-card {
41
- background: var(--cw-bg-card);
42
- border: 1px solid var(--cw-border);
43
- border-radius: var(--cw-radius);
44
- box-shadow: var(--cw-shadow-xl);
45
- overflow: hidden;
46
- transition: var(--cw-transition);
47
- }
48
-
49
- .cw-progress-bar {
50
- height: 0.375rem;
51
- width: 0%;
52
- background: linear-gradient(to right, var(--cw-primary), hsl(270deg, 94%, 60%));
53
- transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
54
- }
55
-
56
- .cw-content {
57
- padding: 2rem;
58
- }
59
-
60
- @media (max-width: 1024px) {
61
- .cw-content {
62
- padding: 1.5rem;
63
- }
64
- }
65
-
66
- @media (max-width: 640px) {
67
- .cw-content {
68
- padding: 1rem;
69
- }
70
- }
71
-
72
- .cw-grid {
73
- display: grid;
74
- grid-template-columns: 1fr;
75
- gap: 2rem;
76
- }
77
-
78
- @media (min-width: 1024px) {
79
- .cw-grid {
80
- grid-template-columns: 1.4fr 1fr;
81
- gap: 2rem;
82
- }
83
- }
84
-
85
- .cw-left {
86
- display: flex;
87
- flex-direction: column;
88
- gap: 2rem;
89
- }
90
-
91
- .cw-right {
92
- display: flex;
93
- flex-direction: column;
94
- gap: 1.5rem;
95
- }
96
-
97
- .cw-section {
98
- display: flex;
99
- flex-direction: column;
100
- gap: 1rem;
101
- }
102
-
103
- .cw-step-label {
104
- display: flex;
105
- align-items: center;
106
- gap: 0.75rem;
107
- font-size: 0.625rem;
108
- font-weight: 900;
109
- color: var(--cw-text-muted);
110
- text-transform: uppercase;
111
- letter-spacing: 0.2em;
112
- }
113
-
114
- .cw-step-number {
115
- display: flex;
116
- align-items: center;
117
- justify-content: center;
118
- width: 1.25rem;
119
- height: 1.25rem;
120
- border-radius: 50%;
121
- background: var(--cw-primary-light);
122
- color: var(--cw-primary);
123
- font-weight: 900;
124
- font-size: 0.625rem;
125
- flex-shrink: 0;
126
- }
127
-
128
- .theme-dark .cw-step-number {
129
- background: hsl(240deg, 100%, 20%);
130
- }
131
-
132
- /* Style Grid (4 buttons in 2x2) */
133
- .cw-style-grid {
134
- display: grid;
135
- grid-template-columns: repeat(2, 1fr);
136
- gap: 0.75rem;
137
- }
138
-
139
- @media (min-width: 640px) {
140
- .cw-style-grid {
141
- grid-template-columns: repeat(2, 1fr);
142
- }
143
- }
144
-
145
- .cw-style-btn {
146
- display: flex;
147
- flex-direction: column;
148
- align-items: flex-start;
149
- gap: 0.5rem;
150
- padding: 1rem;
151
- border: 2px solid var(--cw-border);
152
- border-radius: var(--cw-radius-sm);
153
- background: var(--cw-bg-card);
154
- color: var(--cw-text-muted);
155
- cursor: pointer;
156
- transition: var(--cw-transition);
157
- text-align: left;
158
- font-size: inherit;
159
- }
160
-
161
- .cw-style-btn:hover {
162
- border-color: var(--cw-primary-light);
163
- box-shadow: var(--cw-shadow-md);
164
- }
165
-
166
- .cw-style-btn.active {
167
- background: var(--cw-primary-light);
168
- border-color: var(--cw-primary);
169
- color: var(--cw-primary);
170
- }
171
-
172
- .theme-dark .cw-style-btn.active {
173
- background: hsl(240deg, 100%, 20%);
174
- }
175
-
176
- .cw-icon {
177
- width: 1.5rem;
178
- height: 1.5rem;
179
- }
180
-
181
- .cw-icon-orange {
182
- color: var(--cw-orange);
183
- }
184
-
185
- .cw-icon-yellow {
186
- color: var(--cw-yellow);
187
- }
188
-
189
- .cw-icon-red {
190
- color: var(--cw-red);
191
- }
192
-
193
- .cw-icon-blue {
194
- color: var(--cw-blue);
195
- }
196
-
197
- .cw-icon-large {
198
- width: 6rem;
199
- height: 6rem;
200
- color: var(--cw-text-light);
201
- }
202
-
203
- .cw-style-name {
204
- font-size: 0.75rem;
205
- font-weight: 900;
206
- display: block;
207
- color: var(--cw-text-main);
208
- }
209
-
210
- .cw-style-btn.active .cw-style-name {
211
- color: var(--cw-primary);
212
- }
213
-
214
- .cw-style-desc {
215
- font-weight: 600;
216
- opacity: 0.7;
217
- display: block;
218
- text-transform: uppercase;
219
- }
220
-
221
- /* Maintenance Grid (3 buttons) */
222
- .cw-maint-grid {
223
- display: grid;
224
- grid-template-columns: 1fr;
225
- gap: 0.75rem;
226
- }
227
-
228
- @media (min-width: 640px) {
229
- .cw-maint-grid {
230
- grid-template-columns: repeat(3, 1fr);
231
- }
232
- }
233
-
234
- .cw-maint-btn {
235
- display: flex;
236
- flex-direction: column;
237
- align-items: center;
238
- text-align: center;
239
- gap: 0.75rem;
240
- padding: 1.25rem;
241
- border: 2px solid var(--cw-border);
242
- border-radius: var(--cw-radius-sm);
243
- background: var(--cw-bg-card);
244
- color: var(--cw-text-muted);
245
- cursor: pointer;
246
- transition: var(--cw-transition);
247
- font-size: inherit;
248
- }
249
-
250
- .cw-maint-btn:hover {
251
- border-color: var(--cw-primary-light);
252
- box-shadow: var(--cw-shadow-md);
253
- }
254
-
255
- .cw-maint-btn.active {
256
- background: var(--cw-primary-light);
257
- border-color: var(--cw-primary);
258
- }
259
-
260
- .theme-dark .cw-maint-btn.active {
261
- background: hsl(240deg, 100%, 20%);
262
- }
263
-
264
- .cw-maint-icon {
265
- width: 3rem;
266
- height: 3rem;
267
- border-radius: var(--cw-radius-sm);
268
- background: var(--cw-bg-app);
269
- display: flex;
270
- align-items: center;
271
- justify-content: center;
272
- color: var(--cw-text-muted);
273
- transition: var(--cw-transition);
274
- }
275
-
276
- .cw-maint-btn.active .cw-maint-icon {
277
- color: var(--cw-primary);
278
- }
279
-
280
- .cw-maint-btn:hover .cw-maint-icon {
281
- color: var(--cw-primary);
282
- }
283
-
284
- .cw-maint-name {
285
- font-size: 0.75rem;
286
- font-weight: 900;
287
- display: block;
288
- color: var(--cw-text-main);
289
- }
290
-
291
- .cw-maint-btn.active .cw-maint-name {
292
- color: var(--cw-primary);
293
- }
294
-
295
- .cw-maint-desc {
296
- font-size: 0.625rem;
297
- font-weight: 500;
298
- opacity: 0.7;
299
- display: block;
300
- line-height: 1.3;
301
- }
302
-
303
- /* Result Card */
304
- .cw-result-card {
305
- background: var(--cw-bg-dark);
306
- border-radius: var(--cw-radius);
307
- padding: 2rem;
308
- color: var(--cw-text-light);
309
- box-shadow: var(--cw-shadow-xl);
310
- position: relative;
311
- overflow: hidden;
312
- min-height: 320px;
313
- display: flex;
314
- flex-direction: column;
315
- justify-content: center;
316
- transition: var(--cw-transition);
317
- }
318
-
319
- .cw-card-bg {
320
- position: absolute;
321
- inset: 0;
322
- background: linear-gradient(135deg, hsl(217deg, 33%, 17%), hsl(217deg, 33%, 7%));
323
- transition: background 1s cubic-bezier(0.4, 0, 0.2, 1);
324
- }
325
-
326
- .cw-card-glow {
327
- position: absolute;
328
- right: -3rem;
329
- top: -3rem;
330
- width: 12rem;
331
- height: 12rem;
332
- background: rgba(255, 255, 255, 0.1);
333
- border-radius: 50%;
334
- filter: blur(3rem);
335
- transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
336
- }
337
-
338
- .cw-result-card:hover .cw-card-glow {
339
- transform: scale(1.25);
340
- }
341
-
342
- .cw-card-content {
343
- position: relative;
344
- z-index: 10;
345
- display: flex;
346
- flex-direction: column;
347
- gap: 1.5rem;
348
- text-align: center;
349
- }
350
-
351
- .cw-icon-container {
352
- display: flex;
353
- justify-content: center;
354
- align-items: center;
355
- height: 6rem;
356
- }
357
-
358
- .cw-result-icon {
359
- display: none;
360
- }
361
-
362
- .cw-result-icon:not(.cw-hidden) {
363
- display: block;
364
- }
365
-
366
- .cw-result-label {
367
- font-size: 0.625rem;
368
- font-weight: 900;
369
- text-transform: uppercase;
370
- letter-spacing: 0.3em;
371
- color: rgba(255, 255, 255, 0.4);
372
- margin-bottom: 0.5rem;
373
- }
374
-
375
- .cw-result-name {
376
- font-size: 1.875rem;
377
- font-weight: 900;
378
- letter-spacing: -0.02em;
379
- margin: 0;
380
- }
381
-
382
- .cw-result-tag {
383
- font-size: 0.75rem;
384
- font-weight: 500;
385
- color: rgba(255, 255, 255, 0.6);
386
- margin: 0;
387
- }
388
-
389
- .cw-result-details {
390
- display: none;
391
- grid-template-columns: 1fr 1fr;
392
- gap: 0.75rem;
393
- padding-top: 1rem;
394
- border-top: 1px solid rgba(255, 255, 255, 0.1);
395
- }
396
-
397
- .cw-result-details:not(.cw-hidden) {
398
- display: grid;
399
- }
400
-
401
- .cw-detail-box {
402
- background: rgba(255, 255, 255, 0.05);
403
- border: 1px solid rgba(255, 255, 255, 0.05);
404
- border-radius: var(--cw-radius-sm);
405
- padding: 0.75rem;
406
- }
407
-
408
- .cw-detail-pro .cw-detail-label {
409
- color: hsl(142deg, 76%, 56%);
410
- }
411
-
412
- .cw-detail-con .cw-detail-label {
413
- color: hsl(0deg, 84%, 60%);
414
- }
415
-
416
- .cw-detail-label {
417
- font-size: 0.5rem;
418
- font-weight: 900;
419
- text-transform: uppercase;
420
- letter-spacing: 0.1em;
421
- display: block;
422
- margin-bottom: 0.25rem;
423
- }
424
-
425
- .cw-detail-text {
426
- font-size: 0.625rem;
427
- line-height: 1.4;
428
- color: rgba(255, 255, 255, 0.9);
429
- margin: 0;
430
- }
431
-
432
- /* Tip Card */
433
- .cw-tip-card {
434
- background: var(--cw-bg-app);
435
- border: 1px solid var(--cw-border);
436
- border-radius: var(--cw-radius);
437
- padding: 1.5rem;
438
- display: flex;
439
- flex-direction: column;
440
- gap: 1rem;
441
- }
442
-
443
- .cw-tip-header {
444
- display: flex;
445
- align-items: center;
446
- gap: 0.75rem;
447
- }
448
-
449
- .cw-tip-icon {
450
- padding: 0.5rem;
451
- background: var(--cw-primary-light);
452
- border-radius: var(--cw-radius-sm);
453
- display: flex;
454
- align-items: center;
455
- justify-content: center;
456
- color: var(--cw-primary);
457
- flex-shrink: 0;
458
- }
459
-
460
- .theme-dark .cw-tip-icon {
461
- background: hsl(240deg, 100%, 20%);
462
- }
463
-
464
- .cw-tip-title {
465
- font-size: 0.875rem;
466
- font-weight: 900;
467
- color: var(--cw-text-main);
468
- text-transform: uppercase;
469
- letter-spacing: 0.05em;
470
- }
471
-
472
- .cw-tip-text {
473
- font-size: 0.6875rem;
474
- line-height: 1.6;
475
- color: var(--cw-text-muted);
476
- font-weight: 300;
477
- font-style: italic;
478
- background: var(--cw-bg-card);
479
- padding: 1rem;
480
- border-radius: var(--cw-radius-sm);
481
- border: 1px solid var(--cw-border);
482
- margin: 0;
483
- }
484
-
485
- .cw-hidden {
486
- display: none;
487
- }