robindoc 0.0.0-experimental-fd1659a → 0.0.0-experimental-95c1bd7

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 +589 -587
  2. package/package.json +1 -1
package/lib/styles.css CHANGED
@@ -401,638 +401,639 @@
401
401
  z-index: 1001;
402
402
  }.r-keylink.keylink-to-navigation:focus {
403
403
  margin-top: -40px;
404
- }.r-article {
405
- padding: 20px 0 40px;
406
- grid-area: content;
404
+ }.r-header-menu {
405
+ display: flex;
406
+ justify-content: flex-end;
407
+ order: 1;
407
408
  }
408
- @media screen and (width >= 1180px) {
409
- .r-article {
410
- padding: 32px 0 40px;
409
+ @media screen and (width >= 1024px) {
410
+ .r-header-menu {
411
+ flex: 1;
412
+ order: unset;
411
413
  }
412
414
  }
413
- .r-article > *:first-child {
414
- margin-top: 0;
415
- }
416
- .r-article > *:last-child {
417
- margin-bottom: 0;
418
- }
419
-
420
- .r-checkbox {
421
- cursor: pointer;
422
- width: 20px;
423
- height: 20px;
424
- margin: 4px;
425
- vertical-align: middle;
426
- box-sizing: border-box;
427
- }
428
-
429
- .r-label {
430
- cursor: pointer;
431
- }
432
-
433
- .r-task-ol,
434
- .r-task-ul {
435
- list-style: none;
436
- }
437
415
 
438
- .r-task-label {
439
- display: block;
440
- width: 100%;
441
- padding-top: 2px;
442
- padding-bottom: 2px;
443
- box-sizing: border-box;
444
- }
445
- .r-task-label:hover .r-checkbox {
446
- filter: brightness(0.8);
447
- }
448
-
449
- .r-task-li.r-task-li {
450
- margin-block-start: 2px;
451
- margin-block-end: 2px;
416
+ .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
417
+ display: flex;
452
418
  }
453
419
 
454
- .r-label-text {
455
- vertical-align: middle;
456
- }.r-sidebar {
457
- grid-area: sidebar;
458
- box-sizing: border-box;
420
+ .r-header-responsive {
421
+ display: none;
422
+ justify-content: flex-end;
423
+ flex: 1;
424
+ gap: 24px;
425
+ z-index: 1;
459
426
  }
460
- @media screen and (width < 768px) {
461
- .r-sidebar {
462
- position: sticky;
463
- width: calc(100% + 24px);
464
- top: var(--r-header-height);
465
- left: 0;
466
- margin: 0 -12px;
427
+ @media screen and (width < 1024px) {
428
+ .r-header-responsive {
429
+ flex-direction: column-reverse;
430
+ padding: 12px;
467
431
  background-color: var(--r-main-50);
468
- border-bottom: 1px solid var(--r-main-200);
469
- z-index: 10;
470
- opacity: 0.98;
471
- padding: 0;
472
- overflow: auto;
432
+ position: fixed;
433
+ top: 60px;
434
+ right: 0;
435
+ bottom: 0;
436
+ left: 0;
473
437
  }
474
438
  }
475
-
476
- .r-sidebar-top-mock {
477
- grid-row-start: 1;
478
- grid-column-start: 1;
479
- }
480
-
481
- @media screen and (width < 768px) {
482
- .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
483
- display: none;
439
+ @media screen and (width >= 1024px) {
440
+ .r-header-responsive {
441
+ display: flex;
442
+ justify-content: space-between;
443
+ align-items: center;
484
444
  }
485
445
  }
486
446
 
487
- .r-sidebar-nav {
447
+ .r-header-burger {
448
+ position: relative;
449
+ display: flex;
450
+ align-items: center;
451
+ justify-content: center;
452
+ height: 32px;
453
+ width: 32px;
454
+ cursor: pointer;
455
+ background: none;
456
+ border: none;
488
457
  box-sizing: border-box;
489
458
  }
490
- @media screen and (width < 768px) {
491
- .r-sidebar-nav {
492
- overflow: auto;
493
- max-height: calc(100dvh - var(--r-header-height) - 41px);
459
+ @media screen and (width >= 1024px) {
460
+ .r-header-burger {
461
+ display: none;
494
462
  }
495
463
  }
496
464
 
497
- .r-sidebar-drop {
498
- margin-top: -4px;
499
- padding-top: 4px;
500
- }
501
-
502
- .r-sidebar-sublist {
503
- position: relative;
504
- padding-top: 2px;
505
- }
506
- .r-sidebar-sublist:hover::before {
507
- background-color: var(--r-primary-800);
508
- transition-delay: initial;
509
- }
510
-
511
- .r-sidebar-sublist::before {
512
- content: "";
465
+ .r-burger-line {
466
+ display: block;
467
+ width: 20px;
468
+ height: 1.5px;
513
469
  position: absolute;
514
- top: 0;
515
- left: -12px;
516
- right: 0;
517
- height: 2px;
518
- border-bottom-left-radius: 2px;
519
- background-color: var(--r-main-200);
520
- z-index: 1;
521
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
470
+ background-color: var(--r-main-700);
471
+ margin: auto;
472
+ transition: transform 0.3s;
522
473
  box-sizing: border-box;
523
474
  }
524
475
 
525
- .r-sidebar-nav {
526
- padding: 32px 4px 32px 2px;
527
- box-sizing: border-box;
528
- }
529
- @media screen and (width < 768px) {
530
- .r-sidebar-nav {
531
- padding: 12px;
532
- }
533
- }
534
- @media screen and (width >= 768px) {
535
- .r-sidebar-nav {
536
- position: sticky;
537
- top: var(--r-header-height);
538
- overflow: auto;
539
- scrollbar-width: thin;
540
- scrollbar-color: var(--r-main-200) transparent;
541
- scrollbar-gutter: stable;
542
- max-height: calc(100dvh - var(--r-header-height));
543
- }
476
+ .r-burger-line._top {
477
+ transform: translateY(-3px);
544
478
  }
545
479
 
546
- .r-sidebar-space {
547
- box-sizing: border-box;
480
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
481
+ transform: translateY(0) rotate(45deg);
482
+ margin-top: 0;
548
483
  }
549
- @media screen and (width < 768px) {
550
- .r-sidebar-space {
551
- display: block;
552
- height: 40px;
553
- }
484
+
485
+ .r-burger-line._bottom {
486
+ transform: translateY(3px);
554
487
  }
555
488
 
556
- .r-sidebar-btn {
557
- position: sticky;
558
- top: 0;
559
- display: flex;
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);
560
499
  width: 100%;
561
- font-size: 14px;
562
- border: 0;
563
- padding: 12px;
564
- background: none;
565
- cursor: pointer;
566
- color: var(--r-main-800);
567
- background-color: var(--r-main-50);
568
- z-index: 1;
500
+ text-align: left;
501
+ cursor: text;
569
502
  box-sizing: border-box;
570
503
  }
571
504
  @media screen and (width >= 768px) {
572
- .r-sidebar-btn {
573
- display: none;
505
+ .r-search-btn {
506
+ width: 220px;
507
+ padding: 8px 96px 8px 20px;
574
508
  }
575
509
  }
576
-
577
- .r-sidebar-chevron {
578
- display: inline;
579
- margin-right: 6px;
580
- transition: transform 0.2s;
581
- box-sizing: border-box;
510
+ .r-search-btn:hover {
511
+ border-color: var(--r-main-600);
582
512
  }
583
-
584
- .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
585
- transform: rotate(90deg);
513
+ .r-search-btn:hover .r-search-kbd {
514
+ color: var(--r-main-950);
586
515
  }
587
516
 
588
- .r-sidebar-list {
589
- color: var(--r-main-700);
590
- list-style: none;
591
- padding: 0;
592
- margin: 0;
593
- font-size: 14px;
594
- box-sizing: border-box;
517
+ .r-search-title {
518
+ display: block;
519
+ overflow: hidden;
520
+ text-overflow: ellipsis;
521
+ white-space: nowrap;
595
522
  }
596
523
 
597
- .r-sidebar-drop[open]::details-content {
598
- height: var(--drop-height, auto);
599
- box-sizing: border-box;
524
+ .r-search-kbd {
525
+ display: none;
526
+ position: absolute;
527
+ right: 6px;
528
+ top: 50%;
529
+ transform: translateY(-50%);
600
530
  }
601
-
602
- .r-sidebar-drop::details-content {
603
- height: 0;
604
- overflow: hidden;
605
- transition: height 0.3s, content-visibility 0.3s allow-discrete;
606
- box-sizing: border-box;
531
+ @media screen and (width >= 768px) {
532
+ .r-search-kbd {
533
+ display: flex;
534
+ }
607
535
  }
608
536
 
609
- .r-sidebar-sublist {
610
- margin-left: 12px;
537
+ .r-search-popup-header {
538
+ position: relative;
539
+ border-bottom: 1px solid var(--r-main-200);
611
540
  }
612
541
 
613
- .r-sidebar-sublist .r-sidebar-link {
614
- position: relative;
615
- border-top-left-radius: 0;
616
- border-bottom-left-radius: 0;
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;
617
550
  box-sizing: border-box;
618
551
  }
619
- .r-sidebar-sublist .r-sidebar-link::before {
620
- content: "";
621
- position: absolute;
622
- left: 0;
623
- top: -1px;
624
- width: 2px;
625
- height: calc(100% + 4px);
626
- background-color: var(--r-main-200);
627
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
628
- box-sizing: border-box;
552
+ @media screen and (width >= 768px) {
553
+ .r-search-input {
554
+ padding: 16px 72px 16px 20px;
555
+ }
629
556
  }
630
-
631
- .r-sidebar-li {
632
- position: relative;
633
- padding-top: 2px;
634
- padding-bottom: 2px;
635
- line-height: 1.5;
557
+ .r-search-input:hover {
558
+ border-bottom-color: var(--r-primary-800);
636
559
  }
637
-
638
- .r-sidebar-li._separator {
639
- background: var(--r-main-200);
640
- padding: 1px;
560
+ .r-search-input:focus {
561
+ outline: none;
562
+ border-bottom-color: var(--r-primary-600);
641
563
  }
642
-
643
- .r-sidebar-li._droppable > a {
644
- padding-right: 32px;
564
+ .r-search-input::placeholder {
565
+ color: var(--r-main-500);
645
566
  }
646
567
 
647
- .r-sidebar-li-d0 {
648
- margin-left: -8px;
568
+ .r-search-popup-kbd {
569
+ color: var(--r-main-600);
570
+ right: 20px;
649
571
  }
650
572
 
651
- .r-sidebar-p {
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;
652
580
  margin: 0;
653
- padding: 4px 10px;
654
- }
655
-
656
- .r-sidebar-heading {
657
- color: var(--r-main-900);
658
- font-weight: 600;
659
- margin-block-end: 4px;
660
- }
661
- .r-sidebar-heading:not(:first-child) {
662
- margin-block-start: 12px;
581
+ box-sizing: border-box;
663
582
  }
664
583
 
665
- .r-sidebar-link {
584
+ .r-search-item {
666
585
  display: block;
667
- padding: 4px 10px;
668
- color: inherit;
669
- border-bottom: 2px solid transparent;
670
- border-radius: 2px;
671
586
  text-decoration: none;
672
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s, color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
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);
673
599
  }
674
600
 
675
- .r-sidebar-link._target {
676
- color: var(--r-primary-950);
677
- background-color: var(--r-main-50);
601
+ .r-search-item-title {
602
+ margin: 0;
678
603
  }
679
604
 
680
- .r-sidebar-link:hover {
681
- color: var(--r-primary-800);
682
- background-color: var(--r-main-100);
683
- transition-delay: initial;
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;
684
613
  }
685
- .r-sidebar-link:hover::before {
686
- background-color: currentColor;
687
- transition-delay: initial;
614
+ .r-dropdown:hover, .r-dropdown:focus-within {
615
+ color: var(--r-main-950);
688
616
  }
689
-
690
- .r-sidebar-link._active {
691
- color: var(--r-primary-700);
692
- background-color: var(--r-main-50);
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;
693
622
  }
694
- .r-sidebar-link._active::before {
695
- background-color: currentColor;
623
+ .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
624
+ transform: rotate(180deg);
696
625
  }
697
626
 
698
- .r-sidebar-drop-btn {
699
- position: absolute;
700
- right: 3px;
701
- top: 5px;
702
- border-radius: 4px;
703
- padding: 4px;
704
- list-style: none;
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;
705
634
  cursor: pointer;
706
- transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
635
+ padding: 10px 4px;
636
+ font-size: 16px;
637
+ border: 0;
638
+ background: none;
639
+ z-index: 1;
640
+ box-sizing: border-box;
707
641
  }
708
- .r-sidebar-drop-btn:hover {
709
- color: var(--r-primary-500);
710
- transition-delay: initial;
642
+
643
+ .r-dropdown-chevron {
644
+ display: block;
645
+ margin-left: 6px;
646
+ transition: transform 0.3s 0.1s;
647
+ box-sizing: border-box;
711
648
  }
712
- .r-sidebar-drop-btn::before {
713
- content: "";
649
+
650
+ .r-dropdown-drop {
651
+ list-style: none;
714
652
  position: absolute;
715
- inset: -4px;
716
- }
717
- .r-sidebar-drop-btn::-webkit-details-marker {
718
- display: none;
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;
719
667
  }
720
668
 
721
- .r-sidebar-drop-icon {
669
+ .r-dropdown-link {
722
670
  display: block;
723
- transition: transform 0.2s;
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);
724
684
  }
725
685
 
726
- .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
727
- transform: rotate(90deg);
728
- }.r-header-menu {
686
+ .r-dropdown-link._active {
687
+ color: var(--r-primary-700);
688
+ }.r-header-social {
729
689
  display: flex;
690
+ flex: 1;
730
691
  justify-content: flex-end;
731
- order: 1;
732
692
  }
733
693
  @media screen and (width >= 1024px) {
734
- .r-header-menu {
735
- flex: 1;
736
- order: unset;
694
+ .r-header-social {
695
+ flex: none;
696
+ justify-content: unset;
737
697
  }
738
698
  }
739
699
 
740
- .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
741
- display: flex;
700
+ .r-header-social-git {
701
+ color: var(--r-main-700);
702
+ transition: color 0.2s;
742
703
  }
743
-
744
- .r-header-responsive {
745
- display: none;
746
- justify-content: flex-end;
747
- flex: 1;
748
- gap: 24px;
749
- z-index: 1;
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;
750
716
  }
751
- @media screen and (width < 1024px) {
752
- .r-header-responsive {
753
- flex-direction: column-reverse;
754
- padding: 12px;
755
- background-color: var(--r-main-50);
756
- position: fixed;
757
- top: 60px;
758
- right: 0;
759
- bottom: 0;
760
- left: 0;
717
+ @media screen and (width >= 1180px) {
718
+ .r-article {
719
+ padding: 32px 0 40px;
761
720
  }
762
721
  }
763
- @media screen and (width >= 1024px) {
764
- .r-header-responsive {
765
- display: flex;
766
- justify-content: space-between;
767
- align-items: center;
768
- }
722
+ .r-article > *:first-child {
723
+ margin-top: 0;
724
+ }
725
+ .r-article > *:last-child {
726
+ margin-bottom: 0;
769
727
  }
770
728
 
771
- .r-header-burger {
772
- position: relative;
773
- display: flex;
774
- align-items: center;
775
- justify-content: center;
776
- height: 32px;
777
- width: 32px;
729
+ .r-checkbox {
778
730
  cursor: pointer;
779
- background: none;
780
- border: none;
731
+ width: 20px;
732
+ height: 20px;
733
+ margin: 4px;
734
+ vertical-align: middle;
781
735
  box-sizing: border-box;
782
736
  }
783
- @media screen and (width >= 1024px) {
784
- .r-header-burger {
785
- display: none;
786
- }
737
+
738
+ .r-label {
739
+ cursor: pointer;
787
740
  }
788
741
 
789
- .r-burger-line {
742
+ .r-task-ol,
743
+ .r-task-ul {
744
+ list-style: none;
745
+ }
746
+
747
+ .r-task-label {
790
748
  display: block;
791
- width: 20px;
792
- height: 1.5px;
793
- position: absolute;
794
- background-color: var(--r-main-700);
795
- margin: auto;
796
- transition: transform 0.3s;
749
+ width: 100%;
750
+ padding-top: 2px;
751
+ padding-bottom: 2px;
797
752
  box-sizing: border-box;
798
753
  }
754
+ .r-task-label:hover .r-checkbox {
755
+ filter: brightness(0.8);
756
+ }
799
757
 
800
- .r-burger-line._top {
801
- transform: translateY(-3px);
758
+ .r-task-li.r-task-li {
759
+ margin-block-start: 2px;
760
+ margin-block-end: 2px;
802
761
  }
803
762
 
804
- .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
805
- transform: translateY(0) rotate(45deg);
806
- margin-top: 0;
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
+ }
807
783
  }
808
784
 
809
- .r-burger-line._bottom {
810
- transform: translateY(3px);
785
+ .r-sidebar-top-mock {
786
+ grid-row-start: 1;
787
+ grid-column-start: 1;
811
788
  }
812
789
 
813
- .r-header-input:checked ~ .r-header-burger .r-burger-line._bottom {
814
- transform: translateY(0) rotate(-45deg);
815
- margin-top: 0;
816
- }.r-search-btn {
817
- position: relative;
818
- border-radius: 6px;
819
- background-color: var(--r-main-100);
820
- color: var(--r-main-600);
821
- padding: 8px 20px;
822
- border: 1px solid var(--r-main-200);
823
- width: 100%;
824
- text-align: left;
825
- cursor: text;
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 {
826
797
  box-sizing: border-box;
827
798
  }
828
- @media screen and (width >= 768px) {
829
- .r-search-btn {
830
- width: 220px;
831
- padding: 8px 96px 8px 20px;
799
+ @media screen and (width < 768px) {
800
+ .r-sidebar-nav {
801
+ overflow: auto;
802
+ max-height: calc(100dvh - var(--r-header-height) - 41px);
832
803
  }
833
804
  }
834
- .r-search-btn:hover {
835
- border-color: var(--r-main-600);
836
- }
837
- .r-search-btn:hover .r-search-kbd {
838
- color: var(--r-main-950);
805
+
806
+ .r-sidebar-drop {
807
+ margin-top: -4px;
808
+ padding-top: 4px;
839
809
  }
840
810
 
841
- .r-search-title {
842
- display: block;
843
- overflow: hidden;
844
- text-overflow: ellipsis;
845
- white-space: nowrap;
811
+ .r-sidebar-sublist {
812
+ position: relative;
813
+ padding-top: 2px;
814
+ }
815
+ .r-sidebar-sublist:hover::before {
816
+ background-color: var(--r-primary-800);
817
+ transition-delay: initial;
846
818
  }
847
819
 
848
- .r-search-kbd {
849
- display: none;
820
+ .r-sidebar-sublist::before {
821
+ content: "";
850
822
  position: absolute;
851
- right: 6px;
852
- top: 50%;
853
- transform: translateY(-50%);
823
+ top: 0;
824
+ left: -12px;
825
+ right: 0;
826
+ height: 2px;
827
+ border-bottom-left-radius: 2px;
828
+ background-color: var(--r-main-200);
829
+ z-index: 1;
830
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
831
+ box-sizing: border-box;
832
+ }
833
+
834
+ .r-sidebar-nav {
835
+ padding: 32px 4px 32px 2px;
836
+ box-sizing: border-box;
837
+ }
838
+ @media screen and (width < 768px) {
839
+ .r-sidebar-nav {
840
+ padding: 12px;
841
+ }
854
842
  }
855
843
  @media screen and (width >= 768px) {
856
- .r-search-kbd {
857
- display: flex;
844
+ .r-sidebar-nav {
845
+ position: sticky;
846
+ top: var(--r-header-height);
847
+ overflow: auto;
848
+ scrollbar-width: thin;
849
+ scrollbar-color: var(--r-main-200) transparent;
850
+ scrollbar-gutter: stable;
851
+ max-height: calc(100dvh - var(--r-header-height));
858
852
  }
859
853
  }
860
854
 
861
- .r-search-popup-header {
862
- position: relative;
863
- border-bottom: 1px solid var(--r-main-200);
855
+ .r-sidebar-space {
856
+ box-sizing: border-box;
857
+ }
858
+ @media screen and (width < 768px) {
859
+ .r-sidebar-space {
860
+ display: block;
861
+ height: 40px;
862
+ }
864
863
  }
865
864
 
866
- .r-search-input {
867
- border-radius: 12px 12px 0 0;
868
- background-color: var(--r-main-50);
869
- padding: 16px 20px;
870
- border: none;
871
- border-bottom: 2px solid var(--r-main-300);
865
+ .r-sidebar-btn {
866
+ position: sticky;
867
+ top: 0;
868
+ display: flex;
872
869
  width: 100%;
873
- font-size: 16px;
870
+ font-size: 14px;
871
+ border: 0;
872
+ padding: 12px;
873
+ background: none;
874
+ cursor: pointer;
875
+ color: var(--r-main-800);
876
+ background-color: var(--r-main-50);
877
+ z-index: 1;
874
878
  box-sizing: border-box;
875
879
  }
876
880
  @media screen and (width >= 768px) {
877
- .r-search-input {
878
- padding: 16px 72px 16px 20px;
881
+ .r-sidebar-btn {
882
+ display: none;
879
883
  }
880
884
  }
881
- .r-search-input:hover {
882
- border-bottom-color: var(--r-primary-800);
883
- }
884
- .r-search-input:focus {
885
- outline: none;
886
- border-bottom-color: var(--r-primary-600);
887
- }
888
- .r-search-input::placeholder {
889
- color: var(--r-main-500);
885
+
886
+ .r-sidebar-chevron {
887
+ display: inline;
888
+ margin-right: 6px;
889
+ transition: transform 0.2s;
890
+ box-sizing: border-box;
890
891
  }
891
892
 
892
- .r-search-popup-kbd {
893
- color: var(--r-main-600);
894
- right: 20px;
893
+ .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
894
+ transform: rotate(90deg);
895
895
  }
896
896
 
897
- .r-search-results {
898
- padding: 12px 8px 8px;
899
- max-height: min(400px, 100dvh - 200px);
900
- overflow-y: auto;
897
+ .r-sidebar-list {
898
+ color: var(--r-main-700);
901
899
  list-style: none;
902
- scrollbar-width: thin;
903
- scrollbar-color: var(--r-main-200) transparent;
900
+ padding: 0;
904
901
  margin: 0;
902
+ font-size: 14px;
905
903
  box-sizing: border-box;
906
904
  }
907
905
 
908
- .r-search-item {
909
- display: block;
910
- text-decoration: none;
911
- color: var(--r-main-700);
912
- padding: 8px 12px;
913
- border: 1px solid var(--r-main-100);
914
- border-radius: 6px;
915
- width: 100%;
916
- margin-top: 6px;
906
+ .r-sidebar-drop[open]::details-content {
907
+ height: var(--drop-height, auto);
917
908
  box-sizing: border-box;
918
909
  }
919
- .r-search-item:hover, .r-search-item:focus {
920
- color: var(--r-main-950);
921
- background-color: var(--r-main-50);
910
+
911
+ .r-sidebar-drop::details-content {
912
+ height: 0;
913
+ overflow: hidden;
914
+ transition: height 0.3s, content-visibility 0.3s allow-discrete;
915
+ box-sizing: border-box;
922
916
  }
923
917
 
924
- .r-search-item-title {
925
- margin: 0;
918
+ .r-sidebar-sublist {
919
+ margin-left: 12px;
926
920
  }
927
921
 
928
- .r-search-item-desc {
929
- font-size: 14px;
930
- color: var(--r-main-600);
931
- margin: 12px 0 0;
932
- }.r-dropdown {
922
+ .r-sidebar-sublist .r-sidebar-link {
933
923
  position: relative;
934
- color: var(--r-main-600);
935
- transition: color 0.2s 0.1s;
924
+ border-top-left-radius: 0;
925
+ border-bottom-left-radius: 0;
926
+ box-sizing: border-box;
936
927
  }
937
- .r-dropdown:hover, .r-dropdown:focus-within {
938
- color: var(--r-main-950);
928
+ .r-sidebar-sublist .r-sidebar-link::before {
929
+ content: "";
930
+ position: absolute;
931
+ left: 0;
932
+ top: -1px;
933
+ width: 2px;
934
+ height: calc(100% + 4px);
935
+ background-color: var(--r-main-200);
936
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
937
+ box-sizing: border-box;
939
938
  }
940
- .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
941
- visibility: visible;
942
- pointer-events: all;
943
- transform: translateY(20px);
944
- opacity: 1;
939
+
940
+ .r-sidebar-li {
941
+ position: relative;
942
+ padding-top: 2px;
943
+ padding-bottom: 2px;
944
+ line-height: 1.5;
945
945
  }
946
- .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
947
- transform: rotate(180deg);
946
+
947
+ .r-sidebar-li._separator {
948
+ background: var(--r-main-200);
949
+ padding: 1px;
948
950
  }
949
951
 
950
- .r-dropdown-summary {
951
- display: flex;
952
- justify-content: space-between;
953
- align-items: center;
954
- width: 100%;
955
- position: relative;
956
- color: inherit;
957
- cursor: pointer;
958
- padding: 10px 4px;
959
- font-size: 16px;
960
- border: 0;
961
- background: none;
962
- z-index: 1;
963
- box-sizing: border-box;
952
+ .r-sidebar-li._droppable > a {
953
+ padding-right: 32px;
964
954
  }
965
955
 
966
- .r-dropdown-chevron {
967
- display: block;
968
- margin-left: 6px;
969
- transition: transform 0.3s 0.1s;
970
- box-sizing: border-box;
956
+ .r-sidebar-li-d0 {
957
+ margin-left: -8px;
971
958
  }
972
959
 
973
- .r-dropdown-drop {
974
- list-style: none;
975
- position: absolute;
976
- top: 16px;
977
- left: -12px;
978
- visibility: hidden;
979
- pointer-events: none;
980
- opacity: 0;
981
- transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
982
- background-color: var(--r-main-50);
983
- border: 1px solid var(--r-main-100);
984
- border-radius: 8px;
960
+ .r-sidebar-p {
985
961
  margin: 0;
986
- padding: 2px 6px;
987
- min-width: 120px;
988
- max-width: 180px;
989
- box-sizing: border-box;
962
+ padding: 4px 10px;
990
963
  }
991
964
 
992
- .r-dropdown-link {
965
+ .r-sidebar-heading {
966
+ color: var(--r-main-900);
967
+ font-weight: 600;
968
+ margin-block-end: 4px;
969
+ }
970
+ .r-sidebar-heading:not(:first-child) {
971
+ margin-block-start: 12px;
972
+ }
973
+
974
+ .r-sidebar-link {
993
975
  display: block;
994
- width: 100%;
976
+ padding: 4px 10px;
977
+ color: inherit;
978
+ border-bottom: 2px solid transparent;
979
+ border-radius: 2px;
995
980
  text-decoration: none;
996
- color: var(--r-main-700);
997
- padding: 4px 8px;
998
- margin-top: 4px;
999
- margin-bottom: 4px;
1000
- border-radius: 4px;
1001
- transition: background-color 0.2s;
1002
- box-sizing: border-box;
981
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s, color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1003
982
  }
1004
- .r-dropdown-link:hover {
1005
- color: var(--r-main-900);
983
+
984
+ .r-sidebar-link._target {
985
+ color: var(--r-primary-950);
986
+ background-color: var(--r-main-50);
987
+ }
988
+
989
+ .r-sidebar-link:hover {
990
+ color: var(--r-primary-800);
1006
991
  background-color: var(--r-main-100);
992
+ transition-delay: initial;
993
+ }
994
+ .r-sidebar-link:hover::before {
995
+ background-color: currentColor;
996
+ transition-delay: initial;
1007
997
  }
1008
998
 
1009
- .r-dropdown-link._active {
999
+ .r-sidebar-link._active {
1010
1000
  color: var(--r-primary-700);
1011
- }.r-header-social {
1012
- display: flex;
1013
- flex: 1;
1014
- justify-content: flex-end;
1001
+ background-color: var(--r-main-50);
1002
+ }
1003
+ .r-sidebar-link._active::before {
1004
+ background-color: currentColor;
1005
+ }
1006
+
1007
+ .r-sidebar-drop-btn {
1008
+ position: absolute;
1009
+ right: 3px;
1010
+ top: 5px;
1011
+ border-radius: 4px;
1012
+ padding: 4px;
1013
+ list-style: none;
1014
+ cursor: pointer;
1015
+ transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1016
+ }
1017
+ .r-sidebar-drop-btn:hover {
1018
+ color: var(--r-primary-500);
1019
+ transition-delay: initial;
1020
+ }
1021
+ .r-sidebar-drop-btn::before {
1022
+ content: "";
1023
+ position: absolute;
1024
+ inset: -4px;
1015
1025
  }
1016
- @media screen and (width >= 1024px) {
1017
- .r-header-social {
1018
- flex: none;
1019
- justify-content: unset;
1020
- }
1026
+ .r-sidebar-drop-btn::-webkit-details-marker {
1027
+ display: none;
1021
1028
  }
1022
1029
 
1023
- .r-header-social-git {
1024
- color: var(--r-main-700);
1025
- transition: color 0.2s;
1030
+ .r-sidebar-drop-icon {
1031
+ display: block;
1032
+ transition: transform 0.2s;
1026
1033
  }
1027
- .r-header-social-git:hover, .r-header-social-git:focus {
1028
- color: var(--r-main-950);
1029
- }.r-container {
1030
- max-width: 1180px;
1031
- padding-right: 12px;
1032
- padding-left: 12px;
1033
- margin-right: auto;
1034
- margin-left: auto;
1035
- box-sizing: border-box;
1034
+
1035
+ .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
1036
+ transform: rotate(90deg);
1036
1037
  }.r-theme-switcher {
1037
1038
  position: relative;
1038
1039
  display: flex;
@@ -1124,6 +1125,39 @@
1124
1125
  user-select: none;
1125
1126
  pointer-events: none;
1126
1127
  box-sizing: border-box;
1128
+ }.r-git-logo {
1129
+ display: block;
1130
+ }.r-external-mark {
1131
+ 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;
1138
+ box-sizing: border-box;
1139
+ }
1140
+ .r-external-mark::after {
1141
+ content: "";
1142
+ position: absolute;
1143
+ top: 0;
1144
+ right: 0;
1145
+ width: 100%;
1146
+ height: 100%;
1147
+ border-top: 1px solid currentColor;
1148
+ border-right: 1px solid currentColor;
1149
+ box-sizing: border-box;
1150
+ }
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;
1127
1161
  }.r-contents {
1128
1162
  grid-area: contents;
1129
1163
  }
@@ -1473,38 +1507,57 @@
1473
1507
  }.r-last-modified {
1474
1508
  color: var(--r-main-700);
1475
1509
  margin-block-start: 16px;
1476
- }.r-git-logo {
1477
- display: block;
1478
- }.r-external-mark {
1479
- position: relative;
1480
- vertical-align: text-top;
1481
- display: inline-block;
1482
- margin-left: -4px;
1483
- margin-right: 2px;
1484
- width: 6px;
1485
- height: 6px;
1486
- box-sizing: border-box;
1487
- }
1488
- .r-external-mark::after {
1489
- content: "";
1490
- position: absolute;
1491
- top: 0;
1492
- right: 0;
1510
+ }.r-modal {
1511
+ position: fixed;
1512
+ left: 0;
1513
+ bottom: 0;
1493
1514
  width: 100%;
1494
- height: 100%;
1495
- border-top: 1px solid currentColor;
1496
- border-right: 1px solid currentColor;
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;
1497
1523
  box-sizing: border-box;
1498
1524
  }
1499
- .r-external-mark::before {
1500
- content: "";
1501
- position: absolute;
1502
- top: 0;
1503
- right: 0;
1504
- width: 3px;
1505
- height: 3px;
1506
- background-color: currentColor;
1507
- border-radius: 0 0 0 4px;
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;
1551
+ }
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;
1508
1561
  box-sizing: border-box;
1509
1562
  }.r-anchor-heading:hover .r-anchor-heading-link {
1510
1563
  visibility: visible;
@@ -1576,6 +1629,14 @@
1576
1629
 
1577
1630
  .r-code-section-filename {
1578
1631
  font-family: var(--monospace-font, monospace, monospace);
1632
+ }.r-block {
1633
+ width: 100%;
1634
+ overflow: auto;
1635
+ margin-block-start: 12px;
1636
+ margin-block-end: 12px;
1637
+ scrollbar-width: thin;
1638
+ scrollbar-color: var(--r-main-200) transparent;
1639
+ box-sizing: border-box;
1579
1640
  }.r-blockquote {
1580
1641
  background-color: var(--r-main-100);
1581
1642
  padding: 8px 12px 8px 20px;
@@ -1632,6 +1693,19 @@
1632
1693
  }
1633
1694
  .r-blockquote-caution .r-blockquote-title {
1634
1695
  color: var(--r-caution);
1696
+ }.r-code-block {
1697
+ font-family: var(--monospace-font, monospace, monospace);
1698
+ font-size: 16px;
1699
+ line-height: 1.33;
1700
+ border-radius: 6px;
1701
+ padding: 16px 20px;
1702
+ margin: 0;
1703
+ color: var(--r-primary-800);
1704
+ background-color: var(--r-main-50);
1705
+ overflow-x: auto;
1706
+ scrollbar-width: thin;
1707
+ scrollbar-color: var(--r-main-200) transparent;
1708
+ box-sizing: border-box;
1635
1709
  }.r-code-span {
1636
1710
  font-family: var(--monospace-font, monospace, monospace);
1637
1711
  background-color: var(--r-main-100);
@@ -1646,19 +1720,6 @@
1646
1720
 
1647
1721
  .r-code-span + .r-content-link-external {
1648
1722
  margin-left: -12px;
1649
- }.r-code-block {
1650
- font-family: var(--monospace-font, monospace, monospace);
1651
- font-size: 16px;
1652
- line-height: 1.33;
1653
- border-radius: 6px;
1654
- padding: 16px 20px;
1655
- margin: 0;
1656
- color: var(--r-primary-800);
1657
- background-color: var(--r-main-50);
1658
- overflow-x: auto;
1659
- scrollbar-width: thin;
1660
- scrollbar-color: var(--r-main-200) transparent;
1661
- box-sizing: border-box;
1662
1723
  }.r-h1 {
1663
1724
  font-size: 32px;
1664
1725
  line-height: 1.4;
@@ -1702,14 +1763,6 @@
1702
1763
  }.r-img {
1703
1764
  max-width: 100%;
1704
1765
  box-sizing: border-box;
1705
- }.r-block {
1706
- width: 100%;
1707
- overflow: auto;
1708
- margin-block-start: 12px;
1709
- margin-block-end: 12px;
1710
- scrollbar-width: thin;
1711
- scrollbar-color: var(--r-main-200) transparent;
1712
- box-sizing: border-box;
1713
1766
  }.r-p {
1714
1767
  line-height: 1.8;
1715
1768
  margin-block-start: 1em;
@@ -1755,57 +1808,27 @@
1755
1808
 
1756
1809
  .r-tab-header-code {
1757
1810
  font-family: var(--monospace-font, monospace, monospace);
1758
- }.r-kbd-container {
1759
- display: flex;
1760
- gap: 4px;
1761
- font-size: 14px;
1762
- cursor: pointer;
1763
- }
1764
- .r-kbd-container:hover {
1765
- color: var(--r-main-950);
1766
- }.r-kbd-key {
1767
- background-color: var(--r-main-200);
1768
- font-size: 12px;
1769
- border-radius: 4px;
1770
- padding: 5px 8px;
1771
- min-width: 24px;
1772
- text-align: center;
1773
- box-sizing: border-box;
1774
- }.r-modal {
1811
+ }.r-backdrop {
1775
1812
  position: fixed;
1776
- left: 0;
1813
+ top: 0;
1814
+ right: 0;
1777
1815
  bottom: 0;
1778
- width: 100%;
1779
- background-color: var(--r-main-50);
1780
- border-radius: 12px 12px 0 0;
1816
+ left: 0;
1817
+ background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
1781
1818
  opacity: 0;
1782
1819
  visibility: hidden;
1783
1820
  pointer-events: none;
1784
- transition: opacity 0.2s 0.1s, transform 0.2s 0.1s, visibility 0.01s 0.2s 0.1s;
1785
- z-index: 1000;
1786
- box-sizing: border-box;
1787
- }
1788
- @media screen and (width >= 768px) {
1789
- .r-modal {
1790
- top: 10%;
1791
- left: 50%;
1792
- bottom: auto;
1793
- transform: translateX(-50%) scale(0.95);
1794
- max-width: 480px;
1795
- border-radius: 12px;
1796
- }
1821
+ backdrop-filter: blur(4px);
1822
+ transition: background 0.05s, opacity 0.2s, visibility 0.01s 0.15s;
1823
+ z-index: 100;
1797
1824
  }
1798
1825
 
1799
- .r-modal._visible {
1826
+ .r-backdrop._visible {
1800
1827
  opacity: 1;
1828
+ background: color-mix(in srgb, var(--r-main-900) 10%, transparent 100%);
1801
1829
  visibility: visible;
1802
- transition: opacity 0.2s 0.1s, transform 0.2s 0.1s;
1830
+ transition: background 0.05s, opacity 0.2s;
1803
1831
  pointer-events: all;
1804
- }
1805
- @media screen and (width >= 768px) {
1806
- .r-modal._visible {
1807
- transform: translateX(-50%) scale(1);
1808
- }
1809
1832
  }.r-copy-button {
1810
1833
  position: relative;
1811
1834
  padding: 6px;
@@ -1945,11 +1968,6 @@
1945
1968
  padding-inline-start: 2rem;
1946
1969
  margin-block-start: 1em;
1947
1970
  margin-block-end: 1em;
1948
- }.r-table {
1949
- min-width: 100%;
1950
- text-align: left;
1951
- border-collapse: collapse;
1952
- box-sizing: border-box;
1953
1971
  }.r-td {
1954
1972
  padding: 6px 12px;
1955
1973
  border-bottom: 1px solid var(--r-main-400);
@@ -1959,8 +1977,15 @@
1959
1977
  border-top: 1px solid var(--r-main-500);
1960
1978
  border-bottom: 1px solid var(--r-main-500);
1961
1979
  border-collapse: collapse;
1980
+ }.r-table {
1981
+ min-width: 100%;
1982
+ text-align: left;
1983
+ border-collapse: collapse;
1984
+ box-sizing: border-box;
1962
1985
  }.r-thead {
1963
1986
  background-color: var(--r-main-100);
1987
+ }.r-task-ol {
1988
+ list-style: none;
1964
1989
  }.r-task-li.r-task-li {
1965
1990
  margin-block-start: 2px;
1966
1991
  margin-block-end: 2px;
@@ -1990,31 +2015,8 @@
1990
2015
 
1991
2016
  .r-task-label-text {
1992
2017
  vertical-align: middle;
1993
- }.r-task-ol {
1994
- list-style: none;
1995
2018
  }.r-task-ul {
1996
2019
  list-style: none;
1997
- }.r-backdrop {
1998
- position: fixed;
1999
- top: 0;
2000
- right: 0;
2001
- bottom: 0;
2002
- left: 0;
2003
- background: rgba(0, 0, 0, 0);
2004
- opacity: 0;
2005
- visibility: hidden;
2006
- pointer-events: none;
2007
- backdrop-filter: blur(1px);
2008
- transition: background 0.05s, opacity 0.2s, visibility 0.01s 0.15s;
2009
- z-index: 100;
2010
- }
2011
-
2012
- .r-backdrop._visible {
2013
- opacity: 1;
2014
- background: rgba(0, 0, 0, 0.3);
2015
- visibility: visible;
2016
- transition: background 0.05s, opacity 0.2s;
2017
- pointer-events: all;
2018
2020
  }.r-tooltip {
2019
2021
  font-family: var(--monospace-font, monospace, monospace);
2020
2022
  display: none;