robindoc 0.0.0-experimental-4f05ca6 → 0.0.0-experimental-95c1bd7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/lib/styles.css +776 -776
  2. package/package.json +1 -1
package/lib/styles.css CHANGED
@@ -87,6 +87,41 @@
87
87
  width: 100%;
88
88
  left: 0;
89
89
  }
90
+ }.r-footer {
91
+ border-top: 1px solid var(--r-main-300);
92
+ padding-top: 16px;
93
+ padding-bottom: 16px;
94
+ }
95
+
96
+ .r-footer-row {
97
+ display: flex;
98
+ justify-content: space-between;
99
+ align-items: center;
100
+ gap: 32px;
101
+ }
102
+
103
+ .r-footer-additional {
104
+ margin-top: 20px;
105
+ justify-content: flex-end;
106
+ }
107
+
108
+ .r-copyright {
109
+ color: var(--r-main-800);
110
+ }
111
+
112
+ .r-powered {
113
+ font-size: 14px;
114
+ display: block;
115
+ color: var(--r-main-600);
116
+ }
117
+
118
+ .r-powered-link {
119
+ font-weight: 600;
120
+ text-decoration: none;
121
+ color: var(--r-main-950);
122
+ }
123
+ .r-powered-link:hover {
124
+ color: var(--r-primary-900);
90
125
  }.r-root {
91
126
  --r-header-height: 60px;
92
127
  position: relative;
@@ -319,6 +354,28 @@
319
354
  --r-cl-60: #86181d;
320
355
  --r-cl-61: #144620;
321
356
  --r-cl-62: #c24e00;
357
+ }.r-docs-container {
358
+ min-height: calc(100dvh - var(--r-header-height));
359
+ overflow-wrap: break-word;
360
+ box-sizing: border-box;
361
+ }
362
+ @media screen and (width >= 768px) {
363
+ .r-docs-container {
364
+ display: grid;
365
+ justify-content: center;
366
+ column-gap: 32px;
367
+ grid-template-areas: "sidebar breadcrumbs" "sidebar contents" "sidebar content" "sidebar pagination";
368
+ grid-template-columns: 1fr calc(100% - 248px);
369
+ grid-template-rows: auto auto 1fr auto;
370
+ }
371
+ }
372
+ @media screen and (width >= 1180px) {
373
+ .r-docs-container {
374
+ column-gap: 40px;
375
+ grid-template-areas: "sidebar breadcrumbs contents" "sidebar content contents" "sidebar pagination contents";
376
+ grid-template-columns: 200px 640px 1fr;
377
+ grid-template-rows: auto 1fr auto;
378
+ }
322
379
  }.r-blog-container {
323
380
  min-height: calc(100dvh - var(--r-header-height));
324
381
  overflow-wrap: break-word;
@@ -342,337 +399,317 @@
342
399
  top: 8px;
343
400
  left: 12px;
344
401
  z-index: 1001;
345
- }.r-docs-container {
346
- min-height: calc(100dvh - var(--r-header-height));
347
- overflow-wrap: break-word;
348
- box-sizing: border-box;
349
- }
350
- @media screen and (width >= 768px) {
351
- .r-docs-container {
352
- display: grid;
353
- justify-content: center;
354
- column-gap: 32px;
355
- grid-template-areas: "sidebar breadcrumbs" "sidebar contents" "sidebar content" "sidebar pagination";
356
- grid-template-columns: 1fr calc(100% - 248px);
357
- grid-template-rows: auto auto 1fr auto;
358
- }
359
- }
360
- @media screen and (width >= 1180px) {
361
- .r-docs-container {
362
- column-gap: 40px;
363
- grid-template-areas: "sidebar breadcrumbs contents" "sidebar content contents" "sidebar pagination contents";
364
- grid-template-columns: 200px 640px 1fr;
365
- grid-template-rows: auto 1fr auto;
366
- }
367
402
  }.r-keylink.keylink-to-navigation:focus {
368
403
  margin-top: -40px;
369
- }.r-footer {
370
- border-top: 1px solid var(--r-main-300);
371
- padding-top: 16px;
372
- padding-bottom: 16px;
373
- }
374
-
375
- .r-footer-row {
404
+ }.r-header-menu {
376
405
  display: flex;
377
- justify-content: space-between;
378
- align-items: center;
379
- gap: 32px;
380
- }
381
-
382
- .r-footer-additional {
383
- margin-top: 20px;
384
406
  justify-content: flex-end;
407
+ order: 1;
385
408
  }
