@jjlmoya/utils-babies 1.4.0 → 1.6.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,1024 +0,0 @@
1
- .pregnancy-calculator {
2
- --pc-tri-primary: #86efac;
3
- --pc-tri-accent: #22c55e;
4
- --pc-tri-glow: rgba(134, 239, 172, 0.18);
5
- --pc-tri-text: #14532d;
6
- --pc-tri-bg: #f0fdf4;
7
- --pc-tri-badge: #dcfce7;
8
- --pc-bg: #fff;
9
- --pc-bg-muted: #f8fafc;
10
- --pc-bg-dark: #1a2332;
11
- --pc-text: #1e293b;
12
- --pc-text-muted: #475569;
13
- --pc-text-dim: #94a3b8;
14
- --pc-border: #edf2f7;
15
- --pc-border-inner: rgba(0, 0, 0, 0.04);
16
- --pc-shadow: rgba(0, 0, 0, 0.07);
17
- --pc-safe-bg: #f0fdf4;
18
- --pc-safe-title: #16a34a;
19
- --pc-alert-bg: #fff7ed;
20
- --pc-alert-title: #ea580c;
21
-
22
- position: relative;
23
- width: 100%;
24
- color: var(--pc-text);
25
- background: var(--pc-bg);
26
- border-radius: 32px;
27
- overflow: hidden;
28
- box-shadow:
29
- 0 0 0 1px rgba(0, 0, 0, 0.05),
30
- 0 8px 32px rgba(0, 0, 0, 0.07),
31
- 0 32px 64px rgba(0, 0, 0, 0.04);
32
- transition: box-shadow 0.5s;
33
- }
34
-
35
- .pregnancy-calculator::before {
36
- content: '';
37
- position: absolute;
38
- inset: 0 0 auto;
39
- height: 3px;
40
- background: linear-gradient(90deg, var(--pc-tri-primary), var(--pc-tri-accent));
41
- transition: background 0.6s ease;
42
- z-index: 1;
43
- }
44
-
45
- .pregnancy-calculator.pregnancy-calculator-t1 {
46
- --pc-tri-primary: #86efac;
47
- --pc-tri-accent: #22c55e;
48
- --pc-tri-glow: rgba(134, 239, 172, 0.18);
49
- --pc-tri-text: #14532d;
50
- --pc-tri-bg: #f0fdf4;
51
- --pc-tri-badge: #dcfce7;
52
- }
53
-
54
- .pregnancy-calculator.pregnancy-calculator-t2 {
55
- --pc-tri-primary: #fcd34d;
56
- --pc-tri-accent: #f59e0b;
57
- --pc-tri-glow: rgba(252, 211, 77, 0.2);
58
- --pc-tri-text: #78350f;
59
- --pc-tri-bg: #fffbeb;
60
- --pc-tri-badge: #fef3c7;
61
- }
62
-
63
- .pregnancy-calculator.pregnancy-calculator-t3 {
64
- --pc-tri-primary: #d8b4fe;
65
- --pc-tri-accent: #a855f7;
66
- --pc-tri-glow: rgba(216, 180, 254, 0.2);
67
- --pc-tri-text: #4c1d95;
68
- --pc-tri-bg: #faf5ff;
69
- --pc-tri-badge: #ede9fe;
70
- }
71
-
72
- .dark .pregnancy-calculator {
73
- background: #111827;
74
- box-shadow:
75
- 0 0 0 1px rgba(255, 255, 255, 0.06),
76
- 0 8px 32px rgba(0, 0, 0, 0.4);
77
- }
78
-
79
- .theme-dark .pregnancy-calculator {
80
- --pc-bg: #111827;
81
- --pc-bg-muted: #0f1923;
82
- --pc-bg-dark: #0f1923;
83
- --pc-text: #f1f5f9;
84
- --pc-text-muted: #94a3b8;
85
- --pc-text-dim: #64748b;
86
- --pc-border: rgba(255, 255, 255, 0.04);
87
- --pc-border-inner: rgba(255, 255, 255, 0.04);
88
- --pc-shadow: rgba(0, 0, 0, 0.4);
89
- --pc-safe-bg: rgba(16, 185, 129, 0.08);
90
- --pc-safe-title: #16a34a;
91
- --pc-alert-bg: rgba(249, 115, 22, 0.08);
92
- --pc-alert-title: #ea580c;
93
- }
94
-
95
- .pregnancy-calculator-header {
96
- display: flex;
97
- align-items: center;
98
- justify-content: space-between;
99
- padding: 24px 32px 20px;
100
- border-bottom: 1px solid var(--pc-border);
101
- gap: 16px;
102
- flex-wrap: wrap;
103
- }
104
-
105
- .pregnancy-calculator-method-group {
106
- display: flex;
107
- gap: 0;
108
- background: #f1f5f9;
109
- padding: 4px;
110
- border-radius: 16px;
111
- }
112
-
113
- .dark .pregnancy-calculator-method-group {
114
- background: rgba(255, 255, 255, 0.06);
115
- }
116
-
117
- .pregnancy-calculator-method-btn {
118
- padding: 9px 20px;
119
- border-radius: 12px;
120
- border: none;
121
- background: transparent;
122
- color: var(--pc-text-muted);
123
- font-size: 0.78rem;
124
- font-weight: 800;
125
- cursor: pointer;
126
- transition: background 0.2s, color 0.2s, box-shadow 0.2s;
127
- text-transform: uppercase;
128
- letter-spacing: 0.04em;
129
- white-space: nowrap;
130
- }
131
-
132
- .pregnancy-calculator-method-btn-active {
133
- background: var(--pc-bg);
134
- color: var(--pc-tri-accent);
135
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
136
- }
137
-
138
- .pregnancy-calculator-partner-wrap {
139
- display: flex;
140
- align-items: center;
141
- gap: 0.5rem;
142
- cursor: pointer;
143
- user-select: none;
144
- }
145
-
146
- .pregnancy-calculator-partner-label {
147
- font-size: 0.8125rem;
148
- color: var(--pc-text-muted);
149
- }
150
-
151
- .pregnancy-calculator-toggle-track {
152
- width: 2.5rem;
153
- height: 1.375rem;
154
- border-radius: 0.6875rem;
155
- background: var(--pc-border);
156
- position: relative;
157
- transition: background 0.2s;
158
- border: 1px solid var(--pc-border-inner);
159
- }
160
-
161
- .pregnancy-calculator-toggle-track-on {
162
- background: var(--pc-tri-accent);
163
- }
164
-
165
- .pregnancy-calculator-toggle-thumb {
166
- position: absolute;
167
- top: 2px;
168
- left: 2px;
169
- width: 1rem;
170
- height: 1rem;
171
- border-radius: 50%;
172
- background: var(--pc-bg);
173
- box-shadow: 0 1px 3px var(--pc-shadow);
174
- transition: transform 0.2s;
175
- }
176
-
177
- .pregnancy-calculator-toggle-track-on .pregnancy-calculator-toggle-thumb {
178
- transform: translateX(1.125rem);
179
- }
180
-
181
- .pregnancy-calculator-main {
182
- display: grid;
183
- grid-template-columns: 300px 1fr 220px;
184
- min-height: 32rem;
185
- }
186
-
187
- .pregnancy-calculator-left {
188
- padding: 28px 24px 36px;
189
- border-right: 1px solid var(--pc-border);
190
- display: flex;
191
- flex-direction: column;
192
- gap: 20px;
193
- background: #f8fafc;
194
- }
195
-
196
- .dark .pregnancy-calculator-left {
197
- background: #0f1923;
198
- border-right-color: rgba(255, 255, 255, 0.04);
199
- }
200
-
201
- .pregnancy-calculator-center {
202
- padding: 28px 28px 36px;
203
- border-right: 1px solid var(--pc-border);
204
- overflow-y: auto;
205
- background: #fff;
206
- }
207
-
208
- .dark .pregnancy-calculator-center {
209
- background: #111827;
210
- }
211
-
212
- .pregnancy-calculator-right {
213
- position: relative;
214
- overflow: hidden;
215
- }
216
-
217
- .pregnancy-calculator-tl-inner {
218
- position: absolute;
219
- inset: 0;
220
- display: flex;
221
- flex-direction: column;
222
- background: var(--pc-bg-muted);
223
- overflow: hidden;
224
- }
225
-
226
- .dark .pregnancy-calculator-tl-inner {
227
- background: #0f1923;
228
- }
229
-
230
- .pregnancy-calculator-dp-wrap {
231
- display: flex;
232
- flex-direction: column;
233
- gap: 0.5rem;
234
- }
235
-
236
- .pregnancy-calculator-dp-label {
237
- font-size: 0.8125rem;
238
- font-weight: 600;
239
- color: var(--pc-text-muted);
240
- text-transform: uppercase;
241
- letter-spacing: 0.04em;
242
- }
243
-
244
- .pregnancy-calculator-dp-selects {
245
- display: flex;
246
- align-items: center;
247
- background: #fff;
248
- border-radius: 18px;
249
- padding: 6px 10px;
250
- gap: 4px;
251
- box-shadow:
252
- 0 2px 12px rgba(0, 0, 0, 0.06),
253
- 0 0 0 1px rgba(0, 0, 0, 0.04);
254
- transition: box-shadow 0.2s;
255
- }
256
-
257
- .pregnancy-calculator-dp-selects:focus-within {
258
- box-shadow:
259
- 0 4px 20px var(--pc-tri-glow),
260
- 0 0 0 2px var(--pc-tri-primary);
261
- }
262
-
263
- .dark .pregnancy-calculator-dp-selects {
264
- background: #1a2332;
265
- box-shadow:
266
- 0 2px 12px rgba(0, 0, 0, 0.2),
267
- 0 0 0 1px rgba(255, 255, 255, 0.06);
268
- }
269
-
270
- .pregnancy-calculator-dp-select {
271
- flex: 1;
272
- padding: 8px 4px;
273
- border: none;
274
- background: transparent;
275
- color: var(--pc-text);
276
- font-size: 0.95rem;
277
- font-weight: 700;
278
- cursor: pointer;
279
- appearance: none;
280
- outline: none;
281
- text-align: center;
282
- min-width: 0;
283
- }
284
-
285
- .pregnancy-calculator-dp-sep {
286
- color: #cbd5e1;
287
- font-size: 1rem;
288
- font-weight: 300;
289
- flex-shrink: 0;
290
- padding: 0 2px;
291
- }
292
-
293
- .pregnancy-calculator-cs-wrap {
294
- background: #fff;
295
- border-radius: 18px;
296
- padding: 20px;
297
- box-shadow:
298
- 0 2px 12px rgba(0, 0, 0, 0.06),
299
- 0 0 0 1px rgba(0, 0, 0, 0.04);
300
- display: flex;
301
- flex-direction: column;
302
- gap: 0;
303
- transition: opacity 0.3s;
304
- }
305
-
306
- .dark .pregnancy-calculator-cs-wrap {
307
- background: #1a2332;
308
- box-shadow:
309
- 0 2px 12px rgba(0, 0, 0, 0.2),
310
- 0 0 0 1px rgba(255, 255, 255, 0.06);
311
- }
312
-
313
- .pregnancy-calculator-cs-header {
314
- display: flex;
315
- align-items: baseline;
316
- justify-content: space-between;
317
- margin-bottom: 16px;
318
- }
319
-
320
- .pregnancy-calculator-cs-label {
321
- font-size: 0.7rem;
322
- font-weight: 800;
323
- color: var(--pc-text-muted);
324
- text-transform: uppercase;
325
- letter-spacing: 0.14em;
326
- }
327
-
328
- .pregnancy-calculator-cs-value-wrap {
329
- display: flex;
330
- align-items: baseline;
331
- gap: 3px;
332
- }
333
-
334
- #pc-cs-value {
335
- font-size: 2rem;
336
- font-weight: 900;
337
- letter-spacing: -0.04em;
338
- color: var(--pc-tri-accent);
339
- transition: color 0.5s;
340
- }
341
-
342
- .pregnancy-calculator-cs-unit {
343
- font-size: 0.8rem;
344
- font-weight: 600;
345
- color: var(--pc-text-dim);
346
- }
347
-
348
- .pregnancy-calculator-cs-slider {
349
- width: 100%;
350
- height: 4px;
351
- border-radius: 2px;
352
- background: linear-gradient(
353
- 90deg,
354
- var(--pc-tri-primary) 0%,
355
- #e2e8f0 0%
356
- );
357
- appearance: none;
358
- cursor: pointer;
359
- outline: none;
360
- transition: background 0.4s;
361
- }
362
-
363
- .pregnancy-calculator-cs-slider::-webkit-slider-thumb {
364
- appearance: none;
365
- width: 20px;
366
- height: 20px;
367
- border-radius: 50%;
368
- background: #fff;
369
- border: 3px solid var(--pc-tri-accent);
370
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
371
- cursor: pointer;
372
- transition: transform 0.2s, border-color 0.5s;
373
- }
374
-
375
- .pregnancy-calculator-cs-slider::-webkit-slider-thumb:hover {
376
- transform: scale(1.2);
377
- }
378
-
379
- .pregnancy-calculator-cs-extremes {
380
- display: flex;
381
- justify-content: space-between;
382
- margin-top: 8px;
383
- font-size: 0.65rem;
384
- font-weight: 700;
385
- color: #cbd5e1;
386
- }
387
-
388
- .pregnancy-calculator-sd-wrap {
389
- display: flex;
390
- flex-direction: column;
391
- gap: 0.875rem;
392
- }
393
-
394
- .pregnancy-calculator-stats-row {
395
- display: flex;
396
- gap: 0.625rem;
397
- }
398
-
399
- .pregnancy-calculator-stat-chip {
400
- flex: 1;
401
- background: #f8fafc;
402
- border-radius: 16px;
403
- padding: 16px 18px;
404
- display: flex;
405
- flex-direction: column;
406
- gap: 4px;
407
- }
408
-
409
- .dark .pregnancy-calculator-stat-chip {
410
- background: #1e2936;
411
- }
412
-
413
- .pregnancy-calculator-stat-key {
414
- font-size: 0.65rem;
415
- font-weight: 800;
416
- text-transform: uppercase;
417
- letter-spacing: 0.12em;
418
- color: #94a3b8;
419
- }
420
-
421
- .pregnancy-calculator-stat-value {
422
- font-size: 1.5rem;
423
- font-weight: 900;
424
- color: var(--pc-text);
425
- line-height: 1;
426
- letter-spacing: -0.02em;
427
- transition: color 0.5s;
428
- }
429
-
430
- .pregnancy-calculator-accent {
431
- color: var(--pc-tri-accent);
432
- }
433
-
434
- .pregnancy-calculator-edd-box {
435
- border-radius: 18px;
436
- padding: 20px;
437
- background: var(--pc-tri-bg);
438
- text-align: center;
439
- display: flex;
440
- flex-direction: column;
441
- gap: 0;
442
- transition: background 0.5s;
443
- }
444
-
445
- .dark .pregnancy-calculator-edd-box {
446
- background: rgba(255, 255, 255, 0.04);
447
- }
448
-
449
- .pregnancy-calculator-edd-label {
450
- font-size: 0.65rem;
451
- font-weight: 800;
452
- text-transform: uppercase;
453
- letter-spacing: 0.14em;
454
- color: #94a3b8;
455
- margin-bottom: 6px;
456
- }
457
-
458
- .pregnancy-calculator-edd-date {
459
- font-size: 1.15rem;
460
- font-weight: 900;
461
- color: var(--pc-tri-text);
462
- letter-spacing: -0.02em;
463
- transition: color 0.5s;
464
- }
465
-
466
- .dark .pregnancy-calculator-edd-date {
467
- color: var(--pc-tri-primary);
468
- }
469
-
470
- .pregnancy-calculator-edd-note {
471
- font-size: 0.72rem;
472
- color: #94a3b8;
473
- margin-top: 5px;
474
- font-style: italic;
475
- }
476
-
477
- .pregnancy-calculator-btn-cal {
478
- width: 100%;
479
- padding: 15px;
480
- border-radius: 16px;
481
- border: none;
482
- background: var(--pc-tri-accent);
483
- color: #fff;
484
- font-size: 0.82rem;
485
- font-weight: 800;
486
- cursor: pointer;
487
- letter-spacing: 0.06em;
488
- text-transform: uppercase;
489
- transition: all 0.25s;
490
- box-shadow: 0 4px 16px var(--pc-tri-glow);
491
- }
492
-
493
- .pregnancy-calculator-btn-cal:hover:not(:disabled) {
494
- transform: translateY(-2px);
495
- box-shadow: 0 8px 24px var(--pc-tri-glow);
496
- }
497
-
498
- .pregnancy-calculator-btn-cal:disabled {
499
- background: #e2e8f0;
500
- color: #94a3b8;
501
- box-shadow: none;
502
- cursor: default;
503
- }
504
-
505
- .dark .pregnancy-calculator-btn-cal:disabled {
506
- background: #1e2936;
507
- }
508
-
509
- .pregnancy-calculator-mp-empty {
510
- display: flex;
511
- flex-direction: column;
512
- align-items: center;
513
- justify-content: center;
514
- height: 100%;
515
- min-height: 18rem;
516
- gap: 0.75rem;
517
- text-align: center;
518
- }
519
-
520
- .pregnancy-calculator-mp-empty-dot {
521
- width: 3rem;
522
- height: 3rem;
523
- border-radius: 50%;
524
- background: var(--pc-tri-bg);
525
- border: 2px solid var(--pc-tri-primary);
526
- box-shadow: 0 0 0 6px var(--pc-tri-glow);
527
- }
528
-
529
- .pregnancy-calculator-mp-empty-title {
530
- font-size: 1.125rem;
531
- font-weight: 700;
532
- color: var(--pc-text);
533
- }
534
-
535
- .pregnancy-calculator-mp-empty-body {
536
- font-size: 0.875rem;
537
- color: var(--pc-text-muted);
538
- max-width: 22ch;
539
- line-height: 1.5;
540
- margin: 0;
541
- }
542
-
543
- @keyframes pc-fade-in {
544
- from {
545
- opacity: 0;
546
- transform: translateY(6px);
547
- }
548
- to {
549
- opacity: 1;
550
- transform: translateY(0);
551
- }
552
- }
553
-
554
- .pregnancy-calculator-mp-results {
555
- display: flex;
556
- flex-direction: column;
557
- gap: 1rem;
558
- }
559
-
560
- .pregnancy-calculator-mp-enter {
561
- animation: pc-fade-in 0.25s ease-out;
562
- }
563
-
564
- .pregnancy-calculator-mp-top-row {
565
- display: flex;
566
- align-items: center;
567
- justify-content: space-between;
568
- gap: 0.75rem;
569
- flex-wrap: wrap;
570
- }
571
-
572
- .pregnancy-calculator-mp-badge {
573
- display: inline-flex;
574
- align-items: center;
575
- padding: 0.375rem 0.875rem;
576
- border-radius: 2rem;
577
- background: var(--pc-tri-badge);
578
- color: var(--pc-tri-text);
579
- font-size: 0.875rem;
580
- font-weight: 700;
581
- border: 1px solid var(--pc-tri-primary);
582
- }
583
-
584
- .pregnancy-calculator-analogy-tabs {
585
- display: flex;
586
- gap: 0.25rem;
587
- background: var(--pc-bg-muted);
588
- padding: 0.25rem;
589
- border-radius: 0.5rem;
590
- border: 1px solid var(--pc-border);
591
- }
592
-
593
- .pregnancy-calculator-at-btn {
594
- padding: 0.25rem 0.625rem;
595
- border-radius: 0.375rem;
596
- border: none;
597
- background: transparent;
598
- color: var(--pc-text-muted);
599
- font-size: 0.75rem;
600
- font-weight: 500;
601
- cursor: pointer;
602
- transition: background 0.15s, color 0.15s;
603
- }
604
-
605
- .pregnancy-calculator-at-btn-active {
606
- background: var(--pc-bg);
607
- color: var(--pc-tri-accent);
608
- box-shadow: 0 1px 3px var(--pc-shadow);
609
- }
610
-
611
- .pregnancy-calculator-size-card {
612
- display: flex;
613
- align-items: baseline;
614
- justify-content: space-between;
615
- background: #f8fafc;
616
- border-radius: 20px;
617
- padding: 24px 28px;
618
- gap: 12px;
619
- }
620
-
621
- .dark .pregnancy-calculator-size-card {
622
- background: #1a2332;
623
- }
624
-
625
- .pregnancy-calculator-size-name {
626
- font-size: 1.6rem;
627
- font-weight: 300;
628
- font-style: italic;
629
- color: var(--pc-text);
630
- letter-spacing: -0.01em;
631
- }
632
-
633
- .dark .pregnancy-calculator-size-name {
634
- color: #f1f5f9;
635
- }
636
-
637
- .pregnancy-calculator-size-measure {
638
- font-size: 0.8rem;
639
- font-weight: 700;
640
- color: #94a3b8;
641
- text-transform: uppercase;
642
- letter-spacing: 0.08em;
643
- white-space: nowrap;
644
- }
645
-
646
- .pregnancy-calculator-info-stack {
647
- display: flex;
648
- flex-direction: column;
649
- gap: 0.75rem;
650
- }
651
-
652
- .pregnancy-calculator-info-block {
653
- background: #fff;
654
- border-radius: 16px;
655
- padding: 18px 20px;
656
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
657
- display: flex;
658
- flex-direction: column;
659
- }
660
-
661
- .dark .pregnancy-calculator-info-block {
662
- background: #1a2332;
663
- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
664
- }
665
-
666
- .pregnancy-calculator-info-key {
667
- font-size: 0.65rem;
668
- font-weight: 900;
669
- text-transform: uppercase;
670
- letter-spacing: 0.14em;
671
- color: var(--pc-tri-accent);
672
- margin-bottom: 7px;
673
- transition: color 0.5s;
674
- }
675
-
676
- .pregnancy-calculator-info-text {
677
- font-size: 0.92rem;
678
- color: var(--pc-text-muted);
679
- line-height: 1.75;
680
- margin: 0;
681
- font-weight: 500;
682
- }
683
-
684
- .pregnancy-calculator-wonder-line {
685
- font-size: 0.85rem;
686
- font-style: italic;
687
- font-weight: 600;
688
- color: var(--pc-tri-text);
689
- padding: 12px 16px;
690
- border-left: 3px solid var(--pc-tri-primary);
691
- background: var(--pc-tri-bg);
692
- border-radius: 0 12px 12px 0;
693
- line-height: 1.6;
694
- transition: background 0.5s, color 0.5s, border-color 0.5s;
695
- }
696
-
697
- .pregnancy-calculator-semaphore {
698
- display: grid;
699
- grid-template-columns: 1fr 1fr;
700
- gap: 0.75rem;
701
- }
702
-
703
- .pregnancy-calculator-sema {
704
- border-radius: 0.625rem;
705
- padding: 0.75rem;
706
- display: flex;
707
- flex-direction: column;
708
- gap: 0.5rem;
709
- }
710
-
711
- .pregnancy-calculator-sema-safe {
712
- background: var(--pc-safe-bg);
713
- border: 1px solid rgba(22, 163, 74, 0.2);
714
- }
715
-
716
- .pregnancy-calculator-sema-alert {
717
- background: var(--pc-alert-bg);
718
- border: 1px solid rgba(234, 88, 12, 0.2);
719
- }
720
-
721
- .pregnancy-calculator-sema-title {
722
- font-size: 0.6875rem;
723
- font-weight: 700;
724
- text-transform: uppercase;
725
- letter-spacing: 0.04em;
726
- }
727
-
728
- .pregnancy-calculator-sema-safe .pregnancy-calculator-sema-title {
729
- color: var(--pc-safe-title);
730
- }
731
-
732
- .pregnancy-calculator-sema-alert .pregnancy-calculator-sema-title {
733
- color: var(--pc-alert-title);
734
- }
735
-
736
- .pregnancy-calculator-sema-list {
737
- list-style: none;
738
- margin: 0;
739
- padding: 0;
740
- display: flex;
741
- flex-direction: column;
742
- gap: 0.25rem;
743
- }
744
-
745
- .pregnancy-calculator-sema-list li {
746
- font-size: 0.75rem;
747
- color: var(--pc-text-muted);
748
- padding-left: 1rem;
749
- position: relative;
750
- line-height: 1.4;
751
- }
752
-
753
- .pregnancy-calculator-sema-safe .pregnancy-calculator-sema-list li::before {
754
- content: 'v';
755
- position: absolute;
756
- left: 0;
757
- color: #22c55e;
758
- font-weight: 900;
759
- font-size: 0.7rem;
760
- }
761
-
762
- .pregnancy-calculator-sema-alert .pregnancy-calculator-sema-list li::before {
763
- content: '!';
764
- position: absolute;
765
- left: 0;
766
- color: #f97316;
767
- font-weight: 900;
768
- font-size: 0.7rem;
769
- }
770
-
771
- .pregnancy-calculator-mp-egg {
772
- display: flex;
773
- flex-direction: column;
774
- align-items: center;
775
- justify-content: center;
776
- height: 100%;
777
- min-height: 18rem;
778
- gap: 14px;
779
- padding: 48px 32px;
780
- text-align: center;
781
- animation: pc-fade-in 0.4s ease-out;
782
- }
783
-
784
- .pregnancy-calculator-egg-dot {
785
- width: 48px;
786
- height: 48px;
787
- border-radius: 50%;
788
- border: 2px dashed #f87171;
789
- background: #fef2f2;
790
- animation: pc-egg-spin 6s linear infinite;
791
- }
792
-
793
- .pregnancy-calculator-egg-dot[data-reason='too-old'] {
794
- border-color: #fb923c;
795
- background: #fff7ed;
796
- }
797
-
798
- @keyframes pc-egg-spin {
799
- from { transform: rotate(0deg); }
800
- to { transform: rotate(360deg); }
801
- }
802
-
803
- .pregnancy-calculator-egg-title {
804
- font-size: 1.2rem;
805
- font-weight: 800;
806
- color: var(--pc-text);
807
- letter-spacing: -0.02em;
808
- }
809
-
810
- .pregnancy-calculator-egg-body {
811
- font-size: 0.92rem;
812
- color: var(--pc-text-muted);
813
- max-width: 300px;
814
- line-height: 1.7;
815
- font-style: italic;
816
- margin: 0;
817
- }
818
-
819
- .pregnancy-calculator-tl-header {
820
- padding: 18px 18px 12px;
821
- font-size: 0.65rem;
822
- font-weight: 900;
823
- text-transform: uppercase;
824
- letter-spacing: 0.15em;
825
- color: #94a3b8;
826
- border-bottom: 1px solid var(--pc-border);
827
- flex-shrink: 0;
828
- }
829
-
830
- .pregnancy-calculator-tl-scroll {
831
- flex: 1;
832
- min-height: 0;
833
- overflow-y: auto;
834
- padding: 12px 14px 20px;
835
- scrollbar-width: thin;
836
- scrollbar-color: #e2e8f0 transparent;
837
- }
838
-
839
- .pregnancy-calculator-tl-scroll::-webkit-scrollbar {
840
- width: 3px;
841
- }
842
-
843
- .pregnancy-calculator-tl-scroll::-webkit-scrollbar-thumb {
844
- background: #e2e8f0;
845
- border-radius: 2px;
846
- }
847
-
848
- .pregnancy-calculator-tl-row {
849
- display: flex;
850
- align-items: flex-start;
851
- gap: 0.5rem;
852
- padding: 0.25rem 0.75rem;
853
- cursor: default;
854
- transition: background 0.1s;
855
- }
856
-
857
- .pregnancy-calculator-tl-row-current {
858
- background: var(--pc-tri-bg);
859
- }
860
-
861
- .pregnancy-calculator-tl-line-col {
862
- display: flex;
863
- flex-direction: column;
864
- align-items: center;
865
- flex-shrink: 0;
866
- width: 1rem;
867
- padding-top: 0.2rem;
868
- }
869
-
870
- .pregnancy-calculator-tl-dot {
871
- width: 0.5rem;
872
- height: 0.5rem;
873
- border-radius: 50%;
874
- background: var(--pc-border);
875
- flex-shrink: 0;
876
- transition: background 0.15s;
877
- }
878
-
879
- .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-dot {
880
- background: var(--pc-tri-accent);
881
- }
882
-
883
- .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-dot {
884
- background: var(--pc-tri-accent);
885
- box-shadow: 0 0 0 3px var(--pc-tri-glow);
886
- width: 0.625rem;
887
- height: 0.625rem;
888
- }
889
-
890
- .pregnancy-calculator-tl-line {
891
- width: 2px;
892
- flex: 1;
893
- min-height: 1.25rem;
894
- background: var(--pc-border);
895
- margin-top: 2px;
896
- }
897
-
898
- .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-line {
899
- background: var(--pc-tri-primary);
900
- }
901
-
902
- .pregnancy-calculator-tl-info {
903
- display: flex;
904
- align-items: baseline;
905
- gap: 0.375rem;
906
- min-width: 0;
907
- }
908
-
909
- .pregnancy-calculator-tl-num {
910
- font-size: 0.75rem;
911
- font-weight: 700;
912
- color: var(--pc-text-dim);
913
- flex-shrink: 0;
914
- }
915
-
916
- .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-num {
917
- color: var(--pc-tri-accent);
918
- }
919
-
920
- .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-num {
921
- color: var(--pc-tri-accent);
922
- font-size: 0.875rem;
923
- }
924
-
925
- .pregnancy-calculator-tl-label {
926
- font-size: 0.6875rem;
927
- color: var(--pc-text-dim);
928
- white-space: nowrap;
929
- overflow: hidden;
930
- text-overflow: ellipsis;
931
- }
932
-
933
- .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-label {
934
- color: var(--pc-tri-text);
935
- font-weight: 600;
936
- font-size: 0.75rem;
937
- }
938
-
939
- @media (max-width: 900px) {
940
- .pregnancy-calculator-main {
941
- grid-template-columns: 1fr;
942
- }
943
-
944
- .pregnancy-calculator-center {
945
- border-right: none;
946
- border-top: 1px solid var(--pc-border);
947
- }
948
-
949
- .pregnancy-calculator-right {
950
- border-top: 1px solid var(--pc-border);
951
- height: 16rem;
952
- }
953
-
954
- .pregnancy-calculator-tl-inner {
955
- position: static;
956
- height: 100%;
957
- }
958
-
959
- .pregnancy-calculator-tl-scroll {
960
- display: flex;
961
- flex-direction: row;
962
- overflow-x: auto;
963
- overflow-y: hidden;
964
- padding: 0.5rem;
965
- gap: 0.25rem;
966
- }
967
-
968
- .pregnancy-calculator-tl-row {
969
- flex-direction: column;
970
- align-items: center;
971
- padding: 0.5rem 0.375rem;
972
- min-width: 3rem;
973
- }
974
-
975
- .pregnancy-calculator-tl-line-col {
976
- flex-direction: row;
977
- width: auto;
978
- padding-top: 0;
979
- }
980
-
981
- .pregnancy-calculator-tl-line {
982
- width: 1.25rem;
983
- height: 2px;
984
- min-height: 0;
985
- margin-top: 0;
986
- margin-left: 2px;
987
- }
988
-
989
- .pregnancy-calculator-tl-info {
990
- flex-direction: column;
991
- align-items: center;
992
- gap: 0.125rem;
993
- }
994
-
995
- .pregnancy-calculator-tl-label {
996
- display: none;
997
- }
998
-
999
- .pregnancy-calculator-semaphore {
1000
- grid-template-columns: 1fr;
1001
- }
1002
-
1003
- .pregnancy-calculator-left {
1004
- border-right: none;
1005
- border-bottom: 1px solid var(--pc-border);
1006
- }
1007
- }
1008
-
1009
- @media (max-width: 600px) {
1010
- .pregnancy-calculator-header {
1011
- flex-direction: column;
1012
- align-items: flex-start;
1013
- }
1014
-
1015
- .pregnancy-calculator-method-group {
1016
- width: 100%;
1017
- justify-content: stretch;
1018
- }
1019
-
1020
- .pregnancy-calculator-method-btn {
1021
- flex: 1;
1022
- text-align: center;
1023
- }
1024
- }