@jjlmoya/utils-cooking 1.8.0 → 1.10.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,7 +1,6 @@
1
1
  ---
2
2
  import { Icon } from "astro-icon/components";
3
3
  import type { ToolLocaleContent } from "../../types";
4
- import "./EggTimer.css";
5
4
 
6
5
  interface Props {
7
6
  ui: ToolLocaleContent["ui"];
@@ -279,3 +278,509 @@ const { ui } = Astro.props;
279
278
 
280
279
  updateCalculations();
281
280
  </script>
281
+
282
+ <style>
283
+ .egg-timer-wrapper {
284
+ --color-primary: #eab308;
285
+ --color-secondary: #f59e0b;
286
+ --color-tertiary: #ea580c;
287
+ --color-bg: #fff;
288
+ --color-bg-secondary: #f9fafb;
289
+ --color-border: #e5e7eb;
290
+ --color-text-primary: #111827;
291
+ --color-text-secondary: #4b5563;
292
+ --color-text-tertiary: #6b7280;
293
+ --color-soft: #fef08a;
294
+ --color-soft-bg: #fef08a;
295
+ --color-soft-text: #713f12;
296
+ --color-mollet: #fbbf24;
297
+ --color-mollet-bg: #fbbf24;
298
+ --color-mollet-text: #92400e;
299
+ --color-hard: #b45309;
300
+ --color-hard-text: #78350f;
301
+ --color-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
302
+ --color-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
303
+ --color-ring: rgba(234, 179, 8, 0.5);
304
+ }
305
+
306
+ :global(.theme-dark) .egg-timer-wrapper {
307
+ --color-bg: #1f2937;
308
+ --color-bg-secondary: #111827;
309
+ --color-border: #374151;
310
+ --color-text-primary: #f3f4f6;
311
+ --color-text-secondary: #d1d5db;
312
+ --color-text-tertiary: #9ca3af;
313
+ --color-soft-bg: #78350f;
314
+ --color-soft-text: #fef08a;
315
+ --color-mollet-bg: #92400e;
316
+ --color-mollet-text: #fbbf24;
317
+ --color-hard-text: #fbbf24;
318
+ --color-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
319
+ --color-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
320
+ --color-ring: rgba(234, 179, 8, 0.3);
321
+ }
322
+
323
+ .egg-timer-container {
324
+ width: 100%;
325
+ max-width: 1200px;
326
+ margin: 0 auto;
327
+ padding: 2rem 1rem;
328
+ }
329
+
330
+ .egg-timer-grid {
331
+ display: grid;
332
+ grid-template-columns: 1fr 2fr;
333
+ gap: 2rem;
334
+ margin-bottom: 2rem;
335
+ }
336
+
337
+ @media (max-width: 1024px) {
338
+ .egg-timer-grid {
339
+ grid-template-columns: 1fr;
340
+ }
341
+ }
342
+
343
+ .egg-timer-card {
344
+ background-color: var(--color-bg);
345
+ border: 1px solid var(--color-border);
346
+ border-radius: 1.5rem;
347
+ padding: 1.5rem;
348
+ box-shadow: var(--color-shadow);
349
+ transition: all 0.3s ease;
350
+ }
351
+
352
+ .egg-timer-card:hover {
353
+ box-shadow: var(--color-shadow-lg);
354
+ }
355
+
356
+ .egg-timer-title {
357
+ font-size: 1.125rem;
358
+ font-weight: 700;
359
+ color: var(--color-text-primary);
360
+ margin-bottom: 1rem;
361
+ display: flex;
362
+ align-items: center;
363
+ gap: 0.5rem;
364
+ }
365
+
366
+ .egg-timer-title svg {
367
+ width: 1.25rem;
368
+ height: 1.25rem;
369
+ color: var(--color-primary);
370
+ }
371
+
372
+ .egg-timer-controls-space {
373
+ display: flex;
374
+ flex-direction: column;
375
+ gap: 1.5rem;
376
+ }
377
+
378
+ .egg-timer-control-group {
379
+ display: flex;
380
+ flex-direction: column;
381
+ gap: 0.75rem;
382
+ }
383
+
384
+ .egg-timer-label-row {
385
+ display: flex;
386
+ justify-content: space-between;
387
+ align-items: center;
388
+ margin-bottom: 0.5rem;
389
+ }
390
+
391
+ .egg-timer-label {
392
+ font-size: 0.875rem;
393
+ font-weight: 600;
394
+ color: var(--color-text-secondary);
395
+ text-transform: uppercase;
396
+ letter-spacing: 0.05em;
397
+ }
398
+
399
+ .egg-timer-buttons-group {
400
+ display: grid;
401
+ grid-template-columns: 1fr 1fr;
402
+ gap: 0.5rem;
403
+ }
404
+
405
+ .egg-timer-btn {
406
+ padding: 0.75rem;
407
+ border-radius: 0.75rem;
408
+ border: 1px solid var(--color-border);
409
+ background-color: var(--color-bg-secondary);
410
+ color: var(--color-text-secondary);
411
+ font-size: 0.875rem;
412
+ font-weight: 600;
413
+ cursor: pointer;
414
+ transition: all 0.2s ease;
415
+ display: flex;
416
+ flex-direction: column;
417
+ align-items: center;
418
+ justify-content: center;
419
+ gap: 0.25rem;
420
+ }
421
+
422
+ .egg-timer-btn:hover {
423
+ background-color: var(--color-bg);
424
+ border-color: var(--color-primary);
425
+ }
426
+
427
+ .egg-timer-btn.active {
428
+ border-color: var(--color-primary);
429
+ background-color: var(--color-soft);
430
+ color: var(--color-text-primary);
431
+ box-shadow: 0 0 0 1px var(--color-primary);
432
+ }
433
+
434
+ :global(.theme-dark) .egg-timer-btn.active {
435
+ background-color: rgba(234, 179, 8, 0.1);
436
+ color: var(--color-primary);
437
+ }
438
+
439
+ .egg-timer-btn svg {
440
+ width: 1.25rem;
441
+ height: 1.25rem;
442
+ }
443
+
444
+ .egg-timer-size-buttons {
445
+ display: grid;
446
+ grid-template-columns: repeat(4, 1fr);
447
+ gap: 0.5rem;
448
+ }
449
+
450
+ .egg-timer-size-btn {
451
+ padding: 0.5rem;
452
+ border-radius: 0.75rem;
453
+ border: 1px solid var(--color-border);
454
+ background-color: var(--color-bg-secondary);
455
+ color: var(--color-text-secondary);
456
+ font-size: 0.875rem;
457
+ font-weight: 600;
458
+ cursor: pointer;
459
+ transition: all 0.2s ease;
460
+ }
461
+
462
+ .egg-timer-size-btn:hover {
463
+ border-color: var(--color-primary);
464
+ background-color: var(--color-bg);
465
+ }
466
+
467
+ .egg-timer-size-btn.active {
468
+ border-color: var(--color-primary);
469
+ background-color: var(--color-soft);
470
+ color: var(--color-text-primary);
471
+ box-shadow: 0 0 0 1px var(--color-primary);
472
+ }
473
+
474
+ :global(.theme-dark) .egg-timer-size-btn.active {
475
+ background-color: rgba(234, 179, 8, 0.1);
476
+ color: var(--color-primary);
477
+ }
478
+
479
+ .egg-timer-input-wrapper {
480
+ position: relative;
481
+ display: flex;
482
+ }
483
+
484
+ .egg-timer-input {
485
+ width: 100%;
486
+ padding: 0.75rem 3rem 0.75rem 1rem;
487
+ border-radius: 0.75rem;
488
+ border: 1px solid var(--color-border);
489
+ background-color: var(--color-bg-secondary);
490
+ color: var(--color-text-primary);
491
+ font-size: 1rem;
492
+ transition: all 0.2s ease;
493
+ }
494
+
495
+ .egg-timer-input:focus {
496
+ outline: none;
497
+ border-color: var(--color-primary);
498
+ box-shadow: 0 0 0 2px var(--color-ring);
499
+ }
500
+
501
+ .egg-timer-input-buttons {
502
+ position: absolute;
503
+ right: 0.5rem;
504
+ top: 50%;
505
+ transform: translateY(-50%);
506
+ display: flex;
507
+ gap: 0.25rem;
508
+ }
509
+
510
+ .egg-timer-quick-btn {
511
+ padding: 0.25rem 0.5rem;
512
+ border-radius: 0.5rem;
513
+ border: 1px solid var(--color-border);
514
+ background-color: var(--color-bg-secondary);
515
+ color: var(--color-text-secondary);
516
+ font-size: 0.625rem;
517
+ font-weight: 600;
518
+ cursor: pointer;
519
+ transition: all 0.2s ease;
520
+ }
521
+
522
+ .egg-timer-quick-btn:hover {
523
+ background-color: var(--color-bg);
524
+ border-color: var(--color-primary);
525
+ color: var(--color-primary);
526
+ }
527
+
528
+ .egg-timer-help-text {
529
+ font-size: 0.75rem;
530
+ color: var(--color-text-tertiary);
531
+ margin-top: 0.5rem;
532
+ }
533
+
534
+ .egg-timer-results {
535
+ display: flex;
536
+ flex-direction: column;
537
+ gap: 1rem;
538
+ }
539
+
540
+ .egg-timer-result-card {
541
+ background-color: var(--color-bg);
542
+ border: 1px solid var(--color-border);
543
+ border-radius: 1.5rem;
544
+ padding: 1.5rem;
545
+ transition: all 0.3s ease;
546
+ cursor: default;
547
+ }
548
+
549
+ .egg-timer-result-card:hover {
550
+ box-shadow: var(--color-shadow-lg);
551
+ border-color: var(--color-primary);
552
+ }
553
+
554
+ .egg-timer-result-card.soft {
555
+ background-color: var(--color-bg);
556
+ }
557
+
558
+ .egg-timer-result-card.mollet {
559
+ background-color: var(--color-bg);
560
+ border: 2px solid var(--color-mollet);
561
+ box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
562
+ }
563
+
564
+ :global(.theme-dark) .egg-timer-result-card.mollet {
565
+ box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
566
+ }
567
+
568
+ .egg-timer-result-card.hard {
569
+ background-color: var(--color-bg);
570
+ }
571
+
572
+ .egg-timer-result-header {
573
+ display: flex;
574
+ justify-content: space-between;
575
+ align-items: flex-start;
576
+ margin-bottom: 1rem;
577
+ }
578
+
579
+ .egg-timer-result-title {
580
+ font-size: 1.25rem;
581
+ font-weight: 700;
582
+ color: var(--color-text-primary);
583
+ }
584
+
585
+ .egg-timer-result-subtitle {
586
+ font-size: 0.875rem;
587
+ color: var(--color-text-secondary);
588
+ margin-top: 0.25rem;
589
+ }
590
+
591
+ .egg-timer-result-icon {
592
+ width: 2rem;
593
+ height: 2rem;
594
+ color: var(--color-primary);
595
+ }
596
+
597
+ .egg-timer-result-card.mollet .egg-timer-result-icon {
598
+ color: var(--color-mollet);
599
+ }
600
+
601
+ .egg-timer-result-card.hard .egg-timer-result-icon {
602
+ color: var(--color-hard);
603
+ }
604
+
605
+ .egg-timer-result-time {
606
+ font-size: 2.25rem;
607
+ font-weight: 900;
608
+ color: var(--color-text-primary);
609
+ letter-spacing: -0.05em;
610
+ }
611
+
612
+ .egg-timer-result-card.mollet .egg-timer-result-time {
613
+ color: var(--color-mollet);
614
+ }
615
+
616
+ .egg-timer-result-card.hard .egg-timer-result-time {
617
+ color: var(--color-hard);
618
+ }
619
+
620
+ .egg-timer-seo-section {
621
+ background-color: var(--color-bg);
622
+ border: 1px solid var(--color-border);
623
+ border-radius: 1.5rem;
624
+ padding: 2rem;
625
+ margin-top: 2rem;
626
+ }
627
+
628
+ .egg-timer-seo-title {
629
+ font-size: 1.875rem;
630
+ font-weight: 700;
631
+ color: var(--color-text-primary);
632
+ margin-bottom: 1.5rem;
633
+ }
634
+
635
+ .egg-timer-seo-subtitle {
636
+ font-size: 1.25rem;
637
+ font-weight: 700;
638
+ color: var(--color-text-primary);
639
+ margin-bottom: 1rem;
640
+ display: flex;
641
+ align-items: center;
642
+ gap: 0.5rem;
643
+ margin-top: 1.5rem;
644
+ }
645
+
646
+ .egg-timer-seo-subtitle:not(:first-of-type) {
647
+ margin-top: 2rem;
648
+ }
649
+
650
+ .egg-timer-seo-subtitle svg {
651
+ width: 1.5rem;
652
+ height: 1.5rem;
653
+ color: var(--color-primary);
654
+ }
655
+
656
+ .egg-timer-seo-text {
657
+ font-size: 1rem;
658
+ line-height: 1.625;
659
+ color: var(--color-text-secondary);
660
+ margin-bottom: 1rem;
661
+ }
662
+
663
+ .egg-timer-seo-grid {
664
+ display: grid;
665
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
666
+ gap: 1.5rem;
667
+ margin-bottom: 1.5rem;
668
+ }
669
+
670
+ .egg-timer-seo-card {
671
+ background-color: var(--color-bg-secondary);
672
+ border-radius: 1rem;
673
+ padding: 1.5rem;
674
+ transition: all 0.2s ease;
675
+ }
676
+
677
+ .egg-timer-seo-card:hover {
678
+ background-color: var(--color-soft);
679
+ }
680
+
681
+ :global(.theme-dark) .egg-timer-seo-card:hover {
682
+ background-color: rgba(234, 179, 8, 0.1);
683
+ }
684
+
685
+ .egg-timer-seo-card-title {
686
+ font-weight: 700;
687
+ color: var(--color-primary);
688
+ margin-bottom: 0.75rem;
689
+ font-size: 0.875rem;
690
+ }
691
+
692
+ .egg-timer-seo-card-heading {
693
+ font-weight: 700;
694
+ color: var(--color-text-primary);
695
+ margin-bottom: 0.5rem;
696
+ }
697
+
698
+ .egg-timer-seo-card-text {
699
+ font-size: 0.875rem;
700
+ color: var(--color-text-secondary);
701
+ line-height: 1.5;
702
+ }
703
+
704
+ .egg-timer-formula-box {
705
+ background-color: var(--color-bg-secondary);
706
+ border-radius: 0.75rem;
707
+ padding: 1rem;
708
+ font-size: 0.875rem;
709
+ color: var(--color-text-secondary);
710
+ margin-bottom: 1rem;
711
+ overflow-x: auto;
712
+ }
713
+
714
+ .egg-timer-formula-list {
715
+ list-style: none;
716
+ padding: 0;
717
+ margin: 0;
718
+ display: flex;
719
+ flex-direction: column;
720
+ gap: 0.5rem;
721
+ }
722
+
723
+ .egg-timer-formula-list li {
724
+ font-size: 0.875rem;
725
+ color: var(--color-text-secondary);
726
+ }
727
+
728
+ .egg-timer-formula-list strong {
729
+ color: var(--color-text-primary);
730
+ }
731
+
732
+ .egg-timer-tips-list {
733
+ list-style-position: inside;
734
+ color: var(--color-text-secondary);
735
+ font-size: 0.95rem;
736
+ line-height: 1.75;
737
+ margin-bottom: 1rem;
738
+ }
739
+
740
+ .egg-timer-tips-list li {
741
+ margin-bottom: 0.75rem;
742
+ }
743
+
744
+ .egg-timer-tips-list strong {
745
+ color: var(--color-text-primary);
746
+ }
747
+
748
+ .egg-timer-links {
749
+ font-size: 0.75rem;
750
+ color: var(--color-text-tertiary);
751
+ border-top: 1px solid var(--color-border);
752
+ padding-top: 1.5rem;
753
+ margin-top: 1.5rem;
754
+ }
755
+
756
+ .egg-timer-links-title {
757
+ font-weight: 700;
758
+ margin-bottom: 0.5rem;
759
+ color: var(--color-text-secondary);
760
+ }
761
+
762
+ .egg-timer-links-list {
763
+ list-style: none;
764
+ padding: 0;
765
+ margin: 0;
766
+ display: flex;
767
+ flex-direction: column;
768
+ gap: 0.25rem;
769
+ }
770
+
771
+ .egg-timer-links-list a {
772
+ color: inherit;
773
+ text-decoration: none;
774
+ transition: color 0.2s ease;
775
+ }
776
+
777
+ .egg-timer-links-list a:hover {
778
+ color: var(--color-primary);
779
+ }
780
+
781
+ .egg-timer-hr {
782
+ border: none;
783
+ border-top: 1px solid var(--color-border);
784
+ margin: 2rem 0;
785
+ }
786
+ </style>