robindoc 0.0.0-experimental-7477c3a → 0.0.0-experimental-abdf899

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 +895 -895
  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,6 +387,42 @@
423
387
  --r-cl-60: #86181d;
424
388
  --r-cl-61: #144620;
425
389
  --r-cl-62: #c24e00;
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 {
413
+ min-height: calc(100dvh - var(--r-header-height));
414
+ overflow-wrap: break-word;
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
+ }
426
426
  }.r-page-container {
427
427
  min-height: calc(100dvh - var(--r-header-height));
428
428
  overflow-wrap: break-word;
@@ -448,972 +448,810 @@
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-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);
603
+ .r-sidebar-btn {
604
+ position: sticky;
605
+ top: 0;
606
+ display: flex;
650
607
  width: 100%;
651
- text-align: left;
652
- 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;
653
616
  box-sizing: border-box;
654
617
  }
655
618
  @media screen and (width >= 768px) {
656
- .r-search-btn {
657
- width: 220px;
658
- padding: 8px 96px 8px 16px;
619
+ .r-sidebar-btn {
620
+ display: none;
659
621
  }
660
622
  }
661
- .r-search-btn:hover {
662
- 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;
663
629
  }
664
- .r-search-btn:hover .r-search-kbd {
665
- color: var(--r-main-950);
630
+
631
+ .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
632
+ transform: rotate(90deg);
666
633
  }
667
634
 
668
- .r-search-title {
669
- display: block;
670
- overflow: hidden;
671
- text-overflow: ellipsis;
672
- 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;
673
642
  }
674
643
 
675
- .r-search-kbd {
676
- display: none;
677
- position: absolute;
678
- right: 6px;
679
- top: 50%;
680
- 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;
681
648
  }
682
- @media screen and (width >= 768px) {
683
- .r-search-kbd {
684
- display: flex;
685
- }
649
+
650
+ .r-sidebar-sublist {
651
+ margin-left: 12px;
686
652
  }
687
653
 
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;
654
+ .r-sidebar-drop > .r-sidebar-sublist {
697
655
  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;
656
+ transition: opacity 0.2s ease;
703
657
  }
704
658
 
705
- .r-search-dialog[open] {
659
+ .r-sidebar-drop[open] > .r-sidebar-sublist {
706
660
  opacity: 1;
707
661
  }
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
662
 
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;
663
+ .r-sidebar-drop > .r-sidebar-sublist > .r-sidebar-li {
664
+ margin-top: -4rem;
665
+ transition: margin-top 0.3s ease;
733
666
  }
734
667
 
735
- .r-search-dialog[open] .r-search-popup {
736
- opacity: 1;
737
- transform: translateX(-50%) translateY(0);
738
- }
739
668
  @starting-style {
740
- .r-search-dialog[open] .r-search-popup {
741
- opacity: 0;
742
- transform: translateX(-50%) translateY(-20px);
669
+ .r-sidebar-drop[open]._starting-style > .r-sidebar-sublist > .r-sidebar-li {
670
+ margin-top: -4rem;
743
671
  }
744
672
  }
745
673
 
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);
674
+ .r-sidebar-drop[open] > .r-sidebar-sublist > .r-sidebar-li {
675
+ margin-top: 0;
753
676
  }
754
677
 
755
- .r-search-popup-header {
678
+ .r-sidebar-sublist .r-sidebar-link {
756
679
  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;
680
+ border-top-left-radius: 0;
681
+ border-bottom-left-radius: 0;
767
682
  box-sizing: border-box;
768
683
  }
769
- @media screen and (width >= 768px) {
770
- .r-search-input {
771
- padding: 16px 72px 16px 20px;
772
- }
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;
773
694
  }
774
- .r-search-input:hover {
775
- border-bottom-color: var(--r-main-300);
695
+
696
+ .r-sidebar-li {
697
+ position: relative;
698
+ line-height: 1.5;
776
699
  }
777
- .r-search-input:focus {
778
- outline: none;
779
- border-bottom-color: var(--r-primary-600);
700
+
701
+ .r-sidebar-li._separator {
702
+ background: var(--r-main-200);
703
+ padding: 1px;
780
704
  }
781
- .r-search-input::placeholder {
782
- color: var(--r-main-500);
705
+
706
+ .r-sidebar-li._droppable > a {
707
+ padding-right: 32px;
783
708
  }
784
709
 
785
- .r-search-popup-kbd {
786
- color: var(--r-main-600);
787
- right: 20px;
710
+ .r-sidebar-li-d0 {
711
+ margin-left: -8px;
788
712
  }
789
713
 
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;
714
+ .r-sidebar-p {
797
715
  margin: 0;
798
- box-sizing: border-box;
716
+ padding: 4px 10px;
799
717
  }
800
718
 
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;
719
+ .r-sidebar-heading {
720
+ color: var(--r-main-900);
721
+ font-weight: 600;
722
+ margin-block-end: 4px;
811
723
  }
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);
724
+ .r-sidebar-heading:not(:first-child) {
725
+ margin-block-start: 12px;
816
726
  }
817
727
 
818
- .r-search-item-title {
819
- margin: 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;
820
739
  }
821
740
 
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;
741
+ .r-sidebar-link._target {
742
+ color: var(--r-primary-950);
743
+ background-color: var(--r-main-50);
744
+ }
745
+
746
+ .r-sidebar-link:hover {
747
+ color: var(--r-primary-800);
833
748
  background-color: var(--r-main-100);
834
- border: 1px solid var(--r-main-200);
835
- border-radius: 100px;
836
- box-sizing: border-box;
749
+ transition-delay: initial;
837
750
  }
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;
751
+ .r-sidebar-link:hover::before {
752
+ background-color: currentColor;
753
+ transition-delay: initial;
754
+ }
755
+
756
+ .r-sidebar-link._active {
757
+ color: var(--r-primary-700);
846
758
  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;
759
+ }
760
+ .r-sidebar-link._active::before {
761
+ background-color: currentColor;
851
762
  }
852
763
 
853
- .r-theme-switcher-btn {
854
- padding: 8px;
855
- background: none;
856
- border: 0;
857
- border-radius: 100px;
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;
858
771
  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;
772
+ transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
863
773
  }
864
- .r-theme-switcher-btn:hover {
865
- color: var(--r-main-950);
866
- fill: var(--r-main-600);
774
+ .r-sidebar-drop-btn:hover {
775
+ color: var(--r-primary-500);
776
+ transition-delay: initial;
867
777
  }
868
-
869
- .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
870
- left: 2px;
778
+ .r-sidebar-drop-btn::before {
779
+ content: "";
780
+ position: absolute;
781
+ inset: -4px;
782
+ }
783
+ .r-sidebar-drop-btn::-webkit-details-marker {
784
+ display: none;
871
785
  }
872
786
 
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;
787
+ .r-sidebar-drop-icon {
788
+ display: block;
789
+ transition: transform 0.2s;
879
790
  }
880
791
 
881
- .r-theme-switcher::before,
882
- .r-theme-system .r-theme-switcher::before {
883
- left: 38px;
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;
798
+ }
799
+ @media screen and (width >= 1024px) {
800
+ .r-header-menu {
801
+ flex: 1;
802
+ order: unset;
803
+ }
884
804
  }
885
805
 
886
- .r-theme-light:not(.r-theme-system) .r-theme-switcher::before {
887
- left: 74px;
806
+ .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
807
+ display: flex;
888
808
  }
889
809
 
890
- .r-theme-switcher-svg {
891
- display: block;
892
- }.r-article {
893
- padding: 20px 0 40px;
894
- grid-area: content;
810
+ .r-header-responsive {
811
+ display: none;
812
+ justify-content: flex-end;
813
+ flex: 1;
814
+ gap: 24px;
815
+ z-index: 1;
895
816
  }
896
- @media screen and (width >= 1180px) {
897
- .r-article {
898
- padding: 32px 0 40px;
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;
899
827
  }
900
828
  }
901
- .r-article > *:first-child {
902
- margin-top: 0;
903
- }
904
- .r-article > *:last-child {
905
- margin-bottom: 0;
829
+ @media screen and (width >= 1024px) {
830
+ .r-header-responsive {
831
+ display: flex;
832
+ justify-content: space-between;
833
+ align-items: center;
834
+ }
906
835
  }
907
836
 
908
- .r-checkbox {
837
+ .r-header-burger {
838
+ position: relative;
839
+ display: flex;
840
+ align-items: center;
841
+ justify-content: center;
842
+ height: 32px;
843
+ width: 32px;
909
844
  cursor: pointer;
910
- width: 20px;
911
- height: 20px;
912
- margin: 4px;
913
- vertical-align: middle;
845
+ background: none;
846
+ border: none;
914
847
  box-sizing: border-box;
915
848
  }
916
-
917
- .r-label {
918
- cursor: pointer;
919
- }
920
-
921
- .r-task-ol,
922
- .r-task-ul {
923
- list-style: none;
849
+ @media screen and (width >= 1024px) {
850
+ .r-header-burger {
851
+ display: none;
852
+ }
924
853
  }
925
854
 
926
- .r-task-label {
855
+ .r-burger-line {
927
856
  display: block;
928
- width: 100%;
929
- padding-top: 2px;
930
- padding-bottom: 2px;
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;
931
863
  box-sizing: border-box;
932
864
  }
933
- .r-task-label:hover .r-checkbox {
934
- filter: brightness(0.8);
935
- }
936
865
 
937
- .r-task-li.r-task-li {
938
- margin-block-start: 2px;
939
- margin-block-end: 2px;
866
+ .r-burger-line._top {
867
+ transform: translateY(-3px);
940
868
  }
941
869
 
942
- .r-label-text {
943
- vertical-align: middle;
944
- }.r-sidebar {
945
- grid-area: sidebar;
946
- box-sizing: border-box;
947
- }
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;
961
- }
870
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
871
+ transform: translateY(0) rotate(45deg);
872
+ margin-top: 0;
962
873
  }
963
874
 
964
- .r-sidebar-top-mock {
965
- grid-row-start: 1;
966
- grid-column-start: 1;
875
+ .r-burger-line._bottom {
876
+ transform: translateY(3px);
967
877
  }
968
878
 
969
- @media screen and (width < 768px) {
970
- .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
971
- display: none;
972
- }
973
- }
974
-
975
- .r-sidebar-nav {
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;
976
892
  box-sizing: border-box;
977
893
  }
978
- @media screen and (width < 768px) {
979
- .r-sidebar-nav {
980
- overflow: auto;
981
- max-height: calc(100dvh - var(--r-header-height) - 41px);
894
+ @media screen and (width >= 768px) {
895
+ .r-search-btn {
896
+ width: 220px;
897
+ padding: 8px 96px 8px 16px;
982
898
  }
983
899
  }
984
-
985
- .r-sidebar-drop {
986
- margin-top: -4px;
987
- padding-top: 4px;
988
- }
989
-
990
- .r-sidebar-sublist {
991
- position: relative;
992
- padding-top: 2px;
900
+ .r-search-btn:hover {
901
+ border-color: var(--r-main-600);
993
902
  }
994
- .r-sidebar-sublist:hover::before {
995
- background-color: var(--r-primary-800);
996
- transition-delay: initial;
903
+ .r-search-btn:hover .r-search-kbd {
904
+ color: var(--r-main-950);
997
905
  }
998
906
 
999
- .r-sidebar-sublist::before {
1000
- content: "";
1001
- 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;
1010
- box-sizing: border-box;
907
+ .r-search-title {
908
+ display: block;
909
+ overflow: hidden;
910
+ text-overflow: ellipsis;
911
+ white-space: nowrap;
1011
912
  }
1012
913
 
1013
- .r-sidebar-nav {
1014
- padding: 32px 4px 32px 2px;
1015
- box-sizing: border-box;
1016
- }
1017
- @media screen and (width < 768px) {
1018
- .r-sidebar-nav {
1019
- padding: 12px;
1020
- }
914
+ .r-search-kbd {
915
+ display: none;
916
+ position: absolute;
917
+ right: 6px;
918
+ top: 50%;
919
+ transform: translateY(-50%);
1021
920
  }
1022
921
  @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
- }
1032
- }
1033
-
1034
- .r-sidebar-space {
1035
- box-sizing: border-box;
1036
- }
1037
- @media screen and (width < 768px) {
1038
- .r-sidebar-space {
1039
- display: block;
1040
- height: 40px;
922
+ .r-search-kbd {
923
+ display: flex;
1041
924
  }
1042
925
  }
1043
926
 
1044
- .r-sidebar-btn {
1045
- position: sticky;
1046
- top: 0;
1047
- display: flex;
927
+ .r-search-dialog {
1048
928
  width: 100%;
1049
- font-size: 14px;
1050
- border: 0;
1051
- padding: 12px;
929
+ height: 100%;
1052
930
  background: none;
1053
- cursor: pointer;
1054
- color: var(--r-main-800);
1055
- background-color: var(--r-main-50);
1056
- z-index: 1;
1057
- box-sizing: border-box;
1058
- }
1059
- @media screen and (width >= 768px) {
1060
- .r-sidebar-btn {
1061
- display: none;
1062
- }
1063
- }
1064
-
1065
- .r-sidebar-chevron {
1066
- display: inline;
1067
- margin-right: 6px;
1068
- transition: transform 0.2s;
1069
- box-sizing: border-box;
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;
936
+ opacity: 0;
1070
937
  }
1071
-
1072
- .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
1073
- transform: rotate(90deg);
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;
1074
942
  }
1075
943
 
1076
- .r-sidebar-list {
1077
- color: var(--r-main-700);
1078
- list-style: none;
1079
- padding: 0;
1080
- margin: 0;
1081
- font-size: 14px;
1082
- box-sizing: border-box;
944
+ .r-search-dialog[open] {
945
+ opacity: 1;
1083
946
  }
1084
-
1085
- .r-sidebar-drop::details-content {
1086
- overflow: hidden;
1087
- transition: content-visibility 0.4s allow-discrete;
1088
- box-sizing: border-box;
947
+ @starting-style {
948
+ .r-search-dialog[open] {
949
+ opacity: 0;
950
+ }
1089
951
  }
1090
-
1091
- .r-sidebar-sublist {
1092
- margin-left: 12px;
952
+ .r-search-dialog[open]::backdrop {
953
+ backdrop-filter: blur(4px);
954
+ background: color-mix(in srgb, var(--r-main-900) 40%, transparent 100%);
1093
955
  }
1094
956
 
1095
- .r-sidebar-drop > .r-sidebar-sublist {
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;
1096
969
  opacity: 0;
1097
- transition: opacity 0.2s ease;
970
+ transform: translateX(-50%) translateY(-20px);
971
+ transition: opacity 0.2s, transform 0.2s;
1098
972
  }
1099
973
 
1100
- .r-sidebar-drop[open] > .r-sidebar-sublist {
974
+ .r-search-dialog[open] .r-search-popup {
1101
975
  opacity: 1;
976
+ transform: translateX(-50%) translateY(0);
1102
977
  }
1103
-
1104
- .r-sidebar-drop > .r-sidebar-sublist > .r-sidebar-li {
1105
- margin-top: -4rem;
1106
- transition: margin-top 0.3s ease;
1107
- }
1108
-
1109
978
  @starting-style {
1110
- .r-sidebar-drop[open]._starting-style > .r-sidebar-sublist > .r-sidebar-li {
1111
- margin-top: -4rem;
979
+ .r-search-dialog[open] .r-search-popup {
980
+ opacity: 0;
981
+ transform: translateX(-50%) translateY(-20px);
1112
982
  }
1113
983
  }
1114
984
 
1115
- .r-sidebar-drop[open] > .r-sidebar-sublist > .r-sidebar-li {
1116
- margin-top: 0;
985
+ .r-search-dialog._active .r-search-popup {
986
+ border-radius: 12px;
987
+ border-bottom-width: 2px;
1117
988
  }
1118
989
 
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;
1124
- }
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;
990
+ .r-search-popup:has(.r-search-input:focus) {
991
+ border-color: var(--r-main-300);
1135
992
  }
1136
993
 
1137
- .r-sidebar-li {
994
+ .r-search-popup-header {
1138
995
  position: relative;
1139
- line-height: 1.5;
1140
- }
1141
-
1142
- .r-sidebar-li._separator {
1143
- background: var(--r-main-200);
1144
- padding: 1px;
996
+ border-bottom: 1px solid var(--r-main-200);
1145
997
  }
1146
998
 
1147
- .r-sidebar-li._droppable > a {
1148
- padding-right: 32px;
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;
1149
1007
  }
1150
-
1151
- .r-sidebar-li-d0 {
1152
- margin-left: -8px;
1008
+ @media screen and (width >= 768px) {
1009
+ .r-search-input {
1010
+ padding: 16px 72px 16px 20px;
1011
+ }
1153
1012
  }
1154
-
1155
- .r-sidebar-p {
1156
- margin: 0;
1157
- padding: 4px 10px;
1013
+ .r-search-input:hover {
1014
+ border-bottom-color: var(--r-main-300);
1158
1015
  }
1159
-
1160
- .r-sidebar-heading {
1161
- color: var(--r-main-900);
1162
- font-weight: 600;
1163
- margin-block-end: 4px;
1016
+ .r-search-input:focus {
1017
+ outline: none;
1018
+ border-bottom-color: var(--r-primary-600);
1164
1019
  }
1165
- .r-sidebar-heading:not(:first-child) {
1166
- margin-block-start: 12px;
1020
+ .r-search-input::placeholder {
1021
+ color: var(--r-main-500);
1167
1022
  }
1168
1023
 
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;
1024
+ .r-search-popup-kbd {
1025
+ color: var(--r-main-600);
1026
+ right: 20px;
1180
1027
  }
1181
1028
 
1182
- .r-sidebar-link._target {
1183
- color: var(--r-primary-950);
1184
- background-color: var(--r-main-50);
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;
1036
+ margin: 0;
1037
+ box-sizing: border-box;
1185
1038
  }
1186
1039
 
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;
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;
1195
1050
  }
1196
-
1197
- .r-sidebar-link._active {
1198
- color: var(--r-primary-700);
1051
+ .r-search-item:hover, .r-search-item:focus {
1052
+ color: var(--r-main-950);
1199
1053
  background-color: var(--r-main-50);
1200
- }
1201
- .r-sidebar-link._active::before {
1202
- background-color: currentColor;
1203
- }
1204
-
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;
1054
+ border-color: var(--r-main-200);
1226
1055
  }
1227
1056
 
1228
- .r-sidebar-drop-icon {
1229
- display: block;
1230
- transition: transform 0.2s;
1057
+ .r-search-item-title {
1058
+ margin: 0;
1231
1059
  }
1232
1060
 
1233
- .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
1234
- transform: rotate(90deg);
1235
- }.r-keylink {
1236
- display: block;
1061
+ .r-search-item-desc {
1062
+ font-size: 14px;
1063
+ color: var(--r-main-600);
1064
+ margin: 12px 0 0;
1065
+ }.r-dropdown {
1237
1066
  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);
1067
+ color: var(--r-main-600);
1068
+ transition: color 0.2s 0.1s;
1243
1069
  }
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;
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;
1070
+ .r-dropdown:hover, .r-dropdown:focus-within {
1071
+ color: var(--r-main-950);
1267
1072
  }
1268
-
1269
- .r-backdrop._visible {
1270
- opacity: 1;
1073
+ .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
1271
1074
  visibility: visible;
1272
1075
  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
- }
1076
+ transform: translateY(20px);
1077
+ opacity: 1;
1315
1078
  }
1316
-
1317
- .r-breadcrumb {
1318
- display: inline;
1079
+ .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
1080
+ transform: rotate(180deg);
1319
1081
  }
1320
1082
 
1321
- .r-breadcrumb._previous::after {
1322
- content: "/";
1323
- font-weight: 600;
1324
- margin-inline: 8px;
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;
1325
1097
  }
1326
1098
 
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);
1099
+ .r-dropdown-chevron {
1100
+ display: block;
1101
+ margin-left: 6px;
1102
+ transition: transform 0.3s 0.1s;
1103
+ box-sizing: border-box;
1333
1104
  }
1334
1105
 
1335
- .r-breadcrumb-link,
1336
- .r-breadcrumb-title {
1337
- display: inline;
1338
- padding: 6px 0;
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;
1115
+ background-color: var(--r-main-50);
1116
+ border: 1px solid var(--r-main-100);
1117
+ border-radius: 8px;
1339
1118
  margin: 0;
1119
+ padding: 2px 6px;
1120
+ min-width: 120px;
1121
+ max-width: 180px;
1122
+ box-sizing: border-box;
1340
1123
  }
1341
1124
 
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;
1125
+ .r-dropdown-link {
1126
+ display: block;
1127
+ width: 100%;
1357
1128
  text-decoration: none;
1358
- font-size: 14px;
1359
- color: var(--r-main-800);
1129
+ color: var(--r-main-700);
1130
+ padding: 4px 8px;
1131
+ margin-top: 4px;
1132
+ margin-bottom: 4px;
1133
+ border-radius: 4px;
1134
+ transition: background-color 0.2s;
1135
+ box-sizing: border-box;
1360
1136
  }
1361
- .r-pagination-item:hover {
1362
- color: var(--r-main-950);
1137
+ .r-dropdown-link:hover {
1138
+ color: var(--r-main-900);
1139
+ background-color: var(--r-main-100);
1363
1140
  }
1364
1141
 
1365
- .r-pagination-item._prev {
1366
- padding-left: 28px;
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;
1367
1148
  }
1368
-
1369
- .r-pagination-item._next {
1370
- text-align: right;
1371
- padding-right: 28px;
1149
+ @media screen and (width >= 1024px) {
1150
+ .r-header-social {
1151
+ flex: none;
1152
+ justify-content: unset;
1153
+ }
1372
1154
  }
1373
1155
 
1374
- .r-pagination-text {
1375
- display: block;
1376
- line-height: 2;
1156
+ .r-header-social-git {
1157
+ color: var(--r-main-700);
1158
+ transition: color 0.2s;
1377
1159
  }
1378
-
1379
- .r-pagination-title {
1380
- font-weight: 600;
1381
- font-size: 16px;
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
+ }.r-theme-switcher {
1170
+ position: relative;
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;
1179
+ box-sizing: border-box;
1382
1180
  }
1383
-
1384
- .r-pagination-icon {
1181
+ .r-theme-switcher::before {
1182
+ content: "";
1385
1183
  position: absolute;
1386
- top: 50%;
1387
- transform: translateY(-50%);
1388
- transition: transform 0.2s;
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;
1193
+ box-sizing: border-box;
1389
1194
  }
1390
1195
 
1391
- .r-pagination-icon._prev {
1392
- left: 0;
1196
+ .r-theme-switcher-btn {
1197
+ padding: 8px;
1198
+ background: none;
1199
+ border: 0;
1200
+ border-radius: 100px;
1201
+ cursor: pointer;
1202
+ color: var(--r-main-700);
1203
+ fill: transparent;
1204
+ z-index: 1;
1205
+ transition: color 0.2s 0.1s, fill 0.2s;
1393
1206
  }
1394
- .r-pagination-item:hover .r-pagination-icon._prev {
1395
- transform: translate(-4px, -50%);
1207
+ .r-theme-switcher-btn:hover {
1208
+ color: var(--r-main-950);
1209
+ fill: var(--r-main-600);
1396
1210
  }
1397
- @media screen and (width >= 1180px) {
1398
- .r-pagination-item:hover .r-pagination-icon._prev {
1399
- transform: translate(-8px, -50%);
1400
- }
1211
+
1212
+ .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
1213
+ left: 2px;
1401
1214
  }
1402
1215
 
1403
- .r-pagination-icon._next {
1404
- right: 0;
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;
1405
1222
  }
1406
- .r-pagination-item:hover .r-pagination-icon._next {
1407
- transform: translate(4px, -50%);
1223
+
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 {
1416
1234
  display: block;
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);
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
  }
@@ -1614,48 +1452,210 @@
1614
1452
  }
1615
1453
 
1616
1454
  @media screen and (width >= 1180px) {
1617
- .r-contents-link._passed {
1618
- color: var(--r-main-700);
1455
+ .r-contents-link._passed {
1456
+ color: var(--r-main-700);
1457
+ }
1458
+ }
1459
+
1460
+ @media screen and (width >= 1180px) {
1461
+ .r-contents-link._active {
1462
+ color: var(--r-primary-800);
1463
+ }
1464
+ }
1465
+
1466
+ .r-contents-actions {
1467
+ position: sticky;
1468
+ bottom: 0;
1469
+ padding-top: 2px;
1470
+ padding-bottom: 2px;
1471
+ margin-top: 20px;
1472
+ background-color: var(--r-main-50);
1473
+ }
1474
+ @media screen and (width < 1180px) {
1475
+ .r-contents-actions {
1476
+ display: none;
1477
+ }
1478
+ }
1479
+
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);
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%);
1619
1590
  }
1620
1591
  }
1621
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
+ }
1622
1599
  @media screen and (width >= 1180px) {
1623
- .r-contents-link._active {
1624
- color: var(--r-primary-800);
1600
+ .r-pagination-item:hover .r-pagination-icon._next {
1601
+ transform: translate(8px, -50%);
1625
1602
  }
1626
1603
  }
1627
1604
 
1628
- .r-contents-actions {
1629
- position: sticky;
1605
+ .r-pagination-svg {
1606
+ display: block;
1607
+ }.r-last-modified {
1608
+ color: var(--r-main-700);
1609
+ margin-block-start: 16px;
1610
+ }.r-backdrop {
1611
+ position: fixed;
1612
+ top: 0;
1613
+ right: 0;
1630
1614
  bottom: 0;
1631
- padding-top: 2px;
1632
- padding-bottom: 2px;
1633
- margin-top: 20px;
1634
- background-color: var(--r-main-50);
1635
- }
1636
- @media screen and (width < 1180px) {
1637
- .r-contents-actions {
1638
- display: none;
1639
- }
1615
+ left: 0;
1616
+ opacity: 0;
1617
+ visibility: hidden;
1618
+ pointer-events: none;
1619
+ z-index: 100;
1640
1620
  }
1641
1621
 
1642
- .r-contents-git {
1622
+ .r-backdrop._visible {
1623
+ opacity: 1;
1624
+ visibility: visible;
1625
+ pointer-events: all;
1626
+ }.r-git-logo {
1643
1627
  display: block;
1644
- width: 100%;
1628
+ }.r-external-mark {
1645
1629
  position: relative;
1646
- color: var(--r-main-600);
1647
- text-decoration: none;
1648
- padding-top: 10px;
1649
- padding-bottom: 10px;
1650
- font-size: 14px;
1651
- font-weight: 600;
1630
+ vertical-align: text-top;
1631
+ display: inline-block;
1632
+ margin-left: -4px;
1633
+ margin-right: 2px;
1634
+ width: 6px;
1635
+ height: 6px;
1652
1636
  box-sizing: border-box;
1653
1637
  }
1654
- .r-contents-git:hover {
1655
- color: var(--r-main-900);
1656
- }.r-last-modified {
1657
- color: var(--r-main-700);
1658
- margin-block-start: 16px;
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;
@@ -1672,25 +1672,6 @@
1672
1672
  min-width: 24px;
1673
1673
  text-align: center;
1674
1674
  box-sizing: border-box;
1675
- }.r-anchor-heading:hover .r-anchor-heading-link {
1676
- visibility: visible;
1677
- opacity: 1;
1678
- }
1679
-
1680
- .r-anchor-heading-link {
1681
- visibility: hidden;
1682
- opacity: 0;
1683
- transition: opacity 0.3s allow-discrete;
1684
- padding-inline: 8px;
1685
- margin-inline-start: -4px;
1686
- color: var(--r-main-600);
1687
- text-decoration: none;
1688
- }
1689
- .r-anchor-heading-link:hover {
1690
- color: var(--r-primary-800);
1691
- }
1692
- .r-anchor-heading-link::after {
1693
- content: "#";
1694
1675
  }.r-code-section {
1695
1676
  position: relative;
1696
1677
  margin-block-start: 1.5em;
@@ -1742,6 +1723,25 @@
1742
1723
 
1743
1724
  .r-code-section-filename {
1744
1725
  font-family: var(--monospace-font, monospace, monospace);
1726
+ }.r-anchor-heading:hover .r-anchor-heading-link {
1727
+ visibility: visible;
1728
+ opacity: 1;
1729
+ }
1730
+
1731
+ .r-anchor-heading-link {
1732
+ visibility: hidden;
1733
+ opacity: 0;
1734
+ transition: opacity 0.3s allow-discrete;
1735
+ padding-inline: 8px;
1736
+ margin-inline-start: -4px;
1737
+ color: var(--r-main-600);
1738
+ text-decoration: none;
1739
+ }
1740
+ .r-anchor-heading-link:hover {
1741
+ color: var(--r-primary-800);
1742
+ }
1743
+ .r-anchor-heading-link::after {
1744
+ content: "#";
1745
1745
  }.r-block {
1746
1746
  position: relative;
1747
1747
  width: 100%;
@@ -1752,6 +1752,46 @@
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;
1755
1795
  }.r-blockquote {
1756
1796
  padding: 4px 12px 4px 20px;
1757
1797
  border: 4px solid var(--r-main-100);
@@ -1809,46 +1849,6 @@
1809
1849
  }
1810
1850
  .r-blockquote-caution .r-blockquote-title {
1811
1851
  color: var(--r-caution);
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;
1829
- margin-block-start: 1em;
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;
1852
1852
  }.r-img {
1853
1853
  max-width: 100%;
1854
1854
  box-sizing: border-box;
@@ -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,11 +2080,33 @@
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
  }
2104
2104
  .r-tr:not(:first-child) {
2105
2105
  border-top: 1px solid var(--r-main-200);
2106
+ }.r-task-ol {
2107
+ list-style: none;
2108
+ }.r-task-ul {
2109
+ list-style: none;
2106
2110
  }.r-task-li.r-task-li {
2107
2111
  margin-block-start: 2px;
2108
2112
  margin-block-end: 2px;
@@ -2132,10 +2136,6 @@
2132
2136
 
2133
2137
  .r-task-label-text {
2134
2138
  vertical-align: middle;
2135
- }.r-task-ol {
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;