robindoc 0.0.0-experimental-7477c3a → 0.0.0-experimental-4759c95

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 +779 -779
  2. package/package.json +1 -1
package/lib/styles.css CHANGED
@@ -154,42 +154,6 @@
154
154
  }
155
155
  .r-powered-link:hover {
156
156
  color: var(--r-primary-900);
157
- }.r-docs-container {
158
- min-height: calc(100dvh - var(--r-header-height));
159
- overflow-wrap: break-word;
160
- box-sizing: border-box;
161
- }
162
- @media screen and (width >= 768px) {
163
- .r-docs-container {
164
- display: grid;
165
- justify-content: center;
166
- column-gap: 32px;
167
- grid-template-areas: "sidebar breadcrumbs" "sidebar contents" "sidebar content" "sidebar pagination";
168
- grid-template-columns: 1fr calc(100% - 248px);
169
- grid-template-rows: auto auto 1fr auto;
170
- }
171
- }
172
- @media screen and (width >= 1180px) {
173
- .r-docs-container {
174
- column-gap: 40px;
175
- grid-template-areas: "sidebar breadcrumbs contents" "sidebar content contents" "sidebar pagination contents";
176
- grid-template-columns: 200px 640px 238px;
177
- grid-template-rows: auto 1fr auto;
178
- }
179
- }.r-blog-container {
180
- min-height: calc(100dvh - var(--r-header-height));
181
- overflow-wrap: break-word;
182
- box-sizing: border-box;
183
- }
184
- @media screen and (width >= 1180px) {
185
- .r-blog-container {
186
- display: grid;
187
- justify-content: space-between;
188
- column-gap: 40px;
189
- grid-template-areas: "breadcrumbs contents" "content contents" "pagination contents";
190
- grid-template-columns: 760px 220px;
191
- grid-template-rows: auto 1fr auto;
192
- }
193
157
  }.r-root {
194
158
  --r-header-height: 60px;
195
159
  position: relative;
@@ -423,15 +387,51 @@
423
387
  --r-cl-60: #86181d;
424
388
  --r-cl-61: #144620;
425
389
  --r-cl-62: #c24e00;
426
- }.r-page-container {
390
+ }.r-docs-container {
391
+ min-height: calc(100dvh - var(--r-header-height));
392
+ overflow-wrap: break-word;
393
+ box-sizing: border-box;
394
+ }
395
+ @media screen and (width >= 768px) {
396
+ .r-docs-container {
397
+ display: grid;
398
+ justify-content: center;
399
+ column-gap: 32px;
400
+ grid-template-areas: "sidebar breadcrumbs" "sidebar contents" "sidebar content" "sidebar pagination";
401
+ grid-template-columns: 1fr calc(100% - 248px);
402
+ grid-template-rows: auto auto 1fr auto;
403
+ }
404
+ }
405
+ @media screen and (width >= 1180px) {
406
+ .r-docs-container {
407
+ column-gap: 40px;
408
+ grid-template-areas: "sidebar breadcrumbs contents" "sidebar content contents" "sidebar pagination contents";
409
+ grid-template-columns: 200px 640px 238px;
410
+ grid-template-rows: auto 1fr auto;
411
+ }
412
+ }.r-blog-container {
427
413
  min-height: calc(100dvh - var(--r-header-height));
428
414
  overflow-wrap: break-word;
429
415
  box-sizing: border-box;
416
+ }
417
+ @media screen and (width >= 1180px) {
418
+ .r-blog-container {
419
+ display: grid;
420
+ justify-content: space-between;
421
+ column-gap: 40px;
422
+ grid-template-areas: "breadcrumbs contents" "content contents" "pagination contents";
423
+ grid-template-columns: 760px 220px;
424
+ grid-template-rows: auto 1fr auto;
425
+ }
430
426
  }.keylink-to-content {
431
427
  position: absolute !important;
432
428
  top: 8px;
433
429
  left: 12px;
434
430
  z-index: 1001;
431
+ }.r-page-container {
432
+ min-height: calc(100dvh - var(--r-header-height));
433
+ overflow-wrap: break-word;
434
+ box-sizing: border-box;
435
435
  }.r-keylink.keylink-to-navigation:focus {
436
436
  margin-top: -40px;
437
437
  }.r-code-span {
@@ -448,447 +448,297 @@
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-sidebar {
452
+ grid-area: sidebar;
453
+ box-sizing: border-box;
455
454
  }
456
- @media screen and (width >= 1024px) {
457
- .r-header-menu {
458
- flex: 1;
459
- order: unset;
455
+ @media screen and (width < 768px) {
456
+ .r-sidebar {
457
+ position: sticky;
458
+ width: calc(100% + 24px);
459
+ top: var(--r-header-height);
460
+ left: 0;
461
+ margin: 0 -12px;
462
+ background-color: var(--r-main-50);
463
+ border-bottom: 1px solid var(--r-main-200);
464
+ z-index: 10;
465
+ opacity: 0.98;
466
+ padding: 0;
467
+ overflow: auto;
460
468
  }
461
469
  }
462
470
 
463
- .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
464
- display: flex;
471
+ .r-sidebar-top-mock {
472
+ grid-row-start: 1;
473
+ grid-column-start: 1;
465
474
  }
466
475
 
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
- }
485
- }
486
- @media screen and (width >= 1024px) {
487
- .r-header-responsive {
488
- display: flex;
489
- justify-content: space-between;
490
- align-items: center;
476
+ @media screen and (width < 768px) {
477
+ .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
478
+ display: none;
491
479
  }
492
480
  }
493
481
 
494
- .r-header-burger {
495
- position: relative;
496
- display: flex;
497
- align-items: center;
498
- justify-content: center;
499
- height: 32px;
500
- width: 32px;
501
- cursor: pointer;
502
- background: none;
503
- border: none;
482
+ .r-sidebar-nav {
504
483
  box-sizing: border-box;
505
484
  }
506
- @media screen and (width >= 1024px) {
507
- .r-header-burger {
508
- display: none;
485
+ @media screen and (width < 768px) {
486
+ .r-sidebar-nav {
487
+ overflow: auto;
488
+ max-height: calc(100dvh - var(--r-header-height) - 41px);
509
489
  }
510
490
  }
511
491
 
512
- .r-burger-line {
513
- 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;
520
- box-sizing: border-box;
492
+ .r-sidebar-drop {
493
+ margin-top: -4px;
494
+ padding-top: 4px;
521
495
  }
522
496
 
523
- .r-burger-line._top {
524
- transform: translateY(-3px);
497
+ .r-sidebar-sublist {
498
+ position: relative;
499
+ padding-top: 2px;
525
500
  }
526
-
527
- .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
528
- transform: translateY(0) rotate(45deg);
529
- margin-top: 0;
501
+ .r-sidebar-sublist:hover::before {
502
+ background-color: var(--r-primary-800);
503
+ transition-delay: initial;
530
504
  }
531
505
 
532
- .r-burger-line._bottom {
533
- transform: translateY(3px);
506
+ .r-sidebar-sublist::before {
507
+ content: "";
508
+ position: absolute;
509
+ top: 0;
510
+ left: -12px;
511
+ right: 0;
512
+ height: 2px;
513
+ border-bottom-left-radius: 2px;
514
+ background-color: var(--r-main-200);
515
+ z-index: 1;
516
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
517
+ box-sizing: border-box;
534
518
  }
535
519
 
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;
520
+ .r-sidebar-nav {
521
+ padding: 32px 4px 32px 2px;
522
+ box-sizing: border-box;
543
523
  }
544
- .r-dropdown:hover, .r-dropdown:focus-within {
545
- color: var(--r-main-950);
524
+ @media screen and (width < 768px) {
525
+ .r-sidebar-nav {
526
+ padding: 12px;
527
+ }
546
528
  }
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;
529
+ @media screen and (width >= 768px) {
530
+ .r-sidebar-nav {
531
+ position: sticky;
532
+ top: var(--r-header-height);
533
+ overflow: auto;
534
+ scrollbar-width: thin;
535
+ scrollbar-color: var(--r-main-200) transparent;
536
+ scrollbar-gutter: stable;
537
+ max-height: calc(100dvh - var(--r-header-height));
538
+ }
552
539
  }
553
- .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
554
- transform: rotate(180deg);
540
+
541
+ .r-sidebar-space {
542
+ box-sizing: border-box;
543
+ }
544
+ @media screen and (width < 768px) {
545
+ .r-sidebar-space {
546
+ display: block;
547
+ height: 40px;
548
+ }
555
549
  }
556
550
 
557
- .r-dropdown-summary {
551
+ .r-sidebar-btn {
552
+ position: sticky;
553
+ top: 0;
558
554
  display: flex;
559
- justify-content: space-between;
560
- align-items: center;
561
555
  width: 100%;
562
- position: relative;
563
- color: inherit;
564
- cursor: pointer;
565
- padding: 10px 4px;
566
- font-size: 16px;
556
+ font-size: 14px;
567
557
  border: 0;
558
+ padding: 12px;
568
559
  background: none;
560
+ cursor: pointer;
561
+ color: var(--r-main-800);
562
+ background-color: var(--r-main-50);
569
563
  z-index: 1;
570
564
  box-sizing: border-box;
571
565
  }
572
-
573
- .r-dropdown-chevron {
574
- display: block;
575
- margin-left: 6px;
576
- transition: transform 0.3s 0.1s;
577
- box-sizing: border-box;
566
+ @media screen and (width >= 768px) {
567
+ .r-sidebar-btn {
568
+ display: none;
569
+ }
578
570
  }
579
571
 
580
- .r-dropdown-drop {
581
- list-style: none;
582
- position: absolute;
583
- top: 16px;
584
- 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;
596
- box-sizing: border-box;
597
- }
598
-
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-chevron {
573
+ display: inline;
574
+ margin-right: 6px;
575
+ transition: transform 0.2s;
609
576
  box-sizing: border-box;
610
577
  }
611
- .r-dropdown-link:hover {
612
- color: var(--r-main-900);
613
- background-color: var(--r-main-100);
614
- }
615
578
 
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;
622
- }
623
- @media screen and (width >= 1024px) {
624
- .r-header-social {
625
- flex: none;
626
- justify-content: unset;
627
- }
579
+ .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
580
+ transform: rotate(90deg);
628
581
  }
629
582
 
630
- .r-header-social-git {
583
+ .r-sidebar-list {
631
584
  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-container {
637
- max-width: 1180px;
638
- padding-right: 12px;
639
- padding-left: 12px;
640
- margin-right: auto;
641
- margin-left: auto;
642
- box-sizing: border-box;
643
- }.r-search-btn {
644
- position: relative;
645
- border-radius: 6px;
646
- background-color: var(--r-main-100);
647
- color: var(--r-main-600);
648
- padding: 8px 16px;
649
- border: 1px solid var(--r-main-200);
650
- width: 100%;
651
- text-align: left;
652
- cursor: text;
585
+ list-style: none;
586
+ padding: 0;
587
+ margin: 0;
588
+ font-size: 14px;
653
589
  box-sizing: border-box;
654
590
  }
655
- @media screen and (width >= 768px) {
656
- .r-search-btn {
657
- width: 220px;
658
- padding: 8px 96px 8px 16px;
659
- }
660
- }
661
- .r-search-btn:hover {
662
- border-color: var(--r-main-600);
663
- }
664
- .r-search-btn:hover .r-search-kbd {
665
- color: var(--r-main-950);
666
- }
667
591
 
668
- .r-search-title {
669
- display: block;
592
+ .r-sidebar-drop::details-content {
670
593
  overflow: hidden;
671
- text-overflow: ellipsis;
672
- white-space: nowrap;
594
+ transition: content-visibility 0.4s allow-discrete;
595
+ box-sizing: border-box;
673
596
  }
674
597
 
675
- .r-search-kbd {
676
- display: none;
677
- position: absolute;
678
- right: 6px;
679
- top: 50%;
680
- transform: translateY(-50%);
681
- }
682
- @media screen and (width >= 768px) {
683
- .r-search-kbd {
684
- display: flex;
685
- }
598
+ .r-sidebar-sublist {
599
+ margin-left: 12px;
686
600
  }
687
601
 
688
- .r-search-dialog {
689
- width: 100%;
690
- height: 100%;
691
- background: none;
692
- max-width: none;
693
- max-height: none;
694
- border: none;
695
- padding: unset;
696
- transition: opacity 0.3s ease, overlay 0.4s ease-out allow-discrete, display 0.4s ease-out allow-discrete;
602
+ .r-sidebar-drop > .r-sidebar-sublist {
697
603
  opacity: 0;
698
- }
699
- .r-search-dialog::backdrop {
700
- backdrop-filter: blur(0);
701
- background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
702
- transition: backdrop-filter 0.4s ease-out, background 0.4s ease-out;
604
+ transition: opacity 0.2s ease;
703
605
  }
704
606
 
705
- .r-search-dialog[open] {
607
+ .r-sidebar-drop[open] > .r-sidebar-sublist {
706
608
  opacity: 1;
707
609
  }
708
- @starting-style {
709
- .r-search-dialog[open] {
710
- opacity: 0;
711
- }
712
- }
713
- .r-search-dialog[open]::backdrop {
714
- backdrop-filter: blur(4px);
715
- background: color-mix(in srgb, var(--r-main-900) 40%, transparent 100%);
716
- }
717
610
 
718
- .r-search-popup {
719
- position: fixed;
720
- left: 50%;
721
- transform: translateX(-50%);
722
- top: calc(var(--r-header-height) + 20px);
723
- z-index: 200;
724
- width: 100%;
725
- max-width: 540px;
726
- background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
727
- border: 2px solid var(--r-main-200);
728
- border-bottom-width: 0;
729
- border-radius: 12px 12px 0 0;
730
- opacity: 0;
731
- transform: translateX(-50%) translateY(-20px);
732
- transition: opacity 0.2s, transform 0.2s;
611
+ .r-sidebar-drop > .r-sidebar-sublist > .r-sidebar-li {
612
+ margin-top: -4rem;
613
+ transition: margin-top 0.3s ease;
733
614
  }
734
615
 
735
- .r-search-dialog[open] .r-search-popup {
736
- opacity: 1;
737
- transform: translateX(-50%) translateY(0);
738
- }
739
616
  @starting-style {
740
- .r-search-dialog[open] .r-search-popup {
741
- opacity: 0;
742
- transform: translateX(-50%) translateY(-20px);
617
+ .r-sidebar-drop[open]._starting-style > .r-sidebar-sublist > .r-sidebar-li {
618
+ margin-top: -4rem;
743
619
  }
744
620
  }
745
621
 
746
- .r-search-dialog._active .r-search-popup {
747
- border-radius: 12px;
748
- border-bottom-width: 2px;
749
- }
750
-
751
- .r-search-popup:has(.r-search-input:focus) {
752
- border-color: var(--r-main-300);
622
+ .r-sidebar-drop[open] > .r-sidebar-sublist > .r-sidebar-li {
623
+ margin-top: 0;
753
624
  }
754
625
 
755
- .r-search-popup-header {
626
+ .r-sidebar-sublist .r-sidebar-link {
756
627
  position: relative;
757
- border-bottom: 1px solid var(--r-main-200);
758
- }
759
-
760
- .r-search-input {
761
- background: none;
762
- padding: 16px 20px;
763
- border: none;
764
- border-bottom: 2px solid var(--r-main-100);
765
- width: 100%;
766
- font-size: 16px;
628
+ border-top-left-radius: 0;
629
+ border-bottom-left-radius: 0;
767
630
  box-sizing: border-box;
768
631
  }
769
- @media screen and (width >= 768px) {
770
- .r-search-input {
771
- padding: 16px 72px 16px 20px;
772
- }
632
+ .r-sidebar-sublist .r-sidebar-link::before {
633
+ content: "";
634
+ position: absolute;
635
+ left: 0;
636
+ top: -1px;
637
+ width: 1px;
638
+ height: calc(100% + 4px);
639
+ background-color: var(--r-main-200);
640
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
641
+ box-sizing: border-box;
773
642
  }
774
- .r-search-input:hover {
775
- border-bottom-color: var(--r-main-300);
643
+
644
+ .r-sidebar-li {
645
+ position: relative;
646
+ line-height: 1.5;
776
647
  }
777
- .r-search-input:focus {
778
- outline: none;
779
- border-bottom-color: var(--r-primary-600);
648
+
649
+ .r-sidebar-li._separator {
650
+ background: var(--r-main-200);
651
+ padding: 1px;
780
652
  }
781
- .r-search-input::placeholder {
782
- color: var(--r-main-500);
653
+
654
+ .r-sidebar-li._droppable > a {
655
+ padding-right: 32px;
783
656
  }
784
657
 
785
- .r-search-popup-kbd {
786
- color: var(--r-main-600);
787
- right: 20px;
658
+ .r-sidebar-li-d0 {
659
+ margin-left: -8px;
788
660
  }
789
661
 
790
- .r-search-results {
791
- padding: 2px 8px 8px;
792
- max-height: min(400px, 100dvh - 200px);
793
- overflow-y: auto;
794
- list-style: none;
795
- scrollbar-width: thin;
796
- scrollbar-color: var(--r-main-200) transparent;
662
+ .r-sidebar-p {
797
663
  margin: 0;
798
- box-sizing: border-box;
664
+ padding: 4px 10px;
799
665
  }
800
666
 
801
- .r-search-item {
802
- display: block;
803
- text-decoration: none;
804
- color: var(--r-main-700);
805
- padding: 8px 12px;
806
- border: 1px solid var(--r-main-100);
807
- border-radius: 10px;
808
- width: 100%;
809
- margin-top: 6px;
810
- box-sizing: border-box;
811
- }
812
- .r-search-item:hover, .r-search-item:focus {
813
- color: var(--r-main-950);
814
- background-color: var(--r-main-50);
815
- border-color: var(--r-main-200);
667
+ .r-sidebar-heading {
668
+ color: var(--r-main-900);
669
+ font-weight: 600;
670
+ margin-block-end: 4px;
816
671
  }
817
-
818
- .r-search-item-title {
819
- margin: 0;
672
+ .r-sidebar-heading:not(:first-child) {
673
+ margin-block-start: 12px;
820
674
  }
821
675
 
822
- .r-search-item-desc {
823
- font-size: 14px;
824
- color: var(--r-main-600);
825
- margin: 12px 0 0;
826
- }.r-theme-switcher {
827
- position: relative;
828
- display: flex;
829
- gap: 4px;
830
- width: 109px;
831
- height: 37px;
832
- padding: 2px;
833
- background-color: var(--r-main-100);
834
- border: 1px solid var(--r-main-200);
835
- border-radius: 100px;
836
- box-sizing: border-box;
676
+ .r-sidebar-link {
677
+ padding: 4px 10px;
678
+ color: inherit;
679
+ border-bottom: 2px solid transparent;
680
+ border-radius: 2px;
681
+ text-decoration: none;
682
+ display: -webkit-box;
683
+ -webkit-box-orient: vertical;
684
+ -webkit-line-clamp: 3;
685
+ overflow: hidden;
686
+ 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;
837
687
  }
838
- .r-theme-switcher::before {
839
- content: "";
840
- position: absolute;
841
- display: block;
842
- height: 32px;
843
- width: 32px;
844
- top: 2px;
845
- left: 2px;
688
+
689
+ .r-sidebar-link._target {
690
+ color: var(--r-primary-950);
846
691
  background-color: var(--r-main-50);
847
- border: 1px solid var(--r-main-200);
848
- border-radius: 100px;
849
- transition: left 0.2s;
850
- box-sizing: border-box;
851
692
  }
852
693
 
853
- .r-theme-switcher-btn {
854
- padding: 8px;
855
- background: none;
856
- border: 0;
857
- border-radius: 100px;
858
- cursor: pointer;
859
- color: var(--r-main-700);
860
- fill: transparent;
861
- z-index: 1;
862
- transition: color 0.2s 0.1s, fill 0.2s;
694
+ .r-sidebar-link:hover {
695
+ color: var(--r-primary-800);
696
+ background-color: var(--r-main-100);
697
+ transition-delay: initial;
863
698
  }
864
- .r-theme-switcher-btn:hover {
865
- color: var(--r-main-950);
866
- fill: var(--r-main-600);
699
+ .r-sidebar-link:hover::before {
700
+ background-color: currentColor;
701
+ transition-delay: initial;
867
702
  }
868
703
 
869
- .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
870
- left: 2px;
704
+ .r-sidebar-link._active {
705
+ color: var(--r-primary-700);
706
+ background-color: var(--r-main-50);
871
707
  }
872
-
873
- .r-theme-dark:not(.r-theme-system) .r-theme-switcher-btn__dark,
874
- .r-theme-system .r-theme-switcher-btn__system,
875
- .r-theme-light:not(.r-theme-system) .r-theme-switcher-btn__light {
876
- color: var(--r-main-950);
877
- fill: var(--r-main-950);
878
- pointer-events: none;
708
+ .r-sidebar-link._active::before {
709
+ background-color: currentColor;
879
710
  }
880
711
 
881
- .r-theme-switcher::before,
882
- .r-theme-system .r-theme-switcher::before {
883
- left: 38px;
712
+ .r-sidebar-drop-btn {
713
+ position: absolute;
714
+ right: 3px;
715
+ top: 5px;
716
+ border-radius: 4px;
717
+ padding: 4px;
718
+ list-style: none;
719
+ cursor: pointer;
720
+ transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
884
721
  }
885
-
886
- .r-theme-light:not(.r-theme-system) .r-theme-switcher::before {
887
- left: 74px;
722
+ .r-sidebar-drop-btn:hover {
723
+ color: var(--r-primary-500);
724
+ transition-delay: initial;
725
+ }
726
+ .r-sidebar-drop-btn::before {
727
+ content: "";
728
+ position: absolute;
729
+ inset: -4px;
730
+ }
731
+ .r-sidebar-drop-btn::-webkit-details-marker {
732
+ display: none;
888
733
  }
889
734
 
890
- .r-theme-switcher-svg {
735
+ .r-sidebar-drop-icon {
891
736
  display: block;
737
+ transition: transform 0.2s;
738
+ }
739
+
740
+ .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
741
+ transform: rotate(90deg);
892
742
  }.r-article {
893
743
  padding: 20px 0 40px;
894
744
  grid-area: content;
@@ -941,479 +791,467 @@
941
791
 
942
792
  .r-label-text {
943
793
  vertical-align: middle;
944
- }.r-sidebar {
945
- grid-area: sidebar;
946
- box-sizing: border-box;
794
+ }.r-header-menu {
795
+ display: flex;
796
+ justify-content: flex-end;
797
+ order: 1;
947
798
  }
948
- @media screen and (width < 768px) {
949
- .r-sidebar {
950
- position: sticky;
951
- width: calc(100% + 24px);
952
- top: var(--r-header-height);
953
- left: 0;
954
- margin: 0 -12px;
955
- background-color: var(--r-main-50);
956
- border-bottom: 1px solid var(--r-main-200);
957
- z-index: 10;
958
- opacity: 0.98;
959
- padding: 0;
960
- overflow: auto;
799
+ @media screen and (width >= 1024px) {
800
+ .r-header-menu {
801
+ flex: 1;
802
+ order: unset;
961
803
  }
962
804
  }
963
805
 
964
- .r-sidebar-top-mock {
965
- grid-row-start: 1;
966
- grid-column-start: 1;
967
- }
968
-
969
- @media screen and (width < 768px) {
970
- .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
971
- display: none;
972
- }
806
+ .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
807
+ display: flex;
973
808
  }
974
809
 
975
- .r-sidebar-nav {
976
- box-sizing: border-box;
810
+ .r-header-responsive {
811
+ display: none;
812
+ justify-content: flex-end;
813
+ flex: 1;
814
+ gap: 24px;
815
+ z-index: 1;
977
816
  }
978
- @media screen and (width < 768px) {
979
- .r-sidebar-nav {
980
- overflow: auto;
981
- max-height: calc(100dvh - var(--r-header-height) - 41px);
817
+ @media screen and (width < 1024px) {
818
+ .r-header-responsive {
819
+ flex-direction: column-reverse;
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;
982
827
  }
983
828
  }
984
-
985
- .r-sidebar-drop {
986
- margin-top: -4px;
987
- padding-top: 4px;
829
+ @media screen and (width >= 1024px) {
830
+ .r-header-responsive {
831
+ display: flex;
832
+ justify-content: space-between;
833
+ align-items: center;
834
+ }
988
835
  }
989
836
 
990
- .r-sidebar-sublist {
837
+ .r-header-burger {
991
838
  position: relative;
992
- padding-top: 2px;
839
+ display: flex;
840
+ align-items: center;
841
+ justify-content: center;
842
+ height: 32px;
843
+ width: 32px;
844
+ cursor: pointer;
845
+ background: none;
846
+ border: none;
847
+ box-sizing: border-box;
993
848
  }
994
- .r-sidebar-sublist:hover::before {
995
- background-color: var(--r-primary-800);
996
- transition-delay: initial;
849
+ @media screen and (width >= 1024px) {
850
+ .r-header-burger {
851
+ display: none;
852
+ }
997
853
  }
998
854
 
999
- .r-sidebar-sublist::before {
1000
- content: "";
855
+ .r-burger-line {
856
+ display: block;
857
+ width: 20px;
858
+ height: 1.5px;
1001
859
  position: absolute;
1002
- top: 0;
1003
- left: -12px;
1004
- right: 0;
1005
- height: 2px;
1006
- border-bottom-left-radius: 2px;
1007
- background-color: var(--r-main-200);
1008
- z-index: 1;
1009
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
860
+ background-color: var(--r-main-700);
861
+ margin: auto;
862
+ transition: transform 0.3s;
1010
863
  box-sizing: border-box;
1011
864
  }
1012
865
 
1013
- .r-sidebar-nav {
1014
- padding: 32px 4px 32px 2px;
1015
- box-sizing: border-box;
866
+ .r-burger-line._top {
867
+ transform: translateY(-3px);
1016
868
  }
1017
- @media screen and (width < 768px) {
1018
- .r-sidebar-nav {
1019
- padding: 12px;
1020
- }
869
+
870
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
871
+ transform: translateY(0) rotate(45deg);
872
+ margin-top: 0;
1021
873
  }
1022
- @media screen and (width >= 768px) {
1023
- .r-sidebar-nav {
1024
- position: sticky;
1025
- top: var(--r-header-height);
1026
- overflow: auto;
1027
- scrollbar-width: thin;
1028
- scrollbar-color: var(--r-main-200) transparent;
1029
- scrollbar-gutter: stable;
1030
- max-height: calc(100dvh - var(--r-header-height));
1031
- }
874
+
875
+ .r-burger-line._bottom {
876
+ transform: translateY(3px);
1032
877
  }
1033
878
 
1034
- .r-sidebar-space {
1035
- box-sizing: border-box;
879
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._bottom {
880
+ transform: translateY(0) rotate(-45deg);
881
+ margin-top: 0;
882
+ }.r-dropdown {
883
+ position: relative;
884
+ color: var(--r-main-600);
885
+ transition: color 0.2s 0.1s;
1036
886
  }
1037
- @media screen and (width < 768px) {
1038
- .r-sidebar-space {
1039
- display: block;
1040
- height: 40px;
1041
- }
887
+ .r-dropdown:hover, .r-dropdown:focus-within {
888
+ color: var(--r-main-950);
1042
889
  }
1043
-
1044
- .r-sidebar-btn {
1045
- position: sticky;
1046
- top: 0;
890
+ .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
891
+ visibility: visible;
892
+ pointer-events: all;
893
+ transform: translateY(20px);
894
+ opacity: 1;
895
+ }
896
+ .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
897
+ transform: rotate(180deg);
898
+ }
899
+
900
+ .r-dropdown-summary {
1047
901
  display: flex;
902
+ justify-content: space-between;
903
+ align-items: center;
1048
904
  width: 100%;
1049
- font-size: 14px;
905
+ position: relative;
906
+ color: inherit;
907
+ cursor: pointer;
908
+ padding: 10px 4px;
909
+ font-size: 16px;
1050
910
  border: 0;
1051
- padding: 12px;
1052
911
  background: none;
1053
- cursor: pointer;
1054
- color: var(--r-main-800);
1055
- background-color: var(--r-main-50);
1056
912
  z-index: 1;
1057
913
  box-sizing: border-box;
1058
914
  }
1059
- @media screen and (width >= 768px) {
1060
- .r-sidebar-btn {
1061
- display: none;
1062
- }
1063
- }
1064
915
 
1065
- .r-sidebar-chevron {
1066
- display: inline;
1067
- margin-right: 6px;
1068
- transition: transform 0.2s;
916
+ .r-dropdown-chevron {
917
+ display: block;
918
+ margin-left: 6px;
919
+ transition: transform 0.3s 0.1s;
1069
920
  box-sizing: border-box;
1070
921
  }
1071
922
 
1072
- .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
1073
- transform: rotate(90deg);
1074
- }
1075
-
1076
- .r-sidebar-list {
1077
- color: var(--r-main-700);
923
+ .r-dropdown-drop {
1078
924
  list-style: none;
1079
- padding: 0;
925
+ position: absolute;
926
+ top: 16px;
927
+ left: -12px;
928
+ visibility: hidden;
929
+ pointer-events: none;
930
+ opacity: 0;
931
+ transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
932
+ background-color: var(--r-main-50);
933
+ border: 1px solid var(--r-main-100);
934
+ border-radius: 8px;
1080
935
  margin: 0;
1081
- font-size: 14px;
936
+ padding: 2px 6px;
937
+ min-width: 120px;
938
+ max-width: 180px;
1082
939
  box-sizing: border-box;
1083
940
  }
1084
941
 
1085
- .r-sidebar-drop::details-content {
1086
- overflow: hidden;
1087
- transition: content-visibility 0.4s allow-discrete;
942
+ .r-dropdown-link {
943
+ display: block;
944
+ width: 100%;
945
+ text-decoration: none;
946
+ color: var(--r-main-700);
947
+ padding: 4px 8px;
948
+ margin-top: 4px;
949
+ margin-bottom: 4px;
950
+ border-radius: 4px;
951
+ transition: background-color 0.2s;
1088
952
  box-sizing: border-box;
1089
953
  }
954
+ .r-dropdown-link:hover {
955
+ color: var(--r-main-900);
956
+ background-color: var(--r-main-100);
957
+ }
1090
958
 
1091
- .r-sidebar-sublist {
1092
- margin-left: 12px;
959
+ .r-dropdown-link._active {
960
+ color: var(--r-primary-700);
961
+ }.r-search-btn {
962
+ position: relative;
963
+ border-radius: 6px;
964
+ background-color: var(--r-main-100);
965
+ color: var(--r-main-600);
966
+ padding: 8px 16px;
967
+ border: 1px solid var(--r-main-200);
968
+ width: 100%;
969
+ text-align: left;
970
+ cursor: text;
971
+ box-sizing: border-box;
972
+ }
973
+ @media screen and (width >= 768px) {
974
+ .r-search-btn {
975
+ width: 220px;
976
+ padding: 8px 96px 8px 16px;
977
+ }
978
+ }
979
+ .r-search-btn:hover {
980
+ border-color: var(--r-main-600);
981
+ }
982
+ .r-search-btn:hover .r-search-kbd {
983
+ color: var(--r-main-950);
1093
984
  }
1094
985
 
1095
- .r-sidebar-drop > .r-sidebar-sublist {
1096
- opacity: 0;
1097
- transition: opacity 0.2s ease;
986
+ .r-search-title {
987
+ display: block;
988
+ overflow: hidden;
989
+ text-overflow: ellipsis;
990
+ white-space: nowrap;
1098
991
  }
1099
992
 
1100
- .r-sidebar-drop[open] > .r-sidebar-sublist {
1101
- opacity: 1;
993
+ .r-search-kbd {
994
+ display: none;
995
+ position: absolute;
996
+ right: 6px;
997
+ top: 50%;
998
+ transform: translateY(-50%);
999
+ }
1000
+ @media screen and (width >= 768px) {
1001
+ .r-search-kbd {
1002
+ display: flex;
1003
+ }
1102
1004
  }
1103
1005
 
1104
- .r-sidebar-drop > .r-sidebar-sublist > .r-sidebar-li {
1105
- margin-top: -4rem;
1106
- transition: margin-top 0.3s ease;
1006
+ .r-search-dialog {
1007
+ width: 100%;
1008
+ height: 100%;
1009
+ background: none;
1010
+ max-width: none;
1011
+ max-height: none;
1012
+ border: none;
1013
+ padding: unset;
1014
+ transition: opacity 0.3s ease, overlay 0.4s ease-out allow-discrete, display 0.4s ease-out allow-discrete;
1015
+ opacity: 0;
1016
+ }
1017
+ .r-search-dialog::backdrop {
1018
+ backdrop-filter: blur(0);
1019
+ background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
1020
+ transition: backdrop-filter 0.4s ease-out, background 0.4s ease-out;
1107
1021
  }
1108
1022
 
1023
+ .r-search-dialog[open] {
1024
+ opacity: 1;
1025
+ }
1109
1026
  @starting-style {
1110
- .r-sidebar-drop[open]._starting-style > .r-sidebar-sublist > .r-sidebar-li {
1111
- margin-top: -4rem;
1027
+ .r-search-dialog[open] {
1028
+ opacity: 0;
1112
1029
  }
1113
1030
  }
1031
+ .r-search-dialog[open]::backdrop {
1032
+ backdrop-filter: blur(4px);
1033
+ background: color-mix(in srgb, var(--r-main-900) 40%, transparent 100%);
1034
+ }
1114
1035
 
1115
- .r-sidebar-drop[open] > .r-sidebar-sublist > .r-sidebar-li {
1116
- margin-top: 0;
1036
+ .r-search-popup {
1037
+ position: fixed;
1038
+ left: 50%;
1039
+ transform: translateX(-50%);
1040
+ top: calc(var(--r-header-height) + 20px);
1041
+ z-index: 200;
1042
+ width: 100%;
1043
+ max-width: 540px;
1044
+ background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
1045
+ border: 2px solid var(--r-main-200);
1046
+ border-bottom-width: 0;
1047
+ border-radius: 12px 12px 0 0;
1048
+ opacity: 0;
1049
+ transform: translateX(-50%) translateY(-20px);
1050
+ transition: opacity 0.2s, transform 0.2s;
1117
1051
  }
1118
1052
 
1119
- .r-sidebar-sublist .r-sidebar-link {
1120
- position: relative;
1121
- border-top-left-radius: 0;
1122
- border-bottom-left-radius: 0;
1123
- box-sizing: border-box;
1053
+ .r-search-dialog[open] .r-search-popup {
1054
+ opacity: 1;
1055
+ transform: translateX(-50%) translateY(0);
1124
1056
  }
1125
- .r-sidebar-sublist .r-sidebar-link::before {
1126
- content: "";
1127
- position: absolute;
1128
- left: 0;
1129
- top: -1px;
1130
- width: 1px;
1131
- height: calc(100% + 4px);
1132
- background-color: var(--r-main-200);
1133
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1134
- box-sizing: border-box;
1057
+ @starting-style {
1058
+ .r-search-dialog[open] .r-search-popup {
1059
+ opacity: 0;
1060
+ transform: translateX(-50%) translateY(-20px);
1061
+ }
1135
1062
  }
1136
1063
 
1137
- .r-sidebar-li {
1138
- position: relative;
1139
- line-height: 1.5;
1064
+ .r-search-dialog._active .r-search-popup {
1065
+ border-radius: 12px;
1066
+ border-bottom-width: 2px;
1140
1067
  }
1141
1068
 
1142
- .r-sidebar-li._separator {
1143
- background: var(--r-main-200);
1144
- padding: 1px;
1069
+ .r-search-popup:has(.r-search-input:focus) {
1070
+ border-color: var(--r-main-300);
1145
1071
  }
1146
1072
 
1147
- .r-sidebar-li._droppable > a {
1148
- padding-right: 32px;
1073
+ .r-search-popup-header {
1074
+ position: relative;
1075
+ border-bottom: 1px solid var(--r-main-200);
1149
1076
  }
1150
1077
 
1151
- .r-sidebar-li-d0 {
1152
- margin-left: -8px;
1078
+ .r-search-input {
1079
+ background: none;
1080
+ padding: 16px 20px;
1081
+ border: none;
1082
+ border-bottom: 2px solid var(--r-main-100);
1083
+ width: 100%;
1084
+ font-size: 16px;
1085
+ box-sizing: border-box;
1153
1086
  }
1154
-
1155
- .r-sidebar-p {
1156
- margin: 0;
1157
- padding: 4px 10px;
1087
+ @media screen and (width >= 768px) {
1088
+ .r-search-input {
1089
+ padding: 16px 72px 16px 20px;
1090
+ }
1158
1091
  }
1159
-
1160
- .r-sidebar-heading {
1161
- color: var(--r-main-900);
1162
- font-weight: 600;
1163
- margin-block-end: 4px;
1092
+ .r-search-input:hover {
1093
+ border-bottom-color: var(--r-main-300);
1164
1094
  }
1165
- .r-sidebar-heading:not(:first-child) {
1166
- margin-block-start: 12px;
1095
+ .r-search-input:focus {
1096
+ outline: none;
1097
+ border-bottom-color: var(--r-primary-600);
1098
+ }
1099
+ .r-search-input::placeholder {
1100
+ color: var(--r-main-500);
1167
1101
  }
1168
1102
 
1169
- .r-sidebar-link {
1170
- padding: 4px 10px;
1171
- color: inherit;
1172
- border-bottom: 2px solid transparent;
1173
- border-radius: 2px;
1174
- text-decoration: none;
1175
- display: -webkit-box;
1176
- -webkit-box-orient: vertical;
1177
- -webkit-line-clamp: 3;
1178
- overflow: hidden;
1179
- 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;
1103
+ .r-search-popup-kbd {
1104
+ color: var(--r-main-600);
1105
+ right: 20px;
1180
1106
  }
1181
1107
 
1182
- .r-sidebar-link._target {
1183
- color: var(--r-primary-950);
1184
- background-color: var(--r-main-50);
1108
+ .r-search-results {
1109
+ padding: 2px 8px 8px;
1110
+ max-height: min(400px, 100dvh - 200px);
1111
+ overflow-y: auto;
1112
+ list-style: none;
1113
+ scrollbar-width: thin;
1114
+ scrollbar-color: var(--r-main-200) transparent;
1115
+ margin: 0;
1116
+ box-sizing: border-box;
1185
1117
  }
1186
1118
 
1187
- .r-sidebar-link:hover {
1188
- color: var(--r-primary-800);
1189
- background-color: var(--r-main-100);
1190
- transition-delay: initial;
1191
- }
1192
- .r-sidebar-link:hover::before {
1193
- background-color: currentColor;
1194
- transition-delay: initial;
1119
+ .r-search-item {
1120
+ display: block;
1121
+ text-decoration: none;
1122
+ color: var(--r-main-700);
1123
+ padding: 8px 12px;
1124
+ border: 1px solid var(--r-main-100);
1125
+ border-radius: 10px;
1126
+ width: 100%;
1127
+ margin-top: 6px;
1128
+ box-sizing: border-box;
1195
1129
  }
1196
-
1197
- .r-sidebar-link._active {
1198
- color: var(--r-primary-700);
1130
+ .r-search-item:hover, .r-search-item:focus {
1131
+ color: var(--r-main-950);
1199
1132
  background-color: var(--r-main-50);
1200
- }
1201
- .r-sidebar-link._active::before {
1202
- background-color: currentColor;
1133
+ border-color: var(--r-main-200);
1203
1134
  }
1204
1135
 
1205
- .r-sidebar-drop-btn {
1206
- position: absolute;
1207
- right: 3px;
1208
- top: 5px;
1209
- border-radius: 4px;
1210
- padding: 4px;
1211
- list-style: none;
1212
- cursor: pointer;
1213
- transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1214
- }
1215
- .r-sidebar-drop-btn:hover {
1216
- color: var(--r-primary-500);
1217
- transition-delay: initial;
1218
- }
1219
- .r-sidebar-drop-btn::before {
1220
- content: "";
1221
- position: absolute;
1222
- inset: -4px;
1223
- }
1224
- .r-sidebar-drop-btn::-webkit-details-marker {
1225
- display: none;
1136
+ .r-search-item-title {
1137
+ margin: 0;
1226
1138
  }
1227
1139
 
1228
- .r-sidebar-drop-icon {
1229
- display: block;
1230
- transition: transform 0.2s;
1140
+ .r-search-item-desc {
1141
+ font-size: 14px;
1142
+ color: var(--r-main-600);
1143
+ margin: 12px 0 0;
1144
+ }.r-container {
1145
+ max-width: 1180px;
1146
+ padding-right: 12px;
1147
+ padding-left: 12px;
1148
+ margin-right: auto;
1149
+ margin-left: auto;
1150
+ box-sizing: border-box;
1151
+ }.r-header-social {
1152
+ display: flex;
1153
+ flex: 1;
1154
+ justify-content: flex-end;
1231
1155
  }
1232
-
1233
- .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
1234
- transform: rotate(90deg);
1235
- }.r-keylink {
1236
- display: block;
1237
- position: relative;
1238
- padding: 8px 12px;
1239
- border: 2px solid var(--r-main-500);
1240
- border-radius: 6px;
1241
- text-decoration: none;
1242
- background: var(--r-main-50);
1156
+ @media screen and (width >= 1024px) {
1157
+ .r-header-social {
1158
+ flex: none;
1159
+ justify-content: unset;
1160
+ }
1243
1161
  }
1244
1162
 
1245
- .r-keylink:not(:focus) {
1246
- width: 1px !important;
1247
- height: 1px !important;
1248
- padding: 0 !important;
1249
- overflow: hidden !important;
1250
- clip: rect(1px, 1px, 1px, 1px) !important;
1251
- border: 0 !important;
1252
- user-select: none;
1253
- pointer-events: none;
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;
1163
+ .r-header-social-git {
1164
+ color: var(--r-main-700);
1165
+ transition: color 0.2s;
1267
1166
  }
1268
-
1269
- .r-backdrop._visible {
1270
- opacity: 1;
1271
- visibility: visible;
1272
- pointer-events: all;
1273
- }.r-external-mark {
1167
+ .r-header-social-git:hover, .r-header-social-git:focus {
1168
+ color: var(--r-main-950);
1169
+ }.r-theme-switcher {
1274
1170
  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;
1171
+ display: flex;
1172
+ gap: 4px;
1173
+ width: 109px;
1174
+ height: 37px;
1175
+ padding: 2px;
1176
+ background-color: var(--r-main-100);
1177
+ border: 1px solid var(--r-main-200);
1178
+ border-radius: 100px;
1292
1179
  box-sizing: border-box;
1293
1180
  }
1294
- .r-external-mark::before {
1181
+ .r-theme-switcher::before {
1295
1182
  content: "";
1296
1183
  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;
1184
+ display: block;
1185
+ height: 32px;
1186
+ width: 32px;
1187
+ top: 2px;
1188
+ left: 2px;
1189
+ background-color: var(--r-main-50);
1190
+ border: 1px solid var(--r-main-200);
1191
+ border-radius: 100px;
1192
+ transition: left 0.2s;
1303
1193
  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
1194
  }
1316
1195
 
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 {
1196
+ .r-theme-switcher-btn {
1197
+ padding: 8px;
1198
+ background: none;
1199
+ border: 0;
1200
+ border-radius: 100px;
1201
+ cursor: pointer;
1328
1202
  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
- }.r-pagination {
1346
- grid-area: pagination;
1347
- display: grid;
1348
- grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
1349
- gap: 16px;
1350
- margin-bottom: 40px;
1351
- }
1352
-
1353
- .r-pagination-item {
1354
- position: relative;
1355
- padding-top: 8px;
1356
- padding-bottom: 8px;
1357
- text-decoration: none;
1358
- font-size: 14px;
1359
- color: var(--r-main-800);
1203
+ fill: transparent;
1204
+ z-index: 1;
1205
+ transition: color 0.2s 0.1s, fill 0.2s;
1360
1206
  }
1361
- .r-pagination-item:hover {
1207
+ .r-theme-switcher-btn:hover {
1362
1208
  color: var(--r-main-950);
1209
+ fill: var(--r-main-600);
1363
1210
  }
1364
1211
 
1365
- .r-pagination-item._prev {
1366
- padding-left: 28px;
1367
- }
1368
-
1369
- .r-pagination-item._next {
1370
- text-align: right;
1371
- padding-right: 28px;
1372
- }
1373
-
1374
- .r-pagination-text {
1375
- display: block;
1376
- line-height: 2;
1377
- }
1378
-
1379
- .r-pagination-title {
1380
- font-weight: 600;
1381
- font-size: 16px;
1382
- }
1383
-
1384
- .r-pagination-icon {
1385
- position: absolute;
1386
- top: 50%;
1387
- transform: translateY(-50%);
1388
- transition: transform 0.2s;
1212
+ .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
1213
+ left: 2px;
1389
1214
  }
1390
1215
 
1391
- .r-pagination-icon._prev {
1392
- left: 0;
1393
- }
1394
- .r-pagination-item:hover .r-pagination-icon._prev {
1395
- transform: translate(-4px, -50%);
1396
- }
1397
- @media screen and (width >= 1180px) {
1398
- .r-pagination-item:hover .r-pagination-icon._prev {
1399
- transform: translate(-8px, -50%);
1400
- }
1216
+ .r-theme-dark:not(.r-theme-system) .r-theme-switcher-btn__dark,
1217
+ .r-theme-system .r-theme-switcher-btn__system,
1218
+ .r-theme-light:not(.r-theme-system) .r-theme-switcher-btn__light {
1219
+ color: var(--r-main-950);
1220
+ fill: var(--r-main-950);
1221
+ pointer-events: none;
1401
1222
  }
1402
1223
 
1403
- .r-pagination-icon._next {
1404
- right: 0;
1405
- }
1406
- .r-pagination-item:hover .r-pagination-icon._next {
1407
- transform: translate(4px, -50%);
1224
+ .r-theme-switcher::before,
1225
+ .r-theme-system .r-theme-switcher::before {
1226
+ left: 38px;
1408
1227
  }
1409
- @media screen and (width >= 1180px) {
1410
- .r-pagination-item:hover .r-pagination-icon._next {
1411
- transform: translate(8px, -50%);
1412
- }
1228
+
1229
+ .r-theme-light:not(.r-theme-system) .r-theme-switcher::before {
1230
+ left: 74px;
1413
1231
  }
1414
1232
 
1415
- .r-pagination-svg {
1233
+ .r-theme-switcher-svg {
1234
+ display: block;
1235
+ }.r-keylink {
1416
1236
  display: block;
1237
+ position: relative;
1238
+ padding: 8px 12px;
1239
+ border: 2px solid var(--r-main-500);
1240
+ border-radius: 6px;
1241
+ text-decoration: none;
1242
+ background: var(--r-main-50);
1243
+ }
1244
+
1245
+ .r-keylink:not(:focus) {
1246
+ width: 1px !important;
1247
+ height: 1px !important;
1248
+ padding: 0 !important;
1249
+ overflow: hidden !important;
1250
+ clip: rect(1px, 1px, 1px, 1px) !important;
1251
+ border: 0 !important;
1252
+ user-select: none;
1253
+ pointer-events: none;
1254
+ box-sizing: border-box;
1417
1255
  }.r-contents {
1418
1256
  grid-area: contents;
1419
1257
  }
@@ -1653,9 +1491,171 @@
1653
1491
  }
1654
1492
  .r-contents-git:hover {
1655
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);
1534
+ font-weight: 600;
1535
+ }.r-pagination {
1536
+ grid-area: pagination;
1537
+ display: grid;
1538
+ grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
1539
+ gap: 16px;
1540
+ margin-bottom: 40px;
1541
+ }
1542
+
1543
+ .r-pagination-item {
1544
+ position: relative;
1545
+ padding-top: 8px;
1546
+ padding-bottom: 8px;
1547
+ text-decoration: none;
1548
+ font-size: 14px;
1549
+ color: var(--r-main-800);
1550
+ }
1551
+ .r-pagination-item:hover {
1552
+ color: var(--r-main-950);
1553
+ }
1554
+
1555
+ .r-pagination-item._prev {
1556
+ padding-left: 28px;
1557
+ }
1558
+
1559
+ .r-pagination-item._next {
1560
+ text-align: right;
1561
+ padding-right: 28px;
1562
+ }
1563
+
1564
+ .r-pagination-text {
1565
+ display: block;
1566
+ line-height: 2;
1567
+ }
1568
+
1569
+ .r-pagination-title {
1570
+ font-weight: 600;
1571
+ font-size: 16px;
1572
+ }
1573
+
1574
+ .r-pagination-icon {
1575
+ position: absolute;
1576
+ top: 50%;
1577
+ transform: translateY(-50%);
1578
+ transition: transform 0.2s;
1579
+ }
1580
+
1581
+ .r-pagination-icon._prev {
1582
+ left: 0;
1583
+ }
1584
+ .r-pagination-item:hover .r-pagination-icon._prev {
1585
+ transform: translate(-4px, -50%);
1586
+ }
1587
+ @media screen and (width >= 1180px) {
1588
+ .r-pagination-item:hover .r-pagination-icon._prev {
1589
+ transform: translate(-8px, -50%);
1590
+ }
1591
+ }
1592
+
1593
+ .r-pagination-icon._next {
1594
+ right: 0;
1595
+ }
1596
+ .r-pagination-item:hover .r-pagination-icon._next {
1597
+ transform: translate(4px, -50%);
1598
+ }
1599
+ @media screen and (width >= 1180px) {
1600
+ .r-pagination-item:hover .r-pagination-icon._next {
1601
+ transform: translate(8px, -50%);
1602
+ }
1603
+ }
1604
+
1605
+ .r-pagination-svg {
1606
+ display: block;
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;
@@ -1742,16 +1742,6 @@
1742
1742
 
1743
1743
  .r-code-section-filename {
1744
1744
  font-family: var(--monospace-font, monospace, monospace);
1745
- }.r-block {
1746
- position: relative;
1747
- width: 100%;
1748
- overflow: auto;
1749
- margin-block-start: 12px;
1750
- margin-block-end: 12px;
1751
- scrollbar-width: thin;
1752
- scrollbar-color: var(--r-main-200) transparent;
1753
- box-sizing: border-box;
1754
- z-index: 1;
1755
1745
  }.r-blockquote {
1756
1746
  padding: 4px 12px 4px 20px;
1757
1747
  border: 4px solid var(--r-main-100);
@@ -1852,6 +1842,16 @@
1852
1842
  }.r-img {
1853
1843
  max-width: 100%;
1854
1844
  box-sizing: border-box;
1845
+ }.r-block {
1846
+ position: relative;
1847
+ width: 100%;
1848
+ overflow: auto;
1849
+ margin-block-start: 12px;
1850
+ margin-block-end: 12px;
1851
+ scrollbar-width: thin;
1852
+ scrollbar-color: var(--r-main-200) transparent;
1853
+ box-sizing: border-box;
1854
+ z-index: 1;
1855
1855
  }.r-p {
1856
1856
  line-height: 1.8;
1857
1857
  margin-block-start: 1em;
@@ -2054,24 +2054,6 @@
2054
2054
  z-index: -1;
2055
2055
  border-radius: 8px;
2056
2056
  border: 1px solid var(--r-main-200);
2057
- }.r-td {
2058
- padding: 8px 12px;
2059
- border-collapse: collapse;
2060
- }
2061
- .r-td:not(:last-child) {
2062
- border-right: 1px solid var(--r-main-200);
2063
- }
2064
-
2065
- .r-td_left {
2066
- text-align: left;
2067
- }
2068
-
2069
- .r-td_center {
2070
- text-align: center;
2071
- }
2072
-
2073
- .r-td_right {
2074
- text-align: right;
2075
2057
  }.r-th {
2076
2058
  padding: 8px 12px;
2077
2059
  border-collapse: collapse;
@@ -2098,6 +2080,24 @@
2098
2080
 
2099
2081
  .r-th_right {
2100
2082
  text-align: right;
2083
+ }.r-td {
2084
+ padding: 8px 12px;
2085
+ border-collapse: collapse;
2086
+ }
2087
+ .r-td:not(:last-child) {
2088
+ border-right: 1px solid var(--r-main-200);
2089
+ }
2090
+
2091
+ .r-td_left {
2092
+ text-align: left;
2093
+ }
2094
+
2095
+ .r-td_center {
2096
+ text-align: center;
2097
+ }
2098
+
2099
+ .r-td_right {
2100
+ text-align: right;
2101
2101
  }.r-tr {
2102
2102
  border-collapse: collapse;
2103
2103
  }