robindoc 0.0.0-experimental-95c1bd7 → 0.0.0-experimental-2d30cfd

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 (2) hide show
  1. package/lib/styles.css +573 -573
  2. package/package.json +1 -1
package/lib/styles.css CHANGED
@@ -1,93 +1,4 @@
1
- .r-header {
2
- position: sticky;
3
- background-color: var(--r-main-50);
4
- top: 0;
5
- border-bottom: 1px solid var(--r-main-300);
6
- height: 60px;
7
- z-index: 1000;
8
- box-sizing: border-box;
9
- }
10
-
11
- .r-header-body {
12
- height: 100%;
13
- display: flex;
14
- justify-content: space-between;
15
- align-items: center;
16
- gap: 24px;
17
- box-sizing: border-box;
18
- }
19
-
20
- .r-header-logo {
21
- display: block;
22
- margin-right: 24px;
23
- color: var(--r-main-700);
24
- transition: color 0.2s;
25
- box-sizing: border-box;
26
- }
27
- .r-header-logo:hover, .r-header-logo:focus {
28
- color: var(--r-main-950);
29
- }
30
-
31
- .r-header-nav {
32
- display: flex;
33
- flex-direction: column;
34
- gap: 12px 16px;
35
- }
36
- @media screen and (width >= 1024px) {
37
- .r-header-nav {
38
- flex-direction: row;
39
- }
40
- }
41
-
42
- .r-header-link {
43
- color: var(--r-main-600);
44
- text-decoration: none;
45
- padding: 4px 0;
46
- transition: color 0.2s;
47
- box-sizing: border-box;
48
- }
49
- .r-header-link:hover, .r-header-link:focus-visible {
50
- color: var(--r-main-950);
51
- }
52
-
53
- .r-header-link._target {
54
- color: var(--r-primary-800);
55
- }
56
- .r-header-link._target:hover, .r-header-link._target:focus-visible {
57
- color: var(--r-primary-700);
58
- }
59
-
60
- .r-header-actions {
61
- display: flex;
62
- flex-direction: column-reverse;
63
- gap: 16px;
64
- align-items: stretch;
65
- }
66
- @media screen and (width >= 1024px) {
67
- .r-header-actions {
68
- flex-direction: row;
69
- align-items: center;
70
- gap: 28px;
71
- }
72
- }
73
-
74
- .r-header-sections {
75
- display: flex;
76
- align-items: center;
77
- gap: 12px;
78
- }
79
- @media screen and (width < 768px) {
80
- .r-header-sections .r-dropdown {
81
- flex: 1;
82
- }
83
- }
84
- @media screen and (width < 768px) {
85
- .r-header-sections .r-dropdown-drop {
86
- max-width: none;
87
- width: 100%;
88
- left: 0;
89
- }
90
- }.r-footer {
1
+ .r-footer {
91
2
  border-top: 1px solid var(--r-main-300);
92
3
  padding-top: 16px;
93
4
  padding-bottom: 16px;
@@ -399,416 +310,144 @@
399
310
  top: 8px;
400
311
  left: 12px;
401
312
  z-index: 1001;
402
- }.r-keylink.keylink-to-navigation:focus {
403
- margin-top: -40px;
404
- }.r-header-menu {
313
+ }.r-header {
314
+ position: sticky;
315
+ background-color: var(--r-main-50);
316
+ top: 0;
317
+ border-bottom: 1px solid var(--r-main-300);
318
+ height: 60px;
319
+ z-index: 1000;
320
+ box-sizing: border-box;
321
+ }
322
+
323
+ .r-header-body {
324
+ height: 100%;
405
325
  display: flex;
406
- justify-content: flex-end;
407
- order: 1;
326
+ justify-content: space-between;
327
+ align-items: center;
328
+ gap: 24px;
329
+ box-sizing: border-box;
330
+ }
331
+
332
+ .r-header-logo {
333
+ display: block;
334
+ margin-right: 24px;
335
+ color: var(--r-main-700);
336
+ transition: color 0.2s;
337
+ box-sizing: border-box;
338
+ }
339
+ .r-header-logo:hover, .r-header-logo:focus {
340
+ color: var(--r-main-950);
341
+ }
342
+
343
+ .r-header-nav {
344
+ display: flex;
345
+ flex-direction: column;
346
+ gap: 12px 16px;
408
347
  }
409
348
  @media screen and (width >= 1024px) {
410
- .r-header-menu {
411
- flex: 1;
412
- order: unset;
349
+ .r-header-nav {
350
+ flex-direction: row;
413
351
  }
414
352
  }
415
353
 
416
- .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
417
- display: flex;
354
+ .r-header-link {
355
+ color: var(--r-main-600);
356
+ text-decoration: none;
357
+ padding: 4px 0;
358
+ transition: color 0.2s;
359
+ box-sizing: border-box;
360
+ }
361
+ .r-header-link:hover, .r-header-link:focus-visible {
362
+ color: var(--r-main-950);
418
363
  }
419
364
 
420
- .r-header-responsive {
421
- display: none;
422
- justify-content: flex-end;
423
- flex: 1;
424
- gap: 24px;
425
- z-index: 1;
365
+ .r-header-link._target {
366
+ color: var(--r-primary-800);
426
367
  }
427
- @media screen and (width < 1024px) {
428
- .r-header-responsive {
429
- flex-direction: column-reverse;
430
- padding: 12px;
431
- background-color: var(--r-main-50);
432
- position: fixed;
433
- top: 60px;
434
- right: 0;
435
- bottom: 0;
436
- left: 0;
437
- }
368
+ .r-header-link._target:hover, .r-header-link._target:focus-visible {
369
+ color: var(--r-primary-700);
370
+ }
371
+
372
+ .r-header-actions {
373
+ display: flex;
374
+ flex-direction: column-reverse;
375
+ gap: 16px;
376
+ align-items: stretch;
438
377
  }
439
378
  @media screen and (width >= 1024px) {
440
- .r-header-responsive {
441
- display: flex;
442
- justify-content: space-between;
379
+ .r-header-actions {
380
+ flex-direction: row;
443
381
  align-items: center;
382
+ gap: 28px;
444
383
  }
445
384
  }
446
385
 
447
- .r-header-burger {
448
- position: relative;
386
+ .r-header-sections {
449
387
  display: flex;
450
388
  align-items: center;
451
- justify-content: center;
452
- height: 32px;
453
- width: 32px;
454
- cursor: pointer;
455
- background: none;
456
- border: none;
389
+ gap: 12px;
390
+ }
391
+ @media screen and (width < 768px) {
392
+ .r-header-sections .r-dropdown {
393
+ flex: 1;
394
+ }
395
+ }
396
+ @media screen and (width < 768px) {
397
+ .r-header-sections .r-dropdown-drop {
398
+ max-width: none;
399
+ width: 100%;
400
+ left: 0;
401
+ }
402
+ }.r-keylink.keylink-to-navigation:focus {
403
+ margin-top: -40px;
404
+ }.r-sidebar {
405
+ grid-area: sidebar;
457
406
  box-sizing: border-box;
458
407
  }
459
- @media screen and (width >= 1024px) {
460
- .r-header-burger {
461
- display: none;
408
+ @media screen and (width < 768px) {
409
+ .r-sidebar {
410
+ position: sticky;
411
+ width: calc(100% + 24px);
412
+ top: var(--r-header-height);
413
+ left: 0;
414
+ margin: 0 -12px;
415
+ background-color: var(--r-main-50);
416
+ border-bottom: 1px solid var(--r-main-200);
417
+ z-index: 10;
418
+ opacity: 0.98;
419
+ padding: 0;
420
+ overflow: auto;
462
421
  }
463
422
  }
464
423
 
465
- .r-burger-line {
466
- display: block;
467
- width: 20px;
468
- height: 1.5px;
469
- position: absolute;
470
- background-color: var(--r-main-700);
471
- margin: auto;
472
- transition: transform 0.3s;
473
- box-sizing: border-box;
424
+ .r-sidebar-top-mock {
425
+ grid-row-start: 1;
426
+ grid-column-start: 1;
474
427
  }
475
428
 
476
- .r-burger-line._top {
477
- transform: translateY(-3px);
429
+ @media screen and (width < 768px) {
430
+ .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
431
+ display: none;
432
+ }
478
433
  }
479
434
 
480
- .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
481
- transform: translateY(0) rotate(45deg);
482
- margin-top: 0;
435
+ .r-sidebar-nav {
436
+ box-sizing: border-box;
437
+ }
438
+ @media screen and (width < 768px) {
439
+ .r-sidebar-nav {
440
+ overflow: auto;
441
+ max-height: calc(100dvh - var(--r-header-height) - 41px);
442
+ }
483
443
  }
484
444
 
485
- .r-burger-line._bottom {
486
- transform: translateY(3px);
445
+ .r-sidebar-drop {
446
+ margin-top: -4px;
447
+ padding-top: 4px;
487
448
  }
488
449
 
489
- .r-header-input:checked ~ .r-header-burger .r-burger-line._bottom {
490
- transform: translateY(0) rotate(-45deg);
491
- margin-top: 0;
492
- }.r-search-btn {
493
- position: relative;
494
- border-radius: 6px;
495
- background-color: var(--r-main-100);
496
- color: var(--r-main-600);
497
- padding: 8px 20px;
498
- border: 1px solid var(--r-main-200);
499
- width: 100%;
500
- text-align: left;
501
- cursor: text;
502
- box-sizing: border-box;
503
- }
504
- @media screen and (width >= 768px) {
505
- .r-search-btn {
506
- width: 220px;
507
- padding: 8px 96px 8px 20px;
508
- }
509
- }
510
- .r-search-btn:hover {
511
- border-color: var(--r-main-600);
512
- }
513
- .r-search-btn:hover .r-search-kbd {
514
- color: var(--r-main-950);
515
- }
516
-
517
- .r-search-title {
518
- display: block;
519
- overflow: hidden;
520
- text-overflow: ellipsis;
521
- white-space: nowrap;
522
- }
523
-
524
- .r-search-kbd {
525
- display: none;
526
- position: absolute;
527
- right: 6px;
528
- top: 50%;
529
- transform: translateY(-50%);
530
- }
531
- @media screen and (width >= 768px) {
532
- .r-search-kbd {
533
- display: flex;
534
- }
535
- }
536
-
537
- .r-search-popup-header {
538
- position: relative;
539
- border-bottom: 1px solid var(--r-main-200);
540
- }
541
-
542
- .r-search-input {
543
- border-radius: 12px 12px 0 0;
544
- background-color: var(--r-main-50);
545
- padding: 16px 20px;
546
- border: none;
547
- border-bottom: 2px solid var(--r-main-300);
548
- width: 100%;
549
- font-size: 16px;
550
- box-sizing: border-box;
551
- }
552
- @media screen and (width >= 768px) {
553
- .r-search-input {
554
- padding: 16px 72px 16px 20px;
555
- }
556
- }
557
- .r-search-input:hover {
558
- border-bottom-color: var(--r-primary-800);
559
- }
560
- .r-search-input:focus {
561
- outline: none;
562
- border-bottom-color: var(--r-primary-600);
563
- }
564
- .r-search-input::placeholder {
565
- color: var(--r-main-500);
566
- }
567
-
568
- .r-search-popup-kbd {
569
- color: var(--r-main-600);
570
- right: 20px;
571
- }
572
-
573
- .r-search-results {
574
- padding: 2px 8px 8px;
575
- max-height: min(400px, 100dvh - 200px);
576
- overflow-y: auto;
577
- list-style: none;
578
- scrollbar-width: thin;
579
- scrollbar-color: var(--r-main-200) transparent;
580
- margin: 0;
581
- box-sizing: border-box;
582
- }
583
-
584
- .r-search-item {
585
- display: block;
586
- text-decoration: none;
587
- color: var(--r-main-700);
588
- padding: 8px 12px;
589
- border: 1px solid var(--r-main-100);
590
- border-radius: 6px;
591
- width: 100%;
592
- margin-top: 6px;
593
- box-sizing: border-box;
594
- }
595
- .r-search-item:hover, .r-search-item:focus {
596
- color: var(--r-main-950);
597
- background-color: var(--r-main-100);
598
- border-color: var(--r-main-200);
599
- }
600
-
601
- .r-search-item-title {
602
- margin: 0;
603
- }
604
-
605
- .r-search-item-desc {
606
- font-size: 14px;
607
- color: var(--r-main-600);
608
- margin: 12px 0 0;
609
- }.r-dropdown {
610
- position: relative;
611
- color: var(--r-main-600);
612
- transition: color 0.2s 0.1s;
613
- }
614
- .r-dropdown:hover, .r-dropdown:focus-within {
615
- color: var(--r-main-950);
616
- }
617
- .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
618
- visibility: visible;
619
- pointer-events: all;
620
- transform: translateY(20px);
621
- opacity: 1;
622
- }
623
- .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
624
- transform: rotate(180deg);
625
- }
626
-
627
- .r-dropdown-summary {
628
- display: flex;
629
- justify-content: space-between;
630
- align-items: center;
631
- width: 100%;
632
- position: relative;
633
- color: inherit;
634
- cursor: pointer;
635
- padding: 10px 4px;
636
- font-size: 16px;
637
- border: 0;
638
- background: none;
639
- z-index: 1;
640
- box-sizing: border-box;
641
- }
642
-
643
- .r-dropdown-chevron {
644
- display: block;
645
- margin-left: 6px;
646
- transition: transform 0.3s 0.1s;
647
- box-sizing: border-box;
648
- }
649
-
650
- .r-dropdown-drop {
651
- list-style: none;
652
- position: absolute;
653
- top: 16px;
654
- left: -12px;
655
- visibility: hidden;
656
- pointer-events: none;
657
- opacity: 0;
658
- transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
659
- background-color: var(--r-main-50);
660
- border: 1px solid var(--r-main-100);
661
- border-radius: 8px;
662
- margin: 0;
663
- padding: 2px 6px;
664
- min-width: 120px;
665
- max-width: 180px;
666
- box-sizing: border-box;
667
- }
668
-
669
- .r-dropdown-link {
670
- display: block;
671
- width: 100%;
672
- text-decoration: none;
673
- color: var(--r-main-700);
674
- padding: 4px 8px;
675
- margin-top: 4px;
676
- margin-bottom: 4px;
677
- border-radius: 4px;
678
- transition: background-color 0.2s;
679
- box-sizing: border-box;
680
- }
681
- .r-dropdown-link:hover {
682
- color: var(--r-main-900);
683
- background-color: var(--r-main-100);
684
- }
685
-
686
- .r-dropdown-link._active {
687
- color: var(--r-primary-700);
688
- }.r-header-social {
689
- display: flex;
690
- flex: 1;
691
- justify-content: flex-end;
692
- }
693
- @media screen and (width >= 1024px) {
694
- .r-header-social {
695
- flex: none;
696
- justify-content: unset;
697
- }
698
- }
699
-
700
- .r-header-social-git {
701
- color: var(--r-main-700);
702
- transition: color 0.2s;
703
- }
704
- .r-header-social-git:hover, .r-header-social-git:focus {
705
- color: var(--r-main-950);
706
- }.r-container {
707
- max-width: 1180px;
708
- padding-right: 12px;
709
- padding-left: 12px;
710
- margin-right: auto;
711
- margin-left: auto;
712
- box-sizing: border-box;
713
- }.r-article {
714
- padding: 20px 0 40px;
715
- grid-area: content;
716
- }
717
- @media screen and (width >= 1180px) {
718
- .r-article {
719
- padding: 32px 0 40px;
720
- }
721
- }
722
- .r-article > *:first-child {
723
- margin-top: 0;
724
- }
725
- .r-article > *:last-child {
726
- margin-bottom: 0;
727
- }
728
-
729
- .r-checkbox {
730
- cursor: pointer;
731
- width: 20px;
732
- height: 20px;
733
- margin: 4px;
734
- vertical-align: middle;
735
- box-sizing: border-box;
736
- }
737
-
738
- .r-label {
739
- cursor: pointer;
740
- }
741
-
742
- .r-task-ol,
743
- .r-task-ul {
744
- list-style: none;
745
- }
746
-
747
- .r-task-label {
748
- display: block;
749
- width: 100%;
750
- padding-top: 2px;
751
- padding-bottom: 2px;
752
- box-sizing: border-box;
753
- }
754
- .r-task-label:hover .r-checkbox {
755
- filter: brightness(0.8);
756
- }
757
-
758
- .r-task-li.r-task-li {
759
- margin-block-start: 2px;
760
- margin-block-end: 2px;
761
- }
762
-
763
- .r-label-text {
764
- vertical-align: middle;
765
- }.r-sidebar {
766
- grid-area: sidebar;
767
- box-sizing: border-box;
768
- }
769
- @media screen and (width < 768px) {
770
- .r-sidebar {
771
- position: sticky;
772
- width: calc(100% + 24px);
773
- top: var(--r-header-height);
774
- left: 0;
775
- margin: 0 -12px;
776
- background-color: var(--r-main-50);
777
- border-bottom: 1px solid var(--r-main-200);
778
- z-index: 10;
779
- opacity: 0.98;
780
- padding: 0;
781
- overflow: auto;
782
- }
783
- }
784
-
785
- .r-sidebar-top-mock {
786
- grid-row-start: 1;
787
- grid-column-start: 1;
788
- }
789
-
790
- @media screen and (width < 768px) {
791
- .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
792
- display: none;
793
- }
794
- }
795
-
796
- .r-sidebar-nav {
797
- box-sizing: border-box;
798
- }
799
- @media screen and (width < 768px) {
800
- .r-sidebar-nav {
801
- overflow: auto;
802
- max-height: calc(100dvh - var(--r-header-height) - 41px);
803
- }
804
- }
805
-
806
- .r-sidebar-drop {
807
- margin-top: -4px;
808
- padding-top: 4px;
809
- }
810
-
811
- .r-sidebar-sublist {
450
+ .r-sidebar-sublist {
812
451
  position: relative;
813
452
  padding-top: 2px;
814
453
  }
@@ -1034,6 +673,65 @@
1034
673
 
1035
674
  .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
1036
675
  transform: rotate(90deg);
676
+ }.r-article {
677
+ padding: 20px 0 40px;
678
+ grid-area: content;
679
+ }
680
+ @media screen and (width >= 1180px) {
681
+ .r-article {
682
+ padding: 32px 0 40px;
683
+ }
684
+ }
685
+ .r-article > *:first-child {
686
+ margin-top: 0;
687
+ }
688
+ .r-article > *:last-child {
689
+ margin-bottom: 0;
690
+ }
691
+
692
+ .r-checkbox {
693
+ cursor: pointer;
694
+ width: 20px;
695
+ height: 20px;
696
+ margin: 4px;
697
+ vertical-align: middle;
698
+ box-sizing: border-box;
699
+ }
700
+
701
+ .r-label {
702
+ cursor: pointer;
703
+ }
704
+
705
+ .r-task-ol,
706
+ .r-task-ul {
707
+ list-style: none;
708
+ }
709
+
710
+ .r-task-label {
711
+ display: block;
712
+ width: 100%;
713
+ padding-top: 2px;
714
+ padding-bottom: 2px;
715
+ box-sizing: border-box;
716
+ }
717
+ .r-task-label:hover .r-checkbox {
718
+ filter: brightness(0.8);
719
+ }
720
+
721
+ .r-task-li.r-task-li {
722
+ margin-block-start: 2px;
723
+ margin-block-end: 2px;
724
+ }
725
+
726
+ .r-label-text {
727
+ vertical-align: middle;
728
+ }.r-container {
729
+ max-width: 1180px;
730
+ padding-right: 12px;
731
+ padding-left: 12px;
732
+ margin-right: auto;
733
+ margin-left: auto;
734
+ box-sizing: border-box;
1037
735
  }.r-theme-switcher {
1038
736
  position: relative;
1039
737
  display: flex;
@@ -1125,39 +823,308 @@
1125
823
  user-select: none;
1126
824
  pointer-events: none;
1127
825
  box-sizing: border-box;
1128
- }.r-git-logo {
826
+ }.r-header-menu {
827
+ display: flex;
828
+ justify-content: flex-end;
829
+ order: 1;
830
+ }
831
+ @media screen and (width >= 1024px) {
832
+ .r-header-menu {
833
+ flex: 1;
834
+ order: unset;
835
+ }
836
+ }
837
+
838
+ .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
839
+ display: flex;
840
+ }
841
+
842
+ .r-header-responsive {
843
+ display: none;
844
+ justify-content: flex-end;
845
+ flex: 1;
846
+ gap: 24px;
847
+ z-index: 1;
848
+ }
849
+ @media screen and (width < 1024px) {
850
+ .r-header-responsive {
851
+ flex-direction: column-reverse;
852
+ padding: 12px;
853
+ background-color: var(--r-main-50);
854
+ position: fixed;
855
+ top: 60px;
856
+ right: 0;
857
+ bottom: 0;
858
+ left: 0;
859
+ }
860
+ }
861
+ @media screen and (width >= 1024px) {
862
+ .r-header-responsive {
863
+ display: flex;
864
+ justify-content: space-between;
865
+ align-items: center;
866
+ }
867
+ }
868
+
869
+ .r-header-burger {
870
+ position: relative;
871
+ display: flex;
872
+ align-items: center;
873
+ justify-content: center;
874
+ height: 32px;
875
+ width: 32px;
876
+ cursor: pointer;
877
+ background: none;
878
+ border: none;
879
+ box-sizing: border-box;
880
+ }
881
+ @media screen and (width >= 1024px) {
882
+ .r-header-burger {
883
+ display: none;
884
+ }
885
+ }
886
+
887
+ .r-burger-line {
1129
888
  display: block;
1130
- }.r-external-mark {
889
+ width: 20px;
890
+ height: 1.5px;
891
+ position: absolute;
892
+ background-color: var(--r-main-700);
893
+ margin: auto;
894
+ transition: transform 0.3s;
895
+ box-sizing: border-box;
896
+ }
897
+
898
+ .r-burger-line._top {
899
+ transform: translateY(-3px);
900
+ }
901
+
902
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
903
+ transform: translateY(0) rotate(45deg);
904
+ margin-top: 0;
905
+ }
906
+
907
+ .r-burger-line._bottom {
908
+ transform: translateY(3px);
909
+ }
910
+
911
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._bottom {
912
+ transform: translateY(0) rotate(-45deg);
913
+ margin-top: 0;
914
+ }.r-search-btn {
1131
915
  position: relative;
1132
- vertical-align: text-top;
1133
- display: inline-block;
1134
- margin-left: -4px;
1135
- margin-right: 2px;
1136
- width: 6px;
1137
- height: 6px;
916
+ border-radius: 6px;
917
+ background-color: var(--r-main-100);
918
+ color: var(--r-main-600);
919
+ padding: 8px 20px;
920
+ border: 1px solid var(--r-main-200);
921
+ width: 100%;
922
+ text-align: left;
923
+ cursor: text;
924
+ box-sizing: border-box;
925
+ }
926
+ @media screen and (width >= 768px) {
927
+ .r-search-btn {
928
+ width: 220px;
929
+ padding: 8px 96px 8px 20px;
930
+ }
931
+ }
932
+ .r-search-btn:hover {
933
+ border-color: var(--r-main-600);
934
+ }
935
+ .r-search-btn:hover .r-search-kbd {
936
+ color: var(--r-main-950);
937
+ }
938
+
939
+ .r-search-title {
940
+ display: block;
941
+ overflow: hidden;
942
+ text-overflow: ellipsis;
943
+ white-space: nowrap;
944
+ }
945
+
946
+ .r-search-kbd {
947
+ display: none;
948
+ position: absolute;
949
+ right: 6px;
950
+ top: 50%;
951
+ transform: translateY(-50%);
952
+ }
953
+ @media screen and (width >= 768px) {
954
+ .r-search-kbd {
955
+ display: flex;
956
+ }
957
+ }
958
+
959
+ .r-search-popup-header {
960
+ position: relative;
961
+ border-bottom: 1px solid var(--r-main-200);
962
+ }
963
+
964
+ .r-search-input {
965
+ border-radius: 12px 12px 0 0;
966
+ background-color: var(--r-main-50);
967
+ padding: 16px 20px;
968
+ border: none;
969
+ border-bottom: 2px solid var(--r-main-300);
970
+ width: 100%;
971
+ font-size: 16px;
972
+ box-sizing: border-box;
973
+ }
974
+ @media screen and (width >= 768px) {
975
+ .r-search-input {
976
+ padding: 16px 72px 16px 20px;
977
+ }
978
+ }
979
+ .r-search-input:hover {
980
+ border-bottom-color: var(--r-primary-800);
981
+ }
982
+ .r-search-input:focus {
983
+ outline: none;
984
+ border-bottom-color: var(--r-primary-600);
985
+ }
986
+ .r-search-input::placeholder {
987
+ color: var(--r-main-500);
988
+ }
989
+
990
+ .r-search-popup-kbd {
991
+ color: var(--r-main-600);
992
+ right: 20px;
993
+ }
994
+
995
+ .r-search-results {
996
+ padding: 2px 8px 8px;
997
+ max-height: min(400px, 100dvh - 200px);
998
+ overflow-y: auto;
999
+ list-style: none;
1000
+ scrollbar-width: thin;
1001
+ scrollbar-color: var(--r-main-200) transparent;
1002
+ margin: 0;
1003
+ box-sizing: border-box;
1004
+ }
1005
+
1006
+ .r-search-item {
1007
+ display: block;
1008
+ text-decoration: none;
1009
+ color: var(--r-main-700);
1010
+ padding: 8px 12px;
1011
+ border: 1px solid var(--r-main-100);
1012
+ border-radius: 6px;
1013
+ width: 100%;
1014
+ margin-top: 6px;
1015
+ box-sizing: border-box;
1016
+ }
1017
+ .r-search-item:hover, .r-search-item:focus {
1018
+ color: var(--r-main-950);
1019
+ background-color: var(--r-main-100);
1020
+ border-color: var(--r-main-200);
1021
+ }
1022
+
1023
+ .r-search-item-title {
1024
+ margin: 0;
1025
+ }
1026
+
1027
+ .r-search-item-desc {
1028
+ font-size: 14px;
1029
+ color: var(--r-main-600);
1030
+ margin: 12px 0 0;
1031
+ }.r-dropdown {
1032
+ position: relative;
1033
+ color: var(--r-main-600);
1034
+ transition: color 0.2s 0.1s;
1035
+ }
1036
+ .r-dropdown:hover, .r-dropdown:focus-within {
1037
+ color: var(--r-main-950);
1038
+ }
1039
+ .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
1040
+ visibility: visible;
1041
+ pointer-events: all;
1042
+ transform: translateY(20px);
1043
+ opacity: 1;
1044
+ }
1045
+ .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
1046
+ transform: rotate(180deg);
1047
+ }
1048
+
1049
+ .r-dropdown-summary {
1050
+ display: flex;
1051
+ justify-content: space-between;
1052
+ align-items: center;
1053
+ width: 100%;
1054
+ position: relative;
1055
+ color: inherit;
1056
+ cursor: pointer;
1057
+ padding: 10px 4px;
1058
+ font-size: 16px;
1059
+ border: 0;
1060
+ background: none;
1061
+ z-index: 1;
1062
+ box-sizing: border-box;
1063
+ }
1064
+
1065
+ .r-dropdown-chevron {
1066
+ display: block;
1067
+ margin-left: 6px;
1068
+ transition: transform 0.3s 0.1s;
1069
+ box-sizing: border-box;
1070
+ }
1071
+
1072
+ .r-dropdown-drop {
1073
+ list-style: none;
1074
+ position: absolute;
1075
+ top: 16px;
1076
+ left: -12px;
1077
+ visibility: hidden;
1078
+ pointer-events: none;
1079
+ opacity: 0;
1080
+ transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
1081
+ background-color: var(--r-main-50);
1082
+ border: 1px solid var(--r-main-100);
1083
+ border-radius: 8px;
1084
+ margin: 0;
1085
+ padding: 2px 6px;
1086
+ min-width: 120px;
1087
+ max-width: 180px;
1138
1088
  box-sizing: border-box;
1139
1089
  }
1140
- .r-external-mark::after {
1141
- content: "";
1142
- position: absolute;
1143
- top: 0;
1144
- right: 0;
1090
+
1091
+ .r-dropdown-link {
1092
+ display: block;
1145
1093
  width: 100%;
1146
- height: 100%;
1147
- border-top: 1px solid currentColor;
1148
- border-right: 1px solid currentColor;
1094
+ text-decoration: none;
1095
+ color: var(--r-main-700);
1096
+ padding: 4px 8px;
1097
+ margin-top: 4px;
1098
+ margin-bottom: 4px;
1099
+ border-radius: 4px;
1100
+ transition: background-color 0.2s;
1149
1101
  box-sizing: border-box;
1150
1102
  }
1151
- .r-external-mark::before {
1152
- content: "";
1153
- position: absolute;
1154
- top: 0;
1155
- right: 0;
1156
- width: 3px;
1157
- height: 3px;
1158
- background-color: currentColor;
1159
- border-radius: 0 0 0 4px;
1160
- box-sizing: border-box;
1103
+ .r-dropdown-link:hover {
1104
+ color: var(--r-main-900);
1105
+ background-color: var(--r-main-100);
1106
+ }
1107
+
1108
+ .r-dropdown-link._active {
1109
+ color: var(--r-primary-700);
1110
+ }.r-header-social {
1111
+ display: flex;
1112
+ flex: 1;
1113
+ justify-content: flex-end;
1114
+ }
1115
+ @media screen and (width >= 1024px) {
1116
+ .r-header-social {
1117
+ flex: none;
1118
+ justify-content: unset;
1119
+ }
1120
+ }
1121
+
1122
+ .r-header-social-git {
1123
+ color: var(--r-main-700);
1124
+ transition: color 0.2s;
1125
+ }
1126
+ .r-header-social-git:hover, .r-header-social-git:focus {
1127
+ color: var(--r-main-950);
1161
1128
  }.r-contents {
1162
1129
  grid-area: contents;
1163
1130
  }
@@ -1507,58 +1474,39 @@
1507
1474
  }.r-last-modified {
1508
1475
  color: var(--r-main-700);
1509
1476
  margin-block-start: 16px;
1510
- }.r-modal {
1511
- position: fixed;
1512
- left: 0;
1513
- bottom: 0;
1514
- width: 100%;
1515
- background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
1516
- border: 2px solid var(--r-main-200);
1517
- border-radius: 12px 12px 0 0;
1518
- opacity: 0;
1519
- visibility: hidden;
1520
- pointer-events: none;
1521
- transition: opacity 0.2s 0.1s, transform 0.2s 0.1s, visibility 0.01s 0.2s 0.1s;
1522
- z-index: 1000;
1477
+ }.r-external-mark {
1478
+ position: relative;
1479
+ vertical-align: text-top;
1480
+ display: inline-block;
1481
+ margin-left: -4px;
1482
+ margin-right: 2px;
1483
+ width: 6px;
1484
+ height: 6px;
1523
1485
  box-sizing: border-box;
1524
1486
  }
1525
- @media screen and (width >= 768px) {
1526
- .r-modal {
1527
- top: 10%;
1528
- left: 50%;
1529
- bottom: auto;
1530
- transform: translateX(-50%) scale(0.95);
1531
- max-width: 480px;
1532
- border-radius: 12px;
1533
- }
1534
- }
1535
-
1536
- .r-modal._visible {
1537
- opacity: 1;
1538
- visibility: visible;
1539
- transition: opacity 0.2s 0.1s, transform 0.2s 0.1s;
1540
- pointer-events: all;
1541
- }
1542
- @media screen and (width >= 768px) {
1543
- .r-modal._visible {
1544
- transform: translateX(-50%) scale(1);
1545
- }
1546
- }.r-kbd-container {
1547
- display: flex;
1548
- gap: 4px;
1549
- font-size: 14px;
1550
- cursor: pointer;
1487
+ .r-external-mark::after {
1488
+ content: "";
1489
+ position: absolute;
1490
+ top: 0;
1491
+ right: 0;
1492
+ width: 100%;
1493
+ height: 100%;
1494
+ border-top: 1px solid currentColor;
1495
+ border-right: 1px solid currentColor;
1496
+ box-sizing: border-box;
1551
1497
  }
1552
- .r-kbd-container:hover {
1553
- color: var(--r-main-950);
1554
- }.r-kbd-key {
1555
- background-color: var(--r-main-200);
1556
- font-size: 12px;
1557
- border-radius: 4px;
1558
- padding: 5px 8px;
1559
- min-width: 24px;
1560
- text-align: center;
1498
+ .r-external-mark::before {
1499
+ content: "";
1500
+ position: absolute;
1501
+ top: 0;
1502
+ right: 0;
1503
+ width: 3px;
1504
+ height: 3px;
1505
+ background-color: currentColor;
1506
+ border-radius: 0 0 0 4px;
1561
1507
  box-sizing: border-box;
1508
+ }.r-git-logo {
1509
+ display: block;
1562
1510
  }.r-anchor-heading:hover .r-anchor-heading-link {
1563
1511
  visibility: visible;
1564
1512
  opacity: 1;
@@ -1637,6 +1585,20 @@
1637
1585
  scrollbar-width: thin;
1638
1586
  scrollbar-color: var(--r-main-200) transparent;
1639
1587
  box-sizing: border-box;
1588
+ }.r-code-span {
1589
+ font-family: var(--monospace-font, monospace, monospace);
1590
+ background-color: var(--r-main-100);
1591
+ border: 1px solid var(--r-main-200);
1592
+ color: var(--r-main-950);
1593
+ border-radius: 4px;
1594
+ padding: 2px 6px;
1595
+ font-size: inherit;
1596
+ font-weight: 500;
1597
+ letter-spacing: 0.5px;
1598
+ }
1599
+
1600
+ .r-code-span + .r-content-link-external {
1601
+ margin-left: -12px;
1640
1602
  }.r-blockquote {
1641
1603
  background-color: var(--r-main-100);
1642
1604
  padding: 8px 12px 8px 20px;
@@ -1706,20 +1668,6 @@
1706
1668
  scrollbar-width: thin;
1707
1669
  scrollbar-color: var(--r-main-200) transparent;
1708
1670
  box-sizing: border-box;
1709
- }.r-code-span {
1710
- font-family: var(--monospace-font, monospace, monospace);
1711
- background-color: var(--r-main-100);
1712
- border: 1px solid var(--r-main-200);
1713
- color: var(--r-main-950);
1714
- border-radius: 4px;
1715
- padding: 2px 6px;
1716
- font-size: inherit;
1717
- font-weight: 500;
1718
- letter-spacing: 0.5px;
1719
- }
1720
-
1721
- .r-code-span + .r-content-link-external {
1722
- margin-left: -12px;
1723
1671
  }.r-h1 {
1724
1672
  font-size: 32px;
1725
1673
  line-height: 1.4;
@@ -1808,27 +1756,58 @@
1808
1756
 
1809
1757
  .r-tab-header-code {
1810
1758
  font-family: var(--monospace-font, monospace, monospace);
1811
- }.r-backdrop {
1759
+ }.r-modal {
1812
1760
  position: fixed;
1813
- top: 0;
1814
- right: 0;
1815
- bottom: 0;
1816
1761
  left: 0;
1817
- background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
1762
+ bottom: 0;
1763
+ width: 100%;
1764
+ background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
1765
+ border: 2px solid var(--r-main-200);
1766
+ border-radius: 12px 12px 0 0;
1818
1767
  opacity: 0;
1819
1768
  visibility: hidden;
1820
1769
  pointer-events: none;
1821
- backdrop-filter: blur(4px);
1822
- transition: background 0.05s, opacity 0.2s, visibility 0.01s 0.15s;
1823
- z-index: 100;
1770
+ transition: opacity 0.2s 0.1s, transform 0.2s 0.1s, visibility 0.01s 0.2s 0.1s;
1771
+ z-index: 1000;
1772
+ box-sizing: border-box;
1773
+ }
1774
+ @media screen and (width >= 768px) {
1775
+ .r-modal {
1776
+ top: 10%;
1777
+ left: 50%;
1778
+ bottom: auto;
1779
+ transform: translateX(-50%) scale(0.95);
1780
+ max-width: 480px;
1781
+ border-radius: 12px;
1782
+ }
1824
1783
  }
1825
1784
 
1826
- .r-backdrop._visible {
1785
+ .r-modal._visible {
1827
1786
  opacity: 1;
1828
- background: color-mix(in srgb, var(--r-main-900) 10%, transparent 100%);
1829
1787
  visibility: visible;
1830
- transition: background 0.05s, opacity 0.2s;
1788
+ transition: opacity 0.2s 0.1s, transform 0.2s 0.1s;
1831
1789
  pointer-events: all;
1790
+ }
1791
+ @media screen and (width >= 768px) {
1792
+ .r-modal._visible {
1793
+ transform: translateX(-50%) scale(1);
1794
+ }
1795
+ }.r-kbd-container {
1796
+ display: flex;
1797
+ gap: 4px;
1798
+ font-size: 14px;
1799
+ cursor: pointer;
1800
+ }
1801
+ .r-kbd-container:hover {
1802
+ color: var(--r-main-950);
1803
+ }.r-kbd-key {
1804
+ background-color: var(--r-main-200);
1805
+ font-size: 12px;
1806
+ border-radius: 4px;
1807
+ padding: 5px 8px;
1808
+ min-width: 24px;
1809
+ text-align: center;
1810
+ box-sizing: border-box;
1832
1811
  }.r-copy-button {
1833
1812
  position: relative;
1834
1813
  padding: 6px;
@@ -1977,15 +1956,13 @@
1977
1956
  border-top: 1px solid var(--r-main-500);
1978
1957
  border-bottom: 1px solid var(--r-main-500);
1979
1958
  border-collapse: collapse;
1959
+ }.r-thead {
1960
+ background-color: var(--r-main-100);
1980
1961
  }.r-table {
1981
1962
  min-width: 100%;
1982
1963
  text-align: left;
1983
1964
  border-collapse: collapse;
1984
1965
  box-sizing: border-box;
1985
- }.r-thead {
1986
- background-color: var(--r-main-100);
1987
- }.r-task-ol {
1988
- list-style: none;
1989
1966
  }.r-task-li.r-task-li {
1990
1967
  margin-block-start: 2px;
1991
1968
  margin-block-end: 2px;
@@ -2015,8 +1992,31 @@
2015
1992
 
2016
1993
  .r-task-label-text {
2017
1994
  vertical-align: middle;
1995
+ }.r-task-ol {
1996
+ list-style: none;
2018
1997
  }.r-task-ul {
2019
1998
  list-style: none;
1999
+ }.r-backdrop {
2000
+ position: fixed;
2001
+ top: 0;
2002
+ right: 0;
2003
+ bottom: 0;
2004
+ left: 0;
2005
+ background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
2006
+ opacity: 0;
2007
+ visibility: hidden;
2008
+ pointer-events: none;
2009
+ backdrop-filter: blur(4px);
2010
+ transition: background 0.05s, opacity 0.2s, visibility 0.01s 0.15s;
2011
+ z-index: 100;
2012
+ }
2013
+
2014
+ .r-backdrop._visible {
2015
+ opacity: 1;
2016
+ background: color-mix(in srgb, var(--r-main-900) 10%, transparent 100%);
2017
+ visibility: visible;
2018
+ transition: background 0.05s, opacity 0.2s;
2019
+ pointer-events: all;
2020
2020
  }.r-tooltip {
2021
2021
  font-family: var(--monospace-font, monospace, monospace);
2022
2022
  display: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "robindoc",
3
- "version": "0.0.0-experimental-95c1bd7",
3
+ "version": "0.0.0-experimental-2d30cfd",
4
4
  "description": "Robindoc is a framework for automatically creating documentation websites based on markdown files, built on React.js Server Components",
5
5
  "main": "./lib/index.js",
6
6
  "scripts": {