386
-
387
- .r-copyright {
388
- color: var(--r-main-800);
409
+ @media screen and (width >= 1024px) {
410
+ .r-header-menu {
411
+ flex: 1;
412
+ order: unset;
413
+ }
389
414
  }
390
415
 
391
- .r-powered {
392
- font-size: 14px;
393
- display: block;
394
- color: var(--r-main-600);
416
+ .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
417
+ display: flex;
395
418
  }
396
419
 
397
- .r-powered-link {
398
- font-weight: 600;
399
- text-decoration: none;
400
- color: var(--r-main-950);
401
- }
402
- .r-powered-link:hover {
403
- color: var(--r-primary-900);
404
- }.r-sidebar {
405
- grid-area: sidebar;
406
- box-sizing: border-box;
420
+ .r-header-responsive {
421
+ display: none;
422
+ justify-content: flex-end;
423
+ flex: 1;
424
+ gap: 24px;
425
+ z-index: 1;
407
426
  }
408
- @media screen and (width < 768px) {
409
- .r-sidebar {
410
- position: sticky;
411
- width: calc(100% + 24px);
412
- top: var(--r-header-height);
413
- left: 0;
414
- margin: 0 -12px;
427
+ @media screen and (width < 1024px) {
428
+ .r-header-responsive {
429
+ flex-direction: column-reverse;
430
+ padding: 12px;
415
431
  background-color: var(--r-main-50);
416
- border-bottom: 1px solid var(--r-main-200);
417
- z-index: 10;
418
- opacity: 0.98;
419
- padding: 0;
420
- overflow: auto;
432
+ position: fixed;
433
+ top: 60px;
434
+ right: 0;
435
+ bottom: 0;
436
+ left: 0;
421
437
  }
422
438
  }
423
-
424
- .r-sidebar-top-mock {
425
- grid-row-start: 1;
426
- grid-column-start: 1;
427
- }
428
-
429
- @media screen and (width < 768px) {
430
- .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
431
- display: none;
439
+ @media screen and (width >= 1024px) {
440
+ .r-header-responsive {
441
+ display: flex;
442
+ justify-content: space-between;
443
+ align-items: center;
432
444
  }
433
445
  }
434
446
 
435
- .r-sidebar-nav {
447
+ .r-header-burger {
448
+ position: relative;
449
+ display: flex;
450
+ align-items: center;
451
+ justify-content: center;
452
+ height: 32px;
453
+ width: 32px;
454
+ cursor: pointer;
455
+ background: none;
456
+ border: none;
436
457
  box-sizing: border-box;
437
458
  }
438
- @media screen and (width < 768px) {
439
- .r-sidebar-nav {
440
- overflow: auto;
441
- max-height: calc(100dvh - var(--r-header-height) - 41px);
459
+ @media screen and (width >= 1024px) {
460
+ .r-header-burger {
461
+ display: none;
442
462
  }
443
463
  }
444
464
 
445
- .r-sidebar-drop {
446
- margin-top: -4px;
447
- padding-top: 4px;
465
+ .r-burger-line {
466
+ display: block;
467
+ width: 20px;
468
+ height: 1.5px;
469
+ position: absolute;
470
+ background-color: var(--r-main-700);
471
+ margin: auto;
472
+ transition: transform 0.3s;
473
+ box-sizing: border-box;
448
474
  }
449
475
 
450
- .r-sidebar-sublist {
451
- position: relative;
452
- padding-top: 2px;
476
+ .r-burger-line._top {
477
+ transform: translateY(-3px);
453
478
  }
454
- .r-sidebar-sublist:hover::before {
455
- background-color: var(--r-primary-800);
456
- transition-delay: initial;
479
+
480
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
481
+ transform: translateY(0) rotate(45deg);
482
+ margin-top: 0;
457
483
  }
458
484
 
459
- .r-sidebar-sublist::before {
460
- content: "";
461
- position: absolute;
462
- top: 0;
463
- left: -12px;
464
- right: 0;
465
- height: 2px;
466
- border-bottom-left-radius: 2px;
467
- background-color: var(--r-main-200);
468
- z-index: 1;
469
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
470
- box-sizing: border-box;
485
+ .r-burger-line._bottom {
486
+ transform: translateY(3px);
471
487
  }
472
488
 
473
- .r-sidebar-nav {
474
- padding: 32px 4px 32px 2px;
489
+ .r-header-input:checked ~ .r-header-burger .r-burger-line._bottom {
490
+ transform: translateY(0) rotate(-45deg);
491
+ margin-top: 0;
492
+ }.r-search-btn {
493
+ position: relative;
494
+ border-radius: 6px;
495
+ background-color: var(--r-main-100);
496
+ color: var(--r-main-600);
497
+ padding: 8px 20px;
498
+ border: 1px solid var(--r-main-200);
499
+ width: 100%;
500
+ text-align: left;
501
+ cursor: text;
475
502
  box-sizing: border-box;
476
503
  }
477
- @media screen and (width < 768px) {
478
- .r-sidebar-nav {
479
- padding: 12px;
480
- }
481
- }
482
504
  @media screen and (width >= 768px) {
483
- .r-sidebar-nav {
484
- position: sticky;
485
- top: var(--r-header-height);
486
- overflow: auto;
487
- scrollbar-width: thin;
488
- scrollbar-color: var(--r-main-200) transparent;
489
- scrollbar-gutter: stable;
490
- max-height: calc(100dvh - var(--r-header-height));
505
+ .r-search-btn {
506
+ width: 220px;
507
+ padding: 8px 96px 8px 20px;
491
508
  }
492
509
  }
493
-
494
- .r-sidebar-space {
495
- box-sizing: border-box;
510
+ .r-search-btn:hover {
511
+ border-color: var(--r-main-600);
496
512
  }
497
- @media screen and (width < 768px) {
498
- .r-sidebar-space {
499
- display: block;
500
- height: 40px;
513
+ .r-search-btn:hover .r-search-kbd {
514
+ color: var(--r-main-950);
515
+ }
516
+
517
+ .r-search-title {
518
+ display: block;
519
+ overflow: hidden;
520
+ text-overflow: ellipsis;
521
+ white-space: nowrap;
522
+ }
523
+
524
+ .r-search-kbd {
525
+ display: none;
526
+ position: absolute;
527
+ right: 6px;
528
+ top: 50%;
529
+ transform: translateY(-50%);
530
+ }
531
+ @media screen and (width >= 768px) {
532
+ .r-search-kbd {
533
+ display: flex;
501
534
  }
502
535
  }
503
536
 
504
- .r-sidebar-btn {
505
- position: sticky;
506
- top: 0;
507
- display: flex;
508
- width: 100%;
509
- font-size: 14px;
510
- border: 0;
511
- padding: 12px;
512
- background: none;
513
- cursor: pointer;
514
- color: var(--r-main-800);
537
+ .r-search-popup-header {
538
+ position: relative;
539
+ border-bottom: 1px solid var(--r-main-200);
540
+ }
541
+
542
+ .r-search-input {
543
+ border-radius: 12px 12px 0 0;
515
544
  background-color: var(--r-main-50);
516
- z-index: 1;
545
+ padding: 16px 20px;
546
+ border: none;
547
+ border-bottom: 2px solid var(--r-main-300);
548
+ width: 100%;
549
+ font-size: 16px;
517
550
  box-sizing: border-box;
518
551
  }
519
552
  @media screen and (width >= 768px) {
520
- .r-sidebar-btn {
521
- display: none;
553
+ .r-search-input {
554
+ padding: 16px 72px 16px 20px;
522
555
  }
523
556
  }
524
-
525
- .r-sidebar-chevron {
526
- display: inline;
527
- margin-right: 6px;
528
- transition: transform 0.2s;
529
- box-sizing: border-box;
557
+ .r-search-input:hover {
558
+ border-bottom-color: var(--r-primary-800);
559
+ }
560
+ .r-search-input:focus {
561
+ outline: none;
562
+ border-bottom-color: var(--r-primary-600);
563
+ }
564
+ .r-search-input::placeholder {
565
+ color: var(--r-main-500);
530
566
  }
531
567
 
532
- .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
533
- transform: rotate(90deg);
568
+ .r-search-popup-kbd {
569
+ color: var(--r-main-600);
570
+ right: 20px;
534
571
  }
535
572
 
536
- .r-sidebar-list {
537
- color: var(--r-main-700);
573
+ .r-search-results {
574
+ padding: 2px 8px 8px;
575
+ max-height: min(400px, 100dvh - 200px);
576
+ overflow-y: auto;
538
577
  list-style: none;
539
- padding: 0;
578
+ scrollbar-width: thin;
579
+ scrollbar-color: var(--r-main-200) transparent;
540
580
  margin: 0;
541
- font-size: 14px;
542
581
  box-sizing: border-box;
543
582
  }
544
583
 
545
- .r-sidebar-drop[open]::details-content {
546
- height: var(--drop-height, auto);
584
+ .r-search-item {
585
+ display: block;
586
+ text-decoration: none;
587
+ color: var(--r-main-700);
588
+ padding: 8px 12px;
589
+ border: 1px solid var(--r-main-100);
590
+ border-radius: 6px;
591
+ width: 100%;
592
+ margin-top: 6px;
547
593
  box-sizing: border-box;
548
594
  }
549
-
550
- .r-sidebar-drop::details-content {
551
- height: 0;
552
- overflow: hidden;
553
- transition: height 0.3s, content-visibility 0.3s allow-discrete;
554
- box-sizing: border-box;
595
+ .r-search-item:hover, .r-search-item:focus {
596
+ color: var(--r-main-950);
597
+ background-color: var(--r-main-100);
598
+ border-color: var(--r-main-200);
555
599
  }
556
600
 
557
- .r-sidebar-sublist {
558
- margin-left: 12px;
601
+ .r-search-item-title {
602
+ margin: 0;
559
603
  }
560
604
 
561
- .r-sidebar-sublist .r-sidebar-link {
605
+ .r-search-item-desc {
606
+ font-size: 14px;
607
+ color: var(--r-main-600);
608
+ margin: 12px 0 0;
609
+ }.r-dropdown {
562
610
  position: relative;
563
- border-top-left-radius: 0;
564
- border-bottom-left-radius: 0;
565
- box-sizing: border-box;
611
+ color: var(--r-main-600);
612
+ transition: color 0.2s 0.1s;
566
613
  }
567
- .r-sidebar-sublist .r-sidebar-link::before {
568
- content: "";
569
- position: absolute;
570
- left: 0;
571
- top: -1px;
572
- width: 2px;
573
- height: calc(100% + 4px);
574
- background-color: var(--r-main-200);
575
- transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
576
- box-sizing: border-box;
614
+ .r-dropdown:hover, .r-dropdown:focus-within {
615
+ color: var(--r-main-950);
577
616
  }
578
-
579
- .r-sidebar-li {
580
- position: relative;
581
- padding-top: 2px;
582
- padding-bottom: 2px;
583
- line-height: 1.5;
617
+ .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
618
+ visibility: visible;
619
+ pointer-events: all;
620
+ transform: translateY(20px);
621
+ opacity: 1;
584
622
  }
585
-
586
- .r-sidebar-li._separator {
587
- background: var(--r-main-200);
588
- padding: 1px;
623
+ .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
624
+ transform: rotate(180deg);
589
625
  }
590
626
 
591
- .r-sidebar-li._droppable > a {
592
- padding-right: 32px;
627
+ .r-dropdown-summary {
628
+ display: flex;
629
+ justify-content: space-between;
630
+ align-items: center;
631
+ width: 100%;
632
+ position: relative;
633
+ color: inherit;
634
+ cursor: pointer;
635
+ padding: 10px 4px;
636
+ font-size: 16px;
637
+ border: 0;
638
+ background: none;
639
+ z-index: 1;
640
+ box-sizing: border-box;
593
641
  }
594
642
 
595
- .r-sidebar-li-d0 {
596
- margin-left: -8px;
643
+ .r-dropdown-chevron {
644
+ display: block;
645
+ margin-left: 6px;
646
+ transition: transform 0.3s 0.1s;
647
+ box-sizing: border-box;
597
648
  }
598
649
 
599
- .r-sidebar-p {
650
+ .r-dropdown-drop {
651
+ list-style: none;
652
+ position: absolute;
653
+ top: 16px;
654
+ left: -12px;
655
+ visibility: hidden;
656
+ pointer-events: none;
657
+ opacity: 0;
658
+ transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
659
+ background-color: var(--r-main-50);
660
+ border: 1px solid var(--r-main-100);
661
+ border-radius: 8px;
600
662
  margin: 0;
601
- padding: 4px 10px;
602
- }
603
-
604
- .r-sidebar-heading {
605
- color: var(--r-main-900);
606
- font-weight: 600;
607
- margin-block-end: 4px;
608
- }
609
- .r-sidebar-heading:not(:first-child) {
610
- margin-block-start: 12px;
663
+ padding: 2px 6px;
664
+ min-width: 120px;
665
+ max-width: 180px;
666
+ box-sizing: border-box;
611
667
  }
612
668
 
613
- .r-sidebar-link {
669
+ .r-dropdown-link {
614
670
  display: block;
615
- padding: 4px 10px;
616
- color: inherit;
617
- border-bottom: 2px solid transparent;
618
- border-radius: 2px;
671
+ width: 100%;
619
672
  text-decoration: none;
620
- 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;
621
- }
622
-
623
- .r-sidebar-link._target {
624
- color: var(--r-primary-950);
625
- background-color: var(--r-main-50);
673
+ color: var(--r-main-700);
674
+ padding: 4px 8px;
675
+ margin-top: 4px;
676
+ margin-bottom: 4px;
677
+ border-radius: 4px;
678
+ transition: background-color 0.2s;
679
+ box-sizing: border-box;
626
680
  }
627
-
628
- .r-sidebar-link:hover {
629
- color: var(--r-primary-800);
681
+ .r-dropdown-link:hover {
682
+ color: var(--r-main-900);
630
683
  background-color: var(--r-main-100);
631
- transition-delay: initial;
632
- }
633
- .r-sidebar-link:hover::before {
634
- background-color: currentColor;
635
- transition-delay: initial;
636
684
  }
637
685
 
638
- .r-sidebar-link._active {
686
+ .r-dropdown-link._active {
639
687
  color: var(--r-primary-700);
640
- background-color: var(--r-main-50);
641
- }
642
- .r-sidebar-link._active::before {
643
- background-color: currentColor;
644
- }
645
-
646
- .r-sidebar-drop-btn {
647
- position: absolute;
648
- right: 3px;
649
- top: 5px;
650
- border-radius: 4px;
651
- padding: 4px;
652
- list-style: none;
653
- cursor: pointer;
654
- transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
655
- }
656
- .r-sidebar-drop-btn:hover {
657
- color: var(--r-primary-500);
658
- transition-delay: initial;
659
- }
660
- .r-sidebar-drop-btn::before {
661
- content: "";
662
- position: absolute;
663
- inset: -4px;
688
+ }.r-header-social {
689
+ display: flex;
690
+ flex: 1;
691
+ justify-content: flex-end;
664
692
  }
665
- .r-sidebar-drop-btn::-webkit-details-marker {
666
- display: none;
693
+ @media screen and (width >= 1024px) {
694
+ .r-header-social {
695
+ flex: none;
696
+ justify-content: unset;
697
+ }
667
698
  }
668
699
 
669
- .r-sidebar-drop-icon {
670
- display: block;
671
- transition: transform 0.2s;
700
+ .r-header-social-git {
701
+ color: var(--r-main-700);
702
+ transition: color 0.2s;
672
703
  }
673
-
674
- .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
675
- transform: rotate(90deg);
704
+ .r-header-social-git:hover, .r-header-social-git:focus {
705
+ color: var(--r-main-950);
706
+ }.r-container {
707
+ max-width: 1180px;
708
+ padding-right: 12px;
709
+ padding-left: 12px;
710
+ margin-right: auto;
711
+ margin-left: auto;
712
+ box-sizing: border-box;
676
713
  }.r-article {
677
714
  padding: 20px 0 40px;
678
715
  grid-area: content;
@@ -725,335 +762,278 @@
725
762
 
726
763
  .r-label-text {
727
764
  vertical-align: middle;
728
- }.r-header-menu {
729
- display: flex;
730
- justify-content: flex-end;
731
- order: 1;
765
+ }.r-sidebar {
766
+ grid-area: sidebar;
767
+ box-sizing: border-box;
732
768
  }
733
- @media screen and (width >= 1024px) {
734
- .r-header-menu {
735
- flex: 1;
736
- order: unset;
769
+ @media screen and (width < 768px) {
770
+ .r-sidebar {
771
+ position: sticky;
772
+ width: calc(100% + 24px);
773
+ top: var(--r-header-height);
774
+ left: 0;
775
+ margin: 0 -12px;
776
+ background-color: var(--r-main-50);
777
+ border-bottom: 1px solid var(--r-main-200);
778
+ z-index: 10;
779
+ opacity: 0.98;
780
+ padding: 0;
781
+ overflow: auto;
737
782
  }
738
783
  }
739
784
 
740
- .r-header-input:checked ~ .r-header-burger ~ .r-header-responsive {
741
- display: flex;
785
+ .r-sidebar-top-mock {
786
+ grid-row-start: 1;
787
+ grid-column-start: 1;
742
788
  }
743
789
 
744
- .r-header-responsive {
745
- display: none;
746
- justify-content: flex-end;
747
- flex: 1;
748
- gap: 24px;
749
- z-index: 1;
750
- }
751
- @media screen and (width < 1024px) {
752
- .r-header-responsive {
753
- flex-direction: column-reverse;
754
- padding: 12px;
755
- background-color: var(--r-main-50);
756
- position: fixed;
757
- top: 60px;
758
- right: 0;
759
- bottom: 0;
760
- left: 0;
761
- }
762
- }
763
- @media screen and (width >= 1024px) {
764
- .r-header-responsive {
765
- display: flex;
766
- justify-content: space-between;
767
- align-items: center;
790
+ @media screen and (width < 768px) {
791
+ .r-sidebar-input:not(:checked) ~ .r-sidebar-btn ~ .r-sidebar-nav {
792
+ display: none;
768
793
  }
769
794
  }
770
795
 
771
- .r-header-burger {
772
- position: relative;
773
- display: flex;
774
- align-items: center;
775
- justify-content: center;
776
- height: 32px;
777
- width: 32px;
778
- cursor: pointer;
779
- background: none;
780
- border: none;
796
+ .r-sidebar-nav {
781
797
  box-sizing: border-box;
782
798
  }
783
- @media screen and (width >= 1024px) {
784
- .r-header-burger {
785
- display: none;
799
+ @media screen and (width < 768px) {
800
+ .r-sidebar-nav {
801
+ overflow: auto;
802
+ max-height: calc(100dvh - var(--r-header-height) - 41px);
786
803
  }
787
804
  }
788
805
 
789
- .r-burger-line {
790
- display: block;
791
- width: 20px;
792
- height: 1.5px;
793
- position: absolute;
794
- background-color: var(--r-main-700);
795
- margin: auto;
796
- transition: transform 0.3s;
797
- box-sizing: border-box;
806
+ .r-sidebar-drop {
807
+ margin-top: -4px;
808
+ padding-top: 4px;
798
809
  }
799
810
 
800
- .r-burger-line._top {
801
- transform: translateY(-3px);
811
+ .r-sidebar-sublist {
812
+ position: relative;
813
+ padding-top: 2px;
802
814
  }
803
-
804
- .r-header-input:checked ~ .r-header-burger .r-burger-line._top {
805
- transform: translateY(0) rotate(45deg);
806
- margin-top: 0;
815
+ .r-sidebar-sublist:hover::before {
816
+ background-color: var(--r-primary-800);
817
+ transition-delay: initial;
807
818
  }
808
819
 
809
- .r-burger-line._bottom {
810
- transform: translateY(3px);
820
+ .r-sidebar-sublist::before {
821
+ content: "";
822
+ position: absolute;
823
+ top: 0;
824
+ left: -12px;
825
+ right: 0;
826
+ height: 2px;
827
+ border-bottom-left-radius: 2px;
828
+ background-color: var(--r-main-200);
829
+ z-index: 1;
830
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
831
+ box-sizing: border-box;
811
832
  }
812
833
 
813
- .r-header-input:checked ~ .r-header-burger .r-burger-line._bottom {
814
- transform: translateY(0) rotate(-45deg);
815
- margin-top: 0;
816
- }.r-search-btn {
817
- position: relative;
818
- border-radius: 6px;
819
- background-color: var(--r-main-100);
820
- color: var(--r-main-600);
821
- padding: 8px 20px;
822
- border: 1px solid var(--r-main-200);
823
- width: 100%;
824
- text-align: left;
825
- cursor: text;
834
+ .r-sidebar-nav {
835
+ padding: 32px 4px 32px 2px;
826
836
  box-sizing: border-box;
827
837
  }
828
- @media screen and (width >= 768px) {
829
- .r-search-btn {
830
- width: 220px;
831
- padding: 8px 96px 8px 20px;
838
+ @media screen and (width < 768px) {
839
+ .r-sidebar-nav {
840
+ padding: 12px;
832
841
  }
833
842
  }
834
- .r-search-btn:hover {
835
- border-color: var(--r-main-600);
836
- }
837
- .r-search-btn:hover .r-search-kbd {
838
- color: var(--r-main-950);
839
- }
840
-
841
- .r-search-title {
842
- display: block;
843
- overflow: hidden;
844
- text-overflow: ellipsis;
845
- white-space: nowrap;
846
- }
847
-
848
- .r-search-kbd {
849
- display: none;
850
- position: absolute;
851
- right: 6px;
852
- top: 50%;
853
- transform: translateY(-50%);
854
- }
855
843
  @media screen and (width >= 768px) {
856
- .r-search-kbd {
857
- display: flex;
844
+ .r-sidebar-nav {
845
+ position: sticky;
846
+ top: var(--r-header-height);
847
+ overflow: auto;
848
+ scrollbar-width: thin;
849
+ scrollbar-color: var(--r-main-200) transparent;
850
+ scrollbar-gutter: stable;
851
+ max-height: calc(100dvh - var(--r-header-height));
858
852
  }
859
853
  }
860
854
 
861
- .r-search-popup-header {
862
- position: relative;
863
- border-bottom: 1px solid var(--r-main-200);
855
+ .r-sidebar-space {
856
+ box-sizing: border-box;
857
+ }
858
+ @media screen and (width < 768px) {
859
+ .r-sidebar-space {
860
+ display: block;
861
+ height: 40px;
862
+ }
864
863
  }
865
864
 
866
- .r-search-input {
867
- border-radius: 12px 12px 0 0;
868
- background-color: var(--r-main-50);
869
- padding: 16px 20px;
870
- border: none;
871
- border-bottom: 2px solid var(--r-main-300);
865
+ .r-sidebar-btn {
866
+ position: sticky;
867
+ top: 0;
868
+ display: flex;
872
869
  width: 100%;
873
- font-size: 16px;
870
+ font-size: 14px;
871
+ border: 0;
872
+ padding: 12px;
873
+ background: none;
874
+ cursor: pointer;
875
+ color: var(--r-main-800);
876
+ background-color: var(--r-main-50);
877
+ z-index: 1;
874
878
  box-sizing: border-box;
875
879
  }
876
880
  @media screen and (width >= 768px) {
877
- .r-search-input {
878
- padding: 16px 72px 16px 20px;
881
+ .r-sidebar-btn {
882
+ display: none;
879
883
  }
880
884
  }
881
- .r-search-input:hover {
882
- border-bottom-color: var(--r-primary-800);
883
- }
884
- .r-search-input:focus {
885
- outline: none;
886
- border-bottom-color: var(--r-primary-600);
887
- }
888
- .r-search-input::placeholder {
889
- color: var(--r-main-500);
885
+
886
+ .r-sidebar-chevron {
887
+ display: inline;
888
+ margin-right: 6px;
889
+ transition: transform 0.2s;
890
+ box-sizing: border-box;
890
891
  }
891
892
 
892
- .r-search-popup-kbd {
893
- color: var(--r-main-600);
894
- right: 20px;
893
+ .r-sidebar-input:checked ~ .r-sidebar-btn .r-sidebar-chevron {
894
+ transform: rotate(90deg);
895
895
  }
896
896
 
897
- .r-search-results {
898
- padding: 2px 8px 8px;
899
- max-height: min(400px, 100dvh - 200px);
900
- overflow-y: auto;
897
+ .r-sidebar-list {
898
+ color: var(--r-main-700);
901
899
  list-style: none;
902
- scrollbar-width: thin;
903
- scrollbar-color: var(--r-main-200) transparent;
900
+ padding: 0;
904
901
  margin: 0;
902
+ font-size: 14px;
905
903
  box-sizing: border-box;
906
904
  }
907
905
 
908
- .r-search-item {
909
- display: block;
910
- text-decoration: none;
911
- color: var(--r-main-700);
912
- padding: 8px 12px;
913
- border: 1px solid var(--r-main-100);
914
- border-radius: 6px;
915
- width: 100%;
916
- margin-top: 6px;
906
+ .r-sidebar-drop[open]::details-content {
907
+ height: var(--drop-height, auto);
917
908
  box-sizing: border-box;
918
909
  }
919
- .r-search-item:hover, .r-search-item:focus {
920
- color: var(--r-main-950);
921
- background-color: var(--r-main-100);
922
- border-color: var(--r-main-200);
910
+
911
+ .r-sidebar-drop::details-content {
912
+ height: 0;
913
+ overflow: hidden;
914
+ transition: height 0.3s, content-visibility 0.3s allow-discrete;
915
+ box-sizing: border-box;
923
916
  }
924
917
 
925
- .r-search-item-title {
926
- margin: 0;
918
+ .r-sidebar-sublist {
919
+ margin-left: 12px;
927
920
  }
928
921
 
929
- .r-search-item-desc {
930
- font-size: 14px;
931
- color: var(--r-main-600);
932
- margin: 12px 0 0;
933
- }.r-dropdown {
922
+ .r-sidebar-sublist .r-sidebar-link {
934
923
  position: relative;
935
- color: var(--r-main-600);
936
- transition: color 0.2s 0.1s;
924
+ border-top-left-radius: 0;
925
+ border-bottom-left-radius: 0;
926
+ box-sizing: border-box;
937
927
  }
938
- .r-dropdown:hover, .r-dropdown:focus-within {
939
- color: var(--r-main-950);
928
+ .r-sidebar-sublist .r-sidebar-link::before {
929
+ content: "";
930
+ position: absolute;
931
+ left: 0;
932
+ top: -1px;
933
+ width: 2px;
934
+ height: calc(100% + 4px);
935
+ background-color: var(--r-main-200);
936
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
937
+ box-sizing: border-box;
940
938
  }
941
- .r-dropdown:hover .r-dropdown-drop, .r-dropdown:focus-within .r-dropdown-drop {
942
- visibility: visible;
943
- pointer-events: all;
944
- transform: translateY(20px);
945
- opacity: 1;
939
+
940
+ .r-sidebar-li {
941
+ position: relative;
942
+ padding-top: 2px;
943
+ padding-bottom: 2px;
944
+ line-height: 1.5;
946
945
  }
947
- .r-dropdown:hover .r-dropdown-chevron, .r-dropdown:focus-within .r-dropdown-chevron {
948
- transform: rotate(180deg);
946
+
947
+ .r-sidebar-li._separator {
948
+ background: var(--r-main-200);
949
+ padding: 1px;
949
950
  }
950
951
 
951
- .r-dropdown-summary {
952
- display: flex;
953
- justify-content: space-between;
954
- align-items: center;
955
- width: 100%;
956
- position: relative;
957
- color: inherit;
958
- cursor: pointer;
959
- padding: 10px 4px;
960
- font-size: 16px;
961
- border: 0;
962
- background: none;
963
- z-index: 1;
964
- box-sizing: border-box;
952
+ .r-sidebar-li._droppable > a {
953
+ padding-right: 32px;
965
954
  }
966
955
 
967
- .r-dropdown-chevron {
968
- display: block;
969
- margin-left: 6px;
970
- transition: transform 0.3s 0.1s;
971
- box-sizing: border-box;
956
+ .r-sidebar-li-d0 {
957
+ margin-left: -8px;
972
958
  }
973
959
 
974
- .r-dropdown-drop {
975
- list-style: none;
976
- position: absolute;
977
- top: 16px;
978
- left: -12px;
979
- visibility: hidden;
980
- pointer-events: none;
981
- opacity: 0;
982
- transition: transform 0.3s 0.1s, opacity 0.3s 0.1s, visibility 0.3s 0.1s;
983
- background-color: var(--r-main-50);
984
- border: 1px solid var(--r-main-100);
985
- border-radius: 8px;
960
+ .r-sidebar-p {
986
961
  margin: 0;
987
- padding: 2px 6px;
988
- min-width: 120px;
989
- max-width: 180px;
990
- box-sizing: border-box;
962
+ padding: 4px 10px;
991
963
  }
992
964
 
993
- .r-dropdown-link {
965
+ .r-sidebar-heading {
966
+ color: var(--r-main-900);
967
+ font-weight: 600;
968
+ margin-block-end: 4px;
969
+ }
970
+ .r-sidebar-heading:not(:first-child) {
971
+ margin-block-start: 12px;
972
+ }
973
+
974
+ .r-sidebar-link {
994
975
  display: block;
995
- width: 100%;
976
+ padding: 4px 10px;
977
+ color: inherit;
978
+ border-bottom: 2px solid transparent;
979
+ border-radius: 2px;
996
980
  text-decoration: none;
997
- color: var(--r-main-700);
998
- padding: 4px 8px;
999
- margin-top: 4px;
1000
- margin-bottom: 4px;
1001
- border-radius: 4px;
1002
- transition: background-color 0.2s;
1003
- box-sizing: border-box;
981
+ transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s, color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1004
982
  }
1005
- .r-dropdown-link:hover {
1006
- color: var(--r-main-900);
983
+
984
+ .r-sidebar-link._target {
985
+ color: var(--r-primary-950);
986
+ background-color: var(--r-main-50);
987
+ }
988
+
989
+ .r-sidebar-link:hover {
990
+ color: var(--r-primary-800);
1007
991
  background-color: var(--r-main-100);
992
+ transition-delay: initial;
993
+ }
994
+ .r-sidebar-link:hover::before {
995
+ background-color: currentColor;
996
+ transition-delay: initial;
1008
997
  }
1009
998
 
1010
- .r-dropdown-link._active {
999
+ .r-sidebar-link._active {
1011
1000
  color: var(--r-primary-700);
1012
- }.r-header-social {
1013
- display: flex;
1014
- flex: 1;
1015
- justify-content: flex-end;
1001
+ background-color: var(--r-main-50);
1016
1002
  }
1017
- @media screen and (width >= 1024px) {
1018
- .r-header-social {
1019
- flex: none;
1020
- justify-content: unset;
1021
- }
1003
+ .r-sidebar-link._active::before {
1004
+ background-color: currentColor;
1022
1005
  }
1023
1006
 
1024
- .r-header-social-git {
1025
- color: var(--r-main-700);
1026
- transition: color 0.2s;
1007
+ .r-sidebar-drop-btn {
1008
+ position: absolute;
1009
+ right: 3px;
1010
+ top: 5px;
1011
+ border-radius: 4px;
1012
+ padding: 4px;
1013
+ list-style: none;
1014
+ cursor: pointer;
1015
+ transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
1027
1016
  }
1028
- .r-header-social-git:hover, .r-header-social-git:focus {
1029
- color: var(--r-main-950);
1030
- }.r-container {
1031
- max-width: 1180px;
1032
- padding-right: 12px;
1033
- padding-left: 12px;
1034
- margin-right: auto;
1035
- margin-left: auto;
1036
- box-sizing: border-box;
1037
- }.r-keylink {
1017
+ .r-sidebar-drop-btn:hover {
1018
+ color: var(--r-primary-500);
1019
+ transition-delay: initial;
1020
+ }
1021
+ .r-sidebar-drop-btn::before {
1022
+ content: "";
1023
+ position: absolute;
1024
+ inset: -4px;
1025
+ }
1026
+ .r-sidebar-drop-btn::-webkit-details-marker {
1027
+ display: none;
1028
+ }
1029
+
1030
+ .r-sidebar-drop-icon {
1038
1031
  display: block;
1039
- position: relative;
1040
- padding: 8px 12px;
1041
- border: 2px solid var(--r-main-500);
1042
- border-radius: 6px;
1043
- text-decoration: none;
1044
- background: var(--r-main-50);
1032
+ transition: transform 0.2s;
1045
1033
  }
1046
1034
 
1047
- .r-keylink:not(:focus) {
1048
- width: 1px !important;
1049
- height: 1px !important;
1050
- padding: 0 !important;
1051
- overflow: hidden !important;
1052
- clip: rect(1px, 1px, 1px, 1px) !important;
1053
- border: 0 !important;
1054
- user-select: none;
1055
- pointer-events: none;
1056
- box-sizing: border-box;
1035
+ .r-sidebar-drop[open] > .r-sidebar-drop-btn > .r-sidebar-drop-icon {
1036
+ transform: rotate(90deg);
1057
1037
  }.r-theme-switcher {
1058
1038
  position: relative;
1059
1039
  display: flex;
@@ -1090,157 +1070,94 @@
1090
1070
  z-index: 1;
1091
1071
  transition: color 0.2s 0.1s, fill 0.2s;
1092
1072
  }
1093
- .r-theme-switcher-btn:hover {
1094
- color: var(--r-main-50);
1095
- fill: var(--r-main-50);
1096
- }
1097
-
1098
- .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
1099
- left: 2px;
1100
- }
1101
-
1102
- .r-theme-dark:not(.r-theme-system) .r-theme-switcher-btn__dark {
1103
- color: var(--r-main-950);
1104
- pointer-events: none;
1105
- }
1106
-
1107
- .r-theme-switcher::before,
1108
- .r-theme-system .r-theme-switcher::before {
1109
- left: 38px;
1110
- }
1111
-
1112
- .r-theme-system .r-theme-switcher-btn__system {
1113
- color: var(--r-main-950);
1114
- pointer-events: none;
1115
- }
1116
-
1117
- .r-theme-light:not(.r-theme-system) .r-theme-switcher::before {
1118
- left: 74px;
1119
- }
1120
-
1121
- .r-theme-light:not(.r-theme-system) .r-theme-switcher-btn__light {
1122
- color: var(--r-main-950);
1123
- pointer-events: none;
1124
- }
1125
-
1126
- .r-theme-switcher-svg {
1127
- display: block;
1128
- }.r-breadcrumbs {
1129
- grid-area: breadcrumbs;
1130
- list-style: none;
1131
- margin: 0;
1132
- padding: 20px 0 0;
1133
- line-height: 2;
1134
- }
1135
- @media screen and (width >= 768px) {
1136
- .r-breadcrumbs {
1137
- padding: 32px 0 0;
1138
- }
1139
- }
1140
-
1141
- .r-breadcrumb {
1142
- display: inline;
1143
- }
1144
-
1145
- .r-breadcrumb._previous::after {
1146
- content: "/";
1147
- font-weight: 600;
1148
- margin-inline: 8px;
1149
- }
1150
-
1151
- .r-breadcrumb-link {
1152
- color: var(--r-main-700);
1153
- text-decoration: none;
1154
- }
1155
- .r-breadcrumb-link:hover {
1156
- color: var(--r-primary-800);
1073
+ .r-theme-switcher-btn:hover {
1074
+ color: var(--r-main-50);
1075
+ fill: var(--r-main-50);
1157
1076
  }
1158
1077
 
1159
- .r-breadcrumb-link,
1160
- .r-breadcrumb-title {
1161
- display: inline;
1162
- padding: 6px 0;
1163
- margin: 0;
1078
+ .r-theme-dark:not(.r-theme-system) .r-theme-switcher::before {
1079
+ left: 2px;
1164
1080
  }
1165
1081
 
1166
- .r-breadcrumb-title {
1082
+ .r-theme-dark:not(.r-theme-system) .r-theme-switcher-btn__dark {
1167
1083
  color: var(--r-main-950);
1168
- font-weight: 600;
1169
- }.r-pagination {
1170
- grid-area: pagination;
1171
- display: grid;
1172
- grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
1173
- gap: 16px;
1174
- margin-bottom: 40px;
1084
+ pointer-events: none;
1175
1085
  }
1176
1086
 
1177
- .r-pagination-item {
1178
- position: relative;
1179
- padding-top: 8px;
1180
- padding-bottom: 8px;
1181
- text-decoration: none;
1182
- font-size: 14px;
1183
- color: var(--r-main-800);
1087
+ .r-theme-switcher::before,
1088
+ .r-theme-system .r-theme-switcher::before {
1089
+ left: 38px;
1184
1090
  }
1185
- .r-pagination-item:hover {
1091
+
1092
+ .r-theme-system .r-theme-switcher-btn__system {
1186
1093
  color: var(--r-main-950);
1094
+ pointer-events: none;
1187
1095
  }
1188
1096
 
1189
- .r-pagination-item._prev {
1190
- padding-left: 28px;
1097
+ .r-theme-light:not(.r-theme-system) .r-theme-switcher::before {
1098
+ left: 74px;
1191
1099
  }
1192
1100
 
1193
- .r-pagination-item._next {
1194
- text-align: right;
1195
- padding-right: 28px;
1101
+ .r-theme-light:not(.r-theme-system) .r-theme-switcher-btn__light {
1102
+ color: var(--r-main-950);
1103
+ pointer-events: none;
1196
1104
  }
1197
1105
 
1198
- .r-pagination-text {
1106
+ .r-theme-switcher-svg {
1199
1107
  display: block;
1200
- line-height: 2;
1108
+ }.r-keylink {
1109
+ display: block;
1110
+ position: relative;
1111
+ padding: 8px 12px;
1112
+ border: 2px solid var(--r-main-500);
1113
+ border-radius: 6px;
1114
+ text-decoration: none;
1115
+ background: var(--r-main-50);
1201
1116
  }
1202
1117
 
1203
- .r-pagination-title {
1204
- font-weight: 600;
1205
- font-size: 16px;
1118
+ .r-keylink:not(:focus) {
1119
+ width: 1px !important;
1120
+ height: 1px !important;
1121
+ padding: 0 !important;
1122
+ overflow: hidden !important;
1123
+ clip: rect(1px, 1px, 1px, 1px) !important;
1124
+ border: 0 !important;
1125
+ user-select: none;
1126
+ pointer-events: none;
1127
+ box-sizing: border-box;
1128
+ }.r-git-logo {
1129
+ display: block;
1130
+ }.r-external-mark {
1131
+ position: relative;
1132
+ vertical-align: text-top;
1133
+ display: inline-block;
1134
+ margin-left: -4px;
1135
+ margin-right: 2px;
1136
+ width: 6px;
1137
+ height: 6px;
1138
+ box-sizing: border-box;
1206
1139
  }
1207
-
1208
- .r-pagination-icon {
1140
+ .r-external-mark::after {
1141
+ content: "";
1209
1142
  position: absolute;
1210
- top: 50%;
1211
- transform: translateY(-50%);
1212
- transition: transform 0.2s;
1213
- }
1214
-
1215
- .r-pagination-icon._prev {
1216
- left: 0;
1217
- }
1218
- .r-pagination-item:hover .r-pagination-icon._prev {
1219
- transform: translate(-4px, -50%);
1220
- }
1221
- @media screen and (width >= 1180px) {
1222
- .r-pagination-item:hover .r-pagination-icon._prev {
1223
- transform: translate(-8px, -50%);
1224
- }
1225
- }
1226
-
1227
- .r-pagination-icon._next {
1143
+ top: 0;
1228
1144
  right: 0;
1145
+ width: 100%;
1146
+ height: 100%;
1147
+ border-top: 1px solid currentColor;
1148
+ border-right: 1px solid currentColor;
1149
+ box-sizing: border-box;
1229
1150
  }
1230
- .r-pagination-item:hover .r-pagination-icon._next {
1231
- transform: translate(4px, -50%);
1232
- }
1233
- @media screen and (width >= 1180px) {
1234
- .r-pagination-item:hover .r-pagination-icon._next {
1235
- transform: translate(8px, -50%);
1236
- }
1237
- }
1238
-
1239
- .r-pagination-svg {
1240
- display: block;
1241
- }.r-last-modified {
1242
- color: var(--r-main-700);
1243
- margin-block-start: 16px;
1151
+ .r-external-mark::before {
1152
+ content: "";
1153
+ position: absolute;
1154
+ top: 0;
1155
+ right: 0;
1156
+ width: 3px;
1157
+ height: 3px;
1158
+ background-color: currentColor;
1159
+ border-radius: 0 0 0 4px;
1160
+ box-sizing: border-box;
1244
1161
  }.r-contents {
1245
1162
  grid-area: contents;
1246
1163
  }
@@ -1422,90 +1339,225 @@
1422
1339
  mask-position: 0 100% !important;
1423
1340
  }
1424
1341
 
1425
- .r-contents-link._nested + .r-contents-link._visited:not(._nested)::after {
1426
- mask-position: 100% 0 !important;
1342
+ .r-contents-link._nested + .r-contents-link._visited:not(._nested)::after {
1343
+ mask-position: 100% 0 !important;
1344
+ }
1345
+
1346
+ @media screen and (width >= 1180px) {
1347
+ .r-contents-link._visited {
1348
+ color: var(--r-main-600);
1349
+ }
1350
+ }
1351
+ @media screen and (width >= 1180px) {
1352
+ .r-contents-link._visited::after {
1353
+ mask-position: 0 0 !important;
1354
+ }
1355
+ }
1356
+ .r-contents-link._visited::after, .r-contents-link._visited + .r-contents-link::after {
1357
+ transition: mask-position 0.3s;
1358
+ }
1359
+
1360
+ @media screen and (width >= 1180px) {
1361
+ .r-contents-link._active {
1362
+ color: var(--r-main-900);
1363
+ }
1364
+ }
1365
+
1366
+ .r-contents-actions {
1367
+ position: sticky;
1368
+ bottom: 0;
1369
+ padding-top: 2px;
1370
+ padding-bottom: 2px;
1371
+ margin-top: 20px;
1372
+ background-color: var(--r-main-50);
1373
+ }
1374
+ @media screen and (width < 1180px) {
1375
+ .r-contents-actions {
1376
+ display: none;
1377
+ }
1378
+ }
1379
+
1380
+ .r-contents-git {
1381
+ display: block;
1382
+ width: 100%;
1383
+ position: relative;
1384
+ color: var(--r-main-600);
1385
+ text-decoration: none;
1386
+ padding-top: 10px;
1387
+ padding-bottom: 10px;
1388
+ font-size: 14px;
1389
+ font-weight: 600;
1390
+ box-sizing: border-box;
1391
+ }
1392
+ .r-contents-git:hover {
1393
+ color: var(--r-main-900);
1394
+ }.r-breadcrumbs {
1395
+ grid-area: breadcrumbs;
1396
+ list-style: none;
1397
+ margin: 0;
1398
+ padding: 20px 0 0;
1399
+ line-height: 2;
1400
+ }
1401
+ @media screen and (width >= 768px) {
1402
+ .r-breadcrumbs {
1403
+ padding: 32px 0 0;
1404
+ }
1405
+ }
1406
+
1407
+ .r-breadcrumb {
1408
+ display: inline;
1409
+ }
1410
+
1411
+ .r-breadcrumb._previous::after {
1412
+ content: "/";
1413
+ font-weight: 600;
1414
+ margin-inline: 8px;
1415
+ }
1416
+
1417
+ .r-breadcrumb-link {
1418
+ color: var(--r-main-700);
1419
+ text-decoration: none;
1420
+ }
1421
+ .r-breadcrumb-link:hover {
1422
+ color: var(--r-primary-800);
1423
+ }
1424
+
1425
+ .r-breadcrumb-link,
1426
+ .r-breadcrumb-title {
1427
+ display: inline;
1428
+ padding: 6px 0;
1429
+ margin: 0;
1430
+ }
1431
+
1432
+ .r-breadcrumb-title {
1433
+ color: var(--r-main-950);
1434
+ font-weight: 600;
1435
+ }.r-pagination {
1436
+ grid-area: pagination;
1437
+ display: grid;
1438
+ grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
1439
+ gap: 16px;
1440
+ margin-bottom: 40px;
1441
+ }
1442
+
1443
+ .r-pagination-item {
1444
+ position: relative;
1445
+ padding-top: 8px;
1446
+ padding-bottom: 8px;
1447
+ text-decoration: none;
1448
+ font-size: 14px;
1449
+ color: var(--r-main-800);
1450
+ }
1451
+ .r-pagination-item:hover {
1452
+ color: var(--r-main-950);
1453
+ }
1454
+
1455
+ .r-pagination-item._prev {
1456
+ padding-left: 28px;
1457
+ }
1458
+
1459
+ .r-pagination-item._next {
1460
+ text-align: right;
1461
+ padding-right: 28px;
1462
+ }
1463
+
1464
+ .r-pagination-text {
1465
+ display: block;
1466
+ line-height: 2;
1467
+ }
1468
+
1469
+ .r-pagination-title {
1470
+ font-weight: 600;
1471
+ font-size: 16px;
1427
1472
  }
1428
1473
 
1429
- @media screen and (width >= 1180px) {
1430
- .r-contents-link._visited {
1431
- color: var(--r-main-600);
1432
- }
1474
+ .r-pagination-icon {
1475
+ position: absolute;
1476
+ top: 50%;
1477
+ transform: translateY(-50%);
1478
+ transition: transform 0.2s;
1433
1479
  }
1434
- @media screen and (width >= 1180px) {
1435
- .r-contents-link._visited::after {
1436
- mask-position: 0 0 !important;
1437
- }
1480
+
1481
+ .r-pagination-icon._prev {
1482
+ left: 0;
1438
1483
  }
1439
- .r-contents-link._visited::after, .r-contents-link._visited + .r-contents-link::after {
1440
- transition: mask-position 0.3s;
1484
+ .r-pagination-item:hover .r-pagination-icon._prev {
1485
+ transform: translate(-4px, -50%);
1441
1486
  }
1442
-
1443
1487
  @media screen and (width >= 1180px) {
1444
- .r-contents-link._active {
1445
- color: var(--r-main-900);
1488
+ .r-pagination-item:hover .r-pagination-icon._prev {
1489
+ transform: translate(-8px, -50%);
1446
1490
  }
1447
1491
  }
1448
1492
 
1449
- .r-contents-actions {
1450
- position: sticky;
1451
- bottom: 0;
1452
- padding-top: 2px;
1453
- padding-bottom: 2px;
1454
- margin-top: 20px;
1455
- background-color: var(--r-main-50);
1493
+ .r-pagination-icon._next {
1494
+ right: 0;
1456
1495
  }
1457
- @media screen and (width < 1180px) {
1458
- .r-contents-actions {
1459
- display: none;
1496
+ .r-pagination-item:hover .r-pagination-icon._next {
1497
+ transform: translate(4px, -50%);
1498
+ }
1499
+ @media screen and (width >= 1180px) {
1500
+ .r-pagination-item:hover .r-pagination-icon._next {
1501
+ transform: translate(8px, -50%);
1460
1502
  }
1461
1503
  }
1462
1504
 
1463
- .r-contents-git {
1505
+ .r-pagination-svg {
1464
1506
  display: block;
1507
+ }.r-last-modified {
1508
+ color: var(--r-main-700);
1509
+ margin-block-start: 16px;
1510
+ }.r-modal {
1511
+ position: fixed;
1512
+ left: 0;
1513
+ bottom: 0;
1465
1514
  width: 100%;
1466
- position: relative;
1467
- color: var(--r-main-600);
1468
- text-decoration: none;
1469
- padding-top: 10px;
1470
- padding-bottom: 10px;
1471
- font-size: 14px;
1472
- font-weight: 600;
1515
+ background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
1516
+ border: 2px solid var(--r-main-200);
1517
+ border-radius: 12px 12px 0 0;
1518
+ opacity: 0;
1519
+ visibility: hidden;
1520
+ pointer-events: none;
1521
+ transition: opacity 0.2s 0.1s, transform 0.2s 0.1s, visibility 0.01s 0.2s 0.1s;
1522
+ z-index: 1000;
1473
1523
  box-sizing: border-box;
1474
1524
  }
1475
- .r-contents-git:hover {
1476
- color: var(--r-main-900);
1477
- }.r-git-logo {
1478
- display: block;
1479
- }.r-external-mark {
1480
- position: relative;
1481
- vertical-align: text-top;
1482
- display: inline-block;
1483
- margin-left: -4px;
1484
- margin-right: 2px;
1485
- width: 6px;
1486
- height: 6px;
1487
- box-sizing: border-box;
1525
+ @media screen and (width >= 768px) {
1526
+ .r-modal {
1527
+ top: 10%;
1528
+ left: 50%;
1529
+ bottom: auto;
1530
+ transform: translateX(-50%) scale(0.95);
1531
+ max-width: 480px;
1532
+ border-radius: 12px;
1533
+ }
1488
1534
  }
1489
- .r-external-mark::after {
1490
- content: "";
1491
- position: absolute;
1492
- top: 0;
1493
- right: 0;
1494
- width: 100%;
1495
- height: 100%;
1496
- border-top: 1px solid currentColor;
1497
- border-right: 1px solid currentColor;
1498
- box-sizing: border-box;
1535
+
1536
+ .r-modal._visible {
1537
+ opacity: 1;
1538
+ visibility: visible;
1539
+ transition: opacity 0.2s 0.1s, transform 0.2s 0.1s;
1540
+ pointer-events: all;
1499
1541
  }
1500
- .r-external-mark::before {
1501
- content: "";
1502
- position: absolute;
1503
- top: 0;
1504
- right: 0;
1505
- width: 3px;
1506
- height: 3px;
1507
- background-color: currentColor;
1508
- border-radius: 0 0 0 4px;
1542
+ @media screen and (width >= 768px) {
1543
+ .r-modal._visible {
1544
+ transform: translateX(-50%) scale(1);
1545
+ }
1546
+ }.r-kbd-container {
1547
+ display: flex;
1548
+ gap: 4px;
1549
+ font-size: 14px;
1550
+ cursor: pointer;
1551
+ }
1552
+ .r-kbd-container:hover {
1553
+ color: var(--r-main-950);
1554
+ }.r-kbd-key {
1555
+ background-color: var(--r-main-200);
1556
+ font-size: 12px;
1557
+ border-radius: 4px;
1558
+ padding: 5px 8px;
1559
+ min-width: 24px;
1560
+ text-align: center;
1509
1561
  box-sizing: border-box;
1510
1562
  }.r-anchor-heading:hover .r-anchor-heading-link {
1511
1563
  visibility: visible;
@@ -1641,6 +1693,19 @@
1641
1693
  }
1642
1694
  .r-blockquote-caution .r-blockquote-title {
1643
1695
  color: var(--r-caution);
1696
+ }.r-code-block {
1697
+ font-family: var(--monospace-font, monospace, monospace);
1698
+ font-size: 16px;
1699
+ line-height: 1.33;
1700
+ border-radius: 6px;
1701
+ padding: 16px 20px;
1702
+ margin: 0;
1703
+ color: var(--r-primary-800);
1704
+ background-color: var(--r-main-50);
1705
+ overflow-x: auto;
1706
+ scrollbar-width: thin;
1707
+ scrollbar-color: var(--r-main-200) transparent;
1708
+ box-sizing: border-box;
1644
1709
  }.r-code-span {
1645
1710
  font-family: var(--monospace-font, monospace, monospace);
1646
1711
  background-color: var(--r-main-100);
@@ -1702,19 +1767,6 @@
1702
1767
  line-height: 1.8;
1703
1768
  margin-block-start: 1em;
1704
1769
  margin-block-end: 1em;
1705
- }.r-code-block {
1706
- font-family: var(--monospace-font, monospace, monospace);
1707
- font-size: 16px;
1708
- line-height: 1.33;
1709
- border-radius: 6px;
1710
- padding: 16px 20px;
1711
- margin: 0;
1712
- color: var(--r-primary-800);
1713
- background-color: var(--r-main-50);
1714
- overflow-x: auto;
1715
- scrollbar-width: thin;
1716
- scrollbar-color: var(--r-main-200) transparent;
1717
- box-sizing: border-box;
1718
1770
  }.r-tabs {
1719
1771
  margin-block-start: 1.5em;
1720
1772
  margin-block-end: 1.75em;
@@ -1756,58 +1808,27 @@
1756
1808
 
1757
1809
  .r-tab-header-code {
1758
1810
  font-family: var(--monospace-font, monospace, monospace);
1759
- }.r-kbd-key {
1760
- background-color: var(--r-main-200);
1761
- font-size: 12px;
1762
- border-radius: 4px;
1763
- padding: 5px 8px;
1764
- min-width: 24px;
1765
- text-align: center;
1766
- box-sizing: border-box;
1767
- }.r-kbd-container {
1768
- display: flex;
1769
- gap: 4px;
1770
- font-size: 14px;
1771
- cursor: pointer;
1772
- }
1773
- .r-kbd-container:hover {
1774
- color: var(--r-main-950);
1775
- }.r-modal {
1811
+ }.r-backdrop {
1776
1812
  position: fixed;
1777
- left: 0;
1813
+ top: 0;
1814
+ right: 0;
1778
1815
  bottom: 0;
1779
- width: 100%;
1780
- background-color: color-mix(in srgb, var(--r-main-50) 95%, transparent);
1781
- border: 2px solid var(--r-main-200);
1782
- border-radius: 12px 12px 0 0;
1816
+ left: 0;
1817
+ background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
1783
1818
  opacity: 0;
1784
1819
  visibility: hidden;
1785
1820
  pointer-events: none;
1786
- transition: opacity 0.2s 0.1s, transform 0.2s 0.1s, visibility 0.01s 0.2s 0.1s;
1787
- z-index: 1000;
1788
- box-sizing: border-box;
1789
- }
1790
- @media screen and (width >= 768px) {
1791
- .r-modal {
1792
- top: 10%;
1793
- left: 50%;
1794
- bottom: auto;
1795
- transform: translateX(-50%) scale(0.95);
1796
- max-width: 480px;
1797
- border-radius: 12px;
1798
- }
1821
+ backdrop-filter: blur(4px);
1822
+ transition: background 0.05s, opacity 0.2s, visibility 0.01s 0.15s;
1823
+ z-index: 100;
1799
1824
  }
1800
1825
 
1801
- .r-modal._visible {
1826
+ .r-backdrop._visible {
1802
1827
  opacity: 1;
1828
+ background: color-mix(in srgb, var(--r-main-900) 10%, transparent 100%);
1803
1829
  visibility: visible;
1804
- transition: opacity 0.2s 0.1s, transform 0.2s 0.1s;
1830
+ transition: background 0.05s, opacity 0.2s;
1805
1831
  pointer-events: all;
1806
- }
1807
- @media screen and (width >= 768px) {
1808
- .r-modal._visible {
1809
- transform: translateX(-50%) scale(1);
1810
- }
1811
1832
  }.r-copy-button {
1812
1833
  position: relative;
1813
1834
  padding: 6px;
@@ -1947,11 +1968,6 @@
1947
1968
  padding-inline-start: 2rem;
1948
1969
  margin-block-start: 1em;
1949
1970
  margin-block-end: 1em;
1950
- }.r-table {
1951
- min-width: 100%;
1952
- text-align: left;
1953
- border-collapse: collapse;
1954
- box-sizing: border-box;
1955
1971
  }.r-td {
1956
1972
  padding: 6px 12px;
1957
1973
  border-bottom: 1px solid var(--r-main-400);
@@ -1961,8 +1977,15 @@
1961
1977
  border-top: 1px solid var(--r-main-500);
1962
1978
  border-bottom: 1px solid var(--r-main-500);
1963
1979
  border-collapse: collapse;
1980
+ }.r-table {
1981
+ min-width: 100%;
1982
+ text-align: left;
1983
+ border-collapse: collapse;
1984
+ box-sizing: border-box;
1964
1985
  }.r-thead {
1965
1986
  background-color: var(--r-main-100);
1987
+ }.r-task-ol {
1988
+ list-style: none;
1966
1989
  }.r-task-li.r-task-li {
1967
1990
  margin-block-start: 2px;
1968
1991
  margin-block-end: 2px;
@@ -1992,31 +2015,8 @@
1992
2015
 
1993
2016
  .r-task-label-text {
1994
2017
  vertical-align: middle;
1995
- }.r-task-ol {
1996
- list-style: none;
1997
2018
  }.r-task-ul {
1998
2019
  list-style: none;
1999
- }.r-backdrop {
2000
- position: fixed;
2001
- top: 0;
2002
- right: 0;
2003
- bottom: 0;
2004
- left: 0;
2005
- background: color-mix(in srgb, var(--r-main-900) 0%, transparent 100%);
2006
- opacity: 0;
2007
- visibility: hidden;
2008
- pointer-events: none;
2009
- backdrop-filter: blur(4px);
2010
- transition: background 0.05s, opacity 0.2s, visibility 0.01s 0.15s;
2011
- z-index: 100;
2012
- }
2013
-
2014
- .r-backdrop._visible {
2015
- opacity: 1;
2016
- background: color-mix(in srgb, var(--r-main-900) 10%, transparent 100%);
2017
- visibility: visible;
2018
- transition: background 0.05s, opacity 0.2s;
2019
- pointer-events: all;
2020
2020
  }.r-tooltip {
2021
2021
  font-family: var(--monospace-font, monospace, monospace);
2022
2022
  display: none;