@jjlmoya/utils-babies 1.11.0 → 1.13.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 (29) hide show
  1. package/package.json +7 -4
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/category/index.ts +6 -6
  4. package/src/entries.ts +20 -0
  5. package/src/tool/baby-feeding-calculator/baby-feeding-calculator.css +402 -0
  6. package/src/tool/baby-feeding-calculator/component.astro +0 -404
  7. package/src/tool/baby-feeding-calculator/entry.ts +47 -0
  8. package/src/tool/baby-feeding-calculator/index.ts +2 -49
  9. package/src/tool/baby-percentile-calculator/baby-weight-height-percentile.css +451 -0
  10. package/src/tool/baby-percentile-calculator/component.astro +0 -453
  11. package/src/tool/baby-percentile-calculator/entry.ts +55 -0
  12. package/src/tool/baby-percentile-calculator/index.ts +2 -57
  13. package/src/tool/baby-size-converter/baby-size-converter.css +553 -0
  14. package/src/tool/baby-size-converter/component.astro +0 -555
  15. package/src/tool/baby-size-converter/entry.ts +53 -0
  16. package/src/tool/baby-size-converter/index.ts +2 -55
  17. package/src/tool/fertile-days-estimator/component.astro +0 -551
  18. package/src/tool/fertile-days-estimator/entry.ts +47 -0
  19. package/src/tool/fertile-days-estimator/fertile-days-calculator.css +549 -0
  20. package/src/tool/fertile-days-estimator/index.ts +2 -49
  21. package/src/tool/pregnancy-calculator/component.astro +0 -1054
  22. package/src/tool/pregnancy-calculator/entry.ts +87 -0
  23. package/src/tool/pregnancy-calculator/index.ts +2 -89
  24. package/src/tool/pregnancy-calculator/pregnancy-weeks-calculator.css +1053 -0
  25. package/src/tool/vaccination-calendar/baby-vaccination-calendar-spain.css +396 -0
  26. package/src/tool/vaccination-calendar/component.astro +0 -398
  27. package/src/tool/vaccination-calendar/entry.ts +67 -0
  28. package/src/tool/vaccination-calendar/index.ts +2 -69
  29. package/src/tools.ts +1 -1
@@ -566,1058 +566,4 @@ const { ui } = Astro.props;
566
566
  subscribe(onStateChange);
567
567
  </script>
568
568
 
