robindoc 3.7.6 → 3.7.8

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 +773 -773
  2. package/package.json +1 -1
package/lib/styles.css CHANGED
@@ -111,6 +111,49 @@
111
111
  width: 100%;
112
112
  left: 0;
113
113
  }
114
+ }.r-footer {
115
+ border-top: 1px solid var(--r-main-300);
116
+ }
117
+
118
+ .r-footer-container.r-footer-container {
119
+ padding: 16px 12px;
120
+ }
121
+ @media screen and (width >= 1024px) {
122
+ .r-footer-container.r-footer-container {
123
+ padding-left: 24px;
124
+ padding-right: 24px;
125
+ }
126
+ }
127
+
128
+ .r-footer-row {
129
+ display: flex;
130
+ justify-content: space-between;
131
+ align-items: center;
132
+ gap: 32px;
133
+ }
134
+
135
+ .r-footer-additional {
136
+ margin-top: 20px;
137
+ justify-content: flex-end;
138
+ }
139
+
140
+ .r-copyright {
141
+ color: var(--r-main-800);
142
+ }
143
+
144
+ .r-powered {
145
+ font-size: 14px;
146
+ display: block;
147
+ color: var(--r-main-600);
148
+ }
149
+
150
+ .r-powered-link {
151
+ font-weight: 600;
152
+ text-decoration: none;
153
+ color: var(--r-main-950);
154
+ }
155
+ .r-powered-link:hover {
156
+ color: var(--r-primary-900);
114
157
  }.r-root {
115
158
  --r-header-height: 60px;
116
159
  position: relative;
@@ -344,49 +387,6 @@
344
387
  --r-cl-60: #86181d;
345
388
  --r-cl-61: #144620;
346
389
  --r-cl-62: #c24e00;
347
- }.r-footer {
348
- border-top: 1px solid var(--r-main-300);
349
- }
350
-
351
- .r-footer-container.r-footer-container {
352
- padding: 16px 12px;
353
- }
354
- @media screen and (width >= 1024px) {
355
- .r-footer-container.r-footer-container {
356
- padding-left: 24px;
357
- padding-right: 24px;
358
- }
359
- }
360
-
361
- .r-footer-row {
362
- display: flex;
363
- justify-content: space-between;
364
- align-items: center;
365
- gap: 32px;
366
- }
367
-
368
- .r-footer-additional {
369
- margin-top: 20px;
370
- justify-content: flex-end;
371
- }
372
-
373
- .r-copyright {
374
- color: var(--r-main-800);
375
- }
376
-
377
- .r-powered {
378
- font-size: 14px;
379
- display: block;
380
- color: var(--r-main-600);
381
- }
382
-
383
- .r-powered-link {
384
- font-weight: 600;
385
- text-decoration: none;
386
- color: var(--r-main-950);
387
- }
388
- .r-powered-link:hover {
389
- color: var(--r-primary-900);
390
390
  }.r-docs-container {
391
391
  min-height: calc(100dvh - var(--r-header-height));
392
392
  overflow-wrap: break-word;
@@ -448,724 +448,724 @@
448
448
 
449
449
  .r-code-span + .r-content-link-external {
450
450
  margin-left: -12px;
451
- }.r-header-menu {
452
- display: flex;
453
- justify-content: flex-end;
454
- order: 1;
451
+ }.r-article {
452
+ padding: 20px 0 40px;
453
+ grid-area: content;
455
454
  }
456
- @media screen and (width >= 1024px) {
457
- .r-header-menu {
458
- flex: 1;
459
- order: unset;
455
+ @media screen and (width >= 1180px) {
456
+ .r-article {
457
+ padding: 32px 0 40px;
460
458
  }
461
459
  }
462
-
463
- .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
464
- display: flex;
465
- }
466
-
467
- .r-header-responsive {
468
- display: none;
469
- justify-content: flex-end;
470
- flex: 1;
471
- gap: 24px;
472
- z-index: 1;
473
- }
474
- @media screen and (width < 1024px) {
475
- .r-header-responsive {
476
- flex-direction: column-reverse;
477
- padding: 12px;
478
- background-color: var(--r-main-50);
479
- position: fixed;
480
- top: 60px;
481
- right: 0;
482
- bottom: 0;
483
- left: 0;
484
- }
460
+ .r-article > *:first-child {
461
+ margin-top: 0;
485
462
  }
486
- @media screen and (width >= 1024px) {
487
- .r-header-responsive {
488
- display: flex;
489
- justify-content: space-between;
490
- align-items: center;
491
- }
463
+ .r-article > *:last-child {
464
+ margin-bottom: 0;
492
465
  }
493
466
 
494
- .r-header-burger {
495
- position: relative;
496
- display: flex;
497
- align-items: center;
498
- justify-content: center;
499
- height: 32px;
500
- width: 32px;
467
+ .r-checkbox {
501
468
  cursor: pointer;
502
- background: none;
503
- border: none;
469
+ width: 20px;
470
+ height: 20px;
471
+ margin: 4px;
472
+ vertical-align: middle;
504
473
  box-sizing: border-box;
505
474
  }
506
- @media screen and (width >= 1024px) {
507
- .r-header-burger {
508
- display: none;
509
- }
475
+
476
+ .r-label {
477
+ cursor: pointer;
510
478
  }
511
479
 
512
- .r-burger-line {
480
+ .r-task-ol,
481
+ .r-task-ul {
482
+ list-style: none;
483
+ }
484
+
485
+ .r-task-label {
513
486
  display: block;
514
- width: 20px;
515
- height: 1.5px;
516
- position: absolute;
517
- background-color: var(--r-main-700);
518
- margin: auto;
519
- transition: transform 0.3s;
487
+ width: 100%;
488
+ padding-top: 2px;
489
+ padding-bottom: 2px;
520
490
  box-sizing: border-box;
521
491
  }
492
+ .r-task-label:hover .r-checkbox {
493
+ filter: brightness(0.8);
494
+ }
522
495
 
523
- .r-burger-line._top {
524
- transform: translateY(-3px);
496
+ .r-task-li.r-task-li {
497
+ margin-block-start: 2px;
498
+ margin-block-end: 2px;
525
499
  }
526
500
 
527
- .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
528
- transform: translateY(0) rotate(45deg);
529
- margin-top: 0;
501
+ .r-label-text {
502
+ vertical-align: middle;
503
+ }.r-sidebar {
504
+ grid-area: sidebar;
505
+ box-sizing: border-box;
506
+ }
507
+ @media screen and (width < 768px) {
508
+ .r-sidebar {
509
+ position: sticky;
510
+ width: calc(100% + 24px);
511
+ top: var(--r-header-height);
512
+ left: 0;
513
+ margin: 0 -12px;
514
+ background-color: var(--r-main-50);
515
+ border-bottom: 1px solid var(--r-main-200);
516
+ z-index: 10;
517
+ opacity: 0.98;
518
+ padding: 0;
519
+ overflow: auto;
520
+ }
530
521
  }
531
522
 
532
- .r-burger-line._bottom {
533
- transform: translateY(3px);
523
+ .r-sidebar-top-mock {
524
+ grid-row-start: 1;
525
+ grid-column-start: 1;
534
526
  }
535
527
 
536
- .r-header-input:checked ~ .r-header-burger .r-burger-line._bottom {
537
- transform: translateY(0) rotate(-45deg);
538
- margin-top: 0;
539
- }.r-dropdown {
540
- position: relative;
541
- color: var(--r-main-600);
542
- transition: color 0.2s 0.1s;
528
+ @media screen and (width < 768px) {
529
+ .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
530
+ display: none;
531
+ }
543
532
  }
544
- .r-dropdown:hover, .r-dropdown:focus-within {
545
- color: var(--r-main-950);
533
+
534
+ .r-sidebar-nav {
535
+ box-sizing: border-box;
546
536
  }
547
- .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
548
- visibility: visible;
549
- pointer-events: all;
550
- transform: translateY(20px);
551
- opacity: 1;
537
+ @media screen and (width < 768px) {
538
+ .r-sidebar-nav {
539
+ overflow: auto;
540
+ max-height: calc(100dvh - var(--r-header-height) - 41px);
541
+ }
552
542
  }
553
- .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
554
- transform: rotate(180deg);
543
+
544
+ .r-sidebar-drop {
545
+ margin-top: -4px;
546
+ padding-top: 4px;
555
547
  }
556
548
 
557
- .r-dropdown-summary {
558
- display: flex;
559
- justify-content: space-between;
560
- align-items: center;
561
- width: 100%;
549
+ .r-sidebar-sublist {
562
550
  position: relative;
563
- color: inherit;
564
- cursor: pointer;
565
- padding: 10px 4px;
566
- font-size: 16px;
567
- border: 0;
568
- background: none;
569
- z-index: 1;
570
- box-sizing: border-box;
551
+ padding-top: 2px;
571
552
  }
572
-
573
- .r-dropdown-chevron {
574
- display: block;
575
- margin-left: 6px;
576
- transition: transform 0.3s 0.1s;
577
- box-sizing: border-box;
553
+ .r-sidebar-sublist:hover::before {
554
+ background-color: var(--r-primary-800);
555
+ transition-delay: initial;
578
556
  }
579
557
 
580
- .r-dropdown-drop {
581
- list-style: none;
558
+ .r-sidebar-sublist::before {
559
+ content: "";
582
560
  position: absolute;
583
- top: 16px;
561
+ top: 0;
584
562
  left: -12px;
585
- visibility: hidden;
586
- pointer-events: none;
587
- opacity: 0;
588
- transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
589
- background-color: var(--r-main-50);
590
- border: 1px solid var(--r-main-100);
591
- border-radius: 8px;
592
- margin: 0;
593
- padding: 2px 6px;
594
- min-width: 120px;
595
- max-width: 180px;
563
+ right: 0;
564
+ height: 2px;
565
+ border-bottom-left-radius: 2px;
566
+ background-color: var(--r-main-200);
567
+ z-index: 1;
568
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
596
569
  box-sizing: border-box;
597
570
  }
598
571
 
599
- .r-dropdown-link {
600
- display: block;
601
- width: 100%;
602
- text-decoration: none;
603
- color: var(--r-main-700);
604
- padding: 4px 8px;
605
- margin-top: 4px;
606
- margin-bottom: 4px;
607
- border-radius: 4px;
608
- transition: background-color 0.2s;
572
+ .r-sidebar-nav {
573
+ padding: 32px 4px 32px 2px;
609
574
  box-sizing: border-box;
610
575
  }
611
- .r-dropdown-link:hover {
612
- color: var(--r-main-900);
613
- background-color: var(--r-main-100);
576
+ @media screen and (width < 768px) {
577
+ .r-sidebar-nav {
578
+ padding: 12px;
579
+ }
580
+ }
581
+ @media screen and (width >= 768px) {
582
+ .r-sidebar-nav {
583
+ position: sticky;
584
+ top: var(--r-header-height);
585
+ overflow: auto;
586
+ scrollbar-width: thin;
587
+ scrollbar-color: var(--r-main-200) transparent;
588
+ scrollbar-gutter: stable;
589
+ max-height: calc(100dvh - var(--r-header-height));
590
+ }
614
591
  }
615
592
 
616
- .r-dropdown-link._active {
617
- color: var(--r-primary-700);
618
- }.r-header-social {
619
- display: flex;
620
- flex: 1;
621
- justify-content: flex-end;
593
+ .r-sidebar-space {
594
+ box-sizing: border-box;
622
595
  }
623
- @media screen and (width >= 1024px) {
624
- .r-header-social {
625
- flex: none;
626
- justify-content: unset;
596
+ @media screen and (width < 768px) {
597
+ .r-sidebar-space {
598
+ display: block;
599
+ height: 40px;
627
600
  }
628
601
  }
629
602
 
630
- .r-header-social-git {
631
- color: var(--r-main-700);
632
- transition: color 0.2s;
633
- }
634
- .r-header-social-git:hover, .r-header-social-git:focus {
635
- color: var(--r-main-950);
636
- }.r-search-btn {
637
- position: relative;
638
- border-radius: 6px;
639
- background-color: var(--r-main-100);
640
- color: var(--r-main-600);
641
- padding: 8px 16px;
642
- border: 1px solid var(--r-main-200);
603
+ .r-sidebar-btn {
604
+ position: sticky;
605
+ top: 0;
606
+ display: flex;
643
607
  width: 100%;
644
- text-align: left;
645
- cursor: text;
608
+ font-size: 14px;
609
+ border: 0;
610
+ padding: 12px;
611
+ background: none;
612
+ cursor: pointer;
613
+ color: var(--r-main-800);
614
+ background-color: var(--r-main-50);
615
+ z-index: 1;
646
616
  box-sizing: border-box;
647
617
  }
648
618
  @media screen and (width >= 768px) {
649
- .r-search-btn {
650
- width: 220px;
651
- padding: 8px 96px 8px 16px;
619
+ .r-sidebar-btn {
620
+ display: none;
652
621
  }
653
622
  }
654
- .r-search-btn:hover {
655
- border-color: var(--r-main-600);
623
+
624
+ .r-sidebar-chevron {
625
+ display: inline;
626
+ margin-right: 6px;
627
+ transition: transform 0.2s;
628
+ box-sizing: border-box;
656
629
  }
657
- .r-search-btn:hover .r-search-kbd {
658
- color: var(--r-main-950);
630
+
631
+ .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
632
+ transform: rotate(90deg);
659
633
  }
660
634
 
661
- .r-search-title {
662
- display: block;
663
- overflow: hidden;
664
- text-overflow: ellipsis;
665
- white-space: nowrap;
635
+ .r-sidebar-list {
636
+ color: var(--r-main-700);
637
+ list-style: none;
638
+ padding: 0;
639
+ margin: 0;
640
+ font-size: 14px;
641
+ box-sizing: border-box;
666
642
  }
667
643
 
668
- .r-search-kbd {
669
- display: none;
670
- position: absolute;
671
- right: 6px;
672
- top: 50%;
673
- transform: translateY(-50%);
644
+ .r-sidebar-drop::details-content {
645
+ overflow: hidden;
646
+ transition: content-visibility 0.4s allow-discrete;
647
+ box-sizing: border-box;
674
648
  }
675
- @media screen and (width >= 768px) {
676
- .r-search-kbd {
677
- display: flex;
678
- }
649
+
650
+ .r-sidebar-sublist {
651
+ margin-left: 12px;
679
652
  }
680
653
 
681
- .r-search-dialog {
682
- width: 100%;
683
- height: 100%;
684
- background: none;
685
- max-width: none;
686
- max-height: none;
687
- border: none;
688
- padding: unset;
689
- transition: opacity 0.3s ease, overlay 0.4s ease-out allow-discrete, display 0.4s ease-out allow-discrete;
654
+ .r-sidebar-drop > .r-sidebar-sublist {
690
655
  opacity: 0;
691
- }
692
- .r-search-dialog::backdrop {
693
- backdrop-filter: blur(0);
694
- background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
695
- transition: backdrop-filter 0.4s ease-out, background 0.4s ease-out;
656
+ transition: opacity 0.2s ease;
696
657
  }
697
658
 
698
- .r-search-dialog[open] {
659
+ .r-sidebar-drop[open] > .r-sidebar-sublist {
699
660
  opacity: 1;
700
661
  }
701
- @starting-style {
702
- .r-search-dialog[open] {
703
- opacity: 0;
704
- }
705
- }
706
- .r-search-dialog[open]::backdrop {
707
- backdrop-filter: blur(4px);
708
- background: color-mix(in srgb, var(--r-main-900) 40%, transparent 100%);
709
- }
710
662
 
711
- .r-search-popup {
712
- position: fixed;
713
- left: 50%;
714
- transform: translateX(-50%);
715
- top: calc(var(--r-header-height) + 20px);
716
- z-index: 200;
717
- width: 100%;
718
- max-width: 540px;
719
- background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
720
- border: 2px solid var(--r-main-200);
721
- border-bottom-width: 0;
722
- border-radius: 12px 12px 0 0;
723
- opacity: 0;
724
- transform: translateX(-50%) translateY(-20px);
725
- transition: opacity 0.2s, transform 0.2s;
663
+ .r-sidebar-drop > .r-sidebar-sublist > .r-sidebar-li {
664
+ margin-top: -4rem;
665
+ transition: margin-top 0.3s ease;
726
666
  }
727
667
 
728
- .r-search-dialog[open] .r-search-popup {
729
- opacity: 1;
730
- transform: translateX(-50%) translateY(0);
731
- }
732
668
  @starting-style {
733
- .r-search-dialog[open] .r-search-popup {
734
- opacity: 0;
735
- transform: translateX(-50%) translateY(-20px);
669
+ .r-sidebar-drop[open]._starting-style > .r-sidebar-sublist > .r-sidebar-li {
670
+ margin-top: -4rem;
736
671
  }
737
672
  }
738
673
 
739
- .r-search-dialog._active .r-search-popup {
740
- border-radius: 12px;
741
- border-bottom-width: 2px;
674
+ .r-sidebar-drop[open] > .r-sidebar-sublist > .r-sidebar-li {
675
+ margin-top: 0;
742
676
  }
743
677
 
744
- .r-search-popup:has(.r-search-input:focus) {
745
- border-color: var(--r-main-300);
678
+ .r-sidebar-sublist .r-sidebar-link {
679
+ position: relative;
680
+ border-top-left-radius: 0;
681
+ border-bottom-left-radius: 0;
682
+ box-sizing: border-box;
683
+ }
684
+ .r-sidebar-sublist .r-sidebar-link::before {
685
+ content: "";
686
+ position: absolute;
687
+ left: 0;
688
+ top: -1px;
689
+ width: 1px;
690
+ height: calc(100% + 4px);
691
+ background-color: var(--r-main-200);
692
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
693
+ box-sizing: border-box;
746
694
  }
747
695
 
748
- .r-search-popup-header {
696
+ .r-sidebar-li {
749
697
  position: relative;
750
- border-bottom: 1px solid var(--r-main-200);
698
+ line-height: 1.5;
751
699
  }
752
700
 
753
- .r-search-input {
754
- background: none;
755
- padding: 16px 20px;
756
- border: none;
757
- border-bottom: 2px solid var(--r-main-100);
758
- width: 100%;
759
- font-size: 16px;
760
- box-sizing: border-box;
701
+ .r-sidebar-li._separator {
702
+ background: var(--r-main-200);
703
+ padding: 1px;
761
704
  }
762
- @media screen and (width >= 768px) {
763
- .r-search-input {
764
- padding: 16px 72px 16px 20px;
765
- }
705
+
706
+ .r-sidebar-li._droppable > a {
707
+ padding-right: 32px;
766
708
  }
767
- .r-search-input:hover {
768
- border-bottom-color: var(--r-main-300);
769
- }
770
- .r-search-input:focus {
771
- outline: none;
772
- border-bottom-color: var(--r-primary-600);
773
- }
774
- .r-search-input::placeholder {
775
- color: var(--r-main-500);
776
- }
777
-
778
- .r-search-popup-kbd {
779
- color: var(--r-main-600);
780
- right: 20px;
709
+
710
+ .r-sidebar-li-d0 {
711
+ margin-left: -8px;
781
712
  }
782
713
 
783
- .r-search-results {
784
- padding: 2px 8px 8px;
785
- max-height: min(400px, 100dvh - 200px);
786
- overflow-y: auto;
787
- list-style: none;
788
- scrollbar-width: thin;
789
- scrollbar-color: var(--r-main-200) transparent;
714
+ .r-sidebar-p {
790
715
  margin: 0;
791
- box-sizing: border-box;
716
+ padding: 4px 10px;
792
717
  }
793
718
 
794
- .r-search-item {
795
- display: block;
796
- text-decoration: none;
797
- color: var(--r-main-700);
798
- padding: 8px 12px;
799
- border: 1px solid var(--r-main-100);
800
- border-radius: 10px;
801
- width: 100%;
802
- margin-top: 6px;
803
- box-sizing: border-box;
804
- }
805
- .r-search-item:hover, .r-search-item:focus {
806
- color: var(--r-main-950);
807
- background-color: var(--r-main-50);
808
- border-color: var(--r-main-200);
719
+ .r-sidebar-heading {
720
+ color: var(--r-main-900);
721
+ font-weight: 600;
722
+ margin-block-end: 4px;
809
723
  }
810
-
811
- .r-search-item-title {
812
- margin: 0;
724
+ .r-sidebar-heading:not(:first-child) {
725
+ margin-block-start: 12px;
813
726
  }
814
727
 
815
- .r-search-item-desc {
816
- font-size: 14px;
817
- color: var(--r-main-600);
818
- margin: 12px 0 0;
819
- }.r-container {
820
- max-width: 1180px;
821
- padding-right: 12px;
822
- padding-left: 12px;
823
- margin-right: auto;
824
- margin-left: auto;
825
- box-sizing: border-box;
826
- }.r-article {
827
- padding: 20px 0 40px;
828
- grid-area: content;
829
- }
830
- @media screen and (width >= 1180px) {
831
- .r-article {
832
- padding: 32px 0 40px;
833
- }
834
- }
835
- .r-article > *:first-child {
836
- margin-top: 0;
837
- }
838
- .r-article > *:last-child {
839
- margin-bottom: 0;
728
+ .r-sidebar-link {
729
+ padding: 4px 10px;
730
+ color: inherit;
731
+ border-bottom: 2px solid transparent;
732
+ border-radius: 2px;
733
+ text-decoration: none;
734
+ display: -webkit-box;
735
+ -webkit-box-orient: vertical;
736
+ -webkit-line-clamp: 3;
737
+ overflow: hidden;
738
+ 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;
840
739
  }
841
740
 
842
- .r-checkbox {
843
- cursor: pointer;
844
- width: 20px;
845
- height: 20px;
846
- margin: 4px;
847
- vertical-align: middle;
848
- box-sizing: border-box;
741
+ .r-sidebar-link._target {
742
+ color: var(--r-primary-950);
743
+ background-color: var(--r-main-50);
849
744
  }
850
745
 
851
- .r-label {
852
- cursor: pointer;
746
+ .r-sidebar-link:hover {
747
+ color: var(--r-primary-800);
748
+ background-color: var(--r-main-100);
749
+ transition-delay: initial;
853
750
  }
854
-
855
- .r-task-ol,
856
- .r-task-ul {
857
- list-style: none;
751
+ .r-sidebar-link:hover::before {
752
+ background-color: currentColor;
753
+ transition-delay: initial;
858
754
  }
859
755
 
860
- .r-task-label {
861
- display: block;
862
- width: 100%;
863
- padding-top: 2px;
864
- padding-bottom: 2px;
865
- box-sizing: border-box;
756
+ .r-sidebar-link._active {
757
+ color: var(--r-primary-700);
758
+ background-color: var(--r-main-50);
866
759
  }
867
- .r-task-label:hover .r-checkbox {
868
- filter: brightness(0.8);
760
+ .r-sidebar-link._active::before {
761
+ background-color: currentColor;
869
762
  }
870
763
 
871
- .r-task-li.r-task-li {
872
- margin-block-start: 2px;
873
- margin-block-end: 2px;
764
+ .r-sidebar-drop-btn {
765
+ position: absolute;
766
+ right: 3px;
767
+ top: 5px;
768
+ border-radius: 4px;
769
+ padding: 4px;
770
+ list-style: none;
771
+ cursor: pointer;
772
+ transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
874
773
  }
875
-
876
- .r-label-text {
877
- vertical-align: middle;
878
- }.r-sidebar {
879
- grid-area: sidebar;
880
- box-sizing: border-box;
774
+ .r-sidebar-drop-btn:hover {
775
+ color: var(--r-primary-500);
776
+ transition-delay: initial;
881
777
  }
882
- @media screen and (width < 768px) {
883
- .r-sidebar {
884
- position: sticky;
885
- width: calc(100% + 24px);
886
- top: var(--r-header-height);
887
- left: 0;
888
- margin: 0 -12px;
889
- background-color: var(--r-main-50);
890
- border-bottom: 1px solid var(--r-main-200);
891
- z-index: 10;
892
- opacity: 0.98;
893
- padding: 0;
894
- overflow: auto;
895
- }
778
+ .r-sidebar-drop-btn::before {
779
+ content: "";
780
+ position: absolute;
781
+ inset: -4px;
896
782
  }
897
-
898
- .r-sidebar-top-mock {
899
- grid-row-start: 1;
900
- grid-column-start: 1;
783
+ .r-sidebar-drop-btn::-webkit-details-marker {
784
+ display: none;
901
785
  }
902
786
 
903
- @media screen and (width < 768px) {
904
- .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
905
- display: none;
906
- }
787
+ .r-sidebar-drop-icon {
788
+ display: block;
789
+ transition: transform 0.2s;
907
790
  }
908
791
 
909
- .r-sidebar-nav {
910
- box-sizing: border-box;
792
+ .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
793
+ transform: rotate(90deg);
794
+ }.r-header-menu {
795
+ display: flex;
796
+ justify-content: flex-end;
797
+ order: 1;
911
798
  }
912
- @media screen and (width < 768px) {
913
- .r-sidebar-nav {
914
- overflow: auto;
915
- max-height: calc(100dvh - var(--r-header-height) - 41px);
799
+ @media screen and (width >= 1024px) {
800
+ .r-header-menu {
801
+ flex: 1;
802
+ order: unset;
916
803
  }
917
804
  }
918
805
 
919
- .r-sidebar-drop {
920
- margin-top: -4px;
921
- padding-top: 4px;
922
- }
923
-
924
- .r-sidebar-sublist {
925
- position: relative;
926
- padding-top: 2px;
927
- }
928
- .r-sidebar-sublist:hover::before {
929
- background-color: var(--r-primary-800);
930
- transition-delay: initial;
806
+ .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
807
+ display: flex;
931
808
  }
932
809
 
933
- .r-sidebar-sublist::before {
934
- content: "";
935
- position: absolute;
936
- top: 0;
937
- left: -12px;
938
- right: 0;
939
- height: 2px;
940
- border-bottom-left-radius: 2px;
941
- background-color: var(--r-main-200);
810
+ .r-header-responsive {
811
+ display: none;
812
+ justify-content: flex-end;
813
+ flex: 1;
814
+ gap: 24px;
942
815
  z-index: 1;
943
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
944
- box-sizing: border-box;
945
816
  }
946
-
947
- .r-sidebar-nav {
948
- padding: 32px 4px 32px 2px;
949
- box-sizing: border-box;
950
- }
951
- @media screen and (width < 768px) {
952
- .r-sidebar-nav {
817
+ @media screen and (width < 1024px) {
818
+ .r-header-responsive {
819
+ flex-direction: column-reverse;
953
820
  padding: 12px;
821
+ background-color: var(--r-main-50);
822
+ position: fixed;
823
+ top: 60px;
824
+ right: 0;
825
+ bottom: 0;
826
+ left: 0;
954
827
  }
955
828
  }
956
- @media screen and (width >= 768px) {
957
- .r-sidebar-nav {
958
- position: sticky;
959
- top: var(--r-header-height);
960
- overflow: auto;
961
- scrollbar-width: thin;
962
- scrollbar-color: var(--r-main-200) transparent;
963
- scrollbar-gutter: stable;
964
- max-height: calc(100dvh - var(--r-header-height));
965
- }
966
- }
967
-
968
- .r-sidebar-space {
969
- box-sizing: border-box;
970
- }
971
- @media screen and (width < 768px) {
972
- .r-sidebar-space {
973
- display: block;
974
- height: 40px;
829
+ @media screen and (width >= 1024px) {
830
+ .r-header-responsive {
831
+ display: flex;
832
+ justify-content: space-between;
833
+ align-items: center;
975
834
  }
976
835
  }
977
836
 
978
- .r-sidebar-btn {
979
- position: sticky;
980
- top: 0;
837
+ .r-header-burger {
838
+ position: relative;
981
839
  display: flex;
982
- width: 100%;
983
- font-size: 14px;
984
- border: 0;
985
- padding: 12px;
986
- background: none;
840
+ align-items: center;
841
+ justify-content: center;
842
+ height: 32px;
843
+ width: 32px;
987
844
  cursor: pointer;
988
- color: var(--r-main-800);
989
- background-color: var(--r-main-50);
990
- z-index: 1;
845
+ background: none;
846
+ border: none;
991
847
  box-sizing: border-box;
992
848
  }
993
- @media screen and (width >= 768px) {
994
- .r-sidebar-btn {
849
+ @media screen and (width >= 1024px) {
850
+ .r-header-burger {
995
851
  display: none;
996
852
  }
997
853
  }
998
854
 
999
- .r-sidebar-chevron {
1000
- display: inline;
1001
- margin-right: 6px;
1002
- transition: transform 0.2s;
855
+ .r-burger-line {
856
+ display: block;
857
+ width: 20px;
858
+ height: 1.5px;
859
+ position: absolute;
860
+ background-color: var(--r-main-700);
861
+ margin: auto;
862
+ transition: transform 0.3s;
1003
863
  box-sizing: border-box;
1004
864
  }
1005
865
 
1006
- .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
1007
- transform: rotate(90deg);
866
+ .r-burger-line._top {
867
+ transform: translateY(-3px);
1008
868
  }
1009
869
 
1010
- .r-sidebar-list {
1011
- color: var(--r-main-700);
1012
- list-style: none;
1013
- padding: 0;
1014
- margin: 0;
1015
- font-size: 14px;
870
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
871
+ transform: translateY(0) rotate(45deg);
872
+ margin-top: 0;
873
+ }
874
+
875
+ .r-burger-line._bottom {
876
+ transform: translateY(3px);
877
+ }
878
+
879
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._bottom {
880
+ transform: translateY(0) rotate(-45deg);
881
+ margin-top: 0;
882
+ }.r-search-btn {
883
+ position: relative;
884
+ border-radius: 6px;
885
+ background-color: var(--r-main-100);
886
+ color: var(--r-main-600);
887
+ padding: 8px 16px;
888
+ border: 1px solid var(--r-main-200);
889
+ width: 100%;
890
+ text-align: left;
891
+ cursor: text;
1016
892
  box-sizing: border-box;
1017
893
  }
894
+ @media screen and (width >= 768px) {
895
+ .r-search-btn {
896
+ width: 220px;
897
+ padding: 8px 96px 8px 16px;
898
+ }
899
+ }
900
+ .r-search-btn:hover {
901
+ border-color: var(--r-main-600);
902
+ }
903
+ .r-search-btn:hover .r-search-kbd {
904
+ color: var(--r-main-950);
905
+ }
1018
906
 
1019
- .r-sidebar-drop::details-content {
907
+ .r-search-title {
908
+ display: block;
1020
909
  overflow: hidden;
1021
- transition: content-visibility 0.4s allow-discrete;
1022
- box-sizing: border-box;
910
+ text-overflow: ellipsis;
911
+ white-space: nowrap;
1023
912
  }
1024
913
 
1025
- .r-sidebar-sublist {
1026
- margin-left: 12px;
914
+ .r-search-kbd {
915
+ display: none;
916
+ position: absolute;
917
+ right: 6px;
918
+ top: 50%;
919
+ transform: translateY(-50%);
920
+ }
921
+ @media screen and (width >= 768px) {
922
+ .r-search-kbd {
923
+ display: flex;
924
+ }
1027
925
  }
1028
926
 
1029
- .r-sidebar-drop > .r-sidebar-sublist {
927
+ .r-search-dialog {
928
+ width: 100%;
929
+ height: 100%;
930
+ background: none;
931
+ max-width: none;
932
+ max-height: none;
933
+ border: none;
934
+ padding: unset;
935
+ transition: opacity 0.3s ease, overlay 0.4s ease-out allow-discrete, display 0.4s ease-out allow-discrete;
1030
936
  opacity: 0;
1031
- transition: opacity 0.2s ease;
937
+ }
938
+ .r-search-dialog::backdrop {
939
+ backdrop-filter: blur(0);
940
+ background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
941
+ transition: backdrop-filter 0.4s ease-out, background 0.4s ease-out;
1032
942
  }
1033
943
 
1034
- .r-sidebar-drop[open] > .r-sidebar-sublist {
944
+ .r-search-dialog[open] {
1035
945
  opacity: 1;
1036
946
  }
947
+ @starting-style {
948
+ .r-search-dialog[open] {
949
+ opacity: 0;
950
+ }
951
+ }
952
+ .r-search-dialog[open]::backdrop {
953
+ backdrop-filter: blur(4px);
954
+ background: color-mix(in srgb, var(--r-main-900) 40%, transparent 100%);
955
+ }
1037
956
 
1038
- .r-sidebar-drop > .r-sidebar-sublist > .r-sidebar-li {
1039
- margin-top: -4rem;
1040
- transition: margin-top 0.3s ease;
957
+ .r-search-popup {
958
+ position: fixed;
959
+ left: 50%;
960
+ transform: translateX(-50%);
961
+ top: calc(var(--r-header-height) + 20px);
962
+ z-index: 200;
963
+ width: 100%;
964
+ max-width: 540px;
965
+ background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
966
+ border: 2px solid var(--r-main-200);
967
+ border-bottom-width: 0;
968
+ border-radius: 12px 12px 0 0;
969
+ opacity: 0;
970
+ transform: translateX(-50%) translateY(-20px);
971
+ transition: opacity 0.2s, transform 0.2s;
1041
972
  }
1042
973
 
974
+ .r-search-dialog[open] .r-search-popup {
975
+ opacity: 1;
976
+ transform: translateX(-50%) translateY(0);
977
+ }
1043
978
  @starting-style {
1044
- .r-sidebar-drop[open]._starting-style > .r-sidebar-sublist > .r-sidebar-li {
1045
- margin-top: -4rem;
979
+ .r-search-dialog[open] .r-search-popup {
980
+ opacity: 0;
981
+ transform: translateX(-50%) translateY(-20px);
1046
982
  }
1047
983
  }
1048
984
 
1049
- .r-sidebar-drop[open] > .r-sidebar-sublist > .r-sidebar-li {
1050
- margin-top: 0;
985
+ .r-search-dialog._active .r-search-popup {
986
+ border-radius: 12px;
987
+ border-bottom-width: 2px;
1051
988
  }
1052
989
 
1053
- .r-sidebar-sublist .r-sidebar-link {
1054
- position: relative;
1055
- border-top-left-radius: 0;
1056
- border-bottom-left-radius: 0;
1057
- box-sizing: border-box;
1058
- }
1059
- .r-sidebar-sublist .r-sidebar-link::before {
1060
- content: "";
1061
- position: absolute;
1062
- left: 0;
1063
- top: -1px;
1064
- width: 1px;
1065
- height: calc(100% + 4px);
1066
- background-color: var(--r-main-200);
1067
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1068
- box-sizing: border-box;
990
+ .r-search-popup:has(.r-search-input:focus) {
991
+ border-color: var(--r-main-300);
1069
992
  }
1070
993
 
1071
- .r-sidebar-li {
994
+ .r-search-popup-header {
1072
995
  position: relative;
1073
- line-height: 1.5;
996
+ border-bottom: 1px solid var(--r-main-200);
1074
997
  }
1075
998
 
1076
- .r-sidebar-li._separator {
1077
- background: var(--r-main-200);
1078
- padding: 1px;
999
+ .r-search-input {
1000
+ background: none;
1001
+ padding: 16px 20px;
1002
+ border: none;
1003
+ border-bottom: 2px solid var(--r-main-100);
1004
+ width: 100%;
1005
+ font-size: 16px;
1006
+ box-sizing: border-box;
1079
1007
  }
1080
-
1081
- .r-sidebar-li._droppable > a {
1082
- padding-right: 32px;
1008
+ @media screen and (width >= 768px) {
1009
+ .r-search-input {
1010
+ padding: 16px 72px 16px 20px;
1011
+ }
1012
+ }
1013
+ .r-search-input:hover {
1014
+ border-bottom-color: var(--r-main-300);
1015
+ }
1016
+ .r-search-input:focus {
1017
+ outline: none;
1018
+ border-bottom-color: var(--r-primary-600);
1019
+ }
1020
+ .r-search-input::placeholder {
1021
+ color: var(--r-main-500);
1083
1022
  }
1084
1023
 
1085
- .r-sidebar-li-d0 {
1086
- margin-left: -8px;
1024
+ .r-search-popup-kbd {
1025
+ color: var(--r-main-600);
1026
+ right: 20px;
1087
1027
  }
1088
1028
 
1089
- .r-sidebar-p {
1029
+ .r-search-results {
1030
+ padding: 2px 8px 8px;
1031
+ max-height: min(400px, 100dvh - 200px);
1032
+ overflow-y: auto;
1033
+ list-style: none;
1034
+ scrollbar-width: thin;
1035
+ scrollbar-color: var(--r-main-200) transparent;
1090
1036
  margin: 0;
1091
- padding: 4px 10px;
1037
+ box-sizing: border-box;
1092
1038
  }
1093
1039
 
1094
- .r-sidebar-heading {
1095
- color: var(--r-main-900);
1096
- font-weight: 600;
1097
- margin-block-end: 4px;
1040
+ .r-search-item {
1041
+ display: block;
1042
+ text-decoration: none;
1043
+ color: var(--r-main-700);
1044
+ padding: 8px 12px;
1045
+ border: 1px solid var(--r-main-100);
1046
+ border-radius: 10px;
1047
+ width: 100%;
1048
+ margin-top: 6px;
1049
+ box-sizing: border-box;
1098
1050
  }
1099
- .r-sidebar-heading:not(:first-child) {
1100
- margin-block-start: 12px;
1051
+ .r-search-item:hover, .r-search-item:focus {
1052
+ color: var(--r-main-950);
1053
+ background-color: var(--r-main-50);
1054
+ border-color: var(--r-main-200);
1101
1055
  }
1102
1056
 
1103
- .r-sidebar-link {
1104
- padding: 4px 10px;
1105
- color: inherit;
1106
- border-bottom: 2px solid transparent;
1107
- border-radius: 2px;
1108
- text-decoration: none;
1109
- display: -webkit-box;
1110
- -webkit-box-orient: vertical;
1111
- -webkit-line-clamp: 3;
1112
- overflow: hidden;
1113
- 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;
1057
+ .r-search-item-title {
1058
+ margin: 0;
1059
+ }
1060
+
1061
+ .r-search-item-desc {
1062
+ font-size: 14px;
1063
+ color: var(--r-main-600);
1064
+ margin: 12px 0 0;
1065
+ }.r-dropdown {
1066
+ position: relative;
1067
+ color: var(--r-main-600);
1068
+ transition: color 0.2s 0.1s;
1069
+ }
1070
+ .r-dropdown:hover, .r-dropdown:focus-within {
1071
+ color: var(--r-main-950);
1114
1072
  }
1115
-
1116
- .r-sidebar-link._target {
1117
- color: var(--r-primary-950);
1118
- background-color: var(--r-main-50);
1073
+ .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
1074
+ visibility: visible;
1075
+ pointer-events: all;
1076
+ transform: translateY(20px);
1077
+ opacity: 1;
1078
+ }
1079
+ .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
1080
+ transform: rotate(180deg);
1119
1081
  }
1120
1082
 
1121
- .r-sidebar-link:hover {
1122
- color: var(--r-primary-800);
1123
- background-color: var(--r-main-100);
1124
- transition-delay: initial;
1083
+ .r-dropdown-summary {
1084
+ display: flex;
1085
+ justify-content: space-between;
1086
+ align-items: center;
1087
+ width: 100%;
1088
+ position: relative;
1089
+ color: inherit;
1090
+ cursor: pointer;
1091
+ padding: 10px 4px;
1092
+ font-size: 16px;
1093
+ border: 0;
1094
+ background: none;
1095
+ z-index: 1;
1096
+ box-sizing: border-box;
1125
1097
  }
1126
- .r-sidebar-link:hover::before {
1127
- background-color: currentColor;
1128
- transition-delay: initial;
1098
+
1099
+ .r-dropdown-chevron {
1100
+ display: block;
1101
+ margin-left: 6px;
1102
+ transition: transform 0.3s 0.1s;
1103
+ box-sizing: border-box;
1129
1104
  }
1130
1105
 
1131
- .r-sidebar-link._active {
1132
- color: var(--r-primary-700);
1106
+ .r-dropdown-drop {
1107
+ list-style: none;
1108
+ position: absolute;
1109
+ top: 16px;
1110
+ left: -12px;
1111
+ visibility: hidden;
1112
+ pointer-events: none;
1113
+ opacity: 0;
1114
+ transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
1133
1115
  background-color: var(--r-main-50);
1134
- }
1135
- .r-sidebar-link._active::before {
1136
- background-color: currentColor;
1116
+ border: 1px solid var(--r-main-100);
1117
+ border-radius: 8px;
1118
+ margin: 0;
1119
+ padding: 2px 6px;
1120
+ min-width: 120px;
1121
+ max-width: 180px;
1122
+ box-sizing: border-box;
1137
1123
  }
1138
1124
 
1139
- .r-sidebar-drop-btn {
1140
- position: absolute;
1141
- right: 3px;
1142
- top: 5px;
1125
+ .r-dropdown-link {
1126
+ display: block;
1127
+ width: 100%;
1128
+ text-decoration: none;
1129
+ color: var(--r-main-700);
1130
+ padding: 4px 8px;
1131
+ margin-top: 4px;
1132
+ margin-bottom: 4px;
1143
1133
  border-radius: 4px;
1144
- padding: 4px;
1145
- list-style: none;
1146
- cursor: pointer;
1147
- transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1134
+ transition: background-color 0.2s;
1135
+ box-sizing: border-box;
1148
1136
  }
1149
- .r-sidebar-drop-btn:hover {
1150
- color: var(--r-primary-500);
1151
- transition-delay: initial;
1137
+ .r-dropdown-link:hover {
1138
+ color: var(--r-main-900);
1139
+ background-color: var(--r-main-100);
1152
1140
  }
1153
- .r-sidebar-drop-btn::before {
1154
- content: "";
1155
- position: absolute;
1156
- inset: -4px;
1141
+
1142
+ .r-dropdown-link._active {
1143
+ color: var(--r-primary-700);
1144
+ }.r-header-social {
1145
+ display: flex;
1146
+ flex: 1;
1147
+ justify-content: flex-end;
1157
1148
  }
1158
- .r-sidebar-drop-btn::-webkit-details-marker {
1159
- display: none;
1149
+ @media screen and (width >= 1024px) {
1150
+ .r-header-social {
1151
+ flex: none;
1152
+ justify-content: unset;
1153
+ }
1160
1154
  }
1161
1155
 
1162
- .r-sidebar-drop-icon {
1163
- display: block;
1164
- transition: transform 0.2s;
1156
+ .r-header-social-git {
1157
+ color: var(--r-main-700);
1158
+ transition: color 0.2s;
1165
1159
  }
1166
-
1167
- .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
1168
- transform: rotate(90deg);
1160
+ .r-header-social-git:hover, .r-header-social-git:focus {
1161
+ color: var(--r-main-950);
1162
+ }.r-container {
1163
+ max-width: 1180px;
1164
+ padding-right: 12px;
1165
+ padding-left: 12px;
1166
+ margin-right: auto;
1167
+ margin-left: auto;
1168
+ box-sizing: border-box;
1169
1169
  }.r-theme-switcher {
1170
1170
  position: relative;
1171
1171
  display: flex;
@@ -1252,96 +1252,6 @@
1252
1252
  user-select: none;
1253
1253
  pointer-events: none;
1254
1254
  box-sizing: border-box;
1255
- }.r-git-logo {
1256
- display: block;
1257
- }.r-backdrop {
1258
- position: fixed;
1259
- top: 0;
1260
- right: 0;
1261
- bottom: 0;
1262
- left: 0;
1263
- opacity: 0;
1264
- visibility: hidden;
1265
- pointer-events: none;
1266
- z-index: 100;
1267
- }
1268
-
1269
- .r-backdrop._visible {
1270
- opacity: 1;
1271
- visibility: visible;
1272
- pointer-events: all;
1273
- }.r-external-mark {
1274
- position: relative;
1275
- vertical-align: text-top;
1276
- display: inline-block;
1277
- margin-left: -4px;
1278
- margin-right: 2px;
1279
- width: 6px;
1280
- height: 6px;
1281
- box-sizing: border-box;
1282
- }
1283
- .r-external-mark::after {
1284
- content: "";
1285
- position: absolute;
1286
- top: 0;
1287
- right: 0;
1288
- width: 100%;
1289
- height: 100%;
1290
- border-top: 1px solid currentColor;
1291
- border-right: 1px solid currentColor;
1292
- box-sizing: border-box;
1293
- }
1294
- .r-external-mark::before {
1295
- content: "";
1296
- position: absolute;
1297
- top: 0;
1298
- right: 0;
1299
- width: 3px;
1300
- height: 3px;
1301
- background-color: currentColor;
1302
- border-radius: 0 0 0 4px;
1303
- box-sizing: border-box;
1304
- }.r-breadcrumbs {
1305
- grid-area: breadcrumbs;
1306
- list-style: none;
1307
- margin: 0;
1308
- padding: 20px 0 0;
1309
- line-height: 2;
1310
- }
1311
- @media screen and (width >= 768px) {
1312
- .r-breadcrumbs {
1313
- padding: 32px 0 0;
1314
- }
1315
- }
1316
-
1317
- .r-breadcrumb {
1318
- display: inline;
1319
- }
1320
-
1321
- .r-breadcrumb._previous::after {
1322
- content: "/";
1323
- font-weight: 600;
1324
- margin-inline: 8px;
1325
- }
1326
-
1327
- .r-breadcrumb-link {
1328
- color: var(--r-main-700);
1329
- text-decoration: none;
1330
- }
1331
- .r-breadcrumb-link:hover {
1332
- color: var(--r-primary-800);
1333
- }
1334
-
1335
- .r-breadcrumb-link,
1336
- .r-breadcrumb-title {
1337
- display: inline;
1338
- padding: 6px 0;
1339
- margin: 0;
1340
- }
1341
-
1342
- .r-breadcrumb-title {
1343
- color: var(--r-main-950);
1344
- font-weight: 600;
1345
1255
  }.r-contents {
1346
1256
  grid-area: contents;
1347
1257
  }
@@ -1567,20 +1477,61 @@
1567
1477
  }
1568
1478
  }
1569
1479
 
1570
- .r-contents-git {
1571
- display: block;
1572
- width: 100%;
1573
- position: relative;
1574
- color: var(--r-main-600);
1575
- text-decoration: none;
1576
- padding-top: 10px;
1577
- padding-bottom: 10px;
1578
- font-size: 14px;
1480
+ .r-contents-git {
1481
+ display: block;
1482
+ width: 100%;
1483
+ position: relative;
1484
+ color: var(--r-main-600);
1485
+ text-decoration: none;
1486
+ padding-top: 10px;
1487
+ padding-bottom: 10px;
1488
+ font-size: 14px;
1489
+ font-weight: 600;
1490
+ box-sizing: border-box;
1491
+ }
1492
+ .r-contents-git:hover {
1493
+ color: var(--r-main-900);
1494
+ }.r-breadcrumbs {
1495
+ grid-area: breadcrumbs;
1496
+ list-style: none;
1497
+ margin: 0;
1498
+ padding: 20px 0 0;
1499
+ line-height: 2;
1500
+ }
1501
+ @media screen and (width >= 768px) {
1502
+ .r-breadcrumbs {
1503
+ padding: 32px 0 0;
1504
+ }
1505
+ }
1506
+
1507
+ .r-breadcrumb {
1508
+ display: inline;
1509
+ }
1510
+
1511
+ .r-breadcrumb._previous::after {
1512
+ content: "/";
1513
+ font-weight: 600;
1514
+ margin-inline: 8px;
1515
+ }
1516
+
1517
+ .r-breadcrumb-link {
1518
+ color: var(--r-main-700);
1519
+ text-decoration: none;
1520
+ }
1521
+ .r-breadcrumb-link:hover {
1522
+ color: var(--r-primary-800);
1523
+ }
1524
+
1525
+ .r-breadcrumb-link,
1526
+ .r-breadcrumb-title {
1527
+ display: inline;
1528
+ padding: 6px 0;
1529
+ margin: 0;
1530
+ }
1531
+
1532
+ .r-breadcrumb-title {
1533
+ color: var(--r-main-950);
1579
1534
  font-weight: 600;
1580
- box-sizing: border-box;
1581
- }
1582
- .r-contents-git:hover {
1583
- color: var(--r-main-900);
1584
1535
  }.r-pagination {
1585
1536
  grid-area: pagination;
1586
1537
  display: grid;
@@ -1656,6 +1607,55 @@
1656
1607
  }.r-last-modified {
1657
1608
  color: var(--r-main-700);
1658
1609
  margin-block-start: 16px;
1610
+ }.r-backdrop {
1611
+ position: fixed;
1612
+ top: 0;
1613
+ right: 0;
1614
+ bottom: 0;
1615
+ left: 0;
1616
+ opacity: 0;
1617
+ visibility: hidden;
1618
+ pointer-events: none;
1619
+ z-index: 100;
1620
+ }
1621
+
1622
+ .r-backdrop._visible {
1623
+ opacity: 1;
1624
+ visibility: visible;
1625
+ pointer-events: all;
1626
+ }.r-git-logo {
1627
+ display: block;
1628
+ }.r-external-mark {
1629
+ position: relative;
1630
+ vertical-align: text-top;
1631
+ display: inline-block;
1632
+ margin-left: -4px;
1633
+ margin-right: 2px;
1634
+ width: 6px;
1635
+ height: 6px;
1636
+ box-sizing: border-box;
1637
+ }
1638
+ .r-external-mark::after {
1639
+ content: "";
1640
+ position: absolute;
1641
+ top: 0;
1642
+ right: 0;
1643
+ width: 100%;
1644
+ height: 100%;
1645
+ border-top: 1px solid currentColor;
1646
+ border-right: 1px solid currentColor;
1647
+ box-sizing: border-box;
1648
+ }
1649
+ .r-external-mark::before {
1650
+ content: "";
1651
+ position: absolute;
1652
+ top: 0;
1653
+ right: 0;
1654
+ width: 3px;
1655
+ height: 3px;
1656
+ background-color: currentColor;
1657
+ border-radius: 0 0 0 4px;
1658
+ box-sizing: border-box;
1659
1659
  }.r-kbd-container {
1660
1660
  display: flex;
1661
1661
  gap: 4px;
@@ -1752,46 +1752,6 @@
1752
1752
  scrollbar-color: var(--r-main-200) transparent;
1753
1753
  box-sizing: border-box;
1754
1754
  z-index: 1;
1755
- }.r-h1 {
1756
- font-size: 32px;
1757
- line-height: 1.4;
1758
- margin-block-start: 0.67em;
1759
- margin-block-end: 0.67em;
1760
- }
1761
-
1762
- .r-h2 {
1763
- font-size: 26px;
1764
- line-height: 1.4;
1765
- margin-block-start: 0.83em;
1766
- margin-block-end: 0.83em;
1767
- }
1768
-
1769
- .r-h3 {
1770
- font-size: 22px;
1771
- line-height: 1.4;
1772
- margin-block-start: 1em;
1773
- margin-block-end: 1em;
1774
- }
1775
-
1776
- .r-h4 {
1777
- font-size: 20px;
1778
- line-height: 1.4;
1779
- margin-block-start: 1.33em;
1780
- margin-block-end: 1.33em;
1781
- }
1782
-
1783
- .r-h5 {
1784
- font-size: 18px;
1785
- line-height: 1.4;
1786
- margin-block-start: 1.5em;
1787
- margin-block-end: 1.5em;
1788
- }
1789
-
1790
- .r-h6 {
1791
- font-size: 16px;
1792
- line-height: 1.4;
1793
- margin-block-start: 1.8em;
1794
- margin-block-end: 1.8em;
1795
1755
  }.r-blockquote {
1796
1756
  padding: 4px 12px 4px 20px;
1797
1757
  border: 4px solid var(--r-main-100);
@@ -1849,13 +1809,53 @@
1849
1809
  }
1850
1810
  .r-blockquote-caution .r-blockquote-title {
1851
1811
  color: var(--r-caution);
1852
- }.r-p {
1853
- line-height: 1.8;
1812
+ }.r-h1 {
1813
+ font-size: 32px;
1814
+ line-height: 1.4;
1815
+ margin-block-start: 0.67em;
1816
+ margin-block-end: 0.67em;
1817
+ }
1818
+
1819
+ .r-h2 {
1820
+ font-size: 26px;
1821
+ line-height: 1.4;
1822
+ margin-block-start: 0.83em;
1823
+ margin-block-end: 0.83em;
1824
+ }
1825
+
1826
+ .r-h3 {
1827
+ font-size: 22px;
1828
+ line-height: 1.4;
1854
1829
  margin-block-start: 1em;
1855
1830
  margin-block-end: 1em;
1831
+ }
1832
+
1833
+ .r-h4 {
1834
+ font-size: 20px;
1835
+ line-height: 1.4;
1836
+ margin-block-start: 1.33em;
1837
+ margin-block-end: 1.33em;
1838
+ }
1839
+
1840
+ .r-h5 {
1841
+ font-size: 18px;
1842
+ line-height: 1.4;
1843
+ margin-block-start: 1.5em;
1844
+ margin-block-end: 1.5em;
1845
+ }
1846
+
1847
+ .r-h6 {
1848
+ font-size: 16px;
1849
+ line-height: 1.4;
1850
+ margin-block-start: 1.8em;
1851
+ margin-block-end: 1.8em;
1856
1852
  }.r-img {
1857
1853
  max-width: 100%;
1858
1854
  box-sizing: border-box;
1855
+ }.r-p {
1856
+ line-height: 1.8;
1857
+ margin-block-start: 1em;
1858
+ margin-block-end: 1em;
1859
1859
  }.r-tabs {
1860
1860
  margin-block-start: 1.5em;
1861
1861
  margin-block-end: 1.75em;
@@ -1897,55 +1897,6 @@
1897
1897
 
1898
1898
  .r-tab-header-code {
1899
1899
  font-family: var(--monospace-font, monospace, monospace);
1900
- }.r-content-link {
1901
- text-decoration: none;
1902
- color: inherit;
1903
- text-decoration: underline;
1904
- text-decoration-color: var(--r-primary-500);
1905
- text-underline-offset: 3px;
1906
- transition: text-decoration-offset 0.2s ease;
1907
- }
1908
- .r-content-link:hover {
1909
- color: var(--r-main-700);
1910
- text-decoration-color: var(--r-primary-400);
1911
- text-underline-offset: 2px;
1912
- text-decoration-thickness: 2px;
1913
- }
1914
- .r-content-link:active {
1915
- color: var(--r-primary-600);
1916
- }
1917
-
1918
- .r-content-link-external {
1919
- position: relative;
1920
- vertical-align: text-top;
1921
- display: inline-block;
1922
- margin-left: -4px;
1923
- margin-right: 2px;
1924
- width: 6px;
1925
- height: 6px;
1926
- box-sizing: border-box;
1927
- }
1928
- .r-content-link-external::after {
1929
- content: "";
1930
- position: absolute;
1931
- top: 0;
1932
- right: 0;
1933
- width: 100%;
1934
- height: 100%;
1935
- border-top: 1px solid currentColor;
1936
- border-right: 1px solid currentColor;
1937
- box-sizing: border-box;
1938
- }
1939
- .r-content-link-external::before {
1940
- content: "";
1941
- position: absolute;
1942
- top: 0;
1943
- right: 0;
1944
- width: 3px;
1945
- height: 3px;
1946
- background-color: currentColor;
1947
- border-radius: 0 0 0 4px;
1948
- box-sizing: border-box;
1949
1900
  }.r-copy-button {
1950
1901
  position: relative;
1951
1902
  padding: 6px;
@@ -2017,6 +1968,55 @@
2017
1968
  .r-copy-text:active,
2018
1969
  .r-copy-text._active {
2019
1970
  color: var(--r-success);
1971
+ }.r-content-link {
1972
+ text-decoration: none;
1973
+ color: inherit;
1974
+ text-decoration: underline;
1975
+ text-decoration-color: var(--r-primary-500);
1976
+ text-underline-offset: 3px;
1977
+ transition: text-decoration-offset 0.2s ease;
1978
+ }
1979
+ .r-content-link:hover {
1980
+ color: var(--r-main-700);
1981
+ text-decoration-color: var(--r-primary-400);
1982
+ text-underline-offset: 2px;
1983
+ text-decoration-thickness: 2px;
1984
+ }
1985
+ .r-content-link:active {
1986
+ color: var(--r-primary-600);
1987
+ }
1988
+
1989
+ .r-content-link-external {
1990
+ position: relative;
1991
+ vertical-align: text-top;
1992
+ display: inline-block;
1993
+ margin-left: -4px;
1994
+ margin-right: 2px;
1995
+ width: 6px;
1996
+ height: 6px;
1997
+ box-sizing: border-box;
1998
+ }
1999
+ .r-content-link-external::after {
2000
+ content: "";
2001
+ position: absolute;
2002
+ top: 0;
2003
+ right: 0;
2004
+ width: 100%;
2005
+ height: 100%;
2006
+ border-top: 1px solid currentColor;
2007
+ border-right: 1px solid currentColor;
2008
+ box-sizing: border-box;
2009
+ }
2010
+ .r-content-link-external::before {
2011
+ content: "";
2012
+ position: absolute;
2013
+ top: 0;
2014
+ right: 0;
2015
+ width: 3px;
2016
+ height: 3px;
2017
+ background-color: currentColor;
2018
+ border-radius: 0 0 0 4px;
2019
+ box-sizing: border-box;
2020
2020
  }.r-li {
2021
2021
  line-height: 1.8;
2022
2022
  margin-block-start: 6px;
@@ -2132,10 +2132,10 @@
2132
2132
 
2133
2133
  .r-task-label-text {
2134
2134
  vertical-align: middle;
2135
- }.r-task-ul {
2136
- list-style: none;
2137
2135
  }.r-task-ol {
2138
2136
  list-style: none;
2137
+ }.r-task-ul {
2138
+ list-style: none;
2139
2139
  }.r-tooltip {
2140
2140
  font-family: var(--monospace-font, monospace, monospace);
2141
2141
  display: none;