569
- <style>
570
- .pregnancy-calculator {
571
- --pc-tri-primary: #86efac;
572
- --pc-tri-accent: #22c55e;
573
- --pc-tri-glow: rgba(134, 239, 172, 0.18);
574
- --pc-tri-text: #14532d;
575
- --pc-tri-bg: #f0fdf4;
576
- --pc-tri-badge: #dcfce7;
577
- --pc-bg: #fff;
578
- --pc-bg-muted: #f8fafc;
579
- --pc-bg-dark: #1a2332;
580
- --pc-text: #1e293b;
581
- --pc-text-muted: #475569;
582
- --pc-text-dim: #94a3b8;
583
- --pc-border: #edf2f7;
584
- --pc-border-inner: rgba(0, 0, 0, 0.04);
585
- --pc-shadow: rgba(0, 0, 0, 0.07);
586
- --pc-safe-bg: #f0fdf4;
587
- --pc-safe-title: #16a34a;
588
- --pc-alert-bg: #fff7ed;
589
- --pc-alert-title: #ea580c;
590
569
 
591
- position: relative;
592
- width: 100%;
593
- color: var(--pc-text);
594
- background: var(--pc-bg);
595
- border-radius: 32px;
596
- overflow: hidden;
597
- box-shadow:
598
- 0 0 0 1px rgba(0, 0, 0, 0.05),
599
- 0 8px 32px rgba(0, 0, 0, 0.07),
600
- 0 32px 64px rgba(0, 0, 0, 0.04);
601
- transition: box-shadow 0.5s;
602
- }
603
-
604
- .pregnancy-calculator::before {
605
- content: "";
606
- position: absolute;
607
- inset: 0 0 auto;
608
- height: 3px;
609
- background: linear-gradient(
610
- 90deg,
611
- var(--pc-tri-primary),
612
- var(--pc-tri-accent)
613
- );
614
- transition: background 0.6s ease;
615
- z-index: 1;
616
- }
617
-
618
- .pregnancy-calculator.pregnancy-calculator-t1 {
619
- --pc-tri-primary: #86efac;
620
- --pc-tri-accent: #22c55e;
621
- --pc-tri-glow: rgba(134, 239, 172, 0.18);
622
- --pc-tri-text: #14532d;
623
- --pc-tri-bg: #f0fdf4;
624
- --pc-tri-badge: #dcfce7;
625
- }
626
-
627
- .pregnancy-calculator.pregnancy-calculator-t2 {
628
- --pc-tri-primary: #fcd34d;
629
- --pc-tri-accent: #f59e0b;
630
- --pc-tri-glow: rgba(252, 211, 77, 0.2);
631
- --pc-tri-text: #78350f;
632
- --pc-tri-bg: #fffbeb;
633
- --pc-tri-badge: #fef3c7;
634
- }
635
-
636
- .pregnancy-calculator.pregnancy-calculator-t3 {
637
- --pc-tri-primary: #d8b4fe;
638
- --pc-tri-accent: #a855f7;
639
- --pc-tri-glow: rgba(216, 180, 254, 0.2);
640
- --pc-tri-text: #4c1d95;
641
- --pc-tri-bg: #faf5ff;
642
- --pc-tri-badge: #ede9fe;
643
- }
644
-
645
- :global(.theme-dark) .pregnancy-calculator {
646
- --pc-bg: #111827;
647
- --pc-bg-muted: #0f1923;
648
- --pc-bg-dark: #0f1923;
649
- --pc-text: #f1f5f9;
650
- --pc-text-muted: #94a3b8;
651
- --pc-text-dim: #cbd5e1;
652
- --pc-border: rgba(255, 255, 255, 0.04);
653
- --pc-border-inner: rgba(255, 255, 255, 0.04);
654
- --pc-shadow: rgba(0, 0, 0, 0.4);
655
- --pc-safe-bg: rgba(16, 185, 129, 0.08);
656
- --pc-safe-title: #16a34a;
657
- --pc-alert-bg: rgba(249, 115, 22, 0.08);
658
- --pc-alert-title: #ea580c;
659
-
660
- background: #111827;
661
- box-shadow:
662
- 0 0 0 1px rgba(255, 255, 255, 0.06),
663
- 0 8px 32px rgba(0, 0, 0, 0.4);
664
- }
665
-
666
- .pregnancy-calculator-header {
667
- display: flex;
668
- align-items: center;
669
- justify-content: space-between;
670
- padding: 24px 32px 20px;
671
- border-bottom: 1px solid var(--pc-border);
672
- gap: 16px;
673
- flex-wrap: wrap;
674
- }
675
-
676
- .pregnancy-calculator-method-group {
677
- display: flex;
678
- gap: 0;
679
- background: #f1f5f9;
680
- padding: 4px;
681
- border-radius: 16px;
682
- }
683
-
684
- :global(.theme-dark) .pregnancy-calculator-method-group {
685
- background: rgba(255, 255, 255, 0.06);
686
- }
687
-
688
- .pregnancy-calculator-method-btn {
689
- padding: 9px 20px;
690
- border-radius: 12px;
691
- border: none;
692
- background: transparent;
693
- color: var(--pc-text-muted);
694
- font-size: 0.78rem;
695
- font-weight: 800;
696
- cursor: pointer;
697
- transition:
698
- background 0.2s,
699
- color 0.2s,
700
- box-shadow 0.2s;
701
- text-transform: uppercase;
702
- letter-spacing: 0.04em;
703
- white-space: nowrap;
704
- }
705
-
706
- .pregnancy-calculator-method-btn-active {
707
- background: var(--pc-bg);
708
- color: var(--pc-tri-accent);
709
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
710
- }
711
-
712
- .pregnancy-calculator-partner-wrap {
713
- display: flex;
714
- align-items: center;
715
- gap: 0.5rem;
716
- cursor: pointer;
717
- user-select: none;
718
- }
719
-
720
- .pregnancy-calculator-partner-label {
721
- font-size: 0.8125rem;
722
- color: var(--pc-text-muted);
723
- }
724
-
725
- .pregnancy-calculator-toggle-track {
726
- width: 2.5rem;
727
- height: 1.375rem;
728
- border-radius: 0.6875rem;
729
- background: var(--pc-border);
730
- position: relative;
731
- transition: background 0.2s;
732
- border: 1px solid var(--pc-border-inner);
733
- }
734
-
735
- .pregnancy-calculator-toggle-track-on {
736
- background: var(--pc-tri-accent);
737
- }
738
-
739
- .pregnancy-calculator-toggle-thumb {
740
- position: absolute;
741
- top: 2px;
742
- left: 2px;
743
- width: 1rem;
744
- height: 1rem;
745
- border-radius: 50%;
746
- background: var(--pc-bg);
747
- box-shadow: 0 1px 3px var(--pc-shadow);
748
- transition: transform 0.2s;
749
- }
750
-
751
- .pregnancy-calculator-toggle-track-on .pregnancy-calculator-toggle-thumb {
752
- transform: translateX(1.125rem);
753
- }
754
-
755
- .pregnancy-calculator-main {
756
- display: grid;
757
- grid-template-columns: 300px 1fr 220px;
758
- min-height: 32rem;
759
- }
760
-
761
- .pregnancy-calculator-left {
762
- padding: 28px 24px 36px;
763
- border-right: 1px solid var(--pc-border);
764
- display: flex;
765
- flex-direction: column;
766
- gap: 20px;
767
- background: #f8fafc;
768
- }
769
-
770
- :global(.theme-dark) .pregnancy-calculator-left {
771
- background: #0f1923;
772
- border-right-color: rgba(255, 255, 255, 0.04);
773
- }
774
-
775
- .pregnancy-calculator-center {
776
- padding: 28px 28px 36px;
777
- border-right: 1px solid var(--pc-border);
778
- overflow-y: auto;
779
- background: #fff;
780
- }
781
-
782
- :global(.theme-dark) .pregnancy-calculator-center {
783
- background: #111827;
784
- }
785
-
786
- .pregnancy-calculator-right {
787
- position: relative;
788
- overflow: hidden;
789
- }
790
-
791
- .pregnancy-calculator-tl-inner {
792
- position: absolute;
793
- inset: 0;
794
- display: flex;
795
- flex-direction: column;
796
- background: var(--pc-bg-muted);
797
- overflow: hidden;
798
- }
799
-
800
- :global(.theme-dark) .pregnancy-calculator-tl-inner {
801
- background: #0f1923;
802
- }
803
-
804
- .pregnancy-calculator-dp-wrap {
805
- display: flex;
806
- flex-direction: column;
807
- gap: 0.5rem;
808
- }
809
-
810
- .pregnancy-calculator-dp-label {
811
- font-size: 0.8125rem;
812
- font-weight: 600;
813
- color: var(--pc-text-muted);
814
- text-transform: uppercase;
815
- letter-spacing: 0.04em;
816
- }
817
-
818
- .pregnancy-calculator-dp-selects {
819
- display: flex;
820
- align-items: center;
821
- background: #fff;
822
- border-radius: 18px;
823
- padding: 6px 10px;
824
- gap: 4px;
825
- box-shadow:
826
- 0 2px 12px rgba(0, 0, 0, 0.06),
827
- 0 0 0 1px rgba(0, 0, 0, 0.04);
828
- transition: box-shadow 0.2s;
829
- }
830
-
831
- .pregnancy-calculator-dp-selects:focus-within {
832
- box-shadow:
833
- 0 4px 20px var(--pc-tri-glow),
834
- 0 0 0 2px var(--pc-tri-primary);
835
- }
836
-
837
- :global(.theme-dark) .pregnancy-calculator-dp-selects {
838
- background: #1a2332;
839
- box-shadow:
840
- 0 2px 12px rgba(0, 0, 0, 0.2),
841
- 0 0 0 1px rgba(255, 255, 255, 0.06);
842
- }
843
-
844
- .pregnancy-calculator-dp-select {
845
- flex: 1;
846
- padding: 8px 4px;
847
- border: none;
848
- background: transparent;
849
- color: var(--pc-text);
850
- font-size: 0.95rem;
851
- font-weight: 700;
852
- cursor: pointer;
853
- appearance: none;
854
- outline: none;
855
- text-align: center;
856
- min-width: 0;
857
- }
858
-
859
- :global(.theme-dark) .pregnancy-calculator-dp-select {
860
- background-color: #0f1923;
861
- color: #f1f5f9;
862
- }
863
-
864
- .pregnancy-calculator-dp-sep {
865
- color: #cbd5e1;
866
- font-size: 1rem;
867
- font-weight: 300;
868
- flex-shrink: 0;
869
- padding: 0 2px;
870
- }
871
-
872
- :global(.theme-dark) .pregnancy-calculator-dp-sep {
873
- color: #64748b;
874
- }
875
-
876
- .pregnancy-calculator-cs-wrap {
877
- background: #fff;
878
- border-radius: 18px;
879
- padding: 20px;
880
- box-shadow:
881
- 0 2px 12px rgba(0, 0, 0, 0.06),
882
- 0 0 0 1px rgba(0, 0, 0, 0.04);
883
- display: flex;
884
- flex-direction: column;
885
- gap: 0;
886
- transition: opacity 0.3s;
887
- }
888
-
889
- :global(.theme-dark) .pregnancy-calculator-cs-wrap {
890
- background: #1a2332;
891
- box-shadow:
892
- 0 2px 12px rgba(0, 0, 0, 0.2),
893
- 0 0 0 1px rgba(255, 255, 255, 0.06);
894
- }
895
-
896
- .pregnancy-calculator-cs-header {
897
- display: flex;
898
- align-items: baseline;
899
- justify-content: space-between;
900
- margin-bottom: 16px;
901
- }
902
-
903
- .pregnancy-calculator-cs-label {
904
- font-size: 0.7rem;
905
- font-weight: 800;
906
- color: var(--pc-text-muted);
907
- text-transform: uppercase;
908
- letter-spacing: 0.14em;
909
- }
910
-
911
- .pregnancy-calculator-cs-value-wrap {
912
- display: flex;
913
- align-items: baseline;
914
- gap: 3px;
915
- }
916
-
917
- #pc-cs-value {
918
- font-size: 2rem;
919
- font-weight: 900;
920
- letter-spacing: -0.04em;
921
- color: var(--pc-tri-accent);
922
- transition: color 0.5s;
923
- }
924
-
925
- .pregnancy-calculator-cs-unit {
926
- font-size: 0.8rem;
927
- font-weight: 600;
928
- color: var(--pc-text-dim);
929
- }
930
-
931
- .pregnancy-calculator-cs-slider {
932
- width: 100%;
933
- height: 4px;
934
- border-radius: 2px;
935
- background: linear-gradient(90deg, var(--pc-tri-primary) 0%, #e2e8f0 0%);
936
- appearance: none;
937
- cursor: pointer;
938
- outline: none;
939
- transition: background 0.4s;
940
- }
941
-
942
- .pregnancy-calculator-cs-slider::-webkit-slider-thumb {
943
- appearance: none;
944
- width: 20px;
945
- height: 20px;
946
- border-radius: 50%;
947
- background: #fff;
948
- border: 3px solid var(--pc-tri-accent);
949
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
950
- cursor: pointer;
951
- transition:
952
- transform 0.2s,
953
- border-color 0.5s;
954
- }
955
-
956
- .pregnancy-calculator-cs-slider::-webkit-slider-thumb:hover {
957
- transform: scale(1.2);
958
- }
959
-
960
- .pregnancy-calculator-cs-extremes {
961
- display: flex;
962
- justify-content: space-between;
963
- margin-top: 8px;
964
- font-size: 0.65rem;
965
- font-weight: 700;
966
- color: #cbd5e1;
967
- }
968
-
969
- .pregnancy-calculator-sd-wrap {
970
- display: flex;
971
- flex-direction: column;
972
- gap: 0.875rem;
973
- }
974
-
975
- .pregnancy-calculator-stats-row {
976
- display: flex;
977
- gap: 0.625rem;
978
- }
979
-
980
- .pregnancy-calculator-stat-chip {
981
- flex: 1;
982
- background: #f8fafc;
983
- border-radius: 16px;
984
- padding: 16px 18px;
985
- display: flex;
986
- flex-direction: column;
987
- gap: 4px;
988
- }
989
-
990
- :global(.theme-dark) .pregnancy-calculator-stat-chip {
991
- background: #1e2936;
992
- }
993
-
994
- .pregnancy-calculator-stat-key {
995
- font-size: 0.65rem;
996
- font-weight: 800;
997
- text-transform: uppercase;
998
- letter-spacing: 0.12em;
999
- color: #94a3b8;
1000
- }
1001
-
1002
- .pregnancy-calculator-stat-value {
1003
- font-size: 1.5rem;
1004
- font-weight: 900;
1005
- color: var(--pc-text);
1006
- line-height: 1;
1007
- letter-spacing: -0.02em;
1008
- transition: color 0.5s;
1009
- }
1010
-
1011
- .pregnancy-calculator-accent {
1012
- color: var(--pc-tri-accent);
1013
- }
1014
-
1015
- .pregnancy-calculator-edd-box {
1016
- border-radius: 18px;
1017
- padding: 20px;
1018
- background: var(--pc-tri-bg);
1019
- text-align: center;
1020
- display: flex;
1021
- flex-direction: column;
1022
- gap: 0;
1023
- transition: background 0.5s;
1024
- }
1025
-
1026
- :global(.theme-dark) .pregnancy-calculator-edd-box {
1027
- background: rgba(255, 255, 255, 0.04);
1028
- }
1029
-
1030
- .pregnancy-calculator-edd-label {
1031
- font-size: 0.65rem;
1032
- font-weight: 800;
1033
- text-transform: uppercase;
1034
- letter-spacing: 0.14em;
1035
- color: #94a3b8;
1036
- margin-bottom: 6px;
1037
- }
1038
-
1039
- .pregnancy-calculator-edd-date {
1040
- font-size: 1.15rem;
1041
- font-weight: 900;
1042
- color: var(--pc-tri-text);
1043
- letter-spacing: -0.02em;
1044
- transition: color 0.5s;
1045
- }
1046
-
1047
- :global(.theme-dark) .pregnancy-calculator-edd-date {
1048
- color: var(--pc-tri-primary);
1049
- }
1050
-
1051
- .pregnancy-calculator-edd-note {
1052
- font-size: 0.72rem;
1053
- color: #94a3b8;
1054
- margin-top: 5px;
1055
- font-style: italic;
1056
- }
1057
-
1058
- .pregnancy-calculator-btn-cal {
1059
- width: 100%;
1060
- padding: 15px;
1061
- border-radius: 16px;
1062
- border: none;
1063
- background: var(--pc-tri-accent);
1064
- color: #fff;
1065
- font-size: 0.82rem;
1066
- font-weight: 800;
1067
- cursor: pointer;
1068
- letter-spacing: 0.06em;
1069
- text-transform: uppercase;
1070
- transition: all 0.25s;
1071
- box-shadow: 0 4px 16px var(--pc-tri-glow);
1072
- }
1073
-
1074
- .pregnancy-calculator-btn-cal:hover:not(:disabled) {
1075
- transform: translateY(-2px);
1076
- box-shadow: 0 8px 24px var(--pc-tri-glow);
1077
- }
1078
-
1079
- .pregnancy-calculator-btn-cal:disabled {
1080
- background: #e2e8f0;
1081
- color: #94a3b8;
1082
- box-shadow: none;
1083
- cursor: default;
1084
- }
1085
-
1086
- :global(.theme-dark) .pregnancy-calculator-btn-cal:disabled {
1087
- background: #1e2936;
1088
- }
1089
-
1090
- .pregnancy-calculator-mp-empty {
1091
- display: flex;
1092
- flex-direction: column;
1093
- align-items: center;
1094
- justify-content: center;
1095
- height: 100%;
1096
- min-height: 18rem;
1097
- gap: 0.75rem;
1098
- text-align: center;
1099
- }
1100
-
1101
- .pregnancy-calculator-mp-empty-dot {
1102
- width: 3rem;
1103
- height: 3rem;
1104
- border-radius: 50%;
1105
- background: var(--pc-tri-bg);
1106
- border: 2px solid var(--pc-tri-primary);
1107
- box-shadow: 0 0 0 6px var(--pc-tri-glow);
1108
- }
1109
-
1110
- .pregnancy-calculator-mp-empty-title {
1111
- font-size: 1.125rem;
1112
- font-weight: 700;
1113
- color: var(--pc-text);
1114
- }
1115
-
1116
- .pregnancy-calculator-mp-empty-body {
1117
- font-size: 0.875rem;
1118
- color: var(--pc-text-muted);
1119
- max-width: 22ch;
1120
- line-height: 1.5;
1121
- margin: 0;
1122
- }
1123
-
1124
- @keyframes pc-fade-in {
1125
- from {
1126
- opacity: 0;
1127
- transform: translateY(6px);
1128
- }
1129
- to {
1130
- opacity: 1;
1131
- transform: translateY(0);
1132
- }
1133
- }
1134
-
1135
- .pregnancy-calculator-mp-results {
1136
- display: flex;
1137
- flex-direction: column;
1138
- gap: 1rem;
1139
- }
1140
-
1141
- .pregnancy-calculator-mp-enter {
1142
- animation: pc-fade-in 0.25s ease-out;
1143
- }
1144
-
1145
- .pregnancy-calculator-mp-top-row {
1146
- display: flex;
1147
- align-items: center;
1148
- justify-content: space-between;
1149
- gap: 0.75rem;
1150
- flex-wrap: wrap;
1151
- }
1152
-
1153
- .pregnancy-calculator-mp-badge {
1154
- display: inline-flex;
1155
- align-items: center;
1156
- padding: 0.375rem 0.875rem;
1157
- border-radius: 2rem;
1158
- background: var(--pc-tri-badge);
1159
- color: var(--pc-tri-text);
1160
- font-size: 0.875rem;
1161
- font-weight: 700;
1162
- border: 1px solid var(--pc-tri-primary);
1163
- }
1164
-
1165
- .pregnancy-calculator-analogy-tabs {
1166
- display: flex;
1167
- gap: 0.25rem;
1168
- background: var(--pc-bg-muted);
1169
- padding: 0.25rem;
1170
- border-radius: 0.5rem;
1171
- border: 1px solid var(--pc-border);
1172
- }
1173
-
1174
- .pregnancy-calculator-at-btn {
1175
- padding: 0.25rem 0.625rem;
1176
- border-radius: 0.375rem;
1177
- border: none;
1178
- background: transparent;
1179
- color: var(--pc-text-muted);
1180
- font-size: 0.75rem;
1181
- font-weight: 500;
1182
- cursor: pointer;
1183
- transition:
1184
- background 0.15s,
1185
- color 0.15s;
1186
- }
1187
-
1188
- .pregnancy-calculator-at-btn-active {
1189
- background: var(--pc-bg);
1190
- color: var(--pc-tri-accent);
1191
- box-shadow: 0 1px 3px var(--pc-shadow);
1192
- }
1193
-
1194
- .pregnancy-calculator-size-card {
1195
- display: flex;
1196
- align-items: baseline;
1197
- justify-content: space-between;
1198
- background: #f8fafc;
1199
- border-radius: 20px;
1200
- padding: 24px 28px;
1201
- gap: 12px;
1202
- }
1203
-
1204
- :global(.theme-dark) .pregnancy-calculator-size-card {
1205
- background: #1a2332;
1206
- }
1207
-
1208
- .pregnancy-calculator-size-name {
1209
- font-size: 1.6rem;
1210
- font-weight: 300;
1211
- font-style: italic;
1212
- color: var(--pc-text);
1213
- letter-spacing: -0.01em;
1214
- }
1215
-
1216
- :global(.theme-dark) .pregnancy-calculator-size-name {
1217
- color: #f1f5f9;
1218
- }
1219
-
1220
- .pregnancy-calculator-size-measure {
1221
- font-size: 0.8rem;
1222
- font-weight: 700;
1223
- color: #94a3b8;
1224
- text-transform: uppercase;
1225
- letter-spacing: 0.08em;
1226
- white-space: nowrap;
1227
- }
1228
-
1229
- .pregnancy-calculator-info-stack {
1230
- display: flex;
1231
- flex-direction: column;
1232
- gap: 0.75rem;
1233
- }
1234
-
1235
- .pregnancy-calculator-info-block {
1236
- background: #fff;
1237
- border-radius: 16px;
1238
- padding: 18px 20px;
1239
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
1240
- display: flex;
1241
- flex-direction: column;
1242
- }
1243
-
1244
- :global(.theme-dark) .pregnancy-calculator-info-block {
1245
- background: #1a2332;
1246
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
1247
- }
1248
-
1249
- .pregnancy-calculator-info-key {
1250
- font-size: 0.65rem;
1251
- font-weight: 900;
1252
- text-transform: uppercase;
1253
- letter-spacing: 0.14em;
1254
- color: var(--pc-tri-accent);
1255
- margin-bottom: 7px;
1256
- transition: color 0.5s;
1257
- }
1258
-
1259
- .pregnancy-calculator-info-text {
1260
- font-size: 0.92rem;
1261
- color: var(--pc-text-muted);
1262
- line-height: 1.75;
1263
- margin: 0;
1264
- font-weight: 500;
1265
- }
1266
-
1267
- .pregnancy-calculator-wonder-line {
1268
- font-size: 0.85rem;
1269
- font-style: italic;
1270
- font-weight: 600;
1271
- color: var(--pc-tri-text);
1272
- padding: 12px 16px;
1273
- border-left: 3px solid var(--pc-tri-primary);
1274
- background: var(--pc-tri-bg);
1275
- border-radius: 0 12px 12px 0;
1276
- line-height: 1.6;
1277
- transition:
1278
- background 0.5s,
1279
- color 0.5s,
1280
- border-color 0.5s;
1281
- }
1282
-
1283
- .pregnancy-calculator-semaphore {
1284
- display: grid;
1285
- grid-template-columns: 1fr 1fr;
1286
- gap: 0.75rem;
1287
- }
1288
-
1289
- .pregnancy-calculator-sema {
1290
- border-radius: 0.625rem;
1291
- padding: 0.75rem;
1292
- display: flex;
1293
- flex-direction: column;
1294
- gap: 0.5rem;
1295
- }
1296
-
1297
- .pregnancy-calculator-sema-safe {
1298
- background: var(--pc-safe-bg);
1299
- border: 1px solid rgba(22, 163, 74, 0.2);
1300
- }
1301
-
1302
- .pregnancy-calculator-sema-alert {
1303
- background: var(--pc-alert-bg);
1304
- border: 1px solid rgba(234, 88, 12, 0.2);
1305
- }
1306
-
1307
- .pregnancy-calculator-sema-title {
1308
- font-size: 0.6875rem;
1309
- font-weight: 700;
1310
- text-transform: uppercase;
1311
- letter-spacing: 0.04em;
1312
- }
1313
-
1314
- .pregnancy-calculator-sema-safe .pregnancy-calculator-sema-title {
1315
- color: var(--pc-safe-title);
1316
- }
1317
-
1318
- .pregnancy-calculator-sema-alert .pregnancy-calculator-sema-title {
1319
- color: var(--pc-alert-title);
1320
- }
1321
-
1322
- .pregnancy-calculator-sema-list {
1323
- list-style: none;
1324
- margin: 0;
1325
- padding: 0;
1326
- display: flex;
1327
- flex-direction: column;
1328
- gap: 0.25rem;
1329
- }
1330
-
1331
- .pregnancy-calculator-sema-list li {
1332
- font-size: 0.75rem;
1333
- color: var(--pc-text-muted);
1334
- padding-left: 1rem;
1335
- position: relative;
1336
- line-height: 1.4;
1337
- }
1338
-
1339
- .pregnancy-calculator-sema-safe .pregnancy-calculator-sema-list li::before {
1340
- content: "v";
1341
- position: absolute;
1342
- left: 0;
1343
- color: #22c55e;
1344
- font-weight: 900;
1345
- font-size: 0.7rem;
1346
- }
1347
-
1348
- .pregnancy-calculator-sema-alert .pregnancy-calculator-sema-list li::before {
1349
- content: "!";
1350
- position: absolute;
1351
- left: 0;
1352
- color: #f97316;
1353
- font-weight: 900;
1354
- font-size: 0.7rem;
1355
- }
1356
-
1357
- .pregnancy-calculator-mp-egg {
1358
- display: flex;
1359
- flex-direction: column;
1360
- align-items: center;
1361
- justify-content: center;
1362
- height: 100%;
1363
- min-height: 18rem;
1364
- gap: 14px;
1365
- padding: 48px 32px;
1366
- text-align: center;
1367
- animation: pc-fade-in 0.4s ease-out;
1368
- }
1369
-
1370
- .pregnancy-calculator-egg-dot {
1371
- width: 48px;
1372
- height: 48px;
1373
- border-radius: 50%;
1374
- border: 2px dashed #f87171;
1375
- background: #fef2f2;
1376
- animation: pc-egg-spin 6s linear infinite;
1377
- }
1378
-
1379
- .pregnancy-calculator-egg-dot[data-reason="too-old"] {
1380
- border-color: #fb923c;
1381
- background: #fff7ed;
1382
- }
1383
-
1384
- @keyframes pc-egg-spin {
1385
- from {
1386
- transform: rotate(0deg);
1387
- }
1388
- to {
1389
- transform: rotate(360deg);
1390
- }
1391
- }
1392
-
1393
- .pregnancy-calculator-egg-title {
1394
- font-size: 1.2rem;
1395
- font-weight: 800;
1396
- color: var(--pc-text);
1397
- letter-spacing: -0.02em;
1398
- }
1399
-
1400
- .pregnancy-calculator-egg-body {
1401
- font-size: 0.92rem;
1402
- color: var(--pc-text-muted);
1403
- max-width: 300px;
1404
- line-height: 1.7;
1405
- font-style: italic;
1406
- margin: 0;
1407
- }
1408
-
1409
- .pregnancy-calculator-tl-header {
1410
- padding: 18px 18px 12px;
1411
- font-size: 0.65rem;
1412
- font-weight: 900;
1413
- text-transform: uppercase;
1414
- letter-spacing: 0.15em;
1415
- color: #94a3b8;
1416
- border-bottom: 1px solid var(--pc-border);
1417
- flex-shrink: 0;
1418
- }
1419
-
1420
- .pregnancy-calculator-tl-scroll {
1421
- flex: 1;
1422
- min-height: 0;
1423
- overflow-y: auto;
1424
- padding: 12px 14px 20px;
1425
- scrollbar-width: thin;
1426
- scrollbar-color: #e2e8f0 transparent;
1427
- }
1428
-
1429
- .pregnancy-calculator-tl-scroll::-webkit-scrollbar {
1430
- width: 3px;
1431
- }
1432
-
1433
- .pregnancy-calculator-tl-scroll::-webkit-scrollbar-thumb {
1434
- background: #e2e8f0;
1435
- border-radius: 2px;
1436
- }
1437
-
1438
- :global(.theme-dark) .pregnancy-calculator-tl-scroll {
1439
- scrollbar-color: #334155 transparent;
1440
- }
1441
-
1442
- :global(.theme-dark) .pregnancy-calculator-tl-scroll::-webkit-scrollbar-thumb {
1443
- background: #334155;
1444
- }
1445
-
1446
- :global(.pregnancy-calculator-tl-row) {
1447
- display: flex;
1448
- align-items: flex-start;
1449
- gap: 0.5rem;
1450
- padding: 0.25rem 0.75rem;
1451
- cursor: default;
1452
- transition: background 0.1s;
1453
- }
1454
-
1455
- :global(.pregnancy-calculator-tl-row-current) {
1456
- background: var(--pc-tri-bg);
1457
- }
1458
-
1459
- :global(.pregnancy-calculator-tl-line-col) {
1460
- display: flex;
1461
- flex-direction: column;
1462
- align-items: center;
1463
- flex-shrink: 0;
1464
- width: 1rem;
1465
- padding-top: 0.2rem;
1466
- }
1467
-
1468
- :global(.pregnancy-calculator-tl-dot) {
1469
- width: 0.5rem;
1470
- height: 0.5rem;
1471
- border-radius: 50%;
1472
- background: var(--pc-border);
1473
- flex-shrink: 0;
1474
- transition: background 0.15s;
1475
- }
1476
-
1477
- :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-dot) {
1478
- background: var(--pc-tri-accent);
1479
- }
1480
-
1481
- :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-dot) {
1482
- background: var(--pc-tri-accent);
1483
- box-shadow: 0 0 0 3px var(--pc-tri-glow);
1484
- width: 0.625rem;
1485
- height: 0.625rem;
1486
- }
1487
-
1488
- :global(.pregnancy-calculator-tl-line) {
1489
- width: 2px;
1490
- flex: 1;
1491
- min-height: 1.25rem;
1492
- background: var(--pc-border);
1493
- margin-top: 2px;
1494
- }
1495
-
1496
- :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-line) {
1497
- background: var(--pc-tri-primary);
1498
- }
1499
-
1500
- :global(.pregnancy-calculator-tl-info) {
1501
- display: flex;
1502
- align-items: baseline;
1503
- gap: 0.375rem;
1504
- min-width: 0;
1505
- }
1506
-
1507
- :global(.pregnancy-calculator-tl-num) {
1508
- font-size: 0.75rem;
1509
- font-weight: 700;
1510
- color: var(--pc-text-dim);
1511
- flex-shrink: 0;
1512
- }
1513
-
1514
- :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-num) {
1515
- color: var(--pc-tri-accent);
1516
- }
1517
-
1518
- :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-num) {
1519
- color: var(--pc-tri-accent);
1520
- font-size: 0.875rem;
1521
- }
1522
-
1523
- :global(.pregnancy-calculator-tl-label) {
1524
- font-size: 0.6875rem;
1525
- color: var(--pc-text-dim);
1526
- white-space: nowrap;
1527
- overflow: hidden;
1528
- text-overflow: ellipsis;
1529
- }
1530
-
1531
- :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-label) {
1532
- color: var(--pc-tri-text);
1533
- font-weight: 600;
1534
- font-size: 0.75rem;
1535
- }
1536
-
1537
- @media (max-width: 900px) {
1538
- .pregnancy-calculator-main {
1539
- grid-template-columns: 1fr;
1540
- }
1541
-
1542
- .pregnancy-calculator-center {
1543
- border-right: none;
1544
- border-top: 1px solid var(--pc-border);
1545
- }
1546
-
1547
- .pregnancy-calculator-right {
1548
- border-top: 1px solid var(--pc-border);
1549
- height: 16rem;
1550
- }
1551
-
1552
- .pregnancy-calculator-tl-inner {
1553
- position: static;
1554
- height: 100%;
1555
- }
1556
-
1557
- .pregnancy-calculator-tl-scroll {
1558
- display: flex;
1559
- flex-direction: row;
1560
- overflow-x: auto;
1561
- overflow-y: hidden;
1562
- padding: 0.5rem;
1563
- gap: 0.25rem;
1564
- }
1565
-
1566
- :global(.pregnancy-calculator-tl-row) {
1567
- flex-direction: column;
1568
- align-items: center;
1569
- padding: 0.5rem 0.375rem;
1570
- min-width: 3rem;
1571
- }
1572
-
1573
- :global(.pregnancy-calculator-tl-line-col) {
1574
- flex-direction: row;
1575
- width: auto;
1576
- padding-top: 0;
1577
- }
1578
-
1579
- :global(.pregnancy-calculator-tl-line) {
1580
- width: 1.25rem;
1581
- height: 2px;
1582
- min-height: 0;
1583
- margin-top: 0;
1584
- margin-left: 2px;
1585
- }
1586
-
1587
- :global(.pregnancy-calculator-tl-info) {
1588
- flex-direction: column;
1589
- align-items: center;
1590
- gap: 0.125rem;
1591
- }
1592
-
1593
- :global(.pregnancy-calculator-tl-label) {
1594
- display: none;
1595
- }
1596
-
1597
- .pregnancy-calculator-semaphore {
1598
- grid-template-columns: 1fr;
1599
- }
1600
-
1601
- .pregnancy-calculator-left {
1602
- border-right: none;
1603
- border-bottom: 1px solid var(--pc-border);
1604
- }
1605
- }
1606
-
1607
- @media (max-width: 600px) {
1608
- .pregnancy-calculator-header {
1609
- flex-direction: column;
1610
- align-items: flex-start;
1611
- }
1612
-
1613
- .pregnancy-calculator-method-group {
1614
- width: 100%;
1615
- justify-content: stretch;
1616
- }
1617
-
1618
- .pregnancy-calculator-method-btn {
1619
- flex: 1;
1620
- text-align: center;
1621
- }
1622
- }
1623
- </style>